@adobe/spectrum-css
Version:
The Spectrum CSS top-level backwards compatible package
86 lines (76 loc) • 2.17 kB
CSS
.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;
}