Last active
January 13, 2019 08:39
-
-
Save brucebentley/d07c2254e6582279497e42a6fa82510e to your computer and use it in GitHub Desktop.
Component markup & stylesheets provided from Salesforce's Omni-Channel Live Agent Embedded Service.
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
/// | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// AURA APP COMPONENT | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// @SOURCE: https://sforce.co/2SdZxKA; | |
/// | |
/// | |
/// KEYFRAMES | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
@keyframes auraPlaceholderSpin { | |
from { | |
transform: rotate(0deg); | |
} | |
to { | |
transform: rotate(720deg); | |
} | |
} | |
/// | |
/// SPINNING PLACEHOLDER | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.auraPlaceholder { | |
.spin { | |
animation-duration: .75s; | |
animation-iteration-count: infinite; | |
animation-name: auraPlaceholderSpin; | |
animation-timing-function: ease-in-out; | |
background-color: #888; | |
border-radius: 16px; | |
border: 1px solid #666; | |
display: inline-block; | |
height: 9px; | |
width: 9px; | |
&:before, | |
&:after { | |
background-color: #666666; | |
border-radius: 4px; | |
content: ''; | |
position: absolute; | |
} | |
&:before { | |
height: 17px; | |
margin-left: 4px; | |
margin-top: -4px; | |
width: 1px; | |
} | |
&:after { | |
height: 1px; | |
margin-left: -4px; | |
margin-top: 4px; | |
width: 17px; | |
} | |
} | |
} | |
/// | |
/// CHECKBOXES | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiCheckboxMenuItem { | |
a { | |
&:first-child { | |
&:before { | |
content: ''; | |
display: block; | |
float: left; | |
height: 16px; | |
margin-right: 2px; | |
width: 16px; | |
} | |
} | |
/** CHECKED STATE(S) **/ | |
&[aria-checked=true] { | |
&:first-child { | |
&:before { | |
background: url('/auraFW/resources/aura/images/menuitem-check.png') no-repeat center center; | |
} | |
} | |
} | |
} | |
} | |
/// | |
/// INPUT ERRORS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiInputDefaultError { | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
.form-element__help { | |
font-size: .75rem; | |
margin-top: .5rem; | |
color: #c23934; | |
} | |
&.hide { | |
display: none; | |
} | |
} | |
/// | |
/// INPUT LABELS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiLabel { | |
/** TOP & BOTTOM **/ | |
&.uiLabel-top, | |
&.uiLabel-bottom { | |
display: block; | |
} | |
/** LEFT * BOTTOM **/ | |
&.uiLegend-left, | |
&.uiLegend-bottom { | |
float: left; | |
} | |
/** RIGHT **/ | |
&.uiLegend-right { | |
float: right; | |
} | |
} | |
/// | |
/// MENU SEPERATORS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiMenuItemSeparator { | |
border-top: 1px solid #cccccc; | |
} | |
/// | |
/// PICKLIST LABELS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiPicklistLabel { | |
/** LEFT **/ | |
&.uiPicklistLabel-left { | |
float: left; | |
} | |
/** RIGHT **/ | |
&.uiPicklistLabel-right { | |
float: right; | |
} | |
} | |
/// | |
/// RADIO MENU ITEMS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiRadioMenuItem { | |
a b { | |
display: block; | |
float: left; | |
height: 16px; | |
margin-right: 2px; | |
width: 16px; | |
} | |
/** SELECTED STATE(S) **/ | |
a.selected b { | |
background: url('/auraFW/resources/aura/images/menuitem-check.png') no-repeat center center; | |
} | |
} | |
/// | |
/// BUTTONS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiButton { | |
cursor: pointer; | |
display: inline-block; | |
/** BUTTON LABEL(S) **/ | |
.label { | |
display: block; | |
white-space: normal; | |
} | |
/** DEFAULT BUTTONS **/ | |
&--default { | |
font-weight: bold; | |
font-size: .9em; | |
margin: 2px 3px; | |
padding: 4px 6px; | |
text-decoration: none; | |
text-align: center; | |
border-radius: 4px; | |
border: 0; | |
border-top: 1px solid rgba(255, 255, 255, 0.45); | |
background: #dddfe1; | |
background: linear-gradient(#F8F8F9, #DDDFE1); | |
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.7), 0 1px 0 rgba(0, 0, 0, 0.3); | |
text-shadow: 0 1px 1px #fff; | |
/** FOCUS + HOVER + SELECTED STATE(S) **/ | |
&:focus, | |
&:hover, | |
&.is-selected { | |
background: #757d8a; | |
background: #757d8a linear-gradient(#7F8792, #535B68); | |
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5); | |
} | |
/** LABEL (S) **/ | |
.label { | |
color: #3a3d42; | |
white-space: normal; | |
} | |
/** FOCUS + HOVER STATE(S) **/ | |
&:focus, | |
&:hover { | |
color: #ffffff; | |
} | |
/** DISABLED STATE **/ | |
&:disabled { | |
background: #b9b9b9; | |
box-shadow: none; | |
cursor: default; | |
text-shadow: none; | |
/** LABEL(S) **/ | |
.label { | |
color: #888888; | |
/** HOVER STATE **/ | |
&:hover { | |
color: #888888; | |
} | |
} | |
} | |
} | |
} | |
/// | |
/// FORM INPUTS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiInput { | |
/** DEFAULT INPUTS **/ | |
&--default { | |
/** ERROR STATE **/ | |
&.has_error { | |
background-color: rgba(255, 0, 0, 0.025); | |
border-color: red; | |
} | |
/** ERROR MESSAGE **/ | |
&.errorMsg { | |
display: block; | |
color: red; | |
font-size: 0.75em; | |
} | |
/** HIDDEN **/ | |
&.hide { | |
display: none; | |
} | |
/** INVALID STATE **/ | |
&:invalid { | |
box-shadow: none; | |
} | |
/** INVALID SUBMIT STATE (MOZILLA) **/ | |
&:-moz-submit-invalid { | |
box-shadow: none; | |
} | |
/** INVALID STATE (MOZILLA) **/ | |
&:-moz-ui-invalid { | |
box-shadow: none; | |
} | |
/** CLEARED STATE (MICROSOFT) **/ | |
&::-ms-clear { | |
width: 0; | |
height: 0; | |
} | |
} | |
/** LOOKUP INPUT **/ | |
&--lookup { | |
/** LOOKUP MENU **/ | |
.lookup__menu, | |
&.lookup__menu { | |
border: 1px solid #ccc; | |
border-radius: 4px; | |
background-color: #fff; | |
box-shadow: 0 0 8px rgba(0, 0, 0, 0.25); | |
} | |
/** UNORDERED LISTS **/ | |
ul { | |
overflow-y: auto; | |
-webkit-overflow-scrolling: touch; | |
} | |
/** LOOKUP ITEM **/ | |
.lookup__item { | |
/** LINKS **/ | |
a { | |
color: #ccc; | |
display: block; | |
height: 1.1em; | |
padding: 3px 9px; | |
text-decoration: none; | |
/** MOUSE OVER **/ | |
&.mouseovered { | |
background-color: #a9d0f5; | |
} | |
} | |
/** HIGHLIGHTED ITEM **/ | |
&.highlighted a { | |
background-color: #0683c5; | |
color: #015ba7; | |
outline: none; | |
text-decoration: underline; | |
padding: 3px 9px; | |
} | |
/** DEFAULT ITEM **/ | |
&.default .data-match { | |
background-color: #b5daee; | |
border-radius: 2px; | |
} | |
} | |
/** HEADER * FOOTER **/ | |
.lookup__header, | |
.lookup__footer { | |
/** HIGHLIGHTED **/ | |
&.highlighted { | |
background-color: #0683c5; | |
} | |
} | |
} | |
/** DATE & TIME INPUT **/ | |
&--datetime { | |
/** OPEN ICON **/ | |
+ .datePicker-openIcon, | |
+ .timePicker-openIcon, | |
.datePicker-openIcon, | |
.timePicker-openIcon { | |
background: url('/auraFW/resources/aura/images/icon_openCalendar.png') no-repeat 0 0; | |
height: 15px; | |
left: -22px; | |
position: relative; | |
vertical-align: middle; | |
width: 12px; | |
} | |
/** CLEAR ICON **/ | |
.clearIcon { | |
background: url('/auraFW/resources/aura/images/clear.png') no-repeat 0 0; | |
height: 15px; | |
left: -22px; | |
position: relative; | |
vertical-align: middle; | |
width: 15px; | |
} | |
} | |
} | |
/// | |
/// MENU ITEMS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiMenuItem { | |
a { | |
display: block; | |
overflow: hidden; | |
/** DISABLED MENU ITEM(S) **/ | |
&[aria-disabled=true] { | |
cursor: default; | |
pointer-events: none; | |
} | |
} | |
} | |
/// | |
/// POP-UP TARGET | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
/** PARENT <div> **/ | |
div.uiPopupTarget { | |
display: none; | |
position: absolute; | |
z-index: 9999; | |
/** VISIBLE **/ | |
&.visible { | |
display: block; | |
} | |
} | |
/** UI POP-UP TARGET ELEMENT(S) **/ | |
.uiPopupTarget { | |
/** POP-UP TARGET CONTAINER **/ | |
.popupTargetContainer, | |
&.popupTargetContainer { | |
background-color: #ffffff; | |
border-radius: 3px; | |
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75); | |
position: absolute; | |
} | |
/** POP-UP CURTAIN **/ | |
&.popupCurtain { | |
background: rgba(0, 0, 0, 0.4); | |
bottom: 0; | |
height: 100%; | |
left: 0; | |
position: absolute; | |
right: 0; | |
top: 0; | |
width: 100%; | |
} | |
/** UNORDERED LISTS **/ | |
ul { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
/** DISABLED ITEM(S) **/ | |
a[aria-disabled=true] { | |
cursor: default; | |
pointer-events: none; | |
} | |
} | |
/// | |
/// ICONS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceIcon { | |
&.slds-button__icon .slds-icon { | |
fill: currentColor; | |
} | |
/** XXS ICONS **/ | |
.slds-icon_xx-small { | |
height: 0.875rem; | |
width: 0.875rem; | |
} | |
/** ASSISTIVE TEXT **/ | |
.slds-assistive-text { | |
border: 0 !important; | |
clip: rect(0 0 0 0) !important; | |
height: 1px !important; | |
margin: -1px !important; | |
overflow: hidden !important; | |
padding: 0 !important; | |
position: absolute !important; | |
width: 1px !important; | |
} | |
} | |
/// | |
/// INPUT TEXT AREAS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiInputTextArea { | |
&.noresize, | |
.noresize { | |
resize: none; | |
} | |
} | |
/// | |
/// MENU LISTS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiMenu { | |
position: relative; | |
} | |
div.uiMenuList { | |
/** VISIBLE **/ | |
&.visible { | |
display: block; | |
} | |
} | |
.uiMenuList { | |
/** UNORDERED LISTS **/ | |
ul { | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
/** DEFAULT MENU LISTS **/ | |
&--default { | |
display: none; | |
position: absolute; | |
border-radius: 3px; | |
background-color: #fff; | |
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.75); | |
z-index: 1; | |
/** MENU SEPERATOR **/ | |
.uiMenuSeparator { | |
border-top: 1px solid #cccccc; | |
} | |
/** MENU HEADER **/ | |
.menu__header { | |
padding: .5rem .75rem; | |
text-transform: uppercase; | |
letter-spacing: .0625em; | |
font-size: .9rem; | |
color: #6d6d6d; | |
} | |
/** MENU ITEM **/ | |
.uiMenuItem { | |
> a, | |
> span { | |
color: #222222; | |
display: block; | |
padding: 3px 9px; | |
text-decoration: none; | |
/** FOCUS + HOVER STATE(S) **/ | |
&:focus, | |
&:hover { | |
background-color: #cfeef8; | |
border-radius: 8px; | |
color: #015ba7; | |
outline: none; | |
text-decoration: underline; | |
} | |
/** ACTIVE STATE **/ | |
&:active { | |
color: #222222; | |
outline: none; | |
} | |
/** DISABLED ITEM(S) **/ | |
&[aria-disabled=true] { | |
color: lightgray; | |
cursor: default; | |
text-decoration: none; | |
/** HOVER STATE **/ | |
&:hover { | |
background-color: transparent; | |
} | |
} | |
} | |
} | |
} | |
&.menu--nubbin-top { | |
margin-top: 0.5rem; | |
&:before { | |
background-color: white; | |
content: ''; | |
height: 1rem; | |
left: 50%; | |
margin-left: -0.5rem; | |
position: absolute; | |
top: -0.5rem; | |
transform: rotate(45deg); | |
width: 1rem; | |
} | |
&:after { | |
background-color: white; | |
content: ''; | |
height: 1rem; | |
left: 50%; | |
margin-left: -0.5rem; | |
position: absolute; | |
top: -0.5rem; | |
transform: rotate(45deg); | |
width: 1rem; | |
} | |
&:before { | |
background: white; | |
} | |
&:after { | |
background: white; | |
box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.16); | |
z-index: -1; | |
} | |
} | |
} | |
/// | |
/// SALESFORCE ACTION BUTTONS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceActionButton { | |
cursor: pointer; | |
display: inline-block; | |
/** LABELS **/ | |
.label { | |
cursor: pointer; | |
display: inline-block; | |
text-align: center; | |
vertical-align: middle; | |
} | |
/** ICONS **/ | |
.icon { | |
box-sizing: content-box; | |
float: none; | |
height: 20px; | |
vertical-align: middle; | |
width: 20px; | |
} | |
} | |
/// | |
/// SALESFORCE PLACHOLDERS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forcePlaceholder { | |
/** PLACEHOLDER **/ | |
.placeholder { | |
/** BODY **/ | |
.body { | |
padding: 1.5rem; | |
} | |
/** ICONS **/ | |
.icon { | |
width: 2.375rem; | |
height: 2.375rem; | |
background-color: #e9eaec; | |
border-radius: .25rem; | |
margin-right: .75rem; | |
display: inline-block; | |
/** HUGE ICONS **/ | |
&-huge { | |
height: 110px; | |
width: 110px; | |
} | |
/** EXTRA-HUGE ICONS **/ | |
&-xhuge { | |
height: 160px; | |
width: 160px; | |
} | |
/** LARGE ICONS **/ | |
&-large { | |
height: 3rem; | |
width: 3rem; | |
} | |
/** MEDIUM ICONS **/ | |
&-medium { | |
height: 2rem; | |
width: 2rem; | |
} | |
/** SMALL ICONS **/ | |
&-small { | |
height: 2rem; | |
width: 2rem; | |
} | |
/** EXTRA-SMALL ICONS **/ | |
&-x-small { | |
height: 1rem; | |
width: 1rem; | |
} | |
/** LARGE ROUND ICONS **/ | |
&-round-large { | |
border-radius: 50%; | |
height: 3rem; | |
width: 3rem; | |
} | |
/** SMALL ROUND ICONS **/ | |
&-round-small { | |
border-radius: 50%; | |
height: 2rem; | |
width: 2rem; | |
} | |
/** SQUARE ICONS **/ | |
&-square { | |
background-color: #f9f9fa; | |
border-radius: 0.125rem; | |
height: 2rem; | |
width: 2rem; | |
} | |
} | |
/** BODY TEXT **/ | |
.text-body { | |
display: inline-block; | |
height: 100%; | |
width: 50%; | |
} | |
/** TEXT **/ | |
.text { | |
background-color: #e9eaec; | |
border-radius: 15rem; | |
display: block; | |
height: 0.5rem; | |
margin-bottom: 0.75rem; | |
/** LAST `.text` ELEMENT **/ | |
&:last-child { | |
margin-bottom: 0; | |
} | |
/** THICK TEXT **/ | |
&-thick { | |
height: 14px; | |
margin: 10px 0; | |
} | |
/** THIN TEXT **/ | |
&-thin { | |
height: 6px; | |
border-radius: 15rem; | |
} | |
/** THINNER TEXT **/ | |
&-thinner { | |
height: 4px; | |
margin: 10px 0; | |
border-radius: 0.125rem; | |
} | |
/** LONG TEXT **/ | |
&-long { | |
width: 100%; | |
} | |
/** MEDIUM TEXT **/ | |
&-medium { | |
width: 60%; | |
} | |
/** SHORT TEXT **/ | |
&-short { | |
width: 45%; | |
} | |
/** SHORTER TEXT **/ | |
&-shorter { | |
width: 20%; | |
} | |
/** TINY TEXT **/ | |
&-tiny { | |
width: 5%; | |
} | |
} | |
/** MULTI-LINE TEXT **/ | |
.multi-text-line { | |
> div { | |
float: left; | |
margin-right: 0.75rem; | |
} | |
} | |
/** IMAGES **/ | |
.image { | |
margin-right: 0.75rem; | |
/** IMAGE BLOCK **/ | |
&-block { | |
background: #f2f2f3; | |
border-radius: .25rem; | |
margin-bottom: 0.75rem; | |
} | |
/** LARGE-SIZED IMAGE(S) **/ | |
&-large { | |
width: 132px; | |
height: 103px; | |
} | |
/** MEGA-SIZED IMAGE(S) **/ | |
&-mega { | |
width: 272px; | |
height: 152px; | |
} | |
/** FULL-SIZED IMAGE(S) **/ | |
&-full { | |
width: 100%; | |
height: 152px; | |
} | |
} | |
/** ANCHORS, BODY & CARDS **/ | |
.anchor, | |
.body, | |
.card { | |
background-color: white; | |
} | |
/** ICONS & TEXT **/ | |
.icon, | |
.text { | |
background-color: #f2f2f3; | |
} | |
/** SPLIT VIEW BODY & ANCHORS **/ | |
&.split_view .body, | |
&.split_view_header .anchor { | |
background-color: #fafaf9; | |
} | |
/** LIST-VIEW HEADER **/ | |
&.list_view_header { | |
padding-bottom: 0.25rem; | |
padding-top: 1px; | |
.anchor { | |
background-color: #fafaf9; | |
} | |
.text-thinner { | |
margin-top: 2rem; | |
} | |
} | |
/** SPLIT-VIEW HEADER **/ | |
&.split_view_header { | |
padding-bottom: 0.5rem; | |
padding-top: 1px; | |
.text-thinner { | |
margin-top: 1.5rem; | |
} | |
} | |
/** DARKER CONTEXT **/ | |
.darker { | |
.icon, | |
.body > .field .text-secondary, | |
.text { | |
background-color: #ccd4e2; | |
} | |
} | |
/** DARK CONTEXT **/ | |
.dark { | |
background-color: #f9f9fa; | |
.icon, | |
.text { | |
background-color: #e9eaec; | |
} | |
} | |
.border-bottom { | |
border-bottom: 1px solid #d9dbdd; | |
} | |
.card { | |
border: 1px solid #f2f2f3; | |
border-radius: 0.25rem; | |
} | |
.text-body-col, | |
.text-body-no-col { | |
display: flex; | |
width: 100%; | |
.text { | |
border-radius: 14px; | |
display: inline-block; | |
height: 0.5rem; | |
margin-bottom: 0.75rem; | |
margin-right: 0.75rem; | |
} | |
} | |
.input-field { | |
border-radius: .25rem; | |
display: inline-block; | |
height: 30px; | |
margin-right: 0.75rem; | |
&.input-text-long { | |
width: 80%; | |
} | |
&.input-text-small { | |
width: 10%; | |
} | |
} | |
.flex { | |
&-grid { | |
display: flex; | |
} | |
&-grow { | |
flex: 1 1 auto; | |
} | |
&-none { | |
flex: 0 0 auto; | |
} | |
&-stack { | |
flex-wrap: wrap; | |
} | |
&-h-center { | |
justify-content: center; | |
} | |
&-v-center { | |
align-items: center; | |
align-items: center; | |
} | |
&-v-start { | |
align-items: flex-start; | |
align-content: flex-start; | |
} | |
} | |
/** HIGHLIGHTED STATE **/ | |
&.highlight { | |
background: #fafaf9; | |
border-bottom: 0.125rem solid #d9dbdd; | |
width: 100%; | |
.anchor { | |
padding: 1rem .75rem; | |
width: 100%; | |
} | |
.icon { | |
margin: 0 auto; | |
} | |
.text-body { | |
text-align: center; | |
margin: 0 auto; | |
padding: 0 0.75rem; | |
} | |
.text-body .text { | |
margin: 0.75rem 0; | |
} | |
.text-body .text-primary { | |
max-width: 175px; | |
} | |
.text-body .text-secondary { | |
max-width: 225px; | |
} | |
.tabs { | |
background: #fafaf9; | |
padding: 1rem 0; | |
margin: 0 auto; | |
} | |
.tabs .tab { | |
margin: 0 2rem; | |
width: 20%; | |
max-width: 60px; | |
display: block; | |
} | |
} | |
/** BUTTONS **/ | |
.button { | |
&.button-small { | |
height: 0; | |
width: 70px; | |
padding: 1rem; | |
margin: 0.5rem 0; | |
} | |
&.button-full-width-small { | |
height: 0; | |
padding: 1rem; | |
margin: 0.5rem 0; | |
} | |
} | |
&.record_home_anchor_vertical .p-bottom--small { | |
margin-bottom: 0.75rem; | |
} | |
&.record_home_anchor_vertical .icon-medium, | |
&.record_home_anchor_vertical .text-thick { | |
vertical-align: middle; | |
} | |
&.record_home_anchor_vertical .text-thick { | |
margin-top: 0; | |
} | |
/** MEDIA QUERIES **/ | |
@media only screen and (min-width: 48em) { | |
.anchor { | |
padding: 1rem 1rem; | |
text-align: left; | |
} | |
.icon, | |
.text-body { | |
vertical-align: middle; | |
} | |
.text-body { | |
margin-left: 1rem; | |
> .text { | |
margin: 0; | |
width: 250px; | |
height: 12px; | |
border-radius: 6px; | |
+ .text { | |
margin: 1rem 0 0 0; | |
width: 325px; | |
height: 8px; | |
border-radius: 0.25rem; | |
} | |
} | |
} | |
.tabs { | |
clear: both; | |
padding: 2rem 0 1rem 0; | |
margin: 0; | |
justify-content: flex-start; | |
} | |
} | |
/** GROUP HIGHLIGHT **/ | |
&.group_highlight { | |
height: 230px; | |
.container { | |
padding-bottom: 30px; | |
position: relative; | |
top: 50px; | |
} | |
.anchor { | |
height: 140px; | |
padding: 1rem; | |
} | |
} | |
/** DETAILS **/ | |
&.detail { | |
background-color: white; | |
.right-column { | |
display: none; | |
} | |
.field { | |
padding: 1.5rem 1rem; | |
/** EVEN FIELD ITEMS **/ | |
&:nth-child(even) .text-secondary { | |
width: 33%; | |
} | |
} | |
.text-secondary { | |
background-color: #e9eaec; | |
} | |
/** MEDIA QUERIES **/ | |
@media only screen and (min-width: 48em) { | |
float: left; | |
width: 100%; | |
clear: both; | |
.left-column, | |
.right-column { | |
float: left; | |
display: block; | |
width: 50%; | |
} | |
.right-column { | |
padding-left: 1.5rem; | |
} | |
} | |
@media only screen and (min-width: 64.0625em) { | |
.text { | |
border-radius: 15rem; | |
height: 0.5rem; | |
} | |
} | |
} | |
/** FIELD MAPPINGS **/ | |
&.fieldMapping { | |
.right-column { | |
padding-left: 0; | |
> .anchor, | |
> .field { | |
border-left: 1px solid #d8dde6; | |
padding-left: 2.5rem; | |
} | |
} | |
> .left-column > .field { | |
padding: 1.25rem 1rem 1.25rem 1rem; | |
} | |
> .right-column > .field { | |
padding: 1.25rem 1rem 1.75rem 2.5rem; | |
} | |
/** MEDIA QUERIES **/ | |
@media only screen and (min-width: 64.0625em) { | |
> .left-column > .field { | |
padding: 1.25rem 1rem 1.25rem 1rem; | |
} | |
> .right-column > .field { | |
padding: 1.25rem 1rem 1.75rem 2.5rem; | |
} | |
} | |
.anchor { | |
border-bottom: 1px solid #d8dde6; | |
padding: 0.125rem 1rem; | |
> .field .text { | |
max-width: 125px; | |
} | |
} | |
> .right-column { | |
> .field { | |
> .text { | |
float: left; | |
margin: 0; | |
&:last-child { | |
float: right; | |
} | |
} | |
> .text-action { | |
border-radius: 50%; | |
height: .625rem; | |
width: .625rem; | |
} | |
} | |
} | |
.content-tabs { | |
padding: 1.5rem 1rem 0 1rem; | |
} | |
.intro { | |
padding: 1.5rem 1rem 0.75rem 1rem; | |
} | |
.body { | |
> .field { | |
padding: 0 1rem; | |
.text { | |
margin: 1rem 0; | |
} | |
.text-primary { | |
max-width: 180px; | |
} | |
.text-secondary { | |
max-width: 210px; | |
background: #e0e5ee; | |
} | |
&:nth-child(odd) { | |
.text-primary { | |
max-width: 265px; | |
} | |
.text-secondary { | |
max-width: 130px; | |
} | |
} | |
} | |
} | |
} | |
&.list { | |
.anchor { | |
padding: 1rem; | |
> .field .text { | |
max-width: 125px; | |
} | |
} | |
} | |
&.list, | |
&.listpreview, | |
&.list_no_header, | |
&.split_view { | |
.body { | |
padding: 0.125rem 0; | |
> .field { | |
padding: 0 1rem; | |
.text { | |
max-width: 125px; | |
} | |
.text-primary { | |
max-width: 180px; | |
} | |
&:nth-child(odd) { | |
.text-primary { | |
max-width: 265px; | |
} | |
} | |
} | |
} | |
} | |
&.split_view { | |
.body { | |
> .field { | |
.text-secondary { | |
max-width: 210px; | |
} | |
} | |
} | |
} | |
&.list, | |
&.listpreview, | |
&.split_view { | |
.body { | |
> .field { | |
.text-secondary { | |
background: #e9eaec; | |
max-width: 210px; | |
} | |
&:nth-child(odd) { | |
.text-secondary { | |
max-width: 130px; | |
} | |
} | |
} | |
} | |
} | |
&.twitter_bird .body { | |
padding: 0.75rem; | |
} | |
&.feed { | |
height: 100%; | |
width: 100%; | |
padding: 1rem 1rem 0; | |
.card { | |
width: 100%; | |
padding: 1rem; | |
margin-bottom: 1rem; | |
border-radius: 0.25rem; | |
.text { | |
margin: 1rem 0; | |
} | |
.text-body:nth-child(odd) { | |
width: 100%; | |
} | |
.actions { | |
border-top: 1px solid #f9f9fa; | |
padding: 1.5rem 0 1rem; | |
.text { | |
float: left; | |
margin: 0; | |
&:last-child { | |
float: right; | |
} | |
} | |
} | |
&:nth-child(even) .text-shorter { | |
width: 15%; | |
} | |
} | |
} | |
&.related, | |
&.relatedInPreview { | |
.card { | |
background: white; | |
border-radius: 0.25rem; | |
height: calc(62px + 2rem + (2 * 1rem)); | |
margin: 1rem; | |
padding: 0.75rem; | |
.field { | |
margin: 0; | |
} | |
.text { | |
border-radius: 3px; | |
max-width: 250px; | |
} | |
&:nth-child(odd) .text { | |
max-width: 175px; | |
width: 60%; | |
} | |
} | |
} | |
&.map { | |
background-image: url('/projRes/ui-force-components/img/map_placeholder.svg'); | |
background-repeat: no-repeat; | |
background-size: cover; | |
bottom: 0; | |
left: 0; | |
position: absolute; | |
right: 0; | |
top: 0; | |
.messagebox { | |
background-color: #061c3f; | |
border-radius: .25rem; | |
display: inline-block; | |
left: 50%; | |
margin-right: -50%; | |
position: absolute; | |
text-align: center; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
width: 60%; | |
.message { | |
color: white; | |
display: inline-block; | |
font-size: 1rem; | |
font-weight: 700; | |
padding: 1.5rem 0; | |
} | |
.checkin { | |
background-image: url('/projRes/ui-force-components/img/checkin.svg'); | |
background-size: cover; | |
float: left; | |
height: 1rem; | |
width: 1rem; | |
} | |
} | |
} | |
&.composer_tabs { | |
background-color: #f9f9fa; | |
border: 2px solid #f9f9fa; | |
padding: 1rem; | |
border-radius: .125rem; | |
height: 124px; | |
.composer { | |
align-items: flex-end; | |
padding: 0; | |
height: 100%; | |
} | |
} | |
&.composer_tabs .composer, | |
&.composer { | |
.input { | |
background: white; | |
border-radius: .125rem; | |
height: 42px; | |
margin-right: 1rem; | |
} | |
.button { | |
width: 70px; | |
height: 42px; | |
background: #e9eaec; | |
border-radius: 0.125rem; | |
} | |
} | |
&.path { | |
display: flex; | |
.pathStencil { | |
width: 100%; | |
z-index: 1; | |
} | |
} | |
div { | |
&.chevron { | |
width: 80%; | |
padding-left: 0.5rem; | |
} | |
ul.list { | |
width: 100%; | |
white-space: nowrap; | |
border-radius: .125rem; | |
overflow: hidden; | |
padding-left: 0; | |
margin: 0; | |
overflow: hidden; | |
border-top-right-radius: 16px; | |
border-bottom-right-radius: 16px; | |
} | |
.chevronButton { | |
width: 20%; | |
margin: 0; | |
max-width: 300px; | |
padding-left: 0.75rem; | |
&:before, | |
&:after { | |
height: 16px; | |
background-color: #f2f2f3; | |
left: -8px; | |
} | |
} | |
.chevronStep { | |
height: 32px; | |
width: 80px; | |
position: relative; | |
text-align: center; | |
flex: 1 1 11%; | |
min-width: 80px; | |
margin-left: 5px; | |
background-color: transparent; | |
list-style: none; | |
&:first-child, | |
&:last-child { | |
padding-left: 0; | |
padding-right: 0; | |
} | |
&:first-child { | |
overflow: hidden; | |
border-top-left-radius: 16px; | |
border-bottom-left-radius: 16px; | |
} | |
&:last-child { | |
border-top-right-radius: 16px; | |
border-bottom-right-radius: 16px; | |
} | |
&:before { | |
border-bottom-left-radius: 1px; | |
border-bottom-right-radius: 1px; | |
border-bottom: 0; | |
border-top-left-radius: .125rem; | |
border-top-right-radius: .125rem; | |
border: 1px solid transparent; | |
content: ''; | |
height: 16px; | |
left: -8px; | |
position: absolute; | |
top: 0; | |
transform: skew(30deg); | |
width: 100%; | |
z-index: -1; | |
} | |
&:after { | |
border-bottom-left-radius: .125rem; | |
border-bottom-right-radius: 0.125rem; | |
border-top-left-radius: 1px; | |
border-top-right-radius: 1px; | |
border-top: 0; | |
border: 1px solid transparent; | |
content: ''; | |
height: 16px; | |
left: -8px; | |
position: absolute; | |
top: 16px; | |
transform: skew(-30deg); | |
width: 100%; | |
z-index: -1; | |
} | |
&:last-child { | |
&:before, | |
:after { | |
width: 200%; | |
} | |
} | |
&:before { | |
transform: skew(45deg); | |
} | |
&:after { | |
top: 16px; | |
transform: skew(-45deg); | |
} | |
} | |
} | |
&.record_home_anchor { | |
.body { | |
height: 144px; | |
padding: 1.5rem 1.5rem 0 1.5rem; | |
box-sizing: border-box; | |
border-radius: 0.125rem; | |
> .text-body { | |
height: 2rem; | |
margin-bottom: 0; | |
} | |
} | |
.below-text-body { | |
background-color: white; | |
border-bottom: 1px solid #f2f2f3; | |
margin: 0.75rem -1.25rem -0.25rem; | |
padding-bottom: 0.25rem; | |
padding: 1rem 1rem; | |
> .text-body { | |
width: 10%; | |
} | |
.text-body { | |
margin: 0 2rem 0 0; | |
} | |
.icon { | |
vertical-align: top; | |
} | |
} | |
} | |
&.preview_panel_anchor { | |
.body { | |
padding: 1rem; | |
> .text-body { | |
height: 3rem; | |
} | |
} | |
.text-body { | |
width: 80%; | |
} | |
.below-text-body { | |
margin: 0.5rem 0 0 60px; | |
> .text-body { | |
margin-right: 0.75rem; | |
width: 40%; | |
} | |
} | |
} | |
&.related_record .text-body { | |
width: 90%; | |
} | |
&.publisher .body { | |
padding: 28px 0 0 70px; | |
} | |
&.table_list_line_item .body { | |
padding: 1rem 1.5rem 0.3rem; | |
} | |
&.event_card .body > .text-body { | |
width: 100%; | |
} | |
&.event_card .text-body-no-col:nth-child(even) { | |
margin-top: 25px; | |
} | |
&.top_deals .icon { | |
width: 26px; | |
height: 10px; | |
vertical-align: top; | |
} | |
&.stencil_account_news_compact .image { | |
max-width: 272px; | |
} | |
&.setup_card .body { | |
width: 300px; | |
padding: 18px; | |
} | |
&.setup_card .icon { | |
margin: 5px auto 1rem; | |
} | |
&.setup_card .text-body { | |
display: block; | |
width: 80%; | |
height: 100%; | |
text-align: center; | |
margin-left: auto; | |
margin-right: auto; | |
} | |
&.setup_card .text-body .text { | |
margin-left: auto; | |
margin-right: auto; | |
} | |
&.app_detail .sidebar { | |
float: left; | |
width: calc(208px + 2rem); | |
margin: 2rem; | |
} | |
&.app_detail .main { | |
float: right; | |
width: calc(100% - 208px - (4 * 2rem)); | |
margin-top: calc(3 * 2rem); | |
} | |
&.app_detail .text-body { | |
vertical-align: top; | |
} | |
&.app_detail .main > div { | |
border-top: 1px solid #d9dbdd; | |
padding: 1.5rem 0 0.5rem 0; | |
} | |
&.empty_chart { | |
background: white; | |
margin-left: 39px; | |
margin-right: 28px; | |
} | |
&.empty_chart .body { | |
height: 275px; | |
position: relative; | |
width: 100%; | |
background: repeating-linear-gradient(to right, transparent 0px, transparent 250px, #eef1f6 251px), | |
repeating-linear-gradient(to top, transparent 0px, transparent 56px, #eef1f6 57px); | |
} | |
&.empty_chart .body:before { | |
content: ""; | |
display: block; | |
width: 1px; | |
height: 100%; | |
background-color: #d9dbdd; | |
position: absolute; | |
top: 0; | |
left: 3px; | |
} | |
&.empty_chart .body:after { | |
content: ""; | |
display: block; | |
width: 100%; | |
height: 1px; | |
background-color: #d9dbdd; | |
position: absolute; | |
bottom: 3px; | |
right: 0; | |
} | |
&.dashboard_card .body { | |
width: 300px; | |
height: 175px; | |
padding: 18px; | |
} | |
&.dashboard_card .text-body { | |
width: 100%; | |
} | |
&.dashboard_card .svg { | |
height: 100%; | |
} | |
&.pipelineView { | |
padding-left: .5rem; | |
padding-right: 0.5rem; | |
} | |
&.pipelineView .pipelineView-column .stageHeader { | |
position: relative; | |
padding: 1.25rem .5rem 1.25rem .5rem; | |
background: #e9eaec; | |
} | |
&.pipelineView .pipelineView-column:first-of-type .stageHeader { | |
border-radius: 15rem 0 0 15rem; | |
} | |
&.pipelineView .pipelineView-column:last-of-type .stageHeader { | |
border-radius: 0 15rem 15rem 0; | |
} | |
&.pipelineView .pipelineView-column .stageHeader:before { | |
content: ""; | |
position: absolute; | |
left: -1rem; | |
top: .275rem; | |
display: block; | |
width: 1.85rem; | |
height: 1.85rem; | |
border: 2px solid #fff; | |
border-left: none; | |
border-bottom: none; | |
transform: rotate(45deg); | |
} | |
&.pipelineView .pipelineView-column:first-of-type .stageHeader:before { | |
content: none; | |
} | |
&.pipelineView .pipelineView-column .stageAggregateValue { | |
padding: .5rem 0; | |
border-left: #d9dbdd 1px solid; | |
height: 1.5rem; | |
} | |
&.pipelineView .pipelineView-column:last-of-type .stageAggregateValue, | |
&.pipelineView .pipelineView-column:last-of-type .listContent { | |
border-right: #d9dbdd 1px solid; | |
} | |
&.pipelineView .pipelineView-column .listContent { | |
border-left: #d9dbdd 1px solid; | |
} | |
&.pipelineView .pipelineView-column .listContent ul { | |
padding: 0; | |
margin: 0; | |
list-style-type: none; | |
} | |
&.pipelineView .text-body { | |
margin: .5rem; | |
padding: .5rem; | |
border: #d9dbdd 1px solid; | |
border-radius: .25rem; | |
width: 100%; | |
} | |
&.object_home_list_anchor .body { | |
padding: 0; | |
} | |
&.object_home_list_anchor .entity { | |
padding-top: .25rem; | |
padding-bottom: 1rem; | |
} | |
&.object_home_list_anchor .title { | |
padding-bottom: .75rem; | |
margin-bottom: 0.125rem; | |
} | |
&.object_home_list_anchor .title .text-thick { | |
margin: 0; | |
} | |
&.object_home_list_summary .body { | |
padding: 0; | |
} | |
&.object_home_list_summary .text-body-col { | |
padding-top: .5rem; | |
margin-bottom: 5px; | |
} | |
&.lead_insights_hover .slds-popover__header { | |
height: 81px; | |
background: #e9eaec; | |
border-bottom: 1px solid #d9dbdd; | |
} | |
&.lead_insights_hover .lead-insights-body { | |
border: 1px solid #d9dbdd; | |
border-radius: .25rem; | |
margin: 0.75rem 0.75rem; | |
} | |
&.lead_insights_hover .lead-insights-body .table-header { | |
height: 31px; | |
background: #e9eaec; | |
margin: 0; | |
} | |
&.lead_insights_hover .lead-insights-body .table-body { | |
height: 167px; | |
} | |
&.lead_insights_hover .lead-insights-footer { | |
margin: 0 0.75rem; | |
} | |
&.lead_insights_hover .lead-insights-footer .button:first-child { | |
margin-right: 2px; | |
} | |
&.lead_insights_hover .lead-insights-footer .button:last-child { | |
margin: 0 -1px; | |
} | |
&.lead_insights_hover .lead-insights-footer .slds-button { | |
flex: 1 1 auto; | |
background: #e9eaec; | |
margin-top: 0; | |
} | |
&.lead_insights_record_home { | |
padding: 0.75rem 1rem; | |
} | |
&.lead_insights_record_home .score-container { | |
height: 81px; | |
background: #e9eaec; | |
border-bottom: 1px solid #d9dbdd; | |
} | |
&.lead_insights_record_home .lead-insights-body { | |
border: 1px solid #d9dbdd; | |
border-radius: .25rem; | |
margin: 0 1rem 0.5rem; | |
} | |
&.lead_insights_record_home .lead-insights-body .table-header { | |
height: 31px; | |
background: #e9eaec; | |
margin: 0; | |
} | |
&.lead_insights_record_home .lead-insights-body .table-body { | |
height: 167px; | |
} | |
&.lead_insights_record_home .lead-insights-footer { | |
margin: 0 0.75rem; | |
} | |
&.lead_insights_record_home .lead-insights-footer .button:first-child { | |
margin-right: 2px; | |
} | |
&.lead_insights_record_home .lead-insights-footer .button:last-child { | |
margin: 0 -1px; | |
} | |
&.lead_insights_record_home .lead-insights-footer .slds-button { | |
flex: 1 1 auto; | |
background: #e9eaec; | |
margin-top: 0; | |
border: 0; | |
} | |
} | |
/** OPACITY **/ | |
.opacity { | |
&95 { | |
opacity: 0.95; | |
} | |
&90 { | |
opacity: 0.9; | |
} | |
&85 { | |
opacity: 0.85; | |
} | |
&80 { | |
opacity: 0.8; | |
} | |
&75 { | |
opacity: 0.75; | |
} | |
&70 { | |
opacity: 0.7; | |
} | |
&65 { | |
opacity: 0.65; | |
} | |
&60 { | |
opacity: 0.6; | |
} | |
&55 { | |
opacity: 0.55; | |
} | |
&50 { | |
opacity: 0.5; | |
} | |
&45 { | |
opacity: 0.45; | |
} | |
&40 { | |
opacity: 0.4; | |
} | |
&35 { | |
opacity: 0.35; | |
} | |
&30 { | |
opacity: 0.3; | |
} | |
&25 { | |
opacity: 0.25; | |
} | |
&20 { | |
opacity: 0.2; | |
} | |
&15 { | |
opacity: 0.15; | |
} | |
&10 { | |
opacity: 0.1; | |
} | |
&5 { | |
opacity: 0.05; | |
} | |
&0 { | |
opacity: 0; | |
} | |
} | |
} | |
/// | |
/// SALESFORCE RETRY PANEL | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceRetryPanel { | |
align-items: center; | |
display: flex; | |
flex-direction: column; | |
height: 100%; | |
height: 100%; | |
justify-content: center; | |
min-height: 190px; | |
width: 100%; | |
.slds-icon { | |
fill: #e9eaec; | |
} | |
.description { | |
font-size: .875rem; | |
font-weight: 400; | |
color: #6b6d70; | |
margin: 1rem 0; | |
} | |
&.forceInlineSpinner { | |
position: absolute; | |
right: 0; | |
left: 0; | |
top: 50%; | |
z-index: 1001; | |
} | |
.oneApplicationError { | |
strong { | |
font-weight: 700; | |
} | |
.uiInputTextArea { | |
margin-top: 0.75rem; | |
} | |
.uiLabel { | |
display: inline-block; | |
margin-bottom: 0.5rem; | |
} | |
.textarea { | |
display: block; | |
margin: 0; | |
} | |
.details-ctr { | |
margin-top: 0.75rem; | |
} | |
.uiInput.details { | |
font-family: monospace; | |
font-size: .815rem; | |
height: 15rem; | |
line-height: 1.5; | |
resize: vertical; | |
transition: none; | |
transition-property: border, height, padding; | |
transition-duration: .2s; | |
transition-timing-function: ease-in-out; | |
white-space: pre-wrap; | |
} | |
.collapsed .details { | |
border: 0; | |
height: 0 !important; | |
padding: 0; | |
resize: none; | |
} | |
.details-ctr { | |
.uiButton { | |
&, | |
&:active, | |
&:hover { | |
background: 0; | |
border: 0; | |
border-radius: 0; | |
color: inherit; | |
font-family: inherit; | |
font-size: inherit; | |
line-height: inherit; | |
padding: 0; | |
text-decoration: none; | |
} | |
.label { | |
float: left; | |
} | |
} | |
.forceIcon { | |
display: block; | |
float: left; | |
margin-left: .25rem; | |
margin-top: 1px; | |
transform: rotate(90deg); | |
transition: transform 0.2s linear; | |
} | |
&.collapsed .forceIcon { | |
transform: none; | |
} | |
} | |
} | |
} | |
/// | |
/// DATEPICKERS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiDayInMonthCell{ | |
&--default { | |
background-color: #fff; | |
color: #696e71; | |
display: block; | |
font-family: 'ProximaNovaSoft-Regular'; | |
font-size: 20px; | |
height: 50px; | |
width: 50px; | |
line-height: 50px; | |
text-align: center; | |
&.DESKTOP { | |
&:active, | |
&:focus, | |
&:hover { | |
background-color: #e1e1e1; | |
text-shadow: 0 1px 0 white; | |
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35); | |
outline: 1px solid #666; | |
cursor: pointer; | |
} | |
} | |
&.prevMonth, | |
&.nextMonth { | |
background-color: #fafafa; | |
color: #696e71; | |
} | |
&.todayDate { | |
background-color: #747474; | |
box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.35); | |
color: #fff; | |
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.35); | |
} | |
&.selectedDate, | |
&.start-date:not(.selectedDate), | |
&.end-date:not(.selectedDate) { | |
background-color: #3f9fd9; | |
background: linear-gradient(#3f9fd9, #2789c7); | |
box-shadow: none; | |
box-sizing: border-box; | |
padding: 1px; | |
color: #fff; | |
} | |
&.highlight:not(.selectedDate):not(.start-date):not(.end-date) { | |
box-sizing: border-box; | |
background-color: #fff; | |
color: #3f9fd9; | |
border: 1px solid #3f9fd9; | |
} | |
/** MEDIA QUERIES **/ | |
@media only screen and (max-width: 999px) and (orientation: portrait) { | |
width: 100%; | |
height: 45px; | |
line-height: 45px; | |
} | |
} | |
} | |
/// | |
/// IMAGES | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiImage.empty { | |
background-image: url('/auraFW/resources/aura/s.gif'); | |
} | |
/// | |
/// SELECT INPUTS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiInputSelect { | |
.uiMenuList { | |
width: 100%; | |
} | |
.uiPopupTrigger a:hover { | |
text-decoration: none; | |
} | |
> .uiMenu { | |
position: inherit; | |
} | |
} | |
/// | |
/// DATEPICKERS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiDatePickerGrid { | |
&--default { | |
thead { | |
background-color: #f0f1f2; | |
border-bottom: 1px solid #f0f1f2; | |
} | |
.calGrid { | |
border-collapse: collapse; | |
th { | |
color: #696e71; | |
font-size: 12px; | |
font-family: 'ProximaNovaSoft-Semibold'; | |
padding: 7px; | |
text-align: center; | |
} | |
td { | |
text-align: center; | |
} | |
.calRow td { | |
border: 1px solid #eceef0; | |
} | |
} | |
@media only screen and (max-width: 999px) and (orientation: portrait) { | |
.calGrid { | |
border-collapse: collapse; | |
width: 100%; | |
height: 100%; | |
} | |
} | |
.slds-show--inline-block { | |
display: inline-block; | |
} | |
.slds-text-link { | |
color: #0070d2; | |
text-decoration: none; | |
transition: color .1s linear; | |
height: 50px; | |
line-height: 50px; | |
cursor: pointer; | |
} | |
} | |
} | |
div.uiTimePicker { | |
display: inline-block; | |
text-align: center; | |
white-space: nowrap; | |
.input { | |
&.input-hours, | |
&.input-minutes { | |
font-size: 45px; | |
font-family: 'ProximaNovaSoft-Regular'; | |
color: #3c3d3e; | |
text-align: center; | |
vertical-align: middle; | |
border: 1px solid #bbc0c4; | |
border-radius: 5px; | |
background-color: #ffffff; | |
box-shadow: inset 0 2px 2px 0 rgba(0, 0, 0, 0.05); | |
height: 80px; | |
width: 80px; | |
margin: 14px 5px; | |
} | |
&.error { | |
border-color: red; | |
background-color: rgba(255, 0, 0, 0.025); | |
} | |
} | |
select{ | |
&.ampm { | |
font-size: 36px; | |
font-family: 'ProximaNovaSoft-Regular'; | |
color: #006eb3; | |
padding: 0 0 0 5px; | |
margin: 0; | |
width: auto; | |
border: 0; | |
vertical-align: middle; | |
background-color: #f0f1f2; | |
background-image: none; | |
box-shadow: none; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
} | |
} | |
.time-separator { | |
width: 6px; | |
height: 18px; | |
} | |
@media only screen and (max-width: 999px) and (orientation: portrait) { | |
input { | |
.input-hours, | |
.input-minutes { | |
height: 40px; | |
width: 40px; | |
font-size: 30px; | |
padding: 7px; | |
box-sizing: content-box; | |
} | |
} | |
select { | |
.ampm { | |
font-size: 20px; | |
} | |
} | |
} | |
} | |
.uiDatePicker { | |
opacity: 0; | |
display: block; | |
position: absolute; | |
&.visible { | |
opacity: 1; | |
display: block; | |
} | |
} | |
div.uiDatePicker { | |
&--default { | |
background-color: #fff; | |
border-radius: 8px 8px 0 0; | |
display: none; | |
position: absolute; | |
z-index: 9999; | |
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); | |
&.PHONE { | |
position: fixed; | |
top: 0; | |
width: 100%; | |
.scroller { | |
overflow-y: auto; | |
-webkit-overflow-scrolling: touch; | |
overflow: scroll; | |
} | |
} | |
.headerBar { | |
background-color: #6495ed; | |
background: linear-gradient(#2a93d5, #107abb); | |
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.21); | |
border-radius: 8px 8px 0 0; | |
font-size: 13px; | |
font-family: 'ProximaNovaSoft-Regular'; | |
height: 42px; | |
a { | |
color: #fffffe; | |
margin-top: 7px; | |
padding: 0 14px; | |
} | |
.calCancel { | |
display: inline-block; | |
float: left; | |
margin-left: 10px; | |
text-align: left; | |
height: 26px; | |
line-height: 24px !important; | |
} | |
.calSet { | |
display: inline-block; | |
float: right; | |
margin-right: 10px; | |
text-align: right; | |
height: 26px; | |
line-height: 24px !important; | |
} | |
} | |
a.button { | |
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), inset 0 1px rgba(255, 255, 255, 0.21); | |
border: 1px solid #0c72b2; | |
border-radius: 5px; | |
background-color: #2891d3; | |
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2891d3), to(#1983c5)); | |
background-image: -webkit-linear-gradient(top, #2891d3, #1983c5); | |
background-image: -moz-linear-gradient(top, #2891d3, #1983c5); | |
background-image: -ms-linear-gradient(top, #2891d3, #1983c5); | |
background-image: -o-linear-gradient(top, #2891d3, #1983c5); | |
} | |
a { | |
text-decoration: none; | |
} | |
.dateBar { | |
background-color: #f0f1f2; | |
text-align: center; | |
padding: 14px 14px 7px 14px; | |
.prevLinks { | |
float: left; | |
text-align: left; | |
} | |
.nextLinks { | |
float: right; | |
text-align: right; | |
} | |
.navLink { | |
background: url("/auraFW/resources/aura/images/bg-arrows.png") no-repeat 0 7px; | |
border: 1px solid transparent; | |
display: inline-block; | |
height: 20px; | |
width: 23px; | |
&:hover { | |
background-color: #e1e1e1; | |
border-color: #aeaeae; | |
box-shadow: inset 0 1px 0 white, 0 2px 2px rgba(0, 0, 0, 0.25); | |
outline: none; | |
} | |
} | |
.prevYear { | |
background-position: 6px 7px; | |
margin-left: 5px; | |
&:focus, | |
&:hover { | |
background-position: 6px -23px; | |
} | |
} | |
.prevMonth { | |
background-position: -26px 7px; | |
&:focus, | |
&:hover { | |
background-position: -26px -23px; | |
} | |
} | |
.nextMonth { | |
background-position: -66px 7px; | |
&:focus, | |
&:hover { | |
background-position: -66px -23px; | |
} | |
} | |
.nextYear { | |
background-position: -98px 7px; | |
margin-right: 5px; | |
&:focus, | |
&:hover { | |
background-position: -98px -23px; | |
} | |
} | |
.monthYear { | |
&, | |
span { | |
font-family: ProximaNovaSoft-Bold, Arial, sans-serif; | |
font-size: 18px; | |
color: #3c3d3e; | |
line-height: 24px !important; | |
} | |
} | |
select { | |
color: #006eb3; | |
font-family: ProximaNovaSoft-Bold, Arial, sans-serif; | |
font-size: 18px; | |
line-height: 24px !important; | |
padding: 0 0 0 5px; | |
margin: 0; | |
width: auto; | |
border: 0; | |
vertical-align: baseline; | |
background-color: #f0f1f2; | |
background-image: none; | |
box-shadow: none; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
} | |
.monthYear { | |
font-family: ProximaNovaSoft-Bold, Arial, sans-serif; | |
font-size: 18px; | |
color: #3c3d3e; | |
line-height: 24px !important; | |
} | |
} | |
&.DESKTOP .datepicker__filter--month { | |
float: left; | |
width: 75%; | |
} | |
.buttonBar { | |
text-align: center; | |
padding: 7px; | |
} | |
.timeBar { | |
display: inline-block; | |
width: 100%; | |
text-align: center; | |
background-color: #f0f1f2; | |
} | |
@media only screen and (max-width: 999px) and (orientation: portrait) { | |
.dateBar { | |
.navLink { | |
padding: 3px; | |
&.prevMonth { | |
background: url("/auraFW/resources/aura/images/arrow-left.png") no-repeat; | |
} | |
&.nextMonth { | |
background: url("/auraFW/resources/aura/images/arrow-right.png") no-repeat; | |
} | |
&.prevMonth, | |
&.nextMonth { | |
background-size: 12px 14px; | |
background-position: center; | |
&:focus, | |
&:hover { | |
background-position: center; | |
} | |
} | |
&:hover { | |
border-color: transparent; | |
box-shadow: none; | |
} | |
} | |
} | |
.headerBar { | |
.calCancel { | |
display: inline-block; | |
float: left; | |
margin-left: 7px; | |
text-align: left; | |
line-height: 28px !important; | |
} | |
.calSet { | |
display: inline-block; | |
float: right; | |
margin-right: 7px; | |
text-align: right; | |
} | |
} | |
} | |
} | |
} | |
.uiInputDateHtml input { | |
min-height: 41px; | |
} | |
/// | |
/// SPINNERS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceDotsSpinner .slds-spinner.slds-spinner_inline { | |
height: auto; | |
} | |
.forceInlinePulsingSpinner { | |
position: relative; | |
width: 20px; | |
height: 20px; | |
margin: 0 auto; | |
span { | |
position: absolute; | |
display: block; | |
height: 5px; | |
width: 2px; | |
border-radius: 1px; | |
background-color: #d1d1d5; | |
&:nth-of-type(1) { | |
transform: translate(9px, 0); | |
animation: pulseFade 1s infinite linear; | |
} | |
&:nth-of-type(2) { | |
transform: translate(13px, 1px) rotate(30deg); | |
animation: pulseFade 1s 0.083s infinite linear; | |
} | |
&:nth-of-type(3) { | |
transform: translate(16px, 4px) rotate(60deg); | |
animation: pulseFade 1s 0.166s infinite linear; | |
} | |
&:nth-of-type(4) { | |
transform: translate(17px, 8px) rotate(90deg); | |
animation: pulseFade 1s 0.249s infinite linear; | |
} | |
&:nth-of-type(5) { | |
transform: translate(16px, 12px) rotate(120deg); | |
animation: pulseFade 1s 0.332s infinite linear; | |
} | |
&:nth-of-type(6) { | |
transform: translate(13px, 15px) rotate(150deg); | |
animation: pulseFade 1s 0.415s infinite linear; | |
} | |
&:nth-of-type(7) { | |
transform: translate(9px, 16px) rotate(180deg); | |
animation: pulseFade 1s 0.498s infinite linear; | |
} | |
&:nth-of-type(8) { | |
transform: translate(5px, 15px) rotate(210deg); | |
animation: pulseFade 1s 0.581s infinite linear; | |
} | |
&:nth-of-type(9) { | |
transform: translate(2px, 12px) rotate(240deg); | |
animation: pulseFade 1s 0.664s infinite linear; | |
} | |
&:nth-of-type(10) { | |
transform: translate(1px, 8px) rotate(270deg); | |
animation: pulseFade 1s 0.747s infinite linear; | |
} | |
&:nth-of-type(11) { | |
transform: translate(2px, 4px) rotate(300deg); | |
animation: pulseFade 1s 0.83s infinite linear; | |
} | |
&:nth-of-type(12) { | |
transform: translate(5px, 1px) rotate(330deg); | |
animation: pulseFade 1s 0.913s infinite linear; | |
} | |
} | |
&.large { | |
width: 35px; | |
height: 35px; | |
span { | |
height: 9px; | |
width: 3px; | |
border-radius: 2px; | |
&:nth-of-type(1) { | |
transform: translate(16px, 0px); | |
} | |
&:nth-of-type(2) { | |
transform: translate(22px, 2px) rotate(30deg); | |
} | |
&:nth-of-type(3) { | |
transform: translate(27px, 7px) rotate(60deg); | |
} | |
&:nth-of-type(4) { | |
transform: translate(29px, 13px) rotate(90deg); | |
} | |
&:nth-of-type(5) { | |
transform: translate(27px, 19px) rotate(120deg); | |
} | |
&:nth-of-type(6) { | |
transform: translate(22px, 24px) rotate(150deg); | |
} | |
&:nth-of-type(7) { | |
transform: translate(16px, 26px) rotate(180deg); | |
} | |
&:nth-of-type(8) { | |
transform: translate(10px, 24px) rotate(210deg); | |
} | |
&:nth-of-type(9) { | |
transform: translate(5px, 19px) rotate(240deg); | |
} | |
&:nth-of-type(10) { | |
transform: translate(3px, 13px) rotate(270deg); | |
} | |
&:nth-of-type(11) { | |
transform: translate(5px, 7px) rotate(300deg); | |
} | |
&:nth-of-type(12) { | |
transform: translate(10px, 2px) rotate(330deg); | |
} | |
} | |
} | |
} | |
@keyframes pulseFade { | |
from { | |
background-color: #d1d1d5; | |
} | |
50% { | |
background-color: #959598; | |
} | |
} | |
.forceInlineRotatingSpinner { | |
position: relative; | |
margin: 0 auto; | |
border-radius: 50%; | |
overflow: hidden; | |
width: 24px; | |
height: 24px; | |
&.large { | |
width: 30px; | |
height: 30px; | |
} | |
svg { | |
animation: rotateFade 0.3s infinite linear; | |
} | |
} | |
@keyframes rotateFade { | |
from { | |
transform: rotate(0); | |
} | |
to { | |
transform: rotate(-1turn); | |
} | |
} | |
.forceLoadingLaser { | |
display: block; | |
height: 3px; | |
width: 100%; | |
position: relative; | |
overflow: hidden; | |
top: -3px; | |
span { | |
display: block; | |
position: absolute; | |
height: 3px; | |
} | |
> span { | |
width: 100%; | |
top: 0; | |
background-color: rgba(0, 0, 0, 0.15); | |
animation: visibility 0.1s linear 0s; | |
} | |
.highlightWrapper { | |
width: 100%; | |
transform: translateX(-300px); | |
animation: slide 1.5s linear 0.1s infinite; | |
} | |
.highlight { | |
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); | |
width: 300px; | |
} | |
} | |
@keyframes visibility { | |
from { | |
top: -3px; | |
} | |
to { | |
top: 0; | |
} | |
} | |
@keyframes slide { | |
from { | |
transform: translateX(-300px); | |
} | |
to { | |
transform: translateX(100%); | |
} | |
} | |
/// | |
/// DATE + FILE INPUTS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
div.uiInputDate { | |
position: relative; | |
} | |
.uiInputDate { | |
+ .display, | |
.display { | |
display: inline-block; | |
} | |
+ .hide, | |
.hide { | |
display: none; | |
} | |
} | |
.uiInputDateTimeHtml input { | |
min-height: 41px; | |
} | |
.uiInputFileDroppableZone { | |
&.droppable-zone { | |
padding: 15px; | |
border: 2px dashed #ccc; | |
} | |
&.droppable-zone.drag-over { | |
border-color: green; | |
} | |
} | |
.uiInputFileFilesList { | |
&.input-file-header { | |
margin: 15px 0 5px 0; | |
font-weight: bold; | |
} | |
&.input-file-list { | |
list-style: none; | |
padding: 0; | |
margin: 0; | |
} | |
&.input-file-list li:not(:last-child) { | |
margin-bottom: 5px; | |
} | |
.input-file-file-size { | |
color: #ccc; | |
font-style: italic; | |
} | |
} | |
.uiInputTimePicker { | |
&.visible { | |
opacity: 1; | |
display: block; | |
} | |
&--default { | |
display: none; | |
top: 0; | |
position: absolute; | |
font: 100%/1.5 "Salesforce Sans", Arial, sans-serif; | |
z-index: 9999; | |
ol, | |
ul { | |
margin: 0; | |
padding: 0; | |
list-style: none; | |
} | |
.dropdown { | |
background: white; | |
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.16); | |
border: 1px solid #d8dde6; | |
border-radius: .25rem; | |
padding: .5rem 0; | |
z-index: 7000; | |
float: left; | |
min-width: 130px; | |
max-width: 400px; | |
transform: translateX(-50%); | |
&--left { | |
left: 0; | |
transform: translateX(0); | |
} | |
} | |
.datepicker { | |
padding: .75rem .5rem; | |
font-size: 0.75rem; | |
&--time { | |
padding: .75rem 0; | |
font-size: 0.875rem; | |
&__list { | |
max-height: 13.5rem; | |
overflow-y: auto; | |
outline: 0; | |
> li { | |
padding: .5rem; | |
padding-left: 2rem; | |
&:focus { | |
background: #005fb2; | |
color: white; | |
text-decoration: none; | |
outline: 0; | |
} | |
} | |
} | |
} | |
} | |
} | |
} | |
/// | |
/// INLINE SPINNERS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceInlineSpinner { | |
&.indicator { | |
text-align: center; | |
display: block; | |
} | |
&.hideEl { | |
display: none; | |
} | |
> * { | |
animation: delayRender 0s linear 0.3s both; | |
} | |
} | |
@keyframes delayRender { | |
from { | |
visibility: hidden; | |
} | |
to { | |
visibility: visible; | |
} | |
} | |
/// | |
/// DATE RANGES | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiInputDateRange { | |
&.wrapper, | |
.wrapper { | |
display: flex; | |
} | |
+ .datePicker-openIcon, | |
.datePicker-openIcon { | |
position: relative; | |
vertical-align: middle; | |
left: -22px; | |
width: 12px; | |
height: 15px; | |
background: url("/auraFW/resources/aura/images/icon_openCalendar.png") no-repeat 0 0; | |
} | |
+ .display, | |
.display { | |
display: inline-block; | |
} | |
+ .hide, | |
.hide { | |
display: none; | |
} | |
.startDate, | |
.endDate { | |
display: flex; | |
width: 50%; | |
} | |
.startDate { | |
> a.datePicker-openIcon { | |
right: 50%; | |
} | |
} | |
&:not(.wrapper) { | |
position: relative; | |
} | |
} | |
/// | |
/// DATE + TIME INPUTS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiInputDateTime { | |
+ .display, | |
.display { | |
display: inline-block; | |
} | |
+ .hide, | |
.hide { | |
display: none; | |
} | |
&.form--stacked, | |
.form--stacked { | |
display: flex; | |
align-items: flex-start; | |
justify-content: space-between; | |
} | |
.dateTime-inputDate { | |
width: 50%; | |
} | |
.dateTime-inputTime { | |
width: 50%; | |
margin-left: 8px; | |
} | |
} | |
/// | |
/// FILE INPUTS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiInputFile .hidden-input-file { | |
position: absolute; | |
width: 1px; | |
height: 1px; | |
} | |
/// | |
/// SEARCH INPUTS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiInputSearch { | |
position: relative; | |
display: inline-block; | |
input { | |
padding-right: 30px; | |
line-height: normal; | |
&::-webkit-search-cancel-button { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
} | |
&[type=text]::-ms-clear { | |
display: none; | |
} | |
&[type=text]::-ms-reveal { | |
display: none; | |
} | |
} | |
.clear { | |
background: transparent url(/auraFW/resources/aura/images/clear.png) no-repeat; | |
height: 15px; | |
width: 15px; | |
border: 0; | |
outline: 0; | |
right: 4px; | |
position: absolute; | |
top: 50%; | |
transform: translateY(-50%); | |
box-shadow: none; | |
padding: inherit; | |
margin: 0; | |
} | |
.hide { | |
display: none; | |
} | |
} | |
/// | |
/// AUTOCOMPLETE INPUTS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiInputTextAreaForAutocomplete, | |
.uiInputTextForAutocomplete { | |
.autocompleteButton { | |
background: transparent; | |
border: none; | |
outline: none; | |
box-shadow: none; | |
} | |
} | |
/// | |
/// OUTPUT VALIDATIONS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiOutputCheckbox img { | |
&.checked, | |
&.unchecked { | |
height: 17px; | |
width: 17px; | |
} | |
&.checked { | |
background: transparent url('/auraFW/resources/aura/images/smallcheck-checked.png') no-repeat; | |
} | |
&.unchecked { | |
background: transparent url('/auraFW/resources/aura/images/smallcheck.png') no-repeat; | |
height: 17px; | |
width: 17px; | |
} | |
} | |
.uiOutputEmail.invalid { | |
color: red; | |
} | |
.uiOutputLabel { | |
vertical-align: top; | |
font-weight: bold; | |
} | |
.uiOutputRichText { | |
em { | |
font-style: italic; | |
} | |
strong { | |
font-weight: bold; | |
} | |
} | |
.uiOutputTextArea { | |
white-space: pre-line; | |
} | |
.uiOutputURL.disabled { | |
cursor: default; | |
pointer-events: none; | |
text-decoration: none; | |
} | |
/// | |
/// VIRTUAL DATA GRID | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiVirtualDataGrid { | |
&.fixedHeaderTable tbody { | |
display: block; | |
overflow: auto; | |
} | |
&.resizable-cols { | |
display: block; | |
table-layout: fixed; | |
.handle { | |
display: inline-block; | |
position: relative; | |
flex: none; | |
text-align: left; | |
&:hover { | |
cursor: col-resize; | |
} | |
[type=range] { | |
width: 1px; | |
height: 1px; | |
border: 0; | |
clip: rect(0 0 0 0); | |
margin: -1px; | |
overflow: hidden; | |
padding: 0; | |
position: absolute; | |
&:focus ~ .resize-button { | |
display: block; | |
} | |
} | |
} | |
th { | |
.resize-button { | |
height: 100%; | |
position: absolute; | |
right: 0; | |
opacity: 0; | |
cursor: col-resize; | |
display: inline-block; | |
&:hover { | |
opacity: 1; | |
} | |
} | |
.header-wrapper { | |
display: flex; | |
position: relative; | |
align-items: stretch; | |
} | |
.content { | |
flex-grow: 1; | |
box-flex: 1; | |
} | |
div, | |
span { | |
box-sizing: border-box; | |
} | |
} | |
&.indicator { | |
position: absolute; | |
display: none; | |
cursor: col-resize; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
&.active { | |
display: block; | |
} | |
} | |
&.handle [type=range]:focus ~ .resize-button, | |
&.indicator { | |
.column-divider { | |
position: absolute; | |
height: 100vh; | |
} | |
} | |
&.resizing { | |
cursor: col-resize; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
} | |
&--default { | |
tbody, | |
thead, | |
tr, | |
th, | |
td { | |
vertical-align: middle; | |
} | |
} | |
} | |
} | |
/// | |
/// SALESFORCE COMPONENT SPINNER | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceComponentSpinner { | |
&.spinnerWrapper { | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
background-color: rgba(255, 255, 255, 0.75); | |
z-index: 8000; | |
opacity: 1; | |
visibility: visible; | |
transition: opacity .2s ease, visibility 0s; | |
transition-delay: 0s, .3s; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
&.hideSpinner { | |
opacity: 0; | |
transition: opacity .2s ease, visibility 0s; | |
transition-delay: 0s, 0s; | |
visibility: hidden; | |
} | |
&.hideEl { | |
display: none; | |
} | |
} | |
/// | |
/// LOADING MESSAGES | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceDataProviderLoadErrorMessage { | |
&.error .detail { | |
padding-top: 1rem; | |
} | |
.retryButton { | |
margin-left: auto; | |
margin-right: auto; | |
display: block; | |
margin-top: 1rem; | |
} | |
.label { | |
cursor: pointer; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
white-space: nowrap; | |
text-align: center; | |
vertical-align: middle; | |
display: inline-block; | |
} | |
} | |
/// | |
/// LAYOUT VIEW(S) | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceListViewPlaceholder { | |
position: absolute; | |
z-index: 2; | |
height: 100%; | |
width: 100%; | |
background: white; | |
&.hidden { | |
display: none; | |
} | |
} | |
@media (max-width: 599px) { | |
.forceRecordLayout { | |
.forcePageBlockSectionRow { | |
display: block; | |
} | |
.forcePageBlockSection.twoCol, | |
.forcePageBlockSection.threeCol { | |
.forcePageBlockItem { | |
width: 100%; | |
} | |
} | |
} | |
.blank-item.forcePageBlockItem { | |
display: none; | |
} | |
} | |
.forceRecordLayout { | |
.highlightField { | |
background: #faffbd; | |
} | |
&.forceHighlightsTemplate { | |
.header { | |
padding: 14px; | |
text-align: center; | |
position: relative; | |
} | |
.seperator { | |
margin: 0 5px; | |
} | |
.highlightsH2 { | |
a, div, span { | |
&:empty + .seperator { | |
display: none; | |
} | |
} | |
} | |
.highlightsH1 { | |
font-weight: 700; | |
font-size: 1.25rem; | |
margin-bottom: 8px; | |
} | |
.highlightsH2 { | |
color: #6b6d70; | |
font-weight: 400; | |
font-size: 1rem; | |
display: inline; | |
} | |
.highlightsH2 div { | |
display: inline; | |
white-space: nowrap; | |
} | |
.highlightsH2 div + span { | |
margin-left: 3px; | |
margin-right: 3px; | |
} | |
.profilePicWrapper { | |
position: relative; | |
width: 60px; | |
height: 60px; | |
margin: 0 auto; | |
padding-bottom: 14px; | |
} | |
.profilePicWrapper .profilePic { | |
z-index: 1; | |
} | |
.profilePicWrapper .motifWrapper { | |
z-index: 0; | |
} | |
.profilePicWrapper .motifWrapper, | |
.profilePicWrapper .profilePic { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 60px; | |
height: 60px; | |
} | |
.profilePicWrapper .profilePic .uiImage { | |
width: 60px; | |
height: 60px; | |
border-radius: 5px; | |
} | |
.truncatedText { | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
overflow: hidden; | |
color: #6b6d70; | |
} | |
.highlightsH1.dark { | |
color: white; | |
} | |
.highlightsH1.light { | |
color: #16325c; | |
} | |
.header.dark { | |
background: #fafaf9; | |
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33495f', endColorstr='#23394d', GradientType=0); | |
} | |
.header.light { | |
background: white; | |
} | |
} | |
} | |
/// | |
/// SCROLLER | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiScroller { | |
position: relative; | |
width: 100%; | |
height: 100%; | |
} | |
.uiScroller { | |
transform: translateZ(0); | |
> * { | |
box-sizing: border-box; | |
} | |
&.native { | |
overflow: auto; | |
-webkit-overflow-scrolling: touch; | |
> .scroller { | |
-webkit-touch-callout: default; | |
-webkit-user-select: text; | |
-moz-user-select: text; | |
-ms-user-select: text; | |
user-select: text; | |
> .pullToRefresh, | |
> .pullToLoadMore { | |
position: relative; | |
-webkit-touch-callout: none; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
cursor: pointer; | |
} | |
} | |
} | |
> .scroller { | |
position: absolute; | |
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); | |
transform: translateZ(0); | |
-webkit-touch-callout: none; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
user-select: none; | |
-webkit-text-size-adjust: none; | |
-moz-text-size-adjust: none; | |
-ms-text-size-adjust: none; | |
-o-text-size-adjust: none; | |
text-size-adjust: none; | |
} | |
&.scroll-vertical { | |
> .scroller, | |
.surface { | |
width: 100%; | |
} | |
&.scroll-horizontal { | |
> .scroller, | |
.surface { | |
height: 100%; | |
} | |
} | |
.surface { | |
position: absolute; | |
transform-origin: center center; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
transform-style: flat; | |
-webkit-tap-highlight-color: transparent; | |
pointer-events: auto; | |
box-sizing: border-box; | |
} | |
.pullToRefresh { | |
transform: translate3d(0, 0, 0); | |
position: absolute; | |
width: 100%; | |
height: 50px; | |
top: -50px; | |
text-align: center; | |
line-height: 50px; | |
z-index: 100; | |
} | |
.pullToLoadMore { | |
transform: translate3d(0, 0, 0); | |
height: 50px; | |
text-align: center; | |
line-height: 50px; | |
z-index: 100; | |
} | |
.pullToRefresh, | |
.pullToLoadMore { | |
> .icon { | |
line-height: 1; | |
display: inline-block; | |
background-position: 50%; | |
background-repeat: no-repeat; | |
border-radius: 5px; | |
transition: transform 300ms; | |
transform: translate3d(0, 0, 0); | |
padding: 0 5px; | |
box-sizing: content-box; | |
} | |
&.pull { | |
> .icon { | |
transform: translate3d(0, 0, 0) rotate(180deg); | |
} | |
} | |
&.update { | |
> .icon { | |
animation: spin 0.6s linear infinite; | |
} | |
} | |
} | |
} | |
} | |
/// | |
/// SCROLL BUTTONS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.button { | |
&.scrollButton { | |
&.voiceOver { | |
position: absolute; | |
z-index: 9999; | |
border: none; | |
cursor: pointer; | |
overflow: hidden; | |
outline: none; | |
&.top { | |
top: 0; | |
height: 30px; | |
width: 100%; | |
} | |
&.upButton { | |
display: none; | |
} | |
&.downButton { | |
height: 30px; | |
width: 100%; | |
bottom: 0; | |
} | |
&.rightButton { | |
width: 30px; | |
height: 100%; | |
right: 0; | |
} | |
&.leftButton { | |
width: 30px; | |
height: 100%; | |
left: 0; | |
} | |
} | |
} | |
} | |
@keyframes spin { | |
from { | |
transform: rotate(180deg); | |
} | |
to { | |
transform: rotate(540deg); | |
} | |
} | |
/// | |
/// LIST VIEWS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceBaseListView { | |
.listViewContent, | |
.emptyContent { | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
} | |
.listViewContent { | |
background-color: #f9f9fa; | |
} | |
.emptyContent { | |
margin-top: 1px; | |
top: 2rem; | |
&.hidden { | |
display: none; | |
} | |
} | |
.emptyContentInner { | |
margin-top: 1px; | |
height: 50%; | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
} | |
.scroller { | |
position: relative; | |
min-width: 100%; | |
} | |
table { | |
border-collapse: separate; | |
min-width: 100%; | |
} | |
thead { | |
background-color: white; | |
z-index: 1; | |
} | |
table thead th.sortable { | |
padding: 0; | |
} | |
thead th.sortable:first-of-type a { | |
padding-left: 1.5rem; | |
} | |
thead th.sortable a { | |
padding-left: .5rem; | |
padding-right: 0.5rem; | |
} | |
thead th a { | |
color: #6b6d70; | |
display: table; | |
padding: .5rem 0; | |
width: 100%; | |
} | |
thead th a.toggle { | |
overflow: hidden; | |
text-overflow: ellipsis; | |
padding-right: 1.5rem; | |
} | |
thead th a { | |
&:focus, | |
&:hover { | |
color: #0070d2; | |
outline: none; | |
background-color: #f9f9fa; | |
text-decoration: none; | |
} | |
} | |
th a.toggle:after { | |
font-family: 'oneIconFont'; | |
text-rendering: optimizeLegibility; | |
display: inline-block; | |
padding: 0 3px; | |
position: absolute; | |
right: 1rem; | |
} | |
th.descending a.toggle:after { | |
content: '\00a0'; | |
background: url(/projRes/ui-force-components/img/arrowdown_small.svg) no-repeat center center; | |
} | |
th.ascending a.toggle:after { | |
content: '\00a0'; | |
background: url(/projRes/ui-force-components/img/arrowup_small.svg) no-repeat center center; | |
} | |
tbody td span { | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
word-wrap: break-word; | |
} | |
.forceListViewManagerGridWrapText { | |
white-space: pre-line; | |
} | |
thead th { | |
text-transform: uppercase; | |
font-size: .875rem; | |
background-color: white; | |
} | |
thead th:last-of-type { | |
border-right: none; | |
} | |
thead th, | |
tbody td, | |
tbody th { | |
max-width: 200px; | |
border-bottom: 1px solid #d9dbdd; | |
padding: .5rem .5rem; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
overflow: hidden; | |
font-weight: normal; | |
text-align: left; | |
background-color: white; | |
} | |
thead th { | |
position: relative; | |
color: #6b6d70; | |
} | |
thead th:first-of-type, | |
tbody th:first-of-type { | |
padding-left: 1.5rem; | |
} | |
thead th:last-of-type, | |
tbody td:last-of-type { | |
padding-right: 1.5rem; | |
} | |
tbody tr:hover td, | |
tbody tr:hover th, | |
table.resizable-cols:not(.resizing) thead th:hover { | |
background-color: #f9f9fa; | |
} | |
thead th img, | |
tbody td img { | |
display: inline-block; | |
vertical-align: middle; | |
} | |
table.resizable-cols { | |
min-width: 0; | |
} | |
table.resizable-cols thead th { | |
max-width: none; | |
overflow: visible; | |
box-sizing: border-box; | |
padding: 0; | |
} | |
table.resizable-cols td { | |
max-width: 0; | |
} | |
table.resizable-cols .handle { | |
padding: 0; | |
margin: 0; | |
} | |
table.resizable-cols thead th:first-of-type a { | |
padding-left: 1.5rem; | |
} | |
table.resizable-cols thead th a { | |
padding-left: .5rem; | |
padding-right: 0.5rem; | |
} | |
table.resizable-cols thead th:not(.sortable) .content { | |
padding: 0.5rem 0.5rem; | |
} | |
table.resizable-cols thead th:first-of-type:not(.sortable) { | |
padding-left: 1.5rem; | |
} | |
table.resizable-cols .actionColumnHeader .handle { | |
display: none; | |
} | |
table.resizable-cols.resizing .handle [type=range] ~ .resize-button { | |
opacity: 0; | |
} | |
table.resizable-cols .handle [type=range]:focus ~ .resize-button { | |
box-shadow: 0 0 3px #0070d2; | |
z-index: 5000; | |
} | |
table.resizable-cols .handle:hover .resize-button, | |
table.resizable-cols .handle [type=range]:focus ~ .resize-button { | |
opacity: 1; | |
background-color: #0070d2; | |
} | |
table.resizable-cols th:hover .resize-button { | |
opacity: 1; | |
background-color: #d9dbdd; | |
} | |
table.resizable-cols th .resize-button { | |
opacity: 0; | |
width: .25rem; | |
background-color: #0070d2; | |
} | |
.listViewContent .indicator { | |
background: #0070d2; | |
} | |
table.resizable-cols .handle [type=range]:focus ~ .resize-button .column-divider, | |
.indicator .column-divider { | |
width: 1px; | |
background-color: #0070d2; | |
right: 0; | |
} | |
.indicator { | |
width: .25rem; | |
z-index: 5000; | |
} | |
&.useHeaderBarFix table { | |
transform-style: preserve-3d; | |
} | |
&.useHeaderBarFix thead th:last-of-type, | |
&.useHeaderBarFix tbody td:last-of-type { | |
transform: translateZ(0px); | |
} | |
&.useHeaderBarFix thead th:last-of-type { | |
z-index: 1; | |
} | |
} | |
/// | |
/// CHATTER NOTIFICATIONS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceChatterEditGroupNotificationSettings { | |
&.uiButton { | |
&.picker | |
&.pickerSelected { | |
display: block; | |
width: 100%; | |
text-align: left; | |
padding: 1rem; | |
border-top: 1px solid #d9dbdd; | |
border-bottom: none; | |
border-left: none; | |
border-right: none; | |
margin: 2px; | |
background-color: Transparent; | |
font-size: 1rem; | |
&:hover { | |
background-color: #f9f9fa; | |
} | |
&:focus { | |
background-color: #f2f2f3; | |
outline: none; | |
} | |
&::-moz-focus-inner { | |
border: none; | |
} | |
&:last-child { | |
border-bottom: 1px solid #d9dbdd; | |
margin-bottom: 1rem; | |
} | |
} | |
&.pickerSelected:after { | |
content: '\e80b'; | |
font-family: 'forceIconFont'; | |
text-rendering: optimizeLegibility; | |
display: inline-block; | |
padding: 0 8px; | |
vertical-align: middle; | |
float: right; | |
color: #0070d2; | |
} | |
} | |
} | |
/// | |
/// BALL ANIMATIONS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
@keyframes ballanimate { | |
0% { | |
transform: scale(1); | |
} | |
16% { | |
transform: scale(1.5); | |
} | |
32% { | |
transform: scale(1); | |
} | |
} | |
@keyframes ballanimate-2 { | |
32% { | |
transform: scale(1); | |
} | |
48% { | |
transform: scale(1.5); | |
} | |
64% { | |
transform: scale(1); | |
} | |
} | |
@keyframes ballanimate-3 { | |
64% { | |
transform: scale(1); | |
} | |
80% { | |
transform: scale(1.5); | |
} | |
96% { | |
transform: scale(1); | |
} | |
} | |
.embeddedServiceLoadingBalls { | |
&:focus { | |
outline: none; | |
} | |
.loadingBall { | |
font-size: 8px; | |
text-align: center; | |
background: #fff; | |
margin: 3px; | |
display: inline-block; | |
width: 1em; | |
height: 1em; | |
border-radius: 50%; | |
background-color: #0074bd; | |
} | |
&.tiny { | |
.loadingBall { | |
margin: 3px 2px 5px; | |
width: 5px; | |
height: 5px; | |
background-color: #fff; | |
opacity: 0.15; | |
} | |
} | |
&.animated { | |
.loadingBall { | |
animation: ballanimate 2.25s infinite ease-in-out; | |
} | |
.second { | |
animation-name: ballanimate-2; | |
} | |
.third { | |
animation-name: ballanimate-3; | |
} | |
} | |
&.tiny.animated { | |
.first { | |
animation-name: ballanimate-tiny; | |
} | |
.second { | |
animation-name: ballanimate-tiny-2; | |
} | |
.third { | |
animation-name: ballanimate-tiny-3; | |
} | |
} | |
@media only screen and (min-width: 48em) { | |
display: inline-block; | |
} | |
} | |
@keyframes ballanimate-tiny { | |
0% { | |
opacity: 0.15; | |
} | |
16% { | |
opacity: 1; | |
} | |
32%, | |
100% { | |
opacity: 0.15; | |
} | |
} | |
@keyframes ballanimate-tiny-2 { | |
0%, | |
32% { | |
opacity: 0.15; | |
} | |
48% { | |
opacity: 1; | |
} | |
64%, | |
100% { | |
opacity: 0.15; | |
} | |
} | |
@keyframes ballanimate-tiny-3 { | |
0%, | |
64% { | |
opacity: 0.15; | |
} | |
80% { | |
opacity: 1; | |
} | |
96%, | |
100% { | |
opacity: 0.15; | |
} | |
} | |
/// | |
/// BUTTONS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceActionsContainer.uiButton { | |
white-space: nowrap; | |
} | |
/// | |
/// LIST PREVIEW GRID | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceRelatedListPreviewGrid { | |
.listViewContent { | |
position: static; | |
} | |
.uiScroller.native { | |
-ms-overflow-style: -ms-autohiding-scrollbar; | |
} | |
.uiScroller .scroller.actionBarPlugin { | |
padding-bottom: 0 !important; | |
} | |
.forceListViewStencil, | |
.forceListViewPlaceholder { | |
position: static; | |
} | |
.uiVirtualDataGrid thead .actionColumnHeader { | |
width: 52px; | |
min-width: 52px; | |
} | |
} | |
/// | |
/// TABLES | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
thead th { | |
border-top: 1px solid #d9dbdd; | |
line-height: 1.25; | |
color: #6b6d70; | |
letter-spacing: .0625rem; | |
min-height: 2rem; | |
height: 2rem; | |
} | |
thead, | |
tbody { | |
th { | |
&:first-of-type { | |
padding-left: 1.5rem; | |
} | |
} | |
} | |
tbody { | |
th, | |
td { | |
padding: 0.25rem 0.5rem; | |
} | |
} | |
/// | |
/// UI BLOCKS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiBlock { | |
&, | |
.bBody { | |
overflow: hidden; | |
vertical-align: top; | |
} | |
.bLeft { | |
float: left; | |
img { | |
display: block; | |
} | |
} | |
.bRight { | |
float: right; | |
} | |
&.overflow { | |
> .bBody { | |
display: table-cell; | |
vertical-align: top; | |
width: 10000px; | |
} | |
&, | |
> .bBody { | |
overflow: visible; | |
} | |
&:before, | |
&:after { | |
content: ""; | |
display: table; | |
} | |
&:after { | |
clear: both; | |
} | |
> .bLeft { | |
float: left; | |
} | |
> .bRight { | |
float: right; | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE INPUT | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceInput { | |
width: 100%; | |
border: none; | |
padding: 0; | |
margin: 0 0 10px; | |
.flowInputLabel { | |
margin-bottom: 4px; | |
} | |
.fieldRequiredIndicator { | |
display: inline-block; | |
color: #c23934; | |
font-size: .875em; | |
width: 12px; | |
} | |
.fieldTitle { | |
display: inline-block; | |
font-size: .75em; | |
color: #333; | |
} | |
.uiInput { | |
padding: 10px 12px; | |
width: 100%; | |
height: 44px; | |
line-height: normal; | |
font-size: .875em; | |
background-color: #fff; | |
border: 1px solid #9faab5; | |
border-radius: 4px; | |
box-sizing: border-box; | |
} | |
&.has-error .uiInput { | |
border: 1px solid #c23934; | |
} | |
.flowError { | |
color: #c23934; | |
margin: 3px 0 0 10px; | |
font-size: 0.875em; | |
} | |
.flowHelpText { | |
color: #333; | |
margin: 3px 0 0 10px; | |
font-size: 0.875em; | |
} | |
.useStandardFocus:focus { | |
border: 1px solid #0074bd; | |
outline: none; | |
} | |
.embeddedServiceIcon { | |
display: flex; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE ICONS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceIcon { | |
svg { | |
display: inline-block; | |
box-sizing: border-box; | |
width: 2em; | |
height: 2em; | |
fill: #fff; | |
} | |
&.xx-small svg { | |
width: .875em; | |
height: 0.875em; | |
} | |
&.x-small svg { | |
width: 1em; | |
height: 1em; | |
} | |
&.small svg { | |
width: 1.5em; | |
height: 1.5em; | |
} | |
&.large svg { | |
width: 3em; | |
height: 3em; | |
} | |
.loadingBallsOverlay { | |
text-align: center; | |
justify-content: center; | |
position: absolute; | |
z-index: 2; | |
top: 40%; | |
} | |
.assistiveText { | |
position: absolute; | |
border: 0; | |
clip: rect(1px, 1px, 1px, 1px); | |
width: 1px; | |
height: 1px; | |
margin: -1px; | |
padding: 0; | |
overflow: hidden; | |
z-index: -1000; | |
font-size: 1px; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE CHAT EVENT MESSAGE | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateChatEventMessage { | |
position: relative; | |
width: 100%; | |
overflow: hidden; | |
.eventMessage { | |
width: 100%; | |
font-size: .8125em; | |
color: #333; | |
display: flex; | |
margin: 3px 0 9px; | |
flex-direction: row; | |
justify-content: center; | |
&:before, | |
&:after { | |
content: " "; | |
position: relative; | |
display: block; | |
border-top: 1px dashed #ddd; | |
height: 0; | |
min-width: 5%; | |
flex-grow: 1; | |
align-self: stretch; | |
top: 8px; | |
} | |
} | |
> .uiOutputRichText { | |
padding: 0 12px; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
overflow: hidden; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE CHAT RICH ITEM | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateChatRichItem { | |
list-style-type: none; | |
border: 0; | |
a { | |
text-decoration: none; | |
&:focus { | |
outline: none; | |
} | |
} | |
} | |
/// | |
/// SALESFORCE DROPDOWN ACTION CONTAINER | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceDeferredDropDownAction { | |
.slds-icon_container { | |
line-height: initial; | |
.slds-icon--xx-small { | |
width: .75rem; | |
height: 0.75rem; | |
} | |
} | |
} | |
/// | |
/// SALESFORCE RELATED LIST PREVIEW | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceRelatedListPreview { | |
ul { | |
list-style: none; | |
margin: 0; | |
} | |
&.MEDIUM .forceRecordLayout:nth-child(even) { | |
border-left: none; | |
} | |
.forceOutputLookupWithPreview a { | |
overflow-x: hidden; | |
text-overflow: ellipsis; | |
} | |
.listContent { | |
min-height: 0; | |
} | |
.forceButtonBar .overflowItems { | |
width: 25%; | |
} | |
.emptyListMessage { | |
padding: 0 2rem; | |
text-align: center; | |
font-size: 1rem; | |
color: #6b6d70; | |
} | |
.errorMessage { | |
padding: .5rem .5rem 1.5rem; | |
text-align: left; | |
color: #6b6d70; | |
font-size: 1rem; | |
} | |
.forceListRecord { | |
background-color: white; | |
border-radius: 0.25rem; | |
} | |
.uiAbstractList.loading .loadingIndicator { | |
display: none; | |
} | |
.relatedListButtons { | |
padding: 1rem; | |
border-bottom: 1px solid #d9dbdd; | |
} | |
.loadingIndicator .background { | |
opacity: 0; | |
} | |
.showEmptyContent { | |
display: initial; | |
position: initial; | |
} | |
.emptyListMessage { | |
position: initial; | |
padding-bottom: 1.5rem; | |
} | |
.hide { | |
display: none; | |
} | |
.forceListRecordItem img { | |
max-height: 2.25rem; | |
display: inline-block; | |
} | |
&.FULL, | |
&.MEDIUM, | |
&.SMALL { | |
.uiAbstractList .forceRecordLayout { | |
display: inline-block; | |
vertical-align: top; | |
} | |
} | |
@media screen and (max-width: 1200px) { | |
&.FULL .uiAbstractList .forceRecordLayout { | |
width: 50%; | |
} | |
&.MEDIUM .uiAbstractList .forceRecordLayout, | |
&.SMALL .uiAbstractList .forceRecordLayout { | |
width: 100%; | |
} | |
} | |
@media screen and (min-width: 1201px) and (max-width: 2330px) { | |
&.SMALL .uiAbstractList .forceRecordLayout { | |
width: 100%; | |
} | |
} | |
@media screen and (min-width: 1201px) and (max-width: 1810px) { | |
&.MEDIUM .uiAbstractList .forceRecordLayout { | |
width: 50%; | |
} | |
} | |
@media screen and (min-width: 1811px) and (max-width: 2330px) { | |
&.MEDIUM .uiAbstractList .forceRecordLayout { | |
width: 33.3%; | |
} | |
} | |
@media screen and (min-width: 1201px) and (max-width: 1801px) { | |
&.FULL .uiAbstractList .forceRecordLayout { | |
width: 33.3%; | |
} | |
} | |
@media screen and (min-width: 1811px) and (max-width: 2330px) { | |
&.FULL .uiAbstractList .forceRecordLayout { | |
width: 25%; | |
} | |
} | |
@media screen and (min-width: 2331px) { | |
&.FULL .uiAbstractList .forceRecordLayout { | |
width: 20%; | |
} | |
&.MEDIUM .uiAbstractList .forceRecordLayout { | |
width: 25%; | |
} | |
&.SMALL .uiAbstractList .forceRecordLayout { | |
width: 50%; | |
} | |
} | |
.forceListViewManagerGridWrapText { | |
white-space: pre-line; | |
} | |
} | |
/// | |
/// ABSTRACT LISTS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiAbstractList { | |
.listContent { | |
clear: both; | |
position: relative; | |
} | |
.emptyListContent { | |
display: none; | |
} | |
&.showEmptyContent:not(.loading) .emptyListContent { | |
display: block; | |
} | |
.loadingIndicator { | |
display: none; | |
height: 100%; | |
min-height: 2.5rem; | |
left: 0; | |
position: absolute; | |
text-align: center; | |
top: 0; | |
width: 100%; | |
z-index: 80; | |
} | |
&.loading { | |
min-height: 2.5rem; | |
.loadingIndicator { | |
display: block; | |
} | |
} | |
.loadingIndicator { | |
.background { | |
background-color: #fff; | |
height: 100%; | |
left: 0; | |
opacity: .6; | |
-ms-filter: alpha(opacity=60); | |
filter: alpha(opacity=60); | |
display: inline; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
z-index: 0; | |
zoom: 1; | |
} | |
.label { | |
background-image: url("/auraFW/resources/aura/images/spinner.gif"); | |
background-position: left top; | |
background-repeat: no-repeat; | |
color: #666; | |
display: inline-block; | |
font-weight: bold; | |
line-height: normal; | |
height: 32px; | |
padding-left: 32px; | |
padding-top: 9px; | |
position: relative; | |
text-shadow: .1em .1em .01em #fff, .1em -.1em .01em #fff, -.1em -.1em .01em #fff, -.1em .1em .01em #fff; | |
z-index: 1; | |
zoom: 1; | |
top: 50%; | |
transform: translateY(-50%); | |
} | |
} | |
} | |
/// | |
/// MESSAGES | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiMessage { | |
color: #464646; | |
padding: 5px; | |
margin: 5px; | |
border-width: 1px; | |
border-style: solid; | |
border-radius: 5px; | |
font-size: 13px; | |
line-height: 18px; | |
border-color: #ccc; | |
background-color: #eee; | |
opacity: 1; | |
transition: opacity 0.2s ease-out; | |
&.hide { | |
opacity: 0; | |
} | |
.close { | |
font-size: 20px; | |
font-weight: bold; | |
line-height: 18px; | |
color: black; | |
text-shadow: 0 1px 0 white; | |
opacity: 0.2; | |
} | |
h4 { | |
font-weight: bold; | |
font-size: 16px; | |
} | |
.bBody p { | |
margin: 0; | |
} | |
&.warning { | |
border-color: #f8e38e; | |
background-color: #ffffdc; | |
} | |
&.error { | |
border-color: #f2a199; | |
background-color: #fdedea; | |
} | |
&.confirm { | |
border-color: #9bebb3; | |
background-color: #edfff1; | |
} | |
&.info { | |
border-color: #bee6ff; | |
background-color: #f5fcff; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD BASE CHECKBOX | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceBaseCheckbox { | |
&.uiInputCheckbox { | |
display: flex; | |
justify-content: flex-start; | |
align-items: center; | |
padding: 0; | |
background-color: transparent; | |
border: none; | |
font-size: 1em; | |
> input { | |
position: relative; | |
width: 20px; | |
height: 20px; | |
flex-shrink: 0; | |
border: solid 1px #d8dde6; | |
border-radius: 2px; | |
margin-right: 6px; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
&:checked { | |
&:after { | |
display: block; | |
content: ""; | |
height: .25em; | |
width: .5em; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate3d(-50%, -50%, 0) rotate(-45deg); | |
border-bottom: 2px solid #0074bd; | |
border-left: 2px solid #0074bd; | |
} | |
} | |
} | |
> label { | |
font-size: .875em; | |
color: #333; | |
order: 1; | |
min-width: 0; | |
> span { | |
display: block; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD LIVE AGENT STATE CHAT ACTION | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateChatAction { | |
&.uiButton { | |
position: relative; | |
width: 40px; | |
height: 100%; | |
padding: 0; | |
margin: 0; | |
box-shadow: none; | |
background: none; | |
border: none; | |
font-size: 1.25em; | |
svg { | |
position: relative; | |
fill: #0074bd; | |
transition: fill 0.8s ease; | |
} | |
&.medium svg { | |
width: 20px; | |
height: 20px; | |
} | |
&.small svg { | |
width: 16px; | |
height: 16px; | |
} | |
&:focus, | |
&:hover { | |
box-shadow: none; | |
text-shadow: none; | |
svg { | |
fill: #0074bd; | |
} | |
} | |
&:focus { | |
outline: none; | |
} | |
&:not(:disabled){ | |
&:focus { | |
.embeddedServiceIcon { | |
&:before { | |
content: " "; | |
position: absolute; | |
top: -20%; | |
left: -20%; | |
width: 140%; | |
height: 140%; | |
border-radius: 4px; | |
pointer-events: none; | |
} | |
} | |
} | |
} | |
&:disabled { | |
&, | |
&:focus, | |
&:hover { | |
opacity: .3; | |
cursor: default; | |
svg { | |
fill: #dfdfdf; | |
} | |
} | |
} | |
} | |
.embeddedServiceIcon { | |
position: relative; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD LIVE AGENT STATE CHAT HEADER OPTION | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateChatHeaderOption { | |
position: relative; | |
width: 84px; | |
margin: 0 3px; | |
padding: 6px; | |
color: #fff; | |
text-decoration: none; | |
&:focus { | |
text-decoration: underline; | |
} | |
&.disabled { | |
opacity: .5; | |
pointer-events: none; | |
} | |
&.chatOption:focus { | |
outline: none; | |
} | |
&.chatOption:focus:before, | |
&.chatOption:hover:before { | |
content: " "; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background-color: #fff; | |
opacity: .2; | |
border-radius: 4px; | |
pointer-events: none; | |
} | |
&.chatOption:focus:after { | |
content: " "; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: calc(100% - 2px); | |
height: calc(100% - 2px); | |
border-radius: 4px; | |
border: 1px solid #0074bd; | |
pointer-events: none; | |
} | |
.embeddedServiceIcon { | |
width: 40px; | |
height: 40px; | |
border: 1px solid #fff; | |
border-radius: 50%; | |
margin: 0 auto; | |
svg { | |
position: relative; | |
display: block; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
} | |
} | |
.optionName { | |
font-size: .75em; | |
text-align: center; | |
margin-top: 6px; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD LIVE AGENT STATE CHAT ITEM | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateChatItem { | |
&.chatMessage { | |
background-color: #fff; | |
position: relative; | |
word-wrap: break-word; | |
overflow: hidden; | |
padding: 0 18px; | |
margin-bottom: 4px; | |
width: 100%; | |
box-sizing: border-box; | |
list-style: none; | |
} | |
&:last-of-type { | |
margin-bottom: 12px; | |
} | |
.chatContent { | |
position: relative; | |
font-weight: 400; | |
line-height: 1.3; | |
max-width: 70%; | |
padding: 10px; | |
font-size: .875em; | |
display: inline-block; | |
border-radius: 10px 10px 0; | |
float: right; | |
margin-left: 40px; | |
} | |
.chatContent:focus { | |
outline: 1px solid #0074bd; | |
} | |
.chatContent span { | |
white-space: pre-wrap; | |
} | |
&.agent .chatContent { | |
color: #333; | |
background: #f4f4f4; | |
border-radius: 10px 10px 10px 0; | |
float: left; | |
} | |
&.agent .chatContent a { | |
color: #333; | |
} | |
&.chasitor .chatContent { | |
background: #0074bd; | |
color: #fff; | |
margin-left: auto; | |
} | |
&.chasitor .chatContent a { | |
color: #fff; | |
} | |
&.chatMessage button { | |
font-family: 'Salesforce Sans', sans-serif; | |
font-weight: normal; | |
text-shadow: none; | |
} | |
&.chatMessage button span { | |
color: #333; | |
} | |
&.chatMessage button:focus { | |
background: #333; | |
outline: none; | |
} | |
&.chatMessage button:focus span { | |
color: #fff; | |
text-decoration: underline; | |
} | |
&.chatMessage button:hover, | |
&.chatMessage button:hover:focus { | |
background: #333; | |
} | |
&.chatMessage button:hover, | |
&.chatMessage button:hover:focus, | |
&.chatMessage button:hover span, | |
&.chatMessage button:hover:focus span { | |
color: #fff; | |
} | |
&.chatMessage button:active, | |
&.chatMessage button:active:focus { | |
color: #fff; | |
background: #333; | |
} | |
&.chatMessage button:active:focus span { | |
color: #fff; | |
} | |
.rich-button-item, | |
.rich-menu-item { | |
color: #333; | |
} | |
.chatContent ul.rich-menu-items li:first-of-type { | |
border: 1px solid #c7cdda; | |
} | |
.chatContent ul.rich-menu-items li:first-of-type, | |
.chatContent li:first-child button.rich-menu-itemOptionIsClicked { | |
border-radius: 8px 8px 0 0; | |
} | |
.chatContent ul.rich-menu-items li { | |
border-width: 0 1px 1px 1px; | |
border-style: solid; | |
border-color: #c7cdda; | |
} | |
.chatContent ul.rich-menu-items li:last-of-type, | |
.chatContent li:last-child button.rich-menu-itemOptionIsClicked { | |
border-radius: 0 0 8px 8px; | |
} | |
.timeContent { | |
font-weight: 400; | |
line-height: 1.3; | |
font-size: .625em; | |
color: #666; | |
padding-top: 4px; | |
clear: both; | |
} | |
&.agent .timeContent { | |
text-align: left; | |
margin-left: 44px; | |
} | |
&.chasitor .timeContent { | |
text-align: right; | |
} | |
.avatar { | |
position: absolute; | |
bottom: 0; | |
width: 32px; | |
height: 32px; | |
border-radius: 50px; | |
background-size: cover; | |
background-color: #08a3de; | |
border: none; | |
float: left; | |
margin: 0 6px 6px 0; | |
&.iconAvatar { | |
font-size: 1.5em; | |
padding: 6px; | |
color: #fff; | |
box-sizing: border-box; | |
} | |
} | |
&.withTimestamp .avatar { | |
margin-bottom: 17px; | |
} | |
&.chasitor .avatar { | |
display: none; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD LIVE AGENT STATE UNREAD MESSAGE BANNER | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateChatUnreadMessageBanner { | |
position: absolute; | |
display: flex; | |
width: 148px; | |
height: 30px; | |
border-radius: 16px; | |
background-color: #fff; | |
margin: 0 auto; | |
top: -40px; | |
left: 50%; | |
transform: translateX(-50%); | |
justify-content: center; | |
align-items: center; | |
box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.2); | |
&.unseenMessageBanner:focus { | |
border: solid 1px #0074bd; | |
box-shadow: 0 0 3px 0 #0074bd; | |
outline: none; | |
} | |
.message { | |
font-size: .875em; | |
color: #333; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD LIVE AGENT STATE FOOTER MENU | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateFooterMenu { | |
float: left; | |
margin-top: 4px; | |
height: calc(100% - 16px); | |
cursor: pointer; | |
background-color: #ededed; | |
border: 0 solid #ededed; | |
&::-moz-focus-inner { | |
border: 0; | |
} | |
.footer-menu-trigger { | |
letter-spacing: 2px; | |
font-size: 20px; | |
color: #808080; | |
width: 28px; | |
height: 25px; | |
margin-top: 10px; | |
border: 1px solid #f0f0f0; | |
border-radius: 4px; | |
padding: 2px 4px 6px; | |
} | |
.hamburgerMenuIcon svg { | |
fill: #adadad; | |
} | |
&:hover .hamburgerMenuIcon svg { | |
fill: #0286cf; | |
} | |
&:focus { | |
.footer-menu-trigger { | |
background-color: #ffffff; | |
border-color: #0076de; | |
box-shadow: 0 0 3px #0070d2; | |
} | |
.hamburgerMenuIcon svg { | |
fill: #0076de; | |
} | |
} | |
.footer-menu-items { | |
background: #fff; | |
margin-left: -11px; | |
border-radius: 4px; | |
position: absolute; | |
left: 20px; | |
bottom: 81px; | |
width: 150px; | |
font-size: 12px; | |
button { | |
text-align: center; | |
color: #333; | |
border: 1px solid #c7cdda; | |
font-size: 15px; | |
cursor: pointer; | |
padding: 12px 5px; | |
display: block; | |
margin: 0; | |
width: 150px; | |
background: transparent; | |
} | |
} | |
#footerMenuList { | |
padding: 0; | |
margin: 0; | |
} | |
.footer-menu:before { | |
content: ""; | |
bottom: 69px; | |
left: 18px; | |
border-color: #c7cdda transparent transparent #c7cdda; | |
border-width: 7px; | |
border-style: solid; | |
display: block; | |
width: 0; | |
position: absolute; | |
} | |
.footer-menu:after { | |
content: ""; | |
bottom: 71px; | |
left: 19px; | |
border-width: 5px 5px 7px 7px; | |
border-style: solid; | |
border-color: #ffffff transparent transparent #ffffff; | |
display: block; | |
width: 0; | |
position: absolute; | |
} | |
a { | |
text-decoration: none; | |
color: #16325c; | |
text-align: left; | |
} | |
a:hover { | |
color: #00f; | |
} | |
&.footer-menu-trigger-link:hover { | |
outline: none; | |
} | |
&.footer-menu-trigger-link:focus { | |
outline: none; | |
} | |
.rich-menu-item a:focus { | |
outline: none; | |
} | |
.footer-menu-item { | |
text-align: center; | |
color: #0070d2; | |
border-top: 1px solid #c7cdda; | |
font-size: 15px; | |
cursor: pointer; | |
padding: 12px 5px; | |
display: block; | |
width: inherit; | |
margin-left: 0; | |
} | |
.footer-menu-items .rich-menu-item:focus { | |
outline: none; | |
text-decoration: underline; | |
} | |
.footer-menu-items .rich-menu-item:hover { | |
outline: none; | |
color: #333; | |
background-color: #f7f9fa; | |
} | |
.footer-menu-items .rich-menu-item:not(:first-of-type) { | |
border-top: 0; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE SIDEBAR BUTTON | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceSidebarButton { | |
position: relative; | |
border: none; | |
background: #0074bd; | |
text-shadow: none; | |
box-shadow: none; | |
border-radius: 4px; | |
transition: background .4s ease; | |
color: #fff; | |
font-size: 1em; | |
font-weight: 400; | |
font-family: 'Salesforce Sans', sans-serif; | |
width: 100%; | |
margin: 0; | |
height: 44px; | |
&:disabled { | |
background: #0074bd; | |
opacity: 0.6; | |
} | |
&:focus { | |
outline: none; | |
box-shadow: 0 0 3px 0 #0074bd; | |
text-shadow: none; | |
text-decoration: underline; | |
} | |
&:not(:disabled) { | |
&:focus, | |
&:hover { | |
background: #0074bd; | |
} | |
} | |
.label, | |
&:disabled .label { | |
z-index: 1; | |
position: relative; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
color: #fff; | |
} | |
.label:hover, | |
&:hover .label { | |
text-shadow: none; | |
} | |
&:disabled:hover .label { | |
color: inherit; | |
} | |
&.uiButton--inverse, | |
&.uiButton--inverse { | |
&, | |
&:disabled { | |
background: none; | |
} | |
&:not(:disabled) { | |
&:focus, | |
&:hover { | |
background-color: #f3f3f3; | |
} | |
} | |
} | |
&.uiButton--inverse .label { | |
color: #0074bd; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE SIDEBAR EXTENDED HEADER | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceSidebarExtendedHeader { | |
position: relative; | |
background-color: #000; | |
color: #fff; | |
box-sizing: border-box; | |
overflow: hidden; | |
padding-top: 46px; | |
transition: background-color 0.33s ease-in; | |
.backgroundPattern { | |
position: absolute; | |
display: block; | |
width: 100%; | |
height: 100%; | |
left: 0; | |
top: 0; | |
background-size: 100%; | |
transform: translateZ(0); | |
} | |
.content { | |
position: relative; | |
} | |
} | |
/// | |
/// SALESFORCE MESSAGE | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceMessage { | |
color: #464646; | |
padding: 5px; | |
margin: 10px; | |
border: 1px solid; | |
border-radius: 5px; | |
font-size: 13px; | |
line-height: 18px; | |
h4 { | |
font-weight: bold; | |
font-size: 16px; | |
} | |
.bBody p { | |
margin: 0; | |
} | |
.bLeft .icon { | |
margin-right: 10px; | |
} | |
&.message { | |
margin: 0; | |
border: 0; | |
} | |
&.message .bLeft .icon { | |
display: none; | |
} | |
&.warning { | |
border-color: #f8e38e; | |
background-color: #ffffdc; | |
} | |
&.warning.strength_0 .bLeft .icon, | |
&.warning.strength_1 .bLeft .icon { | |
background: transparent url("/img/msg_icons/warning16.png") no-repeat left center; | |
width: 16px; | |
height: 16px; | |
} | |
&.warning.strength_2 .bLeft .icon { | |
background: transparent url("/img/msg_icons/warning24.png") no-repeat left center; | |
width: 24px; | |
height: 24px; | |
} | |
&.warning.strength_3 .bLeft .icon { | |
background: transparent url("/img/msg_icons/warning32.png") no-repeat left center; | |
width: 32px; | |
height: 32px; | |
} | |
&.error { | |
border-color: #f2a199; | |
background-color: #fdedea; | |
} | |
&.error.strength_0 .bLeft .icon, | |
&.error.strength_1 .bLeft .icon { | |
background: transparent url("/img/msg_icons/error16.png") no-repeat left center; | |
width: 16px; | |
height: 16px; | |
} | |
&.error.strength_2 .bLeft .icon { | |
background: transparent url("/img/msg_icons/error24.png") no-repeat left center; | |
width: 24px; | |
height: 24px; | |
} | |
&.error.strength_3 .bLeft .icon { | |
background: transparent url("/img/msg_icons/error32.png") no-repeat left center; | |
width: 32px; | |
height: 32px; | |
} | |
&.confirm { | |
border-color: #9bebb3; | |
background-color: #edfff1; | |
} | |
&.confirm.strength_0 .bLeft .icon, | |
&.confirm.strength_1 .bLeft .icon { | |
background: transparent url("/img/msg_icons/confirm16.png") no-repeat left center; | |
width: 16px; | |
height: 16px; | |
} | |
&.confirm.strength_2 .bLeft .icon { | |
background: transparent url("/img/msg_icons/confirm24.png") no-repeat left center; | |
width: 24px; | |
height: 24px; | |
} | |
&.confirm.strength_3 .bLeft .icon { | |
background: transparent url("/img/msg_icons/confirm32.png") no-repeat left center; | |
width: 32px; | |
height: 32px; | |
} | |
&.info { | |
border-color: #bee6ff; | |
background-color: #f5fcff; | |
} | |
&.info.strength_0 .bLeft .icon, | |
&.info.strength_1 .bLeft .icon { | |
background: transparent url("/img/msg_icons/info16.png") no-repeat left center; | |
width: 16px; | |
height: 16px; | |
} | |
&.info.strength_2 .bLeft .icon { | |
background: transparent url("/img/msg_icons/info24.png") no-repeat left center; | |
width: 24px; | |
height: 24px; | |
} | |
&.info.strength_3 .bLeft .icon { | |
background: transparent url("/img/msg_icons/info32.png") no-repeat left center; | |
width: 32px; | |
height: 32px; | |
} | |
&.strength_0 { | |
border: none; | |
background-color: transparent; | |
} | |
&.strength_0 .bLeft .icon { | |
margin-right: 5px; | |
} | |
&.desktopBoxed { | |
border: 0; | |
border-radius: 3px; | |
margin: 0; | |
color: #fff; | |
} | |
&.desktopBoxed .bBody .summary { | |
font-size: 16px; | |
font-weight: bold; | |
margin-bottom: 5px; | |
} | |
&.desktopBoxed .bBody .detail { | |
font-size: 1rem; | |
} | |
&.desktopBoxed a { | |
color: white; | |
text-decoration: underline; | |
} | |
&.desktopBoxed.error { | |
background-color: #c23934; | |
border-color: #c23934; | |
} | |
&.desktopBoxed.warning { | |
background-color: #e7bc49; | |
border-color: #e7bc49; | |
} | |
&.desktopBoxed.info { | |
background-color: #669bd7; | |
border-color: #669bd7; | |
} | |
&.desktopBoxed.confirm { | |
background-color: #60c170; | |
border-color: #60c170; | |
} | |
&.desktopBoxed.strength_3 { | |
padding: 15px 20px; | |
} | |
&.desktopBoxed.error.strength_3 .bLeft .icon { | |
background: url("/relatedlist/images/message/red-error.png") no-repeat; | |
width: 34px; | |
height: 34px; | |
} | |
&.desktopBoxed.warning.strength_3 .bLeft .icon { | |
background: url("/relatedlist/images/message/yellow-warning.png") no-repeat; | |
width: 39px; | |
height: 34px; | |
} | |
&.desktopBoxed.info.strength_3 .bLeft .icon { | |
background: url("/relatedlist/images/message/blue-info.png") no-repeat; | |
width: 34px; | |
height: 34px; | |
} | |
&.desktopBoxed.confirm.strength_3 .bLeft .icon { | |
background: url("/relatedlist/images/message/green-check.png") no-repeat; | |
width: 34px; | |
height: 34px; | |
} | |
&.desktopBoxed.strength_3 .bLeft .icon { | |
margin-right: 20px; | |
} | |
&.desktop { | |
background-color: transparent; | |
border: 0; | |
color: #292929; | |
} | |
&.desktop a { | |
color: #1b6cc8; | |
text-decoration: none; | |
} | |
&.desktop.error.strength_3 .bLeft .icon { | |
background: url("/relatedlist/images/message/error_red.png") no-repeat; | |
} | |
&.desktop.warning.strength_3 .bLeft .icon { | |
background: url("/relatedlist/images/message/warning_yellow.png") no-repeat; | |
width: 34px; | |
height: 34px; | |
} | |
&.pOne.error.strength_3 .bLeft .icon { | |
background: none; | |
width: 24px; | |
height: 24px; | |
content: ""; | |
margin-right: 1rem; | |
font-size: 24px; | |
color: #c23934; | |
line-height: 38px; | |
} | |
&.pOne.error.strength_1 .bLeft .icon { | |
background: none; | |
width: 16px; | |
height: 16px; | |
content: ""; | |
margin-right: 1rem; | |
font-size: 16px; | |
color: #c23934; | |
line-height: 18px; | |
} | |
&.pOne.error.strength_3 .bBody .summary { | |
padding-bottom: 7px; | |
} | |
&.pOne.error.strength_3 .bBody .summary, | |
&.pOne.error.strength_3 .bBody .detail { | |
line-height: 1.25; | |
} | |
&.pOne .summary { | |
font-size: 1rem; | |
padding-bottom: 1rem; | |
font-weight: 700; | |
color: #16325c; | |
} | |
&.pOne .detail { | |
font-size: 1rem; | |
color: #16325c; | |
} | |
&.pOne.error, | |
&.pOne.warning { | |
margin: 0; | |
padding: 1rem; | |
border: none; | |
background: white; | |
border-bottom: 1px solid #d9dbdd; | |
} | |
&.pOne.warning.strength_1 .body { | |
padding: 0; | |
} | |
&.pOne.warning.strength_1 .bLeft .icon { | |
content: ""; | |
font-size: 1rem; | |
color: #ffb75d; | |
background: none; | |
padding-right: 0.125rem; | |
} | |
} | |
/// | |
/// SALESFORCE RELATED LIST CARDS (DESKTOP) | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceRelatedListCardDesktop { | |
.actionsContainer .rowActionsPlaceHolder { | |
line-height: 1.75rem; | |
width: 2.375rem; | |
} | |
.actionsContainer .rowActionsPlaceHolder > .forceIcon { | |
font-size: 0.875rem; | |
} | |
.forceInlineSpinner { | |
display: inline-block; | |
vertical-align: middle; | |
} | |
.baseCard__header-title-container { | |
display: inline-flex; | |
max-width: 100%; | |
align-items: center; | |
} | |
.forceDotsSpinner { | |
padding: 16px 8px; | |
} | |
} | |
/// | |
/// TABS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiTabItem { | |
list-style: none; | |
white-space: nowrap; | |
display: inline-block; | |
a { | |
display: block; | |
text-decoration: none; | |
} | |
.close { | |
display: inline-block; | |
width: 15px; | |
height: 15px; | |
position: relative; | |
text-align: center; | |
margin-left: 10px; | |
} | |
&.hidden { | |
display: none !important; | |
} | |
} | |
/// | |
/// TAB OVERFLOW MENU ITEMS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiTabOverflowMenuItem { | |
display: inline-block; | |
.tabHeader .title { | |
display: block; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
&.hidden { | |
display: none; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE ACTION BAR | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceActionBar { | |
display: flex; | |
flex-direction: row; | |
align-items: center; | |
justify-content: center; | |
border: none; | |
width: 100%; | |
height: 85px; | |
padding: 15px 24px 0; | |
background: linear-gradient(to bottom, rgba(230, 230, 235, 0) 0%, white calc(100% - 52px), white 100%); | |
position: absolute; | |
bottom: 0; | |
box-sizing: border-box; | |
border-radius: 0 0 4px 4px; | |
.embeddedServiceSidebarButton { | |
width: 100%; | |
} | |
.embeddedServiceSidebarButton:not(:disabled):focus { | |
text-decoration: underline; | |
} | |
.embeddedServiceFieldServiceActionBar button:only-child { | |
margin-left: auto; | |
} | |
.back { | |
display: none; | |
} | |
@media only screen and (min-width: 48em) { | |
justify-content: space-between; | |
height: 56px; | |
min-height: 56px; | |
background: #e6e6eb; | |
border-top: 1px solid #9faab5; | |
padding: 0 24px; | |
border-radius: 0 0 4px 4px; | |
box-sizing: border-box; | |
position: relative; | |
.embeddedServiceSidebarButton { | |
width: 0; | |
min-width: 0; | |
max-width: min-content; | |
flex: 1; | |
} | |
.embeddedServiceSidebarButton:only-child { | |
flex: none; | |
width: auto; | |
} | |
.back { | |
display: block; | |
} | |
} | |
&--mobile-white { | |
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white calc(100% - 52px), white 100%); | |
@media only screen and (min-width: 48em) { | |
background: #e6e6eb; | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE ACTION BUTTON | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceActionButton { | |
height: 38px; | |
border-radius: 19px; | |
width: 100%; | |
padding: 0 21px; | |
@media only screen and (min-width: 48em) { | |
width: inherit; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE APPOINTMENT STATUS INDICATOR | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceAppointmentStatusIndicator { | |
&.indicatorContainer { | |
display: flex; | |
flex-direction: row; | |
justify-content: center; | |
padding: 16px 24px 0; | |
} | |
.statusContainer { | |
display: flex; | |
flex-direction: column; | |
flex-grow: 1; | |
align-self: stretch; | |
align-items: center; | |
} | |
.statusBar { | |
position: relative; | |
width: 100%; | |
height: 4px; | |
background-color: #f8f9fa; | |
border-right: 1px solid #f8f9fa; | |
border-radius: 100px; | |
} | |
.statusBar.isActive:after { | |
content: " "; | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
left: 0; | |
top: 0; | |
border-radius: 2px; | |
background-color: #000; | |
background-image: linear-gradient(to left, rgba(255, 255, 255, 0.6), rgba(0, 0, 0, 0)); | |
} | |
.statusContainer:first-of-type .statusBar { | |
border-radius: 2px 0 0 2px; | |
} | |
.statusContainer:last-of-type .statusBar { | |
border-radius: 0 2px 2px 0; | |
} | |
.statusName { | |
font-size: .875em; | |
padding: 7px 14px 10px; | |
flex-shrink: 1; | |
overflow-x: hidden; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
} | |
.statusBar:not(.isActive) + .statusName { | |
display: none; | |
} | |
@media only screen and (min-width: 475px) { | |
.statusBar:not(.isActive) + .statusName { | |
display: block; | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE DISPLAY TEXT | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceDisplayText { | |
margin: 0 0 10px; | |
&.uiOutputRichText { | |
color: #333; | |
font-size: 0.875em; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE INPUT CHECKBOX | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceInputCheckbox { | |
.flowInputLabel { | |
display: none; | |
} | |
input:focus { | |
border: 1px solid #0074bd; | |
outline: none; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE INPUT DATE | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceInputDate { | |
.flowInputContents { | |
position: relative; | |
} | |
.uiInputDate { | |
padding: 0; | |
border: none; | |
background-color: transparent; | |
> input { | |
padding: 10px 12px; | |
width: 100%; | |
height: 100%; | |
line-height: normal; | |
font-size: .875em; | |
background-color: #fff; | |
border: 1px solid #9faab5; | |
border-radius: 4px; | |
box-sizing: border-box; | |
&:focus { | |
border: 2px solid #0074bd; | |
} | |
} | |
> .datePicker-openIcon { | |
display: none; | |
} | |
} | |
.openDatePicker { | |
position: absolute; | |
top: 12px; | |
right: 12px; | |
} | |
.openDatePicker svg { | |
height: 20px; | |
fill: #0074bd; | |
} | |
.openDatePicker > .embeddedServiceIcon { | |
width: 24px; | |
} | |
.uiDatePicker.visible { | |
position: fixed; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
font-family: 'Salesforce Sans', sans-serif; | |
border-radius: 4px; | |
} | |
.dateBar { | |
display: flex; | |
padding: .25em; | |
height: 40px; | |
box-sizing: border-box; | |
background-color: transparent; | |
} | |
.datepicker__filter--month { | |
padding: 0 .25em 0 0; | |
display: flex; | |
width: initial; | |
justify-content: space-between; | |
align-items: center; | |
flex-grow: 1; | |
} | |
.datepicker__filter--month .prevLinks, | |
.datepicker__filter--month .nextLinks { | |
width: 32px; | |
height: 32px; | |
} | |
.datepicker__filter--month .nextLinks { | |
order: 1; | |
} | |
.datepicker__filter--month .monthYear { | |
font-size: 1em; | |
font-family: "Salesforce Sans", sans-serif; | |
} | |
.uiDatePicker--default .dateBar .navLink { | |
background: none; | |
border: none; | |
height: 100%; | |
width: 100%; | |
} | |
.uiDatePicker--default .dateBar .navLink:hover { | |
box-shadow: none; | |
} | |
.uiDatePicker--default .dateBar .navLink:before { | |
content: " "; | |
display: block; | |
position: relative; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
width: 0; | |
height: 0; | |
border-top: 6px solid transparent; | |
border-bottom: 6px solid transparent; | |
} | |
.uiDatePicker--default .dateBar .nextMonth:before { | |
border-left: 8px solid #54698d; | |
} | |
.uiDatePicker--default .dateBar .prevMonth:before { | |
border-right: 8px solid #54698d; | |
} | |
.uiDatePicker--default .dateBar .slds-select { | |
height: calc(1.875em + (1px * 2)); | |
padding-left: .5em; | |
padding-right: 1.5em; | |
background-color: #fff; | |
border: 1px solid #d8dde6; | |
border-radius: .25em; | |
font-size: 1em; | |
font-family: 'Salesforce Sans', sans-serif; | |
color: #333; | |
} | |
.datepicker__filter--year { | |
position: relative; | |
} | |
.uiDatePicker--default .dateBar .datepicker__filter--year:before, | |
.uiDatePicker--default .dateBar .datepicker__filter--year:after { | |
content: " "; | |
position: absolute; | |
display: block; | |
right: .5em; | |
width: 0; | |
height: 0; | |
border-left: 3px solid transparent; | |
border-right: 3px solid transparent; | |
} | |
.uiDatePicker--default .dateBar .datepicker__filter--year:before { | |
border-bottom: 5px solid #061c3f; | |
top: calc((1.75em / 2) - 6px); | |
} | |
.uiDatePicker--default .dateBar .datepicker__filter--year:after { | |
border-top: 5px solid #061c3f; | |
bottom: calc((1.75em / 2) - 6px); | |
} | |
.uiDatePickerGrid--default thead { | |
background-color: transparent; | |
border: none; | |
} | |
.calGrid .dayOfWeek { | |
color: #54698d; | |
font-family: 'Salesforce Sans', sans-serif; | |
font-size: .875em; | |
padding: .5em; | |
box-sizing: border-box; | |
width: 40px; | |
font-weight: 400; | |
} | |
.uiDatePickerGrid .calGrid .calRow td.uiDayInMonthCell { | |
font-family: 'Salesforce Sans', sans-serif; | |
font-size: 1em; | |
padding: .25em; | |
text-align: center; | |
border: none; | |
box-sizing: border-box; | |
height: 44px; | |
} | |
.calGrid .uiDayInMonthCell > span { | |
font-family: 'Salesforce Sans', sans-serif; | |
font-size: .875em; | |
width: 2em; | |
height: 2em; | |
padding: 0; | |
display: block; | |
position: relative; | |
min-width: 2em; | |
line-height: 2em; | |
border-radius: 50%; | |
margin: auto; | |
color: #333; | |
} | |
.calGrid .uiDayInMonthCell:hover { | |
cursor: pointer; | |
} | |
.calGrid .uiDayInMonthCell:not(.slds-is-selected):active > span, | |
.calGrid .uiDayInMonthCell:not(.slds-is-selected):hover > span { | |
background: #f0f0f0; | |
transition: background 0.4s ease; | |
} | |
.calGrid .uiDayInMonthCell.slds-is-selected > span { | |
background: none; | |
border: 1px solid #0074bd; | |
} | |
.calGrid .uiDayInMonthCell .todayDate { | |
text-shadow: none; | |
box-shadow: none; | |
background: #0074bd; | |
color: #fff; | |
} | |
.calGrid .uiDayInMonthCell.slds-is-selected .todayDate { | |
background: #0074bd; | |
} | |
.calGrid .uiDayInMonthCell:not(.slds-is-selected):hover > .todayDate { | |
background: #0074bd; | |
} | |
.calGrid .uiDayInMonthCell.slds-disabled-text > span { | |
color: #d8dde6; | |
} | |
.calGrid .uiDayInMonthCell.slds-disabled-text:hover > span { | |
background: none; | |
} | |
.calGrid tr:last-child td { | |
padding: .25em; | |
text-align: center; | |
font-size: 0.875em; | |
} | |
.calGrid tr:last-child td .slds-text-link { | |
color: #0070d2; | |
padding-bottom: .5em; | |
height: initial; | |
line-height: normal; | |
} | |
.calGrid tr:last-child td .slds-text-link:hover { | |
text-decoration: underline; | |
} | |
.assistiveText { | |
position: absolute; | |
border: 0; | |
clip: rect(1px, 1px, 1px, 1px); | |
width: 1px; | |
height: 1px; | |
margin: -1px; | |
padding: 0; | |
overflow: hidden; | |
z-index: -1000; | |
font-size: 1px; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE INPUT LONG TEXT | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceInputLongText { | |
.uiInputTextArea { | |
height: 80px; | |
resize: none; | |
line-height: 20px; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE INPUT MULTI-CHECKBOX | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceInputMultiCheckbox { | |
.checkboxOptions { | |
display: flex; | |
width: 100%; | |
height: 100%; | |
flex-wrap: wrap; | |
} | |
.embeddedServiceFieldServiceBaseCheckbox { | |
flex-grow: 1; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE INPUT MULTI-SELECT | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE INPUT DATE | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceInputMultiSelect { | |
.uiInput { | |
height: 80px; | |
&:focus { | |
border: 2px solid #0074bd; | |
outline: none; | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE INPUT RADIO | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceInputRadio { | |
.radioOptions { | |
display: flex; | |
width: 100%; | |
height: 100%; | |
flex-wrap: wrap; | |
} | |
.uiInputRadio { | |
display: flex; | |
justify-content: flex-start; | |
align-items: center; | |
padding: 0; | |
background-color: transparent; | |
border: none; | |
flex-grow: 1; | |
} | |
.uiInputRadio > input { | |
position: relative; | |
width: 16px; | |
height: 16px; | |
flex-shrink: 0; | |
border: solid 1px #d8dde6; | |
border-radius: 50%; | |
margin-right: 6px; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
} | |
.uiInputRadio > input:focus { | |
border: solid 2px #0074bd; | |
outline: none; | |
} | |
.uiInputRadio > input:checked:after { | |
content: " "; | |
position: absolute; | |
display: block; | |
height: 8px; | |
width: 8px; | |
border-radius: 50%; | |
top: 50%; | |
left: 50%; | |
transform: translate3d(-50%, -50%, 0); | |
background-color: #0074bd; | |
} | |
.uiInputRadio > label { | |
color: #333; | |
order: 1; | |
min-width: 0; | |
} | |
.uiInputRadio > label > span { | |
display: block; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
&.has-error .uiInput { | |
border: none; | |
} | |
&.has-error .uiInput input { | |
border: 1px solid #c23934; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE INPUT SELECT | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE INPUT DATE | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceInputSelect { | |
.uiInputSelect { | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
} | |
.flowInputContents { | |
position: relative; | |
} | |
.dropdownChevron { | |
position: absolute; | |
right: 16px; | |
top: 16px; | |
pointer-events: none; | |
} | |
.dropdownChevron svg { | |
height: 13px; | |
width: 11px; | |
fill: #0074bd; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE SELECTION TABS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceSelectionTabs { | |
display: flex; | |
width: 100%; | |
min-height: 48px; | |
max-height: 48px; | |
justify-content: center; | |
box-shadow: 0 0 1px rgba(0, 0, 0, 0.2); | |
box-sizing: border-box; | |
background-color: #fff; | |
z-index: 2; | |
.selectionTab { | |
width: 180px; | |
box-sizing: border-box; | |
font-size: .75em; | |
text-decoration: none; | |
color: #333; | |
text-transform: uppercase; | |
text-align: center; | |
line-height: 46px; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
transition: background 0.4s ease; | |
} | |
.selectionTab:hover, | |
.selectionTab:focus { | |
outline: none; | |
background-color: #f2f2f2; | |
} | |
.selectionTab.active { | |
border-bottom: 2px solid #0074bd; | |
} | |
ul[role=tablist] { | |
display: flex; | |
} | |
.slds-tab__scroll-controls { | |
display: none; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE CHAT FILE TRANSFER MESSAGE | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateChatFileTransferMessage { | |
position: relative; | |
.fileTransferMessage { | |
display: flex; | |
padding-left: 3px; | |
overflow: hidden; | |
} | |
.fileInfo { | |
display: flex; | |
flex-direction: column; | |
padding-left: 15px; | |
text-align: left; | |
white-space: nowrap; | |
overflow: hidden; | |
} | |
.fileWarning { | |
position: absolute; | |
left: -30px; | |
top: 50%; | |
transform: translateY(-50%); | |
fill: #e74c3c; | |
} | |
.fileInfo span { | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.fileWarning.embeddedServiceIcon > svg { | |
fill: #e74c3c; | |
} | |
.fileIcon.embeddedServiceIcon { | |
padding-top: 4px; | |
} | |
.fileIcon.embeddedServiceIcon > svg > g > path:first-of-type { | |
fill: #49c9a7; | |
} | |
.progressIndicator { | |
position: absolute; | |
bottom: 0; | |
left: 0; | |
height: 4px; | |
background-color: #fff; | |
opacity: .5; | |
width: 0; | |
border-radius: 0 4px 4px 0; | |
animation: progress-bar 1.5s linear; | |
animation-fill-mode: forwards; | |
} | |
.progressIndicator.fail { | |
animation: fail 1.25s linear; | |
} | |
.progressIndicator.success { | |
animation: success 0.75s linear; | |
} | |
} | |
@keyframes progress-bar { | |
0% { | |
left: 0; | |
right: auto; | |
} | |
35% { | |
width: 40%; | |
} | |
100% { | |
left: 0; | |
width: 80%; | |
} | |
} | |
@keyframes fail { | |
0% { | |
left: 0; | |
width: 80%; | |
} | |
50% { | |
opacity: 0.5; | |
} | |
75% { | |
opacity: 0.25; | |
} | |
100% { | |
width: 80%; | |
opacity: 0; | |
} | |
} | |
@keyframes success { | |
0% { | |
left: 0; | |
width: 80%; | |
} | |
50% { | |
opacity: .5; | |
width: 100%; | |
} | |
100% { | |
opacity: 0; | |
width: 100%; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE CHAT HEADER | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateChatHeader { | |
.content { | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
padding: 0 18px; | |
height: 120px; | |
box-sizing: border-box; | |
} | |
&.alert .content { | |
justify-content: center; | |
} | |
.agentInfo { | |
margin-top: 4px; | |
} | |
.avatarImg { | |
width: 40px; | |
height: 40px; | |
margin: 0 auto; | |
border-radius: 50%; | |
background-size: 100%; | |
display: none; | |
} | |
.extendedHeaderIcon { | |
justify-content: center; | |
margin-top: 0; | |
} | |
.message { | |
width: 100%; | |
display: block; | |
margin-top: 6px; | |
font-size: 0.75em; | |
} | |
&:not(.alert) .message { | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
display: none; | |
} | |
.idleWarning { | |
width: 223px; | |
height: 102px; | |
margin: auto; | |
font-size: 1em; | |
} | |
.chatOptions { | |
display: flex; | |
width: 100%; | |
margin-top: 0; | |
align-content: center; | |
justify-content: center; | |
} | |
&.alert .message { | |
font-size: .875em; | |
margin-bottom: 6px; | |
} | |
.embeddedServiceLoadingBalls { | |
display: flex; | |
justify-content: center; | |
margin-bottom: 12px; | |
transform: scale(1.2); | |
} | |
.embeddedServiceLoadingBalls .loadingBall { | |
background-color: #fff; | |
} | |
&.reconnecting { | |
background-color: #cb2b19; | |
} | |
.content { | |
justify-content: flex-start; | |
height: 156px; | |
} | |
.avatarImg { | |
display: block; | |
} | |
&:not(.alert) .message { | |
display: block; | |
} | |
.chatOptions { | |
margin-top: 6px; | |
} | |
.extendedHeaderIcon { | |
margin: 20px 0 16px; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE CHAT INPUT FOOTER | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateChatInputFooter { | |
&.chasitorInputWrapper { | |
position: relative; | |
width: 100%; | |
height: auto; | |
background-color: #ededed; | |
border-radius: 0 0 8px 8px; | |
} | |
.chasitorText { | |
font-family: 'Salesforce Sans', sans-serif; | |
font-weight: 300; | |
background: #fff; | |
border: 1px solid #fff; | |
resize: none; | |
font-size: .875em; | |
line-height: 1.3; | |
overflow: hidden; | |
width: 100%; | |
height: 100%; | |
color: #333; | |
border-radius: 4px; | |
padding: 8px; | |
box-sizing: border-box; | |
outline: none; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
} | |
.chasitorText.textAreaIsFocused { | |
border-color: #0074bd; | |
} | |
&.dynamicResizeTextMoreThanThreeRows .chasitorText { | |
overflow-y: scroll; | |
} | |
&.dynamicResizeTextOneRow { | |
height: 66px; | |
min-height: 66px; | |
} | |
&.dynamicResizeTextTwoRows { | |
height: 70px; | |
min-height: 70px; | |
} | |
&.dynamicResizeTextThreeRows, | |
&.dynamicResizeTextMoreThanThreeRows { | |
height: 88px; | |
min-height: 88px; | |
} | |
&.dynamicResizeTextOneRow .chasitorText { | |
padding: 15px 8px; | |
} | |
.chasitorControls { | |
position: relative; | |
height: calc(100% - 16px); | |
margin: 8px; | |
border-radius: 4px; | |
display: flex; | |
} | |
.chasitorControls .uiInput { | |
align-self: stretch; | |
max-width: 100%; | |
height: 100%; | |
flex-grow: 1; | |
} | |
.chasitorControls .chatActionButton { | |
padding: 0 8px; | |
border: 1px solid transparent; | |
} | |
.fileUploadControls { | |
display: flex; | |
position: relative; | |
background-color: #ededed; | |
width: 100%; | |
align-items: center; | |
} | |
.chatActionButton.Close { | |
margin-right: 8px; | |
} | |
.embeddedServiceLiveAgentStateChatAction.Upload, | |
.embeddedServiceLiveAgentStateChatAction.Remove { | |
background-color: #ededed; | |
margin-right: 6px; | |
border: 1px solid #ededed; | |
} | |
.embeddedServiceLiveAgentStateChatAction.Upload svg, | |
.embeddedServiceLiveAgentStateChatAction.Remove svg { | |
fill: #adadad; | |
} | |
.embeddedServiceLiveAgentStateChatAction:hover.Upload svg, | |
.embeddedServiceLiveAgentStateChatAction:hover.Remove svg { | |
fill: #0286cf; | |
} | |
.embeddedServiceLiveAgentStateChatAction:focus.Upload, | |
.embeddedServiceLiveAgentStateChatAction:focus.Remove { | |
background-color: #ffffff; | |
border-color: #0076de; | |
box-shadow: 0 0 3px #0070d2; | |
} | |
.embeddedServiceLiveAgentStateChatAction:focus.Upload svg, | |
.embeddedServiceLiveAgentStateChatAction:focus.Remove svg { | |
fill: #0076de; | |
} | |
.chatActionButton.Send { | |
display: flex; | |
padding: 13px 8px 0 0; | |
width: 32px; | |
align-items: flex-start; | |
flex-direction: column; | |
} | |
.fileInfo { | |
display: flex; | |
text-align: left; | |
width: 100%; | |
align-self: stretch; | |
padding-right: 12px; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
flex-direction: column; | |
justify-content: center; | |
} | |
.fileName { | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.fileName, | |
.fileDescription { | |
font-size: 0.875em; | |
} | |
.fileIcon { | |
padding: 0 8px; | |
} | |
.fileIcon.embeddedServiceIcon > svg > g > path:first-of-type { | |
fill: #49c9a7; | |
} | |
.fileTooLarge { | |
display: flex; | |
position: relative; | |
align-self: stretch; | |
max-width: 100%; | |
flex-grow: 1; | |
align-items: center; | |
justify-content: center; | |
font-size: 0.875em; | |
} | |
.fileTooLarge + .chatActionButton.Upload:disabled, | |
.fileTooLarge + .chatActionButton.Upload:disabled:hover, | |
.fileTooLarge + .chatActionButton.Upload:disabled:focus { | |
opacity: 1; | |
} | |
.selectNewFile { | |
color: #4a90e2; | |
} | |
a { | |
text-decoration: none; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE CHAT MESSAGE | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateChatMessage .uiOutputRichText { | |
text-align: left; | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE CHAT TYPING INDICATOR | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateChatTypingIndicator { | |
.typingIndicatorBall { | |
font-size: 8px; | |
text-align: left; | |
float: left; | |
margin: 5px 3px; | |
max-width: 72%; | |
display: block; | |
width: 8px; | |
height: 8px; | |
border-radius: 50%; | |
background-color: #b8b8b8; | |
animation-delay: -.5s; | |
animation: liveAgentTypingIndicatorAnimate 2.5s infinite ease-in-out; | |
} | |
.second { | |
animation-delay: 3s; | |
} | |
.third { | |
animation-delay: 4s; | |
} | |
} | |
@keyframes liveAgentTypingIndicatorAnimate { | |
0% { | |
opacity: 0; | |
} | |
35% { | |
opacity: 1; | |
} | |
50% { | |
opacity: 1; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE WAITING HEADER | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateWaitingHeader { | |
&.reconnecting { | |
background-color: #cb2b19; | |
} | |
.content { | |
display: flex; | |
flex-direction: column; | |
justify-content: flex-start; | |
box-sizing: border-box; | |
height: 120px; | |
padding: 4px 0; | |
} | |
.backgroundPattern { | |
background-position: 0 -46px; | |
} | |
.reconnectingText { | |
font-size: .875em; | |
line-height: 1.3; | |
} | |
.waitingGreeting { | |
margin-top: 12px; | |
} | |
.waitingGreeting.imageIsSet { | |
margin-top: 0; | |
line-height: 1; | |
} | |
.waitingImage { | |
height: 38px; | |
width: 132px; | |
margin: 8px auto; | |
background-repeat: no-repeat; | |
background-position: center; | |
background-size: 100%; | |
} | |
.waitingMessage { | |
line-height: normal; | |
margin: 16px 12px 0; | |
} | |
.waitingMessage.imageIsSet { | |
margin-top: 8px; | |
font-size: .875em; | |
line-height: 1.3; | |
} | |
.embeddedServiceLoadingBalls { | |
transform: scale(1.2); | |
margin-bottom: 20px; | |
} | |
.embeddedServiceLoadingBalls .loadingBall { | |
background-color: #fff; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE SIDEBAR STATE | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceSidebarState.stateBody { | |
width: 100%; | |
height: 100%; | |
} | |
/// | |
/// SALESFORCE VIEWS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.forceRecordView:not(.inlineEditEnabled) .inline-edit-trigger { | |
display: none; | |
} | |
.forceRelatedListSingleContainer { | |
.errorContainer { | |
background: white; | |
border: solid 1px #d9dbdd; | |
width: 100%; | |
border-radius: .25rem; | |
margin-top: 0.75rem; | |
} | |
&.container { | |
width: 100%; | |
} | |
&.placeholder { | |
height: 225px; | |
border: none; | |
} | |
} | |
/// | |
/// TABS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiTab.scrolling { | |
overflow: auto; | |
} | |
.uiTab.tabs__content { | |
display: none; | |
} | |
.uiTab.active { | |
display: block; | |
} | |
.uiTabBar .tabs__nav { | |
padding: 0; | |
margin: 0; | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE STATE APPOINTMENT DETAIL | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceStateAppointmentDetail { | |
width: 600px; | |
height: 100%; | |
overflow: hidden; | |
display: flex; | |
flex-direction: column; | |
.slds-hide { | |
display: none; | |
} | |
.appointmentHeader { | |
padding: 30px 3em 16px; | |
color: #333; | |
border-bottom: 1px solid #e6e8eb; | |
margin-bottom: 16px; | |
} | |
.appointmentHeaderTitle { | |
position: relative; | |
display: flex; | |
align-items: center; | |
font-size: 1.25em; | |
} | |
.appointmentHeaderIcon { | |
position: absolute; | |
left: -32px; | |
} | |
.appointmentHeaderIcon svg[data-key=clock] { | |
fill: #9faab5; | |
} | |
.appointmentHeaderTimespan { | |
display: flex; | |
flex-direction: row; | |
margin-top: 12px; | |
} | |
.appointmentHeaderTimespan .timespanSection { | |
font-size: 1em; | |
} | |
.appointmentHeaderTimespan .timespanMeridian { | |
margin-left: 3px; | |
font-size: 0.75em; | |
} | |
.appointmentHeaderTimespan .timespanDash { | |
margin: 0 7px; | |
} | |
.appointmentHeaderDate { | |
margin-top: 12px; | |
font-size: .875em; | |
color: #333; | |
} | |
.appointmentHeaderAddress { | |
margin-top: 4px; | |
font-size: .875em; | |
color: #333; | |
} | |
.fieldServiceAppointmentDetailContainer { | |
flex-grow: 3; | |
overflow-x: hidden; | |
overflow-y: auto; | |
background-color: #f8f9fa; | |
} | |
.fieldServiceAppointmentRecordView { | |
overflow: hidden; | |
display: flex; | |
margin-top: 1em; | |
} | |
.hoisted { | |
display: none; | |
} | |
.fieldServiceAppointmentAssignedResources { | |
padding: .5em 3em; | |
margin-bottom: 1.5em; | |
} | |
.fieldServiceAppointmentAssignedResources .forceRelatedListPreview { | |
min-height: 2em; | |
} | |
.fieldServiceAppointmentAssignedResources h2, | |
.fieldServiceAppointmentAssignedResources h3 { | |
margin: 0; | |
font-weight: normal; | |
line-height: 21px; | |
} | |
.fieldServiceAppointmentAssignedResources h2 { | |
font-size: 0.75em; | |
} | |
.fieldServiceAppointmentAssignedResources h3 { | |
font-size: 0.875em; | |
} | |
.fieldServiceAppointmentAssignedResources, | |
.forceDetailPanel, | |
.forceDetailPanel > div:last-child, | |
.forcePageBlock, | |
.forcePageBlockSection, | |
.forcePageBlockSection > div { | |
display: flex; | |
background-color: #f8f9fa; | |
width: 100%; | |
} | |
.forceDetailPanel { | |
margin: 0; | |
padding: 0; | |
} | |
.forcePageBlockSection div[role=list] { | |
width: 100%; | |
} | |
.embeddedServiceFieldServiceStateAppointmentDetail div.forcePageBlockSection:nth-child(n+2) { | |
display: none; | |
} | |
.embeddedServiceFieldServiceStateAppointmentDetail div.forcePageBlockSection h3 { | |
display: none; | |
} | |
.forcePageBlockItem { | |
margin: 0.5em 3em; | |
} | |
.forcePageBlockItem .slds-form-element_separator { | |
border: none; | |
} | |
.forcePageBlockItem > div > div:first-of-type, | |
.fieldServiceAppointmentAssignedResources h2 { | |
margin-bottom: 0.25em; | |
} | |
.forcePageBlockItem > div > div:not(:first-of-type), | |
.fieldServiceAppointmentAssignedResources .forceActionRow .itemTitle { | |
color: #333; | |
} | |
.forcePageBlockItem img { | |
background: none; | |
} | |
.fieldServiceAppointmentAssignedResources .forceRelatedListPreview .forceListRecord, | |
.fieldServiceAppointmentAssignedResources .forceListRecord .body { | |
background-color: #f8f9fa; | |
border: 0; | |
padding: 0; | |
} | |
.fieldServiceAppointmentAssignedResources .forceEntityIcon, | |
.fieldServiceAppointmentAssignedResources .lightningPrimitiveIcon, | |
.fieldServiceAppointmentAssignedResources .forceVirtualAction, | |
.fieldServiceAppointmentAssignedResources .forceRelatedListCardDesktop > a, | |
.fieldServiceAppointmentAssignedResources h2 span:last-child { | |
display: none; | |
} | |
.embeddedServiceFieldServiceStateAppointmentDetail a.forceOutputLookup, | |
.fieldServiceAppointmentAssignedResources a { | |
pointer-events: none; | |
cursor: default; | |
text-decoration: none; | |
color: #333; | |
} | |
.embeddedServiceFieldServiceActionBar { | |
justify-content: space-between; | |
z-index: 999; | |
} | |
.fieldServiceActionButton { | |
height: 38px; | |
padding: 0 21px; | |
border-radius: 19px; | |
} | |
.embeddedServiceFieldServiceActionBar.mobile-empty { | |
display: none; | |
} | |
.fieldServiceActionButton.cancel { | |
background-color: #fff; | |
border: 1px solid #cccdcf; | |
} | |
.fieldServiceActionButton.cancel:hover { | |
background-color: #eee; | |
} | |
.fieldServiceActionButton.back, | |
.fieldServiceActionButton.modify { | |
display: none; | |
} | |
.fieldServiceMobileHeader .fieldServiceActionButton.modify.mobile { | |
margin: .5em; | |
font-size: .75em; | |
float: right; | |
} | |
.toast { | |
position: relative; | |
display: flex; | |
color: #fff; | |
flex-direction: row; | |
justify-content: space-between; | |
margin: 1em; | |
align-items: center; | |
border-radius: .25em; | |
box-shadow: 0.5px 1px 2px 0.5px rgba(0, 0, 0, 0.11); | |
transition: height 10s linear 5s; | |
width: calc(100% - 2em); | |
box-sizing: border-box; | |
} | |
.toast .updatedMessage { | |
margin-right: .75em; | |
padding: 1em; | |
flex-grow: 1; | |
align-self: stretch; | |
} | |
.toast .toastCloseIcon { | |
display: block; | |
background: none; | |
border: none; | |
box-shadow: none; | |
margin: 0; | |
padding: 0; | |
height: 100%; | |
margin-right: 1em; | |
} | |
.toast .embeddedServiceIcon.close { | |
margin-left: auto; | |
} | |
.toast.updateSuccessful { | |
background-color: #02844b; | |
} | |
.toast.errorToast { | |
background-color: #c4382f; | |
} | |
.embeddedServiceLoadingBalls { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
} | |
.forceDotsSpinner { | |
display: none; | |
} | |
.fieldServiceMobileHeader { | |
background-color: #f8f9fa; | |
} | |
.slds-form-element__label { | |
font-size: .75em; | |
color: #333; | |
} | |
.itemBody .slds-form-element__static { | |
font-size: .875em; | |
color: #333; | |
border: none; | |
} | |
.forceOutputAddress { | |
pointer-events: none; | |
text-decoration: none; | |
color: initial; | |
cursor: text; | |
} | |
.forceOutputAddressText.map { | |
display: none; | |
} | |
.forceOutputLookupWithPreview a.textUnderline, | |
.fieldServiceAppointmentAssignedResources .outputLookupLink { | |
border: none; | |
color: #333; | |
} | |
.uiOutputCheckbox { | |
position: relative; | |
display: block; | |
width: 19px; | |
height: 19px; | |
border: 1px solid #cccdcf; | |
border-radius: 4px; | |
background-color: #fff; | |
box-sizing: border-box; | |
} | |
.uiOutputCheckbox img { | |
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="); | |
width: 0; | |
height: 0; | |
} | |
.uiOutputCheckbox img.checked { | |
position: absolute; | |
display: block; | |
padding: 13px 13px 0 0; | |
left: 2px; | |
top: 2px; | |
border-radius: 2px; | |
background-color: #0074bd; | |
} | |
@media only screen and (min-width: 48em) { | |
.fieldServiceAppointmentAssignedResources { | |
padding-bottom: 0; | |
} | |
.forcePageBlockSection div[role=list] { | |
display: inline-block; | |
flex-direction: column; | |
} | |
.forcePageBlockSectionRow { | |
display: flex; | |
flex-direction: row; | |
width: 100%; | |
justify-content: space-between; | |
box-sizing: border-box; | |
} | |
.forceDetailPanel .forcePageBlockSectionView .forcePageBlockItem:first-child, | |
.forceDetailPanel .forcePageBlockSectionView .forcePageBlockItem:last-child { | |
margin: 1em; | |
} | |
.forcePageBlockItem { | |
width: 50%; | |
min-width: calc(50% - 6em); | |
} | |
.embeddedServiceFieldServiceActionBar { | |
justify-content: space-between; | |
height: 70px; | |
min-height: 70px; | |
background: #e6e6eb; | |
border-top: 1px solid #9faab5; | |
padding: 0 24px; | |
border-radius: 0 0 4px 4px; | |
box-sizing: border-box; | |
position: relative; | |
} | |
.fieldServiceActionButton { | |
margin: 0 0.25em; | |
} | |
.fieldServiceMobileHeader { | |
display: none; | |
} | |
.embeddedServiceFieldServiceActionBar.mobile-empty { | |
display: flex; | |
} | |
.fieldServiceActionButton.back, | |
.fieldServiceActionButton.modify { | |
display: block; | |
} | |
.fieldServiceActionButton.cancel { | |
margin-left: auto; | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE STATE APPOINTMENT DETAIL2 | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceStateAppointmentDetail2 { | |
display: flex; | |
width: 600px; | |
height: 100%; | |
overflow: hidden; | |
flex-direction: column; | |
.slds-hide { | |
display: none; | |
} | |
.embeddedServiceLoadingBalls { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
} | |
.forceDotsSpinner { | |
display: none; | |
} | |
.slds-form-element__label { | |
font-size: .75em; | |
color: #333; | |
} | |
.itemBody .slds-form-element__static { | |
font-size: .875em; | |
color: #333; | |
border: none; | |
} | |
.forceOutputAddress { | |
pointer-events: none; | |
text-decoration: none; | |
color: initial; | |
cursor: text; | |
} | |
.forceOutputAddressText.map { | |
display: none; | |
} | |
.forceOutputLookupWithPreview a.textUnderline, | |
.fieldServiceAppointmentAssignedResources .outputLookupLink { | |
border: none; | |
color: #333; | |
} | |
.uiOutputCheckbox { | |
position: relative; | |
display: block; | |
width: 19px; | |
height: 19px; | |
border: 1px solid #cccdcf; | |
border-radius: 4px; | |
background-color: #fff; | |
box-sizing: border-box; | |
} | |
.uiOutputCheckbox img { | |
content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="); | |
width: 0; | |
height: 0; | |
} | |
.uiOutputCheckbox img.checked { | |
position: absolute; | |
display: block; | |
padding: 13px 13px 0 0; | |
left: 2px; | |
top: 2px; | |
border-radius: 2px; | |
background-color: #0074bd; | |
} | |
.slds-assistive-text { | |
position: absolute; | |
margin: -1px; | |
border: 0; | |
padding: 0; | |
width: 1px; | |
height: 1px; | |
overflow: hidden; | |
clip: rect(0, 0, 0, 0); | |
text-transform: none; | |
white-space: nowrap; | |
} | |
.tabs__nav { | |
border-bottom: 1px solid #dddbda; | |
background-color: transparent; | |
} | |
.tabs__item.active > a { | |
background-color: transparent; | |
} | |
.uiTabset--base .tabs__nav { | |
display: flex; | |
} | |
.uiTabset--base .tabs__content { | |
position: relative; | |
padding: 1rem 0; | |
} | |
.uiTabset--base .tabs__item { | |
font-weight: 400; | |
font-size: .8125rem; | |
flex-shrink: 0; | |
} | |
.uiTabset--base .tabs__item > a { | |
display: block; | |
text-decoration: none; | |
cursor: pointer; | |
} | |
.uiTabset--base .tabs__item > a:focus { | |
outline: 0; | |
} | |
.uiTabset--default { | |
background-color: white; | |
} | |
.tabs__nav { | |
border-bottom: 1px solid #dddbda; | |
background-color: transparent; | |
} | |
.tabs__item { | |
text-transform: uppercase; | |
letter-spacing: 0.0625em; | |
} | |
.tabs__item + .tabs__item { | |
margin-left: 1.5rem; | |
} | |
.tabs__item > a, | |
.uiTabOverflowMenuItem a { | |
border-bottom: 2px solid transparent; | |
padding: 1.5rem 1rem .5rem; | |
color: #706e6b; | |
} | |
.tabs__item > a:hover, | |
.tabs__item > a:focus { | |
border-color: #0070d2; | |
color: #1b5297; | |
} | |
.tabs__item > a:focus { | |
box-shadow: #0070d2 0 -1px 0 inset; | |
} | |
.tabs__item.active > a { | |
border-color: #0070d2; | |
color: #3e3e3c; | |
font-weight: 700; | |
} | |
.tabs__content { | |
border: none; | |
padding: 0; | |
} | |
.forceDetailPanelDesktop.slds-card, | |
.forceDetailPanelDesktop2.slds-card { | |
padding: 0; | |
} | |
.uiTabset--task .tabs__nav { | |
background-color: #f3f2f2; | |
border: 1px solid #dddbda; | |
border-radius: .25rem .25rem 0 0; | |
white-space: nowrap; | |
} | |
.uiTabset--task .tabs__item + .tabs__item { | |
margin: 0; | |
} | |
.uiTabset--task .tabs__item { | |
position: relative; | |
text-transform: none; | |
letter-spacing: normal; | |
} | |
.uiTabset--task .tabs__item > a { | |
padding: 1rem; | |
color: #706e6b; | |
background-clip: padding-box; | |
border-left: 1px solid transparent; | |
border-right: 1px solid transparent; | |
border-bottom: none; | |
} | |
.uiTabset--task .tabs__item > a:hover, | |
.uiTabset--task .tabs__item > a:focus { | |
border-color: #dddbda; | |
} | |
.uiTabset--task .tabs__item > a:focus { | |
box-shadow: none; | |
text-decoration: underline; | |
} | |
.uiTabset--task .tabs__item.active > a { | |
background-color: white; | |
color: #1b5297; | |
border-color: #dddbda; | |
} | |
.uiTabset--task .tabs__item.active:before { | |
content: ''; | |
width: 100%; | |
height: 2px; | |
position: absolute; | |
display: block; | |
bottom: -2px; | |
left: 0; | |
background: white; | |
} | |
.uiTabset--task .tabs__item:first-child > a { | |
border-left: none; | |
border-radius: 0.25rem 0 0 0; | |
} | |
.uiTabset--task .tabs__content { | |
background-color: white; | |
border: 1px solid #dddbda; | |
border-top: none; | |
border-radius: 0 0 .25rem .25rem; | |
padding: 1rem; | |
} | |
.uiTabset--vertical .tabs__nav { | |
flex-direction: column; | |
border: none; | |
} | |
.uiTabset--vertical .tabs__item { | |
transition: background-color .5s; | |
height: 50px; | |
line-height: 50px; | |
} | |
.uiTabset--vertical .tabs__item > a.tabHeader { | |
text-transform: none; | |
letter-spacing: normal; | |
border: none; | |
padding: 0 12px 0 24px; | |
outline: none; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
background-color: white; | |
} | |
.uiTabset--vertical .tabs__item.active { | |
background-color: #0070d2; | |
} | |
.uiTabset--vertical .tabs__item.active > a.tabHeader { | |
color: #0070d2; | |
background-color: #ecebea; | |
font-weight: 400; | |
font-size: .75rem; | |
transform: translateX(4px); | |
width: calc(100% - 4px); | |
} | |
.uiTabset--vertical .tabs__item + .tabs__item { | |
margin: 0; | |
} | |
.uiTabset--vertical .tabs__item > a:hover { | |
background-color: #f3f2f2; | |
} | |
.uiTabset--vertical .tabs__item > a.tabHeader:focus { | |
font-weight: bold; | |
transform: translateX(8px); | |
width: calc(100% - 8px); | |
box-shadow: none; | |
} | |
.uiTabset--vertical a { | |
font-weight: 400; | |
font-size: .75rem; | |
color: #3e3e3c; | |
} | |
.uiTabset--vertical a:hover { | |
color: #0070d2; | |
} | |
.uiTabset--vertical li:hover { | |
background-color: #f3f2f2; | |
transition: background-color 0.2s transform 0.2s ease-in; | |
} | |
.tabs__item.uiTabOverflowMenuItem a:hover, | |
.tabs__item.uiTabOverflowMenuItem a:focus { | |
color: #1b5297; | |
text-decoration: none; | |
} | |
.uiTabset--dense > .uiTabBar .tabs__item { | |
font-size: 1.125rem; | |
text-transform: capitalize; | |
letter-spacing: normal; | |
} | |
.uiTabset--dense > .uiTabBar .tabs__item > a, | |
.uiTabset--dense > .uiTabBar .uiTabOverflowMenuItem a { | |
padding-bottom: 0.5rem; | |
} | |
.uiTabset--dense > .uiTabBar .tabs__item + .tabs__item { | |
margin-left: 1.5rem; | |
} | |
.uiTabset--dense > .uiTab.tabs__content { | |
padding-top: 1rem; | |
} | |
.uiTabset--dense > .uiTab.tabs__content > .flexipageComponent > .slds-card-wrapper { | |
padding-top: 0; | |
} | |
.tabs__item { | |
background-color: transparent; | |
} | |
@media only screen and (min-width: 48em) { | |
.fieldServiceAppointmentAssignedResources { | |
padding-bottom: 0; | |
} | |
.forcePageBlockSection div[role=list] { | |
display: inline-block; | |
flex-direction: column; | |
} | |
.forcePageBlockSectionRow { | |
display: flex; | |
flex-direction: row; | |
width: 100%; | |
justify-content: space-between; | |
box-sizing: border-box; | |
} | |
.forceDetailPanel .forcePageBlockSectionView .forcePageBlockItem:first-child, | |
.forceDetailPanel .forcePageBlockSectionView .forcePageBlockItem:last-child { | |
margin: 1em; | |
} | |
.forcePageBlockItem { | |
width: 50%; | |
min-width: calc(50% - 6em); | |
} | |
.embeddedServiceFieldServiceActionBar { | |
justify-content: space-between; | |
height: 70px; | |
min-height: 70px; | |
background: #e6e6eb; | |
border-top: 1px solid #9faab5; | |
padding: 0 24px; | |
border-radius: 0 0 4px 4px; | |
box-sizing: border-box; | |
position: relative; | |
} | |
.fieldServiceActionButton { | |
margin: 0 0.25em; | |
} | |
.fieldServiceMobileHeader { | |
display: none; | |
} | |
.embeddedServiceFieldServiceActionBar.mobile-empty { | |
display: flex; | |
} | |
.fieldServiceActionButton.back, | |
.fieldServiceActionButton.modify { | |
display: block; | |
} | |
.fieldServiceActionButton.cancel { | |
margin-left: auto; | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE STATE APPOINTMENT LIST | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceStateAppointmentList { | |
.appointmentStateContainer { | |
height: 100%; | |
position: relative; | |
display: flex; | |
align-self: stretch; | |
flex-direction: column; | |
} | |
.appointmentListing { | |
position: relative; | |
display: flex; | |
flex-direction: column; | |
flex-grow: 1; | |
align-self: stretch; | |
background-color: #f8f9fa; | |
overflow-x: hidden; | |
overflow-y: auto; | |
} | |
.embeddedServiceLoadingBalls { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
margin: 0 auto; | |
} | |
.appointmentItem { | |
display: flex; | |
flex-direction: row; | |
padding: 8px 2px; | |
margin: 1px; | |
text-decoration: none; | |
background-color: #fff; | |
color: #000; | |
flex-shrink: 0; | |
flex-basis: 100%; | |
border-bottom: 1px solid #e9eaeb; | |
z-index: 99; | |
} | |
.appointmentItem:focus { | |
z-index: 999; | |
outline: 1px solid #0074bd; | |
background-color: #fafafa; | |
} | |
.appointmentItem:hover { | |
background-color: #f8f9fa; | |
} | |
.appointmentItem .appointmentStatusIconContainer { | |
margin: 0 20px; | |
} | |
.appointmentItem .appointmentStatusIconContainer .appointmentStatusIcon svg { | |
width: 20px; | |
height: 20px; | |
} | |
.appointmentItem:focus .appointmentDrillinIconContainer .appointmentDrillinIcon svg { | |
fill: #0074bd; | |
} | |
.activeAppointments .appointmentStatusIcon svg { | |
fill: #9faab5; | |
} | |
.appointmentItem .appointmentInfo { | |
display: flex; | |
flex-direction: column; | |
align-self: stretch; | |
flex-grow: 1; | |
min-width: 0; | |
} | |
.appointmentItem .appointmentInfo .appointmentTitle { | |
font-size: 1em; | |
color: #3d3d3d; | |
margin-bottom: 4px; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
.appointmentItem .appointmentInfo .appointmentTime { | |
font-size: 1em; | |
color: #000; | |
margin-bottom: 4px; | |
} | |
.appointmentItem .appointmentInfo .appointmentDate { | |
font-size: .75em; | |
color: #3d3d3d; | |
margin-bottom: 4px; | |
} | |
.appointmentItem .appointmentInfo .appointmentLocation { | |
font-size: .75em; | |
color: #3d3d3d; | |
} | |
.appointmentItem .appointmentDrillinIconContainer { | |
margin: 0 16px 0 20px; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
} | |
.appointmentItem .appointmentDrillinIconContainer .appointmentDrillinIcon svg { | |
width: 1em; | |
height: 1em; | |
fill: #bcc5d1; | |
} | |
.appointmentAction { | |
height: 38px; | |
padding: 0 21px; | |
border-radius: 19px; | |
} | |
.appointmentAction.back { | |
background-color: #fff; | |
border: 1px solid #9faab5; | |
} | |
.appointmentAction.back span { | |
color: #333; | |
} | |
.appointmentAction.newAppointment { | |
border: none; | |
} | |
.bookingDisabledActionBar { | |
display: none; | |
} | |
.noAppointmentsMessage { | |
display: flex; | |
flex-direction: column; | |
align-items: center; | |
justify-content: center; | |
width: 100%; | |
height: 100%; | |
flex-grow: 1; | |
align-self: stretch; | |
padding-bottom: 61px; | |
} | |
.noAppointmentsMessage .noAppointmentsIcon { | |
margin-bottom: 14px; | |
} | |
.noAppointmentsMessage .noAppointmentsIcon svg { | |
width: 72px; | |
height: 72px; | |
} | |
.noAppointmentsMessage .noAppointmentsTitle { | |
width: 370px; | |
font-size: 1.25em; | |
color: #333; | |
margin-bottom: 10px; | |
text-align: center; | |
word-wrap: break-word; | |
} | |
.noAppointmentsMessage .noAppointmentsDescription { | |
width: 370px; | |
font-size: .875em; | |
color: #333; | |
text-align: center; | |
word-wrap: break-word; | |
} | |
@media only screen and (min-width: 48em) { | |
.bookingDisabledActionBar { | |
display: flex; | |
} | |
.noAppointmentsMessage { | |
padding-bottom: 0; | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE STATE CONFIRMATION | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceStateConfirmation { | |
.fieldServiceConfirmationContent { | |
display: flex; | |
flex-direction: column; | |
height: 100%; | |
} | |
.fieldServiceAppointmentStatusIndicator { | |
background-color: #fff; | |
} | |
.fieldServiceCardContainer { | |
height: 100%; | |
background-color: #f8f9fa; | |
padding: 24px 24px 94px; | |
box-sizing: border-box; | |
overflow-y: auto; | |
flex-grow: 1; | |
} | |
.fieldServiceAppointmentCard { | |
border-radius: 10px; | |
} | |
.embeddedServiceSidebarButton { | |
height: 38px; | |
border-radius: 19px; | |
padding: 0 21px; | |
} | |
.embeddedServiceLoadingBalls { | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
} | |
@media only screen and (min-width: 48em) { | |
.fieldServiceCardContainer { | |
padding-bottom: 15px; | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE STATE FLOW | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceStateFlow { | |
.container { | |
&, | |
> div, | |
.content { | |
height: 100%; | |
position: relative; | |
display: flex; | |
align-self: stretch; | |
flex-direction: column; | |
} | |
} | |
.slds-card__header, | |
h2.header { | |
display: none; | |
} | |
.screenLoadingBalls { | |
display: none; | |
} | |
.loadOutline { | |
display: flex; | |
flex-direction: column; | |
height: 100%; | |
position: relative; | |
} | |
.loadingSpinner { | |
position: absolute; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
height: 100%; | |
left: 50%; | |
transform: translate(-50%, 0); | |
} | |
.loadingSpinner:not(.slds-hide) + .content { | |
display: none; | |
} | |
.loadOutline > .embeddedServiceLoadingBalls { | |
position: relative; | |
top: calc(50% - 35px); | |
transform: translate(0, -50%); | |
margin: 0 auto; | |
} | |
.slds-hide { | |
display: none; | |
} | |
.centerWrapper.flowruntimeBody { | |
display: flex; | |
flex-direction: column; | |
padding: 32px 24px 88px; | |
background-color: transparent; | |
flex-grow: 1; | |
align-self: stretch; | |
overflow: auto; | |
margin-top: 0; | |
margin-bottom: 3px; | |
} | |
.actionButtonBar { | |
display: flex; | |
flex-direction: row; | |
align-items: center; | |
justify-content: center; | |
border: none; | |
width: 100%; | |
height: 98px; | |
padding: 15px 24px 0; | |
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white calc(100% - 65px), white 100%); | |
position: absolute; | |
bottom: 0; | |
box-sizing: border-box; | |
border-radius: 0 0 4px 4px; | |
} | |
.actionButtonBar.scheduling { | |
background: linear-gradient(to bottom, rgba(230, 230, 235, 0) 0%, #e6e6eb calc(100% - 65px), #e6e6eb 100%); | |
} | |
.actionsLeft { | |
display: none; | |
} | |
.actionsRight { | |
width: 100%; | |
} | |
.actionsRight .uiButton:not(:only-child):first-child { | |
display: none; | |
} | |
.slds-assistive-text { | |
position: absolute; | |
border: 0; | |
clip: rect(1px, 1px, 1px, 1px); | |
width: 1px; | |
height: 1px; | |
margin: -1px; | |
padding: 0; | |
overflow: hidden; | |
z-index: -1000; | |
font-size: 1px; | |
} | |
.loadingOverlay.active { | |
align-self: center; | |
margin: auto 0; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE STATE SCHEDULING | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceScheduling { | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 100%; | |
height: 100%; | |
padding-bottom: 56px; | |
box-sizing: border-box; | |
} | |
@media only screen and (min-width: 48em) { | |
.centerWrapper > .body { | |
width: 100%; | |
max-width: 380px; | |
margin: 0 auto; | |
} | |
.actionButtonBar { | |
height: 56px; | |
background: #e6e6eb; | |
border-top: 1px solid #9faab5; | |
padding: 0 24px; | |
} | |
.actionsRight .uiButton { | |
width: initial; | |
} | |
.actionsRight .uiButton:only-child { | |
float: right; | |
} | |
.actionsRight .uiButton:not(:only-child):first-child:hover { | |
background-color: #f0f0f0; | |
} | |
.actionsRight .uiButton:not(:only-child):first-child span { | |
color: #333; | |
} | |
.actionsRight .uiButton:not(:only-child):nth-child(2) { | |
float: right; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FIELD SERVICE STATE HOME | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceFieldServiceStateHome { | |
.fieldServiceHomeBody { | |
display: flex; | |
flex-direction: column; | |
justify-content: space-between; | |
height: 100%; | |
} | |
.fieldServiceHeroImage { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-grow: 5; | |
align-self: stretch; | |
background-position-y: -62px; | |
background-position-x: 50%; | |
background-color: #000; | |
max-height: 338px; | |
margin-top: -1px; | |
overflow: hidden; | |
} | |
.fieldServiceHeroLogoImage { | |
max-height: 140px; | |
margin-top: -31px; | |
} | |
.fieldServiceHomeContent { | |
position: relative; | |
display: flex; | |
flex-grow: 1; | |
align-self: stretch; | |
flex-direction: column; | |
justify-content: center; | |
margin: 14px 0; | |
} | |
.fieldServiceHomeActions { | |
display: relative; | |
} | |
.fieldServiceHomeText { | |
padding: 0 24px; | |
width: 100%; | |
box-sizing: border-box; | |
} | |
.fieldServiceHomeTitle { | |
text-align: center; | |
color: #333; | |
font-size: 1.25em; | |
margin: 0 auto; | |
width: 100%; | |
max-width: 400px; | |
} | |
.fieldServiceHomeSubtitle { | |
text-align: center; | |
color: #333; | |
font-size: .8125em; | |
margin: 4px auto 0; | |
width: 100%; | |
max-width: 400px; | |
} | |
.fieldServiceHomeButtons { | |
width: calc(100% - 48px); | |
margin: 28px auto 0; | |
max-width: 325px; | |
} | |
.fieldServiceHomeButtons .embeddedServiceSidebarButton { | |
height: 50px; | |
border-radius: 25px; | |
} | |
.newAppointmentButton + .existingAppointmentsButton { | |
margin-top: 16px; | |
} | |
.fieldServiceHomeContent.loading .fieldServiceHomeActions { | |
opacity: 0; | |
pointer-events: none; | |
} | |
.embeddedServiceLoadingBalls { | |
position: absolute; | |
display: none; | |
left: 50%; | |
transform: translate(-50%, -50%); | |
top: 50%; | |
} | |
.fieldServiceHomeContent.loading .embeddedServiceLoadingBalls { | |
display: block; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE CHAT | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateChat { | |
display: flex; | |
flex-direction: column; | |
.chatSessionStartTime { | |
color: #333; | |
font-weight: 400; | |
line-height: 1.3; | |
font-size: .75em; | |
display: block; | |
margin: 8px 0 4px; | |
} | |
.messageArea { | |
width: 100%; | |
max-height: 100%; | |
overflow-y: auto; | |
margin: 0; | |
padding-top: 172px; | |
box-sizing: border-box; | |
background-color: #fff; | |
flex-grow: 1; | |
align-self: stretch; | |
-webkit-overflow-scrolling: touch; | |
} | |
.messageList { | |
margin: 0; | |
padding: 0; | |
} | |
.floatedHeader { | |
width: 100%; | |
position: absolute; | |
z-index: 1; | |
} | |
.endChatContainer { | |
position: relative; | |
width: 100%; | |
display: flex; | |
flex-direction: column; | |
box-sizing: border-box; | |
padding: 0 0 24px; | |
flex-shrink: 0; | |
} | |
.endChatContainer:before { | |
position: absolute; | |
content: " "; | |
width: 100%; | |
height: 24px; | |
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%); | |
left: 0; | |
top: -24px; | |
} | |
.endChatContainer .endChatButton { | |
width: calc(100% - 48px); | |
height: 44px; | |
line-height: 19px; | |
margin: 0 24px; | |
} | |
.endChatContainer .endChatButton.postChatButton { | |
margin-top: 10px; | |
border: 1px solid #0074bd; | |
} | |
.endChatContainer .endChatButton.postChatButton span, | |
.endChatContainer .endChatButton.postChatButton:hover span { | |
color: #333; | |
} | |
.messageWrapper { | |
padding: 0; | |
margin: 0; | |
list-style: none; | |
-webkit-overflow-scrolling: touch; | |
} | |
.messageWrapper:before, | |
.messageWrapper:after { | |
content: " "; | |
display: table; | |
} | |
.chasitorInputWrapper { | |
border-radius: 0; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE POST-CHAT | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStatePostchat { | |
iframe { | |
height: calc(100% - 4px); | |
width: calc(100% - 8px); | |
border-style: hidden; | |
margin: 4px 4px 0 4px; | |
} | |
&.hiddenAndTabbable { | |
position: relative; | |
top: -9999px; | |
left: -9999px; | |
width: 0; | |
height: 0; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE WAITING | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateWaiting { | |
.waitingStateContainer { | |
overflow: hidden; | |
display: flex; | |
flex-direction: column; | |
align-content: stretch; | |
width: 100%; | |
box-sizing: content-box; | |
height: calc(100% - 120px); | |
padding-top: 120px; | |
} | |
.waitingStateContent { | |
align-self: stretch; | |
max-height: 100%; | |
flex-grow: 1; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
text-align: center; | |
padding: 0 24px; | |
} | |
.youAreNextMessage { | |
margin: 18px 0 2px; | |
font-size: 24px; | |
line-height: 1.75; | |
} | |
.queuePositionNumber { | |
margin: 13px 0; | |
font-size: 52px; | |
line-height: 1; | |
} | |
.queuePositionChatIcon { | |
position: relative; | |
justify-content: center; | |
} | |
.waitingMessage p { | |
margin: 8px 0; | |
} | |
.embeddedServiceIcon > svg { | |
position: relative; | |
fill: #ecebea; | |
width: 82px; | |
height: 75.4px; | |
} | |
.waitingStateButtonContainer { | |
box-sizing: border-box; | |
padding: 0 24px 18px; | |
width: 100%; | |
} | |
.loadingBall { | |
display: inline-block; | |
width: 1em; | |
height: 1em; | |
border-radius: 2em; | |
background-color: #0074bd; | |
} | |
.queuePositionChatIcon .embeddedServiceLoadingBalls { | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE SIDEBAR DIALOG STATE | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceSidebarDialogState { | |
.dialogState { | |
height: 100%; | |
display: flex; | |
flex-direction: column; | |
align-content: stretch; | |
} | |
.dialogTextContainer { | |
align-self: stretch; | |
max-height: 100%; | |
flex-grow: 1; | |
display: flex; | |
flex-direction: column; | |
justify-content: center; | |
padding: 0 24px; | |
} | |
.embeddedServiceSidebarDialogState #dialogTextTitle { | |
font-size: 1.125em; | |
color: #333; | |
margin: 0 0 4px; | |
text-align: center; | |
} | |
.embeddedServiceSidebarDialogState #dialogTextBody { | |
font-size: .875em; | |
color: #333; | |
margin: 4px 0 0; | |
padding: 0 24px; | |
line-height: 1.3; | |
text-align: center; | |
} | |
.dialogButtonContainer { | |
padding: 0 24px 16px; | |
width: 100%; | |
box-sizing: border-box; | |
} | |
.hasFooter .dialogButtonContainer { | |
flex-grow: 1; | |
} | |
.dialogButton { | |
margin: 0 0 8px; | |
} | |
.dialogIcon { | |
justify-content: center; | |
margin-bottom: 40px; | |
} | |
.dialogIcon svg { | |
fill: #c0c7d1; | |
width: 4.5em; | |
height: 4.5em; | |
} | |
.dialogButton.rounded { | |
border-radius: 22px; | |
} | |
.embeddedServiceFieldServiceActionBar button:only-child { | |
margin-left: 0; | |
} | |
@media only screen and (min-width: 48em) { | |
.embeddedServiceFieldServiceActionBar { | |
justify-content: center; | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE SIDEBAR FEATURE | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceSidebarFeature { | |
&.featureBody { | |
width: 100%; | |
height: 100%; | |
} | |
ul, | |
li { | |
display: block; | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE SIDEBAR FORM FIELD | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceSidebarFormField { | |
list-style: none; | |
.has-error .slds-style-inputtext:not(:focus) { | |
border-color: #c23934; | |
} | |
&.inputSplitName { | |
width: calc(50% - 12px); | |
display: inline-block; | |
vertical-align: top; | |
} | |
.split-field-container, | |
.uiInput--input, | |
.uiInput--select { | |
margin-bottom: 6px; | |
} | |
.slds-style-inputtext, | |
.slds-style-select { | |
background-color: #fff; | |
border: 1px solid #ddd; | |
border-radius: 4px; | |
width: 100%; | |
height: 44px; | |
padding: 0 12px; | |
color: #333; | |
font-size: .875em; | |
font-family: 'Salesforce Sans', sans-serif; | |
-webkit-appearance: none; | |
-moz-appearance: none; | |
appearance: none; | |
} | |
.slds-style-select::-ms-expand { | |
display: none; | |
} | |
.slds-style-inputtext { | |
display: inline-block; | |
line-height: 30px; | |
box-sizing: border-box; | |
box-shadow: none; | |
} | |
.slds-style-inputtext:focus, | |
.slds-style-select:focus { | |
border: 1px solid #0074bd; | |
box-shadow: 0 0 2px 0 #0074bd; | |
outline: none; | |
} | |
.slds-style-inputtext.split-name { | |
display: inline-block; | |
} | |
.uiInputDefaultError .form-element__help { | |
font-size: 0.75em; | |
} | |
.uiInput .required { | |
position: absolute; | |
color: #c23934; | |
left: -6px; | |
top: 0; | |
} | |
input::-webkit-input-placeholder { | |
color: #333333; | |
opacity: 1; | |
} | |
input:-ms-input-placeholder { | |
color: #333333; | |
opacity: 1; | |
} | |
input::placeholder { | |
color: #333333; | |
opacity: 1; | |
} | |
.uiInput .uiLabel-left { | |
position: relative; | |
font-size: .75em; | |
line-height: 1.5; | |
margin-right: .75em; | |
margin-left: .5em; | |
margin-bottom: 2px; | |
color: #333; | |
} | |
.uiInput { | |
text-align: left; | |
} | |
.uiInputSelect { | |
position: relative; | |
} | |
.uiInputSelect:after { | |
content: ""; | |
border-right: 6px solid transparent; | |
border-left: 6px solid transparent; | |
border-top: 7px solid #0074bd; | |
right: 14px; | |
top: calc(50% + 6px); | |
padding: 0 0 2px; | |
position: absolute; | |
pointer-events: none; | |
} | |
.uiInputSelect > select.select { | |
background-image: none; | |
} | |
} | |
/// | |
/// TAB SETS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.uiTabset--default { | |
.tabs__nav { | |
padding: 0; | |
margin: 0; | |
} | |
.tabs__item { | |
background: #eee; | |
border-radius: 5px 5px 0 0; | |
margin-right: 2px; | |
white-space: nowrap; | |
} | |
.tabs__item > a { | |
margin: 0; | |
color: #363c40; | |
padding: 5px 10px; | |
} | |
.tabs__item.active > a { | |
background: #dc595c; | |
border-radius: 5px 5px 0 0; | |
} | |
} | |
/// | |
/// AURA COMPONENT DEBUG | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.auraDebug.debugWindow { | |
height: 100%; | |
width: 100%; | |
} | |
/// | |
/// EMBEDDED SERVICE SIDEBAR FORM | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceSidebarForm { | |
.formContent { | |
width: 100%; | |
height: calc(100% - 81px); | |
overflow-y: auto; | |
position: relative; | |
background-color: #fff; | |
margin-bottom: 81px; | |
border-radius: 0 0 8px 8px; | |
} | |
&.buttonWrapper { | |
text-align: center; | |
padding: 30px 24px 24px; | |
margin: 0; | |
width: 100%; | |
position: absolute; | |
box-sizing: border-box; | |
bottom: 0; | |
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, white calc(100% - 77px), white 100%); | |
} | |
.backgroundImg, | |
.backgroundImgColorMask { | |
background-repeat: no-repeat; | |
background-position: center; | |
background-size: cover; | |
height: 100px; | |
z-index: 1; | |
position: relative; | |
} | |
.backgroundImgColorMask { | |
background-color: #0074bd; | |
width: 100%; | |
height: 100px; | |
position: absolute; | |
top: 0; | |
left: 0; | |
z-index: 0; | |
} | |
.fieldList { | |
margin: 12px 24px 0 12px; | |
padding: 0 0 15px; | |
} | |
.embeddedServiceSidebarFormField { | |
margin-left: 12px; | |
} | |
.hiddenField { | |
display: none; | |
} | |
.fieldList .uiInputText:last-child input { | |
margin-bottom: 0; | |
} | |
@media only screen and (max-height: 530px) { | |
.embeddedServiceSidebarForm { | |
border-radius: 8px; | |
} | |
.backgroundImg, | |
.backgroundImgColorMask { | |
display: none; | |
} | |
.fieldList { | |
height: auto; | |
margin-bottom: 0; | |
} | |
.embeddedServiceSidebarForm input { | |
height: 2.5em; | |
} | |
.instructions { | |
position: relative; | |
clear: both; | |
margin: 10px 0; | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE SIDEBAR HEADER | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceSidebarHeader { | |
position: absolute; | |
top: 0; | |
width: 100%; | |
border-radius: 8px 8px 0 0; | |
background-color: #000; | |
.shortHeader { | |
color: #fff; | |
border-radius: 8px 8px 0 0; | |
line-height: 3; | |
text-align: center; | |
font-weight: 400; | |
font-size: .875em; | |
height: 44px; | |
clear: both; | |
overflow: hidden; | |
z-index: 3; | |
position: relative; | |
transform: translate3d(0, 0, 0); | |
-webkit-font-smoothing: subpixel-antialiased; | |
} | |
.shortHeaderPattern { | |
width: 100%; | |
height: 44px; | |
position: absolute; | |
opacity: 1; | |
transition: opacity 333ms; | |
background-size: 100%; | |
z-index: 1; | |
background-color: #000; | |
} | |
&.noAnimate .shortHeaderPattern { | |
transition: none; | |
} | |
&.collapsed .shortHeaderPattern { | |
opacity: 0; | |
} | |
&.showBackground .shortHeaderPattern { | |
opacity: 1; | |
} | |
.shortHeaderContent { | |
position: relative; | |
display: flex; | |
height: 100%; | |
} | |
.headerItem { | |
position: relative; | |
} | |
.headerItem:focus { | |
outline: none; | |
} | |
.headerItem:focus:before, | |
.headerItem:hover:before { | |
content: " "; | |
position: absolute; | |
top: 20%; | |
left: 20%; | |
width: 60%; | |
height: 60%; | |
background-color: #fff; | |
opacity: .2; | |
border-radius: 4px; | |
box-sizing: border-box; | |
pointer-events: none; | |
} | |
.headerItem:focus:after { | |
content: " "; | |
position: absolute; | |
top: 20%; | |
left: 20%; | |
width: calc(60% - 2px); | |
height: calc(60% - 2px); | |
border-radius: 4px; | |
border: 1px solid #0074bd; | |
pointer-events: none; | |
} | |
.closeButton { | |
float: left; | |
} | |
.popoutButton, | |
.minimizeButton { | |
float: right; | |
} | |
.closeButton, | |
.minimizeButton { | |
background: none; | |
border: none; | |
} | |
.closeButton, | |
.minimizeButton, | |
.popoutButton { | |
transition: color .7s ease; | |
padding: 14px; | |
line-height: 0; | |
} | |
.headerTextContent { | |
display: flex; | |
flex-direction: column; | |
height: 100%; | |
justify-content: center; | |
} | |
.headerText { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
flex-grow: 1; | |
align-self: stretch; | |
width: calc(100% - 96px); | |
color: #fff; | |
text-decoration: none; | |
line-height: normal; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
font-weight: normal; | |
} | |
.headerText:focus { | |
outline: none; | |
} | |
.embeddedServiceSidebarHeader #headerTextLabel, | |
.embeddedServiceSidebarHeader #headerSubtext { | |
position: relative; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
.embeddedServiceSidebarHeader button:focus .headerTextContent { | |
text-decoration: underline; | |
} | |
.embeddedServiceSidebarHeader h2 { | |
font-size: 1em; | |
} | |
.headerButton { | |
display: flex; | |
margin: 0; | |
padding: 0; | |
background: none; | |
border: none; | |
font-family: 'Salesforce Sans', sans-serif; | |
font-size: 1em; | |
color: #fff; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
outline: none; | |
} | |
.headerButton:focus:before, | |
.headerButton:hover:before { | |
content: " "; | |
position: absolute; | |
top: 20%; | |
left: 20%; | |
width: 60%; | |
height: 60%; | |
background-color: #fff; | |
opacity: .2; | |
border-radius: 4px; | |
pointer-events: none; | |
} | |
.headerButton:focus:after { | |
content: " "; | |
position: absolute; | |
top: 20%; | |
left: 20%; | |
width: calc(60% - 2px); | |
height: calc(60% - 2px); | |
border-radius: 4px; | |
border: 1px solid #0074bd; | |
pointer-events: none; | |
} | |
.extendedHeader { | |
z-index: 2; | |
transition: transform .33s; | |
position: absolute; | |
width: 100%; | |
top: 0; | |
margin-top: -46px; | |
} | |
.headerChevron { | |
position: relative; | |
width: 0; | |
height: 0; | |
margin: 6px 0 0 8px; | |
border-left: 3px solid transparent; | |
border-right: 3px solid transparent; | |
display: inline-block; | |
border-top: 3px solid #fff; | |
transition: transform 0.15s, top 0.15s; | |
} | |
&.extended .headerChevron { | |
transform: rotate(180deg); | |
} | |
.extendedHeader .embeddedServiceSidebarExtendedHeader .backgroundPattern { | |
transition: transform 0.33s, opacity 0.33s; | |
} | |
&.collapsed .extendedHeader { | |
transform: translate(0, calc(46px - 100%)); | |
} | |
&.collapsed .extendedHeader .embeddedServiceSidebarExtendedHeader .backgroundPattern { | |
transform: translate(0, 100%); | |
opacity: 0; | |
} | |
&.extended .extendedHeader { | |
transform: translate(0, 46px); | |
} | |
&.extended .extendedHeader .embeddedServiceSidebarExtendedHeader .backgroundPattern { | |
transform: translate(0, 0); | |
opacity: 1; | |
} | |
.fade { | |
transition: opacity 0.33s; | |
} | |
.fade.fade-2x { | |
transition: opacity 0.165s; | |
} | |
.fade.fade-3x { | |
transition: opacity 0.11s; | |
} | |
.fade.fade-4x { | |
transition: opacity 0.0825s; | |
} | |
&.extended .fade { | |
opacity: 1; | |
} | |
&.collapsed .fade { | |
opacity: 0; | |
} | |
&.noAnimate .extendedHeader, | |
&.noAnimate .fade, | |
&.noAnimate .extendedHeader .embeddedServiceSidebarExtendedHeader .backgroundPattern { | |
transition: none; | |
} | |
&.layout-modal { | |
height: 62px; | |
border-radius: 0; | |
} | |
&.layout-modal .shortHeader, | |
&.layout-modal .shortHeaderContent, | |
&.layout-modal .shortHeaderPattern { | |
height: 62px; | |
border-radius: 4px 4px 0 0; | |
} | |
&.layout-modal .headerItem { | |
padding: 23px; | |
} | |
&.layout-modal .headerText { | |
font-size: 1.25em; | |
margin-left: 60px; | |
} | |
&.layout-modal .backButton + .headerText { | |
margin-left: 0; | |
} | |
&.layout-modal #headerSubtext { | |
font-size: 0.875em; | |
} | |
&.layout-modal .minimizeButton { | |
display: none; | |
} | |
&.layout-modal .shortHeaderPattern { | |
background-size: initial; | |
background-position-x: 50%; | |
} | |
&.layout-modal .closeButton svg { | |
width: 1.25em; | |
height: 1.25em; | |
padding: 0 2px 5px 1px; | |
z-index: 4; | |
} | |
&.layout-modal.showBackground .closeButton:before { | |
content: " "; | |
position: absolute; | |
top: 20%; | |
left: 20%; | |
width: 60%; | |
height: 60%; | |
background-color: #000; | |
opacity: .2; | |
border-radius: 4px; | |
} | |
&.layout-docked .backButton { | |
display: none; | |
} | |
@media only screen and (min-width: 48em) { | |
&.layout-modal { | |
border-radius: 4px 4px 0 0; | |
} | |
&.layout-modal .headerText { | |
margin-right: 60px; | |
} | |
&.layout-modal .closeButton { | |
position: absolute; | |
right: 0; | |
padding: 0; | |
margin-top: -38px; | |
width: 2em; | |
height: 2em; | |
background: none; | |
} | |
&.layout-modal .closeButton:focus { | |
outline: none; | |
box-shadow: 0 0 3px #e0e5ee; | |
} | |
&.layout-modal.showBackground .closeButton:before, | |
&.layout-modal.showBackground .closeButton:focus:before { | |
content: none; | |
} | |
&.layout-modal .closeButton > .embeddedServiceIcon { | |
height: 100%; | |
justify-content: center; | |
align-items: center; | |
} | |
&.layout-modal .closeButton svg { | |
width: 1.75em; | |
height: 1.75em; | |
padding: 1px 3px 4px 1px; | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE OFFLINE SUPPORT DEFAULT UI | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStateOfflineSupportDefaultUI { | |
overflow: hidden; | |
max-height: 100%; | |
height: 100%; | |
position: relative; | |
} | |
/// | |
/// EMBEDDED SERVICE LIVE AGENT STATE PRE-CHAT DEFAULT UI | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceLiveAgentStatePrechatDefaultUI { | |
overflow: hidden; | |
max-height: 100%; | |
height: 100%; | |
position: relative; | |
} | |
/// | |
/// EMBEDDED SERVICE SIDEBAR | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceSidebar { | |
font-size: 16px; | |
-webkit-font-smoothing: subpixel-antialiased; | |
pointer-events: all; | |
-webkit-backface-visibility: hidden; | |
backface-visibility: hidden; | |
&.modalContainer { | |
display: block; | |
position: fixed; | |
z-index: 999; | |
font-family: 'Salesforce Sans', sans-serif; | |
top: 0; | |
-webkit-font-smoothing: subpixel-antialiased; | |
} | |
&.initialLoading { | |
display: none; | |
} | |
&.sidebarMaximized .minimizedContainer, | |
&.sidebarMinimized .dockableContainer { | |
display: none; | |
} | |
.assistiveText { | |
position: absolute; | |
height: 1px; | |
width: 1px; | |
overflow: hidden; | |
clip: rect(1px, 1px, 1px, 1px); | |
} | |
.backgroundImg img { | |
width: 100%; | |
} | |
.headerItem { | |
color: #fff; | |
font-size: 1em; | |
} | |
&.maximizedMobile { | |
background: rgba(51, 51, 51, 0.48); | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
overflow: visible; | |
} | |
.sidebarBody { | |
position: absolute; | |
width: 100%; | |
height: calc(100% - 44px); | |
top: 44px; | |
z-index: 0; | |
background-color: #fff; | |
transform: translate3d(0, 0, 0); | |
-webkit-overflow-scrolling: touch; | |
} | |
.sidebarLoadingIndicator { | |
position: relative; | |
height: 100%; | |
background-color: #fff; | |
display: none; | |
} | |
&.loading .sidebarLoadingIndicator { | |
display: block; | |
} | |
&.loading .hideWhileLoading { | |
display: none; | |
pointer-events: none; | |
} | |
&.loading .invisibleWhileLoading { | |
visibility: hidden; | |
} | |
.sidebarLoadingIndicator .embeddedServiceLoadingBalls { | |
position: relative; | |
display: flex; | |
justify-content: center; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
} | |
.activeFeature { | |
width: 100%; | |
height: 100%; | |
} | |
&.maximizedMobile { | |
background: transparent; | |
pointer-events: none; | |
} | |
.helpButtonMinimize { | |
bottom: 11px; | |
height: 46px; | |
padding: 0; | |
line-height: 46px; | |
background: #0074bd; | |
box-shadow: none; | |
width: 193px; | |
} | |
&.layout-hidden { | |
display: none; | |
} | |
&.layout-modal { | |
position: fixed; | |
background: rgba(51, 51, 51, 0.48); | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
overflow: visible; | |
} | |
&.layout-modal .dockableContainer { | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
left: 50%; | |
top: 50%; | |
transform: translate(-50%, -50%); | |
border-radius: 0; | |
} | |
&.layout-modal .sidebarBody { | |
top: 62px; | |
height: calc(100% - 62px); | |
} | |
&.layout-docked .dockableContainer { | |
width: 90%; | |
height: calc(100% - 24px); | |
margin: 12px auto; | |
left: 0; | |
right: 0; | |
box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2); | |
border-radius: 8px; | |
z-index: 15; | |
text-align: center; | |
overflow: hidden; | |
max-width: 40em; | |
pointer-events: all; | |
position: relative; | |
} | |
@media only screen and (min-width: 48em) { | |
&.layout-modal .dockableContainer { | |
border-radius: 8px; | |
width: 60%; | |
max-width: 640px; | |
height: 60%; | |
max-height: 640px; | |
} | |
&.layout-modal .sidebarBody { | |
border-radius: 0 0 4px 4px; | |
} | |
} | |
&.layout-docked .dockableContainer { | |
position: fixed; | |
left: auto; | |
bottom: 0; | |
right: 20px; | |
margin: 0; | |
height: 90%; | |
width: 320px; | |
max-height: 498px; | |
border-radius: 8px 8px 0 0; | |
} | |
@media only screen and (min-width: 48em) { | |
&.layout-modal { | |
overflow-y: auto; | |
} | |
&.layout-modal .shortHeader { | |
overflow: visible; | |
} | |
&.layout-modal .dockableContainer { | |
margin: 30px auto; | |
min-height: 400px; | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE SIDEBAR MINIMIZED DEFAULT UI | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceSidebarMinimizedDefaultUI { | |
position: fixed; | |
left: auto; | |
bottom: 0; | |
right: 12px; | |
margin: 0; | |
height: 46px; | |
width: 90px; | |
max-height: 100%; | |
border-radius: 8px 8px 0 0; | |
text-align: center; | |
text-decoration: none; | |
display: inline-block; | |
box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.5); | |
pointer-events: all; | |
overflow: hidden; | |
background-color: #000; | |
border-color: #000; | |
font-size: 16px; | |
&.minimizedContainer:hover { | |
background-color: #000; | |
color: white; | |
} | |
&.minimizedContainer:focus { | |
outline: 0; | |
color: white; | |
background-color: #000; | |
text-decoration: underline; | |
} | |
&.helpButton { | |
background-color: #000; | |
border-color: #000; | |
} | |
&.newMessage, | |
&.idleTimeout { | |
background-color: #0074bd; | |
} | |
.minimizedContainer .minimizedText, | |
.minimizedContainer .minimizedImage { | |
display: inline-block; | |
} | |
.minimizedText { | |
max-width: 100%; | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
font-size: .875em; | |
line-height: normal; | |
overflow: hidden; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
} | |
.minimizedImage { | |
position: relative; | |
z-index: 1; | |
} | |
.minimizedImage img, | |
.minimizedImage .uiImage { | |
width: 30px; | |
height: 30px; | |
border-radius: 50%; | |
} | |
.embeddedServiceIcon { | |
position: relative; | |
z-index: 1; | |
line-height: 0; | |
} | |
.minimizedImage, | |
.embeddedServiceIcon { | |
margin-right: 8px; | |
} | |
.placeholderImage { | |
background-color: #08a3de; | |
border-radius: 13px; | |
} | |
.embeddedServiceLoadingBalls { | |
min-width: 36px; | |
} | |
.minimizedQueuePosition { | |
justify-content: flex-end; | |
} | |
.content { | |
display: block; | |
align-items: center; | |
padding: 0 8px; | |
height: 100%; | |
color: #fff; | |
justify-content: center; | |
flex-direction: row; | |
} | |
.messageContent { | |
position: relative; | |
display: flex; | |
align-self: stretch; | |
margin: 4px; | |
flex-grow: 1; | |
align-items: center; | |
min-width: 0; | |
max-width: 100%; | |
} | |
.assistiveText { | |
position: absolute; | |
border: 0; | |
clip: rect(1px, 1px, 1px, 1px); | |
width: 1px; | |
height: 1px; | |
margin: -1px; | |
padding: 0; | |
overflow: hidden; | |
z-index: -1000; | |
font-size: 1px; | |
} | |
#chatButtonAssistiveText { | |
display: none; | |
} | |
.minimizedText > .message { | |
overflow: hidden; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
} | |
.content { | |
display: flex; | |
} | |
&.waiting .messageContent { | |
justify-content: space-between; | |
} | |
&.queue .messageContent { | |
justify-content: space-between; | |
} | |
.messageContent { | |
justify-content: center; | |
} | |
&.helpButton .messageContent { | |
justify-content: space-around; | |
} | |
.minimizedImage { | |
display: flex; | |
justify-content: center; | |
align-items: center; | |
} | |
.queuePositionNumber { | |
font-size: 18px; | |
height: 23px; | |
width: 23px; | |
} | |
.embeddedServiceLoadingBalls { | |
position: relative; | |
top: 3px; | |
left: 5px; | |
} | |
&.hideLoadingBallsForDesktop .embeddedServiceLoadingBalls { | |
display: none; | |
} | |
} | |
.embeddedServiceSidebarMinimizedDefaultUI { | |
min-width: 12em; | |
max-width: 14em; | |
width: 192px; | |
} | |
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
<!-- aura.component.html --> | |
<aura:component implements="flexipage:availableForAllPageTypes,lightningsnapin:prechatUI" access="global"> | |
<!-- PRE-CHAT FIELD COMPONENTS --> | |
<aura:attribute name="prechatFieldComponents" type="List" description="An array of objects representing the prechat fields specified in prechat setup." /> | |
<aura:attribute name="requestType" type="string"/> | |
<aura:handler name="init" value="{!this}" action="{!c.onInit}" /> | |
<aura:handler name="change" value="{!v.requestType}" action="{!c.setRequestType}" /> | |
<aura:locator target="startButton" description="Prechat form submit button." /> | |
<lightningsnapin:prechatAPI aura:id="prechatAPI" /> | |
<!-- PRE-CHAT UI --> | |
<div class="prechatUI"> | |
<div class="prechatContent"> | |
<p> | |
Hello<span id="name" />! | |
<br /><br /> | |
What would you like to chat about today? | |
</p> | |
<!-- FIELD LIST --> | |
<ul class="fieldsList"> | |
<!--lightning:select aura:id="requestType" class="select" name="requestType" label="Request Type" value="{!v.requestType}" required="true" > | |
<option value="">Select a chat topic</option> | |
<option value="Website Error">Website Error</option> | |
<option value="Create / Update Profile">Create / Update Profile</option> | |
<option value="Review / Optimizate Profile">Review / Optimizate Profile</option> | |
<option value="Search Opportunities">Search Opportunities</option> | |
<option value="Response to Opportunities">Response to Opportunities</option> | |
<option value="Follow up on Expressed Interest">Follow up on Expressed Interest</option> | |
<option value="Help Finding Opportunities">Help Finding Opportunities</option> | |
<option value="Advantage">Advantage</option> | |
<option value="Endorsed">Endorsed</option> | |
<option value="Process Questions">Process Questions</option> | |
<option value="MBO Account / Engagement">MBO Account / Engagement</option> | |
<option value="MBO Questions about Solutions?">MBO Questions about Solutions?</option> | |
<option value="Does MBO Work with Visa?">Does MBO Work with Visa?</option> | |
</lightning:select--> | |
<!-- LOOK IN THE CONTROLLER'S onInit FUNCTION. THIS COMPONENT DYNAMICALLY CREATES THE PRECHAT FIELD COMPONENTS. --> | |
{!v.prechatFieldComponents} | |
</ul> | |
</div> | |
<!-- START BUTTON WRAPPER --> | |
<div class="startButtonWrapper"> | |
<!-- START BUTTON --> | |
<ui:button aura:id="startButton" class="startButton" label="{!$Label.LiveAgentPrechat.StartChat}" press="{!c.handleStartButtonClick}"/> | |
</div> | |
</div> | |
</aura:component> |
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
/// | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// aura.component.scss | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
/// | |
/// GENERAL STYLES | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
/** LIVE AGENT WRAPPER **/ | |
.cLiveAgent { | |
margin: 15px 14px; | |
/** BODY **/ | |
.bBody { | |
color: #ffffff; | |
} | |
/** PARAGRAPH TEXT **/ | |
p { | |
color: #000000; | |
font-size: 16px; | |
font-style: normal; | |
font-weight: normal; | |
line-height: normal; | |
text-align: left; | |
} | |
} | |
/// | |
/// BUTTON STYLES | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
/** LIVE AGENT WRAPPER **/ | |
.cLiveAgent { | |
/** START BUTTON WRAPPER **/ | |
.startButtonWrapper { | |
bottom: 0px; | |
left: 0px; | |
margin: 15px; | |
position: fixed; | |
} | |
/** START BUTTON **/ | |
.startButton { | |
background: #f84b4b; | |
border-radius: 2px; | |
border-top: none; | |
box-shadow: none; | |
height: 50px; | |
margin: 0px; | |
padding: 0px; | |
text-shadow: none; | |
width: 290px; | |
} | |
} | |
/// | |
/// FORM STYLES | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
/** LIVE AGENT WRAPPER **/ | |
.cLiveAgent { | |
/** FORM LABELS + INPUTS **/ | |
.Email, | |
.FirstName, | |
.form-element__label, | |
.JIRA_Component__c, | |
.LastName, | |
.MBO_ID__c, | |
.Subject, | |
.Type { | |
display: none; | |
} | |
/** FIELD LIST **/ | |
.fieldsList { | |
margin-top: 17px; | |
} | |
/** REQUEST TYPE **/ | |
.Request_Type__c { | |
background-color: #f7f7f7; | |
border-radius: 2px; | |
border: none; | |
box-shadow: inset 0 2px 3px 0 #e8ebed; | |
color: #000000; | |
height: 46px; | |
padding-left: 15px; | |
width: 290px; | |
} | |
/** SELECT CONTAINER **/ | |
.slds-select_container:before, | |
.slds-select_container:after { | |
display: none; | |
} | |
} | |
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
/// | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// SALESFORCE EMBEDDED SERVICES | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// @SOURCE: https://sforce.co/2EGTXgx; | |
/// | |
/// | |
/// EMBEDDED SERVICE HELP BUTTON | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceHelpButton { | |
background: transparent; | |
box-shadow: none; | |
display: block; | |
font-family: sans-serif; | |
left: 0; | |
overflow: visible; | |
position: fixed; | |
top: 0; | |
z-index: 999; | |
/** ASSISTIVE TEXT **/ | |
.assistiveText { | |
clip: rect(1px,1px,1px,1px); | |
height: 1px; | |
overflow: hidden; | |
position: absolute !important; | |
width: 1px; | |
} | |
/** MEDIA QUERIES **/ | |
@media only screen and (min-width: 48em) { | |
background-color: transparent; | |
} | |
/** HELP BUTTON **/ | |
.helpButton { | |
bottom: 12px; | |
height: 46px; | |
position: fixed; | |
right: 12px; | |
-webkit-font-smoothing: subpixel-antialiased; | |
.uiButton { | |
background: #000; | |
border-radius: 23px; | |
box-shadow: 0 0 12px 0 rgba(0,0,0,0.5); | |
box-sizing: border-box; | |
color: #fff; | |
font-family: inherit; | |
font-size: .875em; | |
font-weight: normal; | |
height: 46px; | |
line-height: 1; | |
margin: 0; | |
padding: 0 12px; | |
text-shadow: none; | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-align-items: center; | |
-ms-flex-align: center; | |
align-items: center; | |
-webkit-box-pack: justify; | |
-webkit-justify-content: space-between; | |
-ms-flex-pack: justify; | |
justify-content: space-between; | |
-webkit-box-orient: horizontal; | |
-webkit-box-direction: normal; | |
-webkit-flex-direction: row; | |
-ms-flex-direction: row; | |
flex-direction: row; | |
/** LABEL **/ | |
.label { | |
color: #fff; | |
} | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE PREVENT SCROLLING | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServicePreventScrolling { | |
height: 100%; | |
overflow: hidden; | |
position: fixed; | |
width: 100%; | |
} | |
/// | |
/// EMBEDDED SERVICE HELP BUTTON (PSEUDO ELEMENTS) | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceHelpButton { | |
.helpButton { | |
.uiButton { | |
&:focus { | |
outline: 0; | |
} | |
} | |
/** FOCUS + HOVER STATE(S) **/ | |
.helpButtonEnabled { | |
&:focus, | |
&:hover { | |
&:before { | |
background-color: #000; | |
border-radius: 23px; | |
content: ' '; | |
height: 100%; | |
left: 0; | |
opacity: .2; | |
pointer-events: none; | |
position: absolute; | |
top: 0; | |
width: 100%; | |
} | |
} | |
} | |
} | |
/** NO HOVER FOCUS + HOVER STATE(S) **/ | |
&.nohover { | |
&:focus, | |
&:hover { | |
&:before { | |
display: none; | |
} | |
} | |
} | |
} | |
/** MEDIA QUERIES **/ | |
@media only screen and (min-width: 48em) { | |
.embeddedServiceHelpButton { | |
.helpButton { | |
position: fixed; | |
bottom: 0; | |
.uiButton { | |
border-radius: 8px 8px 0 0; | |
&:focus, | |
&:hover { | |
&:before { | |
border-radius: 8px 8px 0 0; | |
} | |
} | |
} | |
} | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE HELP BUTTON (ENABLED) | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceHelpButton .uiButton { | |
background: #dddfe1; | |
border: 0; | |
font-size: 16px; | |
font-weight: bold; | |
margin: 2px 3px; | |
max-width: 14em; | |
min-width: 12em; | |
padding: 4px 6px; | |
text-align: center; | |
text-decoration: none; | |
} | |
/// | |
/// EMBEDDED SERVICE HELP BUTTON (ENABLED/DISABLED) | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceHelpButton { | |
.helpButtonDisabled { | |
box-shadow: none; | |
cursor: default; | |
text-shadow: none; | |
} | |
.helpButtonEnabled { | |
cursor: pointer; | |
position: relative; | |
} | |
.uiButton .helpButtonLabel { | |
line-height: normal; | |
max-width: 100%; | |
overflow: hidden; | |
position: relative; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
z-index: 1; | |
display: -webkit-box; | |
display: -webkit-flex; | |
display: -ms-flexbox; | |
display: flex; | |
-webkit-box-pack: center; | |
-webkit-justify-content: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
-webkit-align-items: center; | |
-ms-flex-align: center; | |
align-items: center; | |
-webkit-box-flex: 1; | |
-webkit-flex-grow: 1; | |
-ms-flex-positive: 1; | |
flex-grow: 1; | |
-webkit-align-self: stretch; | |
-ms-flex-item-align: stretch; | |
align-self: stretch; | |
} | |
.uiButton .helpButtonLabel .message { | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
} | |
} | |
/** HELP BUTTON LABEL (FOCUS) **/ | |
.helpButtonEnabled:focus .helpButtonLabel { | |
text-decoration: underline; | |
} | |
/// | |
/// EMBEDDED SERVICE HELP BUTTON ICONS | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
.embeddedServiceHelpButton { | |
/** SERVICE ICON(S) **/ | |
.embeddedServiceIcon { | |
display: inline-block; | |
line-height: 1; | |
margin-right: 10px; | |
position: relative; | |
vertical-align: top; | |
z-index: 1; | |
} | |
.embeddedServiceIcon:before { | |
content: attr(data-icon); | |
font-family: 'embeddedserviceiconfont'; | |
font-size: 1.25em; | |
font-variant: normal; | |
font-weight: normal; | |
speak: none; | |
text-rendering: auto; | |
text-transform: none; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
} | |
/// | |
/// EMBEDDED SERVICE FONT FACE | |
/// - - - - - - - - - - - - - - - - - - - - - - - - - | |
/// | |
@font-face { | |
font-family: 'embeddedserviceiconfont'; | |
src: url('data:application/octet-stream;base64,AAEAAAALAIAAAwAwT1MvMg8SBhEAAAC8AAAAYGNtYXAXVtKTAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZpeJH/UAAAF4AAAJOGhlYWQIkke3AAAKsAAAADZoaGVhB8AD0gAACugAAAAkaG10eDoBAxcAAAsMAAAARGxvY2EN6BEGAAALUAAAACRtYXhwABYAfQAAC3QAAAAgbmFtZZlKCfsAAAuUAAABhnBvc3QAAwAAAAANHAAAACAAAwPbAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpDAPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6Qz//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAEACkADQPZA3EAIAAsADgARAAAASIOAhUUFhceAQ8BBhY/ATYWFx4BMz4DNS4DIwMiJjU0NjMyFhUUBjMiJjU0NjMyFhUUBjMiJjU0NjMyFhUUBgIAYqx/Sh8aBQIDPQQSDKkIEQk1fURhqoBKAUuArGHsIS4uISAuLswgLy8gIC8vzCAuLiAhLi4DcUR1nVk4ai8HEQmoCxEDQQMDBB4hAUR1nVpbn3VE/gAvICAvLyAgLy8gIC8vICAvLyAgLy8gIC8AAQAzAHsD0QMFABgAACUBJjQ/ATYyHwEWMjcBNjIfARYUBwEGIicBeP67CQksCBoJ9AYSBgHeCRoILAkJ/dIIGgl7AUcJGQksCAj3BQUB4wkJKwkaCf3NCgoAAAABAJ4AXANiAyIAMAAACQE2NC8BJiIHAQYiJwEmIg8BBhQXARYUBwEGFB8BFjI3ATYyFwEWMj8BNjQnASY0NwJiAQAJCScJFwn+/gYQBv7+CRcJKQkJAQEGBv79CQkpCRcJAQIGEAYBAgkXCSkJCf8ABQUBzAECCRcJKQkJ/v8GBgEDCQkpCRcJ/v4GEAb+/AkXCSkJCQECBQX+/gkJKQkXCQECBhAGAAACAC//7wPRA5MAFgAtAAABITI2LwE3NjQvASYGDwEnJgYVERQWMwchIgYfAQcGFB8BFjI/ARcWNjURNCYjAkcBLw8HDGCxBwdJCBUJsWQMGhYKjv7RDwcMYLEHB0kIFQmzZAsZFgoB6RoMYrMIFghJBgEHsWAMBw/+0QoUUBoMYrMIFghJBwezYA0GDwEtChgAAAAAAwAAADYEAAM2ABAAPQBNAAATITI2NRE0JisBIgYVERQWMwEmBhURFAYjISImNRE0JgcOARURFBYzITIWFRQWOwEyNjU0NjMhMjY1ETQmJwEhMjY1ETQmKwEiBhURFBa7AQAMEisU3wwREQwDDgkPEQz82AwREwkWHS4hAUUMERIMYgwSEQwBRSEuGB/+fAEADBERDN8WKRIBDxEMAc8ZIhIL/hMMEQHNAw0K/hYMEhIMAegKDAQLLBz+OyAvEQwMEhIMDBEvIAHFHzAI/jMRDAHtCxIiGf4xDBEAAAEAJ//nA9kAXgAPAAAlFAYjISImPQE0NjMhMhYVA9kSDPyKDBISDAN2DBIFDBISDDsMEhIMAAAAAgAn/+cD2QOZACQATQAAASEiBh0BFBY7ATIWBwEGFB8BFjI3ATYWHQEUFjsBMjY1ETQmIwMHDgEdARQGIyEiJjURNDY7ATI2PwE2JiMhIgYVERQWMyEyNjURNCYHA7/+iAwUEw2bDgsL/rEICCoJFwkBTwkWFAw5DBIODPRDCQkSC/5iDBERDOMLFwdDCQoN/nogLy8gAiggLhgJA5kODDsMFhYJ/rEJFwkqCAgBTwkJDpsMFhYMAXYND/4xRQkVC+EMEREMAZ4LEgkJQwkYLiD92CAvLyABhg0KCQAAAAAEAM0ArAMzAugADwAcAC0AOQAAASEyNi8BLgErASIGDwEGFhciBhUUFjMyNjU0JiM3ISIGFREUFjMhMjY1ETQmIwMiJjU0NjMyFhUUBgFxAR4HBQMiCB4SfBIeCCIDBZYiMDAiIjAwIvb+FBkkJBkB7BkkJBn2O1RUOztUVAKDCgU0EBISEDQFCrkwIiExMSEiMHskGf7hGSQkGQEfGST+pFQ7O1VVOztUAAAAAQBNAA0DswNxAFYAAAEjIgYdARQGJy4BJy4DBw4BBw4DBwYeAhceAzMyNjc+AS8BLgEHDgEnLgEnLgM3PgE3PgEzMhYXHgEXFgYrASIGHQEUFjMhMjY1ES4BIwOUOwwSDQsECQYlWGBoNSVGHy1HMBoBAQ8dKxweRExTKkyKOAoBCSkIFwk1ikkTJhEqPiMHDAQRCiqHTTttKQcMBQQRDYoMEQ8MAWkKDwESDANxEQyKDQoJBgkFJTQdBAoHHRUeTFliNChOS0MdHzAgETMvCRoJKQcCBywhEgQRChpJVl8xEyYSSE4uKQYOCAsMEgw9DA8PCgFnDBEAAAAAAf/+AF4EAAMkADYAAAE+ATMyFhc+ATMyHgIVFA4CIyImJw4BIyImJw4BIyImJw4BIyImNTQ2Ny4BNTQ+AjMeARcBqxlDJjNTGBUsFy5ROyMjO1EuCxYKFUsuEyMRFFs6O18TCRIJR2QuJwgIHzZIKjRTGgLWGR4zKgkLIztRLi1RPCICAiUuCAgxPUI2AgJkRy9PFhEpFShINR8BKiMAAAIAKf/vA9EDlwAeADIAACUBPgEnLgMnJg4CFx4DFxY2NwEWMj8BNjQnATQ+AjMyHgIVFA4CIyIuAgPR/vgoJQoJOlhyQFebcTwJBjZVbz9MijgBBgkYCCoJB/zNKEVcNTRcRigoRlw0NVxFKEQBBjiKTD9vVTYGCTxxnFg/clg7CQolKP76CQkqCBoJAeA1XEUoKEVcNTRcRigoRVwAAAABAAz/xQPrA7sAGAAAEz4BNyU2NCclIiYnAyY2FwEWFAcBBiY3E14DIQ0BrQoK/lMNIQNSBigWA6cVFfxZFigGUgFaDCACKwERAjccDAFqGB8M/icLMAv+KQwfGAFqAAADAFP/6QOvA5cACwBmAHoAAAEiBhUUFjMyNjU0JgEnPgE1NCYnNz4BLwEuASMiBg8BLgEvAS4BKwEiBg8BDgEHJy4BIyIGDwEGFh8BDgEVFBYXBw4BHwEeATMyNj8BHgEfAR4BOwEyNj8BPgE3Fx4BMzI2PwE2JicFIi4CNTQ+AjMyHgIVFA4CAgI6UFA6OlBQAWRJAwMDA0kRCgwfCR8RBgwEWxo7HxAEJRg/FyUFDyE7GlsGCgYRHwkfDAgTSQMDAwNJEQoMHwkfEQYMBFsaOx8QBCMZQBclBBAiPhpVBgwGER8JHQ4KEf5iLU87IiI7Ty0tTzsiIjtPAkhQOjpQUDo6UP76PRAjEBAjED0PLxU3DxACAiEYIQpcGBoaGFoLIhYhAgIQDzcVLw89ECMQEiEQPQ8vFTcPEAICIRghCl4YHiAXXwwkGSIBAxEPMxAuD10iO08tLU87IiI7Ty0tTzsiAAEAAAAAAADfFRLJXw889QALBAAAAAAA0rsBnQAAAADSuwGd//7/xQQAA7sAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAD//gAABAAAAQAAAAAAAAAAAAAAAAAAABEEAAAAAAAAAAAAAAACAAAABAAAKQQAADMEAACeBAAALwQAAAAEAAAnBAAAJwQAAM0EAABNBAD//gQAACkEAAAMBAAAUwAAAAAACgAUAB4AgACuAQIBTAG6AdYCRgKcAxoDagO6A+oEnAABAAAAEQB7AAQAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==') format('truetype') | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment