From 790e3d4a8701980fb252bca0b8f21693bdcc6b01 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 30 Nov 2016 17:29:21 -0500 Subject: [PATCH] refactor(tabs): add and rename variables to style tabs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - separate toolbar and tabs variables since there are cases where they shouldn’t automatically match - add opacity to iOS tabs when a color is applied to the tabs - fix Material Design styling to match spec closes #9294 --- src/components/tabs/tabs.ios.scss | 37 +++++++++++----- src/components/tabs/tabs.md.scss | 35 ++++++++++------ src/components/tabs/tabs.wp.scss | 56 +++++++++++++++++-------- src/themes/ionic.theme.dark.ios.scss | 9 ++++ src/themes/ionic.theme.dark.md.scss | 11 +++++ src/themes/ionic.theme.dark.scss | 5 +++ src/themes/ionic.theme.dark.wp.scss | 12 ++++++ src/themes/ionic.theme.default.ios.scss | 9 ++++ src/themes/ionic.theme.default.md.scss | 8 ++++ src/themes/ionic.theme.default.scss | 5 +++ src/themes/ionic.theme.default.wp.scss | 9 ++++ 11 files changed, 154 insertions(+), 42 deletions(-) diff --git a/src/components/tabs/tabs.ios.scss b/src/components/tabs/tabs.ios.scss index d024bbec8f..4282f4d653 100644 --- a/src/components/tabs/tabs.ios.scss +++ b/src/components/tabs/tabs.ios.scss @@ -4,10 +4,7 @@ // -------------------------------------------------- /// @prop - Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top]) -$tabs-ios-border: $hairlines-width solid $toolbar-ios-border-color !default; - -/// @prop - Background color of the tabbar -$tabs-ios-background: $toolbar-ios-background !default; +$tabs-ios-border: $hairlines-width solid $tabs-ios-border-color !default; /// @prop - Padding on the tab button $tabs-ios-tab-padding: 0 2px !default; @@ -19,10 +16,16 @@ $tabs-ios-tab-max-width: 240px !default; $tabs-ios-tab-min-height: 49px !default; /// @prop - Text color of the inactive tab button -$tabs-ios-tab-color: $toolbar-ios-inactive-color !default; +$tabs-ios-tab-text-color: $tabs-ios-tab-color-inactive !default; /// @prop - Text color of the active tab button -$tabs-ios-tab-color-active: $toolbar-ios-active-color !default; +$tabs-ios-tab-text-color-active: $tabs-ios-tab-color-active !default; + +/// @prop - Icon color of the inactive tab button +$tabs-ios-tab-icon-color: $tabs-ios-tab-color-inactive !default; + +/// @prop - Icon color of the active tab button +$tabs-ios-tab-icon-color-active: $tabs-ios-tab-color-active !default; /// @prop - Font size of the tab button text $tabs-ios-tab-font-size: 10px !default; @@ -50,12 +53,16 @@ $tabs-ios-tab-icon-size: 30px !default; min-height: $tabs-ios-tab-min-height; font-size: $tabs-ios-tab-font-size; - color: $tabs-ios-tab-color; + color: $tabs-ios-tab-text-color; } .tabs-ios .tab-button:hover:not(.disable-hover), .tabs-ios .tab-button[aria-selected=true] { - color: $tabs-ios-tab-color-active; + color: $tabs-ios-tab-text-color-active; +} + +.tabs-ios .tab-button[aria-selected=true] .tab-button-icon { + color: $tabs-ios-tab-icon-color-active; } .tabs-ios .tab-button-text { @@ -77,6 +84,8 @@ $tabs-ios-tab-icon-size: 30px !default; height: $tabs-ios-tab-icon-size; font-size: $tabs-ios-tab-icon-size; + + color: $tabs-ios-tab-icon-color; } .tabs-ios .tab-button-icon::before { @@ -126,9 +135,15 @@ $tabs-ios-tab-icon-size: 30px !default; background-color: $color-base; } - .tabs-ios-#{$color-name} .tabbar .tab-button, - .tabs-ios-#{$color-name} .tabbar .tab-button:hover:not(.disable-hover), - .tabs-ios-#{$color-name} .tabbar .tab-button[aria-selected=true] { + .tabs-ios-#{$color-name} .tab-button, + .tabs-ios-#{$color-name} .tab-button-icon, + .tabs-ios-#{$color-name} .tab-button:hover:not(.disable-hover), + .tabs-ios-#{$color-name} .tab-button:hover:not(.disable-hover) .tab-button-icon { + color: rgba($color-contrast, .7); + } + + .tabs-ios-#{$color-name} .tab-button[aria-selected=true], + .tabs-ios-#{$color-name} .tab-button[aria-selected=true] .tab-button-icon { color: $color-contrast; } diff --git a/src/components/tabs/tabs.md.scss b/src/components/tabs/tabs.md.scss index cbcb7b1ccb..19f03786db 100644 --- a/src/components/tabs/tabs.md.scss +++ b/src/components/tabs/tabs.md.scss @@ -3,9 +3,6 @@ // Material Design Tabs // -------------------------------------------------- -/// @prop - Background color of the tabbar -$tabs-md-background: $toolbar-md-background !default; - /// @prop - Padding on the tab button $tabs-md-tab-padding: 0 !default; @@ -22,7 +19,16 @@ $tabs-md-tab-font-weight: normal !default; $tabs-md-tab-opacity: .7 !default; /// @prop - Text color of the inactive tab button -$tabs-md-tab-color: rgba($toolbar-md-inactive-color, $tabs-md-tab-opacity) !default; +$tabs-md-tab-text-color: rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity) !default; + +/// @prop - Text color of the active tab button +$tabs-md-tab-text-color-active: $tabs-md-tab-color-active !default; + +/// @prop - Icon color of the inactive tab button +$tabs-md-tab-icon-color: rgba($tabs-md-tab-color-inactive, $tabs-md-tab-opacity) !default; + +/// @prop - Icon color of the active tab button +$tabs-md-tab-icon-color-active: $tabs-md-tab-color-active !default; /// @prop - Padding of the active tab button $tabs-md-tab-padding-active: 0 !default; @@ -30,9 +36,6 @@ $tabs-md-tab-padding-active: 0 !default; /// @prop - Font size of the active tab button text $tabs-md-tab-font-size-active: 1.4rem !default; -/// @prop - Text color of the active tab button -$tabs-md-tab-color-active: $toolbar-md-active-color !default; - /// @prop - Margin on the tab button text $tabs-md-tab-text-margin: 0 !default; @@ -84,13 +87,13 @@ $tabs-md-tab-icon-size: 2.4rem !default; min-height: $tabs-md-tab-min-height; font-weight: $tabs-md-tab-font-weight; - color: $tabs-md-tab-color; + color: $tabs-md-tab-text-color; } .tabs-md .tab-button[aria-selected=true] { padding: $tabs-md-tab-padding-active; - color: $tabs-md-tab-color-active; + color: $tabs-md-tab-text-color-active; } @@ -132,12 +135,16 @@ $tabs-md-tab-icon-size: 2.4rem !default; font-size: $tabs-md-tab-icon-size; + color: $tabs-md-tab-icon-color; + transform-origin: $tabs-md-tab-icon-transform-origin; transition: $tabs-md-tab-icon-transition; } // Tab layout: icon-top, icon-only, title-only .tabs-md .tab-button[aria-selected=true] .tab-button-icon { + color: $tabs-md-tab-icon-color-active; + transform: $tabs-md-tab-icon-transform-active; } @@ -203,16 +210,18 @@ $tabs-md-tab-icon-size: 2.4rem !default; background-color: $color-base; } - .tabs-md-#{$color-name} .tabbar .tab-button { + .tabs-md-#{$color-name} .tab-button, + .tabs-md-#{$color-name} .tab-button-icon { color: rgba($color-contrast, $tabs-md-tab-opacity); } - .tabs-md-#{$color-name} .tabbar .tab-button:hover:not(.disable-hover), - .tabs-md-#{$color-name} .tabbar .tab-button[aria-selected=true] { + .tabs-md-#{$color-name} .tab-button:hover:not(.disable-hover), + .tabs-md-#{$color-name} .tab-button[aria-selected=true], + .tabs-md-#{$color-name} .tab-button[aria-selected=true] .tab-button-icon { color: $color-contrast; } - .tabs-md-#{$color-name} .tabbar .tab-highlight { + .tabs-md-#{$color-name} .tab-highlight { background: $color-contrast; } diff --git a/src/components/tabs/tabs.wp.scss b/src/components/tabs/tabs.wp.scss index c414e21647..a448a92ff3 100644 --- a/src/components/tabs/tabs.wp.scss +++ b/src/components/tabs/tabs.wp.scss @@ -3,9 +3,6 @@ // Windows Tabs // -------------------------------------------------- -/// @prop - Background color of the tabbar -$tabs-wp-background: $toolbar-wp-background !default; - /// @prop - Padding on the tab button $tabs-wp-tab-padding: 12px 10px 5px 10px !default; @@ -22,13 +19,19 @@ $tabs-wp-tab-font-weight: normal !default; $tabs-wp-tab-opacity: .7 !default; /// @prop - Text color of the inactive tab button -$tabs-wp-tab-color: rgba($toolbar-wp-inactive-color, $tabs-wp-tab-opacity) !default; +$tabs-wp-tab-color: rgba($tabs-wp-tab-color-inactive, $tabs-wp-tab-opacity) !default; /// @prop - Text color of the active tab button -$tabs-wp-tab-color-active: $toolbar-wp-active-color !default; +$tabs-wp-tab-color-active: $tabs-wp-tab-color-active !default; + +/// @prop - Icon color of the inactive tab button +$tabs-wp-tab-icon-color: rgba($tabs-wp-tab-color-inactive, $tabs-wp-tab-opacity) !default; + +/// @prop - Icon color of the active tab button +$tabs-wp-tab-icon-color-active: $tabs-wp-tab-color-active !default; /// @prop - Border on the inactive tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top]) -$tabs-wp-tab-border: 2px solid transparent !default; +$tabs-wp-tab-border: 2px solid $tabs-wp-border-color !default; /// @prop - Border color on the active tab button (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top]) $tabs-wp-tab-border-color-active: $tabs-wp-tab-color-active !default; @@ -66,15 +69,38 @@ $tabs-wp-tab-icon-size: 2.4rem !default; background: $tabs-wp-tab-background-activated; } +.tabs-wp[tabsPlacement=bottom] .tab-button { + border-top: $tabs-wp-tab-border; + border-bottom-width: 0; +} + +.tabs-wp[tabsPlacement=bottom] .tab-button[aria-selected=true] { + border-top-color: $tabs-wp-tab-border-color-active; +} + + +// Windows Tab Button Text +// -------------------------------------------------- + .tabs-wp .tab-button-text { margin-top: 5px; margin-bottom: 5px; } + +// Windows Tab Button Icon +// -------------------------------------------------- + .tabs-wp .tab-button-icon { min-width: $tabs-wp-tab-icon-size; font-size: $tabs-wp-tab-icon-size; + + color: $tabs-wp-tab-icon-color; +} + +.tabs-wp .tab-button[aria-selected=true] .tab-button-icon { + color: $tabs-wp-tab-icon-color-active; } .tabs-wp[tabsLayout=icon-bottom] .tab-button { @@ -99,15 +125,6 @@ $tabs-wp-tab-icon-size: 2.4rem !default; padding: 6px 10px; } -.tabs-wp[tabsPlacement=bottom] .tab-button { - border-top: $tabs-wp-tab-border; - border-bottom-width: 0; -} - -.tabs-wp[tabsPlacement=bottom] .tab-button[aria-selected=true] { - border-top-color: $tabs-wp-tab-border-color-active; -} - // Windows Tabbar Color Mixin // -------------------------------------------------- @@ -118,12 +135,15 @@ $tabs-wp-tab-icon-size: 2.4rem !default; background-color: $color-base; } - .tabs-wp-#{$color-name} .tabbar .tab-button { + .tabs-wp-#{$color-name} .tab-button, + .tabs-wp-#{$color-name} .tab-button-icon { color: rgba($color-contrast, $tabs-wp-tab-opacity); } - .tabs-wp-#{$color-name} .tabbar .tab-button:hover:not(.disable-hover), - .tabs-wp-#{$color-name} .tabbar .tab-button[aria-selected=true] { + .tabs-wp-#{$color-name} .tab-button:hover:not(.disable-hover), + .tabs-wp-#{$color-name} .tab-button:hover:not(.disable-hover) .tab-button-icon, + .tabs-wp-#{$color-name} .tab-button[aria-selected=true], + .tabs-wp-#{$color-name} .tab-button[aria-selected=true] .tab-button-icon { border-color: $color-contrast; color: $color-contrast; } diff --git a/src/themes/ionic.theme.dark.ios.scss b/src/themes/ionic.theme.dark.ios.scss index 5b22e861ba..b5d9736a01 100644 --- a/src/themes/ionic.theme.dark.ios.scss +++ b/src/themes/ionic.theme.dark.ios.scss @@ -40,6 +40,15 @@ $toolbar-ios-active-color: $toolbar-active-color !default; $toolbar-ios-inactive-color: $toolbar-inactive-color !default; +// iOS Tabs +// -------------------------------------------------- + +$tabs-ios-background: $tabs-background !default; +$tabs-ios-border-color: rgba(255, 255, 255, .1) !default; +$tabs-ios-tab-color-inactive: $tabs-tab-color-inactive !default; +$tabs-ios-tab-color-active: $tabs-tab-color-active !default; + + // iOS List // -------------------------------------------------- diff --git a/src/themes/ionic.theme.dark.md.scss b/src/themes/ionic.theme.dark.md.scss index 574b4fdcb8..baf96ed4a2 100644 --- a/src/themes/ionic.theme.dark.md.scss +++ b/src/themes/ionic.theme.dark.md.scss @@ -18,6 +18,7 @@ $font-size-md-base: $font-size-base !default; // -------------------------------------------------- $outer-content-md-background-color: $background-color !default; + // Material Design Toolbar // -------------------------------------------------- @@ -27,6 +28,15 @@ $toolbar-md-text-color: #fff !default; $toolbar-md-active-color: $toolbar-active-color !default; $toolbar-md-inactive-color: $toolbar-inactive-color !default; + +// Material Design Tabs +// -------------------------------------------------- + +$tabs-md-background: $tabs-background !default; +$tabs-md-tab-color-inactive: $tabs-tab-color-inactive !default; +$tabs-md-tab-color-active: $tabs-tab-color-active !default; + + // Material Design Card // -------------------------------------------------- @@ -34,6 +44,7 @@ $card-md-header-color: #ddd !default; $card-md-title-text-color: #fff !default; $card-md-text-color: #ddd !default; + // Material Design List // -------------------------------------------------- diff --git a/src/themes/ionic.theme.dark.scss b/src/themes/ionic.theme.dark.scss index 04b234d80b..bd8f3da4e1 100644 --- a/src/themes/ionic.theme.dark.scss +++ b/src/themes/ionic.theme.dark.scss @@ -32,6 +32,11 @@ $toolbar-text-color: $text-color !default; $toolbar-active-color: $link-color !default; $toolbar-inactive-color: #8c8c8c !default; +$tabs-background: #151515 !default; +$tabs-border-color: #222 !default; +$tabs-tab-color-inactive: #8c8c8c !default; +$tabs-tab-color-active: $link-color !default; + $list-text-color: $text-color !default; $list-background-color: #242424 !default; $list-border-color: #000 !default; diff --git a/src/themes/ionic.theme.dark.wp.scss b/src/themes/ionic.theme.dark.wp.scss index b127bdfd22..b24a7b51ab 100644 --- a/src/themes/ionic.theme.dark.wp.scss +++ b/src/themes/ionic.theme.dark.wp.scss @@ -18,6 +18,7 @@ $font-size-wp-base: $font-size-base !default; // -------------------------------------------------- $outer-content-wp-background-color: $background-color !default; + // Windows Toolbar // -------------------------------------------------- @@ -27,6 +28,16 @@ $toolbar-wp-text-color: #fff !default; $toolbar-wp-active-color: $toolbar-active-color !default; $toolbar-wp-inactive-color: $toolbar-inactive-color !default; + +// Windows Tabs +// -------------------------------------------------- + +$tabs-wp-background: $tabs-background !default; +$tabs-wp-border-color: transparent !default; +$tabs-wp-tab-color-inactive: $tabs-tab-color-inactive !default; +$tabs-wp-tab-color-active: $tabs-tab-color-active !default; + + // Windows Card // -------------------------------------------------- @@ -34,6 +45,7 @@ $card-wp-header-color: #ddd !default; $card-wp-title-text-color: #fff !default; $card-wp-text-color: #ddd !default; + // Windows List // -------------------------------------------------- diff --git a/src/themes/ionic.theme.default.ios.scss b/src/themes/ionic.theme.default.ios.scss index 20e00ac0dc..be748e992b 100644 --- a/src/themes/ionic.theme.default.ios.scss +++ b/src/themes/ionic.theme.default.ios.scss @@ -29,6 +29,15 @@ $toolbar-ios-active-color: $toolbar-active-color !default; $toolbar-ios-inactive-color: $toolbar-inactive-color !default; +// iOS Tabs +// -------------------------------------------------- + +$tabs-ios-background: $tabs-background !default; +$tabs-ios-border-color: rgba(0, 0, 0, .3) !default; +$tabs-ios-tab-color-inactive: $tabs-tab-color-inactive !default; +$tabs-ios-tab-color-active: $tabs-tab-color-active !default; + + // iOS List // -------------------------------------------------- diff --git a/src/themes/ionic.theme.default.md.scss b/src/themes/ionic.theme.default.md.scss index 86dca77f3d..f0696efc06 100644 --- a/src/themes/ionic.theme.default.md.scss +++ b/src/themes/ionic.theme.default.md.scss @@ -29,6 +29,14 @@ $toolbar-md-active-color: $toolbar-active-color !default; $toolbar-md-inactive-color: $toolbar-inactive-color !default; +// Material Design Tabs +// -------------------------------------------------- + +$tabs-md-background: $tabs-background !default; +$tabs-md-tab-color-inactive: #3c3c3c !default; +$tabs-md-tab-color-active: $tabs-tab-color-active !default; + + // Material Design List // -------------------------------------------------- diff --git a/src/themes/ionic.theme.default.scss b/src/themes/ionic.theme.default.scss index 6e09262bec..4215d2a627 100644 --- a/src/themes/ionic.theme.default.scss +++ b/src/themes/ionic.theme.default.scss @@ -32,6 +32,11 @@ $toolbar-text-color: $text-color !default; $toolbar-active-color: $link-color !default; $toolbar-inactive-color: #8c8c8c !default; +$tabs-background: #f8f8f8 !default; +$tabs-border-color: #b2b2b2 !default; +$tabs-tab-color-inactive: #8c8c8c !default; +$tabs-tab-color-active: $link-color !default; + $list-text-color: $text-color !default; $list-background-color: $background-color !default; $list-border-color: #c8c7cc !default; diff --git a/src/themes/ionic.theme.default.wp.scss b/src/themes/ionic.theme.default.wp.scss index 4620c2b034..fa2daefcb0 100644 --- a/src/themes/ionic.theme.default.wp.scss +++ b/src/themes/ionic.theme.default.wp.scss @@ -29,6 +29,15 @@ $toolbar-wp-active-color: $toolbar-active-color !default; $toolbar-wp-inactive-color: $toolbar-inactive-color !default; +// Windows Tabs +// -------------------------------------------------- + +$tabs-wp-background: $tabs-background !default; +$tabs-wp-border-color: transparent !default; +$tabs-wp-tab-color-inactive: $tabs-tab-color-inactive !default; +$tabs-wp-tab-color-active: $tabs-tab-color-active !default; + + // Windows List // --------------------------------------------------