@varlet/ui
Version:
A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.
1 lines • 1.52 kB
CSS
:root { --bottom-navigation-height: 50px; --bottom-navigation-variant-height: 66px; --bottom-navigation-z-index: 1; --bottom-navigation-background-color: var(--color-surface-container-high); --bottom-navigation-border-color: var(--color-outline); --bottom-navigation-fab-offset: 4px; --bottom-navigation-fab-border-radius: 50%;}.var-bottom-navigation { width: 100%; height: var(--bottom-navigation-height); display: flex; position: relative; background-color: var(--bottom-navigation-background-color); transition: background-color 250ms, border-color 250ms; -webkit-tap-highlight-color: transparent;}.var-bottom-navigation--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); box-sizing: content-box ;}.var-bottom-navigation--fixed { position: fixed; left: 0; bottom: 0;}.var-bottom-navigation--border { border-top: 1px solid var(--bottom-navigation-border-color);}.var-bottom-navigation--variant { height: var(--bottom-navigation-variant-height);}.var-bottom-navigation__fab[var-bottom-navigation__fab] { width: var(--bottom-navigation-height); height: var(--bottom-navigation-height); border-radius: var(--bottom-navigation-fab-border-radius); position: absolute; z-index: 2; transform: translateY(-50%); overflow: hidden; transition: right 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;}.var-bottom-navigation--fab-center { right: calc(50% - var(--bottom-navigation-height) / 2);}.var-bottom-navigation--fab-right { right: var(--bottom-navigation-fab-offset);}