javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-21 04:53:58 +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

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

@ -5,43 +5,58 @@
// -------------------------------------------------- // --------------------------------------------------
// Background color of the tabbar // Background color of the tabbar
$tabs-md-background: $toolbar-md-background !default; $tabs-md-background: $toolbar-md-background !default;
// Padding on the tab button // Padding on the tab button
$tabs-md-tab-padding: 8px 0 10px 0 !default; $tabs-md-tab-padding: 8px 0 10px 0 !default;
// Min height of the tab button // Min height of the tab button
$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;
// Opacity of the inactive tab button // Opacity of the inactive tab button
$tabs-md-tab-opacity: .7 !default; $tabs-md-tab-opacity: .7 !default;
// Text color of the inactive tab button // Text color of the inactive tab button
$tabs-md-tab-color: rgba($toolbar-md-inactive-color, $tabs-md-tab-opacity) !default; $tabs-md-tab-color: rgba($toolbar-md-inactive-color, $tabs-md-tab-opacity) !default;
// Padding of the active tab button // Padding of the active tab button
$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;
// 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;
ion-tabbar { ion-tabbar {
@ -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,20 +100,18 @@ 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;
}
} }
} }