javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(tabs): add and rename variables to style tabs

Browse Source 
- 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
This commit is contained in:
Brandy Carney
2016-11-30 17:29:21 -05:00
parent 551673c3bf
commit 790e3d4a87
11 changed files with 154 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/tabs/tabs.ios.scss
View File

@@ -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;
}

35
src/components/tabs/tabs.md.scss
View File

@@ -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;
}

56
src/components/tabs/tabs.wp.scss
View File

@@ -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;
}