@salesforce-ux/design-system
Version:
Salesforce Lightning Design System
667 lines (603 loc) • 17.9 kB
CSS
/*! Lightning Design System 2.12.0 */
@charset "UTF-8";
.slds-button.slds-accordion__summary-action{
line-height:1.875rem;
}
.slds-button{
line-height:2.625rem;
font-weight:700;
}
.slds-button_icon,
.slds-button--icon,
.slds-button_icon-inverse,
.slds-button--icon-inverse,
.slds-button_icon-container,
.slds-button--icon-container,
.slds-button_icon-border,
.slds-button--icon-border,
.slds-button_icon-border-filled,
.slds-button--icon-border-filled,
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse,
.slds-button_icon-more,
.slds-button--icon-more,
.slds-button_icon-error,
.slds-button--icon-error{
width:2.75rem;
height:2.75rem;
}
.slds-button_icon-container,
.slds-button--icon-container,
.slds-button_icon-border,
.slds-button--icon-border,
.slds-button_icon-border-filled,
.slds-button--icon-border-filled,
.slds-button_icon-border-inverse,
.slds-button--icon-border-inverse,
.slds-button_icon-brand,
.slds-button_icon-more,
.slds-button--icon-more,
.slds-button_icon-container-more,
.slds-button--icon-container-more{
width:2.75rem;
height:2.75rem;
}
.slds-button_icon-small,
.slds-button--icon-small{
width:2.75rem;
height:2.75rem;
}
.slds-button_icon-x-small,
.slds-button--icon-x-small{
width:2.75rem;
height:2.75rem;
}
.slds-button_icon-xx-small,
.slds-button--icon-xx-small{
width:2.75rem;
height:2.75rem;
}
.slds-button_icon-more,
.slds-button--icon-more{
width:2.75rem;
height:2.75rem;
}
.slds-card{
border-color:transparent;
border-radius:0;
}
.slds-card__header-title{
font-size:1.125rem;
font-weight:700;
}
.slds-checkbox_button-group,
.slds-checkbox--button-group{
display:block;
}
.slds-checkbox_button-group .slds-checkbox_button,
.slds-checkbox_button-group .slds-checkbox--button,
.slds-checkbox--button-group .slds-checkbox_button,
.slds-checkbox--button-group .slds-checkbox--button{
display:block;
}
.slds-checkbox_button-group .slds-checkbox_button + .slds-checkbox_button,
.slds-checkbox_button-group .slds-checkbox--button + .slds-checkbox--button,
.slds-checkbox--button-group .slds-checkbox_button + .slds-checkbox_button,
.slds-checkbox--button-group .slds-checkbox--button + .slds-checkbox--button{
border-left:0;
border-top:1px solid #dddbda;
}
.slds-checkbox_button-group .slds-checkbox_button:first-child > .slds-checkbox_button__label,
.slds-checkbox_button-group .slds-checkbox--button:first-child > .slds-checkbox--button__label,
.slds-checkbox--button-group .slds-checkbox_button:first-child > .slds-checkbox_button__label,
.slds-checkbox--button-group .slds-checkbox--button:first-child > .slds-checkbox--button__label{
border-radius:0.25rem 0.25rem 0 0;
}
.slds-checkbox_button-group .slds-checkbox_button:last-child > .slds-checkbox_button__label,
.slds-checkbox_button-group .slds-checkbox--button:last-child > .slds-checkbox--button__label,
.slds-checkbox--button-group .slds-checkbox_button:last-child > .slds-checkbox_button__label,
.slds-checkbox--button-group .slds-checkbox--button:last-child > .slds-checkbox--button__label{
border-radius:0 0 0.25rem 0.25rem;
}
.slds-checkbox_button-group .slds-checkbox_button__label,
.slds-checkbox_button-group .slds-checkbox--button__label,
.slds-checkbox--button-group .slds-checkbox_button__label,
.slds-checkbox--button-group .slds-checkbox--button__label{
display:block;
text-align:center;
}
.slds-checkbox_button,
.slds-checkbox--button{
line-height:2.625rem;
}
.slds-checkbox-button{
width:2.75rem;
height:2.75rem;
}
.slds-checkbox_add-button,
.slds-checkbox--add-button{
width:2.75rem;
height:2.75rem;
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
}
.slds-checkbox_add-button .slds-checkbox_faux,
.slds-checkbox_add-button .slds-checkbox--faux,
.slds-checkbox--add-button .slds-checkbox_faux,
.slds-checkbox--add-button .slds-checkbox--faux{
width:2rem;
height:2rem;
}
.slds-checkbox_toggle,
.slds-checkbox--toggle{
padding:0.125rem 0;
}
.slds-checkbox_toggle .slds-form-element__label,
.slds-checkbox--toggle .slds-form-element__label{
-webkit-box-align:start;
-ms-flex-align:start;
align-items:flex-start;
font-size:1rem;
}
.slds-checkbox_toggle [type=checkbox] + .slds-checkbox_faux_container,
.slds-checkbox_toggle [type=checkbox] + .slds-checkbox--faux_container,
.slds-checkbox--toggle [type=checkbox] + .slds-checkbox_faux_container,
.slds-checkbox--toggle [type=checkbox] + .slds-checkbox--faux_container{
font-size:0.75rem;
}
.slds-checkbox .slds-checkbox_faux,
.slds-checkbox .slds-checkbox--faux{
width:1.5rem;
height:1.5rem;
-ms-flex-negative:0;
flex-shrink:0;
}
.slds-checkbox .slds-checkbox__label{
display:-webkit-inline-box;
display:-ms-inline-flexbox;
display:inline-flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
vertical-align:middle;
min-height:2.75rem;
}
.slds-checkbox .slds-checkbox__label .slds-form-element__label{
display:-webkit-inline-box;
display:-ms-inline-flexbox;
display:inline-flex;
font-size:1rem;
}
.slds-checkbox [type=checkbox]:checked + .slds-checkbox_faux:after, .slds-checkbox [type=checkbox]:checked + .slds-checkbox--faux:after, .slds-checkbox [type=checkbox]:checked ~ .slds-checkbox_faux:after, .slds-checkbox [type=checkbox]:checked ~ .slds-checkbox--faux:after, .slds-checkbox [type=checkbox]:checked + .slds-checkbox__label .slds-checkbox_faux:after, .slds-checkbox [type=checkbox]:checked + .slds-checkbox__label .slds-checkbox--faux:after{
height:0.375rem;
width:0.75rem;
margin-top:-1px;
}
.slds-checkbox [type=checkbox]:indeterminate + .slds-checkbox_faux:after, .slds-checkbox [type=checkbox]:indeterminate + .slds-checkbox--faux:after, .slds-checkbox [type=checkbox]:indeterminate ~ .slds-checkbox_faux:after, .slds-checkbox [type=checkbox]:indeterminate ~ .slds-checkbox--faux:after, .slds-checkbox [type=checkbox]:indeterminate + .slds-checkbox__label .slds-checkbox_faux:after, .slds-checkbox [type=checkbox]:indeterminate + .slds-checkbox__label .slds-checkbox--faux:after{
width:0.75rem;
}
.slds-checkbox.slds-checkbox_stacked .slds-form-element__label{
font-size:0.875rem;
}
.slds-checkbox_standalone{
min-height:2.75rem;
}
.slds-checkbox_standalone [type=checkbox]{
width:2.75rem;
height:2.75rem;
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
}
.slds-checkbox_standalone .slds-checkbox_faux{
position:absolute;
top:50%;
-webkit-transform:translateY(-50%);
transform:translateY(-50%);
}
.slds-listbox_horizontal li + li,
.slds-listbox--horizontal li + li{
padding-left:0.25rem;
}
.slds-listbox__option-header{
font-size:1rem;
}
.slds-listbox_vertical .slds-listbox__option_plain,
.slds-listbox_vertical .slds-listbox__option--plain,
.slds-listbox--vertical .slds-listbox__option_plain,
.slds-listbox--vertical .slds-listbox__option--plain{
line-height:2.75rem;
padding-top:0;
padding-bottom:0;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
}
.slds-listbox_vertical .slds-listbox__option_plain .slds-media__figure,
.slds-listbox_vertical .slds-listbox__option--plain .slds-media__figure,
.slds-listbox--vertical .slds-listbox__option_plain .slds-media__figure,
.slds-listbox--vertical .slds-listbox__option--plain .slds-media__figure{
margin-right:0.5rem;
}
.slds-listbox_object-switcher,
.slds-listbox--object-switcher{
padding:0;
}
.slds-combobox_object-switcher .slds-combobox__input{
font-size:1rem;
}
.slds-listbox_selection-group{
height:2.75rem;
}
.slds-listbox_selection-group .slds-listbox{
padding:0 0.25rem 0.375rem;
}
.slds-listbox_selection-group .slds-listbox-item{
padding:0.375rem 0.125rem 0;
}
.slds-has-inline-listbox .slds-combobox__input,
.slds-has-object-switcher .slds-combobox__input{
line-height:2.5rem;
min-height:2.75rem;
}
.slds-has-inline-listbox [role=listbox]{
padding:0 0.375rem;
}
.slds-th__action{
padding-right:1.25rem;
}
.slds-form-element__label{
display:-webkit-inline-box;
display:-ms-inline-flexbox;
display:inline-flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
min-height:2rem;
padding-top:0;
margin-bottom:0;
font-size:0.875rem;
}
.slds-form-element__label + .slds-form-element__icon .slds-button_icon{
height:2rem;
}
.slds-form-element__icon{
padding-top:0;
}
.slds-form-element_edit .slds-form-element__static,
.slds-form-element--edit .slds-form-element__static{
width:calc(100% - 2.75rem);
}
.slds-form-element_readonly .slds-icon{
width:1.5rem;
height:1.5rem;
}
.slds-form-element__static{
font-size:1rem;
}
@media (min-width: 48em){
.slds-form-element_horizontal .slds-form-element__label,
.slds-form_horizontal .slds-form-element .slds-form-element__label,
.slds-form_stacked .slds-form-element_horizontal .slds-form-element__label{
display:block;
max-width:calc(33% - 2.75rem);
-ms-flex-preferred-size:calc(33% - 2.75rem);
flex-basis:calc(33% - 2.75rem);
padding-top:0.25rem;
}
.slds-form-element_horizontal .slds-form-element__control,
.slds-form_horizontal .slds-form-element .slds-form-element__control,
.slds-form_stacked .slds-form-element_horizontal .slds-form-element__control{
display:block;
min-height:0;
}
.slds-form-element_horizontal .slds-form-element__icon,
.slds-form_horizontal .slds-form-element .slds-form-element__icon,
.slds-form_stacked .slds-form-element_horizontal .slds-form-element__icon{
padding-top:0;
}
.slds-form-element_horizontal .slds-checkbox__label,
.slds-form_horizontal .slds-form-element .slds-checkbox__label,
.slds-form_stacked .slds-form-element_horizontal .slds-checkbox__label{
display:block;
}
}
.slds-form-element_horizontal .slds-button_icon,
.slds-form_horizontal .slds-form-element .slds-button_icon,
.slds-form_stacked .slds-form-element_horizontal .slds-button_icon{
vertical-align:top;
}
.slds-form-element_stacked .slds-form-element__icon,
.slds-form_stacked .slds-form-element .slds-form-element__icon,
.slds-form_horizontal .slds-form-element_stacked .slds-form-element__icon{
padding-top:0;
}
.slds-input{
line-height:2.625rem;
}
.slds-input[readonly]{
font-size:1rem;
}
.slds-input[type=text], .slds-input[type=email], .slds-input[type=url], .slds-input[type=tel]{
-webkit-appearance:none;
}
.slds-input[type=date], .slds-input[type=datetime], .slds-input[type=datetime-local], .slds-input[type=time], .slds-input[type=week], .slds-input[type=month]{
display:-webkit-inline-box;
display:-ms-inline-flexbox;
display:inline-flex;
}
.slds-input[type=date], .slds-input[type=datetime-local], .slds-input[type=month], .slds-input[type=time]{
height:2.75rem;
}
.slds-input-has-icon .slds-input__icon{
width:1rem;
height:1rem;
margin-top:-0.5rem;
}
.slds-input-has-icon_left .slds-input__icon, .slds-input-has-icon--left .slds-input__icon{
left:0.5rem;
}
.slds-input-has-icon_right .slds-input__icon, .slds-input-has-icon--right .slds-input__icon{
right:0.5rem;
}
.slds-input-has-icon_left-right .slds-input__icon_left,
.slds-input-has-icon_left-right .slds-input__icon--left, .slds-input-has-icon--left-right .slds-input__icon_left,
.slds-input-has-icon--left-right .slds-input__icon--left{
left:0.5rem;
}
.slds-input-has-icon_left-right .slds-input__icon_right,
.slds-input-has-icon_left-right .slds-input__icon--right, .slds-input-has-icon--left-right .slds-input__icon_right,
.slds-input-has-icon--left-right .slds-input__icon--right{
right:0.5rem;
}
.slds-input__icon-group_right .slds-input__spinner{
right:calc(1.5rem + 0.25rem);
}
.slds-map_container{
padding:1rem 1rem 0;
}
.slds-map{
min-width:21.75rem;
}
.slds-has-coordinates{
max-height:none;
}
.slds-coordinates__title{
font-size:1.125rem;
}
.slds-dropdown{
padding:0;
font-size:1rem;
}
.slds-dropdown__item > a{
line-height:2.75rem;
padding:0 0.75rem;
}
.slds-dropdown__header{
font-size:1rem;
}
.slds-modal .slds-modal__title{
font-weight:700;
}
.slds-modal__close{
width:2.75rem;
height:2.75rem;
top:-2.75rem;
right:0;
}
.slds-path__nav .slds-is-current:first-child .slds-path__link{
height:calc(2.75rem - 0.25rem);
}
.slds-path__nav .slds-is-active:first-child .slds-path__link{
height:2.75rem;
}
.slds-path__item{
margin-left:0.5rem;
margin-right:0.5625rem;
}
.slds-path__item:before, .slds-path__item:after{
left:-0.3125rem;
right:-0.375rem;
}
.slds-path__item:before{
height:calc((2.75rem / 2) + 0.0625rem);
}
.slds-path__item:after{
height:1.375rem;
}
.slds-path__item:first-child:before, .slds-path__item:first-child:after{
left:1.625rem;
}
.slds-path__item:last-child:before, .slds-path__item:last-child:after{
right:1.125rem;
}
.slds-path__link{
height:2.75rem;
}
.slds-pill{
line-height:1.875rem;
padding:0 0.75rem;
}
.slds-pill + .slds-pill{
margin-left:0.25rem;
}
.slds-pill__container, .slds-pill-container, .slds-pill_container{
padding:0.25rem;
}
.slds-pill__label{
font-size:0.875rem;
}
.slds-pill__icon ~ .slds-pill__action, .slds-pill__icon_container ~ .slds-pill__action{
padding-left:calc(1.25rem + 0.75rem + 0.25rem);
}
.slds-pill_link .slds-pill__icon_container,
.slds-pill--link .slds-pill__icon_container{
left:0.75rem;
}
.slds-pill_link .slds-pill__remove,
.slds-pill--link .slds-pill__remove{
right:0.75rem;
}
.slds-pill__action{
padding:0;
padding-left:0.75rem;
padding-right:calc(1rem + 0.75rem + 2px);
}
.slds-popover_prompt__heading{
font-size:1.25rem;
}
.slds-progress__item{
position:relative;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
min-height:2.75rem;
}
.slds-progress__item .slds-button:before{
content:"";
position:absolute;
height:2.75rem;
width:calc(100% + 8px);
}
.slds-progress__marker{
width:1.25rem;
height:1.25rem;
-webkit-box-pack:center;
-ms-flex-pack:center;
justify-content:center;
}
.slds-progress__marker_icon .slds-button__icon,
.slds-progress__marker_icon .slds-icon, .slds-progress__marker--icon .slds-button__icon,
.slds-progress__marker--icon .slds-icon{
width:1.25rem;
height:1.25rem;
}
.slds-progress_vertical .slds-progress__item:before, .slds-progress_vertical .slds-progress__item:after{
left:calc((1.25rem / 2) - 1px);
}
.slds-progress_vertical .slds-progress__item_content{
font-size:0.875rem;
}
.slds-radio_button-group,
.slds-radio--button-group{
display:block;
}
.slds-radio_button-group .slds-radio_button,
.slds-radio_button-group .slds-radio--button,
.slds-radio--button-group .slds-radio_button,
.slds-radio--button-group .slds-radio--button{
display:block;
}
.slds-radio_button-group .slds-radio_button + .slds-radio_button,
.slds-radio_button-group .slds-radio--button + .slds-radio--button,
.slds-radio--button-group .slds-radio_button + .slds-radio_button,
.slds-radio--button-group .slds-radio--button + .slds-radio--button{
border-left:0;
border-top:1px solid #dddbda;
}
.slds-radio_button-group .slds-radio_button:first-child > .slds-radio_button__label,
.slds-radio_button-group .slds-radio--button:first-child > .slds-radio--button__label,
.slds-radio--button-group .slds-radio_button:first-child > .slds-radio_button__label,
.slds-radio--button-group .slds-radio--button:first-child > .slds-radio--button__label{
border-radius:0.25rem 0.25rem 0 0;
}
.slds-radio_button-group .slds-radio_button:last-child > .slds-radio_button__label,
.slds-radio_button-group .slds-radio--button:last-child > .slds-radio--button__label,
.slds-radio--button-group .slds-radio_button:last-child > .slds-radio_button__label,
.slds-radio--button-group .slds-radio--button:last-child > .slds-radio--button__label{
border-radius:0 0 0.25rem 0.25rem;
}
.slds-radio_button-group .slds-radio_button__label,
.slds-radio_button-group .slds-radio--button__label,
.slds-radio--button-group .slds-radio_button__label,
.slds-radio--button-group .slds-radio--button__label{
display:block;
text-align:center;
}
.slds-radio_button,
.slds-radio--button{
line-height:2.69rem;
}
.slds-radio .slds-radio__label{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
min-height:2.75rem;
}
.slds-radio .slds-radio_faux,
.slds-radio .slds-radio--faux{
width:1.5rem;
height:1.5rem;
}
.slds-radio .slds-form-element__label{
display:-webkit-inline-box;
display:-ms-inline-flexbox;
display:inline-flex;
font-size:1rem;
}
.slds-slider{
-webkit-box-align:center;
-ms-flex-align:center;
align-items:center;
margin-top:0.5rem;
min-height:2rem;
}
.slds-slider__range::-webkit-slider-thumb{
height:2rem;
width:2rem;
margin-top:calc(((2rem / 2) - (4px / 2)) * -1);
}
.slds-slider__range::-moz-range-thumb{
height:2rem;
width:2rem;
}
.slds-slider__range::-ms-thumb{
height:2rem;
width:2rem;
}
.slds-slider_vertical{
-webkit-box-align:initial;
-ms-flex-align:initial;
align-items:initial;
}
.slds-slider_vertical .slds-slider__range{
margin-left:calc((2rem - 1rem) / 2);
}
.slds-slider_vertical .slds-slider__value{
left:calc((2rem - 1rem) / 2);
}
.slds-tabs-mobile__item .slds-button:active,
.slds-tabs-mobile__item .slds-button:hover{
color:currentColor;
}
.slds-text-body_regular,
.slds-text-body--regular{
font-size:1rem;
}
.slds-text-body_small,
.slds-text-body--small{
font-size:0.875rem;
}
.slds-text-heading_large,
.slds-text-heading--large{
font-size:2rem;
}
.slds-text-heading_medium,
.slds-text-heading--medium{
font-size:1.5rem;
}
.slds-text-heading_small,
.slds-text-heading--small{
font-size:1.25rem;
}