@salesforce-ux/design-system/__internal/styles/salesforce-lightning-design-system_touch-demo.css

Salesforce Lightning Design System

/*! 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;
}