Rework sass for smaller output

angular · Jun 22, 2017 · 80b5d88 · 80b5d88
1 parent 9abc786
commit 80b5d88
Showing 1 changed file with 62 additions and 71 deletions.
diff --git a/src/lib/tabs/_tabs-theme.scss b/src/lib/tabs/_tabs-theme.scss
@@ -39,105 +39,96 @@
     border-color: mat-color($foreground, disabled-text);
   }
 
-  .mat-tab-group, .mat-tab-nav-bar {
-    &.mat-primary {
-      @include _mat-tabs-color($primary);
-
-      &.mat-background-primary {
-        @include _mat-tabs-color($primary, $primary);
-      }
+  // Remove header border when there is a background color
+  .mat-tab-group[class*='mat-background-'] .mat-tab-header,
+  .mat-tab-nav-bar[class*='mat-background-'] {
+    border-bottom: none;
+    border-top: none;
+  }
 
-      &.mat-background-accent {
-        @include _mat-tabs-color($primary, $accent);
-      }
+  .mat-tab-group, .mat-tab-nav-bar {
 
-      &.mat-background-warn {
-        @include _mat-tabs-color($primary, $warn);
-      }
+    // Set the foreground color of the tabs
+    &.mat-primary {
+      @include _mat-tab-label-focus($primary);
+      @include _mat-ink-bar($primary);
     }
 
     &.mat-accent {
-      @include _mat-tabs-color($accent);
+      @include _mat-tab-label-focus($accent);
+      @include _mat-ink-bar($accent);
+    }
 
-      &.mat-background-primary {
-        @include _mat-tabs-color($accent, $primary);
-      }
+    &.mat-warn {
+      @include _mat-tab-label-focus($warn);
+      @include _mat-ink-bar($warn);
+    }
 
-      &.mat-background-accent {
-        @include _mat-tabs-color($accent, $accent);
-      }
+    // Set background color of the tabs and override focus color
+    &.mat-background-primary {
+      @include _mat-tab-label-focus($primary);
+      @include _mat-tabs-background($primary);
+    }
 
-      &.mat-background-warn {
-        @include _mat-tabs-color($accent, $warn);
-      }
+    &.mat-background-accent {
+      @include _mat-tab-label-focus($accent);
+      @include _mat-tabs-background($accent);
     }
 
-    &.mat-warn {
-      @include _mat-tabs-color($warn);
+    &.mat-background-warn {
+      @include _mat-tab-label-focus($warn);
+      @include _mat-tabs-background($warn);
+    }
 
-      &.mat-background-primary {
-        @include _mat-tabs-color($warn, $primary);
-      }
+    // Override inkbar color when theme color and background are the same
+    &.mat-primary.mat-background-primary {
+      @include _mat-ink-bar($primary, default-contrast);
+    }
 
-      &.mat-background-accent {
-        @include _mat-tabs-color($warn, $accent);
-      }
+    &.mat-accent.mat-background-accent {
+      @include _mat-ink-bar($accent, default-contrast);
+    }
 
-      &.mat-background-warn {
-        @include _mat-tabs-color($warn, $warn);
-      }
+    &.mat-warn.mat-background-warn {
+      @include _mat-ink-bar($warn, default-contrast);
     }
   }
 }
 
-@mixin _mat-tabs-color($color, $background-color: null) {
-
-  $tab-focus-color: if($background-color, $background-color, $color);
+@mixin _mat-ink-bar($color, $hue: default) {
+  .mat-ink-bar {
+    background-color: mat-color($color, $hue);
+  }
+}
 
-  // Focus the tab label
+@mixin _mat-tab-label-focus($tab-focus-color) {
   .mat-tab-label:focus, .mat-tab-link:focus {
     background-color: mat-color($tab-focus-color, lighter, 0.3);
   }
+}
 
-  // Set the ink bar to the theme color or default-contrast if
-  // the theme color and background color are the same
-  .mat-ink-bar {
-    background-color: mat-color($color);
-
-    @if $background-color == $color {
-      background-color: mat-color($background-color, default-contrast);
-    }
+@mixin _mat-tabs-background($background-color) {
+  // Set background color for the tab group
+  .mat-tab-header, .mat-tab-links {
+    background-color: mat-color($background-color);
   }
 
-  @if $background-color {
-    // Set background color for the tab group
-    .mat-tab-header, .mat-tab-links {
-      background-color: mat-color($background-color);
-    }
-
-    // Set labels to contrast against background
-    .mat-tab-label, .mat-tab-link {
-      color: mat-color($background-color, default-contrast);
-
-      &.mat-tab-disabled {
-        color: mat-color($background-color, default-contrast, 0.4);
-      }
-    }
+  // Set labels to contrast against background
+  .mat-tab-label, .mat-tab-link {
+    color: mat-color($background-color, default-contrast);
 
-    // Set pagination chevrons to contrast background
-    .mat-tab-header-pagination-chevron {
-      border-color: mat-color($background-color, default-contrast);
+    &.mat-tab-disabled {
+      color: mat-color($background-color, default-contrast, 0.4);
     }
+  }
 
-    .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
-      border-color: mat-color($background-color, default-contrast, 0.4);
-    }
+  // Set pagination chevrons to contrast background
+  .mat-tab-header-pagination-chevron {
+    border-color: mat-color($background-color, default-contrast);
+  }
 
-    // Remove header border
-    .mat-tab-header {
-      border-bottom: none;
-      border-top: none;
-    }
+  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
+    border-color: mat-color($background-color, default-contrast, 0.4);
   }
 }