Fix styling (kubernetes#3506)

* Fix styling * Fix license check * Fix license check * Update _theming.scss
bio170 · Jan 13, 2019 · 01c2a35 · 01c2a35
1 parent b15d88c
commit 01c2a35
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 16 deletions.
diff --git a/src/app/frontend/_theming.scss b/src/app/frontend/_theming.scss
@@ -59,6 +59,15 @@
     &::-webkit-scrollbar-thumb {
       background-color: $border;
     }
+
+    // Only show the scrollbar on hover, but always enable scrolling.
+    .kd-nav {
+      & > *:not(:hover) {
+        &::-webkit-scrollbar-thumb {
+          background-color: transparent !important;
+        }
+      }
+    }
   }
 
   // Universal application styles.
@@ -261,4 +270,8 @@
       }
     }
   }
+
+  .mat-drawer-side {
+    border-right: 0;
+  }
 }
diff --git a/src/app/frontend/chrome/nav/style.scss b/src/app/frontend/chrome/nav/style.scss
@@ -26,13 +26,6 @@
     margin: $baseline-grid $baseline-grid (2 * $baseline-grid) 0;
   }
 
-  // Only show the scrollbar on hover, but always enable scrolling.
-  &:not(:hover) {
-    &::-webkit-scrollbar-thumb {
-      background-color: transparent;
-    }
-  }
-
   // Children of kd-nav should not shrink to prevent layout issues on IE.
   & > * {
     flex-shrink: 0;

diff --git a/src/app/frontend/common/components/chips/template.html b/src/app/frontend/common/components/chips/template.html
@@ -16,15 +16,15 @@
 
 <mat-chip-list>
   <ng-container *ngFor="let key of keys; let i = index">
-    <mat-chip *ngIf="isVisible(i)">
-
+    <mat-chip *ngIf="isVisible(i)"
+              [disableRipple]="true">
       <ng-container *ngIf="isTooLong(map[key])">
-        <a href
+        <a class="kd-clickable"
            (click)="openChipDialog(key, map[key])">{{key}}</a>
       </ng-container>
 
       <ng-container *ngIf="!isTooLong(map[key])">
-        <span>
+        <ng-container>
           {{key}}
           <ng-container *ngIf="map[key]">:&nbsp;</ng-container>
           <ng-container *ngIf="map[key]">
@@ -36,7 +36,7 @@
             </ng-container>
             <ng-container *ngIf="!isHref(map[key])">{{map[key]}}</ng-container>
           </ng-container>
-        </span>
+        </ng-container>
       </ng-container>
 
     </mat-chip>
@@ -45,9 +45,10 @@
             (click)="toggleView()"
             color="primary"
             class="kd-clickable"
-            [selected]="true">
-    <span *ngIf="isShowingAll">Show less</span>
-    <span *ngIf="!isShowingAll">Show all</span>
+            [selected]="true"
+            [disableRipple]="true">
+    <ng-container *ngIf="isShowingAll">Show less</ng-container>
+    <ng-container *ngIf="!isShowingAll">Show all</ng-container>
   </mat-chip>
-  <span *ngIf="keys.length === 0">-</span>
+  <ng-container *ngIf="keys.length === 0">-</ng-container>
 </mat-chip-list>
diff --git a/src/app/frontend/index.scss b/src/app/frontend/index.scss
@@ -74,7 +74,19 @@ code {
 .mat-chip {
   box-shadow: none !important;
   font-weight: $regular-font-weight;
+  height: fit-content !important;
   transition: none !important;
+  word-break: break-all !important;
+}
+
+.mat-standard-chip {
+  &:hover::after {
+    opacity: 0 !important;
+  }
+
+  &:focus::after {
+    opacity: 0 !important;
+  }
 }
 
 .mat-header-row,