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

feat(tabs): add the transition for material design tabs

Browse Source 
refactored the sass naming to use `text-capitalization` instead of
`text-transform` since it now has an actual `transform` property and I
think this will be less confusing than having a `text-text-transform`
and a `text-transform`.

references #7455
This commit is contained in:
Brandy Carney
2016-08-01 16:22:17 -04:00
parent 8bf1a353fd
commit eea7e6ba69
1 changed files with 44 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,7 +14,7 @@ $tabs-md-tab-padding: 8px 0 10px 0 !default;
$tabs-md-tab-min-height: 5.6rem !default; $tabs-md-tab-min-height: 5.6rem !default;
// Font size of the inactive tab button text // Font size of the inactive tab button text
$tabs-md-tab-font-size: 1.4rem !default; $tabs-md-tab-font-size: 1.2rem !default;
// Font weight of the tab button text // Font weight of the tab button text
$tabs-md-tab-font-weight: normal !default; $tabs-md-tab-font-weight: normal !default;
@ -29,7 +29,7 @@ $tabs-md-tab-color: rgba($toolbar-md-inactive-color, $tabs-md-tab
$tabs-md-tab-padding-active: 6px 0 10px 0 !default; $tabs-md-tab-padding-active: 6px 0 10px 0 !default;
// Font size of the active tab button text // Font size of the active tab button text
$tabs-md-tab-font-size-active: 1.5rem !default; $tabs-md-tab-font-size-active: 1.4rem !default;
// Text color of the active tab button // Text color of the active tab button
$tabs-md-tab-color-active: $toolbar-md-active-color !default; $tabs-md-tab-color-active: $toolbar-md-active-color !default;
@ -37,8 +37,23 @@ $tabs-md-tab-color-active: $toolbar-md-active-color !default;
// Margin on the tab button text // Margin on the tab button text
$tabs-md-tab-text-margin: 6px 0 !default; $tabs-md-tab-text-margin: 6px 0 !default;
// Text transformation for the tab button text // Capitalization of the tab button text
$tabs-md-tab-text-transform: none !default; $tabs-md-tab-text-capitalization: none !default;
// Transform for the tab button text
$tabs-md-tab-text-transform: scale(.85) !default;
// Transform origin for the tab button text
$tabs-md-tab-text-transform-origin: bottom center !default;
// Margin on the active tab button text
$tabs-md-tab-text-margin-active: 7px 0 !default;
// Transform for the active tab button text
$tabs-md-tab-text-transform-active: scale(1) !default;
// Text transition for the tab button text
$tabs-md-tab-text-transition: transform 200ms ease-in-out !default;
// Size of the tab button icon // Size of the tab button icon
$tabs-md-tab-icon-size: 2.4rem !default; $tabs-md-tab-icon-size: 2.4rem !default;
@ -53,7 +68,6 @@ ion-tabbar {
min-height: $tabs-md-tab-min-height; min-height: $tabs-md-tab-min-height;
font-size: $tabs-md-tab-font-size;
font-weight: $tabs-md-tab-font-weight; font-weight: $tabs-md-tab-font-weight;
color: $tabs-md-tab-color; color: $tabs-md-tab-color;
@ -68,7 +82,16 @@ ion-tabbar {
.tab-button-text { .tab-button-text {
margin: $tabs-md-tab-text-margin; margin: $tabs-md-tab-text-margin;
text-transform: $tabs-md-tab-text-transform; text-transform: $tabs-md-tab-text-capitalization;
transform: $tabs-md-tab-text-transform;
transform-origin: $tabs-md-tab-text-transform-origin;
transition: $tabs-md-tab-text-transition;
}
.tab-button[aria-selected=true] .tab-button-text {
margin: $tabs-md-tab-text-margin-active;
transform: $tabs-md-tab-text-transform-active;
} }
.tab-button-icon { .tab-button-icon {
@ -77,22 +100,20 @@ ion-tabbar {
font-size: $tabs-md-tab-icon-size; font-size: $tabs-md-tab-icon-size;
} }
[tabsLayout=icon-top] { [tabsLayout=icon-top] .has-icon .tab-button-text {
.has-icon .tab-button-text {
margin-bottom: 0; margin-bottom: 0;
} }
}
[tabsLayout=icon-bottom] { [tabsLayout=icon-bottom] {
.tab-button { .tab-button {
padding-top: 8px; padding-top: 8px;
padding-bottom: 8px; padding-bottom: 8px;
}
.tab-button-text { .tab-button-text {
margin-top: 0; margin-top: 0;
} }
} }
}
[tabsLayout=icon-right] .tab-button, [tabsLayout=icon-right] .tab-button,
[tabsLayout=icon-left] .tab-button { [tabsLayout=icon-left] .tab-button {