UNPKG

@salesforce-ux/design-system

Version:
161 lines (160 loc) 3.84 kB
/*! Lightning Design System 2.12.0 */ @charset "UTF-8"; .slds-tabs_default { display: block; width: 100%; background-color: white; } .slds-tabs_default .slds-tabs__item_overflow { overflow: visible; } .slds-tabs_default__nav { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; border-bottom: 1px solid #dddbda; } .slds-tabs_default__item { color: #3e3e3c; position: relative; padding: 0 0.75rem; margin-bottom: -1px; } .slds-tabs_default__item:after { display: block; content: ""; bottom: 0; left: 0; right: 0; height: 0; position: absolute; } .slds-tabs_default__item.slds-active, .slds-tabs_default__item.slds-is-active { color: #080707; } .slds-tabs_default__item.slds-active:after, .slds-tabs_default__item.slds-is-active:after { background-color: #1589ee; height: 0.1875rem; } .slds-tabs_default__item.slds-active .slds-tabs_default__link, .slds-tabs_default__item.slds-is-active .slds-tabs_default__link { font-weight: 700; } .slds-tabs_default__item.slds-active .slds-tabs_default__link:hover, .slds-tabs_default__item.slds-is-active .slds-tabs_default__link:hover { color: currentColor; } .slds-tabs_default__item:hover:after { height: 0.125rem; background-color: #007add; -webkit-transition: height 300ms; transition: height 300ms; } .slds-tabs_default__item:focus, .slds-tabs_default__item.slds-has-focus { outline: 0; } .slds-tabs_default__item:focus:after, .slds-tabs_default__item.slds-has-focus:after { height: 3px; background-color: #1589ee; } .slds-tabs_default__item .slds-tabs_default__link:focus { -webkit-box-shadow: none; box-shadow: none; } .slds-tabs_default__item.slds-has-notification { background: #f3f2f2; } .slds-tabs_default__item.slds-has-notification:after { background-color: #dddbda; } .slds-tabs_default__item.slds-has-notification:hover:after { background-color: #0070d2; } .slds-tabs_default__item.slds-has-notification .slds-indicator_unread { display: inline-block; height: 0.375rem; width: 0.375rem; position: relative; top: auto; left: auto; } .slds-tabs_default__item.slds-is-unsaved .slds-indicator_unread { margin-left: -0.35rem; } .slds-tabs_default__item.slds-has-notification .slds-indicator_unsaved { top: -0.25rem; } .slds-tabs_default__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; color: currentColor; border: 0; text-transform: inherit; z-index: 1; } .slds-tabs_default__link:focus { outline: 0; } .slds-tabs_default__link:hover, .slds-tabs_default__link:focus { text-decoration: none; -webkit-box-shadow: none; box-shadow: none; color: currentColor; } .slds-tabs_default__link[tabindex="0"]:focus { text-decoration: underline; } .slds-tabs_default__overflow-button { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; height: 2.5rem; line-height: 2.5rem; } .slds-tabs_default__overflow-button .slds-button { line-height: inherit; color: #3e3e3c; -webkit-box-shadow: none; box-shadow: none; } .slds-tabs_default__overflow-button .slds-button:focus { text-decoration: underline; } .slds-tabs_default__overflow-button.slds-has-error .slds-button, .slds-tabs_default__overflow-button.slds-has-success .slds-button { color: white; } .slds-tabs_default__content { position: relative; padding: 1rem 0; } .slds-tabs_medium .slds-tabs_default__item { font-size: 1rem; } .slds-tabs_large .slds-tabs_default__item { font-size: 1.25rem; } .slds-tabs__left-icon { margin-right: 0.5rem; } .slds-tabs__left-icon:empty { margin-right: 0; } .slds-tabs__right-icon { margin-left: 0.5rem; }