UNPKG

@salesforce-ux/design-system

Version:
667 lines (603 loc) 17.9 kB
/*! 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; }