.slds-badge {
|
color: var(--slds-c-badge-text-color,var(--sds-c-badge-text-color,var(--dxp-g-neutral-contrast,#181818)));
|
border-color: var(--slds-c-badge-color-border,var(--sds-c-badge-color-border,var(--dxp-g-neutral-1,transparent)));
|
background-color: var(--slds-c-badge-color-background,var(--sds-c-badge-color-background,var(--dxp-g-neutral,#f3f3f3)));
|
}
|
|
.slds-badge__icon {
|
color: var(--slds-c-badge-icon-color-foreground,var(--sds-c-badge-icon-color-foreground,var(--dxp-g-neutral-contrast,#747474)));
|
}
|
|
.slds-badge__icon.slds-badge__icon_inverse {
|
--slds-c-badge-icon-color-foreground: var(--slds-c-badge-icon-inverse-color-foreground, var(--dxp-g-neutral-contrast-3, currentColor));
|
}
|
|
.slds-button__icon {
|
fill: var(--slds-c-icon-color-foreground,var(--dxp-g-neutral-3,currentColor));
|
}
|
|
.slds-icon {
|
fill: var(--slds-c-icon-color-foreground,var(--sds-c-icon-color-foreground,var(--dxp-g-neutral-3,#fff)));
|
}
|
|
.slds-icon-text-default {
|
--slds-c-icon-color-foreground: var(--slds-c-icon-color-foreground-default, var(--sds-c-icon-color-foreground-default, var(--dxp-g-neutral-3, #747474)));
|
}
|
|
.slds-accordion__list-item {
|
border-top-color: var(--slds-c-accordion-color-border,var(--sds-c-accordion-color-border,var(--dxp-g-neutral-1,#e5e5e5)));
|
}
|
|
.slds-accordion__summary {
|
background-color: var(--slds-c-accordion-summary-color-background,var(--sds-c-accordion-summary-color-background,var(--dxp-g-root,transparent)));
|
}
|
|
.slds-accordion__summary-heading {
|
color: var(--slds-c-accordion-heading-text-color,var(--sds-c-accordion-heading-text-color,var(--dxp-g-root-contrast,#181818)));
|
}
|
|
.slds-card {
|
background: var(--slds-c-card-color-background,var(--sds-c-card-color-background,var(--dxp-g-root,#fff)));
|
border-color: var(--slds-c-card-color-border,var(--sds-c-card-color-border,var(--dxp-g-neutral-1,#c9c9c9)));
|
color: var(--slds-c-card-text-color,var(--dxp-g-root-contrast,--sds-c-card-text-color));
|
}
|
|
.slds-card__footer {
|
border-top-color: var(--slds-c-card-footer-color-border,var(--sds-c-card-footer-color-border,var(--dxp-g-neutral-1,#c9c9c9)));
|
}
|
|
.slds-card-wrapper {
|
background: var(--slds-c-card-color-background,var(--sds-c-card-color-background,var(--dxp-g-root,#fff)));
|
border-color: var(--slds-c-card-color-border,var(--sds-c-card-color-border,var(--dxp-g-neutral-1,#c9c9c9)));
|
}
|
|
.slds-card .slds-card_boundary, .slds-modal .slds-card_boundary, .slds-tabs--default .slds-card_boundary, .slds-tabs_default .slds-card_boundary {
|
border-color: var(--slds-c-card-color-border,var(--sds-c-card-color-border,var(--dxp-g-neutral-1,#c9c9c9)));
|
}
|
|
.slds-tabs_card, .slds-tabs_card.slds-tabs_card {
|
background: var(--slds-c-card-color-background,var(--sds-c-card-color-background,var(--dxp-g-root,#fff)));
|
border-color: var(--slds-c-card-color-border,var(--sds-c-card-color-border,var(--dxp-g-neutral-1,#c9c9c9)));
|
}
|
|
.slds-card-wrapper .slds-card_boundary, .slds-tabs_card .slds-card_boundary, .slds-tabs_card.slds-tabs_card .slds-card_boundary {
|
border-color: var(--slds-c-card-color-border,var(--sds-c-card-color-border,var(--dxp-g-neutral-1,#c9c9c9)));
|
}
|
|
.slds-input {
|
background-color: var(--slds-c-input-color-background,var(--sds-c-input-color-background,var(--dxp-g-root,#fff)));
|
}
|
|
.slds-input:active, .slds-input:focus {
|
--slds-c-input-background-color: var(--slds-c-input-color-background-focus, var(--sds-c-input-color-background-focus, var(--dxp-g-root, white)));
|
--slds-c-input-shadow: var(--slds-c-input-shadow-focus, 0 0 3px var(--dxp-g-brand-1, --sds-c-input-shadow-focus));
|
}
|
|
.slds-input_faux {
|
background-color: var(--slds-c-input-color-background,var(--sds-c-input-color-background,var(--dxp-g-root,#fff)));
|
}
|
|
.slds-textarea {
|
background-color: var(--slds-c-textarea-color-background,var(--sds-c-textarea-color-background,var(--dxp-g-root,#fff)));
|
}
|
|
.slds-textarea:active, .slds-textarea:focus {
|
background-color: var(--slds-c-textarea-color-background-focus,var(--sds-c-textarea-color-background-focus,var(--dxp-g-root,#fff)));
|
-webkit-box-shadow: var(--slds-c-textarea-shadow-focus,0 0 3px var(--dxp-g-brand-1,--sds-c-textarea-shadow-focus));
|
box-shadow: var(--slds-c-textarea-shadow-focus,0 0 3px var(--dxp-g-brand-1,--sds-c-textarea-shadow-focus));
|
}
|
|
.slds-radio [type=radio]:checked + .slds-radio--faux:after, .slds-radio [type=radio]:checked + .slds-radio__label .slds-radio--faux:after, .slds-radio [type=radio]:checked + .slds-radio__label .slds-radio_faux:after, .slds-radio [type=radio]:checked + .slds-radio_faux:after, .slds-radio [type=radio]:checked ~ .slds-radio--faux:after, .slds-radio [type=radio]:checked ~ .slds-radio_faux:after {
|
background-color: var(--slds-c-radio-mark-color-foreground,var(--sds-c-radio-mark-color-foreground,var(--dxp-g-brand,#0176d3)));
|
}
|
|
.slds-radio [type=radio]:focus + .slds-radio--faux, .slds-radio [type=radio]:focus + .slds-radio__label .slds-radio--faux, .slds-radio [type=radio]:focus + .slds-radio__label .slds-radio_faux, .slds-radio [type=radio]:focus + .slds-radio_faux, .slds-radio [type=radio]:focus ~ .slds-radio--faux, .slds-radio [type=radio]:focus ~ .slds-radio_faux {
|
-webkit-box-shadow: var(--slds-c-radio-shadow-focus,0 0 3px var(--dxp-g-brand-1,--sds-c-radio-shadow-focus));
|
box-shadow: var(--slds-c-radio-shadow-focus,0 0 3px var(--dxp-g-brand-1,--sds-c-radio-shadow-focus));
|
}
|
|
.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, .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 {
|
border-bottom-color: var(--slds-c-checkbox-mark-color-foreground,var(--sds-c-checkbox-mark-color-foreground,var(--dxp-g-brand,#0176d3)));
|
border-left-color: var(--slds-c-checkbox-mark-color-foreground,var(--sds-c-checkbox-mark-color-foreground,var(--dxp-g-brand,#0176d3)));
|
}
|
|
.slds-checkbox [type=checkbox]:focus + .slds-checkbox--faux, .slds-checkbox [type=checkbox]:focus + .slds-checkbox__label .slds-checkbox--faux, .slds-checkbox [type=checkbox]:focus + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type=checkbox]:focus + .slds-checkbox_faux, .slds-checkbox [type=checkbox]:focus ~ .slds-checkbox--faux, .slds-checkbox [type=checkbox]:focus ~ .slds-checkbox_faux {
|
--slds-c-checkbox-shadow: var(--slds-c-checkbox-shadow-focus, 0 0 3px var(--dxp-g-brand-1, --sds-c-checkbox-shadow-focus));
|
}
|
|
.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, .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 {
|
background: var(--slds-c-checkbox-mark-color-foreground,var(--sds-c-checkbox-mark-color-foreground,var(--dxp-g-brand,#0176d3)));
|
}
|
|
.slds-checkbox--toggle .slds-checkbox--faux, .slds-checkbox--toggle .slds-checkbox_faux, .slds-checkbox_toggle .slds-checkbox--faux, .slds-checkbox_toggle .slds-checkbox_faux {
|
border-color: var(--slds-c-checkbox-toggle-color-border,var(--sds-c-checkbox-toggle-color-border,var(--dxp-g-neutral-1,#aeaeae)));
|
background-color: var(--slds-c-checkbox-toggle-color-background,var(--sds-c-checkbox-toggle-color-background,var(--dxp-g-neutral-1,#aeaeae)));
|
}
|
|
.slds-checkbox--toggle .slds-checkbox--faux:focus, .slds-checkbox--toggle .slds-checkbox--faux:hover, .slds-checkbox--toggle .slds-checkbox_faux:focus, .slds-checkbox--toggle .slds-checkbox_faux:hover, .slds-checkbox_toggle .slds-checkbox--faux:focus, .slds-checkbox_toggle .slds-checkbox--faux:hover, .slds-checkbox_toggle .slds-checkbox_faux:focus, .slds-checkbox_toggle .slds-checkbox_faux:hover {
|
--slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-hover, var(--sds-c-checkbox-toggle-color-background-hover, var(--dxp-g-neutral-2, #939393)));
|
--slds-c-checkbox-toggle-color-border: var(--dxp-g-neutral-2, --slds-c-checkbox-toggle-color-border-hover);
|
}
|
|
.slds-checkbox--toggle .slds-checkbox--faux:after, .slds-checkbox--toggle .slds-checkbox_faux:after, .slds-checkbox_toggle .slds-checkbox--faux:after, .slds-checkbox_toggle .slds-checkbox_faux:after {
|
background-color: var(--slds-c-checkbox-toggle-switch-color-background,var(--sds-c-checkbox-toggle-switch-color-background,var(--dxp-g-neutral-contrast-3,#fff)));
|
}
|
|
.slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox--faux:before, .slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:before, .slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox_faux:before, .slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before, .slds-checkbox--toggle [type=checkbox]:checked ~ .slds-checkbox--faux:before, .slds-checkbox--toggle [type=checkbox]:checked ~ .slds-checkbox_faux:before, .slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox--faux:before, .slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:before, .slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox_faux:before, .slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before, .slds-checkbox_toggle [type=checkbox]:checked ~ .slds-checkbox--faux:before, .slds-checkbox_toggle [type=checkbox]:checked ~ .slds-checkbox_faux:before {
|
background-color: var(--slds-c-checkbox-toggle-switch-color-background-checked,var(--sds-c-checkbox-toggle-switch-color-background-checked,var(--slds-c-checkbox-toggle-switch-color-background,var(--sds-c-checkbox-toggle-switch-color-background,var(--dxp-g-brand-contrast,#fff)))));
|
}
|
|
.slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox--faux:after, .slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:after, .slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox_faux:after, .slds-checkbox--toggle [type=checkbox]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:after, .slds-checkbox--toggle [type=checkbox]:checked ~ .slds-checkbox--faux:after, .slds-checkbox--toggle [type=checkbox]:checked ~ .slds-checkbox_faux:after, .slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox--faux:after, .slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:after, .slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox_faux:after, .slds-checkbox_toggle [type=checkbox]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:after, .slds-checkbox_toggle [type=checkbox]:checked ~ .slds-checkbox--faux:after, .slds-checkbox_toggle [type=checkbox]:checked ~ .slds-checkbox_faux:after {
|
border-bottom-color: var(--slds-c-checkbox-toggle-mark-color-foreground,var(--sds-c-checkbox-toggle-mark-color-foreground,var(--dxp-g-brand-contrast,#fff)));
|
border-right-color: var(--slds-c-checkbox-toggle-mark-color-foreground,var(--sds-c-checkbox-toggle-mark-color-foreground,var(--dxp-g-brand-contrast,#fff)));
|
}
|
|
.slds-checkbox--toggle [type=checkbox]:checked:focus + .slds-checkbox--faux, .slds-checkbox--toggle [type=checkbox]:checked:focus + .slds-checkbox--faux_container .slds-checkbox--faux, .slds-checkbox--toggle [type=checkbox]:checked:focus + .slds-checkbox_faux, .slds-checkbox--toggle [type=checkbox]:checked:focus + .slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox--toggle [type=checkbox]:checked:focus ~ .slds-checkbox--faux, .slds-checkbox--toggle [type=checkbox]:checked:focus ~ .slds-checkbox_faux, .slds-checkbox_toggle [type=checkbox]:checked:focus + .slds-checkbox--faux, .slds-checkbox_toggle [type=checkbox]:checked:focus + .slds-checkbox--faux_container .slds-checkbox--faux, .slds-checkbox_toggle [type=checkbox]:checked:focus + .slds-checkbox_faux, .slds-checkbox_toggle [type=checkbox]:checked:focus + .slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox_toggle [type=checkbox]:checked:focus ~ .slds-checkbox--faux, .slds-checkbox_toggle [type=checkbox]:checked:focus ~ .slds-checkbox_faux {
|
--slds-c-checkbox-toggle-color-background: var(--slds-c-checkbox-toggle-color-background-checked-focus, var(--sds-c-checkbox-toggle-color-background-checked-focus, var(--dxp-g-brand-1, #014486)));
|
}
|
|
.slds-select {
|
border-color: var(--slds-c-select-color-border,var(--sds-c-select-color-border,var({exclude},#c9c9c9)));
|
background-color: var(--slds-c-select-color-background,var(--sds-c-select-color-background,var({exclude},#fff)));
|
color: var(--slds-c-select-text-color,var({exclude},--sds-c-select-text-color));
|
}
|
|
.slds-select:active, .slds-select:focus {
|
border-color: var(--slds-c-select-color-border-focus,var(--sds-c-select-color-border-focus,var({exclude},#1b96ff)));
|
background-color: var(--slds-c-select-color-background-focus,var(--sds-c-select-color-background-focus,var({exclude},#fff)));
|
color: var(--slds-c-select-text-color-focus,var({exclude},--sds-c-select-text-color-focus));
|
-webkit-box-shadow: var(--slds-c-select-shadow-focus,0 0 3px var(--dxp-g-brand-1,--sds-c-select-shadow-focus));
|
box-shadow: var(--slds-c-select-shadow-focus,0 0 3px var(--dxp-g-brand-1,--sds-c-select-shadow-focus));
|
}
|
|
.slds-slider__range::-webkit-slider-thumb {
|
background-color: var(--slds-c-slider-thumb-color-foreground,var(--sds-c-slider-thumb-color-foreground,var(--dxp-g-brand,#0176d3)));
|
}
|
|
.slds-slider__range::-webkit-slider-thumb:hover {
|
background-color: var(--slds-c-slider-thumb-color-foreground-hover,var(--sds-c-slider-thumb-color-foreground-hover,var(--dxp-g-brand-1,#014486)));
|
}
|
|
.slds-slider__range::-webkit-slider-runnable-track {
|
background-color: var(--slds-c-slider-track-color-background,var(--sds-c-slider-track-color-background,var(--dxp-g-neutral,#f3f3f3)));
|
}
|
|
.slds-slider__range::-moz-range-thumb {
|
background-color: var(--slds-c-slider-thumb-color-foreground,var(--sds-c-slider-thumb-color-foreground,var(--dxp-g-brand,#0176d3)));
|
}
|
|
.slds-slider__range::-moz-range-thumb:hover {
|
background-color: var(--slds-c-slider-thumb-color-foreground-hover,var(--sds-c-slider-thumb-color-foreground-hover,var(--dxp-g-brand-1,#014486)));
|
}
|
|
.slds-slider__range::-moz-range-track {
|
background-color: var(--slds-c-slider-track-color-background,var(--sds-c-slider-track-color-background,var(--dxp-g-neutral,#f3f3f3)));
|
}
|
|
.slds-slider__range::-ms-track {
|
background-color: var(--slds-c-slider-track-color-background,var(--sds-c-slider-track-color-background,var(--dxp-g-neutral,#f3f3f3)));
|
}
|
|
.slds-slider__range::-ms-thumb {
|
background-color: var(--slds-c-slider-thumb-color-foreground,var(--sds-c-slider-thumb-color-foreground,var(--dxp-g-brand,#0176d3)));
|
}
|
|
.slds-slider__range::-ms-thumb:hover {
|
background-color: var(--slds-c-slider-thumb-color-foreground-hover,var(--sds-c-slider-thumb-color-foreground-hover,var(--dxp-g-brand-1,#014486)));
|
}
|
|
.slds-slider__range:focus::-webkit-slider-thumb {
|
background-color: var(--slds-c-slider-thumb-color-foreground-focus,var(--sds-c-slider-thumb-color-foreground-focus,var(--dxp-g-brand-1,#014486)));
|
-webkit-box-shadow: var(--slds-c-slider-thumb-shadow-focus,0 0 3px var(--dxp-g-brand-1,--sds-c-slider-thumb-shadow-focus));
|
box-shadow: var(--slds-c-slider-thumb-shadow-focus,0 0 3px var(--dxp-g-brand-1,--sds-c-slider-thumb-shadow-focus));
|
}
|
|
.slds-slider__range:active::-webkit-slider-thumb {
|
background-color: var(--slds-c-slider-thumb-color-foreground-active,var(--sds-c-slider-thumb-color-foreground-active,var(--dxp-g-brand-1,#014486)));
|
}
|
|
.slds-slider__range:focus::-moz-range-thumb {
|
background-color: var(--slds-c-slider-thumb-color-foreground-focus,var(--sds-c-slider-thumb-color-foreground-focus,var(--dxp-g-brand-1,#014486)));
|
box-shadow: var(--slds-c-slider-thumb-shadow-focus,0 0 3px var(--dxp-g-brand-1,--sds-c-slider-thumb-shadow-focus));
|
}
|
|
.slds-slider__range:active::-moz-range-thumb {
|
background-color: var(--slds-c-slider-thumb-color-foreground-active,var(--sds-c-slider-thumb-color-foreground-active,var(--dxp-g-brand-1,#014486)));
|
}
|
|
.slds-popover--tooltip, .slds-popover_tooltip {
|
background-color: var(--slds-c-tooltip-color-background,var(--sds-c-tooltip-color-background,var(--dxp-g-info,#032d60)));
|
}
|
|
.slds-popover--tooltip .slds-popover__body, .slds-popover_tooltip .slds-popover__body {
|
color: var(--slds-c-tooltip-text-color,var(--sds-c-tooltip-text-color,var(--dxp-g-info-contrast,#fff)));
|
}
|
|
.slds-modal__header {
|
border-bottom-color: var(--slds-c-modal-color-border,var(--sds-c-modal-color-border,var(--dxp-g-neutral-1,#e5e5e5)));
|
background-color: var(--slds-c-modal-header-color-background,var(--sds-c-modal-header-color-background,var(--slds-c-modal-color-background,var(--sds-c-modal-color-background,var(--dxp-g-root,#fff)))));
|
color: var(--slds-c-modal-header-text-color,var(--sds-c-modal-header-text-color,var(--dxp-g-root-contrast,--sds-c-modal-text-color)));
|
}
|
|
.slds-modal__content {
|
background-color: var(--slds-c-modal-content-color-background,var(--sds-c-modal-content-color-background,var(--slds-c-modal-color-background,var(--sds-c-modal-color-background,var(--dxp-g-root,#fff)))));
|
color: var(--slds-c-modal-content-text-color,var(--sds-c-modal-content-text-color,var(--slds-c-modal-text-color,var(--dxp-g-root-contrast,--sds-c-modal-text-color))));
|
}
|
|
.slds-modal__footer {
|
border-top-color: var(--slds-c-modal-color-border,var(--sds-c-modal-color-border,var(--dxp-g-neutral-1,#e5e5e5)));
|
background-color: var(--slds-c-modal-footer-color-background,var(--sds-c-modal-footer-color-background,var(--slds-c-modal-color-background,var(--sds-c-modal-color-background,var(--dxp-g-root,#f3f3f3)))));
|
color: var(--slds-c-modal-footer-text-color,var(--sds-c-modal-footer-text-color,var(--slds-c-modal-text-color,var(--dxp-g-root-contrast,--sds-c-modal-text-color))));
|
}
|
|
.slds-pill {
|
border-color: var(--slds-c-pill-color-border,var(--sds-c-pill-color-border,var(--dxp-g-neutral-1,#e5e5e5)));
|
background-color: var(--slds-c-pill-color-background,var(--sds-c-pill-color-background,var(--dxp-g-root,#fff)));
|
-webkit-box-shadow: var(undefined,0 0 3px var(--dxp-g-brand));
|
box-shadow: var(undefined,0 0 3px var(--dxp-g-brand));
|
}
|
|
.slds-pill_container {
|
border-color: var(--slds-c-pill-color-border,var(--sds-c-pill-color-border,var(--dxp-g-neutral-1,#e5e5e5)));
|
background-color: var(--slds-c-pill-container-color-background,var(--sds-c-pill-container-color-background,var(--dxp-g-root,#fff)));
|
}
|
|
.slds-pill__label:focus {
|
-webkit-box-shadow: var(--slds-c-pill-label-shadow-focus,0 0 3px var(--dxp-g-brand-1,--sds-c-pill-label-shadow-focus));
|
box-shadow: var(--slds-c-pill-label-shadow-focus,0 0 3px var(--dxp-g-brand-1,--sds-c-pill-label-shadow-focus));
|
}
|
|
.slds-pill__action {
|
border-color: var(--slds-c-pill-color-border,var(--sds-c-pill-color-border,var(--dxp-g-neutral-1,#e5e5e5)));
|
}
|
|
.slds-pill__action:focus {
|
-webkit-box-shadow: var(--slds-c-pill-action-shadow,0 0 3px var(--dxp-g-brand,--sds-c-pill-action-shadow));
|
box-shadow: var(--slds-c-pill-action-shadow,0 0 3px var(--dxp-g-brand,--sds-c-pill-action-shadow));
|
}
|
|
.slds-has-error:active {
|
border-color: var(--slds-c-pill-error-color-border-active,var(--sds-c-pill-error-color-border-active,var(--dxp-g-destructive-1,#ea001e)));
|
}
|
|
.slds-has-error .slds-pill__label {
|
color: var(--slds-c-pill-error-text-color,var(--sds-c-pill-error-text-color,var(--dxp-g-destructive,#ea001e)));
|
}
|
|
.slds-tabs--default__nav, .slds-tabs_default__nav {
|
border-bottom-color: var(--slds-c-tabs-list-color-border,var(--sds-c-tabs-list-color-border,var(--dxp-g-brand,#e5e5e5)));
|
}
|
|
.slds-tabs--default__item, .slds-tabs_default__item {
|
color: var(--slds-c-tabs-item-text-color,var(--sds-c-tabs-item-text-color,var(--dxp-g-root-contrast,#444)));
|
}
|
|
.slds-tabs--default__item.slds-active, .slds-tabs--default__item.slds-is-active, .slds-tabs_default__item.slds-active, .slds-tabs_default__item.slds-is-active {
|
--slds-c-tabs-item-text-color: var(--slds-c-tabs-item-text-color-active, var(--sds-c-tabs-item-text-color-active, var(--dxp-g-root-contrast-1, #181818)));
|
}
|
|
.slds-tabs--default__item.slds-active:after, .slds-tabs--default__item.slds-is-active:after, .slds-tabs_default__item.slds-active:after, .slds-tabs_default__item.slds-is-active:after {
|
background-color: var(--slds-c-tabs-item-color-border-active,var(--sds-c-tabs-item-color-border-active,var(--dxp-g-brand-1,#1b96ff)));
|
}
|
|
.slds-tabs--default__item:hover:after, .slds-tabs_default__item:hover:after {
|
background-color: var(--slds-c-tabs-item-color-border-hover,var(--sds-c-tabs-item-color-border-hover,var(--dxp-g-brand-1,#0176d3)));
|
}
|
|
.slds-tabs--default__item.slds-has-focus:after, .slds-tabs--default__item:focus:after, .slds-tabs_default__item.slds-has-focus:after, .slds-tabs_default__item:focus:after {
|
background-color: var(--slds-c-tabs-item-color-border-active,var(--sds-c-tabs-item-color-border-active,var(--dxp-g-brand-1,#1b96ff)));
|
}
|
|
.slds-tabs_default__overflow-button .slds-button {
|
color: var(--slds-c-tabs-item-text-color,var(--sds-c-tabs-item-text-color,var(--dxp-g-root-contrast,#444)));
|
}
|
|
.slds-tabs--default .slds-has-overflow .slds-tabs__nav-scroller--inner, .slds-tabs--default .slds-has-overflow .slds-tabs__nav-scroller_inner, .slds-tabs--default .slds-tab__scroll-controls, .slds-tabs_default .slds-has-overflow .slds-tabs__nav-scroller--inner, .slds-tabs_default .slds-has-overflow .slds-tabs__nav-scroller_inner, .slds-tabs_default .slds-tab__scroll-controls {
|
border-bottom-color: var(--slds-c-tabs-list-color-border,var(--sds-c-tabs-list-color-border,var(--dxp-g-brand,#e5e5e5)));
|
}
|
|
.slds-notify--alert, .slds-notify_alert {
|
color: var(--slds-c-alert-text-color,var(--sds-c-alert-text-color,var(--dxp-g-neutral-contrast,#fff)));
|
background-color: var(--slds-c-alert-color-background,var(--sds-c-alert-color-background,var(--dxp-g-neutral,#747474)));
|
}
|
|
.slds-notify--alert a:focus, .slds-notify_alert a:focus {
|
border-color: var(--slds-c-alert-color-border,var(--dxp-g-neutral-1,#f3f3f3));
|
}
|
|
.slds-notify--alert a:active, .slds-notify_alert a:active {
|
color: var(--slds-c-alert-text-color-active,var(--sds-c-alert-text-color-active,var(--dxp-g-neutral-contrast-1,rgba(255,255,255,.5))));
|
}
|
|
.slds-notify--toast, .slds-notify_toast {
|
background-color: var(--slds-c-toast-color-background,var(--sds-c-toast-color-background,var(--dxp-g-neutral,#747474)));
|
color: var(--slds-c-toast-text-color,var(--dxp-g-neutral-contrast,--sds-c-toast-text-color));
|
}
|
|
:root {
|
--dxp-c-monospace-font-family: consolas, menlo, monaco, courier, monospace;
|
--dxp-c-title-line-height: 1.25;
|
--dxp-c-title-caps-line-height: 1.25;
|
--dxp-c-title-caps-font-weight: 400;
|
--dxp-c-title-caps-letter-spacing: 0.0625rem;
|
--dxp-c-title-caps-text-transform: uppercase;
|
--dxp-c-button-neutral-transition: border 0.15s linear;
|
--dxp-c-button-brand-transition: border 0.15s linear;
|
--dxp-c-button-outline-brand-transition: border 0.15s linear;
|
--dxp-c-button-destructive-transition: border 0.15s linear;
|
--dxp-c-button-text-destructive-transition: border 0.15s linear;
|
--dxp-c-button-success-transition: border 0.15s linear;
|
--dxp-c-spinner-color-background: inherit;
|
--dxp-c-link-transition: color 0.1s linear;
|
--dxp-c-strong-text-weight: 700;
|
--dxp-c-selection-text-shadow: none;
|
--dxp-c-placeholder-font-weight: 400;
|
--dxp-c-placeholder-opacity: 1;
|
--dxp-c-html-line-height: 1.5;
|
--dxp-c-hr-margin-block-start: 2rem;
|
--dxp-c-hr-margin-block-end: 2rem;
|
}
|
|
.slds-button.slds-accordion__summary-action {
|
color: var(--sds-c-accordion-heading-text-color,var(--dxp-g-root-contrast));
|
}
|
|
.slds-notify {
|
background-color: var(--dxp-g-neutral);
|
color: var(--dxp-g-neutral-contrast);
|
}
|
|
.slds-notify a:link:not(.slds-button), .slds-notify a:not(.slds-button), .slds-notify a:visited:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color,var(--dxp-g-neutral-contrast));
|
text-decoration: underline;
|
}
|
|
.slds-notify a:hover:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-hover,var(--dxp-g-neutral-contrast-1));
|
text-decoration: underline;
|
}
|
|
.slds-notify a:active:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-active,var(--dxp-g-neutral-contrast-1));
|
text-decoration: underline;
|
}
|
|
.slds-notify a:focus:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-focus,var(--dxp-g-neutral-contrast-1));
|
text-decoration: underline;
|
}
|
|
.slds-theme--success, .slds-theme_success {
|
color: var(--dxp-g-success-contrast);
|
background-color: var(--dxp-g-success);
|
border-color: var(--dxp-g-success);
|
}
|
|
.slds-theme--warning, .slds-theme_warning {
|
color: var(--dxp-g-warning-contrast);
|
background-color: var(--dxp-g-warning);
|
border-color: var(--dxp-g-warning);
|
}
|
|
.slds-theme--error, .slds-theme_error {
|
color: var(--dxp-g-destructive-contrast);
|
background-color: var(--dxp-g-destructive);
|
border-color: var(--dxp-g-destructive);
|
}
|
|
.slds-theme--info, .slds-theme_info {
|
color: var(--dxp-g-neutral-contrast);
|
background-color: var(--dxp-g-neutral);
|
border-color: var(--dxp-g-neutral);
|
}
|
|
.slds-theme--offline, .slds-theme_offline {
|
color: var(--dxp-g-offline-contrast);
|
background-color: var(--dxp-g-offline);
|
border-color: var(--dxp-g-offline);
|
}
|
|
.slds-notify .slds-button--icon-border-inverse, .slds-notify .slds-button--icon-border-inverse:focus, .slds-notify .slds-button--icon-border-inverse:hover, .slds-notify .slds-button--icon-inverse, .slds-notify .slds-button--icon-inverse:focus, .slds-notify .slds-button--icon-inverse:hover, .slds-notify .slds-button_icon-border-inverse, .slds-notify .slds-button_icon-border-inverse:focus, .slds-notify .slds-button_icon-border-inverse:hover, .slds-notify .slds-button_icon-inverse, .slds-notify .slds-button_icon-inverse:focus, .slds-notify .slds-button_icon-inverse:hover {
|
color: var(--dxp-c-link-text-color);
|
}
|
|
.slds-notify .slds-icon__container, .slds-notify .slds-icon_container {
|
background-color: transparent;
|
}
|
|
.slds-notify .slds-button {
|
background-color: transparent;
|
border-color: transparent;
|
}
|
|
.slds-notify .slds-icon {
|
fill: var(--dxp-g-neutral-contrast);
|
}
|
|
.slds-alert_warning {
|
background-color: var(--dxp-g-warning);
|
color: var(--dxp-g-warning-contrast);
|
}
|
|
.slds-alert_warning a:link:not(.slds-button), .slds-alert_warning a:not(.slds-button), .slds-alert_warning a:visited:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-warning,var(--dxp-g-warning-contrast));
|
}
|
|
.slds-alert_warning a:hover:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-warning-hover,var(--dxp-g-warning-contrast-1));
|
}
|
|
.slds-alert_warning a:active:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-warning-active,var(--dxp-g-warning-contrast-1));
|
}
|
|
.slds-alert_warning a:focus:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-warning-focus,var(--dxp-g-warning-contrast-1));
|
}
|
|
.slds-alert_warning .slds-button__icon, .slds-alert_warning .slds-icon {
|
fill: var(--dxp-g-warning-contrast);
|
}
|
|
.slds-alert_error {
|
background-color: var(--dxp-g-destructive);
|
color: var(--dxp-g-destructive-contrast);
|
}
|
|
.slds-alert_error a:link:not(.slds-button), .slds-alert_error a:not(.slds-button), .slds-alert_error a:visited:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-error,var(--dxp-g-destructive-contrast));
|
}
|
|
.slds-alert_error a:hover:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-error-hover,var(--dxp-g-destructive-contrast-1));
|
}
|
|
.slds-alert_error a:active:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-error-active,var(--dxp-g-destructive-contrast-1));
|
}
|
|
.slds-alert_error a:focus:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-error-focus,var(--dxp-g-destructive-contrast-1));
|
}
|
|
.slds-alert_error .slds-button__icon, .slds-alert_error .slds-icon {
|
fill: var(--dxp-g-destructive-contrast);
|
}
|
|
.slds-alert_offline {
|
background-color: var(--dxp-g-offline);
|
color: var(--dxp-g-offline-contrast);
|
}
|
|
.slds-alert_offline a:link:not(.slds-button), .slds-alert_offline a:not(.slds-button), .slds-alert_offline a:visited:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-offline,var(--dxp-g-offline-contrast));
|
}
|
|
.slds-alert_offline a:hover:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-offline-hover,var(--dxp-g-offline-contrast-1));
|
}
|
|
.slds-alert_offline a:active:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-offline-active,var(--dxp-g-offline-contrast-1));
|
}
|
|
.slds-alert_offline a:focus:not(.slds-button) {
|
color: var(--dxp-c-alert-link-text-color-offline-focus,var(--dxp-g-offline-contrast-1));
|
}
|
|
.slds-alert_offline .slds-button__icon, .slds-alert_offline .slds-icon {
|
fill: var(--dxp-g-offline-contrast);
|
}
|
|
.slds-theme--warning a:link:not(.slds-button), .slds-theme--warning a:visited:not(.slds-button), .slds-theme_warning a:link:not(.slds-button), .slds-theme_warning a:visited:not(.slds-button) {
|
color: var(--dxp-g-warning-contrast);
|
}
|
|
.slds-theme--warning a:focus, .slds-theme_warning a:focus {
|
box-shadow: 0 0 3px var(--dxp-g-neutral);
|
border: 1px solid var(--dxp-g-neutral);
|
}
|
|
.slds-theme--error a:not(.slds-button--neutral), .slds-theme_error a:not(.slds-button--neutral) {
|
color: var(--dxp-g-destructive-contrast);
|
text-decoration: underline;
|
}
|
|
.slds-theme--success a:not(.slds-button--neutral), .slds-theme_success a:not(.slds-button--neutral) {
|
color: var(--dxp-g-success-contrast);
|
text-decoration: underline;
|
}
|
|
.slds-theme--info a:not(.slds-button--neutral), .slds-theme_info a:not(.slds-button--neutral) {
|
color: var(--dxp-g-neutral-contrast);
|
text-decoration: underline;
|
}
|
|
.slds-theme--error a:not(.slds-button--neutral):link, .slds-theme--error a:not(.slds-button--neutral):visited, .slds-theme_error a:not(.slds-button--neutral):link, .slds-theme_error a:not(.slds-button--neutral):visited {
|
color: var(--dxp-g-destructive-contrast);
|
text-decoration: underline;
|
}
|
|
.slds-theme--success a:not(.slds-button--neutral):link, .slds-theme--success a:not(.slds-button--neutral):visited, .slds-theme_success a:not(.slds-button--neutral):link, .slds-theme_success a:not(.slds-button--neutral):visited {
|
color: var(--dxp-g-success-contrast);
|
text-decoration: underline;
|
}
|
|
.slds-theme--info a:not(.slds-button--neutral):link, .slds-theme--info a:not(.slds-button--neutral):visited, .slds-theme_info a:not(.slds-button--neutral):link, .slds-theme_info a:not(.slds-button--neutral):visited {
|
color: var(--dxp-g-neutral-contrast);
|
text-decoration: underline;
|
}
|
|
.slds-notify a:focus, .slds-notify_toast a:focus {
|
box-shadow: 0 0 3px var(--dxp-g-neutral-contrast);
|
border: 1px solid var(--dxp-g-neutral-contrast);
|
}
|
|
.slds-theme--success.slds-notify .slds-icon, .slds-theme_success.slds-notify .slds-icon {
|
fill: var(--dxp-g-success-contrast);
|
}
|
|
.slds-notify.slds-theme_success a:focus {
|
box-shadow: 0 0 3px var(--dxp-g-success-contrast);
|
border: 1px solid var(--dxp-g-success-contrast);
|
}
|
|
.slds-notify.slds-alert_warning a:focus, .slds-notify.slds-theme_warning a:focus {
|
box-shadow: 0 0 3px var(--dxp-g-warning-contrast);
|
border: 1px solid var(--dxp-g-warning-contrast);
|
}
|
|
.slds-theme--warning .slds-button__icon, .slds-theme--warning .slds-icon, .slds-theme--warning.slds-notify .slds-icon, .slds-theme_warning .slds-button__icon, .slds-theme_warning .slds-icon, .slds-theme_warning.slds-notify .slds-icon {
|
fill: var(--dxp-g-warning-contrast);
|
}
|
|
.slds-notify.slds-alert_error a:focus, .slds-notify.slds-theme_error a:focus {
|
box-shadow: 0 0 3px var(--dxp-g-destructive-contrast);
|
border: 1px solid var(--dxp-g-destructive-contrast);
|
}
|
|
.slds-theme--error.slds-notify .slds-icon, .slds-theme_error.slds-notify .slds-icon {
|
fill: var(--dxp-g-destructive-contrast);
|
}
|
|
.slds-notify.slds-alert_offline a:focus {
|
box-shadow: 0 0 3px var(--dxp-g-offline-contrast);
|
border: 1px solid var(--dxp-g-offline-contrast);
|
}
|
|
.slds-notify .slds-text-heading_small {
|
font-size: var(--dxp-s-body-font-size);
|
font-style: var(--dxp-s-body-font-style);
|
font-family: var(--dxp-s-body-font-family,var(--dxp-g-heading-font-family));
|
font-weight: var(--dxp-s-body-font-weight);
|
text-decoration: var(--dxp-s-body-text-decoration);
|
text-transform: var(--dxp-s-body-text-transform);
|
line-height: var(--dxp-s-body-line-height);
|
letter-spacing: var(--dxp-s-body-letter-spacing);
|
text-shadow: var(--dxp-s-body-text-shadow);
|
color: inherit;
|
}
|
|
a, a:link:not(.slds-button,.slds-dropdown__item>a), a:visited:not(.slds-button,.slds-dropdown__item>a) {
|
color: var(--dxp-c-link-text-color,var(--dxp-s-link-text-color,var(--dxp-g-brand)));
|
background-color: var(--dxp-c-link-color-background);
|
text-decoration: var(--dxp-c-link-text-decoration,var(--dxp-s-link-text-decoration,underline));
|
text-shadow: var(--dxp-c-link-text-shadow);
|
transition: var(--dxp-c-link-transition);
|
}
|
|
a:hover:not(.slds-button,.slds-dropdown__item>a) {
|
color: var(--dxp-c-link-text-color-hover,var(--dxp-s-link-text-color-hover,var(--dxp-g-brand-1)));
|
background-color: var(--dxp-c-link-color-background-hover);
|
text-decoration: var(--dxp-s-link-text-decoration-hover);
|
text-shadow: var(--dxp-c-link-text-shadow-hover);
|
}
|
|
a:active:not(.slds-button,.slds-dropdown__item>a) {
|
color: var(--dxp-c-link-text-color-active,var(--dxp-s-link-text-color-hover,var(--dxp-g-brand-1)));
|
background-color: var(--dxp-c-link-color-background-active);
|
text-decoration: var(--dxp-s-link-text-decoration-hover);
|
text-shadow: var(--dxp-c-link-text-shadow-active);
|
}
|
|
a:focus:not(.slds-button,.slds-dropdown__item>a) {
|
color: var(--dxp-c-link-text-color-focus,var(--dxp-s-link-text-color-hover,var(--dxp-g-brand-1)));
|
background-color: var(--dxp-c-link-color-background-focus);
|
text-decoration: var(--dxp-s-link-text-decoration-focus);
|
text-shadow: var(--dxp-c-link-text-shadow-focus);
|
outline-color: var(--dxp-c-link-color-outline-focus);
|
}
|
|
.slds-avatar .slds-icon_container svg {
|
fill: var(--sds-c-avatar-color-foreground,var(--dxp-g-brand-contrast));
|
background-color: var(--sds-c-avatar-color-background,var(--dxp-g-brand));
|
}
|
|
.slds-avatar .slds-avatar__initials, .slds-avatar .slds-avatar__initials_inverse {
|
background-color: var(--sds-c-avatar-initials-color-background,var(--dxp-g-brand));
|
color: var(--sds-c-avatar-initials-text-color,var(--dxp-g-brand-contrast));
|
}
|
|
.slds-avatar__initials, .slds-avatar__initials:hover {
|
text-shadow: none;
|
}
|
|
.slds-badge .slds-icon__container, .slds-badge .slds-icon_container {
|
background-color: transparent;
|
}
|
|
.slds-badge.slds-theme_success, .slds-badge.slds-theme_success .slds-badge__icon {
|
color: var(--sds-c-badge-icon-color-foreground,var(--sds-c-badge-icon-color-foreground-success,var(--dxp-g-success-contrast)));
|
}
|
|
.slds-badge.slds-theme_warning, .slds-badge.slds-theme_warning .slds-badge__icon {
|
color: var(--sds-c-badge-icon-color-foreground,var(--sds-c-badge-icon-color-foreground-warning,var(--dxp-g-warning-contrast)));
|
}
|
|
.slds-badge.slds-theme_error, .slds-badge.slds-theme_error .slds-badge__icon {
|
color: var(--sds-c-badge-icon-color-foreground,var(--sds-c-badge-icon-color-foreground-error,var(--dxp-g-destructive-contrast)));
|
}
|
|
.slds-badge.slds-badge_lightest {
|
color: var(--dxp-g-root-contrast);
|
}
|
|
.slds-badge {
|
font-size: var(--dxp-s-body-small-font-size,var(--sds-c-badge-font-size,.75rem));
|
font-style: var(--dxp-s-body-small-font-style);
|
font-family: var(--dxp-s-body-small-font-family);
|
font-weight: var(--dxp-s-body-small-font-weight);
|
text-decoration: var(--dxp-s-body-small-text-decoration);
|
text-transform: var(--dxp-s-body-small-text-transform);
|
line-height: var(--dxp-s-body-small-line-height,var(--sds-c-badge-line-height,normal));
|
letter-spacing: var(--dxp-s-body-small-letter-spacing);
|
text-shadow: var(--dxp-s-body-small-text-shadow);
|
}
|
|
.slds-badge .slds-icon--xx-small, .slds-badge .slds-icon_xx-small {
|
width: calc(1.125 * var(--dxp-s-body-small-font-size,var(--sds-c-badge-font-size,.75rem)));
|
height: calc(1.125 * var(--dxp-s-body-small-font-size,var(--sds-c-badge-font-size,.75rem)));
|
}
|
|
.slds-badge_inverse {
|
--slds-c-badge-color-background: var(--slds-c-badge-inverse-color-background, var(--sds-c-badge-inverse-color-background, var(--dxp-g-neutral-3, #747474)));
|
--slds-c-badge-text-color: var(--slds-c-badge-inverse-text-color, var(--sds-c-badge-inverse-text-color, var(--dxp-g-neutral-contrast-3, white)));
|
background-color: var(--slds-c-badge-inverse-color-background,var(--sds-c-badge-inverse-color-background,var(--dxp-g-neutral-3)));
|
color: var(--slds-c-badge-inverse-text-color,var(--sds-c-badge-inverse-text-color,var(--dxp-g-neutral-contrast-3)));
|
border-color: var(--slds-c-badge-color-border,var(--sds-c-badge-color-border,var(--dxp-g-neutral-3)));
|
}
|
|
.slds-badge_lightest {
|
--slds-c-badge-color-background: var(--slds-c-badge-lightest-color-background, var(--sds-c-badge-lightest-color-background, var(--dxp-g-root, white)));
|
--slds-c-badge-color-border: var(--slds-c-badge-lightest-color-border, var(--sds-c-badge-lightest-color-border, var(--dxp-g-root-contrast, #e5e5e5)));
|
background-color: var(--slds-c-badge-lightest-color-background,var(--sds-c-badge-lightest-color-background,var(--dxp-g-root)));
|
color: var(--slds-c-badge-text-color,var(--sds-c-badge-text-color,var(--dxp-g-root-contrast)));
|
border-color: var(--slds-c-badge-lightest-color-border,var(--sds-c-badge-lightest-color-border,var(--dxp-g-root-contrast)));
|
}
|
|
html {
|
font-family: var(--dxp-c-html-font-family,var(--dxp-g-root-font-family));
|
font-size: var(--dxp-s-html-font-size,16px);
|
line-height: var(--dxp-c-html-line-height);
|
background: var(--dxp-g-root);
|
color: var(--dxp-g-root-contrast);
|
}
|
|
@media (max-width: 48em) {
|
html {
|
font-size: var(--dxp-s-html-font-size-mobile,var(--dxp-s-html-font-size,16px));
|
}
|
}
|
|
body {
|
font-family: var(--dxp-s-body-font-family);
|
font-size: var(--dxp-s-body-font-size,var(--dxp-g-font-size-3));
|
font-style: var(--dxp-s-body-font-style);
|
font-weight: var(--dxp-s-body-font-weight);
|
text-decoration: var(--dxp-s-body-text-decoration);
|
text-transform: var(--dxp-s-body-text-transform);
|
line-height: var(--dxp-s-body-line-height);
|
letter-spacing: var(--dxp-s-body-letter-spacing);
|
background: var(--dxp-g-root);
|
}
|
|
hr {
|
margin-top: var(--dxp-c-hr-margin-block-start);
|
margin-bottom: var(--dxp-c-hr-margin-block-end);
|
border-color: var(--dxp-c-hr-color-border,var(--dxp-g-neutral-1));
|
}
|
|
.slds-button {
|
color: var(--sds-c-button-text-color,var(--dxp-s-button-color,var(--dxp-g-default,#0176d3)));
|
font-family: var(--dxp-s-button-font-family);
|
font-size: var(--dxp-s-button-font-size);
|
font-style: var(--dxp-s-button-font-style);
|
font-weight: var(--dxp-s-button-font-weight);
|
text-decoration: var(--dxp-s-button-text-decoration-active);
|
text-transform: var(--dxp-s-button-text-transform);
|
line-height: var(--dxp-s-button-line-height);
|
letter-spacing: var(--dxp-s-button-letter-spacing);
|
border-radius: var(--sds-c-button-radius-border,var(--dxp-s-button-radius-border,.25em));
|
--sds-c-button-brand-spacing-inline-start: var(--dxp-s-button-padding, 1em);
|
--sds-c-button-brand-spacing-inline-end: var(--dxp-s-button-padding, 1em);
|
--sds-c-button-outline-brand-spacing-inline-start: var(--dxp-s-button-padding, 1em);
|
--sds-c-button-outline-brand-spacing-inline-end: var(--dxp-s-button-padding, 1em);
|
--sds-c-button-destructive-spacing-inline-start: var(--dxp-s-button-padding, 1em);
|
--sds-c-button-destructive-spacing-inline-end: var(--dxp-s-button-padding, 1em);
|
--sds-c-button-text-destructive-spacing-inline-start: var(--dxp-s-button-padding, 1em);
|
--sds-c-button-text-destructive-spacing-inline-end: var(--dxp-s-button-padding, 1em);
|
--sds-c-button-success-spacing-inline-start: var(--dxp-s-button-padding, 1em);
|
--sds-c-button-success-spacing-inline-end: var(--dxp-s-button-padding, 1em);
|
}
|
|
.slds-button:focus, .slds-button:hover {
|
color: var(--sds-c-button-text-color-hover,var(--dxp-s-button-color-hover,var(--dxp-g-brand-1,#014486)));
|
}
|
|
.slds-button:focus {
|
box-shadow: var(--sds-c-button-shadow-focus,0 0 3px var(--dxp-s-button-color-focus,var(--dxp-g-brand-1,#0176d3)));
|
}
|
|
.slds-button:active {
|
color: var(--sds-c-button-text-color-active,var(--dxp-s-button-color-active,var(--dxp-g-brand-1,#014486)));
|
}
|
|
a.slds-button:focus {
|
box-shadow: var(--sds-c-button-shadow-focus,0 0 3px var(--dxp-s-button-color-focus,var(--dxp-g-brand-1,#0176d3)));
|
}
|
|
a.slds-button--inverse:focus, a.slds-button_inverse:focus {
|
box-shadow: var(--sds-c-button-inverse-shadow-focus,0 0 3px var(--dxp-s-button-color-focus,var(--dxp-g-brand-1,#c9c9c9)));
|
border-color: var(--sds-c-button-inverse-color-border-focus,var(--dxp-g-neutral-2,#c9c9c9));
|
}
|
|
.slds-button--neutral, .slds-button_neutral {
|
background-color: var(--sds-c-button-neutral-color-background,var(--dxp-g-root,#fff));
|
border-color: var(--sds-c-button-neutral-color-border,var(--dxp-g-neutral-1,#aeaeae));
|
transition: var(--dxp-c-button-neutral-transition);
|
}
|
|
.slds-button--neutral:focus, .slds-button--neutral:hover, .slds-button_neutral:focus, .slds-button_neutral:hover {
|
background-color: var(--sds-c-button-neutral-color-background-hover,var(--dxp-g-root-1,#f3f3f3));
|
border-color: var(--sds-c-button-neutral-color-border-hover,var(--dxp-g-neutral-2,#aeaeae));
|
}
|
|
.slds-button--neutral:active, .slds-button_neutral:active {
|
background-color: var(--sds-c-button-neutral-color-background-active,var(--dxp-g-root-1,#e5e5e5));
|
border-color: var(--sds-c-button-neutral-color-border-active,var(--dxp-g-neutral-2,#aeaeae));
|
}
|
|
.slds-button--brand, .slds-button_brand {
|
background-color: var(--sds-c-button-brand-color-background,var(--dxp-s-button-color,var(--dxp-g-brand,#0176d3)));
|
border-color: var(--sds-c-button-brand-color-border,var(--dxp-s-button-color,var(--dxp-g-brand,#0176d3)));
|
color: var(--sds-c-button-brand-text-color,var(--dxp-s-button-color-contrast,var(--dxp-g-brand-contrast,#fff)));
|
transition: var(--dxp-c-button-brand-transition);
|
}
|
|
.slds-button--brand:focus, .slds-button--brand:hover, .slds-button_brand:focus, .slds-button_brand:hover {
|
background-color: var(--sds-c-button-brand-color-background-hover,var(--dxp-s-button-color-hover,var(--dxp-g-brand-1,#014486)));
|
border-color: var(--sds-c-button-brand-color-border-hover,var(--dxp-s-button-color-hover,var(--dxp-g-brand-1,#014486)));
|
color: var(--sds-c-button-brand-text-color-hover,var(--dxp-s-button-color-hover-contrast,var(--dxp-g-brand-contrast-1,#fff)));
|
}
|
|
.slds-button--brand:active, .slds-button_brand:active {
|
background-color: var(--sds-c-button-brand-color-background-active,var(--dxp-s-button-color-active,var(--dxp-g-brand-1,#014486)));
|
border-color: var(--sds-c-button-brand-color-border-active,var(--dxp-s-button-color-active,var(--dxp-g-brand-1,#014486)));
|
color: var(--sds-c-button-brand-text-color-active,var(--dxp-s-button-color-active-contrast,var(--dxp-g-brand-contrast-1,#fff)));
|
}
|
|
.slds-button_outline-brand {
|
background-color: var(--sds-c-button-outline-brand-color-background,var(--dxp-g-root,#fff));
|
border-color: var(--sds-c-button-outline-brand-color-border,var(--dxp-s-button-color,var(--dxp-g-brand,#0176d3)));
|
transition: var(--dxp-c-button-outline-brand-transition);
|
}
|
|
.slds-button_outline-brand:focus, .slds-button_outline-brand:hover {
|
background-color: var(--sds-c-button-outline-brand-color-background-hover,var(--dxp-g-root-1,#f3f3f3));
|
border-color: var(--sds-c-button-outline-brand-color-border-hover,var(--dxp-s-button-color-hover,var(--dxp-g-brand-1,#0176d3)));
|
}
|
|
.slds-button_outline-brand:active {
|
background-color: var(--sds-c-button-outline-brand-color-background-active,var(--dxp-g-root-1,#e5e5e5));
|
border-color: var(--sds-c-button-outline-brand-color-border-active,var(--dxp-s-button-color-active,var(--dxp-g-brand-1,#0176d3)));
|
}
|
|
.slds-button--inverse, .slds-button_inverse {
|
background-color: var(--sds-c-button-inverse-color-background,var(--dxp-g-root-contrast,rgba(0,0,0,0)));
|
border-color: var(--sds-c-button-inverse-color-border,var(--dxp-g-neutral-1,#aeaeae));
|
}
|
|
.slds-button--inverse:focus, .slds-button--inverse:hover, .slds-button_inverse:focus, .slds-button_inverse:hover {
|
background-color: var(--sds-c-button-inverse-color-background-hover,var(--dxp-g-root-contrast-1,#f3f3f3));
|
border-color: var(--sds-c-button-inverse-color-border-hover,var(--dxp-g-neutral-2,#aeaeae));
|
}
|
|
.slds-button--inverse:active, .slds-button_inverse:active {
|
background-color: var(--sds-c-button-inverse-color-background-active,var(--dxp-g-root-contrast-1,#f3f3f3));
|
border-color: var(--sds-c-button-inverse-color-border-active,var(--dxp-g-neutral-2,#aeaeae));
|
}
|
|
.slds-button--icon-border-inverse, .slds-button--icon-border-inverse:link, .slds-button--icon-border-inverse:visited, .slds-button--inverse, .slds-button--inverse:link, .slds-button--inverse:visited, .slds-button_icon-border-inverse, .slds-button_icon-border-inverse:link, .slds-button_icon-border-inverse:visited, .slds-button_inverse, .slds-button_inverse:link, .slds-button_inverse:visited {
|
color: var(--sds-c-button-inverse-text-color,var(--dxp-g-root,#c9c9c9));
|
}
|
|
.slds-button--icon-border-inverse:active, .slds-button--icon-border-inverse:focus, .slds-button--icon-border-inverse:hover, .slds-button--inverse:active, .slds-button--inverse:focus, .slds-button--inverse:hover, .slds-button_icon-border-inverse:active, .slds-button_icon-border-inverse:focus, .slds-button_icon-border-inverse:hover, .slds-button_inverse:active, .slds-button_inverse:focus, .slds-button_inverse:hover {
|
color: var(--sds-c-button-inverse-text-color-active,var(--dxp-g-root-1,#0176d3));
|
}
|
|
.slds-button--icon-border-inverse:focus, .slds-button--inverse:focus, .slds-button_icon-border-inverse:focus, .slds-button_inverse:focus {
|
box-shadow: var(--sds-c-button-inverse-shadow-focus,0 0 3px var(--dxp-s-button-color-focus,var(--dxp-g-brand-1,#c9c9c9)));
|
box-shadow: var(--sds-c-button-inverse-shadow-focus,0 0 3px var(--dxp-g-root-1,#c9c9c9));
|
}
|
|
.slds-button--destructive, .slds-button_destructive {
|
background-color: var(--sds-c-button-destructive-color-background,var(--dxp-g-destructive,#ba0517));
|
border-color: var(--sds-c-button-destructive-color-border,var(--dxp-g-destructive,#ba0517));
|
color: var(--sds-c-button-destructive-text-color,var(--dxp-g-destructive-contrast,#fff));
|
transition: var(--dxp-c-button-destructive-transition);
|
}
|
|
.slds-button--destructive:focus, .slds-button--destructive:hover, .slds-button_destructive:focus, .slds-button_destructive:hover {
|
background-color: var(--sds-c-button-destructive-color-background-hover,var(--dxp-g-destructive-1,#ba0517));
|
border-color: var(--sds-c-button-destructive-color-border-hover,var(--dxp-g-destructive-1,#ba0517));
|
color: var(--sds-c-button-destructive-text-color-hover,var(--dxp-g-destructive-contrast-1,#fff));
|
}
|
|
.slds-button--destructive:active, .slds-button_destructive:active {
|
background-color: var(--sds-c-button-destructive-color-background-active,var(--dxp-g-destructive-1,#8e030f));
|
border-color: var(--sds-c-button-destructive-color-border-active,var(--dxp-g-destructive-1,#8e030f));
|
color: var(--sds-c-button-destructive-text-color-active,var(--dxp-g-destructive-contrast-1,#fff));
|
}
|
|
.slds-button_text-destructive {
|
background-color: var(--sds-c-button-text-destructive-color-background,var(--dxp-g-root,#fff));
|
border-color: var(--sds-c-button-text-destructive-color-border,var(--dxp-g-neutral-1,#aeaeae));
|
color: var(--sds-c-button-text-destructive-text-color,var(--dxp-g-destructive,#ea001e));
|
transition: var(--dxp-c-button-text-destructive-transition);
|
}
|
|
.slds-button_text-destructive:focus, .slds-button_text-destructive:hover {
|
background-color: var(--sds-c-button-text-destructive-color-background-hover,var(--dxp-g-root-1,#f3f3f3));
|
border-color: var(--sds-c-button-text-destructive-color-border-hover,var(--dxp-g-neutral-2,#aeaeae));
|
color: var(--sds-c-button-text-destructive-text-color-hover,var(--dxp-g-destructive-1,#ba0517));
|
}
|
|
.slds-button_text-destructive:active {
|
background-color: var(--sds-c-button-text-destructive-color-background-active,var(--dxp-g-root-1,#e5e5e5));
|
border-color: var(--sds-c-button-text-destructive-color-border-active,var(--dxp-g-neutral-2,#aeaeae));
|
color: var(--sds-c-button-text-destructive-text-color-active,var(--dxp-g-destructive-1,#ba0517));
|
}
|
|
.slds-button--success, .slds-button_success {
|
background-color: var(--sds-c-button-success-color-background,var(--dxp-g-success,#45c65a));
|
border-color: var(--sds-c-button-success-color-border,var(--dxp-g-success,#91db8b));
|
color: var(--sds-c-button-success-text-color,var(--dxp-g-success-contrast,#181818));
|
transition: var(--dxp-c-button-success-transition);
|
}
|
|
.slds-button--success:focus, .slds-button--success:hover, .slds-button_success:focus, .slds-button_success:hover {
|
background-color: var(--sds-c-button-success-color-background-hover,var(--dxp-g-success-1,#2e844a));
|
border-color: var(--sds-c-button-success-color-border-hover,var(--dxp-g-success-1,#2e844a));
|
color: var(--sds-c-button-success-text-color-hover,var(--dxp-g-success-contrast-1,#fff));
|
}
|
|
.slds-button--success:active, .slds-button_success:active {
|
background-color: var(--sds-c-button-success-color-background-active,var(--dxp-g-success-1,#2e844a));
|
border-color: var(--sds-c-button-success-color-border-active,var(--dxp-g-success-1,#2e844a));
|
color: var(--sds-c-button-success-text-color-active,var(--dxp-g-success-contrast-1,#fff));
|
}
|
|
.slds-button--neutral.slds-is-selected:focus:not([disabled]), .slds-button--neutral.slds-is-selected:hover:not([disabled]), .slds-button_neutral.slds-is-selected:focus:not([disabled]), .slds-button_neutral.slds-is-selected:hover:not([disabled]) {
|
background-color: var(--sds-c-button-neutral-color-background,var(--dxp-g-root,#f3f3f3));
|
border-color: var(--sds-c-button-neutral-color-border-hover,var(--dxp-g-neutral-2,#aeaeae));
|
}
|
|
.slds-button--neutral.slds-is-selected:active:not([disabled]), .slds-button_neutral.slds-is-selected:active:not([disabled]) {
|
background-color: var(--sds-c-button-neutral-color-background-active,var(--dxp-g-root-1,#e5e5e5));
|
}
|
|
.slds-button_dual-stateful.slds-is-pressed {
|
background-color: var(--sds-c-button-brand-color-background,var(--dxp-s-button-color,var(--dxp-g-brand,#0176d3)));
|
border-color: var(--sds-c-button-brand-color-border,var(--dxp-s-button-color,var(--dxp-g-brand,#0176d3)));
|
color: var(--sds-c-button-brand-text-color,var(--dxp-s-button-color-contrast,var(--dxp-g-brand-contrast,#fff)));
|
}
|
|
.slds-button_dual-stateful.slds-is-pressed:focus, .slds-button_dual-stateful.slds-is-pressed:hover {
|
background-color: var(--sds-c-button-brand-color-background-hover,var(--dxp-s-button-color-hover,var(--dxp-g-brand-1,#014486)));
|
border-color: var(--sds-c-button-brand-color-border-hover,var(--dxp-s-button-color-hover,var(--dxp-g-brand-1,#014486)));
|
color: var(--sds-c-button-brand-text-color-hover,var(--dxp-s-button-color-hover-contrast,var(--dxp-g-brand-contrast-1,#fff)));
|
}
|
|
.slds-button:focus {
|
color: var(--sds-c-button-text-color-hover,var(--dxp-s-button-color-focus,var(--dxp-g-brand-1,#014486)));
|
}
|
|
.slds-button--brand:focus, .slds-button_brand:focus {
|
background-color: var(--sds-c-button-brand-color-background-hover,var(--dxp-s-button-color-focus,var(--dxp-g-brand-1,#014486)));
|
border-color: var(--sds-c-button-brand-color-border-hover,var(--dxp-s-button-color-focus,var(--dxp-g-brand-1,#014486)));
|
color: var(--sds-c-button-text-color-hover,var(--dxp-s-button-color-focus-contrast,var(--dxp-g-brand-contrast-1,#014486)));
|
}
|
|
.slds-button_outline-brand:focus {
|
border-color: var(--sds-c-button-outline-brand-color-border-hover,var(--dxp-s-button-color-focus,var(--dxp-g-brand-1,#0176d3)));
|
}
|
|
.slds-button--destructive:focus, .slds-button_destructive:focus {
|
color: var(--sds-c-button-destructive-text-color-hover,var(--dxp-g-destructive-contrast-1,#fff));
|
}
|
|
.slds-button_text-destructive:focus {
|
color: var(--sds-c-button-text-destructive-text-color-hover,var(--dxp-g-destructive-1,#ba0517));
|
}
|
|
.slds-button--success:focus, .slds-button_success:focus {
|
color: var(--sds-c-button-success-text-color-hover,var(--dxp-g-success-contrast-1,#fff));
|
}
|
|
.dxp-button-small > .slds-button, .slds-button.dxp-button-small {
|
--sds-c-button-neutral-spacing-inline-start: var(--dxp-s-button-small-padding, 1em);
|
--sds-c-button-neutral-spacing-inline-end: var(--dxp-s-button-small-padding,1em);
|
--sds-c-button-brand-spacing-inline-start: var(--dxp-s-button-small-padding, 1em);
|
--sds-c-button-brand-spacing-inline-end: var(--dxp-s-button-small-padding, 1em);
|
--sds-c-button-outline-brand-spacing-inline-start: var(--dxp-s-button-small-padding, 1em);
|
--sds-c-button-outline-brand-spacing-inline-end: var(--dxp-s-button-small-padding, 1em);
|
--sds-c-button-destructive-spacing-inline-start: var(--dxp-s-button-small-padding, 1em);
|
--sds-c-button-destructive-spacing-inline-end: var(--dxp-s-button-small-padding, 1em);
|
--sds-c-button-text-destructive-spacing-inline-start: var(--dxp-s-button-small-padding, 1em);
|
--sds-c-button-text-destructive-spacing-inline-end: var(--dxp-s-button-small-padding, 1em);
|
--sds-c-button-success-spacing-inline-start: var(--dxp-s-button-small-padding, 1em);
|
--sds-c-button-success-spacing-inline-end: var(--dxp-s-button-small-padding, 1em);
|
border-radius: var(--sds-c-button-radius-border,var(--dxp-s-button-small-radius-border,.25em));
|
font-size: var(--dxp-s-button-small-font-size);
|
}
|
|
.dxp-button-small .slds-button__icon {
|
width: calc(.875 * var(--dxp-s-button-small-font-size,var(--dxp-g-font-size-3)));
|
height: calc(.875 * var(--dxp-s-button-small-font-size,var(--dxp-g-font-size-3)));
|
}
|
|
.dxp-button-small .slds-button__icon--x-small, .dxp-button-small .slds-button__icon_x-small {
|
width: calc(.5 * var(--dxp-s-button-small-font-size,var(--dxp-g-font-size-3)));
|
height: calc(.5 * var(--dxp-s-button-small-font-size,var(--dxp-g-font-size-3)));
|
}
|
|
.dxp-button-small .slds-button__icon--small, .dxp-button-small .slds-button__icon_small {
|
width: calc(.75 * var(--dxp-s-button-small-font-size,var(--dxp-g-font-size-3)));
|
height: calc(.75 * var(--dxp-s-button-small-font-size,var(--dxp-g-font-size-3)));
|
}
|
|
.dxp-button-small .slds-button__icon--large, .dxp-button-small .slds-button__icon_large {
|
width: calc(1.5 * var(--dxp-s-button-small-font-size,var(--dxp-g-font-size-3)));
|
height: calc(1.5 * var(--dxp-s-button-small-font-size,var(--dxp-g-font-size-3)));
|
}
|
|
.dxp-button-large > .slds-button, .slds-button.dxp-button-large {
|
--sds-c-button-neutral-spacing-inline-start: var(--dxp-s-button-large-padding, 1em);
|
--sds-c-button-neutral-spacing-inline-end: var(--dxp-s-button-large-padding,1em);
|
--sds-c-button-brand-spacing-inline-start: var(--dxp-s-button-large-padding, 1em);
|
--sds-c-button-brand-spacing-inline-end: var(--dxp-s-button-large-padding, 1em);
|
--sds-c-button-outline-brand-spacing-inline-start: var(--dxp-s-button-large-padding, 1em);
|
--sds-c-button-outline-brand-spacing-inline-end: var(--dxp-s-button-large-padding, 1em);
|
--sds-c-button-destructive-spacing-inline-start: var(--dxp-s-button-large-padding, 1em);
|
--sds-c-button-destructive-spacing-inline-end: var(--dxp-s-button-large-padding, 1em);
|
--sds-c-button-text-destructive-spacing-inline-start: var(--dxp-s-button-large-padding, 1em);
|
--sds-c-button-text-destructive-spacing-inline-end: var(--dxp-s-button-large-padding, 1em);
|
--sds-c-button-success-spacing-inline-start: var(--dxp-s-button-large-padding, 1em);
|
--sds-c-button-success-spacing-inline-end: var(--dxp-s-button-large-padding, 1em);
|
border-radius: var(--sds-c-button-radius-border,var(--dxp-s-button-large-radius-border,.25em));
|
font-size: var(--dxp-s-button-large-font-size);
|
}
|
|
.dxp-button-large .slds-button__icon {
|
width: calc(.875 * var(--dxp-s-button-large-font-size,var(--dxp-g-font-size-3)));
|
height: calc(.875 * var(--dxp-s-button-large-font-size,var(--dxp-g-font-size-3)));
|
}
|
|
.dxp-button-large .slds-button__icon--x-small, .dxp-button-large .slds-button__icon_x-small {
|
width: calc(.5 * var(--dxp-s-button-large-font-size,var(--dxp-g-font-size-3)));
|
height: calc(.5 * var(--dxp-s-button-large-font-size,var(--dxp-g-font-size-3)));
|
}
|
|
.dxp-button-large .slds-button__icon--small, .dxp-button-large .slds-button__icon_small {
|
width: calc(.75 * var(--dxp-s-button-large-font-size,var(--dxp-g-font-size-3)));
|
height: calc(.75 * var(--dxp-s-button-large-font-size,var(--dxp-g-font-size-3)));
|
}
|
|
.dxp-button-large .slds-button__icon--large, .dxp-button-large .slds-button__icon_large {
|
width: calc(1.5 * var(--dxp-s-button-large-font-size,var(--dxp-g-font-size-3)));
|
height: calc(1.5 * var(--dxp-s-button-large-font-size,var(--dxp-g-font-size-3)));
|
}
|
|
.slds-button_inverse:active, .slds-button_inverse:focus, .slds-button_inverse:hover {
|
background-color: var(--dxp-g-root);
|
color: var(--dxp-s-button-color-hover,var(--dxp-g-brand-1));
|
}
|
|
.slds-button:hover {
|
text-decoration: var(--dxp-s-button-text-decoration-hover);
|
}
|
|
.slds-button--neutral, .slds-button_neutral {
|
transition: var(--dxp-c-button-neutral-transition);
|
}
|
|
.slds-button--brand, .slds-button_brand {
|
transition: var(--dxp-c-button-brand-transition);
|
}
|
|
.slds-button_outline-brand {
|
transition: var(--dxp-c-button-outline-brand-transition);
|
}
|
|
.slds-button--destructive, .slds-button_destructive {
|
transition: var(--dxp-c-button-destructive-transition);
|
}
|
|
.slds-button_text-destructive {
|
transition: var(--dxp-c-button-text-destructive-transition);
|
}
|
|
.slds-button--success, .slds-button_success {
|
transition: var(--dxp-c-button-success-transition);
|
}
|
|
.slds-button:disabled, .slds-button[disabled] {
|
background-color: transparent;
|
border-color: transparent;
|
color: var(--dxp-g-neutral-1);
|
cursor: default;
|
}
|
|
.slds-button--icon-border-filled:disabled, .slds-button--icon-border-filled[disabled], .slds-button--neutral:disabled, .slds-button--neutral[disabled], .slds-button_icon-border-filled:disabled, .slds-button_icon-border-filled[disabled], .slds-button_neutral:disabled, .slds-button_neutral[disabled], .slds-button_outline-brand:disabled, .slds-button_outline-brand[disabled] {
|
border-color: var(--dxp-g-neutral-1);
|
}
|
|
.slds-button--inverse:disabled, .slds-button--inverse[disabled], .slds-button_inverse:disabled, .slds-button_inverse[disabled] {
|
background-color: rgba(0,0,0,0);
|
border-color: rgba(255,255,255,.15);
|
}
|
|
.slds-button--icon-border-inverse:disabled, .slds-button--icon-border-inverse[disabled], .slds-button--inverse:disabled, .slds-button--inverse[disabled], .slds-button_icon-border-inverse:disabled, .slds-button_icon-border-inverse[disabled], .slds-button_inverse:disabled, .slds-button_inverse[disabled] {
|
color: rgba(255,255,255,.5);
|
}
|
|
.slds-button_text-destructive:disabled, .slds-button_text-destructive[disabled] {
|
border-color: var(--dxp-g-neutral-1);
|
}
|
|
.slds-button--brand:disabled, .slds-button--brand[disabled], .slds-button--destructive:disabled, .slds-button--destructive[disabled], .slds-button--success:disabled, .slds-button--success[disabled], .slds-button_brand:disabled, .slds-button_brand[disabled], .slds-button_destructive:disabled, .slds-button_destructive[disabled], .slds-button_success:disabled, .slds-button_success[disabled] {
|
background-color: var(--dxp-g-neutral-1);
|
border-color: var(--dxp-g-neutral-1);
|
color: #fff;
|
}
|
|
.slds-button_icon-border-inverse {
|
background-color: transparent;
|
}
|
|
.slds-button--icon-border-inverse, .slds-button--icon-inverse, .slds-button_icon-border-inverse, .slds-button_icon-inverse {
|
color: var(--dxp-g-root);
|
fill: var(--dxp-g-root);
|
}
|
|
.slds-button__icon {
|
width: calc(.875 * var(--dxp-s-button-font-size,var(--dxp-g-font-size-3)));
|
height: calc(.875 * var(--dxp-s-button-font-size,var(--dxp-g-font-size-3)));
|
fill: var(--slds-c-icon-color-foreground,currentColor);
|
width: calc(.875 * var(--dxp-s-button-font-size,var(--dxp-g-font-size-3)));
|
height: calc(.875 * var(--dxp-s-button-font-size,var(--dxp-g-font-size-3)));
|
}
|
|
.slds-button__icon--x-small, .slds-button__icon_x-small {
|
width: calc(.5 * var(--dxp-s-button-font-size,var(--dxp-g-font-size-3)));
|
height: calc(.5 * var(--dxp-s-button-font-size,var(--dxp-g-font-size-3)));
|
}
|
|
.slds-button__icon--small, .slds-button__icon_small {
|
width: calc(.75 * var(--dxp-s-button-font-size,var(--dxp-g-font-size-3)));
|
height: calc(.75 * var(--dxp-s-button-font-size,var(--dxp-g-font-size-3)));
|
}
|
|
.slds-button__icon--large, .slds-button__icon_large {
|
width: calc(1.5 * var(--dxp-s-button-font-size,var(--dxp-g-font-size-3)));
|
height: calc(1.5 * var(--dxp-s-button-font-size,var(--dxp-g-font-size-3)));
|
}
|
|
.slds-button_icon {
|
font-size: initial;
|
line-height: initial;
|
}
|
|
.slds-button_icon-inverse.slds-button {
|
background-color: transparent;
|
border-color: transparent;
|
}
|
|
.slds-button-group .slds-button, .slds-button-group-list .slds-button {
|
height: 100%;
|
}
|
|
.slds-button--icon-border, .slds-button--icon-border-filled, .slds-button_icon-border, .slds-button_icon-border-filled {
|
color: var(--dxp-g-neutral-3);
|
border-color: var(--dxp-g-neutral-1);
|
background-color: transparent;
|
}
|
|
.slds-button--icon-border-inverse, .slds-button_icon-border-inverse {
|
border-color: var(--dxp-g-neutral-1);
|
}
|
|
.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 {
|
color: var(--dxp-g-root-contrast);
|
}
|
|
.slds-checkbox--toggle [type=checkbox][disabled] + .slds-checkbox--faux, .slds-checkbox--toggle [type=checkbox][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux, .slds-checkbox--toggle [type=checkbox][disabled] + .slds-checkbox_faux, .slds-checkbox--toggle [type=checkbox][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox--toggle [type=checkbox][disabled] ~ .slds-checkbox--faux, .slds-checkbox--toggle [type=checkbox][disabled] ~ .slds-checkbox_faux, .slds-checkbox_toggle [type=checkbox][disabled] + .slds-checkbox--faux, .slds-checkbox_toggle [type=checkbox][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux, .slds-checkbox_toggle [type=checkbox][disabled] + .slds-checkbox_faux, .slds-checkbox_toggle [type=checkbox][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux, .slds-checkbox_toggle [type=checkbox][disabled] ~ .slds-checkbox--faux, .slds-checkbox_toggle [type=checkbox][disabled] ~ .slds-checkbox_faux {
|
background-color: var(--dxp-g-neutral-3);
|
border-color: var(--dxp-g-neutral-3);
|
}
|
|
.slds-checkbox--toggle [type=checkbox][disabled] + .slds-checkbox--faux:after, .slds-checkbox--toggle [type=checkbox][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:after, .slds-checkbox--toggle [type=checkbox][disabled] + .slds-checkbox_faux:after, .slds-checkbox--toggle [type=checkbox][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:after, .slds-checkbox--toggle [type=checkbox][disabled] ~ .slds-checkbox--faux:after, .slds-checkbox--toggle [type=checkbox][disabled] ~ .slds-checkbox_faux:after, .slds-checkbox_toggle [type=checkbox][disabled] + .slds-checkbox--faux:after, .slds-checkbox_toggle [type=checkbox][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:after, .slds-checkbox_toggle [type=checkbox][disabled] + .slds-checkbox_faux:after, .slds-checkbox_toggle [type=checkbox][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:after, .slds-checkbox_toggle [type=checkbox][disabled] ~ .slds-checkbox--faux:after, .slds-checkbox_toggle [type=checkbox][disabled] ~ .slds-checkbox_faux:after {
|
background-color: var(--dxp-g-neutral-2);
|
}
|
|
.slds-checkbox {
|
--checkbox-color-background: var(--sds-c-checkbox-color-background, var(--dxp-s-form-element-color-background, var(--dxp-g-root)));
|
--checkbox-color-background-checked: var(--sds-c-checkbox-color-background-checked, var(--dxp-s-form-element-color-background-active, var(--dxp-s-form-element-color-background, var(--dxp-g-root))));
|
}
|
|
.slds-checkbox .slds-checkbox__label .slds-form-element__label {
|
font-size: var(--dxp-s-form-element-label-font-size,var(--dxp-s-body-font-size));
|
}
|
|
.slds-checkbox [type=checkbox] + .slds-checkbox--faux, .slds-checkbox [type=checkbox] + .slds-checkbox__label .slds-checkbox--faux, .slds-checkbox [type=checkbox] + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type=checkbox] + .slds-checkbox_faux, .slds-checkbox [type=checkbox] ~ .slds-checkbox--faux, .slds-checkbox [type=checkbox] ~ .slds-checkbox_faux {
|
background-color: var(--checkbox-color-background);
|
border-color: var(--sds-c-checkbox-color-border,var(--dxp-s-form-element-color-border,var(--dxp-g-neutral-3)));
|
border-radius: var(--sds-c-checkbox-radius-border,var(--dxp-s-form-element-radius-border,4px));
|
border-width: var(--dxp-c-checkbox-width-border,var(--dxp-s-form-element-width-border,1px));
|
border-style: solid;
|
}
|
|
.slds-checkbox [type=checkbox]:focus + .slds-checkbox--faux, .slds-checkbox [type=checkbox]:focus + .slds-checkbox__label .slds-checkbox--faux, .slds-checkbox [type=checkbox]:focus + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type=checkbox]:focus + .slds-checkbox_faux, .slds-checkbox [type=checkbox]:focus:checked + .slds-checkbox--faux, .slds-checkbox [type=checkbox]:focus:checked + .slds-checkbox__label .slds-checkbox--faux, .slds-checkbox [type=checkbox]:focus:checked + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type=checkbox]:focus:checked + .slds-checkbox_faux, .slds-checkbox [type=checkbox]:focus:checked ~ .slds-checkbox--faux, .slds-checkbox [type=checkbox]:focus:checked ~ .slds-checkbox_faux, .slds-checkbox [type=checkbox]:focus ~ .slds-checkbox--faux, .slds-checkbox [type=checkbox]:focus ~ .slds-checkbox_faux {
|
border-color: var(--sds-c-checkbox-color-border-focus,var(--dxp-s-form-element-color-border-focus,var(--dxp-g-brand)));
|
}
|
|
.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, .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 {
|
border-color: var(--sds-c-checkbox-mark-color-foreground,var(--dxp-s-form-element-color-foreground,var(--dxp-g-brand-1)));
|
}
|
|
.slds-checkbox [type=checkbox]:checked + .slds-checkbox--faux, .slds-checkbox [type=checkbox]:checked + .slds-checkbox__label .slds-checkbox--faux, .slds-checkbox [type=checkbox]:checked + .slds-checkbox__label .slds-checkbox_faux, .slds-checkbox [type=checkbox]:checked + .slds-checkbox_faux, .slds-checkbox [type=checkbox]:checked ~ .slds-checkbox--faux, .slds-checkbox [type=checkbox]:checked ~ .slds-checkbox_faux {
|
background-color: var(--checkbox-color-background-checked);
|
border-color: var(--sds-c-checkbox-color-border-checked,var(--dxp-s-form-element-color-border-checked,var(--dxp-s-form-element-color-border,var(--dxp-g-neutral-3))));
|
}
|
|
.slds-has-error .slds-checkbox [type=checkbox] + .slds-checkbox--faux, .slds-has-error .slds-checkbox [type=checkbox] + .slds-checkbox__label .slds-checkbox--faux, .slds-has-error .slds-checkbox [type=checkbox] + .slds-checkbox__label .slds-checkbox_faux, .slds-has-error .slds-checkbox [type=checkbox] + .slds-checkbox_faux, .slds-has-error .slds-checkbox [type=checkbox] ~ .slds-checkbox--faux, .slds-has-error .slds-checkbox [type=checkbox] ~ .slds-checkbox_faux {
|
background-color: var(--checkbox-color-background);
|
border-color: var(--dxp-g-destructive);
|
}
|
|
.slds-has-error .slds-checkbox [type=checkbox]:checked + .slds-checkbox--faux, .slds-has-error .slds-checkbox [type=checkbox]:checked + .slds-checkbox__label .slds-checkbox--faux, .slds-has-error .slds-checkbox [type=checkbox]:checked + .slds-checkbox__label .slds-checkbox_faux, .slds-has-error .slds-checkbox [type=checkbox]:checked + .slds-checkbox_faux, .slds-has-error .slds-checkbox [type=checkbox]:checked ~ .slds-checkbox--faux, .slds-has-error .slds-checkbox [type=checkbox]:checked ~ .slds-checkbox_faux {
|
background-color: var(--checkbox-color-background-checked);
|
border-color: var(--dxp-g-destructive);
|
}
|
|
.slds-has-error .slds-checkbox [type=checkbox]:checked + .slds-checkbox--faux:after, .slds-has-error .slds-checkbox [type=checkbox]:checked + .slds-checkbox__label .slds-checkbox--faux:after, .slds-has-error .slds-checkbox [type=checkbox]:checked + .slds-checkbox__label .slds-checkbox_faux:after, .slds-has-error .slds-checkbox [type=checkbox]:checked + .slds-checkbox_faux:after, .slds-has-error .slds-checkbox [type=checkbox]:checked ~ .slds-checkbox--faux:after, .slds-has-error .slds-checkbox [type=checkbox]:checked ~ .slds-checkbox_faux:after {
|
border-color: var(--dxp-g-destructive);
|
}
|
|
.slds-dropdown {
|
background-color: var(--dxp-g-root);
|
color: var(--dxp-g-root-contrast);
|
border-color: var(--dxp-g-neutral);
|
}
|
|
.slds-dropdown__item > a:focus, .slds-dropdown__item > a:hover {
|
background-color: var(--dxp-g-neutral);
|
color: var(--dxp-s-dropdown-text-color-hover,var(--dxp-g-neutral-contrast));
|
background-color: var(--dxp-s-dropdown-color-background-hover,var(--dxp-g-neutral));
|
}
|
|
@font-face {
|
font-family: "Salesforce Sans";
|
src: url(../fonts/webfonts/SalesforceSans-Light.woff2?orgId=00D10000000KEF8) format("woff2"), url(../fonts/webfonts/SalesforceSans-Light.woff?orgId=00D10000000KEF8) format("woff");
|
font-weight: 300;
|
font-display: swap;
|
}
|
|
@font-face {
|
font-family: "Salesforce Sans";
|
src: url(../fonts/webfonts/SalesforceSans-LightItalic.woff2?orgId=00D10000000KEF8) format("woff2"), url(../fonts/webfonts/SalesforceSans-LightItalic.woff?orgId=00D10000000KEF8) format("woff");
|
font-style: italic;
|
font-weight: 300;
|
font-display: swap;
|
}
|
|
@font-face {
|
font-family: "Salesforce Sans";
|
src: url(../fonts/webfonts/SalesforceSans-Regular.woff2?orgId=00D10000000KEF8) format("woff2"), url(../fonts/webfonts/SalesforceSans-Regular.woff?orgId=00D10000000KEF8) format("woff");
|
font-weight: 400;
|
font-display: swap;
|
}
|
|
@font-face {
|
font-family: "Salesforce Sans";
|
src: url(../fonts/webfonts/SalesforceSans-Italic.woff2?orgId=00D10000000KEF8) format("woff2"), url(../fonts/webfonts/SalesforceSans-Italic.woff?orgId=00D10000000KEF8) format("woff");
|
font-style: italic;
|
font-weight: 400;
|
font-display: swap;
|
}
|
|
@font-face {
|
font-family: "Salesforce Sans";
|
src: url(../fonts/webfonts/SalesforceSans-Bold.woff2?orgId=00D10000000KEF8) format("woff2"), url(../fonts/webfonts/SalesforceSans-Bold.woff?orgId=00D10000000KEF8) format("woff");
|
font-weight: 700;
|
font-display: swap;
|
}
|
|
@font-face {
|
font-family: "Salesforce Sans";
|
src: url(../fonts/webfonts/SalesforceSans-BoldItalic.woff2?orgId=00D10000000KEF8) format("woff2"), url(../fonts/webfonts/SalesforceSans-BoldItalic.woff?orgId=00D10000000KEF8) format("woff");
|
font-style: italic;
|
font-weight: 700;
|
font-display: swap;
|
}
|
|
.slds-has-error .slds-form-element__help, .slds-required {
|
color: var(--dxp-g-destructive);
|
}
|
|
.slds-form-element {
|
margin-bottom: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-form-element__label {
|
color: var(--dxp-s-form-element-label-color,var(--dxp-g-root-contrast));
|
font-size: var(--dxp-s-form-element-label-font-size,var(--dxp-s-body-font-size));
|
padding-top: 0;
|
}
|
|
.slds-form-element__legend {
|
margin-bottom: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-form-element__help, .slds-form-element__helper {
|
font-size: var(--dxp-s-body-small-font-size);
|
}
|
|
::-webkit-input-placeholder {
|
color: var(--dxp-c-placeholder-text-color,var(--dxp-g-neutral-3));
|
font-weight: var(--dxp-c-placeholder-font-weight);
|
opacity: var(--dxp-c-placeholder-opacity);
|
}
|
|
::-moz-placeholder {
|
color: var(--dxp-c-placeholder-text-color,var(--dxp-g-neutral-3));
|
font-weight: var(--dxp-c-placeholder-font-weight);
|
opacity: var(--dxp-c-placeholder-opacity);
|
}
|
|
::placeholder {
|
color: var(--dxp-c-placeholder-text-color,var(--dxp-g-neutral-3));
|
font-weight: var(--dxp-c-placeholder-font-weight);
|
opacity: var(--dxp-c-placeholder-opacity);
|
}
|
|
[class*=slds-icon-action-] .slds-icon, [class*=slds-icon-action-].slds-icon, [class*=slds-icon-custom-] .slds-icon, [class*=slds-icon-custom-].slds-icon, [class*=slds-icon-standard-] .slds-icon, [class*=slds-icon-standard-].slds-icon {
|
fill: #fff;
|
}
|
|
.slds-input {
|
--input-color-background: var(--sds-c-input-color-background, var(--dxp-s-form-element-color-background, var(--dxp-g-root)));
|
--input-color-background-focus: var(--sds-c-input-color-background-focus, var(--dxp-s-form-element-color-background-active, var(--dxp-s-form-element-color-background, var(--dxp-g-root))));
|
background-color: var(--input-color-background);
|
font-size: var(--dxp-c-input-text-font-size,var(--dxp-s-form-element-text-font-size,var(--dxp-s-body-font-size)));
|
color: var(--sds-c-input-text-color,var(--dxp-s-form-element-text-color,var(--dxp-g-root-contrast)));
|
--border-color: var(--sds-c-input-color-border, var(--dxp-s-form-element-color-border, var(--dxp-g-neutral-3)));
|
--border-width: var(--dxp-c-input-width-border, var(--dxp-s-form-element-width-border, 1px));
|
border-color: var(--border-color);
|
border-width: var(--border-width);
|
border-style: solid;
|
border-inline-start: var(--dxp-c-input-border-inline-start,var(--dxp-s-form-element-border-inline-start,var(--border-width) solid var(--border-color)));
|
border-inline-end: var(--dxp-c-input-border-inline-end,var(--dxp-s-form-element-border-inline-end,var(--border-width) solid var(--border-color)));
|
border-block-start: var(--dxp-c-input-border-block-start,var(--dxp-s-form-element-border-block-start,var(--border-width) solid var(--border-color)));
|
border-block-end: var(--dxp-c-input-border-block-end,var(--dxp-s-form-element-border-block-end,var(--border-width) solid var(--border-color)));
|
border-radius: var(--sds-c-input-radius-border,var(--dxp-s-form-element-radius-border,4px));
|
}
|
|
.slds-input:focus {
|
background-color: var(--input-color-background-focus);
|
color: var(--sds-c-input-text-color-focus,var(--dxp-s-form-element-text-color-focus,var(--dxp-s-form-element-text-color,var(--dxp-g-root-contrast))));
|
border-color: var(--sds-c-input-color-border-focus,var(--dxp-s-form-element-color-border-focus,var(--dxp-g-brand)));
|
}
|
|
.slds-input.slds-is-disabled, .slds-input[disabled] {
|
background-color: var(--dxp-c-input-color-background-disabled,var(--dxp-g-neutral));
|
border-color: var(--dxp-c-input-color-border-disabled,var(--dxp-g-neutral-1));
|
}
|
|
.slds-input.slds-is-disabled::placeholder, .slds-input[disabled]::placeholder {
|
color: var(--dxp-c-input-text-color-disabled,var(--dxp-g-neutral-contrast));
|
}
|
|
.slds-input.slds-is-disabled::-webkit-input-placeholder, .slds-input[disabled]::-webkit-input-placeholder {
|
color: var(--dxp-c-input-text-color-disabled,var(--dxp-g-neutral-contrast));
|
}
|
|
.slds-input.slds-is-disabled::-moz-placeholder, .slds-input[disabled]::-moz-placeholder {
|
color: var(--dxp-c-input-text-color-disabled,var(--dxp-g-neutral-contrast));
|
}
|
|
.slds-has-error .slds-input {
|
background-color: var(--input-color-background);
|
border-color: var(--dxp-g-destructive);
|
box-shadow: var(--dxp-g-destructive) 0 0 0 1px inset;
|
}
|
|
.slds-has-error .slds-input:active, .slds-has-error .slds-input:focus {
|
background-color: var(--input-color-background-focus);
|
border-color: var(--dxp-g-destructive);
|
box-shadow: var(--dxp-g-destructive) 0 0 0 1px inset, 0 0 3px var(--dxp-g-brand);
|
}
|
|
.slds-input[readonly] {
|
border: 1px solid var(--slds-c-input-color-border,var(--sds-c-input-color-border,var(--dxp-g-root)));
|
background-color: var(--slds-c-input-color-background,var(--sds-c-input-color-background,var(--dxp-g-root)));
|
}
|
|
.slds-dropdown {
|
border-color: var(--dxp-s-dropdown-color-border,var(--dxp-g-neutral));
|
color: var(--dxp-s-dropdown-text-color,var(--dxp-g-root-contrast));
|
background-color: var(--dxp-s-dropdown-color-background,var(--dxp-g-root));
|
}
|
|
.slds-dropdown__item > a {
|
color: var(--dxp-s-dropdown-text-color,var(--dxp-g-root-contrast));
|
}
|
|
.slds-has-divider--top-space, .slds-has-divider_top-space {
|
border-color: var(--dxp-s-dropdown-color-border,var(--dxp-g-neutral));
|
}
|
|
.slds-dropdown__item > a .slds-icon-text-default {
|
fill: var(--slds-c-icon-color-foreground-default,var(--sds-c-icon-color-foreground-default,var(--dxp-s-dropdown-text-color,var(--dxp-g-root-contrast))));
|
}
|
|
.slds-dropdown__item > a:focus .slds-icon-text-default, .slds-dropdown__item > a:hover .slds-icon-text-default {
|
fill: var(--slds-c-icon-color-foreground-default,var(--sds-c-icon-color-foreground-default,var(--dxp-s-dropdown-text-color-hover,var(--dxp-g-neutral-contrast))));
|
}
|
|
.slds-dropdown__item > a.slds-has-success {
|
background-color: var(--dxp-g-success);
|
color: var(--dxp-g-success-contrast);
|
}
|
|
.slds-dropdown__item > a.slds-has-success .slds-icon {
|
fill: var(--dxp-g-success-contrast);
|
}
|
|
.slds-dropdown__item > a.slds-has-warning {
|
background-color: var(--dxp-g-warning);
|
color: var(--dxp-g-warning-contrast);
|
}
|
|
.slds-dropdown__item > a.slds-has-warning .slds-icon {
|
fill: var(--dxp-g-warning-contrast);
|
}
|
|
.slds-dropdown__item > a.slds-has-error {
|
background-color: var(--dxp-g-destructive);
|
color: var(--dxp-g-destructive-contrast);
|
}
|
|
.slds-dropdown__item > a.slds-has-error .slds-icon {
|
fill: var(--dxp-g-destructive-contrast);
|
}
|
|
.slds-modal .slds-modal__close.slds-button {
|
color: #fff;
|
}
|
|
.slds-pill .slds-button {
|
background: 0 0;
|
border-color: transparent;
|
color: var(--dxp-g-neutral-3);
|
}
|
|
.slds-pill .slds-button:hover {
|
color: var(--sds-c-button-text-color-hover,var(--dxp-g-brand-1,#005fb2));
|
}
|
|
.slds-pill.slds-has-error .slds-icon__container, .slds-pill.slds-has-error .slds-icon_container {
|
background-color: transparent;
|
}
|
|
.slds-pill.slds-has-error .slds-icon-text-error {
|
fill: var(--dxp-g-destructive);
|
}
|
|
.slds-pill.slds-has-error a {
|
text-decoration-color: var(--dxp-g-destructive);
|
}
|
|
.slds-progress-bar__value {
|
background: var(--dxp-c-progress-bar-color-background,var(--dxp-g-brand));
|
}
|
|
.slds-progress__marker {
|
background-color: var(--dxp-g-neutral-1);
|
border-color: var(--dxp-g-root);
|
}
|
|
.slds-progress__item.slds-is-completed .slds-progress__marker--icon, .slds-progress__item.slds-is-completed .slds-progress__marker_icon {
|
color: var(--dxp-c-progress-icon-color,var(--dxp-g-brand));
|
border-color: var(--dxp-g-root);
|
background-color: var(--dxp-g-root);
|
}
|
|
.slds-progress__item.slds-has-error .slds-progress__marker, .slds-progress__item.slds-has-error .slds-progress__marker:focus, .slds-progress__item.slds-has-error .slds-progress__marker:hover {
|
color: var(--dxp-g-destructive);
|
border-color: var(--dxp-g-root);
|
background-color: var(--dxp-g-root);
|
}
|
|
.slds-progress-ring__path {
|
fill: var(--dxp-c-progress-ring-color-fill,var(--dxp-g-success));
|
}
|
|
.slds-progress-ring .slds-icon_container {
|
background-color: transparent;
|
}
|
|
.slds-progress-ring svg {
|
vertical-align: unset;
|
}
|
|
.slds-progress-ring_expired .slds-icon, .slds-progress-ring_expired .slds-progress-ring__path {
|
fill: var(--dxp-g-destructive);
|
}
|
|
.slds-progress-ring_warning .slds-icon, .slds-progress-ring_warning .slds-progress-ring__path {
|
fill: var(--dxp-g-warning);
|
}
|
|
.slds-progress-bar, .slds-progress-ring {
|
background-color: var(--dxp-g-neutral-1);
|
}
|
|
.slds-progress-ring__content {
|
background-color: var(--dxp-g-root);
|
}
|
|
.slds-progress-ring_complete .slds-progress-ring__content {
|
background: var(--dxp-g-success,#2e844a);
|
}
|
|
.slds-progress-ring_complete .slds-progress-ring__path {
|
fill: var(--dxp-g-success,#2e844a);
|
}
|
|
.slds-radio {
|
--radio-color-background: var(--sds-c-radio-color-background, var(--dxp-s-form-element-color-background, var(--dxp-g-root)));
|
--radio-color-background-checked: var(--sds-c-radio-color-background-checked, var(--sds-c-radio-color-background, var(--dxp-s-form-element-color-background-active, var(--dxp-s-form-element-color-background, var(--dxp-g-root)))));
|
}
|
|
.slds-radio .slds-form-element__label {
|
font-size: var(--dxp-s-form-element-label-font-size,var(--dxp-s-body-font-size));
|
}
|
|
.slds-radio [type=radio] + .slds-radio--faux, .slds-radio [type=radio] + .slds-radio__label .slds-radio--faux, .slds-radio [type=radio] + .slds-radio__label .slds-radio_faux, .slds-radio [type=radio] + .slds-radio_faux, .slds-radio [type=radio] ~ .slds-radio--faux, .slds-radio [type=radio] ~ .slds-radio_faux {
|
background-color: var(--radio-color-background);
|
border-color: var(--sds-c-radio-color-border,var(--dxp-s-form-element-color-border,var(--dxp-g-neutral-3)));
|
border-width: var(--dxp-c-radio-width-border,var(--dxp-s-form-element-width-border,1px));
|
}
|
|
.slds-radio [type=radio]:focus + .slds-radio--faux, .slds-radio [type=radio]:focus + .slds-radio__label .slds-radio--faux, .slds-radio [type=radio]:focus + .slds-radio__label .slds-radio_faux, .slds-radio [type=radio]:focus + .slds-radio_faux, .slds-radio [type=radio]:focus:checked + .slds-radio--faux, .slds-radio [type=radio]:focus:checked + .slds-radio__label .slds-radio--faux, .slds-radio [type=radio]:focus:checked + .slds-radio__label .slds-radio_faux, .slds-radio [type=radio]:focus:checked + .slds-radio_faux, .slds-radio [type=radio]:focus:checked ~ .slds-radio--faux, .slds-radio [type=radio]:focus:checked ~ .slds-radio_faux, .slds-radio [type=radio]:focus ~ .slds-radio--faux, .slds-radio [type=radio]:focus ~ .slds-radio_faux {
|
border-color: var(--sds-c-radio-color-border-focus,var(--dxp-s-form-element-color-border-focus,var(--dxp-g-brand)));
|
}
|
|
.slds-radio [type=radio]:checked + .slds-radio--faux:after, .slds-radio [type=radio]:checked + .slds-radio__label .slds-radio--faux:after, .slds-radio [type=radio]:checked + .slds-radio__label .slds-radio_faux:after, .slds-radio [type=radio]:checked + .slds-radio_faux:after, .slds-radio [type=radio]:checked ~ .slds-radio--faux:after, .slds-radio [type=radio]:checked ~ .slds-radio_faux:after {
|
background-color: var(--sds-c-radio-mark-color-foreground,var(--dxp-s-form-element-color-foreground,var(--dxp-g-brand-1)));
|
}
|
|
.slds-radio [type=radio]:checked + .slds-radio--faux, .slds-radio [type=radio]:checked + .slds-radio__label .slds-radio--faux, .slds-radio [type=radio]:checked + .slds-radio__label .slds-radio_faux, .slds-radio [type=radio]:checked + .slds-radio_faux, .slds-radio [type=radio]:checked ~ .slds-radio--faux, .slds-radio [type=radio]:checked ~ .slds-radio_faux {
|
background-color: var(--radio-color-background-checked);
|
border-color: var(--sds-c-radio-color-border-checked,var(--dxp-s-form-element-color-border-checked,var(--dxp-s-form-element-color-border,var(--dxp-g-neutral-3))));
|
}
|
|
.slds-has-error .slds-radio [type=radio] + .slds-radio--faux, .slds-has-error .slds-radio [type=radio] + .slds-radio__label .slds-radio--faux, .slds-has-error .slds-radio [type=radio] + .slds-radio__label .slds-radio_faux, .slds-has-error .slds-radio [type=radio] + .slds-radio_faux, .slds-has-error .slds-radio [type=radio] ~ .slds-radio--faux, .slds-has-error .slds-radio [type=radio] ~ .slds-radio_faux {
|
border-color: var(--dxp-g-destructive);
|
}
|
|
.slds-has-error .slds-radio [type=radio]:checked + .slds-radio--faux, .slds-has-error .slds-radio [type=radio]:checked + .slds-radio__label .slds-radio--faux, .slds-has-error .slds-radio [type=radio]:checked + .slds-radio__label .slds-radio_faux, .slds-has-error .slds-radio [type=radio]:checked + .slds-radio_faux, .slds-has-error .slds-radio [type=radio]:checked ~ .slds-radio--faux, .slds-has-error .slds-radio [type=radio]:checked ~ .slds-radio_faux {
|
background-color: var(--radio-color-background-checked);
|
}
|
|
.slds-has-error .slds-radio [type=radio]:checked + .slds-radio--faux:after, .slds-has-error .slds-radio [type=radio]:checked + .slds-radio__label .slds-radio--faux:after, .slds-has-error .slds-radio [type=radio]:checked + .slds-radio__label .slds-radio_faux:after, .slds-has-error .slds-radio [type=radio]:checked + .slds-radio_faux:after, .slds-has-error .slds-radio [type=radio]:checked ~ .slds-radio--faux:after, .slds-has-error .slds-radio [type=radio]:checked ~ .slds-radio_faux:after {
|
background: var(--dxp-g-destructive);
|
}
|
|
.slds-select {
|
--select-text-font-size: var(--sds-c-select-color-background, var(--dxp-s-form-element-color-background, var(--dxp-g-root)));
|
--select-color-background-focus: var(--sds-c-select-color-background-focus, var(--dxp-s-form-element-color-background-active, var(--dxp-s-form-element-color-background, var(--dxp-g-root))));
|
background-color: var(--select-text-font-size);
|
font-size: var(--dxp-c-select-text-font-size,var(--dxp-s-form-element-text-font-size,var(--dxp-s-body-font-size)));
|
color: var(--sds-c-select-text-color,var(--dxp-s-form-element-text-color,var(--dxp-g-root-contrast)));
|
border-color: var(--sds-c-select-color-border,var(--dxp-s-form-element-color-border,var(--dxp-g-neutral-3)));
|
border-radius: var(--sds-c-select-radius-border,var(--dxp-s-form-element-radius-border,4px));
|
border-width: var(--dxp-c-select-width-border,var(--dxp-s-form-element-width-border,1px));
|
}
|
|
.slds-select:focus {
|
background-color: var(--select-color-background-focus);
|
color: var(--sds-c-select-text-color-focus,var(--dxp-s-form-element-text-color-focus,var(--dxp-s-form-element-text-color,var(--dxp-g-root-contrast))));
|
border-color: var(--sds-c-select-color-border-focus,var(--dxp-s-form-element-color-border-focus,var(--dxp-g-brand)));
|
}
|
|
.slds-has-error .slds-select {
|
background-color: var(--select-text-font-size);
|
border-color: var(--dxp-g-destructive);
|
box-shadow: var(--dxp-g-destructive) 0 0 0 1px inset;
|
}
|
|
.slds-has-error .slds-select:active, .slds-has-error .slds-select:focus {
|
background-color: var(--select-color-background-focus);
|
box-shadow: var(--dxp-g-destructive) 0 0 0 1px inset, 0 0 3px var(--dxp-g-brand);
|
}
|
|
.slds-select.slds-is-disabled, .slds-select[disabled] {
|
background-color: var(--dxp-g-neutral);
|
color: var(--dxp-g-neutral-contrast);
|
}
|
|
.slds-m-top--none, .slds-m-top_none {
|
margin-top: var(--dxp-g-spacing-none);
|
}
|
|
.slds-m-top--xxx-small, .slds-m-top_xxx-small {
|
margin-top: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-m-top--xx-small, .slds-m-top_xx-small {
|
margin-top: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-m-top--x-small, .slds-m-top_x-small {
|
margin-top: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-m-top--small, .slds-m-top_small {
|
margin-top: var(--dxp-g-spacing-small);
|
}
|
|
.slds-m-top--medium, .slds-m-top_medium {
|
margin-top: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-m-top--large, .slds-m-top_large {
|
margin-top: var(--dxp-g-spacing-large);
|
}
|
|
.slds-m-top--x-large, .slds-m-top_x-large {
|
margin-top: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-m-top--xx-large, .slds-m-top_xx-large {
|
margin-top: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-m-left--none, .slds-m-left_none {
|
margin-left: var(--dxp-g-spacing-none);
|
}
|
|
.slds-m-left--xxx-small, .slds-m-left_xxx-small {
|
margin-left: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-m-left--xx-small, .slds-m-left_xx-small {
|
margin-left: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-m-left--x-small, .slds-m-left_x-small {
|
margin-left: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-m-left--small, .slds-m-left_small {
|
margin-left: var(--dxp-g-spacing-small);
|
}
|
|
.slds-m-left--medium, .slds-m-left_medium {
|
margin-left: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-m-left--large, .slds-m-left_large {
|
margin-left: var(--dxp-g-spacing-large);
|
}
|
|
.slds-m-left--x-large, .slds-m-left_x-large {
|
margin-left: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-m-left--xx-large, .slds-m-left_xx-large {
|
margin-left: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-m-bottom--none, .slds-m-bottom_none {
|
margin-bottom: var(--dxp-g-spacing-none);
|
}
|
|
.slds-m-bottom--xxx-small, .slds-m-bottom_xxx-small {
|
margin-bottom: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-m-bottom--xx-small, .slds-m-bottom_xx-small {
|
margin-bottom: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-m-bottom--x-small, .slds-m-bottom_x-small {
|
margin-bottom: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-m-bottom--small, .slds-m-bottom_small {
|
margin-bottom: var(--dxp-g-spacing-small);
|
}
|
|
.slds-m-bottom--medium, .slds-m-bottom_medium {
|
margin-bottom: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-m-bottom--large, .slds-m-bottom_large {
|
margin-bottom: var(--dxp-g-spacing-large);
|
}
|
|
.slds-m-bottom--x-large, .slds-m-bottom_x-large {
|
margin-bottom: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-m-bottom--xx-large, .slds-m-bottom_xx-large {
|
margin-bottom: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-m-right--none, .slds-m-right_none {
|
margin-right: var(--dxp-g-spacing-none);
|
}
|
|
.slds-m-right--xxx-small, .slds-m-right_xxx-small {
|
margin-right: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-m-right--xx-small, .slds-m-right_xx-small {
|
margin-right: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-m-right--x-small, .slds-m-right_x-small {
|
margin-right: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-m-right--small, .slds-m-right_small {
|
margin-right: var(--dxp-g-spacing-small);
|
}
|
|
.slds-m-right--medium, .slds-m-right_medium {
|
margin-right: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-m-right--large, .slds-m-right_large {
|
margin-right: var(--dxp-g-spacing-large);
|
}
|
|
.slds-m-right--x-large, .slds-m-right_x-large {
|
margin-right: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-m-right--xx-large, .slds-m-right_xx-large {
|
margin-right: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-p-top--none, .slds-p-top_none {
|
padding-top: var(--dxp-g-spacing-none);
|
}
|
|
.slds-p-top--xxx-small, .slds-p-top_xxx-small {
|
padding-top: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-p-top--xx-small, .slds-p-top_xx-small {
|
padding-top: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-p-top--x-small, .slds-p-top_x-small {
|
padding-top: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-p-top--small, .slds-p-top_small {
|
padding-top: var(--dxp-g-spacing-small);
|
}
|
|
.slds-p-top--medium, .slds-p-top_medium {
|
padding-top: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-p-top--large, .slds-p-top_large {
|
padding-top: var(--dxp-g-spacing-large);
|
}
|
|
.slds-p-top--x-large, .slds-p-top_x-large {
|
padding-top: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-p-top--xx-large, .slds-p-top_xx-large {
|
padding-top: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-p-left--none, .slds-p-left_none {
|
padding-left: var(--dxp-g-spacing-none);
|
}
|
|
.slds-p-left--xxx-small, .slds-p-left_xxx-small {
|
padding-left: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-p-left--xx-small, .slds-p-left_xx-small {
|
padding-left: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-p-left--x-small, .slds-p-left_x-small {
|
padding-left: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-p-left--small, .slds-p-left_small {
|
padding-left: var(--dxp-g-spacing-small);
|
}
|
|
.slds-p-left--medium, .slds-p-left_medium {
|
padding-left: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-p-left--large, .slds-p-left_large {
|
padding-left: var(--dxp-g-spacing-large);
|
}
|
|
.slds-p-left--x-large, .slds-p-left_x-large {
|
padding-left: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-p-left--xx-large, .slds-p-left_xx-large {
|
padding-left: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-p-bottom--none, .slds-p-bottom_none {
|
padding-bottom: var(--dxp-g-spacing-none);
|
}
|
|
.slds-p-bottom--xxx-small, .slds-p-bottom_xxx-small {
|
padding-bottom: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-p-bottom--xx-small, .slds-p-bottom_xx-small {
|
padding-bottom: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-p-bottom--x-small, .slds-p-bottom_x-small {
|
padding-bottom: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-p-bottom--small, .slds-p-bottom_small {
|
padding-bottom: var(--dxp-g-spacing-small);
|
}
|
|
.slds-p-bottom--medium, .slds-p-bottom_medium {
|
padding-bottom: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-p-bottom--large, .slds-p-bottom_large {
|
padding-bottom: var(--dxp-g-spacing-large);
|
}
|
|
.slds-p-bottom--x-large, .slds-p-bottom_x-large {
|
padding-bottom: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-p-bottom--xx-large, .slds-p-bottom_xx-large {
|
padding-bottom: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-p-right--none, .slds-p-right_none {
|
padding-right: var(--dxp-g-spacing-none);
|
}
|
|
.slds-p-right--xxx-small, .slds-p-right_xxx-small {
|
padding-right: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-p-right--xx-small, .slds-p-right_xx-small {
|
padding-right: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-p-right--x-small, .slds-p-right_x-small {
|
padding-right: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-p-right--small, .slds-p-right_small {
|
padding-right: var(--dxp-g-spacing-small);
|
}
|
|
.slds-p-right--medium, .slds-p-right_medium {
|
padding-right: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-p-right--large, .slds-p-right_large {
|
padding-right: var(--dxp-g-spacing-large);
|
}
|
|
.slds-p-right--x-large, .slds-p-right_x-large {
|
padding-right: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-p-right--xx-large, .slds-p-right_xx-large {
|
padding-right: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-p-vertical--none, .slds-p-vertical_none {
|
padding-top: var(--dxp-g-spacing-none);
|
padding-bottom: var(--dxp-g-spacing-none);
|
}
|
|
.slds-p-vertical--xxx-small, .slds-p-vertical_xxx-small {
|
padding-top: var(--dxp-g-spacing-xxxsmall);
|
padding-bottom: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-p-vertical--xx-small, .slds-p-vertical_xx-small {
|
padding-top: var(--dxp-g-spacing-xxsmall);
|
padding-bottom: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-p-vertical--x-small, .slds-p-vertical_x-small {
|
padding-top: var(--dxp-g-spacing-xsmall);
|
padding-bottom: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-p-vertical--small, .slds-p-vertical_small {
|
padding-top: var(--dxp-g-spacing-small);
|
padding-bottom: var(--dxp-g-spacing-small);
|
}
|
|
.slds-p-vertical--medium, .slds-p-vertical_medium {
|
padding-top: var(--dxp-g-spacing-medium);
|
padding-bottom: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-p-vertical--large, .slds-p-vertical_large {
|
padding-top: var(--dxp-g-spacing-large);
|
padding-bottom: var(--dxp-g-spacing-large);
|
}
|
|
.slds-p-vertical--x-large, .slds-p-vertical_x-large {
|
padding-top: var(--dxp-g-spacing-xlarge);
|
padding-bottom: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-p-vertical--xx-large, .slds-p-vertical_xx-large {
|
padding-top: var(--dxp-g-spacing-xxlarge);
|
padding-bottom: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-p-horizontal--none, .slds-p-horizontal_none {
|
padding-left: var(--dxp-g-spacing-none);
|
padding-right: var(--dxp-g-spacing-none);
|
}
|
|
.slds-p-horizontal--xxx-small, .slds-p-horizontal_xxx-small {
|
padding-left: var(--dxp-g-spacing-xxxsmall);
|
padding-right: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-p-horizontal--xx-small, .slds-p-horizontal_xx-small {
|
padding-left: var(--dxp-g-spacing-xxsmall);
|
padding-right: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-p-horizontal--x-small, .slds-p-horizontal_x-small {
|
padding-left: var(--dxp-g-spacing-xsmall);
|
padding-right: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-p-horizontal--small, .slds-p-horizontal_small {
|
padding-left: var(--dxp-g-spacing-small);
|
padding-right: var(--dxp-g-spacing-small);
|
}
|
|
.slds-p-horizontal--medium, .slds-p-horizontal_medium {
|
padding-left: var(--dxp-g-spacing-medium);
|
padding-right: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-p-horizontal--large, .slds-p-horizontal_large {
|
padding-left: var(--dxp-g-spacing-large);
|
padding-right: var(--dxp-g-spacing-large);
|
}
|
|
.slds-p-horizontal--x-large, .slds-p-horizontal_x-large {
|
padding-left: var(--dxp-g-spacing-xlarge);
|
padding-right: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-p-horizontal--xx-large, .slds-p-horizontal_xx-large {
|
padding-left: var(--dxp-g-spacing-xxlarge);
|
padding-right: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-p-around--none, .slds-p-around_none {
|
padding-top: var(--dxp-g-spacing-none);
|
padding-left: var(--dxp-g-spacing-none);
|
padding-bottom: var(--dxp-g-spacing-none);
|
padding-right: var(--dxp-g-spacing-none);
|
}
|
|
.slds-p-around--xxx-small, .slds-p-around_xxx-small {
|
padding-top: var(--dxp-g-spacing-xxxsmall);
|
padding-left: var(--dxp-g-spacing-xxxsmall);
|
padding-bottom: var(--dxp-g-spacing-xxxsmall);
|
padding-right: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-p-around--xx-small, .slds-p-around_xx-small {
|
padding-top: var(--dxp-g-spacing-xxsmall);
|
padding-left: var(--dxp-g-spacing-xxsmall);
|
padding-bottom: var(--dxp-g-spacing-xxsmall);
|
padding-right: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-p-around--x-small, .slds-p-around_x-small {
|
padding-top: var(--dxp-g-spacing-xsmall);
|
padding-left: var(--dxp-g-spacing-xsmall);
|
padding-bottom: var(--dxp-g-spacing-xsmall);
|
padding-right: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-p-around--small, .slds-p-around_small {
|
padding-top: var(--dxp-g-spacing-small);
|
padding-left: var(--dxp-g-spacing-small);
|
padding-bottom: var(--dxp-g-spacing-small);
|
padding-right: var(--dxp-g-spacing-small);
|
}
|
|
.slds-p-around--medium, .slds-p-around_medium {
|
padding-top: var(--dxp-g-spacing-medium);
|
padding-left: var(--dxp-g-spacing-medium);
|
padding-bottom: var(--dxp-g-spacing-medium);
|
padding-right: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-p-around--large, .slds-p-around_large {
|
padding-top: var(--dxp-g-spacing-large);
|
padding-left: var(--dxp-g-spacing-large);
|
padding-bottom: var(--dxp-g-spacing-large);
|
padding-right: var(--dxp-g-spacing-large);
|
}
|
|
.slds-p-around--x-large, .slds-p-around_x-large {
|
padding-top: var(--dxp-g-spacing-xlarge);
|
padding-left: var(--dxp-g-spacing-xlarge);
|
padding-bottom: var(--dxp-g-spacing-xlarge);
|
padding-right: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-p-around--xx-large, .slds-p-around_xx-large {
|
padding-top: var(--dxp-g-spacing-xxlarge);
|
padding-left: var(--dxp-g-spacing-xxlarge);
|
padding-bottom: var(--dxp-g-spacing-xxlarge);
|
padding-right: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-m-vertical--none, .slds-m-vertical_none {
|
margin-top: var(--dxp-g-spacing-none);
|
margin-bottom: var(--dxp-g-spacing-none);
|
}
|
|
.slds-m-vertical--xxx-small, .slds-m-vertical_xxx-small {
|
margin-top: var(--dxp-g-spacing-xxxsmall);
|
margin-bottom: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-m-vertical--xx-small, .slds-m-vertical_xx-small {
|
margin-top: var(--dxp-g-spacing-xxsmall);
|
margin-bottom: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-m-vertical--x-small, .slds-m-vertical_x-small {
|
margin-top: var(--dxp-g-spacing-xsmall);
|
margin-bottom: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-m-vertical--small, .slds-m-vertical_small {
|
margin-top: var(--dxp-g-spacing-small);
|
margin-bottom: var(--dxp-g-spacing-small);
|
}
|
|
.slds-m-vertical--medium, .slds-m-vertical_medium {
|
margin-top: var(--dxp-g-spacing-medium);
|
margin-bottom: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-m-vertical--large, .slds-m-vertical_large {
|
margin-top: var(--dxp-g-spacing-large);
|
margin-bottom: var(--dxp-g-spacing-large);
|
}
|
|
.slds-m-vertical--x-large, .slds-m-vertical_x-large {
|
margin-top: var(--dxp-g-spacing-xlarge);
|
margin-bottom: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-m-vertical--xx-large, .slds-m-vertical_xx-large {
|
margin-top: var(--dxp-g-spacing-xxlarge);
|
margin-bottom: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-m-horizontal--none, .slds-m-horizontal_none {
|
margin-left: var(--dxp-g-spacing-none);
|
margin-right: var(--dxp-g-spacing-none);
|
}
|
|
.slds-m-horizontal--xxx-small, .slds-m-horizontal_xxx-small {
|
margin-left: var(--dxp-g-spacing-xxxsmall);
|
margin-right: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-m-horizontal--xx-small, .slds-m-horizontal_xx-small {
|
margin-left: var(--dxp-g-spacing-xxsmall);
|
margin-right: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-m-horizontal--x-small, .slds-m-horizontal_x-small {
|
margin-left: var(--dxp-g-spacing-xsmall);
|
margin-right: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-m-horizontal--small, .slds-m-horizontal_small {
|
margin-left: var(--dxp-g-spacing-small);
|
margin-right: var(--dxp-g-spacing-small);
|
}
|
|
.slds-m-horizontal--medium, .slds-m-horizontal_medium {
|
margin-left: var(--dxp-g-spacing-medium);
|
margin-right: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-m-horizontal--large, .slds-m-horizontal_large {
|
margin-left: var(--dxp-g-spacing-large);
|
margin-right: var(--dxp-g-spacing-large);
|
}
|
|
.slds-m-horizontal--x-large, .slds-m-horizontal_x-large {
|
margin-left: var(--dxp-g-spacing-xlarge);
|
margin-right: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-m-horizontal--xx-large, .slds-m-horizontal_xx-large {
|
margin-left: var(--dxp-g-spacing-xxlarge);
|
margin-right: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-m-around--none, .slds-m-around_none {
|
margin-top: var(--dxp-g-spacing-none);
|
margin-left: var(--dxp-g-spacing-none);
|
margin-bottom: var(--dxp-g-spacing-none);
|
margin-right: var(--dxp-g-spacing-none);
|
}
|
|
.slds-m-around--xxx-small, .slds-m-around_xxx-small {
|
margin-top: var(--dxp-g-spacing-xxxsmall);
|
margin-left: var(--dxp-g-spacing-xxxsmall);
|
margin-bottom: var(--dxp-g-spacing-xxxsmall);
|
margin-right: var(--dxp-g-spacing-xxxsmall);
|
}
|
|
.slds-m-around--xx-small, .slds-m-around_xx-small {
|
margin-top: var(--dxp-g-spacing-xxsmall);
|
margin-left: var(--dxp-g-spacing-xxsmall);
|
margin-bottom: var(--dxp-g-spacing-xxsmall);
|
margin-right: var(--dxp-g-spacing-xxsmall);
|
}
|
|
.slds-m-around--x-small, .slds-m-around_x-small {
|
margin-top: var(--dxp-g-spacing-xsmall);
|
margin-left: var(--dxp-g-spacing-xsmall);
|
margin-bottom: var(--dxp-g-spacing-xsmall);
|
margin-right: var(--dxp-g-spacing-xsmall);
|
}
|
|
.slds-m-around--small, .slds-m-around_small {
|
margin-top: var(--dxp-g-spacing-small);
|
margin-left: var(--dxp-g-spacing-small);
|
margin-bottom: var(--dxp-g-spacing-small);
|
margin-right: var(--dxp-g-spacing-small);
|
}
|
|
.slds-m-around--medium, .slds-m-around_medium {
|
margin-top: var(--dxp-g-spacing-medium);
|
margin-left: var(--dxp-g-spacing-medium);
|
margin-bottom: var(--dxp-g-spacing-medium);
|
margin-right: var(--dxp-g-spacing-medium);
|
}
|
|
.slds-m-around--large, .slds-m-around_large {
|
margin-top: var(--dxp-g-spacing-large);
|
margin-left: var(--dxp-g-spacing-large);
|
margin-bottom: var(--dxp-g-spacing-large);
|
margin-right: var(--dxp-g-spacing-large);
|
}
|
|
.slds-m-around--x-large, .slds-m-around_x-large {
|
margin-top: var(--dxp-g-spacing-xlarge);
|
margin-left: var(--dxp-g-spacing-xlarge);
|
margin-bottom: var(--dxp-g-spacing-xlarge);
|
margin-right: var(--dxp-g-spacing-xlarge);
|
}
|
|
.slds-m-around--xx-large, .slds-m-around_xx-large {
|
margin-top: var(--dxp-g-spacing-xxlarge);
|
margin-left: var(--dxp-g-spacing-xxlarge);
|
margin-bottom: var(--dxp-g-spacing-xxlarge);
|
margin-right: var(--dxp-g-spacing-xxlarge);
|
}
|
|
.slds-spinner:after, .slds-spinner:before, .slds-spinner__dot-a:after, .slds-spinner__dot-a:before, .slds-spinner__dot-b:after, .slds-spinner__dot-b:before {
|
background: var(--dxp-c-spinner-color-foreground,var(--dxp-g-neutral-1));
|
}
|
|
.slds-spinner--inverse .slds-spinner__dot-a:after, .slds-spinner--inverse .slds-spinner__dot-a:before, .slds-spinner--inverse .slds-spinner__dot-b:after, .slds-spinner--inverse .slds-spinner__dot-b:before, .slds-spinner--inverse.slds-spinner:after, .slds-spinner--inverse.slds-spinner:before, .slds-spinner_inverse .slds-spinner__dot-a:after, .slds-spinner_inverse .slds-spinner__dot-a:before, .slds-spinner_inverse .slds-spinner__dot-b:after, .slds-spinner_inverse .slds-spinner__dot-b:before, .slds-spinner_inverse.slds-spinner:after, .slds-spinner_inverse.slds-spinner:before {
|
background: var(--dxp-c-spinner-color-foreground-inverse,var(--dxp-g-root-1));
|
}
|
|
.slds-spinner_container {
|
background-color: var(--dxp-c-spinner-color-background);
|
}
|
|
.slds-tabs_default__overflow-button .slds-button {
|
height: 38px;
|
font-size: inherit;
|
}
|
|
.slds-tabs--default__link, .slds-tabs_default__link {
|
color: var(--sds-c-tabs-item-text-color,var(--dxp-g-root-contrast,#3e3e3c));
|
}
|
|
.slds-textarea {
|
--textarea-color-background: var(--sds-c-textarea-color-background, var(--dxp-s-form-element-color-background, var(--dxp-g-root)));
|
--textarea-color-background-focus: var(--sds-c-textarea-color-background-focus, var(--dxp-s-form-element-color-background-active, var(--dxp-s-form-element-color-background, var(--dxp-g-root))));
|
background-color: var(--textarea-color-background);
|
font-size: var(--dxp-c-textarea-text-font-size,var(--dxp-s-form-element-text-font-size,var(--dxp-s-body-font-size)));
|
color: var(--sds-c-textarea-text-color,var(--dxp-s-form-element-text-color,var(--dxp-g-root-contrast)));
|
--border-color: var(--sds-c-textarea-color-border, var(--dxp-s-form-element-color-border, var(--dxp-g-neutral-3)));
|
--border-width: var(--dxp-c-textarea-width-border, var(--dxp-s-form-element-width-border, 1px));
|
border-color: var(--border-color);
|
border-width: var(--border-width);
|
border-style: solid;
|
border-inline-start: var(--dxp-c-textarea-border-inline-start,var(--dxp-s-form-element-border-inline-start,var(--border-width) solid var(--border-color)));
|
border-inline-end: var(--dxp-c-textarea-border-inline-end,var(--dxp-s-form-element-border-inline-end,var(--border-width) solid var(--border-color)));
|
border-block-start: var(--dxp-c-textarea-border-block-start,var(--dxp-s-form-element-border-block-start,var(--border-width) solid var(--border-color)));
|
border-block-end: var(--dxp-c-textarea-border-block-end,var(--dxp-s-form-element-border-block-end,var(--border-width) solid var(--border-color)));
|
border-radius: var(--sds-c-textarea-radius-border,var(--dxp-s-form-element-radius-border,4px));
|
}
|
|
.slds-textarea:focus {
|
background-color: var(--textarea-color-background-focus);
|
color: var(--sds-c-textarea-text-color-focus,var(--dxp-s-form-element-text-color-focus,var(--dxp-s-form-element-text-color,var(--dxp-g-root-contrast))));
|
border-color: var(--sds-c-textarea-color-border-focus,var(--dxp-s-form-element-color-border-focus,var(--dxp-g-brand)));
|
}
|
|
.slds-has-error .slds-textarea {
|
background-color: var(--textarea-color-background);
|
border-color: var(--dxp-g-destructive);
|
box-shadow: var(--dxp-g-destructive) 0 0 0 1px inset;
|
}
|
|
.slds-has-error .slds-textarea:active, .slds-has-error .slds-textarea:focus {
|
--slds-c-textarea-color-background-focus: var(--slds-c-textarea-color-background-error-focus, var(--dxp-g-root, white));
|
background-color: var(--textarea-color-background-focus);
|
box-shadow: var(--dxp-g-destructive) 0 0 0 1px inset, 0 0 3px var(--dxp-g-brand);
|
}
|
|
.slds-textarea.slds-is-disabled, .slds-textarea[disabled] {
|
background-color: var(--dxp-g-neutral);
|
}
|
|
.slds-textarea.slds-is-disabled::-webkit-input-placeholder, .slds-textarea[disabled]::-webkit-input-placeholder {
|
color: var(--dxp-g-neutral-contrast);
|
}
|
|
.slds-textarea.slds-is-disabled::-moz-placeholder, .slds-textarea[disabled]::-moz-placeholder {
|
color: var(--dxp-g-neutral-contrast);
|
}
|
|
.slds-textarea.slds-is-disabled::placeholder, .slds-textarea[disabled]::placeholder {
|
color: var(--dxp-g-neutral-contrast);
|
}
|
|
.slds-popover--tooltip .slds-popover__body, .slds-popover_tooltip .slds-popover__body {
|
font-size: var(--dxp-s-body-small-font-size,var(--sds-c-tooltip-font-size,.75rem));
|
font-style: var(--dxp-s-body-small-font-style);
|
font-family: var(--dxp-s-body-small-font-family);
|
font-weight: var(--dxp-s-body-small-font-weight);
|
text-decoration: var(--dxp-s-body-small-text-decoration);
|
text-transform: var(--dxp-s-body-small-text-transform);
|
line-height: var(--dxp-s-body-small-line-height);
|
letter-spacing: var(--dxp-s-body-small-letter-spacing);
|
text-shadow: var(--dxp-s-body-small-text-shadow);
|
}
|
|
.slds-text-font_monospace {
|
font-family: var(--dxp-c-monospace-font-family);
|
}
|
|
.dxp-text-body, .slds-text-body--regular, .slds-text-body_regular {
|
font-size: var(--dxp-s-body-font-size,var(--dxp-g-font-size-3));
|
font-style: var(--dxp-s-body-font-style);
|
font-family: var(--dxp-s-body-font-family);
|
font-weight: var(--dxp-s-body-font-weight);
|
text-decoration: var(--dxp-s-body-text-decoration);
|
text-transform: var(--dxp-s-body-text-transform);
|
line-height: var(--dxp-s-body-line-height);
|
letter-spacing: var(--dxp-s-body-letter-spacing);
|
text-shadow: var(--dxp-s-body-text-shadow);
|
color: var(--dxp-s-body-text-color,var(--dxp-g-root-contrast));
|
}
|
|
.dxp-text-body-small, .slds-text-body--small, .slds-text-body_small {
|
font-size: var(--dxp-s-body-small-font-size,var(--dxp-g-font-size-2));
|
font-style: var(--dxp-s-body-small-font-style);
|
font-family: var(--dxp-s-body-small-font-family);
|
font-weight: var(--dxp-s-body-small-font-weight);
|
text-decoration: var(--dxp-s-body-small-text-decoration);
|
text-transform: var(--dxp-s-body-small-text-transform);
|
line-height: var(--dxp-s-body-small-line-height);
|
letter-spacing: var(--dxp-s-body-small-letter-spacing);
|
text-shadow: var(--dxp-s-body-small-text-shadow);
|
color: var(--dxp-s-body-small-text-color,var(--dxp-g-root-contrast));
|
}
|
|
.dxp-text-heading-xlarge {
|
font-size: var(--dxp-s-text-heading-extra-large-font-size,var(--dxp-g-font-size-9));
|
font-style: var(--dxp-s-text-heading-extra-large-font-style);
|
font-family: var(--dxp-s-text-heading-extra-large-font-family,var(--dxp-g-heading-font-family));
|
font-weight: var(--dxp-s-text-heading-extra-large-font-weight);
|
text-decoration: var(--dxp-s-text-heading-extra-large-text-decoration);
|
text-transform: var(--dxp-s-text-heading-extra-large-text-transform);
|
line-height: var(--dxp-s-text-heading-extra-large-line-height);
|
letter-spacing: var(--dxp-s-text-heading-extra-large-letter-spacing);
|
text-shadow: var(--dxp-s-text-heading-extra-large-text-shadow);
|
color: var(--dxp-s-text-heading-extra-large-color,var(--dxp-g-root-contrast));
|
}
|
|
.dxp-text-heading-large, .slds-text-heading--large, .slds-text-heading_large {
|
font-size: var(--dxp-s-text-heading-large-font-size,var(--dxp-g-font-size-9));
|
font-style: var(--dxp-s-text-heading-large-font-style);
|
font-family: var(--dxp-s-text-heading-large-font-family,var(--dxp-g-heading-font-family));
|
font-weight: var(--dxp-s-text-heading-large-font-weight);
|
text-decoration: var(--dxp-s-text-heading-large-text-decoration);
|
text-transform: var(--dxp-s-text-heading-large-text-transform);
|
line-height: var(--dxp-s-text-heading-large-line-height);
|
letter-spacing: var(--dxp-s-text-heading-large-letter-spacing);
|
text-shadow: var(--dxp-s-text-heading-large-text-shadow);
|
color: var(--dxp-s-text-heading-large-color,var(--dxp-g-root-contrast));
|
}
|
|
.dxp-text-heading-medium, .slds-text-heading--medium, .slds-text-heading_medium {
|
font-size: var(--dxp-s-text-heading-medium-font-size,var(--dxp-g-font-size-7));
|
font-style: var(--dxp-s-text-heading-medium-font-style);
|
font-family: var(--dxp-s-text-heading-medium-font-family,var(--dxp-g-heading-font-family));
|
font-weight: var(--dxp-s-text-heading-medium-font-weight);
|
text-decoration: var(--dxp-s-text-heading-medium-text-decoration);
|
text-transform: var(--dxp-s-text-heading-medium-text-transform);
|
line-height: var(--dxp-s-text-heading-medium-line-height);
|
letter-spacing: var(--dxp-s-text-heading-medium-letter-spacing);
|
text-shadow: var(--dxp-s-text-heading-medium-text-shadow);
|
color: var(--dxp-s-text-heading-medium-color,var(--dxp-g-root-contrast));
|
}
|
|
.dxp-text-heading-small, .slds-text-heading--small, .slds-text-heading_small {
|
font-size: var(--dxp-s-text-heading-small-font-size,var(--dxp-g-font-size-5));
|
font-style: var(--dxp-s-text-heading-small-font-style);
|
font-family: var(--dxp-s-text-heading-small-font-family,var(--dxp-g-heading-font-family));
|
font-weight: var(--dxp-s-text-heading-small-font-weight);
|
text-decoration: var(--dxp-s-text-heading-small-text-decoration);
|
text-transform: var(--dxp-s-text-heading-small-text-transform);
|
line-height: var(--dxp-s-text-heading-small-line-height);
|
letter-spacing: var(--dxp-s-text-heading-small-letter-spacing);
|
text-shadow: var(--dxp-s-text-heading-small-text-shadow);
|
color: var(--dxp-s-text-heading-small-color,var(--dxp-g-root-contrast));
|
}
|
|
.slds-text-title {
|
font-size: var(--dxp-c-title-font-size,var(--dxp-g-font-size-2));
|
color: var(--dxp-c-title-text-color,var(--dxp-g-root-contrast));
|
font-style: var(--dxp-c-title-font-style);
|
text-shadow: var(--dxp-c-title-text-shadow);
|
line-height: var(--dxp-c-title-line-height);
|
font-weight: var(--dxp-c-title-font-weight);
|
letter-spacing: var(--dxp-c-title-letter-spacing);
|
}
|
|
.slds-text-title--caps, .slds-text-title_caps {
|
font-size: var(--dxp-c-title-caps-font-size,var(--dxp-g-font-size-2));
|
color: var(--dxp-c-title-caps-text-color,var(--dxp-g-root-contrast));
|
font-style: var(--dxp-c-title-caps-font-style);
|
text-shadow: var(--dxp-c-title-caps-text-shadow);
|
line-height: var(--dxp-c-title-caps-line-height);
|
font-weight: var(--dxp-c-title-caps-font-weight);
|
letter-spacing: var(--dxp-c-title-caps-letter-spacing);
|
text-transform: var(--dxp-c-title-caps-text-transform);
|
}
|
|
.slds-text-color--default, .slds-text-color_default {
|
color: var(--dxp-g-root-contrast);
|
}
|
|
.slds-text-color_success {
|
color: var(--dxp-g-success-2);
|
}
|
|
.slds-text-color--weak, .slds-text-color_weak {
|
color: var(--dxp-g-neutral-2);
|
}
|
|
.slds-text-color--error, .slds-text-color_destructive, .slds-text-color_error {
|
color: var(--dxp-g-destructive);
|
}
|
|
.slds-text-color_inverse {
|
color: var(--dxp-g-root);
|
}
|
|
.slds-text-color_inverse-weak {
|
color: var(--dxp-g-neutral-2);
|
}
|
|
b, dfn, strong {
|
font-weight: var(--dxp-c-strong-text-weight);
|
}
|
|
mark {
|
background: var(--dxp-c-mark-color-background,var(--dxp-g-warning));
|
color: var(--dxp-c-mark-text-color,var(--dxp-g-warning-contrast));
|
}
|
|
::selection {
|
background: var(--dxp-c-selection-color-background,var(--dxp-g-neutral));
|
text-shadow: var(--dxp-c-selection-text-shadow);
|
color: var(--dxp-c-selection-text-color,var(--dxp-g-neutral-contrast));
|
}
|
|
::-moz-selection {
|
background: var(--dxp-c-selection-color-background,var(--dxp-g-neutral));
|
text-shadow: var(--dxp-c-selection-text-shadow);
|
color: var(--dxp-c-selection-text-color,var(--dxp-g-neutral-contrast));
|
}
|
