mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
62 lines
1.5 KiB
SCSS
62 lines
1.5 KiB
SCSS
@import "./tabbar";
|
|
@import "./tabbar.ios.vars";
|
|
@import "./tab-button.ios";
|
|
|
|
// iOS Tabs
|
|
// --------------------------------------------------
|
|
|
|
:host {
|
|
// default color / background
|
|
--background: #{$tabbar-ios-background-color};
|
|
--background-rgb: var(--ion-tabbar-translucent-background-color-rgb, 248, 248, 248);
|
|
--color: #{$tab-button-ios-text-color};
|
|
--color-selected: #{$tabbar-ios-text-color-active};
|
|
--background-focused: #{$tabbar-ios-background-color-focused};
|
|
|
|
justify-content: center;
|
|
|
|
height: $tabbar-ios-height;
|
|
|
|
border-top: $tabbar-ios-border;
|
|
|
|
contain: strict;
|
|
}
|
|
|
|
:host(.placement-top) {
|
|
border-top: 0;
|
|
border-bottom: $tabbar-ios-border;
|
|
}
|
|
|
|
// iOS Translucent Tabbar
|
|
// --------------------------------------------------
|
|
|
|
:host(.tabbar-translucent) {
|
|
background-color: #{current-color(base, $tabbar-ios-translucent-background-color-alpha)};
|
|
backdrop-filter: $tabbar-ios-translucent-filter;
|
|
}
|
|
|
|
|
|
// iOS Tabbar Layout
|
|
// --------------------------------------------------
|
|
|
|
:host(.layout-icon-end) .tab-btn,
|
|
:host(.layout-icon-start) .tab-btn,
|
|
:host(.layout-icon-hide) .tab-btn {
|
|
--label-margin-top: 2px;
|
|
--label-margin-bottom: 2px;
|
|
--label-font-size: 14px;
|
|
--label-line-height: 1.1;
|
|
}
|
|
|
|
:host(.layout-icon-end) .tab-btn,
|
|
:host(.layout-icon-start) .tab-btn {
|
|
--icon-margin-top: 2px;
|
|
--icon-margin-bottom: 1px;
|
|
--icon-min-width: 24px;
|
|
--icon-height: 26px;
|
|
--icon-font-size: 24px;
|
|
}
|
|
|
|
:host(.layout-label-hide) .tab-btn {
|
|
--icon-margin: 0;
|
|
} |