Created
November 30, 2021 17:41
-
-
Save brsanthu/9dfbdd09b1f039e367d6062d74317ec9 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en-US"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Error Page</title> | |
| <style> | |
| /*! Lightning Design System 2.10.2 */ | |
| @charset "UTF-8"; | |
| /* stylelint-disable declaration-no-important */ | |
| @font-face { | |
| font-family: 'Salesforce Sans'; | |
| src: url("https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-Light.woff2") format("woff2"), url("https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-Light.woff") format("woff"); | |
| font-weight: 300; | |
| font-display: swap; } | |
| @font-face { | |
| font-family: 'Salesforce Sans'; | |
| src: url("https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-LightItalic.woff2") format("woff2"), url("https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-LightItalic.woff") format("woff"); | |
| font-style: italic; | |
| font-weight: 300; | |
| font-display: swap; } | |
| @font-face { | |
| font-family: 'Salesforce Sans'; | |
| src: url("https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-Regular.woff2") format("woff2"), url("https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-Regular.woff") format("woff"); | |
| font-weight: 400; | |
| font-display: swap; } | |
| @font-face { | |
| font-family: 'Salesforce Sans'; | |
| src: url("https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-Italic.woff2") format("woff2"), url("https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-Italic.woff") format("woff"); | |
| font-style: italic; | |
| font-weight: 400; | |
| font-display: swap; } | |
| @font-face { | |
| font-family: 'Salesforce Sans'; | |
| src: url("https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-Bold.woff2") format("woff2"), url("https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-Bold.woff") format("woff"); | |
| font-weight: 700; | |
| font-display: swap; } | |
| @font-face { | |
| font-family: 'Salesforce Sans'; | |
| src: url("https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-BoldItalic.woff2") format("woff2"), url("https://c1.sfdcstatic.com/etc/clientlibs/sfdc-aem-master/clientlibs_base/fonts/SalesforceSans-BoldItalic.woff") format("woff"); | |
| font-style: italic; | |
| font-weight: 700; | |
| font-display: swap; } | |
| /*! normalize.css v3.0.2 | MIT License | git.io/normalize */ | |
| html { | |
| font-family: sans-serif; | |
| -ms-text-size-adjust: 100%; | |
| -webkit-text-size-adjust: 100%; } | |
| body { | |
| margin: 0; } | |
| 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; } | |
| svg:not(:root) { | |
| overflow: hidden; } | |
| figure { | |
| margin: 1em 40px; } | |
| hr { | |
| -moz-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, | |
| html input[type="button"], | |
| input[type="reset"], | |
| input[type="submit"] { | |
| -webkit-appearance: button; | |
| cursor: pointer; } | |
| button[disabled], | |
| html 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"] { | |
| 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 { | |
| box-sizing: border-box; } | |
| :-ms-input-placeholder { | |
| color: #3e3e3c; | |
| font-weight: 400; } | |
| ::placeholder { | |
| color: #3e3e3c; | |
| font-weight: 400; } | |
| ::-moz-selection { | |
| background: #d8edff; | |
| text-shadow: none; | |
| color: #080707; } | |
| ::selection { | |
| background: #d8edff; | |
| text-shadow: none; | |
| color: #080707; } | |
| html { | |
| font-family: "Salesforce Sans", Arial, sans-serif; | |
| font-size: 100%; | |
| line-height: 1.5; | |
| background: #b0c4df; | |
| color: #080707; | |
| -webkit-tap-highlight-color: transparent; } | |
| body { | |
| font-size: 0.812rem; | |
| background: transparent; } | |
| @media (pointer: coarse) and (hover: none) { | |
| body { | |
| font-size: 1rem; } } | |
| 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; | |
| 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"] { | |
| 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-modal_form .slds-modal__header, | |
| .slds-modal_form .slds-modal__content:last-child, | |
| .slds-modal--form .slds-modal__header, | |
| .slds-modal--form .slds-modal__content:last-child { | |
| border-radius: 0; | |
| box-shadow: none; } | |
| .slds-modal_form .slds-modal__container, | |
| .slds-modal--form .slds-modal__container { | |
| margin: 0; | |
| padding: 0; } | |
| .slds-modal_form .slds-modal__header .slds-text-heading_medium, | |
| .slds-modal_form .slds-modal__header .slds-text-heading--medium, | |
| .slds-modal--form .slds-modal__header .slds-text-heading_medium, | |
| .slds-modal--form .slds-modal__header .slds-text-heading--medium { | |
| line-height: 1.5; } | |
| .slds-modal_form .slds-modal__header .slds-button, | |
| .slds-modal--form .slds-modal__header .slds-button { | |
| display: inline-block; | |
| width: auto; } | |
| .slds-modal_form .slds-modal__header .slds-button:first-child, | |
| .slds-modal--form .slds-modal__header .slds-button:first-child { | |
| float: left; | |
| margin-right: 0.5rem; } | |
| .slds-modal_form .slds-modal__header .slds-button:first-child + .slds-button, | |
| .slds-modal--form .slds-modal__header .slds-button:first-child + .slds-button { | |
| float: right; | |
| margin-top: 0; | |
| margin-left: 0.5rem; } | |
| .slds-action-overflow_touch, | |
| .slds-action-overflow--touch { | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 9001; } | |
| .slds-action-overflow_touch__container, | |
| .slds-action-overflow--touch__container { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -ms-flex-pack: end; | |
| justify-content: flex-end; | |
| height: 100%; } | |
| .slds-action-overflow_touch__content, | |
| .slds-action-overflow--touch__content { | |
| padding-top: 33.333%; | |
| overflow: hidden; | |
| overflow-y: auto; } | |
| .slds-action-overflow_touch__body, | |
| .slds-action-overflow--touch__body { | |
| position: relative; | |
| top: 2rem; | |
| background: white; | |
| box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.07); } | |
| .slds-action-overflow_touch__footer, | |
| .slds-action-overflow--touch__footer { | |
| position: relative; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| border-top: 1px solid #dddbda; | |
| padding: 0.75rem 1rem; | |
| background-color: #f3f2f2; | |
| box-shadow: 0 -2px 4px #F9F9FA; } | |
| /** | |
| * @summary Create each activity timeline item in a list | |
| * | |
| * @selector .slds-timeline__media | |
| * @restrict .slds-media | |
| * @deprecated | |
| */ | |
| .slds-timeline__media, | |
| .slds-media_timeline, | |
| .slds-media--timeline { | |
| padding-bottom: 1.5rem; | |
| position: relative; } | |
| .slds-timeline__media:before, | |
| .slds-media_timeline:before, | |
| .slds-media--timeline:before { | |
| content: ''; | |
| background: #dddbda; | |
| height: 100%; | |
| width: 2px; | |
| position: absolute; | |
| left: 0.75rem; | |
| top: 2px; | |
| bottom: 0; | |
| margin-left: 1px; | |
| z-index: -1; } | |
| /** | |
| * @selector .slds-timeline__title | |
| * @restrict .slds-timeline__media h3 | |
| * @deprecated | |
| */ | |
| .slds-timeline__title { | |
| position: relative; } | |
| .slds-timeline__title-content { | |
| position: relative; | |
| top: -1px; | |
| padding-right: 1rem; | |
| background: white; | |
| z-index: 2; } | |
| .slds-timeline__title:after { | |
| position: absolute; | |
| right: 0; | |
| bottom: 0.5rem; | |
| left: 0; | |
| border-bottom: 1px dashed #dddbda; | |
| content: ' '; | |
| z-index: 1; } | |
| /** | |
| * @name call | |
| * @selector .slds-timeline__media_call | |
| * @restrict .slds-timeline__media | |
| * @deprecated | |
| */ | |
| .slds-timeline__media_call:before, | |
| .slds-timeline__media--call:before { | |
| background: #48c3cc; } | |
| /** | |
| * @name email | |
| * @selector .slds-timeline__media_email | |
| * @restrict .slds-timeline__media | |
| * @deprecated | |
| */ | |
| .slds-timeline__media_email:before, | |
| .slds-timeline__media--email:before { | |
| background: #95aec5; } | |
| /** | |
| * @name event | |
| * @selector .slds-timeline__media_event | |
| * @restrict .slds-timeline__media | |
| * @deprecated | |
| */ | |
| .slds-timeline__media_event:before, | |
| .slds-timeline__media--event:before { | |
| background: #eb7092; } | |
| /** | |
| * @name task | |
| * @selector .slds-timeline__media_task | |
| * @restrict .slds-timeline__media | |
| * @deprecated | |
| */ | |
| .slds-timeline__media_task:before, | |
| .slds-timeline__media--task:before { | |
| background: #4bc076; } | |
| /** | |
| * @summary Create each expandable activity timeline item in a list | |
| * | |
| * @name base | |
| * @selector .slds-timeline__item_expandable | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-timeline__item_expandable { | |
| position: relative; | |
| padding-bottom: 1rem; | |
| /** | |
| * @summary Changes the layout of actions to become inlined with the title of a timeline item. | |
| * @selector .slds-timeline__actions_inline | |
| * @restrict .slds-timeline__actions | |
| */ | |
| /** | |
| * @summary Class to show and hide details | |
| * @selector .slds-timeline__item_details | |
| * @restrict .slds-timeline__item_expandable article | |
| */ | |
| /** | |
| * @name expand | |
| * @summary Toggles the visibility of the timeline item | |
| * @selector .slds-is-open | |
| * @restrict .slds-timeline__item_expandable | |
| * @modifier | |
| * @group visibility | |
| */ } | |
| .slds-timeline__item_expandable:before { | |
| content: ''; | |
| background: #dddbda; | |
| height: 100%; | |
| width: 2px; | |
| position: absolute; | |
| left: 2.25rem; | |
| top: 0; | |
| bottom: 0; | |
| margin-left: 1px; } | |
| .slds-timeline__item_expandable .slds-media__figure { | |
| margin-right: 0.25rem; | |
| z-index: 1; } | |
| .slds-timeline__item_expandable .slds-media__figure .slds-button_icon { | |
| margin-right: 0.5rem; } | |
| .slds-timeline__item_expandable .slds-media__body { | |
| padding: 0 0.25rem; } | |
| .slds-timeline__item_expandable .slds-checkbox { | |
| margin-right: 0.25rem; } | |
| .slds-timeline__item_expandable .slds-timeline__actions_inline { | |
| -ms-flex-flow: row nowrap; | |
| flex-flow: row nowrap; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| margin-left: 0.5rem; } | |
| .slds-timeline__item_expandable .slds-timeline__actions_inline .slds-timeline__date { | |
| padding-right: 0.5rem; | |
| margin-bottom: 0; } | |
| .slds-timeline__item_expandable .slds-timeline__item_details { | |
| visibility: hidden; | |
| opacity: 0; | |
| height: 0; | |
| padding: 0; } | |
| .slds-timeline__item_expandable.slds-is-open .slds-timeline__item_details { | |
| visibility: visible; | |
| opacity: 1; | |
| height: auto; | |
| padding: 1rem; } | |
| .slds-timeline__item_expandable.slds-is-open .slds-timeline__details-action-icon { | |
| transform: rotate(0); | |
| transform-origin: 45%; } | |
| /** | |
| * @summary Applies line connector for a call timeline item | |
| * @selector .slds-timeline__item_call | |
| * @restrict .slds-timeline__item_expandable | |
| */ | |
| .slds-timeline__item_call:before { | |
| background: #48c3cc; } | |
| /** | |
| * @summary Applies line connector for an email timeline item | |
| * @selector .slds-timeline__item_email | |
| * @restrict .slds-timeline__item_expandable | |
| */ | |
| .slds-timeline__item_email:before { | |
| background: #95aec5; } | |
| /** | |
| * @summary Applies line connector for an event timeline item | |
| * @selector .slds-timeline__item_event | |
| * @restrict .slds-timeline__item_expandable | |
| */ | |
| .slds-timeline__item_event:before { | |
| background: #eb7092; } | |
| /** | |
| * @summary Applies line connector for a task timeline item | |
| * @selector .slds-timeline__item_task | |
| * @restrict .slds-timeline__item_expandable | |
| */ | |
| .slds-timeline__item_task:before { | |
| background: #4bc076; } | |
| /* | |
| * @summary Provides hover feedback on each timeline item | |
| * @selector .slds-timeline__trigger | |
| * @restrict .slds-timeline__media_expandable div | |
| */ | |
| .slds-timeline__trigger { | |
| padding: 0.25rem; } | |
| .slds-timeline__trigger:hover { | |
| background-color: #f4f6f9; } | |
| /** | |
| * @summary Icon associated with timeline item | |
| * @selector .slds-timeline__icon | |
| * @restrict .slds-timeline__item_expandable .slds-icon_container | |
| */ | |
| .slds-timeline__icon { | |
| border: 2px solid #fff; } | |
| /** | |
| * @summary Container for date and action overflow on the right of a timeline item | |
| * @selector .slds-timeline__actions | |
| * @restrict .slds-timeline__trigger div | |
| */ | |
| .slds-timeline__actions { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-flow: column nowrap; | |
| flex-flow: column nowrap; | |
| -ms-flex-align: end; | |
| align-items: flex-end; } | |
| /** | |
| * @summary Styles the date inside `.slds-timeline__actions` | |
| * @selector .slds-timeline__date | |
| * @restrict .slds-timeline__actions p | |
| */ | |
| .slds-timeline__date { | |
| margin-bottom: 0.25rem; | |
| font-size: 0.75rem; | |
| color: #3e3e3c; } | |
| /** | |
| * @summary Icon inside of actionable button within an expandable timeline item | |
| * @selector .slds-timeline__details-action-icon | |
| * @restrict .slds-timeline__item_expandable svg | |
| */ | |
| .slds-timeline__details-action-icon { | |
| transform: rotate(-90deg); } | |
| /** | |
| * @summary Create badge component | |
| * | |
| * @name base | |
| * @selector .slds-badge | |
| * @restrict span | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .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; } | |
| .slds-badge + .slds-badge { | |
| margin-left: 0.5rem; } | |
| .slds-badge:empty { | |
| padding: 0; } | |
| /** | |
| * @summary Change badge color to a dark with light text | |
| * @name inverse | |
| * @selector .slds-badge_inverse | |
| * @restrict .slds-badge | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-badge_inverse { | |
| background-color: #706e6b; | |
| color: white; } | |
| /** | |
| * @summary Change badge color to white with normal text | |
| * @name lightest | |
| * @selector .slds-badge_lightest | |
| * @restrict .slds-badge | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-badge_lightest { | |
| border: 1px solid #dddbda; | |
| background-color: white; | |
| font-size: 0.75rem; | |
| text-transform: none; | |
| letter-spacing: normal; } | |
| /** | |
| * @summary Adds an icon to badge | |
| * @name icon-container | |
| * @selector .slds-badge__icon | |
| * @restrict .slds-badge span | |
| * @modifier | |
| */ | |
| .slds-badge__icon { | |
| color: #706e6b; | |
| vertical-align: middle; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| line-height: 1; | |
| /** | |
| * @summary Change badge icon fill color to inverse | |
| * @name icon-inverse | |
| * @selector .slds-badge__icon_inverse | |
| * @restrict .slds-badge__icon | |
| * @modifier | |
| * @group color | |
| */ } | |
| .slds-badge__icon.slds-badge__icon_inverse { | |
| color: currentColor; } | |
| /** | |
| * @summary Adds an icon to the left of the badge text | |
| * @name icon-left | |
| * @selector .slds-badge__icon_left | |
| * @restrict .slds-badge__icon | |
| * @modifier | |
| * @group spacing | |
| */ | |
| .slds-badge__icon_left { | |
| margin-right: 0.25rem; } | |
| /** | |
| * @summary Adds an icon to the right of the badge text | |
| * @name icon-right | |
| * @selector .slds-badge__icon_right | |
| * @restrict .slds-badge__icon | |
| * @modifier | |
| * @group spacing | |
| */ | |
| .slds-badge__icon_right { | |
| margin-left: 0.25rem; } | |
| /** | |
| * @summary Create breadcrumbs component | |
| * @name base | |
| * @selector .slds-breadcrumb | |
| * @restrict ol | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-breadcrumb { | |
| /** | |
| * @summary Item of the breadcrumb list | |
| * @selector .slds-breadcrumb__item | |
| * @restrict .slds-breadcrumb li | |
| */ } | |
| .slds-breadcrumb .slds-list__item, .slds-breadcrumb__item { | |
| position: relative; } | |
| .slds-breadcrumb .slds-list__item:before, .slds-breadcrumb__item:before { | |
| content: '\003E'; | |
| 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; } | |
| /** | |
| * @summary Creates button group container that provides spacing between each button | |
| * | |
| * @name row | |
| * @selector .slds-button-group-row | |
| * @restrict div, ul | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-button-group-row { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| /** | |
| * @summary Each item inside of a button group row that needs spacing applied to it | |
| * @selector .slds-button-group-item | |
| * @restrict .slds-button-group-row li, .slds-button-group-row div | |
| */ } | |
| .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; } | |
| /** | |
| * @summary Creates button group container | |
| * | |
| * @name base | |
| * @selector .slds-button-group | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-button-group, | |
| .slds-button-group-list { | |
| 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 .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 .slds-button_brand + .slds-button--last .slds-button_icon-brand, | |
| .slds-button-group-list li:last-child .slds-button_icon-brand { | |
| 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; } | |
| /** | |
| * @summary If the last button in the group is required to be wrapped in a div, apply this class to the div | |
| * @selector .slds-button_last | |
| * @restrict .slds-button-group div, .slds-button-group-list div | |
| */ | |
| .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--last .slds-button, | |
| .slds-button-group .slds-button.slds-button_last, | |
| .slds-button-group .slds-button.slds-button--last, | |
| .slds-button-group .slds-button_last .slds-button:only-child, | |
| .slds-button-group .slds-button--last .slds-button:only-child, | |
| .slds-button-group .slds-button.slds-button_last, | |
| .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; } | |
| /** | |
| * @summary Explicitly style the first button in a button group | |
| * @selector .slds-button_first | |
| * @restrict .slds-button | |
| */ | |
| .slds-button.slds-button_first.slds-button_first { | |
| border-right: 0; | |
| border-radius: 0.25rem 0 0 0.25rem; } | |
| /** | |
| * @summary Explicitly style buttons in the middle (i.e., not first or last) in a button group | |
| * @selector .slds-button_middle | |
| * @restrict .slds-button | |
| */ | |
| .slds-button.slds-button_middle.slds-button_middle { | |
| border-radius: 0; | |
| margin-left: -1px; } | |
| /** | |
| * @summary Explicitly style the last button in a button group | |
| * @selector .slds-button_last | |
| * @restrict .slds-button | |
| */ | |
| .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; } | |
| /** | |
| * @selector .slds-button-space-left | |
| * @deprecated | |
| */ | |
| .slds-button-space-left { | |
| margin-left: 0.25rem; } | |
| /** | |
| * @summary Creates a smaller button style | |
| * @selector .slds-button_small | |
| * @deprecated | |
| */ | |
| .slds-button_small, | |
| .slds-button--small { | |
| line-height: 1.75rem; | |
| min-height: 2rem; } | |
| /** | |
| * @summary This neutralizes all the base styles making it look like a text link | |
| * @name base | |
| * @selector .slds-button | |
| * @restrict button, a, span | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-button { | |
| position: relative; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -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-is-mobile .slds-button { | |
| line-height: 2.65rem; | |
| font-weight: 700; } | |
| .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; | |
| 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; | |
| box-shadow: 0 0 3px #0070D2; } | |
| a.slds-button_inverse:focus, | |
| a.slds-button--inverse:focus { | |
| outline: none; | |
| box-shadow: 0 0 3px #ecebea; | |
| border: 1px solid #ecebea; } | |
| /** | |
| * @name reset | |
| * @summary Resets attributes of .slds-button back to the browser default | |
| * @selector .slds-button_reset | |
| * @restrict button, a, span | |
| * @modifier | |
| * @group theme | |
| */ | |
| .slds-button_reset, | |
| .slds-button--reset { | |
| font-size: inherit; | |
| color: inherit; | |
| line-height: inherit; | |
| padding: 0; | |
| background: transparent; | |
| border: 0; | |
| text-align: inherit; } | |
| /** | |
| * @name neutral | |
| * @summary Creates the gray border with white background default style | |
| * @selector .slds-button_neutral | |
| * @restrict .slds-button | |
| * @modifier | |
| * @group theme | |
| */ | |
| .slds-button_neutral, | |
| .slds-button--neutral { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| text-align: center; | |
| vertical-align: middle; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| border: 1px solid #dddbda; | |
| transition: border 0.15s linear; | |
| border-color: #dddbda; | |
| background-color: white; } | |
| .slds-button_neutral:hover, .slds-button_neutral:focus, | |
| .slds-button--neutral:hover, | |
| .slds-button--neutral:focus { | |
| background-color: #f4f6f9; } | |
| .slds-button_neutral:active, | |
| .slds-button--neutral:active { | |
| background-color: #eef1f6; } | |
| .slds-button_neutral[disabled], .slds-button_neutral:disabled, | |
| .slds-button--neutral[disabled], | |
| .slds-button--neutral:disabled { | |
| background-color: white; | |
| cursor: default; } | |
| /** | |
| * @name brand | |
| * @summary Creates the brand blue Salesforce style | |
| * @selector .slds-button_brand | |
| * @restrict .slds-button | |
| * @modifier | |
| * @group theme | |
| */ | |
| .slds-button_brand, | |
| .slds-button--brand { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| text-align: center; | |
| vertical-align: middle; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| border: 1px solid #dddbda; | |
| 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, | |
| .slds-button--brand:link, | |
| .slds-button--brand:visited, | |
| .slds-button--brand:active { | |
| color: white; } | |
| .slds-button_brand:hover, .slds-button_brand:focus, | |
| .slds-button--brand:hover, | |
| .slds-button--brand:focus { | |
| background-color: #005fb2; | |
| border-color: #005fb2; | |
| color: white; } | |
| .slds-button_brand:active, | |
| .slds-button--brand:active { | |
| background-color: #005fb2; | |
| border-color: #005fb2; } | |
| .slds-button_brand[disabled], .slds-button_brand:disabled, | |
| .slds-button--brand[disabled], | |
| .slds-button--brand:disabled { | |
| background: #c9c7c5; | |
| border-color: #c9c7c5; | |
| color: white; } | |
| /** | |
| * @name outline-brand | |
| * @summary Creates the outlined button with the brand color | |
| * @selector .slds-button_outline-brand | |
| * @restrict .slds-button | |
| * @modifier | |
| * @group theme | |
| */ | |
| .slds-button_outline-brand { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| text-align: center; | |
| vertical-align: middle; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| border: 1px solid #dddbda; | |
| 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; } | |
| /** | |
| * @name inverse | |
| * @summary Creates the inverse style for dark backgrounds | |
| * @selector .slds-button_inverse | |
| * @restrict .slds-button | |
| * @modifier | |
| * @group theme | |
| */ | |
| .slds-button_inverse, | |
| .slds-button--inverse { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| text-align: center; | |
| vertical-align: middle; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| border: 1px solid #dddbda; | |
| transition: border 0.15s linear; | |
| background-color: transparent; | |
| border-color: #dddbda; } | |
| .slds-button_inverse:hover, .slds-button_inverse:focus, | |
| .slds-button--inverse:hover, | |
| .slds-button--inverse:focus { | |
| background-color: #f4f6f9; } | |
| .slds-button_inverse[disabled], .slds-button_inverse:disabled, | |
| .slds-button--inverse[disabled], | |
| .slds-button--inverse:disabled { | |
| background-color: transparent; | |
| border-color: rgba(255, 255, 255, 0.15); } | |
| .slds-button_inverse, .slds-button_inverse:link, .slds-button_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--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--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, | |
| .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--inverse:focus, | |
| .slds-button_icon-border-inverse:focus, | |
| .slds-button--icon-border-inverse:focus { | |
| outline: none; | |
| box-shadow: 0 0 3px #ecebea; | |
| border: 1px solid #ecebea; } | |
| .slds-button_inverse[disabled], .slds-button_inverse:disabled, | |
| .slds-button--inverse[disabled], | |
| .slds-button--inverse:disabled, | |
| .slds-button_icon-border-inverse[disabled], | |
| .slds-button_icon-border-inverse:disabled, | |
| .slds-button--icon-border-inverse[disabled], | |
| .slds-button--icon-border-inverse:disabled { | |
| color: rgba(255, 255, 255, 0.15); } | |
| /** | |
| * @name destructive | |
| * @summary Creates a red button style | |
| * @selector .slds-button_destructive | |
| * @restrict .slds-button | |
| * @group theme | |
| * @modifier | |
| */ | |
| .slds-button_destructive, | |
| .slds-button--destructive { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| text-align: center; | |
| vertical-align: middle; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| border: 1px solid #dddbda; | |
| 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, | |
| .slds-button--destructive:link, | |
| .slds-button--destructive:visited, | |
| .slds-button--destructive:active { | |
| color: white; } | |
| .slds-button_destructive:hover, .slds-button_destructive:focus, | |
| .slds-button--destructive:hover, | |
| .slds-button--destructive:focus { | |
| background-color: #a61a14; | |
| color: white; } | |
| .slds-button_destructive:active, | |
| .slds-button--destructive:active { | |
| background-color: #870500; | |
| border-color: #870500; } | |
| .slds-button_destructive[disabled], .slds-button_destructive:disabled, | |
| .slds-button--destructive[disabled], | |
| .slds-button--destructive:disabled { | |
| background: #c9c7c5; | |
| border-color: #c9c7c5; | |
| color: white; } | |
| /** | |
| * @name text-destructive | |
| * @summary Creates a neutral button with red text | |
| * @selector .slds-button_text-destructive | |
| * @restrict .slds-button | |
| * @modifier | |
| * @group theme | |
| */ | |
| .slds-button_text-destructive { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| text-align: center; | |
| vertical-align: middle; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| border: 1px solid #dddbda; | |
| 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; } | |
| /** | |
| * @name success | |
| * @summary Creates a green button style | |
| * @selector .slds-button_success | |
| * @restrict .slds-button | |
| * @group theme | |
| * @modifier | |
| */ | |
| .slds-button_success, | |
| .slds-button--success { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| text-align: center; | |
| vertical-align: middle; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| border: 1px solid #dddbda; | |
| 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, | |
| .slds-button--success:link, | |
| .slds-button--success:visited, | |
| .slds-button--success:active { | |
| color: #080707; } | |
| .slds-button_success:hover, .slds-button_success:focus, | |
| .slds-button--success:hover, | |
| .slds-button--success:focus { | |
| background-color: #04844b; | |
| border-color: #04844b; | |
| color: white; } | |
| .slds-button_success:active, | |
| .slds-button--success:active { | |
| background-color: #04844b; | |
| border-color: #04844b; } | |
| .slds-button_success[disabled], .slds-button_success:disabled, | |
| .slds-button--success[disabled], | |
| .slds-button--success:disabled { | |
| background: #c9c7c5; | |
| border-color: #c9c7c5; | |
| color: white; } | |
| /** | |
| * @name with-icon | |
| * @summary Sizing for icon that sits inside button__icon | |
| * @selector .slds-button__icon | |
| * @restrict .slds-button svg | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-button__icon { | |
| width: 0.875rem; | |
| height: 0.875rem; | |
| fill: currentColor; } | |
| .slds-is-mobile .slds-button__icon { | |
| width: 1rem; | |
| height: 1rem; } | |
| /** | |
| * @name large | |
| * @summary Large size button icon svg | |
| * @selector .slds-button__icon_large | |
| * @restrict .slds-button__icon | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-button__icon_large, | |
| .slds-button__icon--large { | |
| width: 1.5rem; | |
| height: 1.5rem; } | |
| /** | |
| * @name small | |
| * @summary Small size button icon svg | |
| * @selector .slds-button__icon_small | |
| * @restrict .slds-button__icon | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-button__icon_small, | |
| .slds-button__icon--small { | |
| width: 0.75rem; | |
| height: 0.75rem; } | |
| /** | |
| * @name x-small | |
| * @summary X-Small size button icon svg | |
| * @selector .slds-button__icon_x-small | |
| * @restrict .slds-button__icon | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-button__icon_x-small, | |
| .slds-button__icon--x-small { | |
| width: 0.5rem; | |
| height: 0.5rem; } | |
| /** | |
| * @summary Position of icon when sitting to the left side of the text when inside a button | |
| * @selector .slds-button__icon_left | |
| * @restrict .slds-button__icon, .slds-button__icon_stateful | |
| */ | |
| .slds-button__icon_left, | |
| .slds-button__icon--left { | |
| margin-right: 0.5rem; } | |
| /** | |
| * @summary Position of icon when sitting to the right side of the text when inside a button | |
| * @selector .slds-button__icon_right | |
| * @restrict .slds-button__icon, .slds-button__icon_stateful | |
| */ | |
| .slds-button__icon_right, | |
| .slds-button__icon--right { | |
| margin-left: 0.5rem; } | |
| /** | |
| * @summary Creates a button style for full width that resets styling | |
| * @selector .slds-button_full-width | |
| * @restrict .slds-button | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-button_full-width { | |
| font-size: inherit; | |
| color: inherit; | |
| line-height: inherit; | |
| padding: 0; | |
| background: transparent; | |
| border: 0; | |
| text-align: inherit; | |
| width: 100%; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; } | |
| .slds-button_full-width:focus { | |
| box-shadow: none; } | |
| /** | |
| * @summary Creates a button style for 100% width with centered text that maintains current styling | |
| * @selector .slds-button_stretch | |
| * @restrict .slds-button | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-button_stretch { | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| width: 100%; } | |
| /** | |
| * @summary Icon modifier for stateful buttons | |
| * @selector .slds-button__icon_stateful | |
| * @deprecated | |
| */ | |
| .slds-button__icon_stateful, | |
| .slds-button__icon--stateful { | |
| width: 0.75rem; | |
| height: 0.75rem; | |
| fill: currentColor; } | |
| /** | |
| * @summary Initiates a stateful button | |
| * @name stateful | |
| * @selector .slds-button_stateful | |
| * @restrict button | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-button_neutral.slds-is-selected, | |
| .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]), | |
| .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]), | |
| .slds-button--neutral.slds-is-selected:active:not([disabled]) { | |
| background-color: #eef1f6; } | |
| .slds-button_inverse.slds-is-selected, | |
| .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 { | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| /** | |
| * Default state of a stateful button | |
| * | |
| * @selector .slds-not-selected | |
| * @restrict .slds-button_stateful | |
| * @notes This class should be toggled with JavaScript | |
| * @modifier | |
| * @group interaction | |
| */ | |
| .slds-not-selected { | |
| /** | |
| * @summary Shown text when button is selected | |
| * @selector .slds-text-selected | |
| * @restrict .slds-button_stateful span | |
| */ | |
| /** | |
| * @summary Shown text when button is selected and focused | |
| * @selector .slds-text-selected-focus | |
| * @restrict .slds-button_stateful span | |
| */ | |
| /** | |
| * @summary Shown text when button is not selected - default state | |
| * @selector .slds-text-not-selected | |
| * @restrict .slds-button_stateful span | |
| */ } | |
| .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: -ms-inline-flexbox; | |
| display: inline-flex; } | |
| /** | |
| * @summary When button is selected and still has focus from click | |
| * @selector .slds-is-selected-clicked | |
| * @restrict .slds-button_stateful | |
| * @notes This class should be toggled with JavaScript | |
| * @modifier | |
| * @group interaction | |
| */ | |
| .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: -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; } | |
| /** | |
| * @summary When button is pressed and selected | |
| * @selector .slds-is-selected | |
| * @restrict .slds-button_stateful | |
| * @notes This class should be toggled with JavaScript | |
| * @modifier | |
| * @group interaction | |
| */ | |
| .slds-is-selected .slds-text-not-selected { | |
| display: none; } | |
| .slds-is-selected .slds-text-selected { | |
| 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: -ms-inline-flexbox; | |
| display: inline-flex; } | |
| /** | |
| * @summary Initiates a dual stateful button | |
| * @name dual-stateful | |
| * @selector .slds-button_dual-stateful | |
| * @restrict button | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-button_dual-stateful { | |
| /** | |
| * @summary Shown text when button is not pressed - default state | |
| * @selector .slds-text-not-pressed | |
| * @restrict .slds-button_dual-stateful span | |
| */ | |
| /** | |
| * @summary Shown text when button is pressed | |
| * @selector .slds-text-pressed | |
| * @restrict .slds-button_dual-stateful span | |
| */ } | |
| .slds-button_dual-stateful .slds-text-not-pressed { | |
| display: block; } | |
| .slds-button_dual-stateful .slds-text-pressed { | |
| display: none; } | |
| /** | |
| * @summary When button is in pressed state | |
| * @selector .slds-is-pressed | |
| * @restrict .slds-button_dual-stateful | |
| * @notes This class should be toggled with JavaScript | |
| * @modifier | |
| * @group interaction | |
| */ | |
| .slds-button_dual-stateful.slds-is-pressed { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| text-align: center; | |
| vertical-align: middle; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| border: 1px solid #dddbda; | |
| transition: border 0.15s linear; | |
| background-color: #0070d2; | |
| border-color: #0070d2; | |
| color: white; } | |
| .slds-button_dual-stateful.slds-is-pressed:link, .slds-button_dual-stateful.slds-is-pressed:visited, .slds-button_dual-stateful.slds-is-pressed:active { | |
| color: white; } | |
| .slds-button_dual-stateful.slds-is-pressed:hover, .slds-button_dual-stateful.slds-is-pressed:focus { | |
| background-color: #005fb2; | |
| border-color: #005fb2; | |
| color: white; } | |
| .slds-button_dual-stateful.slds-is-pressed:active { | |
| background-color: #005fb2; | |
| border-color: #005fb2; } | |
| .slds-button_dual-stateful.slds-is-pressed[disabled], .slds-button_dual-stateful.slds-is-pressed:disabled { | |
| background: #c9c7c5; | |
| border-color: #c9c7c5; | |
| color: white; } | |
| .slds-button_dual-stateful.slds-is-pressed .slds-text-not-pressed { | |
| display: none; } | |
| .slds-button_dual-stateful.slds-is-pressed .slds-text-pressed { | |
| display: block; } | |
| .slds-button_icon-bare, | |
| .slds-button--icon-bare { | |
| line-height: 1; | |
| vertical-align: middle; | |
| color: #706e6b; } | |
| /** | |
| * @summary Creates a button that looks like a plain icon | |
| * | |
| * @name base | |
| * @selector .slds-button_icon | |
| * @restrict button | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-button_icon, | |
| .slds-button--icon, | |
| .slds-button_icon-inverse, | |
| .slds-button--icon-inverse, | |
| .slds-button_icon-container, | |
| .slds-button--icon-container, | |
| .slds-button_icon-border, | |
| .slds-button--icon-border, | |
| .slds-button_icon-border-filled, | |
| .slds-button--icon-border-filled, | |
| .slds-button_icon-border-inverse, | |
| .slds-button--icon-border-inverse, | |
| .slds-button_icon-more, | |
| .slds-button--icon-more, | |
| .slds-button_icon-error, | |
| .slds-button--icon-error { | |
| line-height: 1; | |
| vertical-align: middle; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| color: #706e6b; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; } | |
| .slds-is-mobile .slds-button_icon, .slds-is-mobile | |
| .slds-button--icon, .slds-is-mobile | |
| .slds-button_icon-inverse, .slds-is-mobile | |
| .slds-button--icon-inverse, .slds-is-mobile | |
| .slds-button_icon-container, .slds-is-mobile | |
| .slds-button--icon-container, .slds-is-mobile | |
| .slds-button_icon-border, .slds-is-mobile | |
| .slds-button--icon-border, .slds-is-mobile | |
| .slds-button_icon-border-filled, .slds-is-mobile | |
| .slds-button--icon-border-filled, .slds-is-mobile | |
| .slds-button_icon-border-inverse, .slds-is-mobile | |
| .slds-button--icon-border-inverse, .slds-is-mobile | |
| .slds-button_icon-more, .slds-is-mobile | |
| .slds-button--icon-more, .slds-is-mobile | |
| .slds-button_icon-error, .slds-is-mobile | |
| .slds-button--icon-error { | |
| width: 2.75rem; | |
| height: 2.75rem; } | |
| /** | |
| * @summary Default width + height for button icon with containers | |
| * @selector .slds-button_icon-container | |
| * @restrict .slds-button_icon | |
| */ | |
| .slds-button_icon-container, | |
| .slds-button--icon-container, | |
| .slds-button_icon-border, | |
| .slds-button--icon-border, | |
| .slds-button_icon-border-filled, | |
| .slds-button--icon-border-filled, | |
| .slds-button_icon-border-inverse, | |
| .slds-button--icon-border-inverse, | |
| .slds-button_icon-brand, | |
| .slds-button_icon-more, | |
| .slds-button--icon-more, | |
| .slds-button_icon-container-more, | |
| .slds-button--icon-container-more { | |
| width: 2rem; | |
| height: 2rem; } | |
| .slds-is-mobile .slds-button_icon-container, .slds-is-mobile | |
| .slds-button--icon-container, .slds-is-mobile | |
| .slds-button_icon-border, .slds-is-mobile | |
| .slds-button--icon-border, .slds-is-mobile | |
| .slds-button_icon-border-filled, .slds-is-mobile | |
| .slds-button--icon-border-filled, .slds-is-mobile | |
| .slds-button_icon-border-inverse, .slds-is-mobile | |
| .slds-button--icon-border-inverse, .slds-is-mobile | |
| .slds-button_icon-brand, .slds-is-mobile | |
| .slds-button_icon-more, .slds-is-mobile | |
| .slds-button--icon-more, .slds-is-mobile | |
| .slds-button_icon-container-more, .slds-is-mobile | |
| .slds-button--icon-container-more { | |
| width: 2.75rem; | |
| height: 2.75rem; } | |
| /** | |
| * @summary Transparent themed button icon - Button icon has a border with a transparent background | |
| * @selector .slds-button_icon-border | |
| * @restrict .slds-button_icon | |
| */ | |
| .slds-button_icon-border-filled, | |
| .slds-button--icon-border-filled, | |
| .slds-button_icon-border, | |
| .slds-button--icon-border { | |
| line-height: 1; | |
| vertical-align: middle; | |
| color: #706e6b; | |
| border: 1px solid #dddbda; | |
| transition: border 0.15s linear; | |
| border-color: #dddbda; } | |
| .slds-button_icon-border-filled[disabled], .slds-button_icon-border-filled:disabled, | |
| .slds-button--icon-border-filled[disabled], | |
| .slds-button--icon-border-filled:disabled, | |
| .slds-button_icon-border[disabled], | |
| .slds-button_icon-border:disabled, | |
| .slds-button--icon-border[disabled], | |
| .slds-button--icon-border:disabled { | |
| color: #dddbda; } | |
| /** | |
| * @summary Button icon with border and transparent background, to be used on an inversed background | |
| * @selector .slds-button_icon-border-inverse | |
| * @restrict .slds-button_icon | |
| */ | |
| .slds-button_icon-border-inverse, | |
| .slds-button--icon-border-inverse { | |
| background-color: transparent; | |
| border-color: #dddbda; } | |
| .slds-button_icon-border-inverse[disabled], .slds-button_icon-border-inverse:disabled, | |
| .slds-button--icon-border-inverse[disabled], | |
| .slds-button--icon-border-inverse:disabled { | |
| background-color: transparent; | |
| border-color: rgba(255, 255, 255, 0.15); } | |
| /** | |
| * @summary Branded button icon - Button icon has a filled background with the brand color | |
| * @selector .slds-button_icon-brand | |
| * @restrict .slds-button_icon | |
| */ | |
| .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; } | |
| /** | |
| * @summary Neutral themed button icon - Button icon has a border with a filled background | |
| * @selector .slds-button_icon-border-filled | |
| * @restrict .slds-button_icon | |
| */ | |
| .slds-button_icon-border-filled, | |
| .slds-button--icon-border-filled { | |
| background-color: white; } | |
| .slds-button_icon-border-filled[disabled], .slds-button_icon-border-filled:disabled, | |
| .slds-button--icon-border-filled[disabled], | |
| .slds-button--icon-border-filled:disabled { | |
| border-color: #dddbda; | |
| background-color: white; } | |
| /** | |
| * @summary Bare button icon with no border or background, to be used on an inversed background | |
| * @selector .slds-button_icon-inverse | |
| * @restrict .slds-button_icon | |
| */ | |
| .slds-button_icon-inverse, | |
| .slds-button--icon-inverse, | |
| .slds-button_icon-border-inverse, | |
| .slds-button--icon-border-inverse { | |
| color: white; } | |
| .slds-button_icon-inverse:hover, .slds-button_icon-inverse:focus, | |
| .slds-button--icon-inverse:hover, | |
| .slds-button--icon-inverse:focus, | |
| .slds-button_icon-border-inverse:hover, | |
| .slds-button_icon-border-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-inverse:focus, | |
| .slds-button_icon-border-inverse:focus, | |
| .slds-button--icon-border-inverse:focus { | |
| outline: none; | |
| box-shadow: 0 0 3px #ecebea; | |
| border: 1px solid #ecebea; } | |
| .slds-button_icon-inverse:active, | |
| .slds-button--icon-inverse:active, | |
| .slds-button_icon-border-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-inverse[disabled], | |
| .slds-button--icon-inverse:disabled, | |
| .slds-button_icon-border-inverse[disabled], | |
| .slds-button_icon-border-inverse:disabled, | |
| .slds-button--icon-border-inverse[disabled], | |
| .slds-button--icon-border-inverse:disabled { | |
| color: rgba(255, 255, 255, 0.15); } | |
| /** | |
| * @summary Error state - Typically used in conjunction with an error toolip | |
| * @selector .slds-button_icon-error | |
| * @restrict .slds-button_icon | |
| */ | |
| .slds-button_icon-error, .slds-button_icon-error:hover, .slds-button_icon-error:active, .slds-button_icon-error:focus, | |
| .slds-button--icon-error, | |
| .slds-button--icon-error:hover, | |
| .slds-button--icon-error:active, | |
| .slds-button--icon-error:focus { | |
| color: #c23934; } | |
| /** | |
| * @summary Apply the current color to the icon contained within | |
| * @selector .slds-button_icon-current-color | |
| * @restrict .slds-button_icon | |
| */ | |
| .slds-button_icon-current-color { | |
| color: currentColor; } | |
| /** | |
| * @summary Changes a button icon container to be 24x24px | |
| * @name small | |
| * @selector .slds-button_icon-small | |
| * @restrict .slds-button_icon | |
| * @group size | |
| */ | |
| .slds-button_icon-small, | |
| .slds-button--icon-small { | |
| width: 1.5rem; | |
| height: 1.5rem; } | |
| .slds-is-mobile .slds-button_icon-small, .slds-is-mobile | |
| .slds-button--icon-small { | |
| width: 2.75rem; | |
| height: 2.75rem; } | |
| /** | |
| * @summary Changes a button icon container to be 20x20px | |
| * @name x-small | |
| * @selector .slds-button_icon-x-small | |
| * @restrict .slds-button_icon | |
| * @group size | |
| */ | |
| .slds-button_icon-x-small, | |
| .slds-button--icon-x-small { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| line-height: 1; } | |
| .slds-is-mobile .slds-button_icon-x-small, .slds-is-mobile | |
| .slds-button--icon-x-small { | |
| width: 2.75rem; | |
| height: 2.75rem; } | |
| .slds-button_icon-x-small .slds-button__icon, | |
| .slds-button--icon-x-small .slds-button__icon { | |
| width: 0.75rem; | |
| height: 0.75rem; } | |
| /** | |
| * @summary Changes a button icon container to be 16x16px | |
| * @name xx-small | |
| * @selector .slds-button_icon-xx-small | |
| * @restrict .slds-button_icon | |
| * @group size | |
| */ | |
| .slds-button_icon-xx-small, | |
| .slds-button--icon-xx-small { | |
| width: 1rem; | |
| height: 1rem; | |
| line-height: 1; } | |
| .slds-is-mobile .slds-button_icon-xx-small, .slds-is-mobile | |
| .slds-button--icon-xx-small { | |
| width: 2.75rem; | |
| height: 2.75rem; } | |
| .slds-button_icon-xx-small .slds-button__icon, | |
| .slds-button--icon-xx-small .slds-button__icon { | |
| width: 0.5rem; | |
| height: 0.5rem; } | |
| /** | |
| * @summary Creates a button menu icon container that has borders and a filled background | |
| * @selector .slds-button_icon-more | |
| * @restrict .slds-button_icon | |
| */ | |
| .slds-button_icon-more, | |
| .slds-button--icon-more { | |
| width: auto; | |
| line-height: 1.875rem; | |
| padding: 0 0.5rem; | |
| background-color: white; | |
| border-color: #dddbda; | |
| color: #706e6b; } | |
| .slds-is-mobile .slds-button_icon-more, .slds-is-mobile | |
| .slds-button--icon-more { | |
| width: 2.75rem; | |
| height: 2.75rem; } | |
| .slds-button_icon-more:hover .slds-button__icon, .slds-button_icon-more:focus .slds-button__icon, | |
| .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, | |
| .slds-button--icon-more:active .slds-button__icon { | |
| fill: #005fb2; } | |
| .slds-button_icon-more[disabled], .slds-button_icon-more:disabled, | |
| .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, | |
| .slds-button--icon-more[disabled] .slds-button__icon, | |
| .slds-button--icon-more:disabled .slds-button__icon { | |
| fill: #dddbda; } | |
| /** | |
| * @summary Creates a button menu icon container that has no borders | |
| * @selector .slds-button_icon-container-more | |
| * @restrict .slds-button_icon | |
| */ | |
| .slds-button_icon-container-more, | |
| .slds-button--icon-container-more { | |
| width: auto; | |
| line-height: 1.875rem; | |
| padding: 0 0.5rem; | |
| vertical-align: middle; } | |
| /** | |
| * @summary A parent class must be put on anything that contains a .slds-button__icon_hint so that the child reacts when the parent is hovered. | |
| * @selector .slds-button__icon_hint | |
| * @restrict .slds-button_icon .slds-button__icon | |
| */ | |
| .slds-button__icon_hint, | |
| .slds-button__icon--hint { | |
| fill: #b0adab; } | |
| /** | |
| * @summary A parent class must be put on anything that contains a .slds-button__icon_inverse-hint so that the child reacts when the parent is hovered. This is for a dark background. | |
| * @selector .slds-button__icon_inverse-hint | |
| * @restrict .slds-button_icon .slds-button__icon | |
| */ | |
| .slds-button__icon_inverse-hint, | |
| .slds-button__icon--inverse-hint { | |
| fill: rgba(255, 255, 255, 0.5); } | |
| .slds-hint-parent .slds-button_icon-border-inverse, | |
| .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, | |
| .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:hover .slds-button--icon-border-inverse, .slds-hint-parent:focus .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:hover .slds-button__icon--hint, .slds-hint-parent:focus .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:hover .slds-button__icon--inverse-hint, .slds-hint-parent:focus .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:hover .slds-button:disabled .slds-button__icon--hint, .slds-hint-parent:focus .slds-button:disabled .slds-button__icon_hint, | |
| .slds-hint-parent:focus .slds-button:disabled .slds-button__icon--hint { | |
| fill: currentColor; } | |
| /** | |
| * @summary Creates a brand button icon | |
| * | |
| * @name brand | |
| * @selector .slds-button_icon-brand | |
| * @restrict button | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| /** | |
| * The stateful button requires the `.slds-button--icon-border` class in addition to the `.slds-button` class. | |
| * | |
| * The stateful inverse button works just like the stateful button. It requires the `.slds-button--icon-border-inverse` class in addition to the `.slds-button` class. | |
| * | |
| * Stateful icons can be toggled on and off and retain their state. JavaScript is used to add the `.slds-is-selected` class to the button when activated. | |
| * | |
| * #### Accessibility | |
| * | |
| * For accessibility, implement the [ARIA Toggle Button](http://w3c.github.io/aria-practices/#button) concept. | |
| * - Similar to a mute button, the button represents a pressed or unpressed state. | |
| * - Button text doesn't change per state | |
| * - `aria-pressed` is set to `true` or `false`, depending its state | |
| * | |
| * @summary Stateful Button Icon | |
| * @name stateful | |
| * @selector .slds-is-selected | |
| * @restrict .slds-button_icon | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-button_icon-container.slds-is-selected, | |
| .slds-button--icon-container.slds-is-selected, | |
| .slds-button_icon-border.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-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.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-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.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-container.slds-is-selected:active, | |
| .slds-button_icon-border.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-container.slds-is-selected .slds-button__icon, | |
| .slds-button_icon-border.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-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.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-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.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; } | |
| /** | |
| * The base variant is the fully featured color picker, with a direct text | |
| * input, and a button-triggered popover, which has tabs with both a list | |
| * of predefined color options (swatches), as well as an interactive tool | |
| * for custom color configuration. | |
| * | |
| * @summary Fully featured color picker, with swatches and a custom color config | |
| * | |
| * @variant | |
| * @name base | |
| * @selector .slds-color-picker | |
| * @restrict div | |
| * @support dev-ready | |
| */ | |
| .slds-color-picker { | |
| position: relative; } | |
| .slds-color-picker .slds-form-error { | |
| padding-top: 0.5rem; | |
| color: #c23934; | |
| font-size: 0.75rem; } | |
| /** | |
| * @summary 'Summary' element for color selection. | |
| * | |
| * @selector .slds-color-picker__summary | |
| * @restrict .slds-color-picker > div | |
| */ | |
| /** | |
| * @summary Label for summary input | |
| * | |
| * @selector .slds-color-picker__summary-label | |
| * @restrict .slds-color-picker__summary > label | |
| */ | |
| .slds-color-picker__summary-label { | |
| display: block; } | |
| /** | |
| * @summary Button that toggles the Color Picker Selector | |
| * | |
| * @selector .slds-color-picker__button | |
| * @restrict .slds-color-picker__summary .slds-button | |
| */ | |
| .slds-color-picker__summary-button { | |
| vertical-align: top; | |
| padding: 0.3rem 0.5rem; | |
| line-height: 1; | |
| background: white; | |
| margin-right: 0.25rem; } | |
| /** | |
| * @summary Input field for summary UI | |
| * | |
| * @selector .slds-color-picker__summary-input | |
| * @restrict .slds-color-picker__summary div | |
| */ | |
| .slds-color-picker__summary-input { | |
| display: inline-block; } | |
| .slds-color-picker__summary-input .slds-input { | |
| width: 6rem; } | |
| /** | |
| * @summary The selector subcomponent. Extends upon a .slds-popover | |
| * | |
| * @selector .slds-color-picker__selector | |
| * @restrict .slds-color-picker div, .slds-color-picker section | |
| */ | |
| .slds-color-picker__selector { | |
| margin-top: 0.5rem; } | |
| .slds-color-picker__selector.slds-popover { | |
| width: 14rem; } | |
| .slds-color-picker__selector .slds-popover__footer { | |
| background: #f3f2f2; } | |
| .slds-color-picker__selector .slds-tabs_default__content { | |
| padding: 0.5rem 0 0.25rem; } | |
| /** | |
| * @summary Swatch container | |
| * | |
| * @selector .slds-color-picker__swatches | |
| * @restrict .slds-color-picker__selector ul | |
| */ | |
| .slds-color-picker__swatches { | |
| font-size: 0; } | |
| .slds-color-picker__swatches.slds-swatch { | |
| cursor: pointer; } | |
| /** | |
| * @summary Color Picker swatch | |
| * | |
| * @selector .slds-color-picker__swatch | |
| * @restrict .slds-color-picker__swatches li | |
| */ | |
| .slds-color-picker__swatch { | |
| display: inline-block; | |
| margin: 0.25rem; } | |
| .slds-color-picker__swatch-trigger { | |
| display: inline-block; } | |
| .slds-color-picker__swatch-trigger:focus, .slds-color-picker__swatch-trigger:active { | |
| outline: none; | |
| box-shadow: 0 0 3px #0070D2; | |
| border-radius: 0.25rem; } | |
| /** | |
| * @summary Custom picker selection container | |
| * | |
| * @selector .slds-color-picker__custom | |
| * @restrict .slds-color-picker__selector div | |
| */ | |
| .slds-color-picker__custom { | |
| padding: 0.25rem 0; } | |
| /** | |
| * @summary Custom picker range element | |
| * | |
| * @selector .slds-color-picker__custom-range | |
| * @restrict .slds-color-picker__custom div | |
| */ | |
| .slds-color-picker__custom-range { | |
| position: relative; | |
| margin-bottom: 0.25rem; | |
| height: 5rem; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| overflow: hidden; } | |
| .slds-color-picker__custom-range:before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| background: linear-gradient(to top, black, rgba(0, 0, 0, 0.9) 1%, transparent 99%), linear-gradient(to right, white 1%, rgba(255, 255, 255, 0)); } | |
| /** | |
| * @summary | |
| * | |
| * @selector .slds-color-picker__range-indicator | |
| * @restrict .slds-color-picker__custom-range > a | |
| */ | |
| .slds-color-picker__range-indicator { | |
| transform: translate3d(-0.375rem, 0.375rem, 0); | |
| cursor: pointer; | |
| position: absolute; | |
| height: 0.75rem; | |
| width: 0.75rem; | |
| border: 2px solid white; | |
| border-radius: 50%; | |
| box-shadow: 0 2px 4px 4px rgba(0, 0, 0, 0.16), inset 0 2px 4px 4px rgba(0, 0, 0, 0.16); } | |
| .slds-color-picker__range-indicator:focus { | |
| outline: none; | |
| box-shadow: 0 0 3px #0070D2; } | |
| /** | |
| * @summary Container element for the hue slider and preview swatch | |
| * | |
| * @selector .slds-color-picker__hue-and-preview | |
| * @restrict .slds-color-picker__custom div | |
| */ | |
| .slds-color-picker__hue-and-preview { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| .slds-color-picker__hue-and-preview .slds-swatch { | |
| margin-left: 0.25rem; | |
| height: 1.5rem; | |
| width: 1.5rem; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; } | |
| /** | |
| * @summary The slide input that controls the hue | |
| * | |
| * @selector .slds-color-picker__hue-slider | |
| * @restrict .slds-color-picker__hue-and-preview input | |
| */ | |
| .slds-color-picker__hue-slider { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| -ms-flex: 1; | |
| flex: 1; | |
| padding: 0; | |
| height: 1.5rem; | |
| width: 100%; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| background: linear-gradient(to right, red, #ff1500, #ff2b00, #ff4000, #ff5500, #ff6a00, #ff8000, #ff9500, #ffaa00, #ffbf00, #ffd500, #ffea00, yellow, #eaff00, #d5ff00, #bfff00, #aaff00, #95ff00, #80ff00, #6aff00, #55ff00, #40ff00, #2bff00, #15ff00, lime, #00ff15, #00ff2b, #00ff40, #00ff55, #00ff6a, #00ff80, #00ff95, #00ffaa, #00ffbf, #00ffd5, #00ffea, cyan, #00eaff, #00d5ff, deepskyblue, #00aaff, #0095ff, #0080ff, #006aff, #0055ff, #0040ff, #002bff, #0015ff, blue, #1500ff, #2b00ff, #4000ff, #5500ff, #6a00ff, #8000ff, #9500ff, #aa00ff, #bf00ff, #d500ff, #ea00ff, magenta, #ff00ea, #ff00d5, #ff00bf, #ff00aa, #ff0095, #ff0080, #ff006a, #ff0055, #ff0040, #ff002b, #ff0015); } | |
| .slds-color-picker__hue-slider::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| cursor: pointer; | |
| height: calc(1.5rem - (1px * 2)); | |
| width: 0.375rem; | |
| border: 1px solid #514f4d; | |
| border-radius: 0.125rem; | |
| background: #f3f2f2; } | |
| .slds-color-picker__hue-slider::-moz-range-thumb { | |
| -moz-appearance: none; | |
| appearance: none; | |
| cursor: pointer; | |
| height: calc(1.5rem - (1px * 2)); | |
| width: 0.375rem; | |
| border: 1px solid #514f4d; | |
| border-radius: 0.125rem; | |
| background: #f3f2f2; } | |
| .slds-color-picker__hue-slider::-ms-thumb { | |
| appearance: none; | |
| cursor: pointer; | |
| height: calc(1.5rem - (1px * 2)); | |
| width: 0.375rem; | |
| border: 1px solid #514f4d; | |
| border-radius: 0.125rem; | |
| background: #f3f2f2; | |
| height: 1.5rem; } | |
| .slds-color-picker__hue-slider:focus { | |
| outline: none; } | |
| .slds-color-picker__hue-slider:focus::-webkit-slider-thumb { | |
| border-color: #1589ee; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-color-picker__hue-slider:focus::-moz-range-thumb { | |
| border-color: #1589ee; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-color-picker__hue-slider:focus::-ms-thumb { | |
| border-color: #1589ee; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-color-picker__hue-slider::-moz-range-track { | |
| height: 0; } | |
| .slds-color-picker__hue-slider::-ms-track { | |
| height: 0; | |
| border: 0; | |
| background: transparent; | |
| color: transparent; } | |
| /** | |
| * @summary The group of direct input elements | |
| * | |
| * @selector .slds-color-picker__custom-inputs | |
| * @restrict .slds-color-picker__custom > div | |
| */ | |
| .slds-color-picker__custom-inputs { | |
| display: -ms-flexbox; | |
| display: flex; | |
| padding-top: 0.5rem; } | |
| .slds-color-picker__custom-inputs .slds-form-element { | |
| -ms-flex: flex-grow; | |
| flex: flex-grow; } | |
| .slds-color-picker__custom-inputs .slds-form-element:not(:first-child) { | |
| margin-left: 0.25rem; } | |
| .slds-color-picker__custom-inputs input { | |
| padding: 0 0.25rem; } | |
| .slds-color-picker__custom-inputs abbr { | |
| cursor: text; | |
| text-decoration: none; } | |
| .slds-color-picker__input-custom-hex { | |
| -ms-flex: none; | |
| flex: none; | |
| width: 4.2rem; } | |
| .slds-color-picker__input-custom-hex input { | |
| font-size: 0.75rem; } | |
| /** | |
| * @summary Footer for the Color Selector Picker | |
| * | |
| * @selector .slds-color-picker__selector-footer | |
| * @restrict .slds-color-picker__selector div | |
| */ | |
| .slds-color-picker__selector-footer { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| .slds-color-picker__selector-footer .slds-button { | |
| -ms-flex: 1; | |
| flex: 1; } | |
| /** | |
| * @summary A swatch | |
| * | |
| * @selector .slds-swatch | |
| * @restrict .slds-color-picker__swatch span, .slds-color-picker__summary-button span, .slds-color-picker__hue-and-preview span | |
| */ | |
| .slds-swatch { | |
| display: inline-block; | |
| vertical-align: middle; | |
| height: 1.25rem; | |
| width: 1.25rem; | |
| border-radius: 0.125rem; | |
| box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.4); } | |
| /** | |
| * The Custom-Only variant should only render the custom color selection tool | |
| * in the Color Picker popover. It should not be inside a tabset. | |
| * | |
| * @summary Swatches Only UI | |
| * | |
| * @name custom-only | |
| * @selector .slds-color-picker_custom-only | |
| * @restrict .slds-color-picker | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| /** | |
| * The Predefined Only variant should only render the predefined colors | |
| * selection in the Color Picker popover. It should not be inside a tabset. | |
| * | |
| * @summary Swatches Only UI | |
| * | |
| * @name predefined-only | |
| * @selector .slds-color-picker_predefined-only | |
| * @restrict .slds-color-picker | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| /** | |
| * The Swatches Only variant should only render a group of individual swatches. | |
| * It should not render any of the main chrome of the color picker UI (no Summary | |
| * section, no Popover, no Tabset), it should only render the Color Picker swatches | |
| * selector. This component should be rendered inside a menu. | |
| * | |
| * ### Accessibility Notes | |
| * | |
| * The accessibility requirements for this Variant are slightly different from | |
| * the others: | |
| * | |
| * #### `.slds-color-picker__swatches` | |
| * | |
| * This element _needs_ a `role` of `menu`. | |
| * | |
| * #### `.slds-color-picker__swatch-trigger` | |
| * | |
| * This element _needs_ a `role` of `option` | |
| * | |
| * @summary Swatches Only UI | |
| * | |
| * @name swatches-only | |
| * @selector .slds-color-picker_swatches-only | |
| * @restrict .slds-color-picker | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-color-picker.slds-color-picker_swatches-only { | |
| width: 13.3rem; | |
| padding: 0.5rem; } | |
| .slds-color-picker.slds-color-picker_swatches-only .slds-color-picker__selector { | |
| margin: 0; } | |
| /** | |
| * @summary Container for icons | |
| * | |
| * @name base | |
| * @selector .slds-icon_container | |
| * @restrict span, div | |
| * @notes Used when an icon with a background color is accompanied by `.slds-assistive-text` and also receives a `background-color` class | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-icon_container, | |
| .slds-icon__container { | |
| display: inline-block; | |
| border-radius: 0.25rem; | |
| line-height: 1; | |
| /** | |
| * @summary Circle container for icons | |
| * @selector .slds-icon_container_circle | |
| * @restrict .slds-icon_container | |
| */ } | |
| .slds-icon_container_circle, .slds-icon_container--circle, | |
| .slds-icon__container_circle, | |
| .slds-icon__container--circle { | |
| padding: 0.5rem; | |
| border-radius: 50%; } | |
| /** | |
| * @summary Horizontally flip icons | |
| * @selector .slds-icon_flip | |
| * @ restrict .slds-icon_container | |
| */ | |
| [dir="rtl"] .slds-icon_flip { | |
| transform: scaleX(-1); } | |
| [class*='slds-icon-action-'] { | |
| padding: 0.5rem; | |
| border-radius: 50%; } | |
| .slds-icon-action-new-custom18 { | |
| background-color: #4dca76; } | |
| .slds-icon-action-new-custom29 { | |
| background-color: #bdd25f; } | |
| .slds-icon-action-edit-groups { | |
| background-color: #34becd; } | |
| .slds-icon-action-new-custom9 { | |
| background-color: #6b9ee2; } | |
| .slds-icon-action-log-a-call { | |
| background-color: #48c3cc; } | |
| .slds-icon-action-new-custom19 { | |
| background-color: #3abeb1; } | |
| .slds-icon-action-filter { | |
| background-color: #fd90b5; } | |
| .slds-icon-action-user-activation { | |
| background-color: #54698d; } | |
| .slds-icon-action-opportunity-competitor { | |
| background-color: #fcb95b; } | |
| .slds-icon-action-canvas { | |
| background-color: #8199af; } | |
| .slds-icon-action-change-record-type { | |
| background-color: #54698d; } | |
| .slds-icon-action-new-notebook { | |
| background-color: #e6d478; } | |
| .slds-icon-action-docusign { | |
| background-color: #5080db; } | |
| .slds-icon-action-share-link { | |
| background-color: #7a9ae6; } | |
| .slds-icon-action-add-file { | |
| background-color: #7e8be4; } | |
| .slds-icon-action-edit-relationship { | |
| background-color: #1dccbf; } | |
| .slds-icon-action-notebook { | |
| background-color: #e6d478; } | |
| .slds-icon-action-new-lead { | |
| background-color: #f88962; } | |
| .slds-icon-action-new-custom-object { | |
| background-color: #a7d44d; } | |
| .slds-icon-action-new-account { | |
| background-color: #7f8de1; } | |
| .slds-icon-action-question-post-action { | |
| background-color: #32af5c; } | |
| .slds-icon-action-share-file { | |
| background-color: #baac93; } | |
| .slds-icon-action-default-custom-object { | |
| background-color: #8199af; } | |
| .slds-icon-action-opportunity-team-member { | |
| background-color: #fcb95b; } | |
| .slds-icon-action-add-photo-video { | |
| background-color: #00cdc0; } | |
| .slds-icon-action-sort { | |
| background-color: #fab9a5; } | |
| .slds-icon-action-call { | |
| background-color: #1fcaa0; } | |
| .slds-icon-action-concur { | |
| background-color: #4cc3c7; } | |
| .slds-icon-action-reject { | |
| background-color: #00c6b7; } | |
| .slds-icon-action-share-poll { | |
| background-color: #699be1; } | |
| .slds-icon-action-following { | |
| background-color: #7dcf64; } | |
| .slds-icon-action-defer { | |
| background-color: #ef7ead; } | |
| .slds-icon-action-opportunity-line-item { | |
| background-color: #fcb95b; } | |
| .slds-icon-action-social-post { | |
| background-color: #ea74a2; } | |
| .slds-icon-action-share-post { | |
| background-color: #65cae4; } | |
| .slds-icon-action-view-relationship { | |
| background-color: #3c97dd; } | |
| .slds-icon-action-upload { | |
| background-color: #54698d; } | |
| .slds-icon-action-remove-relationship { | |
| background-color: #ef6e64; } | |
| .slds-icon-action-freeze-user { | |
| background-color: #54698d; } | |
| .slds-icon-action-new-person-account { | |
| background-color: #7f8de1; } | |
| .slds-icon-action-bug { | |
| background-color: #ef6e5d; } | |
| .slds-icon-action-apex { | |
| background-color: #696e71; } | |
| .slds-icon-action-new-opportunity { | |
| background-color: #fcb95b; } | |
| .slds-icon-action-fallback { | |
| background-color: #9895ee; } | |
| .slds-icon-action-dial-in { | |
| background-color: #8b9ae3; } | |
| .slds-icon-action-approval { | |
| background-color: #00c6b7; } | |
| .slds-icon-action-change-owner { | |
| background-color: #54698d; } | |
| .slds-icon-action-new-task { | |
| background-color: #4bc076; } | |
| .slds-icon-action-priority { | |
| background-color: #fbb439; } | |
| .slds-icon-action-remove { | |
| background-color: #54698d; } | |
| .slds-icon-action-web-link { | |
| background-color: #56aadf; } | |
| .slds-icon-action-leave-group { | |
| background-color: #f39e58; } | |
| .slds-icon-action-manage-perm-sets { | |
| background-color: #54698d; } | |
| .slds-icon-action-close { | |
| background-color: #ef6e64; } | |
| .slds-icon-action-google-news { | |
| background-color: #f5675b; } | |
| .slds-icon-action-announcement { | |
| background-color: #fe8f60; } | |
| .slds-icon-action-back { | |
| background-color: #0dc2d9; } | |
| .slds-icon-action-new-custom90 { | |
| background-color: #22a48a; } | |
| .slds-icon-action-download { | |
| background-color: #54698d; } | |
| .slds-icon-action-new-custom80 { | |
| background-color: #659ad5; } | |
| .slds-icon-action-new-custom91 { | |
| background-color: #bf7b66; } | |
| .slds-icon-action-search { | |
| background-color: #48adeb; } | |
| .slds-icon-action-new-event { | |
| background-color: #eb7092; } | |
| .slds-icon-action-new-custom70 { | |
| background-color: #e769b4; } | |
| .slds-icon-action-new-custom81 { | |
| background-color: #da627f; } | |
| .slds-icon-action-new-custom92 { | |
| background-color: #517e82; } | |
| .slds-icon-action-refresh { | |
| background-color: #54698d; } | |
| .slds-icon-action-share-thanks { | |
| background-color: #e9696e; } | |
| .slds-icon-action-update { | |
| background-color: #81b4d6; } | |
| .slds-icon-action-email { | |
| background-color: #95aec5; } | |
| .slds-icon-action-join-group { | |
| background-color: #779ef2; } | |
| .slds-icon-action-new-custom60 { | |
| background-color: #bf5a88; } | |
| .slds-icon-action-new-custom71 { | |
| background-color: #e36ee3; } | |
| .slds-icon-action-new-custom82 { | |
| background-color: #d15b97; } | |
| .slds-icon-action-new-custom93 { | |
| background-color: #904d4c; } | |
| .slds-icon-action-edit { | |
| background-color: #1dccbf; } | |
| .slds-icon-action-quote { | |
| background-color: #88c651; } | |
| .slds-icon-action-dropbox { | |
| background-color: #52aef9; } | |
| .slds-icon-action-description { | |
| background-color: #7dc37d; } | |
| .slds-icon-action-map { | |
| background-color: #76c6ee; } | |
| .slds-icon-action-user { | |
| background-color: #65cae4; } | |
| .slds-icon-action-reset-password { | |
| background-color: #54698d; } | |
| .slds-icon-action-new-custom50 { | |
| background-color: #49bcd3; } | |
| .slds-icon-action-new-custom61 { | |
| background-color: #f57376; } | |
| .slds-icon-action-new-custom72 { | |
| background-color: #8d9bfb; } | |
| .slds-icon-action-new-custom83 { | |
| background-color: #e7806f; } | |
| .slds-icon-action-new-custom94 { | |
| background-color: #439cba; } | |
| .slds-icon-action-clone { | |
| background-color: #6ca1e9; } | |
| .slds-icon-action-script { | |
| background-color: #0070d2; } | |
| .slds-icon-action-delete { | |
| background-color: #e6717c; } | |
| .slds-icon-action-new-custom40 { | |
| background-color: #83c75e; } | |
| .slds-icon-action-new-custom51 { | |
| background-color: #d8c760; } | |
| .slds-icon-action-new-custom62 { | |
| background-color: #6b92dc; } | |
| .slds-icon-action-new-custom73 { | |
| background-color: #679ef0; } | |
| .slds-icon-action-new-custom84 { | |
| background-color: #f6707b; } | |
| .slds-icon-action-new-custom95 { | |
| background-color: #8bcf6a; } | |
| .slds-icon-action-share { | |
| background-color: #54698d; } | |
| .slds-icon-action-new-custom30 { | |
| background-color: #f59f71; } | |
| .slds-icon-action-new-custom41 { | |
| background-color: #43b5b5; } | |
| .slds-icon-action-new-custom52 { | |
| background-color: #ee8e6f; } | |
| .slds-icon-action-new-custom63 { | |
| background-color: #7ccf60; } | |
| .slds-icon-action-new-custom74 { | |
| background-color: #41c8a0; } | |
| .slds-icon-action-new-custom85 { | |
| background-color: #f26891; } | |
| .slds-icon-action-new-custom96 { | |
| background-color: #6d9de3; } | |
| .slds-icon-action-log-event { | |
| background-color: #6ca1e9; } | |
| .slds-icon-action-new-group { | |
| background-color: #83b6ff; } | |
| .slds-icon-action-new-custom20 { | |
| background-color: #48c7c8; } | |
| .slds-icon-action-new-custom31 { | |
| background-color: #eb687f; } | |
| .slds-icon-action-new-custom42 { | |
| background-color: #cfd05b; } | |
| .slds-icon-action-info { | |
| background-color: #54698d; } | |
| .slds-icon-action-new-custom53 { | |
| background-color: #f36e83; } | |
| .slds-icon-action-new-custom64 { | |
| background-color: #618fd8; } | |
| .slds-icon-action-new-custom75 { | |
| background-color: #cd9f65; } | |
| .slds-icon-action-new-custom86 { | |
| background-color: #e260ab; } | |
| .slds-icon-action-flow { | |
| background-color: #0079bc; } | |
| .slds-icon-action-new-custom97 { | |
| background-color: #dd6085; } | |
| .slds-icon-action-submit-for-approval { | |
| background-color: #50cc7a; } | |
| .slds-icon-action-new { | |
| background-color: #33bce7; } | |
| .slds-icon-action-new-campaign { | |
| background-color: #f49756; } | |
| .slds-icon-action-new-custom10 { | |
| background-color: #6488e3; } | |
| .slds-icon-action-new-custom21 { | |
| background-color: #8a7aed; } | |
| .slds-icon-action-new-custom32 { | |
| background-color: #38c393; } | |
| .slds-icon-action-new-custom43 { | |
| background-color: #7f93f9; } | |
| .slds-icon-action-new-custom54 { | |
| background-color: #ea70b1; } | |
| .slds-icon-action-new-custom65 { | |
| background-color: #f279ab; } | |
| .slds-icon-action-new-custom76 { | |
| background-color: #db6d7a; } | |
| .slds-icon-action-new-custom87 { | |
| background-color: #d876e5; } | |
| .slds-icon-action-new-custom98 { | |
| background-color: #e1be5c; } | |
| .slds-icon-action-new-case { | |
| background-color: #f2cf5b; } | |
| .slds-icon-action-new-custom100 { | |
| background-color: #e15d76; } | |
| .slds-icon-action-new-custom1 { | |
| background-color: #ff7b84; } | |
| .slds-icon-action-new-contact { | |
| background-color: #a094ed; } | |
| .slds-icon-action-office-365 { | |
| background-color: #ff8041; } | |
| .slds-icon-action-new-custom11 { | |
| background-color: #8784ea; } | |
| .slds-icon-action-new-custom22 { | |
| background-color: #8b85f9; } | |
| .slds-icon-action-new-custom33 { | |
| background-color: #97cf5d; } | |
| .slds-icon-action-new-custom44 { | |
| background-color: #c8ca58; } | |
| .slds-icon-action-new-custom55 { | |
| background-color: #d66ee0; } | |
| .slds-icon-action-new-custom66 { | |
| background-color: #d8be5f; } | |
| .slds-icon-action-new-custom77 { | |
| background-color: #b55d5b; } | |
| .slds-icon-action-new-custom88 { | |
| background-color: #996fe6; } | |
| .slds-icon-action-new-custom99 { | |
| background-color: #f0856e; } | |
| .slds-icon-action-add-contact { | |
| background-color: #a094ed; } | |
| .slds-icon-action-evernote { | |
| background-color: #86c86f; } | |
| .slds-icon-action-new-custom2 { | |
| background-color: #cfd05c; } | |
| .slds-icon-action-lead-convert { | |
| background-color: #f88962; } | |
| .slds-icon-action-new-custom12 { | |
| background-color: #dc71d1; } | |
| .slds-icon-action-new-custom23 { | |
| background-color: #b070e6; } | |
| .slds-icon-action-new-custom34 { | |
| background-color: #d58a6a; } | |
| .slds-icon-action-new-custom45 { | |
| background-color: #d95879; } | |
| .slds-icon-action-new-custom56 { | |
| background-color: #718deb; } | |
| .slds-icon-action-new-custom67 { | |
| background-color: #f87d76; } | |
| .slds-icon-action-recall { | |
| background-color: #4a698d; } | |
| .slds-icon-action-new-custom78 { | |
| background-color: #5a95dd; } | |
| .slds-icon-action-new-custom89 { | |
| background-color: #3e99be; } | |
| .slds-icon-action-follow { | |
| background-color: #31b9f8; } | |
| .slds-icon-action-record { | |
| background-color: #7dc37d; } | |
| .slds-icon-action-new-custom3 { | |
| background-color: #ecb46c; } | |
| .slds-icon-action-new-note { | |
| background-color: #e6d478; } | |
| .slds-icon-action-new-custom13 { | |
| background-color: #df6184; } | |
| .slds-icon-action-new-custom24 { | |
| background-color: #e56798; } | |
| .slds-icon-action-new-custom35 { | |
| background-color: #e9637e; } | |
| .slds-icon-action-new-custom46 { | |
| background-color: #67a5e7; } | |
| .slds-icon-action-new-custom57 { | |
| background-color: #5a9cdd; } | |
| .slds-icon-action-new-custom68 { | |
| background-color: #f26979; } | |
| .slds-icon-action-new-custom79 { | |
| background-color: #8ed363; } | |
| .slds-icon-action-new-child-case { | |
| background-color: #fa975c; } | |
| .slds-icon-action-new-custom4 { | |
| background-color: #e1d951; } | |
| .slds-icon-action-new-custom14 { | |
| background-color: #3cc2b3; } | |
| .slds-icon-action-new-custom25 { | |
| background-color: #e46fbe; } | |
| .slds-icon-action-new-custom36 { | |
| background-color: #d472d4; } | |
| .slds-icon-action-new-custom47 { | |
| background-color: #5fcc64; } | |
| .slds-icon-action-new-custom58 { | |
| background-color: #34b59d; } | |
| .slds-icon-action-new-custom69 { | |
| background-color: #ed6387; } | |
| .slds-icon-action-new-custom5 { | |
| background-color: #9fdb66; } | |
| .slds-icon-action-goal { | |
| background-color: #56aadf; } | |
| .slds-icon-action-new-custom15 { | |
| background-color: #f77e75; } | |
| .slds-icon-action-new-custom26 { | |
| background-color: #7698f0; } | |
| .slds-icon-action-new-custom37 { | |
| background-color: #8c89f2; } | |
| .slds-icon-action-new-custom48 { | |
| background-color: #ef697f; } | |
| .slds-icon-action-new-custom59 { | |
| background-color: #e3d067; } | |
| .slds-icon-action-new-custom6 { | |
| background-color: #54c473; } | |
| .slds-icon-action-log-this-event { | |
| background-color: #eb7092; } | |
| .slds-icon-action-new-custom16 { | |
| background-color: #e9af67; } | |
| .slds-icon-action-new-custom27 { | |
| background-color: #5ab0d2; } | |
| .slds-icon-action-new-custom38 { | |
| background-color: #53b6d7; } | |
| .slds-icon-action-new-custom49 { | |
| background-color: #e25c80; } | |
| .slds-icon-action-new-custom7 { | |
| background-color: #6a89e5; } | |
| .slds-icon-action-more { | |
| background-color: #62b7ed; } | |
| .slds-icon-action-add-relationship { | |
| background-color: #62b7ed; } | |
| .slds-icon-action-new-custom17 { | |
| background-color: #acd360; } | |
| .slds-icon-action-new-custom28 { | |
| background-color: #89c059; } | |
| .slds-icon-action-new-custom39 { | |
| background-color: #4fbe75; } | |
| .slds-icon-action-password-unlock { | |
| background-color: #54698d; } | |
| .slds-icon-action-check { | |
| background-color: #54698d; } | |
| .slds-icon-action-update-status { | |
| background-color: #1ec7be; } | |
| .slds-icon-action-preview { | |
| background-color: #7f8de1; } | |
| .slds-icon-action-new-custom8 { | |
| background-color: #50ceb9; } | |
| .slds-icon-custom-custom110, | |
| .slds-icon-custom-110 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom100, | |
| .slds-icon-custom-100 { | |
| background-color: #e15d76; | |
| color: white; } | |
| .slds-icon-custom-custom111, | |
| .slds-icon-custom-111 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom1, | |
| .slds-icon-custom-1 { | |
| background-color: #ff7b84; | |
| color: white; } | |
| .slds-icon-custom-custom101, | |
| .slds-icon-custom-101 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom112, | |
| .slds-icon-custom-112 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom2, | |
| .slds-icon-custom-2 { | |
| background-color: #cfd05c; | |
| color: white; } | |
| .slds-icon-custom-custom102, | |
| .slds-icon-custom-102 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom113, | |
| .slds-icon-custom-113 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom90, | |
| .slds-icon-custom-90 { | |
| background-color: #22a48a; | |
| color: white; } | |
| .slds-icon-custom-custom3, | |
| .slds-icon-custom-3 { | |
| background-color: #ecb46c; | |
| color: white; } | |
| .slds-icon-custom-custom103, | |
| .slds-icon-custom-103 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom80, | |
| .slds-icon-custom-80 { | |
| background-color: #659ad5; | |
| color: white; } | |
| .slds-icon-custom-custom91, | |
| .slds-icon-custom-91 { | |
| background-color: #bf7b66; | |
| color: white; } | |
| .slds-icon-custom-custom4, | |
| .slds-icon-custom-4 { | |
| background-color: #e1d951; | |
| color: white; } | |
| .slds-icon-custom-custom104, | |
| .slds-icon-custom-104 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom70, | |
| .slds-icon-custom-70 { | |
| background-color: #e769b4; | |
| color: white; } | |
| .slds-icon-custom-custom81, | |
| .slds-icon-custom-81 { | |
| background-color: #da627f; | |
| color: white; } | |
| .slds-icon-custom-custom92, | |
| .slds-icon-custom-92 { | |
| background-color: #517e82; | |
| color: white; } | |
| .slds-icon-custom-custom5, | |
| .slds-icon-custom-5 { | |
| background-color: #9fdb66; | |
| color: white; } | |
| .slds-icon-custom-custom105, | |
| .slds-icon-custom-105 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom60, | |
| .slds-icon-custom-60 { | |
| background-color: #bf5a88; | |
| color: white; } | |
| .slds-icon-custom-custom71, | |
| .slds-icon-custom-71 { | |
| background-color: #e36ee3; | |
| color: white; } | |
| .slds-icon-custom-custom82, | |
| .slds-icon-custom-82 { | |
| background-color: #d15b97; | |
| color: white; } | |
| .slds-icon-custom-custom93, | |
| .slds-icon-custom-93 { | |
| background-color: #904d4c; | |
| color: white; } | |
| .slds-icon-custom-custom6, | |
| .slds-icon-custom-6 { | |
| background-color: #54c473; | |
| color: white; } | |
| .slds-icon-custom-custom106, | |
| .slds-icon-custom-106 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom50, | |
| .slds-icon-custom-50 { | |
| background-color: #49bcd3; | |
| color: white; } | |
| .slds-icon-custom-custom61, | |
| .slds-icon-custom-61 { | |
| background-color: #f57376; | |
| color: white; } | |
| .slds-icon-custom-custom72, | |
| .slds-icon-custom-72 { | |
| background-color: #8d9bfb; | |
| color: white; } | |
| .slds-icon-custom-custom83, | |
| .slds-icon-custom-83 { | |
| background-color: #e7806f; | |
| color: white; } | |
| .slds-icon-custom-custom94, | |
| .slds-icon-custom-94 { | |
| background-color: #439cba; | |
| color: white; } | |
| .slds-icon-custom-custom7, | |
| .slds-icon-custom-7 { | |
| background-color: #6a89e5; | |
| color: white; } | |
| .slds-icon-custom-custom107, | |
| .slds-icon-custom-107 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom40, | |
| .slds-icon-custom-40 { | |
| background-color: #83c75e; | |
| color: white; } | |
| .slds-icon-custom-custom51, | |
| .slds-icon-custom-51 { | |
| background-color: #d8c760; | |
| color: white; } | |
| .slds-icon-custom-custom62, | |
| .slds-icon-custom-62 { | |
| background-color: #6b92dc; | |
| color: white; } | |
| .slds-icon-custom-custom73, | |
| .slds-icon-custom-73 { | |
| background-color: #679ef0; | |
| color: white; } | |
| .slds-icon-custom-custom84, | |
| .slds-icon-custom-84 { | |
| background-color: #f6707b; | |
| color: white; } | |
| .slds-icon-custom-custom95, | |
| .slds-icon-custom-95 { | |
| background-color: #8bcf6a; | |
| color: white; } | |
| .slds-icon-custom-custom8, | |
| .slds-icon-custom-8 { | |
| background-color: #50ceb9; | |
| color: white; } | |
| .slds-icon-custom-custom108, | |
| .slds-icon-custom-108 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom30, | |
| .slds-icon-custom-30 { | |
| background-color: #f59f71; | |
| color: white; } | |
| .slds-icon-custom-custom41, | |
| .slds-icon-custom-41 { | |
| background-color: #43b5b5; | |
| color: white; } | |
| .slds-icon-custom-custom52, | |
| .slds-icon-custom-52 { | |
| background-color: #ee8e6f; | |
| color: white; } | |
| .slds-icon-custom-custom63, | |
| .slds-icon-custom-63 { | |
| background-color: #7ccf60; | |
| color: white; } | |
| .slds-icon-custom-custom74, | |
| .slds-icon-custom-74 { | |
| background-color: #41c8a0; | |
| color: white; } | |
| .slds-icon-custom-custom85, | |
| .slds-icon-custom-85 { | |
| background-color: #f26891; | |
| color: white; } | |
| .slds-icon-custom-custom96, | |
| .slds-icon-custom-96 { | |
| background-color: #6d9de3; | |
| color: white; } | |
| .slds-icon-custom-custom9, | |
| .slds-icon-custom-9 { | |
| background-color: #6b9ee2; | |
| color: white; } | |
| .slds-icon-custom-custom109, | |
| .slds-icon-custom-109 { | |
| background-color: #f28b00; | |
| color: white; } | |
| .slds-icon-custom-custom20, | |
| .slds-icon-custom-20 { | |
| background-color: #48c7c8; | |
| color: white; } | |
| .slds-icon-custom-custom31, | |
| .slds-icon-custom-31 { | |
| background-color: #eb687f; | |
| color: white; } | |
| .slds-icon-custom-custom42, | |
| .slds-icon-custom-42 { | |
| background-color: #cfd05b; | |
| color: white; } | |
| .slds-icon-custom-custom53, | |
| .slds-icon-custom-53 { | |
| background-color: #f36e83; | |
| color: white; } | |
| .slds-icon-custom-custom64, | |
| .slds-icon-custom-64 { | |
| background-color: #618fd8; | |
| color: white; } | |
| .slds-icon-custom-custom75, | |
| .slds-icon-custom-75 { | |
| background-color: #cd9f65; | |
| color: white; } | |
| .slds-icon-custom-custom86, | |
| .slds-icon-custom-86 { | |
| background-color: #e260ab; | |
| color: white; } | |
| .slds-icon-custom-custom97, | |
| .slds-icon-custom-97 { | |
| background-color: #dd6085; | |
| color: white; } | |
| .slds-icon-custom-custom10, | |
| .slds-icon-custom-10 { | |
| background-color: #6488e3; | |
| color: white; } | |
| .slds-icon-custom-custom21, | |
| .slds-icon-custom-21 { | |
| background-color: #8a7aed; | |
| color: white; } | |
| .slds-icon-custom-custom32, | |
| .slds-icon-custom-32 { | |
| background-color: #38c393; | |
| color: white; } | |
| .slds-icon-custom-custom43, | |
| .slds-icon-custom-43 { | |
| background-color: #7f93f9; | |
| color: white; } | |
| .slds-icon-custom-custom54, | |
| .slds-icon-custom-54 { | |
| background-color: #ea70b1; | |
| color: white; } | |
| .slds-icon-custom-custom65, | |
| .slds-icon-custom-65 { | |
| background-color: #f279ab; | |
| color: white; } | |
| .slds-icon-custom-custom76, | |
| .slds-icon-custom-76 { | |
| background-color: #db6d7a; | |
| color: white; } | |
| .slds-icon-custom-custom87, | |
| .slds-icon-custom-87 { | |
| background-color: #d876e5; | |
| color: white; } | |
| .slds-icon-custom-custom98, | |
| .slds-icon-custom-98 { | |
| background-color: #e1be5c; | |
| color: white; } | |
| .slds-icon-custom-custom11, | |
| .slds-icon-custom-11 { | |
| background-color: #8784ea; | |
| color: white; } | |
| .slds-icon-custom-custom22, | |
| .slds-icon-custom-22 { | |
| background-color: #8b85f9; | |
| color: white; } | |
| .slds-icon-custom-custom33, | |
| .slds-icon-custom-33 { | |
| background-color: #97cf5d; | |
| color: white; } | |
| .slds-icon-custom-custom44, | |
| .slds-icon-custom-44 { | |
| background-color: #c8ca58; | |
| color: white; } | |
| .slds-icon-custom-custom55, | |
| .slds-icon-custom-55 { | |
| background-color: #d66ee0; | |
| color: white; } | |
| .slds-icon-custom-custom66, | |
| .slds-icon-custom-66 { | |
| background-color: #d8be5f; | |
| color: white; } | |
| .slds-icon-custom-custom77, | |
| .slds-icon-custom-77 { | |
| background-color: #b55d5b; | |
| color: white; } | |
| .slds-icon-custom-custom88, | |
| .slds-icon-custom-88 { | |
| background-color: #996fe6; | |
| color: white; } | |
| .slds-icon-custom-custom99, | |
| .slds-icon-custom-99 { | |
| background-color: #f0856e; | |
| color: white; } | |
| .slds-icon-custom-custom12, | |
| .slds-icon-custom-12 { | |
| background-color: #dc71d1; | |
| color: white; } | |
| .slds-icon-custom-custom23, | |
| .slds-icon-custom-23 { | |
| background-color: #b070e6; | |
| color: white; } | |
| .slds-icon-custom-custom34, | |
| .slds-icon-custom-34 { | |
| background-color: #d58a6a; | |
| color: white; } | |
| .slds-icon-custom-custom45, | |
| .slds-icon-custom-45 { | |
| background-color: #d95879; | |
| color: white; } | |
| .slds-icon-custom-custom56, | |
| .slds-icon-custom-56 { | |
| background-color: #718deb; | |
| color: white; } | |
| .slds-icon-custom-custom67, | |
| .slds-icon-custom-67 { | |
| background-color: #f87d76; | |
| color: white; } | |
| .slds-icon-custom-custom78, | |
| .slds-icon-custom-78 { | |
| background-color: #5a95dd; | |
| color: white; } | |
| .slds-icon-custom-custom89, | |
| .slds-icon-custom-89 { | |
| background-color: #3e99be; | |
| color: white; } | |
| .slds-icon-custom-custom13, | |
| .slds-icon-custom-13 { | |
| background-color: #df6184; | |
| color: white; } | |
| .slds-icon-custom-custom24, | |
| .slds-icon-custom-24 { | |
| background-color: #e56798; | |
| color: white; } | |
| .slds-icon-custom-custom35, | |
| .slds-icon-custom-35 { | |
| background-color: #e9637e; | |
| color: white; } | |
| .slds-icon-custom-custom46, | |
| .slds-icon-custom-46 { | |
| background-color: #67a5e7; | |
| color: white; } | |
| .slds-icon-custom-custom57, | |
| .slds-icon-custom-57 { | |
| background-color: #5a9cdd; | |
| color: white; } | |
| .slds-icon-custom-custom68, | |
| .slds-icon-custom-68 { | |
| background-color: #f26979; | |
| color: white; } | |
| .slds-icon-custom-custom79, | |
| .slds-icon-custom-79 { | |
| background-color: #8ed363; | |
| color: white; } | |
| .slds-icon-custom-custom14, | |
| .slds-icon-custom-14 { | |
| background-color: #3cc2b3; | |
| color: white; } | |
| .slds-icon-custom-custom25, | |
| .slds-icon-custom-25 { | |
| background-color: #e46fbe; | |
| color: white; } | |
| .slds-icon-custom-custom36, | |
| .slds-icon-custom-36 { | |
| background-color: #d472d4; | |
| color: white; } | |
| .slds-icon-custom-custom47, | |
| .slds-icon-custom-47 { | |
| background-color: #5fcc64; | |
| color: white; } | |
| .slds-icon-custom-custom58, | |
| .slds-icon-custom-58 { | |
| background-color: #34b59d; | |
| color: white; } | |
| .slds-icon-custom-custom69, | |
| .slds-icon-custom-69 { | |
| background-color: #ed6387; | |
| color: white; } | |
| .slds-icon-custom-custom15, | |
| .slds-icon-custom-15 { | |
| background-color: #f77e75; | |
| color: white; } | |
| .slds-icon-custom-custom26, | |
| .slds-icon-custom-26 { | |
| background-color: #7698f0; | |
| color: white; } | |
| .slds-icon-custom-custom37, | |
| .slds-icon-custom-37 { | |
| background-color: #8c89f2; | |
| color: white; } | |
| .slds-icon-custom-custom48, | |
| .slds-icon-custom-48 { | |
| background-color: #ef697f; | |
| color: white; } | |
| .slds-icon-custom-custom59, | |
| .slds-icon-custom-59 { | |
| background-color: #e3d067; | |
| color: white; } | |
| .slds-icon-custom-custom16, | |
| .slds-icon-custom-16 { | |
| background-color: #e9af67; | |
| color: white; } | |
| .slds-icon-custom-custom27, | |
| .slds-icon-custom-27 { | |
| background-color: #5ab0d2; | |
| color: white; } | |
| .slds-icon-custom-custom38, | |
| .slds-icon-custom-38 { | |
| background-color: #53b6d7; | |
| color: white; } | |
| .slds-icon-custom-custom49, | |
| .slds-icon-custom-49 { | |
| background-color: #e25c80; | |
| color: white; } | |
| .slds-icon-custom-custom17, | |
| .slds-icon-custom-17 { | |
| background-color: #acd360; | |
| color: white; } | |
| .slds-icon-custom-custom28, | |
| .slds-icon-custom-28 { | |
| background-color: #89c059; | |
| color: white; } | |
| .slds-icon-custom-custom39, | |
| .slds-icon-custom-39 { | |
| background-color: #4fbe75; | |
| color: white; } | |
| .slds-icon-custom-custom18, | |
| .slds-icon-custom-18 { | |
| background-color: #4dca76; | |
| color: white; } | |
| .slds-icon-custom-custom29, | |
| .slds-icon-custom-29 { | |
| background-color: #bdd25f; | |
| color: white; } | |
| .slds-icon-custom-custom19, | |
| .slds-icon-custom-19 { | |
| background-color: #3abeb1; | |
| color: white; } | |
| .slds-icon-standard-task-2 { | |
| background-color: #4bc076; } | |
| .slds-icon-standard-contact { | |
| background-color: #a094ed; } | |
| .slds-icon-standard-multi-select-checkbox { | |
| background-color: #969492; } | |
| .slds-icon-standard-work-order { | |
| background-color: #50e3c2; } | |
| .slds-icon-standard-post { | |
| background-color: #65cae4; } | |
| .slds-icon-standard-global-constant { | |
| background-color: #54698d; } | |
| .slds-icon-standard-carousel { | |
| background-color: #6bbd6e; } | |
| .slds-icon-standard-resource-skill { | |
| background-color: #45c173; } | |
| .slds-icon-standard-system-and-global-variable { | |
| background-color: #54698d; } | |
| .slds-icon-standard-goals { | |
| background-color: #56aadf; } | |
| .slds-icon-standard-investment-account { | |
| background-color: #4bc076; } | |
| .slds-icon-standard-store { | |
| background-color: #04844b; } | |
| .slds-icon-standard-output { | |
| background-color: #439cba; } | |
| .slds-icon-standard-store-group { | |
| background-color: #3c97dd; } | |
| .slds-icon-standard-all { | |
| background-color: #54698d; } | |
| .slds-icon-standard-picklist-choice { | |
| background-color: #54698d; } | |
| .slds-icon-standard-choice { | |
| background-color: #54698d; } | |
| .slds-icon-standard-app { | |
| background-color: #fcb95b; } | |
| .slds-icon-standard-default { | |
| background-color: #8199af; } | |
| .slds-icon-standard-case-milestone { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-today { | |
| background-color: #ef7ead; } | |
| .slds-icon-standard-buyer-account { | |
| background-color: #04844b; } | |
| .slds-icon-standard-lead-list { | |
| background-color: #f88962; } | |
| .slds-icon-standard-shift { | |
| background-color: #eb7092; } | |
| .slds-icon-standard-product-item-transaction { | |
| background-color: #f88962; } | |
| .slds-icon-standard-apex { | |
| background-color: #54698d; } | |
| .slds-icon-standard-answer-private { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-opportunity-contact-role { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-retail-banking-console { | |
| background-color: #00afa0; } | |
| .slds-icon-standard-channel-program-members { | |
| background-color: #0eb58a; } | |
| .slds-icon-standard-apps-admin { | |
| background-color: #9895ee; } | |
| .slds-icon-standard-datadotcom { | |
| background-color: #1589ee; } | |
| .slds-icon-standard-product-item { | |
| background-color: #769ed9; } | |
| .slds-icon-standard-metrics { | |
| background-color: #56aadf; } | |
| .slds-icon-standard-topic2 { | |
| background-color: #56aad0; } | |
| .slds-icon-standard-partner-fund-allocation { | |
| background-color: #0eb58a; } | |
| .slds-icon-standard-approval { | |
| background-color: #50cc7a; } | |
| .slds-icon-standard-work-queue { | |
| background-color: #54698d; } | |
| .slds-icon-standard-iot-orchestrations { | |
| background-color: #2a739e; } | |
| .slds-icon-standard-visualforce-page { | |
| background-color: #fcb95b; } | |
| .slds-icon-standard-person-account { | |
| background-color: #7f8de1; } | |
| .slds-icon-standard-entity { | |
| background-color: #f88962; } | |
| .slds-icon-standard-service-territory-location { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-entitlement-policy { | |
| background-color: #04844b; } | |
| .slds-icon-standard-order-item { | |
| background-color: #769ed3; } | |
| .slds-icon-standard-read-receipts { | |
| background-color: #4bc076; } | |
| .slds-icon-standard-maintenance-asset { | |
| background-color: #2a739e; } | |
| .slds-icon-standard-loop { | |
| background-color: #ff9a3c; } | |
| .slds-icon-standard-portal-roles-and-subordinates { | |
| background-color: #7a9ae6; } | |
| .slds-icon-standard-work-capacity-limit { | |
| background-color: #0079bc; } | |
| .slds-icon-standard-constant { | |
| background-color: #54698d; } | |
| .slds-icon-standard-marketing-actions { | |
| background-color: #6bbd6e; } | |
| .slds-icon-standard-case-transcript { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-timesheet-entry { | |
| background-color: #7dc37d; } | |
| .slds-icon-standard-multi-picklist { | |
| background-color: #969492; } | |
| .slds-icon-standard-visit-templates { | |
| background-color: #3c97dd; } | |
| .slds-icon-standard-task { | |
| background-color: #4bc076; } | |
| .slds-icon-standard-answer-best { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-orders { | |
| background-color: #769ed9; } | |
| .slds-icon-standard-past-chat { | |
| background-color: #f88960; } | |
| .slds-icon-standard-feedback { | |
| background-color: #6da1ea; } | |
| .slds-icon-standard-action-list-component { | |
| background-color: #5876a3; } | |
| .slds-icon-standard-opportunity-splits { | |
| background-color: #fcb95b; } | |
| .slds-icon-standard-messaging-user { | |
| background-color: #34becd; } | |
| .slds-icon-standard-trailhead { | |
| background-color: #4b8b44; } | |
| .slds-icon-standard-entitlements { | |
| background-color: #b781d3; } | |
| .slds-icon-standard-formula { | |
| background-color: #54698d; } | |
| .slds-icon-standard-case-log-a-call { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-thanks-loading { | |
| background-color: #b8c3ce; } | |
| .slds-icon-standard-service-appointment-capacity-usage { | |
| background-color: #0079bc; } | |
| .slds-icon-standard-channel-program-levels { | |
| background-color: #0eb58a; } | |
| .slds-icon-standard-letterhead { | |
| background-color: #3c97dd; } | |
| .slds-icon-standard-email-chatter { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-announcement { | |
| background-color: #62b7ed; } | |
| .slds-icon-standard-bot { | |
| background-color: #54698f; } | |
| .slds-icon-standard-macros { | |
| background-color: #47cfd2; } | |
| .slds-icon-standard-dashboard-ea { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-job-profile { | |
| background-color: #eb7092; } | |
| .slds-icon-standard-steps { | |
| background-color: #54698d; } | |
| .slds-icon-standard-asset-relationship { | |
| background-color: #fa975c; } | |
| .slds-icon-standard-high-velocity-sales { | |
| background-color: #47cfc9; } | |
| .slds-icon-standard-brand { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-visits { | |
| background-color: #3c97dd; } | |
| .slds-icon-standard-coaching { | |
| background-color: #f67594; } | |
| .slds-icon-standard-record-lookup { | |
| background-color: #eb7092; } | |
| .slds-icon-standard-lightning-component { | |
| background-color: #969492; } | |
| .slds-icon-standard-search { | |
| background-color: #62b7ed; } | |
| .slds-icon-standard-connected-apps { | |
| background-color: #9895ee; } | |
| .slds-icon-standard-work-type-group { | |
| background-color: #0079bc; } | |
| .slds-icon-standard-education { | |
| background-color: #3c97dd; } | |
| .slds-icon-standard-work-type { | |
| background-color: #54698d; } | |
| .slds-icon-standard-environment-hub { | |
| background-color: #54698d; } | |
| .slds-icon-standard-cms { | |
| background-color: #88c651; } | |
| .slds-icon-standard-thanks { | |
| background-color: #e9696e; } | |
| .slds-icon-standard-service-territory-member { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-user-role { | |
| background-color: #8fc96e; } | |
| .slds-icon-standard-work-capacity-usage { | |
| background-color: #0079bc; } | |
| .slds-icon-standard-record-create { | |
| background-color: #eb7092; } | |
| .slds-icon-standard-campaign-members { | |
| background-color: #f49756; } | |
| .slds-icon-standard-retail-banking { | |
| background-color: #00d2be; } | |
| .slds-icon-standard-portal-roles { | |
| background-color: #fb8950; } | |
| .slds-icon-standard-calibration { | |
| background-color: #47cfd2; } | |
| .slds-icon-standard-answer-public { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-display-text { | |
| background-color: #969492; } | |
| .slds-icon-standard-unmatched { | |
| background-color: #62b7ed; } | |
| .slds-icon-standard-partners { | |
| background-color: #0eb58a; } | |
| .slds-icon-standard-email-iq { | |
| background-color: #a094ed; } | |
| .slds-icon-standard-service-crew { | |
| background-color: #fa975c; } | |
| .slds-icon-standard-resource-capacity { | |
| background-color: #45c173; } | |
| .slds-icon-standard-channel-programs { | |
| background-color: #0eb58a; } | |
| .slds-icon-standard-quip { | |
| background-color: #d3451d; } | |
| .slds-icon-standard-quip-sheet { | |
| background-color: #30c85a; } | |
| .slds-icon-standard-timeslot { | |
| background-color: #fab24c; } | |
| .slds-icon-standard-live-chat { | |
| background-color: #f88960; } | |
| .slds-icon-standard-sobject-collection { | |
| background-color: #54698d; } | |
| .slds-icon-standard-user { | |
| background-color: #34becd; } | |
| .slds-icon-standard-client { | |
| background-color: #00d2be; } | |
| .slds-icon-standard-screen { | |
| background-color: #1589ee; } | |
| .slds-icon-standard-portal { | |
| background-color: #aec770; } | |
| .slds-icon-standard-partner-fund-request { | |
| background-color: #0eb58a; } | |
| .slds-icon-standard-resource-preference { | |
| background-color: #45c173; } | |
| .slds-icon-standard-first-non-empty { | |
| background-color: #e9696e; } | |
| .slds-icon-standard-customer-360 { | |
| background-color: #032e61; } | |
| .slds-icon-standard-resource-absence { | |
| background-color: #45c173; } | |
| .slds-icon-standard-text-template { | |
| background-color: #54698d; } | |
| .slds-icon-standard-entitlement-template { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-lightning-usage { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-entitlement { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-empty { | |
| background-color: #8199af; } | |
| .slds-icon-standard-text { | |
| background-color: #969492; } | |
| .slds-icon-standard-delegated-account { | |
| background-color: #04844b; } | |
| .slds-icon-standard-fulfillment-order { | |
| background-color: #b9ac91; } | |
| .slds-icon-standard-case-email { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-account { | |
| background-color: #7f8de1; } | |
| .slds-icon-standard-assignment { | |
| background-color: #ff9a3c; } | |
| .slds-icon-standard-wealth-management-console { | |
| background-color: #00afa0; } | |
| .slds-icon-standard-task2 { | |
| background-color: #4bc076; } | |
| .slds-icon-standard-code-playground { | |
| background-color: #54698d; } | |
| .slds-icon-standard-social { | |
| background-color: #ea74a2; } | |
| .slds-icon-standard-endorsement { | |
| background-color: #8b9ae3; } | |
| .slds-icon-standard-folder { | |
| background-color: #8b9ae3; } | |
| .slds-icon-standard-service-crew-member { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-flow { | |
| background-color: #0079bc; } | |
| .slds-icon-standard-omni-supervisor { | |
| background-color: #8a76f0; } | |
| .slds-icon-standard-product { | |
| background-color: #b781d3; } | |
| .slds-icon-standard-topic { | |
| background-color: #56aadf; } | |
| .slds-icon-standard-product-required { | |
| background-color: #ef6e64; } | |
| .slds-icon-standard-dynamic-record-choice { | |
| background-color: #54698d; } | |
| .slds-icon-standard-process { | |
| background-color: #0079bc; } | |
| .slds-icon-standard-people { | |
| background-color: #34becd; } | |
| .slds-icon-standard-javascript-buttons { | |
| background-color: #fcb95b; } | |
| .slds-icon-standard-reward { | |
| background-color: #e9696e; } | |
| .slds-icon-standard-performance { | |
| background-color: #f8b156; } | |
| .slds-icon-standard-case-comment { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-sales-channel { | |
| background-color: #2a739e; } | |
| .slds-icon-standard-apex-plugin { | |
| background-color: #54698d; } | |
| .slds-icon-standard-campaign { | |
| background-color: #f49756; } | |
| .slds-icon-standard-contact-request { | |
| background-color: #fb8954; } | |
| .slds-icon-standard-business-hours { | |
| background-color: #7dc37d; } | |
| .slds-icon-standard-evernote { | |
| background-color: #86c86f; } | |
| .slds-icon-standard-service-territory { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-case { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-currency { | |
| background-color: #969492; } | |
| .slds-icon-standard-record { | |
| background-color: #7dc37d; } | |
| .slds-icon-standard-queue { | |
| background-color: #54698d; } | |
| .slds-icon-standard-contract-line-item { | |
| background-color: #6ec06e; } | |
| .slds-icon-standard-skill-entity { | |
| background-color: #8b9ae3; } | |
| .slds-icon-standard-skill { | |
| background-color: #fa975c; } | |
| .slds-icon-standard-operating-hours { | |
| background-color: #6b9ee2; } | |
| .slds-icon-standard-custom { | |
| background-color: #8199af; } | |
| .slds-icon-standard-related-list { | |
| background-color: #59bcab; } | |
| .slds-icon-standard-bot-training { | |
| background-color: #5876a3; } | |
| .slds-icon-standard-case-change-status { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-insurance-console { | |
| background-color: #00afa0; } | |
| .slds-icon-standard-contract { | |
| background-color: #6ec06e; } | |
| .slds-icon-standard-sobject { | |
| background-color: #969492; } | |
| .slds-icon-standard-sales-cadence-target { | |
| background-color: #54698d; } | |
| .slds-icon-standard-photo { | |
| background-color: #d7d1d1; } | |
| .slds-icon-standard-apps { | |
| background-color: #3c97dd; } | |
| .slds-icon-standard-timesheet { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-drafts { | |
| background-color: #6ca1e9; } | |
| .slds-icon-standard-outcome { | |
| background-color: #ff9a3c; } | |
| .slds-icon-standard-work-order-item { | |
| background-color: #33a8dc; } | |
| .slds-icon-standard-pricebook { | |
| background-color: #b781d3; } | |
| .slds-icon-standard-scan-card { | |
| background-color: #f39e58; } | |
| .slds-icon-standard-note { | |
| background-color: #e6d478; } | |
| .slds-icon-standard-buyer-group { | |
| background-color: #04844b; } | |
| .slds-icon-standard-opportunity { | |
| background-color: #fcb95b; } | |
| .slds-icon-standard-news { | |
| background-color: #7f8de1; } | |
| .slds-icon-standard-display-rich-text { | |
| background-color: #969492; } | |
| .slds-icon-standard-strategy { | |
| background-color: #4bc071; } | |
| .slds-icon-standard-call-history { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-report { | |
| background-color: #2ecbbe; } | |
| .slds-icon-standard-groups { | |
| background-color: #779ef2; } | |
| .slds-icon-standard-dashboard { | |
| background-color: #ef6e64; } | |
| .slds-icon-standard-generic-loading { | |
| background-color: #b8c3ce; } | |
| .slds-icon-standard-number-input { | |
| background-color: #969492; } | |
| .slds-icon-standard-address { | |
| background-color: #4bc076; } | |
| .slds-icon-standard-entity-milestone { | |
| background-color: #f49756; } | |
| .slds-icon-standard-wealth-management { | |
| background-color: #00d2be; } | |
| .slds-icon-standard-customers { | |
| background-color: #0eb58a; } | |
| .slds-icon-standard-story { | |
| background-color: #54698d; } | |
| .slds-icon-standard-service-appointment { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-maintenance-plan { | |
| background-color: #2a739e; } | |
| .slds-icon-standard-data-integration-hub { | |
| background-color: #2a739e; } | |
| .slds-icon-standard-hierarchy { | |
| background-color: #34becd; } | |
| .slds-icon-standard-partner-marketing-budget { | |
| background-color: #0eb58a; } | |
| .slds-icon-standard-skill-requirement { | |
| background-color: #fa975c; } | |
| .slds-icon-standard-location { | |
| background-color: #4bc076; } | |
| .slds-icon-standard-radio-button { | |
| background-color: #969492; } | |
| .slds-icon-standard-avatar-loading { | |
| background-color: #b8c3ce; } | |
| .slds-icon-standard-article { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-invocable-action { | |
| background-color: #54698d; } | |
| .slds-icon-standard-proposition { | |
| background-color: #3c97dd; } | |
| .slds-icon-standard-snippets { | |
| background-color: #0eb58a; } | |
| .slds-icon-standard-customer-portal-users { | |
| background-color: #3c97db; } | |
| .slds-icon-standard-actions-and-buttons { | |
| background-color: #fcb95b; } | |
| .slds-icon-standard-record-update { | |
| background-color: #eb7092; } | |
| .slds-icon-standard-shift-type { | |
| background-color: #eb7092; } | |
| .slds-icon-standard-log-a-call { | |
| background-color: #48c3cc; } | |
| .slds-icon-standard-quotes { | |
| background-color: #88c651; } | |
| .slds-icon-standard-question-feed { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-kanban { | |
| background-color: #3c97dd; } | |
| .slds-icon-standard-merge { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-dataset { | |
| background-color: #b070e6; } | |
| .slds-icon-standard-product-consumed { | |
| background-color: #55bc9c; } | |
| .slds-icon-standard-canvas { | |
| background-color: #8199af; } | |
| .slds-icon-standard-forecasts { | |
| background-color: #6bbd6e; } | |
| .slds-icon-standard-relationship { | |
| background-color: #3c97dd; } | |
| .slds-icon-standard-service-resource { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-filter { | |
| background-color: #1539ee; } | |
| .slds-icon-standard-sales-path { | |
| background-color: #2a739e; } | |
| .slds-icon-standard-events { | |
| background-color: #3c97db; } | |
| .slds-icon-standard-sms { | |
| background-color: #88c651; } | |
| .slds-icon-standard-rtc-presence { | |
| background-color: #47cfd2; } | |
| .slds-icon-standard-avatar { | |
| background-color: #62b7ed; } | |
| .slds-icon-standard-record-delete { | |
| background-color: #eb7092; } | |
| .slds-icon-standard-solution { | |
| background-color: #8fc972; } | |
| .slds-icon-standard-partner-fund-claim { | |
| background-color: #0eb58a; } | |
| .slds-icon-standard-individual { | |
| background-color: #3c97dd; } | |
| .slds-icon-standard-custom-notification { | |
| background-color: #6bb7e4; } | |
| .slds-icon-standard-date-input { | |
| background-color: #969492; } | |
| .slds-icon-standard-catalog { | |
| background-color: #027e46; } | |
| .slds-icon-standard-template { | |
| background-color: #3c97dd; } | |
| .slds-icon-standard-shipment { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-event { | |
| background-color: #eb7092; } | |
| .slds-icon-standard-insurance { | |
| background-color: #00d2be; } | |
| .slds-icon-standard-live-chat-visitor { | |
| background-color: #f68960; } | |
| .slds-icon-standard-textarea { | |
| background-color: #969492; } | |
| .slds-icon-standard-picklist-type { | |
| background-color: #969492; } | |
| .slds-icon-standard-survey { | |
| background-color: #319fd6; } | |
| .slds-icon-standard-link { | |
| background-color: #7a9ae6; } | |
| .slds-icon-standard-messaging-session { | |
| background-color: #34becd; } | |
| .slds-icon-standard-list-email { | |
| background-color: #8baeb5; } | |
| .slds-icon-standard-recycle-bin { | |
| background-color: #1589e4; } | |
| .slds-icon-standard-document { | |
| background-color: #baac93; } | |
| .slds-icon-standard-product-transfer { | |
| background-color: #f88962; } | |
| .slds-icon-standard-instore-locations { | |
| background-color: #54698d; } | |
| .slds-icon-standard-recent { | |
| background-color: #6ca1e9; } | |
| .slds-icon-standard-password { | |
| background-color: #969492; } | |
| .slds-icon-standard-branch-merge { | |
| background-color: #e9696e; } | |
| .slds-icon-standard-insights { | |
| background-color: #ec94ed; } | |
| .slds-icon-standard-dropbox { | |
| background-color: #52aef9; } | |
| .slds-icon-standard-file { | |
| background-color: #baac93; } | |
| .slds-icon-standard-currency-input { | |
| background-color: #969492; } | |
| .slds-icon-standard-variable { | |
| background-color: #54698d; } | |
| .slds-icon-standard-team-member { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-agent-session { | |
| background-color: #f88960; } | |
| .slds-icon-standard-group-loading { | |
| background-color: #b8c3ce; } | |
| .slds-icon-standard-lead { | |
| background-color: #f88962; } | |
| .slds-icon-standard-email { | |
| background-color: #95aec5; } | |
| .slds-icon-standard-service-contract { | |
| background-color: #8a76f0; } | |
| .slds-icon-standard-decision { | |
| background-color: #ff9a3c; } | |
| .slds-icon-standard-snippet { | |
| background-color: #a094ed; } | |
| .slds-icon-standard-entitlement-process { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-contact-list { | |
| background-color: #a094ed; } | |
| .slds-icon-standard-planogram { | |
| background-color: #3c97dd; } | |
| .slds-icon-standard-channel-program-history { | |
| background-color: #0eb58a; } | |
| .slds-icon-standard-question-best { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-collection-variable { | |
| background-color: #54698d; } | |
| .slds-icon-standard-knowledge { | |
| background-color: #ec94ed; } | |
| .slds-icon-standard-date-time { | |
| background-color: #969492; } | |
| .slds-icon-standard-category { | |
| background-color: #027e46; } | |
| .slds-icon-standard-textbox { | |
| background-color: #969492; } | |
| .slds-icon-standard-lead-insights { | |
| background-color: #22b0e6; } | |
| .slds-icon-standard-waits { | |
| background-color: #ff9a3c; } | |
| .slds-icon-standard-concur { | |
| background-color: #4cc3c7; } | |
| .slds-icon-standard-feed { | |
| background-color: #62b7ed; } | |
| .slds-icon-standard-sort { | |
| background-color: #1539ee; } | |
| .slds-icon-standard-messaging-conversation { | |
| background-color: #34becd; } | |
| .slds-icon-standard-service-report { | |
| background-color: #7e8be4; } | |
| .slds-icon-standard-iot-context { | |
| background-color: #2a739e; } | |
| .slds-icon-standard-call { | |
| background-color: #f2cf5b; } | |
| .slds-icon-standard-stage { | |
| background-color: #ff9a3c; } | |
| .slds-icon-standard-sales-cadence { | |
| background-color: #54698d; } | |
| .slds-icon-standard-product-request-line-item { | |
| background-color: #88c651; } | |
| .slds-icon-standard-return-order-line-item { | |
| background-color: #009688; } | |
| .slds-icon-standard-chart { | |
| background-color: #1fcaa0; } | |
| .slds-icon-standard-quick-text { | |
| background-color: #62b7e5; } | |
| .slds-icon-standard-home { | |
| background-color: #ef7ead; } | |
| .slds-icon-standard-sossession { | |
| background-color: #54698d; } | |
| .slds-icon-standard-stage-collection { | |
| background-color: #ff9a3c; } | |
| .slds-icon-standard-product-request { | |
| background-color: #88c651; } | |
| .slds-icon-standard-logging { | |
| background-color: #00a1df; } | |
| .slds-icon-standard-assigned-resource { | |
| background-color: #45c173; } | |
| .slds-icon-standard-return-order { | |
| background-color: #009688; } | |
| .slds-icon-standard-poll { | |
| background-color: #699be1; } | |
| .slds-icon-standard-household { | |
| background-color: #00afa0; } | |
| /** | |
| * @selector .slds-icon | |
| * @restrict .slds-icon_container svg, svg | |
| */ | |
| .slds-icon { | |
| width: 2rem; | |
| height: 2rem; | |
| fill: white; } | |
| [class*='slds-icon-standard-'] .slds-icon, [class*='slds-icon-standard-'].slds-icon, | |
| [class*='slds-icon-action-'] .slds-icon, | |
| [class*='slds-icon-action-'].slds-icon, | |
| [class*='slds-icon-custom-'] .slds-icon, | |
| [class*='slds-icon-custom-'].slds-icon { | |
| border-radius: 0.25rem; } | |
| /** | |
| * @selector .slds-icon_xx-small | |
| * @restrict .slds-icon | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-icon_xx-small, | |
| .slds-icon--xx-small { | |
| width: 0.875rem; | |
| height: 0.875rem; | |
| line-height: 1; } | |
| /** | |
| * @selector .slds-icon_x-small | |
| * @restrict .slds-icon, .slds-button__icon | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-icon_x-small, | |
| .slds-icon--x-small { | |
| width: 1rem; | |
| height: 1rem; | |
| line-height: 1; } | |
| /** | |
| * @selector .slds-icon_small | |
| * @restrict .slds-icon | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-icon_small, | |
| .slds-icon--small { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| line-height: 1; } | |
| /** | |
| * @selector .slds-icon_large | |
| * @restrict .slds-icon | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-icon_large, | |
| .slds-icon--large { | |
| width: 3rem; | |
| height: 3rem; } | |
| /** | |
| * @summary Changes the icon fill color to match the default state | |
| * | |
| * @selector .slds-icon-text-default | |
| * @restrict .slds-icon | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-icon-text-default { | |
| fill: #706e6b; } | |
| /** | |
| * @summary Changes the icon fill color to match the warning state | |
| * | |
| * @selector .slds-icon-text-warning | |
| * @restrict .slds-icon | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-icon-text-warning { | |
| fill: #ffb75d; } | |
| /** | |
| * @summary Changes the icon fill color to match the success state | |
| * | |
| * @selector .slds-icon-text-success | |
| * @restrict .slds-icon | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-icon-text-success { | |
| fill: #027e46; } | |
| /** | |
| * @summary Changes the icon fill color to match the error state | |
| * | |
| * @selector .slds-icon-text-error | |
| * @restrict .slds-icon | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-icon-text-error { | |
| fill: #c23934; } | |
| /** | |
| * @selector .slds-icon-text-light | |
| * @restrict .slds-icon, svg | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-icon-text-light { | |
| fill: #b0adab; } | |
| /** | |
| * @selector .slds-current-color | |
| * @restrict * | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-current-color .slds-icon { | |
| fill: currentColor; } | |
| /** | |
| * The icon container of icon in a disabled element | |
| * | |
| * @selector .slds-icon_disabled | |
| * @restrict .slds-icon_container | |
| */ | |
| .slds-icon_disabled { | |
| background-color: currentColor; } | |
| /** | |
| * @summary Initializes an accordion list with more than one section that will have its display toggled by invoking an interaction on the summary title | |
| * | |
| * @name base | |
| * @selector .slds-accordion | |
| * @restrict ul | |
| * @variant | |
| * @support dev-ready | |
| */ | |
| .slds-accordion { | |
| position: relative; } | |
| /** | |
| * @summary List item for each accordion section | |
| * @selector .slds-accordion__list-item | |
| * @restrict .slds-accordion li | |
| */ | |
| .slds-accordion__list-item { | |
| border-top: 1px solid #dddbda; } | |
| .slds-accordion__list-item:first-child { | |
| border-top: 0; } | |
| /** | |
| * @summary Summary title for each expandable panel inside of an accordion | |
| * @selector .slds-accordion__summary | |
| * @restrict .slds-accordion__section div | |
| */ | |
| .slds-accordion__summary { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| /** | |
| * @summary Summary title for each expandable panel inside of an accordion | |
| * @selector .slds-accordion__summary-heading | |
| * @restrict .slds-accordion__section h3 | |
| */ | |
| .slds-accordion__summary-heading { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| font-size: 1rem; | |
| line-height: 1.25; } | |
| .slds-accordion__summary-heading .slds-button:focus { | |
| text-decoration: underline; | |
| box-shadow: none; } | |
| /** | |
| * @summary Actionable button inside of accordion summary that would toggle the visibility of each section | |
| * @selector .slds-accordion__summary-action | |
| * @restrict .slds-accordion__summary button | |
| */ | |
| .slds-accordion__summary-action { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| min-width: 0; } | |
| /** | |
| * @summary Icon inside of actionable button within an accordion section | |
| * @selector .slds-accordion__summary-action-icon | |
| * @restrict .slds-accordion__summary-action svg | |
| */ | |
| .slds-accordion__summary-action-icon { | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| transform: rotate(-90deg); } | |
| [dir="rtl"] .slds-accordion__summary-action-icon { | |
| transform: rotate(90deg); } | |
| /** | |
| * @summary Each expandable panel inside of an accordion | |
| * @selector .slds-accordion__section | |
| * @restrict .slds-accordion section | |
| */ | |
| .slds-accordion__section { | |
| padding: 0.75rem; } | |
| /** | |
| * @summary Each expandable panel inside of an accordion | |
| * @selector .slds-accordion__content | |
| * @restrict .slds-accordion__section div | |
| */ | |
| .slds-accordion__content { | |
| overflow: hidden; | |
| visibility: hidden; | |
| opacity: 0; | |
| height: 0; } | |
| /** | |
| * @name toggle section | |
| * @summary Toggle visibility of accordion section + rotate icon | |
| * @selector .slds-is-open | |
| * @restrict .slds-accordion__section | |
| * @modifier | |
| * @group visibility | |
| */ | |
| .slds-is-open > .slds-accordion__summary { | |
| margin-bottom: 0.75rem; } | |
| .slds-is-open > .slds-accordion__summary .slds-accordion__summary-action-icon { | |
| transform: rotate(0deg); } | |
| .slds-is-open > .slds-accordion__content { | |
| overflow: visible; | |
| visibility: visible; | |
| opacity: 1; | |
| height: auto; } | |
| /** | |
| * @name ellie | |
| * @selector .slds-icon-ellie | |
| * @restrict span | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-icon-ellie { | |
| width: calc(14rem / 16); | |
| height: calc(14rem / 16); | |
| display: inline-block; | |
| overflow: hidden; | |
| /** | |
| * @summary Add .slds-is-animated to the SVG to enhance the icon with an animation. | |
| * | |
| * @selector .slds-is-animated | |
| * @restrict .slds-icon-ellie | |
| */ | |
| /** | |
| * @summary Add .slds-is-paused to the SVG to pause the icon with an animation. | |
| * | |
| * @selector .slds-is-paused | |
| * @restrict .slds-icon-ellie | |
| */ } | |
| .slds-icon-ellie.slds-is-animated { | |
| will-change: transform; | |
| animation: slds-icon-ellie-pop 0.3s ease-in 2s 1 both; } | |
| .slds-icon-ellie.slds-is-animated svg { | |
| will-change: transform; | |
| animation: slds-icon-ellie 1.2s steps(20) 2.3s 2 alternate; } | |
| .slds-icon-ellie.slds-is-paused, | |
| .slds-icon-ellie.slds-is-paused svg { | |
| animation-play-state: paused; } | |
| .slds-icon-ellie svg { | |
| width: 17.5rem; | |
| vertical-align: top; | |
| color: #00a0e3; } | |
| .slds-icon-ellie circle:nth-child(2n + 1) { | |
| fill: currentColor; | |
| stroke: currentColor; | |
| stroke-width: 4px; } | |
| .slds-icon-ellie circle:nth-child(2n) { | |
| fill: #fff; | |
| stroke: #fff; | |
| stroke-width: 1px; } | |
| .slds-icon-ellie circle:nth-child(1), | |
| .slds-icon-ellie circle:nth-last-child(2) { | |
| stroke-width: 4px; } | |
| .slds-icon-ellie circle:nth-child(2), | |
| .slds-icon-ellie circle:nth-last-child(1) { | |
| stroke-width: 1px; } | |
| .slds-icon-ellie circle:nth-child(3), | |
| .slds-icon-ellie circle:nth-last-child(4) { | |
| stroke-width: 3.95px; } | |
| .slds-icon-ellie circle:nth-child(4), | |
| .slds-icon-ellie circle:nth-last-child(3) { | |
| stroke-width: 1.2px; } | |
| .slds-icon-ellie circle:nth-child(5), | |
| .slds-icon-ellie circle:nth-last-child(6) { | |
| stroke-width: 3.85px; } | |
| .slds-icon-ellie circle:nth-child(6), | |
| .slds-icon-ellie circle:nth-last-child(5) { | |
| stroke-width: 1.4px; } | |
| .slds-icon-ellie circle:nth-child(7), | |
| .slds-icon-ellie circle:nth-last-child(8) { | |
| stroke-width: 3.6px; } | |
| .slds-icon-ellie circle:nth-child(8), | |
| .slds-icon-ellie circle:nth-last-child(7) { | |
| stroke-width: 1.7px; } | |
| .slds-icon-ellie circle:nth-child(9), | |
| .slds-icon-ellie circle:nth-last-child(10) { | |
| stroke-width: 3.3px; } | |
| .slds-icon-ellie circle:nth-child(10), | |
| .slds-icon-ellie circle:nth-last-child(9) { | |
| stroke-width: 2px; } | |
| .slds-icon-ellie circle:nth-child(11), | |
| .slds-icon-ellie circle:nth-last-child(12) { | |
| stroke-width: 3.2px; } | |
| .slds-icon-ellie circle:nth-child(12), | |
| .slds-icon-ellie circle:nth-last-child(11) { | |
| stroke-width: 2.4px; } | |
| .slds-icon-ellie circle:nth-child(13), | |
| .slds-icon-ellie circle:nth-last-child(14) { | |
| stroke-width: 3.15px; } | |
| .slds-icon-ellie circle:nth-child(14), | |
| .slds-icon-ellie circle:nth-last-child(13) { | |
| stroke-width: 2.8px; } | |
| .slds-icon-ellie circle:nth-child(15), | |
| .slds-icon-ellie circle:nth-last-child(16) { | |
| stroke-width: 3.1px; } | |
| .slds-icon-ellie circle:nth-child(16), | |
| .slds-icon-ellie circle:nth-last-child(15) { | |
| stroke-width: 3.25px; } | |
| .slds-icon-ellie circle:nth-child(17), | |
| .slds-icon-ellie circle:nth-last-child(18) { | |
| stroke-width: 3.05px; } | |
| .slds-icon-ellie circle:nth-child(18), | |
| .slds-icon-ellie circle:nth-last-child(17) { | |
| stroke-width: 3.7px; } | |
| .slds-icon-ellie circle:nth-child(19), | |
| .slds-icon-ellie circle:nth-last-child(20) { | |
| stroke-width: 3px; } | |
| .slds-icon-ellie circle:nth-child(20), | |
| .slds-icon-ellie circle:nth-last-child(19) { | |
| stroke-width: 4px; } | |
| @keyframes slds-icon-ellie-pop { | |
| 0% { | |
| transform: scale(0.2); } | |
| 70% { | |
| transform: scale(1.1); } | |
| 90% { | |
| transform: scale(0.7); } | |
| 100% { | |
| transform: scale(1); } } | |
| @keyframes slds-icon-ellie { | |
| to { | |
| transform: translateX(-17.5rem); } } | |
| /** | |
| * @name eq | |
| * @selector .slds-icon-eq | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-icon-eq { | |
| position: relative; | |
| width: calc(14rem / 16); | |
| height: calc(14rem / 16); | |
| /** | |
| * @summary Turn animation on for animated icon | |
| * | |
| * @selector .slds-is-animated | |
| * @restrict .slds-icon-eq | |
| */ } | |
| .slds-icon-eq.slds-is-animated .slds-icon-eq__bar { | |
| animation: slds-icon-eq 0.25s ease-in-out infinite alternate; | |
| will-change: transform; | |
| height: 0.188rem; } | |
| .slds-icon-eq.slds-is-animated .slds-icon-eq__bar:nth-of-type(2) { | |
| animation-duration: 0.65s; } | |
| .slds-icon-eq.slds-is-animated .slds-icon-eq__bar:nth-of-type(3) { | |
| animation-duration: 0.35s; } | |
| /** | |
| * @summary Vertical bar for equalizer icon | |
| * | |
| * @selector .slds-icon-eq__bar | |
| * @restrict .slds-icon-eq div | |
| */ | |
| .slds-icon-eq__bar { | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: calc(4rem / 16); | |
| height: 0.562rem; | |
| background: #0070d2; | |
| transform: scaleY(1); | |
| transform-origin: bottom; } | |
| .slds-icon-eq__bar:nth-of-type(2) { | |
| left: calc(5rem / 16); | |
| height: 0.875rem; } | |
| .slds-icon-eq__bar:nth-of-type(3) { | |
| left: calc(10rem / 16); | |
| height: 0.75rem; } | |
| @keyframes slds-icon-eq { | |
| to { | |
| transform: scaleY(4.667); } } | |
| /** | |
| * @summary Initializes score icon | |
| * | |
| * @name score | |
| * @selector .slds-icon-score | |
| * @restrict span | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-icon-score { | |
| display: inline-block; | |
| width: 0.312rem; | |
| height: 0.312rem; | |
| position: relative; } | |
| [class*="slds-icon-score__"] { | |
| position: absolute; | |
| opacity: 0; | |
| transition: opacity 0.4s ease-in-out; | |
| will-change: opacity; | |
| stroke-width: 1.125px; } | |
| /** | |
| * @summary Positive score icon | |
| * | |
| * @selector .slds-icon-score__positive | |
| * @restrict .slds-icon-score svg | |
| */ | |
| .slds-icon-score__positive { | |
| fill: #30a664; | |
| stroke: #30a664; } | |
| /** | |
| * @summary Negative score icon | |
| * | |
| * @selector .slds-icon-score__negative | |
| * @restrict .slds-icon-score svg | |
| */ | |
| .slds-icon-score__negative { | |
| fill: transparent; | |
| stroke: #d2504c; } | |
| [data-slds-state="positive"] .slds-icon-score__positive, | |
| [data-slds-state="negative"] .slds-icon-score__negative { | |
| opacity: 1; } | |
| /** | |
| * @summary Initializes strength icon | |
| * | |
| * @name strength | |
| * @selector .slds-icon-strength | |
| * @restrict span | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-icon-strength { | |
| width: 1.6875rem; | |
| height: 0.4375rem; | |
| display: inline-block; | |
| /** | |
| * @summary Add .slds-is-animated to the SVG to enhance the icon with an animation. | |
| * | |
| * @selector .slds-is-animated | |
| * @restrict .slds-icon-strength | |
| */ | |
| /** | |
| * @summary Add .slds-is-paused to the SVG to pause the icon with an animation. | |
| * | |
| * @selector .slds-is-paused | |
| * @restrict .slds-icon-strength | |
| */ } | |
| .slds-icon-strength circle { | |
| stroke-width: 0.95px; | |
| fill: transparent; | |
| stroke: #ccc; | |
| transition: fill 0.4s ease-in-out, stroke 0.4s ease-in-out; | |
| will-change: fill, stroke; } | |
| .slds-icon-strength[data-slds-strength="1"] circle:nth-child(1), | |
| .slds-icon-strength[data-slds-strength="2"] circle:nth-child(1), | |
| .slds-icon-strength[data-slds-strength="2"] circle:nth-child(2), | |
| .slds-icon-strength[data-slds-strength="3"] circle:nth-child(1), | |
| .slds-icon-strength[data-slds-strength="3"] circle:nth-child(2), | |
| .slds-icon-strength[data-slds-strength="3"] circle:nth-child(3) { | |
| fill: #04844b; | |
| stroke: #04844b; } | |
| .slds-icon-strength[data-slds-strength="-1"] circle:nth-child(1), | |
| .slds-icon-strength[data-slds-strength="-2"] circle:nth-child(1), | |
| .slds-icon-strength[data-slds-strength="-2"] circle:nth-child(2), | |
| .slds-icon-strength[data-slds-strength="-3"] circle:nth-child(1), | |
| .slds-icon-strength[data-slds-strength="-3"] circle:nth-child(2), | |
| .slds-icon-strength[data-slds-strength="-3"] circle:nth-child(3) { | |
| fill: #ffdde1; | |
| stroke: #c23934; } | |
| .slds-icon-strength.slds-is-animated circle { | |
| animation: slds-icon-strength-positive-load 0.4s 1s ease-in-out alternate both paused; } | |
| .slds-icon-strength.slds-is-animated circle:nth-child(2) { | |
| animation-delay: 1.4s; } | |
| .slds-icon-strength.slds-is-animated circle:nth-child(3) { | |
| animation-delay: 1.8s; } | |
| .slds-icon-strength.slds-is-animated[data-slds-strength^="-"] circle { | |
| animation-name: slds-icon-strength-negative-load; } | |
| .slds-icon-strength.slds-is-animated[data-slds-strength="-1"] circle:nth-child(1), | |
| .slds-icon-strength.slds-is-animated[data-slds-strength="-2"] circle:nth-child(1), | |
| .slds-icon-strength.slds-is-animated[data-slds-strength="-2"] circle:nth-child(2), | |
| .slds-icon-strength.slds-is-animated[data-slds-strength="-3"] circle:nth-child(1), | |
| .slds-icon-strength.slds-is-animated[data-slds-strength="-3"] circle:nth-child(2), | |
| .slds-icon-strength.slds-is-animated[data-slds-strength="-3"] circle:nth-child(3), | |
| .slds-icon-strength.slds-is-animated[data-slds-strength="1"] circle:nth-child(1), | |
| .slds-icon-strength.slds-is-animated[data-slds-strength="2"] circle:nth-child(1), | |
| .slds-icon-strength.slds-is-animated[data-slds-strength="2"] circle:nth-child(2), | |
| .slds-icon-strength.slds-is-animated[data-slds-strength="3"] circle:nth-child(1), | |
| .slds-icon-strength.slds-is-animated[data-slds-strength="3"] circle:nth-child(2), | |
| .slds-icon-strength.slds-is-animated[data-slds-strength="3"] circle:nth-child(3) { | |
| animation-play-state: running; } | |
| .slds-icon-strength.slds-is-paused circle { | |
| /* stylelint-disable declaration-no-important */ | |
| animation-play-state: paused !important; | |
| /* stylelint-enable declaration-no-important */ } | |
| @keyframes slds-icon-strength-positive-load { | |
| 0% { | |
| fill: transparent; | |
| stroke: #ccc; } | |
| 100% { | |
| fill: #04844b; | |
| stroke: #04844b; } } | |
| @keyframes slds-icon-strength-negative-load { | |
| 0% { | |
| fill: transparent; | |
| stroke: #ccc; } | |
| 100% { | |
| fill: #ffdde1; | |
| stroke: #c23934; } } | |
| /** | |
| * @summary Initializes trend icon | |
| * | |
| * @name trend | |
| * @selector .slds-icon-trend | |
| * @restrict span | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-icon-trend { | |
| width: 1rem; | |
| height: 1rem; | |
| display: inline-block; | |
| /** | |
| * @summary Add .slds-is-animated to the SVG to enhance the icon with an animation. | |
| * | |
| * @selector .slds-is-animated | |
| * @restrict .slds-icon-trend | |
| */ | |
| /** | |
| * @summary Add .slds-is-paused to the SVG to pause the icon with an animation. | |
| * | |
| * @selector .slds-is-paused | |
| * @restrict .slds-icon-trend | |
| */ } | |
| .slds-icon-trend.slds-is-animated .slds-icon-trend__arrow { | |
| animation: slds-icon-trend-arrow 0.8s 0.4s ease-in-out both; } | |
| .slds-icon-trend.slds-is-animated .slds-icon-trend__circle { | |
| animation: slds-icon-trend-circle 0.8s ease-in-out both; } | |
| .slds-icon-trend.slds-is-paused .slds-icon-trend__arrow, | |
| .slds-icon-trend.slds-is-paused .slds-icon-trend__circle { | |
| animation-play-state: paused; } | |
| .slds-icon-trend[data-slds-trend="down"] { | |
| color: #c23934; | |
| transform: rotate(45deg); } | |
| .slds-icon-trend[data-slds-trend="neutral"] { | |
| color: #979797; } | |
| .slds-icon-trend[data-slds-trend="up"] { | |
| color: #028048; | |
| transform: rotate(-45deg); } | |
| .slds-icon-trend__arrow, | |
| .slds-icon-trend__circle { | |
| stroke: currentColor; | |
| fill: none; | |
| stroke-linecap: round; | |
| stroke-linejoin: round; | |
| stroke-width: 1.125px; } | |
| /** | |
| * @summary Arrow element inside of trend icon | |
| * | |
| * @selector .slds-icon-trend__arrow | |
| * @restrict .slds-icon-trend path | |
| */ | |
| .slds-icon-trend__arrow { | |
| stroke-dashoffset: 0.1px; | |
| stroke-dasharray: 39.175px; } | |
| /** | |
| * @summary Circle element inside of trend icon | |
| * | |
| * @selector .slds-icon-trend__circle | |
| * @restrict .slds-icon-trend circle | |
| */ | |
| .slds-icon-trend__circle { | |
| stroke-dasharray: 42.339px, 46.339px; } | |
| @keyframes slds-icon-trend-arrow { | |
| from { | |
| stroke-dashoffset: 40.3px; } } | |
| @keyframes slds-icon-trend-circle { | |
| from { | |
| stroke-dasharray: 0.1px, 46.339px; } } | |
| /** | |
| * @summary Containing actionable element that holds the waffle icon | |
| * | |
| * @name waffle | |
| * @selector .slds-icon-waffle_container | |
| * @restrict button | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-icon-waffle_container { | |
| border: 0; | |
| outline: 0; } | |
| .slds-icon-waffle_container:hover [class*="slds-r"], .slds-icon-waffle_container:focus [class*="slds-r"] { | |
| animation: slds-icon-waffle-throb 2 200ms alternate; } | |
| .slds-icon-waffle_container:hover .slds-r1, | |
| .slds-icon-waffle_container:hover .slds-r2, | |
| .slds-icon-waffle_container:hover .slds-r3, .slds-icon-waffle_container:focus .slds-r1, | |
| .slds-icon-waffle_container:focus .slds-r2, | |
| .slds-icon-waffle_container:focus .slds-r3 { | |
| background-color: #418fde; } | |
| .slds-icon-waffle_container:hover .slds-r4, | |
| .slds-icon-waffle_container:hover .slds-r5, | |
| .slds-icon-waffle_container:hover .slds-r7, .slds-icon-waffle_container:focus .slds-r4, | |
| .slds-icon-waffle_container:focus .slds-r5, | |
| .slds-icon-waffle_container:focus .slds-r7 { | |
| background-color: #ed8b00; } | |
| .slds-icon-waffle_container:hover .slds-r6, | |
| .slds-icon-waffle_container:hover .slds-r8, | |
| .slds-icon-waffle_container:hover .slds-r9, .slds-icon-waffle_container:focus .slds-r6, | |
| .slds-icon-waffle_container:focus .slds-r8, | |
| .slds-icon-waffle_container:focus .slds-r9 { | |
| background-color: #ffb60f; } | |
| .slds-icon-waffle_container:hover .slds-r2, | |
| .slds-icon-waffle_container:hover .slds-r4, .slds-icon-waffle_container:focus .slds-r2, | |
| .slds-icon-waffle_container:focus .slds-r4 { | |
| transition-delay: 50ms; | |
| animation-delay: 50ms; } | |
| .slds-icon-waffle_container:hover .slds-r3, | |
| .slds-icon-waffle_container:hover .slds-r5, | |
| .slds-icon-waffle_container:hover .slds-r7, .slds-icon-waffle_container:focus .slds-r3, | |
| .slds-icon-waffle_container:focus .slds-r5, | |
| .slds-icon-waffle_container:focus .slds-r7 { | |
| transition-delay: 100ms; | |
| animation-delay: 100ms; } | |
| .slds-icon-waffle_container:hover .slds-r6, | |
| .slds-icon-waffle_container:hover .slds-r8, .slds-icon-waffle_container:focus .slds-r6, | |
| .slds-icon-waffle_container:focus .slds-r8 { | |
| transition-delay: 150ms; | |
| animation-delay: 150ms; } | |
| .slds-icon-waffle_container:hover .slds-r9, .slds-icon-waffle_container:focus .slds-r9 { | |
| transition-delay: 200ms; | |
| animation-delay: 200ms; } | |
| /** | |
| * @summary Element container circles for the waffle icon | |
| * | |
| * @selector .slds-icon-waffle | |
| * @restrict .slds-icon-waffle_container > span | |
| */ | |
| .slds-icon-waffle { | |
| width: 1.312rem; | |
| height: 1.312rem; | |
| position: relative; | |
| display: block; | |
| cursor: pointer; } | |
| .slds-icon-waffle [class*="slds-r"] { | |
| width: 0.312rem; | |
| height: 0.312rem; | |
| background-color: #706e6b; | |
| display: inline-block; | |
| position: absolute; | |
| border-radius: 50%; | |
| transition: background-color 100ms; | |
| transform-origin: 50% 50%; | |
| will-change: scale, background-color; } | |
| .slds-icon-waffle .slds-r1 { | |
| top: 0; | |
| left: 0; } | |
| .slds-icon-waffle .slds-r2 { | |
| top: 0; | |
| left: 0.5rem; } | |
| .slds-icon-waffle .slds-r3 { | |
| top: 0; | |
| right: 0; } | |
| .slds-icon-waffle .slds-r4 { | |
| top: 0.5rem; | |
| left: 0; } | |
| .slds-icon-waffle .slds-r5 { | |
| top: 0.5rem; | |
| left: 0.5rem; } | |
| .slds-icon-waffle .slds-r6 { | |
| top: 0.5rem; | |
| right: 0; } | |
| .slds-icon-waffle .slds-r7 { | |
| bottom: 0; | |
| left: 0; } | |
| .slds-icon-waffle .slds-r8 { | |
| bottom: 0; | |
| left: 0.5rem; } | |
| .slds-icon-waffle .slds-r9 { | |
| bottom: 0; | |
| right: 0; } | |
| .slds-icon-waffle .slds-r1 { | |
| transition-delay: 200ms; } | |
| .slds-icon-waffle .slds-r2, | |
| .slds-icon-waffle .slds-r4 { | |
| transition-delay: 150ms; } | |
| .slds-icon-waffle .slds-r3, | |
| .slds-icon-waffle .slds-r5, | |
| .slds-icon-waffle .slds-r7 { | |
| transition-delay: 100ms; } | |
| .slds-icon-waffle .slds-r6, | |
| .slds-icon-waffle .slds-r8 { | |
| transition-delay: 50ms; } | |
| @keyframes slds-icon-waffle-throb { | |
| to { | |
| transform: scale(1.5); } } | |
| /** | |
| * @summary Hover and click animations for help icon | |
| * | |
| * @variant | |
| * @name global-action-help | |
| * @selector .slds-icon-help | |
| * @restrict button, a | |
| * @support prototype | |
| */ | |
| .slds-icon-help { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| fill: #b0adab; } | |
| .slds-icon-help:hover .slds-icon-help_hover { | |
| opacity: 1; | |
| transform: scale(1); } | |
| .slds-icon-help:focus { | |
| animation: slds-click-global-action 80ms cubic-bezier(1, 1.9, 0.94, 0.98); } | |
| .slds-icon-help:focus .slds-icon-help_focus { | |
| opacity: 1; | |
| transform: scale(1); } | |
| .slds-icon-help mask { | |
| mask-type: alpha; } | |
| /** | |
| * @summary Modifies hover effect of global help icon | |
| * @selector .slds-icon-help_hover | |
| * @restrict .slds-icon-help circle | |
| */ | |
| .slds-icon-help_hover { | |
| opacity: 0; | |
| transform: scale(0.1, 0.1); | |
| transform-origin: 45px 47px; | |
| transition: all 200ms ease-out; | |
| fill: #005fb2; } | |
| /** | |
| * @summary Modifies focus effect of global help icon | |
| * @selector .slds-icon-help_focus | |
| * @restrict .slds-icon-help circle | |
| */ | |
| .slds-icon-help_focus { | |
| opacity: 0; | |
| transform: scale(0.1, 0.1); | |
| transform-origin: 45px 47px; | |
| transition: all 200ms ease-out; | |
| fill: #0070d2; } | |
| .slds-icon-help svg { | |
| width: 1.5rem; | |
| height: 1.5rem; } | |
| .slds-icon-help g { | |
| -webkit-mask: url(#questionMark); | |
| mask: url(#questionMark); } | |
| @keyframes slds-click-global-action { | |
| 25% { | |
| transform: scale(0.95, 0.95); } | |
| 100% { | |
| transform: scale(0.98, 0.98); } } | |
| /** | |
| * @summary Initializes typing icon | |
| * | |
| * @name typing | |
| * @selector .slds-icon-typing | |
| * @restrict span | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-icon-typing { | |
| display: inline-block; | |
| padding: 0.25rem 0; | |
| /** | |
| * @summary Add when you wish to animate the dots | |
| * | |
| * @selector .slds-is-animated | |
| * @restrict .slds-icon-typing | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Add when you wish to pause the dots animation | |
| * | |
| * @selector .slds-is-paused | |
| * @restrict .slds-icon-typing | |
| * @modifier | |
| */ } | |
| .slds-icon-typing.slds-is-animated .slds-icon-typing__dot { | |
| animation: slds-icon-typing__dot-first 1.2s infinite ease-in-out; } | |
| .slds-icon-typing.slds-is-animated .slds-icon-typing__dot:nth-child(1) { | |
| animation-name: slds-icon-typing__dot-first; } | |
| .slds-icon-typing.slds-is-animated .slds-icon-typing__dot:nth-child(2) { | |
| animation-name: slds-icon-typing__dot-second; } | |
| .slds-icon-typing.slds-is-animated .slds-icon-typing__dot:nth-child(3) { | |
| animation-name: slds-icon-typing__dot-third; } | |
| .slds-icon-typing.slds-is-paused .slds-icon-typing__dot { | |
| animation-play-state: paused; } | |
| /** | |
| * @summary Dots within the typing icon | |
| * | |
| * @selector .slds-icon-typing__dot | |
| * @restrict .slds-icon-typing span | |
| */ | |
| .slds-icon-typing__dot { | |
| background-color: #dddbda; | |
| border-radius: 50%; | |
| display: inline-block; | |
| height: 0.5rem; | |
| margin: 0 0.125rem; | |
| width: 0.5rem; } | |
| @keyframes slds-icon-typing__dot-first { | |
| 0% { | |
| background-color: #dddbda; } | |
| 16% { | |
| background-color: #c9c7c5; } | |
| 33%, | |
| 100% { | |
| background-color: #dddbda; } } | |
| @keyframes slds-icon-typing__dot-second { | |
| 0%, | |
| 33% { | |
| background-color: #dddbda; } | |
| 50% { | |
| background-color: #c9c7c5; } | |
| 67%, | |
| 100% { | |
| background-color: #dddbda; } } | |
| @keyframes slds-icon-typing__dot-third { | |
| 0%, | |
| 67% { | |
| background-color: #dddbda; } | |
| 83% { | |
| background-color: #c9c7c5; } | |
| 100% { | |
| background-color: #dddbda; } } | |
| /** | |
| * @name base | |
| * @selector .slds-dynamic-menu | |
| * @restrict section[role="dialog"] | |
| * @variant | |
| * @support dev-ready | |
| */ | |
| /** | |
| * @summary Headers styles for dynamic menu | |
| * @selector .slds-dynamic-menu__header | |
| * @restrict .slds-dynamic-menu h3 | |
| */ | |
| .slds-dynamic-menu__header { | |
| font-size: 0.875rem; | |
| font-weight: 700; } | |
| /** | |
| * @summary Initiates a carousel component | |
| * @name base | |
| * @selector .slds-carousel | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-carousel { | |
| position: relative; } | |
| /** | |
| * @summary Main stage for carousel's tab-panels and tab-list inidicators | |
| * @selector .slds-carousel__stage | |
| * @restrict .slds-carousel div | |
| */ | |
| .slds-carousel__stage { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| overflow: hidden; } | |
| /** | |
| * @summary Tabpanel region that contains all carousel panels | |
| * @selector .slds-carousel__panels | |
| * @restrict .slds-carousel__stage div | |
| */ | |
| .slds-carousel__panels { | |
| display: -ms-flexbox; | |
| display: flex; | |
| transition: transform 250ms ease-in; | |
| min-height: 0%; } | |
| /** | |
| * @summary Tabpanel region that contains all carousel panels | |
| * @selector .slds-carousel__panels | |
| * @restrict .slds-carousel__stage div | |
| */ | |
| .slds-carousel__panel { | |
| -ms-flex: 0 0 100%; | |
| flex: 0 0 100%; | |
| max-width: 100%; } | |
| /** | |
| * @summary Actionable element that contains the carousel's tab-panel content | |
| * @selector .slds-carousel__panel-action | |
| * @restrict .slds-carousel__stage a | |
| */ | |
| .slds-carousel__panel-action { | |
| display: block; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; } | |
| .slds-carousel__panel-action:focus { | |
| outline: 0; | |
| box-shadow: 0 0 3px #0070D2; | |
| border-color: #005fb2; | |
| outline: 0; } | |
| /** | |
| * @summary Element that contains the image inside the carousel's tab-panel | |
| * @selector .slds-carousel__image | |
| * @restrict .slds-carousel__panel-action div | |
| */ | |
| .slds-carousel__image { | |
| border-top-left-radius: 0.25rem; | |
| border-top-right-radius: 0.25rem; | |
| overflow: hidden; } | |
| .slds-carousel__image > img { | |
| width: 100%; } | |
| /** | |
| * @summary Element that contains the content inside the carousel's tab-panel | |
| * @selector .slds-carousel__content | |
| * @restrict .slds-carousel__panel-action div | |
| */ | |
| .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; } | |
| /** | |
| * @summary Heading element that contains the title of the carousel's tab-panel | |
| * @selector .slds-carousel__content-title | |
| * @restrict .slds-carousel__content h2 | |
| */ | |
| .slds-carousel__content-title { | |
| font-size: 1rem; | |
| font-weight: 600; } | |
| /** | |
| * @summary List element that contains the carousel's tab-list inidicators | |
| * @selector .slds-carousel__indicators | |
| * @restrict .slds-carousel ul | |
| */ | |
| .slds-carousel__indicators { | |
| -ms-flex-item-align: center; | |
| -ms-grid-row-align: center; | |
| align-self: center; | |
| margin: 0.5rem 0; } | |
| /** | |
| * @summary Carousel's tab-list inidicator items | |
| * @selector .slds-carousel__indicator | |
| * @restrict .slds-carousel__indicators li | |
| */ | |
| .slds-carousel__indicator { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| margin: 0 0.25rem; } | |
| /** | |
| * @summary Actionable element inside of each tab-list indicator | |
| * @selector .slds-carousel__indicator-action | |
| * @restrict .slds-carousel__indicator a | |
| */ | |
| .slds-carousel__indicator-action { | |
| width: 1rem; | |
| height: 1rem; | |
| background: white; | |
| border: 1px solid #dddbda; | |
| border-radius: 50%; | |
| /** | |
| * @summary Active state notifying the tab that its current panel is active | |
| * @selector .slds-is-active | |
| * @restrict .slds-carousel__indicator-action | |
| */ } | |
| .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; | |
| box-shadow: 0 0 3px #0070D2; | |
| background-color: #005fb2; | |
| border-color: #005fb2; | |
| outline: 0; } | |
| /** | |
| * @summary Element that contains the auto-play button icon to toggle on/off | |
| * @selector .slds-carousel__autoplay | |
| * @restrict .slds-carousel__stage span | |
| */ | |
| .slds-carousel__autoplay { | |
| position: absolute; | |
| left: 0; | |
| bottom: 0.25rem; } | |
| /** | |
| * @selector .slds-card_empty | |
| * @deprecated | |
| */ | |
| .slds-card_empty .slds-card__body, | |
| .slds-card--empty .slds-card__body { | |
| text-align: center; } | |
| /** | |
| * @summary Initializes card | |
| * @name base | |
| * @selector .slds-card | |
| * @restrict article, div, section | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-card { | |
| position: relative; | |
| padding: 0; | |
| background: white; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| background-clip: padding-box; | |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); } | |
| .slds-is-mobile .slds-card { | |
| border-color: transparent; | |
| border-radius: 0; } | |
| .slds-card + .slds-card { | |
| margin-top: 1rem; } | |
| /** | |
| * @summary Apply the same spacing found on the card header to the card body | |
| * @selector .slds-card__body_inner | |
| * @restrict .slds-card__body | |
| */ | |
| .slds-card__body_inner, | |
| .slds-card__body--inner { | |
| padding: 0 1rem; } | |
| /** | |
| * @summary Initializes card header | |
| * @selector .slds-card__header | |
| * @restrict .slds-card div | |
| */ | |
| .slds-card__header { | |
| padding: 0.75rem 1rem 0; | |
| margin: 0 0 0.75rem; } | |
| /** | |
| * @summary Title element within card header | |
| * @selector .slds-card__header-title | |
| * @restrict .slds-card__header h2 | |
| */ | |
| .slds-card__header-title { | |
| font-size: 1rem; | |
| line-height: 1.25; } | |
| .slds-is-mobile .slds-card__header-title { | |
| font-size: 1.125rem; | |
| font-weight: 700; } | |
| /** | |
| * @summary Actionable element within the card header title | |
| * @selector .slds-card__header-link | |
| * @restrict .slds-card__header h2 a | |
| */ | |
| .slds-card__header-link { | |
| color: inherit; | |
| font-weight: 700; } | |
| /** | |
| * @summary Initializes card body | |
| * @selector .slds-card__body | |
| * @restrict .slds-card div | |
| */ | |
| .slds-card__body { | |
| margin-top: 0.75rem; | |
| margin-bottom: 0.75rem; } | |
| .slds-card__body:empty, | |
| .slds-card__footer:empty { | |
| display: none; } | |
| /** | |
| * @summary Initializes card footer | |
| * @selector .slds-card__footer | |
| * @restrict .slds-card footer | |
| */ | |
| .slds-card__footer { | |
| padding: 0.75rem 1rem; | |
| margin-top: 0.75rem; | |
| text-align: center; | |
| font-size: 0.812rem; | |
| border-top: 1px solid #dddbda; } | |
| /** | |
| * @summary Actionable element within card footer | |
| * @selector .slds-card__footer-action | |
| * @restrict .slds-card__footer a | |
| */ | |
| .slds-card__footer-action { | |
| display: block; } | |
| /** | |
| * @summary Use class if card consumes any form of a tile | |
| * @selector .slds-card__tile | |
| * @restrict .slds-tile | |
| */ | |
| .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; | |
| 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; } | |
| /** | |
| * @name wrapper | |
| * @summary Removes the card look from nested cards and pulls them to the boundary of the card wrapper, making the nested cards look like they are inside of one card | |
| * @selector .slds-card-wrapper | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-card-wrapper { | |
| padding: 1rem; | |
| background: white; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| background-clip: padding-box; | |
| 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--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; | |
| box-shadow: none; } | |
| .slds-card, | |
| .slds-modal, | |
| .slds-tabs_default, | |
| .slds-tabs--default { | |
| /** | |
| * @summary Used to bring back the border on a card when needed | |
| * | |
| * @selector .slds-card_boundary | |
| * @restrict .slds-card | |
| */ } | |
| .slds-card .slds-card_boundary, | |
| .slds-modal .slds-card_boundary, | |
| .slds-tabs_default .slds-card_boundary, | |
| .slds-tabs--default .slds-card_boundary { | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; } | |
| /** | |
| * @summary This class allows default tabs to appear to be in a card | |
| * @selector .slds-tabs_card | |
| * @restrict div | |
| * @internal | |
| */ | |
| .slds-tabs_card, | |
| .slds-tabs_card.slds-tabs_card { | |
| background: white; | |
| padding: 0.75rem 1rem; | |
| 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-card_boundary .slds-card__body--inner, | |
| .slds-tabs_card.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, | |
| .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; } | |
| /** | |
| * This component is used to display a current or past chat session between a customer and a service agent. | |
| * It appears in the form of a "Log" | |
| * | |
| * @summary Root container of a chat session | |
| * @name base | |
| * @selector .slds-chat | |
| * @restrict section[role="log"] | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-chat { | |
| margin-bottom: 0.75rem; } | |
| /** | |
| * The chat payload should be displayed in the form of a list. Each item in the list has a number of vertical and horizontal spacing rules based on its type | |
| * | |
| * @summary Handles the display of chat items within a list | |
| * @selector .slds-chat-list | |
| * @restrict .slds-chat ul | |
| */ | |
| .slds-chat-list { | |
| padding: 0 0.75rem; } | |
| /** | |
| * @summary Handles spacing and direction of items in the list | |
| * @selector .slds-chat-listitem | |
| * @restrict .slds-chat-list li | |
| */ | |
| .slds-chat-listitem { | |
| display: -ms-flexbox; | |
| display: flex; | |
| margin-top: 0.75rem; } | |
| /** | |
| * @summary Modifier used to style outbound message list items | |
| * @selector .slds-chat-listitem_outbound | |
| * @restrict .slds-chat-listitem | |
| * @modifier | |
| */ | |
| .slds-chat-listitem_outbound { | |
| -ms-flex-pack: end; | |
| justify-content: flex-end; } | |
| /** | |
| * @name inbound-message | |
| * @summary Modifier used to style inbound message list items | |
| * @selector .slds-chat-listitem_inbound | |
| * @restrict .slds-chat-listitem | |
| * @modifier | |
| * @group dialog | |
| */ | |
| /** | |
| * @summary Selector to style sibling, same type message list items | |
| * @selector .slds-chat-listitem_inbound + .slds-chat-listitem_inbound, .slds-chat-listitem_outbound + .slds-chat-listitem_outbound | |
| */ | |
| .slds-chat-listitem_inbound + .slds-chat-listitem_inbound, | |
| .slds-chat-listitem_outbound + .slds-chat-listitem_outbound { | |
| margin-top: 0.25rem; } | |
| /** | |
| * @summary Modifier used for spacing bookend items | |
| * @selector .slds-chat-listitem_bookend | |
| * @restrict .slds-chat-listitem | |
| */ | |
| .slds-chat-listitem_bookend { | |
| margin: 1rem 0; | |
| margin-left: -0.75rem; | |
| margin-right: -0.75rem; } | |
| .slds-chat-listitem_bookend + .slds-chat-listitem_bookend { | |
| margin-top: 3rem; } | |
| /** | |
| * @summary Modifier used for spacing event items | |
| * @selector .slds-chat-listitem_event | |
| * @restrict .slds-chat-listitem | |
| */ | |
| .slds-chat-listitem_event { | |
| margin: 1.5rem 0; } | |
| /** | |
| * @summary Used to style icons with a chat log | |
| * @selector .slds-chat-icon | |
| * @restrict .slds-chat-message__text .slds-icon_container, .slds-chat-event__body .slds-icon_container, .slds-chat-bookend .slds-icon_container, .slds-chat-message__action .slds-icon_container | |
| */ | |
| .slds-chat-icon { | |
| margin-right: 0.5rem; } | |
| /** | |
| * Chat logs are mainly made up of chat messages between an agent and a customer | |
| * | |
| * @summary styles the outter part of a chat message | |
| * @selector .slds-chat-message | |
| * @restrict .slds-chat-listitem div | |
| */ | |
| .slds-chat-message { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| /** | |
| * @summary Used for when customer avatars are used in consequtive inbound messages to align the message body with the previous message | |
| * @selector .slds-chat-message_faux-avatar | |
| * @restrict .slds-chat-message | |
| */ | |
| .slds-chat-message_faux-avatar { | |
| padding-left: 2.5rem; } | |
| /** | |
| * @summary Used to style avatars in chat logs | |
| * @selector .slds-chat-avatar | |
| * @restrict .slds-chat-message .slds-avatar | |
| */ | |
| .slds-chat-avatar { | |
| margin-right: 0.5rem; | |
| min-width: 2rem; } | |
| /** | |
| * @summary Used to style the avatar intials for chat | |
| * @selector .slds-chat-avatar__intials | |
| * @restrict .slds-chat-avatar .slds-avatar__initials | |
| * @deprecated | |
| */ | |
| .slds-chat-avatar__intials { | |
| background-color: #f2f2f3; | |
| color: #3e3e3c; } | |
| .slds-chat-avatar__intials.slds-chat-avatar__intials:hover { | |
| color: #3e3e3c; } | |
| /** | |
| * @summary Used to contain and align chat messages with their avatars | |
| * @selector .slds-chat-message__body | |
| * @restrict .slds-chat-message div | |
| */ | |
| .slds-chat-message__body { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; } | |
| /** | |
| * @summary | |
| * @selector .slds-chat-message__image_loading | |
| * @restrict .slds-chat-message__body | |
| */ | |
| .slds-chat-message__image_loading { | |
| width: 15rem; | |
| height: 11.25rem; } | |
| /** | |
| * @summary Used to style the chat text from agent or customer | |
| * @selector .slds-chat-message__text | |
| * @restrict .slds-chat-message__body div | |
| */ | |
| .slds-chat-message__text { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| word-break: break-word; | |
| display: inline-block; | |
| font-size: 0.812rem; | |
| max-width: 26.25rem; | |
| white-space: pre-line; } | |
| .slds-chat-message__text a { | |
| color: #005fb2; | |
| text-decoration: underline; } | |
| .slds-chat-message__text a:hover { | |
| text-decoration: none; } | |
| /** | |
| * @summary | |
| * @selector .slds-chat-message__file | |
| * @restrict .slds-chat-message__body div | |
| */ | |
| .slds-chat-message__file { | |
| width: 15rem; } | |
| .slds-chat-message__file, | |
| .slds-chat-message__image { | |
| overflow: hidden; } | |
| .slds-chat-message__file .slds-file:hover, | |
| .slds-chat-message__image .slds-file:hover { | |
| box-shadow: none; | |
| transition: none; } | |
| .slds-chat-message__text_inbound, | |
| .slds-chat-message__file_inbound, | |
| .slds-chat-message__image_inbound, | |
| .slds-chat-message__text_outbound, | |
| .slds-chat-message__file_outbound, | |
| .slds-chat-message__image_outbound, | |
| .slds-chat-message__text_outbound-agent, | |
| .slds-chat-message__text_unsupported-type, | |
| .slds-chat-message__text_delivery-failure { | |
| border-radius: 0.5rem 0.5rem 0; | |
| color: white; | |
| min-height: 2rem; } | |
| .slds-chat-message__text_inbound, | |
| .slds-chat-message__text_outbound, | |
| .slds-chat-message__text_outbound-agent, | |
| .slds-chat-message__text_unsupported-type, | |
| .slds-chat-message__text_delivery-failure { | |
| padding: 0.5rem; } | |
| .slds-chat-message__file_inbound, | |
| .slds-chat-message__image_inbound, | |
| .slds-chat-message__file_outbound, | |
| .slds-chat-message__image_outbound { | |
| padding: 0; | |
| border: 1px solid #dddbda; } | |
| .slds-chat-message__file_inbound, | |
| .slds-chat-message__image_inbound, | |
| .slds-chat-message__file_outbound, | |
| .slds-chat-message__image_outbound { | |
| color: #080707; } | |
| /** | |
| * @summary Used for any specific inbound text styling | |
| * @selector .slds-chat-message__text_inbound | |
| * @restrict .slds-chat-message__text | |
| */ | |
| .slds-chat-message__text_inbound { | |
| margin-right: auto; | |
| background-color: #f2f2f3; | |
| border-radius: 0.5rem 0.5rem 0.5rem 0; | |
| color: #080707; } | |
| /** | |
| * @summary Used for any specific inbound image styling | |
| * @selector .slds-chat-message__image_inbound | |
| * @restrict .slds-chat-message__image | |
| */ | |
| .slds-chat-message__image_inbound { | |
| background-color: #f2f2f3; | |
| border-radius: 0.5rem 0.5rem 0.5rem 0; } | |
| /** | |
| * @summary Used for any specific inbound file styling | |
| * @selector .slds-chat-message__file_inbound | |
| * @restrict .slds-chat-message__file | |
| */ | |
| .slds-chat-message__file_inbound { | |
| border-radius: 0.5rem 0.5rem 0.5rem 0; | |
| background-color: white; } | |
| /** | |
| * @summary Used for any specific outbound text styling | |
| * @selector .slds-chat-message__text_outbound | |
| * @restrict .slds-chat-message__text | |
| */ | |
| .slds-chat-message__text_outbound { | |
| margin-left: auto; | |
| background-color: #005fb2; } | |
| /** | |
| * @summary Used for any specific outbound (from another agent) text styling | |
| * @selector .slds-chat-message__text_outbound-agent | |
| * @restrict .slds-chat-message__text | |
| */ | |
| .slds-chat-message__text_outbound-agent { | |
| background-color: #6b6d70; } | |
| .slds-chat-message__text_outbound a, | |
| .slds-chat-message__text_outbound-agent a { | |
| color: white; | |
| text-decoration: underline; } | |
| /** | |
| * @name unsupported | |
| * @summary Used for an inbound message that is not a supported message type | |
| * @selector .slds-chat-message__text_unsupported-type | |
| * @restrict .slds-chat-message__text | |
| * @modifier | |
| * @group feedback | |
| */ | |
| .slds-chat-message__text_unsupported-type { | |
| background-color: white; | |
| border-radius: 0.5rem 0.5rem 0.5rem 0; | |
| border: #ffb75d 1px solid; | |
| color: #080707; } | |
| .slds-chat-message__text_unsupported-type .slds-chat-icon.slds-icon-utility-warning .slds-icon { | |
| fill: #ffb75d; } | |
| /** | |
| * @name delivery-failure | |
| * @summary Used for an inbound message that fails to deliver | |
| * @selector .slds-chat-message__text_delivery-failure | |
| * @restrict .slds-chat-message__text | |
| * @modifier | |
| * @group feedback | |
| */ | |
| .slds-chat-message__text_delivery-failure { | |
| background-color: white; | |
| border: #c23934 1px solid; | |
| color: #080707; | |
| /** | |
| * @summary Element that contains feedback for why inbound message failed | |
| * @selector .slds-chat-message__text_delivery-failure-reason | |
| * @restrict .slds-chat-message__text_delivery-failure [role="alert"] | |
| */ } | |
| .slds-chat-message__text_delivery-failure .slds-chat-message__text_delivery-failure-reason { | |
| display: -ms-flexbox; | |
| display: flex; | |
| padding: 0.5rem 0.5rem 0; | |
| margin: 0.5rem -0.5rem 0; | |
| color: #c23934; | |
| border-top: #c23934 1px solid; } | |
| .slds-chat-message__text_delivery-failure .slds-chat-icon.slds-icon-utility-error .slds-icon { | |
| fill: #c23934; } | |
| /** | |
| * @summary Used when sneak peek is enabled for customer messages | |
| * @selector .slds-chat-message__text_sneak-peek | |
| * @restrict .slds-chat-message__text | |
| * @modifier | |
| */ | |
| .slds-chat-message__text_sneak-peak, | |
| .slds-chat-message__text_sneak-peek { | |
| font-style: italic; } | |
| .slds-chat-message__text_sneak-peak .slds-icon-typing, | |
| .slds-chat-message__text_sneak-peek .slds-icon-typing { | |
| margin-right: 0.5rem; } | |
| /** | |
| * @summary Used to style chat message meta data | |
| * @selector .slds-chat-message__meta | |
| * @restrict .slds-chat-message div | |
| */ | |
| .slds-chat-message__meta { | |
| color: #3e3e3c; | |
| font-size: 0.625rem; | |
| margin: 0.125rem 0 0 0.5rem; } | |
| /** | |
| * @summary Used to style chat message resend action | |
| * @selector .slds-chat-message__action | |
| * @restrict .slds-chat-message .slds-button | |
| */ | |
| .slds-chat-message__action { | |
| font-size: 0.75rem; | |
| margin-left: 0.5rem; | |
| line-height: 1.25; } | |
| .slds-chat-message__action .slds-chat-icon.slds-icon-utility-redo .slds-icon { | |
| width: 0.75rem; | |
| height: 0.75rem; | |
| fill: #006dcc; } | |
| /** | |
| * @summary During any chat, certain events can occur which need to be displayed to the user | |
| * @selector .slds-chat-event | |
| * @restrict .slds-chat-listitem div | |
| */ | |
| .slds-chat-event { | |
| -ms-flex-align: center; | |
| align-items: center; | |
| color: #3e3e3c; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| font-size: 0.812rem; | |
| text-align: center; | |
| width: 100%; | |
| /** | |
| * @name error | |
| * @summary Modifier to indicate the event was an error | |
| * @selector .slds-has-error | |
| * @restrict .slds-chat-event[role="alert"] | |
| * @modifier | |
| * @group feedback | |
| */ } | |
| .slds-chat-event.slds-has-error { | |
| color: #c23934; } | |
| .slds-chat-event.slds-has-error svg { | |
| fill: #c23934; } | |
| /** | |
| * @summary Used to style the horizontal rules on an event | |
| * @selector .slds-chat-event__rule | |
| * @restrict .slds-chat-event div | |
| * @deprecated | |
| */ | |
| .slds-chat-event__rule { | |
| border-top: 1px #dddbda solid; | |
| height: 0.062rem; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; } | |
| /** | |
| * @summary Used for styling the event body text | |
| * @selector .slds-chat-event__body | |
| * @restrict .slds-chat-event div | |
| */ | |
| .slds-chat-event__body { | |
| -ms-flex-align: center; | |
| align-items: center; | |
| display: -ms-flexbox; | |
| display: flex; | |
| margin: 0 0.5rem; } | |
| /** | |
| * @summary Used to style any messages from an agent in the event | |
| * @selector .slds-chat-event__agent-message | |
| * @restrict .slds-chat-event div | |
| */ | |
| .slds-chat-event__agent-message { | |
| -ms-flex-positive: 3; | |
| flex-grow: 3; | |
| font-size: 0.75rem; | |
| font-style: italic; | |
| margin-top: 0.5rem; | |
| width: 100%; } | |
| /** | |
| * Chat sessions are started and stopped with bookends to the conversation | |
| * | |
| * @summary Used to style a chat bookend | |
| * @selector .slds-chat-bookend | |
| * @restrict .slds-chat-listitem div | |
| */ | |
| .slds-chat-bookend { | |
| -ms-flex-align: center; | |
| align-items: center; | |
| border: #dddbda 0 solid; | |
| border-bottom-width: 1px; | |
| color: #3e3e3c; | |
| display: -ms-flexbox; | |
| display: flex; | |
| font-size: 0.812rem; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| padding: 0.5rem 0.75rem; | |
| width: 100%; } | |
| /** | |
| * @name stop | |
| * @summary Modifier for bookends which stop a chat session | |
| * @selector .slds-chat-bookend_stop | |
| * @restrict .slds-chat-bookend | |
| * @modifier | |
| * @group dialog | |
| */ | |
| .slds-chat-bookend_stop { | |
| border-width: 1px 0 0; } | |
| /** | |
| * Past chat logs are displayed differently for ease of scanning | |
| * | |
| * @summary Apply when displaying chat logs that appeared in the past | |
| * | |
| * @name past | |
| * @selector .slds-chat_past | |
| * @restrict .slds-chat | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-chat_past .slds-chat-listitem_event { | |
| margin: 1rem 0; } | |
| .slds-chat_past .slds-chat-message__meta { | |
| margin: 0.25rem 0 0; } | |
| .slds-chat_past .slds-chat-message__meta b { | |
| color: #080707; } | |
| /** | |
| * @summary Creates layout for a form element | |
| * @name base | |
| * @selector .slds-form-element | |
| * @restrict div, fieldset, li | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-form-element { | |
| position: relative; | |
| min-width: 0; } | |
| /** | |
| * @summary Creates label styles for our form elements | |
| * @selector .slds-form-element__label | |
| * @restrict .slds-form-element label, .slds-form-element span, .slds-form-element legend, .slds-form-element div, [class*='slds-checkbox'] span, [class*='slds-radio'] span | |
| */ | |
| .slds-form-element__label { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: auto; | |
| -ms-hyphens: auto; | |
| hyphens: auto; | |
| display: inline-block; | |
| color: #3e3e3c; | |
| font-size: 0.75rem; | |
| padding-right: 0.5rem; | |
| padding-top: 0.25rem; | |
| margin-bottom: 0.125rem; } | |
| .slds-is-mobile .slds-form-element__label { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| min-height: 2rem; | |
| padding-top: 0; | |
| margin-bottom: 0; | |
| font-size: 0.875rem; } | |
| .slds-form-element__label:empty { | |
| margin: 0; } | |
| .slds-is-mobile .slds-form-element__label + .slds-form-element__icon .slds-button_icon { | |
| height: 2rem; } | |
| /** | |
| * @summary Wrapper to any form display element | |
| * @selector .slds-form-element__control | |
| * @restrict .slds-form-element div | |
| */ | |
| .slds-form-element__control { | |
| clear: left; | |
| position: relative; } | |
| .slds-form-element__control .slds-radio, | |
| .slds-form-element__control .slds-checkbox { | |
| display: block; } | |
| /** | |
| * @summary When an icon sits within a form element wrapper and adjacent to another element inside that wrapper such as a .form-element__label | |
| * @selector .slds-form-element__icon | |
| * @restrict .slds-form-element div | |
| */ | |
| .slds-form-element__icon { | |
| display: inline-block; | |
| position: relative; | |
| padding-top: 0.25rem; | |
| vertical-align: top; | |
| line-height: 1; | |
| z-index: 1; } | |
| .slds-is-mobile .slds-form-element__icon { | |
| padding-top: 0; } | |
| .slds-form-element__icon .slds-button_icon { | |
| position: relative; } | |
| /** | |
| * @summary Creates inline help styles, sits below .form-element__control | |
| * @selector .slds-form-element__help | |
| * @restrict .slds-form-element div | |
| */ | |
| .slds-form-element__help, | |
| .slds-form-element__helper { | |
| font-size: 0.75rem; | |
| margin-top: 0.125rem; | |
| display: block; } | |
| /** | |
| * @summary Modifier on slds-form-element that it needs to reserve space for the inline-edit trigger button | |
| * @selector .slds-form-element_edit | |
| * @restrict .slds-form-element | |
| */ | |
| .slds-form-element_edit .slds-form-element__static, | |
| .slds-form-element--edit .slds-form-element__static { | |
| width: calc(100% - 1.5rem); } | |
| .slds-is-mobile .slds-form-element_edit .slds-form-element__static, .slds-is-mobile | |
| .slds-form-element--edit .slds-form-element__static { | |
| width: calc(100% - 2.75rem); } | |
| /** | |
| * @summary When a form element is in view mode, we modify some styling | |
| * @selector .slds-form-element_readonly | |
| * @restrict .slds-form-element | |
| */ | |
| .slds-form-element_readonly { | |
| -ms-flex-preferred-size: 0%; | |
| flex-basis: 0%; | |
| border-bottom: 1px solid #dddbda; | |
| margin-bottom: 0; } | |
| .slds-form-element_readonly .slds-form-element__control { | |
| padding-top: 0.125rem; | |
| padding-bottom: 0.125rem; } | |
| .slds-form-element_readonly .slds-form-element__label { | |
| margin-bottom: 0; } | |
| .slds-is-mobile .slds-form-element_readonly .slds-icon { | |
| width: 1.5rem; | |
| height: 1.5rem; } | |
| /** | |
| * @summary The form element label when applied to a legend element | |
| * @selector .slds-form-element__legend | |
| * @restrict .slds-form-element legend, .slds-form-element span | |
| */ | |
| .slds-form-element__legend { | |
| font-weight: 700; | |
| float: left; } | |
| /** | |
| * @summary Fixed text that sits to the left or right of an input | |
| * @selector .slds-form-element__addon | |
| * @restrict .slds-form-element span | |
| */ | |
| .slds-form-element__addon { | |
| display: inline-block; | |
| margin: 0 0.5rem; | |
| -ms-flex-item-align: center; | |
| -ms-grid-row-align: center; | |
| align-self: center; } | |
| /** | |
| * @summary Read-only components are used to display immutable data within a form | |
| * @summary Initializes read-only form element | |
| * @selector .slds-form-element__static | |
| * @restrict .slds-form-element span, .slds-form-element div | |
| */ | |
| .slds-form-element__static { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| word-break: break-word; | |
| display: inline-block; | |
| font-size: 0.875rem; | |
| font-weight: 400; | |
| color: #080707; | |
| width: 100%; | |
| /** | |
| * @summary Inline Edit on static form element | |
| * @selector .slds-form-element__static_edit | |
| * @restrict .slds-form-element__static | |
| * @deprecated | |
| */ } | |
| .slds-is-mobile .slds-form-element__static { | |
| font-size: 1rem; } | |
| .slds-form-element__static.slds-text-longform *:last-child { | |
| margin-bottom: 0; } | |
| .slds-form-element__static:empty { | |
| min-height: calc(1.25rem + 1px); | |
| vertical-align: bottom; } | |
| .slds-form-element__static--edit { | |
| width: calc(100% - 1.5rem); } | |
| /** | |
| * @summary Required asterisk | |
| * @selector .slds-required | |
| * @restrict .slds-form-element abbr, abbr | |
| */ | |
| .slds-required { | |
| color: #c23934; | |
| margin: 0 0.125rem; } | |
| /** | |
| * @summary Error styles for form element | |
| * @selector .slds-has-error | |
| * @restrict .slds-form-element | |
| * @modifier | |
| * @group feedback | |
| */ | |
| .slds-has-error .slds-form-element__help { | |
| color: #c23934; } | |
| .slds-input-has-icon .slds-input__icon { | |
| /* @Todo - we need to be sure this is deprecated since the color sems to be the correct gray I see in specs */ | |
| fill: #b0adab; } | |
| /** | |
| * @summary Initializes text input | |
| * | |
| * @name base | |
| * @selector .slds-input | |
| * @restrict input | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-input { | |
| background-color: white; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| width: 100%; | |
| transition: border 0.1s linear, background-color 0.1s linear; | |
| display: inline-block; | |
| padding: 0 1rem 0 0.75rem; | |
| line-height: 1.875rem; | |
| min-height: calc(1.875rem + (1px * 2)); | |
| /** | |
| * @selector [readonly] | |
| * @restrict .slds-input | |
| */ | |
| /* | |
| * It's important to keep these selectors scoped tightly because certain input types have | |
| * platform-native styles we don't want to override such as search. In the past, we have | |
| * not overridden the appearance property so tread carefully. | |
| * | |
| * These are considered safe because they fall under '-webkit-appearance: textfield' by Webkit | |
| * which primarily renders a platform-native inner gradient. | |
| */ | |
| /** | |
| * Platform-native styled inputs using 'appearance' CSS property set their own min-height and our line-height isn't recognized | |
| * until a value is selected (e.x. date input). For mobile devices, this causes height discrepancies before and after selecting | |
| * a value. We need to set an explicit height to keep it consistent. | |
| */ | |
| /** | |
| * Prevents certain input types from switching to RTL layout. | |
| */ | |
| /** | |
| * Removes aesthetic nature from an input | |
| * | |
| * @selector .slds-input_bare | |
| * @restrict .slds-input, input, textarea | |
| * @modifier | |
| */ | |
| /** | |
| * Used to apply an input size to another element thats a non input | |
| * Because sometimes I need elements the same height as inputs | |
| * | |
| * @selector .slds-input_height | |
| * @restrict .slds-input | |
| */ } | |
| .slds-input:required { | |
| box-shadow: none; } | |
| .slds-input:focus, .slds-input:active { | |
| outline: 0; | |
| border-color: #1589ee; | |
| background-color: white; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-input[disabled], .slds-input.slds-is-disabled { | |
| background-color: #ecebea; | |
| border-color: #c9c7c5; | |
| cursor: not-allowed; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; } | |
| .slds-input[disabled]:focus, .slds-input[disabled]:active, .slds-input.slds-is-disabled:focus, .slds-input.slds-is-disabled:active { | |
| box-shadow: none; } | |
| .slds-is-mobile .slds-input { | |
| line-height: calc(2.75rem - 0.125rem); } | |
| .slds-input[readonly] { | |
| padding-left: 0; | |
| border-color: transparent; | |
| background-color: transparent; | |
| font-size: 0.875rem; | |
| font-weight: 400; } | |
| .slds-is-mobile .slds-input[readonly] { | |
| font-size: 1rem; } | |
| .slds-input[type='search']::-ms-clear { | |
| display: none; | |
| width: 0; | |
| height: 0; } | |
| .slds-is-mobile .slds-input[type='text'], .slds-is-mobile .slds-input[type='email'], .slds-is-mobile .slds-input[type='url'], .slds-is-mobile .slds-input[type='tel'] { | |
| -webkit-appearance: none; } | |
| .slds-is-mobile .slds-input[type='date'], .slds-is-mobile .slds-input[type='datetime-local'], .slds-is-mobile .slds-input[type='month'], .slds-is-mobile .slds-input[type='time'] { | |
| height: 2.75rem; } | |
| .slds-input[type='url'], .slds-input[type='tel'], .slds-input[type='email'] { | |
| direction: ltr; | |
| text-align: left; } | |
| .slds-input_bare, .slds-input--bare { | |
| background-color: transparent; | |
| border: 0; | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| padding-left: 0.75rem; | |
| color: #080707; | |
| line-height: 1.875rem; } | |
| .slds-input_bare:focus, .slds-input_bare:active, .slds-input--bare:focus, .slds-input--bare:active { | |
| outline: 0; | |
| box-shadow: none; } | |
| .slds-input_height, .slds-input--height { | |
| min-height: calc(1.875rem + (1px * 2)); } | |
| /** | |
| * @summary Modifier to allow a [readonly] input to have borders | |
| * | |
| * @selector .slds-input_borders | |
| * @restrict .slds-input | |
| */ | |
| .slds-input_borders { | |
| padding-left: 0.75rem; | |
| border-color: #dddbda; } | |
| /** | |
| * @summary Modifier if text input has svg icon adjacent to input | |
| * | |
| * @selector .slds-input-has-icon | |
| * @restrict .slds-form-element div | |
| */ | |
| .slds-input-has-icon { | |
| position: relative; | |
| /** | |
| * @summary Hook for .slds-input-has-icon | |
| * | |
| * @selector .slds-input__icon | |
| * @restrict .slds-input-has-icon svg, .slds-input-has-icon button, .slds-input-has-icon span | |
| */ | |
| /** | |
| * @summary Positions .slds-input__icon to the left of the text input | |
| * | |
| * @selector .slds-input-has-icon_left | |
| * @restrict .slds-input-has-icon | |
| */ | |
| /** | |
| * @summary Positions .slds-input__icon to the right of the text input | |
| * | |
| * @selector .slds-input-has-icon_right | |
| * @restrict .slds-input-has-icon | |
| */ | |
| /** | |
| * @summary Positions .slds-input__icon_left to the left of the text input and .slds-input__icon_right to the right of the text input | |
| * | |
| * @selector .slds-input-has-icon_left-right | |
| * @restrict .slds-input-has-icon | |
| */ } | |
| .slds-input-has-icon .slds-input__icon { | |
| width: 0.875rem; | |
| height: 0.875rem; | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -0.438rem; | |
| line-height: 1; | |
| border: 0; | |
| z-index: 2; | |
| /* @Todo - we need to be sure this is deprecated since the color sems to be the correct gray I see in specs */ | |
| fill: #b0adab; } | |
| .slds-is-mobile .slds-input-has-icon .slds-input__icon { | |
| width: 1rem; | |
| height: 1rem; | |
| margin-top: -0.5rem; } | |
| .slds-input-has-icon .slds-input__icon:not(button) { | |
| pointer-events: none; } | |
| .slds-input-has-icon_left .slds-input__icon, .slds-input-has-icon--left .slds-input__icon { | |
| left: 0.75rem; } | |
| .slds-is-mobile .slds-input-has-icon_left .slds-input__icon, .slds-is-mobile .slds-input-has-icon--left .slds-input__icon { | |
| left: 0.5rem; } | |
| .slds-input-has-icon_left .slds-input, | |
| .slds-input-has-icon_left .slds-input_bare, | |
| .slds-input-has-icon_left .slds-input--bare, .slds-input-has-icon--left .slds-input, | |
| .slds-input-has-icon--left .slds-input_bare, | |
| .slds-input-has-icon--left .slds-input--bare { | |
| padding-left: 2rem; } | |
| .slds-input-has-icon_right .slds-input__icon, .slds-input-has-icon--right .slds-input__icon { | |
| right: 0.75rem; } | |
| .slds-is-mobile .slds-input-has-icon_right .slds-input__icon, .slds-is-mobile .slds-input-has-icon--right .slds-input__icon { | |
| right: 0.5rem; } | |
| .slds-input-has-icon_right .slds-input, | |
| .slds-input-has-icon_right .slds-input_bare, | |
| .slds-input-has-icon_right .slds-input--bare, .slds-input-has-icon--right .slds-input, | |
| .slds-input-has-icon--right .slds-input_bare, | |
| .slds-input-has-icon--right .slds-input--bare { | |
| padding-right: 2rem; } | |
| .slds-input-has-icon_left-right, .slds-input-has-icon--left-right { | |
| /** | |
| * @summary Hook for .slds-input-has-icon--left-right | |
| * | |
| * @selector .slds-input__icon_left | |
| * @restrict .slds-input__icon | |
| */ | |
| /** | |
| * @summary Hook for .slds-input-has-icon_left-right | |
| * | |
| * @selector .slds-input__icon_right | |
| * @restrict .slds-input__icon | |
| */ } | |
| .slds-input-has-icon_left-right .slds-input__icon_left, | |
| .slds-input-has-icon_left-right .slds-input__icon--left, .slds-input-has-icon--left-right .slds-input__icon_left, | |
| .slds-input-has-icon--left-right .slds-input__icon--left { | |
| left: 0.75rem; } | |
| .slds-is-mobile .slds-input-has-icon_left-right .slds-input__icon_left, .slds-is-mobile | |
| .slds-input-has-icon_left-right .slds-input__icon--left, .slds-is-mobile .slds-input-has-icon--left-right .slds-input__icon_left, .slds-is-mobile | |
| .slds-input-has-icon--left-right .slds-input__icon--left { | |
| left: 0.5rem; } | |
| .slds-input-has-icon_left-right .slds-input__icon_right, | |
| .slds-input-has-icon_left-right .slds-input__icon--right, .slds-input-has-icon--left-right .slds-input__icon_right, | |
| .slds-input-has-icon--left-right .slds-input__icon--right { | |
| right: 0.75rem; } | |
| .slds-is-mobile .slds-input-has-icon_left-right .slds-input__icon_right, .slds-is-mobile | |
| .slds-input-has-icon_left-right .slds-input__icon--right, .slds-is-mobile .slds-input-has-icon--left-right .slds-input__icon_right, .slds-is-mobile | |
| .slds-input-has-icon--left-right .slds-input__icon--right { | |
| right: 0.5rem; } | |
| .slds-input-has-icon_left-right .slds-input, | |
| .slds-input-has-icon_left-right .slds-input_bare, | |
| .slds-input-has-icon_left-right .slds-input--bare, .slds-input-has-icon--left-right .slds-input, | |
| .slds-input-has-icon--left-right .slds-input_bare, | |
| .slds-input-has-icon--left-right .slds-input--bare { | |
| padding: 0 2rem; } | |
| .slds-input-has-icon_group-right .slds-input, | |
| .slds-input-has-icon_group-right .slds-input_bare, | |
| .slds-input-has-icon_group-right .slds-input--bare { | |
| padding-right: 3.5rem; } | |
| /** | |
| * @summary Positions two items (icons and/or spinners) on one side or the other of the input | |
| * | |
| * @selector .slds-input__icon-group | |
| * @restrict .slds-input-has-icon div | |
| */ | |
| .slds-input__icon-group { | |
| position: absolute; | |
| height: 1rem; | |
| margin-top: -0.5rem; } | |
| /** | |
| * @summary Positions the close icon and spinner on the right side of the input while searching | |
| * | |
| * @selector .slds-input__icon-group_right | |
| * @restrict .slds-input__icon-group | |
| */ | |
| .slds-input__icon-group_right { | |
| right: 0; | |
| top: 50%; } | |
| .slds-input__icon-group_right .slds-input__icon_right, | |
| .slds-input__icon-group_right .slds-input__icon--right { | |
| right: 0.5rem; } | |
| .slds-input__icon-group_right .slds-input__spinner { | |
| right: 1.5rem; | |
| left: auto; } | |
| .slds-is-mobile .slds-input__icon-group_right .slds-input__spinner { | |
| right: calc(1.5rem + 0.25rem); } | |
| /** | |
| * @summary Use on input container to let it know there is fixed text to the left or right of the input | |
| * | |
| * @selector .slds-input-has-fixed-addon | |
| * @restrict .slds-form-element .slds-form-element__control | |
| */ | |
| .slds-input-has-fixed-addon { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| .slds-input:required:focus { | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-has-error .slds-input { | |
| background-color: white; | |
| border-color: #c23934; | |
| box-shadow: #c23934 0 0 0 1px inset; | |
| background-clip: padding-box; } | |
| .slds-has-error .slds-input:focus, .slds-has-error .slds-input:active { | |
| box-shadow: #c23934 0 0 0 1px inset, 0 0 3px #0070D2; } | |
| .slds-has-error .slds-input__icon { | |
| fill: #c23934; | |
| color: #c23934; } | |
| /** | |
| * @summary Variant for number input with increment and decrement buttons | |
| * | |
| * @name base | |
| * @selector .slds-input_counter | |
| * @restrict .slds-input | |
| * @variant | |
| */ | |
| .slds-input_counter { | |
| text-align: center; | |
| padding: 0 3rem; } | |
| .slds-input_counter[type='number'] { | |
| -moz-appearance: textfield; } | |
| .slds-input_counter::-webkit-inner-spin-button { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| margin: 0; } | |
| /** | |
| * @summary Positions decrement button within counter input field | |
| * | |
| * @selector .slds-input__button_decrement | |
| * @restrict .slds-button | |
| */ | |
| .slds-input__button_decrement { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| left: 0.75rem; } | |
| /** | |
| * @summary Positions increment button within counter input field | |
| * | |
| * @selector .slds-input__button_increment | |
| * @restrict .slds-button | |
| */ | |
| .slds-input__button_increment { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| right: 0.75rem; } | |
| /** | |
| * @summary Initialize textarea | |
| * | |
| * @name base | |
| * @selector .slds-textarea | |
| * @restrict textarea | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-textarea { | |
| background-color: white; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| width: 100%; | |
| transition: border 0.1s linear, background-color 0.1s linear; | |
| -webkit-appearance: none; | |
| resize: vertical; | |
| padding: 0.5rem 0.75rem; } | |
| .slds-textarea:required { | |
| box-shadow: none; } | |
| .slds-textarea:focus, .slds-textarea:active { | |
| outline: 0; | |
| border-color: #1589ee; | |
| background-color: white; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-textarea[disabled], .slds-textarea.slds-is-disabled { | |
| background-color: #ecebea; | |
| border-color: #c9c7c5; | |
| cursor: not-allowed; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; } | |
| .slds-textarea[disabled]:focus, .slds-textarea[disabled]:active, .slds-textarea.slds-is-disabled:focus, .slds-textarea.slds-is-disabled:active { | |
| box-shadow: none; } | |
| .slds-has-error .slds-textarea { | |
| background-color: white; | |
| border-color: #c23934; | |
| box-shadow: #c23934 0 0 0 1px inset; | |
| background-clip: padding-box; } | |
| .slds-has-error .slds-textarea:focus, .slds-has-error .slds-textarea:active { | |
| box-shadow: #c23934 0 0 0 1px inset, 0 0 3px #0070D2; } | |
| /** | |
| * @summary Initializes radio button | |
| * | |
| * @name base | |
| * @selector .slds-radio | |
| * @restrict span | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-radio { | |
| display: inline-block; | |
| /** | |
| * @summary Label container of the text and faux radio | |
| * @selector .slds-radio__label | |
| * @restrict .slds-radio label | |
| */ | |
| /** | |
| * Creates a custom styled radio button | |
| * | |
| * @selector .slds-radio_faux | |
| * @restrict [class*='slds-radio'] span | |
| */ } | |
| .slds-is-mobile .slds-radio .slds-radio__label { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| min-height: 2.75rem; } | |
| .slds-radio .slds-radio_faux, | |
| .slds-radio .slds-radio--faux { | |
| width: 1rem; | |
| height: 1rem; | |
| display: inline-block; | |
| position: relative; | |
| vertical-align: middle; | |
| border: 1px solid #dddbda; | |
| border-radius: 50%; | |
| background: white; | |
| transition: border 0.1s linear, background-color 0.1s linear; } | |
| .slds-is-mobile .slds-radio .slds-radio_faux, .slds-is-mobile | |
| .slds-radio .slds-radio--faux { | |
| width: 1.5rem; | |
| height: 1.5rem; } | |
| .slds-radio .slds-form-element__label { | |
| display: inline; | |
| vertical-align: middle; | |
| font-size: 0.812rem; } | |
| .slds-is-mobile .slds-radio .slds-form-element__label { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| font-size: 1rem; } | |
| .slds-radio [type="radio"] { | |
| width: 1px; | |
| height: 1px; | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; } | |
| .slds-radio [type="radio"]:checked + .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, | |
| .slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio_faux, | |
| .slds-radio [type="radio"]:checked + .slds-radio__label .slds-radio--faux { | |
| background: white; } | |
| .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, | |
| .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 { | |
| width: 0.5rem; | |
| height: 0.5rem; | |
| content: ''; | |
| position: absolute; | |
| top: 50%; | |
| /* stylelint-disable comment-empty-line-before */ | |
| /*! @noflip */ | |
| left: 50%; | |
| transform: translate3d(-50%, -50%, 0); | |
| border-radius: 50%; | |
| background: #0070d2; } | |
| .slds-radio [type="radio"]:focus + .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, | |
| .slds-radio [type="radio"]:focus + .slds-radio__label .slds-radio_faux, | |
| .slds-radio [type="radio"]:focus + .slds-radio__label .slds-radio--faux { | |
| border-color: #1589ee; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-radio [type="radio"][disabled] { | |
| cursor: not-allowed; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; } | |
| .slds-radio [type="radio"][disabled] ~ .slds-radio_faux, | |
| .slds-radio [type="radio"][disabled] ~ .slds-radio--faux, | |
| .slds-radio [type="radio"][disabled] + .slds-radio__label .slds-radio_faux, | |
| .slds-radio [type="radio"][disabled] + .slds-radio__label .slds-radio--faux { | |
| background-color: #ecebea; | |
| border-color: #c9c7c5; } | |
| .slds-radio [type="radio"][disabled] ~ .slds-radio_faux:after, | |
| .slds-radio [type="radio"][disabled] ~ .slds-radio--faux:after, | |
| .slds-radio [type="radio"][disabled] + .slds-radio__label .slds-radio_faux:after, | |
| .slds-radio [type="radio"][disabled] + .slds-radio__label .slds-radio--faux:after { | |
| background: #969492; } | |
| .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, | |
| .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 { | |
| border-color: #c23934; | |
| border-width: 2px; } | |
| .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, | |
| .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 { | |
| background: white; } | |
| .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, | |
| .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 { | |
| background: #d4504c; } | |
| .slds-form-element .slds-radio [type='radio'] + .slds-radio_faux, | |
| .slds-form-element .slds-radio [type='radio'] + .slds-radio--faux, | |
| .slds-form-element .slds-radio [type='radio'] ~ .slds-radio_faux, | |
| .slds-form-element .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 { | |
| margin-right: 0.5rem; } | |
| /** | |
| * @summary Initializes radio button | |
| * | |
| * @name base | |
| * @selector .slds-radio_button-group | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-radio_button-group, | |
| .slds-radio--button-group { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; } | |
| /** | |
| * @selector .slds-radio_button | |
| * @restrict .slds-radio_button-group span | |
| */ | |
| .slds-radio_button, | |
| .slds-radio--button { | |
| display: -ms-flexbox; | |
| display: flex; | |
| border: 0; | |
| border-radius: 0; | |
| background-clip: padding-box; | |
| /** | |
| * Create styled button when adjacent to the input[radio] element | |
| * | |
| * @selector .slds-radio_faux | |
| * @restrict .slds-radio_button span | |
| */ } | |
| .slds-is-mobile .slds-radio_button, .slds-is-mobile | |
| .slds-radio--button { | |
| line-height: 2.69rem; } | |
| .slds-radio_button .slds-radio_faux, | |
| .slds-radio_button .slds-radio--faux, | |
| .slds-radio--button .slds-radio_faux, | |
| .slds-radio--button .slds-radio--faux { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| text-align: center; | |
| vertical-align: middle; } | |
| .slds-radio_button + .slds-radio_button, | |
| .slds-radio_button + .slds-radio--button, | |
| .slds-radio--button + .slds-radio_button, | |
| .slds-radio--button + .slds-radio--button { | |
| border-left: 1px solid #dddbda; | |
| margin: 0; } | |
| .slds-radio_button:first-child > .slds-radio_faux, | |
| .slds-radio_button:first-child > .slds-radio--faux, | |
| .slds-radio_button:first-child > .slds-radio_button__label, | |
| .slds-radio_button:first-child > .slds-radio--button__label, | |
| .slds-radio--button:first-child > .slds-radio_faux, | |
| .slds-radio--button:first-child > .slds-radio--faux, | |
| .slds-radio--button:first-child > .slds-radio_button__label, | |
| .slds-radio--button:first-child > .slds-radio--button__label { | |
| border-radius: 0.25rem 0 0 0.25rem; } | |
| .slds-radio_button:last-child > .slds-radio_faux, | |
| .slds-radio_button:last-child > .slds-radio--faux, | |
| .slds-radio_button .slds-button_last > .slds-radio_faux, | |
| .slds-radio_button .slds-button--last > .slds-radio--faux, | |
| .slds-radio_button:last-child > .slds-radio_button__label, | |
| .slds-radio_button:last-child > .slds-radio--button__label, | |
| .slds-radio--button:last-child > .slds-radio_faux, | |
| .slds-radio--button:last-child > .slds-radio--faux, | |
| .slds-radio--button .slds-button_last > .slds-radio_faux, | |
| .slds-radio--button .slds-button--last > .slds-radio--faux, | |
| .slds-radio--button:last-child > .slds-radio_button__label, | |
| .slds-radio--button:last-child > .slds-radio--button__label { | |
| border-radius: 0 0.25rem 0.25rem 0; } | |
| .slds-radio_button [type="radio"], | |
| .slds-radio--button [type="radio"] { | |
| width: 1px; | |
| height: 1px; | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; } | |
| .slds-radio_button [type="radio"]:checked + .slds-radio_faux, | |
| .slds-radio_button [type="radio"]:checked + .slds-radio--faux, | |
| .slds-radio_button [type="radio"]:checked ~ .slds-radio_faux, | |
| .slds-radio_button [type="radio"]:checked ~ .slds-radio--faux, | |
| .slds-radio_button [type="radio"]:checked + .slds-radio_button__label, | |
| .slds-radio_button [type="radio"]:checked + .slds-radio--button__label, | |
| .slds-radio--button [type="radio"]:checked + .slds-radio_faux, | |
| .slds-radio--button [type="radio"]:checked + .slds-radio--faux, | |
| .slds-radio--button [type="radio"]:checked ~ .slds-radio_faux, | |
| .slds-radio--button [type="radio"]:checked ~ .slds-radio--faux, | |
| .slds-radio--button [type="radio"]:checked + .slds-radio_button__label, | |
| .slds-radio--button [type="radio"]:checked + .slds-radio--button__label { | |
| background-color: #0070d2; | |
| color: white; } | |
| .slds-radio_button [type="radio"]:checked + .slds-radio_faux:hover, .slds-radio_button [type="radio"]:checked + .slds-radio_faux:focus, | |
| .slds-radio_button [type="radio"]:checked + .slds-radio--faux:hover, | |
| .slds-radio_button [type="radio"]:checked + .slds-radio--faux:focus, | |
| .slds-radio_button [type="radio"]:checked ~ .slds-radio_faux:hover, | |
| .slds-radio_button [type="radio"]:checked ~ .slds-radio_faux:focus, | |
| .slds-radio_button [type="radio"]:checked ~ .slds-radio--faux:hover, | |
| .slds-radio_button [type="radio"]:checked ~ .slds-radio--faux:focus, | |
| .slds-radio_button [type="radio"]:checked + .slds-radio_button__label:hover, | |
| .slds-radio_button [type="radio"]:checked + .slds-radio_button__label:focus, | |
| .slds-radio_button [type="radio"]:checked + .slds-radio--button__label:hover, | |
| .slds-radio_button [type="radio"]:checked + .slds-radio--button__label:focus, | |
| .slds-radio--button [type="radio"]:checked + .slds-radio_faux:hover, | |
| .slds-radio--button [type="radio"]:checked + .slds-radio_faux:focus, | |
| .slds-radio--button [type="radio"]:checked + .slds-radio--faux:hover, | |
| .slds-radio--button [type="radio"]:checked + .slds-radio--faux:focus, | |
| .slds-radio--button [type="radio"]:checked ~ .slds-radio_faux:hover, | |
| .slds-radio--button [type="radio"]:checked ~ .slds-radio_faux:focus, | |
| .slds-radio--button [type="radio"]:checked ~ .slds-radio--faux:hover, | |
| .slds-radio--button [type="radio"]:checked ~ .slds-radio--faux:focus, | |
| .slds-radio--button [type="radio"]:checked + .slds-radio_button__label:hover, | |
| .slds-radio--button [type="radio"]:checked + .slds-radio_button__label:focus, | |
| .slds-radio--button [type="radio"]:checked + .slds-radio--button__label:hover, | |
| .slds-radio--button [type="radio"]:checked + .slds-radio--button__label:focus { | |
| background-color: #005fb2; } | |
| .slds-radio_button [type="radio"]:focus + .slds-radio_faux, | |
| .slds-radio_button [type="radio"]:focus + .slds-radio--faux, | |
| .slds-radio_button [type="radio"]:focus ~ .slds-radio_faux, | |
| .slds-radio_button [type="radio"]:focus ~ .slds-radio--faux, | |
| .slds-radio_button [type="radio"]:focus + .slds-radio_button__label, | |
| .slds-radio_button [type="radio"]:focus + .slds-radio--button__label, | |
| .slds-radio--button [type="radio"]:focus + .slds-radio_faux, | |
| .slds-radio--button [type="radio"]:focus + .slds-radio--faux, | |
| .slds-radio--button [type="radio"]:focus ~ .slds-radio_faux, | |
| .slds-radio--button [type="radio"]:focus ~ .slds-radio--faux, | |
| .slds-radio--button [type="radio"]:focus + .slds-radio_button__label, | |
| .slds-radio--button [type="radio"]:focus + .slds-radio--button__label { | |
| outline: 0; | |
| box-shadow: 0 0 3px #0070D2; | |
| z-index: 1; } | |
| .slds-radio_button [type="radio"][disabled] + .slds-radio_faux, | |
| .slds-radio_button [type="radio"][disabled] + .slds-radio--faux, | |
| .slds-radio_button [type="radio"][disabled] ~ .slds-radio_faux, | |
| .slds-radio_button [type="radio"][disabled] ~ .slds-radio--faux, | |
| .slds-radio_button [type="radio"][disabled] + .slds-radio_button__label, | |
| .slds-radio_button [type="radio"][disabled] + .slds-radio--button__label, | |
| .slds-radio--button [type="radio"][disabled] + .slds-radio_faux, | |
| .slds-radio--button [type="radio"][disabled] + .slds-radio--faux, | |
| .slds-radio--button [type="radio"][disabled] ~ .slds-radio_faux, | |
| .slds-radio--button [type="radio"][disabled] ~ .slds-radio--faux, | |
| .slds-radio--button [type="radio"][disabled] + .slds-radio_button__label, | |
| .slds-radio--button [type="radio"][disabled] + .slds-radio--button__label { | |
| background-color: white; | |
| color: #dddbda; } | |
| .slds-radio_button [type="radio"][disabled] + .slds-radio_faux:hover, .slds-radio_button [type="radio"][disabled] + .slds-radio_faux:focus, | |
| .slds-radio_button [type="radio"][disabled] + .slds-radio--faux:hover, | |
| .slds-radio_button [type="radio"][disabled] + .slds-radio--faux:focus, | |
| .slds-radio_button [type="radio"][disabled] ~ .slds-radio_faux:hover, | |
| .slds-radio_button [type="radio"][disabled] ~ .slds-radio_faux:focus, | |
| .slds-radio_button [type="radio"][disabled] ~ .slds-radio--faux:hover, | |
| .slds-radio_button [type="radio"][disabled] ~ .slds-radio--faux:focus, | |
| .slds-radio_button [type="radio"][disabled] + .slds-radio_button__label:hover, | |
| .slds-radio_button [type="radio"][disabled] + .slds-radio_button__label:focus, | |
| .slds-radio_button [type="radio"][disabled] + .slds-radio--button__label:hover, | |
| .slds-radio_button [type="radio"][disabled] + .slds-radio--button__label:focus, | |
| .slds-radio--button [type="radio"][disabled] + .slds-radio_faux:hover, | |
| .slds-radio--button [type="radio"][disabled] + .slds-radio_faux:focus, | |
| .slds-radio--button [type="radio"][disabled] + .slds-radio--faux:hover, | |
| .slds-radio--button [type="radio"][disabled] + .slds-radio--faux:focus, | |
| .slds-radio--button [type="radio"][disabled] ~ .slds-radio_faux:hover, | |
| .slds-radio--button [type="radio"][disabled] ~ .slds-radio_faux:focus, | |
| .slds-radio--button [type="radio"][disabled] ~ .slds-radio--faux:hover, | |
| .slds-radio--button [type="radio"][disabled] ~ .slds-radio--faux:focus, | |
| .slds-radio--button [type="radio"][disabled] + .slds-radio_button__label:hover, | |
| .slds-radio--button [type="radio"][disabled] + .slds-radio_button__label:focus, | |
| .slds-radio--button [type="radio"][disabled] + .slds-radio--button__label:hover, | |
| .slds-radio--button [type="radio"][disabled] + .slds-radio--button__label:focus { | |
| cursor: default; } | |
| .slds-radio_button [type="radio"][disabled]:checked + .slds-radio_faux, | |
| .slds-radio_button [type="radio"][disabled]:checked + .slds-radio--faux, | |
| .slds-radio_button [type="radio"][disabled]:checked ~ .slds-radio_faux, | |
| .slds-radio_button [type="radio"][disabled]:checked ~ .slds-radio--faux, | |
| .slds-radio_button [type="radio"][disabled]:checked + .slds-radio_button__label, | |
| .slds-radio_button [type="radio"][disabled]:checked + .slds-radio--button__label, | |
| .slds-radio--button [type="radio"][disabled]:checked + .slds-radio_faux, | |
| .slds-radio--button [type="radio"][disabled]:checked + .slds-radio--faux, | |
| .slds-radio--button [type="radio"][disabled]:checked ~ .slds-radio_faux, | |
| .slds-radio--button [type="radio"][disabled]:checked ~ .slds-radio--faux, | |
| .slds-radio--button [type="radio"][disabled]:checked + .slds-radio_button__label, | |
| .slds-radio--button [type="radio"][disabled]:checked + .slds-radio--button__label { | |
| background-color: #c9c7c5; | |
| color: white; } | |
| .slds-radio_button [type="radio"][disabled]:checked + .slds-radio_faux:hover, .slds-radio_button [type="radio"][disabled]:checked + .slds-radio_faux:focus, | |
| .slds-radio_button [type="radio"][disabled]:checked + .slds-radio--faux:hover, | |
| .slds-radio_button [type="radio"][disabled]:checked + .slds-radio--faux:focus, | |
| .slds-radio_button [type="radio"][disabled]:checked ~ .slds-radio_faux:hover, | |
| .slds-radio_button [type="radio"][disabled]:checked ~ .slds-radio_faux:focus, | |
| .slds-radio_button [type="radio"][disabled]:checked ~ .slds-radio--faux:hover, | |
| .slds-radio_button [type="radio"][disabled]:checked ~ .slds-radio--faux:focus, | |
| .slds-radio_button [type="radio"][disabled]:checked + .slds-radio_button__label:hover, | |
| .slds-radio_button [type="radio"][disabled]:checked + .slds-radio_button__label:focus, | |
| .slds-radio_button [type="radio"][disabled]:checked + .slds-radio--button__label:hover, | |
| .slds-radio_button [type="radio"][disabled]:checked + .slds-radio--button__label:focus, | |
| .slds-radio--button [type="radio"][disabled]:checked + .slds-radio_faux:hover, | |
| .slds-radio--button [type="radio"][disabled]:checked + .slds-radio_faux:focus, | |
| .slds-radio--button [type="radio"][disabled]:checked + .slds-radio--faux:hover, | |
| .slds-radio--button [type="radio"][disabled]:checked + .slds-radio--faux:focus, | |
| .slds-radio--button [type="radio"][disabled]:checked ~ .slds-radio_faux:hover, | |
| .slds-radio--button [type="radio"][disabled]:checked ~ .slds-radio_faux:focus, | |
| .slds-radio--button [type="radio"][disabled]:checked ~ .slds-radio--faux:hover, | |
| .slds-radio--button [type="radio"][disabled]:checked ~ .slds-radio--faux:focus, | |
| .slds-radio--button [type="radio"][disabled]:checked + .slds-radio_button__label:hover, | |
| .slds-radio--button [type="radio"][disabled]:checked + .slds-radio_button__label:focus, | |
| .slds-radio--button [type="radio"][disabled]:checked + .slds-radio--button__label:hover, | |
| .slds-radio--button [type="radio"][disabled]:checked + .slds-radio--button__label:focus { | |
| cursor: default; } | |
| /** | |
| * Label element inside of a radio button | |
| * | |
| * @selector .slds-radio_button__label | |
| * @restrict .slds-radio_button label | |
| */ | |
| .slds-radio_button__label, | |
| .slds-radio--button__label { | |
| background-color: white; } | |
| .slds-radio_button__label:hover, .slds-radio_button__label:focus, | |
| .slds-radio--button__label:hover, | |
| .slds-radio--button__label:focus { | |
| cursor: pointer; } | |
| /** | |
| * @summary Initializes checkbox | |
| * | |
| * @name base | |
| * @selector .slds-checkbox | |
| * @restrict span, label, div | |
| * @required | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-checkbox { | |
| display: inline-block; | |
| position: relative; | |
| /** | |
| * @summary Creates a custom styled checkbox | |
| * @selector .slds-checkbox_faux | |
| * @restrict .slds-checkbox span | |
| */ | |
| /** | |
| * @summary Container for faux checkbox, text, and slds-form-element__label | |
| * @selector .slds-checkbox__label | |
| * @restrict .slds-checkbox label | |
| */ | |
| /** | |
| * @name stacked | |
| * @summary stacks label over checkbox | |
| * @selector .slds-checkbox_stacked | |
| * @restrict .slds-checkbox | |
| * @modifier | |
| * @group layout | |
| * @deprecated | |
| */ } | |
| .slds-checkbox .slds-checkbox_faux, | |
| .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; | |
| transition: border 0.1s linear, background-color 0.1s linear; } | |
| .slds-is-mobile .slds-checkbox .slds-checkbox_faux, .slds-is-mobile | |
| .slds-checkbox .slds-checkbox--faux { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; } | |
| .slds-is-mobile .slds-checkbox .slds-checkbox__label { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| vertical-align: middle; | |
| min-height: 2.75rem; } | |
| .slds-checkbox .slds-checkbox__label .slds-form-element__label { | |
| display: inline; | |
| vertical-align: middle; | |
| font-size: 0.812rem; } | |
| .slds-is-mobile .slds-checkbox .slds-checkbox__label .slds-form-element__label { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| font-size: 1rem; } | |
| .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_faux:after, | |
| .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox--faux:after, | |
| .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux:after, | |
| .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox--faux:after { | |
| display: block; | |
| content: ''; | |
| height: 0.25rem; | |
| width: 0.5rem; | |
| position: absolute; | |
| top: 50%; | |
| /* stylelint-disable comment-empty-line-before */ | |
| /*! @noflip */ | |
| left: 50%; | |
| transform: translate3d(-50%, -50%, 0) rotate(-45deg); | |
| border-bottom: 2px solid #0070d2; | |
| /*! @noflip */ | |
| border-left: 2px solid #0070d2; } | |
| .slds-is-mobile .slds-checkbox [type="checkbox"]:checked + .slds-checkbox_faux:after, .slds-is-mobile | |
| .slds-checkbox [type="checkbox"]:checked + .slds-checkbox--faux:after, .slds-is-mobile | |
| .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox_faux:after, .slds-is-mobile | |
| .slds-checkbox [type="checkbox"]:checked ~ .slds-checkbox--faux:after, .slds-is-mobile | |
| .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux:after, .slds-is-mobile | |
| .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox--faux:after { | |
| height: 0.375rem; | |
| width: 0.75rem; | |
| margin-top: -1px; } | |
| .slds-checkbox [type="checkbox"]:focus + .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-checkbox [type="checkbox"]:focus + .slds-checkbox__label .slds-checkbox_faux, | |
| .slds-checkbox [type="checkbox"]:focus + .slds-checkbox__label .slds-checkbox--faux { | |
| content: ''; | |
| border-color: #1589ee; | |
| 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_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 { | |
| 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_faux:after, | |
| .slds-checkbox [type="checkbox"]:indeterminate ~ .slds-checkbox--faux:after, | |
| .slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox__label .slds-checkbox_faux:after, | |
| .slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox__label .slds-checkbox--faux:after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| top: 50%; | |
| /*! @noflip */ | |
| left: 50%; | |
| width: 0.5rem; | |
| height: 2px; | |
| background: #0070d2; | |
| border: 0; | |
| transform: translate3d(-50%, -50%, 0); } | |
| .slds-is-mobile .slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox_faux:after, .slds-is-mobile | |
| .slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox--faux:after, .slds-is-mobile | |
| .slds-checkbox [type="checkbox"]:indeterminate ~ .slds-checkbox_faux:after, .slds-is-mobile | |
| .slds-checkbox [type="checkbox"]:indeterminate ~ .slds-checkbox--faux:after, .slds-is-mobile | |
| .slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox__label .slds-checkbox_faux:after, .slds-is-mobile | |
| .slds-checkbox [type="checkbox"]:indeterminate + .slds-checkbox__label .slds-checkbox--faux:after { | |
| width: 0.75rem; } | |
| .slds-checkbox [type="checkbox"][disabled] + .slds-checkbox_faux, | |
| .slds-checkbox [type="checkbox"][disabled] + .slds-checkbox--faux, | |
| .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, | |
| .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_faux:after, | |
| .slds-checkbox [type="checkbox"][disabled] ~ .slds-checkbox--faux:after, | |
| .slds-checkbox [type="checkbox"][disabled] + .slds-checkbox__label .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: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -ms-flex-align: start; | |
| align-items: flex-start; } | |
| .slds-checkbox.slds-checkbox_stacked .slds-form-element__label { | |
| font-size: 0.75rem; } | |
| .slds-is-mobile .slds-checkbox.slds-checkbox_stacked .slds-form-element__label { | |
| font-size: 0.875rem; } | |
| .slds-checkbox.slds-checkbox_stacked .slds-checkbox_faux { | |
| -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_faux, | |
| .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 { | |
| 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_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, | |
| .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_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, | |
| .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_faux, | |
| .slds-form-element .slds-checkbox [type="checkbox"] ~ .slds-checkbox--faux, | |
| .slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox_faux, | |
| .slds-form-element .slds-checkbox [type="checkbox"] + .slds-checkbox__label .slds-checkbox--faux { | |
| margin-right: 0.5rem; } | |
| /** | |
| * @summary Checkbox with top-level label and value != label | |
| * @name form-element | |
| * @selector .slds-checkbox_standalone | |
| * @restrict .slds-checkbox | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-checkbox_standalone { | |
| pointer-events: none; } | |
| .slds-is-mobile .slds-checkbox_standalone { | |
| min-height: 2.75rem; } | |
| .slds-checkbox_standalone [type="checkbox"] { | |
| width: 1rem; | |
| height: 1rem; | |
| margin: 0; | |
| clip: auto; | |
| opacity: 0; } | |
| .slds-is-mobile .slds-checkbox_standalone [type="checkbox"] { | |
| width: 2.75rem; | |
| height: 2.75rem; | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); } | |
| .slds-checkbox_standalone .slds-checkbox_faux { | |
| display: block; } | |
| .slds-is-mobile .slds-checkbox_standalone .slds-checkbox_faux { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); } | |
| /** | |
| * @summary Initializes checkbox toggle | |
| * | |
| * @name base | |
| * @selector .slds-checkbox_toggle | |
| * @restrict label | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-checkbox_toggle, | |
| .slds-checkbox--toggle { | |
| width: 100%; | |
| /** | |
| * @summary Creates a custom styled checkbox | |
| * @selector .slds-checkbox_faux | |
| * @restrict .slds-checkbox_toggle span | |
| */ } | |
| .slds-is-mobile .slds-checkbox_toggle, .slds-is-mobile | |
| .slds-checkbox--toggle { | |
| padding: 0.125rem 0; } | |
| .slds-is-mobile .slds-checkbox_toggle .slds-form-element__label, .slds-is-mobile | |
| .slds-checkbox--toggle .slds-form-element__label { | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| font-size: 1rem; } | |
| .slds-checkbox_toggle .slds-checkbox_faux, | |
| .slds-checkbox_toggle .slds-checkbox--faux, | |
| .slds-checkbox--toggle .slds-checkbox_faux, | |
| .slds-checkbox--toggle .slds-checkbox--faux { | |
| display: block; | |
| position: relative; | |
| width: 3rem; | |
| height: 1.5rem; | |
| border: 1px solid #b0adab; | |
| padding: 0.125rem; | |
| background-color: #b0adab; | |
| border-radius: 15rem; | |
| transition: background-color 0.2s cubic-bezier(0.75, 0, 0.08, 1); } | |
| .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-checkbox--toggle .slds-checkbox--faux:focus { | |
| cursor: pointer; | |
| background-color: #969492; } | |
| .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 { | |
| content: ''; | |
| position: absolute; | |
| top: 1px; | |
| left: 1px; | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| background-color: white; | |
| border-radius: 15rem; } | |
| .slds-checkbox_toggle [type="checkbox"], | |
| .slds-checkbox--toggle [type="checkbox"] { | |
| width: 1px; | |
| height: 1px; | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| /** | |
| * @summary Container for faux checkbox element | |
| * @selector .slds-checkbox_faux_container | |
| * @restrict .slds-checkbox_toggle span | |
| */ } | |
| .slds-checkbox_toggle [type="checkbox"] + .slds-checkbox_faux_container, | |
| .slds-checkbox_toggle [type="checkbox"] + .slds-checkbox--faux_container, | |
| .slds-checkbox--toggle [type="checkbox"] + .slds-checkbox_faux_container, | |
| .slds-checkbox--toggle [type="checkbox"] + .slds-checkbox--faux_container { | |
| font-size: 0.625rem; | |
| color: #3e3e3c; | |
| /** | |
| * @summary Container for text to show when checkbox is toggle off | |
| * @selector .slds-checkbox_off | |
| * @restrict .slds-checkbox_faux_container span | |
| */ | |
| /** | |
| * @summary Container for text to show when checkbox is toggle on | |
| * @selector .slds-checkbox_off | |
| * @restrict .slds-checkbox_faux_container span | |
| */ } | |
| .slds-is-mobile .slds-checkbox_toggle [type="checkbox"] + .slds-checkbox_faux_container, .slds-is-mobile | |
| .slds-checkbox_toggle [type="checkbox"] + .slds-checkbox--faux_container, .slds-is-mobile | |
| .slds-checkbox--toggle [type="checkbox"] + .slds-checkbox_faux_container, .slds-is-mobile | |
| .slds-checkbox--toggle [type="checkbox"] + .slds-checkbox--faux_container { | |
| font-size: 0.75rem; } | |
| .slds-checkbox_toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox_off, | |
| .slds-checkbox_toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox--off, | |
| .slds-checkbox_toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox_off, | |
| .slds-checkbox_toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox--off, | |
| .slds-checkbox--toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox_off, | |
| .slds-checkbox--toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox--off, | |
| .slds-checkbox--toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox_off, | |
| .slds-checkbox--toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox--off { | |
| display: block; } | |
| .slds-checkbox_toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox_on, | |
| .slds-checkbox_toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox--on, | |
| .slds-checkbox_toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox_on, | |
| .slds-checkbox_toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox--on, | |
| .slds-checkbox--toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox_on, | |
| .slds-checkbox--toggle [type="checkbox"] + .slds-checkbox_faux_container .slds-checkbox--on, | |
| .slds-checkbox--toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox_on, | |
| .slds-checkbox--toggle [type="checkbox"] + .slds-checkbox--faux_container .slds-checkbox--on { | |
| display: none; } | |
| .slds-checkbox_toggle [type="checkbox"]:focus + .slds-checkbox_faux, | |
| .slds-checkbox_toggle [type="checkbox"]:focus + .slds-checkbox--faux, | |
| .slds-checkbox_toggle [type="checkbox"]:focus ~ .slds-checkbox_faux, | |
| .slds-checkbox_toggle [type="checkbox"]:focus ~ .slds-checkbox--faux, | |
| .slds-checkbox_toggle [type="checkbox"]:focus + .slds-checkbox_faux_container .slds-checkbox_faux, | |
| .slds-checkbox_toggle [type="checkbox"]:focus + .slds-checkbox--faux_container .slds-checkbox--faux, | |
| .slds-checkbox--toggle [type="checkbox"]:focus + .slds-checkbox_faux, | |
| .slds-checkbox--toggle [type="checkbox"]:focus + .slds-checkbox--faux, | |
| .slds-checkbox--toggle [type="checkbox"]:focus ~ .slds-checkbox_faux, | |
| .slds-checkbox--toggle [type="checkbox"]:focus ~ .slds-checkbox--faux, | |
| .slds-checkbox--toggle [type="checkbox"]:focus + .slds-checkbox_faux_container .slds-checkbox_faux, | |
| .slds-checkbox--toggle [type="checkbox"]:focus + .slds-checkbox--faux_container .slds-checkbox--faux { | |
| background-color: #969492; | |
| border-color: #1589ee; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_off, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--off, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_off, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--off { | |
| display: none; } | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_on, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--on, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_on, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--on { | |
| display: block; } | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux, | |
| .slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox_faux, | |
| .slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox--faux, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux, | |
| .slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox_faux, | |
| .slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox--faux, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux { | |
| border-color: #0070d2; | |
| background-color: #0070d2; } | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux:hover, .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux:focus, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux:hover, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux:focus, | |
| .slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox_faux:hover, | |
| .slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox_faux:focus, | |
| .slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox--faux:hover, | |
| .slds-checkbox_toggle [type="checkbox"]:checked ~ .slds-checkbox--faux:focus, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:hover, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:focus, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:hover, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:focus, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux:hover, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux:focus, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux:hover, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux:focus, | |
| .slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox_faux:hover, | |
| .slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox_faux:focus, | |
| .slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox--faux:hover, | |
| .slds-checkbox--toggle [type="checkbox"]:checked ~ .slds-checkbox--faux:focus, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:hover, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:focus, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:hover, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:focus { | |
| background-color: #005fb2; } | |
| .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:before, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .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:before, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:before { | |
| content: ''; | |
| position: absolute; | |
| top: 1px; | |
| right: 1px; | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| background-color: white; | |
| border-radius: 15rem; | |
| transition: transform 0.2s cubic-bezier(0.75, 0, 0.08, 1); } | |
| .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:after, | |
| .slds-checkbox_toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .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:after, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:after, | |
| .slds-checkbox--toggle [type="checkbox"]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:after { | |
| content: ' '; | |
| position: absolute; | |
| top: 0.25rem; | |
| left: 0.6rem; | |
| height: 0.7rem; | |
| width: 0.45rem; | |
| border-bottom: 2px solid white; | |
| /* stylelint-disable comment-empty-line-before */ | |
| /*! @noflip */ | |
| border-right: 2px solid white; | |
| border-radius: 0; | |
| background-color: transparent; | |
| transform: rotate(45deg); } | |
| .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, | |
| .slds-checkbox_toggle [type="checkbox"]:checked:focus + .slds-checkbox_faux_container .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, | |
| .slds-checkbox--toggle [type="checkbox"]:checked:focus + .slds-checkbox_faux_container .slds-checkbox_faux, | |
| .slds-checkbox--toggle [type="checkbox"]:checked:focus + .slds-checkbox--faux_container .slds-checkbox--faux { | |
| background-color: #005fb2; } | |
| .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, | |
| .slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .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, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux { | |
| background-color: #b0adab; | |
| pointer-events: none; } | |
| .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:after, | |
| .slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .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:after, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:after, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:after { | |
| background-color: #dddbda; } | |
| .slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux:hover, .slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux:focus, | |
| .slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox--faux:hover, | |
| .slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox--faux:focus, | |
| .slds-checkbox_toggle [type="checkbox"][disabled] ~ .slds-checkbox_faux:hover, | |
| .slds-checkbox_toggle [type="checkbox"][disabled] ~ .slds-checkbox_faux:focus, | |
| .slds-checkbox_toggle [type="checkbox"][disabled] ~ .slds-checkbox--faux:hover, | |
| .slds-checkbox_toggle [type="checkbox"][disabled] ~ .slds-checkbox--faux:focus, | |
| .slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:hover, | |
| .slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:focus, | |
| .slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:hover, | |
| .slds-checkbox_toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:focus, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux:hover, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux:focus, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux:hover, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux:focus, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] ~ .slds-checkbox_faux:hover, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] ~ .slds-checkbox_faux:focus, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] ~ .slds-checkbox--faux:hover, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] ~ .slds-checkbox--faux:focus, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:hover, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox_faux_container .slds-checkbox_faux:focus, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:hover, | |
| .slds-checkbox--toggle [type="checkbox"][disabled] + .slds-checkbox--faux_container .slds-checkbox--faux:focus { | |
| background-color: #b0adab; | |
| cursor: default; } | |
| .slds-checkbox_toggle [type="checkbox"][disabled]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before, | |
| .slds-checkbox_toggle [type="checkbox"][disabled]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:before, | |
| .slds-checkbox--toggle [type="checkbox"][disabled]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:before, | |
| .slds-checkbox--toggle [type="checkbox"][disabled]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:before { | |
| background-color: #dddbda; } | |
| .slds-checkbox_toggle [type="checkbox"][disabled]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:after, | |
| .slds-checkbox_toggle [type="checkbox"][disabled]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:after, | |
| .slds-checkbox--toggle [type="checkbox"][disabled]:checked + .slds-checkbox_faux_container .slds-checkbox_faux:after, | |
| .slds-checkbox--toggle [type="checkbox"][disabled]:checked + .slds-checkbox--faux_container .slds-checkbox--faux:after { | |
| background-color: transparent; } | |
| /** | |
| * @summary Initializes checkbox add button | |
| * | |
| * @name base | |
| * @selector .slds-checkbox_add-button | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-checkbox_add-button, | |
| .slds-checkbox--add-button { | |
| /** | |
| * @summary Creates a custom styled checkbox | |
| * @selector .slds-checkbox_faux | |
| * @restrict .slds-checkbox_add-button label | |
| */ } | |
| .slds-is-mobile .slds-checkbox_add-button, .slds-is-mobile | |
| .slds-checkbox--add-button { | |
| width: 2.75rem; | |
| height: 2.75rem; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; } | |
| .slds-checkbox_add-button .slds-checkbox_faux, | |
| .slds-checkbox_add-button .slds-checkbox--faux, | |
| .slds-checkbox--add-button .slds-checkbox_faux, | |
| .slds-checkbox--add-button .slds-checkbox--faux { | |
| width: 2rem; | |
| height: 2rem; | |
| position: relative; | |
| display: inline-block; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| background-color: white; | |
| cursor: pointer; } | |
| .slds-is-mobile .slds-checkbox_add-button .slds-checkbox_faux, .slds-is-mobile | |
| .slds-checkbox_add-button .slds-checkbox--faux, .slds-is-mobile | |
| .slds-checkbox--add-button .slds-checkbox_faux, .slds-is-mobile | |
| .slds-checkbox--add-button .slds-checkbox--faux { | |
| width: 2rem; | |
| height: 2rem; } | |
| .slds-checkbox_add-button .slds-checkbox_faux:before, .slds-checkbox_add-button .slds-checkbox_faux:after, | |
| .slds-checkbox_add-button .slds-checkbox--faux:before, | |
| .slds-checkbox_add-button .slds-checkbox--faux:after, | |
| .slds-checkbox--add-button .slds-checkbox_faux:before, | |
| .slds-checkbox--add-button .slds-checkbox_faux:after, | |
| .slds-checkbox--add-button .slds-checkbox--faux:before, | |
| .slds-checkbox--add-button .slds-checkbox--faux:after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| height: 0.875rem; | |
| width: 0.125rem; | |
| margin: auto; | |
| background: #0070d2; } | |
| .slds-checkbox_add-button .slds-checkbox_faux:after, | |
| .slds-checkbox_add-button .slds-checkbox--faux:after, | |
| .slds-checkbox--add-button .slds-checkbox_faux:after, | |
| .slds-checkbox--add-button .slds-checkbox--faux:after { | |
| width: 0.875rem; | |
| height: 0.125rem; } | |
| .slds-checkbox_add-button .slds-checkbox_faux:hover:not([disabled]), .slds-checkbox_add-button .slds-checkbox_faux:focus:not([disabled]), | |
| .slds-checkbox_add-button .slds-checkbox--faux:hover:not([disabled]), | |
| .slds-checkbox_add-button .slds-checkbox--faux:focus:not([disabled]), | |
| .slds-checkbox--add-button .slds-checkbox_faux:hover:not([disabled]), | |
| .slds-checkbox--add-button .slds-checkbox_faux:focus:not([disabled]), | |
| .slds-checkbox--add-button .slds-checkbox--faux:hover:not([disabled]), | |
| .slds-checkbox--add-button .slds-checkbox--faux:focus:not([disabled]) { | |
| border: 1px solid #dddbda; | |
| background-color: #f4f6f9; } | |
| .slds-checkbox_add-button .slds-checkbox_faux:active, | |
| .slds-checkbox_add-button .slds-checkbox--faux:active, | |
| .slds-checkbox--add-button .slds-checkbox_faux:active, | |
| .slds-checkbox--add-button .slds-checkbox--faux:active { | |
| background-color: #eef1f6; } | |
| .slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox_faux, | |
| .slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox--faux, | |
| .slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox_faux, | |
| .slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox--faux, | |
| .slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox_faux, | |
| .slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox--faux, | |
| .slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox_faux, | |
| .slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox--faux { | |
| border-color: transparent; | |
| background: #4bca81; } | |
| .slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:before, .slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:after, | |
| .slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:before, | |
| .slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:after, | |
| .slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox_faux:before, | |
| .slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox_faux:after, | |
| .slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox--faux:before, | |
| .slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox--faux:after, | |
| .slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:before, | |
| .slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:after, | |
| .slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:before, | |
| .slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:after, | |
| .slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox_faux:before, | |
| .slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox_faux:after, | |
| .slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox--faux:before, | |
| .slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox--faux:after { | |
| background: white; } | |
| .slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:before, | |
| .slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:before, | |
| .slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox_faux:before, | |
| .slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox--faux:before, | |
| .slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:before, | |
| .slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:before, | |
| .slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox_faux:before, | |
| .slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox--faux:before { | |
| left: 0.312rem; | |
| width: 0.125rem; | |
| height: 1rem; | |
| transform: rotate(40deg); } | |
| .slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:after, | |
| .slds-checkbox_add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:after, | |
| .slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox_faux:after, | |
| .slds-checkbox_add-button [type="checkbox"]:checked + .slds-checkbox--faux:after, | |
| .slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox_faux:after, | |
| .slds-checkbox--add-button [type="checkbox"]:checked ~ .slds-checkbox--faux:after, | |
| .slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox_faux:after, | |
| .slds-checkbox--add-button [type="checkbox"]:checked + .slds-checkbox--faux:after { | |
| top: 0.312rem; | |
| left: -0.625rem; | |
| width: 0.562rem; | |
| height: 0.125rem; | |
| transform: rotate(40deg); } | |
| .slds-checkbox_add-button [type="checkbox"]:focus ~ .slds-checkbox_faux, | |
| .slds-checkbox_add-button [type="checkbox"]:focus ~ .slds-checkbox--faux, | |
| .slds-checkbox_add-button [type="checkbox"]:focus + .slds-checkbox_faux, | |
| .slds-checkbox_add-button [type="checkbox"]:focus + .slds-checkbox--faux, | |
| .slds-checkbox--add-button [type="checkbox"]:focus ~ .slds-checkbox_faux, | |
| .slds-checkbox--add-button [type="checkbox"]:focus ~ .slds-checkbox--faux, | |
| .slds-checkbox--add-button [type="checkbox"]:focus + .slds-checkbox_faux, | |
| .slds-checkbox--add-button [type="checkbox"]:focus + .slds-checkbox--faux { | |
| outline: 0; | |
| box-shadow: 0 0 3px #0070D2; | |
| border-color: #1589ee; } | |
| .slds-checkbox_add-button [type="checkbox"][disabled] ~ .slds-checkbox_faux, | |
| .slds-checkbox_add-button [type="checkbox"][disabled] ~ .slds-checkbox--faux, | |
| .slds-checkbox_add-button [type="checkbox"][disabled] + .slds-checkbox_faux, | |
| .slds-checkbox_add-button [type="checkbox"][disabled] + .slds-checkbox--faux, | |
| .slds-checkbox--add-button [type="checkbox"][disabled] ~ .slds-checkbox_faux, | |
| .slds-checkbox--add-button [type="checkbox"][disabled] ~ .slds-checkbox--faux, | |
| .slds-checkbox--add-button [type="checkbox"][disabled] + .slds-checkbox_faux, | |
| .slds-checkbox--add-button [type="checkbox"][disabled] + .slds-checkbox--faux { | |
| background-color: #e0e5ee; | |
| border-color: transparent; | |
| color: white; | |
| cursor: default; } | |
| .slds-checkbox_add-button [type="checkbox"][disabled] ~ .slds-checkbox_faux:before, .slds-checkbox_add-button [type="checkbox"][disabled] ~ .slds-checkbox_faux:after, | |
| .slds-checkbox_add-button [type="checkbox"][disabled] ~ .slds-checkbox--faux:before, | |
| .slds-checkbox_add-button [type="checkbox"][disabled] ~ .slds-checkbox--faux:after, | |
| .slds-checkbox_add-button [type="checkbox"][disabled] + .slds-checkbox_faux:before, | |
| .slds-checkbox_add-button [type="checkbox"][disabled] + .slds-checkbox_faux:after, | |
| .slds-checkbox_add-button [type="checkbox"][disabled] + .slds-checkbox--faux:before, | |
| .slds-checkbox_add-button [type="checkbox"][disabled] + .slds-checkbox--faux:after, | |
| .slds-checkbox--add-button [type="checkbox"][disabled] ~ .slds-checkbox_faux:before, | |
| .slds-checkbox--add-button [type="checkbox"][disabled] ~ .slds-checkbox_faux:after, | |
| .slds-checkbox--add-button [type="checkbox"][disabled] ~ .slds-checkbox--faux:before, | |
| .slds-checkbox--add-button [type="checkbox"][disabled] ~ .slds-checkbox--faux:after, | |
| .slds-checkbox--add-button [type="checkbox"][disabled] + .slds-checkbox_faux:before, | |
| .slds-checkbox--add-button [type="checkbox"][disabled] + .slds-checkbox_faux:after, | |
| .slds-checkbox--add-button [type="checkbox"][disabled] + .slds-checkbox--faux:before, | |
| .slds-checkbox--add-button [type="checkbox"][disabled] + .slds-checkbox--faux:after { | |
| background: #969492; } | |
| .slds-checkbox_add-button [type="checkbox"][disabled]:checked ~ .slds-checkbox_faux, | |
| .slds-checkbox_add-button [type="checkbox"][disabled]:checked + .slds-checkbox_faux, | |
| .slds-checkbox--add-button [type="checkbox"][disabled]:checked ~ .slds-checkbox_faux, | |
| .slds-checkbox--add-button [type="checkbox"][disabled]:checked + .slds-checkbox_faux { | |
| background-color: white; } | |
| /** | |
| * @summary Initializes checkbox button group | |
| * | |
| * @name base | |
| * @selector .slds-checkbox_button-group | |
| * @restrict div, span | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-checkbox_button-group, | |
| .slds-checkbox--button-group { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| background-color: white; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; } | |
| /** | |
| * @summary Initializes checkbox inside a button group | |
| * @selector .slds-checkbox_button | |
| * @restrict .slds-checkbox_button-group span | |
| */ | |
| .slds-checkbox_button, | |
| .slds-checkbox--button { | |
| display: -ms-flexbox; | |
| display: flex; | |
| border: 0; | |
| border-radius: 0; | |
| background-clip: padding-box; | |
| /** | |
| * @summary Creates a custom styled checkbox | |
| * @selector .slds-checkbox_faux | |
| * @restrict .slds-checkbox_button-group span | |
| */ | |
| /** | |
| * @summary Creates a custom styled checkbox | |
| * @selector .slds-checkbox_button__label | |
| * @restrict .slds-checkbox_button label | |
| */ } | |
| .slds-is-mobile .slds-checkbox_button, .slds-is-mobile | |
| .slds-checkbox--button { | |
| line-height: calc(2.75rem - 0.125rem); } | |
| .slds-checkbox_button .slds-checkbox_faux, | |
| .slds-checkbox_button .slds-checkbox--faux, | |
| .slds-checkbox--button .slds-checkbox_faux, | |
| .slds-checkbox--button .slds-checkbox--faux { | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| text-align: center; | |
| vertical-align: middle; | |
| position: relative; | |
| background-color: white; | |
| transition: border 0.1s linear, background-color 0.1s linear; } | |
| .slds-checkbox_button .slds-checkbox_faux:hover, .slds-checkbox_button .slds-checkbox_faux:focus, | |
| .slds-checkbox_button .slds-checkbox--faux:hover, | |
| .slds-checkbox_button .slds-checkbox--faux:focus, | |
| .slds-checkbox--button .slds-checkbox_faux:hover, | |
| .slds-checkbox--button .slds-checkbox_faux:focus, | |
| .slds-checkbox--button .slds-checkbox--faux:hover, | |
| .slds-checkbox--button .slds-checkbox--faux:focus { | |
| cursor: pointer; | |
| background-color: #f4f6f9; } | |
| .slds-checkbox_button .slds-checkbox_button__label .slds-checkbox_faux, | |
| .slds-checkbox_button .slds-checkbox--button__label .slds-checkbox--faux, | |
| .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--button__label .slds-checkbox--faux, | |
| .slds-checkbox--button .slds-checkbox_button__label .slds-checkbox_faux, | |
| .slds-checkbox--button .slds-checkbox--button__label .slds-checkbox--faux, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--button__label .slds-checkbox--faux { | |
| background-color: transparent; } | |
| .slds-checkbox_button + .slds-checkbox_button, | |
| .slds-checkbox_button + .slds-checkbox--button, | |
| .slds-checkbox--button + .slds-checkbox_button, | |
| .slds-checkbox--button + .slds-checkbox--button { | |
| border-left: 1px solid #dddbda; | |
| border-radius: 0; | |
| margin: 0; } | |
| .slds-checkbox_button:first-child > .slds-checkbox_faux, | |
| .slds-checkbox_button:first-child > .slds-checkbox--faux, | |
| .slds-checkbox_button:first-child > .slds-checkbox_button__label, | |
| .slds-checkbox_button:first-child > .slds-checkbox--button__label, | |
| .slds-checkbox--button:first-child > .slds-checkbox_faux, | |
| .slds-checkbox--button:first-child > .slds-checkbox--faux, | |
| .slds-checkbox--button:first-child > .slds-checkbox_button__label, | |
| .slds-checkbox--button:first-child > .slds-checkbox--button__label { | |
| border-radius: 0.25rem 0 0 0.25rem; } | |
| .slds-checkbox_button:last-child > .slds-checkbox_faux, | |
| .slds-checkbox_button:last-child > .slds-checkbox--faux, | |
| .slds-checkbox_button .slds-button_last > .slds-checkbox_faux, | |
| .slds-checkbox_button .slds-button--last > .slds-checkbox--faux, | |
| .slds-checkbox_button:last-child > .slds-checkbox_button__label, | |
| .slds-checkbox_button:last-child > .slds-checkbox--button__label, | |
| .slds-checkbox--button:last-child > .slds-checkbox_faux, | |
| .slds-checkbox--button:last-child > .slds-checkbox--faux, | |
| .slds-checkbox--button .slds-button_last > .slds-checkbox_faux, | |
| .slds-checkbox--button .slds-button--last > .slds-checkbox--faux, | |
| .slds-checkbox--button:last-child > .slds-checkbox_button__label, | |
| .slds-checkbox--button:last-child > .slds-checkbox--button__label { | |
| border-radius: 0 0.25rem 0.25rem 0; } | |
| .slds-checkbox_button [type="checkbox"], | |
| .slds-checkbox--button [type="checkbox"] { | |
| width: 1px; | |
| height: 1px; | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; } | |
| .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox_faux, | |
| .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--faux, | |
| .slds-checkbox_button [type="checkbox"]:checked ~ .slds-checkbox_faux, | |
| .slds-checkbox_button [type="checkbox"]:checked ~ .slds-checkbox--faux, | |
| .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox_button__label, | |
| .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--button__label, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox_faux, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--faux, | |
| .slds-checkbox--button [type="checkbox"]:checked ~ .slds-checkbox_faux, | |
| .slds-checkbox--button [type="checkbox"]:checked ~ .slds-checkbox--faux, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox_button__label, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--button__label { | |
| background-color: #0070d2; | |
| color: white; } | |
| .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox_faux:hover, .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox_faux:focus, | |
| .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--faux:hover, | |
| .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--faux:focus, | |
| .slds-checkbox_button [type="checkbox"]:checked ~ .slds-checkbox_faux:hover, | |
| .slds-checkbox_button [type="checkbox"]:checked ~ .slds-checkbox_faux:focus, | |
| .slds-checkbox_button [type="checkbox"]:checked ~ .slds-checkbox--faux:hover, | |
| .slds-checkbox_button [type="checkbox"]:checked ~ .slds-checkbox--faux:focus, | |
| .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox_button__label:hover, | |
| .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox_button__label:focus, | |
| .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--button__label:hover, | |
| .slds-checkbox_button [type="checkbox"]:checked + .slds-checkbox--button__label:focus, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox_faux:hover, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox_faux:focus, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--faux:hover, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--faux:focus, | |
| .slds-checkbox--button [type="checkbox"]:checked ~ .slds-checkbox_faux:hover, | |
| .slds-checkbox--button [type="checkbox"]:checked ~ .slds-checkbox_faux:focus, | |
| .slds-checkbox--button [type="checkbox"]:checked ~ .slds-checkbox--faux:hover, | |
| .slds-checkbox--button [type="checkbox"]:checked ~ .slds-checkbox--faux:focus, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox_button__label:hover, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox_button__label:focus, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--button__label:hover, | |
| .slds-checkbox--button [type="checkbox"]:checked + .slds-checkbox--button__label:focus { | |
| background-color: #005fb2; } | |
| .slds-checkbox_button [type="checkbox"]:focus + .slds-checkbox_faux, | |
| .slds-checkbox_button [type="checkbox"]:focus + .slds-checkbox--faux, | |
| .slds-checkbox_button [type="checkbox"]:focus ~ .slds-checkbox_faux, | |
| .slds-checkbox_button [type="checkbox"]:focus ~ .slds-checkbox--faux, | |
| .slds-checkbox_button [type="checkbox"]:focus + .slds-checkbox_button__label, | |
| .slds-checkbox_button [type="checkbox"]:focus + .slds-checkbox--button__label, | |
| .slds-checkbox--button [type="checkbox"]:focus + .slds-checkbox_faux, | |
| .slds-checkbox--button [type="checkbox"]:focus + .slds-checkbox--faux, | |
| .slds-checkbox--button [type="checkbox"]:focus ~ .slds-checkbox_faux, | |
| .slds-checkbox--button [type="checkbox"]:focus ~ .slds-checkbox--faux, | |
| .slds-checkbox--button [type="checkbox"]:focus + .slds-checkbox_button__label, | |
| .slds-checkbox--button [type="checkbox"]:focus + .slds-checkbox--button__label { | |
| outline: 0; | |
| box-shadow: 0 0 3px #0070D2; | |
| z-index: 1; } | |
| .slds-checkbox_button [type="checkbox"][disabled] + .slds-checkbox_faux, | |
| .slds-checkbox_button [type="checkbox"][disabled] + .slds-checkbox--faux, | |
| .slds-checkbox_button [type="checkbox"][disabled] ~ .slds-checkbox_faux, | |
| .slds-checkbox_button [type="checkbox"][disabled] ~ .slds-checkbox--faux, | |
| .slds-checkbox_button [type="checkbox"][disabled] + .slds-checkbox_button__label, | |
| .slds-checkbox_button [type="checkbox"][disabled] + .slds-checkbox--button__label, | |
| .slds-checkbox--button [type="checkbox"][disabled] + .slds-checkbox_faux, | |
| .slds-checkbox--button [type="checkbox"][disabled] + .slds-checkbox--faux, | |
| .slds-checkbox--button [type="checkbox"][disabled] ~ .slds-checkbox_faux, | |
| .slds-checkbox--button [type="checkbox"][disabled] ~ .slds-checkbox--faux, | |
| .slds-checkbox--button [type="checkbox"][disabled] + .slds-checkbox_button__label, | |
| .slds-checkbox--button [type="checkbox"][disabled] + .slds-checkbox--button__label { | |
| background-color: white; | |
| color: #dddbda; | |
| cursor: default; } | |
| .slds-checkbox_button [type="checkbox"][disabled]:checked + .slds-checkbox_faux, | |
| .slds-checkbox_button [type="checkbox"][disabled]:checked + .slds-checkbox--faux, | |
| .slds-checkbox_button [type="checkbox"][disabled]:checked ~ .slds-checkbox_faux, | |
| .slds-checkbox_button [type="checkbox"][disabled]:checked ~ .slds-checkbox--faux, | |
| .slds-checkbox_button [type="checkbox"][disabled]:checked + .slds-checkbox_button__label, | |
| .slds-checkbox_button [type="checkbox"][disabled]:checked + .slds-checkbox--button__label, | |
| .slds-checkbox--button [type="checkbox"][disabled]:checked + .slds-checkbox_faux, | |
| .slds-checkbox--button [type="checkbox"][disabled]:checked + .slds-checkbox--faux, | |
| .slds-checkbox--button [type="checkbox"][disabled]:checked ~ .slds-checkbox_faux, | |
| .slds-checkbox--button [type="checkbox"][disabled]:checked ~ .slds-checkbox--faux, | |
| .slds-checkbox--button [type="checkbox"][disabled]:checked + .slds-checkbox_button__label, | |
| .slds-checkbox--button [type="checkbox"][disabled]:checked + .slds-checkbox--button__label { | |
| background-color: #c9c7c5; | |
| color: white; | |
| cursor: default; } | |
| /** | |
| * @summary Initializes select | |
| * | |
| * @name base | |
| * @selector .slds-select | |
| * @restrict select | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-select { | |
| background-color: white; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| width: 100%; | |
| transition: border 0.1s linear, background-color 0.1s linear; | |
| height: calc(1.875rem + (1px * 2)); | |
| /** | |
| * Initializes select container for custom styling | |
| * | |
| * @selector .slds-select_container | |
| * @restrict div | |
| */ } | |
| .slds-select:required { | |
| box-shadow: none; } | |
| .slds-select:focus, .slds-select:active { | |
| outline: 0; | |
| border-color: #1589ee; | |
| background-color: white; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-select[disabled], .slds-select.slds-is-disabled { | |
| background-color: #ecebea; | |
| border-color: #c9c7c5; | |
| cursor: not-allowed; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; } | |
| .slds-select[disabled]:focus, .slds-select[disabled]:active, .slds-select.slds-is-disabled:focus, .slds-select.slds-is-disabled:active { | |
| box-shadow: none; } | |
| .slds-select[size], .slds-select[multiple] { | |
| min-height: calc(1.875rem + (1px * 2)); | |
| height: inherit; } | |
| .slds-select[size] option, .slds-select[multiple] option { | |
| padding: 0.5rem; } | |
| .slds-select_container { | |
| position: relative; } | |
| .slds-select_container .slds-select { | |
| -moz-appearance: none; | |
| -webkit-appearance: none; | |
| padding-left: 0.5rem; | |
| padding-right: 1.5rem; } | |
| .slds-select_container .slds-select::-ms-expand { | |
| display: none; } | |
| .slds-select_container:before, .slds-select_container:after { | |
| position: absolute; | |
| content: ''; | |
| display: block; | |
| right: 0.5rem; | |
| width: 0; | |
| height: 0; | |
| border-left: 3px solid transparent; | |
| border-right: 3px solid transparent; | |
| pointer-events: none; } | |
| .slds-select_container:before { | |
| border-bottom: 5px solid #061c3f; | |
| top: calc((1.75rem / 2) - 6px); } | |
| .slds-select_container:after { | |
| border-top: 5px solid #061c3f; | |
| bottom: calc((1.75rem / 2) - 6px); } | |
| .slds-has-error .slds-select { | |
| background-color: white; | |
| border-color: #c23934; | |
| box-shadow: #c23934 0 0 0 1px inset; | |
| background-clip: padding-box; } | |
| .slds-has-error .slds-select:focus, .slds-has-error .slds-select:active { | |
| box-shadow: #c23934 0 0 0 1px inset, 0 0 3px #0070D2; } | |
| /** | |
| * @summary Horizontal form elements with label left-aligned to the control | |
| * @selector .slds-form_horizontal | |
| * @restrict .slds-form | |
| * @deprecated | |
| */ | |
| /** | |
| * @summary Vertical form elements with label stacked on top of control | |
| * @selector .slds-form_stacked | |
| * @restrict .slds-form | |
| * @deprecated | |
| */ | |
| /** | |
| * @summary Horizontally align multiple form elements on the same axis | |
| * @selector .slds-form_inline | |
| * @restrict div | |
| * @modifier | |
| */ | |
| .slds-form_inline .slds-form-element, | |
| .slds-form_inline .slds-form-element__label, | |
| .slds-form_inline .slds-form-element__control, | |
| .slds-form--inline .slds-form-element, | |
| .slds-form--inline .slds-form-element__label, | |
| .slds-form--inline .slds-form-element__control { | |
| display: block; } | |
| .slds-form_inline .slds-form-element + .slds-form-element, | |
| .slds-form--inline .slds-form-element + .slds-form-element { | |
| margin-top: 0.75rem; } | |
| @media (min-width: 30em) { | |
| .slds-form_inline .slds-form-element, | |
| .slds-form--inline .slds-form-element { | |
| margin-right: 0.5rem; } | |
| .slds-form_inline .slds-form-element + .slds-form-element, | |
| .slds-form--inline .slds-form-element + .slds-form-element { | |
| margin-top: 0; } | |
| .slds-form_inline .slds-form-element, | |
| .slds-form_inline .slds-form-element__label, | |
| .slds-form_inline .slds-form-element__control, | |
| .slds-form--inline .slds-form-element, | |
| .slds-form--inline .slds-form-element__label, | |
| .slds-form--inline .slds-form-element__control { | |
| display: inline-block; | |
| vertical-align: middle; | |
| margin-bottom: 0; } } | |
| /** | |
| * @summary Aligns the legend properly when there is an info tooltip | |
| * | |
| * @selector .slds-form-element__legend_has-tooltip | |
| * @restrict .slds-form-element__legend | |
| * @deprecated | |
| */ | |
| .slds-form-element__legend_has-tooltip { | |
| float: left; } | |
| .slds-form_compound .slds-form-element__control, | |
| .slds-form--compound .slds-form-element__control { | |
| position: relative; } | |
| .slds-form_compound .slds-form-element__control + .slds-form-element__control, | |
| .slds-form--compound .slds-form-element__control + .slds-form-element__control { | |
| padding-left: 0.5rem; } | |
| /** | |
| * @summary Creates a form that consists of multiple form groups | |
| * | |
| * @name compound | |
| * @selector .slds-form_compound | |
| * @restrict div, fieldset | |
| * @variant | |
| */ | |
| .slds-form_compound, | |
| .slds-form--compound { | |
| width: 100%; } | |
| .slds-form_compound .slds-form-element__row, | |
| .slds-form--compound .slds-form-element__row { | |
| display: -ms-flexbox; | |
| display: flex; | |
| margin-bottom: 0.25rem; } | |
| .slds-form_compound .slds-form-element__row + .slds-form-element__row, | |
| .slds-form--compound .slds-form-element__row + .slds-form-element__row { | |
| clear: both; } | |
| .slds-form_compound .slds-form-element__row .slds-form-element, | |
| .slds-form--compound .slds-form-element__row .slds-form-element { | |
| margin-bottom: 0; } | |
| .slds-form_compound .slds-form-element__row .slds-form-element + .slds-form-element, | |
| .slds-form--compound .slds-form-element__row .slds-form-element + .slds-form-element { | |
| padding-left: 0.5rem; | |
| margin-top: 0; } | |
| .slds-form_compound .slds-form-element__row .slds-form-element__label, | |
| .slds-form--compound .slds-form-element__row .slds-form-element__label { | |
| padding-top: 0; } | |
| /** | |
| * @summary Creates a form that consists of multiple form groups specific to an address form | |
| * | |
| * @name address | |
| * @selector .slds-form-element_address | |
| * @restrict .slds-form_compound | |
| * @modifier | |
| */ | |
| .slds-form-element_address .slds-form-element__row { | |
| -ms-flex-align: end; | |
| align-items: flex-end; } | |
| /** | |
| * @summary Vertical form elements with label stacked on top of control | |
| * @name stacked | |
| * @selector .slds-form-element_stacked | |
| * @restrict .slds-form-element | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-form-element_stacked, | |
| .slds-form_stacked .slds-form-element, | |
| .slds-form_horizontal .slds-form-element_stacked { | |
| display: block; } | |
| .slds-form-element_stacked:not(.slds-form-element_readonly), | |
| .slds-form_stacked .slds-form-element:not(.slds-form-element_readonly), | |
| .slds-form_horizontal .slds-form-element_stacked:not(.slds-form-element_readonly) { | |
| margin-bottom: 0.5rem; } | |
| .slds-form-element_stacked:not(.slds-is-editing), | |
| .slds-form_stacked .slds-form-element:not(.slds-is-editing), | |
| .slds-form_horizontal .slds-form-element_stacked:not(.slds-is-editing) { | |
| padding: 0 0.25rem; } | |
| .slds-form-element_stacked .slds-form-element, | |
| .slds-form_stacked .slds-form-element .slds-form-element, | |
| .slds-form_horizontal .slds-form-element_stacked .slds-form-element { | |
| padding: 0; | |
| margin-bottom: 0; } | |
| .slds-form-element_stacked:not([class*="slds-size"]), | |
| .slds-form_stacked .slds-form-element:not([class*="slds-size"]), | |
| .slds-form_horizontal .slds-form-element_stacked:not([class*="slds-size"]) { | |
| width: 100%; | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; } | |
| .slds-form-element_stacked .slds-checkbox, | |
| .slds-form-element_stacked .slds-radio, | |
| .slds-form_stacked .slds-form-element .slds-checkbox, | |
| .slds-form_stacked .slds-form-element .slds-radio, | |
| .slds-form_horizontal .slds-form-element_stacked .slds-checkbox, | |
| .slds-form_horizontal .slds-form-element_stacked .slds-radio { | |
| display: block; } | |
| .slds-form-element_stacked .slds-form-element__label, | |
| .slds-form-element_stacked .slds-form-element__control, | |
| .slds-form_stacked .slds-form-element .slds-form-element__label, | |
| .slds-form_stacked .slds-form-element .slds-form-element__control, | |
| .slds-form_horizontal .slds-form-element_stacked .slds-form-element__label, | |
| .slds-form_horizontal .slds-form-element_stacked .slds-form-element__control { | |
| border-bottom: 0; | |
| padding-left: 0; } | |
| .slds-form-element_stacked .slds-form-element__control, | |
| .slds-form_stacked .slds-form-element .slds-form-element__control, | |
| .slds-form_horizontal .slds-form-element_stacked .slds-form-element__control { | |
| width: 100%; | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; | |
| clear: left; } | |
| .slds-form-element_stacked .slds-form-element__icon, | |
| .slds-form_stacked .slds-form-element .slds-form-element__icon, | |
| .slds-form_horizontal .slds-form-element_stacked .slds-form-element__icon { | |
| float: none; | |
| padding-top: 0.25rem; } | |
| .slds-is-mobile .slds-form-element_stacked .slds-form-element__icon, .slds-is-mobile | |
| .slds-form_stacked .slds-form-element .slds-form-element__icon, .slds-is-mobile | |
| .slds-form_horizontal .slds-form-element_stacked .slds-form-element__icon { | |
| padding-top: 0; } | |
| /** | |
| * @summary Horizontal form elements with label left-aligned to the control | |
| * @name horizontal | |
| * @selector .slds-form-element_horizontal | |
| * @restrict .slds-form-element | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-form-element_horizontal, | |
| .slds-form_horizontal .slds-form-element, | |
| .slds-form_stacked .slds-form-element_horizontal { | |
| display: block; } | |
| .slds-form-element_horizontal:not(.slds-form-element_readonly), | |
| .slds-form_horizontal .slds-form-element:not(.slds-form-element_readonly), | |
| .slds-form_stacked .slds-form-element_horizontal:not(.slds-form-element_readonly) { | |
| margin-bottom: 0.5rem; } | |
| .slds-form-element_horizontal:not([class*="slds-size"]), | |
| .slds-form_horizontal .slds-form-element:not([class*="slds-size"]), | |
| .slds-form_stacked .slds-form-element_horizontal:not([class*="slds-size"]) { | |
| width: 100%; | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; } | |
| .slds-form-element_horizontal:not(.slds-is-editing), | |
| .slds-form_horizontal .slds-form-element:not(.slds-is-editing), | |
| .slds-form_stacked .slds-form-element_horizontal:not(.slds-is-editing) { | |
| padding: 0.25rem 0.25rem; } | |
| .slds-form-element_horizontal .slds-form-element, | |
| .slds-form_horizontal .slds-form-element .slds-form-element, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-form-element { | |
| padding: 0; | |
| margin-bottom: 0; } | |
| .slds-form-element_horizontal.slds-is-edited, | |
| .slds-form_horizontal .slds-form-element.slds-is-edited, | |
| .slds-form_stacked .slds-form-element_horizontal.slds-is-edited { | |
| padding-top: 1.25rem; } | |
| @media (min-width: 48em) { | |
| .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__label, | |
| .slds-form_horizontal .slds-form-element.slds-form-element_1-col .slds-form-element__label, | |
| .slds-form_stacked .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__label { | |
| max-width: calc((50% - 33.333%) - 1.25rem); } | |
| .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__control, | |
| .slds-form_horizontal .slds-form-element.slds-form-element_1-col .slds-form-element__control, | |
| .slds-form_stacked .slds-form-element_horizontal.slds-form-element_1-col .slds-form-element__control { | |
| padding-left: calc((50% - 33.333%) - (0.25rem * 2)); } } | |
| @media (min-width: 48em) { | |
| .slds-form-element_horizontal .slds-form-element__label, | |
| .slds-form_horizontal .slds-form-element .slds-form-element__label, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-form-element__label { | |
| float: left; | |
| max-width: calc(33% - 1.25rem); | |
| -ms-flex-preferred-size: calc(33% - 1.25rem); | |
| flex-basis: calc(33% - 1.25rem); | |
| margin-bottom: 0; | |
| position: relative; | |
| z-index: 1; } | |
| .slds-is-mobile .slds-form-element_horizontal .slds-form-element__label, .slds-is-mobile | |
| .slds-form_horizontal .slds-form-element .slds-form-element__label, .slds-is-mobile | |
| .slds-form_stacked .slds-form-element_horizontal .slds-form-element__label { | |
| display: block; | |
| max-width: calc(33% - 2.75rem); | |
| -ms-flex-preferred-size: calc(33% - 2.75rem); | |
| flex-basis: calc(33% - 2.75rem); | |
| padding-top: 0.25rem; } | |
| .slds-form-element_horizontal .slds-form-element__control, | |
| .slds-form_horizontal .slds-form-element .slds-form-element__control, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-form-element__control { | |
| padding-left: 33%; | |
| clear: none; } | |
| .slds-is-mobile .slds-form-element_horizontal .slds-form-element__control, .slds-is-mobile | |
| .slds-form_horizontal .slds-form-element .slds-form-element__control, .slds-is-mobile | |
| .slds-form_stacked .slds-form-element_horizontal .slds-form-element__control { | |
| display: block; | |
| min-height: 0; } | |
| .slds-form-element_horizontal .slds-form-element__control .slds-form-element__control, | |
| .slds-form_horizontal .slds-form-element .slds-form-element__control .slds-form-element__control, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-form-element__control .slds-form-element__control { | |
| padding-left: 0; } | |
| .slds-form-element_horizontal .slds-form-element__icon, | |
| .slds-form_horizontal .slds-form-element .slds-form-element__icon, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-form-element__icon { | |
| float: left; | |
| padding-top: 0.25rem; } | |
| .slds-is-mobile .slds-form-element_horizontal .slds-form-element__icon, .slds-is-mobile | |
| .slds-form_horizontal .slds-form-element .slds-form-element__icon, .slds-is-mobile | |
| .slds-form_stacked .slds-form-element_horizontal .slds-form-element__icon { | |
| padding-top: 0; } | |
| .slds-form-element_horizontal .slds-checkbox_standalone, | |
| .slds-form_horizontal .slds-form-element .slds-checkbox_standalone, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-checkbox_standalone { | |
| padding: 0.25rem 0; } | |
| .slds-is-mobile .slds-form-element_horizontal .slds-checkbox__label, .slds-is-mobile | |
| .slds-form_horizontal .slds-form-element .slds-checkbox__label, .slds-is-mobile | |
| .slds-form_stacked .slds-form-element_horizontal .slds-checkbox__label { | |
| display: block; } | |
| .slds-form-element_horizontal .slds-checkbox:not(.slds-checkbox_stacked) .slds-form-element__label, | |
| .slds-form-element_horizontal .slds-radio .slds-form-element__label, | |
| .slds-form_horizontal .slds-form-element .slds-checkbox:not(.slds-checkbox_stacked) .slds-form-element__label, | |
| .slds-form_horizontal .slds-form-element .slds-radio .slds-form-element__label, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-checkbox:not(.slds-checkbox_stacked) .slds-form-element__label, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-radio .slds-form-element__label { | |
| position: relative; | |
| float: none; | |
| max-width: 100%; | |
| width: auto; } | |
| .slds-form-element_horizontal .slds-form-element__row .slds-form-element__label, | |
| .slds-form-element_horizontal .slds-form-element__row .slds-form-element__control, | |
| .slds-form-element_horizontal .slds-dueling-list__column .slds-form-element__label, | |
| .slds-form_horizontal .slds-form-element .slds-form-element__row .slds-form-element__label, | |
| .slds-form_horizontal .slds-form-element .slds-form-element__row .slds-form-element__control, | |
| .slds-form_horizontal .slds-form-element .slds-dueling-list__column .slds-form-element__label, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-form-element__row .slds-form-element__label, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-form-element__row .slds-form-element__control, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-dueling-list__column .slds-form-element__label { | |
| width: auto; | |
| max-width: 100%; | |
| -ms-flex-preferred-size: auto; | |
| flex-basis: auto; | |
| float: none; | |
| position: relative; | |
| padding-left: 0; | |
| margin-bottom: 0; } | |
| .slds-form-element_horizontal .slds-dueling-list, | |
| .slds-form_horizontal .slds-form-element .slds-dueling-list, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-dueling-list { | |
| clear: none; } | |
| .slds-form-element_horizontal .slds-input-has-icon_left .slds-input__icon, | |
| .slds-form_horizontal .slds-form-element .slds-input-has-icon_left .slds-input__icon, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-input-has-icon_left .slds-input__icon { | |
| left: calc(33% + 0.75rem); } | |
| .slds-form-element_horizontal .slds-input-has-icon_left-right .slds-input__icon_left, | |
| .slds-form_horizontal .slds-form-element .slds-input-has-icon_left-right .slds-input__icon_left, | |
| .slds-form_stacked .slds-form-element_horizontal .slds-input-has-icon_left-right .slds-input__icon_left { | |
| left: calc(33% + 0.75rem); } } | |
| .slds-is-mobile .slds-form-element_horizontal .slds-button_icon, .slds-is-mobile | |
| .slds-form_horizontal .slds-form-element .slds-button_icon, .slds-is-mobile | |
| .slds-form_stacked .slds-form-element_horizontal .slds-button_icon { | |
| vertical-align: top; } | |
| /** | |
| * @summary Creates a form that consists of multiple form groups | |
| * | |
| * @name compound | |
| * @selector .slds-form-element_compound | |
| * @restrict .slds-form-element | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-form-element_compound .slds-form-element__row { | |
| display: -ms-flexbox; | |
| display: flex; | |
| margin-bottom: 0.25rem; | |
| margin-left: -0.25rem; | |
| margin-right: -0.25rem; } | |
| .slds-form-element_compound .slds-form-element__row .slds-form-element__label { | |
| padding-top: 0; } | |
| .slds-form-element_compound .slds-form-element { | |
| padding-left: 0.25rem; | |
| padding-right: 0.25rem; } | |
| /** | |
| * @summary Creates a form that consists of multiple form groups specific to an address form | |
| * | |
| * @name address | |
| * @selector .slds-form-element_address | |
| * @restrict .slds-form-element_compound, .slds-form_compound | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-form-element_address .slds-form-element__row { | |
| -ms-flex-align: end; | |
| align-items: flex-end; } | |
| /** | |
| * @summary Creates layout for a form | |
| * @name record-detail | |
| * @selector .slds-form | |
| * @restrict div, form | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| /** | |
| * @summary Each row inside of a record form | |
| * @selector .slds-form__row | |
| * @restrict .slds-form div | |
| */ | |
| .slds-form__row { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| margin-left: -0.75rem; | |
| margin-right: -0.75rem; } | |
| /** | |
| * @summary Each item inside of a record form row | |
| * @selector .slds-form__item | |
| * @restrict .slds-form__row div | |
| */ | |
| .slds-form__item { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex: 1 1 0%; | |
| flex: 1 1 0%; | |
| min-width: 280px; | |
| padding-left: 0.75rem; | |
| padding-right: 0.75rem; } | |
| /** | |
| * @summary Inidicates if a form element has been edited, but unsaved | |
| * @selector .slds-is-edited | |
| * @restrict .slds-form div | |
| */ | |
| .slds-is-edited { | |
| background: #faffbd; } | |
| .slds-is-edited .slds-form-element__undo { | |
| top: -1.25rem; | |
| right: 0.25rem; } | |
| /** | |
| * @summary Container for the undo button icon found inside of slds-form-element | |
| * @selector .slds-form-element__undo | |
| * @restrict .slds-form-element div | |
| */ | |
| .slds-form-element__undo { | |
| position: absolute; | |
| top: 0; | |
| right: 0; } | |
| /** | |
| * @summary Creates a docked form footer | |
| * | |
| * @name base | |
| * @selector .slds-docked-form-footer | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-docked-form-footer { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| padding: 0.5rem 0; | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| background: #f3f2f2; | |
| box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16); | |
| z-index: 8000; } | |
| /** | |
| * @summary Initializes slider component | |
| * | |
| * @name base | |
| * @selector .slds-slider | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-slider { | |
| display: -ms-flexbox; | |
| display: flex; | |
| position: relative; } | |
| /** | |
| * @summary Range track for slider | |
| * | |
| * @selector .slds-slider__range | |
| * @restrict input | |
| */ | |
| .slds-slider__range { | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| width: 100%; | |
| background: transparent; | |
| border-radius: 0.125rem; } | |
| .slds-slider__range:focus { | |
| outline: 0; } | |
| .slds-slider__range::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 1rem; | |
| height: 1rem; | |
| border-radius: 50%; | |
| background: #0070d2; | |
| border: 0; | |
| box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px; | |
| cursor: pointer; | |
| transition: background 0.15s ease-in-out; | |
| margin-top: calc(((1rem / 2) - (4px / 2)) * -1); } | |
| .slds-slider__range::-webkit-slider-thumb:hover { | |
| background-color: #005fb2; } | |
| .slds-slider__range::-webkit-slider-runnable-track { | |
| width: 100%; | |
| height: 4px; | |
| cursor: pointer; | |
| background: #ecebea; | |
| border-radius: 0.125rem; } | |
| .slds-slider__range::-moz-range-thumb { | |
| -moz-appearance: none; | |
| appearance: none; | |
| width: 1rem; | |
| height: 1rem; | |
| border-radius: 50%; | |
| background: #0070d2; | |
| border: 0; | |
| box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px; | |
| cursor: pointer; | |
| transition: background 0.15s ease-in-out; } | |
| .slds-slider__range::-moz-range-thumb:hover { | |
| background-color: #005fb2; } | |
| .slds-slider__range::-moz-range-track { | |
| width: 100%; | |
| height: 4px; | |
| cursor: pointer; | |
| background: #ecebea; | |
| border-radius: 0.125rem; } | |
| .slds-slider__range::-ms-track { | |
| width: 100%; | |
| height: 4px; | |
| cursor: pointer; | |
| background: #ecebea; | |
| border-radius: 0.125rem; | |
| border-color: transparent; | |
| color: transparent; | |
| cursor: pointer; } | |
| .slds-slider__range::-ms-thumb { | |
| appearance: none; | |
| width: 1rem; | |
| height: 1rem; | |
| border-radius: 50%; | |
| background: #0070d2; | |
| border: 0; | |
| box-shadow: rgba(0, 0, 0, 0.16) 0 2px 3px; | |
| cursor: pointer; | |
| transition: background 0.15s ease-in-out; | |
| margin-top: calc(4px / 4); } | |
| .slds-slider__range::-ms-thumb:hover { | |
| background-color: #005fb2; } | |
| .slds-slider__range:focus::-webkit-slider-thumb { | |
| background-color: #005fb2; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-slider__range:active::-webkit-slider-thumb { | |
| background-color: #005fb2; } | |
| .slds-slider__range:focus::-moz-range-thumb { | |
| background-color: #005fb2; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-slider__range:active::-moz-range-thumb { | |
| background-color: #005fb2; } | |
| .slds-slider__range[disabled]::-webkit-slider-thumb { | |
| background-color: #ecebea; | |
| cursor: default; } | |
| .slds-slider__range[disabled]::-webkit-slider-runnable-track { | |
| background-color: #ecebea; | |
| cursor: default; } | |
| .slds-slider__range[disabled]::-moz-range-thumb { | |
| background-color: #ecebea; | |
| cursor: default; } | |
| .slds-slider__range[disabled]::-moz-range-track { | |
| background-color: #ecebea; } | |
| .slds-slider__range[disabled]::-ms-thumb { | |
| background-color: #ecebea; | |
| cursor: default; } | |
| .slds-slider__range[disabled]::-ms-track { | |
| background-color: #ecebea; | |
| cursor: default; } | |
| /** | |
| * @summary Element that contains value of input range | |
| * | |
| * @selector .slds-slider__value | |
| * @restrict .slds-slider span | |
| */ | |
| .slds-slider__value { | |
| padding: 0 0.5rem; } | |
| /** | |
| * @summary Contains the label and range for the slider label - not required | |
| * | |
| * @selector .slds-slider-label | |
| * @restrict span | |
| */ | |
| /** | |
| * @summary Contains the label for the slider and adds a hook for adding `.slds-assistive-text` class to visually hide the label, but not the range | |
| * | |
| * @selector .slds-slider-label__label | |
| * @restrict .slds-slider-label span | |
| */ | |
| .slds-slider-label__label { | |
| display: block; } | |
| /** | |
| * @summary Contains the range for the slider | |
| * | |
| * @selector .slds-slider-label__range | |
| * @restrict .slds-slider-label span | |
| */ | |
| /** | |
| * @summary Modifier that makes the slider vertical | |
| * | |
| * @selector .slds-slider_vertical | |
| * @restrict .slds-slider | |
| * @modifier | |
| */ | |
| .slds-slider_vertical { | |
| height: 13.875rem; } | |
| .slds-slider_vertical .slds-slider__range { | |
| width: 12rem; | |
| height: 1rem; | |
| transform: rotate(-90deg); | |
| transform-origin: 6rem 6rem; } | |
| .slds-slider_vertical .slds-slider__value { | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| padding: 0; } | |
| /** | |
| * @name base | |
| * @selector .slds-file-selector | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-file-selector { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; } | |
| /** | |
| * Region that a file can be dropped within | |
| * | |
| * @selector .slds-file-selector__dropzone | |
| * @restrict .slds-file-selector div | |
| * @required | |
| */ | |
| .slds-file-selector__dropzone { | |
| padding: 0.125rem; | |
| border: 1px dashed #dddbda; | |
| border-radius: 0.25rem; | |
| /** | |
| * @selector .slds-has-drag-over | |
| * @restrict .slds-file-selector__dropzone | |
| * @modifier | |
| */ } | |
| .slds-file-selector__dropzone.slds-has-drag-over { | |
| outline: 0; | |
| border-color: #1589ee; | |
| box-shadow: 0 0 3px #0070D2; | |
| border-style: solid; } | |
| /** | |
| * Hidden input element | |
| * | |
| * @selector .slds-file-selector__input | |
| * @restrict .slds-file-selector input | |
| * @required | |
| */ | |
| .slds-file-selector__input:focus ~ .slds-file-selector__body > .slds-file-selector__button { | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-file-selector__input[disabled] ~ .slds-file-selector__body { | |
| color: #dddbda; } | |
| .slds-file-selector__input[disabled] ~ .slds-file-selector__body > .slds-file-selector__button { | |
| background: #e0e5ee; | |
| border-color: transparent; | |
| color: white; } | |
| .slds-file-selector__input[disabled] ~ .slds-file-selector__body > .slds-file-selector__body-icon { | |
| fill: currentColor; } | |
| /** | |
| * Faux button | |
| * | |
| * @selector .slds-file-selector__button | |
| * @restrict .slds-file-selector button, .slds-file-selector span | |
| * @required | |
| */ | |
| .slds-file-selector__button { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| /** | |
| * Modifications based on context | |
| * | |
| * Single Line | |
| * Dedicated dropzone when there are multiple dropzones in the form or when | |
| * the input is positioned among other form inputs. | |
| * | |
| * @selector .slds-file-selector_files | |
| * @restrict .slds-file-selector | |
| * @required | |
| */ | |
| .slds-file-selector_files, | |
| .slds-file-selector--files { | |
| /** | |
| * Container for file selector content, specifically within the dropzone | |
| * | |
| * @selector .slds-file-selector__body | |
| * @restrict .slds-file-selector label | |
| * @required | |
| */ | |
| /** | |
| * Descriptive call back text | |
| * | |
| * @selector .slds-file-selector__text | |
| * @restrict .slds-file-selector span | |
| * @required | |
| */ } | |
| .slds-file-selector_files .slds-file-selector__body, | |
| .slds-file-selector--files .slds-file-selector__body { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| .slds-file-selector_files .slds-file-selector__text, | |
| .slds-file-selector--files .slds-file-selector__text { | |
| margin-left: 0.5rem; | |
| margin-right: 0.75rem; } | |
| /** | |
| * Multi Line / Image | |
| * | |
| * Use as a dedicated dropzone for image files only. May require a | |
| * cropping control. | |
| * | |
| * @name image | |
| * @selector .slds-file-selector_images | |
| * @restrict .slds-file-selector | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-file-selector_images, | |
| .slds-file-selector--images { | |
| display: block; } | |
| .slds-file-selector_images .slds-file-selector__dropzone, | |
| .slds-file-selector--images .slds-file-selector__dropzone { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -ms-flex-line-pack: center; | |
| align-content: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| margin: auto; | |
| padding: 1rem; } | |
| .slds-file-selector_images .slds-file-selector__body, | |
| .slds-file-selector--images .slds-file-selector__body { | |
| text-align: center; } | |
| .slds-file-selector_images .slds-file-selector__text, | |
| .slds-file-selector--images .slds-file-selector__text { | |
| margin-top: 0.75rem; } | |
| /** | |
| * Invisible Dropzone (Container) | |
| * | |
| * Use when an entire container should be droppable. | |
| * The container should have a visible boundary, like a modal, composer, or page. | |
| * | |
| * @name integrated | |
| * @selector .slds-file-selector_integrated | |
| * @restrict .slds-file-selector | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-file-selector_integrated, | |
| .slds-file-selector--integrated { | |
| width: 100%; | |
| height: 100%; | |
| position: relative; | |
| display: block; } | |
| /** | |
| * Specific to integrated file selector — region that a file can be dropped within | |
| * | |
| * @selector .slds-file-selector__dropzone_integrated | |
| * @restrict .slds-file-selector_integrated div | |
| * @required | |
| */ | |
| .slds-file-selector__dropzone_integrated, | |
| .slds-file-selector__dropzone--integrated { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -ms-flex-line-pack: center; | |
| align-content: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| margin: auto; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| border: 0; | |
| opacity: 0; | |
| z-index: -1; | |
| /** | |
| * Informs dropzone that file has been dragged into the viewport | |
| * | |
| * @selector .slds-has-drag | |
| * @restrict .slds-file-selector__dropzone_integrated | |
| * @notes To be added with JavaScript | |
| * @required | |
| * @modifier | |
| */ | |
| /** | |
| * Informs dropzone that file has been dragged into its region | |
| * | |
| * @selector .slds-has-drag-over | |
| * @restrict .slds-file-selector__dropzone_integrated | |
| * @notes To be added with JavaScript | |
| * @required | |
| * @modifier | |
| */ } | |
| .slds-file-selector__dropzone_integrated.slds-has-drag, | |
| .slds-file-selector__dropzone--integrated.slds-has-drag { | |
| background: rgba(255, 255, 255, 0.75); | |
| opacity: 1; | |
| z-index: 8000; } | |
| .slds-file-selector__dropzone_integrated.slds-has-drag-over, | |
| .slds-file-selector__dropzone--integrated.slds-has-drag-over { | |
| background: #fafaf9; | |
| box-shadow: 0 0 0 4px #1589ee inset; } | |
| /** | |
| * Specific to integrated file selector — container for file selector | |
| * content, specifically within the dropzone | |
| * | |
| * @selector .slds-file-selector__body_integrated | |
| * @restrict .slds-file-selector_integrated label | |
| * @required | |
| */ | |
| .slds-file-selector__body_integrated, | |
| .slds-file-selector__body--integrated { | |
| width: 12rem; | |
| height: 12rem; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -ms-flex-line-pack: center; | |
| align-content: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| margin: auto; | |
| background: white; | |
| box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| -ms-flex-direction: column; | |
| flex-direction: column; } | |
| /** | |
| * Specific to integrated file selector — Descriptive call back text | |
| * | |
| * @selector .slds-file-selector__text_integrated | |
| * @restrict .slds-file-selector_integrated span | |
| * @required | |
| */ | |
| .slds-file-selector__text_integrated, | |
| .slds-file-selector__text--integrated { | |
| margin-top: 0.75rem; } | |
| /** | |
| * @summary Initializes page header | |
| * | |
| * @variant | |
| * @name base | |
| * @selector .slds-page-header | |
| * @restrict div | |
| * @support dev-ready | |
| */ | |
| .slds-page-header { | |
| padding: 1rem 1rem; | |
| border-bottom: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| background: #f3f2f2; | |
| background-clip: padding-box; | |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); | |
| border: 1px solid #dddbda; } | |
| /** | |
| * @summary Used for creating rows in a page header | |
| * | |
| * @selector .slds-page-header__row | |
| * @restrict .slds-page-header div | |
| */ | |
| .slds-page-header__row { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| /** | |
| * @summary Used to create rows with gutters in the page header | |
| * | |
| * @selector .slds-page-header__row_gutters | |
| * @restrict .slds-page-header__row | |
| */ | |
| .slds-page-header__row_gutters { | |
| margin-left: -1rem; | |
| margin-right: -1rem; } | |
| /** | |
| * @summary Used to create a column containing the page title | |
| * | |
| * @selector .slds-page-header__col_title | |
| * @restrict .slds-page-header__row | |
| */ | |
| .slds-page-header__col-title { | |
| -ms-flex: 1 1 0%; | |
| flex: 1 1 0%; | |
| min-width: 0; } | |
| .slds-page-header__icon { | |
| width: 2.25rem; | |
| height: 2.25rem; } | |
| /** | |
| * @summary Used to create a column containing the page actions | |
| * | |
| * @selector .slds-page-header__col_actions | |
| * @restrict .slds-page-header__row | |
| */ | |
| .slds-page-header__col-actions { | |
| -ms-flex-item-align: start; | |
| align-self: flex-start; | |
| -ms-flex: none; | |
| flex: none; | |
| padding-bottom: 0.25rem; | |
| vertical-align: top; } | |
| /** | |
| * @summary Used to create a column containing the page meta data | |
| * | |
| * @selector .slds-page-header__col_meta | |
| * @restrict .slds-page-header__row | |
| */ | |
| .slds-page-header__col-meta { | |
| -ms-flex-item-align: center; | |
| -ms-grid-row-align: center; | |
| align-self: center; | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| vertical-align: middle; } | |
| /** | |
| * @summary Used to create a column containing the page controls | |
| * | |
| * @selector .slds-page-header__col_controls | |
| * @restrict .slds-page-header__row | |
| */ | |
| .slds-page-header__col-controls { | |
| -ms-flex-item-align: end; | |
| align-self: flex-end; | |
| -ms-flex: none; | |
| flex: none; | |
| vertical-align: bottom; } | |
| /** | |
| * @summary Used to create a column containing the page record details | |
| * | |
| * @selector .slds-page-header__col_controls | |
| * @restrict .slds-page-header__row | |
| */ | |
| .slds-page-header__col-details { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| padding-left: 1rem; | |
| padding-right: 1rem; | |
| max-width: 100%; } | |
| /** | |
| * @summary Holds all the elements that make up the overall page name | |
| * | |
| * @selector .slds-page-header__name | |
| * @restrict .slds-page-header div | |
| */ | |
| .slds-page-header__name { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| padding-right: 0.5rem; | |
| max-width: 100%; } | |
| .slds-page-header__name h1 { | |
| line-height: 1; } | |
| /** | |
| * @summary Used to contain the page name title | |
| * | |
| * @selector .slds-page-header__name-title | |
| * @restrict .slds-page-header__name div | |
| */ | |
| .slds-page-header__name-title { | |
| min-width: 0; } | |
| /** | |
| * @summary Used to position the list view switcher | |
| * | |
| * @selector .slds-page-header__name-switcher | |
| * @restrict .slds-page-header__name div | |
| */ | |
| .slds-page-header__name-switcher { | |
| -ms-flex-item-align: end; | |
| align-self: flex-end; | |
| margin: 0 0 0.125rem 0.125rem; } | |
| .slds-page-header__name-switcher .slds-button__icon { | |
| fill: #080707; } | |
| /** | |
| * @summary Used to display the meta-text related to the page name | |
| * | |
| * @selector .slds-page-header__name-meta | |
| * @restrict .slds-page-header p | |
| */ | |
| .slds-page-header__name-meta { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| font-size: 0.75rem; | |
| padding-right: 0.5rem; } | |
| /** | |
| * @summary Contains the page header meta text | |
| * | |
| * @selector .slds-page-header__meta-text | |
| * @restrict .slds-page-header p | |
| */ | |
| .slds-page-header__meta-text { | |
| font-size: 0.875rem; } | |
| /** | |
| * @sumamry Used to display the main page heading title | |
| * | |
| * @selector .slds-page-header__title | |
| * @restrict .slds-page-header h1 span | |
| */ | |
| .slds-page-header__title { | |
| font-size: 1.125rem; | |
| font-weight: 700; | |
| line-height: 1.25; | |
| display: block; } | |
| .slds-page-header__title .slds-icon { | |
| fill: currentColor; } | |
| /** | |
| * @summary Used to create a row of page header controls | |
| * | |
| * @selector .slds-page-header__controls | |
| * @restrict .slds-page-header div | |
| */ | |
| .slds-page-header__controls { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| /** | |
| * @summary Used to create spacing between each page header control | |
| * | |
| * @selector .slds-page-header__control | |
| * @restrict .slds-page-header div | |
| */ | |
| .slds-page-header__control { | |
| margin-left: 0.25rem; } | |
| .slds-page-header_joined, | |
| .slds-page-header.slds-has-bottom-magnet { | |
| border-bottom: 1px solid #dddbda; | |
| border-radius: 0.25rem 0.25rem 0 0; | |
| box-shadow: none; } | |
| .slds-tabs_card .slds-page-header, | |
| .slds-card .slds-page-header { | |
| border: 0; | |
| box-shadow: none; | |
| border-radius: 0.25rem; } | |
| /** | |
| * @summary Bottom section containing record details | |
| * | |
| * @variant | |
| * @name record-home | |
| * @selector .slds-page-header_record-home | |
| * @restrict .slds-page-header | |
| * @support dev-ready | |
| */ | |
| /** | |
| * @summary Creates margins around the detail section of record home | |
| * @selector .slds-page-header__detail-row | |
| * @restrict .slds-page-header ul | |
| * @notes Only the record home page header contains this detail area | |
| */ | |
| .slds-page-header__detail-row { | |
| display: -ms-flexbox; | |
| display: flex; | |
| margin: 0.75rem -1rem -1rem; | |
| padding: 1rem; | |
| border-radius: 0 0 0.25rem 0.25rem; | |
| background-color: white; | |
| position: relative; | |
| z-index: 2; } | |
| /** | |
| * @summary Creates margins around the detail section of record home | |
| * @selector .slds-page-header__detail-block | |
| * @restrict .slds-page-header__detail-row li | |
| * @notes Only the record home page header contains this detail area | |
| */ | |
| .slds-page-header__detail-block { | |
| padding-right: 2rem; | |
| padding-left: 2rem; | |
| max-width: 25%; } | |
| .slds-page-header__detail-block:first-child { | |
| padding-left: 0; } | |
| .slds-page-header__detail-block:last-child { | |
| padding-right: 0; } | |
| /** | |
| * @summary Initializes vertical page header | |
| * | |
| * @variant | |
| * @name record-home-vertical | |
| * @selector .slds-page-header_vertical | |
| * @restrict .slds-page-header | |
| * @support dev-ready | |
| */ | |
| .slds-page-header_vertical, | |
| .slds-page-header--vertical { | |
| padding: 0.75rem; | |
| background: white; | |
| border-bottom: 0; } | |
| .slds-page-header_vertical .slds-page-header__controls, | |
| .slds-page-header--vertical .slds-page-header__controls { | |
| padding-top: 0.5rem; | |
| margin-top: 0.5rem; | |
| border-top: 1px solid #dddbda; } | |
| .slds-page-header_vertical .slds-page-header__name-title, | |
| .slds-page-header--vertical .slds-page-header__name-title { | |
| margin-top: 0.25rem; } | |
| /** | |
| * @summary Vertical list of detail items | |
| * @selector .slds-page-header__detail-list | |
| * @restrict .slds-page-header_vertical ul | |
| */ | |
| .slds-page-header__detail-list { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; } | |
| /** | |
| * @summary List items of vertical detail list | |
| * @selector .slds-page-header__detail-item | |
| * @restrict .slds-page-header__detail-list li | |
| */ | |
| .slds-page-header__detail-item { | |
| margin-top: 0.75rem; | |
| width: 50%; } | |
| /** | |
| * @summary Initializes object home page header | |
| * | |
| * @variant | |
| * @name object-home | |
| * @selector .slds-page-header_object-home | |
| * @restrict .slds-page-header | |
| * @support dev-ready | |
| */ | |
| .slds-page-header_object-home, | |
| .slds-page-header--object-home { | |
| padding-bottom: 0.75rem; } | |
| /** | |
| * @variant | |
| * @name base | |
| * @selector .slds-brand-band | |
| * @restrict div | |
| * @support dev-ready | |
| */ | |
| .slds-brand-band { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| position: relative; | |
| height: 100%; | |
| width: 100%; | |
| /** | |
| * @name cover | |
| * @summary Changes background image to be set to cover rather than contain | |
| * @selector .slds-brand-band_cover | |
| * @restrict .slds-brand-band | |
| * @modifier | |
| * @group position | |
| */ | |
| /** | |
| * @name small | |
| * @summary Sets height of brand band to | |
| * @selector .slds-brand-band_small | |
| * @restrict .slds-brand-band | |
| * @modifier | |
| * @group sizing | |
| */ | |
| /** | |
| * @name medium | |
| * @summary Sets height of brand band to | |
| * @selector .slds-brand-band_medium | |
| * @restrict .slds-brand-band | |
| * @modifier | |
| * @group sizing | |
| */ | |
| /** | |
| * @name large | |
| * @summary Sets height of brand band to | |
| * @selector .slds-brand-band_large | |
| * @restrict .slds-brand-band | |
| * @modifier | |
| * @group sizing | |
| */ | |
| /** | |
| * @name no background | |
| * @summary Removes image but keeps page background | |
| * @selector .slds-brand-band_none | |
| * @restrict .slds-brand-band | |
| * @modifier | |
| * @group visibility | |
| */ | |
| /** | |
| * @name Group background | |
| * @summary Uses the group banner image as the page background image | |
| * @selector .slds-brand-band_group | |
| * @restrict .slds-brand-band | |
| * @modifier | |
| * @group image | |
| */ | |
| /** | |
| * @name User profile background | |
| * @summary Uses the user profile banner image as the page background image | |
| * @selector .slds-brand-band_user | |
| * @restrict .slds-brand-band | |
| * @modifier | |
| * @group image | |
| */ } | |
| .slds-brand-band:before { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| z-index: -1; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| background-image: url("/assets/images/themes/oneSalesforce/banner-brand-default.png"), linear-gradient(to top, rgba(25, 85, 148, 0) 0, #195594); | |
| background-repeat: repeat-x; | |
| background-position: top left; } | |
| .slds-brand-band:after { | |
| content: none; | |
| display: block; | |
| position: absolute; | |
| z-index: -1; | |
| left: 0; | |
| right: 0; | |
| top: 0; | |
| width: 100%; | |
| height: 3.125rem; | |
| background-image: linear-gradient(to bottom, rgba(176, 196, 223, 0) 60%, #b0c4df); } | |
| .slds-brand-band.slds-brand-band_cover:before { | |
| background-repeat: no-repeat; | |
| background-size: cover; } | |
| .slds-brand-band.slds-brand-band_small:before { | |
| height: 6rem; } | |
| .slds-brand-band.slds-brand-band_small:after { | |
| content: ''; | |
| top: 2.875rem; } | |
| .slds-brand-band.slds-brand-band_medium:before { | |
| height: 12.5rem; } | |
| .slds-brand-band.slds-brand-band_medium:after { | |
| content: ''; | |
| top: 9.375rem; } | |
| .slds-brand-band.slds-brand-band_large:before { | |
| height: 18.75rem; } | |
| .slds-brand-band.slds-brand-band_large:after { | |
| content: ''; | |
| top: 15.625rem; } | |
| .slds-brand-band.slds-brand-band_full:before { | |
| height: 100%; } | |
| .slds-brand-band.slds-brand-band_bottom:before { | |
| background-position: bottom; | |
| top: initial; } | |
| .slds-brand-band.slds-brand-band_none:before { | |
| height: 0; } | |
| .slds-brand-band.slds-brand-band_group:before { | |
| background-image: url("/assets/images/themes/oneSalesforce/banner-group-public-default.png"); } | |
| .slds-brand-band.slds-brand-band_user:before { | |
| background-image: url("/assets/images/themes/oneSalesforce/banner-user-default.png"); } | |
| .slds-brand-band .slds-brand-band_blank { | |
| background: white; } | |
| .slds-brand-band .slds-brand-band_blank:before, .slds-brand-band .slds-brand-band_blank:after { | |
| background: none; } | |
| .slds-template__container { | |
| position: relative; | |
| height: 100%; | |
| width: 100%; } | |
| .slds-template_default { | |
| padding: 0.75rem; } | |
| .slds-template_default.slds-brand-band:before { | |
| position: fixed; | |
| top: 5.625rem; } | |
| .slds-template_default.slds-brand-band.slds-brand-band_medium:after { | |
| position: fixed; | |
| top: 15rem; } | |
| .slds-template_bottom-magnet { | |
| padding: 0.75rem 0.75rem 0 0.75rem; } | |
| .slds-template_profile { | |
| padding: 8rem 0.75rem 0.75rem; } | |
| .slds-template__content { | |
| padding: 0.75rem 0.75rem 0 0.75rem; } | |
| .slds-template_app { | |
| padding: 0.75rem 0 0 0.75rem; } | |
| .slds-template_iframe { | |
| width: calc(100% + (0.75rem * 2)); | |
| height: calc(100% + (0.75rem * 2)); | |
| margin: -0.75rem; | |
| background-color: white; } | |
| /** | |
| * @summary Panel component | |
| * | |
| * @name base | |
| * @selector .slds-panel | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-panel { | |
| background: white; | |
| border-radius: 0.25rem; | |
| overflow-y: auto; | |
| /** | |
| * Contains sub sections of a panel | |
| * | |
| * @selector .slds-panel__section | |
| * @restrict .slds-panel div | |
| * @required | |
| */ | |
| /** | |
| * Contains form actions at the bottom of a panel | |
| * | |
| * @selector .slds-panel__actions | |
| * @restrict .slds-panel div | |
| * @required | |
| */ } | |
| .slds-panel__section { | |
| padding: 1rem; } | |
| .slds-panel__actions { | |
| padding: 0.75rem; } | |
| .slds-panel.slds-is-editing { | |
| box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); } | |
| /** | |
| * @summary Header element of a panel | |
| * @selector .slds-panel__header | |
| * @restrict .slds-panel div | |
| */ | |
| .slds-panel__header { | |
| display: -ms-flexbox; | |
| display: flex; | |
| position: relative; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| padding: 0.75rem; | |
| border-bottom: 1px solid #dddbda; } | |
| /** | |
| * @summary Modifier that notifies panel header that something other than a title and close button exist | |
| * @selector .slds-panel__header_custom | |
| * @restrict .slds-panel__header | |
| * @modifier | |
| */ | |
| .slds-panel__header_custom { | |
| padding: 0.75rem 1rem; } | |
| /** | |
| * @summary Close button of a panel | |
| * @selector .slds-panel__close | |
| * @restrict .slds-panel .slds-button | |
| */ | |
| .slds-panel__close:first-child { | |
| margin-right: 0.5rem; } | |
| .slds-panel__close:last-child { | |
| margin-left: 0.5rem; } | |
| /** | |
| * @summary Back button of a panel drilled in | |
| * @selector .slds-panel__back | |
| * @restrict .slds-panel .slds-button | |
| */ | |
| .slds-panel__back:first-child { | |
| margin-right: 0.5rem; } | |
| .slds-panel__back:last-child { | |
| margin-left: 0.5rem; } | |
| .slds-panel__close, | |
| .slds-panel__back { | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; } | |
| /** | |
| * @summary Adjusts styling when the title of the header is centered | |
| * @selector .slds-panel__header_align-center | |
| * @restrict .slds-panel__header | |
| * @modifier | |
| */ | |
| .slds-panel__header_align-center { | |
| padding: 0.75rem 3rem; } | |
| .slds-panel__header_align-center .slds-panel__header-title { | |
| text-align: center; } | |
| .slds-panel__header_align-center .slds-panel__close { | |
| position: absolute; | |
| right: 0.75rem; | |
| left: auto; | |
| top: 50%; | |
| margin-top: -0.75rem; } | |
| .slds-panel__header_align-center .slds-panel__back { | |
| position: absolute; | |
| left: 0.75rem; | |
| right: auto; | |
| top: 50%; | |
| margin-top: -0.75rem; } | |
| /** | |
| * @summary Body element of a panel | |
| * @selector .slds-panel__body | |
| * @restrict .slds-panel div | |
| */ | |
| .slds-panel__body { | |
| padding: 0.75rem; } | |
| /** | |
| * @summary Title of the header panel | |
| * @selector .slds-panel__header-title | |
| * @restrict .slds-panel__header h2 | |
| */ | |
| .slds-panel__header-title { | |
| text-align: start; | |
| width: 100%; } | |
| /** | |
| * @summary Modifier that changes the display of a panel to dock to the viewport | |
| * @selector .slds-panel_docked | |
| * @restrict .slds-panel | |
| * @modifier | |
| */ | |
| .slds-panel_docked { | |
| position: relative; | |
| min-width: 15rem; | |
| height: 100%; | |
| border-radius: 0; | |
| display: none; | |
| /** | |
| * @summary Toggles visibility of panel | |
| * @selector .slds-is-open | |
| * @restrict .slds-panel_docked | |
| */ } | |
| .slds-panel_docked.slds-is-open { | |
| display: block; } | |
| /** | |
| * @summary Modifier that changes the position of a panel to the left | |
| * @selector .slds-panel_docked-left | |
| * @restrict .slds-panel_docked | |
| * @modifier | |
| */ | |
| .slds-panel_docked-left { | |
| box-shadow: 1px 0 3px rgba(0, 0, 0, 0.25); } | |
| /** | |
| * @summary Modifier that changes the position of a panel to the right | |
| * @selector .slds-panel_docked-right | |
| * @restrict .slds-panel_docked | |
| * @modifier | |
| */ | |
| .slds-panel_docked-right { | |
| margin-left: auto; | |
| box-shadow: -1px 0 3px 0 rgba(0, 0, 0, 0.25); } | |
| /** | |
| * @summary Modifier that changes the display of a panel to hide out of view and animate in when opened | |
| * @selector .slds-panel_animated | |
| * @restrict .slds-tabs-mobile__container .slds-panel | |
| * @modifier | |
| */ | |
| .slds-panel_animated { | |
| display: block; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| transform: translate3d(120%, 0, 0); | |
| transition: transform 300ms ease; | |
| z-index: 9000; } | |
| .slds-tabs-mobile__container .slds-panel_animated { | |
| position: fixed; } | |
| .slds-panel_animated.slds-is-open { | |
| transform: translate3d(0, 0, 0); } | |
| /** | |
| * @name filtering | |
| * @selector .slds-panel_filters | |
| * @restrict .slds-panel | |
| * @variant | |
| * @support dev-ready | |
| * @s1 false | |
| */ | |
| .slds-panel_filters, | |
| .slds-panel--filters { | |
| margin-left: 1rem; | |
| box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); | |
| border-radius: 0; } | |
| /** | |
| * A dialog popover, `.slds-popover`, can be applied to all variants of a dialog | |
| * popover. It initiates the styles of the popover and enables `.slds-nubbin` to be applied. | |
| * | |
| * A dialog popover requires at least one focusable element. | |
| * | |
| * @name base | |
| * @selector .slds-popover | |
| * @restrict [role="dialog"], [role="tooltip"] | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-popover { | |
| position: relative; | |
| border-radius: 0.25rem; | |
| width: 20rem; | |
| min-height: 2rem; | |
| z-index: 6000; | |
| background-color: white; | |
| display: inline-block; | |
| box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); | |
| border: 1px solid #dddbda; } | |
| /** | |
| * @summary Applies syles for primary content area of popover | |
| * @selector .slds-popover__body | |
| * @restrict .slds-popover div | |
| */ | |
| .slds-popover__body, | |
| .slds-popover__header, | |
| .slds-popover__footer { | |
| position: relative; | |
| padding: 0.5rem 0.75rem; | |
| word-wrap: break-word; } | |
| /** | |
| * @summary Applies styles for top area of popover | |
| * @selector .slds-popover__header | |
| * @restrict .slds-popover header, .slds-popover div | |
| */ | |
| .slds-popover__header { | |
| border-bottom: 1px solid #dddbda; } | |
| /** | |
| * @summary Applies styles for footer area of popover | |
| * @selector .slds-popover__footer | |
| * @restrict .slds-popover footer | |
| */ | |
| .slds-popover__footer { | |
| border-top: 1px solid #dddbda; } | |
| /** | |
| * @summary Applies styles to center align content for footer area of a form popover | |
| * @selector .slds-popover__footer_form | |
| * @restrict .slds-popover footer | |
| */ | |
| .slds-popover__footer_form { | |
| text-align: center; | |
| background: #f3f2f2; | |
| border-radius: 0 0 0.25rem 0.25rem; } | |
| /** | |
| * @summary Applies a max-height and vertical scrolling to a popover body | |
| * | |
| * @selector .slds-popover__body_small | |
| * @restrict .slds-popover__body | |
| * @modifier | |
| * @group body | |
| */ | |
| .slds-popover__body_small { | |
| max-height: 15rem; | |
| overflow-y: auto; } | |
| /** | |
| * @summary Close button within a popover | |
| * @selector .slds-popover__close | |
| * @restrict .slds-popover button | |
| */ | |
| .slds-popover__close { | |
| position: relative; | |
| margin: 0.25rem; | |
| z-index: 6001; } | |
| /** | |
| * @summary Width modifier for popover - small | |
| * @selector .slds-popover_small | |
| * @restrict .slds-popover | |
| * @modifier | |
| * @group width | |
| */ | |
| .slds-popover_small, | |
| .slds-popover--small { | |
| max-width: 15rem; } | |
| /** | |
| * @summary Width modifier for popover - medium | |
| * @selector .slds-popover_medium | |
| * @restrict .slds-popover | |
| * @modifier | |
| * @group width | |
| */ | |
| .slds-popover_medium, | |
| .slds-popover--medium { | |
| min-width: 20rem; } | |
| /** | |
| * @summary Width modifier for popover - large | |
| * @selector .slds-popover_large | |
| * @restrict .slds-popover | |
| * @modifier | |
| * @group width | |
| */ | |
| .slds-popover_large, | |
| .slds-popover--large { | |
| min-width: 25rem; | |
| max-width: 512px; } | |
| .slds-popover[class*="theme_"], | |
| .slds-popover[class*="theme--"] { | |
| border: 0; } | |
| .slds-popover *:last-child { | |
| margin-bottom: 0; } | |
| /** | |
| * @summary Modifier for popover to take 100% width | |
| * @selector .slds-popover_full-width | |
| * @restrict .slds-popover | |
| * @modifier | |
| * @group width | |
| */ | |
| .slds-popover_full-width { | |
| width: 100%; } | |
| /** | |
| * @summary Modifier to hide a popover | |
| * @selector .slds-popover_hide | |
| * @restrict .slds-popover | |
| */ | |
| .slds-popover_hide { | |
| display: none; } | |
| /** | |
| * @name panels | |
| * @selector .slds-popover_panel | |
| * @restrict .slds-popover | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-popover_panel .slds-popover__header, | |
| .slds-popover--panel .slds-popover__header { | |
| background: #f3f2f2; | |
| padding: 1.5rem 1.5rem 0.75rem; | |
| border-top-left-radius: calc(0.25rem - 1px); | |
| border-top-right-radius: calc(0.25rem - 1px); | |
| border-bottom: 0; } | |
| .slds-popover_panel .slds-popover__body, | |
| .slds-popover--panel .slds-popover__body { | |
| padding: 0; } | |
| .slds-popover_panel .slds-popover__body-list, | |
| .slds-popover--panel .slds-popover__body-list { | |
| padding: 1rem 1.5rem; | |
| border-top: 1px solid #dddbda; } | |
| .slds-popover_panel.slds-nubbin_left-top:before, .slds-popover_panel.slds-nubbin_left-top:after, .slds-popover_panel.slds-nubbin--left-top:before, .slds-popover_panel.slds-nubbin--left-top:after, .slds-popover_panel.slds-nubbin_right-top:before, .slds-popover_panel.slds-nubbin_right-top:after, .slds-popover_panel.slds-nubbin--right-top:before, .slds-popover_panel.slds-nubbin--right-top:after, .slds-popover_panel.slds-nubbin_top-left:before, .slds-popover_panel.slds-nubbin_top-left:after, .slds-popover_panel.slds-nubbin--top-left:before, .slds-popover_panel.slds-nubbin--top-left:after, .slds-popover_panel.slds-nubbin_top-right:before, .slds-popover_panel.slds-nubbin_top-right:after, .slds-popover_panel.slds-nubbin--top-right:before, .slds-popover_panel.slds-nubbin--top-right:after, | |
| .slds-popover--panel.slds-nubbin_left-top:before, | |
| .slds-popover--panel.slds-nubbin_left-top:after, | |
| .slds-popover--panel.slds-nubbin--left-top:before, | |
| .slds-popover--panel.slds-nubbin--left-top:after, | |
| .slds-popover--panel.slds-nubbin_right-top:before, | |
| .slds-popover--panel.slds-nubbin_right-top:after, | |
| .slds-popover--panel.slds-nubbin--right-top:before, | |
| .slds-popover--panel.slds-nubbin--right-top:after, | |
| .slds-popover--panel.slds-nubbin_top-left:before, | |
| .slds-popover--panel.slds-nubbin_top-left:after, | |
| .slds-popover--panel.slds-nubbin--top-left:before, | |
| .slds-popover--panel.slds-nubbin--top-left:after, | |
| .slds-popover--panel.slds-nubbin_top-right:before, | |
| .slds-popover--panel.slds-nubbin_top-right:after, | |
| .slds-popover--panel.slds-nubbin--top-right:before, | |
| .slds-popover--panel.slds-nubbin--top-right:after { | |
| background: #f3f2f2; } | |
| .slds-popover_panel.slds-nubbin_left-top:before, .slds-popover_panel.slds-nubbin_left-top:after, .slds-popover_panel.slds-nubbin--left-top:before, .slds-popover_panel.slds-nubbin--left-top:after, .slds-popover_panel.slds-nubbin_right-top:before, .slds-popover_panel.slds-nubbin_right-top:after, .slds-popover_panel.slds-nubbin--right-top:before, .slds-popover_panel.slds-nubbin--right-top:after, | |
| .slds-popover--panel.slds-nubbin_left-top:before, | |
| .slds-popover--panel.slds-nubbin_left-top:after, | |
| .slds-popover--panel.slds-nubbin--left-top:before, | |
| .slds-popover--panel.slds-nubbin--left-top:after, | |
| .slds-popover--panel.slds-nubbin_right-top:before, | |
| .slds-popover--panel.slds-nubbin_right-top:after, | |
| .slds-popover--panel.slds-nubbin--right-top:before, | |
| .slds-popover--panel.slds-nubbin--right-top:after { | |
| top: 2.25rem; } | |
| /** | |
| * @name Label for panels | |
| * @selector .slds-popover_panel__label | |
| * @restrict .slds-popover_panel p | |
| */ | |
| .slds-popover_panel__label { | |
| font-size: 0.875rem; | |
| font-weight: 700; } | |
| /** | |
| * @selector .slds-nubbin_top | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_top:before, | |
| .slds-nubbin--top:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| left: 50%; | |
| top: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-nubbin_top:after, | |
| .slds-nubbin--top:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| left: 50%; | |
| top: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-nubbin_top:after, | |
| .slds-nubbin--top:after { | |
| box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| /** | |
| * @selector .slds-nubbin_top-left | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_top-left:before, | |
| .slds-nubbin--top-left:before, | |
| .slds-nubbin_top-left-corner:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| left: 50%; | |
| top: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-nubbin_top-left:after, | |
| .slds-nubbin--top-left:after, | |
| .slds-nubbin_top-left-corner:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| left: 50%; | |
| top: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-nubbin_top-left:after, | |
| .slds-nubbin--top-left:after, | |
| .slds-nubbin_top-left-corner:after { | |
| box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| .slds-nubbin_top-left:before, .slds-nubbin_top-left:after, | |
| .slds-nubbin--top-left:before, | |
| .slds-nubbin--top-left:after, | |
| .slds-nubbin_top-left-corner:before, | |
| .slds-nubbin_top-left-corner:after { | |
| /*! @noflip */ | |
| left: 1.5rem; | |
| top: -0.5rem; } | |
| /** | |
| * @selector .slds-nubbin_top-right | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_top-right:before, | |
| .slds-nubbin--top-right:before, | |
| .slds-nubbin_top-right-corner:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| left: 50%; | |
| top: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-nubbin_top-right:after, | |
| .slds-nubbin--top-right:after, | |
| .slds-nubbin_top-right-corner:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| left: 50%; | |
| top: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-nubbin_top-right:after, | |
| .slds-nubbin--top-right:after, | |
| .slds-nubbin_top-right-corner:after { | |
| box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| .slds-nubbin_top-right:before, .slds-nubbin_top-right:after, | |
| .slds-nubbin--top-right:before, | |
| .slds-nubbin--top-right:after, | |
| .slds-nubbin_top-right-corner:before, | |
| .slds-nubbin_top-right-corner:after { | |
| /*! @noflip */ | |
| left: auto; | |
| /*! @noflip */ | |
| right: 1.5rem; | |
| top: -0.5rem; | |
| /*! @noflip */ | |
| margin-right: -0.5rem; } | |
| /** | |
| * @selector .slds-nubbin_bottom | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_bottom:before, | |
| .slds-nubbin--bottom:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| left: 50%; | |
| bottom: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-nubbin_bottom:after, | |
| .slds-nubbin--bottom:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| left: 50%; | |
| bottom: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-nubbin_bottom:after, | |
| .slds-nubbin--bottom:after { | |
| box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| /** | |
| * @selector .slds-nubbin_bottom-left | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_bottom-left:before, | |
| .slds-nubbin--bottom-left:before, | |
| .slds-nubbin_bottom-left-corner:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| left: 50%; | |
| bottom: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-nubbin_bottom-left:after, | |
| .slds-nubbin--bottom-left:after, | |
| .slds-nubbin_bottom-left-corner:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| left: 50%; | |
| bottom: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-nubbin_bottom-left:after, | |
| .slds-nubbin--bottom-left:after, | |
| .slds-nubbin_bottom-left-corner:after { | |
| box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| .slds-nubbin_bottom-left:before, .slds-nubbin_bottom-left:after, | |
| .slds-nubbin--bottom-left:before, | |
| .slds-nubbin--bottom-left:after, | |
| .slds-nubbin_bottom-left-corner:before, | |
| .slds-nubbin_bottom-left-corner:after { | |
| /*! @noflip */ | |
| left: 1.5rem; | |
| top: 100%; | |
| margin-top: -0.5rem; } | |
| /** | |
| * @selector .slds-nubbin_bottom-right | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_bottom-right:before, | |
| .slds-nubbin--bottom-right:before, | |
| .slds-nubbin_bottom-right-corner:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| left: 50%; | |
| bottom: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-nubbin_bottom-right:after, | |
| .slds-nubbin--bottom-right:after, | |
| .slds-nubbin_bottom-right-corner:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| left: 50%; | |
| bottom: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-nubbin_bottom-right:after, | |
| .slds-nubbin--bottom-right:after, | |
| .slds-nubbin_bottom-right-corner:after { | |
| box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| .slds-nubbin_bottom-right:before, .slds-nubbin_bottom-right:after, | |
| .slds-nubbin--bottom-right:before, | |
| .slds-nubbin--bottom-right:after, | |
| .slds-nubbin_bottom-right-corner:before, | |
| .slds-nubbin_bottom-right-corner:after { | |
| /*! @noflip */ | |
| left: auto; | |
| /*! @noflip */ | |
| right: 1.5rem; | |
| top: 100%; | |
| margin-top: -0.5rem; | |
| /*! @noflip */ | |
| margin-right: -0.5rem; } | |
| /** | |
| * @selector .slds-nubbin_left | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_left:before, | |
| .slds-nubbin--left:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| top: 50%; | |
| left: -0.5rem; | |
| margin-top: -0.5rem; } | |
| .slds-nubbin_left:after, | |
| .slds-nubbin--left:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| top: 50%; | |
| left: -0.5rem; | |
| margin-top: -0.5rem; } | |
| .slds-nubbin_left:after, | |
| .slds-nubbin--left:after { | |
| box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| /** | |
| * @selector .slds-nubbin_left-top | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_left-top:before, | |
| .slds-nubbin--left-top:before, | |
| .slds-nubbin_left-top-corner:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| top: 50%; | |
| left: -0.5rem; | |
| margin-top: -0.5rem; } | |
| .slds-nubbin_left-top:after, | |
| .slds-nubbin--left-top:after, | |
| .slds-nubbin_left-top-corner:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| top: 50%; | |
| left: -0.5rem; | |
| margin-top: -0.5rem; } | |
| .slds-nubbin_left-top:after, | |
| .slds-nubbin--left-top:after, | |
| .slds-nubbin_left-top-corner:after { | |
| box-shadow: -1px 1px 2px 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| .slds-nubbin_left-top:before, .slds-nubbin_left-top:after, | |
| .slds-nubbin--left-top:before, | |
| .slds-nubbin--left-top:after, | |
| .slds-nubbin_left-top-corner:before, | |
| .slds-nubbin_left-top-corner:after { | |
| top: 1.5rem; } | |
| /** | |
| * @selector .slds-nubbin_left-bottom | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_left-bottom:before, | |
| .slds-nubbin--left-bottom:before, | |
| .slds-nubbin_left-bottom-corner:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| top: 50%; | |
| left: -0.5rem; | |
| margin-top: -0.5rem; } | |
| .slds-nubbin_left-bottom:after, | |
| .slds-nubbin--left-bottom:after, | |
| .slds-nubbin_left-bottom-corner:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| top: 50%; | |
| left: -0.5rem; | |
| margin-top: -0.5rem; } | |
| .slds-nubbin_left-bottom:before, | |
| .slds-nubbin--left-bottom:before, | |
| .slds-nubbin_left-bottom-corner:before { | |
| margin-bottom: -1px; } | |
| .slds-nubbin_left-bottom:after, | |
| .slds-nubbin--left-bottom:after, | |
| .slds-nubbin_left-bottom-corner:after { | |
| box-shadow: -1px 2px 3px 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| .slds-nubbin_left-bottom:before, .slds-nubbin_left-bottom:after, | |
| .slds-nubbin--left-bottom:before, | |
| .slds-nubbin--left-bottom:after, | |
| .slds-nubbin_left-bottom-corner:before, | |
| .slds-nubbin_left-bottom-corner:after { | |
| top: auto; | |
| bottom: 1rem; } | |
| /** | |
| * @selector .slds-nubbin_right | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_right:before, | |
| .slds-nubbin--right:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| top: 50%; | |
| right: -0.5rem; | |
| margin-top: -0.5rem; } | |
| .slds-nubbin_right:after, | |
| .slds-nubbin--right:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| top: 50%; | |
| right: -0.5rem; | |
| margin-top: -0.5rem; } | |
| .slds-nubbin_right:after, | |
| .slds-nubbin--right:after { | |
| box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| /** | |
| * @selector .slds-nubbin_right-top | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_right-top:before, | |
| .slds-nubbin--right-top:before, | |
| .slds-nubbin_right-top-corner:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| top: 50%; | |
| right: -0.5rem; | |
| margin-top: -0.5rem; } | |
| .slds-nubbin_right-top:after, | |
| .slds-nubbin--right-top:after, | |
| .slds-nubbin_right-top-corner:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| top: 50%; | |
| right: -0.5rem; | |
| margin-top: -0.5rem; } | |
| .slds-nubbin_right-top:after, | |
| .slds-nubbin--right-top:after, | |
| .slds-nubbin_right-top-corner:after { | |
| box-shadow: 1px -1px 2px 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| .slds-nubbin_right-top:before, .slds-nubbin_right-top:after, | |
| .slds-nubbin--right-top:before, | |
| .slds-nubbin--right-top:after, | |
| .slds-nubbin_right-top-corner:before, | |
| .slds-nubbin_right-top-corner:after { | |
| top: 1.5rem; } | |
| /** | |
| * @selector .slds-nubbin_right-bottom | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_right-bottom:before, | |
| .slds-nubbin--right-bottom:before, | |
| .slds-nubbin_right-bottom-corner:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| top: 50%; | |
| right: -0.5rem; | |
| margin-top: -0.5rem; } | |
| .slds-nubbin_right-bottom:after, | |
| .slds-nubbin--right-bottom:after, | |
| .slds-nubbin_right-bottom-corner:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: inherit; | |
| top: 50%; | |
| right: -0.5rem; | |
| margin-top: -0.5rem; } | |
| .slds-nubbin_right-bottom:before, | |
| .slds-nubbin--right-bottom:before, | |
| .slds-nubbin_right-bottom-corner:before { | |
| margin-bottom: -1px; } | |
| .slds-nubbin_right-bottom:after, | |
| .slds-nubbin--right-bottom:after, | |
| .slds-nubbin_right-bottom-corner:after { | |
| box-shadow: 2px -1px 3px 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| .slds-nubbin_right-bottom:before, .slds-nubbin_right-bottom:after, | |
| .slds-nubbin--right-bottom:before, | |
| .slds-nubbin--right-bottom:after, | |
| .slds-nubbin_right-bottom-corner:before, | |
| .slds-nubbin_right-bottom-corner:after { | |
| top: auto; | |
| bottom: 1rem; } | |
| /** | |
| * @selector .slds-nubbin_top-left-corner | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_top-left-corner { | |
| border-radius: 0.125rem 0.25rem 0.25rem 0.25rem; } | |
| .slds-nubbin_top-left-corner:before, .slds-nubbin_top-left-corner:after { | |
| left: 0.75rem; } | |
| /** | |
| * @selector .slds-nubbin_bottom-left-corner | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_bottom-left-corner { | |
| border-radius: 0.25rem 0.25rem 0.25rem 0.125rem; } | |
| .slds-nubbin_bottom-left-corner:before, .slds-nubbin_bottom-left-corner:after { | |
| left: 0.75rem; } | |
| /** | |
| * @selector .slds-nubbin_top-right-corner | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_top-right-corner { | |
| border-radius: 0.25rem 0.125rem 0.25rem 0.25rem; } | |
| .slds-nubbin_top-right-corner:before, .slds-nubbin_top-right-corner:after { | |
| right: 0.75rem; } | |
| /** | |
| * @selector .slds-nubbin_bottom-right-corner | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_bottom-right-corner { | |
| border-radius: 0.25rem 0.25rem 0.125rem 0.25rem; } | |
| .slds-nubbin_bottom-right-corner:before, .slds-nubbin_bottom-right-corner:after { | |
| right: 0.75rem; } | |
| /** | |
| * @selector .slds-nubbin_left-top-corner | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_left-top-corner { | |
| border-radius: 0.125rem 0.25rem 0.25rem 0.25rem; } | |
| .slds-nubbin_left-top-corner:before, .slds-nubbin_left-top-corner:after { | |
| top: 0.75rem; } | |
| /** | |
| * @selector .slds-nubbin_right-top-corner | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_right-top-corner { | |
| border-radius: 0.25rem 0.125rem 0.25rem 0.25rem; } | |
| .slds-nubbin_right-top-corner:before, .slds-nubbin_right-top-corner:after { | |
| top: 0.75rem; } | |
| /** | |
| * @selector .slds-nubbin_left-bottom-corner | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_left-bottom-corner { | |
| border-radius: 0.25rem 0.25rem 0.25rem 0.125rem; } | |
| .slds-nubbin_left-bottom-corner:before, .slds-nubbin_left-bottom-corner:after { | |
| bottom: 0.25rem; } | |
| /** | |
| * @selector .slds-nubbin_right-bottom-corner | |
| * @restrict .slds-popover, .slds-dropdown | |
| * @modifier | |
| * @group nubbins | |
| */ | |
| .slds-nubbin_right-bottom-corner { | |
| border-radius: 0.25rem 0.25rem 0.125rem 0.25rem; } | |
| .slds-nubbin_right-bottom-corner:before, .slds-nubbin_right-bottom-corner:after { | |
| bottom: 0.25rem; } | |
| /** | |
| * Walkthrough components are used to provide an interactive and educational prospect experience for setup. | |
| * | |
| * @summary Initializes a walkthrough non-modal dialog | |
| * | |
| * @name walkthrough | |
| * @selector .slds-popover_walkthrough | |
| * @restrict .slds-popover | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-popover_walkthrough, | |
| .slds-popover--walkthrough { | |
| border-color: #061c3f; | |
| color: white; | |
| background: #032e61; | |
| border-color: #032e61; } | |
| .slds-popover_walkthrough .slds-text-title, | |
| .slds-popover_walkthrough .slds-text-title_caps, | |
| .slds-popover_walkthrough .slds-text-title--caps, | |
| .slds-popover--walkthrough .slds-text-title, | |
| .slds-popover--walkthrough .slds-text-title_caps, | |
| .slds-popover--walkthrough .slds-text-title--caps { | |
| color: #b0adab; } | |
| .slds-popover_walkthrough .slds-icon, | |
| .slds-popover--walkthrough .slds-icon { | |
| fill: currentColor; } | |
| .slds-popover_walkthrough a, | |
| .slds-popover--walkthrough a { | |
| color: currentColor; | |
| border: 1px solid transparent; | |
| border-radius: 0.25rem; } | |
| .slds-popover_walkthrough a:hover, .slds-popover_walkthrough a:focus, | |
| .slds-popover--walkthrough a:hover, | |
| .slds-popover--walkthrough a:focus { | |
| text-decoration: none; | |
| outline: 0; } | |
| .slds-popover_walkthrough a:focus, | |
| .slds-popover--walkthrough a:focus { | |
| box-shadow: 0 0 3px #ecebea; | |
| border: 1px solid #ecebea; } | |
| .slds-popover_walkthrough a:active, | |
| .slds-popover--walkthrough a:active { | |
| color: rgba(255, 255, 255, 0.5); } | |
| .slds-popover_walkthrough a[disabled], | |
| .slds-popover--walkthrough a[disabled] { | |
| color: rgba(255, 255, 255, 0.15); } | |
| .slds-popover_walkthrough a, | |
| .slds-popover--walkthrough a { | |
| text-decoration: underline; } | |
| .slds-popover_walkthrough .slds-popover__header, | |
| .slds-popover--walkthrough .slds-popover__header { | |
| background-color: #164a85; | |
| background-image: url("/assets/images/popovers/popover-header.png"); | |
| background-repeat: no-repeat; | |
| background-position: bottom; | |
| background-size: contain; | |
| border-color: inherit; | |
| padding: 0.75rem 1rem; | |
| text-shadow: 0 0 4px #032e61; } | |
| .slds-popover_walkthrough .slds-popover__body, | |
| .slds-popover_walkthrough .slds-popover__footer, | |
| .slds-popover--walkthrough .slds-popover__body, | |
| .slds-popover--walkthrough .slds-popover__footer { | |
| padding: 1rem; } | |
| .slds-popover_walkthrough .slds-popover__footer, | |
| .slds-popover--walkthrough .slds-popover__footer { | |
| border: 0; } | |
| .slds-popover_walkthrough .slds-text-title, | |
| .slds-popover--walkthrough .slds-text-title { | |
| color: #d9dbdd; } | |
| .slds-popover_walkthrough.slds-nubbin_top:before, .slds-popover_walkthrough.slds-nubbin--top:before, .slds-popover_walkthrough.slds-nubbin_top-left:before, .slds-popover_walkthrough.slds-nubbin--top-left:before, .slds-popover_walkthrough.slds-nubbin_top-right:before, .slds-popover_walkthrough.slds-nubbin--top-right:before, .slds-popover_walkthrough.slds-nubbin_left-top:before, .slds-popover_walkthrough.slds-nubbin--left-top:before, .slds-popover_walkthrough.slds-nubbin_right-top:before, .slds-popover_walkthrough.slds-nubbin--right-top:before, | |
| .slds-popover--walkthrough.slds-nubbin_top:before, | |
| .slds-popover--walkthrough.slds-nubbin--top:before, | |
| .slds-popover--walkthrough.slds-nubbin_top-left:before, | |
| .slds-popover--walkthrough.slds-nubbin--top-left:before, | |
| .slds-popover--walkthrough.slds-nubbin_top-right:before, | |
| .slds-popover--walkthrough.slds-nubbin--top-right:before, | |
| .slds-popover--walkthrough.slds-nubbin_left-top:before, | |
| .slds-popover--walkthrough.slds-nubbin--left-top:before, | |
| .slds-popover--walkthrough.slds-nubbin_right-top:before, | |
| .slds-popover--walkthrough.slds-nubbin--right-top:before { | |
| background-color: #164a85; } | |
| /** | |
| * Alternate background for walkthrough non-modal dialog | |
| * | |
| * @selector .slds-popover_walkthrough-alt | |
| * @restrict .slds-popover_walkthrough | |
| * @modifier | |
| */ | |
| .slds-popover_walkthrough-alt, | |
| .slds-popover_feature { | |
| border-color: #164a85; | |
| background-color: #164a85; | |
| background-image: url("/assets/images/popovers/popover-action.png"); | |
| background-repeat: no-repeat; | |
| background-size: 100% 2.25rem; | |
| background-position: bottom; | |
| padding-bottom: 1.5rem; | |
| color: white; } | |
| .slds-popover_walkthrough-alt .slds-text-heading_small, | |
| .slds-popover_feature .slds-text-heading_small { | |
| margin-bottom: 0.5rem; } | |
| .slds-popover_walkthrough-alt.slds-nubbin_bottom:before, .slds-popover_walkthrough-alt.slds-nubbin--bottom:before, .slds-popover_walkthrough-alt.slds-nubbin_bottom-left:before, .slds-popover_walkthrough-alt.slds-nubbin--bottom-left:before, .slds-popover_walkthrough-alt.slds-nubbin_bottom-right:before, .slds-popover_walkthrough-alt.slds-nubbin--bottom-right:before, | |
| .slds-popover_feature.slds-nubbin_bottom:before, | |
| .slds-popover_feature.slds-nubbin--bottom:before, | |
| .slds-popover_feature.slds-nubbin_bottom-left:before, | |
| .slds-popover_feature.slds-nubbin--bottom-left:before, | |
| .slds-popover_feature.slds-nubbin_bottom-right:before, | |
| .slds-popover_feature.slds-nubbin--bottom-right:before { | |
| background-color: #215ca0; } | |
| /** | |
| * Einstein components are used to provide an interactive experience with Einstein features | |
| * | |
| * @summary Initializes a Einstein non-modal dialog | |
| * | |
| * @name einstein | |
| * @selector .slds-popover_einstein | |
| * @restrict [role="dialog"], [role="tooltip"] | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| /** | |
| * Error popovers are used to notify the user of errors on the page | |
| * | |
| * If the elements within the error popover exceed 150px, use the `.slds-popover__body_scrollable` modifier on the body element. | |
| * | |
| * In some cases, such as displaying a list of menu items, padding may not be necessary in the popover body. To remove the padding, add the `slds-p-around_none" utility class to the body element. | |
| * | |
| * @summary Initializes an error non-modal dialog | |
| * | |
| * @name error | |
| * @selector .slds-popover_error | |
| * @restrict .slds-popover | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-popover_error .slds-popover__header { | |
| background-color: #c23934; | |
| color: white; } | |
| .slds-popover_error.slds-nubbin_top:before, .slds-popover_error.slds-nubbin--top:before, .slds-popover_error.slds-nubbin_top-left:before, .slds-popover_error.slds-nubbin--top-left:before, .slds-popover_error.slds-nubbin_top-right:before, .slds-popover_error.slds-nubbin--top-right:before, .slds-popover_error.slds-nubbin_left-top:before, .slds-popover_error.slds-nubbin--left-top:before, .slds-popover_error.slds-nubbin_right-top:before, .slds-popover_error.slds-nubbin--right-top:before { | |
| background-color: #c23934; } | |
| .slds-popover_error, | |
| .slds-popover_warning { | |
| /** | |
| * @summary Applies scrollable styles for popovers | |
| * @selector .slds-popover__body_scrollable | |
| * @restrict .slds-popover_error .slds-popover__body, .slds-popover_warning .slds-popover__body | |
| */ } | |
| .slds-popover_error .slds-popover__header, | |
| .slds-popover_warning .slds-popover__header { | |
| border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; } | |
| .slds-popover_error .slds-popover__body_scrollable, | |
| .slds-popover_warning .slds-popover__body_scrollable { | |
| max-height: 150px; | |
| overflow-y: auto; | |
| border-bottom: 1px solid #dddbda; } | |
| .slds-popover_error .slds-popover__body_scrollable + .slds-popover__footer, | |
| .slds-popover_warning .slds-popover__body_scrollable + .slds-popover__footer { | |
| border-top: 0; } | |
| /** | |
| * Warning popovers are used to warn the user about information on the page that deserves caution | |
| * | |
| * If the elements within the error popover exceed 150px, use the `.slds-popover__body_scrollable` modifier on the body element. | |
| * | |
| * In some cases, such as displaying a list of menu items, padding may not be necessary in the popover body. To remove the padding, add the `slds-p-around_none" utility class to the body element. | |
| * | |
| * @summary Initializes an warning non-modal dialog | |
| * | |
| * @name warning | |
| * @selector .slds-popover_warning | |
| * @restrict .slds-popover | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-popover_warning button { | |
| color: #514f4d; | |
| text-decoration: underline; } | |
| .slds-popover_warning button:hover { | |
| color: #706e6b; } | |
| .slds-popover_warning button:focus { | |
| color: #514f4d; | |
| box-shadow: 0 0 3px #514f4d; | |
| border: 1px solid #514f4d; } | |
| .slds-popover_warning button:active { | |
| color: #706e6b; } | |
| .slds-popover_warning .slds-popover__header { | |
| background-color: #ffb75d; | |
| color: #2b2826; } | |
| .slds-popover_warning .slds-popover__header .slds-icon { | |
| fill: currentColor; } | |
| .slds-popover_warning .slds-popover__close { | |
| color: currentColor; } | |
| .slds-popover_warning.slds-nubbin_top:before, .slds-popover_warning.slds-nubbin--top:before, .slds-popover_warning.slds-nubbin_top-left:before, .slds-popover_warning.slds-nubbin--top-left:before, .slds-popover_warning.slds-nubbin_top-right:before, .slds-popover_warning.slds-nubbin--top-right:before, .slds-popover_warning.slds-nubbin_left-top:before, .slds-popover_warning.slds-nubbin--left-top:before, .slds-popover_warning.slds-nubbin_right-top:before, .slds-popover_warning.slds-nubbin--right-top:before { | |
| background-color: #ffb75d; } | |
| /** | |
| * Prompt components are used to provide an interactive custom message. | |
| * | |
| * @summary Initializes a prompt non-modal dialog | |
| * | |
| * @name prompt | |
| * @selector .slds-popover_prompt | |
| * @restrict .slds-popover | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-popover_prompt { | |
| width: 25rem; | |
| /** | |
| * @summary Applies styles for footer area of popover | |
| * @selector .slds-popover__footer | |
| * @restrict .slds-popover footer | |
| */ } | |
| .slds-popover_prompt .slds-popover__body { | |
| padding: 1rem; } | |
| .slds-popover_prompt .slds-popover__footer { | |
| border-top: 2px solid #182337; } | |
| /** | |
| * @summary Applies styles for heading text of prompt | |
| * @selector .slds-popover_prompt__heading | |
| * @restrict .slds-popover_prompt .slds-media__body > h2 | |
| */ | |
| .slds-popover_prompt__heading { | |
| font-size: 1rem; | |
| line-height: 1.25; | |
| font-weight: 700; } | |
| .slds-is-mobile .slds-popover_prompt__heading { | |
| font-size: 1.25rem; } | |
| /** | |
| * @summary Applies styles for the optional action link in the footer of prompt | |
| * @selector .slds-popover_prompt__action-link | |
| * @restrict .slds-popover_prompt .slds-popover__footer span | |
| */ | |
| .slds-popover_prompt__action-link { | |
| margin-right: 1rem; } | |
| /** | |
| * Position | |
| */ | |
| /** | |
| * @summary Position Prompt top left | |
| * @selector .slds-popover_prompt_top-left | |
| * @restrict .slds-popover_prompt | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Position Prompt top center | |
| * @selector .slds-popover_prompt_top | |
| * @restrict .slds-popover_prompt | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Position Prompt top right | |
| * @selector .slds-popover_prompt_top-right | |
| * @restrict .slds-popover_prompt | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Position Prompt bottom left | |
| * @selector .slds-popover_prompt_bottom-left | |
| * @restrict .slds-popover_prompt | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Position Prompt bottom center | |
| * @selector .slds-popover_prompt_bottom | |
| * @restrict .slds-popover_prompt | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Position Prompt bottom right | |
| * @selector .slds-popover_prompt_bottom-right | |
| * @restrict .slds-popover_prompt | |
| * @modifier | |
| */ | |
| .slds-popover_prompt_top, | |
| .slds-popover_prompt_top-right, | |
| .slds-popover_prompt_top-left, | |
| .slds-popover_prompt_bottom, | |
| .slds-popover_prompt_bottom-right, | |
| .slds-popover_prompt_bottom-left { | |
| position: absolute; } | |
| .slds-popover_prompt_top, | |
| .slds-popover_prompt_top-right, | |
| .slds-popover_prompt_top-left { | |
| top: 0.5rem; } | |
| .slds-popover_prompt_bottom, | |
| .slds-popover_prompt_bottom-right, | |
| .slds-popover_prompt_bottom-left { | |
| bottom: 0.5rem; } | |
| .slds-popover_prompt_top, | |
| .slds-popover_prompt_bottom { | |
| left: 50%; | |
| margin-left: -12.5rem; } | |
| .slds-popover_prompt_top-right, | |
| .slds-popover_prompt_bottom-right { | |
| right: 0.5rem; } | |
| .slds-popover_prompt_top-left, | |
| .slds-popover_prompt_bottom-left { | |
| left: 0.5rem; } | |
| .slds-tooltip { | |
| position: relative; | |
| border-radius: 0.25rem; | |
| width: 20rem; | |
| min-height: 2rem; | |
| z-index: 6000; | |
| background-color: #061c3f; | |
| display: inline-block; } | |
| .slds-tooltip__body { | |
| padding: 0.5rem 0.75rem; | |
| font-size: 0.75rem; | |
| color: white; } | |
| /** | |
| * The tooltip should be positioned with JavaScript. | |
| * | |
| * You can include inline help tooltips for form elements and any focusable items, such as anchor links, buttons, etc. If your tooltips are available on hover, also make sure that they’re available on keyboard focus. To allow screen readers to access the tooltip, the HTML form field element must have an `aria-describedby` attribute that points to the tooltip `ID` of the tooltip. | |
| * | |
| * @summary Initializes a tooltip | |
| * | |
| * @variant | |
| * @name base | |
| * @selector .slds-popover_tooltip | |
| * @restrict [role="tooltip"] | |
| * @support dev-ready | |
| */ | |
| .slds-popover_tooltip, | |
| .slds-popover--tooltip { | |
| width: auto; | |
| max-width: 20rem; | |
| background: #16325c; | |
| border: 0; } | |
| .slds-popover_tooltip .slds-popover__body, | |
| .slds-popover--tooltip .slds-popover__body { | |
| font-size: 0.75rem; | |
| color: white; } | |
| /** | |
| * @name rise | |
| * @summary Toggles on tooltip | |
| * @selector .slds-rise-from-ground | |
| * @restrict .slds-popover_tooltip | |
| * @modifier | |
| * @group toggle | |
| */ | |
| .slds-rise-from-ground { | |
| visibility: visible; | |
| opacity: 1; | |
| transform: translate(0%, 0%); | |
| transition: opacity 0.1s linear, visibility 0.1s linear, transform 0.1s linear; | |
| will-change: transform; } | |
| /** | |
| * @name fall | |
| * @summary Toggles off tooltip | |
| * @selector .slds-fall-into-ground | |
| * @restrict .slds-popover_tooltip | |
| * @modifier | |
| * @group toggle | |
| */ | |
| .slds-fall-into-ground { | |
| visibility: hidden; | |
| opacity: 0; | |
| transform: translate(0%, 0%); | |
| transition: opacity 0.1s linear, visibility 0.1s linear, transform 0.1s linear; | |
| will-change: transform; } | |
| /** | |
| * @name bottom-to-top | |
| * @summary Slides tooltip from bottom to top | |
| * @selector .slds-slide-from-bottom-to-top | |
| * @restrict .slds-popover_tooltip | |
| * @modifier | |
| * @group motion | |
| */ | |
| .slds-slide-from-bottom-to-top { | |
| transform: translateY(10%); | |
| will-change: transform; } | |
| /** | |
| * @name top-to-bottom | |
| * @summary Slides tooltip from top to bottom | |
| * @selector .slds-slide-from-top-to-bottom | |
| * @restrict .slds-popover_tooltip | |
| * @modifier | |
| * @group motion | |
| */ | |
| .slds-slide-from-top-to-bottom { | |
| transform: translateY(-10%); | |
| will-change: transform; } | |
| /** | |
| * @name right-to-left | |
| * @summary Slides tooltip from right to left | |
| * @selector .slds-slide-from-right-to-left | |
| * @restrict .slds-popover_tooltip | |
| * @modifier | |
| * @group motion | |
| */ | |
| .slds-slide-from-right-to-left { | |
| transform: translateX(5%); | |
| will-change: transform; } | |
| /** | |
| * @name left-to-right | |
| * @summary Slides tooltip from left to right | |
| * @selector .slds-slide-from-left-to-right | |
| * @restrict .slds-popover_tooltip | |
| * @modifier | |
| * @group motion | |
| */ | |
| .slds-slide-from-left-to-right { | |
| transform: translateX(-5%); | |
| will-change: transform; } | |
| .slds-dropdown-trigger .slds-dropdown { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.1s linear, visibility 0.1s linear; } | |
| .slds-dropdown-trigger:hover, .slds-dropdown-trigger:focus { | |
| outline: 0; } | |
| .slds-dropdown-trigger:hover .slds-dropdown, .slds-dropdown-trigger:focus .slds-dropdown { | |
| visibility: visible; | |
| opacity: 1; | |
| transition: opacity 0.1s linear, visibility 0.1s linear; } | |
| .slds-dropdown_nubbin-top, .slds-dropdown--nubbin-top { | |
| margin-top: 0.5rem; } | |
| .slds-dropdown_nubbin-top:before, .slds-dropdown--nubbin-top:before { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: white; | |
| left: 50%; | |
| top: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-dropdown_nubbin-top:after, .slds-dropdown--nubbin-top:after { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| transform: rotate(45deg); | |
| content: ''; | |
| background-color: white; | |
| left: 50%; | |
| top: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-dropdown_nubbin-top:before, .slds-dropdown--nubbin-top:before { | |
| background: white; } | |
| .slds-dropdown_nubbin-top:after, .slds-dropdown--nubbin-top:after { | |
| background: white; | |
| box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16); | |
| z-index: -1; } | |
| .slds-dropdown_nubbin-top.slds-dropdown_left, .slds-dropdown_nubbin-top.slds-dropdown--left, .slds-dropdown--nubbin-top.slds-dropdown_left, .slds-dropdown--nubbin-top.slds-dropdown--left { | |
| left: -1rem; } | |
| .slds-dropdown_nubbin-top.slds-dropdown_left:before, .slds-dropdown_nubbin-top.slds-dropdown_left:after, .slds-dropdown_nubbin-top.slds-dropdown--left:before, .slds-dropdown_nubbin-top.slds-dropdown--left:after, .slds-dropdown--nubbin-top.slds-dropdown_left:before, .slds-dropdown--nubbin-top.slds-dropdown_left:after, .slds-dropdown--nubbin-top.slds-dropdown--left:before, .slds-dropdown--nubbin-top.slds-dropdown--left:after { | |
| left: 1.5rem; | |
| margin-left: 0; } | |
| .slds-dropdown_nubbin-top.slds-dropdown_right, .slds-dropdown_nubbin-top.slds-dropdown--right, .slds-dropdown--nubbin-top.slds-dropdown_right, .slds-dropdown--nubbin-top.slds-dropdown--right { | |
| right: -1rem; } | |
| .slds-dropdown_nubbin-top.slds-dropdown_right:before, .slds-dropdown_nubbin-top.slds-dropdown_right:after, .slds-dropdown_nubbin-top.slds-dropdown--right:before, .slds-dropdown_nubbin-top.slds-dropdown--right:after, .slds-dropdown--nubbin-top.slds-dropdown_right:before, .slds-dropdown--nubbin-top.slds-dropdown_right:after, .slds-dropdown--nubbin-top.slds-dropdown--right:before, .slds-dropdown--nubbin-top.slds-dropdown--right:after { | |
| left: auto; | |
| right: 1.5rem; | |
| margin-left: 0; } | |
| .slds-dropdown__item .slds-has-icon { | |
| position: relative; } | |
| .slds-dropdown__item .slds-has-icon_left > a, | |
| .slds-dropdown__item .slds-has-icon--left > a, | |
| .slds-dropdown__item .slds-has-icon_left > span, | |
| .slds-dropdown__item .slds-has-icon--left > span { | |
| padding-left: 2rem; } | |
| .slds-dropdown__item .slds-has-icon_right > a, | |
| .slds-dropdown__item .slds-has-icon--right > a, | |
| .slds-dropdown__item .slds-has-icon_right > span, | |
| .slds-dropdown__item .slds-has-icon--right > span { | |
| padding-right: 2rem; } | |
| .slds-dropdown__item .slds-has-icon_left-right > a, | |
| .slds-dropdown__item .slds-has-icon--left-right > a, | |
| .slds-dropdown__item .slds-has-icon_left-right > span, | |
| .slds-dropdown__item .slds-has-icon--left-right > span { | |
| padding-left: 2rem; | |
| padding-right: 2rem; } | |
| .slds-dropdown__item .slds-has-icon .slds-icon { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -0.5rem; | |
| fill: #706e6b; } | |
| .slds-dropdown__item .slds-has-icon .slds-icon_left, .slds-dropdown__item .slds-has-icon .slds-icon--left { | |
| left: 0.75rem; } | |
| .slds-dropdown__item .slds-has-icon .slds-icon_right, .slds-dropdown__item .slds-has-icon .slds-icon--right { | |
| right: 0.75rem; } | |
| /** | |
| * | |
| * @summary Initializes a trigger element around the dropdown | |
| * @name dropdown | |
| * @selector .slds-dropdown-trigger | |
| * @restrict div, span, li | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-dropdown-trigger { | |
| position: relative; | |
| display: inline-block; | |
| /** | |
| * @summary If someone is using javascript for click to toggle - this modifier will help | |
| * @selector .slds-dropdown-trigger_hover | |
| * @restrict .slds-dropdown-trigger | |
| */ | |
| /** | |
| * @summary If someone is using javascript for click to toggle - this modifier will help | |
| * @selector .slds-dropdown-trigger_click | |
| * @restrict .slds-dropdown-trigger | |
| */ } | |
| .slds-dropdown-trigger .slds-dropdown { | |
| top: 100%; } | |
| .slds-dropdown-trigger .slds-dropdown_bottom, | |
| .slds-dropdown-trigger .slds-dropdown--bottom { | |
| top: auto; } | |
| .slds-dropdown-trigger_hover .slds-dropdown, .slds-dropdown-trigger--hover .slds-dropdown { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.1s linear, visibility 0.1s linear; } | |
| .slds-dropdown-trigger_hover:hover, .slds-dropdown-trigger_hover:focus, .slds-dropdown-trigger--hover:hover, .slds-dropdown-trigger--hover:focus { | |
| outline: 0; } | |
| .slds-dropdown-trigger_hover:hover .slds-dropdown, .slds-dropdown-trigger_hover:focus .slds-dropdown, .slds-dropdown-trigger--hover:hover .slds-dropdown, .slds-dropdown-trigger--hover:focus .slds-dropdown { | |
| visibility: visible; | |
| opacity: 1; | |
| transition: opacity 0.1s linear, visibility 0.1s linear; } | |
| .slds-dropdown-trigger_click, .slds-dropdown-trigger--click { | |
| /** | |
| * @summary Opens dropdown menu when invoked on click | |
| * @selector .slds-is-open | |
| * @restrict .slds-dropdown-trigger_click | |
| * @modifier | |
| * @group visibility | |
| */ } | |
| .slds-dropdown-trigger_click .slds-dropdown, | |
| .slds-dropdown-trigger_click:hover .slds-dropdown, .slds-dropdown-trigger--click .slds-dropdown, | |
| .slds-dropdown-trigger--click:hover .slds-dropdown { | |
| display: none; } | |
| .slds-dropdown-trigger_click.slds-is-open .slds-dropdown, .slds-dropdown-trigger--click.slds-is-open .slds-dropdown { | |
| display: block; | |
| visibility: visible; | |
| opacity: 1; } | |
| .slds-dropdown-trigger > [class*="slds-button_icon"] ~ .slds-dropdown_left[class*="slds-nubbin"], | |
| .slds-dropdown-trigger > [class*="slds-button_icon"] ~ .slds-dropdown--left[class*="slds-nubbin"], | |
| .slds-dropdown-trigger > [class*="slds-button--icon"] ~ .slds-dropdown_left[class*="slds-nubbin"], | |
| .slds-dropdown-trigger > [class*="slds-button--icon"] ~ .slds-dropdown--left[class*="slds-nubbin"] { | |
| left: -0.5rem; } | |
| .slds-dropdown-trigger > [class*="slds-button_icon"] ~ .slds-dropdown_right[class*="slds-nubbin"], | |
| .slds-dropdown-trigger > [class*="slds-button_icon"] ~ .slds-dropdown--right[class*="slds-nubbin"], | |
| .slds-dropdown-trigger > [class*="slds-button--icon"] ~ .slds-dropdown_right[class*="slds-nubbin"], | |
| .slds-dropdown-trigger > [class*="slds-button--icon"] ~ .slds-dropdown--right[class*="slds-nubbin"] { | |
| right: -0.5rem; } | |
| /** | |
| * @summary Initializes dropdown | |
| * @selector .slds-dropdown | |
| * @restrict .slds-dropdown-trigger div, .slds-dropdown-trigger ul, .slds-docked-composer_overflow div | |
| * @notes Applies positioning and container styles, by default, dropdown appears below and center of target | |
| */ | |
| .slds-dropdown { | |
| position: absolute; | |
| z-index: 7000; | |
| left: 50%; | |
| float: left; | |
| min-width: 6rem; | |
| max-width: 20rem; | |
| margin-top: 0.125rem; | |
| margin-bottom: 0.125rem; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| padding: 0.25rem 0; | |
| font-size: 0.75rem; | |
| background: white; | |
| box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); | |
| transform: translateX(-50%); | |
| /** | |
| * @summary Positions dropdown to left side of target | |
| * @selector .slds-dropdown_left | |
| * @restrict .slds-dropdown | |
| * @modifier | |
| * @group menu position | |
| */ | |
| /** | |
| * @summary Positions dropdown to right side of target | |
| * @selector .slds-dropdown_right | |
| * @restrict .slds-dropdown | |
| * @modifier | |
| * @group menu position | |
| */ | |
| /** | |
| * @summary Positions dropdown to above target | |
| * @selector .slds-dropdown_bottom | |
| * @restrict .slds-dropdown | |
| * @modifier | |
| * @group menu position | |
| */ | |
| /** | |
| * @summary Sets min-width of 6rem/96px | |
| * @selector .slds-dropdown_xx-small | |
| * @restrict .slds-dropdown | |
| * @modifier | |
| * @group width | |
| */ | |
| /** | |
| * @summary Sets min-width of 12rem/192px | |
| * @selector .slds-dropdown_x-small | |
| * @restrict .slds-dropdown | |
| * @modifier | |
| * @group width | |
| */ | |
| /** | |
| * @summary Sets min-width of 15rem/240px | |
| * @selector .slds-dropdown_small | |
| * @restrict .slds-dropdown | |
| * @modifier | |
| * @group width | |
| */ | |
| /** | |
| * @summary Sets min-width of 20rem/320px | |
| * @selector .slds-dropdown_medium | |
| * @restrict .slds-dropdown | |
| * @modifier | |
| * @group width | |
| */ | |
| /** | |
| * @summary Sets min-width of 25rem/400px | |
| * @selector .slds-dropdown_large | |
| * @restrict .slds-dropdown | |
| * @modifier | |
| * @group width | |
| */ | |
| /** | |
| * @summary Sets width equal to input | |
| * @selector .slds-dropdown_large | |
| * @restrict .slds-dropdown | |
| * @modifier | |
| * @group width | |
| */ | |
| /** | |
| * @summary Forces overflow scrolling after 5 list items | |
| * @selector .slds-dropdown_length-5 | |
| * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox | |
| * @modifier | |
| * @group height | |
| */ | |
| /** | |
| * @summary Forces overflow scrolling after 7 list items | |
| * @selector .slds-dropdown_length-7 | |
| * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox | |
| * @modifier | |
| * @group height | |
| */ | |
| /** | |
| * @summary Forces overflow scrolling after 10 list items | |
| * @selector .slds-dropdown_length-10 | |
| * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox | |
| * @modifier | |
| * @group height | |
| */ | |
| /** | |
| * @summary Forces overflow scrolling after 5 list items with an icon | |
| * @selector .slds-dropdown_length-with-icon-5 | |
| * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox | |
| * @modifier | |
| * @group height | |
| */ | |
| /** | |
| * @summary Forces overflow scrolling after 7 list items with an icon | |
| * @selector .slds-dropdown_length-with-icon-7 | |
| * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox | |
| * @modifier | |
| * @group height | |
| */ | |
| /** | |
| * @summary Forces overflow scrolling after 10 list items with an icon | |
| * @selector .slds-dropdown_length-with-icon-10 | |
| * @restrict .slds-dropdown, .slds-dropdown__list, .slds-listbox | |
| * @modifier | |
| * @group height | |
| */ | |
| /** | |
| * @summary Theme | |
| * @selector .slds-dropdown_inverse | |
| * @restrict .slds-dropdown | |
| * @modifier | |
| * @group theme | |
| */ | |
| /** | |
| * @summary Adds padding to area above dropdown menu list | |
| * @selector .slds-dropdown__header | |
| * @restrict .slds-dropdown li | |
| */ | |
| /** | |
| * @summary Initializes dropdown item | |
| * @selector .slds-dropdown__item | |
| * @restrict .slds-dropdown li | |
| * @required | |
| */ } | |
| .slds-is-mobile .slds-dropdown { | |
| padding: 0; | |
| font-size: 1rem; } | |
| .slds-dropdown_left, .slds-dropdown--left { | |
| left: 0; | |
| right: auto; | |
| transform: translateX(0); } | |
| .slds-dropdown_right, .slds-dropdown--right { | |
| left: auto; | |
| right: 0; | |
| transform: translateX(0); } | |
| .slds-dropdown_bottom, .slds-dropdown--bottom { | |
| bottom: 100%; } | |
| .slds-dropdown_xx-small, .slds-dropdown--xx-small { | |
| min-width: 6rem; } | |
| .slds-dropdown_x-small, .slds-dropdown--x-small { | |
| min-width: 12rem; } | |
| .slds-dropdown_small, .slds-dropdown--small { | |
| min-width: 15rem; } | |
| .slds-dropdown_medium, .slds-dropdown--medium { | |
| min-width: 20rem; } | |
| .slds-dropdown_large, .slds-dropdown--large { | |
| min-width: 25rem; | |
| max-width: 512px; } | |
| .slds-dropdown_fluid, .slds-dropdown--fluid { | |
| min-width: 12rem; | |
| max-width: 100%; | |
| width: 100%; } | |
| .slds-dropdown_length-5, .slds-dropdown--length-5 { | |
| -webkit-overflow-scrolling: touch; | |
| max-height: calc(((1rem * 1.5) + 1rem) * 5); | |
| overflow-y: auto; } | |
| .slds-dropdown_length-7, .slds-dropdown--length-7 { | |
| -webkit-overflow-scrolling: touch; | |
| max-height: calc(((1rem * 1.5) + 1rem) * 7); | |
| overflow-y: auto; } | |
| .slds-dropdown_length-10, .slds-dropdown--length-10 { | |
| -webkit-overflow-scrolling: touch; | |
| max-height: calc(((1rem * 1.5) + 1rem) * 10); | |
| overflow-y: auto; } | |
| .slds-dropdown_length-with-icon-5, .slds-dropdown--length-with-icon-5 { | |
| -webkit-overflow-scrolling: touch; | |
| max-height: calc((1.5rem + 1rem) * 5); | |
| overflow-y: auto; } | |
| .slds-dropdown_length-with-icon-7, .slds-dropdown--length-with-icon-7 { | |
| -webkit-overflow-scrolling: touch; | |
| max-height: calc((1.5rem + 1rem) * 7); | |
| overflow-y: auto; } | |
| .slds-dropdown_length-with-icon-10, .slds-dropdown--length-with-icon-10 { | |
| -webkit-overflow-scrolling: touch; | |
| max-height: calc((1.5rem + 1rem) * 10); | |
| overflow-y: auto; } | |
| .slds-dropdown_inverse, .slds-dropdown--inverse { | |
| background: #061c3f; | |
| border-color: #061c3f; } | |
| .slds-dropdown_inverse .slds-dropdown__item > a, .slds-dropdown--inverse .slds-dropdown__item > a { | |
| color: white; } | |
| .slds-dropdown_inverse .slds-dropdown__item > a:hover, .slds-dropdown_inverse .slds-dropdown__item > a:focus, .slds-dropdown--inverse .slds-dropdown__item > a:hover, .slds-dropdown--inverse .slds-dropdown__item > a:focus { | |
| color: rgba(255, 255, 255, 0.75); | |
| background-color: transparent; } | |
| .slds-dropdown_inverse .slds-dropdown__item > a:active, .slds-dropdown--inverse .slds-dropdown__item > a:active { | |
| color: rgba(255, 255, 255, 0.5); | |
| background-color: transparent; } | |
| .slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled="true"], .slds-dropdown--inverse .slds-dropdown__item > a[aria-disabled="true"] { | |
| color: rgba(255, 255, 255, 0.15); | |
| cursor: default; } | |
| .slds-dropdown_inverse .slds-dropdown__item > a[aria-disabled="true"]:hover, .slds-dropdown--inverse .slds-dropdown__item > a[aria-disabled="true"]:hover { | |
| background-color: transparent; } | |
| .slds-dropdown mark { | |
| font-weight: 700; | |
| background-color: transparent; | |
| color: inherit; } | |
| .slds-dropdown[class*="slds-nubbin_top"], .slds-dropdown[class*="slds-nubbin--top"] { | |
| margin-top: 0.5rem; } | |
| .slds-dropdown[class*="slds-nubbin_bottom"], .slds-dropdown[class*="slds-nubbin--bottom"] { | |
| margin-bottom: 0.5rem; } | |
| .slds-dropdown__header { | |
| font-size: 0.875rem; | |
| font-weight: 700; | |
| padding: 0.5rem 0.75rem; } | |
| .slds-is-mobile .slds-dropdown__header { | |
| font-size: 1rem; } | |
| .slds-dropdown__item { | |
| line-height: 1.5; | |
| font-weight: 400; | |
| /** | |
| * @summary If menu contains menuitemcheckbox then this toggles the selected icon when it is selected | |
| * @selector .slds-icon_selected | |
| * @restrict .slds-dropdown__item svg | |
| */ | |
| /** | |
| * @summary If menu contains menuitemcheckbox then this handles the selected states | |
| * @selector .slds-is-selected | |
| * @restrict .slds-dropdown__item | |
| * @modifier | |
| */ } | |
| .slds-dropdown__item > a { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| padding: 0.5rem 0.75rem; | |
| color: #080707; | |
| white-space: nowrap; | |
| cursor: pointer; | |
| /** | |
| * @summary Places a menu item into an errored state | |
| * | |
| * @selector .slds-has-error | |
| * @restrict .slds-dropdown__item > a | |
| * @modifier | |
| * @group notification | |
| */ | |
| /** | |
| * @summary Places a menu item into a success state | |
| * | |
| * @selector .slds-has-success | |
| * @restrict .slds-dropdown__item > a | |
| * @modifier | |
| * @group notification | |
| */ | |
| /** | |
| * @summary Places a menu item into a warning state | |
| * | |
| * @selector .slds-has-warning | |
| * @restrict .slds-dropdown__item > a | |
| * @modifier | |
| * @group notification | |
| */ } | |
| .slds-is-mobile .slds-dropdown__item > a { | |
| line-height: calc(2.75rem - 0rem); | |
| padding: 0 0.75rem; } | |
| .slds-dropdown__item > a:hover, .slds-dropdown__item > a:focus { | |
| outline: 0; | |
| text-decoration: none; | |
| background-color: #f3f2f2; } | |
| .slds-dropdown__item > a:active { | |
| text-decoration: none; | |
| background-color: #ecebea; } | |
| .slds-dropdown__item > a[aria-disabled="true"] { | |
| color: #dddbda; | |
| cursor: default; } | |
| .slds-dropdown__item > a[aria-disabled="true"]:hover { | |
| background-color: transparent; } | |
| .slds-dropdown__item > a[aria-disabled="true"] .slds-icon { | |
| fill: #dddbda; } | |
| .slds-dropdown__item > a.slds-has-error { | |
| background: #c23934; } | |
| .slds-dropdown__item > a.slds-has-success { | |
| background: #04844b; } | |
| .slds-dropdown__item > a.slds-has-error, .slds-dropdown__item > a.slds-has-success { | |
| color: white; } | |
| .slds-dropdown__item > a.slds-has-warning { | |
| background: #ffb75d; } | |
| .slds-dropdown__item > a.slds-has-warning .slds-indicator_unread { | |
| background-color: currentColor; } | |
| .slds-dropdown__item > a.slds-has-warning .slds-indicator_unsaved { | |
| color: currentColor; } | |
| .slds-dropdown__item > a.slds-has-error:hover, .slds-dropdown__item > a.slds-has-error:focus, .slds-dropdown__item > a.slds-has-success:hover, .slds-dropdown__item > a.slds-has-success:focus, .slds-dropdown__item > a.slds-has-warning:hover, .slds-dropdown__item > a.slds-has-warning:focus { | |
| text-decoration: underline; } | |
| .slds-dropdown__item .slds-icon_selected, | |
| .slds-dropdown__item .slds-icon--selected { | |
| opacity: 0; | |
| transition: opacity 0.05s ease; } | |
| .slds-dropdown__item.slds-is-selected .slds-icon_selected, | |
| .slds-dropdown__item.slds-is-selected .slds-icon--selected { | |
| opacity: 1; } | |
| .slds-dropdown__item.slds-has-notification .slds-indicator_unsaved { | |
| top: -0.375rem; } | |
| [dir="rtl"] .slds-dropdown_center, [dir="rtl"] | |
| .slds-dropdown--center { | |
| left: auto; | |
| right: auto; | |
| transform: translateX(calc(50% - (0.875rem / 2))); } | |
| .slds-dropdown_actions a, | |
| .slds-dropdown--actions a { | |
| color: #006dcc; } | |
| /** | |
| * @name submenu | |
| * @summary | |
| * @selector .slds-has-submenu | |
| * @restrict .slds-dropdown__item | |
| * @release 2.5.0 | |
| */ | |
| .slds-has-submenu { | |
| position: relative; | |
| /** | |
| * @summary | |
| * @selector .slds-dropdown_submenu | |
| * @restrict .slds-has-submenu div | |
| */ | |
| /** | |
| * @summary Open submenu to the left of the parent menu item | |
| * @selector .slds-dropdown_submenu-left | |
| * @restrict .slds-dropdown_submenu | |
| * @modifier | |
| * @group submenu position | |
| */ | |
| /** | |
| * @summary Open submenu to the right of the parent menu item | |
| * @selector .slds-dropdown_submenu-right | |
| * @restrict .slds-dropdown_submenu | |
| * @modifier | |
| * @group submenu position | |
| */ | |
| /** | |
| * @summary Open submenu along the bottom of the parent menu item | |
| * @selector .slds-dropdown_submenu-bottom | |
| * @restrict .slds-dropdown_submenu | |
| */ } | |
| .slds-has-submenu .slds-dropdown_submenu { | |
| top: 0; | |
| transform: none; } | |
| .slds-has-submenu .slds-dropdown_submenu-left { | |
| left: auto; | |
| right: 100%; | |
| margin-right: 0.25rem; } | |
| .slds-has-submenu .slds-dropdown_submenu-right { | |
| left: 100%; | |
| margin-left: 0.25rem; } | |
| .slds-has-submenu .slds-dropdown_submenu-bottom { | |
| top: auto; | |
| bottom: 0; | |
| margin-bottom: -0.25rem; } | |
| .slds-has-submenu.slds-dropdown__item .slds-dropdown_submenu { | |
| display: none; } | |
| .slds-has-submenu [role="menuitem"][aria-expanded="true"] + .slds-dropdown_submenu { | |
| display: block; } | |
| /** | |
| * @name base | |
| * @selector .slds-combobox-picklist | |
| * @restrict div | |
| * @variant | |
| * @s1 false | |
| */ | |
| .slds-picklist { | |
| position: relative; | |
| /** | |
| * Resets explicit width on picklist to be fluid to its parent element | |
| * | |
| * @selector .slds-picklist_fluid | |
| * @restrict .slds-picklist | |
| * @modifier | |
| */ } | |
| .slds-picklist .slds-dropdown { | |
| width: 15rem; } | |
| .slds-picklist li { | |
| /** | |
| * Set default state of icon for when a listbox option is selected | |
| * | |
| * @selector .slds-icon_selected | |
| * @restrict .slds-picklist li svg | |
| * @required | |
| */ | |
| /** | |
| * Toggles state of icon for when a listbox option is selected | |
| * | |
| * @selector .slds-is-selected | |
| * @restrict .slds-picklist li | |
| * @modifier | |
| * @required | |
| */ } | |
| .slds-picklist li .slds-icon_selected, | |
| .slds-picklist li .slds-icon--selected { | |
| opacity: 0; | |
| transition: opacity 0.05s ease; } | |
| .slds-picklist li.slds-is-selected .slds-icon_selected, | |
| .slds-picklist li.slds-is-selected .slds-icon--selected { | |
| fill: #0070d2; | |
| opacity: 1; } | |
| .slds-picklist_fluid .slds-picklist__input, | |
| .slds-picklist_fluid .slds-picklist__label, | |
| .slds-picklist_fluid .slds-dropdown, | |
| .slds-picklist_fluid .slds-lookup, .slds-picklist--fluid .slds-picklist__input, | |
| .slds-picklist--fluid .slds-picklist__label, | |
| .slds-picklist--fluid .slds-dropdown, | |
| .slds-picklist--fluid .slds-lookup { | |
| width: auto; | |
| min-width: 0; | |
| max-width: 15rem; } | |
| /** | |
| * Read-only input element for picklist | |
| * | |
| * @selector .slds-picklist__input | |
| * @restrict .slds-picklist .slds-form-element__control | |
| * @required | |
| */ | |
| .slds-picklist__input { | |
| width: 15rem; } | |
| .slds-picklist__input .slds-button { | |
| line-height: 0; } | |
| .slds-picklist__label { | |
| padding-right: 2rem; | |
| width: 15rem; | |
| color: #080707; | |
| text-align: left; } | |
| .slds-picklist__label .slds-icon { | |
| width: 0.75rem; | |
| height: 0.75rem; | |
| position: absolute; | |
| right: 1rem; | |
| top: 50%; | |
| margin-top: -0.375rem; | |
| fill: #706e6b; } | |
| .slds-picklist__label .slds-truncate { | |
| display: block; } | |
| /** | |
| * A Combobox is a composite widget that lets a user select one or more optons, from a | |
| * predefined or autocompleted searchable list. The result of that selection | |
| * is then shown as the value of an input, inside the Combobox widget. | |
| * | |
| * The multi-select Combobox can have more than one selected option. | |
| * When more than one option has been selected, the value of the input should | |
| * be updated with the total number of selected items, such as "3 options selected". | |
| * When a Combobox with multiple selected options is closed, | |
| * a listbox of pills is also used to represent those selected options. | |
| * The listbox of pills is positioned below the read-only input, each pill represents a selected option. | |
| * This allows a user to easily see and remove selected items from the Combobox. | |
| * | |
| * The Combobox comes with 2 distinct variations of functionality. A "Read-Only and an "Autocomplete" Combobox. | |
| * A read-only Combobox allows a user to select an option from a pre-defined list of options. It does not allow | |
| * free form user input, nor does it allow the user to modify the selected value. | |
| * An autocomplete Combobox also allows a user to select an option from a list | |
| * but, that list can be affected by what the user types into the input of the Combobox. This can be | |
| * useful when the list of options a user can choose from is very large, as user input can start | |
| * to only display options that match the text the user has entered, effectively performing a search. | |
| * If no option matches, the user can complete the value of the combobox by finishing their own text entry. | |
| * | |
| * The listbox of options can be displayed as just a simple single list, or that list can be grouped with | |
| * headings, to better organise the options. | |
| * | |
| * The target HTML element, `slds-combobox` and dropdown need to be wrapped in the class | |
| * `.slds-dropdown-trigger dropdown-trigger--click`. | |
| * | |
| * #### Accessibility | |
| * | |
| * We follow the ARIA Combobox widget pattern to implement this component. Comboboxes allows the user to have | |
| * dual keyboard focus enabling them to select an option from the list with arrow keys, whilst leaving browser focus inside | |
| * the `input`. | |
| * | |
| * Implementing a multi-select pattern with a Combobox is not standard, nor is it technically supported by the specification. | |
| * Therefore great care should be paid to the extra steps we take to try and communicate multi-selection. | |
| * | |
| * We have decided to implement the Combobox based on the [ARIA 1.1 specification](http://w3c.github.io/aria/aria/aria.html#combobox). | |
| * The Combobox from ARIA 1.1 is a composite widget, in that it is a widget that is composed of other widgets or concepts. | |
| * In this implementation the `combobox` now owns (by means of parent / child relationships) a `textbox` and a `listbox` of `option`'s. | |
| * | |
| * **Expected markup:** | |
| * | |
| * ##### Combobox | |
| * | |
| * - A Combobox must come with an associated `label` element, with an appropriate `for` attribute | |
| * - `slds-combobox` acts as the root node to the composite Combobox widget. It takes the `role="combobox"` attribute as a result | |
| * - `aria-haspopup="listbox"` attribute is then applied to indicate the Combobox will display a popup, of type `listbox` | |
| * - `aria-expanded="true|false"` attribute is applied to describe whether the popup of `listbox` is currently visible or not | |
| * | |
| * ##### Textbox | |
| * | |
| * - The Textbox is an `input` with a role of `textbox`. The role is implicit on inputs, but in this case it doesn't hurt to be explicit | |
| * - The Textbox has `autocomplete="off"` to remove the browsers suggestions from the `input` | |
| * - The Textbox has `aria-controls=""` which points to the ID of the `listbox`. It informs Assistive Technology what DOM node the input controls, in display or content | |
| * - The Textbox has the `type` attribute set to be `text` as it's not a search field | |
| * - The Textbox has `aria-activedescendant` attribute applied only when an option is in "dual focus" via keyboard navigation, otherwise it should be removed | |
| * - The Textbox gets a `value` set to reflect that that option has been selected by the user | |
| * | |
| * ##### Textbox - Read-only | |
| * | |
| * - The Textbox has `readonly` attribute applied | |
| * | |
| * ##### Textbox - Autocomplete | |
| * | |
| * - The Textbox has `aria-autocomplete="list"` attribute applied | |
| * | |
| * ##### Listbox | |
| * | |
| * - The `listbox` has `role="listbox"` applied | |
| * - The `listbox` can have child `option`'s. We place `role="option"` on a `span` element, inside a list item. As such the list item `li` needs to be removed from the Accessibility Tree with `role="presentation"` | |
| * - A `listbox` has the ability to group options together under a visual heading or label. This means the `role="listbox"` attribute is placed on a common parent element, which can wrap multiple lists (or groups) of options | |
| * - When a `listbox` has no option groups | |
| * - The `ul` element has `role="presentation"` to remove it from the Accessibility Tree | |
| * - When a `listbox` has option groups, each group gets a visual label. Exactly like `optgroup` in a `select` element | |
| * - The `ul` element in this case has `role="group"` with an `aria-label` that describes the group | |
| * - Display the group label visually, but due to the way a listbox works it can only be marked as `role="presentation"`, as a `listbox` can only have `option` children. This allows us to communicate the group label visually and programmatically to a screen reader | |
| * - Every `option` has `aria-selected="false"` by default | |
| * - Disabled `option`s should have `aria-disabled="true"` applied | |
| * | |
| * ##### Listbox - Multi-select | |
| * | |
| * - To represent multi-selection on a `listbox` to a screen reader, we must describe previously selected options with hidden assistive text, to represent the check mark | |
| * | |
| * **Expected keyboard interactions:** | |
| * | |
| * - Focus is placed into the `input` by the user | |
| * - The `listbox` is show on `input` focus, and `aria-expanded` is set to `true` on the `combobox` element to reflect that | |
| * - Up and Down arrow keys cycle through the available `option`s by setting and updating `aria-activedescendant="id_of_option"` on the `input`, each time you press the arrow key | |
| * - `aria-selected` on the current `option` is changed to `true` | |
| * - Disabled options should be skipped | |
| * - Esc key closes the `listbox` and sets `aria-expanded` to `false` on the `combobox` | |
| * - Enter key confirms selection, sets `value` if not already set, and closes the `listbox` and sets `aria-expanded` to `false` on the `combobox` | |
| * | |
| * ##### Read-only | |
| * | |
| * - Up and Down arrows also **must** update the `input` value as you navigate through the list, to reflect the currently selected option | |
| * - Any character key updates `aria-activedescendant` to the next `option` that starts with that character, if applicable | |
| * | |
| * ##### Autocomplete (when not allowing free form text as a valid value) | |
| * | |
| * - Up and Down arrows also **should** update the `input` value as you navigate through the list, to reflect the currently selected option | |
| * - Enter key, with an option selected should also set `readonly` on the `input` | |
| * - Esc key with an option selected should remove `readonly` and clear the `value` of the `input` | |
| * | |
| * @summary A widget that provides a user with an input field that is either an autocomplete or readonly, accompanied with a listbox of pre-defined options. | |
| * | |
| * @base | |
| * @name combobox | |
| * @selector .slds-combobox_container, .slds-combobox-group | |
| * @support dev-ready | |
| * @category experience | |
| * @type user-input | |
| * @layout adaptive | |
| * @role combobox | |
| * @scroller | |
| */ | |
| /** | |
| * @name base | |
| * @selector .slds-combobox_container | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-combobox_container { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| position: relative; | |
| /** | |
| * Opens listbox dropdown | |
| * | |
| * @selector .slds-is-open | |
| * @restrict .slds-combobox | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Apply when a combobox has a selection | |
| * @selector .slds-has-selection | |
| * @restrict .slds-combobox_container | |
| */ | |
| /** | |
| * @summary Icon only variant of a combobox | |
| * @selector .slds-has-icon-only | |
| * @restrict .slds-combobox_container | |
| */ } | |
| .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 { | |
| 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; } | |
| /** | |
| * Container around form element with combobox input | |
| * | |
| * @selector .slds-combobox | |
| * @restrict .slds-combobox_container > div | |
| */ | |
| .slds-combobox { | |
| position: static; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; } | |
| /** | |
| * Form element with combobox input | |
| * | |
| * @selector .slds-combobox__form-element | |
| * @restrict .slds-combobox > div | |
| */ | |
| .slds-combobox__form-element { | |
| -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; | |
| box-shadow: 0 0 3px #0070D2; } | |
| [role="combobox"] input[readonly][disabled] { | |
| background-color: #ecebea; | |
| border-color: #c9c7c5; } | |
| /** | |
| * Listbox container | |
| * @name listbox | |
| * @selector .slds-listbox | |
| * @restrict ul | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| /** | |
| * Inline listbox | |
| * | |
| * @selector .slds-listbox_inline | |
| * @restrict .slds-listbox | |
| * @modifier | |
| */ | |
| .slds-listbox_inline, | |
| .slds-listbox--inline { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| margin-left: 0.125rem; | |
| margin-right: 0.125rem; } | |
| .slds-listbox_inline li, | |
| .slds-listbox--inline li { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| .slds-listbox_inline li + li, | |
| .slds-listbox--inline li + li { | |
| padding-left: 0.125rem; } | |
| /** | |
| * Horizontal listbox | |
| * | |
| * @selector .slds-listbox_horizontal | |
| * @restrict .slds-listbox | |
| * @modifier | |
| */ | |
| .slds-listbox_horizontal, | |
| .slds-listbox--horizontal { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| .slds-listbox_horizontal li, | |
| .slds-listbox--horizontal li { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| .slds-listbox_horizontal li + li, | |
| .slds-listbox--horizontal li + li { | |
| padding-left: 0.125rem; } | |
| .slds-is-mobile .slds-listbox_horizontal li + li, .slds-is-mobile | |
| .slds-listbox--horizontal li + li { | |
| padding-left: 0.25rem; } | |
| /** | |
| * Choosable option within listbox | |
| * | |
| * @selector .slds-listbox__option | |
| * @restrict .slds-listbox__item > div | |
| */ | |
| .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; } | |
| /** | |
| * @summary Header for choosable option within listbox | |
| * @selector .slds-listbox__option-header | |
| * @restrict .slds-listbox__option h3 | |
| */ | |
| .slds-listbox__option-header { | |
| font-size: 0.875rem; | |
| font-weight: 700; } | |
| .slds-is-mobile .slds-listbox__option-header { | |
| font-size: 1rem; } | |
| /** | |
| * @summary Container for listbox option icon | |
| * @selector .slds-listbox__option-icon | |
| * @restrict .slds-listbox__option span | |
| */ | |
| .slds-listbox__option-icon { | |
| width: 1.5rem; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-line-pack: center; | |
| align-content: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| color: #706e6b; } | |
| .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-icon { | |
| color: currentColor; } | |
| /** | |
| * Creates a vertical listbox | |
| * | |
| * @selector .slds-listbox_vertical | |
| * @restrict .slds-listbox | |
| * @modifier | |
| */ | |
| .slds-listbox_vertical, | |
| .slds-listbox--vertical { | |
| /** | |
| * Focus state of a vertical listbox option | |
| * | |
| * @selector .slds-has-focus | |
| * @restrict .slds-listbox__option | |
| * @modifier | |
| */ | |
| /** | |
| * Modifies the listbox option if it contains an entity object | |
| * | |
| * @selector .slds-listbox__option_entity | |
| * @restrict .slds-listbox__option | |
| */ | |
| /** | |
| * Modifies the listbox option if it contains an plain object or string | |
| * | |
| * @selector .slds-listbox__option_plain | |
| * @restrict .slds-listbox__option | |
| */ | |
| /** | |
| * If the listbox option has metadata or secondary information that sits below its primary text | |
| * | |
| * @selector .slds-listbox__option_has-meta | |
| * @restrict .slds-listbox__option | |
| */ } | |
| .slds-listbox_vertical .slds-listbox__option:focus, | |
| .slds-listbox_vertical .slds-listbox__option:hover, | |
| .slds-listbox_vertical .slds-listbox__option.slds-has-focus, | |
| .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, | |
| .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, | |
| .slds-listbox_vertical .slds-listbox__option--entity, | |
| .slds-listbox--vertical .slds-listbox__option_entity, | |
| .slds-listbox--vertical .slds-listbox__option--entity { | |
| padding: 0.25rem 0.75rem; } | |
| .slds-listbox_vertical .slds-listbox__option_entity .slds-media__figure, | |
| .slds-listbox_vertical .slds-listbox__option--entity .slds-media__figure, | |
| .slds-listbox--vertical .slds-listbox__option_entity .slds-media__figure, | |
| .slds-listbox--vertical .slds-listbox__option--entity .slds-media__figure { | |
| margin-right: 0.5rem; } | |
| .slds-listbox_vertical .slds-listbox__option_plain, | |
| .slds-listbox_vertical .slds-listbox__option--plain, | |
| .slds-listbox--vertical .slds-listbox__option_plain, | |
| .slds-listbox--vertical .slds-listbox__option--plain { | |
| padding: 0.5rem 0.75rem; } | |
| .slds-is-mobile .slds-listbox_vertical .slds-listbox__option_plain, .slds-is-mobile | |
| .slds-listbox_vertical .slds-listbox__option--plain, .slds-is-mobile | |
| .slds-listbox--vertical .slds-listbox__option_plain, .slds-is-mobile | |
| .slds-listbox--vertical .slds-listbox__option--plain { | |
| line-height: calc(2.75rem - 0rem); | |
| padding-top: 0; | |
| padding-bottom: 0; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| .slds-is-mobile .slds-listbox_vertical .slds-listbox__option_plain .slds-media__figure, .slds-is-mobile | |
| .slds-listbox_vertical .slds-listbox__option--plain .slds-media__figure, .slds-is-mobile | |
| .slds-listbox--vertical .slds-listbox__option_plain .slds-media__figure, .slds-is-mobile | |
| .slds-listbox--vertical .slds-listbox__option--plain .slds-media__figure { | |
| margin-right: 0.5rem; } | |
| .slds-listbox_vertical .slds-listbox__option_term, | |
| .slds-listbox--vertical .slds-listbox__option_term { | |
| padding: 0.5rem 0.75rem; } | |
| .slds-listbox_vertical .slds-listbox__option_has-meta .slds-media__figure, | |
| .slds-listbox_vertical .slds-listbox__option--has-meta .slds-media__figure, | |
| .slds-listbox--vertical .slds-listbox__option_has-meta .slds-media__figure, | |
| .slds-listbox--vertical .slds-listbox__option--has-meta .slds-media__figure { | |
| margin-top: 0.25rem; } | |
| /** | |
| * Class to target styling the value of a combobox input | |
| * | |
| * @selector .slds-combobox__input-value | |
| * @restrict .slds-combobox input | |
| */ | |
| [class*="slds-input-has-icon_left"] .slds-combobox__input[value], | |
| [class*="slds-input-has-icon--left"] .slds-combobox__input[value], | |
| [class*="slds-input-has-icon_left"] .slds-combobox__input.slds-combobox__input-value, | |
| [class*="slds-input-has-icon--left"] .slds-combobox__input.slds-combobox__input-value { | |
| padding-left: 2.25rem; } | |
| /** | |
| * If readonly selection is an entity, use this class | |
| * | |
| * @selector .slds-combobox__input-entity-icon | |
| * @restrict .slds-combobox__form-element span | |
| */ | |
| .slds-combobox__input-entity-icon { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| position: absolute; | |
| top: 50%; | |
| left: calc(0.25rem + 1px); | |
| transform: translateY(-50%); | |
| z-index: 2; } | |
| .slds-combobox__input-entity-icon .slds-icon { | |
| width: 1.25rem; | |
| height: 1.25rem; } | |
| /** | |
| * Icon that is a direct sibling of a combobox container. This is not the same as an input icon. | |
| * | |
| * @selector .slds-combobox_container__icon | |
| * @restrict .slds-combobox_container svg | |
| */ | |
| .slds-combobox_container__icon { | |
| color: #b0adab; } | |
| /** | |
| * The icon within a plain listbox that indicates if an option has been selected or not. | |
| * | |
| * @selector .slds-listbox__icon-selected | |
| * @restrict .slds-listbox__item svg | |
| */ | |
| .slds-listbox__icon-selected { | |
| opacity: 0; | |
| fill: #0070d2; } | |
| /** | |
| * Modifier that makes selected icon visible | |
| * | |
| * @selector .slds-is-selected | |
| * @restrict .slds-listbox__option | |
| * @modifier | |
| */ | |
| .slds-listbox__option.slds-is-selected .slds-listbox__icon-selected { | |
| opacity: 1; } | |
| .slds-listbox__option.slds-is-selected .slds-listbox__option-icon { | |
| color: #0070d2; } | |
| /** | |
| * The main text of an entity listbox | |
| * | |
| * @selector .slds-listbox__option-text_entity | |
| * @restrict .slds-listbox__option span | |
| */ | |
| .slds-listbox__option-text_entity, | |
| .slds-listbox__option-text--entity { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| display: block; | |
| margin-bottom: 0.125rem; } | |
| /** | |
| * The metadata or secondary text of an entity listbox | |
| * | |
| * @selector .slds-listbox__option-meta | |
| * @restrict .slds-listbox__option span | |
| */ | |
| .slds-listbox__option-meta { | |
| display: block; | |
| margin-top: -0.25rem; | |
| color: #3e3e3c; } | |
| .slds-listbox__option[aria-disabled="true"] .slds-listbox__option-meta { | |
| color: currentColor; } | |
| .slds-listbox_object-switcher, | |
| .slds-listbox--object-switcher { | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| padding: 0.125rem; } | |
| .slds-is-mobile .slds-listbox_object-switcher, .slds-is-mobile | |
| .slds-listbox--object-switcher { | |
| padding: 0; } | |
| /** | |
| * @summary Modifier that identifies the combobox as the object switcher, applies specific interactions for its context | |
| * @selector .slds-combobox_object-switcher | |
| * @restrict .slds-combobox-group div | |
| */ | |
| .slds-combobox_object-switcher { | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; } | |
| .slds-combobox_object-switcher .slds-combobox__input { | |
| width: 7.5rem; | |
| transition: width 80ms linear; | |
| font-size: 0.75rem; | |
| color: #3e3e3c; } | |
| .slds-is-mobile .slds-combobox_object-switcher .slds-combobox__input { | |
| font-size: 1rem; } | |
| .slds-combobox_object-switcher .slds-combobox__input:focus, .slds-combobox_object-switcher .slds-combobox__input.slds-has-focus { | |
| width: 10rem; } | |
| /** | |
| * @summary Input field within a combobox | |
| * | |
| * @selector .slds-combobox__input | |
| * @restrict .slds-combobox input | |
| */ | |
| .slds-combobox__input { | |
| /** | |
| * @summary Force focus state of the input | |
| * | |
| * @selector .slds-has-focus | |
| * @restrict .slds-combobox__input | |
| */ } | |
| .slds-combobox__input:focus, .slds-combobox__input.slds-has-focus { | |
| border-color: #1589ee; | |
| box-shadow: 0 0 3px #0070D2; } | |
| /** | |
| * @summary Container for a combobox group | |
| * @name grouped | |
| * @selector .slds-combobox-group | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-combobox-group { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| /** | |
| * @summary Modifier that notifies the combobox group that a selection has been made | |
| * | |
| * @selector .slds-has-selection | |
| * @restrict .slds-combobox-group, .slds-combobox_container | |
| */ } | |
| .slds-combobox-group .slds-combobox_container { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; } | |
| .slds-combobox-group .slds-combobox__input, | |
| .slds-combobox-group .slds-combobox_object-switcher__button { | |
| border-radius: 0; | |
| margin-left: -1px; | |
| margin-right: -1px; | |
| position: relative; } | |
| .slds-combobox-group .slds-combobox__input:focus, .slds-combobox-group .slds-combobox__input.slds-has-focus, | |
| .slds-combobox-group .slds-combobox_object-switcher__button:focus, | |
| .slds-combobox-group .slds-combobox_object-switcher__button.slds-has-focus { | |
| z-index: 1; } | |
| .slds-combobox-group.slds-has-selection .slds-combobox-addon_start .slds-combobox__input { | |
| border-bottom-left-radius: 0; } | |
| .slds-combobox-group.slds-has-selection .slds-combobox-addon_end .slds-combobox__input { | |
| border-bottom-right-radius: 0; } | |
| .slds-combobox-group.slds-has-selection ~ .slds-listbox_selection-group { | |
| display: -ms-flexbox; | |
| display: flex; | |
| position: relative; | |
| background: white; | |
| border: 1px solid #dddbda; | |
| border-top: 0; | |
| border-bottom-left-radius: 0.25rem; | |
| border-bottom-right-radius: 0.25rem; | |
| left: -1px; } | |
| .slds-combobox-group .slds-listbox_horizontal li + li { | |
| padding: 0.125rem; } | |
| /** | |
| * @summary The container of pill selections found inside of a combobox group | |
| * @selector .slds-listbox_selection-group | |
| * @restrict .slds-combobox-group ~ div, .slds-combobox_container ~ div | |
| */ | |
| .slds-listbox_selection-group { | |
| position: relative; | |
| padding: 0; | |
| padding-right: 3.75rem; | |
| height: 1.875rem; | |
| overflow: hidden; | |
| /** | |
| * @summary Expanded state of a selection group | |
| * @selector .slds-is-expanded | |
| * @restrict .slds-listbox_selection-group | |
| */ | |
| /** | |
| * @summary Toggle button to show all of the pill selections | |
| * @selector .slds-listbox-toggle | |
| * @restrict .slds-listbox_selection-group > span | |
| */ } | |
| .slds-is-mobile .slds-listbox_selection-group { | |
| height: 2.75rem; } | |
| .slds-listbox_selection-group.slds-is-expanded { | |
| height: auto; | |
| padding: 0; } | |
| .slds-listbox_selection-group .slds-listbox { | |
| padding: 0 0 0.125rem; } | |
| .slds-is-mobile .slds-listbox_selection-group .slds-listbox { | |
| padding: 0 0.25rem 0.375rem; } | |
| .slds-listbox_selection-group .slds-listbox-item { | |
| padding: 0.125rem 0.125rem 0; } | |
| .slds-is-mobile .slds-listbox_selection-group .slds-listbox-item { | |
| padding: 0.375rem 0.125rem 0; } | |
| .slds-listbox_selection-group .slds-listbox-toggle { | |
| position: absolute; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| right: 0.5rem; } | |
| .slds-listbox_selection-group .slds-listbox-toggle .slds-button { | |
| line-height: 1; } | |
| /** | |
| * @summary The first combobox in the combobox group | |
| * @selector .slds-combobox-addon_start | |
| * @restrict .slds-combobox-group div | |
| */ | |
| .slds-combobox-addon_start .slds-combobox__input { | |
| border-top-right-radius: 0; | |
| border-bottom-right-radius: 0; | |
| border-top-left-radius: 4px; | |
| border-bottom-left-radius: 4px; } | |
| /** | |
| * @summary The last combobox in the combobox group | |
| * @selector .slds-combobox-addon_end | |
| * @restrict .slds-combobox-group div | |
| */ | |
| .slds-combobox-addon_end .slds-combobox__input { | |
| border-top-right-radius: 4px; | |
| border-bottom-right-radius: 4px; | |
| border-top-left-radius: 0; | |
| border-bottom-left-radius: 0; } | |
| /** | |
| * If combo has a selection model that requires a listbox of pills to be displayed | |
| * inside of a combobox | |
| * | |
| * @selector .slds-has-inline-listbox | |
| * @restrict .slds-combobox_container | |
| */ | |
| .slds-has-inline-listbox, | |
| .slds-has-object-switcher { | |
| -ms-flex-direction: row; | |
| flex-direction: row; | |
| background: white; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| /** | |
| * Modifier to the combobox when an SVG icon sits adjacent to the combobox form element | |
| * | |
| * @selector .slds-has-icon_left | |
| * @restrict .slds-combobox | |
| */ } | |
| .slds-has-inline-listbox .slds-combobox, | |
| .slds-has-object-switcher .slds-combobox { | |
| -ms-flex-preferred-size: 50%; | |
| flex-basis: 50%; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; } | |
| .slds-has-inline-listbox .slds-combobox__input, | |
| .slds-has-object-switcher .slds-combobox__input { | |
| min-height: 100%; | |
| line-height: calc(1.875rem - 2px); | |
| border: 0; | |
| padding-top: 0.125rem; | |
| padding-bottom: 0.125rem; } | |
| .slds-is-mobile .slds-has-inline-listbox .slds-combobox__input, .slds-is-mobile | |
| .slds-has-object-switcher .slds-combobox__input { | |
| line-height: calc(2.75rem - 0.25rem); | |
| min-height: 2.75rem; } | |
| .slds-has-inline-listbox .slds-combobox__input:focus, .slds-has-inline-listbox .slds-combobox__input:active, | |
| .slds-has-object-switcher .slds-combobox__input:focus, | |
| .slds-has-object-switcher .slds-combobox__input:active { | |
| outline: 0; | |
| box-shadow: none; } | |
| .slds-has-inline-listbox .slds-listbox_object-switcher ~ .slds-listbox_inline, | |
| .slds-has-inline-listbox .slds-listbox--object-switcher ~ .slds-listbox--inline, | |
| .slds-has-inline-listbox .slds-combobox_container__icon ~ .slds-listbox_inline, | |
| .slds-has-inline-listbox .slds-combobox_container__icon ~ .slds-listbox--inline, | |
| .slds-has-object-switcher .slds-listbox_object-switcher ~ .slds-listbox_inline, | |
| .slds-has-object-switcher .slds-listbox--object-switcher ~ .slds-listbox--inline, | |
| .slds-has-object-switcher .slds-combobox_container__icon ~ .slds-listbox_inline, | |
| .slds-has-object-switcher .slds-combobox_container__icon ~ .slds-listbox--inline { | |
| margin-left: 0.5rem; } | |
| .slds-has-inline-listbox.slds-has-icon_left, | |
| .slds-has-object-switcher.slds-has-icon_left { | |
| padding-left: 2.25rem; | |
| /** | |
| * SVG icon that sits adjacent to the combobox form element | |
| * | |
| * @selector .slds-combobox_container__icon | |
| * @restrict .slds-combobox_container svg | |
| */ } | |
| .slds-has-inline-listbox.slds-has-icon_left .slds-combobox_container__icon, | |
| .slds-has-object-switcher.slds-has-icon_left .slds-combobox_container__icon { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| left: 1.125rem; | |
| top: 50%; | |
| margin-top: -0.5rem; } | |
| .slds-has-inline-listbox [role="listbox"] { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| padding: 0 0.125rem; } | |
| .slds-is-mobile .slds-has-inline-listbox [role="listbox"] { | |
| padding: 0 0.375rem; } | |
| .slds-has-inline-listbox .slds-combobox__input-value { | |
| box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px #dddbda inset; } | |
| .slds-picklist_draggable, | |
| .slds-picklist--draggable { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| .slds-picklist_draggable .slds-button, | |
| .slds-picklist--draggable .slds-button { | |
| margin: 0.25rem; } | |
| .slds-picklist_draggable .slds-button:first-of-type, | |
| .slds-picklist--draggable .slds-button:first-of-type { | |
| margin-top: 1.5rem; } | |
| .slds-picklist__item { | |
| position: relative; | |
| line-height: 1.5; } | |
| .slds-picklist__item > a, | |
| .slds-picklist__item > span { | |
| display: block; | |
| padding: 0.5rem 0.75rem; } | |
| .slds-picklist__item > a:hover, | |
| .slds-picklist__item > span:hover { | |
| background-color: #f3f2f2; | |
| cursor: pointer; } | |
| .slds-picklist__item > a:active, | |
| .slds-picklist__item > span:active { | |
| background-color: #ecebea; } | |
| .slds-picklist__item[aria-selected="true"] { | |
| background-color: #ecebea; } | |
| /** | |
| * A dueling picklist inherits styles from the listbox component | |
| * @summary Initializes a dueling picklist | |
| * | |
| * @name base | |
| * @selector .slds-dueling-list | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-dueling-list { | |
| display: -ms-flexbox; | |
| display: flex; | |
| clear: left; } | |
| /** | |
| * @summary Handles the layout of the dueling picklist | |
| * | |
| * @selector .slds-dueling-list__column | |
| * @restrict .slds-dueling-list div | |
| */ | |
| .slds-dueling-list__column { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; } | |
| .slds-dueling-list__column .slds-button { | |
| margin: 0.25rem; } | |
| .slds-dueling-list__column .slds-button:first-of-type { | |
| margin-top: 1.5rem; } | |
| /** | |
| * @summary Changes the layout of the dueling picklist to be responsive | |
| * | |
| * @selector .slds-dueling-list__column_responsive | |
| * @restrict .slds-dueling-list__column | |
| */ | |
| .slds-dueling-list__column_responsive { | |
| -ms-flex: 0 1 15rem; | |
| flex: 0 1 15rem; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| overflow: hidden; | |
| min-width: 6rem; } | |
| .slds-dueling-list__column_responsive .slds-dueling-list__options { | |
| width: auto; | |
| max-width: 100%; } | |
| /** | |
| * @summary Bounding visual container for listbox of options | |
| * | |
| * @selector .slds-dueling-list__options | |
| * @restrict .slds-dueling-list div | |
| */ | |
| .slds-dueling-list__options, | |
| .slds-picklist__options { | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| padding: 0.25rem 0; | |
| width: 15rem; | |
| height: 15rem; | |
| background-color: white; | |
| overflow: auto; | |
| /** | |
| * @summary Selected/dragging state of a listbox option | |
| * @selector .slds-is-selected | |
| * @restrict .slds-dueling-list__options div | |
| */ | |
| /** | |
| * @summary grabbed state of a listbox option | |
| * @selector .slds-is-grabbed | |
| * @restrict .slds-dueling-list__options div | |
| */ | |
| /** | |
| * @summary Disabled state of a picklist option | |
| * @selector .slds-is-disabled | |
| * @restrict .slds-dueling-list__options | |
| */ } | |
| .slds-dueling-list__options [aria-selected="true"], | |
| .slds-picklist__options [aria-selected="true"] { | |
| background-color: #0070d2; | |
| color: white; } | |
| .slds-dueling-list__options [aria-selected="true"]:hover, .slds-dueling-list__options [aria-selected="true"]:focus, | |
| .slds-picklist__options [aria-selected="true"]:hover, | |
| .slds-picklist__options [aria-selected="true"]:focus { | |
| background: #005fb2; | |
| color: white; } | |
| .slds-dueling-list__options .slds-is-grabbed, | |
| .slds-picklist__options .slds-is-grabbed { | |
| transform: rotate(3deg); } | |
| .slds-dueling-list__options.slds-is-disabled, | |
| .slds-picklist__options.slds-is-disabled { | |
| background-color: #ecebea; | |
| border-color: #c9c7c5; | |
| color: #3e3e3c; } | |
| .slds-dueling-list__options.slds-is-disabled:hover, | |
| .slds-picklist__options.slds-is-disabled:hover { | |
| cursor: not-allowed; } | |
| .slds-dueling-list__options.slds-is-disabled .slds-listbox__option:hover, | |
| .slds-picklist__options.slds-is-disabled .slds-listbox__option:hover { | |
| cursor: not-allowed; | |
| background-color: transparent; } | |
| .slds-dueling-list__options.slds-is-disabled .slds-listbox__option:focus, | |
| .slds-picklist__options.slds-is-disabled .slds-listbox__option:focus { | |
| background-color: transparent; } | |
| /** | |
| * @summary Initiates a datepicker component | |
| * | |
| * @name base | |
| * @selector .slds-datepicker | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-datepicker { | |
| padding: 0; | |
| font-size: 0.75rem; | |
| /** | |
| * @summary Aligns filter items horizontally | |
| * | |
| * @selector .slds-datepicker__filter | |
| * @restrict .slds-datepicker div | |
| */ | |
| /** | |
| * @summary Spaces out month filter | |
| * | |
| * @selector .slds-datepicker__month_filter | |
| * @restrict .slds-datepicker div | |
| */ | |
| /** | |
| * @summary Container of the month table | |
| * | |
| * @selector .slds-datepicker__month | |
| * @restrict .slds-datepicker table | |
| */ } | |
| .slds-datepicker th, | |
| .slds-datepicker td { | |
| text-align: center; } | |
| .slds-datepicker th { | |
| padding: 0.5rem; | |
| font-weight: 400; | |
| color: #3e3e3c; } | |
| .slds-datepicker td { | |
| padding: 0.25rem; | |
| text-align: center; | |
| font-size: 0.75rem; | |
| /** | |
| * @summary Style for calendar days | |
| * | |
| * @selector .slds-day | |
| * @restrict .slds-datepicker td span | |
| */ | |
| /** | |
| * @summary Indicates today | |
| * | |
| * @selector .slds-is-today | |
| * @restrict .slds-datepicker td | |
| */ | |
| /** | |
| * @summary Indicates selected days | |
| * | |
| * @selector .slds-is-selected | |
| * @restrict .slds-datepicker td | |
| */ } | |
| .slds-datepicker td > .slds-day { | |
| width: 2rem; | |
| height: 2rem; | |
| display: block; | |
| position: relative; | |
| min-width: 2rem; | |
| line-height: 2rem; | |
| border-radius: 50%; | |
| margin: auto; } | |
| .slds-datepicker td:hover:not(.slds-disabled-text) > .slds-day, | |
| .slds-datepicker td:focus:not(.slds-disabled-text) > .slds-day, | |
| .slds-datepicker td.slds-is-today > .slds-day { | |
| cursor: pointer; } | |
| .slds-datepicker td.slds-is-today > .slds-day { | |
| background-color: #ecebea; } | |
| .slds-datepicker td:focus { | |
| outline: 0; } | |
| .slds-datepicker td:focus > .slds-day { | |
| box-shadow: #0070d2 0 0 0 1px inset; } | |
| .slds-datepicker td.slds-is-selected > .slds-day { | |
| background: #0070d2; | |
| color: white; } | |
| .slds-datepicker td.slds-is-selected:focus > .slds-day { | |
| background: #005fb2; | |
| box-shadow: #005fb2 0 0 3px; | |
| color: white; } | |
| .slds-datepicker__filter { | |
| padding: 0.25rem; } | |
| .slds-datepicker__filter_month, .slds-datepicker__filter--month { | |
| padding: 0 0.25rem 0 0; } | |
| .slds-datepicker__month { | |
| font-size: 0.75rem; } | |
| .slds-has-error .slds-datepicker__filter .slds-select { | |
| border: 1px solid #dddbda; | |
| box-shadow: none; } | |
| /** | |
| * @summary Indicates days that are in previous/next months | |
| * | |
| * @selector .slds-disabled-text | |
| * @restrict .slds-datepicker td | |
| */ | |
| .slds-disabled-text { | |
| color: #dddbda; } | |
| .slds-datepicker { | |
| /** | |
| * If you desire a multi-select date range, the selected cell will need to have | |
| * `.slds-is-selected-multi` applied to the `<td>`. | |
| * | |
| * If you are selecting multiple dates within the same week, the class `slds-has-multi-selection` | |
| * should be added to the `<tr>`. | |
| * | |
| * If you are selecting multiple dates spanning over two or more weeks, you will | |
| * need to add the class `.slds-has-multi-row-selection` to each `<tr>` that has | |
| * selected dates. | |
| * | |
| * @summary Class on row to notify that more than one date will be selected within the week | |
| * | |
| * @name range | |
| * @selector .slds-has-multi-selection | |
| * @restrict .slds-datepicker tr | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| /** | |
| * @summary Class on row to notify that more than one date will be selected with multiple weeks | |
| * | |
| * @selector .slds-has-multi-row-selection | |
| * @restrict .slds-datepicker tr | |
| */ | |
| /** | |
| * @summary Indicates if the selected days are apart of a date range | |
| * | |
| * @selector .slds-is-selected-multi | |
| * @restrict .slds-datepicker td | |
| */ } | |
| .slds-datepicker .slds-has-multi-selection .slds-is-selected-multi:last-child > .slds-day:after { | |
| left: auto; | |
| right: 0; | |
| transform: translateX(0.25rem); } | |
| .slds-datepicker .slds-has-multi-row-selection .slds-is-selected-multi:first-child > .slds-day:before, | |
| .slds-datepicker .slds-has-multi-row-selection .slds-is-selected-multi:last-child > .slds-day:after { | |
| content: ''; | |
| position: absolute; | |
| background: #0070d2; | |
| top: 0; | |
| left: -50%; | |
| height: 100%; | |
| width: 2.5rem; | |
| transform: translateX(-0.5rem); | |
| z-index: -1; } | |
| .slds-datepicker .slds-has-multi-row-selection .slds-is-selected-multi:first-child > .slds-day:before { | |
| left: 0; | |
| transform: translateX(-0.25rem); } | |
| .slds-datepicker .slds-has-multi-row-selection .slds-is-selected-multi:last-child > .slds-day:after { | |
| left: auto; | |
| right: 0; | |
| transform: translateX(0.25rem); } | |
| .slds-datepicker td.slds-is-selected-multi > .slds-day { | |
| overflow: visible; } | |
| .slds-datepicker td.slds-is-selected-multi.slds-is-today > .slds-day { | |
| box-shadow: white 0 0 0 1px inset; } | |
| .slds-datepicker td.slds-is-selected-multi + .slds-is-selected-multi > .slds-day:before { | |
| content: ''; | |
| position: absolute; | |
| background: #0070d2; | |
| top: 0; | |
| left: -50%; | |
| height: 100%; | |
| width: 2.5rem; | |
| transform: translateX(-0.5rem); | |
| z-index: -1; } | |
| .slds-datepicker_time, | |
| .slds-datepicker--time { | |
| max-width: 12rem; | |
| max-height: 13.5rem; | |
| overflow: hidden; | |
| overflow-y: auto; } | |
| .slds-datepicker_time__list > li, | |
| .slds-datepicker--time__list > li { | |
| white-space: nowrap; | |
| padding: 0.5rem; | |
| padding-left: 2rem; | |
| padding-right: 2rem; } | |
| .slds-datepicker_time__list > li:hover, .slds-datepicker_time__list > li:focus, | |
| .slds-datepicker--time__list > li:hover, | |
| .slds-datepicker--time__list > li:focus { | |
| background: #f3f2f2; | |
| text-decoration: none; | |
| cursor: pointer; } | |
| /** | |
| * @summary Initializes a timepicker | |
| * | |
| * @name base | |
| * @selector .slds-timepicker | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-docked-composer_overflow__pill, | |
| .slds-docked-composer--overflow__pill { | |
| display: -ms-flexbox; | |
| display: flex; | |
| padding: 0 0.75rem; | |
| height: inherit; | |
| white-space: nowrap; | |
| border-bottom-left-radius: 0.25rem; | |
| border-bottom-right-radius: 0.25rem; } | |
| .slds-docked-composer_overflow__pill:hover, .slds-docked-composer_overflow__pill:focus, | |
| .slds-docked-composer--overflow__pill:hover, | |
| .slds-docked-composer--overflow__pill:focus { | |
| color: white; | |
| text-decoration: none; } | |
| .slds-docked-composer_overflow__pill .slds-text-body_small, | |
| .slds-docked-composer_overflow__pill .slds-text-body--small, | |
| .slds-docked-composer--overflow__pill .slds-text-body_small, | |
| .slds-docked-composer--overflow__pill .slds-text-body--small { | |
| color: white; | |
| margin-left: 0.5rem; } | |
| /** | |
| * Intializes docked composer container window | |
| * | |
| * @selector .slds-docked_container | |
| * @restrict div | |
| */ | |
| .slds-docked_container { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: end; | |
| align-items: flex-end; | |
| position: fixed; | |
| bottom: 0; | |
| right: 0; | |
| padding: 0 1.5rem; | |
| height: 2.5rem; } | |
| /** | |
| * @variant | |
| * @name base | |
| * @selector .slds-docked-composer | |
| * @restrict section, div | |
| * @support dev-ready | |
| */ | |
| .slds-docked-composer { | |
| position: relative; | |
| border-radius: 0.25rem 0.25rem 0 0; | |
| width: 480px; | |
| height: 2.5rem; | |
| float: left; | |
| box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16); | |
| border: 1px solid #dddbda; | |
| border-bottom: none; | |
| background-color: white; | |
| /** | |
| * @selector .slds-has-focus | |
| * @restrict .slds-docked-composer | |
| * @modifier | |
| * @group interaction | |
| */ | |
| /** | |
| * @selector .slds-is-open | |
| * @restrict .slds-docked-composer | |
| * @modifier | |
| * @group visibility | |
| */ | |
| /** | |
| * @selector .slds-is-closed | |
| * @restrict .slds-docked-composer | |
| * @modifier | |
| * @group visibility | |
| */ | |
| /** | |
| * Bar at the top of the composer that contains actionable items to invoke, | |
| * such as minimizing, popping out the composer and removing the composer. | |
| * | |
| * @selector .slds-docked-composer__header | |
| * @restrict .slds-docked-composer header | |
| */ | |
| /** | |
| * Primary area within docked composer that contains specific task | |
| * | |
| * @selector .slds-docked-composer__body | |
| * @restrict .slds-docked-composer div | |
| */ | |
| /** | |
| * @selector .slds-docked-composer__body_form | |
| * @restrict .slds-docked-composer__body | |
| */ | |
| /** | |
| * Within the docked composer body, the lead is the first region | |
| * | |
| * @selector .slds-docked-composer__lead | |
| * @restrict .slds-docked-composer div | |
| */ | |
| /** | |
| * @selector .slds-docked-composer__toolbar | |
| * @restrict .slds-docked-composer div | |
| */ | |
| /** | |
| * Bar at the bottom of the composer that contains actionable items to | |
| * invoke, such as saving, associating relationships and adding content. | |
| * | |
| * @selector .slds-docked-composer__footer | |
| * @restrict .slds-docked-composer footer | |
| */ | |
| /** | |
| * When the number of docked composer exceed the width of the viewport, this class modifies the docked composer styles | |
| * | |
| * @selector .slds-docked-composer_overflow | |
| * @restrict .slds-docked-composer | |
| * @required | |
| */ } | |
| .slds-docked-composer.slds-has-focus { | |
| box-shadow: 0 0 4px 2px #0070d2; } | |
| .slds-docked-composer.slds-is-open { | |
| height: 480px; } | |
| .slds-docked-composer.slds-is-closed { | |
| height: 2.5rem; } | |
| .slds-docked-composer.slds-is-closed .slds-docked-composer__body, | |
| .slds-docked-composer.slds-is-closed .slds-docked-composer__footer { | |
| display: none; } | |
| .slds-docked-composer + .slds-docked-composer { | |
| margin-left: 1.5rem; } | |
| .slds-docked-composer__header { | |
| background: white; | |
| border-bottom: 2px solid #1589ee; | |
| border-radius: 0.25rem 0.25rem 0 0; | |
| padding: 0.5rem 0.75rem; } | |
| .slds-docked-composer__actions .slds-button { | |
| margin-left: 0.75rem; } | |
| .slds-docked-composer__body { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex: 1 0 auto; | |
| flex: 1 0 auto; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| overflow: auto; } | |
| .slds-docked-composer__body_form, .slds-docked-composer__body--form { | |
| -ms-flex-pack: start; | |
| justify-content: flex-start; | |
| padding: 1rem; } | |
| .slds-docked-composer__lead { | |
| display: -ms-flexbox; | |
| display: flex; | |
| background: white; | |
| padding: 1rem 0.5rem; } | |
| .slds-docked-composer__toolbar { | |
| background: #f3f2f2; | |
| padding: 0.25rem 0.5rem; | |
| max-height: 60px; | |
| overflow-y: auto; | |
| border-top: 1px solid #dddbda; | |
| border-bottom: 1px solid #dddbda; } | |
| .slds-docked-composer__input { | |
| background: white; | |
| padding: 1rem; | |
| min-height: 6rem; | |
| resize: none; | |
| line-height: 1.5; | |
| overflow: hidden; | |
| overflow-y: auto; } | |
| .slds-docked-composer__footer { | |
| display: -ms-flexbox; | |
| display: flex; | |
| background: #f3f2f2; | |
| padding: 0.75rem 0.5rem; | |
| border-top: 1px solid #dddbda; } | |
| .slds-docked-composer_overflow, .slds-docked-composer--overflow { | |
| width: auto; } | |
| .slds-docked-composer_overflow__button, .slds-docked-composer--overflow__button { | |
| display: -ms-flexbox; | |
| display: flex; | |
| background: white; | |
| padding: 0 0.75rem; | |
| height: inherit; | |
| white-space: nowrap; | |
| border-bottom-left-radius: 0; | |
| border-bottom-right-radius: 0; } | |
| .slds-docked-composer-modal .slds-modal__content { | |
| border-radius: 0.25rem; } | |
| .slds-docked-composer-modal .slds-docked-composer { | |
| width: 100%; | |
| height: 100%; | |
| border: 0; } | |
| /** | |
| * @summary Initiazes email composer inside of a docked composer | |
| * | |
| * @selector .slds-email-composer | |
| * @restrict .slds-docked-composer__body div | |
| */ | |
| .slds-email-composer { | |
| position: relative; | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; } | |
| .slds-email-composer .slds-rich-text-editor { | |
| border: 0; | |
| border-top: 1px solid #dddbda; | |
| border-radius: 0; } | |
| /** | |
| * @summary Modifier combobox when used inside of email composer | |
| * | |
| * @selector .slds-email-composer__combobox | |
| * @restrict .slds-email-composer div | |
| */ | |
| .slds-email-composer__combobox { | |
| padding-left: 3rem; | |
| border: 0; | |
| border-bottom: 1px solid #dddbda; | |
| border-radius: 0; } | |
| .slds-email-composer__combobox .slds-form-element__label { | |
| position: absolute; | |
| left: 0.75rem; | |
| top: 50%; | |
| transform: translateY(-50%); } | |
| .slds-email-composer__combobox .slds-combobox_container, | |
| .slds-email-composer__combobox .slds-input[value] { | |
| border: 0; | |
| box-shadow: none; } | |
| /** | |
| * @summary Provides styles for recipient labels inside of email composer | |
| * | |
| * @selector .slds-email-composer__recipient | |
| * @restrict .slds-email-composer label | |
| */ | |
| .slds-email-composer__recipient { | |
| position: absolute; | |
| top: 0; | |
| right: 0.75rem; } | |
| /** | |
| * Fixed bar at the bottom of viewport, that contains items. | |
| * | |
| * If the utility bar item is active and its panel is popped open in a new window, use `.slds-utility-bar__item_pop-out` on the | |
| * `.slds-utility-bar__item`. This will add a visual indicator to communicate that the panel is opened in a new window. | |
| * | |
| * @summary Fixed bar at the bottom of viewport, that contains items | |
| * @name base | |
| * @selector .slds-utility-bar_container | |
| * @restrict footer | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-utility-bar_container { | |
| position: relative; } | |
| /** | |
| * Fixed bar at the bottom of viewport, contains items | |
| * | |
| * @selector .slds-utility-bar | |
| * @restrict .slds-utility-bar_container ul | |
| */ | |
| .slds-utility-bar { | |
| display: -ms-flexbox; | |
| display: flex; | |
| position: fixed; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 2.5rem; | |
| background: white; | |
| box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16); | |
| z-index: 4; | |
| /** | |
| * Notification indicator | |
| * | |
| * @selector .slds-indicator_unread | |
| * @restrict .slds-utility-bar abbr | |
| */ } | |
| .slds-utility-bar .slds-indicator_unread, | |
| .slds-utility-bar .slds-indicator--unread { | |
| background: #d4504c; | |
| top: 0.5rem; } | |
| /** | |
| * Items that invoke specific utility bar panel | |
| * | |
| * @selector .slds-utility-bar__item | |
| * @restrict .slds-utility-bar li | |
| */ | |
| .slds-utility-bar__item { | |
| display: -ms-flexbox; | |
| display: flex; | |
| margin-right: 1px; } | |
| /** | |
| * @name pop-out | |
| * @summary Modifier to add pop out element | |
| * @selector .slds-utility-bar__item_pop-out | |
| * @restrict .slds-utility-bar__item | |
| * @modifier | |
| * @group feedback | |
| */ | |
| .slds-utility-bar__item_pop-out { | |
| position: relative; } | |
| .slds-utility-bar__item_pop-out:before { | |
| content: ''; | |
| position: absolute; | |
| top: 4px; | |
| right: 4px; | |
| height: 4px; | |
| width: 4px; | |
| border-top: 1px solid #080707; | |
| border-right: 1px solid #080707; } | |
| .slds-utility-bar__item_pop-out:after { | |
| content: ''; | |
| position: absolute; | |
| top: 2px; | |
| right: 6px; | |
| height: 7px; | |
| width: 7px; | |
| border-right: 1px solid #080707; | |
| transform: rotate(45deg); } | |
| /** | |
| * Button that invokes utility panel | |
| * | |
| * @selector .slds-utility-bar__action | |
| * @restrict .slds-utility-bar button | |
| */ | |
| .slds-utility-bar__action { | |
| position: relative; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| padding: 0 0.75rem; | |
| border-radius: 0; | |
| border: 0; | |
| color: #080707; | |
| /** | |
| * @selector .slds-is-active | |
| * @restrict .slds-utility-bar__action | |
| * @modifier | |
| */ } | |
| .slds-utility-bar__action:after { | |
| content: ''; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 2px; | |
| background: transparent; } | |
| .slds-utility-bar__action:focus, .slds-utility-bar__action:hover { | |
| box-shadow: none; } | |
| .slds-utility-bar__action:focus:after { | |
| height: 3px; | |
| background: #1589ee; } | |
| .slds-utility-bar__action:hover, .slds-utility-bar__action:focus { | |
| background: rgba(21, 137, 238, 0.1); | |
| color: inherit; } | |
| .slds-utility-bar__action.slds-is-active { | |
| background: rgba(21, 137, 238, 0.1); | |
| color: inherit; } | |
| .slds-utility-bar__action.slds-is-active:after { | |
| background: #1589ee; } | |
| /** | |
| * Container for utility bar item text, allows for multi-line text output | |
| * | |
| * @selector .slds-utility-bar__text | |
| * @restrict .slds-utility-bar__action > span | |
| */ | |
| .slds-utility-bar__text { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| line-height: 1; | |
| text-align: left; } | |
| /** | |
| * Creates styles for a utility bar item when it has a notification within its panel | |
| * | |
| * @selector .slds-has-notification | |
| * @restrict .slds-utility-bar__item | |
| */ | |
| .slds-has-notification .slds-utility-bar__action { | |
| background: #706e6b; | |
| color: white; } | |
| .slds-has-notification .slds-utility-bar__action:hover, .slds-has-notification .slds-utility-bar__action:focus { | |
| background: #16325c; } | |
| .slds-has-notification .slds-utility-bar__action:focus:after { | |
| background: #c9c7c5; } | |
| /** | |
| * Container of the utility panel | |
| * | |
| * @selector .slds-utility-panel | |
| * @restrict .slds-utility-bar_container div | |
| */ | |
| .slds-utility-panel { | |
| position: fixed; | |
| bottom: 1.875rem; | |
| width: 21.25rem; | |
| height: 30rem; | |
| border-radius: 0.25rem 0.25rem 0 0; | |
| border: 1px solid #dddbda; | |
| border-bottom: none; | |
| background: white; | |
| transform: translateY(100%); | |
| /** | |
| * @selector .slds-is-open | |
| * @restrict .slds-utility-panel | |
| * @modifier | |
| */ | |
| /** | |
| * Header that contains an icon, title and panel actions such as minimizing the panel | |
| * | |
| * @selector .slds-utility-panel__header | |
| * @restrict div | |
| */ | |
| /** | |
| * Area that contains the utility panel feature | |
| * | |
| * @selector .slds-utility-panel__body | |
| * @restrict div | |
| */ } | |
| .slds-utility-panel.slds-is-open { | |
| box-shadow: 0 -2px 2px 0 rgba(0, 0, 0, 0.16); | |
| transform: translateY(0); } | |
| .slds-utility-panel__header { | |
| background: white; | |
| border-bottom: 2px solid #1589ee; | |
| border-radius: 0.25rem 0.25rem 0 0; | |
| padding: 0.5rem 0.75rem; } | |
| .slds-utility-panel__body { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex: 1 1 0%; | |
| flex: 1 1 0%; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| overflow: auto; } | |
| /** | |
| * @summary Creates a drop-zone component for screen building | |
| * @name base | |
| * @selector .slds-drop-zone | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-drop-zone { | |
| position: relative; | |
| /** | |
| * @name drag over | |
| * @summary Modifier used to indicate that component may be dropped in container | |
| * @selector .slds-drop-zone_drag | |
| * @restrict .slds-drop-zone | |
| * @modifier | |
| * @group interaction | |
| */ } | |
| .slds-drop-zone:after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| border: 1px dotted #3e3e3c; | |
| outline: 1px dotted white; } | |
| .slds-drop-zone.slds-drop-zone_drag:after { | |
| border: 1px solid #04844b; | |
| outline: 0; } | |
| /** | |
| * @summary Top label of drop zone | |
| * @selector .slds-drop-zone__label | |
| * @restrict .slds-drop-zone div | |
| */ | |
| .slds-drop-zone__label { | |
| color: white; | |
| background: #04844b; | |
| border-radius: 0.25rem 0.25rem 0 0; | |
| padding: 0.25rem 0.5rem; | |
| position: absolute; | |
| top: 0; | |
| left: 50%; | |
| transform: translate(-50%, -100%); | |
| /** | |
| * @summary Top of populated label of drop zone | |
| * @selector .slds-drop-zone__label_container | |
| * @restrict .slds-drop-zone__label | |
| */ } | |
| .slds-drop-zone__label.slds-drop-zone__label_container { | |
| opacity: 0; | |
| background: #0070d2; } | |
| /** | |
| * @summary Button within drop zone label | |
| * @selector .slds-drop-zone__label_button | |
| * @restrict .slds-drop-zone__label button | |
| */ | |
| .slds-drop-zone__label_button { | |
| border-radius: 0; } | |
| .slds-drop-zone__label_button:hover, .slds-drop-zone__label_button:focus { | |
| text-decoration: underline; | |
| outline: none; } | |
| /** | |
| * @summary Insertion point of drop zone | |
| * @selector .slds-drop-zone_drag__slot | |
| * @restrict .slds-drop-zone_drag div | |
| */ | |
| .slds-drop-zone_drag__slot { | |
| border: 1px solid white; | |
| border-left-width: 2px; | |
| border-right-width: 2px; | |
| background: #04844b; | |
| width: 100%; | |
| height: 0.25rem; } | |
| /** | |
| * @summary Populated region within drop zone | |
| * @selector .slds-drop-zone__container | |
| * @restrict .slds-drop-zone div | |
| */ | |
| .slds-drop-zone__container { | |
| position: relative; | |
| z-index: 8000; | |
| /** | |
| * @name item-hovered | |
| * @summary Hover state for a component within a drop zone | |
| * @selector .slds-is-hovered | |
| * @restrict .slds-drop-zone div | |
| * @notes Class should be applied via Javascript | |
| * @modifier | |
| * @group interactions | |
| */ } | |
| .slds-drop-zone__container:after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; } | |
| .slds-drop-zone__container.slds-is-hovered .slds-drop-zone__label_container, | |
| .slds-drop-zone__container.slds-is-hovered .slds-drop-zone__actions, .slds-drop-zone__container:hover .slds-drop-zone__label_container, | |
| .slds-drop-zone__container:hover .slds-drop-zone__actions { | |
| opacity: 1; | |
| z-index: 8000; } | |
| .slds-drop-zone__container.slds-is-hovered:after, .slds-drop-zone__container:hover:after { | |
| border: 1px solid #1589ee; } | |
| .slds-drop-zone__container:active:after { | |
| border: 2px solid #00396b; } | |
| .slds-drop-zone__container:active .slds-drop-zone__label { | |
| background-color: #00396b; } | |
| .slds-drop-zone__container:focus-within { | |
| outline: none; } | |
| .slds-drop-zone__container:focus-within .slds-drop-zone__label_container, | |
| .slds-drop-zone__container:focus-within .slds-drop-zone__actions { | |
| opacity: 1; | |
| z-index: 8000; } | |
| .slds-drop-zone__container:focus-within:after { | |
| border: 2px solid #0070d2; } | |
| .slds-drop-zone__container:focus-within .slds-drop-zone__label { | |
| background-color: #005fb2; } | |
| /** | |
| * @summary Action buttons within drop zone | |
| * @selector .slds-drop-zone__actions | |
| * @restrict .slds-drop-zone div | |
| */ | |
| .slds-drop-zone__actions { | |
| opacity: 0; | |
| background: #0070d2; | |
| position: absolute; | |
| right: 0; | |
| top: 0; } | |
| .slds-global-header { | |
| /** | |
| * Button icons on the global header | |
| * | |
| * @selector .slds-global-header__button_icon | |
| * @restrict .slds-global-header__item button | |
| * @deprecated | |
| */ | |
| /** | |
| * Button icon specifically for global actions | |
| * | |
| * @selector .slds-global-header__button_icon-actions | |
| * @restrict .slds-global-header__item button | |
| * @deprecated | |
| */ | |
| /** | |
| * Button icon specifically for global actions | |
| * | |
| * @selector .slds-global-header__button_icon-favorites | |
| * @restrict .slds-global-header__item button | |
| * @deprecated | |
| */ | |
| /** | |
| * Deal with sizing for global header icons | |
| * | |
| * @selector .global-header__icon | |
| * @restrict .slds-global-header__item svg | |
| * @deprecated | |
| */ } | |
| .slds-global-header__button_icon, .slds-global-header__button--icon { | |
| margin: 0 0.25rem; | |
| color: #919191; } | |
| .slds-global-header__button_icon .slds-icon, .slds-global-header__button--icon .slds-icon { | |
| fill: #919191; } | |
| .slds-global-header__button_icon:hover:not(:disabled), .slds-global-header__button_icon:focus, .slds-global-header__button--icon:hover:not(:disabled), .slds-global-header__button--icon:focus { | |
| color: #818181; } | |
| .slds-global-header__button_icon:hover:not(:disabled) .slds-icon, | |
| .slds-global-header__button_icon:focus .slds-icon, .slds-global-header__button--icon:hover:not(:disabled) .slds-icon, | |
| .slds-global-header__button--icon:focus .slds-icon { | |
| fill: #818181; } | |
| .slds-global-header__button_icon-actions, .slds-global-header__button--icon-actions { | |
| background: #919191; | |
| border-radius: 0.25rem; | |
| color: white; } | |
| .slds-global-header__button_icon-actions:hover, .slds-global-header__button_icon-actions:focus, .slds-global-header__button--icon-actions:hover, .slds-global-header__button--icon-actions:focus { | |
| background-color: #818181; | |
| color: white; } | |
| .slds-global-header__button_icon-actions .slds-button__icon, .slds-global-header__button--icon-actions .slds-button__icon { | |
| width: 1rem; | |
| height: 1rem; } | |
| .slds-global-header__button_icon-favorites, .slds-global-header__button--icon-favorites { | |
| color: white; | |
| /** | |
| * Selected state for favorites button | |
| * | |
| * @selector .slds-is-selected | |
| * @restrict .slds-global-header__button_icon-favorites | |
| * @deprecated | |
| * @group stateful | |
| */ | |
| /** | |
| * Disabled state for favorites button | |
| * | |
| * @selector .slds-is-disabled | |
| * @restrict .slds-global-header__button_icon-favorites | |
| * @deprecated | |
| */ } | |
| .slds-global-header__button_icon-favorites .slds-icon, | |
| .slds-global-header__button_icon-favorites .slds-button__icon, .slds-global-header__button--icon-favorites .slds-icon, | |
| .slds-global-header__button--icon-favorites .slds-button__icon { | |
| color: white; | |
| stroke: #919191; | |
| stroke-width: 2px; | |
| stroke-linejoin: round; | |
| stroke-linecap: round; } | |
| .slds-global-header__button_icon-favorites:hover .slds-icon, | |
| .slds-global-header__button_icon-favorites:hover .slds-button__icon, | |
| .slds-global-header__button_icon-favorites:focus .slds-icon, | |
| .slds-global-header__button_icon-favorites:focus .slds-button__icon, .slds-global-header__button--icon-favorites:hover .slds-icon, | |
| .slds-global-header__button--icon-favorites:hover .slds-button__icon, | |
| .slds-global-header__button--icon-favorites:focus .slds-icon, | |
| .slds-global-header__button--icon-favorites:focus .slds-button__icon { | |
| color: white; | |
| stroke: #818181; } | |
| .slds-global-header__button_icon-favorites.slds-is-selected .slds-icon, | |
| .slds-global-header__button_icon-favorites.slds-is-selected .slds-button__icon, .slds-global-header__button--icon-favorites.slds-is-selected .slds-icon, | |
| .slds-global-header__button--icon-favorites.slds-is-selected .slds-button__icon { | |
| color: white; | |
| stroke: #0070d2; | |
| stroke-width: 1px; | |
| fill: white; } | |
| .slds-global-header__button_icon-favorites.slds-is-selected:hover .slds-icon, | |
| .slds-global-header__button_icon-favorites.slds-is-selected:hover .slds-button__icon, | |
| .slds-global-header__button_icon-favorites.slds-is-selected:focus .slds-icon, | |
| .slds-global-header__button_icon-favorites.slds-is-selected:focus .slds-button__icon, .slds-global-header__button--icon-favorites.slds-is-selected:hover .slds-icon, | |
| .slds-global-header__button--icon-favorites.slds-is-selected:hover .slds-button__icon, | |
| .slds-global-header__button--icon-favorites.slds-is-selected:focus .slds-icon, | |
| .slds-global-header__button--icon-favorites.slds-is-selected:focus .slds-button__icon { | |
| color: white; | |
| stroke: #005fb2; | |
| fill: white; } | |
| .slds-global-header__button_icon-favorites.slds-is-selected:active .slds-icon, | |
| .slds-global-header__button_icon-favorites.slds-is-selected:active .slds-button__icon, .slds-global-header__button--icon-favorites.slds-is-selected:active .slds-icon, | |
| .slds-global-header__button--icon-favorites.slds-is-selected:active .slds-button__icon { | |
| color: white; | |
| stroke: #005fb2; | |
| fill: white; } | |
| .slds-global-header__button_icon-favorites.slds-is-disabled .slds-icon, | |
| .slds-global-header__button_icon-favorites.slds-is-disabled .slds-button__icon, | |
| .slds-global-header__button_icon-favorites:disabled .slds-icon, | |
| .slds-global-header__button_icon-favorites:disabled .slds-button__icon, .slds-global-header__button--icon-favorites.slds-is-disabled .slds-icon, | |
| .slds-global-header__button--icon-favorites.slds-is-disabled .slds-button__icon, | |
| .slds-global-header__button--icon-favorites:disabled .slds-icon, | |
| .slds-global-header__button--icon-favorites:disabled .slds-button__icon { | |
| stroke: rgba(166, 166, 166, 0.25); } | |
| .slds-global-header__icon, | |
| .slds-global-header__icon .slds-icon, | |
| .slds-global-header__icon .slds-button__icon { | |
| width: 1.25rem; | |
| height: 1.25rem; } | |
| /** | |
| * Container that fixes the global header to the top of the viewport, | |
| * contains global header element | |
| * | |
| * @name base | |
| * @selector .slds-global-header_container | |
| * @restrict header | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-global-header_container { | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: 100; } | |
| .slds-global-header_container .slds-assistive-text_focus, | |
| .slds-global-header_container .slds-assistive-text--focus { | |
| top: 0; | |
| color: #5e5e5e; | |
| background: white; } | |
| /** | |
| * @selector .slds-global-header | |
| * @restrict .slds-global-header_container div | |
| */ | |
| .slds-global-header { | |
| background: white; | |
| box-shadow: 0 2px 4px rgba(0, 0, 0, 0.07); | |
| padding: 0.5rem 0; | |
| height: 3.125rem; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| /** | |
| * A region within the global header | |
| * | |
| * @selector .slds-global-header__item | |
| * @restrict .slds-global-header div, .slds-global-header ul | |
| */ | |
| /** | |
| * Region that contains the search input, handles sizing | |
| * | |
| * @selector .slds-global-header__item_search | |
| * @restrict .slds-global-header__item:nth-child(2) | |
| */ | |
| /** | |
| * Primary combobox that contains the search input, handles sizing | |
| * | |
| * @selector .slds-global-search__form-element div | |
| * @restrict .slds-global-header__item_search | |
| */ | |
| /** | |
| * Container of the global header logo | |
| * | |
| * @selector .slds-global-header__logo | |
| * @restrict .slds-global-header__item div | |
| * @required | |
| */ } | |
| .slds-global-header__item { | |
| padding: 0 1rem; } | |
| .slds-global-header__item_search, .slds-global-header__item--search { | |
| -ms-flex: 0 1 33.5rem; | |
| flex: 0 1 33.5rem; | |
| min-width: 27.5rem; | |
| padding: 0; } | |
| .slds-global-header .slds-global-search__form-element .slds-input { | |
| padding-left: 3rem; } | |
| .slds-global-header .slds-global-search__form-element .slds-input__icon_left, | |
| .slds-global-header .slds-global-search__form-element .slds-input__icon--left { | |
| left: 1.25rem; } | |
| .slds-global-header .slds-global-search__form-element .slds-icon { | |
| fill: #b0adab; } | |
| .slds-global-header__logo { | |
| width: 12.5rem; | |
| height: 2.5rem; | |
| background-image: url("/assets/images/logo-noname.svg"); | |
| background-size: contain; | |
| background-repeat: no-repeat; | |
| background-position: left center; } | |
| /** | |
| * @summary Global actions component wrapper | |
| * @selector .slds-global-actions | |
| * @restrict .slds-global-header ul | |
| */ | |
| .slds-global-actions { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| /** | |
| * @summary List item for each global action | |
| * @selector .slds-global-actions__item | |
| * @restrict .slds-global-actions li | |
| */ | |
| .slds-global-actions__item { | |
| margin-left: 0.25rem; | |
| margin-right: 0.25rem; } | |
| .slds-global-actions__item .slds-button_icon { | |
| color: #919191; } | |
| /** | |
| * @summary The actionable button inside of a global actions list item | |
| * @selector .slds-global-actions__item-action | |
| * @restrict .slds-global-actions__item button | |
| */ | |
| .slds-global-actions__item-action { | |
| transition: color 200ms linear; } | |
| .slds-global-actions__item-action:hover:not(:disabled), .slds-global-actions__item-action:focus { | |
| color: #818181; } | |
| .slds-global-actions__item-action:active { | |
| animation: click-icon 120ms cubic-bezier(1, 1.9, 0.94, 0.98); } | |
| .slds-global-actions__item-action:active:not(:disabled) { | |
| color: #5e5e5e; } | |
| @keyframes click-icon { | |
| 25% { | |
| transform: scale(0.94, 0.94); } | |
| 100% { | |
| transform: scale(0.98, 0.98); } } | |
| /** | |
| * @summary User profile action icon | |
| * @selector .slds-global-actions__avatar | |
| * @restrict .slds-global-actions__item-action | |
| */ | |
| .slds-global-actions__avatar { | |
| box-shadow: #818181 0 0 0 0; | |
| border-radius: 50%; | |
| border: 0; | |
| margin-left: 0.5rem; | |
| transition: transform 80ms ease-out, box-shadow 0.1s linear; } | |
| .slds-global-actions__avatar:hover, .slds-global-actions__avatar:focus { | |
| box-shadow: #818181 0 0 0 2px; } | |
| /** | |
| * @summary Favorites action button group | |
| * @selector .slds-global-actions__favorites | |
| * @restrict .slds-global-actions__item div | |
| */ | |
| .slds-global-actions__favorites { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| margin-right: 0.5rem; } | |
| /** | |
| * @summary Star icon inside of favorites button group | |
| * @selector .slds-global-actions__favorites-action | |
| * @restrict .slds-global-actions__favorites button | |
| */ | |
| .slds-global-actions__favorites-action { | |
| border-color: #919191; | |
| /** | |
| * @summary Selected/clicked state on favorites button | |
| * @selector .slds-is-selected | |
| * @restrict .slds-global-actions__favorites-action | |
| */ | |
| /** | |
| * @summary Disabled state on favorites button | |
| * @selector .slds-is-disabled | |
| * @restrict .slds-global-actions__favorites-action | |
| */ } | |
| .slds-global-actions__favorites-action:hover { | |
| border-color: #5e5e5e; } | |
| .slds-global-actions__favorites-action .slds-button__icon { | |
| width: 1rem; | |
| height: 1rem; | |
| transition: transform 200ms ease-out; } | |
| .slds-global-actions__favorites-action:hover:not(:disabled) .slds-button__icon { | |
| transform: scale(1.1, 1.1); | |
| transform-origin: 60% 40%; } | |
| .slds-global-actions__favorites-action.slds-is-selected { | |
| background-color: #005583; | |
| border-color: #005583; } | |
| .slds-global-actions__favorites-action.slds-is-selected:hover, .slds-global-actions__favorites-action.slds-is-selected:focus { | |
| background-color: #005583; | |
| border-color: #005583; } | |
| .slds-global-actions__favorites-action.slds-is-selected .slds-button__icon { | |
| animation: click-favorites-icon 600ms cubic-bezier(0.46, 0.32, 0, 0.98); } | |
| .slds-global-actions__favorites-action:disabled, .slds-global-actions__favorites-action.slds-is-disabled { | |
| color: rgba(166, 166, 166, 0.25); | |
| border-color: rgba(166, 166, 166, 0.25); } | |
| /** | |
| * @summary More dropdown icon inside of favorites button group | |
| * @selector .slds-global-actions__favorites-more | |
| * @restrict .slds-global-actions__favorites button | |
| */ | |
| .slds-global-actions__favorites-more { | |
| width: auto; | |
| padding-left: 0.125rem; | |
| padding-right: 0.125rem; | |
| border-color: #919191; } | |
| .slds-global-actions__favorites-more:hover { | |
| border-color: #5e5e5e; } | |
| @keyframes click-favorites-icon { | |
| 25% { | |
| transform: scale(0.85, 0.85) rotate(15deg); } | |
| 75% { | |
| transform: scale(1.2, 1.2) rotate(0deg); } | |
| 100% { | |
| transform: scale(1, 1) rotate(0deg); } } | |
| /** | |
| * @summary Task action icon | |
| * @selector .slds-global-actions__task | |
| * @restrict .slds-global-actions__item-action | |
| */ | |
| .slds-global-actions__task { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| background: #919191; | |
| position: relative; | |
| top: -1px; } | |
| .slds-global-actions__task:hover { | |
| background: #818181; } | |
| .slds-global-actions__task:active { | |
| background: #5e5e5e; } | |
| .slds-global-actions__task.slds-global-actions__item-action, .slds-global-actions__task.slds-global-actions__item-action:hover, .slds-global-actions__task.slds-global-actions__item-action:active { | |
| color: #fff; } | |
| .slds-global-actions__task .slds-button__icon { | |
| width: 1rem; | |
| height: 1rem; } | |
| /** | |
| * @summary Notification action icon | |
| * @selector .slds-global-actions__notifications | |
| * @restrict .slds-global-actions__item-action | |
| */ | |
| .slds-global-actions__notifications { | |
| position: relative; } | |
| .slds-global-actions__notifications.slds-incoming-notification { | |
| animation: bell 0.8s ease-in-out; } | |
| /** | |
| * @summary Notification counter badge | |
| * @selector .slds-notification-badge | |
| * @restrict .slds-global-actions__item span | |
| */ | |
| .slds-notification-badge { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -ms-flex-line-pack: center; | |
| align-content: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| position: absolute; | |
| top: -0.25rem; | |
| right: -0.25rem; | |
| background: #bf0201; | |
| color: #fff; | |
| border-radius: 15rem; | |
| min-width: 1rem; | |
| min-height: 1rem; | |
| text-align: center; | |
| font-size: 0.625rem; | |
| padding: 0 0.125rem; | |
| opacity: 0; | |
| pointer-events: none; } | |
| .slds-notification-badge.slds-show-notification { | |
| animation: ding 0.8s ease-out; | |
| opacity: 1; | |
| transition-delay: 0.5s; | |
| transform-origin: 1.188rem 0; } | |
| @keyframes ding { | |
| 75% { | |
| transform: scale(0.5, 0.5); } | |
| 85% { | |
| transform: scale(1.5, 1.5); } | |
| 100% { | |
| transform: scale(1, 1); } } | |
| @keyframes bell { | |
| 45% { | |
| transform: rotate(15deg); } | |
| 57% { | |
| transform: rotate(-15deg); } | |
| 70% { | |
| transform: rotate(7deg); } | |
| 77% { | |
| transform: rotate(-5deg); } } | |
| /** | |
| * @summary Handles styling for notification item interactions | |
| */ | |
| .slds-global-header__notification { | |
| border-bottom: 1px solid #dddbda; | |
| padding: 0.25rem; } | |
| .slds-global-header__notification_unread, .slds-global-header__notification--unread { | |
| background-color: #ecebea; } | |
| .slds-global-header__notification:hover { | |
| background-color: #f3f2f2; } | |
| .slds-global-header__notification:last-child { | |
| border-bottom: 0; } | |
| /** | |
| * @summary Navigation bar wrapper | |
| * | |
| * @name navigation-bar | |
| * @selector .slds-context-bar | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-context-bar { | |
| display: -ms-flexbox; | |
| display: flex; | |
| height: 2.5rem; | |
| background-color: white; | |
| border-bottom: 3px solid #1589ee; | |
| color: #080707; | |
| position: relative; | |
| padding: 0 0 0 1.5rem; | |
| /** | |
| * Primary zone | |
| * | |
| * @selector .slds-context-bar__primary | |
| * @restrict .slds-context-bar div | |
| */ | |
| /** | |
| * Secondary zone | |
| * | |
| * @selector .slds-context-bar__secondary | |
| * @restrict .slds-context-bar nav, .slds-context-bar div | |
| */ | |
| /** | |
| * Manually add a vertical divider between elements | |
| * | |
| * @selector .slds-context-bar__vertical-divider | |
| * @restrict .slds-context-bar div | |
| */ | |
| /** Any item on the horizontal axis of the context nav bar | |
| * | |
| * Interactions such as hovers + active are defaults, bottom of the | |
| * file deals with light / dark theme thresholds | |
| * | |
| * @selector .slds-context-bar__item | |
| * @restrict .slds-context-bar div, .slds-context-bar li | |
| */ | |
| /** | |
| * Actionable Text Links | |
| * | |
| * @selector .slds-context-bar__label-action | |
| * @restrict .slds-context-bar__item a, .slds-context-bar__item span, .slds-context-bar__item button | |
| */ | |
| /** | |
| * Actionable Icons | |
| * | |
| * @selector .slds-context-bar__icon-action | |
| * @restrict .slds-context-bar div | |
| */ | |
| /** | |
| * @summary Tab modifier when using a tabset | |
| * | |
| * @name navigation-tab-bar | |
| * @selector .slds-context-bar_tabs | |
| * @restrict .slds-context-bar | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| /** | |
| * @summary Context bar tab items | |
| * | |
| * @selector .slds-context-bar__item_tab | |
| * @restrict .slds-context-bar_tabs .slds-context-bar__item | |
| * @notes Only use on tabset version | |
| * @required | |
| * | |
| */ | |
| /** | |
| * @summary Dirty state for a nav item | |
| * @selector .slds-is-unsaved | |
| * @restrict .slds-context-bar__item, .slds-dropdown__item | |
| */ | |
| /** | |
| * @summary Notifications style - Styling a tab or overflow item to indicate the tab has unread activity | |
| * @selector .slds-has-notification | |
| * @restrict .slds-context-bar__item, .slds-context-bar__item .slds-dropdown__item | |
| */ } | |
| .slds-context-bar__primary, .slds-context-bar__secondary, .slds-context-bar__tertiary { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; } | |
| .slds-context-bar__secondary { | |
| -ms-flex: 1 1 0%; | |
| flex: 1 1 0%; | |
| min-width: 0; } | |
| .slds-context-bar__vertical-divider { | |
| width: 0; | |
| overflow: hidden; | |
| border-left: 1px solid #dddbda; } | |
| .slds-context-bar__item { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-line-pack: center; | |
| align-content: center; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; | |
| white-space: nowrap; | |
| position: relative; | |
| max-width: 15rem; | |
| transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); | |
| /** | |
| * Active state of an item | |
| * | |
| * @selector .slds-is-active | |
| * @restrict .slds-context-bar__item:not(.slds-no-hover) | |
| * @modifier | |
| */ | |
| /** | |
| * Toggled focused class applied via JavaScript | |
| * | |
| * @selector .slds-has-focus | |
| * @restrict .slds-context-bar__item | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Success notification on a tab | |
| * | |
| * @selector .slds-has-success | |
| * @restrict .slds-context-bar__item | |
| */ | |
| /** | |
| * @summary Error notification on a tab | |
| * | |
| * @selector .slds-has-error | |
| * @restrict .slds-context-bar__item | |
| */ | |
| /** | |
| * @summary Warning notification on a tab | |
| * | |
| * @selector .slds-has-warning | |
| * @restrict .slds-context-bar__item | |
| */ | |
| /** | |
| * Add a left border to a context bar item | |
| * | |
| * @selector .slds-context-bar__item_divider-left | |
| * @restrict .slds-context-bar div, .slds-context-bar li | |
| */ | |
| /** | |
| * Add a right border to a context bar item | |
| * | |
| * @selector .slds-context-bar__item_divider-right | |
| * @restrict .slds-context-bar div, .slds-context-bar li | |
| */ } | |
| .slds-context-bar__item:not(.slds-no-hover):hover, .slds-context-bar__item.slds-is-active { | |
| outline: 0; | |
| border-radius: 0; | |
| background-color: rgba(21, 137, 238, 0.1); | |
| text-decoration: none; | |
| cursor: pointer; } | |
| .slds-context-bar__item:not(.slds-no-hover):hover:after { | |
| content: ''; | |
| width: 100%; | |
| height: 3px; | |
| display: block; | |
| background: rgba(0, 0, 0, 0.25); | |
| position: absolute; | |
| bottom: -3px; | |
| left: 0; | |
| right: 0; } | |
| @supports (mix-blend-mode: soft-light) { | |
| .slds-context-bar__item:not(.slds-no-hover):hover:after { | |
| background: rgba(0, 0, 0, 0.75); | |
| mix-blend-mode: soft-light; } } | |
| .slds-context-bar__item:before { | |
| bottom: 0; | |
| content: ''; | |
| height: auto; | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| transition-property: top, background-color; } | |
| .slds-context-bar__item.slds-is-active { | |
| animation: bkAnim 0.135s cubic-bezier(0.39, 0.575, 0.565, 1) both; } | |
| @keyframes bkAnim { | |
| 50% { | |
| background-color: white; } | |
| 100% { | |
| background-color: rgba(21, 137, 238, 0.1); } } | |
| .slds-context-bar__item.slds-is-active:before { | |
| content: ''; | |
| height: 3px; | |
| display: block; | |
| background: #1589ee; | |
| position: absolute; | |
| top: 0; | |
| left: -1px; | |
| right: -1px; | |
| animation: navBounceIn 0.15s cubic-bezier(0.39, 0.575, 0.565, 1) both; } | |
| @keyframes navBounceIn { | |
| 0% { | |
| transform: translate3d(0, 20px, 0); | |
| opacity: 0; } | |
| 20% { | |
| opacity: 0; } | |
| 90% { | |
| transform: translate3d(0, 1px, 0); } | |
| 100% { | |
| transform: translate3d(0, 0, 0); } } | |
| .slds-context-bar__item.slds-is-active:hover { | |
| border-bottom-color: rgba(21, 137, 238, 0.1); } | |
| .slds-context-bar__item.slds-has-focus:before, .slds-context-bar__item.slds-has-focus:after, .slds-context-bar__item.slds-has-focus:hover:before, .slds-context-bar__item.slds-has-focus:hover:after { | |
| height: 4px; } | |
| .slds-context-bar__item.slds-has-notification { | |
| background: rgba(21, 137, 238, 0.1); } | |
| @keyframes error-pulse { | |
| 0% { | |
| background-color: #c23934; } | |
| 40% { | |
| background-color: #870500; } | |
| 100% { | |
| background-color: #c23934; } } | |
| @keyframes success-pulse { | |
| 0% { | |
| background-color: #04844b; } | |
| 40% { | |
| background-color: #004a29; } | |
| 100% { | |
| background-color: #04844b; } } | |
| @keyframes warning-pulse { | |
| 0% { | |
| background-color: #ffb75d; } | |
| 40% { | |
| background-color: #ff9e2c; } | |
| 100% { | |
| background-color: #ffb75d; } } | |
| .slds-context-bar__item.slds-has-success:before { | |
| animation: none; | |
| animation-duration: 1s; | |
| animation-iteration-count: 3; | |
| animation-delay: 150ms; | |
| animation-timing-function: cubic-bezier(0.07, 0.49, 0.5, 1); | |
| background-color: #04844b; | |
| bottom: 0; | |
| content: ''; | |
| height: auto; | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); } | |
| .slds-context-bar__item.slds-has-success:hover:before { | |
| background-color: #004a29; | |
| height: auto; } | |
| .slds-context-bar__item.slds-has-success:before { | |
| animation-name: success-pulse; } | |
| .slds-context-bar__item.slds-has-error:before { | |
| animation: none; | |
| animation-duration: 1s; | |
| animation-iteration-count: 3; | |
| animation-delay: 150ms; | |
| animation-timing-function: cubic-bezier(0.07, 0.49, 0.5, 1); | |
| background-color: #c23934; | |
| bottom: 0; | |
| content: ''; | |
| height: auto; | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); } | |
| .slds-context-bar__item.slds-has-error:hover:before { | |
| background-color: #870500; | |
| height: auto; } | |
| .slds-context-bar__item.slds-has-error:before { | |
| animation-name: error-pulse; } | |
| .slds-context-bar__item.slds-has-success .slds-context-bar__label-action, .slds-context-bar__item.slds-has-error .slds-context-bar__label-action { | |
| color: white; } | |
| .slds-context-bar__item.slds-has-success .slds-indicator_unread, .slds-context-bar__item.slds-has-error .slds-indicator_unread { | |
| background-color: white; } | |
| .slds-context-bar__item.slds-has-success .slds-indicator_unsaved, .slds-context-bar__item.slds-has-error .slds-indicator_unsaved { | |
| color: white; } | |
| .slds-context-bar__item.slds-has-warning:before { | |
| animation: none; | |
| animation-duration: 1s; | |
| animation-iteration-count: 3; | |
| animation-delay: 150ms; | |
| animation-timing-function: cubic-bezier(0.07, 0.49, 0.5, 1); | |
| background-color: #ffb75d; | |
| bottom: 0; | |
| content: ''; | |
| height: auto; | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); } | |
| .slds-context-bar__item.slds-has-warning:hover:before { | |
| background-color: #ff9e2c; | |
| height: auto; } | |
| .slds-context-bar__item.slds-has-warning:before { | |
| animation-name: warning-pulse; } | |
| .slds-context-bar__item.slds-has-warning .slds-indicator_unread { | |
| background-color: currentColor; } | |
| .slds-context-bar__item.slds-has-warning .slds-indicator_unsaved { | |
| color: currentColor; } | |
| .slds-context-bar__item.slds-has-success.slds-is-active:after, .slds-context-bar__item.slds-has-warning.slds-is-active:after, .slds-context-bar__item.slds-has-error.slds-is-active:after { | |
| content: ''; | |
| background: #3e3e3c; | |
| position: absolute; | |
| height: 3px; | |
| opacity: 0.4; | |
| top: 0; | |
| right: 0; | |
| left: 0; } | |
| .slds-context-bar__item.slds-has-success.slds-has-focus:after, .slds-context-bar__item.slds-has-warning.slds-has-focus:after, .slds-context-bar__item.slds-has-error.slds-has-focus:after { | |
| height: 4px; } | |
| .slds-context-bar__item_divider-left, .slds-context-bar__item--divider-left { | |
| border-left: 1px solid #dddbda; } | |
| .slds-context-bar__item_divider-right, .slds-context-bar__item--divider-right { | |
| border-right: 1px solid #dddbda; } | |
| .slds-context-bar__label-action { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-line-pack: center; | |
| align-content: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| padding: 0 0.75rem; | |
| border-radius: 0; | |
| min-width: 0%; | |
| color: inherit; | |
| font-size: 0.812rem; | |
| z-index: 1; } | |
| .slds-context-bar__label-action:focus, .slds-context-bar__label-action:focus:hover { | |
| outline: 0; | |
| text-decoration: underline; } | |
| .slds-context-bar__label-action:hover { | |
| text-decoration: none; } | |
| .slds-context-bar__label-action:hover, .slds-context-bar__label-action:focus { | |
| color: inherit; } | |
| .slds-context-bar__label-action:active { | |
| color: inherit; | |
| text-decoration: none; } | |
| .slds-context-bar__icon-action { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-line-pack: center; | |
| align-content: center; | |
| margin-left: -0.25rem; | |
| padding: 0 0.5rem; | |
| color: #3e3e3c; | |
| border-radius: 0; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; } | |
| .slds-context-bar__icon-action:focus { | |
| outline: 0; } | |
| .slds-context-bar__icon-action:focus .slds-context-bar__button { | |
| outline: 0; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-context-bar__icon-action:focus ~ .slds-dropdown { | |
| visibility: visible; | |
| opacity: 1; } | |
| .slds-context-bar__icon-action:hover, .slds-context-bar__icon-action:focus { | |
| color: #3e3e3c; } | |
| .slds-context-bar__icon-action:active { | |
| color: #3e3e3c; } | |
| .slds-context-bar__icon-action .slds-icon-waffle_container { | |
| width: 2rem; | |
| height: 2rem; | |
| margin-right: 0.25rem; | |
| margin-left: -0.5rem; } | |
| .slds-context-bar__icon-action .slds-icon-waffle { | |
| margin-right: auto; | |
| margin-left: auto; } | |
| .slds-context-bar .slds-context-bar__button { | |
| color: inherit; } | |
| .slds-context-bar .slds-context-bar__icon-action { | |
| margin-left: auto; } | |
| .slds-context-bar_tabs, .slds-context-bar--tabs { | |
| border-top: 1px solid #dddbda; } | |
| .slds-context-bar__item_tab, .slds-context-bar__item--tab { | |
| width: 12rem; | |
| border-right: 1px solid #dddbda; | |
| /** | |
| * @summary Pinned state - toggles visibility of elements inside of tab | |
| * | |
| * @selector .slds-is-pinned | |
| * @restrict .slds-context-bar__item_tab | |
| * @modifier | |
| */ } | |
| .slds-context-bar__item_tab .slds-context-bar__label-action, .slds-context-bar__item--tab .slds-context-bar__label-action { | |
| padding: 0 0.5rem; } | |
| .slds-context-bar__item_tab.slds-is-pinned, .slds-context-bar__item--tab.slds-is-pinned { | |
| width: auto; | |
| padding-right: 0.5rem; } | |
| .slds-context-bar__item_tab.slds-is-pinned .slds-context-bar__label-action, .slds-context-bar__item--tab.slds-is-pinned .slds-context-bar__label-action { | |
| padding: 0 0.5rem; } | |
| .slds-context-bar .slds-is-unsaved .slds-context-bar__label-action { | |
| position: relative; | |
| font-style: italic; | |
| line-height: normal; } | |
| .slds-context-bar .slds-is-unsaved .slds-indicator_unread { | |
| margin-left: -0.35rem; } | |
| .slds-context-bar .slds-has-notification { | |
| /** | |
| * @summary Unread notification icon | |
| * @selector .slds-indicator_unread | |
| * @restrict .slds-has-notification span | |
| */ } | |
| .slds-context-bar .slds-has-notification .slds-indicator_unread { | |
| display: inline-block; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| height: 6px; | |
| width: 6px; | |
| left: auto; | |
| position: relative; | |
| top: auto; } | |
| .slds-context-bar .slds-has-notification .slds-indicator_unsaved, | |
| .slds-context-bar .slds-has-notification .slds-indicator--unsaved { | |
| top: -0.25rem; } | |
| /** | |
| * @summary Modifier that notifies a parent component that it has sub tabs inside of it | |
| * @selector .slds-has-sub-tabs | |
| * @restrict .slds-context-bar__item_tab | |
| */ | |
| .slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active, | |
| .slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active:hover { | |
| animation: none; | |
| background-color: transparent; } | |
| .slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active:after, | |
| .slds-context-bar__item_tab.slds-has-sub-tabs.slds-is-active:hover:after { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| left: 0; | |
| bottom: -3px; | |
| height: 3px; | |
| width: 100%; | |
| background-color: white; | |
| border: 0; | |
| mix-blend-mode: unset; } | |
| /** | |
| * Unsaved indicator - This can probably be used in other locations as well | |
| * | |
| * @selector .slds-indicator_unsaved | |
| * @restrict .slds-context-bar__item span, abbr | |
| */ | |
| .slds-indicator_unsaved, | |
| .slds-indicator--unsaved { | |
| color: #1589ee; | |
| -ms-flex-item-align: center; | |
| -ms-grid-row-align: center; | |
| align-self: center; | |
| position: relative; } | |
| .slds-context-bar__dropdown-trigger .slds-dropdown { | |
| margin-top: 3px; } | |
| .slds-context-bar__dropdown-trigger .slds-dropdown:before { | |
| content: ''; | |
| position: absolute; | |
| bottom: 100%; | |
| width: 100%; | |
| height: 3px; } | |
| /** | |
| * Styles for application name region | |
| * | |
| * @selector .slds-context-bar__app-name | |
| * @restrict .slds-context-bar__label-action | |
| */ | |
| .slds-context-bar__app-name { | |
| padding: 0 1.5rem 0 0; | |
| font-size: 1.125rem; | |
| line-height: 1.25; } | |
| /** | |
| * Styles for object switcher region | |
| * | |
| * @selector .slds-context-bar__object-switcher | |
| * @restrict .slds-context-bar__item | |
| * @required | |
| */ | |
| .slds-context-bar__object-switcher { | |
| min-width: 9rem; | |
| max-width: 12rem; | |
| border-left: 1px solid #dddbda; | |
| border-right: 1px solid #dddbda; } | |
| .slds-context-bar_theme-marketing, | |
| .slds-context-bar--theme-marketing { | |
| border-bottom-color: #f59331; } | |
| .slds-context-bar_theme-marketing .slds-context-bar__item:not(.slds-no-hover):hover, | |
| .slds-context-bar--theme-marketing .slds-context-bar__item:not(.slds-no-hover):hover { | |
| border-bottom-color: #f59331; } | |
| .slds-context-bar_theme-marketing .slds-context-bar__item.slds-is-active:before, | |
| .slds-context-bar--theme-marketing .slds-context-bar__item.slds-is-active:before { | |
| background: #f59331; } | |
| /** | |
| * @summary Used to reserve spacing for tab indicators | |
| * | |
| * @selector .slds-indicator-container | |
| * @restrict .slds-context-bar__item span, .slds-sub-tabs__item span | |
| */ | |
| .slds-indicator-container { | |
| display: inline; | |
| margin-right: 0.25rem; } | |
| .slds-indicator-container:empty { | |
| margin-right: 0; } | |
| /** | |
| * @summary Creates an Expression Component | |
| * @name base | |
| * @selector .slds-expression | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| /** | |
| * @summary Condition options | |
| * @selector .slds-expression__options | |
| * @restrict .slds-expression div | |
| */ | |
| .slds-expression__options { | |
| width: 15rem; } | |
| .slds-expression__options .slds-form-element__control { | |
| clear: none; } | |
| /** | |
| * @summary Legend for expression row | |
| * @selector .slds-expression__legend | |
| * @restrict .slds-expression legend | |
| */ | |
| .slds-expression__legend { | |
| float: left; | |
| width: 3rem; | |
| padding-top: calc((1.5 * 0.75rem) + (1.875rem / 4)); | |
| font-weight: 700; | |
| /** | |
| * @summary Modifies a legend when placed within a expression group | |
| * @selector .slds-expression__legend_group | |
| * @restrict .slds-expression__legend | |
| */ } | |
| .slds-expression__legend.slds-expression__legend_group { | |
| margin-top: 0; } | |
| /** | |
| * @summary Defines an expression row | |
| * @selector .slds-expression__row | |
| * @restrict .slds-expression li | |
| */ | |
| .slds-expression__row { | |
| margin-top: 0.75rem; | |
| /** | |
| * @summary Modifies a row when placed within a expression group | |
| * @selector .slds-expression__row_group | |
| * @restrict .slds-expression__row | |
| */ } | |
| .slds-expression__row.slds-expression__row_group { | |
| padding-left: 3rem; } | |
| /** | |
| * @summary Action buttons for conditional expressions | |
| * @selector .slds-expression__buttons | |
| * @restrict .slds-expression div | |
| */ | |
| .slds-expression__buttons { | |
| margin-top: 0.75rem; } | |
| /** | |
| * @summary Group of conditional expressions | |
| * @selector .slds-expression__group | |
| * @restrict .slds-expression li | |
| */ | |
| .slds-expression__group { | |
| background: #f3f2f2; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| padding: 0.75rem; | |
| margin-top: 0.75rem; } | |
| /** | |
| * @summary Section title for expressions | |
| * @selector .slds-expression__title | |
| * @restrict h2 | |
| */ | |
| .slds-expression__title { | |
| font-size: 1.125rem; | |
| font-weight: bold; | |
| margin-bottom: 0.5rem; } | |
| /** | |
| * The Custom Logic variant allows users to manually type their custom logic into an input | |
| * field, which references a numbered expression. | |
| * | |
| * @summary Creates a Custom Logic variant of Filters | |
| * @name custom-logic | |
| * @selector .slds-expression__custom-logic | |
| * @restrict .slds-expression div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-expression__custom-logic { | |
| margin-top: 0.75rem; } | |
| /** | |
| * The Formula variant allows users to write free-form custom logic by using insertion | |
| * comboboxes and/or typing freely. | |
| * | |
| * @summary Creates a Filter Component | |
| * @name formula | |
| * @selector .slds-expression_formula__rte | |
| * @restrict .slds-expression div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-expression_formula__rte { | |
| margin-top: 0.75rem; } | |
| /** | |
| * The narrow expression is used for in-context logic building, where users are able to | |
| * immediately preview the results of their conditional logic,like a list or report. | |
| * | |
| * @summary Creates a narrow expression | |
| * @name filters | |
| * @selector .slds-filters | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-filters { | |
| position: relative; } | |
| /** | |
| * @summary Filters Header | |
| * @selector .slds-filters__header | |
| * @restrict .slds-filters div | |
| */ | |
| .slds-filters__header { | |
| padding: 0.5rem 0.75rem; } | |
| /** | |
| * @summary Filters Body | |
| * @selector .slds-filters__body | |
| * @restrict .slds-filters div | |
| */ | |
| .slds-filters__body { | |
| padding: 0.5rem 0.75rem; } | |
| /** | |
| * @summary Filters Footer | |
| * @selector .slds-filters__footer | |
| * @restrict .slds-filters div | |
| */ | |
| .slds-filters__footer { | |
| padding: 0.5rem 1rem; } | |
| /** | |
| * @summary Filterable Item | |
| * @selector .slds-filters__item | |
| * @restrict .slds-filters li div | |
| */ | |
| .slds-filters__item { | |
| padding: 0.75rem; | |
| background: white; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| /** | |
| * @summary Indicates that a filter is new and hasn't been saved | |
| * @selector .slds-is-new | |
| * @restrict .slds-filters__item | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Indicates that a filter has an error | |
| * @selector .slds-has-error | |
| * @restrict .slds-filters__item | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Indicates that a filter is locked | |
| * @selector .slds-is-locked | |
| * @restrict .slds-filters__item | |
| * @modifier | |
| */ } | |
| .slds-filters__item.slds-is-new { | |
| background: #faffbd; | |
| color: #080707; } | |
| .slds-filters__item.slds-has-error { | |
| border-color: #c23934; } | |
| .slds-filters__item.slds-is-locked { | |
| background: #f3f2f2; } | |
| .slds-filters__item + .slds-filters__item { | |
| margin-top: 0.5rem; } | |
| .slds-filters__item:hover { | |
| background: #f4f6f9; } | |
| /** | |
| * @summary Filters Group | |
| * @selector .slds-filters__group | |
| * @restrict .slds-filters div | |
| */ | |
| .slds-filters__group { | |
| background: #f3f2f2; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| padding: 0.75rem; } | |
| /** | |
| * @summary Container that fixes the builder header to the top of the viewport, contains builder header element | |
| * @name base | |
| * @selector .slds-builder-header_container | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-builder-header_container { | |
| position: fixed; | |
| width: 100%; | |
| top: 0; | |
| left: 0; | |
| z-index: 100; } | |
| /** | |
| * @summary Creates builder specific global header | |
| * @selector .slds-builder-header | |
| * @restrict .slds-builder-header_container header | |
| */ | |
| .slds-builder-header { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| height: 3.125rem; | |
| background: #16325c; | |
| color: white; } | |
| /** | |
| * @summary Direct child descendant item of the builder header | |
| * @selector .slds-builder-header__item | |
| * @restrict .slds-builder-header div, .slds-builder-header nav | |
| */ | |
| .slds-builder-header__item { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-line-pack: center; | |
| align-content: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| white-space: nowrap; } | |
| .slds-builder-header__item + .slds-builder-header__item { | |
| border-left: 1px solid currentColor; } | |
| /** | |
| * @summary Label inside of a header item | |
| * @selector .slds-builder-header__item-label | |
| * @restrict .slds-builder-header__item span, .slds-builder-header__item div, .slds-builder-header__item h1 | |
| */ | |
| .slds-builder-header__item-action, | |
| .slds-builder-header__item-label { | |
| color: currentColor; | |
| padding: 0 1rem; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-line-pack: center; | |
| align-content: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| min-width: 0%; | |
| height: 100%; } | |
| .slds-builder-header__item-action .slds-media__body, | |
| .slds-builder-header__item-label .slds-media__body { | |
| -ms-flex-preferred-size: auto; | |
| flex-basis: auto; } | |
| /** | |
| * @summary Action or label inside of a header item | |
| * @selector .slds-builder-header__item-action | |
| * @restrict .slds-builder-header__item a, .slds-builder-header__item button | |
| */ | |
| .slds-builder-header__item-action { | |
| transition: all 150ms linear; } | |
| .slds-builder-header__item-action:hover, .slds-builder-header__item-action:focus { | |
| color: #b0adab; | |
| text-decoration: none; } | |
| .slds-builder-header__item-action:focus { | |
| text-decoration: underline; | |
| box-shadow: none; | |
| outline: none; } | |
| /** | |
| * @summary Container around builder header's nav region | |
| * @selector .slds-builder-header__nav | |
| * @restrict .slds-builder-header nav | |
| */ | |
| .slds-builder-header__nav, | |
| .slds-builder-header__utilities { | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } | |
| /** | |
| * @summary List containing navigation items of a builder header | |
| * @selector .slds-builder-header__nav-list | |
| * @restrict .slds-builder-header__nav ul | |
| */ | |
| .slds-builder-header__nav-list { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| /** | |
| * @summary Container around builder header's utiltity region containing the back and help links | |
| * @selector .slds-builder-header__utilities | |
| * @restrict .slds-builder-header div | |
| */ | |
| .slds-builder-header__utilities { | |
| margin-left: auto; } | |
| /** | |
| * @summary Items of the builder headers nav | |
| * @selector .slds-builder-header__nav-item | |
| * @restrict .slds-builder-header__nav li | |
| */ | |
| .slds-builder-header__nav-item, | |
| .slds-builder-header__utilities-item { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-line-pack: center; | |
| align-content: center; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } | |
| .slds-builder-header__nav-item + .slds-builder-header__nav-item, | |
| .slds-builder-header__nav-item + .slds-builder-header__utilities-item, | |
| .slds-builder-header__utilities-item + .slds-builder-header__nav-item, | |
| .slds-builder-header__utilities-item + .slds-builder-header__utilities-item { | |
| border-left: 1px solid currentColor; } | |
| /** | |
| * @name toolbar | |
| * @summary Builder header toolbar | |
| * @selector .slds-builder-toolbar | |
| * @restrict .slds-builder-header_container div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-builder-toolbar { | |
| display: -ms-flexbox; | |
| display: flex; | |
| padding: 0.5rem 1rem; | |
| background: white; | |
| border-bottom: 1px solid #dddbda; } | |
| /** | |
| * @summary Region of Builder header toolbar that contains the document actions | |
| * @selector .slds-builder-toolbar__actions | |
| * @restrict .slds-builder-toolbar div | |
| */ | |
| .slds-builder-toolbar__actions { | |
| margin-left: auto; } | |
| /** | |
| * @summary Region containing button icon groups of Builder header toolbar | |
| * @selector .slds-builder-toolbar__item-group | |
| * @restrict .slds-builder-toolbar div | |
| */ | |
| .slds-builder-toolbar__item-group + .slds-builder-toolbar__item-group { | |
| margin-left: 0.25rem; } | |
| /** | |
| * @summary Initializes a publisher | |
| * | |
| * @name base | |
| * @selector .slds-publisher | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-publisher { | |
| display: -ms-flexbox; | |
| display: flex; | |
| /** | |
| * @selector .slds-is-active | |
| * @restrict .slds-publisher | |
| * @modifier | |
| */ | |
| /** | |
| * Abstraction of the text input styles | |
| * | |
| * @selector .slds-publisher__input | |
| * @restrict .slds-publisher textarea | |
| * @required | |
| */ | |
| /** | |
| * Bottom row of actionable items | |
| * | |
| * @selector .slds-publisher__actions | |
| * @restrict .slds-publisher div | |
| * @required | |
| */ | |
| /** | |
| * | |
| * | |
| * @selector .slds-publisher__toggle-visibility | |
| * @restrict .slds-publisher label, .slds-publisher ul | |
| * @required | |
| */ } | |
| .slds-publisher.slds-is-active { | |
| display: block; } | |
| .slds-publisher.slds-is-active .slds-publisher__toggle-visibility { | |
| display: inherit; | |
| height: auto; | |
| overflow: visible; | |
| width: auto; } | |
| .slds-publisher.slds-is-active .slds-publisher__input { | |
| line-height: 1.5; | |
| height: auto; | |
| max-height: 10rem; | |
| resize: vertical; | |
| padding-top: 0.75rem; | |
| padding-bottom: 0.75rem; } | |
| .slds-publisher__input { | |
| line-height: 1.875rem; | |
| padding: 0 1rem; | |
| resize: none; | |
| min-height: calc(1.875rem + 2px); | |
| max-height: calc(1.875rem + 2px); | |
| width: 100%; } | |
| .slds-publisher__actions > .slds-button { | |
| margin-left: 0.75rem; } | |
| .slds-publisher .slds-publisher__toggle-visibility { | |
| display: block; | |
| height: 0; | |
| overflow: hidden; | |
| width: 0; } | |
| /** | |
| * @summary Initiates publisher that is specific to commenting in threads | |
| * | |
| * @name comment | |
| * @selector .slds-publisher_comment | |
| * @restrict .slds-publisher | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-publisher_comment, | |
| .slds-publisher--comment { | |
| background-color: white; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| width: 100%; | |
| position: relative; | |
| min-height: calc(1.875rem + 2px); | |
| max-height: calc(1.875rem + 2px); | |
| /** | |
| * Applies focus to comment publisher container when inside `textarea` | |
| * | |
| * @selector .slds-has-focus | |
| * @restrict .slds-publisher_comment | |
| * @notes Added through JavaScript | |
| * @modifier | |
| */ } | |
| .slds-publisher_comment.slds-is-active, | |
| .slds-publisher--comment.slds-is-active { | |
| min-height: 6rem; | |
| max-height: 15rem; } | |
| .slds-publisher_comment.slds-is-active .slds-publisher__actions, | |
| .slds-publisher--comment.slds-is-active .slds-publisher__actions { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| .slds-publisher_comment.slds-has-focus, | |
| .slds-publisher--comment.slds-has-focus { | |
| outline: 0; | |
| border-color: #1589ee; | |
| background-color: white; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-publisher_comment .slds-publisher__actions, | |
| .slds-publisher--comment .slds-publisher__actions { | |
| display: none; | |
| padding: 0 0.75rem 0.75rem; } | |
| .slds-publisher_comment .slds-attachments, | |
| .slds-publisher--comment .slds-attachments { | |
| padding: 0.5rem 0.75rem; } | |
| /** | |
| * A discussion feed consists of a list of posts. A `.slds-feed__item` contains a post and comments related to that post. | |
| * | |
| * @name base | |
| * @selector .slds-feed | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-feed { | |
| position: relative; | |
| max-width: 49rem; | |
| margin: auto; | |
| /** | |
| * @selector .slds-feed__list | |
| * @restrict .slds-feed ul | |
| * @required | |
| */ | |
| /** | |
| * @selector .slds-feed__item | |
| * @restrict .slds-feed__list li | |
| * @required | |
| */ } | |
| .slds-feed__list { | |
| margin: 0; | |
| padding: 0; } | |
| .slds-feed__item { | |
| padding: 0.5rem 0; } | |
| @media (min-width: 48em) { | |
| .slds-feed__item { | |
| padding: 0.75rem 0; } } | |
| .slds-comment__replies { | |
| padding-top: 1rem; | |
| margin-left: 3.75rem; } | |
| .slds-comment__replies > :last-child, | |
| .slds-comment__replies > :last-child .slds-comment { | |
| padding-bottom: 0; } | |
| .slds-comment__replies > :last-child:before, | |
| .slds-comment__replies > :last-child .slds-comment:before { | |
| content: none; } | |
| .slds-comment__replies .slds-comment { | |
| margin-bottom: 0; | |
| padding-bottom: 1rem; | |
| position: relative; } | |
| .slds-comment__replies .slds-comment:before { | |
| content: ''; | |
| background: #dddbda; | |
| height: 100%; | |
| width: 1px; | |
| position: absolute; | |
| left: 1.125rem; | |
| top: 0; | |
| bottom: 0; | |
| margin-left: -1.125rem; | |
| z-index: -1; } | |
| .slds-comment__replies .slds-avatar { | |
| border: 2px solid white; } | |
| .slds-tags { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| .slds-tags__list { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| .slds-tags__item { | |
| margin-left: 0.25rem; } | |
| .slds-tags__item:after { | |
| content: ', '; } | |
| .slds-tags__item:last-child:after { | |
| content: none; } | |
| .slds-attachments { | |
| padding-bottom: 0.5rem; } | |
| .slds-attachments:empty { | |
| padding: 0; } | |
| .slds-attachments__item + .slds-attachments__item { | |
| margin-top: 1rem; } | |
| .slds-comment__content { | |
| padding: 0.25rem 0; } | |
| /** | |
| * Container for feed item comments | |
| * | |
| * @selector .slds-feed__item-comments | |
| * @restrict .slds-feed__item div | |
| * @notes Contains comment replies and publisher | |
| */ | |
| .slds-feed__item-comments { | |
| background: #f3f2f2; | |
| border-top: 1px solid #dddbda; | |
| border-bottom: 1px solid #dddbda; } | |
| .slds-feed__item-comments .slds-comment { | |
| padding: 0.5rem 1rem; } | |
| /** | |
| * @name post | |
| * @selector .slds-post | |
| * @restrict .slds-feed article | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-post { | |
| background: white; | |
| padding: 0.75rem 1rem; | |
| /** | |
| * Header region of a feed post | |
| * | |
| * @selector .slds-post__header | |
| * @restrict .slds-post header | |
| */ | |
| /** | |
| * Content region of a feed post | |
| * | |
| * @selector .slds-post__content | |
| * @restrict .slds-post div | |
| */ | |
| /** | |
| * Footer region of a feed post | |
| * | |
| * @selector .slds-post__footer | |
| * @restrict .slds-post footer | |
| */ } | |
| @media (max-width: 48em) { | |
| .slds-post { | |
| border-top: 1px solid #dddbda; } } | |
| @media (min-width: 64em) { | |
| .slds-post { | |
| padding: 0 1rem 0.5rem; } } | |
| .slds-post__header { | |
| margin-bottom: 0.75rem; } | |
| .slds-post__content { | |
| margin-bottom: 0.75rem; } | |
| @media (min-width: 48em) { | |
| .slds-post__content { | |
| margin-bottom: 1.5rem; } } | |
| .slds-post__footer { | |
| display: -ms-flexbox; | |
| display: flex; | |
| font-size: 0.75rem; | |
| -ms-flex-direction: column; | |
| flex-direction: column; } | |
| @media (min-width: 48em) { | |
| .slds-post__footer { | |
| -ms-flex-direction: row; | |
| flex-direction: row; } } | |
| /** | |
| * Footer region that contains quick action items for post | |
| * | |
| * @selector .slds-post__footer-actions-list | |
| * @restrict .slds-post__footer ul | |
| */ | |
| .slds-post__footer-actions-list { | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| text-align: center; | |
| -ms-flex-order: 1; | |
| order: 1; } | |
| @media (max-width: 30em) { | |
| .slds-post__footer-actions-list { | |
| border-top: 1px solid #dddbda; | |
| margin: 0 -0.75rem -0.75rem; | |
| padding: 0 1rem; } } | |
| @media (min-width: 48em) { | |
| .slds-post__footer-actions-list { | |
| -ms-flex-order: 0; | |
| order: 0; } } | |
| /** | |
| * Action items within the feed post footer | |
| * | |
| * @selector .slds-post__footer-action | |
| * @restrict .slds-post__footer-actions-list button | |
| */ | |
| .slds-post__footer-action { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| color: #080707; | |
| padding: 0.75rem 0; | |
| line-height: 1; | |
| /** | |
| * Active state for like button | |
| * | |
| * @selector .slds-is-active | |
| * @restrict .slds-post__footer-action | |
| * @modifier | |
| */ } | |
| @media (min-width: 48em) { | |
| .slds-post__footer-action { | |
| margin-right: 1rem; | |
| padding: 0; } } | |
| .slds-post__footer-action .slds-icon { | |
| margin-right: 0.25rem; } | |
| .slds-post__footer-action:hover, .slds-post__footer-action:focus, .slds-post__footer-action.slds-is-active { | |
| color: #005fb2; | |
| text-decoration: none; } | |
| .slds-post__footer-action:hover .slds-icon, .slds-post__footer-action:focus .slds-icon, .slds-post__footer-action.slds-is-active .slds-icon { | |
| fill: currentColor; } | |
| /** | |
| * Footer region that contains read only items for post | |
| * | |
| * @selector .slds-post__footer-meta-list | |
| * @restrict .slds-post__footer ul | |
| */ | |
| .slds-post__footer-meta-list { | |
| margin-bottom: 1rem; } | |
| @media (min-width: 48em) { | |
| .slds-post__footer-meta-list { | |
| margin-left: auto; | |
| margin-bottom: 0; } } | |
| .slds-region_narrow .slds-post, | |
| .slds-region--narrow .slds-post { | |
| border: 0; | |
| padding: 0.75rem 1rem; } | |
| .slds-region_narrow .slds-post__content, | |
| .slds-region--narrow .slds-post__content { | |
| margin-bottom: 0.75rem; } | |
| .slds-region_narrow .slds-post__footer, | |
| .slds-region--narrow .slds-post__footer { | |
| -ms-flex-direction: column; | |
| flex-direction: column; } | |
| .slds-region_narrow .slds-post__footer-action, | |
| .slds-region--narrow .slds-post__footer-action { | |
| padding: 0.75rem 0; } | |
| .slds-region_narrow .slds-post__footer-actions-list, | |
| .slds-region--narrow .slds-post__footer-actions-list { | |
| -ms-flex-order: 1; | |
| order: 1; | |
| border-top: 1px solid #dddbda; | |
| margin: 0 -0.75rem -0.75rem; | |
| padding: 0 1rem; } | |
| .slds-region_narrow .slds-post__footer-meta-list, | |
| .slds-region--narrow .slds-post__footer-meta-list { | |
| margin-left: 0; | |
| margin-bottom: 1rem; } | |
| .slds-post__payload { | |
| padding: 0 0 1rem; } | |
| .slds-post__payload:empty { | |
| padding: 0; | |
| border: 0; } | |
| /** | |
| * @name base | |
| * @selector .slds-modal | |
| * @restrict section | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-modal { | |
| opacity: 0; | |
| visibility: hidden; | |
| transition: transform 0.1s linear, opacity 0.1s linear; | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 9001; | |
| /** | |
| * Centers and sizes the modal horizontally and confines modal within viewport height | |
| * | |
| * @selector .slds-modal__container | |
| * @restrict .slds-modal div | |
| * @notes This should be nested immediately inside `.slds-modal` with nothing else nested on the same level. | |
| * @required | |
| */ | |
| /** | |
| * Creates the Modal Header container. | |
| * | |
| * @selector .slds-modal__header | |
| * @restrict .slds-modal header | |
| * @notes This should be nested immediately inside `.slds-modal__container` as the first element. | |
| * @required | |
| */ | |
| /** | |
| * Use when modal header has no content | |
| * | |
| * @selector .slds-modal__header_empty | |
| * @restrict .slds-modal__header | |
| */ | |
| /** | |
| * Modal title (optional) | |
| * | |
| * @selector .slds-modal__title | |
| * @restrict .slds-modal__header h2 | |
| */ | |
| /** | |
| * Creates the scrollable content area for the modal. | |
| * | |
| * @selector .slds-modal__content | |
| * @restrict .slds-modal div | |
| * @required | |
| */ | |
| /** | |
| * Creates the shaded menu area for the modal. | |
| * | |
| * @selector .slds-modal__menu | |
| * @restrict .slds-modal div | |
| * @notes Either `.slds-modal__menu` or `.slds-modal__content` must be used. If you’re using this class, you do not need the other. This should be nested immediately inside `.slds-modal_container` and immediately after `.slds-modal__header`. | |
| * @required | |
| */ | |
| /** | |
| * Creates the Modal Footer container. | |
| * | |
| * @selector .slds-modal__footer | |
| * @restrict .slds-modal footer | |
| * @notes This should be nested immediately inside `.slds-modal_container` and immediately after `.slds-modal__container`. Nothing should follow it. Note that by default, elements will be aligned to the right. | |
| * @required | |
| */ | |
| /** | |
| * Positions the close button to the top right outside of the modal. | |
| * | |
| * @selector .slds-modal__close | |
| * @restrict .slds-modal button | |
| * @notes Either `.slds-modal__content` or `.slds-modal__menu` must be used. If you’re using this class, you do not need the other. This should be nested immediately inside `.slds-modal_container` and immediately after `.slds-modal__header`. | |
| * @required | |
| */ } | |
| .slds-modal__container { | |
| position: relative; | |
| transform: translate(0, 0); | |
| transition: transform 0.1s linear, opacity 0.1s linear; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| margin: 0 2rem; | |
| height: 100%; | |
| padding: 3rem 0; | |
| border-radius: 0.25rem; } | |
| @media (min-width: 48em) { | |
| .slds-modal__container { | |
| margin: 0 auto; | |
| width: 50%; | |
| max-width: 40rem; | |
| min-width: 20rem; } } | |
| .slds-modal__header, .slds-modal__content { | |
| background: white; } | |
| .slds-modal__header, .slds-modal__footer { | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; } | |
| .slds-modal__header { | |
| position: relative; | |
| border-top-right-radius: 0.25rem; | |
| border-top-left-radius: 0.25rem; | |
| border-bottom: 2px solid #dddbda; | |
| padding: 1rem; | |
| text-align: center; } | |
| .slds-modal__header + .slds-modal__menu { | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; } | |
| .slds-modal__header_empty, .slds-modal__header--empty { | |
| padding: 0; | |
| border-bottom: 0; } | |
| .slds-modal__header_empty + .slds-modal__content, | |
| .slds-modal__header--empty + .slds-modal__content { | |
| border-top-right-radius: 0.25rem; | |
| border-top-left-radius: 0.25rem; } | |
| .slds-modal .slds-modal__title { | |
| font-weight: 300; | |
| font-size: 1.25rem; | |
| line-height: 1.25; } | |
| .slds-is-mobile .slds-modal .slds-modal__title { | |
| font-weight: 700; } | |
| .slds-modal__content { | |
| overflow: hidden; | |
| overflow-y: auto; } | |
| .slds-modal__content:last-child { | |
| border-bottom-right-radius: 0.25rem; | |
| border-bottom-left-radius: 0.25rem; | |
| box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); } | |
| .slds-modal__menu { | |
| position: relative; | |
| border-radius: 0.25rem; | |
| padding: 1rem; | |
| background-color: #f3f2f2; } | |
| @media (max-width: 48em) { | |
| .slds-modal__menu .slds-button { | |
| width: 100%; | |
| margin: 0.125rem 0; } } | |
| .slds-modal__footer { | |
| border-top: 2px solid #dddbda; | |
| border-bottom-right-radius: 0.25rem; | |
| border-bottom-left-radius: 0.25rem; | |
| padding: 0.75rem 1rem; | |
| background-color: #f3f2f2; | |
| text-align: right; | |
| box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); | |
| /** | |
| * Makes buttons inside the footer spread to both left and right. | |
| * | |
| * @selector .slds-modal__footer_directional | |
| * @restrict .slds-modal__footer | |
| * @notes This is only needed when you have two buttons that indicate a back and forward navigation. | |
| * @modifier | |
| * @group direction | |
| */ } | |
| .slds-modal__footer_directional .slds-button:first-child, | |
| .slds-modal__footer--directional .slds-button:first-child { | |
| float: left; } | |
| .slds-modal__footer .slds-button + .slds-button { | |
| margin-left: 0.5rem; } | |
| .slds-modal__close { | |
| width: 2rem; | |
| height: 2rem; | |
| position: absolute; | |
| top: -2.5rem; | |
| right: -0.5rem; } | |
| .slds-is-mobile .slds-modal__close { | |
| width: 2.75rem; | |
| height: 2.75rem; | |
| top: -2.75rem; | |
| right: 0; } | |
| /** | |
| * @summary Widens the modal to take more horizontal space than default | |
| * @name small | |
| * @selector .slds-modal_small | |
| * @restrict .slds-modal | |
| * @modifier | |
| * @group size | |
| */ | |
| @media (min-width: 48em) { | |
| .slds-modal_small .slds-modal__container { | |
| width: 60%; | |
| max-width: 52.0625rem; | |
| min-width: 40rem; } } | |
| /** | |
| * @summary Widens the modal to take more horizontal space than small | |
| * @name medium | |
| * @selector .slds-modal_medium | |
| * @restrict .slds-modal | |
| * @modifier | |
| * @group size | |
| */ | |
| @media (min-width: 48em) { | |
| .slds-modal_medium .slds-modal__container { | |
| width: 70%; | |
| max-width: 75rem; | |
| min-width: 40rem; } } | |
| /** | |
| * @summary Widens the modal to take more horizontal space than large | |
| * @name large | |
| * @selector .slds-modal_large | |
| * @restrict .slds-modal | |
| * @modifier | |
| * @group size | |
| */ | |
| @media (min-width: 48em) { | |
| .slds-modal_large .slds-modal__container, | |
| .slds-modal--large .slds-modal__container { | |
| width: 90%; | |
| max-width: none; | |
| min-width: 40rem; } } | |
| /** | |
| * Creates the shaded backdrop used behind the modal. | |
| * | |
| * @selector .slds-backdrop | |
| * @restrict .slds-modal ~ div | |
| * @notes This should follow after the `.slds-modal` as an empty element. | |
| * @required | |
| */ | |
| .slds-backdrop { | |
| transition-duration: 0.4s; | |
| width: 100%; | |
| height: 100%; | |
| opacity: 0; | |
| visibility: hidden; | |
| position: fixed; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| background: rgba(8, 7, 7, 0.6); | |
| z-index: 9000; | |
| /** | |
| * Allows the backdrop to be visible. | |
| * | |
| * @selector .slds-backdrop_open | |
| * @restrict .slds-backdrop | |
| * @notes Apply this class to a modal backdrop with JavaScript to make it visible. | |
| * @modifier | |
| * @required | |
| */ } | |
| .slds-backdrop_open, .slds-backdrop--open { | |
| visibility: visible; | |
| opacity: 1; | |
| transition: opacity 0.4s linear; } | |
| /** | |
| * Allows the modal to be visible. | |
| * | |
| * @selector .slds-fade-in-open | |
| * @restrict .slds-modal | |
| * @notes Apply this class to a modal with JavaScript to make it visible. | |
| * @modifier | |
| * @group animation | |
| */ | |
| .slds-fade-in-open { | |
| opacity: 1; | |
| visibility: visible; | |
| transition: opacity 0.1s linear; } | |
| .slds-fade-in-open .slds-modal__container-reset { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translate(0, 0); } | |
| /** | |
| * | |
| * | |
| * @selector .slds-slide-up-open | |
| * @restrict .slds-modal | |
| * @modifier | |
| * @group animation | |
| */ | |
| .slds-slide-up-open { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translate(0, 0); | |
| transition: opacity 0.1s linear, transform 0.2s linear; } | |
| .slds-slide-up-open .slds-modal__container-reset { | |
| opacity: 0; | |
| visibility: hidden; | |
| transform: translate(0, 1rem); | |
| transition: opacity 0.2s linear, transform 0.2s linear; } | |
| /** | |
| * | |
| * | |
| * @selector .slds-slide-up-saving | |
| * @restrict .slds-modal | |
| * @modifier | |
| * @group animation | |
| */ | |
| .slds-slide-up-saving { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translate(0, -1rem); } | |
| /** | |
| * | |
| * | |
| * @selector .slds-slide-down-cancel | |
| * @restrict .slds-modal | |
| * @modifier | |
| * @group animation | |
| */ | |
| .slds-slide-down-cancel { | |
| opacity: 1; | |
| visibility: visible; | |
| transform: translate(0, 1rem); } | |
| /** | |
| * @summary Map container | |
| * @name base | |
| * @selector .slds-map_container | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-map_container { | |
| -ms-flex: 3 1 auto; | |
| flex: 3 1 auto; } | |
| .slds-is-mobile .slds-map_container { | |
| padding: 1rem 1rem 0; } | |
| /** | |
| * @summary 3rd party map element found inside of the map container | |
| * @selector .slds-map | |
| * @restrict .slds-map_container div | |
| */ | |
| .slds-map { | |
| position: relative; | |
| min-width: 23.75rem; | |
| width: 100%; | |
| max-height: 100%; } | |
| .slds-is-mobile .slds-map { | |
| min-width: 21.75rem; } | |
| .slds-map:before { | |
| content: ''; | |
| display: block; | |
| height: 0; | |
| width: 100%; | |
| padding-top: 56.25%; } | |
| .slds-map iframe { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 100%; | |
| width: 100%; | |
| border: 0; } | |
| /** | |
| * @summary Modifier that informs the parent grid container the coordinates panel is active | |
| * @selector .slds-has-coordinates | |
| */ | |
| .slds-has-coordinates { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| overflow: auto; | |
| max-height: 41.25rem; | |
| background: white; } | |
| .slds-is-mobile .slds-has-coordinates { | |
| max-height: none; } | |
| .slds-has-coordinates .slds-map:before { | |
| padding-top: 75%; } | |
| /** | |
| * @summary Element inside the coordinates panel that contains the title of the panel | |
| * @selector .slds-coordinates | |
| * @restrict .slds-has-coordinates div | |
| */ | |
| .slds-coordinates { | |
| overflow: auto; | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; } | |
| /** | |
| * @summary Element inside the coordinates panel that contains the title of the panel | |
| * @selector .slds-coordinates__header | |
| * @restrict .slds-coordinates div | |
| */ | |
| .slds-coordinates__header { | |
| padding: 1rem; } | |
| /** | |
| * @summary Title inside the coordinates panel | |
| * @selector .slds-coordinates__title | |
| * @restrict .slds-coordinates h2 | |
| */ | |
| .slds-coordinates__title { | |
| font-size: 1rem; | |
| font-weight: 700; } | |
| .slds-is-mobile .slds-coordinates__title { | |
| font-size: 1.125rem; } | |
| /** | |
| * @summary Actionable items inside of the coordinates list | |
| * @selector .slds-coordinates__item-action | |
| * @restrict .slds-coordinates li button | |
| */ | |
| .slds-coordinates__item-action { | |
| padding: 0.5rem 1rem; | |
| width: 100%; } | |
| .slds-coordinates__item-action .slds-text-link { | |
| display: block; } | |
| .slds-coordinates__item-action:hover, .slds-coordinates__item-action:focus { | |
| background-color: #f3f2f2; | |
| outline: 0; } | |
| .slds-coordinates__item-action:hover .slds-text-link, .slds-coordinates__item-action:focus .slds-text-link { | |
| text-decoration: underline; } | |
| .slds-coordinates__item-action:active { | |
| background-color: #ecebea; } | |
| .slds-coordinates__item-action[aria-pressed="true"] { | |
| background-color: #ecebea; } | |
| .slds-coordinates__item-action[aria-pressed="true"] .slds-text-link { | |
| color: #00396b; } | |
| /** | |
| * @summary Sets styles to search box, things like width and such | |
| * @selector .slds-app-launcher__header-search | |
| * @restrict .slds-app-launcher div | |
| * @deprecated | |
| */ | |
| .slds-app-launcher__header-search { | |
| -ms-flex: 0 1 25rem; | |
| flex: 0 1 25rem; | |
| padding: 0 1rem; } | |
| /** | |
| * @summary Defines the body region of the app launcher modal | |
| * @selector .slds-app-launcher__content | |
| * @restrict .slds-app-launcher div | |
| * @deprecated | |
| */ | |
| .slds-app-launcher__content { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; } | |
| .slds-app-launcher__content .slds-section__title-action { | |
| background: transparent; } | |
| /** | |
| * @summary Tile card that containes the just app icon and title | |
| * @selector .slds-app-launcher__tile_small | |
| * @restrict .slds-app-launcher__tile | |
| * @deprecated | |
| */ | |
| .slds-app-launcher__tile_small, | |
| .slds-app-launcher__tile--small { | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| border: 0; | |
| border-radius: 0; | |
| text-align: center; | |
| cursor: pointer; } | |
| .slds-app-launcher__tile_small:hover .slds-app-launcher__tile-figure_small, | |
| .slds-app-launcher__tile_small:hover .slds-app-launcher__tile-figure--small, .slds-app-launcher__tile_small:focus .slds-app-launcher__tile-figure_small, | |
| .slds-app-launcher__tile_small:focus .slds-app-launcher__tile-figure--small, | |
| .slds-app-launcher__tile--small:hover .slds-app-launcher__tile-figure_small, | |
| .slds-app-launcher__tile--small:hover .slds-app-launcher__tile-figure--small, | |
| .slds-app-launcher__tile--small:focus .slds-app-launcher__tile-figure_small, | |
| .slds-app-launcher__tile--small:focus .slds-app-launcher__tile-figure--small { | |
| border-color: #1589ee; } | |
| /** | |
| * @summary App image or icon of a small tile | |
| * @selector .slds-app-launcher__tile-figure_small | |
| * @restrict .slds-app-launcher__tile-figure | |
| * @deprecated | |
| */ | |
| .slds-app-launcher__tile-figure_small, | |
| .slds-app-launcher__tile-figure--small { | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; } | |
| /** | |
| * @summary App title, no description | |
| * @selector .slds-app-launcher__tile-body_small | |
| * @restrict .slds-app-launcher__tile-body | |
| * @deprecated | |
| */ | |
| .slds-app-launcher__tile-body_small, | |
| .slds-app-launcher__tile-body--small { | |
| background: transparent; | |
| padding: 0.5rem 0; | |
| border: 0; | |
| border-radius: 0; } | |
| /** | |
| * @name base | |
| * @summary Tile cards that contains the app information, the icon and description | |
| * @selector .slds-app-launcher__tile | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-app-launcher__tile { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; | |
| margin: 0.5rem 0; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| cursor: move; | |
| /** | |
| * @summary Add styles associated with drag and drop of a tile | |
| * @selector .slds-is-draggable | |
| * @restrict .slds-app-launcher__tile | |
| */ | |
| /** | |
| * @name grabbed | |
| * @summary Add styles associated with a tile being grabbed in drag and drop interaction | |
| * @selector .slds-is-grabbed | |
| * @restrict .slds-app-launcher__tile | |
| * @modifier | |
| * @group interactions | |
| */ } | |
| .slds-app-launcher__tile:hover, .slds-app-launcher__tile:focus, .slds-app-launcher__tile:active { | |
| outline: 0; | |
| border-color: #005fb2; } | |
| .slds-app-launcher__tile.slds-is-draggable .slds-app-launcher__tile-figure { | |
| padding-bottom: 0.25rem; } | |
| .slds-app-launcher__tile.slds-is-grabbed { | |
| transform: rotate(3deg); } | |
| /** | |
| * @summary App image or icon | |
| * @selector .slds-app-launcher__tile-figure | |
| * @restrict .slds-app-launcher__tile div | |
| */ | |
| .slds-app-launcher__tile-figure { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| padding: 0.75rem; | |
| color: white; | |
| border-radius: 0.25rem 0 0 0.25rem; | |
| text-align: center; } | |
| /** | |
| * @summary App title and description | |
| * @selector .slds-app-launcher__tile-body | |
| * @restrict .slds-app-launcher__tile div | |
| */ | |
| .slds-app-launcher__tile-body { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| background: #f3f2f2; | |
| padding: 0.5rem 0.75rem; | |
| border-radius: 0 0.25rem 0.25rem 0; } | |
| /** | |
| * @summary Initializes a visual picker component | |
| * | |
| * @name coverable-content | |
| * @selector .slds-visual-picker | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-visual-picker { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| position: relative; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| border: 0; | |
| border-radius: 0; | |
| text-align: center; | |
| cursor: pointer; } | |
| .slds-visual-picker + .slds-visual-picker { | |
| margin-left: 1rem; } | |
| .slds-visual-picker:active .slds-visual-picker__figure { | |
| border: 1px solid #1589ee; | |
| box-shadow: 0 0 0 1px #1589ee inset; } | |
| .slds-visual-picker:hover .slds-visual-picker__figure { | |
| cursor: pointer; } | |
| .slds-visual-picker input:not(:disabled) ~ label:hover .slds-visual-picker__figure { | |
| cursor: pointer; | |
| outline: 0; | |
| border: 1px solid #1589ee; | |
| box-shadow: 0 0 0 1px #1589ee inset; } | |
| .slds-visual-picker input { | |
| width: 1px; | |
| height: 1px; | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; | |
| /** | |
| * @name not-selected | |
| * @summary Non-selected state | |
| * @selector .slds-is-not-selected | |
| * @restrict .slds-visual-picker__figure > span | |
| * @modifer | |
| * @group interactions | |
| */ | |
| /** | |
| * @name selected | |
| * @summary Selected state | |
| * @selector .slds-is-selected | |
| * @restrict .slds-visual-picker__figure > span | |
| * @modifer | |
| * @group interactions | |
| */ | |
| /** | |
| * @summary Icon within visual picker | |
| * @selector .slds-visual-picker__icon | |
| * @restrict .slds-visual-picker__figure | |
| */ | |
| /** | |
| * @summary Text within visual picker | |
| * @selector .slds-visual-picker__text | |
| * @restrict .slds-visual-picker__figure | |
| */ | |
| /* stylelint-disable max-nesting-depth */ } | |
| .slds-visual-picker input:focus ~ label .slds-visual-picker__figure { | |
| border: 1px solid #1589ee; | |
| box-shadow: 0 0 0 1px #1589ee inset; } | |
| .slds-visual-picker input:checked ~ label .slds-visual-picker__figure { | |
| box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16); } | |
| .slds-visual-picker input:focus ~ label .slds-visual-picker__body > *:first-child { | |
| text-decoration: underline; } | |
| .slds-visual-picker input:checked ~ label .slds-is-not-selected { | |
| display: none; } | |
| .slds-visual-picker input:checked ~ label .slds-is-selected { | |
| display: block; } | |
| .slds-visual-picker input:checked ~ label .slds-visual-picker__icon { | |
| background-color: #1589ee; | |
| border: 1px solid #1589ee; } | |
| .slds-visual-picker input:checked ~ label .slds-visual-picker__text { | |
| border: 1px solid #1589ee; | |
| box-shadow: 0 0 0 1px #1589ee inset; } | |
| .slds-visual-picker input:checked ~ label .slds-visual-picker__text:after { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| border-color: transparent; | |
| border-style: solid; | |
| border-radius: 0.5rem; | |
| border-width: 1rem; | |
| border-right-color: #1589ee; | |
| border-top-color: #1589ee; } | |
| .slds-visual-picker input[disabled] { | |
| cursor: not-allowed; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; } | |
| .slds-visual-picker input[disabled] ~ label .slds-visual-picker__body, | |
| .slds-visual-picker input[disabled] ~ label .slds-visual-picker__text { | |
| color: #3e3e3c; } | |
| .slds-visual-picker input[disabled] ~ label .slds-visual-picker__figure { | |
| border-color: #c9c7c5; | |
| background-color: #ecebea; | |
| box-shadow: none; } | |
| .slds-visual-picker input[disabled] ~ label .slds-visual-picker__figure:hover { | |
| cursor: not-allowed; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; | |
| box-shadow: none; } | |
| /** | |
| * @summary Visual container for icon and text | |
| * @selector .slds-visual-picker__figure | |
| * @restrict .slds-visual-picker div, .slds-visual-picker span | |
| */ | |
| .slds-visual-picker__figure { | |
| display: block; | |
| background: white; | |
| box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| text-align: center; } | |
| .slds-visual-picker__figure .slds-icon-action-check { | |
| background-color: #1589ee; } | |
| .slds-visual-picker__figure span { | |
| display: block; } | |
| .slds-visual-picker__figure .slds-is-selected { | |
| display: none; } | |
| /** | |
| * @name medium | |
| * @summary Size modifier to adjust to the default size of medium | |
| * @selector .slds-visual-picker_medium | |
| * @restrict .slds-visual-picker | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-visual-picker_medium .slds-visual-picker__figure, | |
| .slds-visual-picker_medium .slds-visual-picker__body { | |
| width: 12rem; } | |
| .slds-visual-picker_medium .slds-visual-picker__figure { | |
| height: 12rem; } | |
| /** | |
| * @name large | |
| * @summary Size modifier to adjust to the size of large | |
| * @selector .slds-visual-picker_large | |
| * @restrict .slds-visual-picker | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-visual-picker_large .slds-visual-picker__figure, | |
| .slds-visual-picker_large .slds-visual-picker__body { | |
| width: 15rem; } | |
| .slds-visual-picker_large .slds-visual-picker__figure { | |
| height: 15rem; } | |
| /** | |
| * @summary Text area that sits outside the visual picker | |
| * @selector .slds-visual-picker__body | |
| * @restrict .slds-visual-picker span | |
| */ | |
| .slds-visual-picker__body { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| background: transparent; | |
| padding: 1rem 0.5rem; | |
| border: 0; | |
| border-radius: 0; } | |
| /** | |
| * @summary Checkmark that is visibily toggled when input is checked | |
| * | |
| * @name non-coverable-content | |
| * @selector .slds-visual-picker__text-check | |
| * @restrict .slds-visual-picker span | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-visual-picker__text-check { | |
| position: absolute; | |
| top: -0.062rem; | |
| right: 0.625rem; | |
| width: 0.5rem; | |
| height: 0.5rem; } | |
| .slds-visual-picker input[disabled] ~ label .slds-visual-picker__text-check { | |
| opacity: 0; } | |
| /** | |
| * @summary Initializes a vertical visual picker component | |
| * | |
| * @name vertical | |
| * @selector .slds-visual-picker_vertical | |
| * @restrict .slds-visual-picker | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-visual-picker_vertical { | |
| width: 25rem; | |
| display: -ms-flexbox; | |
| display: flex; } | |
| .slds-visual-picker_vertical .slds-visual-picker__figure { | |
| text-align: left; | |
| padding: 1rem; | |
| height: 6rem; } | |
| .slds-visual-picker_vertical + .slds-visual-picker_vertical { | |
| margin-left: 0; | |
| margin-top: 1rem; } | |
| .slds-visual-picker_vertical .slds-visual-picker__figure, | |
| .slds-visual-picker_vertical .slds-visual-picker__body { | |
| width: 25rem; } | |
| .slds-visual-picker_vertical input:focus ~ label .slds-visual-picker__text .slds-text-heading_medium { | |
| text-decoration: underline; } | |
| /** | |
| * @summary Initializes pill | |
| * | |
| * @name base | |
| * @selector .slds-pill | |
| * @restrict span | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-pill { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| line-height: 1.5; | |
| max-width: 100%; | |
| padding: 0.125rem; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| background-color: white; | |
| position: relative; | |
| min-height: 1.625rem; | |
| /** | |
| * Modifier that removes border and background from a pill | |
| * | |
| * @selector .slds-pill_bare | |
| * @restrict .slds-pill | |
| * @modifier | |
| */ | |
| /** | |
| * Container to hold pill(s) with borders | |
| * | |
| * @selector .slds-pill_container | |
| * @restrict div | |
| */ | |
| /** | |
| * Container to hold pill(s) with no borders | |
| * | |
| * @selector .slds-pill_container_bare | |
| * @restrict .slds-pill_container | |
| * @modifier | |
| * @deprecated | |
| */ | |
| /** | |
| * Line of text inside a pill | |
| * | |
| * @selector .slds-pill__label | |
| * @restrict .slds-pill a, .slds-pill span | |
| */ | |
| /** | |
| * Initializes pill icon or avatar that sits to the left of the label | |
| * | |
| * @selector .slds-pill__icon_container | |
| * @restrict .slds-pill span | |
| */ | |
| /** | |
| * Initializes remove icon in pill that sits to the right of the label | |
| * | |
| * @selector .slds-pill__remove | |
| * @restrict .slds-pill button, .slds-pill span | |
| */ } | |
| .slds-is-mobile .slds-pill { | |
| line-height: calc(2rem - 0.125rem); | |
| padding: 0 0.75rem; } | |
| .slds-pill + .slds-pill { | |
| margin-left: 0.125rem; } | |
| .slds-is-mobile .slds-pill + .slds-pill { | |
| margin-left: 0.25rem; } | |
| .slds-pill:hover { | |
| background-color: #f4f6f9; } | |
| .slds-pill:focus { | |
| outline: 0; | |
| border-radius: 0.25rem; | |
| border-color: #1589ee; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-pill a { | |
| text-decoration: none; } | |
| .slds-pill_bare, .slds-pill--bare { | |
| background-color: transparent; | |
| border: 0; } | |
| .slds-pill_bare:hover, .slds-pill--bare:hover { | |
| background-color: transparent; } | |
| .slds-pill__container, .slds-pill-container, .slds-pill_container { | |
| display: -ms-flexbox; | |
| display: flex; | |
| min-height: calc(1.875rem + 2px); | |
| padding: 0.125rem; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| background-color: white; } | |
| .slds-is-mobile .slds-pill__container, .slds-is-mobile .slds-pill-container, .slds-is-mobile .slds-pill_container { | |
| padding: 0.25rem; } | |
| .slds-pill__container .slds-listbox_inline, .slds-pill-container .slds-listbox_inline, .slds-pill_container .slds-listbox_inline { | |
| margin-left: 0; | |
| margin-right: 0; } | |
| .slds-pill__container_bare, .slds-pill__container--bare, .slds-pill_container_bare, .slds-pill_container--bare { | |
| display: -ms-flexbox; | |
| display: flex; | |
| padding: 0.125rem; | |
| border: 0; | |
| border-radius: 0; | |
| background-color: transparent; } | |
| .slds-pill__label { | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; } | |
| .slds-is-mobile .slds-pill__label { | |
| font-size: 0.875rem; } | |
| .slds-pill__label:focus { | |
| outline: 0; | |
| border-radius: 0.25rem; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-pill__icon, .slds-pill__icon_container { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| margin-right: 0.25rem; } | |
| .slds-pill__icon .slds-icon, | |
| .slds-pill__icon .slds-avatar, .slds-pill__icon_container .slds-icon, | |
| .slds-pill__icon_container .slds-avatar { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| display: block; | |
| font-size: 0.625rem; } | |
| .slds-pill__icon ~ .slds-pill__action, .slds-pill__icon_container ~ .slds-pill__action { | |
| padding-left: calc(1.25rem + 0.25rem + 2px); } | |
| .slds-is-mobile .slds-pill__icon ~ .slds-pill__action, .slds-is-mobile .slds-pill__icon_container ~ .slds-pill__action { | |
| padding-left: calc(1.25rem + 0.75rem + 0.25rem); } | |
| .slds-pill__remove { | |
| width: 1rem; | |
| height: 1rem; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| margin-left: 0.25rem; | |
| border-radius: 0.125rem; } | |
| .slds-pill__remove svg { | |
| width: 0.875rem; | |
| height: 0.875rem; } | |
| /** | |
| * Creates a pill with a hyperlink | |
| * | |
| * @selector .slds-pill_link | |
| * @restrict .slds-pill | |
| */ | |
| .slds-pill_link, | |
| .slds-pill--link { | |
| border: 0; | |
| padding: 0; } | |
| .slds-pill_link .slds-pill__icon_container, | |
| .slds-pill--link .slds-pill__icon_container { | |
| display: inline-block; | |
| position: absolute; | |
| top: 50%; | |
| left: 0.125rem; | |
| transform: translateY(-50%); } | |
| .slds-is-mobile .slds-pill_link .slds-pill__icon_container, .slds-is-mobile | |
| .slds-pill--link .slds-pill__icon_container { | |
| left: 0.75rem; } | |
| .slds-pill_link .slds-pill__remove, | |
| .slds-pill--link .slds-pill__remove { | |
| position: absolute; | |
| top: 50%; | |
| right: 0.125rem; | |
| transform: translateY(-50%); } | |
| .slds-is-mobile .slds-pill_link .slds-pill__remove, .slds-is-mobile | |
| .slds-pill--link .slds-pill__remove { | |
| right: 0.75rem; } | |
| /** | |
| * Actionable element inside of pill with hyperlink | |
| * | |
| * @selector .slds-pill__action | |
| * @restrict .slds-pill_link a | |
| */ | |
| .slds-pill__action { | |
| padding: 0.125rem; | |
| padding-right: calc(1rem + 0.25rem + 2px); | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; } | |
| .slds-is-mobile .slds-pill__action { | |
| padding: 0; | |
| padding-left: 0.75rem; | |
| padding-right: calc(1rem + 0.75rem + 2px); } | |
| .slds-pill__action:focus { | |
| outline: 0; | |
| border-color: #1589ee; | |
| box-shadow: 0 0 3px #0070D2; } | |
| /** | |
| * Pill error styles | |
| * | |
| * @selector .slds-has-error | |
| * @restrict .slds-pill | |
| * @modifier | |
| */ | |
| .slds-has-error { | |
| border-color: #c23934; } | |
| .slds-has-error .slds-pill__label { | |
| font-weight: 700; | |
| color: #c23934; } | |
| .slds-has-error .slds-pill__action { | |
| border-color: #c23934; } | |
| .slds-wizard { | |
| position: relative; } | |
| .slds-wizard__list { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| position: relative; | |
| margin: auto; } | |
| .slds-wizard__item { | |
| -ms-flex: 2 0 auto; | |
| flex: 2 0 auto; | |
| text-align: center; | |
| width: 0%; | |
| -webkit-user-select: none; | |
| -moz-user-select: none; | |
| -ms-user-select: none; | |
| user-select: none; } | |
| .slds-wizard__item:first-child { | |
| text-align: left; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; } | |
| .slds-wizard__item:last-child { | |
| text-align: right; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; } | |
| .slds-wizard__item a:hover, | |
| .slds-wizard__item a:focus { | |
| outline: 0; | |
| text-decoration: none; } | |
| .slds-wizard__item a:hover .slds-wizard__marker, | |
| .slds-wizard__item a:focus .slds-wizard__marker { | |
| background: #d8dde6; } | |
| .slds-wizard__link { | |
| display: block; } | |
| .slds-wizard__marker { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| border-radius: 50%; | |
| background: #ecebea; | |
| display: inline-block; | |
| vertical-align: middle; | |
| z-index: 1; | |
| position: relative; } | |
| .slds-wizard__label { | |
| display: block; | |
| margin-top: 0.75rem; } | |
| .slds-wizard__progress { | |
| position: absolute; | |
| left: 0; | |
| top: 0.625rem; | |
| height: 0.25rem; | |
| display: block; | |
| width: 100%; | |
| z-index: -1; | |
| background: #ecebea; } | |
| .slds-wizard__progress-bar { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| height: 100%; | |
| background: #0076de; | |
| transition: width 0.2s ease; } | |
| .slds-wizard .slds-is-active .slds-wizard__marker { | |
| background: #0076de; } | |
| .slds-wizard .slds-is-active a:hover .slds-wizard__marker, | |
| .slds-wizard .slds-is-active a:focus .slds-wizard__marker { | |
| background: #005fb2; } | |
| .slds-path-coach { | |
| border: transparent 1px solid; | |
| border-top: 0; } | |
| .slds-path-coach.slds-is-expanded { | |
| border-color: #dddbda; | |
| padding-bottom: 1rem; } | |
| .slds-path-coach .slds-path__mark-current { | |
| background-color: #061c3f; | |
| border-color: #061c3f; } | |
| .slds-tabs_path, | |
| .slds-tabs--path { | |
| display: block; | |
| width: 100%; } | |
| .slds-tabs_path__nav, | |
| .slds-tabs--path__nav { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: start; | |
| align-items: flex-start; } | |
| .slds-tabs_path .slds-is-complete, | |
| .slds-tabs--path .slds-is-complete { | |
| background-color: #51c983; } | |
| .slds-tabs_path .slds-is-complete .slds-tabs_path__stage, | |
| .slds-tabs_path .slds-is-complete .slds-tabs--path__stage, | |
| .slds-tabs--path .slds-is-complete .slds-tabs_path__stage, | |
| .slds-tabs--path .slds-is-complete .slds-tabs--path__stage { | |
| transform: rotateX(0deg); } | |
| .slds-tabs_path .slds-is-complete .slds-tabs_path__title, | |
| .slds-tabs_path .slds-is-complete .slds-tabs--path__title, | |
| .slds-tabs--path .slds-is-complete .slds-tabs_path__title, | |
| .slds-tabs--path .slds-is-complete .slds-tabs--path__title { | |
| transform: rotateX(180deg); } | |
| .slds-tabs_path .slds-is-complete .slds-tabs_path__link, | |
| .slds-tabs_path .slds-is-complete .slds-tabs--path__link, | |
| .slds-tabs--path .slds-is-complete .slds-tabs_path__link, | |
| .slds-tabs--path .slds-is-complete .slds-tabs--path__link { | |
| color: #080707; } | |
| .slds-tabs_path .slds-is-complete:hover, | |
| .slds-tabs--path .slds-is-complete:hover { | |
| background-color: #1f8956; } | |
| .slds-tabs_path .slds-is-complete:hover .slds-tabs_path__stage, | |
| .slds-tabs_path .slds-is-complete:hover .slds-tabs--path__stage, | |
| .slds-tabs--path .slds-is-complete:hover .slds-tabs_path__stage, | |
| .slds-tabs--path .slds-is-complete:hover .slds-tabs--path__stage { | |
| transform: rotateX(-180deg); } | |
| .slds-tabs_path .slds-is-complete:hover .slds-tabs_path__title, | |
| .slds-tabs_path .slds-is-complete:hover .slds-tabs--path__title, | |
| .slds-tabs--path .slds-is-complete:hover .slds-tabs_path__title, | |
| .slds-tabs--path .slds-is-complete:hover .slds-tabs--path__title { | |
| transform: rotateX(0deg); } | |
| .slds-tabs_path .slds-is-complete:hover .slds-tabs_path__link, | |
| .slds-tabs_path .slds-is-complete:hover .slds-tabs--path__link, | |
| .slds-tabs--path .slds-is-complete:hover .slds-tabs_path__link, | |
| .slds-tabs--path .slds-is-complete:hover .slds-tabs--path__link { | |
| color: white; } | |
| .slds-tabs_path .slds-is-current, | |
| .slds-tabs--path .slds-is-current { | |
| background-color: #1172cf; } | |
| .slds-tabs_path .slds-is-current:hover, | |
| .slds-tabs--path .slds-is-current:hover { | |
| background-color: #0d61af; } | |
| .slds-tabs_path .slds-is-current + .slds-is-incomplete:before, | |
| .slds-tabs--path .slds-is-current + .slds-is-incomplete:before { | |
| background-color: #1172cf; } | |
| .slds-tabs_path .slds-is-current:hover + .slds-is-incomplete:before, | |
| .slds-tabs--path .slds-is-current:hover + .slds-is-incomplete:before { | |
| background-color: #0d61af; } | |
| .slds-tabs_path .slds-is-incomplete, | |
| .slds-tabs--path .slds-is-incomplete { | |
| background-color: #e0e5ee; } | |
| .slds-tabs_path .slds-is-incomplete:hover, | |
| .slds-tabs--path .slds-is-incomplete:hover { | |
| background-color: #d8dde6; } | |
| .slds-tabs_path .slds-is-incomplete .slds-tabs_path__link, | |
| .slds-tabs_path .slds-is-incomplete .slds-tabs--path__link, | |
| .slds-tabs--path .slds-is-incomplete .slds-tabs_path__link, | |
| .slds-tabs--path .slds-is-incomplete .slds-tabs--path__link { | |
| color: #080707; } | |
| .slds-tabs_path .slds-is-lost, | |
| .slds-tabs_path .slds-is-lost:hover, | |
| .slds-tabs--path .slds-is-lost, | |
| .slds-tabs--path .slds-is-lost:hover { | |
| background-color: #c23934; } | |
| .slds-tabs_path .slds-is-current .slds-tabs_path__link, | |
| .slds-tabs_path .slds-is-current .slds-tabs--path__link, | |
| .slds-tabs_path .slds-is-lost .slds-tabs_path__link, | |
| .slds-tabs_path .slds-is-lost .slds-tabs--path__link, | |
| .slds-tabs--path .slds-is-current .slds-tabs_path__link, | |
| .slds-tabs--path .slds-is-current .slds-tabs--path__link, | |
| .slds-tabs--path .slds-is-lost .slds-tabs_path__link, | |
| .slds-tabs--path .slds-is-lost .slds-tabs--path__link { | |
| color: white; } | |
| .slds-tabs_path .slds-is-active, | |
| .slds-tabs--path .slds-is-active { | |
| background-color: #061c3f; } | |
| .slds-tabs_path .slds-is-active .slds-tabs_path__link, | |
| .slds-tabs_path .slds-is-active .slds-tabs--path__link, | |
| .slds-tabs--path .slds-is-active .slds-tabs_path__link, | |
| .slds-tabs--path .slds-is-active .slds-tabs--path__link { | |
| color: white; } | |
| .slds-tabs_path .slds-is-active:hover, | |
| .slds-tabs--path .slds-is-active:hover { | |
| background-color: #16325c; } | |
| .slds-tabs_path .slds-is-active:hover + .slds-tabs_path__item:before, | |
| .slds-tabs_path .slds-is-active:hover + .slds-tabs--path__item:before, | |
| .slds-tabs--path .slds-is-active:hover + .slds-tabs_path__item:before, | |
| .slds-tabs--path .slds-is-active:hover + .slds-tabs--path__item:before { | |
| background-color: #16325c; } | |
| .slds-tabs_path .slds-is-active + .slds-tabs_path__item:before, | |
| .slds-tabs_path .slds-is-active + .slds-tabs--path__item:before, | |
| .slds-tabs--path .slds-is-active + .slds-tabs_path__item:before, | |
| .slds-tabs--path .slds-is-active + .slds-tabs--path__item:before { | |
| background-color: #061c3f; } | |
| .slds-tabs_path .slds-is-active .slds-tabs_path__title, | |
| .slds-tabs_path .slds-is-active .slds-tabs--path__title, | |
| .slds-tabs_path .slds-is-won .slds-tabs_path__title, | |
| .slds-tabs_path .slds-is-won .slds-tabs--path__title, | |
| .slds-tabs--path .slds-is-active .slds-tabs_path__title, | |
| .slds-tabs--path .slds-is-active .slds-tabs--path__title, | |
| .slds-tabs--path .slds-is-won .slds-tabs_path__title, | |
| .slds-tabs--path .slds-is-won .slds-tabs--path__title { | |
| color: #fff; | |
| transform: rotateX(0deg); } | |
| .slds-tabs_path .slds-is-active .slds-tabs_path__stage, | |
| .slds-tabs_path .slds-is-active .slds-tabs--path__stage, | |
| .slds-tabs_path .slds-is-won .slds-tabs_path__stage, | |
| .slds-tabs_path .slds-is-won .slds-tabs--path__stage, | |
| .slds-tabs--path .slds-is-active .slds-tabs_path__stage, | |
| .slds-tabs--path .slds-is-active .slds-tabs--path__stage, | |
| .slds-tabs--path .slds-is-won .slds-tabs_path__stage, | |
| .slds-tabs--path .slds-is-won .slds-tabs--path__stage { | |
| transform: rotateX(-180deg); } | |
| .slds-tabs_path__item, | |
| .slds-tabs--path__item { | |
| overflow: hidden; | |
| position: relative; | |
| -ms-flex: 1 1 0%; | |
| flex: 1 1 0%; | |
| min-width: 5rem; | |
| text-align: center; | |
| perspective: 500px; | |
| transition: transform 0.1s ease-in-out, background-color 0.1s linear; } | |
| .slds-tabs_path__item:first-child, | |
| .slds-tabs--path__item:first-child { | |
| border-radius: 15rem 0 0 15rem; } | |
| .slds-tabs_path__item:last-child, | |
| .slds-tabs--path__item:last-child { | |
| border-radius: 0 15rem 15rem 0; | |
| border-right: 0; } | |
| .slds-tabs_path__item:before, | |
| .slds-tabs--path__item:before { | |
| content: ''; | |
| display: block; | |
| position: absolute; | |
| top: 2px; | |
| left: -1rem; | |
| width: calc(2rem - (2px * 2)); | |
| height: calc(2rem - (2px * 2)); | |
| border: 2px solid white; | |
| border-left: 0; | |
| border-bottom: 0; | |
| background-clip: padding-box; | |
| transform: scale3d(0.8, 1.1, 1) rotate(45deg); | |
| transition: transform 0.1s ease-in-out, background-color 0.1s linear; } | |
| .slds-tabs_path__item:first-child:before, | |
| .slds-tabs--path__item:first-child:before { | |
| display: none; } | |
| .slds-tabs_path__item + .slds-is-complete:before, | |
| .slds-tabs_path__item + .slds-is-current:before, | |
| .slds-tabs--path__item + .slds-is-complete:before, | |
| .slds-tabs--path__item + .slds-is-current:before { | |
| background-color: #51c983; } | |
| .slds-tabs_path__item:hover + .slds-is-complete:before, | |
| .slds-tabs_path__item:hover + .slds-is-current:before, | |
| .slds-tabs--path__item:hover + .slds-is-complete:before, | |
| .slds-tabs--path__item:hover + .slds-is-current:before { | |
| background-color: #1f8956; } | |
| .slds-tabs_path__item + .slds-is-incomplete:before, | |
| .slds-tabs_path__item + .slds-is-lost:before, | |
| .slds-tabs--path__item + .slds-is-incomplete:before, | |
| .slds-tabs--path__item + .slds-is-lost:before { | |
| background-color: #e0e5ee; } | |
| .slds-tabs_path__item:hover + .slds-is-incomplete:before, | |
| .slds-tabs_path__item:hover + .slds-is-lost:before, | |
| .slds-tabs--path__item:hover + .slds-is-incomplete:before, | |
| .slds-tabs--path__item:hover + .slds-is-lost:before { | |
| background-color: #d8dde6; } | |
| .slds-tabs_path__title, | |
| .slds-tabs--path__title { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| .slds-tabs_path__stage, | |
| .slds-tabs--path__stage { | |
| position: absolute; | |
| top: 50%; | |
| left: 0.5rem; | |
| width: 100%; | |
| margin-top: -0.5rem; | |
| transform: rotateX(-180deg); | |
| line-height: 1; } | |
| .slds-tabs_path__link, | |
| .slds-tabs--path__link { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| position: relative; | |
| padding: 0.25rem 0.25rem 0.25rem 1.25rem; | |
| line-height: 1.5rem; | |
| text-decoration: none; | |
| cursor: pointer; } | |
| .slds-tabs_path__link:hover, | |
| .slds-tabs--path__link:hover { | |
| text-decoration: none; } | |
| .slds-tabs_path__link:focus, | |
| .slds-tabs--path__link:focus { | |
| outline: 0; } | |
| .slds-tabs_path__title, | |
| .slds-tabs--path__title, | |
| .slds-tabs_path__stage, | |
| .slds-tabs--path__stage { | |
| display: block; | |
| transition: transform 0.2s linear; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; } | |
| .slds-tabs_path__content, | |
| .slds-tabs--path__content { | |
| position: relative; | |
| padding-left: 1.5rem; | |
| padding-right: 1rem; } | |
| .slds-coach__keys { | |
| padding-left: 0.75rem; } | |
| .slds-coach__guidance { | |
| padding-left: 1.5rem; | |
| padding-bottom: 0.25rem; | |
| background-color: white; } | |
| .slds-coach__keys, | |
| .slds-coach__guidance { | |
| margin-top: 1rem; | |
| padding-top: 1rem; | |
| padding-right: 1.5rem; } | |
| .slds-coach__item { | |
| border-top: #dddbda 1px solid; | |
| padding: 1rem 0; | |
| color: #3e3e3c; } | |
| .slds-coach__value { | |
| border-top: #dddbda 1px solid; | |
| padding-top: 1rem; | |
| color: #080707; } | |
| /** | |
| * @name base | |
| * @selector .slds-path | |
| * @restrict div | |
| * @variant | |
| * @support dev-ready | |
| * @layout responsive | |
| * @s1 false | |
| */ | |
| .slds-path { | |
| /** | |
| * @summary Indicates the coaching section is expanded | |
| * | |
| * @selector .slds-is-expanded | |
| * @restrict .slds-path | |
| */ } | |
| .slds-path.slds-is-expanded { | |
| padding-bottom: 0.75rem; | |
| border-color: #dddbda; } | |
| /** | |
| * @summary Allows the path itself to be responsive | |
| * | |
| * @selector .slds-path__track | |
| * @restrict .slds-path div | |
| */ | |
| .slds-path__track { | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| /** | |
| * Indicates the scroller is in the overflow state | |
| * | |
| * @selector .slds-has-overflow | |
| * @restrict .slds-path__track | |
| */ } | |
| @media (min-width: 64em) { | |
| .slds-path__track { | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } } | |
| .slds-path__track.slds-has-overflow { | |
| /** | |
| * | |
| * @summary Allows the path to scroll when necessary | |
| * | |
| * @selector .slds-path__scroller_inner | |
| * @restrict .slds-path__scroller div | |
| */ } | |
| .slds-path__track.slds-has-overflow .slds-path__scroller_inner { | |
| display: -ms-flexbox; | |
| display: flex; | |
| width: 100%; | |
| overflow: hidden; } | |
| .slds-path__track.slds-has-overflow .slds-path__scroll-controls { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| padding-left: 0.5rem; } | |
| @media (pointer: coarse) and (hover: none) { | |
| .slds-path__track.slds-has-overflow .slds-path__scroll-controls { | |
| display: none; } } | |
| /** | |
| * @summary Creates the scrolling container for tab overflow | |
| * | |
| * @selector .slds-path__scroller | |
| * @restrict .slds-path__track div | |
| */ | |
| .slds-path__scroller { | |
| -ms-flex: 1; | |
| flex: 1; | |
| max-width: 100%; | |
| overflow: hidden; } | |
| /** | |
| * @summary Container for the buttons that control the scrolling | |
| * | |
| * @selector .slds-path__scroll-controls | |
| * @restrict .slds-path__track div | |
| * | |
| */ | |
| .slds-path__scroll-controls { | |
| display: none; } | |
| /** | |
| * @summary Shows the stage name when in the smaller state | |
| * | |
| * @selector .slds-path__stage-name | |
| * @restrict .slds-path__track span | |
| * | |
| */ | |
| .slds-path__stage-name { | |
| display: block; | |
| font-weight: 700; | |
| margin: 0.75rem 0; } | |
| @media (min-width: 48em) { | |
| .slds-path__stage-name { | |
| margin: 0; } } | |
| @media (min-width: 64em) { | |
| .slds-path__stage-name { | |
| display: none; } } | |
| /** | |
| * @summary Creates the container for toggle button and path | |
| * | |
| * @selector .slds-path__scroller-container | |
| * @restrict .slds-path div | |
| */ | |
| .slds-path__scroller-container { | |
| -ms-flex: 1; | |
| flex: 1; | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; | |
| overflow: hidden; } | |
| @media (min-width: 64em) { | |
| .slds-path__scroller-container { | |
| -ms-flex-preferred-size: auto; | |
| flex-basis: auto; } } | |
| @media (min-width: 48em) { | |
| .slds-path_has-coaching .slds-path__action { | |
| padding-left: 2.75rem; } } | |
| @media (min-width: 64em) { | |
| .slds-path_has-coaching .slds-path__action { | |
| padding-left: 0; } } | |
| /** | |
| * @summary Container for path actions | |
| * | |
| * @selector .slds-path__action | |
| * @restrict .slds-path div | |
| */ | |
| .slds-path__action { | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; | |
| margin-left: 0; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| -ms-flex-direction: column; | |
| flex-direction: column; } | |
| @media (min-width: 48em) { | |
| .slds-path__action { | |
| max-width: 100%; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| margin-top: 1rem; | |
| -ms-flex-direction: row; | |
| flex-direction: row; } } | |
| @media (min-width: 64em) { | |
| .slds-path__action { | |
| -ms-flex-preferred-size: auto; | |
| flex-basis: auto; | |
| -ms-flex-positive: 0; | |
| flex-grow: 0; | |
| -ms-flex-align: normal; | |
| align-items: normal; | |
| margin-top: 0; | |
| margin-left: 1.5rem; } } | |
| /** | |
| * @summary Horizontal list of stages in path component | |
| * | |
| * @selector .slds-path__nav | |
| * @restrict .slds-path__scroller_inner ul | |
| */ | |
| .slds-path__nav { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| overflow: hidden; | |
| /** | |
| * @summary Creates the incomplete stage of the path | |
| * | |
| * @selector .slds-is-incomplete | |
| * @restrict .slds-path__item | |
| */ | |
| /** | |
| * @summary Creates the completed stage of the path | |
| * | |
| * @selector .slds-is-complete | |
| * @restrict .slds-path__item | |
| */ | |
| /** | |
| * @summary Creates the current stage of the path | |
| * | |
| * @selector .slds-is-current | |
| * @restrict .slds-path__item | |
| */ | |
| /** | |
| * @summary Creates the active stage of the sales path | |
| * | |
| * @selector .slds-is-active | |
| * @restrict .slds-path__item | |
| * @notes This class must be placed on the item programatically when the guidance section is activated | |
| */ | |
| /** | |
| * @summary Creates lost stage of the path | |
| * | |
| * @selector .slds-is-lost | |
| * @restrict .slds-path__item | |
| * @notes This class must be added to the "closed" stage with JS when the Sales Path is complete and the opportunity is lost | |
| */ | |
| /** | |
| * @summary Creates success stage of the path | |
| * | |
| * @selector .slds-is-won | |
| * @restrict .slds-path__item | |
| */ } | |
| .slds-path__nav .slds-is-incomplete { | |
| background: #ecebea; } | |
| .slds-path__nav .slds-is-incomplete:before, .slds-path__nav .slds-is-incomplete:after { | |
| background: #ecebea; } | |
| .slds-path__nav .slds-is-incomplete .slds-path__link { | |
| color: #080707; } | |
| .slds-path__nav .slds-is-incomplete:hover { | |
| background: #dddbda; } | |
| .slds-path__nav .slds-is-incomplete:hover:before, .slds-path__nav .slds-is-incomplete:hover:after { | |
| background: #dddbda; } | |
| .slds-path__nav .slds-is-complete { | |
| background: #4bca81; } | |
| .slds-path__nav .slds-is-complete:before, .slds-path__nav .slds-is-complete:after { | |
| background: #4bca81; } | |
| .slds-path__nav .slds-is-complete .slds-path__stage { | |
| transform: translate(-50%, -50%) rotateX(0deg); } | |
| .slds-path__nav .slds-is-complete .slds-path__title { | |
| transform: rotateX(180deg); } | |
| .slds-path__nav .slds-is-complete .slds-path__link { | |
| color: white; } | |
| .slds-path__nav .slds-is-complete:hover { | |
| background: #04844b; } | |
| .slds-path__nav .slds-is-complete:hover:before, .slds-path__nav .slds-is-complete:hover:after { | |
| background: #04844b; } | |
| .slds-path__nav .slds-is-complete:hover .slds-path__stage { | |
| transform: translate(-50%, -50%) rotateX(-180deg); } | |
| .slds-path__nav .slds-is-complete:hover .slds-path__title { | |
| transform: rotateX(0deg); } | |
| .slds-path__nav .slds-is-current { | |
| background-color: white; } | |
| .slds-path__nav .slds-is-current:before, .slds-path__nav .slds-is-current:after { | |
| background-color: white; | |
| background-image: linear-gradient(90deg, #005fb2, #005fb2 0.125rem, transparent 0.125rem), linear-gradient(90deg, #005fb2, #005fb2 0.125rem, transparent 0.125rem), linear-gradient(#005fb2, #005fb2 0.125rem, transparent 0.125rem); | |
| background-repeat: no-repeat; | |
| background-size: 0.125rem 100%, 0.125rem 100%, 100% 0.125rem; } | |
| .slds-path__nav .slds-is-current:before { | |
| background-position: top right, top left, top left; } | |
| .slds-path__nav .slds-is-current:after { | |
| background-position: top right, top left, bottom left; } | |
| .slds-path__nav .slds-is-current:first-child { | |
| border: 2px solid #005fb2; | |
| border-right: 0; } | |
| .slds-path__nav .slds-is-current:first-child:before, .slds-path__nav .slds-is-current:first-child:after { | |
| background-color: transparent; | |
| background-image: linear-gradient(90deg, #005fb2, #005fb2 0.125rem, transparent 0.125rem); } | |
| .slds-path__nav .slds-is-current:first-child:before { | |
| top: -0.125rem; } | |
| .slds-path__nav .slds-is-current:first-child:after { | |
| bottom: -0.125rem; } | |
| .slds-path__nav .slds-is-current:first-child:hover { | |
| border-color: #00396b; } | |
| .slds-path__nav .slds-is-current:first-child:hover:before, .slds-path__nav .slds-is-current:first-child:hover:after { | |
| background-image: linear-gradient(90deg, #00396b, #00396b 0.125rem, transparent 0.125rem); } | |
| .slds-path__nav .slds-is-current:first-child .slds-path__link { | |
| height: calc(2rem - 0.25rem); } | |
| .slds-is-mobile .slds-path__nav .slds-is-current:first-child .slds-path__link { | |
| height: calc(2.75rem - 0.25rem); } | |
| .slds-path__nav .slds-is-current .slds-path__link { | |
| color: #005fb2; } | |
| .slds-path__nav .slds-is-current:hover:before, .slds-path__nav .slds-is-current:hover:after { | |
| background-image: linear-gradient(90deg, #00396b, #00396b 0.125rem, transparent 0.125rem), linear-gradient(90deg, #00396b, #00396b 0.125rem, transparent 0.125rem), linear-gradient(#00396b, #00396b 0.125rem, transparent 0.125rem); } | |
| .slds-path__nav .slds-is-current:hover .slds-path__link { | |
| color: #00396b; } | |
| .slds-path__nav .slds-is-active { | |
| background: #005fb2; } | |
| .slds-path__nav .slds-is-active:before, .slds-path__nav .slds-is-active:after { | |
| background: #005fb2; } | |
| .slds-path__nav .slds-is-active:first-child { | |
| border: 0; } | |
| .slds-path__nav .slds-is-active:first-child:before, .slds-path__nav .slds-is-active:first-child:after { | |
| background: #005fb2; } | |
| .slds-path__nav .slds-is-active:first-child:before { | |
| top: 0; } | |
| .slds-path__nav .slds-is-active:first-child:after { | |
| bottom: 0; } | |
| .slds-path__nav .slds-is-active:first-child .slds-path__link { | |
| height: 2rem; } | |
| .slds-is-mobile .slds-path__nav .slds-is-active:first-child .slds-path__link { | |
| height: 2.75rem; } | |
| .slds-path__nav .slds-is-active .slds-path__stage { | |
| transform: translateY(-50%) rotateX(-180deg); } | |
| .slds-path__nav .slds-is-active .slds-path__title { | |
| transform: rotateX(0deg); } | |
| .slds-path__nav .slds-is-active .slds-path__link { | |
| color: white; } | |
| .slds-path__nav .slds-is-active:hover { | |
| background: #00396b; } | |
| .slds-path__nav .slds-is-active:hover:before, .slds-path__nav .slds-is-active:hover:after { | |
| background: #00396b; } | |
| .slds-path__nav .slds-is-active:hover .slds-path__link { | |
| color: white; } | |
| .slds-path__nav .slds-is-lost { | |
| background: #c23934; } | |
| .slds-path__nav .slds-is-lost:before, .slds-path__nav .slds-is-lost:after, .slds-path__nav .slds-is-lost:hover, .slds-path__nav .slds-is-lost:hover:before, .slds-path__nav .slds-is-lost:hover:after { | |
| background: #c23934; } | |
| .slds-path__nav .slds-is-won { | |
| background: #04844b; } | |
| .slds-path__nav .slds-is-won:before, .slds-path__nav .slds-is-won:after, .slds-path__nav .slds-is-won:hover, .slds-path__nav .slds-is-won:hover:before, .slds-path__nav .slds-is-won:hover:after { | |
| background: #04844b; } | |
| .slds-path.slds-is-won .slds-path__item.slds-is-current { | |
| background: #04844b; } | |
| .slds-path.slds-is-won .slds-path__item.slds-is-current:before, .slds-path.slds-is-won .slds-path__item.slds-is-current:after, .slds-path.slds-is-won .slds-path__item.slds-is-current:hover, .slds-path.slds-is-won .slds-path__item.slds-is-current:hover:before, .slds-path.slds-is-won .slds-path__item.slds-is-current:hover:after { | |
| background: #04844b; } | |
| .slds-path.slds-is-lost .slds-path__item.slds-is-current { | |
| background: #c23934; } | |
| .slds-path.slds-is-lost .slds-path__item.slds-is-current:before, .slds-path.slds-is-lost .slds-path__item.slds-is-current:after, .slds-path.slds-is-lost .slds-path__item.slds-is-current:hover, .slds-path.slds-is-lost .slds-path__item.slds-is-current:hover:before, .slds-path.slds-is-lost .slds-path__item.slds-is-current:hover:after { | |
| background: #c23934; } | |
| /** | |
| * @summary Individual stages of a path | |
| * | |
| * @selector .slds-path__item | |
| * @restrict .slds-path__nav li | |
| */ | |
| .slds-path__item { | |
| position: relative; | |
| -ms-flex: 1; | |
| flex: 1; | |
| margin-left: 0.375rem; | |
| margin-right: 0.438rem; | |
| min-width: 5rem; | |
| text-align: center; } | |
| .slds-is-mobile .slds-path__item { | |
| margin-left: 0.5rem; | |
| margin-right: 0.562rem; } | |
| .slds-path__item:before, .slds-path__item:after { | |
| content: ''; | |
| position: absolute; | |
| left: -0.25rem; | |
| right: -0.312rem; | |
| cursor: pointer; } | |
| .slds-is-mobile .slds-path__item:before, .slds-is-mobile .slds-path__item:after { | |
| left: -0.312rem; | |
| right: -0.375rem; } | |
| .slds-path__item:before { | |
| top: 0; | |
| height: calc((2rem / 2) + 0.0625rem); | |
| transform: skew(28deg) translate3d(0, 0, 0); } | |
| .slds-is-mobile .slds-path__item:before { | |
| height: calc((2.75rem / 2) + 0.0625rem); } | |
| .slds-path__item:after { | |
| bottom: 0; | |
| height: 1rem; | |
| transform: skew(-30deg) translate3d(0, 0, 0); } | |
| .slds-is-mobile .slds-path__item:after { | |
| height: 1.375rem; } | |
| .slds-path__item:first-child { | |
| margin-left: 0; | |
| border-top-left-radius: 2rem; | |
| border-bottom-left-radius: 2rem; | |
| padding-left: 0.625rem; } | |
| .slds-path__item:first-child:before, .slds-path__item:first-child:after { | |
| left: 1.125rem; } | |
| .slds-is-mobile .slds-path__item:first-child:before, .slds-is-mobile .slds-path__item:first-child:after { | |
| left: 1.625rem; } | |
| .slds-path__item:last-child { | |
| margin-right: 0; | |
| border-top-right-radius: 2rem; | |
| border-bottom-right-radius: 2rem; | |
| padding-right: 0.625rem; } | |
| .slds-path__item:last-child .slds-path__link { | |
| padding-left: 0.25rem; } | |
| .slds-path__item:last-child:before, .slds-path__item:last-child:after { | |
| right: 0.625rem; } | |
| .slds-is-mobile .slds-path__item:last-child:before, .slds-is-mobile .slds-path__item:last-child:after { | |
| right: 1.125rem; } | |
| [dir="rtl"] .slds-path__item:before { | |
| transform: skew(-30deg) translate3d(0, 0, 0); } | |
| [dir="rtl"] .slds-path__item:after { | |
| transform: skew(28deg) translate3d(0, 0, 0); } | |
| /** | |
| * @summary Contains the name of the stage | |
| * | |
| * @selector .slds-path__title | |
| * @restrict .slds-path__link span | |
| */ | |
| .slds-path__title { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| transform: translate3d(0, 0, 0); } | |
| /** | |
| * @summary Contains the check mark when the stage is completed | |
| * | |
| * @selector .slds-path__stage | |
| * @restrict .slds-path__link span | |
| */ | |
| .slds-path__stage { | |
| position: absolute; | |
| top: 50%; | |
| /* stylelint-disable comment-empty-line-before */ | |
| /*! @noflip */ | |
| left: 50%; | |
| transform: translate(-50%, -50%) rotateX(-180deg); } | |
| /** | |
| * @summary Creates actionable element inside of each path item | |
| * | |
| * @selector .slds-path__link | |
| * @restrict .slds-path__item a | |
| */ | |
| .slds-path__link { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| height: 2rem; | |
| padding: 0.5rem 0.25rem 0.5rem 0.5rem; | |
| text-decoration: none; | |
| z-index: 5; | |
| cursor: pointer; } | |
| .slds-path__link:hover { | |
| text-decoration: none; } | |
| .slds-path__link:focus { | |
| outline: 0; } | |
| .slds-is-mobile .slds-path__link { | |
| height: 2.75rem; } | |
| .slds-path__title, | |
| .slds-path__stage { | |
| display: block; | |
| transition: transform 0.2s linear; | |
| -webkit-backface-visibility: hidden; | |
| backface-visibility: hidden; } | |
| /** | |
| * @summary Button that toggles visibility of stage's tabpanel | |
| * | |
| * @selector .slds-path__trigger | |
| * @restrict .slds-path button | |
| */ | |
| .slds-path .slds-path__trigger { | |
| margin-right: 0.75rem; | |
| transition: 0.4s transform ease-in-out; | |
| display: none; } | |
| @media (min-width: 48em) { | |
| .slds-path .slds-path__trigger { | |
| display: block; } } | |
| .slds-flip_vertical, | |
| .slds-flip--vertical { | |
| transform: rotateX(180deg); } | |
| .slds-flip_horizontal, | |
| .slds-flip--horizontal { | |
| transform: rotateY(180deg); } | |
| .slds-path__trigger_open { | |
| transform: rotate(90deg); } | |
| [dir="rtl"] .slds-path__trigger_open { | |
| transform: rotate(-90deg); } | |
| /** | |
| * @summary Actionable button that invokes a completion of the path | |
| * | |
| * @selector .slds-path__mark-complete | |
| * @restrict .slds-path button | |
| */ | |
| .slds-path .slds-path__mark-complete { | |
| width: 100%; | |
| min-width: 13rem; | |
| margin-right: 0; } | |
| @media (min-width: 48em) { | |
| .slds-path .slds-path__mark-complete { | |
| width: auto; } } | |
| /** | |
| * @summary Actionable button that invokes a current stage of the path | |
| * | |
| * @selector .slds-path__mark-current | |
| * @restrict .slds-path button, .slds-path-coach button | |
| */ | |
| .slds-path__mark-current { | |
| border-color: #0070d2; | |
| background-color: #0070d2; } | |
| .slds-path__mark-current:hover, .slds-path__mark-current:focus { | |
| background-color: #005fb2; } | |
| /** | |
| * @summary Tabpanel of each stage of the path | |
| * | |
| * @selector .slds-path__content | |
| * @restrict .slds-path div | |
| */ | |
| /** | |
| * @summary Guidance section of expanded tabpanel | |
| * | |
| * @selector .slds-path__guidance | |
| * @restrict .slds-path__content div | |
| */ | |
| .slds-path__guidance { | |
| margin-right: 0.5rem; | |
| padding-bottom: 0.25rem; | |
| background-color: white; } | |
| @media (min-width: 48em) { | |
| .slds-path__guidance { | |
| margin-top: 0; } } | |
| .slds-path__keys, | |
| .slds-path__guidance { | |
| -ms-flex: 1 1 100%; | |
| flex: 1 1 100%; | |
| margin-top: 1rem; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| @media (min-width: 48em) { | |
| .slds-path__keys, | |
| .slds-path__guidance { | |
| -ms-flex-preferred-size: 50%; | |
| flex-basis: 50%; } } | |
| /** | |
| * @summary Key field section of expanded tabpanel | |
| * | |
| * @selector .slds-path__keys | |
| * @restrict .slds-path__content div | |
| */ | |
| @media (min-width: 48em) { | |
| .slds-path__keys { | |
| padding-right: 0.75rem; } } | |
| /** | |
| * @summary This creates the layout block for the coaching area | |
| * | |
| * @selector .slds-path__coach | |
| * @restrict .slds-path__content div | |
| */ | |
| .slds-path__coach { | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -ms-flex-align: start; | |
| align-items: flex-start; } | |
| @media (min-width: 48em) { | |
| .slds-path__coach { | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } } | |
| /** | |
| * @summary This creates the underlined titles in the coaching area | |
| * | |
| * @selector .slds-path__coach-title | |
| * @restrict .slds-path__keys div, .slds-path__guidance h2 | |
| */ | |
| .slds-path__coach-title { | |
| font-size: 0.875rem; | |
| font-weight: 700; | |
| margin-bottom: 0.5rem; | |
| padding-bottom: 0.5rem; | |
| line-height: 1.125; } | |
| /** | |
| * @summary The Edit link in Path Coaching | |
| * | |
| * @selector .slds-path__coach-edit | |
| * @restrict .slds-path__coach-title button | |
| */ | |
| .slds-path__coach-edit { | |
| border: 0; | |
| padding: 0; | |
| line-height: inherit; } | |
| /** | |
| * @summary This creates the space at the top of the guidance area | |
| * | |
| * @selector .slds-path__guidance-content | |
| * @restrict .slds-path__guidance div | |
| */ | |
| .slds-path__guidance-content { | |
| padding-top: 0.25rem; } | |
| /** | |
| * @summary This class is used to create a full width coaching toggle in small regions | |
| * | |
| * @selector .slds-path__trigger-coaching-content | |
| * @restrict .slds-path__action button | |
| */ | |
| .slds-path__trigger-coaching-content { | |
| width: 100%; | |
| margin-top: 0.75rem; } | |
| @media (min-width: 48em) { | |
| .slds-path__trigger-coaching-content { | |
| display: none; } } | |
| .slds-path .slds-path__trigger-coaching-content { | |
| margin-left: 0; } | |
| /** | |
| * @summary This class should be placed on a containing div when the Path container is between 565px and 1280px | |
| * | |
| * @selector .slds-region_medium | |
| * @restrict div | |
| */ | |
| .slds-region_medium .slds-path_has-coaching .slds-path__action { | |
| padding-left: 2.75rem; } | |
| .slds-region_medium .slds-path__scroller-container { | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; } | |
| .slds-region_medium .slds-path__track { | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -ms-flex-align: start; | |
| align-items: flex-start; } | |
| .slds-region_medium .slds-path__action { | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; | |
| margin-left: 0; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| max-width: 100%; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| margin-top: 1rem; | |
| -ms-flex-direction: row; | |
| flex-direction: row; } | |
| .slds-region_medium .slds-path__stage-name, | |
| .slds-region_medium .slds-path__trigger { | |
| display: block; } | |
| .slds-region_medium .slds-path__stage-name { | |
| margin: 0; } | |
| .slds-region_medium .slds-path__trigger-coaching-content { | |
| display: none; } | |
| .slds-region_medium .slds-path__mark-complete { | |
| width: auto; } | |
| .slds-region_medium .slds-path__coach { | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } | |
| .slds-region_medium .slds-path__keys, | |
| .slds-region_medium .slds-path__guidance { | |
| -ms-flex-preferred-size: 50%; | |
| flex-basis: 50%; } | |
| .slds-region_medium .slds-path__keys { | |
| padding-right: 0.75rem; } | |
| /** | |
| * @summary This class should be placed on a containing div when the Path container is between 360px and 564px | |
| * | |
| * @selector .slds-region_medium | |
| * @restrict div | |
| */ | |
| .slds-region_small .slds-path__scroller-container { | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; } | |
| .slds-region_small .slds-path__track, | |
| .slds-region_small .slds-path__coach { | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -ms-flex-align: start; | |
| align-items: flex-start; } | |
| .slds-region_small .slds-path__stage-name { | |
| display: block; | |
| margin: 0.75rem 0; } | |
| .slds-region_small .slds-path__action { | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; | |
| margin-left: 0; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| margin-top: 0; } | |
| .slds-region_small .slds-path_has-coaching .slds-path__action { | |
| padding-left: 0; } | |
| .slds-region_small .slds-path__mark-complete { | |
| width: 100%; } | |
| .slds-region_small .slds-path__keys, | |
| .slds-region_small .slds-path__guidance { | |
| -ms-flex-preferred-size: 100%; | |
| flex-basis: 100%; | |
| padding-left: 0; | |
| padding-right: 0; } | |
| .slds-region_small .slds-path__guidance { | |
| margin-top: 1rem; } | |
| .slds-region_small .slds-path__trigger { | |
| display: none; } | |
| .slds-region_small .slds-path__trigger-coaching-content { | |
| display: inline-block; } | |
| /** | |
| * @name base | |
| * @selector .slds-progress-bar | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-progress-bar { | |
| display: block; | |
| width: 100%; | |
| height: 0.5rem; | |
| background: #dddbda; | |
| border: 0; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| appearance: none; | |
| position: relative; | |
| /** | |
| * @summary Creates a progress bar height at the smaller .125rem (2px) size | |
| * | |
| * @selector .slds-progress-bar_x-small | |
| * @restrict .slds-progress-bar | |
| * @modifier | |
| * @group thickness | |
| */ | |
| /** | |
| * @summary Creates a progress bar height at the smaller .25rem (4px) size | |
| * | |
| * @selector .slds-progress-bar_small | |
| * @restrict .slds-progress-bar | |
| * @modifier | |
| * @group thickness | |
| */ | |
| /** | |
| * @summary Creates a progress bar height at the smaller .5rem (8px) size | |
| * | |
| * @selector .slds-progress-bar_medium | |
| * @restrict .slds-progress-bar | |
| * @modifier | |
| * @group thickness | |
| */ | |
| /** | |
| * @summary Creates a progress bar height at the smaller .75rem (12px) size | |
| * | |
| * @selector .slds-progress-bar_large | |
| * @restrict .slds-progress-bar | |
| * @modifier | |
| * @group thickness | |
| */ | |
| /** | |
| * @summary Adds a border radius to the progress bar to give it a circular look | |
| * | |
| * @selector .slds-progress-bar_circular | |
| * @restrict .slds-progress-bar | |
| * @modifier | |
| * @group radius | |
| */ } | |
| .slds-progress-bar_x-small, .slds-progress-bar--x-small { | |
| height: 0.125rem; } | |
| .slds-progress-bar_small, .slds-progress-bar--small { | |
| height: 0.25rem; } | |
| .slds-progress-bar_medium, .slds-progress-bar--medium { | |
| height: 0.5rem; } | |
| .slds-progress-bar_large, .slds-progress-bar--large { | |
| height: 0.75rem; } | |
| .slds-progress-bar_circular, .slds-progress-bar--circular { | |
| border-radius: 0.5rem; } | |
| .slds-progress-bar_circular .slds-progress-bar__value, .slds-progress-bar--circular .slds-progress-bar__value { | |
| border-radius: 0.5rem; } | |
| /** | |
| * @summary Fill up blue bar inside of the progress bar | |
| * | |
| * @selector .slds-progress-bar__value | |
| * @restrict .slds-progress-bar span | |
| */ | |
| .slds-progress-bar__value { | |
| display: block; | |
| background: #5eb4ff; | |
| height: 100%; } | |
| /** | |
| * @summary Create a green progress bar | |
| * | |
| * @selector .slds-progress-bar__value_success | |
| * @restrict .slds-progress-bar__value | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-progress-bar__value_success { | |
| background: #4bca81; } | |
| /** | |
| * @summary Create a vertical progress bar | |
| * | |
| * @name vertical | |
| * @selector .slds-progress-bar_vertical | |
| * @restrict .slds-progress-bar | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-progress-bar_vertical { | |
| height: 100%; | |
| width: 0.5rem; } | |
| .slds-progress-bar_vertical.slds-progress-bar_x-small { | |
| width: 0.125rem; } | |
| .slds-progress-bar_vertical.slds-progress-bar_small { | |
| width: 0.25rem; } | |
| .slds-progress-bar_vertical.slds-progress-bar_medium { | |
| width: 0.5rem; } | |
| .slds-progress-bar_vertical.slds-progress-bar_large { | |
| width: 0.75rem; } | |
| /** | |
| * @name base | |
| * @selector .slds-progress | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-progress { | |
| position: relative; | |
| max-width: 70%; | |
| width: 100%; | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| margin: auto; | |
| /** | |
| * When on a shaded background such as the modal footer | |
| * | |
| * @selector .slds-progress_shade | |
| * @restrict .slds-progress | |
| * @modifier | |
| */ } | |
| .slds-progress_shade .slds-progress__item.slds-is-completed .slds-progress__marker, | |
| .slds-progress_shade .slds-progress__item.slds-is-active .slds-progress__marker, .slds-progress--shade .slds-progress__item.slds-is-completed .slds-progress__marker, | |
| .slds-progress--shade .slds-progress__item.slds-is-active .slds-progress__marker { | |
| background: #f3f2f2; } | |
| .slds-progress_shade .slds-progress__item.slds-is-completed .slds-progress__marker_icon, | |
| .slds-progress_shade .slds-progress__item.slds-is-completed .slds-progress__marker--icon, .slds-progress--shade .slds-progress__item.slds-is-completed .slds-progress__marker_icon, | |
| .slds-progress--shade .slds-progress__item.slds-is-completed .slds-progress__marker--icon { | |
| border-color: #f3f2f2; } | |
| .slds-progress_shade .slds-progress__item.slds-is-active .slds-progress__marker, .slds-progress--shade .slds-progress__item.slds-is-active .slds-progress__marker { | |
| box-shadow: #f3f2f2 0 0 0 4px; } | |
| .slds-progress_shade .slds-progress__item.slds-is-active .slds-progress__marker:focus, .slds-progress--shade .slds-progress__item.slds-is-active .slds-progress__marker:focus { | |
| box-shadow: #f3f2f2 0 0 0 4px, 0 0 3px 4px #0070d2; } | |
| .slds-progress_shade .slds-progress__item.slds-has-error .slds-progress__marker, .slds-progress_shade .slds-progress__item.slds-has-error .slds-progress__marker:hover, .slds-progress_shade .slds-progress__item.slds-has-error .slds-progress__marker:focus, .slds-progress--shade .slds-progress__item.slds-has-error .slds-progress__marker, .slds-progress--shade .slds-progress__item.slds-has-error .slds-progress__marker:hover, .slds-progress--shade .slds-progress__item.slds-has-error .slds-progress__marker:focus { | |
| background: #f3f2f2; } | |
| .slds-progress_shade .slds-progress__item .slds-progress__marker, .slds-progress--shade .slds-progress__item .slds-progress__marker { | |
| border-color: #f3f2f2; } | |
| .slds-progress .slds-progress-bar { | |
| position: absolute; | |
| top: 50%; | |
| margin-top: -0.062rem; } | |
| /** | |
| * An ordered list containing steps of a process | |
| * | |
| * @selector .slds-progress__list | |
| * @restrict .slds-progress ol | |
| * @required | |
| */ | |
| .slds-progress__list { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| height: 100%; | |
| margin: auto; | |
| position: relative; | |
| z-index: 1; } | |
| /** | |
| * A list item for each step of the process | |
| * | |
| * @selector .slds-progress__item | |
| * @restrict .slds-progress ol li | |
| * @required | |
| */ | |
| .slds-progress__item { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-item-align: center; | |
| align-self: center; | |
| /** | |
| * Stateful class for a completed step, `.slds-progress__item` should receive a success icon at this point | |
| * | |
| * @selector .slds-is-completed | |
| * @restrict .slds-progress__item | |
| * @notes Class should be applied thought JavaScript | |
| * @required | |
| * @modifier | |
| * @group state | |
| */ | |
| /** | |
| * Stateful class for the active step | |
| * | |
| * @selector .slds-is-active | |
| * @restrict .slds-progress__item | |
| * @notes Class should be applied thought JavaScript | |
| * @required | |
| * @modifier | |
| * @group state | |
| */ | |
| /** | |
| * Indicates error state for a step in the progress | |
| * | |
| * @selector .slds-has-error | |
| * @restrict .slds-progress__item | |
| * @required | |
| * @modifier | |
| */ } | |
| .slds-is-mobile .slds-progress__item { | |
| position: relative; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| min-height: 2.75rem; } | |
| .slds-is-mobile .slds-progress__item .slds-button:before { | |
| content: ''; | |
| position: absolute; | |
| height: 2.75rem; | |
| width: calc(100% + 8px); } | |
| .slds-progress__item.slds-is-completed .slds-progress__marker, | |
| .slds-progress__item.slds-is-active .slds-progress__marker { | |
| background: white; | |
| border-color: #1589ee; } | |
| .slds-progress__item.slds-is-completed .slds-progress__marker_icon, | |
| .slds-progress__item.slds-is-completed .slds-progress__marker--icon { | |
| border-color: white; | |
| color: #5eb4ff; } | |
| .slds-progress__item.slds-is-active .slds-progress__marker { | |
| box-shadow: white 0 0 0 4px; } | |
| .slds-progress__item.slds-is-active .slds-progress__marker:hover, .slds-progress__item.slds-is-active .slds-progress__marker:focus { | |
| border-color: #0070d2; } | |
| .slds-progress__item.slds-is-active .slds-progress__marker:focus { | |
| box-shadow: white 0 0 0 4px, 0 0 3px 4px #0070d2; } | |
| .slds-progress__item.slds-has-error .slds-progress__marker, .slds-progress__item.slds-has-error .slds-progress__marker:hover, .slds-progress__item.slds-has-error .slds-progress__marker:focus { | |
| color: #c23934; | |
| background: white; | |
| border-color: transparent; | |
| box-shadow: none; } | |
| .slds-progress__item.slds-has-error .slds-progress__marker:focus { | |
| box-shadow: 0 0 3px 0 #c23934; } | |
| /** | |
| * Dot indicator for each step | |
| * | |
| * @selector .slds-progress__marker | |
| * @restrict .slds-progress ol li button, .slds-progress ol li div, .slds-progress ol li span | |
| * @required | |
| */ | |
| .slds-progress__marker { | |
| width: 1rem; | |
| height: 1rem; | |
| position: relative; | |
| border-radius: 50%; | |
| background: #dddbda; | |
| border: 4px solid white; | |
| vertical-align: middle; | |
| /** | |
| * Modifier that notifies the marker indicator that the step has been completed and its getting an icon | |
| * | |
| * @selector .slds-progress__marker_icon | |
| * @restrict .slds-progress__marker | |
| * @required | |
| */ } | |
| .slds-is-mobile .slds-progress__marker { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| -ms-flex-pack: center; | |
| justify-content: center; } | |
| .slds-progress__marker_icon, .slds-progress__marker--icon { | |
| width: auto; | |
| height: auto; } | |
| .slds-is-mobile .slds-progress__marker_icon .slds-button__icon, .slds-is-mobile | |
| .slds-progress__marker_icon .slds-icon, .slds-is-mobile .slds-progress__marker--icon .slds-button__icon, .slds-is-mobile | |
| .slds-progress__marker--icon .slds-icon { | |
| width: 1.25rem; | |
| height: 1.25rem; } | |
| /** | |
| * @name vertical | |
| * @selector .slds-progress_vertical | |
| * @restrict .slds-progress | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-progress_vertical { | |
| max-width: none; | |
| /** | |
| * @summary Support content in line with progress marker | |
| * | |
| * @selector .slds-progress__item_content | |
| * @restrict .slds-progress__item div | |
| */ | |
| /** | |
| * @summary Add borders between progress items | |
| * | |
| * @selector .slds-progress__list-bordered | |
| * @restrict .slds-progress__list | |
| */ | |
| /** | |
| * Turn completed stage checkmark green | |
| * | |
| * @selector .slds-progress__marker_icon-success | |
| * @restrict .slds-progress__marker_icon | |
| */ } | |
| .slds-progress_vertical .slds-progress__list { | |
| display: block; } | |
| .slds-progress_vertical .slds-progress__item { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-item-align: left; | |
| align-self: left; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| padding: 0; } | |
| .slds-progress_vertical .slds-progress__item:before, .slds-progress_vertical .slds-progress__item:after { | |
| content: ''; | |
| position: absolute; | |
| left: calc((1rem / 2) - 1px); | |
| width: 2px; | |
| background-color: #dddbda; } | |
| .slds-is-mobile .slds-progress_vertical .slds-progress__item:before, .slds-is-mobile .slds-progress_vertical .slds-progress__item:after { | |
| left: calc((1.25rem / 2) - 1px); } | |
| .slds-progress_vertical .slds-progress__item:before { | |
| top: 0; | |
| bottom: 50%; } | |
| .slds-progress_vertical .slds-progress__item:after { | |
| top: 50%; | |
| bottom: 0; } | |
| .slds-progress_vertical .slds-progress__item:first-child:before, .slds-progress_vertical .slds-progress__item:last-child:after { | |
| display: none; } | |
| .slds-progress_vertical .slds-progress__item.slds-is-completed:before, .slds-progress_vertical .slds-progress__item.slds-is-completed:after, .slds-progress_vertical .slds-progress__item.slds-is-active:before, .slds-progress_vertical .slds-progress__item.slds-has-error:before { | |
| background-color: #5eb4ff; } | |
| .slds-progress_vertical .slds-progress__item_content { | |
| -ms-flex: 1; | |
| flex: 1; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| margin-top: 0.75rem; | |
| padding-bottom: 0.75rem; } | |
| .slds-is-mobile .slds-progress_vertical .slds-progress__item_content { | |
| font-size: 0.875rem; } | |
| .slds-progress_vertical .slds-progress__list-bordered .slds-progress__item:not(:last-child) .slds-progress__item_content { | |
| border-bottom: 1px #dddbda solid; } | |
| .slds-progress_vertical .slds-progress__marker { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| margin-right: 1rem; | |
| min-width: 1rem; | |
| z-index: 5; } | |
| .slds-progress_vertical .slds-progress__marker_icon { | |
| border-right: 0; | |
| border-left: 0; } | |
| .slds-progress_vertical .slds-progress__item.slds-is-completed .slds-progress__marker_icon svg { | |
| fill: #5eb4ff; } | |
| .slds-progress_vertical .slds-progress__item.slds-is-completed .slds-progress__marker_icon-success svg { | |
| fill: #4bca81; } | |
| .slds-progress_vertical .slds-progress__item.slds-has-error .slds-progress__marker_icon svg { | |
| fill: #c23934; } | |
| /** | |
| * @summary Creates a green bar for the vertical variant | |
| * | |
| * @selector .slds-progress_success | |
| * @restrict .slds-progress_vertical | |
| */ | |
| .slds-progress_success .slds-progress__item.slds-is-completed:before, .slds-progress_success .slds-progress__item.slds-is-completed:after, .slds-progress_success .slds-progress__item.slds-is-active:before, .slds-progress_success .slds-progress__item.slds-has-error:before { | |
| opacity: 0.3; | |
| background-color: #4bca81; } | |
| /** | |
| * @summary Progress Ring component | |
| * | |
| * @variant | |
| * @name base | |
| * @selector .slds-progress-ring | |
| * @support prototype | |
| * @restrict div | |
| */ | |
| .slds-progress-ring { | |
| position: relative; | |
| display: inline-block; | |
| height: 1.5rem; | |
| width: 1.5rem; | |
| border-radius: 1.5rem; | |
| background: #dddbda; } | |
| .slds-progress-ring .slds-icon_container { | |
| line-height: 0; } | |
| /** | |
| * @summary Progress indicator | |
| * | |
| * @selector .slds-progress-ring__progress | |
| * @restrict .slds-progress-ring div | |
| */ | |
| .slds-progress-ring__progress { | |
| transform: scale(-1, 1) rotate(-90deg); } | |
| .slds-progress-ring__progress svg { | |
| width: 100%; } | |
| /** | |
| * | |
| * @selector .slds-progress-ring__path | |
| * @restrict .slds-progress-ring__progress path | |
| */ | |
| .slds-progress-ring__path { | |
| fill: #4bca81; } | |
| /** | |
| * @summary Progress ring content area | |
| * | |
| * @selector .slds-progress-ring__content | |
| * @restrict .slds-progress-ring > div | |
| */ | |
| .slds-progress-ring__content { | |
| position: absolute; | |
| top: 0.188rem; | |
| right: 0.188rem; | |
| bottom: 0.188rem; | |
| left: 0.188rem; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| border-radius: 1.5rem; | |
| background: white; } | |
| .slds-progress-ring__content .slds-icon { | |
| width: 0.75rem; } | |
| /** | |
| * @summary Warning colors | |
| * | |
| * @selector .slds-progress-ring_warning | |
| * @restrict .slds-progress-ring | |
| * @modifier | |
| * @group theme | |
| */ | |
| .slds-progress-ring_warning .slds-progress-ring__content { | |
| background: white; } | |
| .slds-progress-ring_warning .slds-icon, | |
| .slds-progress-ring_warning .slds-progress-ring__path { | |
| fill: #ffb75d; } | |
| /** | |
| * @summary Expired colors | |
| * | |
| * @selector .slds-progress-ring_expired | |
| * @restrict .slds-progress-ring | |
| * @modifier | |
| * @group theme | |
| */ | |
| .slds-progress-ring_expired .slds-progress-ring__content { | |
| background: white; } | |
| .slds-progress-ring_expired .slds-icon, | |
| .slds-progress-ring_expired .slds-progress-ring__path { | |
| fill: #d4504c; } | |
| /** | |
| * @summary Complete colors | |
| * | |
| * @selector .slds-progress-ring_complete | |
| * @restrict .slds-progress-ring | |
| * @modifier | |
| * @group theme | |
| */ | |
| .slds-progress-ring_complete .slds-icon { | |
| fill: white; } | |
| .slds-progress-ring_complete .slds-progress-ring__path { | |
| fill: #4bca81; } | |
| .slds-progress-ring_complete .slds-progress-ring__content { | |
| background: #4bca81; } | |
| /** | |
| * @summary Larger ring size | |
| * | |
| * @selector .slds-progress-ring_large | |
| * @restrict .slds-progress-ring | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-progress-ring_large { | |
| height: 2rem; | |
| width: 2rem; } | |
| .slds-progress-ring_large .slds-icon { | |
| width: 1rem; } | |
| /** | |
| * @summary Blue progress ring | |
| * | |
| * @selector .slds-progress-ring_active-step | |
| * @restrict .slds-progress-ring | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-progress-ring_active-step .slds-progress-ring__path { | |
| fill: #1589ee; } | |
| /** | |
| * The default rich text editor contains a minimal amount of text formatting capabilities. | |
| * | |
| * @name base | |
| * @selector .slds-rich-text-editor | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-rich-text-editor { | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; } | |
| /** | |
| * Rich text editor container for when toolbar is detached from Textarea. | |
| * | |
| * @selector .slds-rich-text-editor_toolbar-only | |
| * @restrict .slds-rich-text-editor | |
| */ | |
| .slds-rich-text-editor_toolbar-only { | |
| border: 0; | |
| border-radius: 0; } | |
| /** | |
| * Container for Rich Text Editor Toolbar | |
| * | |
| * @selector .slds-rich-text-editor__toolbar | |
| * @restrict .slds-rich-text-editor div | |
| */ | |
| .slds-rich-text-editor__toolbar { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| white-space: nowrap; | |
| position: relative; | |
| padding: 0.5rem 0.5rem 0.25rem 0.5rem; | |
| border-top-left-radius: 0.25rem; | |
| border-top-right-radius: 0.25rem; | |
| border-bottom: 1px solid #dddbda; | |
| background-color: #f3f2f2; } | |
| /** | |
| * @summary Container for Rich Text Editor Toolbar | |
| * @selector .slds-rich-text-editor__col | |
| * @restrict .slds-rich-text-editor__toolbar div | |
| */ | |
| .slds-rich-text-editor__col { | |
| -ms-flex-item-align: center; | |
| -ms-grid-row-align: center; | |
| align-self: center; } | |
| .slds-rich-text-editor__col + .slds-rich-text-editor__col { | |
| margin-left: 0.5rem; } | |
| /** | |
| * @summary Container for Rich Text Editor Toolbar | |
| * @selector .slds-rich-text-editor__col_grow | |
| * @restrict .slds-rich-text-editor__toolbar div | |
| */ | |
| .slds-rich-text-editor__col_grow { | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; } | |
| /** | |
| * Container for Rich Text Editor Bottom Toolbar | |
| * | |
| * @selector .slds-rich-text-editor__toolbar-bottom | |
| * @restrict .slds-rich-text-editor__toolbar | |
| */ | |
| .slds-rich-text-editor__toolbar_bottom { | |
| border-radius: 0 0 0.25rem 0.25rem; | |
| border-top: 1px solid #dddbda; | |
| border-bottom: 0; } | |
| /** | |
| * Container for Rich Text Editor Toolbar when detached from Textarea | |
| * | |
| * @selector .slds-rich-text-editor__toolbar_detached | |
| * @restrict .slds-rich-text-editor_toolbar-only .slds-rich-text-editor__toolbar | |
| */ | |
| .slds-rich-text-editor__toolbar_detached { | |
| border-radius: 0; | |
| border-top: 0; | |
| border-bottom: 0; } | |
| .slds-rich-text-editor .slds-button-group-list { | |
| margin-right: 0.25rem; | |
| margin-bottom: 0.25rem; | |
| margin-left: 0; } | |
| .slds-rich-text-editor .slds-button-group-list:last-child { | |
| margin-right: 0; } | |
| /** | |
| * Container for Rich Text Editor Combobox | |
| * | |
| * @selector .slds-rich-text-editor__select | |
| * @restrict .slds-rich-text-editor__toolbar div | |
| */ | |
| .slds-rich-text-editor__select { | |
| margin-right: 0.25rem; | |
| margin-bottom: 0.25rem; } | |
| /** | |
| * Container X-Small Size for Rich Text Editor Combobox | |
| * | |
| * @selector .slds-rich-text-editor__select_x-small | |
| * @restrict .slds-rich-text-editor__select .slds-combobox | |
| */ | |
| .slds-rich-text-editor__select_x-small { | |
| max-width: 12rem; | |
| width: auto; } | |
| /** | |
| * Container XX-Small Size for Rich Text Editor Combobox | |
| * | |
| * @selector .slds-rich-text-editor__select_xx-small | |
| * @restrict .slds-rich-text-editor__select .slds-combobox | |
| */ | |
| .slds-rich-text-editor__select_xx-small { | |
| max-width: 6rem; | |
| width: auto; } | |
| .slds-region_narrow .slds-combobox { | |
| max-width: 11rem; } | |
| /** | |
| * Focus state for rich text editor | |
| * | |
| * @selector .slds-has-focus | |
| * @restrict .slds-rich-text-editor | |
| * @modifier | |
| */ | |
| .slds-rich-text-editor.slds-has-focus { | |
| border-color: #1589ee; | |
| box-shadow: 0 0 3px #0070D2; } | |
| /** | |
| * Error state for rich text editor | |
| * | |
| * @selector .slds-has-error | |
| * @restrict .slds-rich-text-editor | |
| * @modifier | |
| */ | |
| .slds-rich-text-editor.slds-has-error { | |
| border: 2px solid #c23934; } | |
| .slds-rich-text-editor.slds-has-error .slds-input { | |
| border-color: #dddbda; | |
| box-shadow: none; } | |
| .slds-rich-text-editor.slds-has-error .slds-form-element__help { | |
| background: white; | |
| margin-top: 0; | |
| border-radius: 0 0 0.125rem 0.125rem; } | |
| /** | |
| * Textarea for Rich Text Editor which is an editable div | |
| * | |
| * @selector .slds-textarea__content | |
| * @restrict .slds-rich-text-editor__textarea div | |
| */ | |
| .slds-rich-text-area__content { | |
| overflow-y: auto; | |
| min-height: 6rem; | |
| max-height: 15rem; | |
| padding: 1rem; | |
| background-color: white; } | |
| .slds-picklist__label[disabled] .slds-icon { | |
| fill: #dddbda; } | |
| [contenteditable]:focus { | |
| outline: none; } | |
| /** | |
| * These are the overrides for both input and output from the RTE. | |
| * We may need to add or adjust these later based on further input. | |
| */ | |
| .slds-rich-text-editor__textarea:last-child .slds-rich-text-area__content { | |
| border-radius: 0 0 0.25rem 0.25rem; } | |
| .slds-rich-text-editor__textarea:first-child .slds-rich-text-area__content { | |
| border-radius: 0.25rem 0.25rem 0 0; } | |
| .slds-rich-text-editor__textarea .ql-editor { | |
| white-space: pre-wrap; | |
| word-wrap: break-word; | |
| -webkit-user-select: text; | |
| -moz-user-select: text; | |
| -ms-user-select: text; | |
| user-select: text; } | |
| .slds-rich-text-editor__textarea .ql-editor.ql-blank:before { | |
| color: #54698d; | |
| content: attr(data-placeholder); | |
| pointer-events: none; | |
| position: absolute; } | |
| .slds-rich-text-editor__textarea .ql-editor a { | |
| text-decoration: underline; } | |
| .slds-rich-text-editor__textarea .overflow-menu { | |
| z-index: 2; } | |
| .slds-rich-text-editor__textarea .ql-active { | |
| background-color: #eef1f6; } | |
| .slds-rich-text-editor__textarea .ql-clipboard { | |
| position: absolute !important; | |
| margin: -1px !important; | |
| border: 0 !important; | |
| padding: 0 !important; | |
| width: 1px !important; | |
| height: 1px !important; | |
| overflow: hidden !important; | |
| clip: rect(0 0 0 0) !important; } | |
| .slds-rich-text-editor__textarea p, | |
| .slds-rich-text-editor__textarea ol, | |
| .slds-rich-text-editor__textarea ul, | |
| .slds-rich-text-editor__textarea pre, | |
| .slds-rich-text-editor__textarea blockquote, | |
| .slds-rich-text-editor__textarea h1, | |
| .slds-rich-text-editor__textarea h2, | |
| .slds-rich-text-editor__textarea h3, | |
| .slds-rich-text-editor__textarea h4, | |
| .slds-rich-text-editor__textarea h5, | |
| .slds-rich-text-editor__textarea h6 { | |
| counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } | |
| .slds-rich-text-editor__textarea ol, | |
| .slds-rich-text-editor__textarea ul { | |
| margin: 0; | |
| padding: 0; | |
| padding-left: 1.5em; } | |
| .slds-rich-text-editor__textarea ol > li { | |
| list-style-type: none; } | |
| .slds-rich-text-editor__textarea ul > li { | |
| list-style-type: none; } | |
| .slds-rich-text-editor__textarea ul > li:before { | |
| content: '\2022'; | |
| vertical-align: middle; | |
| display: inline-block; | |
| line-height: normal; } | |
| .slds-rich-text-editor__textarea ul[data-checked="true"], .slds-rich-text-editor__textarea ul[data-checked="false"] { | |
| pointer-events: none; } | |
| .slds-rich-text-editor__textarea ul[data-checked="true"] > li:before { | |
| color: #777; | |
| cursor: pointer; | |
| pointer-events: all; } | |
| .slds-rich-text-editor__textarea ul[data-checked="false"] > li:before { | |
| color: #777; | |
| cursor: pointer; | |
| pointer-events: all; } | |
| .slds-rich-text-editor__textarea ul[data-checked="true"] > li:before { | |
| content: '\2611'; } | |
| .slds-rich-text-editor__textarea ul[data-checked="false"] > li:before { | |
| content: '\2610'; } | |
| .slds-rich-text-editor__textarea li:before { | |
| display: inline-block; | |
| margin-right: 0.3em; | |
| text-align: right; | |
| white-space: nowrap; | |
| width: 1.2em; } | |
| .slds-rich-text-editor__textarea li:not(.ql-direction-rtl):before { | |
| margin-left: -1.5em; } | |
| .slds-rich-text-editor__textarea ol li, | |
| .slds-rich-text-editor__textarea ul li { | |
| padding-left: 1.5em; } | |
| .slds-rich-text-editor__textarea ol li { | |
| counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; | |
| counter-increment: list-num; } | |
| .slds-rich-text-editor__textarea ol li:before { | |
| content: counter(list-num, decimal) ". "; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-1 { | |
| counter-increment: list-1; | |
| counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-1:before { | |
| content: counter(list-1, lower-alpha) ". "; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-2 { | |
| counter-increment: list-2; | |
| counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-2:before { | |
| content: counter(list-2, lower-roman) ". "; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-3 { | |
| counter-increment: list-3; | |
| counter-reset: list-4 list-5 list-6 list-7 list-8 list-9; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-3:before { | |
| content: counter(list-3, decimal) ". "; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-4 { | |
| counter-increment: list-4; | |
| counter-reset: list-5 list-6 list-7 list-8 list-9; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-4:before { | |
| content: counter(list-4, lower-alpha) ". "; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-5 { | |
| counter-increment: list-5; | |
| counter-reset: list-6 list-7 list-8 list-9; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-5:before { | |
| content: counter(list-5, lower-roman) ". "; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-6 { | |
| counter-increment: list-6; | |
| counter-reset: list-7 list-8 list-9; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-6:before { | |
| content: counter(list-6, decimal) ". "; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-7 { | |
| counter-increment: list-7; | |
| counter-reset: list-8 list-9; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-7:before { | |
| content: counter(list-7, lower-alpha) ". "; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-8 { | |
| counter-increment: list-8; | |
| counter-reset: list-9; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-8:before { | |
| content: counter(list-8, lower-roman) ". "; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-9 { | |
| counter-increment: list-9; } | |
| .slds-rich-text-editor__textarea ol li.ql-indent-9:before { | |
| content: counter(list-9, decimal) ". "; } | |
| .slds-rich-text-editor__textarea ul li.ql-indent-1:before { | |
| content: '\25e6'; } | |
| .slds-rich-text-editor__textarea ul li.ql-indent-2:before, .slds-rich-text-editor__textarea ul li.ql-indent-3:before, .slds-rich-text-editor__textarea ul li.ql-indent-4:before, .slds-rich-text-editor__textarea ul li.ql-indent-5:before, .slds-rich-text-editor__textarea ul li.ql-indent-6:before, .slds-rich-text-editor__textarea ul li.ql-indent-7:before, .slds-rich-text-editor__textarea ul li.ql-indent-8:before { | |
| content: '\25aa'; } | |
| .slds-rich-text-editor__textarea li.ql-indent-1:not(.ql-direction-rtl) { | |
| padding-left: 4.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-1.ql-direction-rtl.ql-align-right { | |
| padding-right: 4.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-2:not(.ql-direction-rtl) { | |
| padding-left: 7.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-2.ql-direction-rtl.ql-align-right { | |
| padding-right: 7.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-3:not(.ql-direction-rtl) { | |
| padding-left: 10.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-3.ql-direction-rtl.ql-align-right { | |
| padding-right: 10.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-4:not(.ql-direction-rtl) { | |
| padding-left: 13.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-4.ql-direction-rtl.ql-align-right { | |
| padding-right: 13.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-5:not(.ql-direction-rtl) { | |
| padding-left: 16.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-5.ql-direction-rtl.ql-align-right { | |
| padding-right: 16.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-6:not(.ql-direction-rtl) { | |
| padding-left: 19.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-6.ql-direction-rtl.ql-align-right { | |
| padding-right: 19.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-7:not(.ql-direction-rtl) { | |
| padding-left: 22.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-7.ql-direction-rtl.ql-align-right { | |
| padding-right: 22.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-8:not(.ql-direction-rtl) { | |
| padding-left: 25.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-8.ql-direction-rtl.ql-align-right { | |
| padding-right: 25.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-9:not(.ql-direction-rtl) { | |
| padding-left: 28.5em; } | |
| .slds-rich-text-editor__textarea li.ql-indent-9.ql-direction-rtl.ql-align-right { | |
| padding-right: 28.5em; } | |
| .slds-rich-text-editor__textarea, | |
| .slds-rich-text-editor__output { | |
| line-height: 1.5; | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: manual; | |
| -ms-hyphens: manual; | |
| hyphens: manual; } | |
| .slds-rich-text-editor__textarea h1, | |
| .slds-rich-text-editor__output h1 { | |
| font-size: 1.5rem; } | |
| .slds-rich-text-editor__textarea h2, | |
| .slds-rich-text-editor__output h2 { | |
| font-size: 1.125rem; | |
| font-weight: 700; } | |
| .slds-rich-text-editor__textarea h3, | |
| .slds-rich-text-editor__output h3 { | |
| font-size: 1.125rem; } | |
| .slds-rich-text-editor__textarea h4, | |
| .slds-rich-text-editor__output h4 { | |
| font-size: 0.875rem; | |
| font-weight: 700; } | |
| .slds-rich-text-editor__textarea h5, | |
| .slds-rich-text-editor__output h5 { | |
| font-size: 0.875rem; } | |
| .slds-rich-text-editor__textarea h6, | |
| .slds-rich-text-editor__output h6 { | |
| font-size: 0.75rem; | |
| font-weight: 700; } | |
| .slds-rich-text-editor__textarea h1, | |
| .slds-rich-text-editor__textarea h2, | |
| .slds-rich-text-editor__textarea h3, | |
| .slds-rich-text-editor__textarea h4, | |
| .slds-rich-text-editor__textarea h5, | |
| .slds-rich-text-editor__textarea h6, | |
| .slds-rich-text-editor__textarea ul, | |
| .slds-rich-text-editor__textarea ol, | |
| .slds-rich-text-editor__textarea dl, | |
| .slds-rich-text-editor__textarea img, | |
| .slds-rich-text-editor__output h1, | |
| .slds-rich-text-editor__output h2, | |
| .slds-rich-text-editor__output h3, | |
| .slds-rich-text-editor__output h4, | |
| .slds-rich-text-editor__output h5, | |
| .slds-rich-text-editor__output h6, | |
| .slds-rich-text-editor__output ul, | |
| .slds-rich-text-editor__output ol, | |
| .slds-rich-text-editor__output dl, | |
| .slds-rich-text-editor__output img { | |
| margin-bottom: 0.75rem; } | |
| .slds-rich-text-editor__textarea blockquote, | |
| .slds-rich-text-editor__output blockquote { | |
| margin: 2rem 1.5rem; } | |
| .slds-rich-text-editor__textarea ins, | |
| .slds-rich-text-editor__output ins { | |
| color: #027e46; | |
| text-decoration: underline; } | |
| .slds-rich-text-editor__textarea del, | |
| .slds-rich-text-editor__output del { | |
| color: #c23934; | |
| text-decoration: line-through; } | |
| .slds-rich-text-editor__textarea ul, | |
| .slds-rich-text-editor__output ul { | |
| margin-left: 1.5rem; | |
| list-style: disc; } | |
| .slds-rich-text-editor__textarea ul ul, | |
| .slds-rich-text-editor__output ul ul { | |
| list-style: circle; | |
| margin-bottom: 0; } | |
| .slds-rich-text-editor__textarea ul ul ul, | |
| .slds-rich-text-editor__output ul ul ul { | |
| list-style: square; } | |
| .slds-rich-text-editor__textarea ul ol, | |
| .slds-rich-text-editor__output ul ol { | |
| margin-left: 1.5rem; | |
| list-style: decimal; | |
| margin-bottom: 0; } | |
| .slds-rich-text-editor__textarea ol, | |
| .slds-rich-text-editor__output ol { | |
| margin-left: 1.5rem; | |
| list-style: decimal; } | |
| .slds-rich-text-editor__textarea ol ol, | |
| .slds-rich-text-editor__output ol ol { | |
| list-style: lower-alpha; | |
| margin-bottom: 0; } | |
| .slds-rich-text-editor__textarea ol ol ol, | |
| .slds-rich-text-editor__output ol ol ol { | |
| list-style: lower-roman; } | |
| .slds-rich-text-editor__textarea ol ul, | |
| .slds-rich-text-editor__output ol ul { | |
| margin-left: 1.5rem; | |
| list-style: disc; | |
| margin-bottom: 0; } | |
| .slds-rich-text-editor__textarea dd, | |
| .slds-rich-text-editor__output dd { | |
| margin-left: 2.5rem; } | |
| .slds-rich-text-editor__textarea abbr[title], | |
| .slds-rich-text-editor__textarea acronym[title], | |
| .slds-rich-text-editor__output abbr[title], | |
| .slds-rich-text-editor__output acronym[title] { | |
| border-bottom: 1px dotted; | |
| cursor: help; } | |
| .slds-rich-text-editor__textarea table, | |
| .slds-rich-text-editor__output table { | |
| overflow-wrap: normal; | |
| word-wrap: normal; | |
| word-break: normal; | |
| width: auto; } | |
| .slds-rich-text-editor__textarea table caption, | |
| .slds-rich-text-editor__output table caption { | |
| text-align: center; } | |
| .slds-rich-text-editor__textarea th, | |
| .slds-rich-text-editor__textarea td, | |
| .slds-rich-text-editor__output th, | |
| .slds-rich-text-editor__output td { | |
| padding: 0.5rem; } | |
| .slds-rich-text-editor__textarea .sans-serif, | |
| .slds-rich-text-editor__output .sans-serif { | |
| font-family: sans-serif; } | |
| .slds-rich-text-editor__textarea .courier, | |
| .slds-rich-text-editor__output .courier { | |
| font-family: courier; } | |
| .slds-rich-text-editor__textarea .verdana, | |
| .slds-rich-text-editor__output .verdana { | |
| font-family: verdana; } | |
| .slds-rich-text-editor__textarea .tahoma, | |
| .slds-rich-text-editor__output .tahoma { | |
| font-family: tahoma; } | |
| .slds-rich-text-editor__textarea .garamond, | |
| .slds-rich-text-editor__output .garamond { | |
| font-family: garamond; } | |
| .slds-rich-text-editor__textarea .serif, | |
| .slds-rich-text-editor__output .serif { | |
| font-family: serif; } | |
| .slds-rich-text-editor__textarea .ql-indent-1:not(.ql-direction-rtl), | |
| .slds-rich-text-editor__output .ql-indent-1:not(.ql-direction-rtl) { | |
| padding-left: 3em; } | |
| .slds-rich-text-editor__textarea .ql-indent-1.ql-direction-rtl.ql-align-right, | |
| .slds-rich-text-editor__output .ql-indent-1.ql-direction-rtl.ql-align-right { | |
| padding-right: 3em; } | |
| .slds-rich-text-editor__textarea .ql-indent-2:not(.ql-direction-rtl), | |
| .slds-rich-text-editor__output .ql-indent-2:not(.ql-direction-rtl) { | |
| padding-left: 6em; } | |
| .slds-rich-text-editor__textarea .ql-indent-2.ql-direction-rtl.ql-align-right, | |
| .slds-rich-text-editor__output .ql-indent-2.ql-direction-rtl.ql-align-right { | |
| padding-right: 6em; } | |
| .slds-rich-text-editor__textarea .ql-indent-3:not(.ql-direction-rtl), | |
| .slds-rich-text-editor__output .ql-indent-3:not(.ql-direction-rtl) { | |
| padding-left: 9em; } | |
| .slds-rich-text-editor__textarea .ql-indent-3.ql-direction-rtl.ql-align-right, | |
| .slds-rich-text-editor__output .ql-indent-3.ql-direction-rtl.ql-align-right { | |
| padding-right: 9em; } | |
| .slds-rich-text-editor__textarea .ql-indent-4:not(.ql-direction-rtl), | |
| .slds-rich-text-editor__output .ql-indent-4:not(.ql-direction-rtl) { | |
| padding-left: 12em; } | |
| .slds-rich-text-editor__textarea .ql-indent-4.ql-direction-rtl.ql-align-right, | |
| .slds-rich-text-editor__output .ql-indent-4.ql-direction-rtl.ql-align-right { | |
| padding-right: 12em; } | |
| .slds-rich-text-editor__textarea .ql-indent-5:not(.ql-direction-rtl), | |
| .slds-rich-text-editor__output .ql-indent-5:not(.ql-direction-rtl) { | |
| padding-left: 15em; } | |
| .slds-rich-text-editor__textarea .ql-indent-5.ql-direction-rtl.ql-align-right, | |
| .slds-rich-text-editor__output .ql-indent-5.ql-direction-rtl.ql-align-right { | |
| padding-right: 15em; } | |
| .slds-rich-text-editor__textarea .ql-indent-6:not(.ql-direction-rtl), | |
| .slds-rich-text-editor__output .ql-indent-6:not(.ql-direction-rtl) { | |
| padding-left: 18em; } | |
| .slds-rich-text-editor__textarea .ql-indent-6.ql-direction-rtl.ql-align-right, | |
| .slds-rich-text-editor__output .ql-indent-6.ql-direction-rtl.ql-align-right { | |
| padding-right: 18em; } | |
| .slds-rich-text-editor__textarea .ql-indent-7:not(.ql-direction-rtl), | |
| .slds-rich-text-editor__output .ql-indent-7:not(.ql-direction-rtl) { | |
| padding-left: 21em; } | |
| .slds-rich-text-editor__textarea .ql-indent-7.ql-direction-rtl.ql-align-right, | |
| .slds-rich-text-editor__output .ql-indent-7.ql-direction-rtl.ql-align-right { | |
| padding-right: 21em; } | |
| .slds-rich-text-editor__textarea .ql-indent-8:not(.ql-direction-rtl), | |
| .slds-rich-text-editor__output .ql-indent-8:not(.ql-direction-rtl) { | |
| padding-left: 24em; } | |
| .slds-rich-text-editor__textarea .ql-indent-8.ql-direction-rtl.ql-align-right, | |
| .slds-rich-text-editor__output .ql-indent-8.ql-direction-rtl.ql-align-right { | |
| padding-right: 24em; } | |
| .slds-rich-text-editor__textarea .ql-indent-9:not(.ql-direction-rtl), | |
| .slds-rich-text-editor__output .ql-indent-9:not(.ql-direction-rtl) { | |
| padding-left: 27em; } | |
| .slds-rich-text-editor__textarea .ql-indent-9.ql-direction-rtl.ql-align-right, | |
| .slds-rich-text-editor__output .ql-indent-9.ql-direction-rtl.ql-align-right { | |
| padding-right: 27em; } | |
| .slds-spinner_container { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 9050; | |
| background-color: rgba(255, 255, 255, 0.75); | |
| visibility: visible; | |
| opacity: 1; | |
| transition: opacity 0.2s ease, visibility 0s; | |
| transition-delay: 0s, 0.3s; } | |
| /* Follow production class names (not starting with slds-) */ | |
| /* stylelint-disable selector-class-pattern */ | |
| .slds-spinner_container.is-hidden { | |
| visibility: hidden; | |
| opacity: 0; | |
| transition: opacity 0.2s ease, visibility 0s; | |
| transition-delay: 0s, 0s; } | |
| .slds-spinner_container.hide { | |
| display: none; } | |
| /* stylelint-enable selector-class-pattern */ | |
| /** | |
| * @name base | |
| * @selector .slds-spinner | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-spinner { | |
| position: absolute; | |
| top: 50%; | |
| /*! @noflip */ | |
| left: 50%; | |
| z-index: 9051; | |
| transform: translate(-50%, -50%) rotate(90deg); } | |
| /** | |
| * @summary Returns the spinner back into the document flow | |
| * @selector .slds-spinner_inline | |
| * @restrict .slds-spinner | |
| * @modifier | |
| */ | |
| .slds-spinner_inline { | |
| position: relative; | |
| top: auto; | |
| left: auto; | |
| right: auto; | |
| bottom: auto; | |
| transform: none; } | |
| .slds-spinner, | |
| .slds-spinner__dot-a, | |
| .slds-spinner__dot-b { | |
| transform-origin: 50% 50%; } | |
| /** | |
| * This creates two of the circles | |
| * | |
| * @selector .slds-spinner__dot-a | |
| * @restrict .slds-spinner div | |
| * @required | |
| */ | |
| /** | |
| * This creates two of the circles | |
| * | |
| * @selector .slds-spinner__dot-b | |
| * @restrict .slds-spinner div | |
| * @required | |
| */ | |
| .slds-spinner__dot-a, | |
| .slds-spinner__dot-b { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; } | |
| .slds-spinner:before, | |
| .slds-spinner:after, | |
| .slds-spinner__dot-a:before, | |
| .slds-spinner__dot-b:before, | |
| .slds-spinner__dot-a:after, | |
| .slds-spinner__dot-b:after { | |
| content: ''; | |
| position: absolute; | |
| background: #b0adab; | |
| border-radius: 50%; | |
| animation-duration: 1000ms; | |
| animation-iteration-count: infinite; | |
| transform: translate3d(0, 0, 0); | |
| will-change: transform; } | |
| .slds-spinner__dot-a { | |
| transform: rotate(60deg); } | |
| .slds-spinner__dot-b { | |
| transform: rotate(120deg); } | |
| .slds-spinner:before { | |
| animation-delay: -83.33333ms; } | |
| .slds-spinner__dot-a:before { | |
| animation-delay: 83.33333ms; } | |
| .slds-spinner__dot-b:before { | |
| animation-delay: 250ms; } | |
| .slds-spinner:after { | |
| animation-delay: 416.66667ms; } | |
| .slds-spinner__dot-a:after { | |
| animation-delay: 583.33333ms; } | |
| .slds-spinner__dot-b:after { | |
| animation-delay: 750ms; } | |
| /** | |
| * @summary Set a delay of 300ms on spinner | |
| * @selector .slds-spinner_delayed | |
| * @restrict .slds-spinner | |
| * @modifier | |
| * @group timing | |
| */ | |
| .slds-spinner_delayed:before { | |
| animation-delay: 216.66667ms; } | |
| .slds-spinner_delayed .slds-spinner__dot-a:before { | |
| animation-delay: 383.33333ms; } | |
| .slds-spinner_delayed .slds-spinner__dot-b:before { | |
| animation-delay: 550ms; } | |
| .slds-spinner_delayed:after { | |
| animation-delay: 716.66667ms; } | |
| .slds-spinner_delayed .slds-spinner__dot-a:after { | |
| animation-delay: 883.33333ms; } | |
| .slds-spinner_delayed .slds-spinner__dot-b:after { | |
| animation-delay: 1050ms; } | |
| /** | |
| * This creates the blue brand spinner | |
| * | |
| * @selector .slds-spinner_brand | |
| * @restrict .slds-spinner | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-spinner_brand.slds-spinner:before, .slds-spinner_brand.slds-spinner:after, | |
| .slds-spinner_brand .slds-spinner__dot-a:before, | |
| .slds-spinner_brand .slds-spinner__dot-b:before, | |
| .slds-spinner_brand .slds-spinner__dot-a:after, | |
| .slds-spinner_brand .slds-spinner__dot-b:after, | |
| .slds-spinner--brand.slds-spinner:before, | |
| .slds-spinner--brand.slds-spinner:after, | |
| .slds-spinner--brand .slds-spinner__dot-a:before, | |
| .slds-spinner--brand .slds-spinner__dot-b:before, | |
| .slds-spinner--brand .slds-spinner__dot-a:after, | |
| .slds-spinner--brand .slds-spinner__dot-b:after { | |
| background-color: #1589ee; } | |
| /** | |
| * This creates the inverse spinner | |
| * | |
| * @selector .slds-spinner_inverse | |
| * @restrict .slds-spinner | |
| * @modifier | |
| */ | |
| .slds-spinner_inverse.slds-spinner:before, .slds-spinner_inverse.slds-spinner:after, | |
| .slds-spinner_inverse .slds-spinner__dot-a:before, | |
| .slds-spinner_inverse .slds-spinner__dot-b:before, | |
| .slds-spinner_inverse .slds-spinner__dot-a:after, | |
| .slds-spinner_inverse .slds-spinner__dot-b:after, | |
| .slds-spinner--inverse.slds-spinner:before, | |
| .slds-spinner--inverse.slds-spinner:after, | |
| .slds-spinner--inverse .slds-spinner__dot-a:before, | |
| .slds-spinner--inverse .slds-spinner__dot-b:before, | |
| .slds-spinner--inverse .slds-spinner__dot-a:after, | |
| .slds-spinner--inverse .slds-spinner__dot-b:after { | |
| background-color: white; } | |
| /** | |
| * This is the extra extra small spinner | |
| * | |
| * @selector .slds-spinner_xx-small | |
| * @restrict .slds-spinner | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-spinner_xx-small, | |
| .slds-spinner--xx-small { | |
| width: 0.5rem; } | |
| .slds-spinner_xx-small.slds-spinner_inline, | |
| .slds-spinner--xx-small.slds-spinner_inline { | |
| height: 0.5rem; } | |
| .slds-spinner_xx-small.slds-spinner:before, .slds-spinner_xx-small.slds-spinner:after, | |
| .slds-spinner_xx-small .slds-spinner__dot-a:before, | |
| .slds-spinner_xx-small .slds-spinner__dot-b:before, | |
| .slds-spinner_xx-small .slds-spinner__dot-a:after, | |
| .slds-spinner_xx-small .slds-spinner__dot-b:after, | |
| .slds-spinner--xx-small.slds-spinner:before, | |
| .slds-spinner--xx-small.slds-spinner:after, | |
| .slds-spinner--xx-small .slds-spinner__dot-a:before, | |
| .slds-spinner--xx-small .slds-spinner__dot-b:before, | |
| .slds-spinner--xx-small .slds-spinner__dot-a:after, | |
| .slds-spinner--xx-small .slds-spinner__dot-b:after { | |
| width: 0.125rem; | |
| height: 0.125rem; } | |
| .slds-spinner_xx-small.slds-spinner:before, | |
| .slds-spinner_xx-small .slds-spinner__dot-a:before, | |
| .slds-spinner_xx-small .slds-spinner__dot-b:before, | |
| .slds-spinner--xx-small.slds-spinner:before, | |
| .slds-spinner--xx-small .slds-spinner__dot-a:before, | |
| .slds-spinner--xx-small .slds-spinner__dot-b:before { | |
| top: -0.0625rem; | |
| left: -0.0625rem; | |
| animation-name: dotsBounceBefore-extraExtraSmall; } | |
| .slds-spinner_xx-small.slds-spinner:after, | |
| .slds-spinner_xx-small .slds-spinner__dot-a:after, | |
| .slds-spinner_xx-small .slds-spinner__dot-b:after, | |
| .slds-spinner--xx-small.slds-spinner:after, | |
| .slds-spinner--xx-small .slds-spinner__dot-a:after, | |
| .slds-spinner--xx-small .slds-spinner__dot-b:after { | |
| top: -0.0625rem; | |
| right: -0.0625rem; | |
| animation-name: dotsBounceAfter-extraExtraSmall; } | |
| @keyframes dotsBounceBefore-extraExtraSmall { | |
| 0% { | |
| transform: translate3d(0, 0, 0); } | |
| 60% { | |
| transform: translate3d(0, 0, 0); | |
| animation-timing-function: cubic-bezier(0.275, 0.043, 0.34, 0.265); } | |
| 80% { | |
| transform: translate3d(-0.125rem, 0, 0); | |
| animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715); } | |
| 100% { | |
| transform: translate3d(0, 0, 0); } } | |
| @keyframes dotsBounceAfter-extraExtraSmall { | |
| 0% { | |
| transform: translate3d(0, 0, 0); } | |
| 60% { | |
| animation-timing-function: cubic-bezier(0.275, 0.043, 0.34, 0.265); | |
| transform: translate3d(0, 0, 0); } | |
| 80% { | |
| animation-timing-function: cubic-bezier(0, 0.555, 0.35, 0.715); | |
| transform: translate3d(0.125rem, 0, 0); } | |
| 100% { | |
| transform: translate3d(0, 0, 0); } } | |
| /** | |
| * This is the extra small spinner | |
| * | |
| * @selector .slds-spinner_x-small | |
| * @restrict .slds-spinner | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-spinner_x-small, | |
| .slds-spinner--x-small { | |
| width: 1rem; } | |
| .slds-spinner_x-small.slds-spinner_inline, | |
| .slds-spinner--x-small.slds-spinner_inline { | |
| height: 1rem; } | |
| .slds-spinner_x-small.slds-spinner:before, .slds-spinner_x-small.slds-spinner:after, | |
| .slds-spinner_x-small .slds-spinner__dot-a:before, | |
| .slds-spinner_x-small .slds-spinner__dot-b:before, | |
| .slds-spinner_x-small .slds-spinner__dot-a:after, | |
| .slds-spinner_x-small .slds-spinner__dot-b:after, | |
| .slds-spinner--x-small.slds-spinner:before, | |
| .slds-spinner--x-small.slds-spinner:after, | |
| .slds-spinner--x-small .slds-spinner__dot-a:before, | |
| .slds-spinner--x-small .slds-spinner__dot-b:before, | |
| .slds-spinner--x-small .slds-spinner__dot-a:after, | |
| .slds-spinner--x-small .slds-spinner__dot-b:after { | |
| width: 0.25rem; | |
| height: 0.25rem; } | |
| .slds-spinner_x-small.slds-spinner:before, | |
| .slds-spinner_x-small .slds-spinner__dot-a:before, | |
| .slds-spinner_x-small .slds-spinner__dot-b:before, | |
| .slds-spinner--x-small.slds-spinner:before, | |
| .slds-spinner--x-small .slds-spinner__dot-a:before, | |
| .slds-spinner--x-small .slds-spinner__dot-b:before { | |
| top: -0.125rem; | |
| left: -0.125rem; | |
| animation-name: dotsBounceBefore-extraSmall; } | |
| .slds-spinner_x-small.slds-spinner:after, | |
| .slds-spinner_x-small .slds-spinner__dot-a:after, | |
| .slds-spinner_x-small .slds-spinner__dot-b:after, | |
| .slds-spinner--x-small.slds-spinner:after, | |
| .slds-spinner--x-small .slds-spinner__dot-a:after, | |
| .slds-spinner--x-small .slds-spinner__dot-b:after { | |
| top: -0.125rem; | |
| right: -0.125rem; | |
| animation-name: dotsBounceAfter-extraSmall; } | |
| @keyframes dotsBounceBefore-extraSmall { | |
| 0% { | |
| transform: translate3d(0, 0, 0); } | |
| 60% { | |
| transform: translate3d(0, 0, 0); | |
| animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } | |
| 80% { | |
| transform: translate3d(-0.25rem, 0, 0); | |
| animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } | |
| 100% { | |
| transform: translate3d(0, 0, 0); } } | |
| @keyframes dotsBounceAfter-extraSmall { | |
| 0% { | |
| transform: translate3d(0, 0, 0); } | |
| 60% { | |
| transform: translate3d(0, 0, 0); | |
| animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } | |
| 80% { | |
| transform: translate3d(0.25rem, 0, 0); | |
| animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } | |
| 100% { | |
| transform: translate3d(0, 0, 0); } } | |
| /** | |
| * This is the small spinner | |
| * | |
| * @selector .slds-spinner_small | |
| * @restrict .slds-spinner | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-spinner_small, | |
| .slds-spinner--small { | |
| width: 1.25rem; } | |
| .slds-spinner_small.slds-spinner_inline, | |
| .slds-spinner--small.slds-spinner_inline { | |
| height: 1.25rem; } | |
| .slds-spinner_small.slds-spinner:before, .slds-spinner_small.slds-spinner:after, | |
| .slds-spinner_small .slds-spinner__dot-a:before, | |
| .slds-spinner_small .slds-spinner__dot-b:before, | |
| .slds-spinner_small .slds-spinner__dot-a:after, | |
| .slds-spinner_small .slds-spinner__dot-b:after, | |
| .slds-spinner--small.slds-spinner:before, | |
| .slds-spinner--small.slds-spinner:after, | |
| .slds-spinner--small .slds-spinner__dot-a:before, | |
| .slds-spinner--small .slds-spinner__dot-b:before, | |
| .slds-spinner--small .slds-spinner__dot-a:after, | |
| .slds-spinner--small .slds-spinner__dot-b:after { | |
| width: 0.25rem; | |
| height: 0.25rem; } | |
| .slds-spinner_small.slds-spinner:before, | |
| .slds-spinner_small .slds-spinner__dot-a:before, | |
| .slds-spinner_small .slds-spinner__dot-b:before, | |
| .slds-spinner--small.slds-spinner:before, | |
| .slds-spinner--small .slds-spinner__dot-a:before, | |
| .slds-spinner--small .slds-spinner__dot-b:before { | |
| top: -0.125rem; | |
| left: -0.125rem; | |
| animation-name: dotsBounceBefore-small; } | |
| .slds-spinner_small.slds-spinner:after, | |
| .slds-spinner_small .slds-spinner__dot-a:after, | |
| .slds-spinner_small .slds-spinner__dot-b:after, | |
| .slds-spinner--small.slds-spinner:after, | |
| .slds-spinner--small .slds-spinner__dot-a:after, | |
| .slds-spinner--small .slds-spinner__dot-b:after { | |
| top: -0.125rem; | |
| right: -0.125rem; | |
| animation-name: dotsBounceAfter-small; } | |
| @keyframes dotsBounceBefore-small { | |
| 0% { | |
| transform: translate3d(0, 0, 0); } | |
| 60% { | |
| transform: translate3d(0, 0, 0); | |
| animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } | |
| 80% { | |
| transform: translate3d(-0.375rem, 0, 0); | |
| animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } | |
| 100% { | |
| transform: translate3d(0, 0, 0); } } | |
| @keyframes dotsBounceAfter-small { | |
| 0% { | |
| transform: translate3d(0, 0, 0); } | |
| 60% { | |
| transform: translate3d(0, 0, 0); | |
| animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } | |
| 80% { | |
| transform: translate3d(0.375rem, 0, 0); | |
| animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } | |
| 100% { | |
| transform: translateX(0); } } | |
| /** | |
| * This is the medium spinner | |
| * | |
| * @selector .slds-spinner_medium | |
| * @restrict .slds-spinner | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-spinner_medium, | |
| .slds-spinner--medium { | |
| width: 2rem; } | |
| .slds-spinner_medium.slds-spinner_inline, | |
| .slds-spinner--medium.slds-spinner_inline { | |
| height: 2rem; } | |
| .slds-spinner_medium.slds-spinner:before, .slds-spinner_medium.slds-spinner:after, | |
| .slds-spinner_medium .slds-spinner__dot-a:before, | |
| .slds-spinner_medium .slds-spinner__dot-b:before, | |
| .slds-spinner_medium .slds-spinner__dot-a:after, | |
| .slds-spinner_medium .slds-spinner__dot-b:after, | |
| .slds-spinner--medium.slds-spinner:before, | |
| .slds-spinner--medium.slds-spinner:after, | |
| .slds-spinner--medium .slds-spinner__dot-a:before, | |
| .slds-spinner--medium .slds-spinner__dot-b:before, | |
| .slds-spinner--medium .slds-spinner__dot-a:after, | |
| .slds-spinner--medium .slds-spinner__dot-b:after { | |
| width: 0.5rem; | |
| height: 0.5rem; } | |
| .slds-spinner_medium.slds-spinner:before, | |
| .slds-spinner_medium .slds-spinner__dot-a:before, | |
| .slds-spinner_medium .slds-spinner__dot-b:before, | |
| .slds-spinner--medium.slds-spinner:before, | |
| .slds-spinner--medium .slds-spinner__dot-a:before, | |
| .slds-spinner--medium .slds-spinner__dot-b:before { | |
| animation-name: dotsBounceBefore-medium; | |
| top: -0.25rem; | |
| left: -0.25rem; } | |
| .slds-spinner_medium.slds-spinner:after, | |
| .slds-spinner_medium .slds-spinner__dot-a:after, | |
| .slds-spinner_medium .slds-spinner__dot-b:after, | |
| .slds-spinner--medium.slds-spinner:after, | |
| .slds-spinner--medium .slds-spinner__dot-a:after, | |
| .slds-spinner--medium .slds-spinner__dot-b:after { | |
| animation-name: dotsBounceAfter-medium; | |
| top: -0.25rem; | |
| right: -0.25rem; } | |
| @keyframes dotsBounceBefore-medium { | |
| 0% { | |
| transform: translate3d(0, 0, 0); } | |
| 60% { | |
| transform: translate3d(0, 0, 0); | |
| animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } | |
| 80% { | |
| transform: translate3d(-0.5rem, 0, 0); | |
| animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } | |
| 100% { | |
| transform: translate3d(0, 0, 0); } } | |
| @keyframes dotsBounceAfter-medium { | |
| 0% { | |
| transform: translate3d(0, 0, 0); } | |
| 60% { | |
| transform: translate3d(0, 0, 0); | |
| animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } | |
| 80% { | |
| transform: translate3d(0.5rem, 0, 0); | |
| animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } | |
| 100% { | |
| transform: translateX(0); } } | |
| /** | |
| * This is the large spinner | |
| * | |
| * @selector .slds-spinner_large | |
| * @restrict .slds-spinner | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-spinner_large, | |
| .slds-spinner--large { | |
| width: 2.75rem; } | |
| .slds-spinner_large.slds-spinner_inline, | |
| .slds-spinner--large.slds-spinner_inline { | |
| height: 2.75rem; } | |
| .slds-spinner_large.slds-spinner:before, .slds-spinner_large.slds-spinner:after, | |
| .slds-spinner_large .slds-spinner__dot-a:before, | |
| .slds-spinner_large .slds-spinner__dot-b:before, | |
| .slds-spinner_large .slds-spinner__dot-a:after, | |
| .slds-spinner_large .slds-spinner__dot-b:after, | |
| .slds-spinner--large.slds-spinner:before, | |
| .slds-spinner--large.slds-spinner:after, | |
| .slds-spinner--large .slds-spinner__dot-a:before, | |
| .slds-spinner--large .slds-spinner__dot-b:before, | |
| .slds-spinner--large .slds-spinner__dot-a:after, | |
| .slds-spinner--large .slds-spinner__dot-b:after { | |
| width: 0.625rem; | |
| height: 0.625rem; } | |
| .slds-spinner_large.slds-spinner:before, | |
| .slds-spinner_large .slds-spinner__dot-a:before, | |
| .slds-spinner_large .slds-spinner__dot-b:before, | |
| .slds-spinner--large.slds-spinner:before, | |
| .slds-spinner--large .slds-spinner__dot-a:before, | |
| .slds-spinner--large .slds-spinner__dot-b:before { | |
| animation-name: dotsBounceBefore-medium; | |
| top: -0.3125rem; | |
| left: -0.3125rem; } | |
| .slds-spinner_large.slds-spinner:after, | |
| .slds-spinner_large .slds-spinner__dot-a:after, | |
| .slds-spinner_large .slds-spinner__dot-b:after, | |
| .slds-spinner--large.slds-spinner:after, | |
| .slds-spinner--large .slds-spinner__dot-a:after, | |
| .slds-spinner--large .slds-spinner__dot-b:after { | |
| animation-name: dotsBounceAfter-medium; | |
| top: -0.3125rem; | |
| right: -0.3125rem; } | |
| @keyframes dotsBounceBefore-large { | |
| 0% { | |
| transform: translate3d(0, 0, 0); } | |
| 60% { | |
| transform: translate3d(0, 0, 0); | |
| animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } | |
| 80% { | |
| transform: translate3d(-0.75rem, 0, 0); | |
| animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } | |
| 100% { | |
| transform: translateX(0); } } | |
| @keyframes dotsBounceAfter-large { | |
| 0% { | |
| transform: translate3d(0, 0, 0); } | |
| 60% { | |
| transform: translate3d(0, 0, 0); | |
| animation-timing-function: cubic-bezier(0.55, 0.085, 0.68, 0.53); } | |
| 80% { | |
| transform: translate3d(0.75rem, 0, 0); | |
| animation-timing-function: cubic-bezier(0, 1.11, 0.7, 1.43); } | |
| 100% { | |
| transform: translateX(0); } } | |
| /** | |
| * @summary Wrapper of split view | |
| * | |
| * @name base | |
| * @selector .slds-split-view_container | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-split-view_container { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| min-width: 0; | |
| /** | |
| * @summary Modifier to rotate the left arrow icon on close | |
| * @selector .slds-is-closed | |
| * @restrict .slds-split-view_container, .slds-split-view__toggle-button | |
| * @modifier | |
| * @group toggle | |
| */ | |
| /** | |
| * @summary Toggles open/close state of split view container | |
| * @selector .slds-is-open | |
| * @restrict .slds-split-view_container, .slds-split-view__toggle-button | |
| * @modifier | |
| * @group toggle | |
| */ } | |
| .slds-split-view_container.slds-is-closed .slds-split-view { | |
| display: none; } | |
| .slds-split-view_container.slds-is-closed .slds-split-view__toggle-button .slds-button__icon { | |
| transform: rotate(180deg); } | |
| .slds-split-view_container.slds-is-open { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; } | |
| .slds-split-view_container.slds-is-open .slds-split-view { | |
| display: inherit; } | |
| .slds-split-view_container.slds-is-open .slds-split-view__toggle-button .slds-button__icon { | |
| transform: rotate(0); } | |
| /** | |
| * @selector .slds-split-view | |
| * @restrict .slds-split-view_container article | |
| */ | |
| .slds-split-view { | |
| background: #fafaf9; | |
| color: #3e3e3c; } | |
| /** | |
| * @summary Header of split view | |
| * @selector .slds-split-view__header | |
| * @restrict .slds-split-view header | |
| * @notes Contains elements such as the list filter, view switcher and refresh button | |
| */ | |
| .slds-split-view__header { | |
| padding: 1rem 1rem 0.5rem 1.5rem; } | |
| /** | |
| * @summary Column headers | |
| * @selector .slds-split-view__list-header | |
| * @restrict .slds-split-view div | |
| */ | |
| .slds-split-view__list-header { | |
| font-size: 0.875rem; | |
| font-weight: 700; | |
| line-height: 1.25; | |
| border-top: 1px solid #dddbda; | |
| border-bottom: 1px solid #dddbda; | |
| padding: 0.5rem 1rem 0.5rem 1.5rem; } | |
| /** | |
| * @summary Each row of the list of split view | |
| * @selector .slds-split-view__list-item | |
| * @restrict .slds-split-view li | |
| */ | |
| .slds-split-view__list-item { | |
| display: -ms-flexbox; | |
| display: flex; | |
| position: relative; | |
| border-bottom: 1px solid #dddbda; | |
| font-size: 0.75rem; } | |
| .slds-split-view__list-item:hover, .slds-split-view__list-item:focus { | |
| background: white; } | |
| .slds-split-view__list-item .slds-indicator_unread, | |
| .slds-split-view__list-item .slds-indicator--unread { | |
| background: #1589ee; } | |
| /** | |
| * @summary Unread states | |
| * @selector .slds-indicator_unread | |
| * @restrict .slds-split-view__list-item abbr | |
| */ | |
| .slds-indicator_unread, | |
| .slds-indicator--unread { | |
| width: 8px; | |
| height: 8px; | |
| position: absolute; | |
| top: 1rem; | |
| left: 0.5rem; | |
| display: block; | |
| border-radius: 50%; | |
| background: #c23934; } | |
| /** | |
| * @summary Actionable row of split view | |
| * @selector .slds-split-view__list-item-action | |
| * @restrict .slds-split-view__list-item a | |
| */ | |
| .slds-split-view__list-item-action { | |
| color: currentColor; | |
| padding: 0.75rem 1rem 0.75rem 1.5rem; } | |
| .slds-split-view__list-item-action:hover, .slds-split-view__list-item-action:focus { | |
| outline: none; | |
| background: white; | |
| color: currentColor; | |
| text-decoration: none; } | |
| .slds-split-view__list-item-action:focus { | |
| box-shadow: inset 0 0 0 1px #1589ee; } | |
| .slds-split-view__list-item-action[aria-selected="true"] { | |
| box-shadow: inset 4px 0 0 #0070d2; } | |
| .slds-split-view__list-item-action[aria-selected="true"]:focus { | |
| box-shadow: inset 4px 0 0 #0070d2, inset 0 0 0 1px #0070d2; } | |
| /** | |
| * @summary Expand/Collapse button to toggle open/close state of split view | |
| * @selector .slds-split-view__toggle-button | |
| * @restrict .slds-split-view_container button | |
| */ | |
| .slds-split-view__toggle-button { | |
| position: absolute; | |
| right: -0.75rem; | |
| height: 100%; | |
| width: 0.75rem; | |
| background: white; | |
| border-radius: 0; | |
| border: 1px solid #dddbda; } | |
| .slds-split-view__toggle-button:hover, .slds-split-view__toggle-button:focus { | |
| background: white; } | |
| .slds-split-view__toggle-button.slds-is-closed .slds-button__icon { | |
| transform: rotate(180deg); } | |
| /** | |
| * @summary Initializes tile | |
| * | |
| * @name base | |
| * @selector .slds-tile | |
| * @restrict article | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-tile { | |
| /** | |
| * @selector .slds-tile__detail | |
| * @restrict .slds-tile div | |
| */ | |
| /** | |
| * @selector .slds-tile__meta | |
| * @restrict .slds-tile div | |
| */ } | |
| .slds-tile + .slds-tile { | |
| margin-top: 0.5rem; } | |
| .slds-tile__detail { | |
| position: relative; } | |
| .slds-tile__meta { | |
| color: #080707; } | |
| .slds-tile_board, | |
| .slds-tile--board { | |
| position: relative; } | |
| .slds-tile_board__icon, | |
| .slds-tile--board__icon { | |
| width: 1rem; | |
| height: 1rem; | |
| position: absolute; | |
| bottom: 0.25rem; | |
| right: 0.25rem; } | |
| .slds-tile_board .slds-has-alert, | |
| .slds-tile--board .slds-has-alert { | |
| padding-right: 1.5rem; } | |
| @media (min-width: 48em) { | |
| .slds-tabs_default .slds-tabs__item + .slds-tabs__item, | |
| .slds-tabs--default .slds-tabs__item + .slds-tabs__item { | |
| margin-left: 1.5rem; } } | |
| .slds-tabs_default .slds-tabs__item > a, | |
| .slds-tabs--default .slds-tabs__item > a { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| display: block; | |
| text-decoration: none; | |
| cursor: pointer; | |
| height: 2.5rem; | |
| line-height: 2.5rem; | |
| border-bottom: 2px solid transparent; | |
| padding: 0 0.5rem; | |
| color: #3e3e3c; } | |
| .slds-tabs_default .slds-tabs__item > a:focus, | |
| .slds-tabs--default .slds-tabs__item > a:focus { | |
| outline: 0; } | |
| @media (min-width: 48em) { | |
| .slds-tabs_default .slds-tabs__item > a, | |
| .slds-tabs--default .slds-tabs__item > a { | |
| padding: 0 1rem; } } | |
| .slds-tabs_default .slds-tabs__item > a:hover, .slds-tabs_default .slds-tabs__item > a:focus, | |
| .slds-tabs--default .slds-tabs__item > a:hover, | |
| .slds-tabs--default .slds-tabs__item > a:focus { | |
| text-decoration: none; | |
| border-color: #0070d2; | |
| color: #080707; } | |
| .slds-tabs_default .slds-tabs__item.slds-active a, | |
| .slds-tabs--default .slds-tabs__item.slds-active a { | |
| border-color: #1589ee; | |
| color: #080707; } | |
| .slds-tabs_default .slds-tabs__item.slds-active a:focus, | |
| .slds-tabs--default .slds-tabs__item.slds-active a:focus { | |
| color: #0070d2; } | |
| .slds-tabs_default > .slds-tabs__content, | |
| .slds-tabs--default > .slds-tabs__content { | |
| position: relative; | |
| padding: 1rem 0; } | |
| /** | |
| * @summary Initializes a default tablist | |
| * | |
| * @name base | |
| * @selector .slds-tabs_default | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-tabs_default, | |
| .slds-tabs--default { | |
| display: block; | |
| width: 100%; | |
| background-color: white; | |
| /** | |
| * @summary A tab item that has an overflow menu | |
| * @selector .slds-tabs__item_overflow | |
| * @restrict .slds-tabs_default__item | |
| */ } | |
| .slds-tabs_default .slds-tabs__item_overflow, | |
| .slds-tabs_default .slds-tabs__item--overflow, | |
| .slds-tabs--default .slds-tabs__item_overflow, | |
| .slds-tabs--default .slds-tabs__item--overflow { | |
| overflow: visible; } | |
| /** | |
| * @summary Creates the container for the default tabs | |
| * @selector .slds-tabs_default__nav | |
| * @restrict .slds-tabs_default ul | |
| */ | |
| .slds-tabs_default__nav, | |
| .slds-tabs--default__nav { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| border-bottom: 1px solid #dddbda; } | |
| /** | |
| * @summary Styles each list item as a single tab | |
| * @selector .slds-tabs_default__item | |
| * @restrict .slds-tabs_default ul li | |
| */ | |
| .slds-tabs_default__item, | |
| .slds-tabs--default__item { | |
| color: #3e3e3c; | |
| position: relative; | |
| padding: 0 0.75rem; | |
| margin-bottom: -1px; | |
| /** | |
| * @summary Active state for a tab item | |
| * @selector .slds-is-active | |
| * @restrict .slds-tabs_default__item | |
| * @notes Required on the `<li>` element that is associated with the active tab panel | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Focus state for a tab item | |
| * @selector .slds-has-focus | |
| * @restrict .slds-tabs_default__item | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Creates styles for a Tab Item when its tab has new activity in | |
| * @selector .slds-has-notification | |
| * @restrict .slds-tabs_default__item, .slds-dropdown__item | |
| */ | |
| /** | |
| * @summary Creates styles for a Tab Item when its in an unsaved or dirty state | |
| * @selector .slds-is-unsaved | |
| * @restrict .slds-tabs_default__item | |
| */ } | |
| .slds-tabs_default__item:after, | |
| .slds-tabs--default__item:after { | |
| display: block; | |
| content: ''; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| height: 0; | |
| position: absolute; } | |
| .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 { | |
| color: #080707; } | |
| .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: #1589ee; | |
| height: 0.188rem; } | |
| .slds-tabs_default__item.slds-active .slds-tabs_default__link, | |
| .slds-tabs_default__item.slds-active .slds-tabs--default__link, .slds-tabs_default__item.slds-is-active .slds-tabs_default__link, | |
| .slds-tabs_default__item.slds-is-active .slds-tabs--default__link, | |
| .slds-tabs--default__item.slds-active .slds-tabs_default__link, | |
| .slds-tabs--default__item.slds-active .slds-tabs--default__link, | |
| .slds-tabs--default__item.slds-is-active .slds-tabs_default__link, | |
| .slds-tabs--default__item.slds-is-active .slds-tabs--default__link { | |
| font-weight: 700; } | |
| .slds-tabs_default__item.slds-active .slds-tabs_default__link:hover, | |
| .slds-tabs_default__item.slds-active .slds-tabs--default__link:hover, .slds-tabs_default__item.slds-is-active .slds-tabs_default__link:hover, | |
| .slds-tabs_default__item.slds-is-active .slds-tabs--default__link:hover, | |
| .slds-tabs--default__item.slds-active .slds-tabs_default__link:hover, | |
| .slds-tabs--default__item.slds-active .slds-tabs--default__link:hover, | |
| .slds-tabs--default__item.slds-is-active .slds-tabs_default__link:hover, | |
| .slds-tabs--default__item.slds-is-active .slds-tabs--default__link:hover { | |
| color: currentColor; } | |
| .slds-tabs_default__item:hover:after, | |
| .slds-tabs--default__item:hover:after { | |
| height: 0.125rem; | |
| background-color: #007add; | |
| transition: height 300ms; } | |
| .slds-tabs_default__item:focus, .slds-tabs_default__item.slds-has-focus, | |
| .slds-tabs--default__item:focus, | |
| .slds-tabs--default__item.slds-has-focus { | |
| outline: 0; } | |
| .slds-tabs_default__item:focus:after, .slds-tabs_default__item.slds-has-focus:after, | |
| .slds-tabs--default__item:focus:after, | |
| .slds-tabs--default__item.slds-has-focus:after { | |
| height: 3px; | |
| background-color: #1589ee; } | |
| .slds-tabs_default__item .slds-tabs_default__link:focus, | |
| .slds-tabs_default__item .slds-tabs--default__link:focus, | |
| .slds-tabs--default__item .slds-tabs_default__link:focus, | |
| .slds-tabs--default__item .slds-tabs--default__link:focus { | |
| box-shadow: none; } | |
| .slds-tabs_default__item.slds-has-notification, | |
| .slds-tabs--default__item.slds-has-notification { | |
| background: #f3f2f2; } | |
| .slds-tabs_default__item.slds-has-notification:after, | |
| .slds-tabs--default__item.slds-has-notification:after { | |
| background-color: #dddbda; } | |
| .slds-tabs_default__item.slds-has-notification:hover:after, | |
| .slds-tabs--default__item.slds-has-notification:hover:after { | |
| background-color: #0070d2; } | |
| .slds-tabs_default__item.slds-has-notification .slds-indicator_unread, | |
| .slds-tabs--default__item.slds-has-notification .slds-indicator_unread { | |
| display: inline-block; | |
| height: 0.375rem; | |
| width: 0.375rem; | |
| position: relative; | |
| top: auto; | |
| left: auto; } | |
| .slds-tabs_default__item.slds-is-unsaved .slds-indicator_unread, | |
| .slds-tabs--default__item.slds-is-unsaved .slds-indicator_unread { | |
| margin-left: -0.35rem; } | |
| .slds-tabs_default__item.slds-has-notification .slds-indicator_unsaved, | |
| .slds-tabs--default__item.slds-has-notification .slds-indicator_unsaved { | |
| top: -0.25rem; } | |
| /** | |
| * @summary Styles each actionable element inside each tab item | |
| * @selector .slds-tabs_default__link | |
| * @restrict .slds-tabs_default__item a, .slds-tabs_default__item button | |
| */ | |
| .slds-tabs_default__link, | |
| .slds-tabs--default__link { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| display: block; | |
| text-decoration: none; | |
| cursor: pointer; | |
| height: 2.5rem; | |
| line-height: 2.5rem; | |
| color: currentColor; | |
| border: 0; | |
| text-transform: inherit; | |
| z-index: 1; } | |
| .slds-tabs_default__link:focus, | |
| .slds-tabs--default__link:focus { | |
| outline: 0; } | |
| .slds-tabs_default__link:hover, .slds-tabs_default__link:focus, | |
| .slds-tabs--default__link:hover, | |
| .slds-tabs--default__link:focus { | |
| text-decoration: none; | |
| box-shadow: none; | |
| color: currentColor; } | |
| .slds-tabs_default__link[tabindex="0"]:focus, | |
| .slds-tabs--default__link[tabindex="0"]:focus { | |
| text-decoration: underline; } | |
| /** | |
| * @summary List item containing the overflow button menu | |
| * @selector .slds-tabs_default__overflow-button | |
| * @restrict .slds-tabs_default__item | |
| */ | |
| .slds-tabs_default__overflow-button { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| height: 2.5rem; | |
| line-height: 2.5rem; } | |
| .slds-tabs_default__overflow-button .slds-button { | |
| line-height: inherit; | |
| color: #3e3e3c; | |
| box-shadow: none; } | |
| .slds-tabs_default__overflow-button .slds-button:focus { | |
| text-decoration: underline; } | |
| .slds-tabs_default__overflow-button.slds-has-error .slds-button, .slds-tabs_default__overflow-button.slds-has-success .slds-button { | |
| color: white; } | |
| /** | |
| * @summary Styles each tab content wrapper | |
| * @selector .slds-tabs_default__content | |
| * @restrict .slds-tabs_default div | |
| */ | |
| .slds-tabs_default__content, | |
| .slds-tabs--default__content { | |
| position: relative; | |
| padding: 1rem 0; } | |
| /** | |
| * @name medium | |
| * @summary Medium sized tabs | |
| * @selector .slds-tabs_medium | |
| * @restrict .slds-tabs_default | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-tabs_medium .slds-tabs_default__item { | |
| font-size: 1rem; } | |
| /** | |
| * @name large | |
| * @summary Large sized tabs | |
| * @selector .slds-tabs_large | |
| * @restrict .slds-tabs_default | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-tabs_large .slds-tabs_default__item { | |
| font-size: 1.25rem; } | |
| /** | |
| * @summary | |
| * @selector .slds-tabs__left-icon | |
| * @restrict .slds-tabs_default__item span | |
| */ | |
| .slds-tabs__left-icon { | |
| margin-right: 0.5rem; } | |
| .slds-tabs__left-icon:empty { | |
| margin-right: 0; } | |
| /** | |
| * @summary | |
| * @selector .slds-tabs__right-icon | |
| * @restrict .slds-tabs_default__item span | |
| */ | |
| .slds-tabs__right-icon { | |
| margin-left: 0.5rem; } | |
| /** | |
| * @summary Styles the tab title | |
| * @selector .slds-tabs_mobile__title | |
| * @restrict .slds-tabs_mobile div | |
| * @deprecated | |
| */ | |
| .slds-tabs_mobile__title { | |
| width: 100%; | |
| height: 100%; | |
| color: #2b2826; | |
| font-size: 1rem; | |
| padding: 0 1rem; } | |
| .slds-tabs_mobile__title .slds-button:focus { | |
| box-shadow: none; } | |
| /** | |
| * @summary Actionable button inside of tab that would | |
| * drill into the tab content | |
| * | |
| * @selector slds-tabs_mobile__title-action | |
| * @restrict slds-tabs_mobile__title button | |
| * @deprecated | |
| */ | |
| .slds-tabs_mobile__title-action { | |
| width: 100%; | |
| height: 100%; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; } | |
| .slds-tabs_mobile__title-action .slds-button__icon { | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; } | |
| /** | |
| * @summary Styles the list of tabs for the mobile tab set | |
| * | |
| * @selector .slds-tabs_mobile | |
| * @restrict ul | |
| * @deprecated | |
| */ | |
| .slds-tabs_mobile { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; } | |
| /** | |
| * @summary Styles each list item as a single drill-in tab | |
| * @selector .slds-tabs_mobile__item | |
| * @restrict .slds-tabs_mobile li | |
| * @deprecated | |
| */ | |
| .slds-tabs_mobile__item { | |
| display: -ms-flexbox; | |
| display: flex; | |
| border-top: 1px solid #dddbda; | |
| height: 2.75rem; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| .slds-tabs_mobile__item:active { | |
| background-color: #f3f2f2; } | |
| .slds-tabs_mobile__item:last-child { | |
| border-bottom: 1px solid #dddbda; } | |
| .slds-tabs_mobile + .slds-tabs_mobile .slds-tabs_mobile__item:first-child { | |
| border-top: 0; } | |
| /** | |
| * @summary Container to hold mobile tabs and their panels | |
| * | |
| * @name mobile-stack | |
| * @selector .slds-tabs-mobile__container | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-tabs-mobile__container { | |
| position: relative; | |
| overflow: hidden; } | |
| .slds-panel__body .slds-tabs-mobile { | |
| margin-left: -0.75rem; | |
| margin-right: -0.75rem; } | |
| .slds-panel__body .slds-tabs-mobile:first-child { | |
| margin-top: -0.75rem; } | |
| .slds-panel__body .slds-tabs-mobile:first-child .slds-tabs-mobile__item:first-child { | |
| border-top: 0; } | |
| /** | |
| * @summary Styles the list of tabs for the mobile tab set | |
| * | |
| * @selector .slds-tabs-mobile | |
| * @restrict .slds-tabs-mobile__container ul | |
| */ | |
| .slds-tabs-mobile { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-direction: column; | |
| flex-direction: column; | |
| background-color: white; } | |
| /** | |
| * @summary Styles each list item as a single drill-in tab | |
| * @selector .slds-tabs-mobile__item | |
| * @restrict .slds-tabs-mobile li | |
| */ | |
| .slds-tabs-mobile__item { | |
| display: -ms-flexbox; | |
| display: flex; | |
| border-top: 1px solid #dddbda; | |
| height: 2.75rem; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; | |
| color: #2b2826; | |
| font-size: 1rem; | |
| padding: 0 0.75rem; } | |
| .slds-tabs-mobile__item:active { | |
| background-color: #f3f2f2; } | |
| .slds-tabs-mobile__item:last-child { | |
| border-bottom: 1px solid #dddbda; } | |
| .slds-is-mobile .slds-tabs-mobile__item .slds-button:active { | |
| color: currentColor; } | |
| /** | |
| * @summary Wrapper for adjacent mobile tab sets | |
| * | |
| * @selector .slds-tabs-mobile__group | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-tabs-mobile__group .slds-tabs-mobile__container + .slds-tabs-mobile__container .slds-tabs-mobile__item:first-child { | |
| border-top: 0; } | |
| .slds-tabs_scoped .slds-tabs__item, | |
| .slds-tabs--scoped .slds-tabs__item { | |
| position: relative; | |
| margin-bottom: -1px; } | |
| .slds-tabs_scoped .slds-tabs__item + .slds-tabs__item, | |
| .slds-tabs--scoped .slds-tabs__item + .slds-tabs__item { | |
| margin-left: -1px; } | |
| .slds-tabs_scoped .slds-tabs__item:first-child > a, | |
| .slds-tabs--scoped .slds-tabs__item:first-child > a { | |
| border-left: 0; | |
| border-radius: 0.25rem 0 0 0; } | |
| .slds-tabs_scoped .slds-tabs__item > a, | |
| .slds-tabs--scoped .slds-tabs__item > a { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| display: block; | |
| text-decoration: none; | |
| cursor: pointer; | |
| height: 2.5rem; | |
| line-height: 2.5rem; | |
| padding: 0 1.5rem; | |
| color: #3e3e3c; | |
| background-clip: padding-box; | |
| border-left: 1px solid transparent; | |
| border-right: 1px solid transparent; } | |
| .slds-tabs_scoped .slds-tabs__item > a:focus, | |
| .slds-tabs--scoped .slds-tabs__item > a:focus { | |
| outline: 0; } | |
| .slds-tabs_scoped .slds-tabs__item > a:hover, .slds-tabs_scoped .slds-tabs__item > a:focus, | |
| .slds-tabs--scoped .slds-tabs__item > a:hover, | |
| .slds-tabs--scoped .slds-tabs__item > a:focus { | |
| text-decoration: none; | |
| color: #005fb2; | |
| border-color: #dddbda; } | |
| .slds-tabs_scoped .slds-tabs__item .slds-active > a, | |
| .slds-tabs--scoped .slds-tabs__item .slds-active > a { | |
| background-color: white; | |
| color: #006dcc; | |
| border-color: #dddbda; } | |
| .slds-tabs_scoped .slds-tabs__item .slds-active > a:focus, | |
| .slds-tabs--scoped .slds-tabs__item .slds-active > a:focus { | |
| text-decoration: underline; } | |
| .slds-tabs_scoped > .slds-tabs__content, | |
| .slds-tabs--scoped > .slds-tabs__content { | |
| background-color: white; | |
| border: 1px solid #dddbda; | |
| border-top: 0; | |
| border-radius: 0 0 0.25rem 0.25rem; | |
| padding: 1rem; } | |
| /** | |
| * A scoped tabset style has a closed container with a defined border. Initialize | |
| * a scoped tab set by applying the `.slds-tab_scoped` class to the containing | |
| * `<div>` around the tab list and tab panels. The `<ul>` element also requires | |
| * the class `.slds-tab_scoped__nav` to prevent styles from bleeding into nested tabs. | |
| * | |
| * @summary Initializes scoped tabs | |
| * | |
| * @name base | |
| * @selector .slds-tabs_scoped | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-tabs_scoped, | |
| .slds-tabs--scoped { | |
| display: block; | |
| width: 100%; } | |
| /** | |
| * @summary Creates the container for the default tabs | |
| * @selector .slds-tabs_scoped__nav | |
| * @restrict .slds-tabs_scoped ul | |
| */ | |
| .slds-tabs_scoped__nav, | |
| .slds-tabs--scoped__nav { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| background-color: #fafaf9; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem 0.25rem 0 0; } | |
| /** | |
| * @summary Styles each list item as a single tab | |
| * @selector .slds-tabs_scoped__item | |
| * @restrict .slds-tabs_scoped ul li | |
| */ | |
| .slds-tabs_scoped__item, | |
| .slds-tabs--scoped__item { | |
| position: relative; | |
| margin-bottom: -1px; } | |
| .slds-tabs_scoped__item + .slds-tabs_scoped__item, | |
| .slds-tabs_scoped__item + .slds-tabs--scoped__item, | |
| .slds-tabs--scoped__item + .slds-tabs_scoped__item, | |
| .slds-tabs--scoped__item + .slds-tabs--scoped__item { | |
| margin-left: -1px; } | |
| .slds-tabs_scoped__item:first-child .slds-tabs_scoped__link, | |
| .slds-tabs_scoped__item:first-child .slds-tabs--scoped__link, | |
| .slds-tabs--scoped__item:first-child .slds-tabs_scoped__link, | |
| .slds-tabs--scoped__item:first-child .slds-tabs--scoped__link { | |
| border-left: 0; | |
| border-radius: 0.25rem 0 0 0; } | |
| /** | |
| * @summary Styles each tab content wrapper | |
| * @selector .slds-tabs_scoped__content | |
| * @restrict .slds-tabs_scoped div | |
| */ | |
| .slds-tabs_scoped__content, | |
| .slds-tabs--scoped__content { | |
| background-color: white; | |
| border: 1px solid #dddbda; | |
| border-top: 0; | |
| border-radius: 0 0 0.25rem 0.25rem; | |
| padding: 1rem; } | |
| /** | |
| * @summary Styles each actionable element inside each tab item | |
| * @selector .slds-tabs_scoped__link | |
| * @restrict .slds-tabs_scoped__item a, .slds-tabs_scoped__item button | |
| */ | |
| .slds-tabs_scoped__link, | |
| .slds-tabs--scoped__link { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| display: block; | |
| text-decoration: none; | |
| cursor: pointer; | |
| height: 2.5rem; | |
| line-height: 2.5rem; | |
| padding: 0 1rem; | |
| color: #3e3e3c; | |
| background-clip: padding-box; | |
| border: 0; | |
| border-left: 1px solid transparent; | |
| border-right: 1px solid transparent; | |
| border-radius: 0; } | |
| .slds-tabs_scoped__link:focus, | |
| .slds-tabs--scoped__link:focus { | |
| outline: 0; } | |
| .slds-tabs_scoped__link:hover, .slds-tabs_scoped__link:focus, | |
| .slds-tabs--scoped__link:hover, | |
| .slds-tabs--scoped__link:focus { | |
| text-decoration: none; | |
| color: currentColor; | |
| border-color: #dddbda; } | |
| /** | |
| * @summary List item containing the overflow button menu | |
| * @selector .slds-tabs_scoped__overflow-button | |
| * @restrict .slds-tabs_scoped__item | |
| */ | |
| .slds-tabs_scoped__overflow-button { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| height: 2.5rem; | |
| line-height: 2.5rem; } | |
| .slds-tabs_scoped__overflow-button .slds-button { | |
| line-height: inherit; | |
| color: #3e3e3c; | |
| padding: 0 1rem; } | |
| /** | |
| * @name active | |
| * @summary Active state for a tab item | |
| * @selector .slds-is-active | |
| * @restrict .slds-tabs_scoped__item | |
| * @notes Required on the `<li>` element that is associated with the active tab panel | |
| * @modifier | |
| * @group visibility | |
| */ | |
| .slds-active .slds-tabs_scoped__link, | |
| .slds-active .slds-tabs--scoped__link, | |
| .slds-is-active .slds-tabs_scoped__link, | |
| .slds-is-active .slds-tabs--scoped__link { | |
| background-color: white; | |
| border-color: #dddbda; | |
| font-weight: 700; | |
| color: #080707; } | |
| .slds-active .slds-tabs_scoped__link:focus, | |
| .slds-active .slds-tabs--scoped__link:focus, | |
| .slds-is-active .slds-tabs_scoped__link:focus, | |
| .slds-is-active .slds-tabs--scoped__link:focus { | |
| text-decoration: underline; } | |
| /** | |
| * @name medium | |
| * @summary Medium sized tabs | |
| * @selector .slds-tabs_medium | |
| * @restrict .slds-tabs_scoped | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-tabs_medium .slds-tabs_scoped__item { | |
| font-size: 1rem; } | |
| .slds-tabs_medium .slds-tabs_scoped__link { | |
| padding-left: 1.5rem; | |
| padding-right: 1.5rem; } | |
| /** | |
| * @name large | |
| * @summary Large sized tabs | |
| * @selector .slds-tabs_large | |
| * @restrict .slds-tabs_scoped | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-tabs_large .slds-tabs_scoped__item { | |
| font-size: 1.25rem; } | |
| .slds-tabs_large .slds-tabs_scoped__link { | |
| padding-left: 2rem; | |
| padding-right: 2rem; } | |
| .slds-tabs__nav-scroller.slds-has-overflow { | |
| position: relative; | |
| padding-right: 4.7rem; } | |
| .slds-tab__scroll-controls { | |
| display: none; } | |
| .slds-has-overflow .slds-tabs__nav-scroller_inner, | |
| .slds-has-overflow .slds-tabs__nav-scroller--inner { | |
| overflow: hidden; } | |
| .slds-has-overflow .slds-tabs_scoped__nav, | |
| .slds-has-overflow .slds-tabs--scoped__nav, | |
| .slds-has-overflow .slds-tabs_default__nav, | |
| .slds-has-overflow .slds-tabs--default__nav { | |
| border: 0; } | |
| .slds-has-overflow .slds-tab__scroll-controls { | |
| display: -ms-flexbox; | |
| display: flex; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| bottom: 0; | |
| background-color: white; } | |
| .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-has-overflow .slds-tabs__nav-scroller_inner, | |
| .slds-tabs--default .slds-has-overflow .slds-tabs__nav-scroller--inner { | |
| border-bottom: 1px solid #dddbda; } | |
| .slds-tabs_default .slds-tab__scroll-controls, | |
| .slds-tabs--default .slds-tab__scroll-controls { | |
| padding: calc(0.25rem - 1px) 1px calc(0.25rem - 1px) 0.5rem; | |
| border-bottom: 1px solid #dddbda; } | |
| .slds-tabs_scoped .slds-has-overflow .slds-tabs__nav-scroller_inner, | |
| .slds-tabs_scoped .slds-has-overflow .slds-tabs__nav-scroller--inner, | |
| .slds-tabs--scoped .slds-has-overflow .slds-tabs__nav-scroller_inner, | |
| .slds-tabs--scoped .slds-has-overflow .slds-tabs__nav-scroller--inner { | |
| border: 1px solid #dddbda; | |
| border-bottom: 0; | |
| border-radius: 0.25rem 0.25rem 0 0; | |
| background-color: #f3f2f2; } | |
| .slds-tabs_scoped .slds-has-overflow .slds-tabs_scoped__item, | |
| .slds-tabs_scoped .slds-has-overflow .slds-tabs--scoped__item, | |
| .slds-tabs--scoped .slds-has-overflow .slds-tabs_scoped__item, | |
| .slds-tabs--scoped .slds-has-overflow .slds-tabs--scoped__item { | |
| margin-bottom: 0; | |
| border-bottom: 1px solid #dddbda; } | |
| .slds-tabs_scoped .slds-has-overflow .slds-tabs_scoped__item.slds-active, | |
| .slds-tabs_scoped .slds-has-overflow .slds-tabs--scoped__item.slds-active, | |
| .slds-tabs--scoped .slds-has-overflow .slds-tabs_scoped__item.slds-active, | |
| .slds-tabs--scoped .slds-has-overflow .slds-tabs--scoped__item.slds-active { | |
| border-bottom-color: white; } | |
| .slds-tabs_scoped .slds-tab__scroll-controls, | |
| .slds-tabs--scoped .slds-tab__scroll-controls { | |
| padding: calc(0.25rem - 1px) 0.25rem; | |
| border: 1px solid #dddbda; | |
| border-radius: 0 0.25rem 0 0; } | |
| /** | |
| * @summary Subtabs | |
| * | |
| * @name sub-tabs | |
| * @selector .slds-sub-tabs | |
| * @restrict .slds-tabs_default | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-sub-tabs .slds-tabs_default__nav { | |
| border-bottom-width: 1px; } | |
| /** | |
| * @summary Subtab item | |
| * @selector .slds-sub-tabs__item | |
| * @restrict .slds-sub-tabs li | |
| */ | |
| .slds-sub-tabs__item { | |
| text-transform: none; | |
| letter-spacing: 0; | |
| margin-bottom: 0; | |
| /** | |
| * @summary Success notification on a sub tab | |
| * | |
| * @selector .slds-has-success | |
| * @restrict .slds-sub-tabs__item | |
| */ | |
| /** | |
| * @summary Error notification on a sub tab | |
| * | |
| * @selector .slds-has-error | |
| * @restrict .slds-sub-tabs__item | |
| */ | |
| /** | |
| * @summary Warning notification on a sub tab | |
| * | |
| * @selector .slds-has-warning | |
| * @restrict .slds-sub-tabs__item | |
| */ } | |
| .slds-sub-tabs__item.slds-active, .slds-sub-tabs__item.slds-is-open { | |
| background: rgba(21, 137, 238, 0.1); } | |
| .slds-sub-tabs__item:after { | |
| content: none; } | |
| .slds-sub-tabs__item .slds-tabs_default__link:focus, .slds-sub-tabs__item.slds-has-focus { | |
| text-decoration: underline; } | |
| .slds-sub-tabs__item + .slds-sub-tabs__item { | |
| margin-left: 0; } | |
| @keyframes error-pulse { | |
| 0% { | |
| background-color: #c23934; } | |
| 40% { | |
| background-color: #870500; } | |
| 100% { | |
| background-color: #c23934; } } | |
| @keyframes success-pulse { | |
| 0% { | |
| background-color: #04844b; } | |
| 40% { | |
| background-color: #004a29; } | |
| 100% { | |
| background-color: #04844b; } } | |
| @keyframes warning-pulse { | |
| 0% { | |
| background-color: #ffb75d; } | |
| 40% { | |
| background-color: #ff9e2c; } | |
| 100% { | |
| background-color: #ffb75d; } } | |
| .slds-sub-tabs__item.slds-has-success:before { | |
| animation-duration: 1s; | |
| animation-iteration-count: 3; | |
| animation-timing-function: linear; | |
| background-color: #04844b; | |
| bottom: 0; | |
| content: " "; | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); } | |
| .slds-sub-tabs__item.slds-has-success:hover:before { | |
| background-color: #004a29; } | |
| .slds-sub-tabs__item.slds-has-success:before { | |
| animation-name: success-pulse; } | |
| .slds-sub-tabs__item.slds-has-error:before { | |
| animation-duration: 1s; | |
| animation-iteration-count: 3; | |
| animation-timing-function: linear; | |
| background-color: #c23934; | |
| bottom: 0; | |
| content: " "; | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); } | |
| .slds-sub-tabs__item.slds-has-error:hover:before { | |
| background-color: #870500; } | |
| .slds-sub-tabs__item.slds-has-error:before { | |
| animation-name: error-pulse; } | |
| .slds-sub-tabs__item.slds-has-success, .slds-sub-tabs__item.slds-has-error { | |
| color: white; } | |
| .slds-sub-tabs__item.slds-has-success .slds-indicator_unread, .slds-sub-tabs__item.slds-has-error .slds-indicator_unread { | |
| background-color: white; } | |
| .slds-sub-tabs__item.slds-has-success .slds-indicator_unsaved, .slds-sub-tabs__item.slds-has-error .slds-indicator_unsaved { | |
| color: white; } | |
| .slds-sub-tabs__item.slds-has-warning:before { | |
| animation-duration: 1s; | |
| animation-iteration-count: 3; | |
| animation-timing-function: linear; | |
| background-color: #ffb75d; | |
| bottom: 0; | |
| content: " "; | |
| left: 0; | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| transition: background-color 0.25s cubic-bezier(0.39, 0.575, 0.565, 1); } | |
| .slds-sub-tabs__item.slds-has-warning:hover:before { | |
| background-color: #ff9e2c; } | |
| .slds-sub-tabs__item.slds-has-warning:before { | |
| animation-name: warning-pulse; } | |
| .slds-sub-tabs__item.slds-has-warning .slds-indicator_unread { | |
| background-color: currentColor; } | |
| .slds-sub-tabs__item.slds-has-warning .slds-indicator_unsaved { | |
| color: currentColor; } | |
| .slds-has-pinned-regions .slds-sub-tabs__item.slds-active:before, .slds-has-pinned-regions .slds-sub-tabs__item.slds-is-open:before { | |
| content: ''; | |
| height: 3px; | |
| display: block; | |
| background: #1589ee; | |
| position: absolute; | |
| top: 0; | |
| left: -1px; | |
| right: -1px; } | |
| .slds-navigation-list-vertical, | |
| .slds-navigation-list--vertical { | |
| /** | |
| * Active item in vertical navigation list | |
| * | |
| * @selector .slds-is-active | |
| * @restrict .slds-navigation-list-vertical li | |
| * @modifier | |
| */ } | |
| .slds-navigation-list-vertical .slds-is-active, | |
| .slds-navigation-list--vertical .slds-is-active { | |
| color: #080707; } | |
| .slds-navigation-list-vertical .slds-is-active .slds-navigation-list-vertical__action, | |
| .slds-navigation-list-vertical .slds-is-active .slds-navigation-list--vertical__action, | |
| .slds-navigation-list--vertical .slds-is-active .slds-navigation-list-vertical__action, | |
| .slds-navigation-list--vertical .slds-is-active .slds-navigation-list--vertical__action { | |
| background-color: rgba(21, 137, 238, 0.1); | |
| border-color: #dddbda; | |
| border-left-color: #1589ee; } | |
| .slds-navigation-list-vertical .slds-is-active .slds-navigation-list-vertical__action:focus, | |
| .slds-navigation-list-vertical .slds-is-active .slds-navigation-list--vertical__action:focus, | |
| .slds-navigation-list--vertical .slds-is-active .slds-navigation-list-vertical__action:focus, | |
| .slds-navigation-list--vertical .slds-is-active .slds-navigation-list--vertical__action:focus { | |
| border-left-width: 0.5rem; | |
| color: #005fb2; } | |
| /** | |
| * Vertical Navigation on tinted background | |
| * | |
| * @selector .slds-navigation-list-vertical_shade | |
| * @restrict .slds-navigation-list-vertical | |
| * @modifier | |
| * @group theme | |
| */ | |
| .slds-navigation-list-vertical_shade .slds-is-active .slds-navigation-list-vertical__action, | |
| .slds-navigation-list-vertical_shade .slds-is-active .slds-navigation-list--vertical__action, | |
| .slds-navigation-list-vertical--shade .slds-is-active .slds-navigation-list-vertical__action, | |
| .slds-navigation-list-vertical--shade .slds-is-active .slds-navigation-list--vertical__action, | |
| .slds-navigation-list--vertical-inverse .slds-is-active .slds-navigation-list-vertical__action, | |
| .slds-navigation-list--vertical-inverse .slds-is-active .slds-navigation-list--vertical__action { | |
| background-color: white; } | |
| /** | |
| * Actionable item inside a vertical navigation list | |
| * | |
| * @selector .slds-navigation-list-vertical__action | |
| * @restrict .slds-navigation-list-vertical a | |
| * @required | |
| */ | |
| .slds-navigation-list-vertical__action, | |
| .slds-navigation-list--vertical__action { | |
| display: block; | |
| border-left: 0.25rem solid transparent; | |
| border-top: 1px solid transparent; | |
| border-bottom: 1px solid transparent; | |
| padding: 0.5rem 1.5rem; } | |
| .slds-navigation-list-vertical__action:hover, .slds-navigation-list-vertical__action:focus, | |
| .slds-navigation-list--vertical__action:hover, | |
| .slds-navigation-list--vertical__action:focus { | |
| outline: 0; | |
| background-color: #f3f2f2; } | |
| .slds-navigation-list-vertical__action:active, | |
| .slds-navigation-list--vertical__action:active { | |
| background-color: #ecebea; } | |
| /** | |
| * @name list | |
| * @selector .slds-nav-vertical | |
| * @restrict nav, fieldset | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-nav-vertical { | |
| position: relative; } | |
| /** | |
| * @name compact | |
| * @summary Modifer to reduce spacing between navigation items | |
| * @selector .slds-nav-vertical_compact | |
| * @restrict .slds-nav-vertical | |
| * @modifier | |
| * @group spacing | |
| */ | |
| .slds-nav-vertical_compact .slds-nav-vertical__title, | |
| .slds-nav-vertical_compact .slds-nav-vertical__action { | |
| padding: 0.25rem 1.5rem; } | |
| /** | |
| * @name shade | |
| * @summary Modifier to adjust list item when vertical navigation is sitting on top of a shaded background | |
| * @selector .slds-nav-vertical_shade | |
| * @restrict .slds-nav-vertical | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-nav-vertical_shade .slds-is-active.slds-nav-vertical__item:before { | |
| background: white; } | |
| .slds-nav-vertical_shade .slds-nav-vertical__item:hover:before { | |
| background: white; } | |
| .slds-nav-vertical_shade .slds-is-active .slds-nav-vertical__action { | |
| border-color: #dddbda; } | |
| /** | |
| * @summary Section title of the vertical navigation | |
| * @selector .slds-nav-vertical__title | |
| * @restrict .slds-nav-vertical h2, .slds-nav-vertical legend | |
| */ | |
| .slds-nav-vertical__title { | |
| padding: 0.5rem 1rem; | |
| padding-left: 1.5rem; | |
| font-size: 1rem; | |
| font-weight: 700; } | |
| .slds-nav-vertical__title:not(:first-of-type) { | |
| margin-top: 0.5rem; } | |
| .slds-nav-vertical__section:not(:first-of-type) { | |
| margin-top: 0.5rem; } | |
| /** | |
| * @summary List of the vertical navigation | |
| * @selector .slds-nav-vertical__item | |
| * @restrict .slds-nav-vertical li, .slds-nav-vertical span | |
| */ | |
| .slds-nav-vertical__item { | |
| position: relative; } | |
| .slds-nav-vertical__item:before { | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| content: ''; } | |
| .slds-nav-vertical__item:hover:before, .slds-nav-vertical__item.slds-is-active:before { | |
| background: rgba(21, 137, 238, 0.1); } | |
| /** | |
| * @summary Actionable element inside of vertical navigation list item | |
| * @selector .slds-nav-vertical__action | |
| * @restrict .slds-nav-vertical a, .slds-nav-vertical button, .slds-nav-vertical label | |
| */ | |
| .slds-nav-vertical__action { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| width: 100%; | |
| padding: 0.5rem 1.5rem 0.5rem 2rem; | |
| color: #080707; | |
| border-top: 1px solid transparent; | |
| border-bottom: 1px solid transparent; | |
| border-radius: 0; | |
| box-shadow: inset 0 0 0 #1589ee; | |
| cursor: pointer; } | |
| .slds-nav-vertical__action:active, .slds-nav-vertical__action:hover, .slds-nav-vertical__action:focus { | |
| color: currentColor; } | |
| .slds-nav-vertical__action:hover { | |
| text-decoration: none; | |
| box-shadow: inset 0.125rem 0 0 #1589ee; } | |
| [dir="rtl"] .slds-nav-vertical__action:hover { | |
| box-shadow: inset -0.125rem 0 0 #1589ee; } | |
| .slds-nav-vertical__action:focus { | |
| outline: 0; | |
| text-decoration: underline; } | |
| /** | |
| * @name item-active | |
| * @summary Active state of a list item within a vertical navigation | |
| * @selector .slds-is-active | |
| * @restrict .slds-nav-vertical__item | |
| * @modifier | |
| * @group interactions | |
| */ | |
| .slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action { | |
| font-weight: bold; | |
| box-shadow: inset 0.25rem 0 0 #1589ee; } | |
| [dir="rtl"] .slds-nav-vertical__item.slds-is-active .slds-nav-vertical__action { | |
| box-shadow: inset -0.25rem 0 0 #1589ee; } | |
| /** | |
| * @name radio-group | |
| * @summary Version of vertical nav that uses radio buttons | |
| * @selector .slds-nav-vertical__item [type="radio"] | |
| * @restrict .slds-nav-vertical | |
| * @support dev-ready | |
| * @variant | |
| * @release 2.5.0 | |
| */ | |
| .slds-nav-vertical__item { | |
| display: block; } | |
| .slds-nav-vertical__item [type="radio"] { | |
| width: 1px; | |
| height: 1px; | |
| border: 0; | |
| clip: rect(0 0 0 0); | |
| margin: -1px; | |
| overflow: hidden; | |
| padding: 0; | |
| position: absolute; } | |
| .slds-nav-vertical__item [type="radio"]:focus + .slds-nav-vertical__action { | |
| /** | |
| * @summary Used for styling the radio button | |
| * @selector .slds-nav-vertical_radio-faux | |
| * @restrict .slds-nav-vertical__action span | |
| */ } | |
| .slds-nav-vertical__item [type="radio"]:focus + .slds-nav-vertical__action .slds-nav-vertical_radio-faux { | |
| text-decoration: underline; } | |
| .slds-nav-vertical__item [type="radio"]:checked + .slds-nav-vertical__action { | |
| font-weight: bold; | |
| background-color: #d8edff; | |
| box-shadow: inset 0.25rem 0 0 #1589ee; } | |
| .slds-nav-vertical_shade .slds-nav-vertical__item [type="radio"]:checked + .slds-nav-vertical__action { | |
| border-color: #dddbda; | |
| background-color: white; } | |
| /** | |
| * Actionable element that toggles visibility of overflown list items | |
| * | |
| * @selector .slds-nav-vertical__action_overflow | |
| * @restrict .slds-nav-vertical__action | |
| */ | |
| .slds-nav-vertical__action_overflow { | |
| color: #706e6b; } | |
| .slds-nav-vertical__action_overflow[aria-expanded="true"] .slds-button__icon { | |
| transform: rotate(90deg); } | |
| [dir="rtl"] .slds-nav-vertical__action_overflow[aria-expanded="true"] .slds-button__icon { | |
| transform: rotate(-90deg); } | |
| /** | |
| * Text inside of actionable element that toggles visibility of overflown list items | |
| * | |
| * @selector .slds-nav-vertical__action-text | |
| * @restrict .slds-nav-vertical__action_overflow span | |
| */ | |
| .slds-nav-vertical__action-text { | |
| color: #006dcc; } | |
| /** | |
| * @summary Initializes alert notification | |
| * @name base | |
| * @selector .slds-notify_alert | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-notify_alert, | |
| .slds-notify--alert { | |
| color: white; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| position: relative; | |
| background: rgba(112, 110, 107, 0.95); | |
| font-weight: 300; | |
| padding: 0.5rem 2rem 0.5rem 0.5rem; | |
| text-align: center; | |
| width: 100%; | |
| /** | |
| * @summary Alert close button | |
| * @selector .slds-notify__close | |
| * @restrict .slds-notify_alert div | |
| */ } | |
| .slds-notify_alert a, | |
| .slds-notify--alert a { | |
| color: currentColor; | |
| border: 1px solid transparent; | |
| border-radius: 0.25rem; } | |
| .slds-notify_alert a:hover, .slds-notify_alert a:focus, | |
| .slds-notify--alert a:hover, | |
| .slds-notify--alert a:focus { | |
| text-decoration: none; | |
| outline: 0; } | |
| .slds-notify_alert a:focus, | |
| .slds-notify--alert a:focus { | |
| box-shadow: 0 0 3px #ecebea; | |
| border: 1px solid #ecebea; } | |
| .slds-notify_alert a:active, | |
| .slds-notify--alert a:active { | |
| color: rgba(255, 255, 255, 0.5); } | |
| .slds-notify_alert a[disabled], | |
| .slds-notify--alert a[disabled] { | |
| color: rgba(255, 255, 255, 0.15); } | |
| .slds-notify_alert .slds-notify__close, | |
| .slds-notify--alert .slds-notify__close { | |
| float: right; | |
| position: absolute; | |
| top: 50%; | |
| right: 0.75rem; | |
| margin-left: 0.25rem; | |
| transform: translateY(-50%); } | |
| .slds-modal_prompt .slds-modal__close, | |
| .slds-modal--prompt .slds-modal__close { | |
| display: none; } | |
| /** | |
| * @summary Initializes Prompt style notification | |
| * | |
| * @name base | |
| * @selector .slds-modal_prompt | |
| * @restrict section[role="alertdialog"] | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-modal_prompt .slds-modal__header, | |
| .slds-modal--prompt .slds-modal__header { | |
| border-bottom: 0; } | |
| .slds-modal_prompt .slds-modal__content, | |
| .slds-modal--prompt .slds-modal__content { | |
| padding-left: 2rem; | |
| padding-right: 2rem; } | |
| .slds-modal_prompt .slds-modal__footer, | |
| .slds-modal--prompt .slds-modal__footer { | |
| border-top: 0; | |
| text-align: center; } | |
| /** | |
| * @summary Initializes a toast container | |
| * | |
| * @name base | |
| * @selector .slds-notify_container | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-notify-container, | |
| .slds-notify_container { | |
| position: fixed; | |
| width: 100%; | |
| left: 0; | |
| top: 0; | |
| z-index: 10000; | |
| text-align: center; } | |
| /** | |
| * @summary Initializes toast notification | |
| * @selector .slds-notify_toast | |
| * @restrict .slds-notify_container div | |
| */ | |
| .slds-notify_toast, | |
| .slds-notify--toast { | |
| color: white; | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| position: relative; | |
| background: #706e6b; | |
| font-weight: 300; | |
| border-radius: 0.25rem; | |
| margin: 0.5rem; | |
| padding: 0.75rem 3rem 0.75rem 1.5rem; | |
| min-width: 30rem; | |
| text-align: left; | |
| -ms-flex-pack: start; | |
| justify-content: flex-start; | |
| /** | |
| * @summary Alert close button | |
| * @selector .slds-notify__close | |
| * @restrict .slds-notify_toast div | |
| */ } | |
| .slds-notify_toast a, | |
| .slds-notify--toast a { | |
| color: currentColor; | |
| border: 1px solid transparent; | |
| border-radius: 0.25rem; } | |
| .slds-notify_toast a:hover, .slds-notify_toast a:focus, | |
| .slds-notify--toast a:hover, | |
| .slds-notify--toast a:focus { | |
| text-decoration: none; | |
| outline: 0; } | |
| .slds-notify_toast a:focus, | |
| .slds-notify--toast a:focus { | |
| box-shadow: 0 0 3px #ecebea; | |
| border: 1px solid #ecebea; } | |
| .slds-notify_toast a:active, | |
| .slds-notify--toast a:active { | |
| color: rgba(255, 255, 255, 0.5); } | |
| .slds-notify_toast a[disabled], | |
| .slds-notify--toast a[disabled] { | |
| color: rgba(255, 255, 255, 0.15); } | |
| .slds-notify_toast .slds-notify__close, | |
| .slds-notify--toast .slds-notify__close { | |
| float: right; | |
| position: absolute; | |
| top: 0.75rem; | |
| right: 0.75rem; | |
| margin-left: 0.25rem; | |
| transform: translateY(-0.125rem); } | |
| .slds-region_narrow .slds-notify_toast, | |
| .slds-region_narrow .slds-notify--toast { | |
| min-width: auto; | |
| width: 100%; | |
| margin-left: 0; } | |
| /** | |
| * | |
| * @name base | |
| * @selector .slds-scoped-notification | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-scoped-notification { | |
| padding: 0.75rem; } | |
| /** | |
| * @summary This renders a light notification | |
| * | |
| * @selector .slds-scoped-notification_light | |
| * @restrict .slds-scoped-notification | |
| * @modifier | |
| */ | |
| .slds-scoped-notification_light { | |
| background-color: #f3f2f2; } | |
| /** | |
| * @summary This renders the dark notification | |
| * | |
| * @selector .slds-scoped-notification_dark | |
| * @restrict .slds-scoped-notification | |
| * @modifier | |
| */ | |
| .slds-scoped-notification_dark { | |
| background-color: #706e6b; | |
| color: white; } | |
| .slds-scoped-notification_dark a { | |
| color: white; | |
| text-decoration: underline; } | |
| .slds-scoped-notification_dark a:hover, .slds-scoped-notification_dark a:active { | |
| text-decoration: none; } | |
| /** | |
| * | |
| * @selector .slds-notification-container | |
| * @restrict div | |
| */ | |
| .slds-notification-container { | |
| position: fixed; | |
| display: block; | |
| width: 20.5rem; | |
| right: 0.25rem; | |
| top: 0.25rem; | |
| padding: 0.25rem 0.25rem 0.5rem; | |
| z-index: 8500; } | |
| /** | |
| * @name base | |
| * @selector .slds-notification | |
| * @restrict .slds-notification-container section, .slds-notification-container div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-notification { | |
| position: relative; | |
| width: 20rem; | |
| border: 1px solid #ecebea; | |
| border-radius: 0.25rem; | |
| box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.2); | |
| transition-duration: 0.4s; | |
| transition-timing-function: ease-in-out; | |
| transition-property: margin, max-height, opacity, top; } | |
| .slds-notification .slds-media__body { | |
| opacity: 1; | |
| transition-property: opacity; | |
| transition-duration: 0.4s; | |
| transition-timing-function: ease-in-out; } | |
| .slds-notification + .slds-notification { | |
| margin-top: 0.5rem; } | |
| .slds-notification:nth-of-type(1) { | |
| z-index: 4; } | |
| .slds-notification:nth-of-type(2) { | |
| z-index: 3; } | |
| .slds-notification:nth-of-type(3) { | |
| z-index: 2; } | |
| .slds-notification:nth-of-type(4) { | |
| z-index: 1; } | |
| .slds-notification:nth-of-type(n+3) { | |
| overflow: hidden; } | |
| .slds-notification:nth-of-type(n+4) { | |
| margin-top: 0; | |
| transform: scaleX(0.95) translateY(-90%); } | |
| .slds-notification:nth-of-type(n+4) .slds-media__body, .slds-notification:nth-of-type(n+5) { | |
| opacity: 0; } | |
| .slds-notification:nth-of-type(n+6) { | |
| display: none; } | |
| /** | |
| * @summary The body of the notification | |
| * | |
| * @selector .slds-notification__body | |
| * @restrict .slds-notification div | |
| */ | |
| /** | |
| * @summary Main reminder component | |
| * | |
| * @selector .slds-notification__target | |
| * @restrict .slds-notification__body a | |
| */ | |
| .slds-notification__target { | |
| padding: 0.75rem; | |
| border-radius: 0.25rem; | |
| background-color: #f4f6f9; | |
| color: #080707; } | |
| .slds-notification__target:hover, .slds-notification__target:focus { | |
| background-color: white; | |
| text-decoration: none; } | |
| /** | |
| * @summary Optional notification footer | |
| * | |
| * @selector .slds-notification__footer | |
| * @restrict .slds-notification div | |
| */ | |
| .slds-notification__footer { | |
| padding: 0.75rem 0.75rem 1rem 0.75rem; } | |
| /** | |
| * @summary Notification close button | |
| * | |
| * @selector .slds-notification__close | |
| * @restrict .slds-notification__body button | |
| */ | |
| .slds-notification__close { | |
| position: absolute; | |
| top: 0; | |
| right: 0; } | |
| .slds-modal__header .slds-notify-container, | |
| .slds-modal__header .slds-notify_container { | |
| position: absolute; } | |
| .slds-modal__header .slds-notify_toast, | |
| .slds-modal__header .slds-notify--toast { | |
| display: block; } | |
| /** | |
| * @summary Sets styles for trial header bar | |
| * @name header | |
| * @selector .slds-trial-header | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-trial-header { | |
| color: white; | |
| height: 3.125rem; | |
| background: #061c3f; | |
| padding: 0 1rem; } | |
| .slds-trial-header .slds-icon { | |
| fill: currentColor; } | |
| .slds-trial-header a:not([class*="slds-button_"]):not([class*="slds-button--"]), .slds-trial-header button:not([class*="slds-button_"]):not([class*="slds-button--"]) { | |
| color: currentColor; | |
| border: 1px solid transparent; | |
| border-radius: 0.25rem; } | |
| .slds-trial-header a:not([class*="slds-button_"]):not([class*="slds-button--"]):hover, .slds-trial-header a:not([class*="slds-button_"]):not([class*="slds-button--"]):focus, .slds-trial-header button:not([class*="slds-button_"]):not([class*="slds-button--"]):hover, .slds-trial-header button:not([class*="slds-button_"]):not([class*="slds-button--"]):focus { | |
| text-decoration: none; | |
| outline: 0; } | |
| .slds-trial-header a:not([class*="slds-button_"]):not([class*="slds-button--"]):focus, .slds-trial-header button:not([class*="slds-button_"]):not([class*="slds-button--"]):focus { | |
| box-shadow: 0 0 3px #ecebea; | |
| border: 1px solid #ecebea; } | |
| .slds-trial-header a:not([class*="slds-button_"]):not([class*="slds-button--"]):active, .slds-trial-header button:not([class*="slds-button_"]):not([class*="slds-button--"]):active { | |
| color: rgba(255, 255, 255, 0.5); } | |
| .slds-trial-header a:not([class*="slds-button_"]):not([class*="slds-button--"])[disabled], .slds-trial-header button:not([class*="slds-button_"]):not([class*="slds-button--"])[disabled] { | |
| color: rgba(255, 255, 255, 0.15); } | |
| .slds-trial-header .slds-icon_selected, | |
| .slds-trial-header .slds-icon--selected { | |
| fill: #4bca81; } | |
| .slds-lookup { | |
| position: relative; | |
| width: 100%; | |
| /** | |
| * Initializes lookup results list | |
| * | |
| * @selector .slds-lookup__list | |
| * @restrict .slds-lookup ul | |
| */ | |
| /** | |
| * Initializes lookup results list container | |
| * | |
| * @selector .slds-lookup__menu | |
| * @restrict .slds-lookup div | |
| * @notes Applies positioning and container styles | |
| * @required | |
| */ | |
| /** | |
| * Non-actionable label inside of a lookup item | |
| * | |
| * @selector .slds-lookup__item_label | |
| * @restrict .slds-lookup h3 | |
| */ | |
| /** | |
| * Actionable element inside of a lookup item | |
| * | |
| * @selector .slds-lookup__item-action | |
| * @restrict .slds-lookup a, .slds-lookup button, .slds-lookup span | |
| */ | |
| /** | |
| * Actionable element inside of a lookup item that's output is single line text | |
| * | |
| * @selector .slds-lookup__item-action_label | |
| * @restrict .slds-lookup__item-action | |
| */ | |
| /** | |
| * Search input inside of lookup | |
| * | |
| * @selector .slds-lookup__search-input | |
| * @restrict .slds-lookup input | |
| */ | |
| /** | |
| * Primary entity name within lookup item | |
| * | |
| * @selector .slds-lookup__result-text | |
| * @restrict .slds-lookup__item-action span | |
| */ | |
| /** | |
| * Secondary info of primary entity name within lookup item | |
| * | |
| * @selector .slds-lookup__result-meta | |
| * @restrict .slds-lookup__item-action span | |
| */ | |
| /** | |
| * Deal with Lookup when user activates the lookup | |
| * | |
| * @selector .slds-is-open | |
| * @restrict .slds-lookup | |
| * @modifier | |
| */ | |
| /** | |
| * Deal with lookup if selection has been made | |
| * | |
| * @selector .slds-has-selection | |
| * @restrict .slds-lookup | |
| */ } | |
| .slds-lookup__list { | |
| max-height: calc((((1.5 * 0.812rem) + (1.5 * 0.75rem) - 0.25rem) + (0.25rem * 2)) * 8); | |
| overflow-y: auto; } | |
| .slds-lookup__menu { | |
| background: white; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| z-index: 7000; | |
| position: absolute; | |
| width: 100%; | |
| padding: 0.5rem 0; | |
| display: none; } | |
| .slds-lookup__item > a, | |
| .slds-lookup__item > span, | |
| .slds-lookup__item > button { | |
| display: block; | |
| padding: 0.5rem; | |
| color: #080707; | |
| text-align: left; | |
| width: 100%; | |
| line-height: 1.5; | |
| border-radius: 0; } | |
| .slds-lookup__item > a:hover, .slds-lookup__item > a:focus, | |
| .slds-lookup__item > span:hover, | |
| .slds-lookup__item > span:focus, | |
| .slds-lookup__item > button:hover, | |
| .slds-lookup__item > button:focus { | |
| outline: 0; | |
| background-color: #f3f2f2; | |
| color: #080707; | |
| text-decoration: none; } | |
| .slds-lookup__item > a .slds-icon, | |
| .slds-lookup__item > span .slds-icon, | |
| .slds-lookup__item > button .slds-icon { | |
| margin-right: 0.5rem; } | |
| .slds-lookup__item_label, .slds-lookup__item--label { | |
| font-size: 0.875rem; | |
| font-weight: 700; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| padding: 0.5rem 1rem; } | |
| .slds-lookup__item-action { | |
| font-size: 0.812rem; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| padding: 0.25rem 1rem; | |
| color: #080707; | |
| text-align: left; | |
| width: 100%; | |
| line-height: 1.5; | |
| border-radius: 0; | |
| /** | |
| * Hover/focus state for actionable lookup item | |
| * | |
| * @selector .slds-has-focus | |
| * @restrict .slds-lookup__item-action | |
| * @modifier | |
| */ } | |
| .slds-lookup__item-action:hover, .slds-lookup__item-action:focus, .slds-lookup__item-action.slds-has-focus { | |
| outline: 0; | |
| cursor: pointer; | |
| background-color: #f3f2f2; | |
| color: #080707; | |
| text-decoration: none; } | |
| .slds-lookup__item-action .slds-media__figure { | |
| margin-right: 0.5rem; | |
| margin-top: 0.25rem; } | |
| .slds-lookup__item-action_label, .slds-lookup__item-action--label { | |
| padding: 0.5rem 1rem; } | |
| .slds-lookup__item-action_label > .slds-icon, .slds-lookup__item-action--label > .slds-icon { | |
| margin-left: 0.25rem; | |
| margin-right: 0.75rem; } | |
| .slds-lookup__search-input { | |
| width: 100%; } | |
| .slds-lookup__result-text { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| display: block; | |
| margin-bottom: 0.125rem; } | |
| .slds-lookup__result-meta { | |
| display: block; | |
| margin-top: -0.25rem; | |
| color: #3e3e3c; } | |
| .slds-lookup__pill-container { | |
| padding: 0 0.5rem 0.25rem; } | |
| .slds-lookup mark { | |
| font-weight: 700; | |
| background-color: transparent; | |
| color: inherit; } | |
| .slds-lookup.slds-is-open .slds-lookup__menu { | |
| display: block; } | |
| .slds-lookup.slds-has-selection .slds-input, | |
| .slds-lookup.slds-has-selection .slds-input__icon, | |
| .slds-lookup.slds-has-selection .slds-lookup__search-input { | |
| display: none; } | |
| .slds-lookup.slds-has-selection .slds-pill { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| .slds-lookup.slds-has-selection .slds-pill__remove { | |
| margin-left: auto; } | |
| /** | |
| * @summary Container that manages layout when a listbox of pill options sit next to a combobox search input | |
| * | |
| * @name base | |
| * @selector .slds-combobox | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| /** | |
| * An image is the preferred format for an avatar | |
| * | |
| * @summary Creates an avatar component | |
| * @name base | |
| * @selector .slds-avatar | |
| * @restrict div, span, a | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .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; | |
| /** | |
| * @name Small Group Image | |
| * @summary Uses the small group image as the avatar icon | |
| * @selector .slds-avatar_group-image-small | |
| * @restrict .slds-avatar | |
| */ | |
| /** | |
| * @name Medium Group Image | |
| * @summary Uses the medium group image as the avatar icon | |
| * @selector .slds-avatar_group-image-medium | |
| * @restrict .slds-avatar | |
| */ | |
| /** | |
| * @name Large Group Image | |
| * @summary Uses the large group image as the avatar icon | |
| * @selector .slds-avatar_group-image-large | |
| * @restrict .slds-avatar | |
| */ | |
| /** | |
| * @name Small User Profile Image | |
| * @summary Uses the small user avatar image as the avatar icon | |
| * @selector .slds-avatar_profile-image-small | |
| * @restrict .slds-avatar | |
| */ | |
| /** | |
| * @name Medium User Profile Image | |
| * @summary Uses the medium user avatar image as the avatar icon | |
| * @selector .slds-avatar_profile-image-medium | |
| * @restrict .slds-avatar | |
| */ | |
| /** | |
| * @name Large User Profile Image | |
| * @summary Uses the large user avatar image as the avatar icon | |
| * @selector .slds-avatar_profile-image-large | |
| * @restrict .slds-avatar | |
| */ } | |
| .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; } | |
| /** | |
| * @name x-small | |
| * @summary Size modifier for avatars - X-Small | |
| * @selector .slds-avatar_x-small | |
| * @restrict .slds-avatar | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-avatar_x-small, | |
| .slds-avatar--x-small { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| font-size: 0.625rem; } | |
| .slds-avatar_x-small .slds-icon, | |
| .slds-avatar--x-small .slds-icon { | |
| width: 1.25rem; | |
| height: 1.25rem; } | |
| /** | |
| * @name small | |
| * @summary Size modifier for avatars - Small | |
| * @selector .slds-avatar_small | |
| * @restrict .slds-avatar | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-avatar_small, | |
| .slds-avatar--small { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| font-size: 0.625rem; } | |
| .slds-avatar_small .slds-icon, | |
| .slds-avatar--small .slds-icon { | |
| width: 1.5rem; | |
| height: 1.5rem; } | |
| /** | |
| * @name medium | |
| * @summary Size modifier for avatars - Medium | |
| * @selector .slds-avatar_medium | |
| * @restrict .slds-avatar | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-avatar_medium, | |
| .slds-avatar--medium { | |
| width: 2rem; | |
| height: 2rem; | |
| font-size: 0.875rem; } | |
| .slds-avatar_medium .slds-icon, | |
| .slds-avatar--medium .slds-icon { | |
| width: 2rem; | |
| height: 2rem; } | |
| /** | |
| * @name large | |
| * @summary Size modifier for avatars - Large | |
| * @selector .slds-avatar_large | |
| * @restrict .slds-avatar | |
| * @modifier | |
| * @group size | |
| */ | |
| .slds-avatar_large, | |
| .slds-avatar--large { | |
| width: 3rem; | |
| height: 3rem; | |
| font-size: 1.125rem; | |
| font-weight: 300; | |
| line-height: 1.25; } | |
| .slds-avatar_large .slds-icon, | |
| .slds-avatar--large .slds-icon { | |
| width: 3rem; | |
| height: 3rem; } | |
| /** | |
| * @name circle | |
| * @summary Make avatar a circle | |
| * @selector .slds-avatar_circle | |
| * @restrict .slds-avatar | |
| * @modifier | |
| * @group radius | |
| */ | |
| .slds-avatar_circle, | |
| .slds-avatar--circle { | |
| border-radius: 50%; } | |
| .slds-avatar_empty, | |
| .slds-avatar--empty { | |
| border: 1px dashed #dddbda; } | |
| /** | |
| * If an image is unavailable, up to two letters can be used instead. | |
| * If the record name contains two words, like first and last name, use | |
| * the first capitalized letter of each. For records that only have a | |
| * single word name, use the first two letters of that word using one | |
| * capital and one lower case letter. The background color should match | |
| * the entity or object icon. If no image or initials are available, | |
| * the fallback should be the icon for the entity or object. | |
| * | |
| * @name initials | |
| * @summary Used for initials inside an avatar | |
| * @selector .slds-avatar__initials | |
| * @restrict .slds-avatar abbr | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-avatar__initials { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -ms-flex-line-pack: center; | |
| align-content: 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; } | |
| /** | |
| * @name inversed | |
| * @summary Used for initials that are dark text on light background | |
| * @selector .slds-avatar__initials_inverse | |
| * @restrict .slds-avatar__initials | |
| * @modifier | |
| * @group color | |
| */ | |
| .slds-avatar__initials_inverse { | |
| background-color: #f3f2f2; | |
| color: #3e3e3c; | |
| text-shadow: none; } | |
| .slds-avatar__initials_inverse:hover { | |
| color: #3e3e3c; } | |
| /** | |
| * An image is the preferred format for an avatar | |
| * | |
| * @summary Creates an Avatar Group | |
| * @name base | |
| * @selector .slds-avatar-group | |
| * @restrict div, span | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-avatar-group { | |
| width: 2rem; | |
| height: 2rem; | |
| position: relative; | |
| display: inline-block; } | |
| /** | |
| * @summary Variant of an Avatar in an Avatar Group | |
| * @name grouped | |
| * @selector .slds-avatar-grouped | |
| * @restrict .slds-avatar-group span | |
| * @variant | |
| */ | |
| .slds-avatar-grouped { | |
| border: 1px solid white; | |
| line-height: 0; | |
| border-radius: 50%; | |
| background: #34becd; } | |
| /** | |
| * @summary Variant of an Avatar with inverse background in an Avatar Group | |
| * @name grouped-inverse | |
| * @selector .slds-avatar-grouped_inverse | |
| * @restrict .slds-avatar-grouped | |
| * @modifier | |
| */ | |
| .slds-avatar-grouped_inverse { | |
| background-color: #f3f2f2; } | |
| /** | |
| * @summary Modifier for the primary Avatar in an Avatar Group | |
| * @name grouped-primary | |
| * @selector .slds-avatar-grouped__primary | |
| * @restrict .slds-avatar-grouped | |
| * @modifier | |
| */ | |
| .slds-avatar-grouped__primary { | |
| width: 1.5rem; | |
| height: 1.5rem; | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| z-index: 1; | |
| /** | |
| * @summary Modifier for the Avatar that contains User Initials in an Avatar Group | |
| * @name initials | |
| * @selector .slds-avatar-grouped__initials | |
| * @restrict .slds-avatar-grouped | |
| * @modifier | |
| */ } | |
| .slds-avatar-grouped__primary .slds-avatar-grouped__initials { | |
| transform: scale(0.643); } | |
| /** | |
| * @summary Modifier for the secondary Avatar in an Avatar Group | |
| * @name grouped-secondary | |
| * @selector .slds-avatar-grouped__secondary | |
| * @restrict .slds-avatar-grouped | |
| * @modifier | |
| */ | |
| .slds-avatar-grouped__secondary { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| position: absolute; | |
| top: 0; | |
| right: 0; } | |
| .slds-avatar-grouped__secondary .slds-avatar-grouped__initials { | |
| transform: scale(0.5); } | |
| /** | |
| * @summary Modifier for the icon Avatar in an Avatar Group | |
| * @name icon | |
| * @selector .slds-avatar-grouped__icon | |
| * @restrict .slds-icon_container | |
| * @modifier | |
| */ | |
| .slds-avatar-grouped__icon { | |
| height: 100%; | |
| line-height: 0; } | |
| .slds-avatar-grouped__icon .slds-icon { | |
| width: 100%; | |
| height: 100%; } | |
| /** | |
| * @summary Creates an extra small Avatar Group | |
| * @name x-small | |
| * @selector .slds-avatar-group_x-small | |
| * @restrict .slds-avatar-group | |
| * @modifier | |
| * @group sizing | |
| */ | |
| .slds-avatar-group_x-small { | |
| width: 1.25rem; | |
| height: 1.25rem; } | |
| .slds-avatar-group_x-small .slds-avatar-grouped__primary { | |
| width: 1rem; | |
| height: 1rem; | |
| /** | |
| * @summary Modifier for the initials Avatar in an Avatar Group | |
| * @name initials | |
| * @selector .slds-avatar-grouped__initials | |
| * @restrict .slds-avatar__initials | |
| * @modifier | |
| */ } | |
| .slds-avatar-group_x-small .slds-avatar-grouped__primary .slds-avatar-grouped__initials { | |
| transform: scale(0.357); } | |
| .slds-avatar-group_x-small .slds-avatar-grouped__secondary { | |
| width: 0.75rem; | |
| height: 0.75rem; } | |
| .slds-avatar-group_x-small .slds-avatar-grouped__secondary .slds-avatar-grouped__initials { | |
| transform: scale(0.214); } | |
| /** | |
| * @summary Creates a small Avatar Group | |
| * @name small | |
| * @selector .slds-avatar-group_small | |
| * @restrict .slds-avatar-group | |
| * @modifier | |
| * @group sizing | |
| */ | |
| .slds-avatar-group_small { | |
| width: 1.5rem; | |
| height: 1.5rem; } | |
| .slds-avatar-group_small .slds-avatar-grouped__primary { | |
| width: 1.25rem; | |
| height: 1.25rem; } | |
| .slds-avatar-group_small .slds-avatar-grouped__primary .slds-avatar-grouped__initials { | |
| transform: scale(0.471); } | |
| .slds-avatar-group_small .slds-avatar-grouped__secondary { | |
| width: 1rem; | |
| height: 1rem; } | |
| .slds-avatar-group_small .slds-avatar-grouped__secondary .slds-avatar-grouped__initials { | |
| transform: scale(0.357); } | |
| /** | |
| * @summary Creates a medium Avatar Group | |
| * @name medium | |
| * @selector .slds-avatar-group_medium | |
| * @restrict .slds-avatar-group | |
| * @modifier | |
| * @group sizing | |
| */ | |
| .slds-avatar-group_medium { | |
| width: 2rem; | |
| height: 2rem; } | |
| .slds-avatar-group_medium .slds-avatar-grouped__primary { | |
| width: 1.5rem; | |
| height: 1.5rem; } | |
| .slds-avatar-group_medium .slds-avatar-grouped__primary .slds-avatar-grouped__initials { | |
| transform: scale(0.643); } | |
| .slds-avatar-group_medium .slds-avatar-grouped__secondary { | |
| width: 1.25rem; | |
| height: 1.25rem; } | |
| .slds-avatar-group_medium .slds-avatar-grouped__secondary .slds-avatar-grouped__initials { | |
| transform: scale(0.5); } | |
| /** | |
| * @summary Creates a large Avatar Group | |
| * @name large | |
| * @selector .slds-avatar-group_large | |
| * @restrict .slds-avatar-group | |
| * @modifier | |
| * @group sizing | |
| */ | |
| .slds-avatar-group_large { | |
| width: 3rem; | |
| height: 3rem; } | |
| .slds-avatar-group_large .slds-avatar-grouped__primary { | |
| width: 2.5rem; | |
| height: 2.5rem; } | |
| .slds-avatar-group_large .slds-avatar-grouped__primary .slds-avatar-grouped__initials { | |
| transform: scale(1); } | |
| .slds-avatar-group_large .slds-avatar-grouped__secondary { | |
| width: 1.5rem; | |
| height: 1.5rem; } | |
| .slds-avatar-group_large .slds-avatar-grouped__secondary .slds-avatar-grouped__initials { | |
| transform: scale(0.571); } | |
| /** | |
| * A figure component is a self-contained unit of content, such as an image with an optional caption. The figure component should NOT be used with icons or logos. A figure can optionally be cropped to a specific ratio such as 16x9, 4x3 and 1x1 with the use of `.slds-image__crop` and passing in a ratio class such as `.slds-image__crop_16-by-9`. | |
| * | |
| * @summary Initializes a file component | |
| * | |
| * @name base | |
| * @selector .slds-file | |
| * @restrict figure, div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-image, | |
| .slds-file { | |
| display: block; | |
| position: relative; | |
| /** | |
| * Text title for file name | |
| * | |
| * @selector .slds-file__text | |
| * @restrict .slds-file__title span | |
| */ | |
| /** | |
| * A decorator class that prevents hover styles from being applied to Files in loading state | |
| * | |
| * @selector .slds-file_loading | |
| * @restrict .slds-file, .slds-image | |
| */ | |
| /** | |
| * A decorator class that allows the hover icon to be positioned properly when File has a title | |
| * | |
| * @selector .slds-has-title | |
| * @restrict .slds-file, .slds-image | |
| */ | |
| /** | |
| * Set crop boundaries to a file component, set to 16:9 by default | |
| * | |
| * @selector .slds-file__crop | |
| * @restrict .slds-file a, .slds-file figure | |
| */ | |
| /** | |
| * Figure element that contains the image of a File | |
| * | |
| * @selector .slds-file__figure | |
| * @restrict .slds-file a, .slds-file figure | |
| */ | |
| /** | |
| * Modifying class if the image in a figure is in portrait orientation | |
| * | |
| * @selector .slds-file__figure_portrait | |
| * @restrict .slds-file a, .slds-file figure | |
| */ | |
| /** | |
| * Image caption associated to a file | |
| * | |
| * @selector .slds-file__title | |
| * @restrict .slds-file figcaption, .slds-file div | |
| */ | |
| /** | |
| * Hack to accomodate for text truncation next to actions menu buttons | |
| * | |
| * @selector .slds-file-has-actions | |
| * @restrict .slds-file__title | |
| */ | |
| /** | |
| * If text sits on top of image, apply an overlay with this class | |
| * | |
| * @selector .slds-file_overlay | |
| * @restrict .slds-file div | |
| */ | |
| /** | |
| * Change style of image to a card look | |
| * | |
| * @selector .slds-file_card | |
| * @restrict .slds-file | |
| */ | |
| /** | |
| * When only image type is available, this class help position the file type icon | |
| * | |
| * @selector .slds-file__icon | |
| * @restrict .slds-file div, .slds-file span | |
| */ | |
| /** | |
| * This positions the action menu on the title bar | |
| * | |
| * @selector .slds-file__actions-menu | |
| * @restrict .slds-file div | |
| */ | |
| /** | |
| * This adds an external icon to the top left side of the card | |
| * | |
| * @selector .slds-file__external-icon | |
| * @restrict .slds-file div | |
| * @required | |
| */ | |
| /** | |
| * This changes the color of the loading icon | |
| * | |
| * @selector .slds-file__loading-icon | |
| * @restrict .slds-file svg | |
| * @required | |
| */ | |
| /** | |
| * This vertically centers the icon when there is no title bar | |
| * | |
| * @selector .slds-file_center-icon | |
| * @restrict .slds-file | |
| */ } | |
| .slds-image .slds-file__text, | |
| .slds-file .slds-file__text { | |
| display: block; } | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:hover:before, | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:hover:after, | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:focus:before, | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:focus:after, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:hover:before, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:hover:after, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:focus:before, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:focus:after, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:hover:before, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:hover:after, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:focus:before, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:focus:after, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:hover:before, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:hover:after, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:focus:before, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:focus:after { | |
| position: absolute; | |
| z-index: 5; | |
| cursor: pointer; | |
| content: ''; } | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:hover:before, | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:focus:before, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:hover:before, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:focus:before, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:hover:before, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:focus:before, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:hover:before, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:focus:before { | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| background-color: rgba(0, 0, 0, 0.6); } | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:hover:after, | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:focus:after, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:hover:after, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:focus:after, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:hover:after, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:focus:after, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:hover:after, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:focus:after { | |
| top: 50%; | |
| left: 50%; | |
| width: 2rem; | |
| height: 2rem; | |
| /* stylelint-disable scss/operator-no-unspaced */ | |
| background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MiIgaGVpZ2h0PSI1MiI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTUxLjggMjVBMjkgMjkgMCAwIDAgMjYgOSAyOSAyOSAwIDAgMCAuMiAyNWEyIDIgMCAwIDAgMCAxLjhDNSAzNi40IDE0LjcgNDMgMjYgNDNhMjkgMjkgMCAwIDAgMjUuOC0xNiAyIDIgMCAwIDAgMC0xLjh6TTI2IDM3YTExIDExIDAgMSAxIDAtMjIgMTEgMTEgMCAxIDEgMCAyMnptMC0xOGMtNCAwLTcgMy03IDdzMyA3IDcgNyA3LTMgNy03LTMtNy03LTd6Ii8+PC9zdmc+); | |
| /* stylelint-enable scss/operator-no-unspaced */ | |
| background-size: contain; | |
| transform: translate(-50%, -50%); } | |
| @media (any-hover: none) { | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:hover:before, | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:hover:after, | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:focus:before, | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:focus:after, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:hover:before, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:hover:after, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:focus:before, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:focus:after, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:hover:before, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:hover:after, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:focus:before, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:focus:after, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:hover:before, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:hover:after, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:focus:before, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:focus:after { | |
| display: none; } } | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:hover + .slds-file__title, | |
| .slds-image:not(.slds-file_loading) .slds-file__figure:focus + .slds-file__title, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:hover + .slds-file__title, | |
| .slds-image:not(.slds-file_loading) .slds-file__crop:focus + .slds-file__title, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:hover + .slds-file__title, | |
| .slds-file:not(.slds-file_loading) .slds-file__figure:focus + .slds-file__title, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:hover + .slds-file__title, | |
| .slds-file:not(.slds-file_loading) .slds-file__crop:focus + .slds-file__title { | |
| z-index: 5; } | |
| .slds-image.slds-has-title .slds-file__figure:hover:after, | |
| .slds-image.slds-has-title .slds-file__figure:focus:after, | |
| .slds-image.slds-has-title .slds-file__crop:hover:after, | |
| .slds-image.slds-has-title .slds-file__crop:focus:after, | |
| .slds-file.slds-has-title .slds-file__figure:hover:after, | |
| .slds-file.slds-has-title .slds-file__figure:focus:after, | |
| .slds-file.slds-has-title .slds-file__crop:hover:after, | |
| .slds-file.slds-has-title .slds-file__crop:focus:after { | |
| transform: translate(-50%, calc(-50% - (2rem / 2))); } | |
| .slds-image:focus, | |
| .slds-file:focus { | |
| border: 1px solid #0070d2; | |
| box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.16); } | |
| .slds-image__crop, | |
| .slds-file__crop { | |
| display: block; | |
| position: relative; | |
| overflow: hidden; | |
| padding-top: 56.25%; | |
| /** | |
| * Crops file to a ratio of 1:1 | |
| * | |
| * @selector .slds-file__crop_1-by-1 | |
| * @restrict .slds-file__crop | |
| * @modifier | |
| * @group ratio | |
| */ | |
| /** | |
| * Crops file to a ratio of 16:9 | |
| * | |
| * @selector .slds-file__crop_16-by-9 | |
| * @restrict .slds-file__crop | |
| * @modifier | |
| * @group ratio | |
| */ | |
| /** | |
| * Crops file to a ratio of 4:3 | |
| * | |
| * @selector .slds-file__crop_4-by-3 | |
| * @restrict .slds-file__crop | |
| * @modifier | |
| * @group ratio | |
| */ } | |
| .slds-image__crop img, | |
| .slds-file__crop img { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate3d(-50%, -50%, 0); | |
| max-width: 200%; } | |
| .slds-image__crop:after, | |
| .slds-file__crop:after { | |
| content: ''; | |
| display: block; } | |
| .slds-image__crop_1-by-1, .slds-image__crop--1-by-1, | |
| .slds-file__crop_1-by-1, | |
| .slds-file__crop--1-by-1 { | |
| padding-top: 100%; } | |
| .slds-image__crop_16-by-9, .slds-image__crop--16-by-9, | |
| .slds-file__crop_16-by-9, | |
| .slds-file__crop--16-by-9 { | |
| padding-top: 56.25%; } | |
| .slds-image__crop_4-by-3, .slds-image__crop--4-by-3, | |
| .slds-file__crop_4-by-3, | |
| .slds-file__crop--4-by-3 { | |
| padding-top: 75%; } | |
| .slds-image :not(:only-child) .slds-spinner, | |
| .slds-file :not(:only-child) .slds-spinner { | |
| top: 45%; } | |
| .slds-image__figure, | |
| .slds-file__figure { | |
| display: block; | |
| min-width: 12rem; | |
| max-width: 15rem; | |
| min-height: 6rem; | |
| max-height: 15rem; } | |
| .slds-image .slds-file__figure_portrait img, | |
| .slds-file .slds-file__figure_portrait img { | |
| display: block; | |
| margin: 0 auto; | |
| max-height: 15rem; | |
| height: auto; } | |
| .slds-image__title, | |
| .slds-file__title { | |
| display: -ms-flexbox; | |
| display: flex; | |
| z-index: 5; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| padding: 0.5rem; | |
| overflow: hidden; | |
| /** | |
| * Adds overlay to file | |
| * | |
| * @selector .slds-file__title_overlay | |
| * @restrict .slds-file__title | |
| */ | |
| /** | |
| * Creates card title bar on file | |
| * | |
| * @selector .slds-file__title_card | |
| * @restrict .slds-file__title | |
| */ | |
| /** | |
| * Creates gradient scrim bar on file | |
| * | |
| * @selector .slds-file__title_scrim | |
| * @restrict .slds-file__title | |
| */ } | |
| .slds-image__title .slds-media, | |
| .slds-file__title .slds-media { | |
| overflow: hidden; } | |
| .slds-image__title_overlay, .slds-image__title--overlay, | |
| .slds-file__title_overlay, | |
| .slds-file__title--overlay { | |
| color: white; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; } | |
| .slds-image__title_overlay .slds-media__body, .slds-image__title--overlay .slds-media__body, | |
| .slds-file__title_overlay .slds-media__body, | |
| .slds-file__title--overlay .slds-media__body { | |
| z-index: 1; } | |
| .slds-image__title_card, .slds-image__title--card, | |
| .slds-file__title_card, | |
| .slds-file__title--card { | |
| background: #f3f2f2; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; } | |
| .slds-image__title_scrim, | |
| .slds-file__title_scrim { | |
| background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.5)); | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| right: 0; | |
| padding: 1rem; } | |
| .slds-image-has-actions, | |
| .slds-file-has-actions { | |
| padding-right: 3rem; } | |
| .slds-image_overlay, .slds-image--overlay, | |
| .slds-file_overlay, | |
| .slds-file--overlay { | |
| content: ''; | |
| background: rgba(0, 0, 0, 0.6); | |
| color: white; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| z-index: 1; } | |
| .slds-image_card, .slds-image--card, | |
| .slds-file_card, | |
| .slds-file--card { | |
| background: white; | |
| border: 1px solid rgba(0, 0, 0, 0.16); } | |
| .slds-image__icon, | |
| .slds-file__icon { | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate3d(-50%, -50%, 0); | |
| margin-top: -1rem; } | |
| .slds-image__actions-menu, | |
| .slds-file__actions-menu { | |
| position: absolute; | |
| z-index: 5; | |
| bottom: 0.5rem; | |
| right: 0.25rem; } | |
| .slds-image__external-icon, | |
| .slds-file__external-icon { | |
| position: absolute; | |
| top: 2.5rem; | |
| left: 1.5rem; } | |
| .slds-image__loading-icon, | |
| .slds-file__loading-icon { | |
| fill: #dddbda; } | |
| .slds-image_center-icon .slds-file__icon, | |
| .slds-file_center-icon .slds-file__icon { | |
| margin-top: 0; } | |
| /** | |
| * @summary Initializes data table | |
| * | |
| * @name base | |
| * @selector .slds-table | |
| * @restrict table | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-table { | |
| background-color: white; | |
| font-size: inherit; | |
| /** | |
| * Default Table Row Hover | |
| * | |
| * @selector .slds-no-row-hover | |
| * @restrict .slds-table | |
| * @modifier | |
| */ | |
| /** | |
| * Selected Table Row + Hover | |
| * | |
| * @selector .slds-is-selected | |
| * @restrict .slds-table tr | |
| * @modifier | |
| */ | |
| /** | |
| * By default, nowrap is applied | |
| * | |
| * @selector .slds-cell-wrap | |
| * @restrict .slds-table th, .slds-table td | |
| * @modifier | |
| */ | |
| /** | |
| * Use to add a left padding buffer to cells | |
| * | |
| * @selector .slds-cell-buffer_left | |
| * @restrict .slds-table th, .slds-table td | |
| * @modifier | |
| */ | |
| /** | |
| * Use to add a right padding buffer to cells | |
| * | |
| * @selector .slds-cell-buffer_right | |
| * @restrict .slds-table th, .slds-table td | |
| * @modifier | |
| */ | |
| /** | |
| * Focus state on a cell | |
| * | |
| * @selector .slds-has-focus | |
| * @restrict .slds-table th, .slds-table td | |
| * @modifier | |
| */ } | |
| .slds-table th, | |
| .slds-table td { | |
| padding: 0.25rem 0.5rem; | |
| white-space: nowrap; | |
| position: relative; } | |
| .slds-table th { | |
| font-weight: 400; } | |
| .slds-table th:focus { | |
| outline: 0; } | |
| .slds-table thead th { | |
| background-color: #fafaf9; | |
| color: #514f4d; | |
| padding: 0.25rem 0.5rem; | |
| font-weight: 700; | |
| line-height: normal; } | |
| .slds-table:not(.slds-no-row-hover) tbody tr:hover, | |
| .slds-table:not(.slds-no-row-hover) tbody tr:focus { | |
| outline: 0; } | |
| .slds-table:not(.slds-no-row-hover) tbody tr:hover > td, | |
| .slds-table:not(.slds-no-row-hover) tbody tr:hover > th, | |
| .slds-table:not(.slds-no-row-hover) tbody tr:focus > td, | |
| .slds-table:not(.slds-no-row-hover) tbody tr:focus > th { | |
| background-color: #f3f2f2; } | |
| .slds-table tbody tr.slds-is-selected > td, | |
| .slds-table tbody tr.slds-is-selected > th, | |
| .slds-table:not(.slds-no-row-hover) tr.slds-is-selected:hover > td, | |
| .slds-table:not(.slds-no-row-hover) tr.slds-is-selected:hover > th { | |
| background-color: #ecebea; } | |
| .slds-table tbody tr.slds-is-selected a, | |
| .slds-table:not(.slds-no-row-hover) tr.slds-is-selected:hover a { | |
| color: #00396b; } | |
| .slds-table .slds-cell-wrap { | |
| white-space: normal; | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; } | |
| .slds-table .slds-cell-shrink { | |
| width: 1%; } | |
| .slds-table .slds-cell-buffer_left, | |
| .slds-table .slds-cell-buffer--left { | |
| padding-left: 1.5rem; } | |
| .slds-table .slds-cell-buffer_right, | |
| .slds-table .slds-cell-buffer--right { | |
| padding-right: 1.5rem; } | |
| .slds-table tbody tr { | |
| counter-increment: row-number; } | |
| .slds-table .slds-row-number:after { | |
| content: counter(row-number); } | |
| .slds-table th:focus, | |
| .slds-table [role="gridcell"]:focus { | |
| outline: 0; } | |
| .slds-table th:focus, | |
| .slds-table th.slds-has-focus, | |
| .slds-table [role="gridcell"]:focus, | |
| .slds-table [role="gridcell"].slds-has-focus { | |
| box-shadow: #0070d2 0 0 0 1px inset; } | |
| .slds-table th:active, | |
| .slds-table [role="gridcell"]:active { | |
| box-shadow: none; } | |
| .slds-table .slds-radio [type='radio'] + .slds-radio__label .slds-radio_faux { | |
| margin-right: 0; } | |
| /** | |
| * Add left and right padding to the first and last cells of a table | |
| * | |
| * @selector .slds-table_cell-buffer | |
| * @restrict .slds-table | |
| * @required | |
| * @modifier | |
| */ | |
| .slds-table_cell-buffer tr > th:first-child, | |
| .slds-table_cell-buffer tr > td:first-child, | |
| .slds-table--cell-buffer tr > th:first-child, | |
| .slds-table--cell-buffer tr > td:first-child { | |
| padding-left: 1.5rem; } | |
| .slds-table_cell-buffer tr > th:last-child, | |
| .slds-table_cell-buffer tr > td:last-child, | |
| .slds-table--cell-buffer tr > th:last-child, | |
| .slds-table--cell-buffer tr > td:last-child { | |
| padding-right: 1.5rem; } | |
| /** | |
| * Add vertical borders to a table | |
| * | |
| * @selector .slds-table_bordered | |
| * @restrict .slds-table | |
| * @modifier | |
| */ | |
| .slds-table_bordered, | |
| .slds-table--bordered { | |
| border-collapse: separate; | |
| border-top: 1px solid #dddbda; | |
| border-bottom: 1px solid #dddbda; } | |
| .slds-table_bordered thead > tr + tr > th, | |
| .slds-table--bordered thead > tr + tr > th { | |
| border-top: 1px solid #dddbda; } | |
| .slds-table_bordered tbody td, | |
| .slds-table_bordered tbody th, | |
| .slds-table--bordered tbody td, | |
| .slds-table--bordered tbody th { | |
| border-top: 1px solid #dddbda; } | |
| .slds-table_bordered:not(.slds-no-row-hover) tbody tr:hover > td:not(.slds-has-focus), | |
| .slds-table_bordered:not(.slds-no-row-hover) tbody tr:hover > th:not(.slds-has-focus), | |
| .slds-table_bordered:not(.slds-no-row-hover) tbody tr:focus > td:not(.slds-has-focus), | |
| .slds-table_bordered:not(.slds-no-row-hover) tbody tr:focus > th:not(.slds-has-focus), | |
| .slds-table--bordered:not(.slds-no-row-hover) tbody tr:hover > td:not(.slds-has-focus), | |
| .slds-table--bordered:not(.slds-no-row-hover) tbody tr:hover > th:not(.slds-has-focus), | |
| .slds-table--bordered:not(.slds-no-row-hover) tbody tr:focus > td:not(.slds-has-focus), | |
| .slds-table--bordered:not(.slds-no-row-hover) tbody tr:focus > th:not(.slds-has-focus) { | |
| box-shadow: #dddbda 0 -1px 0 inset, #dddbda 0 1px 0 inset; } | |
| /** | |
| * Add column borders | |
| * | |
| * @selector .slds-table_col-bordered | |
| * @restrict .slds-table | |
| * @modifier | |
| */ | |
| .slds-table_col-bordered td + td, | |
| .slds-table_col-bordered th + th, | |
| .slds-table_col-bordered th + td, | |
| .slds-table_col-bordered td + th, | |
| .slds-table--col-bordered td + td, | |
| .slds-table--col-bordered th + th, | |
| .slds-table--col-bordered th + td, | |
| .slds-table--col-bordered td + th { | |
| border-left: 1px solid #dddbda; } | |
| /** | |
| * Add alternating strips to rows | |
| * | |
| * @selector .slds-table_striped | |
| * @restrict .slds-table | |
| * @modifier | |
| */ | |
| .slds-table_striped tbody tr:nth-of-type(even) > td, | |
| .slds-table_striped tbody tr:nth-of-type(even) > th, | |
| .slds-table--striped tbody tr:nth-of-type(even) > td, | |
| .slds-table--striped tbody tr:nth-of-type(even) > th { | |
| background-color: #f3f2f2; } | |
| /** | |
| * @summary Set table to use fixed layout for width and truncation purposes | |
| * | |
| * @name advanced | |
| * @selector .slds-table_fixed-layout | |
| * @restrict .slds-table | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-table_fixed-layout, | |
| .slds-table--fixed-layout { | |
| table-layout: fixed; | |
| width: 100%; | |
| white-space: nowrap; } | |
| .slds-table_fixed-layout thead, | |
| .slds-table--fixed-layout thead { | |
| background-color: white; } | |
| .slds-table_fixed-layout tbody, | |
| .slds-table--fixed-layout tbody { | |
| transform: translateZ(0); } | |
| .slds-table_fixed-layout .slds-cell-shrink, | |
| .slds-table--fixed-layout .slds-cell-shrink { | |
| width: 3rem; } | |
| .slds-table_fixed-layout .slds-cell-shrink:nth-child(n), | |
| .slds-table--fixed-layout .slds-cell-shrink:nth-child(n) { | |
| padding-left: 0; | |
| padding-right: 0; } | |
| .slds-table_fixed-layout .slds-cell-shrink:first-child, | |
| .slds-table--fixed-layout .slds-cell-shrink:first-child { | |
| text-align: right; | |
| padding-right: 0.5rem; } | |
| .slds-table_fixed-layout .slds-cell-shrink:last-child, | |
| .slds-table--fixed-layout .slds-cell-shrink:last-child { | |
| text-align: left; | |
| padding-left: 0.5rem; } | |
| /** | |
| * If the column is sortable, then let's handle the actionable | |
| * region of the `<th>` cell | |
| * | |
| * @selector .slds-is-sortable | |
| * @restrict .slds-table_fixed-layout th | |
| */ | |
| .slds-is-sortable .slds-th__action:hover, | |
| .slds-is-sortable .slds-th__action:focus, | |
| .slds-is-sortable.slds-has-focus .slds-th__action, | |
| .slds-is-sortable.slds-has-focus .slds-th__action:hover, | |
| .slds-is-sortable.slds-has-focus .slds-th__action:focus { | |
| background-color: white; | |
| color: currentColor; } | |
| .slds-is-sortable .slds-th__action:hover .slds-is-sortable__icon, | |
| .slds-is-sortable .slds-th__action:focus .slds-is-sortable__icon, | |
| .slds-is-sortable.slds-has-focus .slds-th__action .slds-is-sortable__icon, | |
| .slds-is-sortable.slds-has-focus .slds-th__action:hover .slds-is-sortable__icon, | |
| .slds-is-sortable.slds-has-focus .slds-th__action:focus .slds-is-sortable__icon { | |
| display: inline-block; | |
| fill: #0070d2; } | |
| /** | |
| * Actionable area inside th | |
| * | |
| * @selector .slds-th__action | |
| * @restrict .slds-table th div, .slds-table th a | |
| */ | |
| .slds-th__action { | |
| display: -ms-flexbox; | |
| display: flex; | |
| padding: 0.25rem 0.5rem; | |
| height: 2rem; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| /** | |
| * Allows for alignment of form element, such as a checkbox | |
| * | |
| * @selector .slds-th__action_form | |
| * @restrict .slds-th__action | |
| */ | |
| /** | |
| * Allows for alignment of button, such as a menu | |
| * | |
| * @selector .slds-th__action-button | |
| * @restrict .slds-has-button-menu .slds-button_icon | |
| */ } | |
| .slds-th__action:focus, .slds-th__action:hover { | |
| outline: 0; | |
| background-color: white; } | |
| .slds-th__action_form, .slds-th__action--form { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; } | |
| .slds-th__action-button { | |
| position: absolute; | |
| top: 50%; | |
| right: 0.25rem; | |
| margin-top: -0.5rem; } | |
| /** | |
| * If the column header has a menu button, then let's add right padding to the | |
| * header to preserve truncation | |
| * | |
| * @selector .slds-has-button-menu | |
| * @restrict .slds-table_fixed-layout th | |
| */ | |
| .slds-has-button-menu .slds-th__action { | |
| padding-right: 1.5rem; } | |
| /** | |
| * Icon inside sortable th | |
| * | |
| * @selector .slds-is-sortable__icon | |
| * @restrict .slds-is-sortable .slds-icon | |
| */ | |
| .slds-is-sortable__icon { | |
| width: 0.75rem; | |
| height: 0.75rem; | |
| margin-left: 0.25rem; | |
| display: none; } | |
| /** | |
| * Active state of sorted column | |
| * | |
| * @selector .slds-is-sorted | |
| * @restrict .slds-table_fixed-layout th | |
| */ | |
| .slds-is-sorted { | |
| /** | |
| * Change direction of arrow | |
| * | |
| * @name sorted-ascending | |
| * @selector .slds-is-sorted_asc | |
| * @restrict .slds-is-sorted | |
| * @modifier | |
| */ } | |
| .slds-is-sorted .slds-is-sortable__icon { | |
| display: inline-block; } | |
| .slds-is-sorted_asc .slds-is-sortable__icon, | |
| .slds-is-sorted--asc .slds-is-sortable__icon { | |
| transform: rotate(180deg); } | |
| .slds-table_column-1-wrap tbody tr > *:nth-child(1) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-2-wrap tbody tr > *:nth-child(2) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-3-wrap tbody tr > *:nth-child(3) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-4-wrap tbody tr > *:nth-child(4) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-5-wrap tbody tr > *:nth-child(5) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-6-wrap tbody tr > *:nth-child(6) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-7-wrap tbody tr > *:nth-child(7) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-8-wrap tbody tr > *:nth-child(8) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-9-wrap tbody tr > *:nth-child(9) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-10-wrap tbody tr > *:nth-child(10) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-11-wrap tbody tr > *:nth-child(11) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-12-wrap tbody tr > *:nth-child(12) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-13-wrap tbody tr > *:nth-child(13) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-14-wrap tbody tr > *:nth-child(14) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| .slds-table_column-15-wrap tbody tr > *:nth-child(15) .slds-truncate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: none; | |
| -ms-hyphens: none; | |
| hyphens: none; | |
| white-space: normal; } | |
| [class*="slds-table_column-"] tr td .slds-truncate { | |
| overflow: hidden; | |
| position: relative; | |
| max-height: 3.25rem; } | |
| [class*="slds-table_column-"] tr td .slds-truncate:after { | |
| content: ''; | |
| position: absolute; | |
| top: 2.25rem; | |
| bottom: 0; | |
| right: 0; | |
| width: 50%; | |
| background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, white 69%); } | |
| [class*="slds-table_column-"] tr:hover td .slds-truncate:after { | |
| background: linear-gradient(to right, rgba(250, 250, 249, 0) 0%, #fafaf9 69%); } | |
| /** | |
| * Resizable data table columns | |
| * | |
| * @selector .slds-table_resizable-cols | |
| * @restrict .slds-table_fixed-layout | |
| */ | |
| .slds-table_resizable-cols thead th, | |
| .slds-table--resizable-cols thead th { | |
| padding: 0; } | |
| /** | |
| * Provide an indicator that resizing is available | |
| * | |
| * @selector .slds-is-resizable | |
| * @restrict .slds-table_resizable-cols th | |
| */ | |
| .slds-is-resizable .slds-th__action:hover, | |
| .slds-is-resizable .slds-th__action:focus { | |
| box-shadow: #dddbda -0.25rem 0 0 inset; } | |
| /** | |
| * Resizable handle | |
| * | |
| * @selector .slds-resizable | |
| * @restrict .slds-is-resizable div | |
| */ | |
| .slds-resizable { | |
| max-width: 100%; | |
| /** | |
| * Grab handle to resize column | |
| * | |
| * @selector .slds-resizable__handle | |
| * @restrict .slds-resizable span | |
| */ | |
| /** | |
| * Grab handle divider indicator when resizing column | |
| * | |
| * @selector .slds-resizable__divider | |
| * @restrict .slds-resizable__handle span | |
| */ } | |
| .slds-resizable__handle { | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| width: 0.25rem; | |
| height: 100%; | |
| background: #0070d2; | |
| display: block; | |
| cursor: col-resize; | |
| opacity: 0; | |
| z-index: 5000; } | |
| .slds-resizable__handle:hover, .slds-resizable__handle:focus, .slds-resizable__handle:active { | |
| opacity: 1; } | |
| .slds-resizable__divider { | |
| position: absolute; | |
| right: 0; | |
| height: 100vh; | |
| width: 1px; | |
| background: #0070d2; } | |
| .slds-resizable__input:focus ~ .slds-resizable__handle { | |
| opacity: 1; } | |
| /** | |
| * @summary Use this class to join a table to a page-header | |
| */ | |
| .slds-table_joined table, | |
| .slds-table.slds-has-top-magnet table { | |
| border-radius: 0 0 0.25rem 0.25rem; | |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); } | |
| .slds-table_joined-wrapper { | |
| padding: 1rem 1rem 0 1rem; | |
| border-radius: 0.25rem; | |
| background-clip: padding-box; } | |
| .slds-table_joined-wrapper .slds-table { | |
| border-radius: 0 0 0.25rem 0.25rem; | |
| box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1); } | |
| /** | |
| * Responsive tables | |
| * | |
| * When a table exceeds the width of its container, one responsive option is to wrap the table in a `.slds-scrollable_x` class so that the user can scroll horizontally. View the example small and medium form factor tabs to see the effect. | |
| * | |
| * When `.slds-max-medium-table_stacked` is applied to the “Grid” table, we generate faux `<th>` labels using the `data-label` applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the **medium form factor** breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal. | |
| * | |
| * When `.slds-max-medium-table_stacked` is applied to the “Grid” table, we generate faux `<th>` labels using the `data-label` applied to each cell, and stack the cells instead of lining them up horizontally. This works up until the **medium form factor** breakpoint. After the breakpoint is triggered, the table will lay out horizontally as normal. | |
| * | |
| * @summary Creates stacked row with stacked cells | |
| * | |
| * @name responsive | |
| * @selector .slds-max-medium-table_stacked | |
| * @restrict .slds-table | |
| * @support prototype | |
| * @variant | |
| * @layout responsive | |
| */ | |
| @media (max-width: 48em) { | |
| .slds-max-medium-table_stacked, | |
| .slds-max-medium-table--stacked { | |
| border: 0; } | |
| .slds-max-medium-table_stacked thead, | |
| .slds-max-medium-table--stacked thead { | |
| /* stylelint-disable declaration-no-important */ | |
| position: absolute !important; | |
| margin: -1px !important; | |
| border: 0 !important; | |
| padding: 0 !important; | |
| width: 1px !important; | |
| height: 1px !important; | |
| overflow: hidden !important; | |
| clip: rect(0 0 0 0) !important; | |
| /* stylelint-enable declaration-no-important */ } | |
| .slds-max-medium-table_stacked th, | |
| .slds-max-medium-table--stacked th { | |
| border-top: 0; } | |
| .slds-max-medium-table_stacked tr, | |
| .slds-max-medium-table--stacked tr { | |
| display: block; | |
| border-top: 2px solid #dddbda; } | |
| .slds-max-medium-table_stacked th, | |
| .slds-max-medium-table_stacked td, | |
| .slds-max-medium-table--stacked th, | |
| .slds-max-medium-table--stacked td { | |
| display: block; | |
| padding: 0.75rem; | |
| max-width: 100%; | |
| width: 100%; | |
| clear: both; | |
| white-space: normal; | |
| overflow: hidden; | |
| text-align: left; } | |
| .slds-max-medium-table_stacked th.slds-truncate, | |
| .slds-max-medium-table_stacked td.slds-truncate, | |
| .slds-max-medium-table--stacked th.slds-truncate, | |
| .slds-max-medium-table--stacked td.slds-truncate { | |
| max-width: 100%; } | |
| .slds-max-medium-table_stacked th:before, | |
| .slds-max-medium-table_stacked td:before, | |
| .slds-max-medium-table--stacked th:before, | |
| .slds-max-medium-table--stacked td:before { | |
| font-size: 0.75rem; | |
| line-height: 1.25; | |
| color: #3e3e3c; | |
| text-transform: uppercase; | |
| letter-spacing: 0.0625rem; | |
| display: block; | |
| padding-bottom: 0.25rem; | |
| content: attr(data-label); } | |
| .slds-is-mobile .slds-max-medium-table_stacked th:before, .slds-is-mobile | |
| .slds-max-medium-table_stacked td:before, .slds-is-mobile | |
| .slds-max-medium-table--stacked th:before, .slds-is-mobile | |
| .slds-max-medium-table--stacked td:before { | |
| font-size: 0.875rem; } | |
| .slds-max-medium-table_stacked tr > td:first-child, | |
| .slds-max-medium-table_stacked tr > td:last-child, | |
| .slds-max-medium-table--stacked tr > td:first-child, | |
| .slds-max-medium-table--stacked tr > td:last-child { | |
| padding: 0.75rem; } | |
| .slds-max-medium-table_stacked:not(.slds-no-row-hover) tbody tr:hover, | |
| .slds-max-medium-table--stacked:not(.slds-no-row-hover) tbody tr:hover { | |
| /* stylelint-disable declaration-no-important */ | |
| /* stylelint-enable declaration-no-important */ } | |
| .slds-max-medium-table_stacked:not(.slds-no-row-hover) tbody tr:hover td, | |
| .slds-max-medium-table_stacked:not(.slds-no-row-hover) tbody tr:hover th, | |
| .slds-max-medium-table--stacked:not(.slds-no-row-hover) tbody tr:hover td, | |
| .slds-max-medium-table--stacked:not(.slds-no-row-hover) tbody tr:hover th { | |
| background-color: inherit !important; | |
| box-shadow: none !important; } | |
| .slds-max-medium-table_stacked .slds-is-interactive .slds-button, | |
| .slds-max-medium-table--stacked .slds-is-interactive .slds-button { | |
| visibility: visible; } | |
| .slds-max-medium-table_stacked .slds-cell-shrink, | |
| .slds-max-medium-table--stacked .slds-cell-shrink { | |
| width: auto; } } | |
| @media (max-width: 48em) { | |
| .slds-max-medium-table_stacked td:before, | |
| .slds-max-medium-table_stacked th:before, | |
| .slds-max-medium-table--stacked td:before, | |
| .slds-max-medium-table--stacked th:before { | |
| padding-bottom: 0.25rem; } } | |
| /** | |
| * @summary Creates stacked rows with horizontal cells | |
| * | |
| * @selector .slds-max-medium-table_stacked-horizontal | |
| * @restrict .slds-table | |
| * @support prototype | |
| * @modifier | |
| * @layout responsive | |
| */ | |
| @media (max-width: 48em) { | |
| .slds-max-medium-table_stacked-horizontal, | |
| .slds-max-medium-table--stacked-horizontal { | |
| border: 0; } | |
| .slds-max-medium-table_stacked-horizontal thead, | |
| .slds-max-medium-table--stacked-horizontal thead { | |
| /* stylelint-disable declaration-no-important */ | |
| position: absolute !important; | |
| margin: -1px !important; | |
| border: 0 !important; | |
| padding: 0 !important; | |
| width: 1px !important; | |
| height: 1px !important; | |
| overflow: hidden !important; | |
| clip: rect(0 0 0 0) !important; | |
| /* stylelint-enable declaration-no-important */ } | |
| .slds-max-medium-table_stacked-horizontal th, | |
| .slds-max-medium-table--stacked-horizontal th { | |
| border-top: 0; } | |
| .slds-max-medium-table_stacked-horizontal tr, | |
| .slds-max-medium-table--stacked-horizontal tr { | |
| display: block; | |
| border-top: 2px solid #dddbda; } | |
| .slds-max-medium-table_stacked-horizontal th, | |
| .slds-max-medium-table_stacked-horizontal td, | |
| .slds-max-medium-table--stacked-horizontal th, | |
| .slds-max-medium-table--stacked-horizontal td { | |
| display: block; | |
| padding: 0.75rem; | |
| max-width: 100%; | |
| width: 100%; | |
| clear: both; | |
| white-space: normal; | |
| overflow: hidden; | |
| text-align: left; } | |
| .slds-max-medium-table_stacked-horizontal th.slds-truncate, | |
| .slds-max-medium-table_stacked-horizontal td.slds-truncate, | |
| .slds-max-medium-table--stacked-horizontal th.slds-truncate, | |
| .slds-max-medium-table--stacked-horizontal td.slds-truncate { | |
| max-width: 100%; } | |
| .slds-max-medium-table_stacked-horizontal th:before, | |
| .slds-max-medium-table_stacked-horizontal td:before, | |
| .slds-max-medium-table--stacked-horizontal th:before, | |
| .slds-max-medium-table--stacked-horizontal td:before { | |
| font-size: 0.75rem; | |
| line-height: 1.25; | |
| color: #3e3e3c; | |
| text-transform: uppercase; | |
| letter-spacing: 0.0625rem; | |
| display: block; | |
| padding-bottom: 0.25rem; | |
| content: attr(data-label); } | |
| .slds-is-mobile .slds-max-medium-table_stacked-horizontal th:before, .slds-is-mobile | |
| .slds-max-medium-table_stacked-horizontal td:before, .slds-is-mobile | |
| .slds-max-medium-table--stacked-horizontal th:before, .slds-is-mobile | |
| .slds-max-medium-table--stacked-horizontal td:before { | |
| font-size: 0.875rem; } | |
| .slds-max-medium-table_stacked-horizontal tr > td:first-child, | |
| .slds-max-medium-table_stacked-horizontal tr > td:last-child, | |
| .slds-max-medium-table--stacked-horizontal tr > td:first-child, | |
| .slds-max-medium-table--stacked-horizontal tr > td:last-child { | |
| padding: 0.75rem; } | |
| .slds-max-medium-table_stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover, | |
| .slds-max-medium-table--stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover { | |
| /* stylelint-disable declaration-no-important */ | |
| /* stylelint-enable declaration-no-important */ } | |
| .slds-max-medium-table_stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover td, | |
| .slds-max-medium-table_stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover th, | |
| .slds-max-medium-table--stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover td, | |
| .slds-max-medium-table--stacked-horizontal:not(.slds-no-row-hover) tbody tr:hover th { | |
| background-color: inherit !important; | |
| box-shadow: none !important; } | |
| .slds-max-medium-table_stacked-horizontal .slds-is-interactive .slds-button, | |
| .slds-max-medium-table--stacked-horizontal .slds-is-interactive .slds-button { | |
| visibility: visible; } | |
| .slds-max-medium-table_stacked-horizontal .slds-cell-shrink, | |
| .slds-max-medium-table--stacked-horizontal .slds-cell-shrink { | |
| width: auto; } } | |
| @media (max-width: 48em) { | |
| .slds-max-medium-table_stacked-horizontal td, | |
| .slds-max-medium-table--stacked-horizontal td { | |
| text-align: right; } | |
| .slds-max-medium-table_stacked-horizontal td:before, | |
| .slds-max-medium-table--stacked-horizontal td:before { | |
| float: left; | |
| margin-top: 0.125rem; } | |
| .slds-max-medium-table_stacked-horizontal .slds-truncate, | |
| .slds-max-medium-table--stacked-horizontal .slds-truncate { | |
| max-width: 100%; } } | |
| .slds-table_edit_container:focus, | |
| .slds-table--edit_container:focus { | |
| outline: none; } | |
| .slds-table_edit_container:focus:before, | |
| .slds-table--edit_container:focus:before { | |
| content: ' '; | |
| position: absolute; | |
| top: 0; | |
| right: 0; | |
| bottom: 0; | |
| left: 0; | |
| z-index: 1; | |
| background-color: #fafaf9; | |
| box-shadow: 0 0 0 4px #1589ee inset; } | |
| .slds-table_edit_container:focus .slds-table_edit_container-message, | |
| .slds-table_edit_container:focus .slds-table--edit_container-message, | |
| .slds-table--edit_container:focus .slds-table_edit_container-message, | |
| .slds-table--edit_container:focus .slds-table--edit_container-message { | |
| display: block; | |
| position: absolute; | |
| top: 50%; | |
| left: 50%; | |
| width: 20rem; | |
| margin-top: -2.25rem; | |
| margin-left: -10rem; | |
| background-color: white; | |
| text-align: center; | |
| z-index: 1; } | |
| .slds-table_edit_container-message, | |
| .slds-table--edit_container-message { | |
| display: none; } | |
| /** | |
| * Inline edit plugin for advanced tables | |
| * | |
| * #### Accessibility | |
| * The Advanced Data Table and Inline Edit Data Table are based on the semantics, | |
| * roles and interaction model of the [ARIA Grid](http://w3c.github.io/aria/practices/aria-practices.html#grid). | |
| * In SLDS we overlay the ARIA Grid on top of native HTML table semantics. | |
| * | |
| * The role of Grid comes with 2 distinct modes, Navigation mode and Actionable | |
| * mode. Both come with very specific keyboard interaction modals. Navigation | |
| * mode is the default mode of the Grid. | |
| * | |
| * **Navigation Mode** | |
| * - Tabbing into the grid focuses the first data cell in the table. | |
| * - The second tab key press takes the user focus out of the grid onto the next focusable element on the page. | |
| * - Once the user has tabbed out of the grid, tabbing back into the grid will return focus to the last cell the user was focused on. | |
| * - Navigation in the grid is accomplished via the arrow keys. | |
| * - No actionable items in cell contents are focusable. | |
| * - Pressing the Enter key on a chosen grid cell, places the entire Grid into Actionable mode. | |
| * | |
| * **Actionable Mode** | |
| * - Once in Actionable mode, all focusable items in the entire grid can be tabbed to. | |
| * - Arrow navigation still takes the user cell to cell in any direction, but focuses on the first actionable item in the cell, if there is one. | |
| * - Pressing the Escape key exits Actionable mode, placing the user back into Navigation mode, keeping the users cursor on the same cell they were focused in. | |
| * - When interacting with a component in a cell, such as a Menu, that also uses the Escape key as an exit action, pressing Escape will take the user back to the triggering element in the current cell. A subsequent press of Escape will return the user to Navigation mode. | |
| * | |
| * For the purposes of these docs, the Default state of Inline Edit is | |
| * representative of Navigation mode, all other states are assumed to be in Actionable Mode. | |
| * | |
| * @summary Initiates inline-edit mode for data-tables | |
| * | |
| * @name inline-edit | |
| * @selector .slds-table_edit | |
| * @restrict .slds-table | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-table_edit, | |
| .slds-table--edit { | |
| /** | |
| * Cell that has error icon appear within | |
| * | |
| * @selector .slds-cell-error | |
| * @restrict .slds-table_edit td | |
| * @required | |
| */ } | |
| .slds-table_edit thead th, | |
| .slds-table--edit thead th { | |
| padding: 0; } | |
| .slds-table_edit .slds-cell-error, | |
| .slds-table--edit .slds-cell-error { | |
| padding-left: 0; } | |
| .slds-table_edit:not(.slds-no-cell-focus) tbody tr:hover > .slds-cell-edit.slds-has-focus, | |
| .slds-table--edit:not(.slds-no-cell-focus) tbody tr:hover > .slds-cell-edit.slds-has-focus { | |
| background-color: white; | |
| box-shadow: #0070d2 0 0 0 1px inset; } | |
| .slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit:hover, | |
| .slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit:hover { | |
| background-color: white; } | |
| .slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit.slds-is-edited, | |
| .slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit.slds-is-edited { | |
| background-color: #faffbd; } | |
| .slds-table_edit.slds-table tbody tr:hover > .slds-cell-edit.slds-has-error, | |
| .slds-table--edit.slds-table tbody tr:hover > .slds-cell-edit.slds-has-error { | |
| background-color: #faffbd; | |
| box-shadow: #c23934 0 0 0 2px inset; } | |
| .slds-table_edit .slds-button__icon_edit:focus, | |
| .slds-table_edit .slds-button__icon--edit:focus, | |
| .slds-table--edit .slds-button__icon_edit:focus, | |
| .slds-table--edit .slds-button__icon--edit:focus { | |
| fill: #1589ee; } | |
| .slds-has-focus .slds-th__action { | |
| background-color: white; | |
| box-shadow: #005fb2 0 0 0 1px inset; } | |
| .slds-has-focus.slds-is-resizable .slds-th__action, | |
| .slds-has-focus.slds-is-resizable .slds-th__action:focus, | |
| .slds-has-focus.slds-is-resizable .slds-th__action:hover, | |
| .slds-has-focus.slds-is-resizable .slds-th__action:focus:hover, | |
| .slds-is-resizable .slds-th__action:focus, | |
| .slds-is-resizable .slds-th__action:focus:hover { | |
| background-color: white; | |
| box-shadow: #005fb2 0 0 0 1px inset, #005fb2 -0.25rem 0 0 inset; } | |
| /** | |
| * Informs a table cell that it has editing capabilities | |
| * | |
| * @selector .slds-cell-edit | |
| * @restrict .slds-table_edit th, .slds-table_edit td | |
| */ | |
| .slds-table .slds-cell-edit { | |
| outline: 0; | |
| /** | |
| * Informs a cell that it has been edited but not saved | |
| * | |
| * @selector .slds-is-edited | |
| * @restrict .slds-cell-edit | |
| * @modifier | |
| */ | |
| /** | |
| * Informs a cell that it has an error inside of it | |
| * | |
| * @selector .slds-has-error | |
| * @restrict .slds-cell-edit | |
| * @modifier | |
| */ } | |
| .slds-table .slds-cell-edit.slds-has-focus { | |
| background-color: white; | |
| box-shadow: #005fb2 0 0 0 1px inset; } | |
| .slds-table .slds-cell-edit.slds-has-focus .slds-button__icon_edit, | |
| .slds-table .slds-cell-edit.slds-has-focus .slds-button__icon--edit, | |
| .slds-table .slds-cell-edit.slds-has-focus .slds-button__icon_lock, | |
| .slds-table .slds-cell-edit.slds-has-focus .slds-button__icon--lock { | |
| opacity: 1; } | |
| .slds-table .slds-cell-edit.slds-has-focus:hover { | |
| box-shadow: #005fb2 0 0 0 1px inset; } | |
| .slds-table .slds-cell-edit.slds-has-focus a:focus { | |
| text-decoration: underline; | |
| outline: none; } | |
| .slds-table .slds-cell-edit.slds-is-edited, .slds-table .slds-cell-edit.slds-is-edited:hover { | |
| background-color: #faffbd; } | |
| .slds-table .slds-cell-edit.slds-has-error, .slds-table .slds-cell-edit.slds-has-error:hover { | |
| background-color: #faffbd; | |
| box-shadow: #c23934 0 0 0 2px inset; } | |
| /** | |
| * @selector .slds-cell-edit__button | |
| * @restrict .slds-cell-edit button | |
| */ | |
| .slds-cell-edit__button { | |
| width: 1.25rem; | |
| height: 1.25rem; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; } | |
| .slds-cell-edit__button:focus .slds-button__icon_edit, | |
| .slds-cell-edit__button:focus .slds-button__icon--edit { | |
| opacity: 1; } | |
| /** | |
| * Handles children of the table where we don't want any focusable cells | |
| * | |
| * @selector .slds-no-cell-focus | |
| * @restrict .slds-table_edit | |
| * @modifier | |
| */ | |
| .slds-no-cell-focus .slds-has-focus { | |
| background: #f3f2f2; | |
| box-shadow: none; } | |
| .slds-no-cell-focus .slds-has-focus .slds-th__action, | |
| .slds-no-cell-focus .slds-has-focus .slds-th__action:hover, | |
| .slds-no-cell-focus .slds-has-focus .slds-th__action:focus, | |
| .slds-no-cell-focus .slds-has-focus .slds-th__action:focus:hover { | |
| color: inherit; | |
| background-color: white; | |
| box-shadow: none; } | |
| .slds-no-cell-focus .slds-has-focus .slds-button__icon_edit, | |
| .slds-no-cell-focus .slds-has-focus .slds-button__icon--edit { | |
| opacity: 1; } | |
| .slds-no-cell-focus .slds-has-focus.slds-is-resizable:hover .slds-th__action { | |
| background-color: white; | |
| box-shadow: #dddbda -0.25rem 0 0 inset; } | |
| .slds-no-cell-focus .slds-is-sortable.slds-has-focus .slds-is-sortable__icon { | |
| display: none; } | |
| .slds-no-cell-focus .slds-is-sorted.slds-has-focus .slds-is-sortable__icon { | |
| display: inline-block; | |
| fill: #706e6b; } | |
| .slds-no-cell-focus .slds-is-edited, .slds-no-cell-focus .slds-is-edited:hover { | |
| background-color: #faffbd; } | |
| .slds-no-cell-focus .slds-has-error, .slds-no-cell-focus .slds-has-error:hover { | |
| background-color: #faffbd; | |
| box-shadow: #c23934 0 0 0 2px inset; } | |
| .slds-no-cell-focus thead .slds-has-focus:hover { | |
| color: #006dcc; } | |
| .slds-no-cell-focus thead .slds-has-focus:hover .slds-is-sortable__icon { | |
| display: inline-block; | |
| fill: #006dcc; } | |
| .slds-hint-parent .slds-cell-edit .slds-button__icon_edit, | |
| .slds-hint-parent .slds-cell-edit .slds-button__icon--edit, | |
| .slds-hint-parent .slds-cell-edit .slds-button__icon_lock, | |
| .slds-hint-parent .slds-cell-edit .slds-button__icon--lock { | |
| opacity: 0; } | |
| .slds-hint-parent .slds-cell-edit:hover .slds-button__icon_edit, | |
| .slds-hint-parent .slds-cell-edit:hover .slds-button__icon--edit, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_edit, | |
| .slds-hint-parent .slds-cell-edit:focus .slds-button__icon--edit { | |
| opacity: 0.5; } | |
| .slds-hint-parent .slds-cell-edit:hover .slds-button__icon_edit:hover, .slds-hint-parent .slds-cell-edit:hover .slds-button__icon_edit:focus, | |
| .slds-hint-parent .slds-cell-edit:hover .slds-button__icon--edit:hover, | |
| .slds-hint-parent .slds-cell-edit:hover .slds-button__icon--edit:focus, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_edit:hover, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_edit:focus, | |
| .slds-hint-parent .slds-cell-edit:focus .slds-button__icon--edit:hover, | |
| .slds-hint-parent .slds-cell-edit:focus .slds-button__icon--edit:focus { | |
| fill: #1589ee; | |
| opacity: 1; } | |
| .slds-hint-parent .slds-cell-edit:hover .slds-button__icon_lock, | |
| .slds-hint-parent .slds-cell-edit:hover .slds-button__icon--lock, .slds-hint-parent .slds-cell-edit:focus .slds-button__icon_lock, | |
| .slds-hint-parent .slds-cell-edit:focus .slds-button__icon--lock { | |
| opacity: 0.5; } | |
| .slds-hint-parent .slds-cell-edit.slds-has-focus .slds-button__icon_edit, | |
| .slds-hint-parent .slds-cell-edit.slds-has-focus .slds-button__icon--edit { | |
| fill: #706e6b; | |
| opacity: 1; } | |
| /** | |
| * @selector .slds-form-element__label_edit | |
| * @restrict .slds-popover_edit label | |
| */ | |
| .slds-form-element__label_edit, | |
| .slds-form-element__label--edit { | |
| margin: 0 0.125rem 0; } | |
| /** | |
| * Dialog specific for inline-edit popover | |
| * | |
| * @selector .slds-popover_edit | |
| * @restrict .slds-popover | |
| * @required | |
| */ | |
| .slds-popover_edit, | |
| .slds-popover--edit { | |
| border-top: 0; | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; } | |
| .slds-popover_edit .slds-popover__body, | |
| .slds-popover--edit .slds-popover__body { | |
| padding: 0.25rem 0.25rem 0.25rem 0; } | |
| .slds-popover_edit .slds-form-element__help, | |
| .slds-popover--edit .slds-form-element__help { | |
| width: 100%; | |
| padding-left: 0.75rem; } | |
| .slds-table_header-fixed_container, | |
| .slds-table--header-fixed_container { | |
| position: relative; | |
| padding-top: 2rem; | |
| background-color: #fafaf9; | |
| overflow: hidden; } | |
| .slds-table_header-fixed_container:before, | |
| .slds-table--header-fixed_container:before { | |
| border-bottom: 1px solid #dddbda; | |
| content: ''; | |
| display: block; | |
| position: relative; | |
| width: 100%; } | |
| .slds-cell-fixed { | |
| background-color: #fafaf9; | |
| position: absolute; | |
| top: 0; | |
| min-height: 2rem; } | |
| .slds-table_header-fixed, | |
| .slds-table--header-fixed { | |
| border-top: 0; } | |
| .slds-table_header-fixed thead th, | |
| .slds-table--header-fixed thead th { | |
| position: static; | |
| padding: 0; | |
| border-top: 0; } | |
| .slds-table_header-fixed tbody tr:first-child td, | |
| .slds-table_header-fixed tbody tr:first-child th, | |
| .slds-table--header-fixed tbody tr:first-child td, | |
| .slds-table--header-fixed tbody tr:first-child th { | |
| border: 0; } | |
| /** | |
| * @summary Used to remove the top border when a table's header is visually hidden | |
| * | |
| * @name hidden-header | |
| * @selector .slds-table_header-hidden | |
| * @restrict .slds-table | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-table_header-hidden { | |
| border-top: 0; } | |
| .slds-tree { | |
| /** | |
| * @name item-selected | |
| * @summary Selected state for a tree item | |
| * @selector .slds-is-selected | |
| * @restrict .slds-tree__item | |
| * @notes Class should be applied via Javascript | |
| * @deprecated | |
| */ | |
| /** | |
| * @name item-focused | |
| * @summary Focus state for a tree item | |
| * @selector .slds-is-focused | |
| * @restrict .slds-tree__item | |
| * @deprecated | |
| */ } | |
| .slds-tree__item a { | |
| color: #080707; } | |
| .slds-tree__item a:hover { | |
| text-decoration: none; } | |
| .slds-tree__item a:focus { | |
| outline: 0; | |
| text-decoration: underline; } | |
| .slds-tree .slds-is-selected { | |
| background: #ecebea; | |
| box-shadow: #0070d2 4px 0 0 inset; } | |
| .slds-tree .slds-is-focused { | |
| text-decoration: underline; } | |
| .slds-tree [aria-expanded="false"] > .slds-tree__item > .slds-button[aria-controls] > .slds-button__icon, | |
| .slds-tree [aria-expanded="false"] > .slds-tree__item > .slds-button[aria-controls] > span > .slds-button__icon { | |
| transition: 0.2s transform ease-in-out; | |
| transform: rotate(0deg); } | |
| .slds-tree [aria-expanded="true"] > .slds-tree__item > .slds-button[aria-controls] > .slds-button__icon, | |
| .slds-tree [aria-expanded="true"] > .slds-tree__item > .slds-button[aria-controls] > span > .slds-button__icon { | |
| transition: 0.2s transform ease-in-out; | |
| transform: rotate(90deg); } | |
| /** | |
| * | |
| * @summary A tree is visualization of a structure hierarchy. A branch can be expanded or collapsed. | |
| * | |
| * @name base | |
| * @selector .slds-tree_container | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| * @s1 false | |
| */ | |
| .slds-tree-container, | |
| .slds-tree_container { | |
| min-width: 7.5rem; | |
| max-width: 25rem; } | |
| .slds-tree-container > .slds-text-heading_label, | |
| .slds-tree-container > .slds-text-heading--label, | |
| .slds-tree_container > .slds-text-heading_label, | |
| .slds-tree_container > .slds-text-heading--label { | |
| margin-bottom: 0.5rem; } | |
| /** | |
| * @summary Initializes a slds tree | |
| * @selector .slds-tree | |
| * @restrict .slds-tree_container ul, table | |
| */ | |
| /** | |
| * @summary Initializes a slds tree item | |
| * @selector .slds-tree__item | |
| * @restrict .slds-tree div | |
| */ | |
| .slds-tree__item { | |
| display: -ms-flexbox; | |
| display: flex; | |
| padding: 0.375rem 0 0.375rem 1rem; } | |
| /** | |
| * @name item-hovered | |
| * @summary Hover state for a tree item | |
| * @selector .slds-is-hovered | |
| * @restrict .slds-tree__item | |
| * @notes Class should be applied via Javascript | |
| * @modifier | |
| * @group interactions | |
| */ | |
| .slds-tree__item.slds-is-hovered, | |
| .slds-tree__item:hover { | |
| background: #f3f2f2; | |
| cursor: pointer; } | |
| /** | |
| * @name item-disabled | |
| * @summary When a branch doesn't have children, apply slds-is-disabled to the button icon | |
| * @selector .slds-is-disabled | |
| * @restrict .slds-tree__item button | |
| * @modifier | |
| * @group interactions | |
| */ | |
| .slds-tree__item .slds-is-disabled { | |
| visibility: hidden; } | |
| /** | |
| * @summary Styles the focus and selected state for any tree item that has role="treeitem" | |
| * @selector [role="treeitem"] | |
| * @restrict .slds-tree li | |
| */ | |
| .slds-tree [role="treeitem"]:focus { | |
| outline: 0; } | |
| .slds-tree [role="treeitem"]:focus > .slds-tree__item { | |
| background: #f3f2f2; | |
| cursor: pointer; | |
| text-decoration: underline; } | |
| .slds-tree [role="treeitem"][aria-selected="true"] > .slds-tree__item { | |
| background: rgba(21, 137, 238, 0.1); | |
| box-shadow: #1589ee 4px 0 0 inset; } | |
| [dir="rtl"] .slds-tree [role="treeitem"][aria-selected="true"] > .slds-tree__item { | |
| box-shadow: #1589ee -4px 0 0 inset; } | |
| .slds-tree [role="treeitem"] > [role="group"] { | |
| display: none; } | |
| .slds-tree [role="treeitem"][aria-expanded="true"] > [role="group"] { | |
| display: block; } | |
| [aria-expanded="false"] > .slds-tree__item .slds-button__icon { | |
| transition: 0.2s transform ease-in-out; | |
| transform: rotate(0deg); } | |
| [aria-expanded="true"] > .slds-tree__item .slds-button__icon { | |
| transition: 0.2s transform ease-in-out; | |
| transform: rotate(90deg); } | |
| [dir="rtl"] [aria-expanded="true"] > .slds-tree__item .slds-button__icon { | |
| transform: rotate(-90deg); } | |
| [aria-level="1"] > .slds-tree__item { | |
| padding-left: 1rem; } | |
| [aria-level="2"] > .slds-tree__item { | |
| padding-left: 2rem; } | |
| [aria-level="3"] > .slds-tree__item { | |
| padding-left: 3rem; } | |
| [aria-level="4"] > .slds-tree__item { | |
| padding-left: 4rem; } | |
| [aria-level="5"] > .slds-tree__item { | |
| padding-left: 5rem; } | |
| [aria-level="6"] > .slds-tree__item { | |
| padding-left: 6rem; } | |
| [aria-level="7"] > .slds-tree__item { | |
| padding-left: 7rem; } | |
| [aria-level="8"] > .slds-tree__item { | |
| padding-left: 8rem; } | |
| [aria-level="9"] > .slds-tree__item { | |
| padding-left: 9rem; } | |
| [aria-level="10"] > .slds-tree__item { | |
| padding-left: 10rem; } | |
| [aria-level="11"] > .slds-tree__item { | |
| padding-left: 11rem; } | |
| [aria-level="12"] > .slds-tree__item { | |
| padding-left: 12rem; } | |
| [aria-level="13"] > .slds-tree__item { | |
| padding-left: 13rem; } | |
| [aria-level="14"] > .slds-tree__item { | |
| padding-left: 14rem; } | |
| [aria-level="15"] > .slds-tree__item { | |
| padding-left: 15rem; } | |
| [aria-level="16"] > .slds-tree__item { | |
| padding-left: 16rem; } | |
| [aria-level="17"] > .slds-tree__item { | |
| padding-left: 17rem; } | |
| [aria-level="18"] > .slds-tree__item { | |
| padding-left: 18rem; } | |
| [aria-level="19"] > .slds-tree__item { | |
| padding-left: 19rem; } | |
| [aria-level="20"] > .slds-tree__item { | |
| padding-left: 20rem; } | |
| /** | |
| * @summary The label text of a tree item or tree branch | |
| * @selector .slds-tree__item-label | |
| * @restrict .slds-tree__item span | |
| */ | |
| .slds-tree__item-label { | |
| display: block; } | |
| /** | |
| * @summary The meta text or secondary text of a tree item | |
| * @selector .slds-tree__item-meta | |
| * @restrict .slds-tree__item span | |
| */ | |
| .slds-tree__item-meta { | |
| display: block; | |
| color: #3e3e3c; } | |
| .slds-tree__item .slds-button { | |
| -ms-flex-item-align: start; | |
| align-self: flex-start; | |
| margin-top: 0.125rem; } | |
| .slds-tree__item .slds-pill { | |
| margin-left: 0.75rem; } | |
| /** | |
| * @summary Initializes a slds tree group header | |
| * @selector .slds-tree__group-header | |
| * @restrict .slds-tree_container h4 | |
| */ | |
| .slds-tree__group-header { | |
| font-size: 0.875rem; | |
| font-weight: 700; } | |
| /** | |
| * @name base | |
| * @selector .slds-table_tree | |
| * @restrict table | |
| * @support dev-ready | |
| * @variant | |
| * @s1 false | |
| */ | |
| .slds-table_tree, | |
| .slds-table--tree { | |
| /** | |
| * @summary Initializes a slds tree item | |
| * @selector .slds-tree__item | |
| * @restrict .slds-table_tree th | |
| */ } | |
| .slds-table_tree .slds-tree__item, | |
| .slds-table--tree .slds-tree__item { | |
| line-height: 1.5rem; } | |
| .slds-table_tree .slds-tree__item a, | |
| .slds-table--tree .slds-tree__item a { | |
| color: #006dcc; } | |
| .slds-table_tree .slds-tree__item a:hover, | |
| .slds-table--tree .slds-tree__item a:hover { | |
| text-decoration: underline; } | |
| .slds-table_tree .slds-button, | |
| .slds-table--tree .slds-button { | |
| -ms-flex-item-align: center; | |
| -ms-grid-row-align: center; | |
| align-self: center; } | |
| .slds-table_tree .slds-button:not(.slds-th__action-button), | |
| .slds-table--tree .slds-button:not(.slds-th__action-button) { | |
| margin-top: 0; } | |
| .slds-table_tree [aria-level="1"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="1"] > .slds-tree__item { | |
| padding-left: 1.5rem; } | |
| .slds-table_tree [aria-level="2"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="2"] > .slds-tree__item { | |
| padding-left: 2.5rem; } | |
| .slds-table_tree [aria-level="3"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="3"] > .slds-tree__item { | |
| padding-left: 3.5rem; } | |
| .slds-table_tree [aria-level="4"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="4"] > .slds-tree__item { | |
| padding-left: 4.5rem; } | |
| .slds-table_tree [aria-level="5"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="5"] > .slds-tree__item { | |
| padding-left: 5.5rem; } | |
| .slds-table_tree [aria-level="6"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="6"] > .slds-tree__item { | |
| padding-left: 6.5rem; } | |
| .slds-table_tree [aria-level="7"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="7"] > .slds-tree__item { | |
| padding-left: 7.5rem; } | |
| .slds-table_tree [aria-level="8"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="8"] > .slds-tree__item { | |
| padding-left: 8.5rem; } | |
| .slds-table_tree [aria-level="9"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="9"] > .slds-tree__item { | |
| padding-left: 9.5rem; } | |
| .slds-table_tree [aria-level="10"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="10"] > .slds-tree__item { | |
| padding-left: 10.5rem; } | |
| .slds-table_tree [aria-level="11"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="11"] > .slds-tree__item { | |
| padding-left: 11.5rem; } | |
| .slds-table_tree [aria-level="12"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="12"] > .slds-tree__item { | |
| padding-left: 12.5rem; } | |
| .slds-table_tree [aria-level="13"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="13"] > .slds-tree__item { | |
| padding-left: 13.5rem; } | |
| .slds-table_tree [aria-level="14"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="14"] > .slds-tree__item { | |
| padding-left: 14.5rem; } | |
| .slds-table_tree [aria-level="15"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="15"] > .slds-tree__item { | |
| padding-left: 15.5rem; } | |
| .slds-table_tree [aria-level="16"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="16"] > .slds-tree__item { | |
| padding-left: 16.5rem; } | |
| .slds-table_tree [aria-level="17"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="17"] > .slds-tree__item { | |
| padding-left: 17.5rem; } | |
| .slds-table_tree [aria-level="18"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="18"] > .slds-tree__item { | |
| padding-left: 18.5rem; } | |
| .slds-table_tree [aria-level="19"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="19"] > .slds-tree__item { | |
| padding-left: 19.5rem; } | |
| .slds-table_tree [aria-level="20"] > .slds-tree__item, | |
| .slds-table--tree [aria-level="20"] > .slds-tree__item { | |
| padding-left: 20.5rem; } | |
| .slds-einstein-header { | |
| position: relative; | |
| background-color: #95cbfc; | |
| background-image: url("/assets/images/einstein-headers/einstein-header-background.svg"); | |
| background-repeat: no-repeat; | |
| background-position: left top; | |
| background-size: cover; | |
| border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; | |
| border-bottom: 1px solid #dddbda; | |
| padding-top: 0.75rem; | |
| padding-bottom: 0.75rem; | |
| text-shadow: 0 0 4px #9EDAFF; } | |
| .slds-einstein-header .slds-popover__close { | |
| color: currentColor; } | |
| .slds-einstein-header__figure, .slds-einstein-header__figure:last-child { | |
| margin-bottom: calc((0.75rem + 5px) * -1); | |
| height: 4.75rem; | |
| background-image: url("/assets/images/einstein-headers/einstein-figure.svg"); | |
| background-position: right bottom; | |
| background-repeat: no-repeat; } | |
| .slds-einstein-header__actions { | |
| padding-left: 1rem; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| .slds-einstein-header .slds-popover__close { | |
| position: absolute; | |
| top: 0; | |
| right: 0; } | |
| .slds-popover_einstein.slds-nubbin_top:before, .slds-popover_einstein.slds-nubbin--top:before, .slds-popover_einstein.slds-nubbin_top-left:before, .slds-popover_einstein.slds-nubbin--top-left:before, .slds-popover_einstein.slds-nubbin_top-right:before, .slds-popover_einstein.slds-nubbin--top-right:before, .slds-popover_einstein.slds-nubbin_left-top:before, .slds-popover_einstein.slds-nubbin--left-top:before, .slds-popover_einstein.slds-nubbin_right-top:before, .slds-popover_einstein.slds-nubbin--right-top:before { | |
| background-color: #95cbfc; } | |
| .slds-section-title { | |
| font-size: 1rem; } | |
| .slds-section-title > a { | |
| display: inline-block; | |
| color: #080707; } | |
| .slds-section-title > a:hover, .slds-section-title > a:focus { | |
| color: #005fb2; } | |
| .slds-section-title > a:focus { | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-section-title > a:active { | |
| color: #080707; } | |
| .slds-section-title .slds-icon { | |
| width: 1rem; | |
| height: 1rem; | |
| fill: currentColor; } | |
| .slds-section-title .slds-section-group_is-closed .slds-icon, | |
| .slds-section-title .slds-section-group--is-closed .slds-icon { | |
| transform: rotate(-90deg); } | |
| /** | |
| * @summary Container for a expandable section | |
| * | |
| * @name base | |
| * @selector .slds-section | |
| * @restrict article, div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-section { | |
| margin-top: 0.5rem; | |
| margin-bottom: 0.5rem; | |
| /** | |
| * @summary Element containing the title of a section | |
| * | |
| * @selector .slds-section__title | |
| * @restrict .slds-section h3 | |
| */ | |
| /** | |
| * @summary Element containing the action inside of an expandable section title | |
| * | |
| * @selector .slds-section__title-action | |
| * @restrict .slds-section__title button | |
| */ | |
| /** | |
| * @summary Element containing the content of an expandable section | |
| * | |
| * @selector .slds-section__content | |
| * @restrict .slds-section div | |
| */ | |
| /** | |
| * @summary Toggle visibility of section content | |
| * | |
| * @selector .slds-is-open | |
| * @restrict .slds-section | |
| * @modifier | |
| * @group visibility | |
| */ } | |
| .slds-section__title { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| font-size: 1rem; | |
| line-height: 1.875rem; | |
| border: 1px solid transparent; | |
| border-radius: 0.25rem; } | |
| .slds-section__title-action { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| background: #f3f2f2; | |
| cursor: pointer; | |
| width: 100%; | |
| text-align: left; | |
| color: currentColor; | |
| font-size: inherit; | |
| padding: 0 0.5rem; } | |
| .slds-section__title-action:hover, .slds-section__title-action:focus, .slds-section__title-action:active { | |
| background: #eef1f6; | |
| color: inherit; } | |
| .slds-section__content { | |
| overflow: hidden; | |
| visibility: hidden; | |
| opacity: 0; | |
| height: 0; } | |
| .slds-section__title-action-icon { | |
| transform: rotate(-90deg); } | |
| .slds-section.slds-is-open .slds-section__title-action-icon { | |
| transform: rotate(0deg); | |
| transform-origin: 45%; } | |
| .slds-section.slds-is-open .slds-section__content { | |
| padding-top: 0.5rem; | |
| overflow: visible; | |
| visibility: visible; | |
| opacity: 1; | |
| height: auto; } | |
| .slds-section-title_divider, | |
| .slds-section-title--divider { | |
| font-size: 0.75rem; | |
| line-height: 1.25; | |
| color: #3e3e3c; | |
| text-transform: uppercase; | |
| letter-spacing: 0.0625rem; | |
| padding: 0.5rem 1rem; | |
| background: #f3f2f2; } | |
| .slds-is-mobile .slds-section-title_divider, .slds-is-mobile | |
| .slds-section-title--divider { | |
| font-size: 0.875rem; } | |
| /** | |
| * | |
| * @summary Initiates an illustration component | |
| * | |
| * @name base | |
| * @selector .slds-illustration | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-illustration { | |
| text-align: center; | |
| /** | |
| * @summary Applies width and height values for small illustrations | |
| * @selector .slds-illustration_small | |
| * @restrict .slds-illustration | |
| * @modifier | |
| * @group width | |
| */ | |
| /** | |
| * @summary Applies width and height values for large illustrations | |
| * @selector .slds-illustration_large | |
| * @restrict .slds-illustration | |
| * @modifier | |
| * @group width | |
| */ } | |
| .slds-illustration.slds-illustration_small .slds-illustration__svg { | |
| width: 100%; | |
| max-width: 300px; | |
| max-height: 200px; | |
| margin-bottom: 1rem; } | |
| .slds-illustration.slds-illustration_large .slds-illustration__svg { | |
| width: 100%; | |
| max-width: 600px; | |
| max-height: 400px; | |
| margin-bottom: 3rem; } | |
| .slds-illustration.slds-illustration_large .slds-illustration__header { | |
| margin-bottom: 1.5rem; } | |
| .slds-illustration.slds-illustration_large p { | |
| margin-bottom: 3rem; } | |
| .slds-illustration .slds-illustration__stroke-primary { | |
| stroke: #8cd3f8; } | |
| .slds-illustration .slds-illustration__stroke-secondary { | |
| stroke: #c2e8ff; } | |
| .slds-illustration .slds-illustration__fill-primary { | |
| fill: #8cd3f8; } | |
| .slds-illustration .slds-illustration__fill-secondary { | |
| fill: #c2e8ff; } | |
| /** | |
| * @summary A region that can be inside of a layout | |
| * | |
| * @name base | |
| * @selector .slds-region | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-region { | |
| background-color: white; } | |
| /** | |
| * @summary A region that can be pinned on the top of a layout | |
| * | |
| * @selector .slds-region__pinned-top | |
| * @restrict .slds-region | |
| */ | |
| .slds-region__pinned-top { | |
| background-color: white; | |
| border-bottom: 1px solid #dddbda; } | |
| /** | |
| * @summary A region that can be pinned on the left side of a layout | |
| * | |
| * @selector .slds-region__pinned-left | |
| * @restrict .slds-region | |
| */ | |
| .slds-region__pinned-left { | |
| background-color: white; | |
| border-right: 1px solid #dddbda; } | |
| /** | |
| * @summary A region that can be pinned on the right side of a layout | |
| * | |
| * @selector .slds-region__pinned-right | |
| * @restrict .slds-region | |
| */ | |
| .slds-region__pinned-right { | |
| background-color: white; | |
| border-left: 1px solid #dddbda; } | |
| /** | |
| * The default Vertical Tabs component renders a list of tabs and their | |
| * related content. The tab list is not truncated by default, but truncation | |
| * can be added with a modifier class on the link elements. | |
| * | |
| * @summary Renders a vertical tablist. | |
| * @name base | |
| * @selector .slds-vertical-tabs | |
| * @restrict div, section | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-vertical-tabs { | |
| display: -ms-flexbox; | |
| display: flex; | |
| overflow: hidden; | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; } | |
| /** | |
| * @summary Tab navigation container element | |
| * @selector .slds-vertical-tabs__nav | |
| * @restrict .slds-vertical-tabs > ul | |
| */ | |
| .slds-vertical-tabs__nav { | |
| width: 12rem; | |
| border-right: 1px solid #dddbda; | |
| background: #f3f2f2; } | |
| /** | |
| * @summary Tab navigation item | |
| * @selector .slds-vertical-tabs__nav-item | |
| * @restrict .slds-vertical-tabs__nav li | |
| */ | |
| .slds-vertical-tabs__nav-item { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| overflow: hidden; | |
| border-bottom: 1px solid #dddbda; | |
| color: #3e3e3c; } | |
| .slds-vertical-tabs__nav-item:last-child { | |
| margin-bottom: -1px; } | |
| /** | |
| * @summary Tab Navigation Link | |
| * @selector .slds-vertical-tabs__link | |
| * @restrict .slds-vertical-tabs__nav-item a | |
| */ | |
| .slds-vertical-tabs__link { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex: 1 1 0%; | |
| flex: 1 1 0%; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| min-width: 0; | |
| padding: 0.75rem; | |
| color: currentColor; } | |
| .slds-vertical-tabs__link:hover { | |
| background: #dddbda; | |
| color: #080707; | |
| text-decoration: none; } | |
| .slds-vertical-tabs__link:focus { | |
| outline: 0; } | |
| /** | |
| * @summary Left icon inside of vertical tabs nav item | |
| * @selector .slds-vertical-tabs__left-icon | |
| * @restrict .slds-vertical-tabs__nav-item span | |
| */ | |
| .slds-vertical-tabs__left-icon { | |
| margin-right: 0.5rem; } | |
| .slds-vertical-tabs__left-icon:empty { | |
| margin-right: 0; } | |
| /** | |
| * @summary Right icon inside of vertical tabs nav item | |
| * @selector .slds-vertical-tabs__right-icon | |
| * @restrict .slds-vertical-tabs__nav-item span | |
| */ | |
| .slds-vertical-tabs__right-icon { | |
| margin-left: auto; } | |
| /** | |
| * @summary Tab Content Container | |
| * @selector .slds-vertical-tabs__content | |
| * @restrict .slds-vertical-tabs div | |
| */ | |
| .slds-vertical-tabs__content { | |
| -ms-flex: 1; | |
| flex: 1; | |
| padding: 1rem; | |
| background: white; } | |
| /** | |
| * @name item-active | |
| * @summary Active state for a tab navigation item | |
| * @selector .slds-is-active | |
| * @restrict .slds-vertical-tabs__nav-item | |
| * @notes Required on the `<li>` element that is associated with the current active tab | |
| * @modifier | |
| * @group interactions | |
| */ | |
| .slds-vertical-tabs__nav-item.slds-is-active { | |
| margin-right: -1px; | |
| border-right: 0; | |
| background: white; | |
| color: #006dcc; } | |
| .slds-vertical-tabs__nav-item.slds-is-active .slds-vertical-tabs__link:hover { | |
| background: white; | |
| color: currentColor; } | |
| /** | |
| * @name item-focus | |
| * @summary Focus state for a tab navigation item | |
| * @selector .slds-has-focus | |
| * @restrict .slds-vertical-tabs__nav-item | |
| * @modifier | |
| * @group interactions | |
| */ | |
| .slds-vertical-tabs__nav-item.slds-has-focus { | |
| text-decoration: underline; } | |
| .slds-welcome-mat { | |
| /** | |
| * Modal container sizing within Welcome Mat | |
| * | |
| * @selector .slds-modal__container | |
| * @restrict .slds-welcome-mat | |
| * @deprecated | |
| */ } | |
| .slds-welcome-mat .slds-modal__container { | |
| width: 52.062rem; | |
| max-width: none; } | |
| /** | |
| * @summary Welcome Mat component | |
| * @name base | |
| * @selector .slds-welcome-mat | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-welcome-mat { | |
| position: relative; } | |
| /** | |
| * @summary Content container for the whole Welcome Mat | |
| * @selector .slds-welcome-mat__content | |
| * @restrict .slds-welcome-mat div | |
| */ | |
| .slds-welcome-mat__content { | |
| min-height: 25rem; | |
| max-height: 37.5rem; | |
| /** | |
| * @summary Progress bar inside Welcome Mat | |
| */ | |
| /** | |
| * @summary Progress bar value inside Welcome Mat | |
| */ } | |
| .slds-welcome-mat__content .slds-progress-bar { | |
| display: inline-block; | |
| width: 12.5rem; | |
| background: white; } | |
| .slds-welcome-mat__content .slds-progress-bar__value { | |
| background: #4bca81; } | |
| /** | |
| * @summary Container element for the informational side of the Welcome Mat | |
| * @selector .slds-welcome-mat__info | |
| * @restrict .slds-welcome-mat__content div | |
| */ | |
| .slds-welcome-mat__info { | |
| display: -ms-flexbox; | |
| display: flex; | |
| overflow: auto; | |
| padding: 1rem 3rem 7.75rem; | |
| color: #00396b; | |
| background-image: url("/assets/images/welcome-mat/bg-info@2x.png"); | |
| background-position: bottom center; | |
| background-repeat: no-repeat; | |
| background-size: contain; | |
| background-color: #cae6f1; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| /** | |
| * @summary Content container for the informational side of the Welcome Mat. Centers in container space. | |
| * @selector .slds-welcome-mat__info-content | |
| * @restrict .slds-welcome-mat__info div | |
| */ | |
| .slds-welcome-mat__info-content { | |
| margin: auto; | |
| text-align: center; } | |
| /** | |
| * @summary Title element for the informational side of the Welcome Mat | |
| * @selector .slds-welcome-mat__info-title | |
| * @restrict .slds-welcome-mat__info-content h2 | |
| */ | |
| .slds-welcome-mat__info-title { | |
| margin-bottom: 1.5rem; | |
| font-size: 2.625rem; | |
| font-weight: 700; | |
| line-height: 1.25; } | |
| /** | |
| * @summary Description container for the informational side of the Welcome Mat | |
| * @selector .slds-welcome-mat__info-description | |
| * @restrict .slds-welcome-mat__info-content p, .slds-welcome-mat__info-content div | |
| */ | |
| .slds-welcome-mat__info-description { | |
| margin-bottom: 1.5rem; } | |
| /** | |
| * @summary Text description of walkthrough progress | |
| * @selector .slds-welcome-mat__info-progress | |
| * @restrict .slds-welcome-mat__info-content div | |
| */ | |
| .slds-welcome-mat__info-progress { | |
| margin-bottom: 1rem; } | |
| /** | |
| * @summary Container element for the Actions side of the Welcome Mat. | |
| * @selector .slds-welcome-mat__tiles | |
| * @restrict .slds-welcome-mat__content ul | |
| */ | |
| .slds-welcome-mat__tiles { | |
| background: #f3f2f2; | |
| overflow: auto; | |
| padding: 1rem; } | |
| /** | |
| * @summary Welcome Mat Tile item. Shows an actionable step a user can take to complete a greater objective. Based on a SLDS Visual Picker. | |
| * @selector .slds-welcome-mat__tile | |
| * @restrict .slds-welcome-mat__tiles li | |
| */ | |
| .slds-welcome-mat__tile { | |
| margin: 1rem 0; } | |
| .slds-welcome-mat__tile .slds-media { | |
| padding: 0.5rem; } | |
| .slds-welcome-mat__tile:not(.slds-welcome-mat__tile_complete):not(.slds-welcome-mat__tile_info-only) { | |
| box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05); | |
| border-radius: 0.25rem; | |
| background: white; } | |
| .slds-welcome-mat__tile:not(.slds-welcome-mat__tile_complete):not(.slds-welcome-mat__tile_info-only):hover { | |
| box-shadow: 0 0 0 1px #1589ee inset, 0 2px 2px rgba(0, 0, 0, 0.05); } | |
| .slds-welcome-mat__tile:not(.slds-welcome-mat__tile_complete) .slds-icon-action-check { | |
| display: none; } | |
| .slds-welcome-mat__tile:first-child { | |
| margin-top: 0; } | |
| .slds-welcome-mat__tile:last-child { | |
| margin-bottom: 0; } | |
| /** | |
| * @summary Figure element for Welcome Mat Tile item, based on SLDS Media Object figure. | |
| * @selector .slds-welcome-mat__tile-figure | |
| * @restrict .slds-welcome-mat__tile .slds-media__figure div | |
| */ | |
| .slds-welcome-mat__tile-figure { | |
| margin-left: 0.25rem; } | |
| /** | |
| * @summary Title element for Welcome Mat Tile item. | |
| * @selector .slds-welcome-mat__tile-title | |
| * @restrict .slds-welcome-mat__tile h3 | |
| */ | |
| .slds-welcome-mat__tile-title { | |
| font-weight: 700; } | |
| /** | |
| * @summary Body element for Welcome Mat Tile item, based on SLDS Media Object body. | |
| * @selector .slds-welcome-mat__tile-body | |
| * @restrict .slds-welcome-mat__tile .slds-media__body div | |
| */ | |
| .slds-welcome-mat__tile-body { | |
| padding: 0.75rem; | |
| border-left: 1px solid #dddbda; } | |
| /** | |
| * @summary Description element for Welcome Mat Tile item. | |
| * @selector .slds-welcome-mat__tile-description | |
| * @restrict .slds-welcome-mat__tile p | |
| */ | |
| .slds-welcome-mat__tile-description { | |
| color: #3e3e3c; | |
| font-size: 0.75rem; | |
| line-height: 1.5; } | |
| /** | |
| * @summary Icon Container for Welcome Mat Tile item. | |
| * @selector .slds-welcome-mat__tile-icon-container | |
| * @restrict .slds-welcome-mat__tile div | |
| */ | |
| .slds-welcome-mat__tile-icon-container { | |
| position: relative; } | |
| /** | |
| * @name tile-complete | |
| * @summary Complete modifier class for Welcome Mat Tile item. | |
| * @selector .slds-welcome-mat__tile_complete | |
| * @restrict .slds-welcome-mat__tile | |
| * @modifier | |
| * @group state | |
| */ | |
| .slds-welcome-mat__tile_complete { | |
| background: transparent; } | |
| .slds-welcome-mat__tile_complete .slds-icon { | |
| fill: #c9c7c5; } | |
| .slds-welcome-mat .slds-icon-action-check { | |
| position: absolute; | |
| bottom: -0.625rem; | |
| right: -0.625rem; | |
| height: 1.25rem; | |
| width: 1.25rem; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| padding: 0.25rem; | |
| border: 2px solid #f3f2f2; | |
| border-radius: 1.25rem; | |
| line-height: 0; | |
| background: #4bca81; } | |
| .slds-welcome-mat .slds-icon-action-check .slds-icon { | |
| fill: white; } | |
| /** | |
| * @summary Creates Welcome Mat Full Width | |
| * @name splash | |
| * @selector .slds-welcome-mat_splash | |
| * @restrict .slds-welcome-mat | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-welcome-mat_splash .slds-welcome-mat__content { | |
| height: 37.5rem; } | |
| .slds-welcome-mat_splash .slds-welcome-mat__info-content { | |
| max-width: 37.5rem; } | |
| .slds-welcome-mat_splash .slds-welcome-mat__info-title { | |
| font-size: 2rem; } | |
| /** | |
| * @summary Creates Welcome Mat Info Only | |
| * @name info-only | |
| * @selector .slds-welcome-mat_info-only | |
| * @restrict .slds-welcome-mat | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-welcome-mat_info-only .slds-welcome-mat__content { | |
| height: 37.5rem; } | |
| .slds-welcome-mat_info-only .slds-welcome-mat__info-title { | |
| font-size: 2rem; } | |
| /** | |
| * @summary Sets tile area of Welcome Mat to read only | |
| * @selector .slds-welcome-mat__tiles_info-only | |
| * @restrict .slds-welcome-mat__tiles | |
| */ | |
| .slds-welcome-mat__tiles_info-only { | |
| background-color: white; } | |
| /** | |
| * @summary Welcome Mat Tile with only info item. Shows informational content. Based on a SLDS Media Object. | |
| * @selector .slds-welcome-mat__tile_info-only | |
| * @restrict .slds-welcome-mat_info-only li | |
| */ | |
| .slds-welcome-mat__tile_info-only .slds-welcome-mat__tile-body { | |
| border-left: 0; } | |
| /** | |
| * The Trailhead Connected variant should be used when users can achieve | |
| * a badge in Trailhead for completing all steps in the current Welcome Mat. | |
| * | |
| * Only Trailhead Connected Mats may have the Trailhead font for the header. | |
| * | |
| * @summary Creates Trailhead Connected Welcome Mat | |
| * @name trailhead-connected | |
| * @selector .slds-welcome-mat_trailhead | |
| * @restrict .slds-welcome-mat | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| /** | |
| * @summary Badge container for Welcome Mat Trailhead Progress Info. Overrides properties for the check icon, specific for this variant. | |
| * @selector .slds-welcome-mat__info-badge-container | |
| * @restrict .slds-welcome-mat__info-progress div | |
| */ | |
| .slds-welcome-mat__info-badge-container { | |
| display: inline-block; | |
| position: relative; } | |
| .slds-welcome-mat__info-badge-container .slds-icon-action-check { | |
| border-width: 0; | |
| top: 50%; | |
| right: 0%; | |
| transform: translate3d(50%, -50%, 0); | |
| display: none; } | |
| /** | |
| * @summary Badge for the Trailhead Progress Info. | |
| * @selector .slds-welcome-mat__info-badge | |
| * @restrict .slds-welcome-mat__info-badge-container img | |
| */ | |
| .slds-welcome-mat__info-badge { | |
| margin-bottom: 0.5rem; } | |
| /** | |
| * @name progress-complete | |
| * @summary Modifier for Completed progress. Shows completed checkmark. | |
| * @selector .slds-welcome-mat__info-progress_complete | |
| * @restrict .slds-welcome-mat__info-progress | |
| * @modifier | |
| * @group state | |
| */ | |
| .slds-welcome-mat__info-progress_complete .slds-icon-action-check { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| /** | |
| * | |
| * @summary Initializes a summary detail | |
| * | |
| * @name base | |
| * @selector .slds-summary-detail | |
| * @restrict div | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-summary-detail { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| /** | |
| * @summary Styles the position of the toggle icon | |
| * | |
| * @selector .slds-summary-detail__content | |
| * @restrict .slds-summary-detail div | |
| */ | |
| /** | |
| * @summary Styles the visibility of the detail content | |
| * | |
| * @selector .slds-summary-detail__content | |
| * @restrict .slds-summary-detail div | |
| */ } | |
| .slds-summary-detail .slds-summary-detail__action-icon { | |
| transform: rotate(-90deg); } | |
| .slds-summary-detail .slds-summary-detail__content { | |
| overflow: hidden; | |
| visibility: hidden; | |
| opacity: 0; | |
| height: 0; } | |
| /** | |
| * Toggle visibility of the detail section + rotate icon | |
| * | |
| * @selector .slds-is-open | |
| * @restrict .slds-summary-detail | |
| * @modifier | |
| */ | |
| .slds-summary-detail.slds-is-open .slds-summary-detail__action-icon { | |
| transform: rotate(0deg); | |
| transform-origin: 45%; } | |
| .slds-summary-detail.slds-is-open .slds-summary-detail__content { | |
| padding-top: 0.75rem; | |
| overflow: visible; | |
| visibility: visible; | |
| opacity: 1; | |
| height: auto; } | |
| /** | |
| * @summary Setup Assistant component | |
| * | |
| * @name base | |
| * @selector .slds-setup-assistant | |
| * @restrict ol | |
| * @support dev-ready | |
| * @variant | |
| */ | |
| .slds-setup-assistant { | |
| padding: 1rem; } | |
| /** | |
| * @summary Creates a Setup Assistant list item | |
| * | |
| * @selector .slds-setup-assistant__item | |
| * @restrict .slds-setup-assistant li | |
| */ | |
| .slds-setup-assistant__item { | |
| border-bottom: 1px #dddbda solid; | |
| padding: 2rem 0; } | |
| .slds-setup-assistant__item:first-child { | |
| padding-top: 0; } | |
| .slds-setup-assistant__item:last-child { | |
| padding-bottom: 0; | |
| border-bottom: 0; } | |
| /** | |
| * @summary Creates a Setup Assistant step | |
| * | |
| * @selector .slds-setup-assistant__step | |
| * @restrict .slds-setup-assistant article | |
| */ | |
| /** | |
| * @summary Setup Assistant step's summary portion | |
| * | |
| * @selector .slds-setup-assistant__step-summary | |
| * @restrict .slds-setup-assistant__step div, .slds-setup-assistant__step .slds-summary_detail__title div | |
| */ | |
| .slds-setup-assistant__step-summary .slds-progress-ring_large { | |
| top: 1px; } | |
| /** | |
| * @summary Add a right margin to Setup Assistant step's summary content | |
| * | |
| * @selector .slds-setup-assistant__step-summary-content | |
| * @restrict .slds-setup-assistant__step-summary div | |
| */ | |
| .slds-setup-assistant__step-summary-content { | |
| margin-right: 3rem; } | |
| /** | |
| * @summary Add bottom padding to Setup Assistant step's summary title | |
| * | |
| * @selector .slds-setup-assistant__step-summary-title | |
| * @restrict .slds-setup-assistant__step-summary h3 | |
| */ | |
| .slds-setup-assistant__step-summary-title { | |
| padding-bottom: 0.5rem; | |
| font-weight: 700; } | |
| /** | |
| * @summary Add left padding before Setup Assistant step's detail portion | |
| * | |
| * @selector .slds-setup-assistant__step-detail | |
| * @restrict .slds-setup-assistant__step div | |
| */ | |
| .slds-setup-assistant__step-detail { | |
| padding-left: 2.75rem; } | |
| @media (min-width: 30em) { | |
| .slds-nowrap_small, | |
| .slds-nowrap--small { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } } | |
| @media (min-width: 48em) { | |
| .slds-nowrap_medium, | |
| .slds-nowrap--medium { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } } | |
| @media (min-width: 64em) { | |
| .slds-nowrap_large, | |
| .slds-nowrap--large { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } } | |
| .slds-col_padded, | |
| .slds-col--padded { | |
| padding-right: 0.75rem; | |
| padding-left: 0.75rem; } | |
| .slds-col_padded-medium, | |
| .slds-col--padded-medium { | |
| padding-right: 1rem; | |
| padding-left: 1rem; } | |
| .slds-col_padded-large, | |
| .slds-col--padded-large { | |
| padding-right: 1.5rem; | |
| padding-left: 1.5rem; } | |
| .slds-col_padded-around, | |
| .slds-col--padded-around { | |
| padding: 0.75rem; } | |
| .slds-col_padded-around-medium, | |
| .slds-col--padded-around-medium { | |
| padding: 1rem; } | |
| .slds-col_padded-around-large, | |
| .slds-col--padded-around-large { | |
| padding: 1.5rem; } | |
| @media (min-width: 64em) { | |
| .slds-col-rule_top, .slds-col-rule--top { | |
| border-top: 1px solid #f3f2f2; } | |
| .slds-col-rule_right, .slds-col-rule--right { | |
| border-right: 1px solid #f3f2f2; } | |
| .slds-col-rule_bottom, .slds-col-rule--bottom { | |
| border-bottom: 1px solid #f3f2f2; } | |
| .slds-col-rule_left, .slds-col-rule--left { | |
| border-left: 1px solid #f3f2f2; } } | |
| .slds-align-content-center { | |
| -ms-flex: 1; | |
| flex: 1; | |
| -ms-flex-item-align: center; | |
| -ms-grid-row-align: center; | |
| align-self: center; | |
| -ms-flex-pack: center; | |
| justify-content: center; } | |
| /** | |
| * @summary Initializes grid | |
| * | |
| * @selector .slds-grid | |
| * @modifier | |
| */ | |
| .slds-grid { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| /** | |
| * @summary Initializes grid | |
| * | |
| * @selector .slds-grid_frame | |
| * @modifier | |
| */ | |
| .slds-grid_frame, | |
| .slds-grid--frame { | |
| min-width: 100vw; | |
| min-height: 100vh; | |
| overflow: hidden; } | |
| /** | |
| * @summary Initializes grid | |
| * | |
| * @selector .slds-grid_vertical | |
| * @modifier | |
| */ | |
| .slds-grid_vertical, | |
| .slds-grid--vertical { | |
| -ms-flex-direction: column; | |
| flex-direction: column; } | |
| /** | |
| * @summary Initializes grid | |
| * | |
| * @selector .slds-grid_vertical-reverse | |
| * @modifier | |
| */ | |
| .slds-grid_vertical-reverse, | |
| .slds-grid--vertical-reverse { | |
| -ms-flex-direction: column-reverse; | |
| flex-direction: column-reverse; } | |
| /** | |
| * @summary Initializes grid | |
| * | |
| * @selector .slds-grid_reverse | |
| * @modifier | |
| */ | |
| .slds-grid_reverse, | |
| .slds-grid--reverse { | |
| -ms-flex-direction: row-reverse; | |
| flex-direction: row-reverse; } | |
| /** | |
| * @summary Allows columns to wrap when they exceed 100% of their parent’s width | |
| * | |
| * @selector .slds-wrap | |
| * @modifier | |
| */ | |
| .slds-wrap { | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| -ms-flex-align: start; | |
| align-items: flex-start; } | |
| /** | |
| * @summary Keeps columns on one line. Allows columns to stretch and fill 100% of the parent’s width and height. | |
| * | |
| * @selector .slds-nowrap | |
| * @modifier | |
| */ | |
| .slds-nowrap { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } | |
| /** | |
| * @summary .slds-{size}-nowrap used for responsive design | |
| * | |
| * @selector [class*='-nowrap'] | |
| * @modifier | |
| */ | |
| @media (min-width: 20em) { | |
| .slds-x-small-nowrap { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } } | |
| @media (min-width: 30em) { | |
| .slds-small-nowrap { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } } | |
| @media (min-width: 48em) { | |
| .slds-medium-nowrap { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } } | |
| @media (min-width: 64em) { | |
| .slds-large-nowrap { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; | |
| -ms-flex-wrap: nowrap; | |
| flex-wrap: nowrap; | |
| -ms-flex-align: stretch; | |
| align-items: stretch; } } | |
| /** | |
| * @summary Apply 12px gutters to each grid column when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters | |
| * @modifier | |
| */ | |
| .slds-gutters { | |
| margin-right: -0.75rem; | |
| margin-left: -0.75rem; } | |
| .slds-gutters .slds-col { | |
| padding-right: 0.75rem; | |
| padding-left: 0.75rem; } | |
| /** | |
| * @summary Apply 2px gutters to each grid column when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_xxx-small | |
| * @modifier | |
| */ | |
| .slds-gutters_xxx-small { | |
| margin-right: -0.125rem; | |
| margin-left: -0.125rem; } | |
| .slds-gutters_xxx-small .slds-col { | |
| padding-right: 0.125rem; | |
| padding-left: 0.125rem; } | |
| /** | |
| * @summary Apply 4px gutters to each grid column when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_xx-small | |
| * @modifier | |
| */ | |
| .slds-gutters_xx-small { | |
| margin-right: -0.25rem; | |
| margin-left: -0.25rem; } | |
| .slds-gutters_xx-small .slds-col { | |
| padding-right: 0.25rem; | |
| padding-left: 0.25rem; } | |
| /** | |
| * @summary Apply 8px gutters to each grid column when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_x-small | |
| * @modifier | |
| */ | |
| .slds-gutters_x-small { | |
| margin-right: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-gutters_x-small .slds-col { | |
| padding-right: 0.5rem; | |
| padding-left: 0.5rem; } | |
| /** | |
| * @summary Apply 12px gutters to each grid column when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_small | |
| * @modifier | |
| */ | |
| .slds-gutters_small { | |
| margin-right: -0.75rem; | |
| margin-left: -0.75rem; } | |
| .slds-gutters_small .slds-col { | |
| padding-right: 0.75rem; | |
| padding-left: 0.75rem; } | |
| /** | |
| * @summary Apply 16px gutters to each grid column when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_medium | |
| * @modifier | |
| */ | |
| .slds-gutters_medium { | |
| margin-right: -1rem; | |
| margin-left: -1rem; } | |
| .slds-gutters_medium .slds-col { | |
| padding-right: 1rem; | |
| padding-left: 1rem; } | |
| /** | |
| * @summary Apply 24px gutters to each grid column when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_large | |
| * @modifier | |
| */ | |
| .slds-gutters_large { | |
| margin-right: -1.5rem; | |
| margin-left: -1.5rem; } | |
| .slds-gutters_large .slds-col { | |
| padding-right: 1.5rem; | |
| padding-left: 1.5rem; } | |
| /** | |
| * @summary Apply 32px gutters to each grid column when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_x-large | |
| * @modifier | |
| */ | |
| .slds-gutters_x-large { | |
| margin-right: -2rem; | |
| margin-left: -2rem; } | |
| .slds-gutters_x-large .slds-col { | |
| padding-right: 2rem; | |
| padding-left: 2rem; } | |
| /** | |
| * @summary Apply 48px gutters to each grid column when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_xx-large | |
| * @modifier | |
| */ | |
| .slds-gutters_xx-large { | |
| margin-right: -3rem; | |
| margin-left: -3rem; } | |
| .slds-gutters_xx-large .slds-col { | |
| padding-right: 3rem; | |
| padding-left: 3rem; } | |
| /** | |
| * @summary Apply 12px gutters to only direct column children when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_direct | |
| * @modifier | |
| */ | |
| .slds-gutters_direct { | |
| margin-right: -0.75rem; | |
| margin-left: -0.75rem; } | |
| .slds-gutters_direct > .slds-col { | |
| padding-right: 0.75rem; | |
| padding-left: 0.75rem; } | |
| /** | |
| * @summary Apply 2px gutters to only direct column children when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_direct-xxx-small | |
| * @modifier | |
| */ | |
| .slds-gutters_direct-xxx-small { | |
| margin-right: -0.125rem; | |
| margin-left: -0.125rem; } | |
| .slds-gutters_direct-xxx-small > .slds-col { | |
| padding-right: 0.125rem; | |
| padding-left: 0.125rem; } | |
| /** | |
| * @summary Apply 4px gutters to only direct column children when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_direct-xx-small | |
| * @modifier | |
| */ | |
| .slds-gutters_direct-xx-small { | |
| margin-right: -0.25rem; | |
| margin-left: -0.25rem; } | |
| .slds-gutters_direct-xx-small > .slds-col { | |
| padding-right: 0.25rem; | |
| padding-left: 0.25rem; } | |
| /** | |
| * @summary Apply 8px gutters to only direct column children when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_direct-x-small | |
| * @modifier | |
| */ | |
| .slds-gutters_direct-x-small { | |
| margin-right: -0.5rem; | |
| margin-left: -0.5rem; } | |
| .slds-gutters_direct-x-small > .slds-col { | |
| padding-right: 0.5rem; | |
| padding-left: 0.5rem; } | |
| /** | |
| * @summary Apply 12px gutters to only direct column children when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_direct-small | |
| * @modifier | |
| */ | |
| .slds-gutters_direct-small { | |
| margin-right: -0.75rem; | |
| margin-left: -0.75rem; } | |
| .slds-gutters_direct-small > .slds-col { | |
| padding-right: 0.75rem; | |
| padding-left: 0.75rem; } | |
| /** | |
| * @summary Apply 16px gutters to only direct column children when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_direct-medium | |
| * @modifier | |
| */ | |
| .slds-gutters_direct-medium { | |
| margin-right: -1rem; | |
| margin-left: -1rem; } | |
| .slds-gutters_direct-medium > .slds-col { | |
| padding-right: 1rem; | |
| padding-left: 1rem; } | |
| /** | |
| * @summary Apply 24px gutters to only direct column children when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_direct-large | |
| * @modifier | |
| */ | |
| .slds-gutters_direct-large { | |
| margin-right: -1.5rem; | |
| margin-left: -1.5rem; } | |
| .slds-gutters_direct-large > .slds-col { | |
| padding-right: 1.5rem; | |
| padding-left: 1.5rem; } | |
| /** | |
| * @summary Apply 32px gutters to only direct column children when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_direct-x-large | |
| * @modifier | |
| */ | |
| .slds-gutters_direct-x-large { | |
| margin-right: -2rem; | |
| margin-left: -2rem; } | |
| .slds-gutters_direct-x-large > .slds-col { | |
| padding-right: 2rem; | |
| padding-left: 2rem; } | |
| /** | |
| * @summary Apply 48px gutters to only direct column children when you add this class to an `slds-grid` element | |
| * @selector .slds-gutters_direct-xx-large | |
| * @modifier | |
| */ | |
| .slds-gutters_direct-xx-large { | |
| margin-right: -3rem; | |
| margin-left: -3rem; } | |
| .slds-gutters_direct-xx-large > .slds-col { | |
| padding-right: 3rem; | |
| padding-left: 3rem; } | |
| /** | |
| * @summary Normalizes the 0.75rem of padding when nesting a grid in a region with `.slds-p-horizontal_small` | |
| * | |
| * @selector .slds-grid_pull-padded | |
| * @modifier | |
| */ | |
| .slds-grid_pull-padded, | |
| .slds-grid--pull-padded { | |
| margin-right: -0.75rem; | |
| margin-left: -0.75rem; } | |
| /** | |
| * @summary Normalizes the 0.125rem of padding when nesting a grid in a region with `.slds-p-horizontal_xxx-small` | |
| * | |
| * @selector .slds-grid_pull-padded-xxx-small | |
| * @modifier | |
| */ | |
| .slds-grid_pull-padded-xxx-small, | |
| .slds-grid--pull-padded-xxx-small { | |
| margin-right: -0.125rem; | |
| margin-left: -0.125rem; } | |
| /** | |
| * @summary Normalizes the 0.25rem of padding when nesting a grid in a region with `.slds-p-horizontal_xx-small` | |
| * | |
| * @selector .slds-grid_pull-padded-xx-small | |
| * @modifier | |
| */ | |
| .slds-grid_pull-padded-xx-small, | |
| .slds-grid--pull-padded-xx-small { | |
| margin-right: -0.25rem; | |
| margin-left: -0.25rem; } | |
| /** | |
| * @summary Normalizes the 0.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_x-small` | |
| * | |
| * @selector .slds-grid_pull-padded-x-small | |
| * @modifier | |
| */ | |
| .slds-grid_pull-padded-x-small, | |
| .slds-grid--pull-padded-x-small { | |
| margin-right: -0.5rem; | |
| margin-left: -0.5rem; } | |
| /** | |
| * @summary Normalizes the 0.75rem of padding when nesting a grid in a region with `.slds-p-horizontal_small` | |
| * | |
| * @selector .slds-grid_pull-padded-small | |
| * @modifier | |
| */ | |
| .slds-grid_pull-padded-small, | |
| .slds-grid--pull-padded-small { | |
| margin-right: -0.75rem; | |
| margin-left: -0.75rem; } | |
| /** | |
| * @summary Normalizes the 1rem of padding when nesting a grid in a region with `.slds-p-horizontal_medium` | |
| * | |
| * @selector .slds-grid_pull-padded-medium | |
| * @modifier | |
| */ | |
| .slds-grid_pull-padded-medium, | |
| .slds-grid--pull-padded-medium { | |
| margin-right: -1rem; | |
| margin-left: -1rem; } | |
| /** | |
| * @summary Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_large` | |
| * | |
| * @selector .slds-grid_pull-padded-large | |
| * @modifier | |
| */ | |
| .slds-grid_pull-padded-large, | |
| .slds-grid--pull-padded-large { | |
| margin-right: -1.5rem; | |
| margin-left: -1.5rem; } | |
| /** | |
| * @summary Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_x-large` | |
| * | |
| * @selector .slds-grid_pull-padded-x-large | |
| * @modifier | |
| */ | |
| .slds-grid_pull-padded-x-large, | |
| .slds-grid--pull-padded-x-large { | |
| margin-right: -2rem; | |
| margin-left: -2rem; } | |
| /** | |
| * @summary Normalizes the 1.5rem of padding when nesting a grid in a region with `.slds-p-horizontal_xx-large` | |
| * | |
| * @selector .slds-grid_pull-padded-xx-large | |
| * @modifier | |
| */ | |
| .slds-grid_pull-padded-xx-large, | |
| .slds-grid--pull-padded-xx-large { | |
| margin-right: -3rem; | |
| margin-left: -3rem; } | |
| /** | |
| * @summary Initializes a grid column | |
| * | |
| * @selector .slds-col | |
| * @modifier | |
| */ | |
| .slds-col, | |
| [class*="slds-col_padded"], | |
| [class*="slds-col--padded"] { | |
| -ms-flex: 1 1 auto; | |
| flex: 1 1 auto; } | |
| /** | |
| * @summary Adds border to top side of column | |
| * | |
| * @selector .slds-col_rule-top | |
| * @restrict .slds-col | |
| * @modifier | |
| */ | |
| @media (min-width: 64em) { | |
| .slds-col_rule-top, | |
| .slds-col--rule-top { | |
| border-top: 1px solid #f3f2f2; } } | |
| /** | |
| * @summary Adds border to right side of column | |
| * | |
| * @selector .slds-col_rule-right | |
| * @restrict .slds-col | |
| * @modifier | |
| */ | |
| @media (min-width: 64em) { | |
| .slds-col_rule-right, | |
| .slds-col--rule-right { | |
| border-right: 1px solid #f3f2f2; } } | |
| /** | |
| * @summary Adds border to bottom side of column | |
| * | |
| * @selector .slds-col_rule-bottom | |
| * @restrict .slds-col | |
| * @modifier | |
| */ | |
| @media (min-width: 64em) { | |
| .slds-col_rule-bottom, | |
| .slds-col--rule-bottom { | |
| border-bottom: 1px solid #f3f2f2; } } | |
| /** | |
| * @summary Adds border to left side of column | |
| * | |
| * @selector .slds-col_rule-left | |
| * @restrict .slds-col | |
| * @modifier | |
| */ | |
| @media (min-width: 64em) { | |
| .slds-col_rule-left, | |
| .slds-col--rule-left { | |
| border-left: 1px solid #f3f2f2; } } | |
| /** | |
| * @summary Needed when truncation is nested in a flexible container in a grid | |
| * | |
| * @selector .slds-has-flexi-truncate | |
| * @modifier | |
| */ | |
| .slds-has-flexi-truncate { | |
| -ms-flex: 1 1 0%; | |
| flex: 1 1 0%; | |
| min-width: 0; } | |
| /** | |
| * @summary Removes flexbox from grid column | |
| * | |
| * @selector .slds-no-flex | |
| * @modifier | |
| */ | |
| .slds-no-flex { | |
| -ms-flex: none; | |
| flex: none; } | |
| /** | |
| * @summary Sets the column to a min-width of 0 | |
| * | |
| * @selector .slds-no-space | |
| * @modifier | |
| */ | |
| .slds-no-space { | |
| min-width: 0; } | |
| /** | |
| * @summary Allows column to grow to children’s content | |
| * | |
| * @selector .slds-grow | |
| * @modifier | |
| */ | |
| .slds-grow { | |
| -ms-flex-positive: 1; | |
| flex-grow: 1; } | |
| /** | |
| * @summary Prevents column from growing to children’s content | |
| * | |
| * @selector .slds-grow-none | |
| * @modifier | |
| */ | |
| .slds-grow-none { | |
| -ms-flex-positive: 0; | |
| flex-grow: 0; } | |
| /** | |
| * @summary Allows column to shrink to children's content | |
| * | |
| * @selector .slds-shrink | |
| * @modifier | |
| */ | |
| .slds-shrink { | |
| -ms-flex-negative: 1; | |
| flex-shrink: 1; } | |
| /** | |
| * @summary Prevents column from shrinking to children's content | |
| * | |
| * @selector .slds-shrink-none | |
| * @modifier | |
| */ | |
| .slds-shrink-none { | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; } | |
| .slds-text-longform ul.slds-grid { | |
| margin-left: 0; | |
| list-style: none; } | |
| /** | |
| * @summary Columns align in the center to the main axis and expand in each direction | |
| * | |
| * @selector .slds-grid_align-center | |
| * @modifier | |
| */ | |
| .slds-grid_align-center, | |
| .slds-grid--align-center { | |
| -ms-flex-pack: center; | |
| justify-content: center; } | |
| .slds-grid_align-center .slds-col, | |
| .slds-grid_align-center [class*="slds-col_padded"], | |
| .slds-grid_align-center [class*="slds-col--padded"], | |
| .slds-grid--align-center .slds-col, | |
| .slds-grid--align-center [class*="slds-col_padded"], | |
| .slds-grid--align-center [class*="slds-col--padded"] { | |
| -ms-flex-positive: 0; | |
| flex-grow: 0; } | |
| /** | |
| * @summary Columns are evenly distributed with equal space around them all | |
| * | |
| * @selector .slds-grid_align-space | |
| * @modifier | |
| */ | |
| .slds-grid_align-space, | |
| .slds-grid--align-space { | |
| -ms-flex-pack: distribute; | |
| justify-content: space-around; } | |
| .slds-grid_align-space .slds-col, | |
| .slds-grid_align-space [class*="slds-col_padded"], | |
| .slds-grid_align-space [class*="slds-col--padded"], | |
| .slds-grid--align-space .slds-col, | |
| .slds-grid--align-space [class*="slds-col_padded"], | |
| .slds-grid--align-space [class*="slds-col--padded"] { | |
| -ms-flex-positive: 0; | |
| flex-grow: 0; } | |
| /** | |
| * @summary Columns align to the left and right followed by center. Space is equal between them | |
| * | |
| * @selector .slds-grid_align-spread | |
| * @notes With only two columns — you can get a similar effect by setting one of the columns to `.slds-no-flex` | |
| * @modifier | |
| */ | |
| .slds-grid_align-spread, | |
| .slds-grid--align-spread { | |
| -ms-flex-pack: justify; | |
| justify-content: space-between; } | |
| .slds-grid_align-spread .slds-col, | |
| .slds-grid_align-spread [class*="slds-col_padded"], | |
| .slds-grid_align-spread [class*="slds-col--padded"], | |
| .slds-grid--align-spread .slds-col, | |
| .slds-grid--align-spread [class*="slds-col_padded"], | |
| .slds-grid--align-spread [class*="slds-col--padded"] { | |
| -ms-flex-positive: 0; | |
| flex-grow: 0; } | |
| /** | |
| * @summary Columns start on the opposite end of the grid's main axis | |
| * | |
| * @selector .slds-grid_align-end | |
| * @modifier | |
| */ | |
| .slds-grid_align-end, | |
| .slds-grid--align-end { | |
| -ms-flex-pack: end; | |
| justify-content: flex-end; } | |
| .slds-grid_align-end .slds-col, | |
| .slds-grid_align-end [class*="slds-col_padded"], | |
| .slds-grid_align-end [class*="slds-col--padded"], | |
| .slds-grid--align-end .slds-col, | |
| .slds-grid--align-end [class*="slds-col_padded"], | |
| .slds-grid--align-end [class*="slds-col--padded"] { | |
| -ms-flex-positive: 0; | |
| flex-grow: 0; } | |
| /** | |
| * @summary Columns start at the beginning of the grid's cross axis | |
| * | |
| * @selector .slds-grid_vertical-align-start | |
| * @modifier | |
| */ | |
| .slds-grid_vertical-align-start, | |
| .slds-grid--vertical-align-start { | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| -ms-flex-line-pack: start; | |
| align-content: flex-start; } | |
| /** | |
| * @summary Columns align in the center to the cross axis and expand it each direction | |
| * | |
| * @selector .slds-grid_vertical-align-center | |
| * @modifier | |
| */ | |
| .slds-grid_vertical-align-center, | |
| .slds-grid--vertical-align-center { | |
| -ms-flex-align: center; | |
| align-items: center; | |
| -ms-flex-line-pack: center; | |
| align-content: center; } | |
| /** | |
| * @summary Columns start on the opposite end of the grid's cross axis | |
| * | |
| * @selector .slds-grid_vertical-align-end | |
| * @modifier | |
| */ | |
| .slds-grid_vertical-align-end, | |
| .slds-grid--vertical-align-end { | |
| -ms-flex-align: end; | |
| align-items: flex-end; | |
| -ms-flex-line-pack: end; | |
| align-content: flex-end; } | |
| /** | |
| * @summary Vertically aligns element to top of `.slds-grid` | |
| * | |
| * @selector .slds-align-top | |
| * @modifier | |
| */ | |
| .slds-align-top { | |
| vertical-align: top; | |
| -ms-flex-item-align: start; | |
| align-self: flex-start; } | |
| /** | |
| * @summary Vertically aligns element to middle of `.slds-grid` | |
| * | |
| * @selector .slds-align-middle | |
| * @modifier | |
| */ | |
| .slds-align-middle { | |
| vertical-align: middle; | |
| -ms-flex-item-align: center; | |
| -ms-grid-row-align: center; | |
| align-self: center; } | |
| /** | |
| * @summary Vertically aligns element to bottom of `.slds-grid` | |
| * | |
| * @selector .slds-align-bottom | |
| * @modifier | |
| */ | |
| .slds-align-bottom { | |
| vertical-align: bottom; | |
| -ms-flex-item-align: end; | |
| align-self: flex-end; } | |
| /** | |
| * @summary Bumps grid item(s) away from the other grid items to sit at the top, taking up the remaining white-space of the grid container | |
| * | |
| * @selector .slds-col_bump-top | |
| * @modifier | |
| */ | |
| .slds-col_bump-top, | |
| .slds-col--bump-top { | |
| margin-top: auto; } | |
| /** | |
| * @summary Bumps grid item(s) away from the other grid items to sit to the right, taking up the remaining white-space of the grid container | |
| * | |
| * @selector .slds-col_bump-right | |
| * @modifier | |
| */ | |
| .slds-col_bump-right, | |
| .slds-col--bump-right { | |
| margin-right: auto; } | |
| /** | |
| * @summary Bumps grid item(s) away from the other grid items to sit at the bottom, taking up the remaining white-space of the grid container | |
| * | |
| * @selector .slds-col_bump-bottom | |
| * @modifier | |
| */ | |
| .slds-col_bump-bottom, | |
| .slds-col--bump-bottom { | |
| margin-bottom: auto; } | |
| /** | |
| * @summary Bumps grid item(s) away from the other grid items to sit to the left, taking up the remaining white-space of the grid container | |
| * | |
| * @selector .slds-col_bump-left | |
| * @modifier | |
| */ | |
| .slds-col_bump-left, | |
| .slds-col--bump-left { | |
| margin-left: auto; } | |
| /** | |
| * @summary Stretch the grid items for both single row and multi-line rows to fill the height of the parent grid container | |
| * | |
| * @selector .slds-grid_vertical-stretch | |
| * @notes Grid items will stretch the height of the parent grid container by default, unless `<wrap>` is used | |
| * @modifier | |
| */ | |
| .slds-grid_vertical-stretch, | |
| .slds-grid--vertical-stretch { | |
| -ms-flex-align: stretch; | |
| align-items: stretch; | |
| -ms-flex-line-pack: stretch; | |
| align-content: stretch; } | |
| /** | |
| * @summary Restrict width of containers to a maximum of 480px | |
| * | |
| * @selector .slds-container_small | |
| * @modifier | |
| */ | |
| .slds-container_small, | |
| .slds-container--small { | |
| max-width: 30rem; } | |
| /** | |
| * @summary Restrict width of containers to a maximum of 768px | |
| * | |
| * @selector .slds-container_medium | |
| * @modifier | |
| */ | |
| .slds-container_medium, | |
| .slds-container--medium { | |
| max-width: 48rem; } | |
| /** | |
| * @summary Restrict width of containers to a maximum of 1024px | |
| * | |
| * @selector .slds-container_large | |
| * @modifier | |
| */ | |
| .slds-container_large, | |
| .slds-container--large { | |
| max-width: 64rem; } | |
| /** | |
| * @summary Restrict width of containers to a maximum of 1280px | |
| * | |
| * @selector .slds-container_x-large | |
| * @modifier | |
| */ | |
| .slds-container_x-large, | |
| .slds-container--x-large { | |
| max-width: 80rem; } | |
| /** | |
| * @summary Width of container takes up 100% of viewport | |
| * | |
| * @selector .slds-container_fluid | |
| * @modifier | |
| */ | |
| .slds-container_fluid, | |
| .slds-container--fluid { | |
| width: 100%; } | |
| /** | |
| * @summary Horizontally positions containers in the center of the viewport | |
| * | |
| * @selector .slds-container_center | |
| * @modifier | |
| */ | |
| .slds-container_center, | |
| .slds-container--center { | |
| margin-left: auto; | |
| margin-right: auto; } | |
| /** | |
| * @summary Horizontally positions containers to the left of the viewport | |
| * | |
| * @selector .slds-container_left | |
| * @modifier | |
| */ | |
| .slds-container_left, | |
| .slds-container--left { | |
| margin-right: auto; } | |
| /** | |
| * @summary Horizontally positions containers to the right of the viewport | |
| * | |
| * @selector .slds-container_right | |
| * @modifier | |
| */ | |
| .slds-container_right, | |
| .slds-container--right { | |
| margin-left: auto; } | |
| .slds-grid_overflow, | |
| .slds-grid--overflow { | |
| -ms-flex-flow: row nowrap; | |
| flex-flow: row nowrap; } | |
| .slds-grid_overflow .slds-col, | |
| .slds-grid--overflow .slds-col { | |
| min-width: 11.25em; | |
| max-width: 22.5em; } | |
| /** | |
| * @summary Class will absolutely center children content | |
| * | |
| * @name absolute-center | |
| * @selector .slds-align_absolute-center | |
| * @modifier | |
| */ | |
| .slds-align_absolute-center, | |
| .slds-align--absolute-center { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-pack: center; | |
| justify-content: center; | |
| -ms-flex-line-pack: center; | |
| align-content: center; | |
| -ms-flex-align: center; | |
| align-items: center; | |
| margin: auto; } | |
| .slds-media_reverse > .slds-media__figure, | |
| .slds-media--reverse > .slds-media__figure { | |
| -ms-flex-order: 1; | |
| order: 1; } | |
| .slds-media_reverse.slds-media_small .slds-media__figure, | |
| .slds-media_reverse.slds-media--small .slds-media__figure, | |
| .slds-media--reverse.slds-media_small .slds-media__figure, | |
| .slds-media--reverse.slds-media--small .slds-media__figure { | |
| margin-left: 0.25rem; } | |
| .slds-media_double > .slds-media__figure, | |
| .slds-media--double > .slds-media__figure { | |
| -ms-flex-order: 1; | |
| order: 1; } | |
| .slds-media_double .slds-media__figure_reverse, | |
| .slds-media_double .slds-media__figure--reverse, | |
| .slds-media--double .slds-media__figure_reverse, | |
| .slds-media--double .slds-media__figure--reverse { | |
| -ms-flex-order: 3; | |
| order: 3; | |
| margin: 0 0 0 1rem; } | |
| .slds-media_double .slds-media__body, | |
| .slds-media--double .slds-media__body { | |
| -ms-flex-order: 2; | |
| order: 2; } | |
| /** | |
| * @summary Creates media object | |
| * | |
| * @selector .slds-media | |
| * @modifier | |
| */ | |
| .slds-media { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: start; | |
| align-items: flex-start; | |
| /** | |
| * Defines the figure area | |
| * | |
| * @selector .slds-media__figure | |
| */ | |
| /** | |
| * Defines the body area | |
| * | |
| * @selector .slds-media__body | |
| * @modifier | |
| */ } | |
| .slds-media__figure { | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| margin-right: 0.75rem; } | |
| .slds-media__figure_fixed-width { | |
| min-width: 3rem; } | |
| .slds-media__body { | |
| -ms-flex: 1; | |
| flex: 1; | |
| min-width: 0; } | |
| .slds-media__body, | |
| .slds-media__body > :last-child { | |
| margin-bottom: 0; } | |
| .slds-media-body-iefix { | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; | |
| -ms-flex-preferred-size: auto; | |
| flex-basis: auto; } | |
| /** | |
| * Adjusts whitespace on smaller media objects | |
| * | |
| * @selector .slds-media_small | |
| * @modifier | |
| */ | |
| .slds-media_small .slds-media__figure, | |
| .slds-media--small .slds-media__figure { | |
| margin-right: 0.25rem; } | |
| .slds-media_small .slds-media__figure_reverse, | |
| .slds-media--small .slds-media__figure--reverse { | |
| margin-left: 0.25rem; } | |
| /** | |
| * Adjusts whitespace on larger media objects | |
| * | |
| * @selector .slds-media_large | |
| * @modifier | |
| */ | |
| .slds-media_large .slds-media__figure, | |
| .slds-media--large .slds-media__figure { | |
| margin-right: 1.5rem; } | |
| .slds-media_large .slds-media__figure_reverse, | |
| .slds-media--large .slds-media__figure--reverse { | |
| margin-left: 1.5rem; } | |
| /** | |
| * Aligns the figure and body to be inline-block of each other | |
| * | |
| * @selector .slds-media_inline | |
| * @modifier | |
| */ | |
| .slds-media_inline .slds-media__body { | |
| -ms-flex: 0 1 auto; | |
| flex: 0 1 auto; } | |
| /** | |
| * Aligns the content in the .slds-media__body to the middle of the .slds-media__figure | |
| * | |
| * @selector .slds-media_center | |
| * @modifier | |
| */ | |
| .slds-media_center, | |
| .slds-media--center { | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| /** | |
| * Defines the figure area on the other side | |
| * | |
| * @selector .slds-media__figure_reverse | |
| * @modifier | |
| */ | |
| .slds-media__figure_reverse, | |
| .slds-media__figure--reverse { | |
| margin: 0 0 0 0.75rem; } | |
| @media (max-width: 48em) { | |
| /** | |
| * @summary .slds-media__figure and .slds-media__body stack on smaller screens | |
| * | |
| * @selector .slds-media_responsive | |
| * @modifer | |
| */ | |
| .slds-media_responsive, | |
| .slds-media--responsive { | |
| display: block; } | |
| .slds-media_responsive .slds-media__figure, | |
| .slds-media--responsive .slds-media__figure { | |
| margin: 0 0 0.75rem; } } | |
| /** | |
| * Adds .125rem margin to the side specified | |
| * | |
| * @selector .slds-m-*_xxx-small, .slds-var-m-*_xxx-small | |
| * @modifier | |
| */ | |
| /** | |
| * Adds .25rem margin to the side specified | |
| * | |
| * @selector .slds-m-*_xx-small, .slds-var-m-*_xx-small | |
| * @modifier | |
| */ | |
| /** | |
| * Adds .5rem margin to the side specified | |
| * | |
| * @selector .slds-m-*_x-small, .slds-var-m-*_x-small | |
| * @modifier | |
| */ | |
| /** | |
| * Adds .75rem margin to the side specified | |
| * | |
| * @selector .slds-m-*_small, .slds-var-m-*_small | |
| * @modifier | |
| */ | |
| /** | |
| * Adds 1rem margin to the side specified | |
| * | |
| * @selector .slds-m-*_medium, .slds-var-m-*_medium | |
| * @modifier | |
| */ | |
| /** | |
| * Adds 1.5rem margin to the side specified | |
| * | |
| * @selector .slds-m-*_large, .slds-var-m-*_large | |
| * @modifier | |
| */ | |
| /** | |
| * Adds 2rem margin to the side specified | |
| * | |
| * @selector .slds-m-*_x-large, .slds-var-m-*_x-large | |
| * @modifier | |
| */ | |
| /** | |
| * Adds 3rem margin to the side specified | |
| * | |
| * @selector .slds-m-*_xx-large, .slds-var-m-*_xx-large | |
| * @modifier | |
| */ | |
| /** | |
| * Adds the specified margin to both top and bottom | |
| * | |
| * @selector .slds-m-*-vertical_*, .slds-var-m-*-vertical_* | |
| * @modifier | |
| */ | |
| /** | |
| * Adds the specified margin to both sides | |
| * | |
| * @selector .slds-m-*-horizontal_*, .slds-var-m-*-horizontal_* | |
| * @modifier | |
| */ | |
| /** | |
| * Adds the specified margin all the way around the element | |
| * | |
| * @selector .slds-m-*-around_*, .slds-var-m-*-around_* | |
| * @modifier | |
| */ | |
| .slds-m-top_none, | |
| .slds-m-top--none { | |
| margin-top: 0 !important; } | |
| .slds-m-top_xxx-small, | |
| .slds-m-top--xxx-small { | |
| margin-top: 0.125rem; } | |
| .slds-m-top_xx-small, | |
| .slds-m-top--xx-small { | |
| margin-top: 0.25rem; } | |
| .slds-m-top_x-small, | |
| .slds-m-top--x-small { | |
| margin-top: 0.5rem; } | |
| .slds-m-top_small, | |
| .slds-m-top--small { | |
| margin-top: 0.75rem; } | |
| .slds-m-top_medium, | |
| .slds-m-top--medium { | |
| margin-top: 1rem; } | |
| .slds-m-top_large, | |
| .slds-m-top--large { | |
| margin-top: 1.5rem; } | |
| .slds-m-top_x-large, | |
| .slds-m-top--x-large { | |
| margin-top: 2rem; } | |
| .slds-m-top_xx-large, | |
| .slds-m-top--xx-large { | |
| margin-top: 3rem; } | |
| .slds-var-m-top_xxx-small { | |
| margin-top: 0.125rem; } | |
| .slds-var-m-top_xx-small { | |
| margin-top: 0.25rem; } | |
| .slds-var-m-top_x-small { | |
| margin-top: 0.5rem; } | |
| .slds-var-m-top_small { | |
| margin-top: 0.75rem; } | |
| .slds-var-m-top_medium { | |
| margin-top: 1rem; } | |
| .slds-var-m-top_large { | |
| margin-top: 1.5rem; } | |
| .slds-var-m-top_x-large { | |
| margin-top: 2rem; } | |
| .slds-var-m-top_xx-large { | |
| margin-top: 3rem; } | |
| .slds-m-right_none, | |
| .slds-m-right--none { | |
| margin-right: 0 !important; } | |
| .slds-m-right_xxx-small, | |
| .slds-m-right--xxx-small { | |
| margin-right: 0.125rem; } | |
| .slds-m-right_xx-small, | |
| .slds-m-right--xx-small { | |
| margin-right: 0.25rem; } | |
| .slds-m-right_x-small, | |
| .slds-m-right--x-small { | |
| margin-right: 0.5rem; } | |
| .slds-m-right_small, | |
| .slds-m-right--small { | |
| margin-right: 0.75rem; } | |
| .slds-m-right_medium, | |
| .slds-m-right--medium { | |
| margin-right: 1rem; } | |
| .slds-m-right_large, | |
| .slds-m-right--large { | |
| margin-right: 1.5rem; } | |
| .slds-m-right_x-large, | |
| .slds-m-right--x-large { | |
| margin-right: 2rem; } | |
| .slds-m-right_xx-large, | |
| .slds-m-right--xx-large { | |
| margin-right: 3rem; } | |
| .slds-var-m-right_xxx-small { | |
| margin-right: 0.125rem; } | |
| .slds-var-m-right_xx-small { | |
| margin-right: 0.25rem; } | |
| .slds-var-m-right_x-small { | |
| margin-right: 0.5rem; } | |
| .slds-var-m-right_small { | |
| margin-right: 0.75rem; } | |
| .slds-var-m-right_medium { | |
| margin-right: 1rem; } | |
| .slds-var-m-right_large { | |
| margin-right: 1.5rem; } | |
| .slds-var-m-right_x-large { | |
| margin-right: 2rem; } | |
| .slds-var-m-right_xx-large { | |
| margin-right: 3rem; } | |
| .slds-m-bottom_none, | |
| .slds-m-bottom--none { | |
| margin-bottom: 0 !important; } | |
| .slds-m-bottom_xxx-small, | |
| .slds-m-bottom--xxx-small { | |
| margin-bottom: 0.125rem; } | |
| .slds-m-bottom_xx-small, | |
| .slds-m-bottom--xx-small { | |
| margin-bottom: 0.25rem; } | |
| .slds-m-bottom_x-small, | |
| .slds-m-bottom--x-small { | |
| margin-bottom: 0.5rem; } | |
| .slds-m-bottom_small, | |
| .slds-m-bottom--small { | |
| margin-bottom: 0.75rem; } | |
| .slds-m-bottom_medium, | |
| .slds-m-bottom--medium { | |
| margin-bottom: 1rem; } | |
| .slds-m-bottom_large, | |
| .slds-m-bottom--large { | |
| margin-bottom: 1.5rem; } | |
| .slds-m-bottom_x-large, | |
| .slds-m-bottom--x-large { | |
| margin-bottom: 2rem; } | |
| .slds-m-bottom_xx-large, | |
| .slds-m-bottom--xx-large { | |
| margin-bottom: 3rem; } | |
| .slds-var-m-bottom_xxx-small { | |
| margin-bottom: 0.125rem; } | |
| .slds-var-m-bottom_xx-small { | |
| margin-bottom: 0.25rem; } | |
| .slds-var-m-bottom_x-small { | |
| margin-bottom: 0.5rem; } | |
| .slds-var-m-bottom_small { | |
| margin-bottom: 0.75rem; } | |
| .slds-var-m-bottom_medium { | |
| margin-bottom: 1rem; } | |
| .slds-var-m-bottom_large { | |
| margin-bottom: 1.5rem; } | |
| .slds-var-m-bottom_x-large { | |
| margin-bottom: 2rem; } | |
| .slds-var-m-bottom_xx-large { | |
| margin-bottom: 3rem; } | |
| .slds-m-left_none, | |
| .slds-m-left--none { | |
| margin-left: 0 !important; } | |
| .slds-m-left_xxx-small, | |
| .slds-m-left--xxx-small { | |
| margin-left: 0.125rem; } | |
| .slds-m-left_xx-small, | |
| .slds-m-left--xx-small { | |
| margin-left: 0.25rem; } | |
| .slds-m-left_x-small, | |
| .slds-m-left--x-small { | |
| margin-left: 0.5rem; } | |
| .slds-m-left_small, | |
| .slds-m-left--small { | |
| margin-left: 0.75rem; } | |
| .slds-m-left_medium, | |
| .slds-m-left--medium { | |
| margin-left: 1rem; } | |
| .slds-m-left_large, | |
| .slds-m-left--large { | |
| margin-left: 1.5rem; } | |
| .slds-m-left_x-large, | |
| .slds-m-left--x-large { | |
| margin-left: 2rem; } | |
| .slds-m-left_xx-large, | |
| .slds-m-left--xx-large { | |
| margin-left: 3rem; } | |
| .slds-var-m-left_xxx-small { | |
| margin-left: 0.125rem; } | |
| .slds-var-m-left_xx-small { | |
| margin-left: 0.25rem; } | |
| .slds-var-m-left_x-small { | |
| margin-left: 0.5rem; } | |
| .slds-var-m-left_small { | |
| margin-left: 0.75rem; } | |
| .slds-var-m-left_medium { | |
| margin-left: 1rem; } | |
| .slds-var-m-left_large { | |
| margin-left: 1.5rem; } | |
| .slds-var-m-left_x-large { | |
| margin-left: 2rem; } | |
| .slds-var-m-left_xx-large { | |
| margin-left: 3rem; } | |
| .slds-m-horizontal_none, | |
| .slds-m-horizontal--none { | |
| margin-left: 0 !important; | |
| margin-right: 0 !important; } | |
| .slds-m-horizontal_xxx-small, | |
| .slds-m-horizontal--xxx-small { | |
| margin-left: 0.125rem; | |
| margin-right: 0.125rem; } | |
| .slds-m-horizontal_xx-small, | |
| .slds-m-horizontal--xx-small { | |
| margin-left: 0.25rem; | |
| margin-right: 0.25rem; } | |
| .slds-m-horizontal_x-small, | |
| .slds-m-horizontal--x-small { | |
| margin-left: 0.5rem; | |
| margin-right: 0.5rem; } | |
| .slds-m-horizontal_small, | |
| .slds-m-horizontal--small { | |
| margin-left: 0.75rem; | |
| margin-right: 0.75rem; } | |
| .slds-m-horizontal_medium, | |
| .slds-m-horizontal--medium { | |
| margin-left: 1rem; | |
| margin-right: 1rem; } | |
| .slds-m-horizontal_large, | |
| .slds-m-horizontal--large { | |
| margin-left: 1.5rem; | |
| margin-right: 1.5rem; } | |
| .slds-m-horizontal_x-large, | |
| .slds-m-horizontal--x-large { | |
| margin-left: 2rem; | |
| margin-right: 2rem; } | |
| .slds-m-horizontal_xx-large, | |
| .slds-m-horizontal--xx-large { | |
| margin-left: 3rem; | |
| margin-right: 3rem; } | |
| .slds-var-m-horizontal_xxx-small { | |
| margin-left: 0.125rem; | |
| margin-right: 0.125rem; } | |
| .slds-var-m-horizontal_xx-small { | |
| margin-left: 0.25rem; | |
| margin-right: 0.25rem; } | |
| .slds-var-m-horizontal_x-small { | |
| margin-left: 0.5rem; | |
| margin-right: 0.5rem; } | |
| .slds-var-m-horizontal_small { | |
| margin-left: 0.75rem; | |
| margin-right: 0.75rem; } | |
| .slds-var-m-horizontal_medium { | |
| margin-left: 1rem; | |
| margin-right: 1rem; } | |
| .slds-var-m-horizontal_large { | |
| margin-left: 1.5rem; | |
| margin-right: 1.5rem; } | |
| .slds-var-m-horizontal_x-large { | |
| margin-left: 2rem; | |
| margin-right: 2rem; } | |
| .slds-var-m-horizontal_xx-large { | |
| margin-left: 3rem; | |
| margin-right: 3rem; } | |
| .slds-m-vertical_none, | |
| .slds-m-vertical--none { | |
| margin-top: 0 !important; | |
| margin-bottom: 0 !important; } | |
| .slds-m-vertical_xxx-small, | |
| .slds-m-vertical--xxx-small { | |
| margin-top: 0.125rem; | |
| margin-bottom: 0.125rem; } | |
| .slds-m-vertical_xx-small, | |
| .slds-m-vertical--xx-small { | |
| margin-top: 0.25rem; | |
| margin-bottom: 0.25rem; } | |
| .slds-m-vertical_x-small, | |
| .slds-m-vertical--x-small { | |
| margin-top: 0.5rem; | |
| margin-bottom: 0.5rem; } | |
| .slds-m-vertical_small, | |
| .slds-m-vertical--small { | |
| margin-top: 0.75rem; | |
| margin-bottom: 0.75rem; } | |
| .slds-m-vertical_medium, | |
| .slds-m-vertical--medium { | |
| margin-top: 1rem; | |
| margin-bottom: 1rem; } | |
| .slds-m-vertical_large, | |
| .slds-m-vertical--large { | |
| margin-top: 1.5rem; | |
| margin-bottom: 1.5rem; } | |
| .slds-m-vertical_x-large, | |
| .slds-m-vertical--x-large { | |
| margin-top: 2rem; | |
| margin-bottom: 2rem; } | |
| .slds-m-vertical_xx-large, | |
| .slds-m-vertical--xx-large { | |
| margin-top: 3rem; | |
| margin-bottom: 3rem; } | |
| .slds-var-m-vertical_xxx-small { | |
| margin-top: 0.125rem; | |
| margin-bottom: 0.125rem; } | |
| .slds-var-m-vertical_xx-small { | |
| margin-top: 0.25rem; | |
| margin-bottom: 0.25rem; } | |
| .slds-var-m-vertical_x-small { | |
| margin-top: 0.5rem; | |
| margin-bottom: 0.5rem; } | |
| .slds-var-m-vertical_small { | |
| margin-top: 0.75rem; | |
| margin-bottom: 0.75rem; } | |
| .slds-var-m-vertical_medium { | |
| margin-top: 1rem; | |
| margin-bottom: 1rem; } | |
| .slds-var-m-vertical_large { | |
| margin-top: 1.5rem; | |
| margin-bottom: 1.5rem; } | |
| .slds-var-m-vertical_x-large { | |
| margin-top: 2rem; | |
| margin-bottom: 2rem; } | |
| .slds-var-m-vertical_xx-large { | |
| margin-top: 3rem; | |
| margin-bottom: 3rem; } | |
| .slds-m-around_none, | |
| .slds-m-around--none { | |
| margin: 0 !important; } | |
| .slds-m-around_xxx-small, | |
| .slds-m-around--xxx-small { | |
| margin: 0.125rem; } | |
| .slds-m-around_xx-small, | |
| .slds-m-around--xx-small { | |
| margin: 0.25rem; } | |
| .slds-m-around_x-small, | |
| .slds-m-around--x-small { | |
| margin: 0.5rem; } | |
| .slds-m-around_small, | |
| .slds-m-around--small { | |
| margin: 0.75rem; } | |
| .slds-m-around_medium, | |
| .slds-m-around--medium { | |
| margin: 1rem; } | |
| .slds-m-around_large, | |
| .slds-m-around--large { | |
| margin: 1.5rem; } | |
| .slds-m-around_x-large, | |
| .slds-m-around--x-large { | |
| margin: 2rem; } | |
| .slds-m-around_xx-large, | |
| .slds-m-around--xx-large { | |
| margin: 3rem; } | |
| .slds-var-m-around_xxx-small { | |
| margin: 0.125rem; } | |
| .slds-var-m-around_xx-small { | |
| margin: 0.25rem; } | |
| .slds-var-m-around_x-small { | |
| margin: 0.5rem; } | |
| .slds-var-m-around_small { | |
| margin: 0.75rem; } | |
| .slds-var-m-around_medium { | |
| margin: 1rem; } | |
| .slds-var-m-around_large { | |
| margin: 1.5rem; } | |
| .slds-var-m-around_x-large { | |
| margin: 2rem; } | |
| .slds-var-m-around_xx-large { | |
| margin: 3rem; } | |
| /** | |
| * Adds .125rem padding to the side specified | |
| * | |
| * @selector .slds-p-*_xxx-small, .slds-var-p-*_xxx-small | |
| * @modifier | |
| */ | |
| /** | |
| * Adds .25rem padding to the side specified | |
| * | |
| * @selector .slds-p-*_xx-small, .slds-var-p-*_xx-small | |
| * @modifier | |
| */ | |
| /** | |
| * Adds .5rem padding to the side specified | |
| * | |
| * @selector .slds-p-*_x-small, .slds-var-p-*_x-small | |
| * @modifier | |
| */ | |
| /** | |
| * Adds .75rem padding to the side specified | |
| * | |
| * @selector .slds-p-*_small, .slds-var-p-*_small | |
| * @modifier | |
| */ | |
| /** | |
| * Adds 1rem padding to the side specified | |
| * | |
| * @selector .slds-p-*_medium, .slds-var-p-*_medium | |
| * @modifier | |
| */ | |
| /** | |
| * Adds 1.5rem padding to the side specified | |
| * | |
| * @selector .slds-p-*_large, .slds-var-p-*_large | |
| * @modifier | |
| */ | |
| /** | |
| * Adds 2rem padding to the side specified | |
| * | |
| * @selector .slds-p-*_x-large, .slds-var-p-*_x-large | |
| * @modifier | |
| */ | |
| /** | |
| * Adds 3rem padding to the side specified | |
| * | |
| * @selector .slds-p-*_xx-large, .slds-var-p-*_xx-large | |
| * @modifier | |
| */ | |
| /** | |
| * Adds the specified padding to both top and bottom | |
| * | |
| * @selector .slds-p-*-vertical_*, .slds-var-p-*-vertical_* | |
| * @modifier | |
| */ | |
| /** | |
| * Adds the specified padding to both sides | |
| * | |
| * @selector .slds-p-*-horizontal_*, .slds-var-p-*-horizontal_* | |
| * @modifier | |
| */ | |
| /** | |
| * Adds the specified padding all the way around the element | |
| * | |
| * @selector .slds-p-*-around_*, .slds-var-p-*-around_* | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Global padding that can be applied to any element | |
| * | |
| * @selector .slds-has-cushion | |
| * @modifier | |
| */ | |
| .slds-has-cushion { | |
| padding: 1rem; } | |
| .slds-p-top_none, | |
| .slds-p-top--none { | |
| padding-top: 0 !important; } | |
| .slds-p-top_xxx-small, | |
| .slds-p-top--xxx-small { | |
| padding-top: 0.125rem; } | |
| .slds-p-top_xx-small, | |
| .slds-p-top--xx-small { | |
| padding-top: 0.25rem; } | |
| .slds-p-top_x-small, | |
| .slds-p-top--x-small { | |
| padding-top: 0.5rem; } | |
| .slds-p-top_small, | |
| .slds-p-top--small { | |
| padding-top: 0.75rem; } | |
| .slds-p-top_medium, | |
| .slds-p-top--medium { | |
| padding-top: 1rem; } | |
| .slds-p-top_large, | |
| .slds-p-top--large { | |
| padding-top: 1.5rem; } | |
| .slds-p-top_x-large, | |
| .slds-p-top--x-large { | |
| padding-top: 2rem; } | |
| .slds-p-top_xx-large, | |
| .slds-p-top--xx-large { | |
| padding-top: 3rem; } | |
| .slds-var-p-top_xxx-small { | |
| padding-top: 0.125rem; } | |
| .slds-var-p-top_xx-small { | |
| padding-top: 0.25rem; } | |
| .slds-var-p-top_x-small { | |
| padding-top: 0.5rem; } | |
| .slds-var-p-top_small { | |
| padding-top: 0.75rem; } | |
| .slds-var-p-top_medium { | |
| padding-top: 1rem; } | |
| .slds-var-p-top_large { | |
| padding-top: 1.5rem; } | |
| .slds-var-p-top_x-large { | |
| padding-top: 2rem; } | |
| .slds-var-p-top_xx-large { | |
| padding-top: 3rem; } | |
| .slds-p-right_none, | |
| .slds-p-right--none { | |
| padding-right: 0 !important; } | |
| .slds-p-right_xxx-small, | |
| .slds-p-right--xxx-small { | |
| padding-right: 0.125rem; } | |
| .slds-p-right_xx-small, | |
| .slds-p-right--xx-small { | |
| padding-right: 0.25rem; } | |
| .slds-p-right_x-small, | |
| .slds-p-right--x-small { | |
| padding-right: 0.5rem; } | |
| .slds-p-right_small, | |
| .slds-p-right--small { | |
| padding-right: 0.75rem; } | |
| .slds-p-right_medium, | |
| .slds-p-right--medium { | |
| padding-right: 1rem; } | |
| .slds-p-right_large, | |
| .slds-p-right--large { | |
| padding-right: 1.5rem; } | |
| .slds-p-right_x-large, | |
| .slds-p-right--x-large { | |
| padding-right: 2rem; } | |
| .slds-p-right_xx-large, | |
| .slds-p-right--xx-large { | |
| padding-right: 3rem; } | |
| .slds-var-p-right_xxx-small { | |
| padding-right: 0.125rem; } | |
| .slds-var-p-right_xx-small { | |
| padding-right: 0.25rem; } | |
| .slds-var-p-right_x-small { | |
| padding-right: 0.5rem; } | |
| .slds-var-p-right_small { | |
| padding-right: 0.75rem; } | |
| .slds-var-p-right_medium { | |
| padding-right: 1rem; } | |
| .slds-var-p-right_large { | |
| padding-right: 1.5rem; } | |
| .slds-var-p-right_x-large { | |
| padding-right: 2rem; } | |
| .slds-var-p-right_xx-large { | |
| padding-right: 3rem; } | |
| .slds-p-bottom_none, | |
| .slds-p-bottom--none { | |
| padding-bottom: 0 !important; } | |
| .slds-p-bottom_xxx-small, | |
| .slds-p-bottom--xxx-small { | |
| padding-bottom: 0.125rem; } | |
| .slds-p-bottom_xx-small, | |
| .slds-p-bottom--xx-small { | |
| padding-bottom: 0.25rem; } | |
| .slds-p-bottom_x-small, | |
| .slds-p-bottom--x-small { | |
| padding-bottom: 0.5rem; } | |
| .slds-p-bottom_small, | |
| .slds-p-bottom--small { | |
| padding-bottom: 0.75rem; } | |
| .slds-p-bottom_medium, | |
| .slds-p-bottom--medium { | |
| padding-bottom: 1rem; } | |
| .slds-p-bottom_large, | |
| .slds-p-bottom--large { | |
| padding-bottom: 1.5rem; } | |
| .slds-p-bottom_x-large, | |
| .slds-p-bottom--x-large { | |
| padding-bottom: 2rem; } | |
| .slds-p-bottom_xx-large, | |
| .slds-p-bottom--xx-large { | |
| padding-bottom: 3rem; } | |
| .slds-var-p-bottom_xxx-small { | |
| padding-bottom: 0.125rem; } | |
| .slds-var-p-bottom_xx-small { | |
| padding-bottom: 0.25rem; } | |
| .slds-var-p-bottom_x-small { | |
| padding-bottom: 0.5rem; } | |
| .slds-var-p-bottom_small { | |
| padding-bottom: 0.75rem; } | |
| .slds-var-p-bottom_medium { | |
| padding-bottom: 1rem; } | |
| .slds-var-p-bottom_large { | |
| padding-bottom: 1.5rem; } | |
| .slds-var-p-bottom_x-large { | |
| padding-bottom: 2rem; } | |
| .slds-var-p-bottom_xx-large { | |
| padding-bottom: 3rem; } | |
| .slds-p-left_none, | |
| .slds-p-left--none { | |
| padding-left: 0 !important; } | |
| .slds-p-left_xxx-small, | |
| .slds-p-left--xxx-small { | |
| padding-left: 0.125rem; } | |
| .slds-p-left_xx-small, | |
| .slds-p-left--xx-small { | |
| padding-left: 0.25rem; } | |
| .slds-p-left_x-small, | |
| .slds-p-left--x-small { | |
| padding-left: 0.5rem; } | |
| .slds-p-left_small, | |
| .slds-p-left--small { | |
| padding-left: 0.75rem; } | |
| .slds-p-left_medium, | |
| .slds-p-left--medium { | |
| padding-left: 1rem; } | |
| .slds-p-left_large, | |
| .slds-p-left--large { | |
| padding-left: 1.5rem; } | |
| .slds-p-left_x-large, | |
| .slds-p-left--x-large { | |
| padding-left: 2rem; } | |
| .slds-p-left_xx-large, | |
| .slds-p-left--xx-large { | |
| padding-left: 3rem; } | |
| .slds-var-p-left_xxx-small { | |
| padding-left: 0.125rem; } | |
| .slds-var-p-left_xx-small { | |
| padding-left: 0.25rem; } | |
| .slds-var-p-left_x-small { | |
| padding-left: 0.5rem; } | |
| .slds-var-p-left_small { | |
| padding-left: 0.75rem; } | |
| .slds-var-p-left_medium { | |
| padding-left: 1rem; } | |
| .slds-var-p-left_large { | |
| padding-left: 1.5rem; } | |
| .slds-var-p-left_x-large { | |
| padding-left: 2rem; } | |
| .slds-var-p-left_xx-large { | |
| padding-left: 3rem; } | |
| .slds-p-horizontal_none, | |
| .slds-p-horizontal--none { | |
| padding-left: 0 !important; | |
| padding-right: 0 !important; } | |
| .slds-p-horizontal_xxx-small, | |
| .slds-p-horizontal--xxx-small { | |
| padding-left: 0.125rem; | |
| padding-right: 0.125rem; } | |
| .slds-p-horizontal_xx-small, | |
| .slds-p-horizontal--xx-small { | |
| padding-left: 0.25rem; | |
| padding-right: 0.25rem; } | |
| .slds-p-horizontal_x-small, | |
| .slds-p-horizontal--x-small { | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; } | |
| .slds-p-horizontal_small, | |
| .slds-p-horizontal--small { | |
| padding-left: 0.75rem; | |
| padding-right: 0.75rem; } | |
| .slds-p-horizontal_medium, | |
| .slds-p-horizontal--medium { | |
| padding-left: 1rem; | |
| padding-right: 1rem; } | |
| .slds-p-horizontal_large, | |
| .slds-p-horizontal--large { | |
| padding-left: 1.5rem; | |
| padding-right: 1.5rem; } | |
| .slds-p-horizontal_x-large, | |
| .slds-p-horizontal--x-large { | |
| padding-left: 2rem; | |
| padding-right: 2rem; } | |
| .slds-p-horizontal_xx-large, | |
| .slds-p-horizontal--xx-large { | |
| padding-left: 3rem; | |
| padding-right: 3rem; } | |
| .slds-var-p-horizontal_xxx-small { | |
| padding-left: 0.125rem; | |
| padding-right: 0.125rem; } | |
| .slds-var-p-horizontal_xx-small { | |
| padding-left: 0.25rem; | |
| padding-right: 0.25rem; } | |
| .slds-var-p-horizontal_x-small { | |
| padding-left: 0.5rem; | |
| padding-right: 0.5rem; } | |
| .slds-var-p-horizontal_small { | |
| padding-left: 0.75rem; | |
| padding-right: 0.75rem; } | |
| .slds-var-p-horizontal_medium { | |
| padding-left: 1rem; | |
| padding-right: 1rem; } | |
| .slds-var-p-horizontal_large { | |
| padding-left: 1.5rem; | |
| padding-right: 1.5rem; } | |
| .slds-var-p-horizontal_x-large { | |
| padding-left: 2rem; | |
| padding-right: 2rem; } | |
| .slds-var-p-horizontal_xx-large { | |
| padding-left: 3rem; | |
| padding-right: 3rem; } | |
| .slds-p-vertical_none, | |
| .slds-p-vertical--none { | |
| padding-top: 0 !important; | |
| padding-bottom: 0 !important; } | |
| .slds-p-vertical_xxx-small, | |
| .slds-p-vertical--xxx-small { | |
| padding-top: 0.125rem; | |
| padding-bottom: 0.125rem; } | |
| .slds-p-vertical_xx-small, | |
| .slds-p-vertical--xx-small { | |
| padding-top: 0.25rem; | |
| padding-bottom: 0.25rem; } | |
| .slds-p-vertical_x-small, | |
| .slds-p-vertical--x-small { | |
| padding-top: 0.5rem; | |
| padding-bottom: 0.5rem; } | |
| .slds-p-vertical_small, | |
| .slds-p-vertical--small { | |
| padding-top: 0.75rem; | |
| padding-bottom: 0.75rem; } | |
| .slds-p-vertical_medium, | |
| .slds-p-vertical--medium { | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; } | |
| .slds-p-vertical_large, | |
| .slds-p-vertical--large { | |
| padding-top: 1.5rem; | |
| padding-bottom: 1.5rem; } | |
| .slds-p-vertical_x-large, | |
| .slds-p-vertical--x-large { | |
| padding-top: 2rem; | |
| padding-bottom: 2rem; } | |
| .slds-p-vertical_xx-large, | |
| .slds-p-vertical--xx-large { | |
| padding-top: 3rem; | |
| padding-bottom: 3rem; } | |
| .slds-var-p-vertical_xxx-small { | |
| padding-top: 0.125rem; | |
| padding-bottom: 0.125rem; } | |
| .slds-var-p-vertical_xx-small { | |
| padding-top: 0.25rem; | |
| padding-bottom: 0.25rem; } | |
| .slds-var-p-vertical_x-small { | |
| padding-top: 0.5rem; | |
| padding-bottom: 0.5rem; } | |
| .slds-var-p-vertical_small { | |
| padding-top: 0.75rem; | |
| padding-bottom: 0.75rem; } | |
| .slds-var-p-vertical_medium { | |
| padding-top: 1rem; | |
| padding-bottom: 1rem; } | |
| .slds-var-p-vertical_large { | |
| padding-top: 1.5rem; | |
| padding-bottom: 1.5rem; } | |
| .slds-var-p-vertical_x-large { | |
| padding-top: 2rem; | |
| padding-bottom: 2rem; } | |
| .slds-var-p-vertical_xx-large { | |
| padding-top: 3rem; | |
| padding-bottom: 3rem; } | |
| .slds-p-around_none, | |
| .slds-p-around--none { | |
| padding: 0 !important; } | |
| .slds-p-around_xxx-small, | |
| .slds-p-around--xxx-small { | |
| padding: 0.125rem; } | |
| .slds-p-around_xx-small, | |
| .slds-p-around--xx-small { | |
| padding: 0.25rem; } | |
| .slds-p-around_x-small, | |
| .slds-p-around--x-small { | |
| padding: 0.5rem; } | |
| .slds-p-around_small, | |
| .slds-p-around--small { | |
| padding: 0.75rem; } | |
| .slds-p-around_medium, | |
| .slds-p-around--medium { | |
| padding: 1rem; } | |
| .slds-p-around_large, | |
| .slds-p-around--large { | |
| padding: 1.5rem; } | |
| .slds-p-around_x-large, | |
| .slds-p-around--x-large { | |
| padding: 2rem; } | |
| .slds-p-around_xx-large, | |
| .slds-p-around--xx-large { | |
| padding: 3rem; } | |
| .slds-var-p-around_xxx-small { | |
| padding: 0.125rem; } | |
| .slds-var-p-around_xx-small { | |
| padding: 0.25rem; } | |
| .slds-var-p-around_x-small { | |
| padding: 0.5rem; } | |
| .slds-var-p-around_small { | |
| padding: 0.75rem; } | |
| .slds-var-p-around_medium { | |
| padding: 1rem; } | |
| .slds-var-p-around_large { | |
| padding: 1.5rem; } | |
| .slds-var-p-around_x-large { | |
| padding: 2rem; } | |
| .slds-var-p-around_xx-large { | |
| padding: 3rem; } | |
| /** | |
| * @summary Contains floats and stops wrapping of elements following it. | |
| * | |
| * @name clearfix | |
| * @selector .slds-clearfix | |
| * @modifier | |
| */ | |
| .slds-clearfix:after { | |
| content: ''; | |
| display: table; | |
| clear: both; } | |
| .slds-clear { | |
| clear: both; } | |
| /** | |
| * @summary Pulls element from document flow and floats left. Text and other elements wrap around it. | |
| * | |
| * @name float-left | |
| * @selector .slds-float_left | |
| * @modifier | |
| */ | |
| .slds-float_left, | |
| .slds-float--left { | |
| float: left; } | |
| /** | |
| * @summary Removes float from an element that has attribute already | |
| * | |
| * @name float-none | |
| * @selector .slds-float_none | |
| * @modifier | |
| */ | |
| .slds-float_none, | |
| .slds-float--none { | |
| float: none; } | |
| /** | |
| * @summary Pulls element from document flow and floats right. Text and other elements wrap around it. | |
| * | |
| * @name float-right | |
| * @selector .slds-float_right | |
| * @modifier | |
| */ | |
| .slds-float_right, | |
| .slds-float--right { | |
| float: right; } | |
| /** | |
| * @summary Makes links and buttons appear as regular text | |
| * | |
| * @selector .slds-text-link_reset | |
| * @modifier | |
| */ | |
| .slds-text-link_reset, | |
| .slds-text-link--reset { | |
| cursor: pointer; | |
| line-height: inherit; | |
| font-size: inherit; } | |
| .slds-text-link_reset:active, | |
| .slds-text-link--reset:active { | |
| outline: none; } | |
| .slds-text-link_reset, .slds-text-link_reset:active, .slds-text-link_reset:focus, .slds-text-link_reset:hover, | |
| .slds-text-link--reset, | |
| .slds-text-link--reset:active, | |
| .slds-text-link--reset:focus, | |
| .slds-text-link--reset:hover { | |
| color: inherit; | |
| text-decoration: inherit; } | |
| /** | |
| * Used in combination with `.slds-text-link--reset`, you can apply the class `.slds-text-link` to a child element to reset its styles back to that of a link. | |
| * | |
| * @summary Makes text inside of .slds-text-link_reset to appear as a link. | |
| * | |
| * @selector .slds-text-link | |
| * @modifier | |
| */ | |
| .slds-text-link { | |
| color: #006dcc; | |
| text-decoration: none; | |
| transition: color 0.1s linear; } | |
| .slds-text-link:hover, .slds-text-link:focus { | |
| text-decoration: underline; | |
| color: #005fb2; } | |
| .slds-text-link:active { | |
| color: #005fb2; } | |
| /** | |
| * Faux links are used on areas that can't be wrapped in an `a` element, but need to appear to be a link with an underline on hover. An example is in the page header for Object home. The `H1` and `button` that sit next to each other have the `.slds-text-link--faux` class on their parent element. | |
| * | |
| * @summary Creates a faux link with hover interactions | |
| * | |
| * @selector .slds-text-link_faux | |
| * @notes This is used when an actual anchor element can not be used. For example — when a heading and button are next to each other and both need the text underline | |
| * @modifier | |
| */ | |
| .slds-text-link--faux, | |
| .slds-text-link_faux, | |
| .slds-type-focus { | |
| border-bottom: 1px solid transparent; | |
| border-radius: 0; | |
| color: currentColor; | |
| cursor: pointer; } | |
| .slds-text-link--faux:hover, .slds-text-link--faux:focus, | |
| .slds-text-link_faux:hover, | |
| .slds-text-link_faux:focus, | |
| .slds-type-focus:hover, | |
| .slds-type-focus:focus { | |
| color: currentColor; | |
| border-bottom: 1px solid currentColor; } | |
| /** | |
| * @summary Blur focus is an accessibility class that will add a blurred border to an element when it is focused. | |
| * | |
| * @selector .slds-has-blur-focus | |
| * @modifier | |
| */ | |
| .slds-has-blur-focus { | |
| color: currentColor; } | |
| .slds-has-blur-focus:hover, .slds-has-blur-focus:focus, .slds-has-blur-focus:active { | |
| color: currentColor; | |
| text-decoration: none; } | |
| .slds-has-blur-focus:focus { | |
| outline: 0; | |
| box-shadow: 0 0 3px #0070D2; } | |
| /** | |
| * Input focus styles, this is applied via JavaScript when needing to apply focus styles to a containing element when the input gets focus | |
| * | |
| * @selector .slds-has-input-focus | |
| * @modifier | |
| */ | |
| .slds-has-input-focus { | |
| outline: 0; | |
| border-color: #1589ee; | |
| background-color: white; | |
| box-shadow: 0 0 3px #0070D2; } | |
| .slds-list_vertical.slds-has-dividers > .slds-list__item, | |
| .slds-list--vertical.slds-has-dividers > .slds-list__item { | |
| padding: 0.5rem; | |
| border-bottom: 1px solid #dddbda; } | |
| .slds-list_vertical.slds-has-dividers > .slds-list__item:hover, | |
| .slds-list--vertical.slds-has-dividers > .slds-list__item:hover { | |
| background-color: #f3f2f2; | |
| border-color: #dddbda; | |
| cursor: pointer; } | |
| .slds-list_vertical.slds-has-dividers > .slds-list__item:active, | |
| .slds-list--vertical.slds-has-dividers > .slds-list__item:active { | |
| background-color: #ecebea; | |
| box-shadow: #dddbda 0 -1px 0 inset; } | |
| .slds-list_vertical.slds-has-dividers > .slds-list__item.slds-is-selected, | |
| .slds-list--vertical.slds-has-dividers > .slds-list__item.slds-is-selected { | |
| box-shadow: #0070d2 0 0 0 1px inset; | |
| background-color: #ecebea; } | |
| .slds-list_vertical.slds-has-dividers > .slds-list__item.slds-is-selected:hover, .slds-list_vertical.slds-has-dividers > .slds-list__item.slds-is-selected:focus, | |
| .slds-list--vertical.slds-has-dividers > .slds-list__item.slds-is-selected:hover, | |
| .slds-list--vertical.slds-has-dividers > .slds-list__item.slds-is-selected:focus { | |
| box-shadow: #1589ee 0 -2px 0 inset, #1589ee 0 0 0 1px inset; } | |
| .slds-has-cards > .slds-list__item { | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| background-clip: padding-box; } | |
| .slds-has-cards > .slds-list__item + .slds-list__item { | |
| margin-top: 0.5rem; } | |
| .slds-has-cards_space > .slds-list__item, .slds-has-cards--space > .slds-list__item { | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| background-clip: padding-box; | |
| padding: 0.75rem; } | |
| @media (min-width: 30em) { | |
| .slds-has-cards_space > .slds-list__item, .slds-has-cards--space > .slds-list__item { | |
| padding: 0.5rem; } } | |
| .slds-has-cards_space > .slds-list__item + .slds-list__item, .slds-has-cards--space > .slds-list__item + .slds-list__item { | |
| margin-top: 0.5rem; } | |
| .slds-has-divider { | |
| margin-top: 0.5rem; | |
| padding-top: 0.5rem; | |
| border-top: 1px solid #dddbda; } | |
| .slds-has-block-links a { | |
| display: block; | |
| text-decoration: none; } | |
| .slds-has-block-links .slds-is-nested { | |
| margin-left: 1rem; } | |
| .slds-has-block-links_space .slds-list__item, | |
| .slds-has-block-links_space .slds-item, .slds-has-block-links--space .slds-list__item, | |
| .slds-has-block-links--space .slds-item { | |
| padding: 0; } | |
| .slds-has-block-links_space a, .slds-has-block-links--space a { | |
| display: block; | |
| text-decoration: none; | |
| padding: 0.75rem; } | |
| @media (min-width: 48em) { | |
| .slds-has-block-links_space a, .slds-has-block-links--space a { | |
| padding: 0.5rem; } } | |
| .slds-has-inline-block-links a { | |
| display: inline-block; | |
| text-decoration: none; } | |
| .slds-has-inline-block-links_space a, | |
| .slds-has-inline-block-links--space a { | |
| display: inline-block; | |
| text-decoration: none; | |
| padding: 0.75rem; } | |
| @media (min-width: 48em) { | |
| .slds-has-inline-block-links_space a, | |
| .slds-has-inline-block-links--space a { | |
| padding: 0.5rem; } } | |
| /** | |
| * @summary Marks a vertical list with .5rem spacing around | |
| * | |
| * @selector .slds-list_vertical-space | |
| * @modifier | |
| */ | |
| .slds-list_vertical-space .slds-list__item + .slds-list__item, | |
| .slds-list_vertical-space .slds-item + .slds-item, | |
| .slds-list--vertical-space .slds-list__item + .slds-list__item, | |
| .slds-list--vertical-space .slds-item + .slds-item { | |
| margin-top: 0.5rem; } | |
| /** | |
| * @summary Marks a vertical list with 1rem spacing around | |
| * | |
| * @selector .slds-list_vertical-space-medium | |
| * @modifier | |
| */ | |
| .slds-list_vertical-space-medium .slds-list__item + .slds-list__item, | |
| .slds-list_vertical-space-medium .slds-item + .slds-item, | |
| .slds-list--vertical-space-medium .slds-list__item + .slds-list__item, | |
| .slds-list--vertical-space-medium .slds-item + .slds-item { | |
| margin-top: 1rem; } | |
| /** | |
| * @summary Provides styles for a nested lists | |
| * | |
| * @selector .slds-is-nested | |
| * @modifier | |
| */ | |
| .slds-is-nested { | |
| margin-left: 1rem; } | |
| /** | |
| * @summary Creates an unordered list with markers | |
| * | |
| * @selector .slds-list_dotted | |
| * @modifier | |
| */ | |
| .slds-list_dotted, | |
| .slds-list--dotted { | |
| margin-left: 1.5rem; | |
| list-style: disc; } | |
| /** | |
| * @summary Creates an ordered list with decimals | |
| * | |
| * @selector .slds-list_ordered | |
| * @modifier | |
| */ | |
| .slds-list_ordered, | |
| .slds-list--ordered { | |
| margin-left: 1.5rem; | |
| list-style: decimal; } | |
| /** | |
| * @summary Adds 1px border divider above list items | |
| * | |
| * @selector .slds-has-dividers_top | |
| * @modifier | |
| */ | |
| .slds-has-dividers_top, | |
| .slds-has-dividers--top { | |
| /** | |
| * @summary Adds 1px border divider above list items and 0.5rem padding between items | |
| * | |
| * @selector .slds-has-dividers_top-space | |
| * @modifier | |
| */ } | |
| .slds-has-dividers_top > .slds-list__item, | |
| .slds-has-dividers_top > .slds-item, | |
| .slds-has-dividers--top > .slds-list__item, | |
| .slds-has-dividers--top > .slds-item { | |
| border-top: 1px solid #dddbda; } | |
| .slds-has-dividers_top-space > .slds-list__item, | |
| .slds-has-dividers_top-space > .slds-item, | |
| .slds-has-dividers--top-space > .slds-list__item, | |
| .slds-has-dividers--top-space > .slds-item { | |
| border-top: 1px solid #dddbda; | |
| padding: 0.75rem; } | |
| @media (min-width: 30em) { | |
| .slds-has-dividers_top-space > .slds-list__item, | |
| .slds-has-dividers_top-space > .slds-item, | |
| .slds-has-dividers--top-space > .slds-list__item, | |
| .slds-has-dividers--top-space > .slds-item { | |
| padding: 0.5rem; } } | |
| /** | |
| * @summary Adds 1px border divider below list items | |
| * | |
| * @selector .slds-has-dividers_top | |
| * @modifier | |
| */ | |
| .slds-has-dividers_bottom, | |
| .slds-has-dividers--bottom { | |
| /** | |
| * @summary Adds 1px border divider below list items and 0.5rem padding between items | |
| * | |
| * @selector .slds-has-dividers_bottom-space | |
| * @modifier | |
| */ } | |
| .slds-has-dividers_bottom > .slds-list__item, | |
| .slds-has-dividers_bottom > .slds-item, | |
| .slds-has-dividers--bottom > .slds-list__item, | |
| .slds-has-dividers--bottom > .slds-item { | |
| border-bottom: 1px solid #dddbda; } | |
| .slds-has-dividers_bottom-space > .slds-list__item, | |
| .slds-has-dividers_bottom-space > .slds-item, | |
| .slds-has-dividers--bottom-space > .slds-list__item, | |
| .slds-has-dividers--bottom-space > .slds-item { | |
| border-bottom: 1px solid #dddbda; | |
| padding: 0.75rem; } | |
| @media (min-width: 30em) { | |
| .slds-has-dividers_bottom-space > .slds-list__item, | |
| .slds-has-dividers_bottom-space > .slds-item, | |
| .slds-has-dividers--bottom-space > .slds-list__item, | |
| .slds-has-dividers--bottom-space > .slds-item { | |
| padding: 0.5rem; } } | |
| /** | |
| * @summary Adds 1px border divider around list items | |
| * | |
| * @selector .slds-has-dividers_around | |
| * @modifier | |
| */ | |
| .slds-has-dividers_around, | |
| .slds-has-dividers--around { | |
| /** | |
| * @summary Adds 1px border divider around list items and 0.5rem padding between items | |
| * | |
| * @selector .slds-has-dividers_around-space | |
| * @modifier | |
| */ } | |
| .slds-has-dividers_around > .slds-item, | |
| .slds-has-dividers--around > .slds-item { | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| background-clip: padding-box; } | |
| .slds-has-dividers_around > .slds-item + .slds-item, | |
| .slds-has-dividers--around > .slds-item + .slds-item { | |
| margin-top: 0.5rem; } | |
| .slds-has-dividers_around-space > .slds-item, | |
| .slds-has-dividers--around-space > .slds-item { | |
| border: 1px solid #dddbda; | |
| border-radius: 0.25rem; | |
| background-clip: padding-box; | |
| padding: 0.75rem; } | |
| @media (min-width: 30em) { | |
| .slds-has-dividers_around-space > .slds-item, | |
| .slds-has-dividers--around-space > .slds-item { | |
| padding: 0.5rem; } } | |
| .slds-has-dividers_around-space > .slds-item + .slds-item, | |
| .slds-has-dividers--around-space > .slds-item + .slds-item { | |
| margin-top: 0.5rem; } | |
| .slds-has-list-interactions > .slds-list__item:hover, | |
| .slds-has-list-interactions > .slds-item:hover { | |
| background-color: #f3f2f2; | |
| border-color: #dddbda; | |
| cursor: pointer; } | |
| .slds-has-list-interactions > .slds-list__item:active, | |
| .slds-has-list-interactions > .slds-item:active { | |
| background-color: #ecebea; | |
| box-shadow: #dddbda 0 -1px 0 inset; } | |
| .slds-has-list-interactions > .slds-list__item.slds-is-selected, | |
| .slds-has-list-interactions > .slds-item.slds-is-selected { | |
| box-shadow: #0070d2 0 0 0 1px inset; | |
| background-color: #ecebea; } | |
| .slds-has-list-interactions > .slds-list__item.slds-is-selected:hover, .slds-has-list-interactions > .slds-list__item.slds-is-selected:focus, | |
| .slds-has-list-interactions > .slds-item.slds-is-selected:hover, | |
| .slds-has-list-interactions > .slds-item.slds-is-selected:focus { | |
| box-shadow: #1589ee 0 -2px 0 inset, #1589ee 0 0 0 1px inset; } | |
| .slds-has-divider { | |
| /** | |
| * @summary Adds 1px border divider above an HTML element | |
| * | |
| * @selector .slds-has-divider_top | |
| * @restrict li | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Adds dot separator to the right of an HTML element | |
| * | |
| * @selector .slds-has-divider_right | |
| * @restrict li | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Adds 1px border divider below an HTML element | |
| * | |
| * @selector .slds-has-divider_bottom | |
| * @restrict li | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Adds dot separator to the left of an HTML element | |
| * | |
| * @selector .slds-has-divider_left | |
| * @restrict li | |
| * @modifier | |
| */ } | |
| .slds-has-divider_top, .slds-has-divider--top { | |
| border-top: 1px solid #dddbda; } | |
| .slds-has-divider_top-space, .slds-has-divider--top-space { | |
| border-top: 1px solid #dddbda; | |
| margin-top: 0.5rem; | |
| padding-top: 0.5rem; } | |
| .slds-has-divider_right, .slds-has-divider--right { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| .slds-has-divider_right:after, .slds-has-divider--right:after { | |
| width: 2px; | |
| height: 2px; | |
| content: ''; | |
| margin-left: 0.5rem; | |
| margin-right: 0.5rem; | |
| border-radius: 50%; | |
| background-color: #16325c; } | |
| .slds-has-divider_right:last-child, .slds-has-divider--right:last-child { | |
| margin-right: 0; | |
| padding-right: 0; } | |
| .slds-has-divider_right:last-child:after, .slds-has-divider--right:last-child:after { | |
| content: none; } | |
| .slds-has-divider_bottom, .slds-has-divider--bottom { | |
| border-bottom: 1px solid #dddbda; } | |
| .slds-has-divider_bottom-space, .slds-has-divider--bottom-space { | |
| border-bottom: 1px solid #dddbda; | |
| margin-bottom: 0.5rem; | |
| padding-bottom: 0.5rem; } | |
| .slds-has-divider_left, .slds-has-divider--left { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| .slds-has-divider_left:before, .slds-has-divider--left:before { | |
| width: 2px; | |
| height: 2px; | |
| content: ''; | |
| display: inline-block; | |
| vertical-align: middle; | |
| margin-left: 0.5rem; | |
| margin-right: 0.5rem; | |
| border-radius: 50%; | |
| background-color: #16325c; } | |
| .slds-has-divider_left:first-child, .slds-has-divider--left:first-child { | |
| margin-right: 0; | |
| padding-right: 0; } | |
| .slds-has-divider_left:first-child:before, .slds-has-divider--left:first-child:before { | |
| content: none; } | |
| .slds-list_horizontal.slds-has-dividers > .slds-list__item, | |
| .slds-list--horizontal.slds-has-dividers > .slds-list__item { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| .slds-list_horizontal.slds-has-dividers > .slds-list__item:after, | |
| .slds-list--horizontal.slds-has-dividers > .slds-list__item:after { | |
| width: 2px; | |
| height: 2px; | |
| content: ''; | |
| margin-left: 0.5rem; | |
| margin-right: 0.5rem; | |
| border-radius: 50%; | |
| background-color: #16325c; } | |
| .slds-list_horizontal.slds-has-dividers > .slds-list__item:last-child, | |
| .slds-list--horizontal.slds-has-dividers > .slds-list__item:last-child { | |
| margin-right: 0; | |
| padding-right: 0; } | |
| .slds-list_horizontal.slds-has-dividers > .slds-list__item:last-child:after, | |
| .slds-list--horizontal.slds-has-dividers > .slds-list__item:last-child:after { | |
| content: none; } | |
| /** | |
| * @summary Causes items of a list to display horizontally | |
| * | |
| * @selector .slds-list_horizontal | |
| * @modifier | |
| */ | |
| .slds-list_horizontal, | |
| .slds-list--horizontal { | |
| display: -ms-flexbox; | |
| display: flex; } | |
| .slds-list_horizontal > .slds-list__item, | |
| .slds-list--horizontal > .slds-list__item { | |
| -ms-flex-item-align: center; | |
| -ms-grid-row-align: center; | |
| align-self: center; } | |
| .slds-list_horizontal-large > .slds-list__item > a, | |
| .slds-list--horizontal-large > .slds-list__item > a { | |
| padding: 0.75rem 1rem; } | |
| /** | |
| * @summary Adds dot separators to the left of horizontal list items | |
| * | |
| * @selector .slds-has-dividers_left | |
| * @modifier | |
| */ | |
| .slds-has-dividers_left > .slds-list__item, | |
| .slds-has-dividers--left > .slds-list__item, | |
| .slds-has-dividers_left > .slds-item, | |
| .slds-has-dividers--left > .slds-item { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| .slds-has-dividers_left > .slds-list__item:before, | |
| .slds-has-dividers--left > .slds-list__item:before, | |
| .slds-has-dividers_left > .slds-item:before, | |
| .slds-has-dividers--left > .slds-item:before { | |
| width: 2px; | |
| height: 2px; | |
| content: ''; | |
| display: inline-block; | |
| vertical-align: middle; | |
| margin-left: 0.5rem; | |
| margin-right: 0.5rem; | |
| border-radius: 50%; | |
| background-color: #16325c; } | |
| .slds-has-dividers_left > .slds-list__item:first-child, | |
| .slds-has-dividers--left > .slds-list__item:first-child, | |
| .slds-has-dividers_left > .slds-item:first-child, | |
| .slds-has-dividers--left > .slds-item:first-child { | |
| margin-right: 0; | |
| padding-right: 0; } | |
| .slds-has-dividers_left > .slds-list__item:first-child:before, | |
| .slds-has-dividers--left > .slds-list__item:first-child:before, | |
| .slds-has-dividers_left > .slds-item:first-child:before, | |
| .slds-has-dividers--left > .slds-item:first-child:before { | |
| content: none; } | |
| /** | |
| * @summary Adds dot separators to the right of horizontal list items | |
| * | |
| * @selector .slds-has-dividers_right | |
| * @modifier | |
| */ | |
| .slds-has-dividers_right > .slds-list__item, | |
| .slds-has-dividers--right > .slds-list__item, | |
| .slds-has-dividers_right > .slds-item, | |
| .slds-has-dividers--right > .slds-item { | |
| position: relative; | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-align: center; | |
| align-items: center; } | |
| .slds-has-dividers_right > .slds-list__item:after, | |
| .slds-has-dividers--right > .slds-list__item:after, | |
| .slds-has-dividers_right > .slds-item:after, | |
| .slds-has-dividers--right > .slds-item:after { | |
| width: 2px; | |
| height: 2px; | |
| content: ''; | |
| margin-left: 0.5rem; | |
| margin-right: 0.5rem; | |
| border-radius: 50%; | |
| background-color: #16325c; } | |
| .slds-has-dividers_right > .slds-list__item:last-child, | |
| .slds-has-dividers--right > .slds-list__item:last-child, | |
| .slds-has-dividers_right > .slds-item:last-child, | |
| .slds-has-dividers--right > .slds-item:last-child { | |
| margin-right: 0; | |
| padding-right: 0; } | |
| .slds-has-dividers_right > .slds-list__item:last-child:after, | |
| .slds-has-dividers--right > .slds-list__item:last-child:after, | |
| .slds-has-dividers_right > .slds-item:last-child:after, | |
| .slds-has-dividers--right > .slds-item:last-child:after { | |
| content: none; } | |
| /** | |
| * @summary Causes description list to display horizontally with `dt` followed immediately by the `dd`. | |
| * @selector .slds-dl_inline | |
| * @modifier | |
| */ | |
| .slds-dl_inline:after, | |
| .slds-dl--inline:after { | |
| content: ''; | |
| display: table; | |
| clear: both; } | |
| @media (min-width: 30em) { | |
| .slds-dl_inline, | |
| .slds-dl--inline { | |
| /** | |
| * @summary Marks a term | |
| * @selector .slds-dl_inline__label | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Marks a description | |
| * @selector .slds-dl_inline__detail | |
| * @modifier | |
| */ } | |
| .slds-dl_inline__label, | |
| .slds-dl--inline__label { | |
| float: left; | |
| clear: left; } | |
| .slds-dl_inline__detail, | |
| .slds-dl--inline__detail { | |
| float: left; | |
| padding-left: 0.25rem; } } | |
| .slds-region_narrow .slds-dl_inline__label, | |
| .slds-region_narrow .slds-dl_inline__detail { | |
| float: left; } | |
| .slds-region_narrow .slds-dl_inline__label { | |
| clear: left; } | |
| .slds-region_narrow .slds-dl_inline__detail { | |
| padding-left: 0.25rem; } | |
| /** | |
| * @summary Causes description list to display horizontally with `dt` consuming 33% of the space and the `dd` taking up the rest. | |
| * @selector .slds-dl_horizontal | |
| * @modifier | |
| */ | |
| @media (min-width: 30em) { | |
| .slds-dl_horizontal, | |
| .slds-dl--horizontal { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; | |
| /** | |
| * @summary Marks a term | |
| * @selector .slds-dl_horizontal__label | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Marks a description | |
| * @selector .slds-dl_horizontal__detail | |
| * @modifier | |
| */ } | |
| .slds-dl_horizontal__label, | |
| .slds-dl--horizontal__label { | |
| width: 30%; | |
| padding-right: 0.75rem; } | |
| .slds-dl_horizontal__detail, | |
| .slds-dl--horizontal__detail { | |
| width: 70%; } } | |
| .slds-region_narrow .slds-dl_horizontal { | |
| display: -ms-flexbox; | |
| display: flex; | |
| -ms-flex-wrap: wrap; | |
| flex-wrap: wrap; } | |
| .slds-region_narrow .slds-dl_horizontal .slds-dl_horizontal__label { | |
| width: 30%; | |
| padding-right: 0.75rem; } | |
| .slds-region_narrow .slds-dl_horizontal .slds-dl_horizontal__detail { | |
| width: 70%; } | |
| .slds-list_horizontal, | |
| .slds-list--horizontal { | |
| /** | |
| * @summary Label of the name-value pair variant. Layout is modified by its parent class. | |
| * | |
| * @selector .slds-item_label | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Label of the name-value pair variant. Layout is modified by its parent class. | |
| * | |
| * @selector .slds-item_detail | |
| * @modifier | |
| */ } | |
| .slds-list_horizontal .slds-item_label, | |
| .slds-list_horizontal .slds-item--label, | |
| .slds-list--horizontal .slds-item_label, | |
| .slds-list--horizontal .slds-item--label { | |
| width: 30%; | |
| padding-right: 0.75rem; } | |
| .slds-list_horizontal .slds-item_detail, | |
| .slds-list_horizontal .slds-item--detail, | |
| .slds-list--horizontal .slds-item_detail, | |
| .slds-list--horizontal .slds-item--detail { | |
| width: 70%; } | |
| .slds-list_vertical .slds-item_label, | |
| .slds-list_vertical .slds-item--label, | |
| .slds-list_vertical .slds-item_detail, | |
| .slds-list_vertical .slds-item--detail, | |
| .slds-list--vertical .slds-item_label, | |
| .slds-list--vertical .slds-item--label, | |
| .slds-list--vertical .slds-item_detail, | |
| .slds-list--vertical .slds-item--detail { | |
| display: block; } | |
| .slds-list_inline, | |
| .slds-list--inline { | |
| display: -ms-inline-flexbox; | |
| display: inline-flex; | |
| max-width: 100%; } | |
| .slds-list_inline .slds-item_label, | |
| .slds-list_inline .slds-item--label, | |
| .slds-list--inline .slds-item_label, | |
| .slds-list--inline .slds-item--label { | |
| max-width: 180px; | |
| padding-right: 0.75rem; | |
| -ms-flex-negative: 0; | |
| flex-shrink: 0; } | |
| .slds-list_inline .slds-item_label ~ .slds-item_label, | |
| .slds-list_inline .slds-item_label ~ .slds-item--label, | |
| .slds-list_inline .slds-item--label ~ .slds-item_label, | |
| .slds-list_inline .slds-item--label ~ .slds-item--label, | |
| .slds-list--inline .slds-item_label ~ .slds-item_label, | |
| .slds-list--inline .slds-item_label ~ .slds-item--label, | |
| .slds-list--inline .slds-item--label ~ .slds-item_label, | |
| .slds-list--inline .slds-item--label ~ .slds-item--label { | |
| padding-left: 1rem; } | |
| .slds-list_inline .slds-item_detail, | |
| .slds-list_inline .slds-item--detail, | |
| .slds-list--inline .slds-item_detail, | |
| .slds-list--inline .slds-item--detail { | |
| min-width: 0; } | |
| /** | |
| * @summary Adds a bottom border to an element | |
| * | |
| * @selector .slds-border_bottom | |
| * @modifier | |
| * @group position | |
| */ | |
| .slds-border_bottom, | |
| .slds-border--bottom { | |
| border-bottom: 1px solid #dddbda; } | |
| /** | |
| * @summary Adds a left border to an element | |
| * | |
| * @selector .slds-border_left | |
| * @modifier | |
| * @group position | |
| */ | |
| .slds-border_left, | |
| .slds-border--left { | |
| border-left: 1px solid #dddbda; } | |
| /** | |
| * @summary Adds a right border to an element | |
| * | |
| * @selector .slds-border_right | |
| * @modifier | |
| * @group position | |
| */ | |
| .slds-border_right, | |
| .slds-border--right { | |
| border-right: 1px solid #dddbda; } | |
| /** | |
| * @summary Adds a top border to an element | |
| * | |
| * @selector .slds-border_top | |
| * @modifier | |
| * @group position | |
| */ | |
| .slds-border_top, | |
| .slds-border--top { | |
| border-top: 1px solid #dddbda; } | |
| /** | |
| * The truncation class can be used on an element, or the truncation | |
| * include can be added to an existing class. | |
| * | |
| * @summary Creates truncated text | |
| * | |
| * @selector .slds-truncate | |
| * @restrict [title] | |
| * @modifier | |
| */ | |
| .slds-truncate { | |
| max-width: 100%; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; } | |
| /** | |
| * @summary Truncates text at 25% of its parent container | |
| * | |
| * @selector .slds-truncate_container_25 | |
| * @modifier | |
| */ | |
| .slds-truncate_container_25, | |
| .slds-truncate_container--25 { | |
| max-width: 25%; } | |
| /** | |
| * @summary Truncates text at 50% of its parent container | |
| * | |
| * @selector .slds-truncate_container_50 | |
| * @modifier | |
| */ | |
| .slds-truncate_container_50, | |
| .slds-truncate_container--50 { | |
| max-width: 50%; } | |
| /** | |
| * @summary Truncates text at 75% of its parent container | |
| * | |
| * @selector .slds-truncate_container_75 | |
| * @modifier | |
| */ | |
| .slds-truncate_container_75, | |
| .slds-truncate_container--75 { | |
| max-width: 75%; } | |
| /** | |
| * @summary Truncates text at 33% of its parent container | |
| * | |
| * @selector .slds-truncate_container_33 | |
| * @modifier | |
| */ | |
| .slds-truncate_container_33, | |
| .slds-truncate_container--33 { | |
| max-width: 33%; } | |
| /** | |
| * @summary Truncates text at 66% of its parent container | |
| * | |
| * @selector .slds-truncate_container_66 | |
| * @modifier | |
| */ | |
| .slds-truncate_container_66, | |
| .slds-truncate_container--66 { | |
| max-width: 66%; } | |
| /** | |
| * The truncation class can be used on an element, or the truncation include can be added to an existing class. | |
| * | |
| * @summary Creates hyphenated text | |
| * | |
| * @selector .slds-hyphenate | |
| * @notes Hyphenation will occur at the parent width if a width is not specified | |
| * @modifier | |
| */ | |
| .slds-hyphenate { | |
| overflow-wrap: break-word; | |
| word-wrap: break-word; | |
| -webkit-hyphens: auto; | |
| -ms-hyphens: auto; | |
| hyphens: auto; } | |
| /** | |
| * @summary Provides 1rem base padding and borders | |
| * | |
| * @selector .slds-box | |
| * @modifier | |
| */ | |
| .slds-box { | |
| padding: 1rem; | |
| border-radius: 0.25rem; | |
| border: 1px solid #dddbda; | |
| /** | |
| * @summary Changes padding to .25rem | |
| * | |
| * @selector .slds-box_xx-small | |
| * @restrict .slds-box | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Changes padding to .5rem | |
| * | |
| * @selector .slds-box_x-small | |
| * @restrict .slds-box | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Changes padding to .75rem | |
| * | |
| * @selector .slds-box_small | |
| * @restrict .slds-box | |
| * @modifier | |
| */ } | |
| .slds-box_xx-small, .slds-box--xx-small { | |
| padding: 0.25rem; } | |
| .slds-box_x-small, .slds-box--x-small { | |
| padding: 0.5rem; } | |
| .slds-box_small, .slds-box--small { | |
| padding: 0.75rem; } | |
| .slds-box_border, .slds-box--border { | |
| padding: 0; | |
| border-radius: 0.25rem; | |
| border: 1px solid #dddbda; } | |
| /** | |
| * @summary Handles interactions if the box is applied to an actionable element | |
| * | |
| * @selector .slds-box_link | |
| * @restrict .slds-box | |
| * @modifier | |
| * @notes Requires a block display property, e.g. block, inline-block, flex | |
| */ | |
| .slds-box_link, .slds-box_link:active, .slds-box_link:focus, .slds-box_link:hover { | |
| color: inherit; | |
| text-decoration: inherit; } | |
| .slds-box_link:hover, .slds-box_link:focus { | |
| cursor: pointer; | |
| outline: 0; | |
| border: 1px solid #1589ee; | |
| box-shadow: 0 0 0 1px #1589ee inset; } | |
| .slds-theme { | |
| /** | |
| * @summary Sets the background color to white | |
| * | |
| * @selector .slds-theme_default | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Sets the background color to gray | |
| * | |
| * @selector .slds-theme_shade | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Sets the background color to dark blue | |
| * | |
| * @selector .slds-theme_inverse | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Sets the background color to darker blue | |
| * | |
| * @selector .slds-theme_alt-inverse | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Sets the background color to green | |
| * | |
| * @selector .slds-theme_success | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Sets the background color to gray-ish blue | |
| * | |
| * @selector .slds-theme_info | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Sets the background color to yellow | |
| * | |
| * @selector .slds-theme_warning | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Sets the background color to red | |
| * | |
| * @selector .slds-theme_error | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Sets the background color to black | |
| * | |
| * @selector .slds-theme_offline | |
| * @modifier | |
| */ | |
| /** | |
| * @summary Adds striped background | |
| * | |
| * @selector .slds-theme_alert-texture | |
| * @modifier | |
| */ } | |
| .slds-theme_default, .slds-theme--default { | |
| background-color: white; | |
| color: #080707; } | |
| .slds-theme_shade, .slds-theme--shade { | |
| background-color: #f3f2f2; } | |
| .slds-theme_inverse, .slds-theme--inverse { | |
| color: white; | |
| background-color: #061c3f; | |
| border-color: #061c3f; } | |
| .slds-theme_inverse a:not(.slds-button--neutral), .slds-theme--inverse a:not(.slds-button--neutral) { | |
| color: white; | |
| text-decoration: underline; } | |
| .slds-theme_inverse a:not(.slds-button--neutral):link, .slds-theme_inverse a:not(.slds-button--neutral):visited, .slds-theme--inverse a:not(.slds-button--neutral):link, .slds-theme--inverse a:not(.slds-button--neutral):visited { | |
| color: white; } | |
| .slds-theme_inverse a:not(.slds-button--neutral):hover, .slds-theme_inverse a:not(.slds-button--neutral):focus, .slds-theme--inverse a:not(.slds-button--neutral):hover, .slds-theme--inverse a:not(.slds-button--neutral):focus { | |
| text-decoration: none; } | |
| .slds-theme_inverse a:not(.slds-button--neutral):active, .slds-theme--inverse a:not(.slds-button--neutral):active { | |
| color: rgba(255, 255, 255, 0.5); } | |
| .slds-theme_inverse a:not(.slds-button--neutral)[disabled], .slds-theme--inverse a:not(.slds-button--neutral)[disabled] { | |
| color: rgba(255, 255, 255, 0.15); } | |
| .slds-theme_alt-inverse, .slds-theme--alt-inverse { | |
| color: white; | |
| background-color: #16325c; | |
| border-color: #16325c; } | |
| .slds-theme_alt-inverse a:not(.slds-button--neutral), .slds-theme--alt-inverse a:not(.slds-button--neutral) { | |
| color: white; | |
| text-decoration: underline; } | |
| .slds-theme_alt-inverse a:not(.slds-button--neutral):link, .slds-theme_alt-inverse a:not(.slds-button--neutral):visited, .slds-theme--alt-inverse a:not(.slds-button--neutral):link, .slds-theme--alt-inverse a:not(.slds-button--neutral):visited { | |
| color: white; } | |
| .slds-theme_alt-inverse a:not(.slds-button--neutral):hover, .slds-theme_alt-inverse a:not(.slds-button--neutral):focus, .slds-theme--alt-inverse a:not(.slds-button--neutral):hover, .slds-theme--alt-inverse a:not(.slds-button--neutral):focus { | |
| text-decoration: none; } | |
| .slds-theme_alt-inverse a:not(.slds-button--neutral):active, .slds-theme--alt-inverse a:not(.slds-button--neutral):active { | |
| color: rgba(255, 255, 255, 0.5); } | |
| .slds-theme_alt-inverse a:not(.slds-button--neutral)[disabled], .slds-theme--alt-inverse a:not(.slds-button--neutral)[disabled] { | |
| color: rgba(255, 255, 255, 0.15); } | |
| .slds-theme_success, .slds-theme--success { | |
| color: white; | |
| background-color: #04844b; } | |
| .slds-theme_success a:not(.slds-button--neutral), .slds-theme--success a:not(.slds-button--neutral) { | |
| color: white; | |
| 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: white; } | |
| .slds-theme_success a:not(.slds-button--neutral):hover, .slds-theme_success a:not(.slds-button--neutral):focus, .slds-theme--success a:not(.slds-button--neutral):hover, .slds-theme--success a:not(.slds-button--neutral):focus { | |
| text-decoration: none; } | |
| .slds-theme_success a:not(.slds-button--neutral):active, .slds-theme--success a:not(.slds-button--neutral):active { | |
| color: rgba(255, 255, 255, 0.5); } | |
| .slds-theme_success a:not(.slds-button--neutral)[disabled], .slds-theme--success a:not(.slds-button--neutral)[disabled] { | |
| color: rgba(255, 255, 255, 0.15); } | |
| .slds-theme_info, .slds-theme--info { | |
| color: white; | |
| background-color: #706e6b; } | |
| .slds-theme_info a:not(.slds-button--neutral), .slds-theme--info a:not(.slds-button--neutral) { | |
| color: white; | |
| 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: white; } | |
| .slds-theme_info a:not(.slds-button--neutral):hover, .slds-theme_info a:not(.slds-button--neutral):focus, .slds-theme--info a:not(.slds-button--neutral):hover, .slds-theme--info a:not(.slds-button--neutral):focus { | |
| text-decoration: none; } | |
| .slds-theme_info a:not(.slds-button--neutral):active, .slds-theme--info a:not(.slds-button--neutral):active { | |
| color: rgba(255, 255, 255, 0.5); } | |
| .slds-theme_info a:not(.slds-button--neutral)[disabled], .slds-theme--info a:not(.slds-button--neutral)[disabled] { | |
| color: rgba(255, 255, 255, 0.15); } | |
| .slds-theme_warning, .slds-theme--warning { | |
| background-color: #ffb75d; | |
| color: #080707; } | |
| .slds-theme_warning a, .slds-theme--warning a { | |
| color: #080707; | |
| text-decoration: underline; } | |
| .slds-theme_warning a:link, .slds-theme_warning a:visited, .slds-theme--warning a:link, .slds-theme--warning a:visited { | |
| color: #080707; } | |
| .slds-theme_warning a:hover, .slds-theme_warning a:focus, .slds-theme--warning a:hover, .slds-theme--warning a:focus { | |
| text-decoration: none; } | |
| .slds-theme_warning a:focus, .slds-theme--warning a:focus { | |
| box-shadow: 0 0 3px #514f4d; | |
| border: 1px solid #514f4d; } | |
| .slds-theme_warning a:active, .slds-theme--warning a:active { | |
| color: #514f4d; } | |
| .slds-theme_warning a[disabled], .slds-theme--warning a[disabled] { | |
| color: #514f4d; } | |
| .slds-theme_warning button, .slds-theme--warning button { | |
| color: #514f4d; | |
| text-decoration: underline; } | |
| .slds-theme_warning button:hover, .slds-theme--warning button:hover { | |
| color: #706e6b; } | |
| .slds-theme_warning button:focus, .slds-theme--warning button:focus { | |
| color: #514f4d; | |
| box-shadow: 0 0 3px #514f4d; | |
| border: 1px solid #514f4d; } | |
| .slds-theme_warning button:active, .slds-theme--warning button:active { | |
| color: #706e6b; } | |
| .slds-theme_warning .slds-icon, | |
| .slds-theme_warning .slds-button__icon, .slds-theme--warning .slds-icon, | |
| .slds-theme--warning .slds-button__icon { | |
| fill: #514f4d; } | |
| .slds-theme_error, .slds-theme--error { | |
| color: white; | |
| background-color: #c23934; } | |
| .slds-theme_error a:not(.slds-button--neutral), .slds-theme--error a:not(.slds-button--neutral) { | |
| color: white; | |
| 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: white; } | |
| .slds-theme_error a:not(.slds-button--neutral):hover, .slds-theme_error a:not(.slds-button--neutral):focus, .slds-theme--error a:not(.slds-button--neutral):hover, .slds-theme--error a:not(.slds-button--neutral):focus { | |
| text-decoration: none; } | |
| .slds-theme_error a:not(.slds-button--neutral):active, .slds-theme--error a:not(.slds-button--neutral):active { | |
| color: rgba(255, 255, 255, 0.5); } | |
| .slds-theme_error a:not(.slds-button--neutral)[disabled], .slds-theme--error a:not(.slds-button--neutral)[disabled] { | |
| color: rgba(255, 255, 255, 0.15); } | |
| .slds-theme_offline, .slds-theme--offline { | |
| color: white; | |
| background-color: #444; } | |
| .slds-theme_offline a:not(.slds-button--neutral), .slds-theme--offline a:not(.slds-button--neutral) { | |
| color: white; | |
| text-decoration: underline; } | |
| .slds-theme_offline a:not(.slds-button--neutral):link, .slds-theme_offline a:not(.slds-button--neutral):visited, .slds-theme--offline a:not(.slds-button--neutral):link, .slds-theme--offline a:not(.slds-button--neutral):visited { | |
| color: white; } | |
| .slds-theme_offline a:not(.slds-button--neutral):hover, .slds-theme_offline a:not(.slds-button--neutral):focus, .slds-theme--offline a:not(.slds-button--neutral):hover, .slds-theme--offline a:not(.slds-button--neutral):focus { | |
| text-decoration: none; } | |
| .slds-theme_offline a:not(.slds-button--neutral):active, .slds-theme--offline a:not(.slds-button--neutral):active { | |
| color: rgba(255, 255, 255, 0.5); } | |
| .slds-theme_offline a:not(.slds-button--neutral)[disabled], .slds-theme--offline a:not(.slds-button--neutral)[disabled] { | |
| color: rgba(255, 255, 255, 0.15); } | |
| .slds-theme_alert-texture, .slds-theme--alert-texture { | |
| background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.025) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.025) 50%, rgba(0, 0, 0, 0.025) 75%, transparent 75%, transparent); | |
| background-size: 64px 64px; } | |
| .slds-theme_inverse-text, .slds-theme--inverse-text { | |
| color: white; } | |
| .slds-theme_inverse-text a:not(.slds-button--neutral), .slds-theme--inverse-text a:not(.slds-button--neutral) { | |
| color: white; | |
| text-decoration: underline; } | |
| .slds-theme_inverse-text a:not(.slds-button--neutral):link, .slds-theme_inverse-text a:not(.slds-button--neutral):visited, .slds-theme--inverse-text a:not(.slds-button--neutral):link, .slds-theme--inverse-text a:not(.slds-button--neutral):visited { | |
| color: white; } | |
| .slds-theme_inverse-text a:not(.slds-button--neutral):hover, .slds-theme_inverse-text a:not(.slds-button--neutral):focus, .slds-theme--inverse-text a:not(.slds-button--neutral):hover, .slds-theme--inverse-text a:not(.slds-button--neutral):focus { | |
| text-decoration: none; } | |
| .slds-theme_inverse-text a:not(.slds-button--neutral):active, .slds-theme--inverse-text a:not(.slds-button--neutral):active { | |
| color: rgba(255, 255, 255, 0.5); } | |
| .slds-theme_inverse-text a:not(.slds-button--neutral)[disabled], .slds-theme--inverse-text a:not(.slds-button--neutral)[disabled] { | |
| color: rgba(255, 255, 255, 0.15); } | |
| /** | |
| * @summary Creates the 13px regular body copy | |
| * | |
| * @selector .slds-text-body_regular | |
| * @modifier | |
| */ | |
| .slds-text-body_regular, | |
| .slds-text-body--regular { | |
| font-size: 0.812rem; } | |
| .slds-is-mobile .slds-text-body_regular, .slds-is-mobile | |
| .slds-text-body--regular { | |
| font-size: 1rem; } | |
| /** | |
| * @summary Creates a more pale-colored 12px copy | |
| * | |
| * @selector .slds-text-body_small | |
| * @modifier | |
| */ | |
| .slds-text-body_small, | |
| .slds-text-body--small { | |
| font-size: 0.75rem; } | |
| .slds-is-mobile .slds-text-body_small, .slds-is-mobile | |
| .slds-text-body--small { | |
| font-size: 0.875rem; } | |
| /** | |
| * @summary Very large 28px heading | |
| * | |
| * @selector .slds-text-heading_large | |
| * @modifier | |
| */ | |
| .slds-text-heading_large, | |
| .slds-text-heading--large { | |
| font-weight: 300; | |
| font-size: 1.75rem; | |
| line-height: 1.25; } | |
| .slds-is-mobile .slds-text-heading_large, .slds-is-mobile | |
| .slds-text-heading--large { | |
| font-size: 2rem; } | |
| /** | |
| * @summary Large 20px heading | |
| * | |
| * @selector .slds-text-heading_medium | |
| * @modifier | |
| */ | |
| .slds-text-heading_medium, | |
| .slds-text-heading--medium { | |
| font-weight: 300; | |
| font-size: 1.25rem; | |
| line-height: 1.25; } | |
| .slds-is-mobile .slds-text-heading_medium, .slds-is-mobile | |
| .slds-text-heading--medium { | |
| font-size: 1.5rem; } | |
| /** | |
| * @summary Smaller 16px heading | |
| * | |
| * @selector .slds-text-heading_small | |
| * @modifier | |
| */ | |
| .slds-text-heading_small, | |
| .slds-text-heading--small { | |
| font-size: 1rem; | |
| line-height: 1.25; } | |
| .slds-is-mobile .slds-text-heading_small, .slds-is-mobile | |
| .slds-text-heading--small { | |
| font-size: 1.25rem; } | |
| .slds-text-heading_label, | |
| .slds-text-heading--label { | |
| font-size: 0.75rem; | |
| line-height: 1.25; | |
| color: #3e3e3c; | |
| text-transform: uppercase; | |
| letter-spacing: 0.0625rem; | |
| font-weight: 400; } | |
| .slds-is-mobile .slds-text-heading_label, .slds-is-mobile | |
| .slds-text-heading--label { | |
| font-size: 0.875rem; } | |
| .slds-text-heading_label-normal, | |
| .slds-text-heading--label-normal { | |
| font-size: 0.75rem; | |
| line-height: 1.25; | |
| color: #3e3e3c; } | |
| .slds-is-mobile .slds-text-heading_label-normal, .slds-is-mobile | |
| .slds-text-heading--label-normal { | |
| font-size: 0.875rem; } | |
| /** | |
| * @summary 12px heading that is not all caps | |
| * | |
| * @selector .slds-text-title | |
| * @notes Usually labels small content areas like list sections. | |
| * @modifier | |
| */ | |
| .slds-text-title { | |
| font-size: 0.75rem; | |
| line-height: 1.25; | |
| color: #3e3e3c; } | |
| .slds-is-mobile .slds-text-title { | |
| font-size: 0.875rem; } | |
| /** | |
| * @summary All caps 12px heading | |
| * | |
| * @selector .slds-text-title_caps | |
| * @notes Usually labels small content areas like tabs and page header titles. | |
| * @modifier | |
| */ | |
| .slds-text-title_caps, | |
| .slds-text-title--caps { | |
| font-size: 0.75rem; | |
| line-height: 1.25; | |
| color: #3e3e3c; | |
| font-weight: 400; | |
| text-transform: uppercase; | |
| letter-spacing: 0.0625rem; } | |
| .slds-is-mobile .slds-text-title_caps, .slds-is-mobile | |
| .slds-text-title--caps { | |
| font-size: 0.875rem; } | |
| /** | |
| * @summary Bold 14px heading | |
| * @selector .slds-text-title_bold | |
| * @notes Usually labels small content areas like form and listbox | |
| * @modifier | |
| */ | |
| .slds-text-title_bold { | |
| font-size: 0.875rem; | |
| font-weight: 700; } | |
| /** | |
| * @summary Resets line-height to browser default | |
| * | |
| * @selector .slds-line-height_reset | |
| * @modifier | |
| */ | |
| .slds-line-height_reset, | |
| .slds-line-height--reset { | |
| line-height: 1; } | |
| /** | |
| * @summary Default color of text | |
| * | |
| * @selector .slds-text-color_default | |
| * @modifier | |
| */ | |
| .slds-text-color_default, | |
| .slds-text-color--default { | |
| color: #080707; } | |
| /** | |
| * @summary Weak color of text | |
| * | |
| * @selector .slds-text-color_weak | |
| * @modifier | |
| */ | |
| .slds-text-color_weak, | |
| .slds-text-color--weak { | |
| color: #3e3e3c; } | |
| /** | |
| * @summary Error color of text | |
| * | |
| * @selector .slds-text-color_error | |
| * @modifier | |
| */ | |
| .slds-text-color_error, | |
| .slds-text-color--error { | |
| color: #c23934; } | |
| /** | |
| * @summary Color of text for destructive actions | |
| * | |
| * @selector .slds-text-color_destructive | |
| * @modifier | |
| */ | |
| .slds-text-color_destructive { | |
| color: #c23934; } | |
| /** | |
| * @summary Success color of text | |
| * | |
| * @selector .slds-text-color_success | |
| * @modifier | |
| */ | |
| .slds-text-color_success { | |
| color: #027e46; } | |
| /** | |
| * @summary Default color of text on inversed background | |
| * | |
| * @selector .slds-text-color_inverse | |
| * @modifier | |
| */ | |
| .slds-text-color_inverse, | |
| .slds-text-color--inverse { | |
| color: white; } | |
| /** | |
| * @summary Weak color of text on inversed background | |
| * | |
| * @selector .slds-text-color_inverse-weak | |
| * @modifier | |
| */ | |
| .slds-text-color_inverse-weak, | |
| .slds-text-color--inverse-weak { | |
| color: #b0adab; } | |
| /** | |
| * @summary Aligns text left | |
| * | |
| * @selector .slds-text-align_left | |
| * @modifier | |
| */ | |
| .slds-text-align_left, | |
| .slds-text-align--left { | |
| text-align: left; } | |
| /** | |
| * @summary Aligns text center | |
| * | |
| * @selector .slds-text-align_center | |
| * @modifier | |
| */ | |
| .slds-text-align_center, | |
| .slds-text-align--center { | |
| text-align: center; } | |
| /** | |
| * @summary Aligns text right | |
| * | |
| * @selector .slds-text-align_right | |
| * @modifier | |
| */ | |
| .slds-text-align_right, | |
| .slds-text-align--right { | |
| text-align: right; } | |
| /** | |
| * @summary Adds default spacing and list styling within a wrapper | |
| * | |
| * @selector .slds-text-longform | |
| * @notes Our application framework removes default text styling. This adds in margins to large areas | |
| * @modifier | |
| */ | |
| .slds-text-longform h1, | |
| .slds-text-longform h2, | |
| .slds-text-longform h3, | |
| .slds-text-longform p, | |
| .slds-text-longform ul, | |
| .slds-text-longform ol, | |
| .slds-text-longform dl, | |
| .slds-text-longform img { | |
| margin-bottom: 0.75rem; } | |
| .slds-text-longform ul { | |
| margin-left: 1.5rem; | |
| list-style: disc; } | |
| .slds-text-longform ul ul { | |
| list-style: circle; } | |
| .slds-text-longform ul ul ul { | |
| list-style: square; } | |
| .slds-text-longform ol { | |
| margin-left: 1.5rem; | |
| list-style: decimal; } | |
| .slds-text-longform ol ol { | |
| list-style: lower-alpha; } | |
| .slds-text-longform ol ol ol { | |
| list-style: lower-roman; } | |
| .slds-text-longform .slds-video { | |
| display: block; | |
| max-width: 100%; } | |
| .slds-text-longform .slds-video.slds-video_center, .slds-text-longform .slds-video.slds-video--center { | |
| margin: 0 auto; } | |
| .slds-text-longform .slds-video.slds-video_right, .slds-text-longform .slds-video.slds-video--right { | |
| margin: 0 0 0 auto; } | |
| /** | |
| * @summary Monospace font family | |
| * | |
| * @selector .slds-text-font_monospace | |
| * @modifier | |
| */ | |
| .slds-text-font_monospace { | |
| font-family: Consolas, Menlo, Monaco, Courier, monospace; } | |
| /** | |
| * @summary Text color utility class for Palette Gray #1 | |
| * | |
| * @selector .slds-color__text_gray-1 | |
| * @modifier | |
| * @group text-grays | |
| */ | |
| .slds-color__text_gray-1 { | |
| color: white !important; } | |
| /** | |
| * @summary Text color utility class for Palette Gray #2 | |
| * | |
| * @selector .slds-color__text_gray-2 | |
| * @modifier | |
| * @group text-grays | |
| */ | |
| .slds-color__text_gray-2 { | |
| color: #fafaf9 !important; } | |
| /** | |
| * @summary Text color utility class for Palette Gray #3 | |
| * | |
| * @selector .slds-color__text_gray-3 | |
| * @modifier | |
| * @group text-grays | |
| */ | |
| .slds-color__text_gray-3 { | |
| color: #f3f2f2 !important; } | |
| /** | |
| * @summary Text color utility class for Palette Gray #4 | |
| * | |
| * @selector .slds-color__text_gray-4 | |
| * @modifier | |
| * @group text-grays | |
| */ | |
| .slds-color__text_gray-4 { | |
| color: #ecebea !important; } | |
| /** | |
| * @summary Text color utility class for Palette Gray #5 | |
| * | |
| * @selector .slds-color__text_gray-5 | |
| * @modifier | |
| * @group text-grays | |
| */ | |
| .slds-color__text_gray-5 { | |
| color: #dddbda !important; } | |
| /** | |
| * @summary Text color utility class for Palette Gray #6 | |
| * | |
| * @selector .slds-color__text_gray-6 | |
| * @modifier | |
| * @group text-grays | |
| */ | |
| .slds-color__text_gray-6 { | |
| color: #c9c7c5 !important; } | |
| /** | |
| * @summary Text color utility class for Palette Gray #7 | |
| * | |
| * @selector .slds-color__text_gray-7 | |
| * @modifier | |
| * @group text-grays | |
| */ | |
| .slds-color__text_gray-7 { | |
| color: #b0adab !important; } | |
| /** | |
| * @summary Text color utility class for Palette Gray #8 | |
| * | |
| * @selector .slds-color__text_gray-8 | |
| * @modifier | |
| * @group text-grays | |
| */ | |
| .slds-color__text_gray-8 { | |
| color: #969492 !important; } | |
| /** | |
| * @summary Text color utility class for Palette Gray #9 | |
| * | |
| * @selector .slds-color__text_gray-9 | |
| * @modifier | |
| * @group text-grays | |
| */ | |
| .slds-color__text_gray-9 { | |
| color: #706e6b !important; } | |
| /** | |
| * @summary Text color utility class for Palette Gray #10 | |
| * | |
| * @selector .slds-color__text_gray-10 | |
| * @modifier | |
| * @group text-grays | |
| */ | |
| .slds-color__text_gray-10 { | |
| color: #514f4d !important; } | |
| /** | |
| * @summary Text color utility class for Palette Gray #11 | |
| * | |
| * @selector .slds-color__text_gray-11 | |
| * @modifier | |
| * @group text-grays | |
| */ | |
| .slds-color__text_gray-11 { | |
| color: #3e3e3c !important; } | |
| /** | |
| * @summary Text color utility class for Palette Gray #12 | |
| * | |
| * @selector .slds-color__text_gray-12 | |
| * @modifier | |
| * @group text-grays | |
| */ | |
| .slds-color__text_gray-12 { | |
| color: #2b2826 !important; } | |
| /** | |
| * @summary Background color utility class for Palette Gray #1 | |
| * | |
| * @selector .slds-color__background_gray-1 | |
| * @modifier | |
| * @group background-grays | |
| */ | |
| .slds-color__background_gray-1 { | |
| background-color: white !important; } | |
| /** | |
| * @summary Background color utility class for Palette Gray #2 | |
| * | |
| * @selector .slds-color__background_gray-2 | |
| * @modifier | |
| * @group background-grays | |
| */ | |
| .slds-color__background_gray-2 { | |
| background-color: #fafaf9 !important; } | |
| /** | |
| * @summary Background color utility class for Palette Gray #3 | |
| * | |
| * @selector .slds-color__background_gray-3 | |
| * @modifier | |
| * @group background-grays | |
| */ | |
| .slds-color__background_gray-3 { | |
| background-color: #f3f2f2 !important; } | |
| /** | |
| * @summary Background color utility class for Palette Gray #4 | |
| * | |
| * @selector .slds-color__background_gray-4 | |
| * @modifier | |
| * @group background-grays | |
| */ | |
| .slds-color__background_gray-4 { | |
| background-color: #ecebea !important; } | |
| /** | |
| * @summary Background color utility class for Palette Gray #5 | |
| * | |
| * @selector .slds-color__background_gray-5 | |
| * @modifier | |
| * @group background-grays | |
| */ | |
| .slds-color__background_gray-5 { | |
| background-color: #dddbda !important; } | |
| /** | |
| * @summary Background color utility class for Palette Gray #6 | |
| * | |
| * @selector .slds-color__background_gray-6 | |
| * @modifier | |
| * @group background-grays | |
| */ | |
| .slds-color__background_gray-6 { | |
| background-color: #c9c7c5 !important; } | |
| /** | |
| * @summary Background color utility class for Palette Gray #7 | |
| * | |
| * @selector .slds-color__background_gray-7 | |
| * @modifier | |
| * @group background-grays | |
| */ | |
| .slds-color__background_gray-7 { | |
| background-color: #b0adab !important; } | |
| /** | |
| * @summary Background color utility class for Palette Gray #8 | |
| * | |
| * @selector .slds-color__background_gray-8 | |
| * @modifier | |
| * @group background-grays | |
| */ | |
| .slds-color__background_gray-8 { | |
| background-color: #969492 !important; } | |
| /** | |
| * @summary Background color utility class for Palette Gray #9 | |
| * | |
| * @selector .slds-color__background_gray-9 | |
| * @modifier | |
| * @group background-grays | |
| */ | |
| .slds-color__background_gray-9 { | |
| background-color: #706e6b !important; } | |
| /** | |
| * @summary Background color utility class for Palette Gray #10 | |
| * | |
| * @selector .slds-color__background_gray-10 | |
| * @modifier | |
| * @group background-grays | |
| */ | |
| .slds-color__background_gray-10 { | |
| background-color: #514f4d !important; } | |
| /** | |
| * @summary Background color utility class for Palette Gray #11 | |
| * | |
| * @selector .slds-color__background_gray-11 | |
| * @modifier | |
| * @group background-grays | |
| */ | |
| .slds-color__background_gray-11 { | |
| background-color: #3e3e3c !important; } | |
| /** | |
| * @summary Background color utility class for Palette Gray #12 | |
| * | |
| * @selector .slds-color__background_gray-12 | |
| * @modifier | |
| * @group background-grays | |
| */ | |
| .slds-color__background_gray-12 { | |
| background-color: #2b2826 !important; } | |
| /** | |
| * @summary Border color utility class for Palette Gray #1 | |
| * | |
| * @selector .slds-color__border_gray-1 | |
| * @modifier | |
| * @group border-grays | |
| */ | |
| .slds-color__border_gray-1 { | |
| border-color: white !important; } | |
| /** | |
| * @summary Border color utility class for Palette Gray #2 | |
| * | |
| * @selector .slds-color__border_gray-2 | |
| * @modifier | |
| * @group border-grays | |
| */ | |
| .slds-color__border_gray-2 { | |
| border-color: #fafaf9 !important; } | |
| /** | |
| * @summary Border color utility class for Palette Gray #3 | |
| * | |
| * @selector .slds-color__border_gray-3 | |
| * @modifier | |
| * @group border-grays | |
| */ | |
| .slds-color__border_gray-3 { | |
| border-color: #f3f2f2 !important; } | |
| /** | |
| * @summary Border color utility class for Palette Gray #4 | |
| * | |
| * @selector .slds-color__border_gray-4 | |
| * @modifier | |
| * @group border-grays | |
| */ | |
| .slds-color__border_gray-4 { | |
| border-color: #ecebea !important; } | |
| /** | |
| * @summary Border color utility class for Palette Gray #5 | |
| * | |
| * @selector .slds-color__border_gray-5 | |
| * @modifier | |
| * @group border-grays | |
| */ | |
| .slds-color__border_gray-5 { | |
| border-color: #dddbda !important; } | |
| /** | |
| * @summary Border color utility class for Palette Gray #6 | |
| * | |
| * @selector .slds-color__border_gray-6 | |
| * @modifier | |
| * @group border-grays | |
| */ | |
| .slds-color__border_gray-6 { | |
| border-color: #c9c7c5 !important; } | |
| /** | |
| * @summary Border color utility class for Palette Gray #7 | |
| * | |
| * @selector .slds-color__border_gray-7 | |
| * @modifier | |
| * @group border-grays | |
| */ | |
| .slds-color__border_gray-7 { | |
| border-color: #b0adab !important; } | |
| /** | |
| * @summary Border color utility class for Palette Gray #8 | |
| * | |
| * @selector .slds-color__border_gray-8 | |
| * @modifier | |
| * @group border-grays | |
| */ | |
| .slds-color__border_gray-8 { | |
| border-color: #969492 !important; } | |
| /** | |
| * @summary Border color utility class for Palette Gray #9 | |
| * | |
| * @selector .slds-color__border_gray-9 | |
| * @modifier | |
| * @group border-grays | |
| */ | |
| .slds-color__border_gray-9 { | |
| border-color: #706e6b !important; } | |
| /** | |
| * @summary Border color utility class for Palette Gray #10 | |
| * | |
| * @selector .slds-color__border_gray-10 | |
| * @modifier | |
| * @group border-grays | |
| */ | |
| .slds-color__border_gray-10 { | |
| border-color: #514f4d !important; } | |
| /** | |
| * @summary Border color utility class for Palette Gray #11 | |
| * | |
| * @selector .slds-color__border_gray-11 | |
| * @modifier | |
| * @group border-grays | |
| */ | |
| .slds-color__border_gray-11 { | |
| border-color: #3e3e3c !important; } | |
| /** | |
| * @summary Border color utility class for Palette Gray #12 | |
| * | |
| * @selector .slds-color__border_gray-12 | |
| * @modifier | |
| * @group border-grays | |
| */ | |
| .slds-color__border_gray-12 { | |
| border-color: #2b2826 !important; } | |
| /** | |
| * @summary SVG Fill color utility class for Palette Gray #1 | |
| * | |
| * @selector .slds-color__fill_gray-1 | |
| * @modifier | |
| * @group fill-grays | |
| */ | |
| .slds-color__fill_gray-1 { | |
| fill: white !important; } | |
| /** | |
| * @summary SVG Fill color utility class for Palette Gray #2 | |
| * | |
| * @selector .slds-color__fill_gray-2 | |
| * @modifier | |
| * @group fill-grays | |
| */ | |
| .slds-color__fill_gray-2 { | |
| fill: #fafaf9 !important; } | |
| /** | |
| * @summary SVG Fill color utility class for Palette Gray #3 | |
| * | |
| * @selector .slds-color__fill_gray-3 | |
| * @modifier | |
| * @group fill-grays | |
| */ | |
| .slds-color__fill_gray-3 { | |
| fill: #f3f2f2 !important; } | |
| /** | |
| * @summary SVG Fill color utility class for Palette Gray #4 | |
| * | |
| * @selector .slds-color__fill_gray-4 | |
| * @modifier | |
| * @group fill-grays | |
| */ | |
| .slds-color__fill_gray-4 { | |
| fill: #ecebea !important; } | |
| /** | |
| * @summary SVG Fill color utility class for Palette Gray #5 | |
| * | |
| * @selector .slds-color__fill_gray-5 | |
| * @modifier | |
| * @group fill-grays | |
| */ | |
| .slds-color__fill_gray-5 { | |
| fill: #dddbda !important; } | |
| /** | |
| * @summary SVG Fill color utility class for Palette Gray #6 | |
| * | |
| * @selector .slds-color__fill_gray-6 | |
| * @modifier | |
| * @group fill-grays | |
| */ | |
| .slds-color__fill_gray-6 { | |
| fill: #c9c7c5 !important; } | |
| /** | |
| * @summary SVG Fill color utility class for Palette Gray #7 | |
| * | |
| * @selector .slds-color__fill_gray-7 | |
| * @modifier | |
| * @group fill-grays | |
| */ | |
| .slds-color__fill_gray-7 { | |
| fill: #b0adab !important; } | |
| /** | |
| * @summary SVG Fill color utility class for Palette Gray #8 | |
| * | |
| * @selector .slds-color__fill_gray-8 | |
| * @modifier | |
| * @group fill-grays | |
| */ | |
| .slds-color__fill_gray-8 { | |
| fill: #969492 !important; } | |
| /** | |
| * @summary SVG Fill color utility class for Palette Gray #9 | |
| * | |
| * @selector .slds-color__fill_gray-9 | |
| * @modifier | |
| * @group fill-grays | |
| */ | |
| .slds-color__fill_gray-9 { | |
| fill: #706e6b !important; } | |
| /** | |
| * @summary SVG Fill color utility class for Palette Gray #10 | |
| * | |
| * @selector .slds-color__fill_gray-10 | |
| * @modifier | |
| * @group fill-grays | |
| */ | |
| .slds-color__fill_gray-10 { | |
| fill: #514f4d !important; } | |
| /** | |
| * @summary SVG Fill color utility class for Palette Gray #11 | |
| * | |
| * @selector .slds-color__fill_gray-11 | |
| * @modifier | |
| * @group fill-grays | |
| */ | |
| .slds-color__fill_gray-11 { | |
| fill: #3e3e3c !important; } | |
| /** | |
| * @summary SVG Fill color utility class for Palette Gray #12 | |
| * | |
| * @selector .slds-color__fill_gray-12 | |
| * @modifier | |
| * @group fill-grays | |
| */ | |
| .slds-color__fill_gray-12 { | |
| fill: #2b2826 !important; } | |
| /** | |
| * @summary Forces element to scroll horizontally and vertically when content exceeds element's width and height | |
| * | |
| * @selector .slds-scrollable | |
| * @modifier | |
| */ | |
| .slds-scrollable { | |
| -webkit-overflow-scrolling: touch; | |
| overflow: auto; } | |
| /** | |
| * @summary Forces overflow items to not scroll within element's width and height | |
| * | |
| * @selector .slds-scrollable_none | |
| * @modifier | |
| */ | |
| .slds-scrollable_none, | |
| .slds-scrollable--none { | |
| overflow: hidden; } | |
| /** | |
| * @summary Forces element to scroll vertically when content exceeds element's height | |
| * | |
| * @selector .slds-scrollable_y | |
| * @modifier | |
| */ | |
| .slds-scrollable_y, | |
| .slds-scrollable--y { | |
| -webkit-overflow-scrolling: touch; | |
| max-height: 100%; | |
| overflow: hidden; | |
| overflow-y: auto; } | |
| /** | |
| * @summary Forces element to scroll horizontally when content exceeds element's width | |
| * | |
| * @selector .slds-scrollable_x | |
| * @modifier | |
| */ | |
| .slds-scrollable_x, | |
| .slds-scrollable--x { | |
| -webkit-overflow-scrolling: touch; | |
| max-width: 100%; | |
| overflow: hidden; | |
| overflow-x: auto; } | |
| /** | |
| * @selector .slds-size_small | |
| * @modifier | |
| */ | |
| .slds-size_xxx-small, | |
| .slds-size--xxx-small { | |
| width: 3rem; } | |
| .slds-size_xx-small, | |
| .slds-size--xx-small { | |
| width: 6rem; } | |
| .slds-size_x-small, | |
| .slds-size--x-small { | |
| width: 12rem; } | |
| .slds-size_small, | |
| .slds-size--small { | |
| width: 15rem; } | |
| .slds-size_medium, | |
| .slds-size--medium { | |
| width: 20rem; } | |
| .slds-size_large, | |
| .slds-size--large { | |
| width: 25rem; } | |
| .slds-size_x-large, | |
| .slds-size--x-large { | |
| width: 40rem; } | |
| .slds-size_xx-large, | |
| .slds-size--xx-large { | |
| width: 60rem; } | |
| /** | |
| * @selector .slds-size_full | |
| * @modifier | |
| */ | |
| .slds-size_full { | |
| width: 100%; } | |
| .slds-size_1-of-1, | |
| .slds-size--1-of-1 { | |
| width: 100%; } | |
| .slds-size_1-of-2, | |
| .slds-size--1-of-2 { | |
| width: 50%; } | |
| .slds-size_2-of-2, | |
| .slds-size--2-of-2 { | |
| width: 100%; } | |
| .slds-size_1-of-3, | |
| .slds-size--1-of-3 { | |
| width: 33.333%; } | |
| .slds-size_2-of-3, | |
| .slds-size--2-of-3 { | |
| width: 66.667%; } | |
| .slds-size_3-of-3, | |
| .slds-size--3-of-3 { | |
| width: 100%; } | |
| .slds-size_1-of-4, | |
| .slds-size--1-of-4 { | |
| width: 25%; } | |
| .slds-size_2-of-4, | |
| .slds-size--2-of-4 { | |
| width: 50%; } | |
| .slds-size_3-of-4, | |
| .slds-size--3-of-4 { | |
| width: 75%; } | |
| .slds-size_4-of-4, | |
| .slds-size--4-of-4 { | |
| width: 100%; } | |
| .slds-size_1-of-5, | |
| .slds-size--1-of-5 { | |
| width: 20%; } | |
| .slds-size_2-of-5, | |
| .slds-size--2-of-5 { | |
| width: 40%; } | |
| .slds-size_3-of-5, | |
| .slds-size--3-of-5 { | |
| width: 60%; } | |
| .slds-size_4-of-5, | |
| .slds-size--4-of-5 { | |
| width: 80%; } | |
| .slds-size_5-of-5, | |
| .slds-size--5-of-5 { | |
| width: 100%; } | |
| .slds-size_1-of-6, | |
| .slds-size--1-of-6 { | |
| width: 16.667%; } | |
| .slds-size_2-of-6, | |
| .slds-size--2-of-6 { | |
| width: 33.333%; } | |
| .slds-size_3-of-6, | |
| .slds-size--3-of-6 { | |
| width: 50%; } | |
| .slds-size_4-of-6, | |
| .slds-size--4-of-6 { | |
| width: 66.667%; } | |
| .slds-size_5-of-6, | |
| .slds-size--5-of-6 { | |
| width: 83.333%; } | |
| .slds-size_6-of-6, | |
| .slds-size--6-of-6 { | |
| width: 100%; } | |
| .slds-size_1-of-7, | |
| .slds-size--1-of-7 { | |
| width: 14.286%; } | |
| .slds-size_2-of-7, | |
| .slds-size--2-of-7 { | |
| width: 28.571%; } | |
| .slds-size_3-of-7, | |
| .slds-size--3-of-7 { | |
| width: 42.857%; } | |
| .slds-size_4-of-7, | |
| .slds-size--4-of-7 { | |
| width: 57.143%; } | |
| .slds-size_5-of-7, | |
| .slds-size--5-of-7 { | |
| width: 71.429%; } | |
| .slds-size_6-of-7, | |
| .slds-size--6-of-7 { | |
| width: 85.714%; } | |
| .slds-size_7-of-7, | |
| .slds-size--7-of-7 { | |
| width: 100%; } | |
| .slds-size_1-of-8, | |
| .slds-size--1-of-8 { | |
| width: 12.5%; } | |
| .slds-size_2-of-8, | |
| .slds-size--2-of-8 { | |
| width: 25%; } | |
| .slds-size_3-of-8, | |
| .slds-size--3-of-8 { | |
| width: 37.5%; } | |
| .slds-size_4-of-8, | |
| .slds-size--4-of-8 { | |
| width: 50%; } | |
| .slds-size_5-of-8, | |
| .slds-size--5-of-8 { | |
| width: 62.5%; } | |
| .slds-size_6-of-8, | |
| .slds-size--6-of-8 { | |
| width: 75%; } | |
| .slds-size_7-of-8, | |
| .slds-size--7-of-8 { | |
| width: 87.5%; } | |
| .slds-size_8-of-8, | |
| .slds-size--8-of-8 { | |
| width: 100%; } | |
| .slds-size_1-of-12, | |
| .slds-size--1-of-12 { | |
| width: 8.333%; } | |
| .slds-size_2-of-12, | |
| .slds-size--2-of-12 { | |
| width: 16.667%; } | |
| .slds-size_3-of-12, | |
| .slds-size--3-of-12 { | |
| width: 25%; } | |
| .slds-size_4-of-12, | |
| .slds-size--4-of-12 { | |
| width: 33.333%; } | |
| .slds-size_5-of-12, | |
| .slds-size--5-of-12 { | |
| width: 41.667%; } | |
| .slds-size_6-of-12, | |
| .slds-size--6-of-12 { | |
| width: 50%; } | |
| .slds-size_7-of-12, | |
| .slds-size--7-of-12 { | |
| width: 58.333%; } | |
| .slds-size_8-of-12, | |
| .slds-size--8-of-12 { | |
| width: 66.667%; } | |
| .slds-size_9-of-12, | |
| .slds-size--9-of-12 { | |
| width: 75%; } | |
| .slds-size_10-of-12, | |
| .slds-size--10-of-12 { | |
| width: 83.333%; } | |
| .slds-size_11-of-12, | |
| .slds-size--11-of-12 { | |
| width: 91.667%; } | |
| .slds-size_12-of-12, | |
| .slds-size--12-of-12 { | |
| width: 100%; } | |
| .slds-order_1, | |
| .slds-order--1 { | |
| -ms-flex-order: 1; | |
| order: 1; } | |
| .slds-order_2, | |
| .slds-order--2 { | |
| -ms-flex-order: 2; | |
| order: 2; } | |
| .slds-order_3, | |
| .slds-order--3 { | |
| -ms-flex-order: 3; | |
| order: 3; } | |
| .slds-order_4, | |
| .slds-order--4 { | |
| -ms-flex-order: 4; | |
| order: 4; } | |
| .slds-order_5, | |
| .slds-order--5 { | |
| -ms-flex-order: 5; | |
| order: 5; } | |
| .slds-order_6, | |
| .slds-order--6 { | |
| -ms-flex-order: 6; | |
| order: 6; } | |
| .slds-order_7, | |
| .slds-order--7 { | |
| -ms-flex-order: 7; | |
| order: 7; } | |
| .slds-order_8, | |
| .slds-order--8 { | |
| -ms-flex-order: 8; | |
| order: 8; } | |
| .slds-order_9, | |
| .slds-order--9 { | |
| -ms-flex-order: 9; | |
| order: 9; } | |
| .slds-order_10, | |
| .slds-order--10 { | |
| -ms-flex-order: 10; | |
| order: 10; } | |
| .slds-order_11, | |
| .slds-order--11 { | |
| -ms-flex-order: 11; | |
| order: 11; } | |
| .slds-order_12, | |
| .slds-order--12 { | |
| -ms-flex-order: 12; | |
| order: 12; } | |
| @media (min-width: 20em) { | |
| [class*="slds-x-small-size_"], | |
| [class*="slds-x-small-size--"] { | |
| -ms-flex: none; | |
| flex: none; } | |
| .slds-x-small-size_xxx-small, | |
| .slds-x-small-size--xxx-small { | |
| width: 3rem; } | |
| .slds-x-small-size_xx-small, | |
| .slds-x-small-size--xx-small { | |
| width: 6rem; } | |
| .slds-x-small-size_x-small, | |
| .slds-x-small-size--x-small { | |
| width: 12rem; } | |
| .slds-x-small-size_small, | |
| .slds-x-small-size--small { | |
| width: 15rem; } | |
| .slds-x-small-size_medium, | |
| .slds-x-small-size--medium { | |
| width: 20rem; } | |
| .slds-x-small-size_large, | |
| .slds-x-small-size--large { | |
| width: 25rem; } | |
| .slds-x-small-size_x-large, | |
| .slds-x-small-size--x-large { | |
| width: 40rem; } | |
| .slds-x-small-size_xx-large, | |
| .slds-x-small-size--xx-large { | |
| width: 60rem; } | |
| .slds-x-small-size_1-of-1, | |
| .slds-x-small-size--1-of-1 { | |
| width: 100%; } | |
| .slds-x-small-size_1-of-2, | |
| .slds-x-small-size--1-of-2 { | |
| width: 50%; } | |
| .slds-x-small-size_2-of-2, | |
| .slds-x-small-size--2-of-2 { | |
| width: 100%; } | |
| .slds-x-small-size_1-of-3, | |
| .slds-x-small-size--1-of-3 { | |
| width: 33.333%; } | |
| .slds-x-small-size_2-of-3, | |
| .slds-x-small-size--2-of-3 { | |
| width: 66.667%; } | |
| .slds-x-small-size_3-of-3, | |
| .slds-x-small-size--3-of-3 { | |
| width: 100%; } | |
| .slds-x-small-size_1-of-4, | |
| .slds-x-small-size--1-of-4 { | |
| width: 25%; } | |
| .slds-x-small-size_2-of-4, | |
| .slds-x-small-size--2-of-4 { | |
| width: 50%; } | |
| .slds-x-small-size_3-of-4, | |
| .slds-x-small-size--3-of-4 { | |
| width: 75%; } | |
| .slds-x-small-size_4-of-4, | |
| .slds-x-small-size--4-of-4 { | |
| width: 100%; } | |
| .slds-x-small-size_1-of-5, | |
| .slds-x-small-size--1-of-5 { | |
| width: 20%; } | |
| .slds-x-small-size_2-of-5, | |
| .slds-x-small-size--2-of-5 { | |
| width: 40%; } | |
| .slds-x-small-size_3-of-5, | |
| .slds-x-small-size--3-of-5 { | |
| width: 60%; } | |
| .slds-x-small-size_4-of-5, | |
| .slds-x-small-size--4-of-5 { | |
| width: 80%; } | |
| .slds-x-small-size_5-of-5, | |
| .slds-x-small-size--5-of-5 { | |
| width: 100%; } | |
| .slds-x-small-size_1-of-6, | |
| .slds-x-small-size--1-of-6 { | |
| width: 16.667%; } | |
| .slds-x-small-size_2-of-6, | |
| .slds-x-small-size--2-of-6 { | |
| width: 33.333%; } | |
| .slds-x-small-size_3-of-6, | |
| .slds-x-small-size--3-of-6 { | |
| width: 50%; } | |
| .slds-x-small-size_4-of-6, | |
| .slds-x-small-size--4-of-6 { | |
| width: 66.667%; } | |
| .slds-x-small-size_5-of-6, | |
| .slds-x-small-size--5-of-6 { | |
| width: 83.333%; } | |
| .slds-x-small-size_6-of-6, | |
| .slds-x-small-size--6-of-6 { | |
| width: 100%; } | |
| .slds-x-small-size_1-of-7, | |
| .slds-x-small-size--1-of-7 { | |
| width: 14.286%; } | |
| .slds-x-small-size_2-of-7, | |
| .slds-x-small-size--2-of-7 { | |
| width: 28.571%; } | |
| .slds-x-small-size_3-of-7, | |
| .slds-x-small-size--3-of-7 { | |
| width: 42.857%; } | |
| .slds-x-small-size_4-of-7, | |
| .slds-x-small-size--4-of-7 { | |
| width: 57.143%; } | |
| .slds-x-small-size_5-of-7, | |
| .slds-x-small-size--5-of-7 { | |
| width: 71.429%; } | |
| .slds-x-small-size_6-of-7, | |
| .slds-x-small-size--6-of-7 { | |
| width: 85.714%; } | |
| .slds-x-small-size_7-of-7, | |
| .slds-x-small-size--7-of-7 { | |
| width: 100%; } | |
| .slds-x-small-size_1-of-8, | |
| .slds-x-small-size--1-of-8 { | |
| width: 12.5%; } | |
| .slds-x-small-size_2-of-8, | |
| .slds-x-small-size--2-of-8 { | |
| width: 25%; } | |
| .slds-x-small-size_3-of-8, | |
| .slds-x-small-size--3-of-8 { | |
| width: 37.5%; } | |
| .slds-x-small-size_4-of-8, | |
| .slds-x-small-size--4-of-8 { | |
| width: 50%; } | |
| .slds-x-small-size_5-of-8, | |
| .slds-x-small-size--5-of-8 { | |
| width: 62.5%; } | |
| .slds-x-small-size_6-of-8, | |
| .slds-x-small-size--6-of-8 { | |
| width: 75%; } | |
| .slds-x-small-size_7-of-8, | |
| .slds-x-small-size--7-of-8 { | |
| width: 87.5%; } | |
| .slds-x-small-size_8-of-8, | |
| .slds-x-small-size--8-of-8 { | |
| width: 100%; } | |
| .slds-x-small-size_1-of-12, | |
| .slds-x-small-size--1-of-12 { | |
| width: 8.333%; } | |
| .slds-x-small-size_2-of-12, | |
| .slds-x-small-size--2-of-12 { | |
| width: 16.667%; } | |
| .slds-x-small-size_3-of-12, | |
| .slds-x-small-size--3-of-12 { | |
| width: 25%; } | |
| .slds-x-small-size_4-of-12, | |
| .slds-x-small-size--4-of-12 { | |
| width: 33.333%; } | |
| .slds-x-small-size_5-of-12, | |
| .slds-x-small-size--5-of-12 { | |
| width: 41.667%; } | |
| .slds-x-small-size_6-of-12, | |
| .slds-x-small-size--6-of-12 { | |
| width: 50%; } | |
| .slds-x-small-size_7-of-12, | |
| .slds-x-small-size--7-of-12 { | |
| width: 58.333%; } | |
| .slds-x-small-size_8-of-12, | |
| .slds-x-small-size--8-of-12 { | |
| width: 66.667%; } | |
| .slds-x-small-size_9-of-12, | |
| .slds-x-small-size--9-of-12 { | |
| width: 75%; } | |
| .slds-x-small-size_10-of-12, | |
| .slds-x-small-size--10-of-12 { | |
| width: 83.333%; } | |
| .slds-x-small-size_11-of-12, | |
| .slds-x-small-size--11-of-12 { | |
| width: 91.667%; } | |
| .slds-x-small-size_12-of-12, | |
| .slds-x-small-size--12-of-12 { | |
| width: 100%; } | |
| .slds-x-small-order_1, | |
| .slds-x-small-order--1 { | |
| -ms-flex-order: 1; | |
| order: 1; } | |
| .slds-x-small-order_2, | |
| .slds-x-small-order--2 { | |
| -ms-flex-order: 2; | |
| order: 2; } | |
| .slds-x-small-order_3, | |
| .slds-x-small-order--3 { | |
| -ms-flex-order: 3; | |
| order: 3; } | |
| .slds-x-small-order_4, | |
| .slds-x-small-order--4 { | |
| -ms-flex-order: 4; | |
| order: 4; } | |
| .slds-x-small-order_5, | |
| .slds-x-small-order--5 { | |
| -ms-flex-order: 5; | |
| order: 5; } | |
| .slds-x-small-order_6, | |
| .slds-x-small-order--6 { | |
| -ms-flex-order: 6; | |
| order: 6; } | |
| .slds-x-small-order_7, | |
| .slds-x-small-order--7 { | |
| -ms-flex-order: 7; | |
| order: 7; } | |
| .slds-x-small-order_8, | |
| .slds-x-small-order--8 { | |
| -ms-flex-order: 8; | |
| order: 8; } | |
| .slds-x-small-order_9, | |
| .slds-x-small-order--9 { | |
| -ms-flex-order: 9; | |
| order: 9; } | |
| .slds-x-small-order_10, | |
| .slds-x-small-order--10 { | |
| -ms-flex-order: 10; | |
| order: 10; } | |
| .slds-x-small-order_11, | |
| .slds-x-small-order--11 { | |
| -ms-flex-order: 11; | |
| order: 11; } | |
| .slds-x-small-order_12, | |
| .slds-x-small-order--12 { | |
| -ms-flex-order: 12; | |
| order: 12; } } | |
| @media (max-width: 20em) { | |
| [class*="slds-max-x-small-size_"], | |
| [class*="slds-max-x-small-size--"] { | |
| -ms-flex: none; | |
| flex: none; } | |
| .slds-max-x-small-size_xxx-small, | |
| .slds-max-x-small-size--xxx-small { | |
| width: 3rem; } | |
| .slds-max-x-small-size_xx-small, | |
| .slds-max-x-small-size--xx-small { | |
| width: 6rem; } | |
| .slds-max-x-small-size_x-small, | |
| .slds-max-x-small-size--x-small { | |
| width: 12rem; } | |
| .slds-max-x-small-size_small, | |
| .slds-max-x-small-size--small { | |
| width: 15rem; } | |
| .slds-max-x-small-size_medium, | |
| .slds-max-x-small-size--medium { | |
| width: 20rem; } | |
| .slds-max-x-small-size_large, | |
| .slds-max-x-small-size--large { | |
| width: 25rem; } | |
| .slds-max-x-small-size_x-large, | |
| .slds-max-x-small-size--x-large { | |
| width: 40rem; } | |
| .slds-max-x-small-size_xx-large, | |
| .slds-max-x-small-size--xx-large { | |
| width: 60rem; } | |
| .slds-max-x-small-size_1-of-1, | |
| .slds-max-x-small-size--1-of-1 { | |
| width: 100%; } | |
| .slds-max-x-small-size_1-of-2, | |
| .slds-max-x-small-size--1-of-2 { | |
| width: 50%; } | |
| .slds-max-x-small-size_2-of-2, | |
| .slds-max-x-small-size--2-of-2 { | |
| width: 100%; } | |
| .slds-max-x-small-size_1-of-3, | |
| .slds-max-x-small-size--1-of-3 { | |
| width: 33.333%; } | |
| .slds-max-x-small-size_2-of-3, | |
| .slds-max-x-small-size--2-of-3 { | |
| width: 66.667%; } | |
| .slds-max-x-small-size_3-of-3, | |
| .slds-max-x-small-size--3-of-3 { | |
| width: 100%; } | |
| .slds-max-x-small-size_1-of-4, | |
| .slds-max-x-small-size--1-of-4 { | |
| width: 25%; } | |
| .slds-max-x-small-size_2-of-4, | |
| .slds-max-x-small-size--2-of-4 { | |
| width: 50%; } | |
| .slds-max-x-small-size_3-of-4, | |
| .slds-max-x-small-size--3-of-4 { | |
| width: 75%; } | |
| .slds-max-x-small-size_4-of-4, | |
| .slds-max-x-small-size--4-of-4 { | |
| width: 100%; } | |
| .slds-max-x-small-size_1-of-5, | |
| .slds-max-x-small-size--1-of-5 { | |
| width: 20%; } | |
| .slds-max-x-small-size_2-of-5, | |
| .slds-max-x-small-size--2-of-5 { | |
| width: 40%; } | |
| .slds-max-x-small-size_3-of-5, | |
| .slds-max-x-small-size--3-of-5 { | |
| width: 60%; } | |
| .slds-max-x-small-size_4-of-5, | |
| .slds-max-x-small-size--4-of-5 { | |
| width: 80%; } | |
| .slds-max-x-small-size_5-of-5, | |
| .slds-max-x-small-size--5-of-5 { | |
| width: 100%; } | |
| .slds-max-x-small-size_1-of-6, | |
| .slds-max-x-small-size--1-of-6 { | |
| width: 16.667%; } | |
| .slds-max-x-small-size_2-of-6, | |
| .slds-max-x-small-size--2-of-6 { | |
| width: 33.333%; } | |
| .slds-max-x-small-size_3-of-6, | |
| .slds-max-x-small-size--3-of-6 { | |
| width: 50%; } | |
| .slds-max-x-small-size_4-of-6, | |
| .slds-max-x-small-size--4-of-6 { | |
| width: 66.667%; } | |
| .slds-max-x-small-size_5-of-6, | |
| .slds-max-x-small-size--5-of-6 { | |
| width: 83.333%; } | |
| .slds-max-x-small-size_6-of-6, | |
| .slds-max-x-small-size--6-of-6 { | |
| width: 100%; } | |
| .slds-max-x-small-size_1-of-7, | |
| .slds-max-x-small-size--1-of-7 { | |
| width: 14.286%; } | |
| .slds-max-x-small-size_2-of-7, | |
| .slds-max-x-small-size--2-of-7 { | |
| width: 28.571%; } | |
| .slds-max-x-small-size_3-of-7, | |
| .slds-max-x-small-size--3-of-7 { | |
| width: 42.857%; } | |
| .slds-max-x-small-size_4-of-7, | |
| .slds-max-x-small-size--4-of-7 { | |
| width: 57.143%; } | |
| .slds-max-x-small-size_5-of-7, | |
| .slds-max-x-small-size--5-of-7 { | |
| width: 71.429%; } | |
| .slds-max-x-small-size_6-of-7, | |
| .slds-max-x-small-size--6-of-7 { | |
| width: 85.714%; } | |
| .slds-max-x-small-size_7-of-7, | |
| .slds-max-x-small-size--7-of-7 { | |
| width: 100%; } | |
| .slds-max-x-small-size_1-of-8, | |
| .slds-max-x-small-size--1-of-8 { | |
| width: 12.5%; } | |
| .slds-max-x-small-size_2-of-8, | |
| .slds-max-x-small-size--2-of-8 { | |
| width: 25%; } | |
| .slds-max-x-small-size_3-of-8, | |
| .slds-max-x-small-size--3-of-8 { | |
| width: 37.5%; } | |
| .slds-max-x-small-size_4-of-8, | |
| .slds-max-x-small-size--4-of-8 { | |
| width: 50%; } | |
| .slds-max-x-small-size_5-of-8, | |
| .slds-max-x-small-size--5-of-8 { | |
| width: 62.5%; } | |
| .slds-max-x-small-size_6-of-8, | |
| .slds-max-x-small-size--6-of-8 { | |
| width: 75%; } | |
| .slds-max-x-small-size_7-of-8, | |
| .slds-max-x-small-size--7-of-8 { | |
| width: 87.5%; } | |
| .slds-max-x-small-size_8-of-8, | |
| .slds-max-x-small-size--8-of-8 { | |
| width: 100%; } | |
| .slds-max-x-small-size_1-of-12, | |
| .slds-max-x-small-size--1-of-12 { | |
| width: 8.333%; } | |
| .slds-max-x-small-size_2-of-12, | |
| .slds-max-x-small-size--2-of-12 { | |
| width: 16.667%; } | |
| .slds-max-x-small-size_3-of-12, | |
| .slds-max-x-small-size--3-of-12 { | |
| width: 25%; } | |
| .slds-max-x-small-size_4-of-12, | |
| .slds-max-x-small-size--4-of-12 { | |
| width: 33.333%; } | |
| .slds-max-x-small-size_5-of-12, | |
| .slds-max-x-small-size--5-of-12 { | |
| width: 41.667%; } | |
| .slds-max-x-small-size_6-of-12, | |
| .slds-max-x-small-size--6-of-12 { | |
| width: 50%; } | |
| .slds-max-x-small-size_7-of-12, | |
| .slds-max-x-small-size--7-of-12 { | |
| width: 58.333%; } | |
| .slds-max-x-small-size_8-of-12, | |
| .slds-max-x-small-size--8-of-12 { | |
| width: 66.667%; } | |
| .slds-max-x-small-size_9-of-12, | |
| .slds-max-x-small-size--9-of-12 { | |
| width: 75%; } | |
| .slds-max-x-small-size_10-of-12, | |
| .slds-max-x-small-size--10-of-12 { | |
| width: 83.333%; } | |
| .slds-max-x-small-size_11-of-12, | |
| .slds-max-x-small-size--11-of-12 { | |
| width: 91.667%; } | |
| .slds-max-x-small-size_12-of-12, | |
| .slds-max-x-small-size--12-of-12 { | |
| width: 100%; } | |
| .slds-max-x-small-order_1, | |
| .slds-max-x-small-order--1 { | |
| -ms-flex-order: 1; | |
| order: 1; } | |
| .slds-max-x-small-order_2, | |
| .slds-max-x-small-order--2 { | |
| -ms-flex-order: 2; | |
| order: 2; } | |
| .slds-max-x-small-order_3, | |
| .slds-max-x-small-order--3 { | |
| -ms-flex-order: 3; | |
| order: 3; } | |
| .slds-max-x-small-order_4, | |
| .slds-max-x-small-order--4 { | |
| -ms-flex-order: 4; | |
| order: 4; } | |
| .slds-max-x-small-order_5, | |
| .slds-max-x-small-order--5 { | |
| -ms-flex-order: 5; | |
| order: 5; } | |
| .slds-max-x-small-order_6, | |
| .slds-max-x-small-order--6 { | |
| -ms-flex-order: 6; | |
| order: 6; } | |
| .slds-max-x-small-order_7, | |
| .slds-max-x-small-order--7 { | |
| -ms-flex-order: 7; | |
| order: 7; } | |
| .slds-max-x-small-order_8, | |
| .slds-max-x-small-order--8 { | |
| -ms-flex-order: 8; | |
| order: 8; } | |
| .slds-max-x-small-order_9, | |
| .slds-max-x-small-order--9 { | |
| -ms-flex-order: 9; | |
| order: 9; } | |
| .slds-max-x-small-order_10, | |
| .slds-max-x-small-order--10 { | |
| -ms-flex-order: 10; | |
| order: 10; } | |
| .slds-max-x-small-order_11, | |
| .slds-max-x-small-order--11 { | |
| -ms-flex-order: 11; | |
| order: 11; } | |
| .slds-max-x-small-order_12, | |
| .slds-max-x-small-order--12 { | |
| -ms-flex-order: 12; | |
| order: 12; } } | |
| @media (min-width: 30em) { | |
| [class*="slds-small-size_"], | |
| [class*="slds-small-size--"] { | |
| -ms-flex: none; | |
| flex: none; } | |
| .slds-small-size_xxx-small, | |
| .slds-small-size--xxx-small { | |
| width: 3rem; } | |
| .slds-small-size_xx-small, | |
| .slds-small-size--xx-small { | |
| width: 6rem; } | |
| .slds-small-size_x-small, | |
| .slds-small-size--x-small { | |
| width: 12rem; } | |
| .slds-small-size_small, | |
| .slds-small-size--small { | |
| width: 15rem; } | |
| .slds-small-size_medium, | |
| .slds-small-size--medium { | |
| width: 20rem; } | |
| .slds-small-size_large, | |
| .slds-small-size--large { | |
| width: 25rem; } | |
| .slds-small-size_x-large, | |
| .slds-small-size--x-large { | |
| width: 40rem; } | |
| .slds-small-size_xx-large, | |
| .slds-small-size--xx-large { | |
| width: 60rem; } | |
| .slds-small-size_1-of-1, | |
| .slds-small-size--1-of-1 { | |
| width: 100%; } | |
| .slds-small-size_1-of-2, | |
| .slds-small-size--1-of-2 { | |
| width: 50%; } | |
| .slds-small-size_2-of-2, | |
| .slds-small-size--2-of-2 { | |
| width: 100%; } | |
| .slds-small-size_1-of-3, | |
| .slds-small-size--1-of-3 { | |
| width: 33.333%; } | |
| .slds-small-size_2-of-3, | |
| .slds-small-size--2-of-3 { | |
| width: 66.667%; } | |
| .slds-small-size_3-of-3, | |
| .slds-small-size--3-of-3 { | |
| width: 100%; } | |
| .slds-small-size_1-of-4, | |
| .slds-small-size--1-of-4 { | |
| width: 25%; } | |
| .slds-small-size_2-of-4, | |
| .slds-small-size--2-of-4 { | |
| width: 50%; } | |
| .slds-small-size_3-of-4, | |
| .slds-small-size--3-of-4 { | |
| width: 75%; } | |
| .slds-small-size_4-of-4, | |
| .slds-small-size--4-of-4 { | |
| width: 100%; } | |
| .slds-small-size_1-of-5, | |
| .slds-small-size--1-of-5 { | |
| width: 20%; } | |
| .slds-small-size_2-of-5, | |
| .slds-small-size--2-of-5 { | |
| width: 40%; } | |
| .slds-small-size_3-of-5, | |
| .slds-small-size--3-of-5 { | |
| width: 60%; } | |
| .slds-small-size_4-of-5, | |
| .slds-small-size--4-of-5 { | |
| width: 80%; } | |
| .slds-small-size_5-of-5, | |
| .slds-small-size--5-of-5 { | |
| width: 100%; } | |
| .slds-small-size_1-of-6, | |
| .slds-small-size--1-of-6 { | |
| width: 16.667%; } | |
| .slds-small-size_2-of-6, | |
| .slds-small-size--2-of-6 { | |
| width: 33.333%; } | |
| .slds-small-size_3-of-6, | |
| .slds-small-size--3-of-6 { | |
| width: 50%; } | |
| .slds-small-size_4-of-6, | |
| .slds-small-size--4-of-6 { | |
| width: 66.667%; } | |
| .slds-small-size_5-of-6, | |
| .slds-small-size--5-of-6 { | |
| width: 83.333%; } | |
| .slds-small-size_6-of-6, | |
| .slds-small-size--6-of-6 { | |
| width: 100%; } | |
| .slds-small-size_1-of-7, | |
| .slds-small-size--1-of-7 { | |
| width: 14.286%; } | |
| .slds-small-size_2-of-7, | |
| .slds-small-size--2-of-7 { | |
| width: 28.571%; } | |
| .slds-small-size_3-of-7, | |
| .slds-small-size--3-of-7 { | |
| width: 42.857%; } | |
| .slds-small-size_4-of-7, | |
| .slds-small-size--4-of-7 { | |
| width: 57.143%; } | |
| .slds-small-size_5-of-7, | |
| .slds-small-size--5-of-7 { | |
| width: 71.429%; } | |
| .slds-small-size_6-of-7, | |
| .slds-small-size--6-of-7 { | |
| width: 85.714%; } | |
| .slds-small-size_7-of-7, | |
| .slds-small-size--7-of-7 { | |
| width: 100%; } | |
| .slds-small-size_1-of-8, | |
| .slds-small-size--1-of-8 { | |
| width: 12.5%; } | |
| .slds-small-size_2-of-8, | |
| .slds-small-size--2-of-8 { | |
| width: 25%; } | |
| .slds-small-size_3-of-8, | |
| .slds-small-size--3-of-8 { | |
| width: 37.5%; } | |
| .slds-small-size_4-of-8, | |
| .slds-small-size--4-of-8 { | |
| width: 50%; } | |
| .slds-small-size_5-of-8, | |
| .slds-small-size--5-of-8 { | |
| width: 62.5%; } | |
| .slds-small-size_6-of-8, | |
| .slds-small-size--6-of-8 { | |
| width: 75%; } | |
| .slds-small-size_7-of-8, | |
| .slds-small-size--7-of-8 { | |
| width: 87.5%; } | |
| .slds-small-size_8-of-8, | |
| .slds-small-size--8-of-8 { | |
| width: 100%; } | |
| .slds-small-size_1-of-12, | |
| .slds-small-size--1-of-12 { | |
| width: 8.333%; } | |
| .slds-small-size_2-of-12, | |
| .slds-small-size--2-of-12 { | |
| width: 16.667%; } | |
| .slds-small-size_3-of-12, | |
| .slds-small-size--3-of-12 { | |
| width: 25%; } | |
| .slds-small-size_4-of-12, | |
| .slds-small-size--4-of-12 { | |
| width: 33.333%; } | |
| .slds-small-size_5-of-12, | |
| .slds-small-size--5-of-12 { | |
| width: 41.667%; } | |
| .slds-small-size_6-of-12, | |
| .slds-small-size--6-of-12 { | |
| width: 50%; } | |
| .slds-small-size_7-of-12, | |
| .slds-small-size--7-of-12 { | |
| width: 58.333%; } | |
| .slds-small-size_8-of-12, | |
| .slds-small-size--8-of-12 { | |
| width: 66.667%; } | |
| .slds-small-size_9-of-12, | |
| .slds-small-size--9-of-12 { | |
| width: 75%; } | |
| .slds-small-size_10-of-12, | |
| .slds-small-size--10-of-12 { | |
| width: 83.333%; } | |
| .slds-small-size_11-of-12, | |
| .slds-small-size--11-of-12 { | |
| width: 91.667%; } | |
| .slds-small-size_12-of-12, | |
| .slds-small-size--12-of-12 { | |
| width: 100%; } | |
| .slds-small-order_1, | |
| .slds-small-order--1 { | |
| -ms-flex-order: 1; | |
| order: 1; } | |
| .slds-small-order_2, | |
| .slds-small-order--2 { | |
| -ms-flex-order: 2; | |
| order: 2; } | |
| .slds-small-order_3, | |
| .slds-small-order--3 { | |
| -ms-flex-order: 3; | |
| order: 3; } | |
| .slds-small-order_4, | |
| .slds-small-order--4 { | |
| -ms-flex-order: 4; | |
| order: 4; } | |
| .slds-small-order_5, | |
| .slds-small-order--5 { | |
| -ms-flex-order: 5; | |
| order: 5; } | |
| .slds-small-order_6, | |
| .slds-small-order--6 { | |
| -ms-flex-order: 6; | |
| order: 6; } | |
| .slds-small-order_7, | |
| .slds-small-order--7 { | |
| -ms-flex-order: 7; | |
| order: 7; } | |
| .slds-small-order_8, | |
| .slds-small-order--8 { | |
| -ms-flex-order: 8; | |
| order: 8; } | |
| .slds-small-order_9, | |
| .slds-small-order--9 { | |
| -ms-flex-order: 9; | |
| order: 9; } | |
| .slds-small-order_10, | |
| .slds-small-order--10 { | |
| -ms-flex-order: 10; | |
| order: 10; } | |
| .slds-small-order_11, | |
| .slds-small-order--11 { | |
| -ms-flex-order: 11; | |
| order: 11; } | |
| .slds-small-order_12, | |
| .slds-small-order--12 { | |
| -ms-flex-order: 12; | |
| order: 12; } } | |
| @media (max-width: 30em) { | |
| [class*="slds-max-small-size_"], | |
| [class*="slds-max-small-size--"] { | |
| -ms-flex: none; | |
| flex: none; } | |
| .slds-max-small-size_xxx-small, | |
| .slds-max-small-size--xxx-small { | |
| width: 3rem; } | |
| .slds-max-small-size_xx-small, | |
| .slds-max-small-size--xx-small { | |
| width: 6rem; } | |
| .slds-max-small-size_x-small, | |
| .slds-max-small-size--x-small { | |
| width: 12rem; } | |
| .slds-max-small-size_small, | |
| .slds-max-small-size--small { | |
| width: 15rem; } | |
| .slds-max-small-size_medium, | |
| .slds-max-small-size--medium { | |
| width: 20rem; } | |
| .slds-max-small-size_large, | |
| .slds-max-small-size--large { | |
| width: 25rem; } | |
| .slds-max-small-size_x-large, | |
| .slds-max-small-size--x-large { | |
| width: 40rem; } | |
| .slds-max-small-size_xx-large, | |
| .slds-max-small-size--xx-large { | |
| width: 60rem; } | |
| .slds-max-small-size_1-of-1, | |
| .slds-max-small-size--1-of-1 { | |
| width: 100%; } | |
| .slds-max-small-size_1-of-2, | |
| .slds-max-small-size--1-of-2 { | |
| width: 50%; } | |
| .slds-max-small-size_2-of-2, | |
| .slds-max-small-size--2-of-2 { | |
| width: 100%; } | |
| .slds-max-small-size_1-of-3, | |
| .slds-max-small-size--1-of-3 { | |
| width: 33.333%; } | |
| .slds-max-small-size_2-of-3, | |
| .slds-max-small-size--2-of-3 { | |
| width: 66.667%; } | |
| .slds-max-small-size_3-of-3, | |
| .slds-max-small-size--3-of-3 { | |
| width: 100%; } | |
| .slds-max-small-size_1-of-4, | |
| .slds-max-small-size--1-of-4 { | |
| width: 25%; } | |
| .slds-max-small-size_2-of-4, | |
| .slds-max-small-size--2-of-4 { | |
| width: 50%; } | |
| .slds-max-small-size_3-of-4, | |
| .slds-max-small-size--3-of-4 { | |
| width: 75%; } | |
| .slds-max-small-size_4-of-4, | |
| .slds-max-small-size--4-of-4 { | |
| width: 100%; } | |
| .slds-max-small-size_1-of-5, | |
| .slds-max-small-size--1-of-5 { | |
| width: 20%; } | |
| .slds-max-small-size_2-of-5, | |
| .slds-max-small-size--2-of-5 { | |
| width: 40%; } | |
| .slds-max-small-size_3-of-5, | |
| .slds-max-small-size--3-of-5 { | |
| width: 60%; } | |
| .slds-max-small-size_4-of-5, | |
| .slds-max-small-size--4-of-5 { | |
| width: 80%; } | |
| .slds-max-small-size_5-of-5, | |
| .slds-max-small-size--5-of-5 { | |
| width: 100%; } | |
| .slds-max-small-size_1-of-6, | |
| .slds-max-small-size--1-of-6 { | |
| width: 16.667%; } | |
| .slds-max-small-size_2-of-6, | |
| .slds-max-small-size--2-of-6 { | |
| width: 33.333%; } | |
| .slds-max-small-size_3-of-6, | |
| .slds-max-small-size--3-of-6 { | |
| width: 50%; } | |
| .slds-max-small-size_4-of-6, | |
| .slds-max-small-size--4-of-6 { | |
| width: 66.667%; } | |
| .slds-max-small-size_5-of-6, | |
| .slds-max-small-size--5-of-6 { | |
| width: 83.333%; } | |
| .slds-max-small-size_6-of-6, | |
| .slds-max-small-size--6-of-6 { | |
| width: 100%; } | |
| .slds-max-small-size_1-of-7, | |
| .slds-max-small-size--1-of-7 { | |
| width: 14.286%; } | |
| .slds-max-small-size_2-of-7, | |
| .slds-max-small-size--2-of-7 { | |
| width: 28.571%; } | |
| .slds-max-small-size_3-of-7, | |
| .slds-max-small-size--3-of-7 { | |
| width: 42.857%; } | |
| .slds-max-small-size_4-of-7, | |
| .slds-max-small-size--4-of-7 { | |
| width: 57.143%; } | |
| .slds-max-small-size_5-of-7, | |
| .slds-max-small-size--5-of-7 { | |
| width: 71.429%; } | |
| .slds-max-small-size_6-of-7, | |
| .slds-max-small-size--6-of-7 { | |
| width: 85.714%; } | |
| .slds-max-small-size_7-of-7, | |
| .slds-max-small-size--7-of-7 { | |
| width: 100%; } | |
| .slds-max-small-size_1-of-8, | |
| .slds-max-small-size--1-of-8 { | |
| width: 12.5%; } | |
| .slds-max-small-size_2-of-8, | |
| .slds-max-small-size--2-of-8 { | |
| width: 25%; } | |
| .slds-max-small-size_3-of-8, | |
| .slds-max-small-size--3-of-8 { | |
| width: 37.5%; } | |
| .slds-max-small-size_4-of-8, | |
| .slds-max-small-size--4-of-8 { | |
| width: 50%; } | |
| .slds-max-small-size_5-of-8, | |
| .slds-max-small-size--5-of-8 { | |
| width: 62.5%; } | |
| .slds-max-small-size_6-of-8, | |
| .slds-max-small-size--6-of-8 { | |
| width: 75%; } | |
| .slds-max-small-size_7-of-8, | |
| .slds-max-small-size--7-of-8 { | |
| width: 87.5%; } | |
| .slds-max-small-size_8-of-8, | |
| .slds-max-small-size--8-of-8 { | |
| width: 100%; } | |
| .slds-max-small-size_1-of-12, | |
| .slds-max-small-size--1-of-12 { | |
| width: 8.333%; } | |
| .slds-max-small-size_2-of-12, | |
| .slds-max-small-size--2-of-12 { | |
| width: 16.667%; } | |
| .slds-max-small-size_3-of-12, | |
| .slds-max-small-size--3-of-12 { | |
| width: 25%; } | |
| .slds-max-small-size_4-of-12, | |
| .slds-max-small-size--4-of-12 { | |
| width: 33.333%; } | |
| .slds-max-small-size_5-of-12, | |
| .slds-max-small-size--5-of-12 { | |
| width: 41.667%; } | |
| .slds-max-small-size_6-of-12, | |
| .slds-max-small-size--6-of-12 { | |
| width: 50%; } | |
| .slds-max-small-size_7-of-12, | |
| .slds-max-small-size--7-of-12 { | |
| width: 58.333%; } | |
| .slds-max-small-size_8-of-12, | |
| .slds-max-small-size--8-of-12 { | |
| width: 66.667%; } | |
| .slds-max-small-size_9-of-12, | |
| .slds-max-small-size--9-of-12 { | |
| width: 75%; } | |
| .slds-max-small-size_10-of-12, | |
| .slds-max-small-size--10-of-12 { | |
| width: 83.333%; } | |
| .slds-max-small-size_11-of-12, | |
| .slds-max-small-size--11-of-12 { | |
| width: 91.667%; } | |
| .slds-max-small-size_12-of-12, | |
| .slds-max-small-size--12-of-12 { | |
| width: 100%; } | |
| .slds-max-small-order_1, | |
| .slds-max-small-order--1 { | |
| -ms-flex-order: 1; | |
| order: 1; } | |
| .slds-max-small-order_2, | |
| .slds-max-small-order--2 { | |
| -ms-flex-order: 2; | |
| order: 2; } | |
| .slds-max-small-order_3, | |
| .slds-max-small-order--3 { | |
| -ms-flex-order: 3; | |
| order: 3; } | |
| .slds-max-small-order_4, | |
| .slds-max-small-order--4 { | |
| -ms-flex-order: 4; | |
| order: 4; } | |
| .slds-max-small-order_5, | |
| .slds-max-small-order--5 { | |
| -ms-flex-order: 5; | |
| order: 5; } | |
| .slds-max-small-order_6, | |
| .slds-max-small-order--6 { | |
| -ms-flex-order: 6; | |
| order: 6; } | |
| .slds-max-small-order_7, | |
| .slds-max-small-order--7 { | |
| -ms-flex-order: 7; | |
| order: 7; } | |
| .slds-max-small-order_8, | |
| .slds-max-small-order--8 { | |
| -ms-flex-order: 8; | |
| order: 8; } | |
| .slds-max-small-order_9, | |
| .slds-max-small-order--9 { | |
| -ms-flex-order: 9; | |
| order: 9; } | |
| .slds-max-small-order_10, | |
| .slds-max-small-order--10 { | |
| -ms-flex-order: 10; | |
| order: 10; } | |
| .slds-max-small-order_11, | |
| .slds-max-small-order--11 { | |
| -ms-flex-order: 11; | |
| order: 11; } | |
| .slds-max-small-order_12, | |
| .slds-max-small-order--12 { | |
| -ms-flex-order: 12; | |
| order: 12; } } | |
| @media (min-width: 48em) { | |
| [class*="slds-medium-size_"], | |
| [class*="slds-medium-size--"] { | |
| -ms-flex: none; | |
| flex: none; } | |
| .slds-medium-size_xxx-small, | |
| .slds-medium-size--xxx-small { | |
| width: 3rem; } | |
| .slds-medium-size_xx-small, | |
| .slds-medium-size--xx-small { | |
| width: 6rem; } | |
| .slds-medium-size_x-small, | |
| .slds-medium-size--x-small { | |
| width: 12rem; } | |
| .slds-medium-size_small, | |
| .slds-medium-size--small { | |
| width: 15rem; } | |
| .slds-medium-size_medium, | |
| .slds-medium-size--medium { | |
| width: 20rem; } | |
| .slds-medium-size_large, | |
| .slds-medium-size--large { | |
| width: 25rem; } | |
| .slds-medium-size_x-large, | |
| .slds-medium-size--x-large { | |
| width: 40rem; } | |
| .slds-medium-size_xx-large, | |
| .slds-medium-size--xx-large { | |
| width: 60rem; } | |
| .slds-medium-size_1-of-1, | |
| .slds-medium-size--1-of-1 { | |
| width: 100%; } | |
| .slds-medium-size_1-of-2, | |
| .slds-medium-size--1-of-2 { | |
| width: 50%; } | |
| .slds-medium-size_2-of-2, | |
| .slds-medium-size--2-of-2 { | |
| width: 100%; } | |
| .slds-medium-size_1-of-3, | |
| .slds-medium-size--1-of-3 { | |
| width: 33.333%; } | |
| .slds-medium-size_2-of-3, | |
| .slds-medium-size--2-of-3 { | |
| width: 66.667%; } | |
| .slds-medium-size_3-of-3, | |
| .slds-medium-size--3-of-3 { | |
| width: 100%; } | |
| .slds-medium-size_1-of-4, | |
| .slds-medium-size--1-of-4 { | |
| width: 25%; } | |
| .slds-medium-size_2-of-4, | |
| .slds-medium-size--2-of-4 { | |
| width: 50%; } | |
| .slds-medium-size_3-of-4, | |
| .slds-medium-size--3-of-4 { | |
| width: 75%; } | |
| .slds-medium-size_4-of-4, | |
| .slds-medium-size--4-of-4 { | |
| width: 100%; } | |
| .slds-medium-size_1-of-5, | |
| .slds-medium-size--1-of-5 { | |
| width: 20%; } | |
| .slds-medium-size_2-of-5, | |
| .slds-medium-size--2-of-5 { | |
| width: 40%; } | |
| .slds-medium-size_3-of-5, | |
| .slds-medium-size--3-of-5 { | |
| width: 60%; } | |
| .slds-medium-size_4-of-5, | |
| .slds-medium-size--4-of-5 { | |
| width: 80%; } | |
| .slds-medium-size_5-of-5, | |
| .slds-medium-size--5-of-5 { | |
| width: 100%; } | |
| .slds-medium-size_1-of-6, | |
| .slds-medium-size--1-of-6 { | |
| width: 16.667%; } | |
| .slds-medium-size_2-of-6, | |
| .slds-medium-size--2-of-6 { | |
| width: 33.333%; } | |
| .slds-medium-size_3-of-6, | |
| .slds-medium-size--3-of-6 { | |
| width: 50%; } | |
| .slds-medium-size_4-of-6, | |
| .slds-medium-size--4-of-6 { | |
| width: 66.667%; } | |
| .slds-medium-size_5-of-6, | |
| .slds-medium-size--5-of-6 { | |
| width: 83.333%; } | |
| .slds-medium-size_6-of-6, | |
| .slds-medium-size--6-of-6 { | |
| width: 100%; } | |
| .slds-medium-size_1-of-7, | |
| .slds-medium-size--1-of-7 { | |
| width: 14.286%; } | |
| .slds-medium-size_2-of-7, | |
| .slds-medium-size--2-of-7 { | |
| width: 28.571%; } | |
| .slds-medium-size_3-of-7, | |
| .slds-medium-size--3-of-7 { | |
| width: 42.857%; } | |
| .slds-medium-size_4-of-7, | |
| .slds-medium-size--4-of-7 { | |
| width: 57.143%; } | |
| .slds-medium-size_5-of-7, | |
| .slds-medium-size--5-of-7 { | |
| width: 71.429%; } | |
| .slds-medium-size_6-of-7, | |
| .slds-medium-size--6-of-7 { | |
| width: 85.714%; } | |
| .slds-medium-size_7-of-7, | |
| .slds-medium-size--7-of-7 { | |
| width: 100%; } | |
| .slds-medium-size_1-of-8, | |
| .slds-medium-size--1-of-8 { | |
| width: 12.5%; } | |
| .slds-medium-size_2-of-8, | |
| .slds-medium-size--2-of-8 { | |
| width: 25%; } | |
| .slds-medium-size_3-of-8, | |
| .slds-medium-size--3-of-8 { | |
| width: 37.5%; } | |
| .slds-medium-size_4-of-8, | |
| .slds-medium-size--4-of-8 { | |
| width: 50%; } | |
| .slds-medium-size_5-of-8, | |
| .slds-medium-size--5-of-8 { | |
| width: 62.5%; } | |
| .slds-medium-size_6-of-8, | |
| .slds-medium-size--6-of-8 { | |
| width: 75%; } | |
| .slds-medium-size_7-of-8, | |
| .slds-medium-size--7-of-8 { | |
| width: 87.5%; } | |
| .slds-medium-size_8-of-8, | |
| .slds-medium-size--8-of-8 { | |
| width: 100%; } | |
| .slds-medium-size_1-of-12, | |
| .slds-medium-size--1-of-12 { | |
| width: 8.333%; } | |
| .slds-medium-size_2-of-12, | |
| .slds-medium-size--2-of-12 { | |
| width: 16.667%; } | |
| .slds-medium-size_3-of-12, | |
| .slds-medium-size--3-of-12 { | |
| width: 25%; } | |
| .slds-medium-size_4-of-12, | |
| .slds-medium-size--4-of-12 { | |
| width: 33.333%; } | |
| .slds-medium-size_5-of-12, | |
| .slds-medium-size--5-of-12 { | |
| width: 41.667%; } | |
| .slds-medium-size_6-of-12, | |
| .slds-medium-size--6-of-12 { | |
| width: 50%; } | |
| .slds-medium-size_7-of-12, | |
| .slds-medium-size--7-of-12 { | |
| width: 58.333%; } | |
| .slds-medium-size_8-of-12, | |
| .slds-medium-size--8-of-12 { | |
| width: 66.667%; } | |
| .slds-medium-size_9-of-12, | |
| .slds-medium-size--9-of-12 { | |
| width: 75%; } | |
| .slds-medium-size_10-of-12, | |
| .slds-medium-size--10-of-12 { | |
| width: 83.333%; } | |
| .slds-medium-size_11-of-12, | |
| .slds-medium-size--11-of-12 { | |
| width: 91.667%; } | |
| .slds-medium-size_12-of-12, | |
| .slds-medium-size--12-of-12 { | |
| width: 100%; } | |
| .slds-medium-order_1, | |
| .slds-medium-order--1 { | |
| -ms-flex-order: 1; | |
| order: 1; } | |
| .slds-medium-order_2, | |
| .slds-medium-order--2 { | |
| -ms-flex-order: 2; | |
| order: 2; } | |
| .slds-medium-order_3, | |
| .slds-medium-order--3 { | |
| -ms-flex-order: 3; | |
| order: 3; } | |
| .slds-medium-order_4, | |
| .slds-medium-order--4 { | |
| -ms-flex-order: 4; | |
| order: 4; } | |
| .slds-medium-order_5, | |
| .slds-medium-order--5 { | |
| -ms-flex-order: 5; | |
| order: 5; } | |
| .slds-medium-order_6, | |
| .slds-medium-order--6 { | |
| -ms-flex-order: 6; | |
| order: 6; } | |
| .slds-medium-order_7, | |
| .slds-medium-order--7 { | |
| -ms-flex-order: 7; | |
| order: 7; } | |
| .slds-medium-order_8, | |
| .slds-medium-order--8 { | |
| -ms-flex-order: 8; | |
| order: 8; } | |
| .slds-medium-order_9, | |
| .slds-medium-order--9 { | |
| -ms-flex-order: 9; | |
| order: 9; } | |
| .slds-medium-order_10, | |
| .slds-medium-order--10 { | |
| -ms-flex-order: 10; | |
| order: 10; } | |
| .slds-medium-order_11, | |
| .slds-medium-order--11 { | |
| -ms-flex-order: 11; | |
| order: 11; } | |
| .slds-medium-order_12, | |
| .slds-medium-order--12 { | |
| -ms-flex-order: 12; | |
| order: 12; } } | |
| @media (max-width: 48em) { | |
| [class*="slds-max-medium-size_"], | |
| [class*="slds-max-medium-size--"] { | |
| -ms-flex: none; | |
| flex: none; } | |
| .slds-max-medium-size_xxx-small, | |
| .slds-max-medium-size--xxx-small { | |
| width: 3rem; } | |
| .slds-max-medium-size_xx-small, | |
| .slds-max-medium-size--xx-small { | |
| width: 6rem; } | |
| .slds-max-medium-size_x-small, | |
| .slds-max-medium-size--x-small { | |
| width: 12rem; } | |
| .slds-max-medium-size_small, | |
| .slds-max-medium-size--small { | |
| width: 15rem; } | |
| .slds-max-medium-size_medium, | |
| .slds-max-medium-size--medium { | |
| width: 20rem; } | |
| .slds-max-medium-size_large, | |
| .slds-max-medium-size--large { | |
| width: 25rem; } | |
| .slds-max-medium-size_x-large, | |
| .slds-max-medium-size--x-large { | |
| width: 40rem; } | |
| .slds-max-medium-size_xx-large, | |
| .slds-max-medium-size--xx-large { | |
| width: 60rem; } | |
| .slds-max-medium-size_1-of-1, | |
| .slds-max-medium-size--1-of-1 { | |
| width: 100%; } | |
| .slds-max-medium-size_1-of-2, | |
| .slds-max-medium-size--1-of-2 { | |
| width: 50%; } | |
| .slds-max-medium-size_2-of-2, | |
| .slds-max-medium-size--2-of-2 { | |
| width: 100%; } | |
| .slds-max-medium-size_1-of-3, | |
| .slds-max-medium-size--1-of-3 { | |
| width: 33.333%; } | |
| .slds-max-medium-size_2-of-3, | |
| .slds-max-medium-size--2-of-3 { | |
| width: 66.667%; } | |
| .slds-max-medium-size_3-of-3, | |
| .slds-max-medium-size--3-of-3 { | |
| width: 100%; } | |
| .slds-max-medium-size_1-of-4, | |
| .slds-max-medium-size--1-of-4 { | |
| width: 25%; } | |
| .slds-max-medium-size_2-of-4, | |
| .slds-max-medium-size--2-of-4 { | |
| width: 50%; } | |
| .slds-max-medium-size_3-of-4, | |
| .slds-max-medium-size--3-of-4 { | |
| width: 75%; } | |
| .slds-max-medium-size_4-of-4, | |
| .slds-max-medium-size--4-of-4 { | |
| width: 100%; } | |
| .slds-max-medium-size_1-of-5, | |
| .slds-max-medium-size--1-of-5 { | |
| width: 20%; } | |
| .slds-max-medium-size_2-of-5, | |
| .slds-max-medium-size--2-of-5 { | |
| width: 40%; } | |
| .slds-max-medium-size_3-of-5, | |
| .slds-max-medium-size--3-of-5 { | |
| width: 60%; } | |
| .slds-max-medium-size_4-of-5, | |
| .slds-max-medium-size--4-of-5 { | |
| width: 80%; } | |
| .slds-max-medium-size_5-of-5, | |
| .slds-max-medium-size--5-of-5 { | |
| width: 100%; } | |
| .slds-max-medium-size_1-of-6, | |
| .slds-max-medium-size--1-of-6 { | |
| width: 16.667%; } | |
| .slds-max-medium-size_2-of-6, | |
| .slds-max-medium-size--2-of-6 { | |
| width: 33.333%; } | |
| .slds-max-medium-size_3-of-6, | |
| .slds-max-medium-size--3-of-6 { | |
| width: 50%; } | |
| .slds-max-medium-size_4-of-6, | |
| .slds-max-medium-size--4-of-6 { | |
| width: 66.667%; } | |
| .slds-max-medium-size_5-of-6, | |
| .slds-max-medium-size--5-of-6 { | |
| width: 83.333%; } | |
| .slds-max-medium-size_6-of-6, | |
| .slds-max-medium-size--6-of-6 { | |
| width: 100%; } | |
| .slds-max-medium-size_1-of-7, | |
| .slds-max-medium-size--1-of-7 { | |
| width: 14.286%; } | |
| .slds-max-medium-size_2-of-7, | |
| .slds-max-medium-size--2-of-7 { | |
| width: 28.571%; } | |
| .slds-max-medium-size_3-of-7, | |
| .slds-max-medium-size--3-of-7 { | |
| width: 42.857%; } | |
| .slds-max-medium-size_4-of-7, | |
| .slds-max-medium-size--4-of-7 { | |
| width: 57.143%; } | |
| .slds-max-medium-size_5-of-7, | |
| .slds-max-medium-size--5-of-7 { | |
| width: 71.429%; } | |
| .slds-max-medium-size_6-of-7, | |
| .slds-max-medium-size--6-of-7 { | |
| width: 85.714%; } | |
| .slds-max-medium-size_7-of-7, | |
| .slds-max-medium-size--7-of-7 { | |
| width: 100%; } | |
| .slds-max-medium-size_1-of-8, | |
| .slds-max-medium-size--1-of-8 { | |
| width: 12.5%; } | |
| .slds-max-medium-size_2-of-8, | |
| .slds-max-medium-size--2-of-8 { | |
| width: 25%; } | |
| .slds-max-medium-size_3-of-8, | |
| .slds-max-medium-size--3-of-8 { | |
| width: 37.5%; } | |
| .slds-max-medium-size_4-of-8, | |
| .slds-max-medium-size--4-of-8 { | |
| width: 50%; } | |
| .slds-max-medium-size_5-of-8, | |
| .slds-max-medium-size--5-of-8 { | |
| width: 62.5%; } | |
| .slds-max-medium-size_6-of-8, | |
| .slds-max-medium-size--6-of-8 { | |
| width: 75%; } | |
| .slds-max-medium-size_7-of-8, | |
| .slds-max-medium-size--7-of-8 { | |
| width: 87.5%; } | |
| .slds-max-medium-size_8-of-8, | |
| .slds-max-medium-size--8-of-8 { | |
| width: 100%; } | |
| .slds-max-medium-size_1-of-12, | |
| .slds-max-medium-size--1-of-12 { | |
| width: 8.333%; } | |
| .slds-max-medium-size_2-of-12, | |
| .slds-max-medium-size--2-of-12 { | |
| width: 16.667%; } | |
| .slds-max-medium-size_3-of-12, | |
| .slds-max-medium-size--3-of-12 { | |
| width: 25%; } | |
| .slds-max-medium-size_4-of-12, | |
| .slds-max-medium-size--4-of-12 { | |
| width: 33.333%; } | |
| .slds-max-medium-size_5-of-12, | |
| .slds-max-medium-size--5-of-12 { | |
| width: 41.667%; } | |
| .slds-max-medium-size_6-of-12, | |
| .slds-max-medium-size--6-of-12 { | |
| width: 50%; } | |
| .slds-max-medium-size_7-of-12, | |
| .slds-max-medium-size--7-of-12 { | |
| width: 58.333%; } | |
| .slds-max-medium-size_8-of-12, | |
| .slds-max-medium-size--8-of-12 { | |
| width: 66.667%; } | |
| .slds-max-medium-size_9-of-12, | |
| .slds-max-medium-size--9-of-12 { | |
| width: 75%; } | |
| .slds-max-medium-size_10-of-12, | |
| .slds-max-medium-size--10-of-12 { | |
| width: 83.333%; } | |
| .slds-max-medium-size_11-of-12, | |
| .slds-max-medium-size--11-of-12 { | |
| width: 91.667%; } | |
| .slds-max-medium-size_12-of-12, | |
| .slds-max-medium-size--12-of-12 { | |
| width: 100%; } | |
| .slds-max-medium-order_1, | |
| .slds-max-medium-order--1 { | |
| -ms-flex-order: 1; | |
| order: 1; } | |
| .slds-max-medium-order_2, | |
| .slds-max-medium-order--2 { | |
| -ms-flex-order: 2; | |
| order: 2; } | |
| .slds-max-medium-order_3, | |
| .slds-max-medium-order--3 { | |
| -ms-flex-order: 3; | |
| order: 3; } | |
| .slds-max-medium-order_4, | |
| .slds-max-medium-order--4 { | |
| -ms-flex-order: 4; | |
| order: 4; } | |
| .slds-max-medium-order_5, | |
| .slds-max-medium-order--5 { | |
| -ms-flex-order: 5; | |
| order: 5; } | |
| .slds-max-medium-order_6, | |
| .slds-max-medium-order--6 { | |
| -ms-flex-order: 6; | |
| order: 6; } | |
| .slds-max-medium-order_7, | |
| .slds-max-medium-order--7 { | |
| -ms-flex-order: 7; | |
| order: 7; } | |
| .slds-max-medium-order_8, | |
| .slds-max-medium-order--8 { | |
| -ms-flex-order: 8; | |
| order: 8; } | |
| .slds-max-medium-order_9, | |
| .slds-max-medium-order--9 { | |
| -ms-flex-order: 9; | |
| order: 9; } | |
| .slds-max-medium-order_10, | |
| .slds-max-medium-order--10 { | |
| -ms-flex-order: 10; | |
| order: 10; } | |
| .slds-max-medium-order_11, | |
| .slds-max-medium-order--11 { | |
| -ms-flex-order: 11; | |
| order: 11; } | |
| .slds-max-medium-order_12, | |
| .slds-max-medium-order--12 { | |
| -ms-flex-order: 12; | |
| order: 12; } } | |
| @media (min-width: 64em) { | |
| [class*="slds-large-size_"], | |
| [class*="slds-large-size--"] { | |
| -ms-flex: none; | |
| flex: none; } | |
| .slds-large-size_xxx-small, | |
| .slds-large-size--xxx-small { | |
| width: 3rem; } | |
| .slds-large-size_xx-small, | |
| .slds-large-size--xx-small { | |
| width: 6rem; } | |
| .slds-large-size_x-small, | |
| .slds-large-size--x-small { | |
| width: 12rem; } | |
| .slds-large-size_small, | |
| .slds-large-size--small { | |
| width: 15rem; } | |
| .slds-large-size_medium, | |
| .slds-large-size--medium { | |
| width: 20rem; } | |
| .slds-large-size_large, | |
| .slds-large-size--large { | |
| width: 25rem; } | |
| .slds-large-size_x-large, | |
| .slds-large-size--x-large { | |
| width: 40rem; } | |
| .slds-large-size_xx-large, | |
| .slds-large-size--xx-large { | |
| width: 60rem; } | |
| .slds-large-size_1-of-1, | |
| .slds-large-size--1-of-1 { | |
| width: 100%; } | |
| .slds-large-size_1-of-2, | |
| .slds-large-size--1-of-2 { | |
| width: 50%; } | |
| .slds-large-size_2-of-2, | |
| .slds-large-size--2-of-2 { | |
| width: 100%; } | |
| .slds-large-size_1-of-3, | |
| .slds-large-size--1-of-3 { | |
| width: 33.333%; } | |
| .slds-large-size_2-of-3, | |
| .slds-large-size--2-of-3 { | |
| width: 66.667%; } | |
| .slds-large-size_3-of-3, | |
| .slds-large-size--3-of-3 { | |
| width: 100%; } | |
| .slds-large-size_1-of-4, | |
| .slds-large-size--1-of-4 { | |
| width: 25%; } | |
| .slds-large-size_2-of-4, | |
| .slds-large-size--2-of-4 { | |
| width: 50%; } | |
| .slds-large-size_3-of-4, | |
| .slds-large-size--3-of-4 { | |
| width: 75%; } | |
| .slds-large-size_4-of-4, | |
| .slds-large-size--4-of-4 { | |
| width: 100%; } | |
| .slds-large-size_1-of-5, | |
| .slds-large-size--1-of-5 { | |
| width: 20%; } | |
| .slds-large-size_2-of-5, | |
| .slds-large-size--2-of-5 { | |
| width: 40%; } | |
| .slds-large-size_3-of-5, | |
| .slds-large-size--3-of-5 { | |
| width: 60%; } | |
| .slds-large-size_4-of-5, | |
| .slds-large-size--4-of-5 { | |
| width: 80%; } | |
| .slds-large-size_5-of-5, | |
| .slds-large-size--5-of-5 { | |
| width: 100%; } | |
| .slds-large-size_1-of-6, | |
| .slds-large-size--1-of-6 { | |
| width: 16.667%; } | |
| .slds-large-size_2-of-6, | |
| .slds-large-size--2-of-6 { | |
| width: 33.333%; } | |
| .slds-large-size_3-of-6, | |
| .slds-large-size--3-of-6 { | |
| width: 50%; } | |
| .slds-large-size_4-of-6, | |
| .slds-large-size--4-of-6 { | |
| width: 66.667%; } | |
| .slds-large-size_5-of-6, | |
| .slds-large-size--5-of-6 { | |
| width: 83.333%; } | |
| .slds-large-size_6-of-6, | |
| .slds-large-size--6-of-6 { | |
| width: 100%; } | |
| .slds-large-size_1-of-7, | |
| .slds-large-size--1-of-7 { | |
| width: 14.286%; } | |
| .slds-large-size_2-of-7, | |
| .slds-large-size--2-of-7 { | |
| width: 28.571%; } | |
| .slds-large-size_3-of-7, | |
| .slds-large-size--3-of-7 { | |
| width: 42.857%; } | |
| .slds-large-size_4-of-7, | |
| .slds-large-size--4-of-7 { | |
| width: 57.143%; } | |
| .slds-large-size_5-of-7, | |
| .slds-large-size--5-of-7 { | |
| width: 71.429%; } | |
| .slds-large-size_6-of-7, | |
| .slds-large-size--6-of-7 { | |
| width: 85.714%; } | |
| .slds-large-size_7-of-7, | |
| .slds-large-size--7-of-7 { | |
| width: 100%; } | |
| .slds-large-size_1-of-8, | |
| .slds-large-size--1-of-8 { | |
| width: 12.5%; } | |
| .slds-large-size_2-of-8, | |
| .slds-large-size--2-of-8 { | |
| width: 25%; } | |
| .slds-large-size_3-of-8, | |
| .slds-large-size--3-of-8 { | |
| width: 37.5%; } | |
| .slds-large-size_4-of-8, | |
| .slds-large-size--4-of-8 { | |
| width: 50%; } | |
| .slds-large-size_5-of-8, | |
| .slds-large-size--5-of-8 { | |
| width: 62.5%; } | |
| .slds-large-size_6-of-8, | |
| .slds-large-size--6-of-8 { | |
| width: 75%; } | |
| .slds-large-size_7-of-8, | |
| .slds-large-size--7-of-8 { | |
| width: 87.5%; } | |
| .slds-large-size_8-of-8, | |
| .slds-large-size--8-of-8 { | |
| width: 100%; } | |
| .slds-large-size_1-of-12, | |
| .slds-large-size--1-of-12 { | |
| width: 8.333%; } | |
| .slds-large-size_2-of-12, | |
| .slds-large-size--2-of-12 { | |
| width: 16.667%; } | |
| .slds-large-size_3-of-12, | |
| .slds-large-size--3-of-12 { | |
| width: 25%; } | |
| .slds-large-size_4-of-12, | |
| .slds-large-size--4-of-12 { | |
| width: 33.333%; } | |
| .slds-large-size_5-of-12, | |
| .slds-large-size--5-of-12 { | |
| width: 41.667%; } | |
| .slds-large-size_6-of-12, | |
| .slds-large-size--6-of-12 { | |
| width: 50%; } | |
| .slds-large-size_7-of-12, | |
| .slds-large-size--7-of-12 { | |
| width: 58.333%; } | |
| .slds-large-size_8-of-12, | |
| .slds-large-size--8-of-12 { | |
| width: 66.667%; } | |
| .slds-large-size_9-of-12, | |
| .slds-large-size--9-of-12 { | |
| width: 75%; } | |
| .slds-large-size_10-of-12, | |
| .slds-large-size--10-of-12 { | |
| width: 83.333%; } | |
| .slds-large-size_11-of-12, | |
| .slds-large-size--11-of-12 { | |
| width: 91.667%; } | |
| .slds-large-size_12-of-12, | |
| .slds-large-size--12-of-12 { | |
| width: 100%; } | |
| .slds-large-order_1, | |
| .slds-large-order--1 { | |
| -ms-flex-order: 1; | |
| order: 1; } | |
| .slds-large-order_2, | |
| .slds-large-order--2 { | |
| -ms-flex-order: 2; | |
| order: 2; } | |
| .slds-large-order_3, | |
| .slds-large-order--3 { | |
| -ms-flex-order: 3; | |
| order: 3; } | |
| .slds-large-order_4, | |
| .slds-large-order--4 { | |
| -ms-flex-order: 4; | |
| order: 4; } | |
| .slds-large-order_5, | |
| .slds-large-order--5 { | |
| -ms-flex-order: 5; | |
| order: 5; } | |
| .slds-large-order_6, | |
| .slds-large-order--6 { | |
| -ms-flex-order: 6; | |
| order: 6; } | |
| .slds-large-order_7, | |
| .slds-large-order--7 { | |
| -ms-flex-order: 7; | |
| order: 7; } | |
| .slds-large-order_8, | |
| .slds-large-order--8 { | |
| -ms-flex-order: 8; | |
| order: 8; } | |
| .slds-large-order_9, | |
| .slds-large-order--9 { | |
| -ms-flex-order: 9; | |
| order: 9; } | |
| .slds-large-order_10, | |
| .slds-large-order--10 { | |
| -ms-flex-order: 10; | |
| order: 10; } | |
| .slds-large-order_11, | |
| .slds-large-order--11 { | |
| -ms-flex-order: 11; | |
| order: 11; } | |
| .slds-large-order_12, | |
| .slds-large-order--12 { | |
| -ms-flex-order: 12; | |
| order: 12; } } | |
| @media (max-width: 64em) { | |
| [class*="slds-max-large-size_"], | |
| [class*="slds-max-large-size--"] { | |
| -ms-flex: none; | |
| flex: none; } | |
| .slds-max-large-size_xxx-small, | |
| .slds-max-large-size--xxx-small { | |
| width: 3rem; } | |
| .slds-max-large-size_xx-small, | |
| .slds-max-large-size--xx-small { | |
| width: 6rem; } | |
| .slds-max-large-size_x-small, | |
| .slds-max-large-size--x-small { | |
| width: 12rem; } | |
| .slds-max-large-size_small, | |
| .slds-max-large-size--small { | |
| width: 15rem; } | |
| .slds-max-large-size_medium, | |
| .slds-max-large-size--medium { | |
| width: 20rem; } | |
| .slds-max-large-size_large, | |
| .slds-max-large-size--large { | |
| width: 25rem; } | |
| .slds-max-large-size_x-large, | |
| .slds-max-large-size--x-large { | |
| width: 40rem; } | |
| .slds-max-large-size_xx-large, | |
| .slds-max-large-size--xx-large { | |
| width: 60rem; } | |
| .slds-max-large-size_1-of-1, | |
| .slds-max-large-size--1-of-1 { | |
| width: 100%; } | |
| .slds-max-large-size_1-of-2, | |
| .slds-max-large-size--1-of-2 { | |
| width: 50%; } | |
| .slds-max-large-size_2-of-2, | |
| .slds-max-large-size--2-of-2 { | |
| width: 100%; } | |
| .slds-max-large-size_1-of-3, | |
| .slds-max-large-size--1-of-3 { | |
| width: 33.333%; } | |
| .slds-max-large-size_2-of-3, | |
| .slds-max-large-size--2-of-3 { | |
| width: 66.667%; } | |
| .slds-max-large-size_3-of-3, | |
| .slds-max-large-size--3-of-3 { | |
| width: 100%; } | |
| .slds-max-large-size_1-of-4, | |
| .slds-max-large-size--1-of-4 { | |
| width: 25%; } | |
| .slds-max-large-size_2-of-4, | |
| .slds-max-large-size--2-of-4 { | |
| width: 50%; } | |
| .slds-max-large-size_3-of-4, | |
| .slds-max-large-size--3-of-4 { | |
| width: 75%; } | |
| .slds-max-large-size_4-of-4, | |
| .slds-max-large-size--4-of-4 { | |
| width: 100%; } | |
| .slds-max-large-size_1-of-5, | |
| .slds-max-large-size--1-of-5 { | |
| width: 20%; } | |
| .slds-max-large-size_2-of-5, | |
| .slds-max-large-size--2-of-5 { | |
| width: 40%; } | |
| .slds-max-large-size_3-of-5, | |
| .slds-max-large-size--3-of-5 { | |
| width: 60%; } | |
| .slds-max-large-size_4-of-5, | |
| .slds-max-large-size--4-of-5 { | |
| width: 80%; } | |
| .slds-max-large-size_5-of-5, | |
| .slds-max-large-size--5-of-5 { | |
| width: 100%; } | |
| .slds-max-large-size_1-of-6, | |
| .slds-max-large-size--1-of-6 { | |
| width: 16.667%; } | |
| .slds-max-large-size_2-of-6, | |
| .slds-max-large-size--2-of-6 { | |
| width: 33.333%; } | |
| .slds-max-large-size_3-of-6, | |
| .slds-max-large-size--3-of-6 { | |
| width: 50%; } | |
| .slds-max-large-size_4-of-6, | |
| .slds-max-large-size--4-of-6 { | |
| width: 66.667%; } | |
| .slds-max-large-size_5-of-6, | |
| .slds-max-large-size--5-of-6 { | |
| width: 83.333%; } | |
| .slds-max-large-size_6-of-6, | |
| .slds-max-large-size--6-of-6 { | |
| width: 100%; } | |
| .slds-max-large-size_1-of-7, | |
| .slds-max-large-size--1-of-7 { | |
| width: 14.286%; } | |
| .slds-max-large-size_2-of-7, | |
| .slds-max-large-size--2-of-7 { | |
| width: 28.571%; } | |
| .slds-max-large-size_3-of-7, | |
| .slds-max-large-size--3-of-7 { | |
| width: 42.857%; } | |
| .slds-max-large-size_4-of-7, | |
| .slds-max-large-size--4-of-7 { | |
| width: 57.143%; } | |
| .slds-max-large-size_5-of-7, | |
| .slds-max-large-size--5-of-7 { | |
| width: 71.429%; } | |
| .slds-max-large-size_6-of-7, | |
| .slds-max-large-size--6-of-7 { | |
| width: 85.714%; } | |
| .slds-max-large-size_7-of-7, | |
| .slds-max-large-size--7-of-7 { | |
| width: 100%; } | |
| .slds-max-large-size_1-of-8, | |
| .slds-max-large-size--1-of-8 { | |
| width: 12.5%; } | |
| .slds-max-large-size_2-of-8, | |
| .slds-max-large-size--2-of-8 { | |
| width: 25%; } | |
| .slds-max-large-size_3-of-8, | |
| .slds-max-large-size--3-of-8 { | |
| width: 37.5%; } | |
| .slds-max-large-size_4-of-8, | |
| .slds-max-large-size--4-of-8 { | |
| width: 50%; } | |
| .slds-max-large-size_5-of-8, | |
| .slds-max-large-size--5-of-8 { | |
| width: 62.5%; } | |
| .slds-max-large-size_6-of-8, | |
| .slds-max-large-size--6-of-8 { | |
| width: 75%; } | |
| .slds-max-large-size_7-of-8, | |
| .slds-max-large-size--7-of-8 { | |
| width: 87.5%; } | |
| .slds-max-large-size_8-of-8, | |
| .slds-max-large-size--8-of-8 { | |
| width: 100%; } | |
| .slds-max-large-size_1-of-12, | |
| .slds-max-large-size--1-of-12 { | |
| width: 8.333%; } | |
| .slds-max-large-size_2-of-12, | |
| .slds-max-large-size--2-of-12 { | |
| width: 16.667%; } | |
| .slds-max-large-size_3-of-12, | |
| .slds-max-large-size--3-of-12 { | |
| width: 25%; } | |
| .slds-max-large-size_4-of-12, | |
| .slds-max-large-size--4-of-12 { | |
| width: 33.333%; } | |
| .slds-max-large-size_5-of-12, | |
| .slds-max-large-size--5-of-12 { | |
| width: 41.667%; } | |
| .slds-max-large-size_6-of-12, | |
| .slds-max-large-size--6-of-12 { | |
| width: 50%; } | |
| .slds-max-large-size_7-of-12, | |
| .slds-max-large-size--7-of-12 { | |
| width: 58.333%; } | |
| .slds-max-large-size_8-of-12, | |
| .slds-max-large-size--8-of-12 { | |
| width: 66.667%; } | |
| .slds-max-large-size_9-of-12, | |
| .slds-max-large-size--9-of-12 { | |
| width: 75%; } | |
| .slds-max-large-size_10-of-12, | |
| .slds-max-large-size--10-of-12 { | |
| width: 83.333%; } | |
| .slds-max-large-size_11-of-12, | |
| .slds-max-large-size--11-of-12 { | |
| width: 91.667%; } | |
| .slds-max-large-size_12-of-12, | |
| .slds-max-large-size--12-of-12 { | |
| width: 100%; } | |
| .slds-max-large-order_1, | |
| .slds-max-large-order--1 { | |
| -ms-flex-order: 1; | |
| order: 1; } | |
| .slds-max-large-order_2, | |
| .slds-max-large-order--2 { | |
| -ms-flex-order: 2; | |
| order: 2; } | |
| .slds-max-large-order_3, | |
| .slds-max-large-order--3 { | |
| -ms-flex-order: 3; | |
| order: 3; } | |
| .slds-max-large-order_4, | |
| .slds-max-large-order--4 { | |
| -ms-flex-order: 4; | |
| order: 4; } | |
| .slds-max-large-order_5, | |
| .slds-max-large-order--5 { | |
| -ms-flex-order: 5; | |
| order: 5; } | |
| .slds-max-large-order_6, | |
| .slds-max-large-order--6 { | |
| -ms-flex-order: 6; | |
| order: 6; } | |
| .slds-max-large-order_7, | |
| .slds-max-large-order--7 { | |
| -ms-flex-order: 7; | |
| order: 7; } | |
| .slds-max-large-order_8, | |
| .slds-max-large-order--8 { | |
| -ms-flex-order: 8; | |
| order: 8; } | |
| .slds-max-large-order_9, | |
| .slds-max-large-order--9 { | |
| -ms-flex-order: 9; | |
| order: 9; } | |
| .slds-max-large-order_10, | |
| .slds-max-large-order--10 { | |
| -ms-flex-order: 10; | |
| order: 10; } | |
| .slds-max-large-order_11, | |
| .slds-max-large-order--11 { | |
| -ms-flex-order: 11; | |
| order: 11; } | |
| .slds-max-large-order_12, | |
| .slds-max-large-order--12 { | |
| -ms-flex-order: 12; | |
| order: 12; } } | |
| [class*="slds-size_"], | |
| [class*="slds-size--"] { | |
| -ms-flex: none; | |
| flex: none; } | |
| /** | |
| * @summary Global margin that can be applied to any element | |
| * | |
| * @selector .slds-has-buffer | |
| * @modifier | |
| */ | |
| .slds-has-buffer { | |
| margin: 0.75rem; } | |
| /** | |
| * @summary Global margin reset that can be applied to any element | |
| * | |
| * @selector .slds-has-full-bleed | |
| * @modifier | |
| */ | |
| .slds-has-full-bleed { | |
| margin: 0; } | |
| /** | |
| * @summary Assumes element below is connected | |
| * | |
| * @selector .slds-has-bottom-magnet | |
| * @modifier | |
| */ | |
| .slds-has-bottom-magnet { | |
| margin-bottom: 0 !important; | |
| border-bottom-left-radius: 0 !important; | |
| border-bottom-right-radius: 0 !important; } | |
| /** | |
| * @summary Assumes element above is connected | |
| * | |
| * @selector .slds-has-top-magnet | |
| * @modifier | |
| */ | |
| .slds-has-top-magnet { | |
| margin-top: 0 !important; | |
| border-top-left-radius: 0 !important; | |
| border-top-right-radius: 0 !important; } | |
| .slds-has-top-magnet.slds-has-buffer { | |
| margin-bottom: 0; | |
| border-radius: 0; | |
| border-top: 0; | |
| box-shadow: none; } | |
| /** | |
| * @summary Reset positioning back to normal behavior | |
| * | |
| * @name static | |
| * @selector .slds-is-static | |
| * @modifier | |
| */ | |
| .slds-is-static { | |
| position: static; } | |
| /** | |
| * @summary Used to contain children if children are absolutely positioned and out of flow. Also used to position element without changing layout. | |
| * | |
| * @name relative | |
| * @selector .slds-is-relative | |
| * @modifier | |
| */ | |
| .slds-is-relative { | |
| position: relative; } | |
| /** | |
| * @summary Used to position an element relative to the viewport. | |
| * | |
| * @name fixed | |
| * @selector .slds-is-fixed | |
| * @modifier | |
| */ | |
| .slds-is-fixed { | |
| position: fixed; } | |
| /** | |
| * @summary Used to position an element relative to its closest ancestor with relative positioning. | |
| * | |
| * @name absolute | |
| * @selector .slds-is-absolute | |
| * @modifier | |
| */ | |
| .slds-is-absolute { | |
| position: absolute; } | |
| /** | |
| * @summary Hides an element only when printing. | |
| * | |
| * @selector .slds-no-print | |
| * @notes Use on each element that should be ommited from printing. | |
| * @modifier | |
| */ | |
| @media print { | |
| .slds-no-print { | |
| display: none; } } | |
| .slds-collapsed { | |
| height: 0; | |
| overflow: hidden; } | |
| .slds-expanded { | |
| height: auto; | |
| overflow: visible; } | |
| /* stylelint-disable declaration-no-important */ | |
| /** | |
| * @summary Hides an element yet enables a screen reader to read the element that is hidden | |
| * | |
| * @selector .slds-assistive-text | |
| * @notes This should be used over other methods when you don't want to hide from screenreaders | |
| * @modifier | |
| */ | |
| .slds-assistive-text { | |
| position: absolute !important; | |
| margin: -1px !important; | |
| border: 0 !important; | |
| padding: 0 !important; | |
| width: 1px !important; | |
| height: 1px !important; | |
| overflow: hidden !important; | |
| clip: rect(0 0 0 0) !important; | |
| text-transform: none !important; | |
| white-space: nowrap !important; } | |
| /** | |
| * @summary Enables `.slds-assistive-text` to become visible on focus | |
| * | |
| * @selector .slds-assistive-text_focus | |
| * @restrict .slds-assistive-text | |
| * @modifier | |
| */ | |
| .slds-assistive-text_focus:focus, | |
| .slds-assistive-text--focus:focus { | |
| margin: inherit !important; | |
| border: inherit !important; | |
| padding: inherit !important; | |
| width: auto !important; | |
| height: auto !important; | |
| overflow: visible !important; | |
| clip: auto !important; } | |
| /** | |
| * @summary Hides elements inside a parent | |
| * | |
| * @selector .slds-is-collapsed | |
| * @modifier | |
| */ | |
| .slds-is-collapsed { | |
| height: 0; | |
| overflow: hidden; } | |
| /** | |
| * @summary Shows the elements inside the parent | |
| * | |
| * @selector .slds-is-expanded | |
| * @modifier | |
| */ | |
| .slds-is-expanded { | |
| height: auto; | |
| overflow: visible; } | |
| /** | |
| * @summary Hides an element from the page by setting the visibility property to `hidden` | |
| * | |
| * @selector .slds-hidden | |
| * @notes An element hidden with this class will reserve the normal space on the page and will not be announced by screenreaders. | |
| * @modifier | |
| */ | |
| .slds-hidden { | |
| visibility: hidden !important; } | |
| /** | |
| * @summary Shows the element by setting the visibility property to `visible` | |
| * | |
| * @selector .slds-visible | |
| * @notes This is toggled on the element. `.slds-hidden` class is removed and `.slds-visible` is added. | |
| * @modifier | |
| */ | |
| .slds-visible { | |
| visibility: visible; } | |
| /** | |
| * @summary Hides an element from the page by setting display propery to `none` | |
| * | |
| * @selector .slds-hide | |
| * @notes An element hidden with this class will take up no space on the page and will not be announced by screenreaders. | |
| * @modifier | |
| */ | |
| .slds-hide { | |
| display: none !important; } | |
| /** | |
| * @summary Shows the element by setting display property to `block` | |
| * | |
| * @selector .slds-show | |
| * @notes This is toggled on the element. `.slds-hide` class is removed and `.slds-show` is added. | |
| * @modifier | |
| */ | |
| .slds-show { | |
| display: block; } | |
| /** | |
| * @summary Shows the element by setting display to `inline-block` | |
| * | |
| * @selector .slds-show_inline-block | |
| * @notes This is toggled on the element. `.slds-hide` class is removed and `.slds-show--inline-block` is added. | |
| * @modifier | |
| */ | |
| .slds-show_inline-block, | |
| .slds-show--inline-block { | |
| display: inline-block; } | |
| /** | |
| * @summary Shows the element by setting display to `inline` | |
| * | |
| * @selector .slds-show_inline | |
| * @notes This is toggled on the element. `.slds-hide` class is removed and `.slds-show--inline` is added. | |
| * @modifier | |
| */ | |
| .slds-show_inline, | |
| .slds-show--inline { | |
| display: inline; } | |
| /** | |
| * @summary Hides an element from the page by setting the opacity property set to `0` | |
| * | |
| * @selector .transition-hide | |
| * @notes This works like the `.slds-hidden` class and reserves the space but allows you to add the `transition` property to transition the speed that it is shown or hidden. | |
| * @modifier | |
| */ | |
| .slds-transition-hide { | |
| opacity: 0; } | |
| /** | |
| * @summary Shows the element using the opacity property set to `1` | |
| * | |
| * @selector .transition-show | |
| * @notes This is toggled on the element. `.slds-transition-hide` class is removed and `.slds-transition-show` is added. | |
| * @modifier | |
| */ | |
| .slds-transition-show { | |
| opacity: 1; } | |
| .slds-x-small { | |
| /* Allow class interpolation with parent selector for easier utility class generation */ | |
| /* stylelint-disable selector-class-pattern */ | |
| /* stylelint-enable selector-class-pattern */ } | |
| .slds-x-small-show { | |
| display: none; } | |
| @media (min-width: 320px) { | |
| .slds-x-small-show { | |
| display: block; } | |
| .slds-x-small-show_inline-block, .slds-x-small-show--inline-block { | |
| display: inline-block; } | |
| .slds-x-small-show_inline, .slds-x-small-show--inline { | |
| display: inline; } } | |
| .slds-x-small-show-only { | |
| display: none; } | |
| @media (min-width: 320px) and (max-width: 479px) { | |
| .slds-x-small-show-only { | |
| display: block; } | |
| .slds-x-small-show-only_inline-block, .slds-x-small-show-only--inline-block { | |
| display: inline-block; } | |
| .slds-x-small-show-only_inline, .slds-x-small-show-only--inline { | |
| display: inline; } } | |
| @media (max-width: 479px) { | |
| .slds-max-x-small-hide { | |
| display: none; } } | |
| .slds-small { | |
| /* Allow class interpolation with parent selector for easier utility class generation */ | |
| /* stylelint-disable selector-class-pattern */ | |
| /* stylelint-enable selector-class-pattern */ } | |
| .slds-small-show { | |
| display: none; } | |
| @media (min-width: 480px) { | |
| .slds-small-show { | |
| display: block; } | |
| .slds-small-show_inline-block, .slds-small-show--inline-block { | |
| display: inline-block; } | |
| .slds-small-show_inline, .slds-small-show--inline { | |
| display: inline; } } | |
| .slds-small-show-only { | |
| display: none; } | |
| @media (min-width: 480px) and (max-width: 767px) { | |
| .slds-small-show-only { | |
| display: block; } | |
| .slds-small-show-only_inline-block, .slds-small-show-only--inline-block { | |
| display: inline-block; } | |
| .slds-small-show-only_inline, .slds-small-show-only--inline { | |
| display: inline; } } | |
| @media (max-width: 767px) { | |
| .slds-max-small-hide { | |
| display: none; } } | |
| .slds-medium { | |
| /* Allow class interpolation with parent selector for easier utility class generation */ | |
| /* stylelint-disable selector-class-pattern */ | |
| /* stylelint-enable selector-class-pattern */ } | |
| .slds-medium-show { | |
| display: none; } | |
| @media (min-width: 768px) { | |
| .slds-medium-show { | |
| display: block; } | |
| .slds-medium-show_inline-block, .slds-medium-show--inline-block { | |
| display: inline-block; } | |
| .slds-medium-show_inline, .slds-medium-show--inline { | |
| display: inline; } } | |
| .slds-medium-show-only { | |
| display: none; } | |
| @media (min-width: 768px) and (max-width: 1023px) { | |
| .slds-medium-show-only { | |
| display: block; } | |
| .slds-medium-show-only_inline-block, .slds-medium-show-only--inline-block { | |
| display: inline-block; } | |
| .slds-medium-show-only_inline, .slds-medium-show-only--inline { | |
| display: inline; } } | |
| @media (max-width: 1023px) { | |
| .slds-max-medium-hide { | |
| display: none; } } | |
| .slds-large { | |
| /* Allow class interpolation with parent selector for easier utility class generation */ | |
| /* stylelint-disable selector-class-pattern */ | |
| /* stylelint-enable selector-class-pattern */ } | |
| .slds-large-show { | |
| display: none; } | |
| @media (min-width: 1024px) { | |
| .slds-large-show { | |
| display: block; } | |
| .slds-large-show_inline-block, .slds-large-show--inline-block { | |
| display: inline-block; } | |
| .slds-large-show_inline, .slds-large-show--inline { | |
| display: inline; } } | |
| @media (min-width: 320px) { | |
| /** | |
| * @summary Hides the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large. | |
| * | |
| * @selector .slds-hide_* | |
| * @notes Element will be displayed normally when the window is smaller | |
| * @modifier | |
| */ | |
| .slds-hide_x-small, | |
| .slds-hide--x-small { | |
| display: none !important; } } | |
| @media (max-width: 319px) { | |
| /** | |
| * @summary Shows the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large. | |
| * | |
| * @selector .slds-show_* | |
| * @notes Element will be displayed normally when the window is bigger | |
| * @modifier | |
| */ | |
| .slds-show_x-small, | |
| .slds-show--x-small { | |
| display: none !important; } } | |
| @media (min-width: 480px) { | |
| /** | |
| * @summary Hides the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large. | |
| * | |
| * @selector .slds-hide_* | |
| * @notes Element will be displayed normally when the window is smaller | |
| * @modifier | |
| */ | |
| .slds-hide_small, | |
| .slds-hide--small { | |
| display: none !important; } } | |
| @media (max-width: 479px) { | |
| /** | |
| * @summary Shows the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large. | |
| * | |
| * @selector .slds-show_* | |
| * @notes Element will be displayed normally when the window is bigger | |
| * @modifier | |
| */ | |
| .slds-show_small, | |
| .slds-show--small { | |
| display: none !important; } } | |
| @media (min-width: 768px) { | |
| /** | |
| * @summary Hides the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large. | |
| * | |
| * @selector .slds-hide_* | |
| * @notes Element will be displayed normally when the window is smaller | |
| * @modifier | |
| */ | |
| .slds-hide_medium, | |
| .slds-hide--medium { | |
| display: none !important; } } | |
| @media (max-width: 767px) { | |
| /** | |
| * @summary Shows the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large. | |
| * | |
| * @selector .slds-show_* | |
| * @notes Element will be displayed normally when the window is bigger | |
| * @modifier | |
| */ | |
| .slds-show_medium, | |
| .slds-show--medium { | |
| display: none !important; } } | |
| @media (min-width: 1024px) { | |
| /** | |
| * @summary Hides the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large. | |
| * | |
| * @selector .slds-hide_* | |
| * @notes Element will be displayed normally when the window is smaller | |
| * @modifier | |
| */ | |
| .slds-hide_large, | |
| .slds-hide--large { | |
| display: none !important; } } | |
| @media (max-width: 1023px) { | |
| /** | |
| * @summary Shows the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large. | |
| * | |
| * @selector .slds-show_* | |
| * @notes Element will be displayed normally when the window is bigger | |
| * @modifier | |
| */ | |
| .slds-show_large, | |
| .slds-show--large { | |
| display: none !important; } } | |
| @media (min-width: 1280px) { | |
| /** | |
| * @summary Hides the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large. | |
| * | |
| * @selector .slds-hide_* | |
| * @notes Element will be displayed normally when the window is smaller | |
| * @modifier | |
| */ | |
| .slds-hide_x-large, | |
| .slds-hide--x-large { | |
| display: none !important; } } | |
| @media (max-width: 1279px) { | |
| /** | |
| * @summary Shows the element when the window is bigger than the specific size. Sizes can be: x-small, small, medium, large, and * x-large. | |
| * | |
| * @selector .slds-show_* | |
| * @notes Element will be displayed normally when the window is bigger | |
| * @modifier | |
| */ | |
| .slds-show_x-large, | |
| .slds-show--x-large { | |
| display: none !important; } } | |
| /** | |
| * @summary Hides element and removes width | |
| * @selector .slds-is-visually-empty | |
| * @modifier | |
| */ | |
| .slds-is-visually-empty { | |
| visibility: hidden !important; | |
| width: 0; } | |
| /*! HTML5 Boilerplate v5.2.0 | MIT License | https://html5boilerplate.com/ */ | |
| @media print { | |
| *, | |
| *:before, | |
| *:after { | |
| background: transparent !important; | |
| color: #000 !important; | |
| box-shadow: none !important; | |
| text-shadow: none !important; } | |
| a, | |
| a:visited { | |
| text-decoration: underline; } | |
| a[href]:after { | |
| content: " (" attr(href) ")"; } | |
| abbr[title]:after { | |
| content: " (" attr(title) ")"; } | |
| a[href^="#"]:after, | |
| a[href^="javascript:"]:after { | |
| content: ''; } | |
| pre, | |
| blockquote { | |
| border: 1px solid #999; | |
| page-break-inside: avoid; } | |
| thead { | |
| display: table-header-group; } | |
| tr, | |
| img { | |
| page-break-inside: avoid; } | |
| img { | |
| max-width: 100% !important; } | |
| p, | |
| h2, | |
| h3 { | |
| orphans: 3; | |
| widows: 3; } | |
| h2, | |
| h3 { | |
| page-break-after: avoid; } } | |
| </style> | |
| <style> | |
| html{ | |
| background: #ffffff; | |
| } | |
| p { | |
| color: rgb(62, 62, 60); | |
| font-size: 16px !important; | |
| } | |
| h3 { | |
| font-weight: 700; | |
| font-size: 26px; | |
| color: rgb(62, 62, 60); | |
| } | |
| footer { | |
| position: fixed; | |
| bottom: 0; | |
| height: 20px; | |
| padding-bottom: 20px; | |
| width: 100%; | |
| } | |
| .origin-p{ | |
| color:rgb(110, 110, 110); | |
| font-size: 12px !important; | |
| } | |
| .slds-text-body { | |
| margin: 15px !important; | |
| } | |
| .logo{ | |
| height: 50px; | |
| width: auto; | |
| margin-top: 10px; | |
| } | |
| .slds-illustration{ | |
| padding: 15vh 5vh 0 5vh; | |
| } | |
| @media (max-height: 745px) { | |
| footer { | |
| position: relative; | |
| padding: 50px 0 20px 0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| </head> | |
| <body> | |
| <div class="slds-illustration slds-illustration_large"> | |
| <svg class="slds-illustration__svg" viewBox="0 0 454 265" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"> | |
| <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> | |
| <g transform="translate(-77.000000, -60.000000)"> | |
| <g> | |
| <g transform="translate(190.000000, 206.000000)" class="slds-illustration__stroke-secondary" | |
| stroke-linecap="round" stroke-width="3"> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M44,17.5 L63,17.5 C62.2789714,12.0723971 64.081543,7.53186978 68.4077148,3.87841797 C73.3754883,-0.195556641 79.2734375,0.717773438 82.440918,2.12353516 C85.6083984,3.52929687 87.9606934,5.46069336 89.5913086,9.10524041 C90.2822266,10.6397351 90.7517904,11.9379883 91,13"> | |
| </path> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M83,20.5 C84.0558268,16.8461914 86.2227376,14.4572754 89.5007324,13.333252 C94.4177246,11.6472168 99.0800781,13.8925781 100.942383,16.1518555 C102.804687,18.4111328 103.39502,20.2260742 103.746582,22.1201172 C103.980957,23.3828125 104.06543,24.8427734 104,26.5 C108.141764,26.3313802 110.918945,27.1647135 112.331543,29 C114.040039,31.1936035 114.215332,33.817627 113.593018,35.75 C112.970703,37.682373 110.894531,40.5 107,40.5 L28,40.5"> | |
| </path> | |
| <path vector-effect="non-scaling-stroke" d="M18,27.5 L83.0004985,27.5"></path> | |
| <path vector-effect="non-scaling-stroke" d="M0,27.5 L8,27.5"></path> | |
| </g> | |
| <g transform="translate(300.000000, 161.000000)" class="slds-illustration__stroke-secondary" | |
| stroke-linecap="round" stroke-width="3"> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M44,17.5 L63,17.5 C62.2789714,12.0723971 64.081543,7.53186978 68.4077148,3.87841797 C73.3754883,-0.195556641 79.2734375,0.717773438 82.440918,2.12353516 C85.6083984,3.52929687 87.9606934,5.46069336 89.5913086,9.10524041 C90.2822266,10.6397351 90.7517904,11.9379883 91,13"> | |
| </path> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M83,20.5 C84.0558268,16.8461914 86.2227376,14.4572754 89.5007324,13.333252 C94.4177246,11.6472168 99.0800781,13.8925781 100.942383,16.1518555 C102.804687,18.4111328 103.39502,20.2260742 103.746582,22.1201172 C103.980957,23.3828125 104.06543,24.8427734 104,26.5 C108.141764,26.3313802 110.918945,27.1647135 112.331543,29 C114.040039,31.1936035 114.215332,33.817627 113.593018,35.75 C112.970703,37.682373 110.894531,40.5 107,40.5 L28,40.5"> | |
| </path> | |
| <path vector-effect="non-scaling-stroke" d="M18,27.5 L83.0004985,27.5"></path> | |
| <path vector-effect="non-scaling-stroke" d="M0,27.5 L8,27.5"></path> | |
| </g> | |
| <g transform="translate(79.000000, 249.000000)"> | |
| <path vector-effect="non-scaling-stroke" d="M0,62.5 L450,62.5" class="slds-illustration__stroke-secondary" | |
| stroke-width="3" stroke-linecap="round"></path> | |
| <polyline vector-effect="non-scaling-stroke" class="slds-illustration__stroke-secondary" stroke-width="3" | |
| stroke-linecap="round" stroke-linejoin="round" points="32 62 107.5 0 165.5 45.1232877"></polyline> | |
| <polyline vector-effect="non-scaling-stroke" class="slds-illustration__stroke-secondary" stroke-width="3" | |
| stroke-linecap="round" stroke-linejoin="round" points="148 30.9433962 165.5 16 222 62"></polyline> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M42.8943213,32.968973 L46.3925781,49.4296875 L34.453125,58.6445312 L40.9466068,32.9319979 C41.081836,32.3965247 41.6255477,32.0720629 42.1610209,32.2072921 C42.5306645,32.3006424 42.8150677,32.5960527 42.8943213,32.968973 Z" | |
| class="slds-illustration__fill-secondary"></path> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M199.962964,27.4391572 L206,49 L194.770218,39.1063642 L198.037036,27.4391572 C198.185948,26.9073269 198.7378,26.5969106 199.26963,26.7458231 C199.605963,26.8399963 199.868791,27.1028246 199.962964,27.4391572 Z" | |
| class="slds-illustration__fill-secondary"></path> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M47.9662349,37.3583594 L50.4271384,46.5867475 L46.8251953,48.7349783 L43,48.7349783 L46.0337651,37.3583594 C46.1760682,36.8247225 46.7240258,36.5074839 47.2576627,36.6497871 C47.6036917,36.7420615 47.8739605,37.0123303 47.9662349,37.3583594 Z" | |
| class="slds-illustration__fill-secondary"></path> | |
| </g> | |
| <g | |
| transform="translate(394.000000, 265.500000) scale(-1, 1) translate(-394.000000, -265.500000) translate(288.000000, 222.000000)"> | |
| <polyline vector-effect="non-scaling-stroke" class="slds-illustration__stroke-secondary" stroke-width="3" | |
| stroke-linecap="round" stroke-linejoin="round" points="0.5 87 87.5 0 153.5 68"></polyline> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M8.16064153,59.5904583 L14.229782,83 L3,71.1063642 L6.22968061,59.5717906 C6.37859311,59.0399602 6.93044422,58.729544 7.46227456,58.8784565 C7.80524768,58.9744889 8.07125785,59.2456927 8.16064153,59.5904583 Z" | |
| class="slds-illustration__fill-secondary" | |
| transform="translate(8.614891, 70.920583) scale(-1, 1) translate(-8.614891, -70.920583) "></path> | |
| <polyline vector-effect="non-scaling-stroke" class="slds-illustration__stroke-secondary" stroke-width="3" | |
| stroke-linecap="round" stroke-linejoin="round" points="135.5 46 158.5 25 211.5 78"></polyline> | |
| </g> | |
| <g transform="translate(406.500000, 262.500000)"> | |
| <g class="slds-illustration__fill-secondary"> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M18.9209988,1.95433401 L33.259296,51.443436 C33.5666778,52.5043744 32.9557995,53.613617 31.8948612,53.9209988 C31.7139843,53.9734036 31.5266126,54 31.3382972,54 L2.6617028,54 C1.5571333,54 0.661702805,53.1045695 0.661702805,52 C0.661702805,51.8116846 0.688299176,51.6243129 0.74070397,51.443436 L15.0790012,1.95433401 C15.386383,0.893395645 16.4956256,0.282517358 17.556564,0.589899164 C18.2152102,0.780726338 18.7301717,1.29568777 18.9209988,1.95433401 Z"> | |
| </path> | |
| </g> | |
| <g class="slds-illustration__stroke-primary" stroke-linecap="round" stroke-width="3"> | |
| <polygon vector-effect="non-scaling-stroke" stroke-linejoin="round" | |
| points="17 0.323943662 34 54 -1.81721305e-12 54"></polygon> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M17,3.6953125 C17,42.0456294 17,61.6471919 17,62.5 C17,61.6471919 17,42.0456294 17,3.6953125 Z"> | |
| </path> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M17,29.3239437 C22.3333333,35.7851611 25,39.1184944 25,39.3239437 C25,39.1184944 22.3333333,35.7851611 17,29.3239437 Z" | |
| stroke-linejoin="round" | |
| transform="translate(21.000000, 34.323944) scale(-1, 1) translate(-21.000000, -34.323944) "></path> | |
| </g> | |
| </g> | |
| <g transform="translate(363.000000, 229.500000)"> | |
| <g transform="translate(1.000000, 0.000000)" class="slds-illustration__fill-secondary"> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M25.6478873,0 L50.879042,84.4273253 C51.1953215,85.4856452 50.5937789,86.5999782 49.535459,86.9162577 C49.3496374,86.9717906 49.1567264,87 48.9627843,87 L2.33299037,87 C1.22842087,87 0.332990367,86.1045695 0.332990367,85 C0.332990367,84.8060578 0.361199757,84.6131469 0.416732643,84.4273253 L25.6478873,0 Z"> | |
| </path> | |
| </g> | |
| <g class="slds-illustration__stroke-primary" stroke-linecap="round" stroke-width="3"> | |
| <polygon vector-effect="non-scaling-stroke" stroke-linejoin="round" points="26.5 0 52.5 87 0.5 87"> | |
| </polygon> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M26.5,2.58642578 C26.5,63.0261034 26.5,93.9972948 26.5,95.5 C26.5,93.9972948 26.5,63.0261034 26.5,2.58642578 Z"> | |
| </path> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M15.6478873,42 C22.9812207,49.078692 26.6478873,52.7453587 26.6478873,53 C26.6478873,52.7453587 22.9812207,49.078692 15.6478873,42 Z" | |
| stroke-linejoin="round"></path> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M27.6478873,68 C36.9812207,57.078692 41.6478873,51.7453587 41.6478873,52 C41.6478873,51.7453587 36.9812207,57.078692 27.6478873,68 Z" | |
| stroke-linejoin="round"></path> | |
| </g> | |
| </g> | |
| <g transform="translate(118.500000, 262.500000)"> | |
| <g transform="translate(27.000000, 0.000000)" class="slds-illustration__fill-secondary"> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M18.9209988,1.95433401 L33.259296,51.443436 C33.5666778,52.5043744 32.9557995,53.613617 31.8948612,53.9209988 C31.7139843,53.9734036 31.5266126,54 31.3382972,54 L2.6617028,54 C1.5571333,54 0.661702805,53.1045695 0.661702805,52 C0.661702805,51.8116846 0.688299176,51.6243129 0.74070397,51.443436 L15.0790012,1.95433401 C15.386383,0.893395645 16.4956256,0.282517358 17.556564,0.589899164 C18.2152102,0.780726338 18.7301717,1.29568777 18.9209988,1.95433401 Z"> | |
| </path> | |
| </g> | |
| <g class="slds-illustration__stroke-primary" stroke-width="3"> | |
| <polygon vector-effect="non-scaling-stroke" stroke-linecap="round" stroke-linejoin="round" | |
| points="44 0.323943662 61 54 27 54"></polygon> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M44,4.32394366 C44,42.2551731 44,61.6471919 44,62.5 C44,61.6471919 44,42.2551731 44,4.32394366 Z"> | |
| </path> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M44,32.3239437 C50.6666667,39.4518278 54,43.1184944 54,43.3239437 C54,43.1184944 50.6666667,39.4518278 44,32.3239437 Z" | |
| stroke-linecap="round" stroke-linejoin="round" | |
| transform="translate(49.000000, 37.823944) scale(-1, 1) translate(-49.000000, -37.823944) "></path> | |
| <path vector-effect="non-scaling-stroke" d="M0.5,61 L356.5,61" stroke-linecap="round"></path> | |
| <path vector-effect="non-scaling-stroke" d="M363.5,61 L373.5,61" stroke-linecap="round"></path> | |
| </g> | |
| </g> | |
| <g transform="translate(146.000000, 62.000000)"> | |
| <g class="slds-illustration__fill-secondary"> | |
| <circle vector-effect="non-scaling-stroke" cx="66" cy="66" r="66"></circle> | |
| <ellipse cx="66.5" cy="66" rx="38.5" ry="66"></ellipse> | |
| <rect x="49.5" y="153.5" width="32" height="22"></rect> | |
| </g> | |
| <g transform="translate(4.000000, 0.000000)" fill="#FFFFFF"> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M0.276855469,47.7788086 C4.72770182,36.0685221 11.8059896,26.5141602 21.5117188,19.1157227 C30.1201172,12.7973633 35.706543,9.09326172 48.0908203,6.87597656 C51.8487061,6.20316343 56.1575774,0.963049705 61.0175781,0.886230469 C66.9931232,0.791778465 73.7249109,6.08477534 80.3537012,7.83514372 C86.1008648,9.35271373 91.8836069,11.7592753 97.3378906,15.394043 C114.199707,26.6308594 117.956543,35.4946289 123.961914,47.7788086 C127.965495,55.9682617 127.643229,53.3107096 122.995117,39.8061523 L115.15625,26.3779297 L99.3500977,11.8393555 L79.3271484,3.14208984 L58.2192383,0.886230469 L41.0913086,4.39794922 L22.6689453,13.8129883 L6.44238281,30.0708008 L0.276855469,43.0327148 L0.276855469,47.7788086 Z"> | |
| </path> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M30.494873,34.0495605 C30.494873,34.0495605 37.3376465,17.0495605 47.779541,9.9309082 C53.5096842,6.13435872 59.1995443,4.51472982 64.8491211,5.07202148 C69.2832031,5.49861654 73.9475098,7.55900065 78.842041,11.2531738 C86.1838379,16.7944336 92.1347656,27.7973633 95.4316406,35.8276367 C97.6295573,41.1811523 96.2676595,36.5566406 91.3459473,21.9541016 C85.9305827,14.9046224 83.0406087,11.2403971 82.6760254,10.9614258 C82.3114421,10.6824544 79.0512695,7.82503255 72.8955078,2.38916016 C68.7790927,0.889351294 65.6379734,0.119006242 63.4721497,0.078125 C61.306326,0.0372437583 58.0536466,0.686901961 53.7141113,2.02709961 L45.8171387,7.78222656 L37.4606934,16.3037109 C33.3729655,23.1031901 31.1993001,26.6408691 30.9396973,26.916748 C30.550293,27.3305664 30.494873,34.0495605 30.494873,34.0495605 Z"> | |
| </path> | |
| </g> | |
| <circle vector-effect="non-scaling-stroke" class="slds-illustration__stroke-primary" stroke-width="3" | |
| stroke-linecap="round" stroke-linejoin="round" cx="66" cy="66" r="66"></circle> | |
| <ellipse class="slds-illustration__stroke-primary" stroke-width="3" stroke-linecap="round" | |
| stroke-linejoin="round" cx="66.5" cy="66" rx="38.5" ry="66"></ellipse> | |
| <g transform="translate(24.000000, 117.000000)" class="slds-illustration__stroke-primary" | |
| stroke-linecap="round" stroke-linejoin="round" stroke-width="3"> | |
| <rect x="26.5" y="36.5" width="31" height="22"></rect> | |
| <path vector-effect="non-scaling-stroke" d="M84,36 L58,0" | |
| transform="translate(71.000000, 18.000000) scale(-1, 1) translate(-71.000000, -18.000000) "></path> | |
| <path vector-effect="non-scaling-stroke" d="M55,36 L48,14" | |
| transform="translate(51.500000, 25.000000) scale(-1, 1) translate(-51.500000, -25.000000) "></path> | |
| <path vector-effect="non-scaling-stroke" d="M36,36 L29,14"></path> | |
| <path vector-effect="non-scaling-stroke" d="M26,36 L0,0"></path> | |
| </g> | |
| </g> | |
| <g transform="translate(426.000000, 113.000000)" class="slds-illustration__stroke-secondary" | |
| stroke-linecap="round" stroke-linejoin="round" stroke-width="3"> | |
| <g transform="translate(0.500000, 0.500000)"> | |
| <circle vector-effect="non-scaling-stroke" cx="33.5" cy="33.5" r="33"></circle> | |
| <ellipse cx="33.75" cy="33.5" rx="19.25" ry="33"></ellipse> | |
| <rect x="24.5" y="77" width="18" height="11"></rect> | |
| <path vector-effect="non-scaling-stroke" d="M54.5,77 L41.5,59" | |
| transform="translate(48.000000, 68.000000) scale(-1, 1) translate(-48.000000, -68.000000) "></path> | |
| <path vector-effect="non-scaling-stroke" d="M40,77 L36.5,66" | |
| transform="translate(38.250000, 71.500000) scale(-1, 1) translate(-38.250000, -71.500000) "></path> | |
| <path vector-effect="non-scaling-stroke" d="M30.5,77 L27,66"></path> | |
| <path vector-effect="non-scaling-stroke" d="M25.5,77 L12,59"></path> | |
| </g> | |
| </g> | |
| <g transform="translate(72.000000, 194.000000)" class="slds-illustration__stroke-secondary" | |
| stroke-linecap="round" stroke-width="3"> | |
| <g | |
| transform="translate(31.713442, 25.088326) rotate(-15.000000) translate(-31.713442, -25.088326) translate(4.713442, 6.588326)"> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M31.0360707,3.43528591 C31.0360707,3.43528591 40.5802283,0.671893051 42.6488424,10.6908663" | |
| transform="translate(36.842457, 6.888440) rotate(41.000000) translate(-36.842457, -6.888440) "></path> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M40.4282002,10.1797377 C40.4282002,10.1797377 49.9723578,7.4163448 52.0409719,17.435318" | |
| transform="translate(46.234586, 13.632892) scale(-1, 1) rotate(-41.000000) translate(-46.234586, -13.632892) "> | |
| </path> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M0.730284783,29.5865514 C0.730284783,29.5865514 10.2744424,26.8231586 12.3430565,36.8421318"> | |
| </path> | |
| <path vector-effect="non-scaling-stroke" | |
| d="M12.7302848,29.5865514 C12.7302848,29.5865514 22.2744424,26.8231586 24.3430565,36.8421318" | |
| transform="translate(18.536671, 33.039705) scale(-1, 1) translate(-18.536671, -33.039705) "></path> | |
| </g> | |
| </g> | |
| </g> | |
| </g> | |
| </g> | |
| </svg> | |
| <div class="slds-text-longform"> | |
| <h3>An unexpected connection error occurred.</h3> | |
| <p class="slds-text-body"> Try refreshing the page or visit our <a href="https://status.salesforce.com/" | |
| target="_blank">status page</a> for more information. | |
| <br><b>4a731358c9871d11ce6a2292caa55d6d ; | |
| 2021-11-30T17:13:35+00:00 | |
| <span style="text-transform:uppercase">; phx</span></b></p> | |
| <span class="site-logo"> | |
| <img src="https://www.lightningdesignsystem.com/assets/images/logo.svg" alt"logo" class="logo"> | |
| </span> | |
| </div> | |
| </div> | |
| <footer class="slds-align_absolute-center"> | |
| <p class="origin-p">This error originated from Salesforce Edge.</p> | |
| </footer> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment