@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
261 lines (259 loc) • 6.8 kB
CSS
/*! Lightning Design System 2.12.0 */
@charset "UTF-8";
.slds-dropdown-trigger {
position: relative;
display: inline-block;
}
.slds-dropdown-trigger .slds-dropdown {
top: 100%;
}
.slds-dropdown-trigger .slds-dropdown_bottom {
top: auto;
}
.slds-dropdown-trigger_hover .slds-dropdown {
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.1s linear, visibility 0.1s linear;
transition: opacity 0.1s linear, visibility 0.1s linear;
}
.slds-dropdown-trigger_hover:hover,
.slds-dropdown-trigger_hover:focus {
outline: 0;
}
.slds-dropdown-trigger_hover:hover .slds-dropdown,
.slds-dropdown-trigger_hover:focus .slds-dropdown {
visibility: visible;
opacity: 1;
-webkit-transition: opacity 0.1s linear, visibility 0.1s linear;
transition: opacity 0.1s linear, visibility 0.1s linear;
}
.slds-dropdown-trigger_click {
}
.slds-dropdown-trigger_click .slds-dropdown,
.slds-dropdown-trigger_click:hover .slds-dropdown {
display: none;
}
.slds-dropdown-trigger_click.slds-is-open .slds-dropdown {
display: block;
visibility: visible;
opacity: 1;
}
.slds-dropdown-trigger > [class*="slds-button_icon"] ~ .slds-dropdown_left[class*="slds-nubbin"],
.slds-dropdown-trigger > [class*="slds-button--icon"] ~ .slds-dropdown--left[class*="slds-nubbin"] {
left: -0.5rem;
}
.slds-dropdown-trigger > [class*="slds-button_icon"] ~ .slds-dropdown_right[class*="slds-nubbin"],
.slds-dropdown-trigger > [class*="slds-button--icon"] ~ .slds-dropdown--right[class*="slds-nubbin"] {
right: -0.5rem;
}
.slds-dropdown {
position: absolute;
z-index: 7000;
left: 50%;
float: left;
min-width: 6rem;
max-width: 20rem;
margin-top: 0.125rem;
margin-bottom: 0.125rem;
border: 1px solid #dddbda;
border-radius: 0.25rem;
padding: 0.25rem 0;
font-size: 0.75rem;
background: white;
-webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16);
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
.slds-dropdown_left {
left: 0;
right: auto;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slds-dropdown_right {
left: auto;
right: 0;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slds-dropdown_bottom {
bottom: 100%;
}
.slds-dropdown_xx-small {
min-width: 6rem;
}
.slds-dropdown_x-small {
min-width: 12rem;
}
.slds-dropdown_small {
min-width: 15rem;
}
.slds-dropdown_medium {
min-width: 20rem;
}
.slds-dropdown_large {
min-width: 25rem;
max-width: 512px;
}
.slds-dropdown_fluid {
min-width: 12rem;
max-width: 100%;
width: 100%;
}
.slds-dropdown_length-5 {
-webkit-overflow-scrolling: touch;
max-height: calc(((1rem * 1.5) + 1rem) * 5);
overflow-y: auto;
}
.slds-dropdown_length-7 {
-webkit-overflow-scrolling: touch;
max-height: calc(((1rem * 1.5) + 1rem) * 7);
overflow-y: auto;
}
.slds-dropdown_length-10 {
-webkit-overflow-scrolling: touch;
max-height: calc(((1rem * 1.5) + 1rem) * 10);
overflow-y: auto;
}
.slds-dropdown_length-with-icon-5 {
-webkit-overflow-scrolling: touch;
max-height: calc((1.5rem + 1rem) * 5);
overflow-y: auto;
}
.slds-dropdown_length-with-icon-7 {
-webkit-overflow-scrolling: touch;
max-height: calc((1.5rem + 1rem) * 7);
overflow-y: auto;
}
.slds-dropdown_length-with-icon-10 {
-webkit-overflow-scrolling: touch;
max-height: calc((1.5rem + 1rem) * 10);
overflow-y: auto;
}
.slds-dropdown_inverse {
background: #061c3f;
border-color: #061c3f;
}
.slds-dropdown_inverse .slds-dropdown__item > a {
color: white;
}
.slds-dropdown_inverse .slds-dropdown__item > a:hover,
.slds-dropdown_inverse .slds-dropdown__item > a:focus {
color: rgba(255, 255, 255, 0.75);
background-color: transparent;
}
.slds-dropdown_inverse .slds-dropdown__item > a:active {
color: rgba(255, 255, 255, 0.5);
background-color: transparent;
}
.slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled="true"] > a[aria-disabled="true"] {
color: rgba(255, 255, 255, 0.15);
cursor: default;
}
.slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled="true"]:hover {
background-color: transparent;
}
.slds-dropdown mark {
font-weight: 700;
background-color: transparent;
color: inherit;
}
.slds-dropdown[class*="slds-nubbin_top"],
.slds-dropdown[class*="slds-nubbin--top"] {
margin-top: 0.5rem;
}
.slds-dropdown[class*="slds-nubbin_bottom"],
.slds-dropdown[class*="slds-nubbin--bottom"] {
margin-bottom: 0.5rem;
}
.slds-dropdown__header {
font-size: 0.875rem;
font-weight: 700;
padding: 0.5rem 0.75rem;
}
.slds-dropdown__item {
line-height: 1.5;
font-weight: 400;
}
.slds-dropdown__item > a {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0.5rem 0.75rem;
color: #080707;
white-space: nowrap;
cursor: pointer;
}
.slds-dropdown__item > a:hover,
.slds-dropdown__item > a:focus {
outline: 0;
text-decoration: none;
background-color: #f3f2f2;
}
.slds-dropdown__item > a:active {
text-decoration: none;
background-color: #ecebea;
}
.slds-dropdown__item > a[aria-disabled="true"] {
color: #dddbda;
cursor: default;
}
.slds-dropdown__item > a[aria-disabled="true"]:hover {
background-color: transparent;
}
.slds-dropdown__item > a[aria-disabled="true"] .slds-icon {
fill: #dddbda;
}
.slds-dropdown__item > a.slds-has-error {
background: #c23934;
}
.slds-dropdown__item > a.slds-has-success {
background: #04844b;
}
.slds-dropdown__item > a.slds-has-error,
.slds-dropdown__item > a.slds-has-success {
color: white;
}
.slds-dropdown__item > a.slds-has-warning {
background: #ffb75d;
}
.slds-dropdown__item > a.slds-has-warning .slds-indicator_unread {
background-color: currentColor;
}
.slds-dropdown__item > a.slds-has-warning .slds-indicator_unsaved {
color: currentColor;
}
.slds-dropdown__item > a.slds-has-error:hover,
.slds-dropdown__item > a.slds-has-error:focus,
.slds-dropdown__item > a.slds-has-success:hover,
.slds-dropdown__item > a.slds-has-success:focus,
.slds-dropdown__item > a.slds-has-warning:hover,
.slds-dropdown__item > a.slds-has-warning:focus {
text-decoration: underline;
}
.slds-dropdown__item .slds-icon_selected {
opacity: 0;
-webkit-transition: opacity 0.05s ease;
transition: opacity 0.05s ease;
}
.slds-dropdown__item.slds-is-selected .slds-icon_selected {
opacity: 1;
}
.slds-dropdown__item.slds-has-notification .slds-indicator_unsaved {
top: -0.375rem;
}
[dir="rtl"] .slds-dropdown_center,
[dir="rtl"] .slds-dropdown--center {
left: auto;
right: auto;
-webkit-transform: translateX(calc(50% - (0.875rem / 2)));
transform: translateX(calc(50% - (0.875rem / 2)));
}