mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
74 lines
1.6 KiB
SCSS
74 lines
1.6 KiB
SCSS
@import "../../themes/ionic.globals";
|
|
|
|
:host {
|
|
/**
|
|
* @prop --background: Background of the tab bar
|
|
* @prop --border: Border of the tab bar
|
|
* @prop --color: Color of the tab bar
|
|
*/
|
|
|
|
@include padding-horizontal(var(--ion-safe-area-left), var(--ion-safe-area-right));
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
width: auto;
|
|
|
|
padding-bottom: var(--ion-safe-area-bottom, 0);
|
|
|
|
border-top: var(--border);
|
|
|
|
background: var(--background);
|
|
color: var(--color);
|
|
|
|
text-align: center;
|
|
|
|
contain: strict;
|
|
user-select: none;
|
|
z-index: $z-index-toolbar;
|
|
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
box-sizing: content-box !important;
|
|
}
|
|
|
|
:host(.ion-color) ::slotted(ion-tab-button) {
|
|
--background-focused: #{current-color(shade)};
|
|
--color-selected: #{current-color(contrast)};
|
|
}
|
|
|
|
:host(.ion-color) ::slotted(.tab-selected) {
|
|
color: #{current-color(contrast)};;
|
|
}
|
|
|
|
:host(.ion-color),
|
|
:host(.ion-color) ::slotted(ion-tab-button) {
|
|
color: #{current-color(contrast, .7)};
|
|
}
|
|
|
|
:host(.ion-color),
|
|
:host(.ion-color) ::slotted(ion-tab-button) {
|
|
background: #{current-color(base)};
|
|
}
|
|
|
|
:host(.ion-color) ::slotted(ion-tab-button.ion-focused),
|
|
:host(.tab-bar-translucent) ::slotted(ion-tab-button.ion-focused) {
|
|
background: var(--background-focused)
|
|
}
|
|
|
|
:host(.tab-bar-translucent) ::slotted(ion-tab-button) {
|
|
background: transparent;
|
|
}
|
|
|
|
:host([slot="top"]) {
|
|
padding-bottom: 0;
|
|
|
|
border-top: 0;
|
|
border-bottom: var(--border);
|
|
}
|
|
|
|
:host(.tab-bar-hidden) {
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
display: none !important;
|
|
} |