@varlet/ui
Version:
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
1 lines • 2.37 kB
CSS
:root { --tabs-item-horizontal-height: 44px; --tabs-item-vertical-height: 66px; --tabs-radius: 2px; --tabs-padding: 12px; --tabs-indicator-size: 2px; --tabs-indicator-border-radius: 0; --tabs-indicator-background: var(--color-primary); --tabs-background: #fff; --tabs-indicator-inner-size: 100%;}.var-tabs { border-radius: var(--tabs-radius); background: var(--tabs-background); overflow: hidden; transition: background-color 0.25s;}.var-tabs__tab-wrap { position: relative; display: flex; height: 100%;}.var-tabs__indicator { display: flex; justify-content: center; align-items: center; position: absolute; z-index: 1; transition-property: width, transform; transition-duration: 0.3s;}.var-tabs__indicator-inner { background: var(--tabs-indicator-background); border-radius: var(--tabs-indicator-border-radius);}.var-tabs--layout-horizontal { flex-direction: row;}.var-tabs--layout-horizontal-scrollable { overflow-x: auto; overflow-y: hidden; scrollbar-width: none;}.var-tabs--layout-horizontal-scrollable::-webkit-scrollbar { display: none;}.var-tabs--layout-horizontal-padding { padding: 0 var(--tabs-padding);}.var-tabs--layout-horizontal-indicator { left: 0; bottom: 0; height: var(--tabs-indicator-size);}.var-tabs--layout-horizontal-reverse-indicator { left: 0; top: 0; height: var(--tabs-indicator-size);}.var-tabs--layout-horizontal-indicator-inner { width: var(--tabs-indicator-inner-size); height: 100%;}.var-tabs--layout-vertical { flex-direction: column;}.var-tabs--layout-vertical-scrollable { overflow-x: hidden; overflow-y: auto; scrollbar-width: none;}.var-tabs--layout-vertical-scrollable::-webkit-scrollbar { display: none;}.var-tabs--layout-vertical-padding { padding: 0;}.var-tabs--layout-vertical-indicator { left: 0; top: 0; width: var(--tabs-indicator-size);}.var-tabs--layout-vertical-reverse-indicator { right: 0; top: 0; width: var(--tabs-indicator-size);}.var-tabs--layout-vertical-indicator-inner { width: 100%; height: var(--tabs-indicator-inner-size);}.var-tabs--item-horizontal { height: var(--tabs-item-horizontal-height);}.var-tabs--item-vertical { height: var(--tabs-item-vertical-height);}.var-tabs--fixed-bottom { position: fixed; width: 100%; left: 0; bottom: 0; z-index: 99;}.var-tabs--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box ;}