mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
95 lines
2.9 KiB
SCSS
95 lines
2.9 KiB
SCSS
@import "./tab-button";
|
|
@import "./tab-button.md.vars";
|
|
|
|
// Material Design Tab Button
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
max-width: 168px;
|
|
|
|
font-weight: $tab-button-md-font-weight;
|
|
|
|
color: $tab-button-md-text-color;
|
|
|
|
--color-selected: #{$tabbar-md-text-color-active};
|
|
--background-focused: #{$tabbar-md-background-color-focused};
|
|
}
|
|
|
|
.tab-button-native {
|
|
@include padding($tab-button-md-padding-top, $tab-button-md-padding-end, $tab-button-md-padding-bottom, $tab-button-md-padding-start);
|
|
|
|
display: flex;
|
|
}
|
|
|
|
// Material Design Tab Button Text
|
|
// --------------------------------------------------
|
|
|
|
.tab-button-text {
|
|
@include margin($tab-button-md-text-margin-top, $tab-button-md-text-margin-end, $tab-button-md-text-margin-bottom, $tab-button-md-text-margin-start);
|
|
|
|
@include transform-origin(center, bottom);
|
|
|
|
font-size: $tab-button-md-font-size;
|
|
|
|
text-transform: $tab-button-md-text-capitalization;
|
|
transition: $tab-button-md-text-transition;
|
|
}
|
|
|
|
:host(.tab-selected) .tab-button-text {
|
|
transform: $tab-button-md-text-transform-active;
|
|
transition: $tab-button-md-text-transition;
|
|
}
|
|
|
|
// Material Design Tab Button Icon
|
|
// --------------------------------------------------
|
|
|
|
.tab-button-icon {
|
|
@include transform-origin(center, center);
|
|
|
|
width: $tab-button-md-icon-size;
|
|
height: $tab-button-md-icon-size;
|
|
|
|
font-size: $tab-button-md-icon-size;
|
|
|
|
transition: $tab-button-md-icon-transition;
|
|
}
|
|
|
|
// Tab layout: icon-top, icon-only, label-only
|
|
:host(.tab-selected) .tab-button-icon {
|
|
@include transform(translate3d($tab-button-md-icon-transform-x-active, $tab-button-md-icon-transform-y-active, $tab-button-md-icon-transform-z-active));
|
|
}
|
|
|
|
|
|
// Material Design Tab with Icon or Title only
|
|
// --------------------------------------------------
|
|
|
|
// Tab layout: icon-end
|
|
.layout-icon-end .tab-button-md.tab-selected .tab-button-icon {
|
|
@include transform(translate3d($tab-button-md-icon-right-transform-x-active, $tab-button-md-icon-right-transform-y-active, $tab-button-md-icon-right-transform-z-active));
|
|
}
|
|
|
|
// Tab layout: icon-bottom
|
|
.layout-icon-bottom .tab-button-md.tab-selected .tab-button-icon {
|
|
@include transform(translate3d($tab-button-md-icon-bottom-transform-x-active, $tab-button-md-icon-bottom-transform-y-active, $tab-button-md-icon-bottom-transform-z-active));
|
|
}
|
|
|
|
// Tab layout: icon-start
|
|
.layout-icon-start .tab-button-md.tab-selected .tab-button-icon {
|
|
@include transform(translate3d($tab-button-md-icon-left-transform-x-active, $tab-button-md-icon-left-transform-y-active, $tab-button-md-icon-left-transform-z-active));
|
|
}
|
|
|
|
.layout-icon-top .tab-button-md .has-icon .tab-button-text {
|
|
@include margin(null, null, -2px, null);
|
|
}
|
|
|
|
.layout-icon-bottom .tab-button-md .tab-button-text {
|
|
@include transform-origin(center, top);
|
|
|
|
@include margin(-2px, null, null, null);
|
|
}
|
|
|
|
.layout-icon-hide .tab-button-md,
|
|
.layout-label-hide .tab-button-md {
|
|
justify-content: center;
|
|
}
|