mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
115 lines
2.0 KiB
SCSS
115 lines
2.0 KiB
SCSS
@import "../../themes/ionic.globals";
|
|
|
|
:host {
|
|
display: flex;
|
|
position: relative;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
order: 1;
|
|
|
|
width: 100%;
|
|
|
|
background: var(--background);
|
|
color: var(--color);
|
|
|
|
user-select: none;
|
|
|
|
z-index: $z-index-toolbar;
|
|
}
|
|
|
|
:host(.ion-color) {
|
|
--background: #{current-color(base)};
|
|
--color: #{current-color(contrast, .7)};
|
|
--color-selected: #{current-color(contrast)};
|
|
}
|
|
|
|
:host(.tabbar-hidden) {
|
|
/* stylelint-disable-next-line declaration-no-important */
|
|
display: none !important;
|
|
}
|
|
|
|
:host(.placement-top) {
|
|
order: -1;
|
|
}
|
|
|
|
:host(.placement-bottom) {
|
|
padding-bottom: var(--ion-safe-area-bottom);
|
|
}
|
|
|
|
|
|
// Tab Highlight
|
|
// --------------------------------------------------
|
|
|
|
.tabbar-highlight {
|
|
@include position(null, null, 0, 0);
|
|
@include transform-origin(0, 0);
|
|
|
|
display: block;
|
|
position: absolute;
|
|
|
|
width: 1px;
|
|
height: 2px;
|
|
|
|
transform: translateZ(0);
|
|
|
|
background: currentColor;
|
|
|
|
&.animated {
|
|
transition-duration: 300ms;
|
|
transition-property: transform;
|
|
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
|
|
will-change: transform;
|
|
}
|
|
}
|
|
|
|
:host(.placement-top) .tabbar-highlight {
|
|
bottom: 0;
|
|
}
|
|
|
|
:host(.placement-bottom) .tabbar-highlight {
|
|
top: 0;
|
|
}
|
|
|
|
|
|
// Tab Layout
|
|
// --------------------------------------------------
|
|
|
|
:host(.layout-icon-start) .tab-btn {
|
|
--flex-direction: row;
|
|
}
|
|
|
|
:host(.layout-icon-end) .tab-btn {
|
|
--flex-direction: row-reverse;
|
|
}
|
|
|
|
:host(.layout-icon-bottom) .tab-btn {
|
|
--flex-direction: column-reverse;
|
|
}
|
|
|
|
:host(.layout-icon-start) .tab-btn,
|
|
:host(.layout-icon-end) .tab-btn,
|
|
:host(.layout-icon-hide) .tab-btn,
|
|
:host(.layout-label-hide) .tab-btn {
|
|
--justify-content: center;
|
|
}
|
|
|
|
:host(.layout-icon-hide) .tab-btn {
|
|
--icon-display: none;
|
|
}
|
|
|
|
:host(.layout-label-hide) .tab-btn {
|
|
--label-display: none;
|
|
}
|
|
|
|
:host(.layout-icon-top) .tab-btn,
|
|
:host(.layout-icon-bottom) .tab-btn {
|
|
--badge-end: #{calc(50% - 30px)};
|
|
}
|
|
|
|
:host(.layout-icon-hide) .tab-btn,
|
|
:host(.layout-icon-start) .tab-btn,
|
|
:host(.layout-icon-end) .tab-btn {
|
|
--badge-end: #{calc(50% - 50px)};
|
|
}
|