feat(tabs): changes default state of tabs to be transparent.

Closes #1250 Closes #1393
angular · Feb 10, 2015 · 732cbc9 · 732cbc9
1 parent 9c69c5c
commit 732cbc9
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 35 deletions.
diff --git a/src/components/tabs/demoDynamicTabs/index.html b/src/components/tabs/demoDynamicTabs/index.html
@@ -7,7 +7,7 @@
 
     <div class="demo-tab tab{{$index%4}}" layout="column" layout-fill layout-align="space-around center">
         <div ng-bind="tab.content"></div>
-        <md-button class="md-warn" ng-click="removeTab( tab )">
+        <md-button class="md-primary md-raised" ng-click="removeTab( tab )">
           Remove Tab
         </md-button>
       </div>

diff --git a/src/components/tabs/demoDynamicTabs/style.css b/src/components/tabs/demoDynamicTabs/style.css
@@ -3,36 +3,21 @@
   margin-bottom: 40px;
 }
 
-.md-button {
-  display:block;
-}
-
 .demo-tab {
   height: 300px;
   text-align: center;
 }
 .tab0, .tab1, .tab2, .tab3 {
-  background-color: #bbdefb;
 }
 
-.md-header {
-  background-color: #1976D2 !important;
-}
-md-tab {
-  color: #90caf9 !important;
-}
-md-tab.active,
-md-tab:focus {
-  color: white !important;
+md-tabs, md-tabs .md-header {
+  border-bottom: 1px solid #D8D8D8;
 }
 md-tab[disabled] {
   opacity: 0.5;
 }
-.md-header .md-ripple {
-  border-color: #FFFF8D !important;
-}
-md-tabs-ink-bar {
-  background-color: #FFFF8D !important;
+.md-tab-content {
+  background: white;
 }
 
 .title {
@@ -57,10 +42,6 @@ form > [layout] > * {
   width: 264px;
 }
 
-.md-button {
-  max-height: 30px;
-}
-
 .md-button.add-tab {
   margin-top:20px;
   max-height:30px !important;

diff --git a/src/components/tabs/tabs-theme.scss b/src/components/tabs/tabs-theme.scss
@@ -1,6 +1,6 @@
 md-tabs.md-THEME_NAME-theme {
   .md-header {
-    background-color: '{{primary-color}}';
+    background-color: transparent;
   }
 
   &.md-accent {
@@ -16,6 +16,34 @@ md-tabs.md-THEME_NAME-theme {
     }
   }
 
+  &.md-primary {
+    .md-header {
+      background-color: '{{primary-color}}';
+    }
+    md-tab:not([disabled]) {
+      color: '{{primary-100}}';
+      &.active {
+        color: '{{primary-contrast}}';
+      }
+    }
+    md-tab {
+      color: '{{primary-100}}';
+      &[disabled] {
+        color: '{{foreground-3}}';
+      }
+      &:focus {
+        color: '{{primary-contrast}}';
+        background-color: '{{primary-contrast-0.1}}';
+      }
+      &.active {
+        color: '{{primary-contrast}}';
+      }
+      .md-ripple-container {
+        color: '{{primary-contrast}}';
+      }
+    }
+  }
+
   &.md-warn {
     .md-header {
       background-color: '{{warn-color}}';
@@ -31,24 +59,23 @@ md-tabs.md-THEME_NAME-theme {
 
 
   md-tabs-ink-bar {
-    color: '{{primary-contrast}}';
-    background: '{{primary-contrast}}';
+    color: '{{accent-color}}';
+    background: '{{accent-color}}';
   }
 
   md-tab {
-    color: '{{primary-100}}';
-    &.active {
-      color: '{{primary-contrast}}';
-    }
+    color: '{{foreground-2}}';
     &[disabled] {
-      color: '{{foreground-4}}';
+      color: '{{foreground-3}}';
     }
     &:focus {
-      color: '{{primary-contrast}}';
-      background-color: '{{primary-contrast-0.1}}';
+      color: '{{foreground-1}}';
+    }
+    &.active {
+      color: '{{primary-color}}';
     }
     .md-ripple-container {
-      color: '{{primary-contrast}}';
+      color: '{{accent-100}}';
     }
   }
 }