javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(tabs): update Sass variable naming to be more consistent

Browse Source 
Added comments on each Sass variable.

references #5651 references #7455
This commit is contained in:
Brandy Carney
2016-07-28 23:11:26 -05:00
parent 4dc53a2d9d
commit af01841c86
3 changed files with 143 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4,61 +4,78 @@
// iOS Tabs
// --------------------------------------------------
$tabbar-ios-background: $toolbar-ios-background !default;
$tabbar-ios-item-padding: 0 2px !default;
$tabbar-ios-item-font-size: 10px !default;
$tabbar-ios-item-icon-size: 30px !default;
$tabbar-ios-height: 49px !default;
// Border on the tabbar (border-top when [tabsPlacement=bottom] and border-bottom when [tabsPlacement=top])
$tabs-ios-border: 1px solid $toolbar-ios-border-color !default;
$tab-button-ios-max-width: 240px !default;
$tab-button-ios-active-color: $toolbar-ios-active-color !default;
$tab-button-ios-inactive-color: $toolbar-ios-inactive-color !default;
// Background color of the tabbar
$tabs-ios-background: $toolbar-ios-background !default;
// Padding on the tab button
$tabs-ios-tab-padding: 0 2px !default;
// Max width of the tab button
$tabs-ios-tab-max-width: 240px !default;
// Min height of the tab button
$tabs-ios-tab-min-height: 49px !default;
// Text color of the inactive tab button
$tabs-ios-tab-color: $toolbar-ios-inactive-color !default;
// Text color of the active tab button
$tabs-ios-tab-color-active: $toolbar-ios-active-color !default;
// Font size of the tab button text
$tabs-ios-tab-font-size: 10px !default;
// Size of the tab button icon
$tabs-ios-tab-icon-size: 30px !default;
ion-tabbar {
justify-content: center;
border-top: 1px solid $toolbar-ios-border-color;
background: $tabbar-ios-background;
border-top: $tabs-ios-border;
background: $tabs-ios-background;
}
ion-tabs[tabsPlacement=top] ion-tabbar {
border-top: 0;
border-bottom: 1px solid $toolbar-ios-border-color;
border-bottom: $tabs-ios-border;
}
.tab-button {
padding: $tabbar-ios-item-padding;
padding: $tabs-ios-tab-padding;
max-width: $tab-button-ios-max-width;
min-height: $tabbar-ios-height;
max-width: $tabs-ios-tab-max-width;
min-height: $tabs-ios-tab-min-height;
color: $tab-button-ios-inactive-color;
color: $tabs-ios-tab-color;
}
.tab-button:hover:not(.disable-hover),
.tab-button[aria-selected=true] {
color: $tab-button-ios-active-color;
color: $tabs-ios-tab-color-active;
}
.tab-button-text {
margin-top: 0;
margin-bottom: 0;
min-height: $tabbar-ios-item-font-size + 1;
min-height: $tabs-ios-tab-font-size + 1;
font-size: $tabbar-ios-item-font-size;
font-size: $tabs-ios-tab-font-size;
}
.has-title-only .tab-button-text {
font-size: $tabbar-ios-item-font-size + 2;
font-size: $tabs-ios-tab-font-size + 2;
}
.tab-button-icon {
min-width: $tabbar-ios-item-icon-size + 5;
height: $tabbar-ios-item-icon-size;
min-width: $tabs-ios-tab-icon-size + 5;
height: $tabs-ios-tab-icon-size;
font-size: $tabbar-ios-item-icon-size;
font-size: $tabs-ios-tab-icon-size;
&::before {
vertical-align: top;
@ -83,7 +100,7 @@ ion-tabs[tabsPlacement=top] ion-tabbar {
[tabsLayout=icon-hide] .tab-button,
.tab-button.has-title-only {
min-height: $tabbar-ios-height - 8;
min-height: $tabs-ios-height - 8;
.tab-button-text {
margin: 2px 0;
@ -95,7 +112,7 @@ ion-tabs[tabsPlacement=top] ion-tabbar {
[tabsLayout=title-hide] .tab-button,
.tab-button.icon-only {
min-height: $tabbar-ios-height - 8;
min-height: $tabs-ios-height - 8;
}
&.hairlines ion-tabs {
@ -137,6 +154,5 @@ ion-tabs[tabsPlacement=top] ion-tabbar {
// --------------------------------------------------
@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
@include tabbar-ios($color-name, $color-base, $color-contrast);
}

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

@ -4,52 +4,77 @@
// Material Design Tabs
// --------------------------------------------------
$tabbar-md-background: $toolbar-md-background !default;
$tabbar-md-item-padding: 8px 0 10px 0 !default;
$tabbar-md-item-font-size: 1.4rem !default;
$tabbar-md-item-font-weight: normal !default;
$tabbar-md-item-icon-size: 2.4rem !default;
$tabbar-md-item-height: 5.6rem !default;
// Background color of the tabbar
$tabs-md-background: $toolbar-md-background !default;
$tab-button-md-active-color: $toolbar-md-active-color !default;
$tab-button-md-active-font-size: 1.5rem !default;
$tab-button-md-active-padding-top: 6px !default;
$tab-button-md-inactive-opacity: .7 !default;
$tab-button-md-inactive-color: rgba($toolbar-md-inactive-color, $tab-button-md-inactive-opacity) !default;
$tab-button-md-text-transform: none !default;
$tab-button-md-text-margin: 6px 0 !default;
// Padding on the tab button
$tabs-md-tab-padding: 8px 0 10px 0 !default;
// Min height of the tab button
$tabs-md-tab-min-height: 5.6rem !default;
// Font size of the inactive tab button text
$tabs-md-tab-font-size: 1.4rem !default;
// Font weight of the tab button text
$tabs-md-tab-font-weight: normal !default;
// Opacity of the inactive tab button
$tabs-md-tab-opacity: .7 !default;
// Text color of the inactive tab button
$tabs-md-tab-color: rgba($toolbar-md-inactive-color, $tabs-md-tab-opacity) !default;
// Padding of the active tab button
$tabs-md-tab-padding-active: 6px 0 10px 0 !default;
// Font size of the active tab button text
$tabs-md-tab-font-size-active: 1.5rem !default;
// Text color of the active tab button
$tabs-md-tab-color-active: $toolbar-md-active-color !default;
// Margin on the tab button text
$tabs-md-tab-text-margin: 6px 0 !default;
// Text transformation for the tab button text
$tabs-md-tab-text-transform: none !default;
// Size of the tab button icon
$tabs-md-tab-icon-size: 2.4rem !default;
ion-tabbar {
background: $tabbar-md-background;
background: $tabs-md-background;
}
.tab-button {
padding: $tabbar-md-item-padding;
padding: $tabs-md-tab-padding;
min-height: $tabbar-md-item-height;
min-height: $tabs-md-tab-min-height;
font-size: $tabbar-md-item-font-size;
font-weight: $tabbar-md-item-font-weight;
color: $tab-button-md-inactive-color;
font-size: $tabs-md-tab-font-size;
font-weight: $tabs-md-tab-font-weight;
color: $tabs-md-tab-color;
&[aria-selected=true] {
color: $tab-button-md-active-color;
font-size: $tab-button-md-active-font-size;
padding-top: $tab-button-md-active-padding-top;
padding: $tabs-md-tab-padding-active;
font-size: $tabs-md-tab-font-size-active;
color: $tabs-md-tab-color-active;
}
}
.tab-button-text {
margin: $tab-button-md-text-margin;
margin: $tabs-md-tab-text-margin;
text-transform: $tab-button-md-text-transform;
text-transform: $tabs-md-tab-text-transform;
}
.tab-button-icon {
min-width: $tabbar-md-item-icon-size + 5;
min-width: $tabs-md-tab-icon-size + 5;
font-size: $tabbar-md-item-icon-size;
font-size: $tabs-md-tab-icon-size;
}
[tabsLayout=icon-top] {
@ -99,7 +124,7 @@ ion-tabbar {
width: 1px;
height: 2px;
background: $tab-button-md-active-color;
background: $tabs-md-tab-color-active;
transform: translateZ(0);
transform-origin: 0 0;
@ -124,7 +149,7 @@ ion-tabbar {
background-color: $color-base;
.tab-button {
color: rgba($color-contrast, $tab-button-md-inactive-opacity);
color: rgba($color-contrast, $tabs-md-tab-opacity);
}
.tab-button:hover:not(.disable-hover),

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

@ -4,43 +4,66 @@
// Windows Tabs
// --------------------------------------------------
$tabbar-wp-background: $toolbar-wp-background !default;
$tabbar-wp-item-padding: 12px 10px 5px 10px !default;
$tabbar-wp-item-font-size: 1.2rem !default;
$tabbar-wp-item-font-weight: normal !default;
$tabbar-wp-item-icon-size: 2.4rem !default;
$tabbar-wp-item-height: 4.8rem !default;
// Background color of the tabbar
$tabs-wp-background: $toolbar-wp-background !default;
$tab-button-wp-active-color: $toolbar-wp-active-color !default;
$tab-button-wp-inactive-opacity: .7 !default;
$tab-button-wp-inactive-color: rgba($toolbar-wp-inactive-color, $tab-button-wp-inactive-opacity) !default;
// Padding on the tab button
$tabs-wp-tab-padding: 12px 10px 5px 10px !default;
// Min height of the tab button
$tabs-wp-tab-min-height: 4.8rem !default;
// 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;
// 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;
// Font size of the tab button text
$tabs-wp-tab-font-size: 1.2rem !default;
// Font weight of the tab button text
$tabs-wp-tab-font-weight: normal !default;
// Opacity of the inactive tab button
$tabs-wp-tab-opacity: .7 !default;
// Text color of the inactive tab button
$tabs-wp-tab-color: rgba($toolbar-wp-color, $tabs-wp-tab-opacity) !default;
// Text color of the active tab button
$tabs-wp-tab-color-active: $toolbar-wp-active-color !default;
// Background of the tab button when pressed
$tabs-wp-tab-background-activated: rgba(0, 0, 0, .1) !default;
// Size of the tab button icon
$tabs-wp-tab-icon-size: 2.4rem !default;
$tab-button-wp-background-activated: rgba(0, 0, 0, .1) !default;
ion-tabbar {
background: $tabbar-wp-background;
background: $tabs-wp-background;
}
.tab-button {
padding: $tabbar-wp-item-padding;
padding: $tabs-wp-tab-padding;
min-height: $tabbar-wp-item-height;
min-height: $tabs-wp-tab-min-height;
border-bottom: 2px solid transparent;
border-bottom: $tabs-wp-tab-border;
border-radius: 0;
font-size: $tabbar-wp-item-font-size;
font-weight: $tabbar-wp-item-font-weight;
color: $tab-button-wp-inactive-color;
font-size: $tabs-wp-tab-font-size;
font-weight: $tabs-wp-tab-font-weight;
color: $tabs-wp-tab-color;
box-shadow: none;
&[aria-selected=true] {
border-bottom-color: $tab-button-wp-active-color;
color: $tab-button-wp-active-color;
border-bottom-color: $tabs-wp-tab-border-color-active;
color: $tabs-wp-tab-color-active;
}
&.activated {
background: $tab-button-wp-background-activated;
background: $tabs-wp-tab-background-activated;
}
}
@ -50,9 +73,9 @@ ion-tabbar {
}
.tab-button-icon {
min-width: $tabbar-wp-item-icon-size;
min-width: $tabs-wp-tab-icon-size;
font-size: $tabbar-wp-item-icon-size;
font-size: $tabs-wp-tab-icon-size;
}
[tabsLayout=icon-bottom] .tab-button {
@ -77,11 +100,11 @@ ion-tabbar {
}
[tabsPlacement=bottom] .tab-button {
border-top: 2px solid transparent;
border-top: $tabs-wp-tab-border;
border-bottom-width: 0;
&[aria-selected=true] {
border-top-color: $tab-button-wp-active-color;
border-top-color: $tabs-wp-tab-border-color-active;
}
}
@ -97,7 +120,7 @@ ion-tabbar {
background-color: $color-base;
.tab-button {
color: rgba($color-contrast, $tab-button-wp-inactive-opacity);
color: rgba($color-contrast, $tabs-wp-tab-opacity);
}
.tab-button:hover:not(.disable-hover),