.t-float-left { float: left; } .t-float-right { float: right; } @keyframes tdesign-fade-out { from { opacity: 1; } to { opacity: 0; } } .hotspot-expanded.relative { position: relative; } .hotspot-expanded::after { content: ''; display: block; position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform: scale(1.5); } page { --td-tab-bar-bg-color: #fff; --td-tab-bar-hover-color: rgba(0, 0, 0, 0.05); --td-tab-bar-item-color: rgba(0, 0, 0, 0.6); --td-tab-bar-item-active-color: #0052d9; } :host { flex: 1; } .t-tab-bar-item { height: 48px; box-sizing: border-box; user-select: none; position: relative; background-color: var(--td-tab-bar-bg-color, #fff); } .t-tab-bar-item--active { background-color: var(--td-tab-bar-hover-color, rgba(0, 0, 0, 0.05)); } .t-tab-bar-item.t-is-split:before { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; top: 0; bottom: 0; left: 0; border-left: 1px solid #e6e6e6; transform: scaleX(0.5); top: 8px; bottom: 8px; } .t-tab-bar-item__content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--td-tab-bar-item-color, rgba(0, 0, 0, 0.6)); } .t-tab-bar-item__content.t-is-checked { color: var(--td-tab-bar-item-active-color, #0052d9); } .t-tab-bar-item__content.t-is-checked .t-tab-bar-item__icon-menu { background-color: var(--td-tab-bar-item-active-color, #0052d9); } .t-tab-bar-item .t-badge-class { transform: translate(50%, -10%) !important; } .t-tab-bar-item__text { display: flex; align-items: center; } .t-tab-bar-item__text.t-size-s { font-size: 10px; line-height: 18px; } .t-tab-bar-item__icon { height: 24px; } .t-tab-bar-item__icon-menu { width: 8px; height: 1px; background-color: #666; position: relative; margin-right: 4px; } .t-tab-bar-item__icon-menu::before, .t-tab-bar-item__icon-menu::after { display: block; content: ''; position: absolute; left: 0; background-color: inherit; width: inherit; height: inherit; } .t-tab-bar-item__icon-menu::before { top: -4px; } .t-tab-bar-item__icon-menu::after { bottom: -4px; } .t-tab-bar-item__spread { position: absolute; top: 0; left: 7%; width: 86%; background-color: #fff; transform: translate3d(0, calc(-100% - 16px), 0); z-index: 1; } .t-tab-bar-item__spread::before { display: block; content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 0; border: 8px solid transparent; border-top: 8px solid #fff; transform: translate3d(-50%, 16px, 0); } .t-tab-bar-item__spread-item { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; } .t-tab-bar-item__spread-item--active { background-color: rgba(0, 0, 0, 0.05); } .t-tab-bar-item__spread-item + .t-tab-bar-item__spread-item { position: relative; } .t-tab-bar-item__spread-item + .t-tab-bar-item__spread-item:before { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; top: 0; border-top: 1px solid #e6e6e6; transform: scaleY(0.5); border-top-width: 1px; border-top-style: solid; border-top-color: #e6e6e6; width: 80%; }