@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
100 lines (99 loc) • 2.28 kB
CSS
/*! Lightning Design System 2.12.0 */
@charset "UTF-8";
.slds-tabs_scoped {
display: block;
width: 100%;
}
.slds-tabs_scoped__nav {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
background-color: #fafaf9;
border: 1px solid #dddbda;
border-radius: 0.25rem 0.25rem 0 0;
}
.slds-tabs_scoped__item {
position: relative;
margin-bottom: -1px;
}
.slds-tabs_scoped__item + .slds-tabs_scoped__item {
margin-left: -1px;
}
.slds-tabs_scoped__item:first-child .slds-tabs_scoped__link {
border-left: 0;
border-radius: 0.25rem 0 0 0;
}
.slds-tabs_scoped__content {
background-color: white;
border: 1px solid #dddbda;
border-top: 0;
border-radius: 0 0 0.25rem 0.25rem;
padding: 1rem;
}
.slds-tabs_scoped__link {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
text-decoration: none;
cursor: pointer;
height: 2.5rem;
line-height: 2.5rem;
padding: 0 1rem;
color: #3e3e3c;
background-clip: padding-box;
border: 0;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
border-radius: 0;
}
.slds-tabs_scoped__link:focus {
outline: 0;
}
.slds-tabs_scoped__link:hover,
.slds-tabs_scoped__link:focus {
text-decoration: none;
color: currentColor;
border-color: #dddbda;
}
.slds-tabs_scoped__overflow-button {
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
height: 2.5rem;
line-height: 2.5rem;
}
.slds-tabs_scoped__overflow-button .slds-button {
line-height: inherit;
color: #3e3e3c;
padding: 0 1rem;
}
.slds-active .slds-tabs_scoped__link,
.slds-is-active .slds-tabs_scoped__link {
background-color: white;
border-color: #dddbda;
font-weight: 700;
color: #080707;
}
.slds-active .slds-tabs_scoped__link:focus,
.slds-is-active .slds-tabs_scoped__link:focus {
text-decoration: underline;
}
.slds-tabs_medium .slds-tabs_scoped__item {
font-size: 1rem;
}
.slds-tabs_medium .slds-tabs_scoped__link {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.slds-tabs_large .slds-tabs_scoped__item {
font-size: 1.25rem;
}
.slds-tabs_large .slds-tabs_scoped__link {
padding-left: 2rem;
padding-right: 2rem;
}