/* STRUKTUR DIESER GLOBAL CSS - :root -> custom Variablen und überschreibende globale Variablen - CSS Resets -> Setzen hindernde Variablen auf 0 - Fonts -> Zuweisung von custom font-family - General Styles -> Globale Styles von UI Elementen - Components -> Ãœbergreifende Stylings für Standard Salesforce Komponenten */ /* ================================ ================================ ================================ ============== */ /* UMGANG MIT :root :root ist der oberste Selektor im Dokumentenbaum. Entspricht etwa :root ist stärker als und eignet sich daher gut für Variablen In der :root deklarierte Werte wirken sich global im gesamten (Shadow) DOM aus. In eine :root gehören nur Design Tokens - keine CSS Regeln, also Werte, die man mehrfach braucht */ /* ================================ ================================ ================================ ============== */ :root { /* ================================ */ /* ===== Variables ================ */ /* ================================ */ /* ===== Colors =================== */ /* Main Colors */ --st-color-primary: var(--dxp-g-brand); /* rgba(0, 54, 143, 1) */ --st-color-secondary: var(--dxp-g-brand-1); /* rgba(0, 152, 73, 1) */ /* Secondary Colors */ --st-color-orange: rgba(245, 85, 60, 1); --st-color-yellow: rgba(240, 220, 40, 1); /* Gray Colors */ --st-color-nearly-black: var(--dxp-g-root-contrast); /* rgba(36, 36, 36, 1) color for texts */ --st-color-black-gray: rgba(55, 55, 50, 1); --st-color-gray-middle: rgba(180, 180, 177, 1); --st-color-gray: rgba(227, 227, 225, 1); /* color for disabled state */ --st-color-gray-light: rgba(240, 240, 235, 1); /* Akzent Colors */ --st-color-orange-dark: rgba(210, 70, 20, 1); --st-color-orange-light: rgba(225, 180, 145, 1); --st-color-yellow-dark: rgba(200, 179, 30, 1); --st-color-yellow-light: rgba(255, 250, 175, 1); /* ===== Generals ================ */ /* Font */ --dxp-g-root-font-family: ST Montserrat Regular; /* Buttons */ /* Primary Button / Button Brand */ --st-button-primary-bg-color: var(--dxp-s-button-color); --st-button-primary-border-color: var(--dxp-s-button-border-color); --st-button-primary-text-color: var(--dxp-s-button-color-contrast); --st-button-primary-hover-bg-color: var(--dxp-s-button-color-hover); --st-button-primary-hover-border-color: var(--dxp-s-button-border-color-hover); --st-button-primary-hover-text-color: var(--dxp-s-button-color-hover-contrast); --st-button-primary-focus-bg-color: var(--dxp-s-button-color-focus); --st-button-primary-focus-border-color: var(--dxp-s-button-border-color-focus); --st-button-primary-focus-text-color: var(--dxp-s-button-color-focus-contrast); --st-button-primary-active-bg-color: var(--dxp-s-button-color-active); --st-button-primary-active-border-color: var(--dxp-s-button-border-color-active); --st-button-primary-active-text-color: var(--dxp-s-button-color-active-contrast); /* Secondary Button / Button Outline Brand*/ --st-button-secondary-bg-color: var(--dxp-s-secondary-button-color); --st-button-secondary-border-color: var(--dxp-s-secondary-button-border-color); --st-button-secondary-text-color: var(--dxp-s-secondary-button-text-color); --st-button-secondary-hover-bg-color: var(--dxp-s-secondary-button-color-hover); --st-button-secondary-hover-border-color: var(--dxp-s-secondary-button-border-color-hover); --st-button-secondary-hover-text-color: var(--dxp-s-secondary-button-text-color-hover); --st-button-secondary-focus-bg-color: var(--dxp-s-secondary-button-color-focus); --st-button-secondary-focus-border-color: var(--dxp-s-secondary-button-border-color-focus); --st-button-secondary-focus-text-color: var(--dxp-s-secondary-button-text-color-focus); --st-button-secondary-active-bg-color: var(--dxp-s-secondary-button-color-active); --st-button-secondary-active-border-color: var(--dxp-s-secondary-button-border-color-active); --st-button-secondary-active-text-color: var(--dxp-s-secondary-button-text-color-active); --dxp-c-julius-ist-ein-doesbaddl: visible; /* Tertiary Button / Button Neutral or Base */ --st-button-tertiary-bg-color: var(--dxp-s-tertiary-button-color); --st-button-tertiary-border-color: var(--dxp-s-tertiary-button-border-color); --st-button-tertiary-text-color: var(--dxp-s-tertiary-button-text-color); --st-button-tertiary-hover-bg-color: var(--dxp-s-tertiary-button-color-hover); --st-button-tertiary-hover-border-color: var(--dxp-s-tertiary-button-border-color-hover); --st-button-tertiary-hover-text-color: var(--dxp-s-tertiary-button-text-color-hover); --st-button-tertiary-focus-bg-color: var(--dxp-s-tertiary-button-color-focus); --st-button-tertiary-focus-border-color: var(--dxp-s-tertiary-button-border-color-focus); --st-button-tertiary-focus-text-color: var(--dxp-s-tertiary-button-text-color-focus); --st-button-tertiary-active-bg-color: var(--dxp-s-tertiary-button-color-active); --st-button-tertiary-active-border-color: var(--dxp-s-tertiary-button-border-color-active); --st-button-tertiary-active-text-color: var(--dxp-s-tertiary-button-text-color-active); } /* ================================ ================================ ================================ ============== */ /* ================================ */ /* ===== CSS Resets =============== */ /* ================================ */ *::before, *::after { box-sizing: border-box; } body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; padding: 0; } h1 { font-size: var(--dxp-s-text-heading-extra-large-font-size); font-family: var(--dxp-s-text-heading-extra-large-font-family); } h2 { font-size: var(--dxp-s-text-heading-large-font-size); font-family: var(--dxp-s-text-heading-large-font-family); } h3 { font-size: var(--dxp-s-text-heading-medium-font-size); font-family: var(--dxp-s-text-heading-medium-font-family); } h4 { font-size: var(--dxp-s-text-heading-small-font-size); font-family: var(--dxp-s-text-heading-small-font-family); } h5 { font-size: var(--dxp-s-text-heading-extra-small-font-size); font-family: var(--dxp-s-text-heading-extra-small-font-family); } h6 { font-size: var(--dxp-s-text-heading-extra-extra-small-font-size); font-family: var(--dxp-s-text-heading-extra-extra-small-font-family); } html { scroll-behavior: smooth; } /* ================================ */ /* ====== Fonts =================== */ /* ================================ */ @font-face { font-family: 'ST Montserrat Thin'; font-weight: 250; src: url("./fonts/Montserrat-Thin.woff") format('woff'); } @font-face { font-family: 'ST Montserrat Regular'; font-weight: 400; src: url("./fonts/Montserrat-Regular.woff") format('woff'); } @font-face { font-family: 'ST Montserrat Bold'; font-weight: 700; src: url("./fonts/Montserrat-Bold.woff") format('woff'); } @font-face { font-family: 'ST Montserrat SemiBold'; font-weight: 600; src: url("./fonts/Montserrat-SemiBold.woff") format('woff'); } @font-face { font-family: 'ST Montserrat SemiBold Italic'; font-weight: 600; font-style: italic; src: url("./fonts/Montserrat-SemiBoldItalic.woff") format('woff'); } /* ================================ ================================ ================================ ============== */ /* ================================ */ /* ====== General Styles ========== */ /* ================================ */ c-ds_product-stock-status-settings { --dxp-s-component-wrapper-spacer-size: 0; --dxp-s-component-wrapper-spacer-size-mobile: 0; } lightning-input.slds-has-error { lightning-primitive-icon { display: none; } } /* Placeholder styling for all input types */ lightning-input input::placeholder, lightning-textarea textarea::placeholder, lightning-combobox input::placeholder { font-size: 0.875rem; opacity: 0.4; color: var(--st-color-black-gray); } /* Styles for Rich Content Editor to use the custom font*/ .cb-outputRichText-container strong { font-family: var(--dxp-g-font-family-sans, 'ST Montserrat Bold', system-ui, sans-serif); font-weight: var(--dxp-g-font-weight-bold, 700); } /* ====== Font ==================== */ .slds-form-element__legend {font-family: ST Montserrat Bold;} @media only screen and (max-width: 768px) { h1 { font-size: 2.25rem !important; line-height: 2.5rem !important; letter-spacing: 0 !important; } h2 { font-size: 1.875rem !important; line-height: 2.5rem !important; letter-spacing: 0 !important; } h3 { font-size: 1.5rem !important; line-height: 1.875rem !important; letter-spacing: 0 !important; } h4 { font-size: 1.25rem !important; line-height: 1.75rem !important; letter-spacing: 0 !important; } h5 { font-size: 1rem !important; line-height: 1.375rem !important; letter-spacing: 0 !important; } h6 { font-size: 0.75rem !important; line-height: 1.125rem !important; letter-spacing: 0 !important; } lightning-formatted-text { font-size: 0.875rem !important; line-height: 1.25rem !important; letter-spacing: 0 !important; } } /* ====== Buttons =================== */ lightning-helptext{ .slds-form-element__icon { padding: 0 !important; } .slds-button { padding: 0 !important; } } /* Base button styles */ .slds-button, .comm-forgot-password__submit-button, .comm-login-form__login-button { padding-inline-start: var(--dxp-s-button-padding-inline-start) !important; padding-inline-end: var(--dxp-s-button-padding-inline-end) !important; padding-block-start: var(--dxp-s-button-padding-block-start) !important; padding-block-end: var(--dxp-s-button-padding-block-start) !important; font-family: var(--dxp-s-button-font-family); text-decoration: var(--dxp-s-button-text-decoration); border-radius: var(--dxp-s-button-radius-border); transition: all 0.2s ease-in-out; } .slds-button:focus, .slds-button:hover, .slds-button:active { box-shadow: none; } /* Outline Brand Button */ .slds-button_outline-brand { background-color: var(--st-button-secondary-bg-color); border-color: var(--st-button-secondary-border-color); color: var(--st-button-secondary-text-color); } .slds-button_outline-brand:hover { background-color: var(--st-button-secondary-hover-bg-color); border-color: var(--st-button-secondary-hover-border-color); color: var(--st-button-secondary-hover-text-color); } .slds-button_outline-brand:focus { background-color: var(--st-button-secondary-focus-bg-color); border-color: var(--st-button-secondary-focus-border-color); color: var(--st-button-secondary-focus-text-color); } .slds-button_outline-brand:active { background-color: var(--st-button-secondary-active-bg-color); border-color: var(--st-button-secondary-active-border-color); color: var(--st-button-secondary-active-text-color); } /* Brand Button */ .slds-button_brand { background-color: var(--st-button-primary-bg-color); border-color: var(--st-button-primary-border-color); color: var(--st-button-primary-text-color); } .slds-button_brand:hover { background-color: var(--st-button-primary-hover-bg-color); border-color: var(--st-button-primary-hover-border-color); color: var(--st-button-primary-hover-text-color); } .slds-button_brand:focus { background-color: var(--st-button-primary-focus-bg-color); border-color: var(--st-button-primary-focus-border-color); color: var(--st-button-primary-focus-text-color); } .slds-button_brand:active { background-color: var(--st-button-primary-active-bg-color); border-color: var(--st-button-primary-active-border-color); color: var(--st-button-primary-active-text-color); } /* Neutral Button (excluding commerce-number-input/quantity selector) */ lightning-button[variant="base"]:not([disabled]):not(commerce-number-input *):not(c-ds_product-quantity-selector *):not(c-ds_common-number-input *), lightning-button[variant="bare"]:not([disabled]):not(commerce-number-input *):not(c-ds_product-quantity-selector *):not(c-ds_common-number-input *), lightning-button[variant="neutral"]:not([disabled]):not(commerce-number-input *):not(c-ds_product-quantity-selector *):not(c-ds_common-number-input *) { .slds-button:not([disabled]), .slds-button_neutral:not([disabled]) { background-color: var(--st-button-tertiary-bg-color); border-color: var(--st-button-tertiary-border-color); color: var(--st-button-tertiary-text-color); font-family: var(--dxp-s-button-font-family); text-decoration: var(--dxp-s-button-text-decoration); padding-inline-start: 0 !important; padding-inline-end: 0 !important; padding-block-start: 0 !important; padding-block-end: 0 !important; &:hover { background-color: var(--st-button-tertiary-hover-bg-color); border-color: var(--st-button-tertiary-hover-border-color); color: var(--st-button-tertiary-hover-text-color); } &:focus { &::after { --slds-kx-button-underline-scale-x: 0; } background-color: var(--st-button-tertiary-focus-bg-color); border-color: var(--st-button-tertiary-focus-border-color); color: var(--st-button-tertiary-focus-text-color); } &:active { background-color: var(--st-button-tertiary-active-bg-color); border-color: var(--st-button-tertiary-active-border-color); color: var(--st-button-tertiary-active-text-color); } } } .slds-button_neutral { background-color: var(--st-button-tertiary-bg-color); border-color: var(--st-button-tertiary-border-color); color: var(--st-button-tertiary-text-color); font-family: var(--dxp-s-button-font-family); text-decoration: var(--dxp-s-button-text-decoration); } .slds-button_neutral:hover { background-color: var(--st-button-tertiary-hover-bg-color); border-color: var(--st-button-tertiary-hover-border-color); color: var(--st-button-tertiary-hover-text-color); } .slds-button_neutral:focus { background-color: var(--st-button-tertiary-focus-bg-color); border-color: var(--st-button-tertiary-focus-border-color); color: var(--st-button-tertiary-focus-text-color); } .slds-button_neutral:active { background-color: var(--st-button-tertiary-active-bg-color); border-color: var(--st-button-tertiary-active-border-color); color: var(--st-button-tertiary-active-text-color); } /* Disabled states */ .slds-button[disabled]:not(.slds-button_neutral), .slds-button:disabled:not(.slds-button_neutral) { background-color: var(--st-color-gray) !important; color: white !important; } .slds-button_brand[disabled], .slds-button_brand:disabled { background-color: var(--st-color-gray) !important; border-color: var(--st-color-gray) !important; } .slds-button_outline-brand[disabled], .slds-button_outline-brand:disabled { border-color: var(--st-color-gray) !important; background-color: white !important; color: var(--st-color-gray) !important; } /* Login form buttons */ .comm-login-form__login-button, .comm-forgot-password__submit-button, .comm-check-email_return-button { background-color: var(--st-button-primary-bg-color) !important; border-color: var(--st-button-primary-border-color) !important; color: var(--st-button-primary-text-color) !important; } .comm-login-form__login-button:hover, .comm-forgot-password__submit-button:hover, .comm-check-email_return-button:hover { background-color: var(--st-button-primary-hover-bg-color) !important; border-color: var(--st-button-primary-hover-border-color) !important; color: var(--st-button-primary-hover-text-color) !important; } .comm-login-form__login-button:focus, .comm-forgot-password__submit-button:focus, .comm-check-email_return-button:focus { background-color: var(--st-button-primary-focus-bg-color) !important; border-color: var(--st-button-primary-focus-border-color) !important; color: var(--st-button-primary-focus-text-color) !important; } .comm-login-form__login-button:active, .comm-forgot-password__submit-button:active, .comm-check-email_return-button:active { background-color: var(--st-button-primary-active-bg-color) !important; border-color: var(--st-button-primary-active-border-color) !important; color: var(--st-button-primary-active-text-color) !important; } .comm-login-form__login-button:disabled, .comm-forgot-password__submit-button:disabled, .comm-check-email_return-button:disabled { background-color: var(--st-color-gray-light) !important; border-color: var(--st-color-gray-light) !important; color: white !important; } /* Hover effects */ @media (hover: hover) and (pointer: fine) { [kx-scope=button-brand]:hover, [kx-scope=button-filled]:hover, [kx-scope=button-neutral]:hover, [kx-scope=button-outline]:hover { -webkit-transform: none !important; transform: none !important; } } /* :active and :focus stylings above should not be applied on Quantity Selector and Quick Order */ commerce-quantity-selector, c-ds_common-number-input { .slds-button.slds-button_neutral:disabled, .slds-button.slds-button_neutral:active, .slds-button.slds-button_neutral:hover, .slds-button.slds-button_neutral:focus { background-color: transparent; } .slds-button.slds-button_neutral:disabled { margin-inline: 1.25rem; } } commerce-quick-order-display { .slds-button:active { background-color: transparent; border: none; } .slds-button:focus { background-color: transparent; border: none; } button[name="entryButton"] { margin-right: 1rem; } } .slds-button_neutral:disabled, .slds-button_neutral[disabled], lightning-button[variant="neutral"][disabled] .slds-button, lightning-button[variant="neutral"][disabled] .slds-button_neutral { border: none !important; background-color: transparent !important; color: var(--st-color-gray) !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; padding-block-start: 0 !important; padding-block-end: 0 !important; } lightning-tab { .side-area .slds-button { --dxp-s-button-padding-inline-start: 0; --dxp-s-button-padding-inline-end: 0; --dxp-s-button-padding-block-start: 0; --dxp-s-button-padding-block-end: 0; transition: none; border: none; } } [kx-scope=button][kx-type=underline]:hover:after { --slds-kx-button-underline-scale-x: 0 !important; } /* ====== Links =================== */ dxp_base-link { a { p { color: var(--dxp-s-link-text-color) !important; } } a:hover { p { color: var(--dxp-s-link-text-color-hover) !important; } } } /* ===== Checkboxen ================= */ /* Standard Lightning Checkbox Styling */ lightning-primitive-input-checkbox { /* NOTE: zum zentrieren von lightning-input checkboxen */ label { display: inline-flex; span[part="label"] { display: inline-flex; margin: 0.063rem 0 0 1.5rem; line-height: 1.5; hyphens: none; width: max-content; max-width: fit-content; } } } /* Custom Checkbox Styling for Mandatory Accessories List Item */ .checkbox-area { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 1rem; height: 1rem; border: 1px solid var(--dxp-s-form-checkbox-color-border); border-radius: 0.25rem; background-color: var(--dxp-s-form-checkbox-color-background); cursor: pointer; position: relative; margin: 0 0.5rem 0 0; vertical-align: middle; box-sizing: border-box; transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; flex-shrink: 0; opacity: 1 !important; visibility: visible !important; } .item-wrapper:hover .checkbox-area { opacity: 1 !important; visibility: visible !important; } .checkbox-area:active:not(:disabled) { transform: scale(0.95); transition: transform 0.1s ease-in-out; } .checkbox-area:checked { background-color: var(--dxp-s-form-checkbox-color-background-checked); border-color: var(--dxp-s-form-checkbox-color-background-checked); } .checkbox-area:checked::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0.3125rem; height: 0.625rem; transform: translate(-50%, -60%) rotate(45deg); border: solid white; border-width: 0 2px 2px 0; box-sizing: border-box; } .checkbox-area:disabled { background-color: var(--dxp-s-form-checkbox-color-border); border-color: var(--dxp-s-form-checkbox-color-border); cursor: not-allowed; opacity: 0.6; } .checkbox-area:focus-visible { outline: 2px solid var(--dxp-s-form-element-color-border-focus); outline-offset: 2px; } .checkbox-area:focus:not(:focus-visible) { outline: none; } /* SLDS Checkbox Styling */ .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux { border: 1px solid var(--dxp-s-form-checkbox-color-background-checked) !important; } .slds-checkbox [type="checkbox"]:checked + .slds-checkbox__label .slds-checkbox_faux:after { border-color: white; top: 45%; } .slds-checkbox [type="checkbox"]:disabled + .slds-checkbox__label .slds-checkbox_faux:after { border-color: var(--dxp-s-form-checkbox-color-border); } .slds-checkbox [type="checkbox"]:disabled + .slds-checkbox__label .slds-checkbox_faux { border-color: var(--dxp-s-form-checkbox-color-border); background-color: var(--dxp-s-form-checkbox-color-border); } .slds-checkbox [type="checkbox"]:focus + .slds-checkbox__label .slds-checkbox_faux { --slds-c-checkbox-shadow: none; outline: 2px solid var(--dxp-s-form-element-color-border-focus); outline-offset: 2px; } /* ===== Radiobuttons =================== */ .slds-radio_faux { background-color: var(--dxp-s-form-checkbox-color-background) !important; border-color: var(--dxp-s-form-checkbox-color-border) !important; border-width: var(--dxp-s-form-checkbox-width-border) !important; } .slds-radio_faux:after { background-color: var(--dxp-s-form-checkbox-color-background) !important; width: calc(1rem - 1px) !important; height: calc(1rem - 1px) !important; border: 4px solid var(--dxp-s-form-checkbox-color-background-checked); } .slds-radio [type="radio"]:focus + .slds-radio__label .slds-radio_faux { -webkit-box-shadow: none; box-shadow: none; border: 1px solid var(--dxp-s-form-checkbox-color-border); outline: 2px solid var(--dxp-s-form-element-color-border-focus); outline-offset: 2px; } .flowruntime-input.slds-form-element:has(> lightning-input lightning-primitive-input-checkbox) { lightning-input { padding-top: 0; margin-bottom: 0 !important; } .flowruntime-input-label { position: relative; margin: 0 !important; padding-bottom: 0.14rem !important; lightning-formatted-rich-text { font-size: var(--dxp-s-form-element-text-font-size) !important; } } } /* ===== Inputs ======================= */ .slds-input__icon { top: 63% !important; } lightning-input, lightning-textarea, lightning-combobox, lightning-select { width: 100%; .slds-input, .slds-textarea, .slds-combobox__input, .slds-select { --input-color-background: var(--st-color-gray-light); /* note: fixes the background-color of inputfield with error, it was white before */ border: none; background-color: var(--st-color-gray-light) !important; border-radius: 0; padding-block-start: 1.8rem; padding-block-end: 0.5rem; padding-inline-start: 1rem; font-family: ST Montserrat Regular; /* TODO: Ersetze durch Variable */ transition: background-color 0.15s ease-in-out, outline 0.15s ease-in-out; } .slds-form-element__label { color: var(--dxp-g-root-contrast); position: absolute; z-index: 10; margin-inline-start: 0.75rem; margin-block-start: 0.313rem; font-size: 0.8rem; } /* Focus states - improved accessibility with focus-visible */ .slds-input:focus, .slds-textarea:focus, .slds-combobox__input:focus, .slds-select:focus { border: none; background-color: var(--st-color-gray-light) !important; border-radius: 0; box-shadow: none !important; outline: 1px solid var(--dxp-s-form-element-color-border-focus) !important; outline-offset: 1px; } .slds-input:focus-visible, .slds-textarea:focus-visible, .slds-combobox__input:focus-visible, .slds-select:focus-visible { outline: 1px solid var(--dxp-s-form-element-color-border-focus) !important; outline-offset: 1px; } /* Disabled states */ .slds-input:disabled, .slds-textarea:disabled, .slds-combobox__input:disabled, .slds-select:disabled { background-color: var(--st-color-gray) !important; cursor: not-allowed; opacity: 0.6; } /* Invalid/Error states */ .slds-input[aria-invalid="true"], .slds-textarea[aria-invalid="true"], .slds-combobox__input[aria-invalid="true"], .slds-select[aria-invalid="true"] { outline: 1px solid var(--dxp-g-destructive) !important; outline-offset: 1px; } .slds-listbox { lightning-base-combobox-item:hover { box-shadow: none !important; } } } lightning-primitive-input-checkbox .slds-form-element__label { position: static; z-index: auto; margin-inline-start: 0; margin-block-start: 0; font-size: inherit; } lightning-select { .slds-select_container { position: relative; } .slds-select_container:before { display: none !important; } .slds-select_container:after { content: ''; position: absolute; top: 50%; right: 0.75rem; transform: translateY(-50%); pointer-events: none; width: 0; height: 0; border-left: 0.313rem solid transparent; border-right: 0.313rem solid transparent; border-top: 0.375rem solid var(--slds-g-color-neutral-base-50); } .slds-select_container .slds-select { padding-inline-start: 0.75rem; } .slds-select { height: 4.125rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; font-family: ST Montserrat Regular; /* TODO: Ersetze durch Variable */ transition: background-color 0.15s ease-in-out; } .slds-select:hover:not(:disabled) { cursor: pointer; } .slds-select option { padding: 0.5rem 0.75rem; background-color: white; color: var(--st-color-black-gray); } } lightning-file-upload { .slds-form-element__label { margin-top: 0.75rem; } lightning-primitive-file-droppable-zone { padding: 2rem 0 1rem 0 !important; background-color: var(--st-color-gray-light); border-radius: 0!important; width: 100%; span[class="slds-file-selector__button slds-button slds-button_neutral"] { background-color: var(--st-color-gray-light)!important; padding-inline-start: 0.75rem!important; cursor: pointer; &:focus { border: none; box-shadow: none !important; outline: none; } } } div[class="slds-file-selector slds-file-selector_files"] { width: 100%!important; } } flowruntime-action-button-field { div[class="slds-p-vertical_small slds-p-horizontal_medium overflowWrapAnywhere"] { padding-left: 0; padding-top: 0; button { padding-inline-start: 0!important; } } } flowruntime-help-text-lwc { button { --dxp-s-button-padding-inline-start: 0; &:focus { box-shadow: none!important; } } } .slds-file-selector__dropzone.slds-has-drag-over { border: 1px dashed var(--dxp-s-button-color) !important; box-shadow: 0 0 0 1px var(--dxp-s-button-color) !important; } .slds-file-selector__input:focus~.slds-file-selector__body>.slds-file-selector__button { box-shadow: none!important; } flowruntime-flow-screen-input { width: 100%; border: none; background-color: var(--st-color-gray-light); border-radius: 0; padding-block-start: 1.5rem; padding-block-end: 0.5rem; .slds-input, .slds-textarea, .slds-combobox__input { padding-block-start: 2.3rem!important; } .slds-input:focus{ border: none; background-color: var(--st-color-gray-light) !important; border-radius: 0; box-shadow: none !important; outline: 1px solid var(--dxp-s-form-element-color-border-focus) !important; outline-offset: 2px; } .flowruntime-input-label { position: absolute; z-index: 10; margin-inline-start: 0.75rem; margin-block-start: 0.313rem; .slds-form-element__label { font-size: 0.8rem; } } } c-ds_-order-note, c-ds_-cart-item-comment { /* NOTE: is needed because the styling within the custom component does not apply due to the depth of the elements. */ article[class="slds-card"] { border: none!important; box-shadow: none!important; } } /* ===== Dropdowns ====================== */ flowruntime-picklist-input-lwc { width: 100%; display: block; .slds-form-element { width: 100%; margin-bottom: 0; position: relative; background-color: var(--st-color-gray-light) !important; } .slds-select_container { position: relative; width: 100%; } .slds-select_container:before { display: none !important; } .slds-select_container:after { content: ''; position: absolute; top: 50%; right: 1rem; transform: translateY(-50%); pointer-events: none; width: 0; height: 0; border-left: 0.313rem solid transparent; border-right: 0.313rem solid transparent; border-top: 0.375rem solid var(--st-color-black-gray); } .slds-select { width: 100%; border: none; background-color: var(--st-color-gray-light) !important; border-radius: 0; padding: 1.8rem 2.5rem 0.5rem 1rem !important; appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer; font-family: ST Montserrat Regular !important; font-size: 1rem !important; color: var(--st-color-black-gray); height: auto; min-height: 3.5rem; } .slds-select:focus { border: none !important; background-color: var(--st-color-gray-light) !important; box-shadow: none !important; outline: 1px solid var(--dxp-s-form-element-color-border-focus) !important; outline-offset: 2px; } .slds-select:hover { background-color: var(--st-color-gray-light) !important; } .slds-select option { padding: 0.5rem 0.75rem; background-color: white; color: var(--st-color-black-gray); } .slds-form-element__label { position: absolute; z-index: 10; margin-inline-start: 0.75rem; margin-block-start: 0.313rem; font-size: 0.8rem; color: var(--st-color-black-gray); font-family: ST Montserrat Regular; } .flowruntime-input-label{ position: absolute; z-index: 10; margin-inline-start: 0.75rem; margin-block-start: -1.188rem; top: 1rem; margin-top: -.75rem; .slds-form-element__label { font-size: 0.8rem; } } select { background-color: transparent !important; border: none !important; padding-right: var(--dxp-s-form-element-spacing-horizontal-end) !important; padding-left: var(--dxp-s-form-element-spacing-horizontal-start) !important; margin: 0 !important; width: 100% !important; font-family: ST Montserrat Regular !important; font-size: var(--dxp-s-form-element-text-font-size) !important; cursor: inherit !important; line-height: inherit !important; appearance: none !important; border: none !important; background-color: var(--st-color-gray-light) !important; } .slds-select_container:before { display: none !important; } .slds-select_container:after { position: absolute; top: 2rem; right: 0.625rem; color: var(--slds-g-color-neutral-base-50); border-left: 0.313rem solid transparent; border-right: 0.313rem solid transparent; border-top: 0.375rem solid currentColor; } select:focus { box-shadow: none !important; } select:hover { cursor: pointer !important; } } /* ===== Accordion ================ */ .slds-button.slds-accordion__summary-action:hover { color: var(--dxp-g-root-contrast); } .slds-accordion__summary-heading { .slds-button:focus { --slds-g-shadow-outline-focus-1: none; box-shadow: var(--slds-g-shadow-outline-focus-1); --dxp-s-tertiary-button-text-color-focus: var(--dxp-g-root-contrast); color: var(--dxp-s-tertiary-button-text-color-focus); } } /* ===== Quantity Selector ======== */ commerce-number-input { .number-input__input { border-radius: 0.25rem !important; } } /* ===== Breadcrumbs ======== */ commerce_builder-breadcrumbs { --dxp-style-c-padding-left: 0 !important; } /* ===== Mini Cart ================ */ commerce_cart-mini-cart-panel { .panel-content { padding: 1.5rem!important; } .slds-grid { gap: 1rem; } commerce_cart-items { & article { & .li-layout, & .small-layout { & .item-delete { margin-right: 1rem; } } } .originalPrice { display: none; } } .panel-footer { commerce_cart-checkout-button { display: none; } } .originalPrice { display: none; } button.slds-button.slds-button_neutral:disabled { margin-inline: 0; } } /* ================================ ================================ ================================ ============== */ /* ================================ */ /* ====== Components ============== */ /* ================================ */ /* ====== Commerce Footer ========= */ .component-wrapper-spacer.st-pre-footer { margin-bottom: 0; } .component-wrapper-spacer.st-main-footer { margin-bottom: 0; } footer { .st-pre-footer { hyphens: auto; @media screen and (max-width: 768px) { img { max-height: none; height: auto; width: 3.75rem; } } } img { width: 100%; } } .st-login-checkout-footer { footer { position: fixed; bottom: 0; left: 0; width: 100%; padding-block: 2rem!important; } } .st-footer-product-categories { .my-account-nav-menu { ul { display: flex; flex-direction: column; align-items: center; a { padding: 0; } } li a:hover { box-shadow: none; } } /* Remove light-blue background on hover for footer navigation links */ .slds-nav-vertical__action:hover, .slds-nav-vertical__action:focus { background-color: transparent !important; } } /* ====== Commerce Header ========= */ header.desktop { margin-top: -1rem; --dxp-c-header-container-spacing-inline-start: 2rem; } .st-header-icon { button.slds-button_icon:hover, button.slds-button_icon:focus { --dxp-s-button-color-hover: var(--dxp-g-brand-1); } } .st-header-icon { .menu-button:hover { --dxp-s-button-color-focus: transparent; } } commerce-layout-site-simple { .header { margin-inline: 1.5rem; @media only screen and (max-width: 1024px) { margin-inline: 0; } } } .header-logo { picture img { max-width:10rem; } } .column-content:has(community_login-login-form) .logo-anchor { picture img { margin-top: 2rem; } } .logo-anchor { picture img { width: 10rem; height: auto; max-width: 10rem; max-height: none; @media only screen and (max-width: 768px) { width: 8rem; } } } commerce-layout-header { .header-content { padding: var(--dxp-g-spacing-xsmall)!important; } .layout-header-desktop { padding: 0 !important; --dxp-g-spacing-xxlarge: 0; display: flex; justify-content: space-between; .header-logo { padding-left: 0; width: auto; } } .layout-header-tablet { padding: 0 !important; margin-top: -1rem; .slds-gutters_direct-small { padding: 0 !important; } .header-logo { padding-left: 0; } .header-search { padding-inline: 0; } .header-badge-icons { padding-inline: 0; } } .layout-header-mobile { padding: 0 !important; .slds-gutters_direct-small { padding: 0 !important; } .header-search { padding-inline: 0; } .header-badge-icons { padding-inline: 0; } } .menu-button:hover, a:hover { --dxp-s-button-color-focus: none; outline: none; .slds-media__body, .slds-show_large, .menu-trigger { color: var(--dxp-g-brand-1); } .slds-icon { fill: var(--dxp-g-brand-1); } } .menu-button:focus, a:focus { .slds-icon { outline: none; } } svg:focus { outline: none; } .header-badge-icons { height: auto !important; top: -0.438rem !important; width: auto; } button.drilldown-nav-hamburger-button { &:hover { --dxp-s-button-color-hover: var(--st-color-secondary); } &:focus { box-shadow: none; svg { fill: var(--dxp-g-brand-1)!important; } } } .slds-button { padding-inline-start: 0 !important; padding-inline-end: 0 !important; } .layout-header-mobile { .header-badge-icons { padding-top: 0!important; height: auto!important; top: 0.7rem!important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { .slds-p-top_small { padding-top: 0 !important; } .header-badge-icons { height: auto !important; top: 0.938rem !important; } } } commerce_builder-layout-header-simple { width: 100% !important; .logo-anchor { margin-bottom: 0; } svg:focus { outline: none; } .header-content { max-width: 112.5rem!important; --dxp-c-header-container-spacing-block-start: 2.75rem; --dxp-c-header-container-spacing-block-start-mobile: 2.75rem; .logo-anchor { pointer-events: none; } @media screen and (min-width: 2600px) { max-width: 114.375rem !important; } } @media screen and (min-width: 768px) and (max-width: 1024px) { img { width: 12.188rem !important; } } } .ds-header-with-contact { .component-wrapper-spacer { margin-bottom: 0!important; } a:hover { --dxp-s-link-text-decoration-hover: none; } } /* ====== Component Library ======= */ .st-btn-disabled { pointer-events: none; user-select: none; .slds-button { color: var(--st-color-gray); } .slds-button_brand, .slds-button.slds-button_brand { --com-c-button-primary-color-background: var(--st-color-gray); --com-c-button-primary-color-border: var(--st-color-gray); color: white; border: var(--st-color-gray) solid 1px; background: var(--st-color-gray); } .slds-button_outline-brand { border: var(--st-color-gray) solid 1px; } } .st-comp-library-checkbox_group .slds-form-element__control{ span:nth-child(3){ pointer-events: none; .slds-checkbox_faux { background: var(--st-color-gray); } } span:nth-child(4){ .slds-checkbox_faux { border: 1px solid var(--dxp-s-form-checkbox-color-background-checked); outline: 2px solid var(--dxp-s-form-element-color-border-focus); outline-offset: 2px; } } } /* ====== Card ==================== */ lightning-card { .slds-card__header { display: none; } .slds-button { --dxp-s-button-padding-inline-start: 0; } article.slds-card { box-shadow: none; border: none; } } c-ds_-construction-site-addr-form { .slds-button { --dxp-s-button-padding-inline-start: 1.25rem; } } @media screen and (max-width: 1440px) { .st-address-raster { .dxp-grid-item { width: 50% !important; } } } @media screen and (max-width: 1024px) { .st-address-raster{ .dxp-grid-item { width: 100% !important; } } } /* ===== Promotions ================= */ commerce_cart-apply-coupon { .slds-input, .slds-textarea, .slds-combobox__input { padding-block-start: .5rem; } } commerce-pill { .slds-pill { box-shadow: none; } .slds-button__icon, .slds-button_icon { fill: var(--dxp-g-brand); line-height: 0; } } commerce-promotion-details-popover { .slds-button { margin-inline-start: -1.25rem!important } } /* ===== RegisterCard ================ */ .st-product-details-tab { td { width: 50%; } } /* ===== Modal ======================= */ .slds-modal__content { p { margin-bottom: 1rem; } lightning-button { margin-right: 1rem; } } lightning-modal-base { /* Close Button */ lightning-button-icon.slds-modal__close { button { --dxp-s-button-padding-inline-end: 0; position: absolute; top: 3rem; z-index: 1; right: 1rem; &:focus { box-shadow: none; border: none; } } } /* Header mobile size */ [part="modal-header"] { height: 3.688rem; @media only screen and (max-width: 768px) { h1, .slds-modal__title, .slds-hyphenate{ font-size: 20px !important; hyphens: unset; } } } } lightning-tabset { lightning-tab-bar { ul { border: none!important; li { a { border-color: var(--st-color-gray)!important; } } } } lightning-tab { border: none!important; } lightning-button-menu { button { height: 2.5rem; } } } /* Date Picker Icon */ lightning-datepicker { lightning-button-icon[variant="bare"], .slds-input-has-icon .slds-input__icon { right: 1.75rem; top: 40%!important; } } /* ===== Searchbar ================== */ .st-searchbar { .input-container { --dxp-g-spacing-xlarge: 2.875rem; .input-wrapper.active { border: 1px solid transparent; box-shadow: 0 0 2px transparent; } button { padding-right: 0; } button.slds-button_brand:focus, button.slds-button_brand:hover, button.slds-button_brand:active { background-color: var(--st-color-gray-light)!important; border-color: var(--st-color-gray-light)!important; } label, input { font-size: 0.875rem; padding-inline: 0.938rem; } button[type="submit"]{ padding-right: 0.938rem!important; padding-left: .5rem; svg { height: 1.563rem; width: 1.563rem; } } } .input-search-button:focus { box-shadow: none !important; } } /* ===== Product Detail Page ====================== */ .quantity-list-action { display: grid !important; grid-template-columns: auto 1fr; grid-template-rows: 1fr 1fr; } div.quantity-list-action > commerce-action-button { grid-row-start: 1; button { transition: none !important; border: none !important; } button:hover, button:active, button:focus { background: none !important; border: none !important; transition: none !important; color: var(--st-color-secondary) !important; } } div.quantity-list-action > commerce_product_details-add-quantity { grid-row-start: 2; } div.quantity-list-action > commerce_builder-product-configure-button { grid-row-start: 2; } /* ===== Product Gallery ====================== */ .st-product_image_galery { display: flex; justify-content: center; div.hero-container { max-width: 70%; } } .thumbnail-carousel-image:focus, .thumbnail-carousel-image:hover, .thumbnail-carousel-image:active, .thumbnail-carousel-image[aria-selected=true]{ border: 1px solid var(--st-color-primary) !important; } commerce-thumbnail-gallery > div { justify-content: flex-start; } /* ===== Forms ============================== */ c-ds_contact-flow { flowruntime-flow { pre { font-family: "ST Montserrat Regular"; text-align: center; white-space: break-spaces; } .helptext__popup { font-family: "ST Montserrat Regular"; } } } flowruntime-flow { display: flex !important; align-items: center; .slds-accordion__summary { margin-bottom: 1rem !important; } .slds-card__header-title { font-size: var(--dxp-s-text-heading-large-font-size); } .flowruntimeBody { min-width: 18rem; max-width: 25rem; margin: 0 auto; } flowruntime-navigation-bar.slds-card__footer { border-top: none !important; margin-top: var(--dxp-g-spacing-large) !important; footer { display: flex; justify-content: center; flowruntime-progress-indicator { display: none; } .navigation-bar__right-align { margin: 0; } } } } /* =============================== */ /* ====== Cart =================== */ /* =============================== */ commerce_cart-summary { dl > div.item { align-items: flex-start; dd.summary-value { lightning-formatted-number { --com-c-cart-summary-total-font-weight: 400; } } } dl > div.item.total-price { display: none; } } .summary-label { .component-wrapper-spacer { --dxp-s-component-wrapper-spacer-size: 0; } .st-cart-subtotal-hint-text p { font-size: .7rem; padding-top: 0; } } commerce-quick-order-display { .add-entry-button { margin-left: -1.25rem!important; } .slds-button.slds-button_icon:hover { color: var(--dxp-g-brand-1); } .quantity { --dxp-g-spacing-xlarge: 0; } .slds-p-top_xx-large { display: flex; --dxp-g-spacing-xxlarge: 0; width: fit-content; } } commerce-quick-order-item { .slds-form-element { margin-bottom: 0; } } .flowruntimeBody { padding-top: var(--dxp-g-spacing-medium); padding-left: var(--dxp-g-spacing-medium); padding-bottom: var(--dxp-g-spacing-medium); padding-right: var(--dxp-g-spacing-medium); border: 1px solid var(--dxp-g-neutral-1); border-radius: .25rem; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1); } commerce_cart-header { .label-count { align-items: center !important; } .header-labels { align-items: center!important; } .clear-cart-section { justify-content: flex-end!important; } commerce-action-button { button { min-width: max-content; @media only screen and (max-width: 768px) { margin-right: -1.25rem; } } } } commerce_cart-items { article { padding: 1rem; border-bottom: 1px solid var(--st-color-gray); .li-layout, .small-layout { padding: 1.5rem; .container { gap: .5rem; @media only screen and (max-width: 768px) { grid-template-areas: "image name prices" "image unit delete" "image details-pills-qty details-pills-qty" "image details-pills-qty details-pills-qty"; .item-delete { justify-self: end!important; } } } .item-delete { text-decoration: none; button { margin-right: -1.25rem!important; @media only screen and (max-width: 1024px) { margin-left: -1.25rem; } } } .item_actions_quantity { @media only screen and (max-width: 1024px) { margin-left: -1.25rem; } } } } } commerce_cart-items .item-pills { display: none; } commerce_product_details-add-to-cart-button { padding-right: 1.25rem; button.slds-button_stretch { width: auto; } } c-ds_rename-cart { .saveButton { button { background-color: var(--st-color-primary); border: none; line-height: 1; &:hover { background-color: var(--st-color-secondary); } &:active { background-color: var(--st-color-primary); } &:focus { background-color: var(--st-color-primary); border: none; outline: none; box-shadow: none; } lightning-primitive-icon { color: white; } } } lightning-button-icon { button, .slds-button.slds-button_icon { color: var(--dxp-g-neutral-3); line-height: 1; &:focus { box-shadow: none; } } } } c-ds_cart-switcher { button { --dxp-s-button-padding-inline-start: 0; } } c-ds_-cart-selector { --dxp-s-component-wrapper-spacer-size: 0; } /* ========================================== */ /* ====== Forgot Password =================== */ /* ========================================== */ .st-forgot-password-section { @media only screen and (max-width: 768px) { .logo-anchor { justify-content: center !important; } } } /* ========================================== */ /* ====== Checkout ========================== */ /* ========================================== */ commerce_builder-layout-header-simple { .header-content { --dxp-c-header-container-spacing-inline-end: 0; --dxp-c-header-container-spacing-inline-start: 0; } } community_layout-section { --dxp-style-c-margin-right: 0!important; --dxp-style-c-margin-left: 0!important; margin-left: var(--dxp-style-c-margin-right); margin-right: var(--dxp-style-c-margin-left); @media only screen and (max-width: 1024px) { --dxp-style-c-margin-right-m: 0!important; --dxp-style-c-margin-left-m: 0!important; --dxp-s-section-content-spacing-inline-end-mobile: 2.2rem!important; --dxp-s-section-content-spacing-inline-start-mobile: .8rem!important; margin-left: var(--dxp-style-c-margin-right-m); margin-right: var(--dxp-style-c-margin-left-m); padding: 1rem var(--dxp-s-section-content-spacing-inline-start-mobile) 1rem var(--dxp-s-section-content-spacing-inline-end-mobile); } } c-ds_delivery-groups { button .slds-accordion__section, .slds-accordion__summary { --dxp-s-button-padding-inline-start: 0; } } commerce_builder-checkout-section { commerce-action-button.slds-float_right { float: left; } } /* ========================================== */ /* ====== My Account ======================== */ /* ========================================== */ #my-account-layout-content { max-width: 1920px; margin: 0 auto; display: flex; justify-content: space-between; div.content { padding-left: 0; padding-right: 0; } .navigation { width: 25rem; } } /* ===== My Account My Profile - OOTB Change buttons ======= */ commerce-my-account-profile-container .slds-button.slds-button_neutral { display: none; } commerce_data_provider-my-profile-data-provider, .card { border-color: var(--st-color-gray)!important; } /* ===== Multi Country Phone Field ======= */ commerce_unified_checkout-multi-country-phone-field { .slds-form-element__control { position: relative; } .slds-combobox__input, .slds-input { border: none; background-color: var(--st-color-gray-light); border-radius: 0; padding-block-start: 1.8rem; padding-block-end: 0.5rem; padding-left: 0.75rem; } .slds-form-element__label { position: absolute!important; z-index: 10; margin-inline-start: 0.75rem; margin-block-start: 0.313rem; font-size: 0.8rem; left: 0!important; } .slds-combobox__input:focus, .slds-input:focus { border: none; background-color: var(--st-color-gray-light) !important; border-radius: 0; box-shadow: none !important; outline: 1px solid var(--dxp-s-form-element-color-border-focus) !important; outline-offset: 2px; } .slds-combobox_container { position: relative; right: 0.063rem; top: 0 !important; button.slds-input:focus, .slds-combobox__input.slds-has-focus, .slds-combobox__input:focus, lightning-combobox::part(input-button):focus { border: none; box-shadow: none; outline: none; background-color: var(--st-color-gray-light); height: 4.125rem; } } .slds-combobox__form-element { background-color: var(--st-color-gray-light); border-radius: 0; } .slds-combobox__input-entity-icon { top: 50%; transform: translateY(-50%); } .slds-listbox { lightning-base-combobox-item:hover { box-shadow: none !important; } } /* Country code dropdown styling */ .slds-combobox { .slds-combobox__input { height: 4.125rem; font-family: ST Montserrat Regular !important; font-size: var(--dxp-s-form-element-text-font-size) !important; color: var(--st-color-black-gray); } } /* Phone number input field */ input[type="tel"] { border: none; background-color: var(--st-color-gray-light); border-radius: 0; padding-block-start: 1.8rem; padding-block-end: 0.5rem; padding-left: 0.75rem; height: 4.125rem; font-family: ST Montserrat Regular !important; font-size: var(--dxp-s-form-element-text-font-size) !important; color: var(--st-color-black-gray); } input[type="tel"]:focus { border: none; background-color: var(--st-color-gray-light) !important; border-radius: 0; box-shadow: none !important; outline: 1px solid var(--dxp-s-form-element-color-border-focus) !important; outline-offset: 2px; } } /* ===== Wishlist ======= */ commerce-wishlist { commerce-action-button { .slds-button_neutral { --dxp-s-tertiary-button-text-color: var(--st-color-primary)!important; --dxp-s-button-padding-inline-start: 0; } } .card-item commerce-action-button { width: 100%; } .slds-m-top--small, .slds-m-top_small { display: flex; flex-direction: column; margin-bottom: 2rem; justify-content: space-between; height: 10rem; } commerce-product-info { .product-name-container { white-space: normal!important; } .product-name:hover { color: var(--st-color-secondary)!important; } } } /* ===== Order History Detail ======= */ commerce_my_account-order-item-info { .order-line-item { figure { border: none !important; } } } /* ===== Search Product Card - Brand Logo ======= */ c-ds_search-product-card { .logoArea img { max-height: 3rem !important; width: auto; object-fit: contain; } } commerce_search-facet-item > lightning-input { width: auto; } /* Styling für "Appearance" - gleicher Style wie .menuItemSpan > .menuItemSpan */ /* Nur Elemente ohne .menuItemSpan sollen betroffen sein, um doppelte Unterstriche zu vermeiden */ .megaPopover > c-mega-navigation-list > div > .slds-grid > div > :first-child:not(:has(.menuItemSpan)) { border-bottom: 1px solid var(--overwrite-megaPopover-border-color); padding-bottom: 0.5rem; font-size: 0.875rem; font-family: FrutigerBold, sans-serif; } /* Sicherstellen, dass verschachtelte Elemente nicht betroffen sind */ .megaPopover > c-mega-navigation-list c-mega-navigation-list > div > .slds-grid > div > :first-child:not(:has(.menuItemSpan)) { border-bottom: none; font-family: var(--ccnavmenus-fontFamily, inherit); } .header-navigation { flex-grow: 1; dxp_layout-column.col-large-size_2-of-12, dxp_layout-column.col-large-size_6-of-12 { flex: none; display: flex; } dxp_layout-columns.st-side-nav { dxp_layout-column.col-large-size_6-of-12 { flex: none; flex-grow: 0!important; } } } /* ====== Meine Fälle / My Cases ===== */ .st-my-cases-list { tbody td div.slds-truncate, tbody th div.slds-truncate { overflow: visible; white-space: break-spaces; } } .st-my-cases-list a { pointer-events: none; color: var(--st-color-nearly-black) !important; } .st-my-cases-list a.slds-th__action { pointer-events: auto; } .st-my-cases-list th .slds-th__action:hover, .st-my-cases-list th .slds-th__action:focus { background: transparent; box-shadow: none; outline: none; } .st-my-cases-list lst-list-view-manager-button-bar { display: none; } .st-my-cases-list .record-list-header-title { margin-bottom: .5rem; } c-ds_my-cases-datatable { th a, a:link:not(.slds-button, .slds-dropdown__item > a) { color: var(--st-color-nearly-black); } tbody td div.slds-truncate { overflow: visible; white-space: break-spaces; overflow-wrap: break-word; } .fix_button-group-flexbox { gap: 1rem; } .slds-button.slds-button_first.slds-button_first, .slds-button.slds-button_outline-brand.slds-button_last { border-radius: .25rem; } } .st-category-banners { dxp_content_layout-block-content-region > div.main-content-container { padding-inline: 1rem; } } .st-ecq-modal { flowruntime-flow { & .flowruntimeBody { max-width: 100%; } } flowruntime-flow-screen-input { .slds-input, .slds-textarea, .slds-combobox__input { padding-block-start: .5rem!important; height: 2.5rem; padding-left: 1.5rem; } } flowruntime-picklist-input-lwc { .slds-select { height: 2.5rem; max-height: 2.5rem; padding-top: .5rem!important; padding-left: 1.5rem!important; } } .flowruntime-input.slds-form-element:has(flowruntime-help-text-lwc) { position: relative; div.flowruntime-input-label { width: 100%; position: relative; margin-top: 0; lightning-formatted-rich-text.slds-form-element__label.slds-rich-text-editor__output { position: absolute; } flowruntime-help-text-lwc { position: absolute; right: 0; button { padding-top: 1.5rem; top: 1rem; } } } lightning-input.slds-form-element { position: absolute; top: 0; margin-bottom: 0; } } flowruntime-screen-field.flowruntime-section-column.slds-col.slds-size_1-of-1.slds-medium-size_1-of-12 { margin: auto 0; flowruntime-lwc-field > div.container.slds-m-bottom_x-small { margin-bottom: 0; p { margin-bottom: 0; } } } flowruntime-screen-field:has(input[type="checkbox"]) { margin-top: 1rem; } } c-ds_-e-c-q-status-and-actions-panel { button { width: 100%; } } c-ds_proceed-to-checkout { button { width: 100%; } } commerce_builder-user-profile-menu.component-wrapper-spacer { margin-bottom: 0; } commerce-action-button, c-ds_common-button.c-ds_searchProductCard_ds_searchProductCard.callToActionButton.c-ds_commonButton_ds_commonButton-host { button.slds-button.slds-button_brand:hover:not(:disabled).c-ds_commonButton_ds_commonButton { border-color: var(--dxp-g-brand-1) !important; transition: none; } } /* =========================================================================================== */ /* ====== Note: Please leave this seciton at the bottom of this css ========================== */ /* ====== Save Point for