/
githubmirror
/
ionic
Обзор
Документация
Войти
/
githubmirror
/
ionic
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
core/src/components/tab-bar/tab-bar.scss
76 строк
2 KB
Brandy Carney
fix(tab-bar): apply safe area to proper side regardless of direction (#28372)
25 окт 2023, 18:48
Не верифицирован
25 окт 2023, 18:48
d47b7e7
Код
Авторство
О чём код?
@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 */ display: flex; align-items: center; justify-content: center; width: auto; /* stylelint-disable */ padding-right: var(--ion-safe-area-right); padding-bottom: var(--ion-safe-area-bottom, 0); padding-left: var(--ion-safe-area-left); /* stylelint-enable */ 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-top: var(--ion-safe-area-top, 0); padding-bottom: 0; border-top: 0; border-bottom: var(--border); } :host(.tab-bar-hidden) { /* stylelint-disable-next-line declaration-no-important */ display: none !important; }