UNPKG

@adobe/spectrum-css

Version:

The Spectrum CSS top-level backwards compatible package

86 lines (76 loc) 2.17 kB
.spectrum--large .spectrum-Tabs { padding: 0 10px; } .spectrum--large .spectrum-Tabs-item { height: 58px; line-height: 58px; transition: color 130ms ease-out; } .spectrum--large .spectrum-Tabs-item .spectrum-Icon { height: 58px; } .spectrum--large .spectrum-Tabs-item .spectrum-Icon + .spectrum-Tabs-itemLabel { margin-left: 6px; } .spectrum--large .spectrum-Tabs-item::before { height: 40px; margin-top: -19px; left: -10px; right: -10px; border: 2px solid transparent; border-radius: 6px; } .spectrum--large .spectrum-Tabs-itemLabel { font-size: 17px; font-weight: 400 } .spectrum--large .spectrum-Tabs-selectionIndicator { transition: transform 130ms ease-in-out; border-radius: 1px; } .spectrum--large .spectrum-Tabs--compact .spectrum-Tabs-item { height: 38px; line-height: 38px; } .spectrum--large .spectrum-Tabs--compact .spectrum-Tabs-item .spectrum-Icon { height: 38px; } .spectrum--large .spectrum-Tabs--horizontal { border-bottom: 2px solid; } .spectrum--large .spectrum-Tabs--horizontal .spectrum-Tabs-item + *:not(.spectrum-Tabs-selectionIndicator) { margin-left: 30px; } .spectrum--large .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator { height: 2px; bottom: -2px; } .spectrum--large .spectrum-Tabs--horizontal.spectrum-Tabs--compact { height: 38px; } .spectrum--large .spectrum-Tabs--vertical { border-left: 2px solid; } .spectrum--large .spectrum-Tabs--vertical .spectrum-Tabs-item { height: 56px; padding: 0 10px; margin-left: 5px; margin-bottom: 5px; } .spectrum--large .spectrum-Tabs--vertical .spectrum-Tabs-item::before { left: -2px; right: -2px; margin-top: -20px; } .spectrum--large .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item { height: 40px; line-height: 40px; margin-bottom: 5px; } .spectrum--large .spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item .spectrum-Icon { height: 40px; } .spectrum--large .spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator { width: 2px; left: -2px; }