446 lines
11 KiB
CSS
446 lines
11 KiB
CSS
:host {
|
|
--smepro-green: #5fa832;
|
|
--smepro-teal: #3f9a86;
|
|
}
|
|
|
|
:host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex: 1;
|
|
}
|
|
|
|
.slds-dropdown{
|
|
border:1px solid black;
|
|
border-radius: 0px;
|
|
border-color: black !important;
|
|
background-color: white;
|
|
}
|
|
|
|
/* PageLoading GIF */
|
|
.pageLoading-Gif{
|
|
width: 30%;
|
|
margin-top: 2%;
|
|
}
|
|
|
|
.sw-loading-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
inset: 0;
|
|
min-height: 100%;
|
|
width: 100%;
|
|
background: linear-gradient(180deg, #f4faee 0%, #eaf3fb 100%);
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.fieldParent-text-color{
|
|
color: #1c2b23 !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
}
|
|
|
|
.accountIconColor{
|
|
background-color: transparent;
|
|
color: #4f8a24;
|
|
border-radius: 9px;
|
|
box-shadow: none;
|
|
--slds-c-icon-color-foreground: #4f8a24;
|
|
--sds-c-icon-color-foreground: #4f8a24;
|
|
--slds-c-icon-color-foreground-default: #4f8a24;
|
|
--sds-c-icon-color-foreground-default: #4f8a24;
|
|
}
|
|
|
|
/* Icon color */
|
|
|
|
.green-icon{
|
|
--lwc-colorTextIconDefault: #5fa832;
|
|
}
|
|
|
|
/* ── Custom toggle switch (same as Step 3) ── */
|
|
.obj-toggle-track {
|
|
position: relative;
|
|
width: 42px;
|
|
height: 24px;
|
|
flex: 0 0 auto;
|
|
border-radius: 999px;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
background: rgb(205, 212, 205);
|
|
transition: background .2s, box-shadow .2s;
|
|
outline: none;
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
.obj-toggle-track:focus,
|
|
.obj-toggle-track:focus-visible,
|
|
.obj-toggle-track:active {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
.obj-toggle-track_on {
|
|
/* background: rgb(95, 168, 50); */
|
|
background: linear-gradient(120deg, #5fa832, #2f8fb0);
|
|
box-shadow: rgba(58, 150, 120, 0.16) 0px 0px 0px 3px, rgba(58, 150, 120, 0.5) 0px 4px 10px -2px;
|
|
}
|
|
.obj-toggle-track_on:focus,
|
|
.obj-toggle-track_on:focus-visible,
|
|
.obj-toggle-track_on:active {
|
|
box-shadow: rgba(58, 150, 120, 0.16) 0px 0px 0px 3px, rgba(58, 150, 120, 0.5) 0px 4px 10px -2px;
|
|
}
|
|
.obj-toggle-track:disabled {
|
|
cursor: not-allowed;
|
|
opacity: .7;
|
|
}
|
|
.obj-toggle-knob {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 3px;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
transition: left .2s;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.25);
|
|
}
|
|
.obj-toggle-track_on .obj-toggle-knob {
|
|
left: 21px;
|
|
}
|
|
|
|
.slds-combobox_container.slds-has-selection .slds-combobox__input-value, .slds-combobox_container.slds-has-selection .slds-combobox__input-value:focus {
|
|
box-shadow: 0 0 0 0px;
|
|
}
|
|
|
|
:host{
|
|
--sds-c-checkbox-toggle-color-background-checked: rgb(95, 168, 50) !important;
|
|
--slds-c-checkbox-toggle-color-background-hover: rgb(95, 168, 50) !important;
|
|
}
|
|
|
|
/* ── Search box styling ── */
|
|
.search-col .searchBoxWrapper {
|
|
background: rgb(247, 249, 246);
|
|
border: 1px solid rgb(226, 231, 226);
|
|
border-radius: 9px;
|
|
padding: 4px 8px;
|
|
}
|
|
.search-col .searchBoxWrapper lightning-input {
|
|
--sds-c-input-color-border: transparent;
|
|
--slds-c-input-color-border: transparent;
|
|
--sds-c-input-shadow: none;
|
|
--slds-c-input-shadow: none;
|
|
--sds-c-input-color-background: transparent;
|
|
--slds-c-input-color-background: transparent;
|
|
}
|
|
|
|
/* Error when account lookup is empty */
|
|
.hasError .slds-input {
|
|
border-color: red !important;
|
|
background-color: white;
|
|
}
|
|
.object-table{
|
|
position: relative;
|
|
z-index: 5;
|
|
}
|
|
|
|
/* ── Card container ── */
|
|
.custom-form-card .slds-box {
|
|
box-shadow: 0 10px 26px -16px rgba(23,43,32,.28);
|
|
border-radius: 16px;
|
|
background: #fff;
|
|
border: 1px solid #e6ebe6;
|
|
margin-top: 9px;
|
|
overflow: visible;
|
|
}
|
|
|
|
/* ── Section headers (Customer Settings, Opportunity Settings) ── */
|
|
.fm-section-title {
|
|
font-size: 19px;
|
|
font-weight: 800;
|
|
letter-spacing: -.01em;
|
|
color: #1c2b23;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
padding: 20px 26px 16px;
|
|
border-bottom: 1px solid #e4ebe6;
|
|
margin: 0;
|
|
line-height: 1.3;
|
|
}
|
|
|
|
/* ── Setting row (toggle + label inline) ── */
|
|
.fm-setting-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
padding: 14px 26px;
|
|
min-height: 48px;
|
|
}
|
|
|
|
/* ── Setting row label ── */
|
|
.fm-setting-label {
|
|
font-size: 14.5px;
|
|
font-weight: 600;
|
|
color: #37453d;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
line-height: 1.4;
|
|
word-break: break-word;
|
|
}
|
|
|
|
.fm-setting-label .slds-required {
|
|
color: #c23934;
|
|
text-decoration: none;
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.fm-stage-row {
|
|
justify-content: flex-start;
|
|
flex-wrap: nowrap;
|
|
}
|
|
|
|
.fm-stage-label {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.fm-stage-combobox {
|
|
flex: 1 1 auto;
|
|
max-width: 320px;
|
|
}
|
|
|
|
.fm-stage-combobox lightning-combobox {
|
|
--slds-c-input-radius-border: 8px;
|
|
--sds-c-input-radius-border: 8px;
|
|
}
|
|
|
|
/* Make the picklist dropdown scrollable after ~5 options */
|
|
.fm-stage-combobox .slds-listbox,
|
|
.fm-stage-combobox .slds-dropdown,
|
|
.fm-stage-combobox .slds-listbox_vertical,
|
|
.fm-stage-combobox ul[role="listbox"],
|
|
.fm-stage-combobox div[role="listbox"] {
|
|
max-height: 165px !important;
|
|
overflow-y: auto !important;
|
|
display: block !important;
|
|
}
|
|
|
|
.fm-stage-combobox li[role="presentation"],
|
|
.fm-stage-combobox .slds-listbox__item {
|
|
max-height: 33px;
|
|
}
|
|
|
|
.fm-closedate-row {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.fm-closedate-label {
|
|
flex: 0 0 auto;
|
|
min-width: 190px;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.fm-stage-label {
|
|
min-width: 190px;
|
|
font-weight: 600 !important;
|
|
}
|
|
|
|
.fm-toggle-spacer {
|
|
flex: 0 0 auto;
|
|
width: 42px;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.fm-days-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex: 1 1 auto;
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.fm-days-input {
|
|
flex: 1 1 auto;
|
|
max-width: 320px;
|
|
}
|
|
|
|
/* lightning-input renders its own <input> inside a shadow root, so a gradient
|
|
cannot be set on that inner element from here (and the styling hooks below
|
|
only take flat colours, not gradients). Same approach as .field-input in
|
|
shopifyCredentials: paint the gradient on the HOST element and force the
|
|
inner input transparent so the gradient shows through. */
|
|
.fm-days-input {
|
|
background: linear-gradient(120deg, rgb(244, 250, 238) 0%, rgb(234, 243, 251) 100%);
|
|
border-radius: 8px;
|
|
--slds-c-input-color-background: transparent;
|
|
--sds-c-input-color-background: transparent;
|
|
--slds-c-input-color-background-focus: transparent;
|
|
--slds-c-input-color-background-disabled: transparent;
|
|
--lwc-colorBackgroundInput: transparent;
|
|
--lwc-colorBackgroundInputDisabled: transparent;
|
|
--slds-c-input-radius-border: 8px;
|
|
--sds-c-input-radius-border: 8px;
|
|
--slds-c-input-color-border: rgb(220, 232, 226);
|
|
--sds-c-input-color-border: rgb(220, 232, 226);
|
|
}
|
|
|
|
.fm-tooltip-wrap {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* ── Tooltip ── */
|
|
.tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tooltiptext {
|
|
visibility: hidden;
|
|
width: 250px;
|
|
background: linear-gradient(120deg, #5fa832, #2f8fb0);
|
|
color: #fff;
|
|
text-align: center;
|
|
border-radius: 10px;
|
|
padding: 10px 12px;
|
|
position: absolute;
|
|
z-index: 10;
|
|
top: -20%;
|
|
left: 20px;
|
|
margin-top: 4px;
|
|
font-size: 12.5px;
|
|
line-height: 1.5;
|
|
box-shadow: 0 8px 20px -8px rgba(23,43,32,.4);
|
|
}
|
|
|
|
.tooltip .tooltiptext::after {
|
|
content: "";
|
|
position: absolute;
|
|
border-style: solid;
|
|
right: 99%;
|
|
top: 4px;
|
|
margin-left: -10px;
|
|
border-width: calc(.5rem);
|
|
border-color: transparent #5fa832 transparent transparent;
|
|
}
|
|
|
|
.tooltip:hover .tooltiptext {
|
|
visibility: visible;
|
|
}
|
|
|
|
.sme-fieldmappingchildopportunity{
|
|
position: relative;
|
|
}
|
|
|
|
/* ── Footer actions (Back + Save & Next) ── */
|
|
.sw-actions {
|
|
padding: 18px 26px 22px;
|
|
border-top: 1px solid #f0f2f0;
|
|
margin-top: 12px;
|
|
background: #fff;
|
|
border-radius: 0 0 16px 16px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.sw-btn-back {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: #fff;
|
|
color: #37453d;
|
|
border: 1px solid #d4d9d4;
|
|
border-radius: 9px;
|
|
padding: 10px 18px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
transition: box-shadow .2s, border-color .2s;
|
|
}
|
|
.sw-btn-back:hover {
|
|
border-color: #5fa832;
|
|
box-shadow: 0 2px 8px rgba(95,168,50,.15);
|
|
}
|
|
|
|
.sw-btn-save {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
background: linear-gradient(120deg, #5fa832, #2f8fb0);
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 9px;
|
|
padding: 11px 24px;
|
|
font-size: 13.5px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
box-shadow: 0 4px 12px rgba(95,168,50,.3);
|
|
transition: box-shadow .2s, transform .15s;
|
|
}
|
|
.sw-btn-save:hover {
|
|
box-shadow: 0 8px 22px -4px rgba(58,150,120,.65), 0 3px 8px rgba(95,168,50,.3);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
/* ── Responsive ── */
|
|
|
|
/* Card padding shrink on narrow viewports */
|
|
@media (max-width: 1300px) {
|
|
.search-col {
|
|
transform: translate(-10px, -4px) !important;
|
|
}
|
|
.fm-section-title {
|
|
padding: 18px 16px 14px;
|
|
font-size: 17px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1100px) {
|
|
.search-col {
|
|
transform: translate(0px, -4px) !important;
|
|
}
|
|
.myToggleClass {
|
|
padding: 0;
|
|
margin-left: -20px;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 900px) {
|
|
.custom-form-card .slds-box {
|
|
padding: 8px !important;
|
|
}
|
|
.fm-section-title {
|
|
padding: 14px 12px 10px;
|
|
font-size: 16px;
|
|
}
|
|
.sw-actions {
|
|
padding: 14px 16px 18px;
|
|
}
|
|
.sw-btn-back,
|
|
.sw-btn-save {
|
|
padding: 8px 14px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
|
|
@media (max-width:1500px){
|
|
.sme-field-mapping{
|
|
padding-inline: 0;
|
|
}
|
|
}/* ============================================================
|
|
Custom in-component toasts (replaces ShowToastEvent). Success uses the
|
|
brand green→teal gradient reference; error uses red. Added by UI packaging.
|
|
============================================================ */
|
|
.sw-toast-container { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 420px; pointer-events: none; }
|
|
.sw-toast { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 10px; box-shadow: 0 12px 30px -10px rgba(23,43,32,.45); color: #fff; width: 100%; box-sizing: border-box; pointer-events: auto; animation: sw-toast-in 180ms ease; }
|
|
@keyframes sw-toast-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
|
|
.sw-toast-icon { flex-shrink: 0; font-size: 15px; line-height: 1.3; font-weight: 700; }
|
|
.sw-toast-body { flex: 1; min-width: 0; }
|
|
.sw-toast-title { font-weight: 800; font-size: 13.5px; line-height: 1.3; }
|
|
.sw-toast-message { font-size: 12.5px; line-height: 1.4; opacity: .95; margin-top: 2px; word-break: break-word; }
|
|
.sw-toast-close { flex-shrink: 0; background: transparent; border: none; color: inherit; opacity: .85; cursor: pointer; font-size: 18px; line-height: 1; padding: 0; font-family: inherit; }
|
|
.sw-toast-close:hover { opacity: 1; }
|
|
.sw-toast-success { background: linear-gradient(120deg, var(--smepro-green), var(--smepro-teal)); }
|
|
.sw-toast-error { background: linear-gradient(120deg, #e9923d, #b56a1f); }
|
|
.sw-toast-warning { background: #f59e0b; color: #1f2937; }
|
|
.sw-toast-info { background: #3b7ec4; } |