diff --git a/src/components/tabs/demoStaticTabs/index.html b/src/components/tabs/demoStaticTabs/index.html index c4af7ebabe9..1744d4653fa 100644 --- a/src/components/tabs/demoStaticTabs/index.html +++ b/src/components/tabs/demoStaticTabs/index.html @@ -22,6 +22,20 @@ data.selectedIndex = 2; + + + + View for Item #4
+ data.selectedIndex = 3; +
+
+ + + + View for Item #5
+ data.selectedIndex = 4; +
+
diff --git a/src/components/tabs/demoStaticTabs/readme.html b/src/components/tabs/demoStaticTabs/readme.html index 2fe1efc2efa..8fcb727c4e1 100644 --- a/src/components/tabs/demoStaticTabs/readme.html +++ b/src/components/tabs/demoStaticTabs/readme.html @@ -1 +1 @@ -

The Static Tabs demo how to disable and bottom-align tabs:

+

The Static Tabs demo shows how to disable and bottom-align tabs:

diff --git a/src/components/tabs/demoStaticTabs/script.js b/src/components/tabs/demoStaticTabs/script.js index 5194c5895c4..4bf34c70f23 100644 --- a/src/components/tabs/demoStaticTabs/script.js +++ b/src/components/tabs/demoStaticTabs/script.js @@ -2,7 +2,12 @@ 'use strict'; angular - .module('tabsDemoStaticTabs', ['ngMaterial'] ) + .module('tabsDemoIconTabs', ['ngMaterial'] ) + .config(function($mdIconProvider) { + $mdIconProvider + .iconSet('communication', 'img/icons/sets/communication-icons.svg') + .icon('favorite', 'img/icons/favorite.svg'); + }) .controller('AppCtrl', AppCtrl); function AppCtrl ( $scope ) { diff --git a/src/components/tabs/demoStaticTabs/style.scss b/src/components/tabs/demoStaticTabs/style.scss index 9a088828a15..3175e1366fe 100644 --- a/src/components/tabs/demoStaticTabs/style.scss +++ b/src/components/tabs/demoStaticTabs/style.scss @@ -1,13 +1,24 @@ -md-tab-content { - padding: 25px; - &:nth-child(1) { - background-color: #42A5F5; - } - &:nth-child(2) { - background-color: #689F38; - } - &:nth-child(3) { - background-color: #26C6DA; +md-content { + md-tabs { + border: 1px solid #e1e1e1; + md-tab-content { + padding: 25px; + &:nth-child(1) { + background-color: #cfd8dc; + } + &:nth-child(2) { + background-color: #ffb74d; + } + &:nth-child(3) { + background-color: #ffd54f; + } + &:nth-child(4) { + background-color: #aed581; + } + &:nth-child(5) { + background-color: #00897b; + } + } } } .after-tabs-area { diff --git a/src/components/tabs/tabs-theme.scss b/src/components/tabs/tabs-theme.scss index 1229dd2e50b..fcc09fe1ffd 100644 --- a/src/components/tabs/tabs-theme.scss +++ b/src/components/tabs/tabs-theme.scss @@ -4,7 +4,9 @@ > md-tabs-canvas { > md-pagination-wrapper { > md-tab-item:not([disabled]) { - color: '{{primary-100}}'; + &, md-icon { + color: '{{primary-100}}'; + } &.md-active, &.md-focused { &, md-icon { color: '{{primary-contrast}}'; @@ -24,7 +26,9 @@ > md-tabs-canvas { > md-pagination-wrapper { > md-tab-item:not([disabled]) { - color: '{{warn-100}}'; + &, md-icon { + color: '{{warn-100}}'; + } &.md-active, &.md-focused { &, md-icon { color: '{{warn-contrast}}'; @@ -44,7 +48,9 @@ > md-tabs-canvas { > md-pagination-wrapper { > md-tab-item:not([disabled]) { - color: '{{accent-A100}}'; + &, md-icon { + color: '{{accent-A100}}'; + } &.md-active, &.md-focused { &, md-icon { color: '{{accent-contrast}}';