UNPKG

@salesforce-ux/design-system

Version:
2,108 lines (2,025 loc) 293 kB
/*! Lightning Design System 2.12.0 */ @charset "UTF-8"; @font-face { font-family: "Salesforce Sans"; src: url("../fonts/webfonts/SalesforceSans-Light.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-Light.woff") format("woff"); font-weight: 300; font-display: swap; } @font-face { font-family: "Salesforce Sans"; src: url("../fonts/webfonts/SalesforceSans-LightItalic.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-LightItalic.woff") format("woff"); font-style: italic; font-weight: 300; font-display: swap; } @font-face { font-family: "Salesforce Sans"; src: url("../fonts/webfonts/SalesforceSans-Regular.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-Regular.woff") format("woff"); font-weight: 400; font-display: swap; } @font-face { font-family: "Salesforce Sans"; src: url("../fonts/webfonts/SalesforceSans-Italic.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-Italic.woff") format("woff"); font-style: italic; font-weight: 400; font-display: swap; } @font-face { font-family: "Salesforce Sans"; src: url("../fonts/webfonts/SalesforceSans-Bold.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-Bold.woff") format("woff"); font-weight: 700; font-display: swap; } @font-face { font-family: "Salesforce Sans"; src: url("../fonts/webfonts/SalesforceSans-BoldItalic.woff2") format("woff2"), url("../fonts/webfonts/SalesforceSans-BoldItalic.woff") format("woff"); font-style: italic; font-weight: 700; font-display: swap; } /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } audio:not([controls]) { display: none; height: 0; } template { display: none; } a { background-color: transparent; } a:active, a:hover { outline: 0; } abbr[title] { border-bottom: 1px dotted; } b, strong { font-weight: bold; } dfn { font-style: italic; } h1 { font-size: 2em; margin: 0.67em 0; } mark { background: #ff0; color: #000; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sup { top: -0.5em; } sub { bottom: -0.25em; } img { border: 0; } figure { margin: 1em 40px; } hr { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; height: 0; } pre { overflow: auto; } code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } button { overflow: visible; } button, select { text-transform: none; } button, input[type="button"], input[type="reset"], input[type="submit"] { -webkit-appearance: button; cursor: pointer; } button[disabled], input[disabled] { cursor: default; } button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } input { line-height: normal; } input[type="checkbox"], input[type="radio"] { -webkit-box-sizing: border-box; box-sizing: border-box; padding: 0; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { height: auto; } input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; } input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; } fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; } legend { border: 0; padding: 0; } textarea { overflow: auto; } optgroup { font-weight: bold; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; } *, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; } ::-webkit-input-placeholder { color: #706e6b; font-weight: 400; } ::-moz-placeholder { color: #706e6b; font-weight: 400; } :-ms-input-placeholder { color: #706e6b; font-weight: 400; } ::-ms-input-placeholder { color: #706e6b; font-weight: 400; } ::placeholder { color: #706e6b; font-weight: 400; } ::-moz-selection { background: #d8edff; text-shadow: none; color: #080707; } ::selection { background: #d8edff; text-shadow: none; color: #080707; } h1, h2, h3, h4, h5, h6, p, ol, ul, dl, fieldset { margin: 0; padding: 0; } dd, figure { margin: 0; } abbr[title] { text-decoration: none; } abbr[title], fieldset, hr { border: 0; } hr { padding: 0; } h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: 1em; } ol, ul { list-style: none; } a { color: #006dcc; text-decoration: none; -webkit-transition: color 0.1s linear; transition: color 0.1s linear; } a:hover, a:focus { text-decoration: underline; color: #005fb2; } a:active { color: #005fb2; } a, button { cursor: pointer; } b, strong, dfn { font-weight: 700; } mark { background-color: #fff03f; color: #080707; } abbr[title] { cursor: help; } input[type="search"] { -webkit-box-sizing: border-box; box-sizing: border-box; } table { width: 100%; } caption, th, td { text-align: left; } hr { display: block; margin: 2rem 0; border-top: 1px solid #dddbda; height: 1px; clear: both; } audio, canvas, iframe, img, svg, video { vertical-align: middle; } img { max-width: 100%; height: auto; } .slds-accordion { position: relative; } .slds-accordion__list-item { border-top: 1px solid #dddbda; } .slds-accordion__list-item:first-child { border-top: 0; } .slds-accordion__summary { display: -webkit-box; display: -ms-flexbox; display: flex; } .slds-accordion__summary-heading { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; min-width: 0; font-size: 1rem; line-height: 1.25; } .slds-accordion__summary-heading .slds-button:focus { text-decoration: underline; -webkit-box-shadow: none; box-shadow: none; } .slds-accordion__summary-action { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; min-width: 0; } .slds-accordion__summary-action-icon { -ms-flex-negative: 0; flex-shrink: 0; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } [dir="rtl"] .slds-accordion__summary-action-icon { -webkit-transform: rotate(90deg); transform: rotate(90deg); } @media (min-width: 64em) { .slds-accordion__summary-content { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .slds-accordion__section { padding: 0.75rem; } .slds-accordion__content { overflow: hidden; visibility: hidden; opacity: 0; height: 0; } .slds-is-open > .slds-accordion__summary { margin-bottom: 0.75rem; } .slds-is-open > .slds-accordion__summary .slds-accordion__summary-action-icon { -webkit-transform: rotate(0deg); transform: rotate(0deg); } .slds-is-open > .slds-accordion__content { overflow: visible; visibility: visible; opacity: 1; height: auto; } .slds-avatar { width: 2rem; height: 2rem; overflow: hidden; display: inline-block; vertical-align: middle; border-radius: 0.25rem; line-height: 1; font-size: 0.875rem; color: white; } .slds-avatar:hover, .slds-avatar:focus:hover { color: currentColor; } .slds-avatar.slds-avatar_group-image-small { background: url("/assets/images/group_avatar_96.png") top left/cover no-repeat; } .slds-avatar.slds-avatar_group-image-medium { background: url("/assets/images/group_avatar_160.png") top left/cover no-repeat; } .slds-avatar.slds-avatar_group-image-large { background: url("/assets/images/group_avatar_200.png") top left/cover no-repeat; } .slds-avatar.slds-avatar_profile-image-small { background: url("/assets/images/profile_avatar_96.png") top left/cover no-repeat; } .slds-avatar.slds-avatar_profile-image-medium { background: url("/assets/images/profile_avatar_160.png") top left/cover no-repeat; } .slds-avatar.slds-avatar_profile-image-large { background: url("/assets/images/profile_avatar_200.png") top left/cover no-repeat; } .slds-avatar_x-small { width: 1.25rem; height: 1.25rem; font-size: 0.625rem; } .slds-avatar_x-small .slds-icon { width: 1.25rem; height: 1.25rem; } .slds-avatar_small { width: 1.5rem; height: 1.5rem; font-size: 0.625rem; } .slds-avatar_small .slds-icon { width: 1.5rem; height: 1.5rem; } .slds-avatar_medium { width: 2rem; height: 2rem; font-size: 0.875rem; } .slds-avatar_medium .slds-icon { width: 2rem; height: 2rem; } .slds-avatar_large { width: 3rem; height: 3rem; font-size: 1.125rem; font-weight: 300; line-height: 1.25; } .slds-avatar_large .slds-icon { width: 3rem; height: 3rem; } .slds-avatar_circle { border-radius: 50%; } .slds-avatar_empty { border: 1px dashed #dddbda; } .slds-avatar__initials { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: auto; height: 100%; text-shadow: 0 0 1px rgba(0, 0, 0, 0.8); } .slds-avatar__initials[title] { cursor: default; text-decoration: none; } .slds-avatar__initials:hover { color: white; cursor: default; } .slds-avatar__initials_inverse { background-color: #f3f2f2; color: #3e3e3c; text-shadow: none; } .slds-avatar__initials_inverse:hover { color: #3e3e3c; } .slds-badge { background-color: #ecebea; padding: 0.25rem 0.5rem; border-radius: 15rem; font-size: 0.75rem; font-weight: 700; line-height: normal; color: #080707; white-space: nowrap; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .slds-badge + .slds-badge { margin-left: 0.5rem; } .slds-badge:empty { padding: 0; } .slds-badge_inverse { background-color: #706e6b; color: white; } .slds-badge_lightest { border: 1px solid #dddbda; background-color: white; font-size: 0.75rem; text-transform: none; letter-spacing: normal; } .slds-badge__icon { color: #706e6b; vertical-align: middle; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; line-height: 1; } .slds-badge__icon.slds-badge__icon_inverse { color: currentColor; } .slds-badge__icon_left { margin-right: 0.25rem; } .slds-badge__icon_right { margin-left: 0.25rem; } .slds-breadcrumb { } .slds-breadcrumb .slds-list__item, .slds-breadcrumb__item { position: relative; } .slds-breadcrumb .slds-list__item:before, .slds-breadcrumb__item:before { content: ">"; position: absolute; left: -0.25rem; } .slds-breadcrumb .slds-list__item > a, .slds-breadcrumb__item > a { display: block; padding: 0 0.5rem; } .slds-breadcrumb .slds-list__item > a:hover, .slds-breadcrumb__item > a:hover { text-decoration: none; } .slds-breadcrumb .slds-list__item:first-child > a, .slds-breadcrumb__item:first-child > a { padding-left: 0; } .slds-breadcrumb .slds-list__item:first-child:before, .slds-breadcrumb__item:first-child:before { content: ""; } .slds-breadcrumb .slds-dropdown-trigger { margin-right: 0.5rem; } .slds-button-group, .slds-button-group-list { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .slds-button-group .slds-button, .slds-button-group-list .slds-button { border-radius: 0; border-width: 1px; } .slds-button-group .slds-button:focus, .slds-button-group-list .slds-button:focus { z-index: 1; } .slds-button-group .slds-button + .slds-button, .slds-button-group .slds-button + .slds-button_last .slds-button, .slds-button-group-list li + li .slds-button { margin-left: -1px; } .slds-button-group .slds-button_brand + .slds-button_last .slds-button_icon-brand, .slds-button-group-list li:last-child .slds-button_icon-brand { -webkit-box-shadow: inset 1px 0 0 white; box-shadow: inset 1px 0 0 white; } .slds-button-group-list li:first-child .slds-button, .slds-button-group .slds-button:first-child { border-radius: 0.25rem 0 0 0.25rem; } .slds-button-group .slds-button:last-child, .slds-button-group-list li:last-child .slds-button, .slds-button-group .slds-button_last .slds-button, .slds-button-group .slds-button.slds-button_last, .slds-button-group .slds-button_last .slds-button:only-child, .slds-button-group .slds-button.slds-button_last { border-radius: 0 0.25rem 0.25rem 0; } .slds-button-group .slds-button:only-child, .slds-button-group-list li:only-child .slds-button { border-radius: 0.25rem; } .slds-button.slds-button_first.slds-button_first { border-right: 0; border-radius: 0.25rem 0 0 0.25rem; } .slds-button.slds-button_middle.slds-button_middle { border-radius: 0; margin-left: -1px; } .slds-button.slds-button_last.slds-button_last { border-radius: 0 0.25rem 0.25rem 0; margin-left: -1px; } .slds-button-group + .slds-button-group, .slds-button-group + .slds-button-group-list, .slds-button-group + .slds-button, .slds-button-group-list + .slds-button-group-list, .slds-button-group-list + .slds-button-group, .slds-button-group-list + .slds-button { margin-left: 0.25rem; } .slds-button-group-row { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .slds-button-group-row .slds-button-group-item + .slds-button-group-item { margin-left: 0.25rem; } .slds-button-group-row .slds-button-group-item .slds-button { margin: 0; } .slds-button_icon, .slds-button_icon-inverse, .slds-button_icon-container, .slds-button_icon-border, .slds-button_icon-border-filled, .slds-button_icon-border-inverse, .slds-button_icon-more, .slds-button_icon-error { line-height: 1; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #706e6b; -ms-flex-negative: 0; flex-shrink: 0; } .slds-button_icon-container, .slds-button_icon-border, .slds-button_icon-border-filled, .slds-button_icon-border-inverse, .slds-button_icon-brand, .slds-button_icon-more, .slds-button_icon-container-more { width: 2rem; height: 2rem; } .slds-button_icon-border-filled, .slds-button_icon-border { line-height: 1; vertical-align: middle; color: #706e6b; border: 1px solid #dddbda; -webkit-transition: border 0.15s linear; transition: border 0.15s linear; border-color: #dddbda; } .slds-button_icon-border-filled[disabled], .slds-button_icon-border-filled:disabled, .slds-button_icon-border[disabled], .slds-button_icon-border:disabled { color: #dddbda; } .slds-button_icon-border-inverse { background-color: rgba(0, 0, 0, 0); border-color: #dddbda; } .slds-button_icon-border-inverse[disabled], .slds-button_icon-border-inverse:disabled { background-color: rgba(0, 0, 0, 0); border-color: rgba(255, 255, 255, 0.15); } .slds-button_icon-brand { background-color: #0070d2; border-color: #0070d2; color: white; } .slds-button_icon-brand:link, .slds-button_icon-brand:visited, .slds-button_icon-brand:active { color: white; } .slds-button_icon-brand:hover, .slds-button_icon-brand:focus { background-color: #005fb2; border-color: #005fb2; color: white; } .slds-button_icon-brand:active { background-color: #005fb2; border-color: #005fb2; } .slds-button_icon-brand[disabled], .slds-button_icon-brand:disabled { background: #c9c7c5; border-color: #c9c7c5; color: white; } .slds-button_icon-border-filled { background-color: white; } .slds-button_icon-border-filled[disabled], .slds-button_icon-border-filled:disabled { border-color: #dddbda; background-color: white; } .slds-button_icon-inverse, .slds-button_icon-border-inverse { color: white; } .slds-button_icon-inverse:hover, .slds-button_icon-inverse:focus, .slds-button_icon-border-inverse:hover, .slds-button_icon-border-inverse:focus { color: rgba(255, 255, 255, 0.75); } .slds-button_icon-inverse:focus, .slds-button_icon-border-inverse:focus { outline: none; -webkit-box-shadow: 0 0 3px #ecebea; box-shadow: 0 0 3px #ecebea; border: 1px solid #ecebea; } .slds-button_icon-inverse:active, .slds-button_icon-border-inverse:active { color: rgba(255, 255, 255, 0.5); } .slds-button_icon-inverse[disabled], .slds-button_icon-inverse:disabled, .slds-button_icon-border-inverse[disabled], .slds-button_icon-border-inverse:disabled { color: rgba(255, 255, 255, 0.15); } .slds-button_icon-error, .slds-button_icon-error:hover, .slds-button_icon-error:active, .slds-button_icon-error:focus { color: #c23934; } .slds-button_icon-current-color { color: currentColor; } .slds-button_icon-small { width: 1.5rem; height: 1.5rem; } .slds-button_icon-x-small { width: 1.25rem; height: 1.25rem; line-height: 1; } .slds-button_icon-x-small .slds-button__icon { width: 0.75rem; height: 0.75rem; } .slds-button_icon-xx-small { width: 1rem; height: 1rem; line-height: 1; } .slds-button_icon-xx-small .slds-button__icon { width: 0.5rem; height: 0.5rem; } .slds-button_icon-more { width: auto; line-height: 1.875rem; padding: 0 0.5rem; background-color: white; border-color: #dddbda; color: #706e6b; } .slds-button_icon-more:hover .slds-button__icon, .slds-button_icon-more:focus .slds-button__icon { fill: #0070d2; } .slds-button_icon-more:active .slds-button__icon { fill: #005fb2; } .slds-button_icon-more[disabled], .slds-button_icon-more:disabled { cursor: default; } .slds-button_icon-more[disabled] .slds-button__icon, .slds-button_icon-more:disabled .slds-button__icon { fill: #dddbda; } .slds-button_icon-container-more { width: auto; line-height: 1.875rem; padding: 0 0.5rem; vertical-align: middle; } .slds-button__icon_hint { fill: #b0adab; } .slds-button__icon_inverse-hint { fill: rgba(255, 255, 255, 0.5); } .slds-hint-parent .slds-button_icon-border-inverse { border-color: rgba(255, 255, 255, 0.5); } .slds-hint-parent .slds-button_icon-border-inverse:focus { border-color: rgba(255, 255, 255, 0.75); } .slds-hint-parent:hover .slds-button_icon-border-inverse, .slds-hint-parent:focus .slds-button_icon-border-inverse { border-color: rgba(255, 255, 255, 0.75); } .slds-hint-parent:hover .slds-button__icon_hint, .slds-hint-parent:focus .slds-button__icon_hint { fill: #706e6b; } .slds-hint-parent:hover .slds-button__icon_inverse-hint, .slds-hint-parent:focus .slds-button__icon_inverse-hint { fill: rgba(255, 255, 255, 0.75); } .slds-hint-parent:hover .slds-button:disabled .slds-button__icon_hint, .slds-hint-parent:focus .slds-button:disabled .slds-button__icon_hint { fill: currentColor; } .slds-button_icon-container.slds-is-selected, .slds-button_icon-border.slds-is-selected, .slds-button_icon-border-filled.slds-is-selected, .slds-button_icon-border-inverse.slds-is-selected { background-color: #0070d2; border-color: #0070d2; color: white; } .slds-button_icon-container.slds-is-selected:link, .slds-button_icon-container.slds-is-selected:visited, .slds-button_icon-container.slds-is-selected:active, .slds-button_icon-border.slds-is-selected:link, .slds-button_icon-border.slds-is-selected:visited, .slds-button_icon-border.slds-is-selected:active, .slds-button_icon-border-filled.slds-is-selected:link, .slds-button_icon-border-filled.slds-is-selected:visited, .slds-button_icon-border-filled.slds-is-selected:active, .slds-button_icon-border-inverse.slds-is-selected:link, .slds-button_icon-border-inverse.slds-is-selected:visited, .slds-button_icon-border-inverse.slds-is-selected:active { color: white; } .slds-button_icon-container.slds-is-selected:hover, .slds-button_icon-container.slds-is-selected:focus, .slds-button_icon-border.slds-is-selected:hover, .slds-button_icon-border.slds-is-selected:focus, .slds-button_icon-border-filled.slds-is-selected:hover, .slds-button_icon-border-filled.slds-is-selected:focus, .slds-button_icon-border-inverse.slds-is-selected:hover, .slds-button_icon-border-inverse.slds-is-selected:focus { background-color: #005fb2; border-color: #005fb2; color: white; } .slds-button_icon-container.slds-is-selected:active, .slds-button_icon-border.slds-is-selected:active, .slds-button_icon-border-filled.slds-is-selected:active, .slds-button_icon-border-inverse.slds-is-selected:active { background-color: #005fb2; border-color: #005fb2; } .slds-button_icon-container.slds-is-selected .slds-button__icon, .slds-button_icon-border.slds-is-selected .slds-button__icon, .slds-button_icon-border-filled.slds-is-selected .slds-button__icon, .slds-button_icon-border-inverse.slds-is-selected .slds-button__icon { fill: white; } .slds-button_icon-container.slds-is-selected:hover .slds-button__icon, .slds-button_icon-container.slds-is-selected:focus .slds-button__icon, .slds-button_icon-border.slds-is-selected:hover .slds-button__icon, .slds-button_icon-border.slds-is-selected:focus .slds-button__icon, .slds-button_icon-border-filled.slds-is-selected:hover .slds-button__icon, .slds-button_icon-border-filled.slds-is-selected:focus .slds-button__icon, .slds-button_icon-border-inverse.slds-is-selected:hover .slds-button__icon, .slds-button_icon-border-inverse.slds-is-selected:focus .slds-button__icon { fill: white; } .slds-button_icon-container.slds-is-selected[disabled], .slds-button_icon-container.slds-is-selected:disabled, .slds-button_icon-border.slds-is-selected[disabled], .slds-button_icon-border.slds-is-selected:disabled, .slds-button_icon-border-filled.slds-is-selected[disabled], .slds-button_icon-border-filled.slds-is-selected:disabled, .slds-button_icon-border-inverse.slds-is-selected[disabled], .slds-button_icon-border-inverse.slds-is-selected:disabled { background: #c9c7c5; border-color: #c9c7c5; color: white; } .slds-button { position: relative; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0; background: transparent; background-clip: border-box; border: 1px solid transparent; border-radius: 0.25rem; line-height: 1.875rem; text-decoration: none; color: #0070d2; -webkit-appearance: none; white-space: normal; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .slds-button:hover, .slds-button:focus, .slds-button:active, .slds-button:visited { text-decoration: none; } .slds-button:hover, .slds-button:focus { color: #005fb2; } .slds-button:focus { outline: 0; -webkit-box-shadow: 0 0 3px #0070d2; box-shadow: 0 0 3px #0070d2; } .slds-button:active { color: #005fb2; } .slds-button[disabled], .slds-button:disabled { color: #dddbda; } .slds-button[disabled] *, .slds-button:disabled * { pointer-events: none; } .slds-button a { color: currentColor; } .slds-button:hover .slds-button__icon, .slds-button:focus .slds-button__icon, .slds-button:active .slds-button__icon, .slds-button[disabled] .slds-button__icon, .slds-button:disabled .slds-button__icon { fill: currentColor; pointer-events: none; } .slds-button + .slds-button-group, .slds-button + .slds-button-group-list { margin-left: 0.25rem; } .slds-button + .slds-button { margin-left: 0.25rem; } a.slds-button { text-align: center; } a.slds-button:focus { outline: 0; -webkit-box-shadow: 0 0 3px #0070d2; box-shadow: 0 0 3px #0070d2; } a.slds-button_inverse:focus, a.slds-button--inverse:focus { outline: none; -webkit-box-shadow: 0 0 3px #ecebea; box-shadow: 0 0 3px #ecebea; border: 1px solid #ecebea; } .slds-button_reset { font-size: inherit; color: inherit; line-height: inherit; padding: 0; background: transparent; border: 0; text-align: inherit; } .slds-button_neutral { padding-left: 1rem; padding-right: 1rem; text-align: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #dddbda; -webkit-transition: border 0.15s linear; transition: border 0.15s linear; border-color: #dddbda; background-color: white; } .slds-button_neutral:hover, .slds-button_neutral:focus { background-color: #f4f6f9; } .slds-button_neutral:active { background-color: #eef1f6; } .slds-button_neutral[disabled], .slds-button_neutral:disabled { background-color: white; cursor: default; } .slds-button_brand { padding-left: 1rem; padding-right: 1rem; text-align: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #dddbda; -webkit-transition: border 0.15s linear; transition: border 0.15s linear; background-color: #0070d2; border-color: #0070d2; color: white; } .slds-button_brand:link, .slds-button_brand:visited, .slds-button_brand:active { color: white; } .slds-button_brand:hover, .slds-button_brand:focus { background-color: #005fb2; border-color: #005fb2; color: white; } .slds-button_brand:active { background-color: #005fb2; border-color: #005fb2; } .slds-button_brand[disabled], .slds-button_brand:disabled { background: #c9c7c5; border-color: #c9c7c5; color: white; } .slds-button_outline-brand { padding-left: 1rem; padding-right: 1rem; text-align: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #dddbda; -webkit-transition: border 0.15s linear; transition: border 0.15s linear; border-color: #dddbda; background-color: white; border-color: #0070d2; } .slds-button_outline-brand:hover, .slds-button_outline-brand:focus { background-color: #f4f6f9; } .slds-button_outline-brand:active { background-color: #eef1f6; } .slds-button_outline-brand[disabled], .slds-button_outline-brand:disabled { border-color: #dddbda; color: #dddbda; background-color: white; } .slds-button_inverse { padding-left: 1rem; padding-right: 1rem; text-align: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #dddbda; -webkit-transition: border 0.15s linear; transition: border 0.15s linear; background-color: rgba(0, 0, 0, 0); border-color: #dddbda; } .slds-button_inverse:hover, .slds-button_inverse:focus { background-color: #f4f6f9; } .slds-button_inverse[disabled], .slds-button_inverse:disabled { background-color: rgba(0, 0, 0, 0); border-color: rgba(255, 255, 255, 0.15); } .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 { color: #ecebea; } .slds-button_inverse:hover, .slds-button_inverse:focus, .slds-button_inverse:active, .slds-button_icon-border-inverse:hover, .slds-button_icon-border-inverse:focus, .slds-button_icon-border-inverse:active { color: #0070d2; } .slds-button_inverse:focus, .slds-button_icon-border-inverse:focus { outline: none; -webkit-box-shadow: 0 0 3px #ecebea; box-shadow: 0 0 3px #ecebea; border: 1px solid #ecebea; } .slds-button_inverse[disabled], .slds-button_inverse:disabled, .slds-button_icon-border-inverse[disabled], .slds-button_icon-border-inverse:disabled { color: rgba(255, 255, 255, 0.5); } .slds-button_destructive { padding-left: 1rem; padding-right: 1rem; text-align: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #dddbda; -webkit-transition: border 0.15s linear; transition: border 0.15s linear; background-color: #c23934; border-color: #c23934; color: white; } .slds-button_destructive:link, .slds-button_destructive:visited, .slds-button_destructive:active { color: white; } .slds-button_destructive:hover, .slds-button_destructive:focus { background-color: #a61a14; color: white; } .slds-button_destructive:active { background-color: #870500; border-color: #870500; } .slds-button_destructive[disabled], .slds-button_destructive:disabled { background: #c9c7c5; border-color: #c9c7c5; color: white; } .slds-button_text-destructive { padding-left: 1rem; padding-right: 1rem; text-align: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #dddbda; -webkit-transition: border 0.15s linear; transition: border 0.15s linear; border-color: #dddbda; background-color: white; color: #c23934; } .slds-button_text-destructive:hover, .slds-button_text-destructive:focus { background-color: #f4f6f9; } .slds-button_text-destructive:active { background-color: #eef1f6; } .slds-button_text-destructive:focus, .slds-button_text-destructive:hover { color: #a12b2b; } .slds-button_text-destructive[disabled], .slds-button_text-destructive:disabled { color: #dddbda; background-color: white; } .slds-button_success { padding-left: 1rem; padding-right: 1rem; text-align: center; vertical-align: middle; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border: 1px solid #dddbda; -webkit-transition: border 0.15s linear; transition: border 0.15s linear; background-color: #4bca81; border-color: #4bca81; color: #080707; } .slds-button_success:link, .slds-button_success:visited, .slds-button_success:active { color: #080707; } .slds-button_success:hover, .slds-button_success:focus { background-color: #04844b; border-color: #04844b; color: white; } .slds-button_success:active { background-color: #04844b; border-color: #04844b; } .slds-button_success[disabled], .slds-button_success:disabled { background: #c9c7c5; border-color: #c9c7c5; color: white; } .slds-button__icon { width: 0.875rem; height: 0.875rem; fill: currentColor; } .slds-button__icon_large { width: 1.5rem; height: 1.5rem; } .slds-button__icon_small { width: 0.75rem; height: 0.75rem; } .slds-button__icon_x-small { width: 0.5rem; height: 0.5rem; } .slds-button__icon_left { margin-right: 0.5rem; } .slds-button__icon_right { margin-left: 0.5rem; } .slds-button_full-width { font-size: inherit; color: inherit; line-height: inherit; padding: 0; background: transparent; border: 0; text-align: inherit; width: 100%; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .slds-button_full-width:focus { -webkit-box-shadow: none; box-shadow: none; } .slds-button_stretch { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .slds-button_neutral.slds-is-selected { border-color: transparent; background-color: transparent; } .slds-button_neutral.slds-is-selected:hover:not([disabled]), .slds-button_neutral.slds-is-selected:focus:not([disabled]) { border-color: #dddbda; background-color: #f4f6f9; } .slds-button_neutral.slds-is-selected:active:not([disabled]) { background-color: #eef1f6; } .slds-button_inverse.slds-is-selected { border-color: transparent; } .slds-button_stateful .slds-text-selected, .slds-button_stateful .slds-text-selected-focus, .slds-button_stateful .slds-text-not-selected { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .slds-not-selected { } .slds-not-selected .slds-text-selected { display: none; } .slds-not-selected .slds-text-selected-focus { display: none; } .slds-not-selected .slds-text-not-selected { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .slds-is-selected-clicked .slds-text-selected, .slds-is-selected[disabled] .slds-text-selected, .slds-is-selected[disabled]:hover .slds-text-selected, .slds-is-selected[disabled]:focus .slds-text-selected { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .slds-is-selected-clicked .slds-text-selected-focus, .slds-is-selected[disabled] .slds-text-selected-focus, .slds-is-selected[disabled]:hover .slds-text-selected-focus, .slds-is-selected[disabled]:focus .slds-text-selected-focus { display: none; } .slds-is-selected-clicked .slds-text-not-selected, .slds-is-selected[disabled] .slds-text-not-selected, .slds-is-selected[disabled]:hover .slds-text-not-selected, .slds-is-selected[disabled]:focus .slds-text-not-selected { display: none; } .slds-is-selected .slds-text-not-selected { display: none; } .slds-is-selected .slds-text-selected { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .slds-is-selected .slds-text-selected-focus { display: none; } .slds-is-selected:hover .slds-text-not-selected, .slds-is-selected:focus .slds-text-not-selected { display: none; } .slds-is-selected:hover .slds-text-selected, .slds-is-selected:focus .slds-text-selected { display: none; } .slds-is-selected:hover .slds-text-selected-focus, .slds-is-selected:focus .slds-text-selected-focus { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .slds-card { position: relative; padding: 0; background: white; border: 1px solid #dddbda; border-radius: 0.25rem; background-clip: padding-box; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); } .slds-card + .slds-card { margin-top: 1rem; } .slds-card__body_inner { padding: 0 1rem; } .slds-card__header { padding: 0.75rem 1rem 0; margin: 0 0 0.75rem; } .slds-card__header-title { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 1rem; line-height: 1.25; } .slds-card__header-link { color: inherit; font-weight: 700; } .slds-card__body { margin-top: 0.75rem; margin-bottom: 0.75rem; } .slds-card__body:empty, .slds-card__footer:empty { display: none; } .slds-card__footer { padding: 0.75rem 1rem; margin-top: 0.75rem; text-align: center; font-size: 0.8125rem; border-top: 1px solid #dddbda; } .slds-card__footer-action { display: block; } .slds-card__tile { margin-top: 0.75rem; } .slds-region__pinned-left .slds-card, .slds-region__pinned-left .slds-card-wrapper, .slds-region__pinned-left .slds-card_boundary, .slds-region__pinned-left .slds-tabs_card, .slds-region__pinned-right .slds-card, .slds-region__pinned-right .slds-card-wrapper, .slds-region__pinned-right .slds-card_boundary, .slds-region__pinned-right .slds-tabs_card { border-radius: 0; border: 0; border-bottom: 1px solid #dddbda; -webkit-box-shadow: none; box-shadow: none; } .slds-region__pinned-left .slds-card:last-child, .slds-region__pinned-left .slds-card-wrapper:last-child, .slds-region__pinned-left .slds-card_boundary:last-child, .slds-region__pinned-left .slds-tabs_card:last-child, .slds-region__pinned-right .slds-card:last-child, .slds-region__pinned-right .slds-card-wrapper:last-child, .slds-region__pinned-right .slds-card_boundary:last-child, .slds-region__pinned-right .slds-tabs_card:last-child { border-bottom: 0; } .slds-card-wrapper { padding: 1rem; background: white; border: 1px solid #dddbda; border-radius: 0.25rem; background-clip: padding-box; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); } .slds-card-wrapper .slds-card__header, .slds-card-wrapper .slds-card__body, .slds-card-wrapper .slds-card__footer { padding-left: 0; padding-right: 0; } .slds-card .slds-card, .slds-card .slds-card-wrapper, .slds-card-wrapper .slds-card, .slds-card-wrapper .slds-card-wrapper, .slds-modal .slds-card, .slds-modal .slds-card-wrapper, .slds-tabs_default .slds-card, .slds-tabs_default .slds-card-wrapper, .slds-tabs_card .slds-card, .slds-tabs_card .slds-card-wrapper, .slds-tabs_card.slds-tabs_card .slds-card, .slds-tabs_card.slds-tabs_card .slds-card-wrapper { background: white; border: 0; -webkit-box-shadow: none; box-shadow: none; } .slds-card, .slds-modal, .slds-tabs_default { } .slds-card .slds-card_boundary, .slds-modal .slds-card_boundary, .slds-tabs_default .slds-card_boundary { border: 1px solid #dddbda; border-radius: 0.25rem; } .slds-tabs_card, .slds-tabs_card.slds-tabs_card { background: white; padding: 0.75rem 1rem; -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); border: 1px solid #dddbda; border-radius: 0.25rem; } .slds-tabs_card .slds-card, .slds-tabs_card .slds-card-wrapper, .slds-tabs_card.slds-tabs_card .slds-card, .slds-tabs_card.slds-tabs_card .slds-card-wrapper { padding-left: 0; padding-right: 0; } .slds-tabs_card .slds-card__header, .slds-tabs_card .slds-card__body, .slds-tabs_card .slds-card__footer, .slds-tabs_card.slds-tabs_card .slds-card__header, .slds-tabs_card.slds-tabs_card .slds-card__body, .slds-tabs_card.slds-tabs_card .slds-card__footer { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .slds-tabs_card .slds-card__header, .slds-tabs_card.slds-tabs_card .slds-card__header { padding-top: 0; } .slds-tabs_card .slds-card_boundary, .slds-tabs_card.slds-tabs_card .slds-card_boundary, .slds-card-wrapper .slds-card_boundary { border: 1px solid #dddbda; border-radius: 0.25rem; } .slds-tabs_card .slds-card_boundary .slds-card__header, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__header, .slds-card-wrapper .slds-card_boundary .slds-card__header { padding: 0.75rem 1rem 0; } .slds-tabs_card .slds-card_boundary .slds-card__body_inner, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__body_inner, .slds-card-wrapper .slds-card_boundary .slds-card__body_inner { padding: 0 1rem; } .slds-tabs_card .slds-card_boundary .slds-card__footer, .slds-tabs_card.slds-tabs_card .slds-card_boundary .slds-card__footer, .slds-card-wrapper .slds-card_boundary .slds-card__footer { padding: 0.75rem 1rem; } .slds-carousel { position: relative; } .slds-carousel__stage { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; } .slds-carousel__panels { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-transition: -webkit-transform 250ms ease-in; transition: -webkit-transform 250ms ease-in; transition: transform 250ms ease-in; transition: transform 250ms ease-in, -webkit-transform 250ms ease-in; min-height: 0%; } .slds-carousel__panel { -webkit-box-flex: 0; -ms-flex: 0 0 100%; flex: 0 0 100%; max-width: 100%; } .slds-carousel__panel-action { display: block; border: 1px solid #dddbda; border-radius: 0.25rem; } .slds-carousel__panel-action:focus { outline: 0; -webkit-box-shadow: 0 0 3px #0070d2; box-shadow: 0 0 3px #0070d2; border-color: #005fb2; outline: 0; } .slds-carousel__image { border-top-left-radius: 0.25rem; border-top-right-radius: 0.25rem; overflow: hidden; } .slds-carousel__image > img { width: 100%; } .slds-carousel__content { background: white; padding: 0.75rem; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem; text-align: center; height: 6.625rem; overflow-x: hidden; overflow-y: auto; } .slds-carousel__content-title { font-size: 1rem; font-weight: 600; } .slds-carousel__indicators { -ms-flex-item-align: center; align-self: center; margin: 0.5rem 0; } .slds-carousel__indicator { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; margin: 0 0.25rem; } .slds-carousel__indicator-action { width: 1rem; height: 1rem; background: white; border: 1px solid #dddbda; border-radius: 50%; } .slds-carousel__indicator-action.slds-is-active, .slds-carousel__indicator-action.slds-is-active:hover { background: #0070d2; border-color: #0070d2; } .slds-carousel__indicator-action:hover { background-color: #fafaf9; } .slds-carousel__indicator-action:focus { outline: 0; -webkit-box-shadow: 0 0 3px #0070d2; box-shadow: 0 0 3px #0070d2; background-color: #005fb2; border-color: #005fb2; outline: 0; } .slds-carousel__autoplay { position: absolute; left: 0; bottom: 0.25rem; } .slds-checkbox { display: inline-block; position: relative; } .slds-checkbox .slds-checkbox_faux { width: 1rem; height: 1rem; display: inline-block; position: relative; vertical-align: middle; border: 1px solid #dddbda; border-radius: 0.125rem; background: white; -webkit-transition: border 0.1s linear, background-color 0.1s linear; transition: border 0.1s linear, background-color 0.1s linear; } .slds-checkbox .slds-checkbox__label .slds-form-element__label { display: inline; vertical-align: middle; font-size: 0.8125rem; } .slds-checkbox [type="checkbox"] { width: 1px; height: 1px; border: 0; clip: rect(0 0 0 0); margin: -1px; overflow: hidden; padding: 0; position: absolute; pointer-events: auto; } .slds-checkbox [type="checkbox"]:checked + .slds-checkbox_faux:after, .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox_faux:after, .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux:after { display: block; content: ""; height: 0.25rem; width: 0.5rem; position: absolute; top: 50%; /*! @noflip */ left: 50%; -webkit-transform: translate3d(-50%, -50%, 0) rotate(-45deg); transform: translate3d(-50%, -50%, 0) rotate(-45deg); border-bottom: 2px solid #0070d2; /*! @noflip */ border-left: 2px solid #0070d2; } .slds-checkbox [type="checkbox"]:focus + .slds-checkbox_faux, .slds-checkbox [type="checkbox"]:focus ~ .slds-checkbox_faux, .slds-checkbox [type="checkbox"]:focus + .slds-checkbox__label .slds-checkbox_faux { content: ""; border-color: #1589ee; -webkit-box-shadow: 0 0 3px #0070d2; box-shadow: 0 0 3px #0070d2; } .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__label .slds-checkbox_faux { border-color: #1589ee; background-color: white; } .slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox_faux:after, .slds-checkbox [type="checkbox"]:indeterminate ~ .slds-checkbox_faux:after, .slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox__label .slds-checkbox_faux:after { content: ""; display: block; position: absolute; top: 50%; /*! @noflip */ left: 50%; width: 0.5rem; height: 2px; background: #0070d2; border: 0; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); } .slds-checkbox [type="checkbox"][disabled] + .slds-checkbox_faux, .slds-checkbox [type="checkbox"][disabled] ~ .slds-checkbox_faux, .slds-checkbox [type="checkbox"][disabled] + .slds-checkbox__label .slds-checkbox_faux { background-color: #ecebea; border-color: #c9c7c5; } .slds-checkbox [type="checkbox"][disabled] + .slds-checkbox_faux:after, .slds-checkbox [type="checkbox"][disabled] ~ .slds-checkbox_faux:after, .slds-checkbox [type="checkbox"][disabled] + .slds-checkbox__label .slds-checkbox_faux:after { border-color: #969492; } .slds-checkbox.slds-checkbox_stacked .slds-checkbox__label { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .slds-checkbox.slds-checkbox_stacked .slds-form-element__label { font-size: 0.75rem; } .slds-checkbox.slds-checkbox_stacked .slds-checkbox_faux { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; margin-bottom: 1px; } .slds-checkbox.slds-checkbox_stacked .slds-required { float: left; } .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__label .slds-checkbox_faux { border-color: #c23934; border-width: 2px; } .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__label .slds-checkbox_faux { border-color: #c23934; background-color: white; } .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__label .slds-checkbox_faux:after { border-color: #d4504c; } .slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox_faux, .slds-form-element .slds-checkbox [type="checkbox"] ~ .slds-checkbox_faux, .slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux { margin-right: 0.5rem; } .slds-checkbox_standalone { pointer-events: none; } .slds-checkbox_standalone [type="checkbox"] { width: 1rem; height: 1rem; margin: 0; clip: auto; opacity: 0; } .slds-checkbox_standalone .slds-checkbox_faux { display: block; } .slds-combobox_container { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: relative; } .slds-combobox_container.slds-is-open .slds-dropdown { display: block; } .slds-combobox_container.slds-has-selection .slds-combobox__input-value, .slds-combobox_container.slds-has-selection .slds-combobox__input-value:focus { -webkit-box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #dddbda inset; box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #dddbda inset; } .slds-combobox_container.slds-has-icon-only .slds-combobox__input, .slds-combobox_container.slds-has-icon-only .slds-combobox__input:focus, .slds-combobox_container.slds-has-icon-only .slds-combobox__input.slds-has-focus { width: 0; pointer-events: auto; } .slds-combobox_container.slds-has-icon-only .slds-input__icon { z-index: 2; pointer-events: none; } .slds-combobox { position: static; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } .slds-combobox__form-element { -webkit-box-flex: 1; -ms-flex: 1 1 auto; flex: 1 1 auto; } [role="combobox"] input[readonly] { padding-left: 0.75rem; border-color: #dddbda; background-color: white; font-size: inherit; font-weight: 400; } [role="combobox"] input[readonly]:focus, [role="combobox"] input[readonly].slds-has-focus { border-color: #1589ee; -webkit-box-shadow: 0 0 3px #0070d2; box-shadow: 0 0 3px #0070d2; } [role="combobox"] input[readonly][disabled] { background-color: #ecebea; border-color: #c9c7c5; } .slds-listbox_inline { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-left: 0.125rem; margin-right: 0.125rem; } .slds-listbox_inline li { display: -webkit-box; display: -ms-flexbox; display: flex; } .slds-listbox_inline li + li { padding-left: 0.125rem; } .slds-listbox_horizontal { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .slds-listbox_horizontal li { display: -webkit-box; display: -ms-flexbox; display: flex; } .slds-listbox_horizontal li + li { padding-left: 0.125rem; } .slds-listbox__option:hover { cursor: pointer; } .slds-listbox__option:focus { outline: 0; } .slds-listbox__option .slds-truncate { display: inline-block; vertical-align: middle; } .slds-listbox__option[aria-disabled="true"] { color: #dddbda; } .slds-listbox__option-header { font-size: 0.875rem; font-weight: 700; } .slds-listbox__option-icon { width: 1.5rem; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-line-pack: center; align-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; color: #706e6b; } .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon { color: currentColor; } .slds-listbox_vertical { } .slds-listbox_vertical .slds-listbox__option:focus, .slds-listbox_vertical .slds-listbox__option:hover, .slds-listbox_vertical .slds-listbox__option.slds-has-focus { background-color: #f3f2f2; text-decoration: none; } .slds-listbox_vertical .slds-listbox__option[aria-disabled="true"], .slds-listbox_vertical .slds-listbox__option[role="presentation"]:hover { background-color: transparent; cursor: default; } .slds-listbox_vertical .slds-listbox__option_entity { padding: 0.25rem 0.75rem; } .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure { margin-right: 0.5rem; } .slds-listbox_vert