Files
ionic-framework/core/src/components/tab-button/tab-button.ios.scss
2018-03-12 16:02:25 -04:00

75 lines
1.6 KiB
SCSS

@import "./tab-button";
@import "./tab-button.ios.vars";
.tab-button-ios {
max-width: $tab-button-ios-max-width;
font-size: $tab-button-ios-font-size;
color: $tab-button-ios-text-color;
fill: $tab-button-ios-icon-color;
}
.tab-button-ios.focused {
background: $tabbar-ios-background-color-focused;
}
.tab-button-ios .tab-cover {
@include padding(
$tab-button-ios-padding-top,
$tab-button-ios-padding-end,
$tab-button-ios-padding-bottom,
$tab-button-ios-padding-start);
}
.enable-hover .tab-button-ios:hover,
.tab-button-ios.tab-selected {
color: $tab-button-ios-text-color-active;
fill: $tab-button-ios-icon-color-active;
}
.tab-button-ios .tab-button-text {
@include margin(0, null, 1px, null);
min-height: $tab-button-ios-font-size + 1;
}
.tab-button-ios.has-title-only .tab-button-text {
font-size: $tab-button-ios-font-size + 2;
}
.tab-button-ios .tab-button-icon {
@include margin(4px, null, null, null);
font-size: $tab-button-ios-icon-size;
}
.tabbar-ios .tab-button-icon::before {
vertical-align: top;
}
.layout-icon-end .tab-button-ios .tab-button-text,
.layout-icon-start .tab-button-ios .tab-button-text,
.layout-icon-hide .tab-button-ios .tab-button-text,
.tab-button-ios.has-title-only .tab-button-text {
@include margin(2px, 0);
font-size: 14px;
line-height: 1.1;
}
.layout-icon-end .tab-button-ios ion-icon,
.layout-icon-start .tab-button-ios ion-icon {
@include margin(2px, null, 1px, null);
min-width: 24px;
height: 26px;
font-size: 24px;
}
.layout-title-hide .tab-button-ios ion-icon {
@include margin(0);
}