464 lines
11 KiB
CSS
464 lines
11 KiB
CSS
:host {
|
|
--smepro-green: #5fa832;
|
|
--smepro-teal: #3f9a86;
|
|
}
|
|
|
|
/* 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%;
|
|
background: linear-gradient(180deg, #f4faee 0%, #eaf3fb 100%) !important;
|
|
border-radius: 16px;
|
|
width: 100%;
|
|
}
|
|
.sw-loading-wrap .pageLoading-Gif {
|
|
width: 25%;
|
|
max-width: 260px;
|
|
margin: 0;
|
|
}
|
|
|
|
/* ── Card container ── */
|
|
.custom-form-card .slds-box {
|
|
box-shadow: 0 10px 26px -16px rgba(23,43,32,.28);
|
|
border-radius: 16px;
|
|
background: linear-gradient(120deg, #f4faee 0%, #eaf3fb 100%);
|
|
margin-top: 9px;
|
|
border: 1px solid #e4ebe6;
|
|
overflow: hidden;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* ── Card header area ── */
|
|
.obj-header {
|
|
padding: 22px 26px;
|
|
border-bottom: 1px solid #e4ebe6;
|
|
}
|
|
|
|
/* ── Page heading ── */
|
|
.slds-text-heading_small {
|
|
font-size: 19px !important;
|
|
font-weight: 800 !important;
|
|
letter-spacing: -.01em !important;
|
|
color: #1c2b23 !important;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
/* ── Subtitle ── */
|
|
.obj-subtitle {
|
|
margin: 6px 0 0;
|
|
font-size: 13px;
|
|
color: #6b786f;
|
|
max-width: 520px;
|
|
}
|
|
|
|
/* ── Column header row (Shopify / Salesforce) ── */
|
|
.sme-object-setup-row1 {
|
|
display: grid !important;
|
|
grid-template-columns: 1fr 1.15fr;
|
|
gap: 16px;
|
|
padding: 12px 26px;
|
|
background: #fafbfa;
|
|
border-radius: 0 !important;
|
|
border: none !important;
|
|
border-bottom: 1px solid #f0f2f0 !important;
|
|
}
|
|
|
|
/* Force lightning-layout to take full width */
|
|
.object-setup-container {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.col-header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 11.5px;
|
|
font-weight: 800;
|
|
letter-spacing: .05em;
|
|
text-transform: uppercase;
|
|
color: #7c8a80;
|
|
}
|
|
|
|
.col-badge {
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 5px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 9px;
|
|
font-weight: 800;
|
|
}
|
|
|
|
.col-badge_shopify {
|
|
background: #ecf6e3;
|
|
color: #4f8a24;
|
|
}
|
|
|
|
.col-badge_sf {
|
|
background: #e3f0fc;
|
|
color: #0176d3;
|
|
}
|
|
|
|
/* ── Rows wrapper ── */
|
|
.obj-rows-wrap {
|
|
padding: 14px 26px 6px;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* ── Object rows ── */
|
|
.sme-object-setup-row {
|
|
display: grid !important;
|
|
grid-template-columns: 1fr 1.15fr;
|
|
gap: 16px;
|
|
align-items: center;
|
|
width: 100%;
|
|
margin-top: 0;
|
|
padding: 13px 0;
|
|
border-bottom: 1px solid #f2f4f2;
|
|
border-radius: 0;
|
|
border-left: none;
|
|
border-right: none;
|
|
border-top: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.sme-object-setup-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* Force lightning-layout-item to behave inside grid */
|
|
.sme-object-setup-row lightning-layout-item {
|
|
flex: unset !important;
|
|
max-width: 100% !important;
|
|
width: 100% !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
/* Label = flex row (icon + name side by side) */
|
|
.sme-object-setup-row lightning-layout-item.sme-object-setup-label {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
/* Toggler = flex row (toggle + text side by side) */
|
|
.sme-object-setup-row lightning-layout-item.sme-object-setup-toggler {
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
/* ── Left side: icon + label ── */
|
|
.sme-object-setup-label {
|
|
padding: 0 !important;
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 12px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Icon styling (green rounded square with shadow) ── */
|
|
.iconColor {
|
|
background-color: #ecf6e3 !important;
|
|
--slds-c-icon-color-background: #ecf6e3;
|
|
--sds-c-icon-color-background: #ecf6e3;
|
|
color: #4f8a24 !important;
|
|
border-radius: 9px;
|
|
width: 34px;
|
|
height: 34px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
--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;
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* ── Object name text ── */
|
|
.object-Text-Color {
|
|
color: #26332b;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
margin-top: 0;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Toggler group (2 toggles in same row, e.g. Draft Order / Paid Order) ── */
|
|
.toggler-group {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 22px;
|
|
}
|
|
|
|
/* ── Right side: toggle + SF object name ── */
|
|
.sme-object-setup-toggler {
|
|
padding: 0 !important;
|
|
display: flex !important;
|
|
align-items: center;
|
|
gap: 10px;
|
|
line-height: 1.4;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.object-Text-Color-Shopify {
|
|
color: #37453d;
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
line-height: 1.4;
|
|
min-height: unset;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Custom toggle switch (matches Step 2 reference) ── */
|
|
.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: linear-gradient(120deg, #5fa832, #2f8fb0);
|
|
box-shadow: 0 0 0 3px rgba(58, 150, 120, .16), 0 4px 10px -2px rgba(58, 150, 120, .5);
|
|
}
|
|
.obj-toggle-track_on:focus,
|
|
.obj-toggle-track_on:focus-visible,
|
|
.obj-toggle-track_on:active {
|
|
box-shadow: 0 0 0 3px rgba(58, 150, 120, .16), 0 4px 10px -2px rgba(58, 150, 120, .5);
|
|
}
|
|
.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;
|
|
}
|
|
|
|
/* ── Locked/disabled toggle (always-on, e.g. Product, Collection, Location) ── */
|
|
.locked-toggle {
|
|
position: relative;
|
|
width: 42px;
|
|
height: 24px;
|
|
flex: 0 0 auto;
|
|
border-radius: 999px;
|
|
/* background: #bcd9a6; */
|
|
background: linear-gradient(120deg, #5fa832, #2f8fb0);
|
|
cursor: not-allowed;
|
|
opacity: .7;
|
|
}
|
|
.locked-knob {
|
|
position: absolute;
|
|
top: 3px;
|
|
left: 21px;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: #fff;
|
|
box-shadow: 0 1px 3px rgba(0,0,0,.25);
|
|
}
|
|
|
|
/* ── Required tag for disabled toggles ── */
|
|
.required-tag {
|
|
font-size: 10.5px;
|
|
font-weight: 700;
|
|
color: #9aa79d;
|
|
background: #eef1ee;
|
|
padding: 2px 8px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
/* ── Customer pill row (Account & Contact) ── */
|
|
.sme-object-setup-row .email-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 10px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.sme-object-setup-row .email-row .email-row-bar {
|
|
align-items: center;
|
|
}
|
|
|
|
.sme-object-setup-row .email-row .email-row-bar-icons {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.email-text {
|
|
font-size: 13.5px;
|
|
font-weight: 600;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
|
|
color: #37453d;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
/* ── Edit icon button (SVG, matches Step 2) ── */
|
|
.email-icon-btn {
|
|
background: none;
|
|
border: none;
|
|
padding: 4px;
|
|
cursor: pointer;
|
|
color: #5fa832;
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
}
|
|
.email-icon-btn:hover {
|
|
color: #3f8f2f;
|
|
}
|
|
|
|
/* ── Dropdown (Customer combobox) ── */
|
|
.sme-object-setup-dropdown {
|
|
flex: 1;
|
|
}
|
|
|
|
/* ── Footer actions (Back + Save & Next) ── */
|
|
.sw-actions {
|
|
padding: 18px 26px 22px;
|
|
border-top: 1px solid #e4ebe6;
|
|
margin-top: 8px;
|
|
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 ── */
|
|
@media (max-width: 700px) {
|
|
.sme-object-setup-row {
|
|
grid-template-columns: 1fr !important;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 1300px){
|
|
.toggler-group{
|
|
flex-direction: column;
|
|
align-items: start;
|
|
}
|
|
}/* ============================================================
|
|
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; }
|
|
|
|
/* lightning-icon renders its <svg> in its OWN shadow DOM, and for standard:*
|
|
icons SLDS paints a background on that inner svg — which would cover the
|
|
host's mint square. These styling hooks cross the shadow boundary (custom
|
|
properties inherit through it) and the svg sizing keeps every icon visually
|
|
identical regardless of each icon-name's native viewBox. */
|
|
.iconColor svg,
|
|
.iconColor .slds-icon {
|
|
width: 18px !important;
|
|
height: 18px !important;
|
|
background: transparent !important;
|
|
fill: #4f8a24 !important;
|
|
}
|
|
.obj-icon{
|
|
width: 30px;
|
|
height: 30px;
|
|
flex: 0 0 auto;
|
|
border-radius: 8px;
|
|
background: #ecf6e3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #4f8a24;
|
|
} |