Reduce icon size in page sub-header (#4411)

cloudfoundry · Jun 30, 2020 · d3aab40 · d3aab40
1 parent ee0e1b3
commit d3aab40
Showing 1 changed file with 21 additions and 1 deletion.
diff --git a/src/frontend/packages/core/sass/mat-desktop.scss b/src/frontend/packages/core/sass/mat-desktop.scss
@@ -2,7 +2,7 @@
 // See: https://material.io/guidelines/components/menus.html#menus-specs
 
 $desktop-font-size: 14px;
-$desktop-menu-item-height: 36px;
+$desktop-menu-item-height: 32px;
 $desktop-menu-vertical-padding: 8px;
 
 // Remove 1px border
@@ -73,4 +73,24 @@ $desktop-toggle-button-item-height: $desktop-menu-item-height - 2px;
     font-size: $desktop-font-size;
     height: 56px;
   }
+
+  // Smaller icons in the Toolbars in the page sub-nav
+  .page-header-sub-nav {
+    mat-icon {
+      font-size: 18px;
+      height: 18px;
+      width: 18px;
+    }
+
+    .mat-icon-button {
+      line-height: 34px;
+      height: 34px;
+      width: 34px;
+      mat-icon {
+        // Also stops the wobble on the refresh icon
+        line-height: normal;
+      }
+    }
+
+  }
 }