mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-26 08:13:34 +08:00
53 lines
1.3 KiB
SCSS
53 lines
1.3 KiB
SCSS
@import "./tab-button";
|
|
@import "./tab-button.md.vars";
|
|
|
|
// Material Design Tab Button
|
|
// --------------------------------------------------
|
|
|
|
.tab-btn {
|
|
@include padding($tab-button-md-padding-top, $tab-button-md-padding-end, $tab-button-md-padding-bottom, $tab-button-md-padding-start);
|
|
|
|
max-width: 168px;
|
|
|
|
font-weight: $tab-button-md-font-weight;
|
|
}
|
|
|
|
// Material Design Tab Button Text
|
|
// --------------------------------------------------
|
|
|
|
.tab-btn-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);
|
|
|
|
transform: var(--label-transform);
|
|
|
|
transition: $tab-button-md-text-transition;
|
|
|
|
font-size: $tab-button-md-font-size;
|
|
|
|
text-transform: $tab-button-md-text-capitalization;
|
|
}
|
|
|
|
.tab-btn-selected .tab-btn-text {
|
|
--label-transform: #{$tab-button-md-text-transform-active};
|
|
|
|
transition: $tab-button-md-text-transition;
|
|
}
|
|
|
|
// Material Design Tab Button Icon
|
|
// --------------------------------------------------
|
|
|
|
.tab-btn-icon {
|
|
@include transform-origin(center, center);
|
|
|
|
width: $tab-button-md-icon-size;
|
|
height: $tab-button-md-icon-size;
|
|
|
|
transform: var(--icon-transform);
|
|
|
|
transition: $tab-button-md-icon-transition;
|
|
|
|
font-size: $tab-button-md-icon-size;
|
|
}
|
|
|