/* +++++ DEFAULT VALUES +++++ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap'); :root { /*PRODUCT WIDTHS*/ --itemCountXS: 1; --itemCountS: 2; --itemCountM: 3; --itemCountL: 4; --itemCountXL: 5; --compareSectionItemCountXS: 2; --compareSectionItemCountS: 3; --compareSectionItemCountM: 2; --compareSectionItemCountL: 3; --compareSectionItemCountXL: 4; --compareSectionItemCountXXL: 5; --compareSectionItemCountXXXL: 6; --gridSectionItemCountXS: 1; --gridSectionItemCountS: 1; --gridSectionItemCountM: 2; --gridSectionItemCountL: 3; --gridSectionItemCountXL: 4; --galleryRowGap: var(--gapL); --galleryColGap: var(--gapL); --_itemColGap: var(--gapL); --_itemRowGap: var(--gapL); --gridItemBG: #0000006b; --gridItemHoverBG: #ffffff73; /*TEXT*/ --fontFamily: 'Inter', sans-serif; --rootFontSize: 16px; --rootFontSizeMobile: 14px; --fontSizeIcon: 1rem; --fontSize: 1rem; --fontSizeH1: 2rem; --fontSizeH2: 1.8rem; --fontSizeH3: 1.5rem; --fontSizeH4: 1.3rem; --fontSizeH5: 1.15rem; --fontSizeH6: .9rem; --fontSizeSmall: .75rem; --fontSizeChip: .75rem; --fontSizeTable: .9rem; --fontWeight: 400; --fontWeightH1: 800; --fontWeightH2: 700; --fontWeightH3: 600; --fontWeightH4: 500; --fontWeightH5: 700; --fontWeightH6: 600; --fontWeightSmall: 400; --fontWeightError: 600; --fontWeightInfo: 600; --lineHeight: 1.25; --lineHeightH1: 1.1; --lineHeightH2: 1.1; --lineHeightH3: 1.2; --lineHeightH4: 1.2; --lineHeightH5: 1.3; --lineHeightH6: 1.3; --lineHeightSmall: 1.2; --letterSpacing: 0; --letterSpacingH1: 0; --letterSpacingH2: 0; --letterSpacingH3: 0; --letterSpacingH4: 0; --letterSpacingH5: 0; --letterSpacingH6: 0; --letterSpacingSmall: .0; --textTransform: none; --textTransformH1: none; --textTransformH2: none; --textTransformH3: none; --textTransformH4: none; --textTransformH5: none; --textTransformH6: none; --textTransformSmall: none; --linkDecoration: none; /*COLORS & SURFACES*/ --primary: #f18a00; --primaryVariant: hsl(from var(--primary) h s calc(l - 10)); --primaryLight: hsl(from var(--primary) h s calc(100 - calc(calc(100 - l) / 5))); --primaryFaded: hsl(from var(--primary) h s l / .1); --onPrimary: white; --accent: #4f51c7; --onAccent: white; --accentVariant: oklch(from var(--accent) calc(l * .8) calc(c - .1) calc(h + 20)); --accentLight: hsl(from var(--accent) h s calc(l + calc(100 - l) * 3 / 4)); --accentFaded: hsl(from var(--accent) h s calc(calc(l + 100) / 2) / .1); --mainBackground: #fbfbfb; --background: #fbfbfb; --onBackground: #45434f; --filtersBackground: #f2f2f2; --onFilters: #45434f; --surface: #191628; --onSurface: white; --surfaceVariant: oklch(from var(--surface) calc(l + 0.2) calc(c + 0.1) calc(h + 10)); --surfaceLight: hsl(from var(--surface) h s 88); --onSurfaceLight: hsl(from var(--onSurface) h s 10); --surfaceFaded: hsl(from var(--surface) h s l / .1); --tertiary: #2aa5ff; --onTertiary: white; --tertiaryOverlay: hsl(from var(--tertiary) h s l / .2); --searchBg: white; --inputBg: white; --inputBgReadOnly: #e9ecef; --buttonBg: var(--accentLight); --onButton: var(--onAccentLight, var(--onBackground)); --buttonBgActive: var(--accentVariant, var(--accent)); --onButtonActive: var(--onAccentVariant, var(--onAccent)); --buttonBgDisabled: var(--accentFaded); --onButtonDisabled: var(--onAccentFaded, var(--onAccent)); --buttonHoverBg: var(--accent); --buttonHoverClr: var(--onAccent); --inputPlaceholder: #404040; --inputBorder: 1px solid #ced4da; --inputActiveBorder: 1px solid var(--accent); --inputActiveShadow: none; --onInput: var(--onBackground); --onSurfaceDisabled: #ffffffa3; --onBackgroundDisabled: #000000a8; --onButtonDisabled: #000000a8; --opacityLight: .7; /*SYSTEM COLORS*/ --success: green; --sucessOverlay: green; --successFaded: #bdffbd; --onSuccess: white; --error: #ff0030; --errorVariant: #c40025; --errorText: firebrick; --errorFaded: hsl(from var(--error) h s calc(l + 35)); --errorOverlay: hsl(from var(--error) h s l / .2); --onError: white; --infoText: var(--onBackground); --linkColor: var(--onBackground); --linkHoverClr: #551A8B; /*NAVIGATION BAR*/ --navbarHeight: 100px; --userNavbarHeight: 40px; --navbarPadding: 12px; --userNavbarPadding: var(--gapXS); --userNavbarJustification: end; --mainNavWidth: 300px; --b2aHeight: 32px; --b2aPadding: 0; --b2aLinkColor: white; --b2aBackground: #019b68; --navDropdownPos: relative; --navMaxHeight: calc(100vh - var(--_navbarHeight) - var(--_userNavbarHeight)); --navColCountXS: 2; --navColCountS: 2; --navColCountM: 3; --navColCountL: 4; --navColCountXL: 5; --navColGap: .8rem; --navRowGap: .4rem; --navJustify: end; --lvl2Size: 0.9rem; --lvl3Size: 0.8rem; --showHome: block; --showLvl2: none; --showLvl3: none; --mainNavPosition: unset; --mainNavDisplay: flex; --mainNavTop: 0; --mainNavWrap: nowrap; --navDopdownPos: absolute; --overlayBG: #00000078; --navbarDropdownInset: 100% auto auto 0px; /*VIEW PAGE*/ --maxContainerW: 1400px; --maxNavContainerW: 1400px; --infoBoxFlexDir: column; --infoBoxRowGap: var(--gapS); --infoBoxColGap: var(--gapS); --infoBoxWrap: wrap; --infoBoxJustify: start; /*ACCOUNT*/ --accountShadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; /*GALLERY*/ --outerContainerShadow: 0; --controlsFlexDir: row; --productBackground: #fff; --galleryTitleBorder: 2px dotted var(--primary); --productBorder: none; --productRadius: var(--gapM); --productShadow: var(--shadowLvl3); --productHoverShadow: var(--shadowLvl1); --productInfoPosition: initial; --productNameLines: 2; --productNameDecoration: none; --productImagePadding: var(--gapM) var(--gapL) 0 var(--gapL); --productImageWidth: 100%; --productInfoRowGap: var(--gapM); --productInfoPadding: var(--gapS) var(--gapM); --productInfoDecoration: none; --productInteractPosition: relative; --ProductInteractGap: var(--gapXL); --productInteractPadding: var(--gapM); --productInteractBorderTop: var(--borderLight); --productAspectRatio: unset; --productBuyWidth: 100%; --nameDisplay: block; --productNameMaxLines: 3; --productNameBackgroundColor: transparent; --productNameBackdropFilter: none; /* product item content box */ --nameWidth: 100%; --specsWidth: 100%; --nameMaxWidth: 100%; --specsMaxWidth: 100%; --skuDisplay: block; --inventoryDisplay: block; --priceDisplay: flex; --specsDisplay: flex; --descriptionDisplay: block; --nameOrder: 0; --specsOrder: 1; --descriptionOrder: 2; --inventoryOrder: 3; --priceOrder: 4; --nameMargin: 0 0 auto 0; --skuMargin: 0; --inventoryMargin: var(--gapS) 0 0 0; --priceMargin: var(--gapXL) 0 var(--gapM) 0; --specsMargin: var(--gapM) 0 0 0; --descriptionMargin: 0; /* if content box is grid */ --infoBoxGridTemplateRows: auto 1fr auto; --infoBoxGridTemplateColumns: auto; --nameGridCol: span 2; --specsGridCol: 1; --inventoryGridCol: 2; --priceGridCol: span 2; --descriptionGridCol: span 2; --nameGridRow: 1; --skuGridRow: 2; --descriptionGridRow: 3; --specsGridRow: 3; --inventoryGridRow: 3; --priceGridRow: 6; /* product item interact box */ --priceFlexDir: row; --specsFlexDir: column; --priceGap: var(--gapM); --specsGap: var(--gapS); --togglerDisplay: none; --mainNavJustify: end; --navPosition: relative; --productHeight: unset; --productFlexDir: column; --productFlexWrap: nowrap; --inventoryMargin: 0; --sideControlsWidth: 240px; --sideControlsTogglerLeft: unset; --sideControlsTogglerHeight: 3rem; --sideNavWidth: 0; --categoryBorder: none; --categoryShadow: var(--productShadow); --categoryHoverShadow: var(--productHoverShadow); --categoryRadius: var(--gapM); --categoryPadding: 8px; --categoryAlign: center; /*PRODUCT PAGE*/ --minProductColWidth: 400px; --productNameOrder: 1; --productImageOrder: 2; --productInfoOrder: 3; --productDescOrder: var(--productInfoOrder); --productInteractOrder: var(--productInfoOrder); --productRelatedOrder: 6; --productUnitAlign: center; --productLeftDownloadBtnDisplay: block; --productRightDownloadBtnDisplay: none; --productBuySectionMinWidth: 300px; --productBuySectionMaxWidth: 400px; --productColGap: 3%; --productRowGap: var(--gapL); --productDisplayLarge: grid; --productImageGridColumn: 1; --productNameGridColumn: 2; --productImageGridRow: 1 / span 5; --maxBuySectionWidth: 100%; --maxProductImageWidth: 600px; --productRowTemplate: auto; --variantTableWidth: 100%; --variantRowHeight: 50px; --variantPadding: var(--gapM); --cardBorder: none; --cardBorderSpecial: 2px solid var(--primary); --priceLabelDisplay: none; /*BASKET*/ --basketRowHeight: 4.4rem; --checkoutRowHeight: 4rem; --basketRowPadding: var(--gapS); /* SPECIFICATION PAGE */ --specPageDisplay: grid; --maxSpecImageWidth: 400px; --maxSpecInfoWidth: 100%; --specColGap: var(--gapL); --specRowGap: var(--gapL); --specNameCol: 1 / span 2; --specNameRow: 1; --specImageCol: 1; --specImageRow: 2; --specDescriptionCol: 2; --specDescriptionRow: 2; --specDescriptionAlign: start; --specDescriptionPadding: var(--gapL) 0; --specProductsCol: 1 / span 2; --specProductsRow: 3; /*TRANSITIONS*/ --defaultTransitionTime: .3s; --defaultTransitionMethod: ease; --movementTransitionTime: 1s; --movementTransitionMethod: linear(0, 0.01 0.8%, 0.039 1.6%, 0.157 3.4%, 0.316 5.1%, 0.811 9.8%, 1.036 12.5%, 1.116 13.8%, 1.177 15.1%, 1.218 16.4%, 1.241 17.8%, 1.246 19.5%, 1.226 21.4%, 1.185 23.4%, 1.057 28.3%, 1.001 30.9%, 0.96 33.7%, 0.941 36.6%, 0.944 40.3%, 0.999 49.6%, 1.014 55.1%, 0.997 73.6%, 1); --mainNavTransition: opacity var(--defaultTransitionTime) var(--defaultTransitionMethod); --linkTransition: color var(--defaultTransitionTime) var(--defaultTransitionMethod), background-color var(--defaultTransitionTime) var(--defaultTransitionMethod), border-color var(--defaultTransitionTime) var(--defaultTransitionMethod); --productTransition: box-shadow var(--defaultTransitionTime) var(--defaultTransitionMethod), border-color var(--defaultTransitionTime) var(--defaultTransitionMethod); --buttonTransition: top var(--movementTransitionTime) var(--movementTransitionMethod), left var(--defaultTransitionTime) var(--defaultTransitionMethod), box-shadow var(--movementTransitionTime) var(--movementTransitionMethod), color var(--defaultTransitionTime) var(--defaultTransitionMethod), background-color var(--defaultTransitionTime) var(--defaultTransitionMethod), gap var(--defaultTransitionTime) var(--defaultTransitionMethod), border-color var(--defaultTransitionTime) var(--defaultTransitionMethod), box-shadow var(--movementTransitionTime) var(--movementTransitionMethod), opacity var(--defaultTransitionTime) var(--defaultTransitionMethod); /*DROPDONWS*/ --dropdownRowGap: .75rem; --dropdownBorderRadius: 0 0 var(--gapS) var(--gapS); --dropdownLeft: auto; --dropdownRight: 0; --dropdownBeforeWidth: 100%; --dropdownBeforeHeight: 2PX; --dropdownBeforeWebkitScale: scale(1, 1); --dropdownBeforeScale: scaleX(1); --dropdownBeforeInitWebkitScale: scale(0, 1); --dropdownBeforeInitScale: scaleX(0); --dropdownBeforeOrigin: left center; /*FOOTER*/ --footerPadding: 20px 10px; --footerBorder: 2px solid var(--primary); --footerShadow: 0 0 10px 0px rgba(0, 0, 0, 0.4); --footerMinHeight: 160px; --footerInfoOrder: 0; --footerContactOrder: 1; --footerTermsOrder: 2; --footerMediaOrder: 3; /*MISC*/ --buttonRadius: var(--gapS); --buttonPaddingBlock: var(--gapDS); --buttonPaddingInline: var(--gapM); --buttonPadding: var(--buttonPaddingBlock) var(--buttonPaddingInline); --cardBackground: var(--surfaceLight); --onCard: var(--onSurfaceLight, var(--onSurface)); --cardBorderRadius: var(--gapML); --cardPadding: var(--gapL); --popupBorderRadius: var(--gapS); --inputWidth: 3ch; --chipBorderRadius: var(--gapL); --chipInset: calc(var(--gapM) * -2/3) auto auto calc(var(--gapM) * -1); --chipInsetHover: calc(var(--gapS) * -.1/3) auto auto calc(var(--gapM) * -.5); --chipShadow: var(--shadowLvl3); --chipShadowHover: var(--shadowLvl1); --chipPadding: var(--gapDS) var(--gapDML); --interactHeight: var(--amountInputHeight, 2rem); --amountInputWidth: 2rem; --pageMargin: var(--gapL); --borderLight: 1px solid var(--accentLight); --iconWidth: 1.5rem; --iconPadding: var(--gapL); --formWidth: 400px; --formAlign: start; /*layout buttons - change content form Font Awesome icons ::before to change icon*/ --layoutIconContent1: "\f00a"; --layoutIconContent2: "\f03a"; --layoutIconContent3: "\f009"; /*PRINT*/ --PRINT-sectionBorder: 2px solid black; --PRINT-sectionMargin: 4mm; --PRINT-navbarBG: var(--primary); --PRINT-footerBG: var(--surface); /*margins*/ --PRINT-pageMargin: 4mm; --PRINT-headerMargin: 0; /*sizes*/ --PRINT-titleSize: 18pt; --PRINT-headerSize: 16pt; --PRINT-SUBheaderSize: 14pt; --PRINT-fontSize: 10pt; /*alignments*/ --PRINT-logoJustification: start; --PRINT-headerJustification: start; --PRINT-imaageAlignment: center; /*footer*/ --PRINT-footerDisplay: flex; --PRINT-footerPrintHeight: var(--footerMinHeight); --PRINT-footerJustification: space-around; --PRINT-footerAlignment: center; --PRINT-footerCompanyDisplay: block; --PRINT-footerContactDisplay: block; --PRINT-navbarHeight: 100px; } @media (prefers-reduced-motion) { :root { --defaultTransitionTime: 0s; --movementTransitionTime: 0s; } } /* ----- DEFAULT VALUES ----- */ /* +++++ MEDIA SPECIFIC VARS +++++ */ /* - Default / Small Pnone - */ :root { --_itemCount: var(--itemCountXS); --_gridItemCount: var(--gridItemCountXS, var(--itemCountXS)); --_catItemCount: var(--catItemCountXS, var(--itemCountXS)); --_navColCount: var(--navColCountXS); --_gridSectionItemCount: var(--gridSectionItemCountXS); --_compareSectionItemCount: var(--compareSectionItemCountXS); --_mainPadding: var(--sideNavWidth); --_navLinkHeight: fit-content; --_navFlexWrap: wrap; --_navFlexDirection: column; --_navShadow: none; --_navLinkSize: var(--fontSizeNav, var(--fontSizeH5)); --_navLinkWeight: var(--fontWeightNav, var(--fontWeightH4)); --_navLinkTransform: var(--textTransformNavLvl0, none); --_navLinkSpacing: var(--letterSpacingNav); --_sideControlsTogglerDisplay: none; --_productDisplay: var(--productDisplaySmall, var(--productDisplayLarge)); --_fontSizeProductInfo: var(--fontSizeProductInfo, var(--fontSize)); --_fontWeightProductInfo: var(--fontWeightProductInfo, var(--fontWeight)); --_textTransformProductInfo: var(--textTransformProductInfo, var(--textTransform)); --_productColTemplate: 1fr; --_productRowTemplate: auto; --_productImageGridColumn: 1; --_productNameGridColumn: 1; --_productLoginMargin: auto; --_specColTemplate: 1fr; --_footerHeight: 0px; --_specNameCol: 1; --_specNameRow: 1; --_specImageCol: 1; --_specImageRow: 2; --_specDescriptionCol: 1; --_specDescriptionRow: 3; --_specProductsCol: 1; --_specProductsRow: 4; } /* Desktop Devices */ .mobileFalse { --_navbarHeight: var(--navbarHeight); --_navbarPadding: var(--navbarPadding); --_userNavbarHeight: var(--userNavbarHeight); --_userNavbarPadding: var(--userNavbarPadding); &.miniNav { --_navbarHeight: var(--navbarHeightMini, var(--navbarHeight)); --_navbarPadding: var(--navbarPaddingMini, var(--navbarPadding)); --_userNavbarHeight: var(--userNavbarHeightMini, var(--userNavbarHeight)); --_userNavbarPadding: var(--userNavbarPaddingMini, var(--userNavbarPadding)); } } /* - Touch Devices - */ .mobileTrue { --_rootFontSize: var(--rootFontSizeMobile, var(--rootFontSize)); --_navbarHeight: var(--navbarHeightMobile, var(--navbarHeight)); --_navbarPadding: var(--navbarPaddingMobile, var(--navbarPadding)); --_userNavbarHeight: var(--userNavbarHeightMobile, var(--userNavbarHeight)); --_userNavbarPadding: var(--userNavbarPaddingMobile, var(--userNavbarPadding)); &.miniNav { --_navbarHeight: var(--navbarHeightMobileMini, var(--navbarHeightMobile, var(--navbarHeight))); --_navbarPadding: var(--navbarPaddingMobileMini, var(--navbarPaddingMobile, var(--navbarPadding))); --_userNavbarHeight: var(--userNavbarHeightMobileMini, var(--userNavbarHeightMobile, var(--userNavbarHeight))); --_userNavbarPadding: var(--userNavbarPaddingMobileMini, var(--userNavbarPaddingMobile, var(--userNavbarPadding))); } } /* - Small / Large Phone - */ @media(min-width: 460px) { :root { --_itemCount: var(--itemCountS); --_gridItemCount: var(--gridItemCountS, var(--itemCountS)); --_catItemCount: var(--catItemCountS, var(--itemCountS)); --_gridSectionItemCount: var(--gridSectionItemCountS); --_compareSectionItemCount: var(--compareSectionItemCountS); --_navColCount: var(--navColCountS); } } /* - Medium / Tablet - */ @media(min-width: 720px) { :root { --_itemCount: var(--itemCountM); --_gridItemCount: var(--gridItemCountM, var(--itemCountM)); --_catItemCount: var(--catItemCountM, var(--itemCountM)); --_gridSectionItemCount: var(--gridSectionItemCountM); --_compareSectionItemCount: var(--compareSectionItemCountM); --_navColCount: var(--navColCountM); --_productDisplay: var(--productDisplayLarge); --_productColTemplate: minmax(auto, var(--maxProductImageWidth)) minmax(auto, var(--maxBuySectionWidth)); --_productRowTemplate: var(--productRowTemplate); --_productImageGridColumn: var(--productImageGridColumn); --_productNameGridColumn: var(--productNameGridColumn); --_productImageGridRow: var(--productImageGridRow); --_specColTemplate: minmax(auto, var(--maxSpecImageWidth)) minmax(auto, var(--maxSpecInfoWidth)); --_productLoginMargin: 0; --_specNameCol: var(--specNameCol); --_specNameRow: var(--specNameRow); --_specImageCol: var(--specImageCol); --_specImageRow: var(--specImageRow); --_specDescriptionCol: var(--specDescriptionCol); --_specDescriptionRow: var(--specDescriptionRow); --_specProductsCol: var(--specProductsCol); --_specProductsRow: var(--specProductsRow); --buySectionJustify: start; } } /* - Large / Laptop- */ @media(min-width: 1024px) { :root { --_itemCount: var(--itemCountL); --_gridItemCount: var(--gridItemCountL, var(--itemCountL)); --_catItemCount: var(--catItemCountL, var(--itemCountL)); --_gridSectionItemCount: var(--gridSectionItemCountL); --_compareSectionItemCount: var(--compareSectionItemCountL); --_navColCount: var(--navColCountL); --dropdownLeft: 0; --dropdownRight: auto; --basketRowHeight: 6.6rem; } } /* - Extra Large / Desktop - */ @media(min-width: 1366px) { :root { --_itemCount: var(--itemCountXL); --_gridItemCount: var(--gridItemCountXL, var(--itemCountXL)); --_catItemCount: var(--catItemCountXL, var(--itemCountXL)); --_gridSectionItemCount: var(--gridSectionItemCountXL); --_compareSectionItemCount: var(--compareSectionItemCountXL); --_navColCount: var(--navColCountXL); } } @media(min-width: 1600px) { :root { --_gridSectionItemCount: var(--gridSectionItemCountXXL, var(--gridSectionItemCountXL)); --_compareSectionItemCount: var(--compareSectionItemCountXXL); } } @media(min-width: 1900px) { :root { --_compareSectionItemCount: var(--compareSectionItemCountXXXL); } } .B2ATrue { --_b2aHeight: var(--b2aHeight); } /* icons size */ .fas { font-size: var(--fontSizeIcon) !important; &.fa-2x { font-size: calc(2 * var(--fontSizeIcon)) !important; } } /* - display main nav/desktop- */ .sideControls.sideFilterCollapse { --_sideControlsTogglerDisplay: block; } .sideControls:not(.sideFilterCollapse) { --_mainPadding: var(--sideControlsWidth); --_sideControlsLeft: 0px; } .sidebarEnabled:not(.collapseMainNav) { --mainNavDisplay: none; } .sidebarEnabled.collapseMainNav nav { --_navZ: 1001; } /* ----- MEDIA SPECIFIC VARS ----- */ /* +++++ DYNAMIC VARS +++++ */ /* -- Root -- */ :root { --_rootFontSize: var(--rootFontSize); --_navTransition: all var(--defaultTransitionTime) var(--defaultTransitionMethod); --_logoTransition: height var(--defaultTransitionTime) var(--defaultTransitionMethod); --_navColW: calc(100% / var(--_navColCount)); --_galleryColGap: var(--galleryColGap); --_galleryRowGap: var(--galleryRowGap); --_maxContainerW: min(var(--maxContainerW), calc(100% - calc(2 * var(--pageMargin)))); --_maxNavContainerW: min(var(--maxNavContainerW), calc(100% - calc(2 * var(--pageMargin)))); --_sideControlsLeft: calc(-1 * var(--sideControlsWidth)); --_navDisplay: flex; --_b2aHeight: 0px; --_itemW: calc((100% - ((var(--_itemCount) - 1) * var(--_galleryColGap))) / var(--_itemCount) - .01px); --footerBg: var(--surface); --footerClr: var(--onSurface); --_hoverCLR: currentColor; --_hoverBG: initial; --_disabledCLR: currentColor; --_disabledBG: initial; --_dropdownBorderCLR: var(--accent); --_dropdownBorderWidth: 0; --_navFilter: none; --_navTextShadow: var(--navbarTextShadow, none); --_formWidth: var(--formWidth); } h1 { font-size: var(--fontSizeH1); font-weight: var(--fontWeightH1); line-height: var(--lineHeightH1); letter-spacing: var(--letterSpacingH1); text-transform: var(--textTransformH1); font-family: var(--fontFamilyH1, var(--fontFamily)); } h2 { font-size: var(--fontSizeH2); font-weight: var(--fontWeightH2); line-height: var(--lineHeightH2); letter-spacing: var(--letterSpacingH2); text-transform: var(--textTransformH2); font-family: var(--fontFamilyH2, var(--fontFamily)); } h3 { font-size: var(--fontSizeH3); font-weight: var(--fontWeightH3); line-height: var(--lineHeightH3); letter-spacing: var(--letterSpacingH3); text-transform: var(--textTransformH3); font-family: var(--fontFamilyH3, var(--fontFamily)); } h4 { font-size: var(--fontSizeH4); font-weight: var(--fontWeightH4); line-height: var(--lineHeightH4); letter-spacing: var(--letterSpacingH4); text-transform: var(--textTransformH4); font-family: var(--fontFamilyH4, var(--fontFamily)); } h5 { font-size: var(--fontSizeH5); font-weight: var(--fontWeightH5); line-height: var(--lineHeightH5); letter-spacing: var(--letterSpacingH5); text-transform: var(--textTransformH5); font-family: var(--fontFamilyH5, var(--fontFamily)); } h6 { font-size: var(--fontSizeH6); font-weight: var(--fontWeightH6); line-height: var(--lineHeightH6); letter-spacing: var(--letterSpacingH6); text-transform: var(--textTransformH6); font-family: var(--fontFamilyH6, var(--fontFamily)); } small { font-size: var(--fontSizeSmall); font-weight: var(--fontWeightSmall); line-height: var(--lineHeightSmall); letter-spacing: var(--letterSpacingSmall); text-transform: var(--textTransformSmall); font-family: var(--fontFamilySmall, var(--fontFamily)); opacity: var(--opacityLight); } a, i, i::after, i::before, i span, dialog::before, div, .InfoBox li div, b { transition: var(--linkTransition); } a { color: var(--linkColor, var(--onBackground)); --_hoverCLR: var(--linkHoverClr, var(--primary)); text-decoration: var(--linkDecoration); &:hover { text-decoration: var(--linkDecorationHover); color: var(--linkHoverClr); } } .mobileFalse { & a, button, .ProductItem, [onclick], .dropdown-item, .input-group-text, label, select, [data-href] { cursor: pointer; &:is(:hover, :focus, .loading, .showDropdown) { color: var(--_hoverCLR) !important; &:not(select) { background-color: var(--_hoverBG) !important; & *:not(a, .input-group-text, button, i) { --_hoverBG: transparent; } } & :is(button, [onclick]) :is(i a, span) { color: unset !important; } } } } .mobileTrue { & i, a, button, .basketRowLine, .ProductItem, [onclick], .dropdown-item, .input-group-text, label, select, [data-href] { cursor: pointer; &:is(:active, .loading, :focus) { color: var(--_hoverCLR) !important; box-shadow: inherit; &:not(select) { background-color: var(--_hoverBG) !important; & *:not(a, .input-group-text, button, i) { --_hoverBG: transparent; } } & :is(button, [onclick]) :is(i a, span) { color: unset !important; } } } } .pageViewLogin { --_formWidth: var(--loginFormWidth, var(--formWidth)); --_formAlign: var(--loginFormAlign, var(--formAlign)); } .pageViewResetPassword { --_formWidth: var(--resetPasswordFormWidth, var(--loginFormWidth, var(--formWidth))); --_formAlign: var(--resetPasswordFormAlign, var(--loginFormAlign, var(--formAlign))); } .pageViewNewCreateCustomer { --_formWidth: var(--createCustomerFormWidth, var(--loginFormWidth, var(--formWidth))); --_formAlign: var(--createCustomerFormAlign, var(--loginFormAlign, var(--formAlign))); } .pageViewCheckout { --_formWidth: 100%; } li { list-style: none; } /* -- Navigation -- */ .displayMainNav { --mainNavHeight: var(--_navHeight); --_navFlexWrap: nowrap; &:not(.sidebarEnabled) nav>* { --_navLinkHeight: var(--_navHeight); } } :is(nav, .account-navbar) ul { list-style: none; } #primary_nav { --navPosition: var(--primaryNavPosition, fixed); } .showSideControls.sideFilterCollapse { --_sideControlsLeft: 0px; --_sideControlsTogglerDisplay: block; } /* ----- DYNAMIC VARS ----- */ /* ***** STATIC VARS ***** */ :root { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-smooth: never; } .collapseMainNav { --togglerDisplay: block; --mainNavTop: var(--_navbarHeight); --mainNavPosition: absolute; --mainNavHeight: fit-content; --mainNavJustify: start; --_mainPadding: 0; & #main_nav { width: var(--mainNavWidth) !important; &.collapse-horizontal { --_dropdownBG: transparent; --dropdownBeforeWidth: 2px; --dropdownBeforeHeight: 100%; --dropdownBeforeScale: scaleY(1); --dropdownBeforeInitWebkitScale: scale(1, 0); --dropdownBeforeInitScale: scaleY(0); --dropdownBeforeOrigin: top center; --mainNavJustify: start; --mainNavHeight: calc(100vh - var(--_navHeight)); --mainNavDirection: column; --mainNavWrap: nowrap; --navMaxHeight: unset; --navDopdownPos: relative; --dropdownBorderRadius: 0; --navbarDropdownInset: 0; } &:not(.collapse-horizontal) { --mainNavWidth: 100%; --mainNavDirection: row; --navDropdownPos: absolute; --mainNavWrap: wrap; --_navPadding: 0; } } } .sideControls.sideFilterCollapse { --sideControlsTogglerLeft: calc(var(--sideControlsWidth) + var(--_sideControlsLeft)); & .breadcrumbSection { padding-inline-start: calc(var(--sideControlsTogglerHeight) + 2 * var(--gapL)); & ol { height: calc(var(--sideControlsTogglerHeight) + 2 * var(--gapL)); } } } #B2A { height: var(--_b2aHeight); background-color: var(--b2aBackground); --_navLinksCLR: var(--b2aLinkColor); --_navPadding: var(--b2aPadding); display: flex; position: fixed; top: 0; z-index: 10002; @media(max-width: 500px) { & .salespersonSwitch, .salespersonLogout { & span { display: none; } } } } .container { max-width: unset; &:not(.navbar-nav, :has(> .ulLoop_1)), :is(.pageViewCategory, .pageViewSearch) .OuterContainer { flex-direction: column; padding: 0; margin-inline: auto; max-width: var(--_maxContainerW); } } :is(.navbar, .user-navbar, .mainFooterSection, #B2A, .account-navbar)>.container { display: flex; flex-direction: row; height: 100%; align-content: center; } .pageViewSpecificationCategory { --descriptionMargin: auto 0 0 0; --skuMargin: 0; --inventoryMargin: 0; --priceMargin: 0; } /* ----- STATIC VARS ----- */ :root { &:has(.mobileTrue) { --_rootFontSize: var(--rootFontSizeMobile, var(--rootFontSize)); } font-size: var(--_rootFontSize); font-weight: var(--_fontWeight); line-height: var(--_lineHeight); overflow-x: clip; } * { font-family: var(--fontFamily); font-size: var(--fontSize); font-weight: var(--fontWeight); line-height: var(--lineHeight); letter-spacing: var(--letterSpacing); text-transform: var(--textTransform); padding: 0; margin: 0; } .text-error { color: var(--errorText); font-weight: var(--fontWeightError); ; } .text-info { color: var(--infotext) !important; font-weight: var(--fontWeightInfo); } body { background: var(--mainBackground); color: var(--onBackground); --_topHeight: calc(var(--_navbarHeight) + var(--_userNavbarHeight) + var(--_b2aHeight)); } main { opacity: 0; display: flex; flex-direction: column; padding-left: var(--_mainPadding); padding-top: var(--_topHeight); transition: opacity .05s ease-out, padding-top var(--defaultTransitionTime) var(--defaultTransitionMethod); min-height: 100vh; } .pageViewPage main { opacity: 1; } :is(.displayMainNav, .collapseMainNav) main { opacity: 1; } main .container:not(.OuterContainer) { padding: 0; margin-inline: auto; display: flex; max-height: 100%; width: var(--_maxContainerW); } .headerContainer { display: flex; justify-content: space-between; } div.line { display: flex; justify-content: space-between; } ul.container { gap: 0 1rem; } #cookieNotice { position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--surfaceLight); padding: 1rem; z-index: 9999; } .viewSection { max-width: 100%; } .DynamicallyInserted { height: 100%; width: 100%; object-fit: cover; } /*CMS PAGES*/ .heroSection { position: relative; height: 100dvh; overflow: hidden; } .floating.heroSection { position: absolute; top: 0; height: 100dvh; width: 100%; } .heroSection img { object-fit: cover; width: 100%; height: 100%; object-position: top; } /*NAVIGATION BAR*/ nav { display: none; box-sizing: border-box; padding-inline: var(--_navPadding); width: 100%; & a { --linkColor: var(--_navLinksCLR) !important; --_hoverCLR: var(--_navbarHoverCLR, var(--_navLinksCLR)); transition: var(--linkTransition); text-decoration: var(--linkDecorationNav, none); } } .navbar, .side-navbar { flex-wrap: var(--_navFlexWrap); } .navbar>.container { z-index: 10; } .logoSection { padding-block: var(--_navPadding); transition: var(--_navTransition); & img { transition: var(--_logoTransition); height: calc(var(--_navHeight) - calc(var(--_navPadding) * 2)); } } .navbar-nav { display: flex; flex-wrap: var(--mainNavWrap); flex-direction: var(--mainNavDirection); justify-content: var(--mainNavJustify) !important; } #main_nav:not(.collapsing) { transition: top var(--defaultTransitionTime) var(--defaultTransitionMethod), var(--mainNavTransition); } #main_nav { display: var(--mainNavDisplay) !important; position: var(--mainNavPosition); height: var(--mainNavHeight); top: var(--mainNavTop); /*dont change flex value - used for width calculation*/ flex: 0; left: 0; opacity: 0; } body:not(.bodyReady) { --defaultTransitionTime: 0s; --movementTransitionTime: 0s; } .bodyReady { & #main_nav, .galleryControls { opacity: 1; } } body:not(.collapseMainNav) #main_nav>.container { flex-direction: row; } .collapseMainNav #main_nav { background-color: var(--_navBG); align-items: start; overflow: auto; --_maxContainerW: 100%; } #main_nav.horizontal-right { right: 0; left: unset; } nav { --_maxContainerW: var(--_maxNavContainerW); --_dropdownBG: var(--surfaceVariant); --_dropdownCLR: var(--onSurfaceVariant, var(--onSurface)); --_navZ: 1000; } .user-navbar { --_navHeight: var(--_userNavbarHeight); --_navPadding: var(--_userNavbarPadding); --_navBG: var(--primary); --_navLinksCLR: var(--onPrimary); --_hoverCLR: var(--_userNavbarHoverCLR, var(--_navLinksCLR)); --_navFilter: blur(12px); --_navZ: 999; --_navTextShadow: var(--userNavbarTextShadow, 2px 2px 4px #00000045); --navPosition: var(--userNavbarPosition, relative); --_navLinkSize: var(--fontSizeUserNav, var(--fontSize)); width: 100%; & .container { justify-content: var(--userNavbarJustification); } } .navbar { --_navHeight: var(--_navbarHeight); --_navPadding: var(--_navbarPadding); --_navLinksCLR: var(--onSurface); --_navBG: var(--surface); --navPosition: var(--navbarPosition, relative); width: 100%; } .side-navbar { width: var(--sideNavWidth); --_navBG: var(--surface); top: var(--_topHeight); --_navHeight: calc(100vh - var(--_topHeight)); position: absolute; left: 0; transition: top var(--defaultTransitionTime) var(--defaultTransitionMethod), height var(--defaultTransitionTime) var(--defaultTransitionMethod); --_navLinksCLR: var(--onSurface); & .dropdown-menu { position: relative; overscroll-behavior: none; } &>.container { height: calc(100dvh - var(--_topHeight)); overflow: auto; max-width: vatr(--sideNavWidth); & ul { flex-direction: column; } } } .user-navbar, #B2A { &>.container { gap: var(--gapL); height: 100%; align-items: center; } } #primary_nav { z-index: var(--_navZ); position: var(--navPosition); display: flex; flex-direction: var(--_navFlexDirection); max-width: 100vw; margin-top: var(--_b2aHeight); & .navbar, .user-navbar, .side-navbar { color: var(--_navLinksCLR) !important; display: var(--_navDisplay); z-index: var(--_navZ); height: var(--_navHeight); position: var(--navPosition); box-shadow: var(--_navShadow); padding: 0; overflow: visible; background: var(--_navBG); backdrop-filter: var(--_navFilter); transition: var(--_navTransition); text-shadow: var(--_navTextShadow); & #main_nav { & a { font-size: var(--_navLinkSize); font-weight: var(--_navLinkWeight); text-transform: var(--_navLinkTransform); letter-spacing: var(--_navLinkSpacing); &:hover, &:focus { text-decoration: var(--linkDecorationNavHover, var(--linkDecorationNav, none)); } } } } } .nav-item { position: var(--navItemPosition, relative) } #overlay { overflow: hidden; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; transition: background-color .25s ease-out; z-index: 999; max-width: 0; background: transparent; } .mobileTrue:has(#main_nav.collapse-horizontal.show) { overflow: hidden; #overlay { display: block; max-width: 100vw; background: var(--overlayBG); } } .displayMainNav:has(.languageFlags) #main_nav { padding-inline-end: max(calc(var(--_maxContainerW) - 100vw + 4rem), 0px); } .collapseMainNav :is(.collapse:not(.show), .side-navbar) { --mainNavDisplay: none; display: none !important; } .collapseMainNav nav .dropdown-menu { position: relative; } .collapseMainNav #main_nav { & .container { & .nav-item { width: var(--mainNavWidth); padding-inline: var(--navColGap); & .nav-link { height: fit-content; padding: var(--navRowGap); width: 100%; } & .dropdown-menu { top: unset !important; border-radius: 0; } } } } .collapseMainNav .dropdown-menu.show { max-height: unset !important; } .mobileFalse.hoverNav .nav-item:hover .dropdown-menu { max-height: 100vh !important; } .collapseMainNav .collapse-horizontal { transition: width var(--defaultTransitionTime) var(--defaultTransitionMethod), left var(--defaultTransitionTime) var(--defaultTransitionMethod), var(--mainNavTransition) !important; } .displayMainNav #main_nav:not(.show) { display: flex; } .displayMainNav .dropdown-menu { position: absolute; } .nav-link { color: var(--linkColor); display: flex; align-items: center; height: var(--_navLinkHeight); padding-block: var(--_navPadding); width: max-content; transition: var(--_navTransition); } .navbar .dropdown-menu { padding: 0; transition: top .25s; position: var(--navDopdownPos); left: var(--dropdownLeft); right: var(--dropdownRight); display: block !important; max-height: 0 !important; overflow: auto; } .displayMainNav { & .navbar-nav { padding-inline: var(--navColGap); } & .nav-item { & .dropdown-menu { margin: var(--navbarDropdownMargin, 0); z-index: 997; box-shadow: var(--productShadow); border-style: solid; border-color: var(--dropdownBorderColor); border-width: var(--_dropdownBorderWidth); border-radius: var(--navbarDropdownBorderRadius, var(--dropdownBorderRadius)); inset: var(--navbarDropdownInset) !important; &::before { content: ""; position: absolute; bottom: 100%; left: 0; top: 0; background: var(--_dropdownBorderCLR); width: var(--dropdownBeforeWidth); height: var(--dropdownBeforeHeight); -webkit-transform: var(--dropdownBeforeInitWebkitScale); transform: var(--dropdownBeforeInitScale); -webkit-transform-origin: var(--dropdownBeforeOrigin); transform-origin: var(--dropdownBeforeOrigin); -webkit-transition: -webkit-transform var(--defaultTransitionTime) var(--defaultTransitionMethod); transition: -webkit-transform var(--defaultTransitionTime) var(--defaultTransitionMethod); transition: transform var(--defaultTransitionTime) var(--defaultTransitionMethod); transition: transform var(--defaultTransitionTime) var(--defaultTransitionMethod), -webkit-transform var(--defaultTransitionTime) var(--defaultTransitionMethod); } } &:last-child .dropdown-menu { inset: var(--navbarDropdownInsetLast, var(--navbarDropdownInset)) !important; } } & .dropdown-menu.show { max-height: calc(100vh - var(--_topHeight) - 1rem) !important; z-index: 9999; } & .dropdown-menu:is([data-popper-placement], [data-bs-popper="none"])::before { -webkit-transform: var(--dropdownBeforeWebkitScale); transform: var(--dropdownBeforeScale); } } .collapseMainNav { & nav .dropdown-menu>.container::before { content: ""; position: absolute; bottom: 100%; left: 0; top: 0; background: var(--_dropdownBorderCLR); width: var(--dropdownBeforeWidth); height: var(--dropdownBeforeHeight); -webkit-transform: var(--dropdownBeforeInitWebkitScale); transform: var(--dropdownBeforeInitScale); -webkit-transform-origin: var(--dropdownBeforeOrigin); transform-origin: var(--dropdownBeforeOrigin); -webkit-transition: -webkit-transform var(--defaultTransitionTime) var(--defaultTransitionMethod); transition: -webkit-transform var(--defaultTransitionTime) var(--defaultTransitionMethod); transition: transform var(--defaultTransitionTime) var(--defaultTransitionMethod); transition: transform var(--defaultTransitionTime) var(--defaultTransitionMethod), -webkit-transform var(--defaultTransitionTime) var(--defaultTransitionMethod); } & .dropdown-menu:is([data-popper-placement], [data-bs-popper="none"])>.container::before { -webkit-transform: var(--dropdownBeforeWebkitScale); transform: var(--dropdownBeforeScale); } } .navbar-toggler { display: var(--togglerDisplay) !important; } .navbar-toggler:focus { border: none; box-shadow: none; } :is(nav .dropdown-menu, .side-navbar.container) a { width: 100%; display: inline-block; } nav .dropdown-menu { border: none; overflow: auto; max-height: var(--navMaxHeight); background-color: var(--_dropdownBG); overscroll-behavior: none; padding: 0; & a { --_navLinksCLR: var(--_dropdownCLR); --_hoverCLR: var(--_dropdownHoverCLR, var(--_dropdownCLR)); } & .container { padding: calc(var(--navRowGap) * 2) calc(var(--navColGap) / 2) var(--navRowGap) calc(var(--navColGap) / 2); } } [class*="ulLoop"] { padding: 0; flex-direction: var(--loopFlexDir, column); justify-content: var(--loopJustify); display: flex; min-width: 100%; flex-wrap: wrap; & .level1, .level0 { padding-inline: calc(var(--navColGap) * 3 / 4); padding-block: calc(var(--navRowGap) * 2 / 3) calc(var(--navRowGap) * 4 / 3); & a { --_navLinkSize: var(--fontSizeNavLvl1, var(--fontSize)); --_navLinkWeight: var(--fontWeightNavLvl1); --_navLinkTransform: var(--textTransformNavLvl1, none); --_navLinkSpacing: var(--letterSpacingNavLvl1); } } & .level2 { padding-inline: calc(var(--navColGap) * 2 / 3); padding-block: calc(var(--navRowGap) * 1 / 5) calc(var(--navRowGap) * 2 / 5); & a { --_navLinkSize: var(--fontSizeNavLvl2, var(--fontSize)); --_navLinkWeight: var(--fontWeightNavLvl2); --_navLinkTransform: var(--textTransformNavLvl2, none); --_navLinkSpacing: var(--letterSpacingNavLvl2); } } & .level3 { padding-inline: calc(var(--navColGap) / 2); padding-block: calc(var(--navRowGap) * 1 / 4) calc(var(--navRowGap) / 2); & a { --_navLinkSize: var(--fontSizeNavLvl3, var(--fontSize)); --_navLinkWeight: var(--fontWeightNavLvl3); --_navLinkTransform: var(--textTransformNavLvl3, none); --_navLinkSpacing: var(--letterSpacingNavLvl3); } } & .level4 { padding-inline: calc(var(--navColGap) * 1 / 3); padding-block: calc(var(--navRowGap) * 1 / 6) calc(var(--navRowGap) * 1 / 3); & a { --_navLinkSize: var(--fontSizeNavLvl4, var(--fontSize)); --_navLinkWeight: var(--fontWeightNavLvl4); --_navLinkTransform: var(--textTransformNavLvl4, none); --_navLinkSpacing: var(--letterSpacingNavLvl4); } } & li li:last-child { padding-bottom: 0; } } /*USER NAVIGATION BAR*/ [class^="topBar"] { flex-shrink: 0; --linkDecoration: var(--navbarLinkDecoration, none); & a { display: flex; align-items: center; flex-wrap: nowrap; & i { display: flex; flex-wrap: nowrap; align-items: baseline; & span { height: 100%; } } & i::before { margin-inline-end: var(--gapSM); } } &.topBarSearchSection { height: calc(var(--_navHeight) - 2 * var(--_navPadding)); align-content: center; flex-shrink: 1; min-width: 100px; & input { height: var(--searchHeight, calc(var(--_navHeight) - 2 * (var(--_navPadding)))); max-height: var(--searchHeight, calc(var(--_navHeight) - 2 * (var(--_navPadding)))); color: var(--onInput, var(--onSearch)); &.loading::after { content: ""; display: block; position: absolute; top: calc(50% - var(--fontSize) / 2); right: var(--gapM); width: var(--fontSize); height: var(--fontSize); border-radius: 50%; border: 2px solid currentColor; border-color: currentColor transparent currentColor transparent; animation: loading-ring 1.2s linear infinite; } } } &.topBarUserSection { flex-shrink: 1; width: 100%; max-width: max-content; overflow: hidden; & i { overflow: hidden; & span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } } } .user-navbar .justify-1start { justify-content: end !important; } .user-navbar .justify-content-start>div { padding-inline: var(--gapSM); } .salespersonSwitch { margin-inline-start: auto; } /*ACCOUNT NAVIGATION BAR*/ .account-navbar { display: flex; width: 100%; justify-content: center; padding-inline: 0; position: unset; } .account-navbar .container { display: flex; flex-wrap: wrap; justify-content: center; border-radius: var(--cardBorderRadius); background-color: var(--secondary); box-shadow: var(--accountShadow); } .account-nav-link { --fontSize: 1.2rem; --fontWeight: 600; padding: 1rem 2rem; color: var(--onSecondary); text-align: center; display: flex; & a { transition: var(--linkTransition); padding: 1rem 2rem; } } .mobileTrue .account-navbar { margin-block: 0; & .container { gap: 0; & .account-nav-link { --fontSize: 1rem; & a { padding: var(--gapM) var(--gapL); } } } } /*TABLES*/ body { --tableLineHeight: 3.2rem; --tableLineHeightLarge: 4.4rem; --tableLinePaddingLarge: var(--gapM); --tableLineMinCellWidthLarge: 6rem; --displayPopupLabelLarge: none; --tableLinePadding: var(--gapXS); --tableLineMinCellWidth: 4.5rem; --tableLineMinInteractWidth: var(--buyButtonWidth, 8rem); --tableDescriptionCellWidth: 10rem; --tablePadding: var(--gapSM); --tableDisplay: flex; --tableBodyDisplay: flex; --tableRowDisplay: flex; --tableOverflow: clip; --tableTextWrap: nowrap; --tableHeaderBg: var(--accentLight); --smallDisplayHeader: none; --tBodyBorderWidth: 0px !important; --secondLineColor: var(--surfaceFaded); &.pageViewProduct:not(:has(.newRenderer)) { --tableDisplay: table; --tableRowDisplay: table-row; --tableBodyDisplay: table-row-group; --tableLinePadding: var(--gapSM); --tableLineMinCellWidth: initial; --tableOverflow: auto; --tableHeaderBg: transparent; --smallDisplayHeader: table-cell; --tBodyBorderWidth: inherit; --secondLineColor: unset; } & [class*="table-"], .table { margin: unset; width: 100%; padding-inline: 0; --fontSize: var(--fontSizeTable); --fontSizeH5: var(--fontSizeH6); container-type: inline-size; border-radius: var(--cardBorderRadius); box-shadow: var(--accountShadow); overflow: var(--tableOverflow); &.table-partial { --tableDisplay: table; --tableLineHeight: fit-content; flex: 1; width: unset; min-width: 300px; box-shadow: none; overflow: visible; &[class*="float-"] { max-width: fit-content; } & table { border: var(--cardPadding) solid transparent; box-shadow: var(--accountShadow); border-radius: var(--cardBorderRadius); padding: var(--cardPadding); display: var(--tableDisplay); & tbody { width: 100%; display: var(--tableDisplay); & tr { display: var(--tableRowDisplay); background: transparent !important; & td { padding: 0; --lineHeight: 1.8; flex: 1; &[scope="row"] { --fontWeight: var(--fontWeightTableHeader, var(--fontWeightH2)); } } } } } } &.table-responsive { & table { display: var(--tableDisplay); flex-direction: column; @container (width > 699px) { --tableLineHeight: var(--tableLineHeightLarge); --tableLinePadding: var(--tableLinePaddingLarge); --tableLineMinCellWidth: var(--tableLineMinCellWidthLarge); --displayPopupLabel: var(--displayPopupLabelLarge); } @container (width < 700px) { & thead { & th { display: var(--smallDisplayHeader); } & tr { height: var(--cardBorderRadius) !important; } } & tbody { & tr.line { flex-wrap: wrap; height: unset; max-height: unset; & .favDesc { min-width: calc(100% - var(--tableLineHeight)); padding-inline-end: var(--tableLineHeight); } & .prodName { min-width: calc(100% - var(--tableLineHeight) - 2* var(--tableLineMinCellWidth)); max-width: calc(100% - var(--tableLineHeight) - 2* var(--tableLineMinCellWidth)); } & .favDelete { position: absolute; inset: 0 0 auto auto; } & .info { order: 1; &.favPrice, &.prodPrice { margin-inline-start: auto; } } & .interact { text-align: center; order: 2; } } } } & thead { width: 100%; } & tbody { position: relative; display: var(--tableBodyDisplay); flex-direction: column; } & tr { width: 100%; display: var(--tableRowDisplay); flex-wrap: nowrap; align-items: center; } & .cellGroup { display: flex; flex-wrap: nowrap; align-items: center; & .cell { position: relative; } } & :is(td, th) { border-width: 0; text-wrap: var(--tableTextWrap); overflow: clip; &.image, &.delete, &.pdf { width: var(--tableLineHeight); min-width: var(--tableLineHeight); } &.description { flex: 1; } &.cellGroup .cell, &.info, &.spec { width: var(--tableLineMinCellWidth); } &.interact { text-align: center; width: var(--tableLineMinInteractWidth); } } } } &.table-static { overflow: auto; position: relative; & table { & th, td { text-wrap: nowrap; } } &:has(+ .actionBottom) { margin-bottom: 0; border-radius: var(--cardBorderRadius) var(--cardBorderRadius) 0 0; &+.actionBottom { border-radius: 0 0 var(--cardBorderRadius) var(--cardBorderRadius); overflow: clip; } } } &.table-separate { overflow: visible; box-shadow: none; border-radius: unset; & table { border-radius: var(--variantRdius, var(--cardBorderRadius)); overflow: clip; @container (width < 700px) { --tableLineHeight: 4rem; --tableLinePadding: var(--gapM); --tableLineMinCellWidth: 6rem; --variantShadow: none; & thead { display: none; } & tbody { gap: var(--gapM); & tr { background-color: var(--cardBackground); border-radius: var(--cardBorderRadius); flex-wrap: wrap; align-items: start; justify-content: end; & td { &.description { flex: unset; width: var(--tableDescriptionCellWidth); } &.cellGroup { min-height: fit-content; height: max-content; max-height: unset; display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tableLineMinCellWidth), 1fr)); width: calc(100% - var(--tableLineHeight) - var(--tableDescriptionCellWidth)); row-gap: var(--gapSM); & .cell { width: unset; } } &.stock { width: max-content; } &.price { margin-inline-start: auto; width: max-content !important; &.discounted { flex-direction: row !important; } } } } } } box-shadow: var(--variantShadow, var(--accountShadow)); & tbody { overflow: clip; & tr { & td { &.price { display: flex; flex-direction: column; justify-content: center; } &.interact { position: relative; ; & .uom { position: absolute; top: 0; left: 50%; transform: translateX(-50%); } } } } } } } & table { width: 100%; margin-bottom: 0; & thead { & tr { border: none; height: fit-content; background-color: var(--tableHeaderBg); color: var(--onAccentLight, var(--onBackground)); & th { border: none; --fontWeight: var(--fontWeightTableHeader, var(--fontWeightH2)); &.actions { width: var(--tableLineHeight); } } } } & tbody { border-width: var(--tBodyBorderWidth); & tr { transition: background-color var(--defaultTransitionTime) var(--defaultTransitionMethod); position: relative; border: none !important; --_hoverBG: var(--surfaceLight); & td { height: var(--tableLineHeight); padding-block: var(--tableLinePadding); align-content: center; opacity: 1; text-wrap: var(--tableTextWrap); border: none; & button { --lineHeight: 1.5; } &.description { display: flex; flex-direction: column; justify-content: center; position: relative; padding-block: var(--gapS); & span { overflow: clip; display: -webkit-box; white-space: wrap; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } & small { text-wrap: nowrap; } } &.image { padding: var(--tableLinePadding); line-height: 1; & img { height: 100%; width: 100%; } } } &:nth-child(2n+1) { background-color: var(--secondLineColor); } & .name { display: flex; align-items: center; padding: 0; & i, input, span { display: flex; align-items: center; &:is(input) { height: 2rem; } &:is(i) { width: var(--tableLineHeight); justify-content: center; } &:is(input) { position: absolute; inset: 0; left: calc(2 * var(--tableLineHeight)); height: calc(var(--tableLineHeight) - 2 * var(--gapM)); margin: var(--gapM); opacity: 0; pointer-events: none; max-width: min(350px, calc(100% - 2 * var(--tableLineHeight) - 2 * var(--gapM))); transition: opacity var(--defaultTransitionTime) var(--defaultTransitionMethod); white-space: nowrap; } &:is(.favoriteName) { position: absolute; inset: 0; left: var(--tableLineHeight); padding-inline: var(--gapL); opacity: 1; max-width: min(250px, calc(100% - var(--tableLineHeight) - 2 * var(--gapM))); transition: opacity .6s ease-in; white-space: nowrap; } &:is(.cancel_rename, .confirm_rename) { position: absolute; inset: 0; width: var(--tableLineHeight); transition: left var(--defaultTransitionTime) var(--defaultTransitionMethod); } &:is(.cancel_rename) { left: calc(-1 * var(--tableLineHeight)); --_hoverBG: var(--errorOverlay); --_hoverCLR: var(--onBackground); } &:is(.confirm_rename) { --_hoverBG: var(--tertiaryOverlay); --_hoverCLR: var(--onBackground); } } &.editing { cursor: default; & input { opacity: 1; pointer-events: all; } & .confirm_rename { left: var(--tableLineHeight); &::before { content: "\f0c7"; } } & .cancel_rename { left: 0; &::before { content: "\f00d"; } } & .favoriteName { opacity: 0; pointer-events: none; transition: none; } & i { min-width: var(--tableLineHeight); } } } &.deleting { max-height: 0px !important; overflow: clip; transition: max-height var(--defaultTransitionTime) var(--defaultTransitionMethod); } &:has(.initDelete.show) { & .default { opacity: 0; transition: none; } } &:has(.favDelete.show) { padding-inline-end: var(--tableLineHeight); } @media(max-width: 600px) { &:has(.initDelete.show) .name { opacity: 0; transition: none; } &:has(.name.editing) :is(.initDelete, .default) { opacity: 0; transition: none; } & .favDelete .delete_text { display: -webkit-box; white-space: wrap; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } } } & th, td { padding: var(--tablePadding); &:has(.popupLabel) { position: relative; } & .popupLabel { display: var(--displayPopupLabel, block); } } } } & .actionBottom { display: flex; flex-direction: row; flex-wrap: nowrap; text-align: end; align-items: center; width: 100%; & button:last-child { margin-inline-start: auto; } } &.pageViewFavoriteLines, &.pageViewFavorites { & table { & thead { & .name { margin-inline: var(--tableLineHeight) auto; } } & tbody { & tr { &.deleting { transition: max-height var(--defaultTransitionTime) var(--defaultTransitionMethod) !important; max-height: 0px !important; overflow: clip; } & td { &.name { flex: 1; } &.favDesc { flex: 1; display: flex; flex-direction: column; justify-content: center; & span { --lineHeight: 1.2; white-space: wrap; overflow: clip; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } } &.favDelete, &.initDelete { display: flex; padding: 0; align-items: center; justify-content: end; position: relative; max-width: var(--tableLineHeight); & .confirm_delete, .cancel_delete { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; height: var(--tableLineHeight); --_hoverBG: var(--errorOverlay); --_hoverCLR: var(--onBackground); &.cancel_delete { max-width: 0; overflow: hidden; transition: max-width .3s ease-out; --_hoverBG: var(--tertiaryOverlay); } &.confirm_delete { --_hoverBG: var(--errorOverlay); --_hoverCLR: var(--onBackground); } } & .delete_text { color: var(--errorText); max-width: 0; overflow: clip; white-space: nowrap; transition: max-width .5s ease-out; } &.show { position: absolute; min-width: 100%; background-color: rgb(from var(--background) r g b / .7); backdrop-filter: blur(4px); transition: background var(--defaultTransitionTime) var(--defaultTransitionMethod), backdrop-filter var(--defaultTransitionTime) var(--defaultTransitionMethod); & .delete_text { max-width: calc(100% - 2 * var(--tableLineHeight) - 2 * var(--gapM)); margin-inline: var(--gapM); } & .cancel_delete { max-width: var(--tableLineHeight); } } } } } } } & .actionBottom { justify-content: end; } & .viewSection { gap: var(--gapM); } } &:not(.sideControls) .galleryControls { & button, select { height: 100%; } & .viewSection { gap: var(--gapM); } } } /* stair step pricing */ .StairStepPricing tbody { & tr { transition: transform var(--defaultTransitionTime) var(--defaultTransitionMethod), background-color var(--defaultTransitionTime) var(--defaultTransitionMethod), box-shadow var(--movementTransitionTime) var(--movementTransitionMethod); box-sizing: border-box; & td { transition: padding var(--defaultTransitionTime) var(--defaultTransitionMethod); } } &:not(:has(.active)) tr:first-child, .active { background-color: var(--accentLight); --fontWeight: 600; } } /*FOOTER*/ footer { --linkColor: var(--footerClr); --linkHoverClr: var(--footerHoverClr, var(--footerClr)); --linkDecoration: var(--linkDecorationFooter, var(--linkDecoration)); z-index: 1000; color: var(--footerClr); border-top: var(--footerBorder); box-shadow: var(--footerShadow); background-color: var(--footerBg); width: 100%; position: absolute; & .mainFooterSection { padding: var(--footerPadding); min-height: var(--footerMinHeight); display: flex; align-items: center; & .container { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; & .footerColumn { display: flex; flex-direction: column; gap: var(--gapM); min-width: fit-content; &.info { order: var(--footerInfoOrder); } &.contact { order: var(--footerContactOrder); } &.terms { order: var(--footerTermsOrder); } &.media { order: var(--footerMediaOrder); } } } } } /*BREADCRUMBS*/ .breadcrumbSection { border-bottom: var(--breadcrumbBorder, 1px solid #e0e0e0); padding-inline: var(--gapSM); z-index: 0; background: var(--breadcrumbBackground, var(--background)); & ol { margin: 0 auto; padding: 0; display: flex; flex-wrap: wrap; width: 100%; max-width: var(--breadcrumbMaxW, 100%); align-items: center; align-content: center; --fontSize: var(--fontSizeSmall); & a { color: var(--breadcrumbColor, var(--onBackground)); --_hoverCLR: var(--breadcrumbHoverCLR, var(--breadcrumbColor, var(--onBackground))); text-decoration: none; } & li { list-style: none; &:not(:first-child)::before { content: ">"; font-size: var(--fontSizeSmall); opacity: var(--opacityLight); margin-inline-start: var(--gapS); vertical-align: .5px; } } } } .mobileFalse .breadcrumbSection li { white-space: nowrap; max-width: calc((100% / 6)); overflow: hidden; text-overflow: ellipsis; } /* --- CONTENT --- */ /* GENERAL */ body:not(.pageViewPage) .OuterContainer { min-height: calc(100vh - var(--_topHeight)); display: flex; padding-block: var(--pageMargin); box-shadow: var(--outerContainerShadow); } .pageViewPage .OuterContainer { min-height: calc(100vh - var(--_topHeight)); max-width: unset; width: 100%; } ol, ul { padding-inline: 0; list-style-position: inside; } .row { --bs-gutter-x: 0; --bs-gutter-y: 0; &>* { padding: 0; } } /* --- GALLERY --- */ .OuterContainer>.header { margin-block: var(--gapM) var(--gapL); text-align: start; } .GalleryTitle { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; align-items: center; padding-bottom: var(--gapM); border-bottom: var(--galleryTitleBorder); margin-bottom: var(--gapM); } .titleSection { column-gap: 1rem; display: flex; align-items: baseline; margin: 0 var(--gapM) var(--gapM) 0; } .categoryProducts { display: flex; flex-direction: column; &:has(.NormalView) { & .btn-layout[data="NormalView"] { color: var(--_hoverCLR); background-color: var(--_hoverBG); } } &:has(.ListView) { & .btn-layout[data="ListView"] { color: var(--_hoverCLR); background-color: var(--_hoverBG); } } &:has(.GridView) { & .btn-layout[data="GridView"] { color: var(--_hoverCLR); background-color: var(--_hoverBG); } } } .productListHeader, .subProductListHeader { margin-bottom: 0; } button:is(.addToCartAni, #completeOrder, #completeOrderCreditCard, .submitBtn, .btn-expandable) { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; position: relative; & span { transition: transform var(--defaultTransitionTime) var(--defaultTransitionMethod); } &:is(.success, .error, .upToDate, .updated) span { transform: translateX(-200%); width: 100%; height: 100%; } } .addToCartAni, #completeOrder, #completeOrderCreditCard, .submitBtn, .lineDownload { position: relative; &::after { content: ""; width: 200%; height: 100%; padding-left: 100%; position: absolute; left: 100%; top: 0; transition: left var(--defaultTransitionTime) var(--defaultTransitionMethod); display: flex; justify-content: center; align-items: center; } &:is(.success, .error, .upToDate, .updated)::after { left: -100%; } } :is(:is(.relAdd, .varAdd) .btn-icon)::after { font-family: FontAwesome; font-size: 1.2rem; font-weight: normal; font-style: normal; } button:is(.addToCartAni, #completeOrder, #completeOrderCreditCard, .submitBtn):is([last-class=success], [last-class=updated])::after { background: linear-gradient(0.25turn, var(--accentVariant), var(--primary) 50%, var(--primary)); color: var(--onPrimary); } .ProductBuySection .addToCartAni[last-class=upToDate]::after { background: linear-gradient(0.25turn, var(--accentVariant), var(--tertiary) 50%, var(--tertiary)); color: var(--onTertiary) } button:is(.addToCartAni, #completeOrder, #completeOrderCreditCard, .submitBtn, .lineDownload)[last-class=error]::after { background: linear-gradient(0.25turn, var(--accentVariant), var(--error) 50%, var(--error)); color: var(--onError); } :is(.relAdd, .varAdd) button:is(.addToCartAni, #completeOrder, #completeOrderCreditCard, .submitBtn)[last-class=success]::after { content: "\f00c"; } :is(.relAdd, .varAdd) button:is(.addToCartAni, #completeOrder, #completeOrderCreditCard, .submitBtn)[last-class=error]::after { content: "\f00d"; } i.error { background-color: var(--error); color: var(--onError); cursor: default !important; &::before { content: "\f00d"; } } i.success { background-color: var(--success); color: var(--onSuccess); cursor: default; &::before { content: "\f00c"; } } .errorOverlay { background-color: var(--errorFaded); border-radius: var(--popupBorderRadius); position: fixed; height: fit-content; inset: auto 0 0 auto !important; box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.5); z-index: 9999; max-width: calc(100% - calc(2 *var(--gapS))); max-width: 280px; margin: var(--gapL) !important; padding: var(--gapM); animation: fadeIn .3s; &::after { position: absolute; top: var(--gapS); right: var(--gapM); content: "\f00d"; cursor: pointer; font-family: FontAwesome; } } div:has(> .addToCartAni, > #completeOrder) .overlay { top: 100%; right: 0; margin: var(--gapM); z-index: 9999; padding-inline-end: var(--gapXL); width: fit-content; } .actionBottom:has(> #completeOrder) .overlay { margin-inline: 0; } .relPrice { text-wrap: nowrap; } .addToCartAni:is(.loading, .success) span { color: var(--accent); } :is(.addToCartAni, .submitBtn, .lineDownload).loading span, .btn-expandable.loading i { color: transparent !important; position: relative; & i::before { color: transparent !important; } &::after { content: " "; color: var(--_hoverCLR); position: absolute; top: calc(50% - var(--fontSize) / 2); left: calc(50% - var(--fontSize) / 2); width: var(--fontSize); height: var(--fontSize); border-radius: 50%; border: 2px solid currentColor; border-color: currentColor transparent currentColor transparent; animation: loading-ring 1.2s linear infinite; } } i.loading { &::before { content: " "; color: transparent; width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid; border-color: var(--_hoverCLR) transparent var(--_hoverCLR) transparent; animation: loading-ring 1.2s linear infinite; } } button:disabled { background-color: var(--_disabledBG) !important; color: var(--_disabledCLR) !important; pointer-events: none; } .addedToCartText { color: var(--onPrimary) !important; position: absolute; left: 0; top: calc(100% + 4px); background-color: var(--primary); border-radius: var(--buttonBorderRadius, var(--buttonRadius)); height: fit-content; z-index: 999; --_hoverCLR: var(--onPrimary); } .addedToCartText:hover { cursor: default; } /*FORMS, BUTTONS, CARDS & CHIPS*/ /*buttons*/ .btn { display: flex; align-items: center; justify-content: center; gap: var(--gapSM); position: relative; background-color: var(--buttonBg); color: var(--onButton); overflow: clip; --_hoverBG: var(--buttonHoverBg); --_hoverCLR: var(--buttonHoverClr, var(--onButtonHover)); border: var(--buttonBorder); border-radius: var(--buttonBorderRadius, var(--buttonRadius)); padding: var(--buttonPadding); transition: var(--buttonTransition); box-shadow: var(--buttonShadow, none); max-width: var(--maxButtonWidth, unset); &:hover, &:focus, &:active { border: var(--buttonHoverBorder, var(--buttonBorder)); box-shadow: var(--buttonHoverShadow, var(--buttonShadow, none)); } &:not(.btn-icon, .btn-inline, .btn-expandable) { width: max-content; min-width: var(--buttonMinW, fit-content); min-height: calc(var(--interactHeight) + 2px); &.btn-sm { min-width: unset; max-width: unset; width: fit-content; & span { min-width: max-content; } } } } .btn-success { background-color: var(--btnSuccess, var(--accent)); color: var(--onBtnSuccess, var(--onAccent)); border: var(--btnSuccessBorder, var(--buttonBorder)); --_hoverBG: var(--btnSuccessHover, var(--btnSuccess, var(--accentVariant))); --_hoverCLR: var(--onBtnSuccessHover, var(--onBtnSuccess, var(--onAccentVariant, var(--onAccent)))); --_disabledBG: var(--btnSuccessDisabled, var(--accentVariant)); --_disabledCLR: var(--onBtnSuccessDisabled, var(--onAccentVariant, var(--onAccent))); &:hover { border: var(--btnSuccessHoverBorder, var(--btnSuccessBorder, var(--buttonBorder))); } } .btn-primary { background-color: var(--btnPrimary, var(--primary)); color: var(--onBtnPrimary, var(--onPrimary)); border: var(--btnPrimaryBorder, var(--buttonBorder)); --_hoverBG: var(--btnPrimaryHover, var(--btnPrimary, var(--primaryVariant))); --_hoverCLR: var(--onBtnPrimaryHover, var(--onBtnPrimary, var(--onPrimaryVariant, var(--onPrimary)))); --_disabledBG: var(--btnPrimaryDisabled, var(--primaryVariant)); --_disabledCLR: var(--onBtnPrimaryDisabled, var(--onPrimaryVariant, var(--onPrimary))); &:hover { border: var(--btnPrimaryHoverBorder, var(--btnPrimaryBorder, var(--buttonBorder))); } } .btn-secondary { background-color: var(--btnSecondary, var(--surfaceVariant)); color: var(--onBtnSecondary, var(--onSurfaceVariant, var(--onSurface))); border: var(--btnSecondaryBorder, var(--buttonBorder)); --_hoverBG: var(--btnSecondaryHover, var(--btnSecondary, var(--surface))); --_hoverCLR: var(--onBtnSecondaryHover, var(--onBtnSecondary, var(--onSurface))); --_disabledBG: var(--btnSecondaryDisabled, var(--surface)); --_disabledCLR: var(--onBtnSecondaryDisabled, var(--onSurface, var(--onSurface))); &:hover { border: var(--btnSecondaryHoverBorder, var(--btnSecondaryBorder, var(--buttonBorder))); } } .btn-tertiary { background-color: var(--btnTertiary, var(--tertiary)); color: var(--onBtnTertiary, var(--onTertiary)); border: var(--btnTertiaryBorder, var(--buttonBorder)); --_hoverBG: var(--btnTertiaryHover, var(--tertiaryVariant)); --_hoverCLR: var(--onBtnTertiaryHover, var(--onTertiaryVariant, var(--onTertiary))); --_disabledBG: var(--btnTertiaryDisabled, var(--tertiaryVariant)); --_disabledCLR: var(--onBtnTertiaryDisabled, var(--onTertiaryVariant, var(--onTertiary))); &:hover { border: var(--btnTertiaryHoverBorder, var(--btnTertiaryBorder, var(--buttonBorder))); } } .btn-error { background-color: var(--btnError, var(--error)); color: var(--onBtnError, var(--onError)); border: var(--btnErrorBorder, var(--buttonBorder)); --_hoverBG: var(--btnErrorHover, var(--errorVariant)); --_hoverCLR: var(--onBtnErrorHover, var(--onErrorVariant, var(--onError))); --_disabledBG: var(--btnErrorDisabled, var(--errorVariant)); --_disabledCLR: var(--onBtnErrorDisabled, var(--onErrorVariant, var(--onError))); &:hover { border: var(--btnErrorHoverBorder, var(--btnErrorBorder, var(--buttonBorder))); } } .btn-expandable { display: flex; align-items: center; padding-inline: var(--gapM); width: fit-content; & i { padding-inline: var(--gapS); transition: opacity .5s ease; } &::after, &::before { max-width: 0px; overflow: hidden; display: inline; transition: max-width var(--defaultTransitionTime) var(--defaultTransitionMethod); white-space: nowrap; } &:is(:hover, .showDropdown)::after, &:is(:hover, .showDropdown)::before { max-width: 15ch !important; } &:not(:is(:hover, .showDropdown)) { gap: 0; } &.success { background-color: var(--success); & i::before { content: "\f00c"; } } &.error { background-color: var(--error); & i::before { content: "\f00d"; } } } .btn-icon { border-radius: var(--buttonBorderRadius, var(--buttonRadius)); aspect-ratio: 1; padding: 0; height: calc(var(--fontSize) * var(--lineHeight) + 12px); display: flex; align-items: center; justify-content: center; &.btn-sm { height: calc(var(--fontSize) * var(--lineHeight) + 8px); } &.btn-layout { display: none; background-color: var(--buttonBg); color: var(--onButton); height: 2.5rem; --_hoverBG: var(--buttonHoverBg); --_hoverCLR: var(--buttonHoverClr, var(--onButtonHover)); } &.submitBtn { height: 1.6rem; } } .btn-inline { display: flex; flex: 1; justify-content: center; align-items: baseline; gap: var(--gapDSM); border-radius: 0; } .btn-actions { padding-inline: var(--iconPadding); height: 100%; align-content: center; &.tertiary { --_hoverBG: var(--tertiaryOverlay); --_hoverCLR: inherit } &.error, &.show { --_hoverBG: var(--errorOverlay); --_hoverCLR: inherit; } } .btn-radio { transition: var(--buttonTransition); padding: var(--buttonPadding); background-color: var(--buttonBg); color: var(--onButton); border-radius: var(--buttonBorderRadius); text-align: var(--btnTextAlign, center); --_hoverBG: var(--buttonHoverBg); --_hoverCLR: var(--buttonHoverClr); &* { transition: var(--buttonTransition); } &:has(:checked) { background-color: var(--buttonBgActive); color: var(--onButtonActive); pointer-events: none; } &:has(:disabled) { background-color: var(--accentFaded); color: var(--onAccentFaded); pointer-events: none; } & input { display: none; } } .btn-sso { background-color: var(--ssoBg, black); color: var(--onSso, white); border: var(--ssoBorder, var(--buttonBorder)); --_hoverBG: var(--ssoHoverBg, var(--ssoBg, black)); --_hoverCLR: var(--onSsoHover, var(--onSso, white)); --_disabledBG: var(--ssoDisabledBg, var(--ssoBg, black)); --_disabledCLR: var(--onSsoDisabled, var(--onSso, white)); &:hover { border: var(--ssoHoverBorder, var(--ssoBorder, var(--buttonBorder))); } & span { display: flex; gap: var(--gapSM); align-items: center; &:before { content: ""; background: var(--ssoIcon, url("/common_cocoon/assets/microsoft.webp")); display: inline-block; height: 1rem; width: 1rem; background-size: cover; } } } .chip { border-radius: var(--chipBorderRadius); padding: var(--chipPadding); box-shadow: var(--chipShadow); background: var(--chipBg, var(--primary)); color: var(--chipClr, var(--onPrimary)); font-size: var(--fontSizeChip); @media print { background: transparent; } } .tab-control { display: flex; gap: var(--gapM); width: 100%; background-color: var(--accentFaded); padding: var(--gapM); border-radius: var(--cardBorderRadius, var(--cardRadius)); margin-top: var(--gapS); & .btn { flex: 1; max-width: unset; background-color: transparent; color: var(--onBackground); border-radius: calc(var(--cardBorderRadius, var(--cardRadius)) - var(--gapM)); padding-block: var(--gapM); --_hoverBG: var(--accentLight); --_hoverCLR: var(--onAccentLight, var(--onBackground)); &.active { background-color: var(--accent); color: var(--onAccent); --_hoverBG: var(--accent); --_hoverCLR: var(--onAccent); } &.active { --_disabledBG: var(--accentLight); } } } .input-container { border: var(--inputBorder); border-radius: var(--buttonBorderRadius, var(--buttonRadius)); overflow: clip; & input { border: none; } &:has(:focus, :active) { border: var(--inputActiveBorder, var(--inputBorder)); box-shadow: var(--inputActiveShadow, var(--inputShadow, initial)); & input { border: none; } } } /*forms*/ form { width: var(--_formWidth); max-width: 100%; & .submitRow { display: flex; align-items: center; gap: var(--gapM); margin-top: var(--gapL); flex-wrap: wrap; &> :last-child { margin-inline-start: auto; } } & .form-row { margin-bottom: var(--gapM); &.header { margin-top: var(--gapM); margin-bottom: var(--gapSM); } } } .form-wrapper { display: flex; flex-direction: column; align-items: var(--_formAlign); gap: var(--gapXL); max-width: 100%; & .subFormItem, .overFormItem { width: var(--_formWidth); max-width: 100%; } & input:not(type="checkbox") { width: min(100%, var(--_inputWidth, var(--_formWidth))); } } .form-control, .niceSelect, .form-select { height: var(--interactHeight); background-color: var(--inputBg) !important; color: var(--onInput); border: var(--inputBorder); border-radius: var(--buttonBorderRadius, var(--buttonRadius)); box-shadow: var(--inputShadow, none); &.form-control { padding: var(--formControlPaddingBlock, var(--buttonPaddingBlock)) var(--fontControlPaddingInline, var(--buttonPaddingInline)); } &:read-only:not(.form-select) { --inputBg: var(--inputBgReadOnly); } &::placeholder { color: var(--inputPlaceholder, var(--searchPlaceholder)); } &:focus, &:active { border: var(--inputActiveBorder, var(--inputBorder)); box-shadow: var(--inputActiveShadow, var(--inputShadow, initial)); background-color: var(--inputBgActive, var(--inputBg)); color: var(--onInputActive, var(--onInput)); } & ul { background-color: var(--inputBg) !important; & .option:is(:hover, .selected) { background-color: var(--inputBgActive, var(--inputBg)) !important; color: var(--onInputActive, var(--onInput)) !important; } } &.search { background-color: var(--searchBg, var(--inputBg)) !important; color: var(--onSearch, var(--onInput)); border-radius: var(--searchBorderRadius); border: var(--searchBorder); &::placeholder { color: var(--searchPlaceholder, var(--inputPlaceholder)); } &:focus, &:active { border: var(--searchActiveBorder, var(--searchBorder)); background-color: var(--searchBgActive, var(--searchBg)); } } &.success { background-color: var(--successFaded); } &.form-error { border: 1px solid var(--error); } &[type="date"] { cursor: pointer; } &:is(select.niceSelect) { appearance: menulist-button; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; } } .partialLoginForm { max-width: 100%; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .input-group-sm>.btn, .input-group-sm>.form-control, .input-group-sm>.form-select, .input-group-sm>.input-group-text { border-radius: var(--buttonBorderRadius, var(--buttonRadius)); border-top-left-radius: var(--buttonBorderRadius, var(--buttonRadius)); border-bottom-left-radius: var(--buttonBorderRadius, var(--buttonRadius)); } .IncDecSection, .inputWrapper { display: flex !important; justify-content: center; align-items: center; border: 1px solid var(--onAccentLight, var(--onBackground)); border-radius: var(--buttonBorderRadius, var(--buttonRadius)); overflow: clip; flex-wrap: nowrap; width: fit-content; height: calc(var(--interactHeight) + 2px); & input { height: var(--interactHeight); min-width: var(--inputWidth) !important; max-width: var(--inputWidth); box-shadow: none !important; box-sizing: content-box; text-align: center; padding: 0 var(--gapS) !important; -moz-appearance: textfield; border: none !important; overflow: clip; } & .input-group-text { height: var(--interactHeight); width: var(--amountInputWidth); display: flex; justify-content: center; align-items: center; cursor: pointer; background-color: var(--accentLight); color: var(--onAccentLight, var(--onBackground)); padding: 0 !important; border: none !important; border-radius: var(--amountInputBorderRadius, 0) !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease; --_hoverCLR: var(--onAccent); --_hoverBG: var(--accent); } } .IncDecSection .input-group-text { font-size: 1rem; font-weight: 500; } .IncDecSection .input::-webkit-outer-spin-button, .IncDecSection input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .filterSection { display: flex; flex-direction: column; margin-bottom: var(--gapS); & label { --_hoverBG: var(--surfaceFaded); } } .sectionFilter .form-control, .sectionSorting .form-control { background-color: var(--inputBg); color: var(--onInput); border: var(--outlinedButtonBorder, var(--buttonBorder)); box-shadow: var(--buttonShadow, none); --_hoverBG: var(--background); --_hoverCLR: var(--onBackground); &:hover, &:focus, &:active { border-color: var(--buttonHoverBorder, currentColor); box-shadow: var(--buttonHoverShadow, var(--buttonShadow, none)); } } .card { background-color: var(--cardBackground); border: var(--cardBorder); border-radius: var(--cardBorderRadius, var(--cardRadius)); box-shadow: var(--cardShadow); padding: var(--cardPadding); } /* options bar */ .GalleryOptsBar { display: flex; gap: 1rem; max-width: fit-content; flex-wrap: wrap; flex-basis: 430px; padding-block: var(--gapM); } .galleryControls { flex: 1; justify-content: end; display: flex; flex-wrap: wrap; width: max-content; transition: opacity var(--defaultTransitionTime) var(--defaultTransitionMethod); opacity: 0; flex-direction: var(--controlsFlexDir); gap: var(--gapM); max-width: fit-content; flex-basis: min(320px, 50%); } .sideControls .GalleryOptsBar { justify-content: end; } .GalleryOptsBar .galleryControls div[class^="section"]> :is(button, select) { max-width: calc(50vw - 1rem); min-width: 150px; position: relative; } .galleryControls .sectionFilter button { text-align: start; } body:not(.sideControls) { &.sectionFilter { & .dropdown-menu.show { padding: var(--gapS); overflow: auto; z-index: 9999; display: flex; flex-direction: column; } } & #dropdownMenuButton2:after { content: none; } & .filterBody { max-height: 50vh; overflow: auto; } } .GalleryOptsBar .dropdown-menu { border: 1px solid rgba(0, 0, 0, 0.35); box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.2); padding: 0; z-index: 999; overscroll-behavior: none; } .GalleryOptsBar .filterSection { & *:is(label, .header) { line-height: 1.6; padding-inline: var(--gapS); border-radius: var(--popupBorderRadius); align-items: baseline; display: flex; } &:has(.collapseSection input:checked) i { color: var(--primary); } & .header { font-weight: 600; } & input { transform: translateY(1px); margin-inline-end: 4px; } & label { --_hoverBG: #dbdbdf; } & .collapseSection { max-height: 0; overflow: clip; transition: max-height var(--defaultTransitionTime) var(--defaultTransitionMethod); } & .collapseFilter i { transition: transform var(--defaultTransitionTime) var(--defaultTransitionMethod); } &:has(.collapseFilter.show) { & .collapseSection { max-height: 100vh; } & .collapseFilter i { transform: rotate(180deg); } } } /* side controls*/ .sideControlsToggler { display: var(--_sideControlsTogglerDisplay); } .sideControls .sideControlsToggler { position: fixed; top: var(--_topHeight); left: var(--sideControlsTogglerLeft); margin: var(--gapL); width: var(--sideControlsTogglerHeight); height: var(--sideControlsTogglerHeight); border-radius: 50%; box-shadow: var(--_navShadow); background-color: var(--surface); color: var(--onSurface); --_hoverBG: var(--surface); --_hoverCLR: var(--onSurface); z-index: 997; border: none; transition: var(--buttonTransition); } .sideControls .sideControlsToggler:is(:active) { box-shadow: none; } .sideControls .sectionSorting::before { color: var(--onFilters); font-size: var(--fontSizeH5); font-weight: var(--fontWeightH5); border-bottom: 2px dotted var(--onFilters); width: 100%; display: block; margin-bottom: var(--gapSM); } .sideControls .galleryControls { position: fixed; display: block; margin-left: var(--_sideControlsLeft); left: 0px; top: var(--_topHeight); flex-direction: column; background-color: var(--filtersBackground); box-shadow: var(--_navShadow); width: var(--sideControlsWidth); height: calc(100dvh - var(--_topHeight)); overflow-y: auto; z-index: 999; transition: top var(--defaultTransitionTime) var(--defaultTransitionMethod), height var(--defaultTransitionTime) var(--defaultTransitionMethod); flex-wrap: nowrap; max-width: unset; } .sideControls.sideFilterCollapse .galleryControls { z-index: 1001; } .sideControls .galleryControls div[class^="section"] { display: flex; flex-direction: column; width: 100%; padding: var(--gapM); } .sideControls .sectionFilter :is(.dropdown-menu, button) { background: transparent !important; color: var(--onFilters); } .sideControls #sortDropdown { width: 100%; position: relative; margin-bottom: var(--gapM); } .sideControls .sectionFilter .dropdown-toggle { pointer-events: none; text-align: start !important; border: none !important; border-bottom: 2px dotted var(--onFilters) !important; border-radius: 0; font-size: var(--fontSizeH5); font-weight: var(--fontWeightH5); letter-spacing: var(--letterSpacingH5); padding-inline: 0; padding-block: 0; margin-bottom: var(--gapS); } .sideControls .sectionFilter .dropdown-toggle::after { display: none; } .sideControls .sectionFilter .dropdown-menu { display: block; position: relative; border: none; box-shadow: none; min-width: unset; } .sideControls .galleryControls button { background-color: transparent; } .sectionFilter .clearFilters { width: 100%; background-color: var(--accentFaded); --_hoverBG: var(--accentLight); display: none; } .sectionFilter:has(input:checked) .clearFilters { display: block; } /* PRODUCT PAGE */ .pageViewProduct main .viewSection { display: var(--_productDisplay); grid-template-columns: var(--_productColTemplate); grid-template-rows: var(--_productRowTemplate); grid-column-gap: var(--productColGap); grid-row-gap: var(--productRowGap); flex-direction: column; position: relative; align-content: baseline; &>div { min-width: calc(50% - calc(var(--productColGap) / 2)); width: 100%; display: flex; flex-direction: column; gap: var(--gapL); } & .ProductNameHeader { order: var(--productNameOrder); grid-column: var(--_productNameGridColumn); position: relative; --fontSizeH1: var(--mainProductNameSize, var(--fontSizeH2)); --fontWeightH1: var(--mainProductNameWeight, var(--fontWeightH2)); --letterSpacingH1: var(--mainProductNameLetterSpacing, var(--letterSpacingH2)); --lineHeightH1: var(--mainProductNameLineHeight, var(--lineHeightH2)); --fontFamilyH1: var(--mainProductNameFontFamily, var(--fontFamilyH2)); --textTransformH1: var(--mainProductNameTextTransform, var(--textTransformH2)); } & .ProductImage { order: var(--productImageOrder); margin-inline: auto; grid-column: var(--_productImageGridColumn); grid-row: var(--_productImageGridRow); position: relative; width: min(var(--maxProductImageWidth), 100%); & .mainImageFrame { overflow: hidden; border-radius: var(--cardBorderRadius); & #ytplayer { width: 100%; } } & .imageRow { display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem; & img { aspect-ratio: 1; height: 50px; } } & .tagIconList { position: absolute; display: flex; top: 0; right: 0; } & .btn-download { display: var(--productLeftDownloadBtnDisplay); } } & .ProductInfo, .ProductInteract, .ProductDescription { & .ProductBuySection { display: flex; flex-direction: column; gap: var(--gapL); & .VariantBuy { display: flex; flex-direction: column; gap: var(--gapM); } & .ProductUnitsAndBuy { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--productBuySectionMinWidth), 100%), 1fr)); gap: var(--gapL); } } & .ProductUnitItem, .ProductBuy, .ProductBuyInfo, .ProductBCVariantDropDown, .loginBox, .VariantBuy:not(:has(.ProductBuy)), .ProductBuySection>.ProductMatrixTable:has(tbody tr) { &.ProductBCVariantDropDown { --productBuySectionMinWidth: 100%; } position: relative; flex: 1; display: flex; flex-direction: column; align-items: var(--productUnitAlign); gap: var(--gapM) var(--gapL); padding: var(--cardPadding); border: var(--cardBorder, none); border-radius: var(--cardBorderRadius); background-color: var(--cardBackground); --onBackground: var(--onCard); transition: background-color 0.2s ease; & ul[class*="PriceUOM"] { list-style: none; } & .UOMbuy, .ItemBuy { margin-top: auto; display: flex; gap: var(--gapM) var(--gapL); &>* { flex: 1; } & .favoriteStarButton:not(:hover, :focus, :active, .showDropdown) { opacity: .65; } } &:has(table:not(.StairStepPricing)) { align-items: start; & th { text-align: center; vertical-align: middle; } & td { text-align: center; padding: var(--variantPadding); } & .favItem { & .varImage { width: var(--variantRowHeight); } & .notAvailable { vertical-align: middle; color: var(--errorText); } & td:not(:last-child) { padding-inline-end: 0; } } & tbody { border-top: 2px solid currentColor; & th { border-inline-end: 1px solid currentColor; } } & .VariantProduct { width: var(--variantTableWidth); } & .ProductMatrixTable, .VariantProductsTable, .ProductMatrixTBL { width: var(--variantTableWidth); overflow: clip; border-radius: var(--variantTableBorderRadius, var(--buttonRadius)); & td { &:has(.inStock) { & .input-group-text { background-color: var(--inStockControlsBg, var(--inStockBg)); color: var(--onInStockControls, var(--onInStock)); } & input { background-color: var(--inStockBg, var(--inputBg)) !important; color: var(--onInStock); } } &:has(.outOfStock) { & .input-group-text { background-color: var(--outOfStockControlsBg, var(--outOfStockBg)); color: var(--onOutOfStockControls, var(--onOutOfStock)); } & input { background-color: var(--outOfStockBg, var(--inputBg)) !important; color: var(--onOutOfStock); } } &:has(.incomingStock) { & .input-group-text { background-color: var(--incomingStockControlsBg, var(--incomingStockBg, var(--accentLight))); color: var(--onIncomingStockControls, var(--onIncomingStock, var(--onAccentLight, var(--onAccent)))); z-index: 1; } & input { background-color: var(--incomingStockBg, var(--inputBg)) !important; color: var(--onIncomingStock); } } &:has(.fewInStock) { & .input-group-text { background-color: var(--fewInStockControlsBg, var(--fewInStockBg)); color: var(--onFewInStockControls, var(--onFewInStock)); } & input { background-color: var(--fewInStockBg, var(--inputBg)) !important; color: var(--onFewInStock); } } &:has(.unknownStock) { & .input-group-text { background-color: var(--unknownStockControlsBg, var(--unknownStockBg)); color: var(--onUnknownStockControls, var(--onUnknownStock)); } & input { background-color: var(--unknownStockBg, var(--inputBg)) !important; color: var(--onUnknownStock); } } & .inputWrapper { margin-inline: auto; } } & button { margin-inline-start: auto; } &:has(.actionCaption) { --buttonHeight: max(calc(var(--interactHeight) + 2px), calc(var(--lineHeight) * var(--fontSize) + var(--buttonPaddingBlock))); padding-bottom: calc(var(--buttonHeight) + var(--captionPadding, var(--gapM))); position: relative; & .actionCaption { text-align: end; position: var(--actionCaptionPos, absolute); width: 100%; padding-block: var(--actionPadding, var(--gapM)) 0; border: none; } } } } &.ProductMatrixTable { width: 100%; & .table-responsive { max-width: 100%; overflow: auto; } } &.loginBox { width: fit-content; margin-inline: var(--_productLoginMargin); } & [class*="table"], .table { box-shadow: none; border-radius: var(--smallCardBorderRadius, calc(var(--cardBorderRadius) - var(--cardPadding) / 2)); background: var(--variantTableBackground, var(--mainBackground)); & table { box-shadow: none; } } .favoriteSection { inset: var(--cardPadding) var(--cardPadding) auto auto; } } &.ProductInteract { gap: var(--ProductInteractGap); order: var(--productInteractOrder); &>*:not(:has(*)) { display: none; } & .PriceRow .tagLabel { display: var(--priceLabelDisplay); } & :is(.ProductBuy, .UOMBox):has(.discounted, .variantUOM) { border: var(--cardBorderSpecial); } & .discounted, .variantUOM:has(.ListPrice [data-price]:not([data-price=""])) { display: flex; gap: var(--gapM); align-items: center; & .PriceTag { order: 2; color: var(--priceColor); } & .ListPrice { order: 1; opacity: var(--opacityLight); font-weight: var(--fontWeightProductListPrice, var(--fontWeight)); & [replacekey] { text-decoration: line-through; } } & .DiscountPct { --fontSize: var(--fontSizeProductDiscount, var(--fontSizeProductPrice)); --fontWeight: var(--fontWeightProductDiscount, var(--fontWeightProductPrice)); --textTransform: var(--textTransformProductDiscount, var(--textTransformProductPrice)); margin-top: calc(var(--gapS) * -1); z-index: 1; position: absolute; inset: var(--chipInset); background-color: var(--chipBg, var(--primary)); color: var(--chipClr, var(--onPrimary)); padding: var(--chipPadding); border-radius: var(--chipBorderRadius); display: flex; align-items: center; box-shadow: var(--chipShadow); transition: inset var(--movementTransitionTime) var(--movementTransitionMethod), box-shadow var(--movementTransitionTime) var(--movementTransitionMethod); &::before { content: "SAVE"; margin-inline-end: 2px; color: var(--onPrimary); } } & .PriceTag { --priceColor: var(--newPriceColor, var(--primary)); --fontWeight: var(--fontWeightProductNewPrice); } & .DiscountAmount { display: none; } } & :is(.variantUOM, .UOMprice)>div:not(:has([data-price]:not([data-price=""]))) { display: none; } & .VariantSection { & .variantContainer { display: flex; flex-direction: column; gap: var(--gapM); & .favoriteSection { inset: 0 0 auto auto; } } & .variantSelectForm { display: flex; gap: var(--gapM); flex-direction: column; width: 100%; & .variantSelect { flex: 1; } & .dimension { & .dimensionButtonGroup { display: var(--variantButtonsDisplay, flex); flex-wrap: wrap; gap: var(--gapDS, var(--gapS)); grid-template-columns: var(--variantButtonsGridCols, repeat(auto-fill, minmax(var(--variantButtonWidth, 100px), 1fr))); & label { width: var(--variantButtonWidth, 100px); min-width: fit-content; } } } } } } &.ProductInfo { order: var(--productInfoOrder); & .ProductInfoSectionWrap { & .ProductInfoSection, .ProductSpecSection { margin-bottom: var(--gapXL); &>div { display: flex; & .name { flex: 2; } & .content { flex: 3; & .row { align-items: center; justify-content: space-between; &:not(:last-child) { margin-bottom: var(--gapSM); } & div { width: fit-content; height: fit-content; } } } } &.ProductInfoSection { display: var(--infoSectionDisplay, flex); flex-direction: column; gap: var(--infoSectionGap, var(--gapXS)); grid-template-columns: repeat(auto-fill, minmax(var(--infoSectionColWidth, 180px), 1fr)); & h4 { grid-column: 1 / -1; } &>div { display: var(--infoItemDisplay, flex); background-color: var(--smallCardBackground, transparent); padding: var(--smallCardPadding, 0px); border: var(--smallCardBorder, none); border-radius: var(--smallCardBorderRadius, initial); & .name { font-weight: var(--fontWeightInfoName, var(--fontWeight)); margin: var(--infoNameMagrin); } & .row { justify-content: var(--infoSectionRowJustify, start); flex-wrap: wrap-reverse; &:not(:last-child) { margin-bottom: var(--infoSectionRowMargin, var(--gapS)); } & .chip { margin-inline-start: auto; margin-block: var(--gapXS); } & .inline { margin-inline-start: var(--gapS); } } } } &.ProductSpecSection { display: var(--specSectionDisplay, flex); flex-direction: column; gap: var(--specSectionGap, var(--gapXS)); grid-template-columns: repeat(auto-fill, minmax(var(--specSectionColWidth, 180px), 1fr)); } } } } &.ProductDescription { order: var(--productDescOrder); &:empty, &:has(span[replacekey="GetProductDescription"]:empty) { display: none; } } } & .externalHTML p { margin: 0; } & .btn-download { display: var(--productRightDownloadBtnDisplay); } } & .ProductRelated { overflow: auto; order: var(--productRelatedOrder); grid-column: span 1; & .relItem, & .relLine, & #accountContent tbody tr[data-href], & .salesCustomerList { cursor: pointer; transition: background-color var(--defaultTransitionTime) var(--defaultTransitionMethod); --_hoverBG: #ececec; } & .relAdd { position: relative; } &.fullWidth { grid-column: span 2; } &.horizontal { & table { max-width: 100%; display: block; overflow: auto; & thead { display: none; } & tbody { display: flex; gap: 1rem; } td { border: none; text-align: center; width: 100%; } & tr { display: flex; flex-wrap: wrap; flex: 1; justify-content: center; } } & .relAmount, .relAdd { width: fit-content; } } } & .btn-download { max-width: 10rem; } & .fileBox { display: flex; flex-direction: column; } .ProductMatrixTBL table { display: table; width: fit-content; & thead, tbody { display: table-row-group; & tr { display: table-row; & th, td { display: table-cell; } } } } /* new price & variant renderer */ .pageViewProduct { & .BuySection { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--productBuySectionMinWidth), 100%), 1fr)); justify-items: var(--buySectionJustify, center); gap: var(--gapL); } & .buyBox { transition: opacity var(--defaultTransitionTime) var(--defaultTransitionMethod); display: flex; flex-direction: column; padding: var(--cardPadding); border: var(--cardBorder, none); border-radius: var(--cardBorderRadius); background-color: var(--cardBackground); --onBackground: var(--onCard); position: relative; width: 100%; max-width: var(--productBuySectionMaxWidth); &>:first-child:not(.PriceBox), >.PriceBox:first-child> :first-child { padding: var(--buttonPadding); padding-inline: 0; margin-bottom: var(--gapSM); --lineHeight: calc(1.5 * var(--rootFontSize)) } & .PriceBox { flex: 1; display: flex; padding: var(--gapM); flex-direction: column; background-color: var(--background); border-radius: var(--priceBoxBorderRadius, max(calc(var(--cardBorderRadius) - calc(var(--cardPadding) / 2)), 0px)); align-items: center; gap: var(--gapM); justify-content: end; transition: opacity var(--defaultTransitionTime) var(--defaultTransitionMethod); & .StairStepPricing { --cardBorder: 1px solid black; margin-bottom: var(--gapL); & td, th { &:is(th) { padding-inline: var(--gapS); } text-align: center; &:first-child { text-align: start; padding-inline-start: 0; } &:last-child { text-align: end; padding-inline-end: 0 } } } & .PriceRow { margin-top: auto; order: var(--priceRowOrder, 1); & .tagLabel { display: none; } & .PriceTag { --fontSize: var(--fontSizeProductPrice, var(--_fontSizeProductInfo)); --fontWeight: var(--fontWeightProductPrice, var(--_fontWeightProductInfo)); --textTransform: var(--textTransformProductPrice, var(--_textTransformProductInfo)); color: var(--priceColor); } } & .InteractRow { order: var(--interactRowOrder, 2); display: flex; gap: var(--gapM); } & .CommentsRow { order: var(--commentsRowOrder, 3); display: flex; flex-direction: column; gap: var(--gapM); --fontSize: var(--fontSizeComments, var(--fontSizeSmall)); --fontWeight: var(--fontWeightComments, var(--fontWeightSmall)); & .commentItem { display: flex; gap: var(--gapDS); } &:not(:has(.commentItem)) { display: none; } } @starting-style { opacity: 0.35; } } &.UOMBox { &.newUOM { @starting-style { opacity: 0; } transition: opacity var(--defaultTransitionTime) var(--defaultTransitionMethod); } } &:hover { --chipShadow: var(--chipShadowHover); --chipInset: var(--chipInsetHover) } } & .favoriteSection { position: absolute; inset: var(--cardPadding) var(--cardPadding) auto auto; & .favoritesDropdown { top: calc(100% + var(--gapS)); box-shadow: var(--shadowLvl4); } } } /* new price & variant renderer end*/ .salesCustomerList .active { background-color: var(--accentLight) !important; --_hoverBG: var(--accentLight); } #accountContent :is(td, th) { vertical-align: middle !important; } .GalleryBox, .CategoryBox { display: flex; flex-wrap: wrap; row-gap: var(--_galleryRowGap); column-gap: var(--_galleryColGap); margin-bottom: var(--gapXL); & .ProductItem, & .CategoryItem { width: var(--_itemW); box-shadow: var(--productShadow); transition: var(--productTransition); margin: 0; padding: 0; &:hover { box-shadow: var(--productHoverShadow); } &:has(.lotSection) { overflow: visible; & .lotDropdown { border-radius: 0 0 var(--productBorderRadius, var(--productRadius)) var(--productBorderRadius, var(--productRadius)); z-index: 999; } } &.ProductItem { background-color: var(--productBackground); border: var(--productBorder); border-radius: var(--productBorderRadius, var(--productRadius)); display: flex; flex-direction: var(--productFlexDir); flex-wrap: var(--productFlexWrap); position: relative; align-items: var(--productAlign); aspect-ratio: var(--productAspectRatio); height: var(--productHeight); --_hoverBG: var(--productHoverBackground, var(--productBackground)); --_hoverCLR: var(--productHoverColor, var(--primary)); &.hide { display: none; } & .ImageBox { position: relative; padding: var(--productImagePadding); width: var(--productImageWidth); & .tagIconList { position: absolute; top: var(--gapM); right: var(--gapM); } & .btn-compare { position: absolute; bottom: 0; right: var(--gapM); } & .card-img-top { border-radius: calc(var(--productBorderRadius, var(--productRadius)) - var(--productImagePadding)); aspect-ratio: 1; object-fit: contain; } } & .InfoBox { padding: var(--productInfoPadding); position: var(--productInfoPosition); text-decoration: var(--productInfoDecoration); flex: 1; left: 0; right: 0; top: 0; bottom: 0; margin: 0; height: 100%; width: 100%; & .infoList { margin: 0; padding: 0; height: 100%; width: 100%; column-gap: var(--infoBoxColGap); row-gap: var(--infoBoxRowGap); display: var(--infoBoxDisplay, flex); grid-template-rows: var(--infoBoxGridTemplateRows); grid-template-columns: var(--infoBoxGridTemplateColumns); flex-wrap: var(--infoBoxWrap); flex-direction: var(--infoBoxFlexDir); align-items: var(--infoAlign); & .ProductName { --fontSize: var(--fontSizeProductName, var(--_fontSizeProductInfo)); --fontWeight: var(--fontWeightProductName, var(--_fontWeightProductInfo)); --textTransform: var(--textTransformProductName, var(--_textTransformProductInfo)); display: var(--nameDisplay); width: var(--nameWidth); max-width: var(--nameMaxWidth); margin: var(--nameMargin); order: var(--nameOrder); background-color: var(--productNameBackgroundColor); backdrop-filter: var(--productNameBackdropFilter); position: relative; grid-column: var(--nameGridCol); grid-row: var(--nameGridRow); align-content: var(--nameAlign); justify-content: var(--nameAlign); text-align: var(--nameTextAlign); color: var(--nameColor); &>* { display: block; text-overflow: ellipsis; word-wrap: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: var(--productNameMaxLines); /* number of lines to show */ line-clamp: var(--productNameMaxLines); -webkit-box-orient: vertical; } } & .ProductPrice { display: var(--priceDisplay); margin: var(--priceMargin); order: var(--priceOrder); grid-column: var(--priceGridCol); grid-row: var(--priceGridRow); align-content: var(--priceAlign); justify-content: var(--priceAlign); text-align: var(--priceTextAlign); flex-direction: var(--priceFlexDir); } & .ProductSku { --fontSize: var(--fontSizeProductSku, var(--_fontSizeProductInfo)); --fontWeight: var(--fontWeightProductSku, var(--_fontWeightProductInfo)); --textTransform: var(--textTransformProductSku, var(--_textTransformProductInfo)); display: var(--skuDisplay); margin: var(--skuMargin); order: var(--skuOrder); grid-column: var(--skuGridCol); grid-row: var(--skuGridRow); align-content: var(--skuAlign); justify-content: var(--skuAlign); text-align: var(--skuTextAlign); color: var(--skuColor); } & .ProductInventory { --fontSize: var(--fontSizeProductinventory, var(--_fontSizeProductInfo)); --fontWeight: var(--fontWeightProductInventory, var(--_fontWeightProductInfo)); --textTransform: var(--textTransformProductInventory, var(--_textTransformProductInfo)); display: var(--inventoryDisplay); margin: var(--inventoryMargin); order: var(--inventoryOrder); grid-column: var(--inventoryGridCol); grid-row: var(--inventoryGridRow); align-content: var(--inventoryAlign); text-align: var(--inventoryTextAlign, end); color: var(--inventoryColor); } & .ProductSpecs { --fontSize: var(--fontSizeProductSpecs, var(--_fontSizeProductInfo)); --fontWeight: var(--fontWeightProductSpecs, var(--_fontWeightProductInfo)); --textTransform: var(--textTransformProductSpecs, var(--_textTransformProductInfo)); display: var(--specsDisplay); margin: var(--specsMargin); order: var(--specsOrder); grid-column: var(--specsGridCol); grid-row: var(--specsGridRow); align-content: var(--specsAlign); text-align: var(--specsTextAlign); width: var(--specsWidth); max-width: var(--specsMaxWidth); flex-direction: var(--specsFlexDir); gap: var(--specsGap); color: var(--specColor); flex-wrap: wrap; } & .ProductDescription { --fontSize: var(--fontSizeProductDesc, var(--_fontSizeProductInfo)); --fontWeight: var(--fontWeightProductDesc, var(--_fontWeightProductInfo)); --textTransform: var(--textTransformProductDesc, var(--_textTransformProductInfo)); display: var(--descriptionDisplay); margin: var(--descriptionMargin); order: var(--descriptionOrder); grid-column: var(--descriptionGridCol); grid-row: var(--descriptionGridRow); align-content: var(--descriptionAlign); text-align: var(--descriptionTextAlign); } } } &:hover { --chipShadow: var(--chipShadowHover); --chipInset: var(--chipInsetHover) } & .SEOBox { display: none !important; } } &.CategoryItem { --productShadow: var(--categoryShadow); --productHoverShadow: var(--categoryHoverShadow); border: var(--categoryBorder); border-radius: var(--categoryBorderRadius, var(--categoryRadius)); overflow: hidden; align-content: end; & .cat_link { display: flex; flex-direction: column; height: 100%; background-color: var(--buttonBg); color: var(--onButton); padding: var(--categoryPadding); --_hoverBG: var(--buttonHoverBg); --_hoverCLR: var(--buttonHoverClr, var(--onButtonHover)); & .CategoryImage { background: var(--mainBackground); transition: var(--linkTransition); border-radius: calc(var(--categoryBorderRadius, var(--categoryRadius)) - var(--categoryPadding)); aspect-ratio: var(--categoryImgAspectRatio, 1); object-fit: contain; margin-bottom: var(--categoryPadding); } & .CategoryName { flex: 1; align-content: center; text-align: var(--categoryAlign); transition: var(--linkTransition); --lineHeight: 1.25; color: var(--onButton); background-color: transparent !important; } } &:hover .CategoryName { color: var(--buttonHoverClr, var(--onButtonHover)) !important; } &:has(.CategoryImage) .CategoryName { padding: var(--buttonPadding); } } } &:has(.CategoryImage) .cat_link:not(:has(.CategoryImage)):before { content: ""; display: block; width: 100%; aspect-ratio: var(--categoryImgAspectRatio, 1); background-color: var(--background); margin-bottom: var(--categoryPadding); } } .ProductPrice { gap: var(--priceGap); flex-wrap: wrap; --fontSize: var(--fontSizeProductPrice, var(--_fontSizeProductInfo)); --fontWeight: var(--fontWeightProductPrice, var(--_fontWeightProductInfo)); --textTransform: var(--textTransformProductPrice, var(--_textTransformProductInfo)); & * { color: var(--priceColor); } &:has(.ListPrice) { & .ListPrice { opacity: var(--opacityLight); font-weight: var(--fontWeightProductListPrice, var(--fontWeight)); & [replacekey] { text-decoration: line-through; } } & .DiscountPercentage { position: absolute; inset: var(--chipInset); border-radius: var(--chipBorderRadius); padding: var(--chipPadding); box-shadow: var(--chipShadow); background: var(--chipBg, var(--primary)); color: var(--chipClr, var(--onPrimary)); font-size: var(--fontSizeProductDiscount, var(--fontSizeChip)); transition: inset var(--movementTransitionTime) var(--movementTransitionMethod), box-shadow var(--movementTransitionTime) var(--movementTransitionMethod); &:before { content: "-" } } & .DefaultPrice { --priceColor: var(--newPriceColor, var(--primary)); font-weight: var(--fontWeightProductNewPrice, var(--fontWeight)); } } } .InteractBox { display: flex; flex-wrap: wrap; width: var(--productBuyWidth); gap: var(--gapS) var(--gapM); bottom: 0; right: 0; position: var(--productInteractPosition); justify-content: center; &:has(button) { padding: var(--productInteractPadding); border-top: var(--productInteractBorderTop); } &:has(.NotLoggedIn) { display: none; } & button { flex: 1; } & .UnitOfMeasureCode { width: max-content; max-width: 100%; color: var(--accentVariant); --fontSize: var(--fontSizeSmall); --height: calc(var(--fontSize) * var(--lineHeight)); position: absolute; inset: -2px auto auto 50%; transform: translate(-50%, -50%); padding-inline: var(--gapS); background: var(--productBackground); } } .CategoryBox { --_galleryColGap: var(--categoryColGap, var(--galleryColGap)); --_galleryRowGap: var(--categoryRowGap, var(--galleryRowGap)); --_itemW: calc((100% - ((var(--_catItemCount) - 1) * var(--_galleryColGap))) / var(--_catItemCount) - .01px); } .GridView { --_galleryRowGap: 0; --_galleryColGap: 0; --_itemCount: var(--_gridItemCount); --_itemW: calc(100% / var(--_itemCount)); --productBorderRadius: 0; --productShadow: none; --productHoverShadow: none; --productInfoPosition: absolute; --productInteractPosition: absolute; --productInfoPadding: var(--gapL); --productInteractPadding: var(--gapL); --productNameMaxLines: 2; --productNameBackgroundColor: #ffffff85; --productNameBackdropFilter: blur(var(--gapSM)); --productAspectRatio: 1; --productImageWidth: 100%; --productImagePadding: var(--gapXL); /* infobox */ --priceMargin: auto 0 0 0; --skuDisplay: none; --inventoryDisplay: none; --productBuyWidth: 16rem; --productInteractBorderTop: none; /* if content box is grid */ --infoBoxGridTemplateRows: 1fr auto; --infoBoxGridTemplateColumns: auto; --nameGridCol: span 2; --skuGridCol: 2; --specsGridCol: span 2; --inventoryGridCol: 2; --priceGridCol: 1; --descriptionGridCol: span 2; --nameGridRow: 1; --skuGridRow: 3; --specsGridRow: 2; --inventoryGridRow: 5; --priceGridRow: 5; --descriptionGridRow: 4; } .ListView { --_itemW: 100%; --productFlexDir: row; --productHeight: fit-content; --productFlexWrap: wrap; --productAlign: center; --infoBoxJustify: space-around; --productImagePadding: var(--gapM); --productInfoPadding: var(--gapL); /* infobox */ --infoBoxDisplay: grid; --priceMargin: 0 0 0 auto; --skuDisplay: none; --inventoryDisplay: none; --skuOrder: 0; --inventoryOrder: 1; --nameOrder: 1; --nameMargin: 0; --specsMargin: 0 0 0 auto; --nameWidth: fit-cotnent; --nameMaxWidth: 30ch; --specsWidth: fit-content; --specsMaxWidth: fit-content; --specsFlexDir: row; --infoAlign: center; --infoBoxWrap: nowrap; --infoBoxFlexDir: row; --productImageWidth: 120px; --productBuyWidth: 15rem; --productInteractBorderTop: none; --chipInset: calc(var(--gapS) * -1) calc(var(--gapM) * -1) auto auto; --chipInsetHover: calc(var(--gapS) * -.5) calc(var(--gapM) * -.5) auto auto; /* if content box is grid */ --infoBoxGridTemplateRows: auto; --infoBoxGridTemplateColumns: auto; --nameGridCol: 1; --skuGridCol: 2; --specsGridCol: 3; --inventoryGridCol: 4; --priceGridCol: 5; --descriptionGridCol: span 2; --nameGridRow: 1; --skuGridRow: 1; --specsGridRow: 1; --inventoryGridRow: 1; --priceGridRow: 1; --descriptionGridRow: 1; } .GalleryBox.ListView .ProductItem { & .InteractBox { margin-inline-start: auto; } & .ImageBox { & .tagIconList { right: unset; left: var(--gapS); top: var(--gapS); display: flex; } & .btn-compare { bottom: var(--gapM); left: var(--gapM); right: unset; } } & .InteractBox { & .UnitOfMeasureCode { background: unset; } } } /*ACCOUNT*/ .profileContent { box-shadow: var(--accountShadow); border-radius: var(--cardBorderRadius); max-width: 500px; padding: var(--gapXL); margin-inline: auto; display: flex; flex-direction: column; gap: var(--gapL); } .profileHead { text-align: center; margin-bottom: var(--gapL); } .sectionHeader { margin-bottom: 0; } .sectionPricelists { display: flex; flex-direction: column; gap: .4rem; } .sectionPricelists .line { display: flex; align-items: center; justify-content: space-between; } .sectionPricelists .lineName { font-weight: 600; margin-inline-end: var(--gapM); } .sectionPricelists .lineDownload { position: relative; background-color: var(--accent); padding: var(--gapS) var(--gapM); border-radius: var(--buttonBorderRadius, var(--buttonRadius)); box-shadow: var(--buttonShadow, none); color: var(--onAccent); border: bar(--buttonBorder, 0px); --_hoverBG: var(--surface); --_hoverCLR: var(--onSurface); &:hover, &:focus, &:active { border-color: var(--buttonHoverBorder, currentColor); box-shadow: var(--buttonHoverShadow, var(--buttonShadow, none)); } } .sectionPricelists:has(.loading) button { opacity: var(--opacityLight); pointer-events: none; } .logout { margin-inline-start: auto; } .multi-table { display: flex; flex-wrap: wrap; gap: var(--gapDL); position: relative; } .backLink { width: fit-content; font-size: 1.2rem; cursor: pointer; margin-block: var(--gapSM); } .backLink::before { content: '\f060'; font-family: FontAwesome; font-size: 1.2rem; font-weight: normal; font-style: normal; margin-inline-end: var(--gapSM); } /* BASKET & CHECKOUT*/ .pageViewBasket { --firstLineColor: transparent; --secondLineColor: var(--accentFaded); &:has(.newLineAlert.lineAdded) { --firstLineColor: var(--accentFaded); --secondLineColor: transparent; } --basketPriceWidth: 8rem; --basketAmountWidth: 8rem; --_basketRowHeight: var(--basketRowHeight); } .pageViewCheckout { --_basketRowHeight: var(--checkoutRowHeight); --basketPriceWidth: 12%; --basketAmountWidth: 12%; & .actionBottom { flex-direction: column; align-items: end; gap: var(--gapML); } & .commentsPreview .edit { display: none !important; } } .basketSection { display: flex; flex-direction: column; gap: var(--gapM); & .aboveActions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--gapL); width: 100%; & .favoriteSection { flex: 1; min-width: 18ch; & .favoriteStarButton { margin-inline-start: auto; } } } & .emptyBasketText { display: none; } & .basketTableSection { & .basketRowLines { display: flex; flex-direction: column; & .basketRowLine { display: flex; flex-wrap: wrap; margin-block: var(--gapXS); max-width: 100%; border-radius: var(--productBorderRadius, var(--productRadius)); margin-left: 0; opacity: 1; transition: margin var(--defaultTransitionTime) var(--defaultTransitionMethod), max-height .4s ease, padding .4s ease, background-color .4s ease, opacity var(--defaultTransitionTime) var(--defaultTransitionMethod); position: relative; overflow: hidden; --_hoverBG: var(--accentFaded); &>div { height: var(--_basketRowHeight); padding-block: var(--basketRowPadding); flex-wrap: wrap; align-content: center; min-width: min-content; &.image { & a { display: block; height: 100%; aspect-ratio: 1; & img { padding: 0; } } } &[class*="price"] { display: flex; flex-wrap: nowrap; align-items: center; padding-inline: var(--gapS); width: var(--basketPriceWidth); &.text-end { justify-content: end; } &.priceDiscount { text-align: center; & .input-container { position: relative; max-width: 8ch; & span { position: absolute; inset: 0 0 0 auto; padding: var(--formControlPaddingBlock, var(--buttonPaddingBlock)); align-content: center; } } } } &.amount { width: var(--basketAmountWidth); } &.desc { min-width: unset; & .name { flex: 1; height: 100%; align-content: center; } & .comments { height: 100%; & .commentsPreview { position: absolute; height: 100%; width: calc(100% - var(--iconWidth) - 2 * var(--iconPadding)); background-color: var(--background); left: -100%; top: 0; right: 0; bottom: 0; transition: left var(--defaultTransitionTime) var(--defaultTransitionMethod); display: flex; cursor: initial; --_hoverBG: var(--background) !important; & .commentSection { flex: 1; padding: var(--gapSM); overflow: auto; display: flex; flex-direction: column; & :is(.key, .value) { width: fit-content; padding-inline-end: var(--gapS); } } & .edit { height: 100%; display: flex; align-items: center; } } &:has(.preview.show) { & .commentsPreview { left: 0%; } } & .preview.show { & i::before { content: "\f410"; } } } &:has(.comments) { padding-block: 0; } & .name { max-width: 100%; } & [class^="Text_"] { text-wrap: nowrap; overflow: clip; text-overflow: ellipsis; } } } &>a { height: var(--_basketRowHeight); } &:has(.deleting, .deleted) { overflow: hidden; } &.deleting { position: relative; display: flex; margin-left: -100%; opacity: 0; background-color: unset !important; } &.deleted { max-height: 0px !important; padding: 0px; margin-block: 0 !important; overflow: hidden; background-color: unset !important; } & .Text_Name { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } & .amountINPUT { flex-direction: column; align-items: center; & .input-group { width: fit-content; margin-inline: var(--basketRowPadding); } } & .amountTEXT { justify-content: center; gap: var(--gapM); } &:nth-child(2n - 1) { background-color: var(--secondLineColor); } &:nth-child(2n) { background-color: var(--firstLineColor); ; } &.newLineAlert:not(.lineAdded) { animation: newItemAlert .5s linear; } &.lineAdded { max-height: 0px; &.newLineAlert { margin-block: 0px; } } & i { width: var(--iconWidth); text-align: center; } } } & .desc { display: flex; position: relative; overflow: hidden !important; flex-direction: row; flex-wrap: nowrap; flex: 1; } & .image { width: calc(var(--_basketRowHeight) - 2 * var(--basketRowPadding)); margin-inline: var(--basketRowPadding); padding-inline: 0 !important; } } & .actionTop, .actionBottom { display: flex; gap: var(--gapS) var(--gapM); & .btn-success { margin-inline-start: auto; } & .btn-secondary { display: flex; align-items: center; & i { font-size: 1.2rem; margin-inline: 1rem } } } &:not(:has(.basketRowLines > .basketRowLine)) { & :is(.goToOrderBtn, .basketRowHeader, .basketRowFooter) { opacity: 0; max-height: 0; padding: 0; overflow: hidden; } & .emptyBasketText { display: block; } & .favoriteSection { display: none; } & .actionTop { display: none; } } @media(max-width: 1023px) { & .basketTableSection { & .basketRowHeader div { display: none; } & .basketRowLines { & .basketRowLine { & .desc { width: calc(100% - var(--_basketRowHeight) - 2 * var(--gapL) - var(--iconWidth)); flex: unset !important; } &>:not(.image, .desc, .actions_record_delete) { --_basketRowHeight: calc(var(--interactHeight) + 2 * var(--basketRowPadding)); order: 1; } & .amountINPUT { flex-direction: row; min-width: max-content; } & [class*="price"] { padding-inline: var(--gapS); } & .amount { margin-inline-end: auto; } &:has(.noDiscount) :is(.priceUnit, .noDiscount) { display: none; } } } } & .actionBottom { order: 2; text-align: center; } & .actionTop { order: 1; } } } .basketRowFooter, .basketRowHeader { display: flex; opacity: 1; transition: opacity var(--defaultTransitionTime) var(--defaultTransitionMethod); padding-block: var(--gapM); border-radius: var(--buttonBorderRadius, var(--buttonRadius)); background-color: var(--accentLight); color: var(--onAccentLight, var(--onBackground)); &.basketRowHeader { --fontWeight: var(--fontWeightTableHeader, var(--fontWeightH2)); & div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } & [class*="price"] { width: var(--basketPriceWidth); } & .amount { width: var(--basketAmountWidth); } & .image { height: 0 !important; } & .actions { width: calc(2 * var(--gapL) + var(--iconWidth)); } } &.basketRowFooter { flex-direction: column; padding-inline: var(--basketRowPadding); & .row { width: 100%; justify-content: space-between; gap: var(--gapM); & * { width: fit-content; } &:last-child { --fontWeight: bold; } } } &.basketRowHeader { &>div { padding-inline: var(--gapS); } } } .dynBasketLine.showFieldTrue { position: relative; display: inline-block; & input { max-width: 4.5rem; text-align: end; padding-inline-end: 2.5ch; } & span { position: absolute; top: 0; right: var(--gapSM); height: 100%; display: flex; align-items: center; } } .salesQuoteSection, .newFavList, .favoriteSection { display: flex; flex-wrap: wrap; gap: var(--gapM); width: fit-content; position: relative; } .salesQuoteSection, .favoriteSection, .lotSection, .newFavList { & .actions { display: flex; gap: var(--gapM); } & .dropdown { display: none; position: absolute; width: max-content; max-width: 250px; background-color: var(--background); border-radius: var(--buttonBorderRadius, var(--buttonRadius)); box-shadow: var(--shadowLvl2); padding: var(--gapM); &.lotDropdown { padding-top: var(--gapXL); cursor: default; } &.favoritesDropdown { right: 0; top: calc(100% + var(--gapM)); } } &:has(.showDropdown:not(.loading)) { & .dropdown { display: block; z-index: 999; & ul { margin-bottom: 0; display: flex; flex-direction: column; gap: var(--gapS); & li { display: flex; justify-content: space-between; gap: var(--gapS); align-items: center; &.createListSection { display: flex; flex-direction: column; gap: var(--gapS); & .newFavListForm { display: none; flex-direction: column; gap: var(--gapS); align-items: end; width: 100%; & input, button { width: fit-content; max-width: 100%; } } &:has(.editName) { & .editName { min-height: unset; max-height: 0; padding-block: 0 !important; overflow: clip; } & .newFavListForm { display: flex; } } } } } } } &.newFavList { flex-wrap: nowrap; } } .lotDropdown { position: absolute; display: flex !important; flex-direction: column; inset: 0 0 auto auto; gap: var(--gapM); min-width: 100%; max-width: 100%; width: 100%; overflow: clip; transition: max-height .5s ease-in, opacity .7s ease-out !important; overflow: auto; & .closeButton { position: absolute; display: flex; align-items: center; justify-content: center; margin-inline-start: auto; inset: 0 0 auto auto; height: var(--gapXL); width: var(--gapXL); cursor: pointer; --_hoverBG: var(--errorOverlay); } & .lotContainer { display: grid; grid-template-columns: 1fr auto auto; gap: var(--gapS) var(--gapM); & input { padding-inline: var(--gapXS); grid-column: 2; min-width: 5ch; max-width: 5ch; } & span { grid-column: 1; &.lotInv { grid-column: 3; } } } & button { margin-inline-start: auto; min-height: 2rem; max-height: 2rem; } &.hiding { max-height: 0 !important; opacity: 0; overflow: clip; } } .modal { color: black; & .form-control { background-color: white !important; border: 1px solid #ced4da !important; color: #212529 !important; } } .modal-commentline { & .modal-dialog { max-width: min(calc(100vw - 2 * var(--gapL)), 1024px); width: fit-content; margin-inline: auto; & .cloneRow { display: flex; gap: var(--gapL); & .desc { width: unset; flex: 4; & label { width: 100%; height: 100%; } } & .field { flex: 3; &:has(span) .fileInputWrapper { display: flex; position: relative; align-items: center; justify-content: center; overflow: clip; border: var(--inputBorder); border-radius: var(--buttonBorderRadius); box-shadow: var(--inputShadow); --fontSize: 14px; & input { opacity: 0; padding: 0; ; } & span { position: absolute; inset: auto var(--gapM) auto auto; text-align: end; pointer-events: none; } &::before { content: "Browse..."; position: absolute; inset: 0 auto 0 0; cursor: pointer; display: flex; align-items: center; padding: var(--buttonPadding); background-color: var(--buttonBg); color: var(--onButton); border-inline-end: 1px solid; } } } } } } .salesQuoteSection.renameMode { position: relative; } .salesQuoteSection.renameMode #selectUserSalesQuote { display: none; height: 2.2rem; } .salesQuoteSection.renameMode #salesQuoteDescription { display: unset !important; } .salesQuoteSection.renameMode::before { content: "Enter = Save, Esc = Cancel"; font-size: var(--fontSizeSmall); color: var(--inputPlaceholder, var(--onSearchPlaceholder)); position: absolute; bottom: 100%; left: 0; display: block; } .salesQuoteSection.renameMode #renameUserSalesQuote i::before { content: "\f0c7" } .salesQuoteSection.renameMode #deleteUserSalesQuote i::before { content: "\58" } #preflightform { position: fixed; z-index: 10000; inset: 10%; & iframe { overflow: auto; background-color: white; max-height: 100%; } } .overlay-form { display: flex; position: fixed; top: calc(50vh - 150px); left: calc(50vw - min(400px, 100%)/2); flex-direction: column; z-index: 10000; background: white; width: min(400px, 100%); padding: var(--gapL); border-radius: var(--popupBorderRadius); transition: opacity var(--defaultTransitionTime) var(--defaultTransitionMethod); & #closePopup { width: fit-content; cursor: pointer; margin-inline-start: auto; } & #payment-submit { margin-top: var(--gapL); } & label { --fontSize: 15px; } & input, select, .flex-microform { height: 47px !important; padding: 12px; outline: none !important; transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out; &:focus, &:focus-visible, &.flex-microform-focused { border: 1px solid #0b81fa !important; box-shadow: 0px 0px 0px 3px #0b82fa54; } } & .form-row { display: flex; gap: 0 1rem; & .form-group { width: calc(50% - var(--gapSM)); } &:not(:first-child) { margin-top: var(--gapSM); } } & .form-group { display: flex; flex-direction: column; width: 100%; height: fit-content; & label { margin-bottom: .25rem; } & input, select { border-radius: 5px; border: 1px solid #d1d1d1; } } } /* ITEM COMPARE PAGE */ .pageViewItemCompare { --tempTransitionTime: var(--defaultTransitionTime); --borderLightInline: var(--borderLight); --borderLightBlock: none; --altRowBG: var(--surfaceLight); --chipMargin: calc(var(--gapS) * -1); --gutterCount: 2; --_itemCount: var(--_compareSectionItemCount); --itemCompareColGap: var(--gapXL); --controlsInset: calc(var(--itemCompareColGap) * 2 / 3); --itemCompareLegendMinWidth: 200px; &:not([class*="--m"]) { --borderLightInline: none; --borderLightBlock: var(--borderLight); --cardBorderRadius: 0px; --itemCompareColGap: 0px; --altRowBG: inherit; --altColBG: var(--surfaceLight); --chipInset: 0 auto auto 0; --chipInsetHover: 0 auto auto 0; --chipMargin: 0px; --chipBorderRadius: 0 0 var(--gapS) 0; --fontSizeH6: .9rem; --itemCompareLegendPosition: absolute; --controlsInset: var(--gapSM); } &:not([class*="--m"]), &:has(.compareTable.sideScroll) { --lineHeightH5: 1.25; --itemCompareLegendWidth: 0px; --itemCompareLegendMinWidth: 0px; --itemCompareRowPadding: calc(var(--fontSizeH5) + 2 * var(--itemCompareLegendPaddingBlock)) var(--gapSM) var(--gapSM) var(--gapSM); --itemCompareLegendBG: transparent; --itemCompareLegendCLR: var(--onBackground); --itemCompareLegendPaddingBlock: var(--gapSM); --itemCompareLegendPaddingInline: 0; --headerTop: 0; } &[class*="--m"]:has(.compareTable.sideScroll) { --_itemCount: calc(var(--_compareSectionItemCount) + 1); --_itemCompareFullWidth: 100vw; --gutterCount: 1; --headerLeft: var(--itemCompareColGap); --itemCompareColGap: calc(var(--gapXL) / 2); --controlsInset: calc(var(--itemCompareColGap) * 4 / 3); --tableMarginLeft: calc(-1 * (var(--itemCompareLegendMinWidth) + var(--itemCompareColGap))) } --_itemCompareFullWidth: calc(100vw - var(--itemCompareLegendWidth, var(--itemCompareLegendMinWidth))); --_galleryColGap: var(--itemCompareColGap); --_itemW: calc((var(--_itemCompareFullWidth) - ((var(--_itemCount) + var(--gutterCount)) * var(--_galleryColGap))) / var(--_itemCount) - 0.01px); & .OuterContainer { max-width: 100vw; & .compareSection { position: relative; & .headerContainer { width: var(--_maxContainerW); margin-inline: auto; flex-direction: column; } &:has(.sideScroll) .tableControls { & .left { display: flex; } } &.overflow .tableControls { & .right { display: flex; } } & .tableContainer { overflow-x: hidden; & .noTransitions { --tempTransitionTime: 0s; & * { transition: none !important; } } & *:not(.DiscountPercentage) { transition: all var(--tempTransitionTime) var(--defaultTransitionMethod); } & .compareTable { display: none; flex-direction: column; padding-block: var(--gapL) !important; padding-inline: var(--itemCompareColGap); width: fit-content; margin-inline-start: var(--tableMarginLeft, 0); & thead { & tr { & th { position: relative; padding: 0; border-block: none; &[scope="row"] { min-width: var(--itemCompareLegendMinWidth); } &[scope="col"] { border-inline-start: var(--borderLight); border-inline-end: var(--borderLightInline); max-width: var(--itemCompareColWidth, var(--_itemW)); min-width: var(--itemCompareColWidth, var(--_itemW)); vertical-align: top; &:has(.ProductHeader) { border-top: var(--borderLight); border-radius: var(--cardBorderRadius) var(--cardBorderRadius) 0 0; } & .ProductHeader { padding-top: var(--gapL); position: relative; display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: auto 1fr auto; height: 100%; &:hover { --chipShadow: var(--chipShadowHover); --chipInset: var(--chipInsetHover); } & .remove-btn { position: absolute; inset: 0 0 auto auto; padding: var(--gapSM) var(--gapM); opacity: var(--opacityLight); transition: var(--linkTransition); &:hover { opacity: 1; } } & .ImageBox { grid-column: var(--itemCompareImageCol, 1); grid-row: var(--itemCompareImageRow, 1); padding: var(--itemCompareImagePadding, var(--gapS) var(--gapM)); & img { width: 100%; } } & .NameBox { grid-column: var(--itemCompareNameCol, 2); grid-row: var(--itemCompareNameRow, 1); padding: var(--itemCompareInfoPadding, var(--productInfoPadding)); align-content: center; & .ProductName { margin-bottom: 0; } } & .PriceBox { grid-column: var(--itemComparePriceCol, span 2); grid-row: var(--itemComparePriceRow, 2); padding: var(--itemCompareInteractPadding, var(--productInteractPadding)); & .ProductPrice { display: flex; justify-content: center; margin: var(--itemComparePriceMargin, var(--gapM)); } & .DiscountPercentage { margin-top: var(--chipMargin); } } } & .UnitOfMeasureCode { min-width: max-content; } } } } } & tbody { border-block: none; & tr { &:nth-child(2n+1) { --cellBG: var(--altRowBG); } &:nth-child(2n) { --altRowBG: var(--background); } & th { position: var(--itemCompareLegendPosition, sticky); z-index: 999; border-block: none; min-width: max(var(--itemCompareLegendWidth, var(--itemCompareLegendMinWidth)), var(--itemCompareLegendMinWidth)); padding-block: 0; background-color: var(--itemCompareLegendBG, var(--surfaceVariant)); color: var(--itemCompareLegendCLR, var(--onSurfaceVariant, var(--onSurface))); left: var(--headerLeft, calc(-1 * var(--cardBorderRadius))); padding-inline: 0; & h5 { padding-inline: var(--gapSM); padding-block: var(--itemCompareLegendPaddingBlock, 0px); text-wrap: nowrap; margin: 0; position: absolute; top: var(--headerTop, 50%); transform: translateY(var(--headerTop, -50%)); } } & td { padding: var(--itemCompareRowPadding, var(--gapSM)); ; border-top: var(--borderLightBlock); border-bottom: none; border-inline: var(--borderLightInline); position: relative; max-width: var(--itemCompareColWidth, var(--_itemW)); min-width: var(--itemCompareColWidth, var(--_itemW)); &:nth-child(2n+1) { background-color: var(--altColBG, var(--altRowBG)); } background-color: var(--cellBG); } &:first-child { & th { border-radius: var(--cardBorderRadius) var(--cardBorderRadius) 0 0; } } &:last-child { & th { border-radius: 0 0 var(--cardBorderRadius) var(--cardBorderRadius); } & td { border-bottom: var(--borderLight); border-radius: 0 0 var(--cardBorderRadius) var(--cardBorderRadius); } } } } & tr { display: flex; flex-direction: row; border-block: none; gap: var(--itemCompareColGap); &> :is(th, td) { &.deleting { opacity: 0; &+ :is(th, td) { display: block; margin-inline: calc(-1 * (var(--_itemW) + var(--itemCompareColGap, var(--gapXL)))) var(--itemCompareColGap); &+ :is(th, td) { display: block; margin-inline-start: calc(-1 * var(--itemCompareColGap, var(--gapXL))); } } &.deleted { position: absolute; margin-inline: calc(-1 * var(--itemCompareColGap, var(--gapXL))); &+ :is(th, td) { display: table-cell !important; margin-inline: unset !important; } } } } } } & .tableControls { position: absolute; inset: calc(var(--_itemW) / 1.75) var(--controlsInset) auto var(--controlsInset); display: none; & .right { margin-inline-start: auto; } & div { display: none; justify-content: center; align-items: center; width: var(--sideControlsTogglerHeight); height: var(--sideControlsTogglerHeight); border-radius: 50%; background-color: var(--buttonBg); color: var(--onButton); z-index: 999; --_hoverBG: var(--buttonBgActive); --_hoverCLR: var(--onButtonActive); &[disabled='disabled'] { background-color: var(--buttonBgDisabled); color: var(--onButtonDisabled); --_hoverBG: var(--buttonBgDisabled); --_hoverCLR: var(--onButtonDisabled); cursor: default; } } } } &:has([data-index]:not(.deleting)) { & .compareTable, .tableControls { display: flex; } & .compareEmpty { display: none; } } } } } /* FAVOURITES PAGES */ .favorites-button { position: absolute; inset: 0 0 auto auto; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .priceDiscount { height: fit-content; } body.loading { pointer-events: none } body.loading :is(button, button.btn-success, button.goToOrderBtn, .IncDecSection > div, .addToCartAni) { opacity: var(--opacityLight) !important; pointer-events: none; } .checkoutDiv { display: flex; flex-wrap: wrap; gap: var(--gapL); & .checkoutCol1 { flex: 2; min-width: min(100%, 400px); & .orderInfoRow { margin-block: var(--gapSM); & label { align-content: center; } &>div:nth-child(3) { padding-inline-start: var(--gapSM); } } } & .checkoutCol2 { flex: 3; min-width: min(100%, 600px); } } .basketRowLines_QuickAddToCart { --_maxContainerW: 100%; display: flex; max-height: 0px; padding: 0 0 0 1rem; overflow: clip; background-color: var(--accentFaded); border-radius: var(--popupBorderRadius); width: fit-content; gap: 1rem; align-items: start; & .container { flex-direction: row; align-items: center; min-height: 100px; height: 100px; position: relative; align-self: start; gap: var(--gapM); & .desc, .interact { margin-block: var(--gapSM); display: flex; flex-direction: column; gap: var(--gapSM); & .RowQuickAddToCart_quicksku { align-content: center; &* { position: relative; } & .quickadderror { position: absolute; display: none; left: 0; right: 0; top: -100%; margin-top: calc(-1* var(--gapM)); background-color: var(--errorFaded); padding: var(--gapS); border-radius: var(--popupBorderRadius); font-size: var(--fontSizeSmall); z-index: 1; } } } & .interact {} } } /*B2A*/ .modal-salesquotes .item-row { display: flex; justify-content: space-between; } .modal-salesquotes .item-row.no span { font-weight: 700; } .modal-salesquotes .modal-body { display: flex; flex-direction: column; gap: var(--gapS); padding: var(--gapM); } .modal-salesquotes .modal-body>.row { border-radius: var(--cardBorderRadius); padding: var(--gapM) var(--gapL); background-color: var(--accentFaded); --_hoverBG: var(--accentLight); } .modal-salesquotes .modal-body a { --_hoverCLR: var(--onBackground); } /* SPECIFICATION PAGE */ .pageViewSpecificationPage { & .viewSection { display: grid; grid-template-columns: var(--_specColTemplate); grid-column-gap: var(--specColGap); grid-row-gap: var(--specRowGap); & .SpecName { grid-column: var(--_specNameCol); grid-row: var(--_specNameRow); } & .SpecImage { grid-column: var(--_specImageCol); grid-row: var(--_specImageRow); } & .SpecDescription { grid-column: var(--_specDescriptionCol); grid-row: var(--_specDescriptionRow); align-content: var(--specDescriptionAlign); padding: var(--specDescriptionPadding); } & .SpecProducts { grid-column: var(--_specProductsCol); grid-row: var(--_specProductsRow); } } } /*SWITCH CUSTOMER*/ .pageViewSalesPerson { --secondLineColor: hsl(from var(--surface) h s l / .05); & main .OuterContainer { --accountShadow: none; & .table-responsive { --tableRowDisplay: table-row; --tableLinePadding: var(--gapSM); --tableLineMinCellWidth: initial; --tableOverflow: auto; --tableTextWrap: wrap; --smallDisplayHeader: table-cell; --tableHeaderBg: transparent; } width: 100%; max-width: unset; min-height: calc(100vh - var(--_topHeight)); & .customersContainer { margin-inline: auto; width: var(--_maxContainerW); & .table-responsive { min-width: unset; & .actionTop { display: flex; margin-block: var(--gapM); align-items: center; flex-wrap: wrap; justify-content: space-between; gap: var(--gapM); & .rowsInput { display: flex; align-items: center; gap: var(--gapM); text-wrap: nowrap; } & .search { width: fit-content; min-width: min(100%, 320px); position: relative; & button { position: absolute; inset: 0 0 0 auto; } } } & .salesCustomerList { display: block; & thead { border-bottom: 2px solid var(--onBackground); } & tbody { display: table-row-group; & .customerRow { cursor: pointer; position: relative; display: none; } & .customerRow span { display: inline-flex; overflow: hidden; background-color: transparent; } } &:not(.loading) { & .inPage { display: table-row; & td { height: unset; } &:not(.active) { --_hoverBG: var(--accentFaded); } &.blocked { background-color: var(--errorOverlay); color: firebrick; --_hoverBG: var(--errorOverlay); --_hoverCLR: firebrick; } &.blocked td { cursor: default; text-decoration: line-through; } &.warning { background-color: var(--errorOverlay); --_hoverBG: var(--errorOverlay); } } } &.loading { & tbody { & .customerRow { &:nth-child(-n + 30) { display: table-row; background-color: unset !important; } } & .customerRow span { max-height: calc(var(--fontSize) * var(--lineHeight)); min-width: 2rem; max-width: 85%; color: transparent; border-radius: 2rem; background: linear-gradient(90deg, #eeeeee, #dddddd, #eeeeee, #dddddd, #eeeeee, #dddddd, #eeeeee); background-size: 300px 100%; animation: loading-bg 4s linear infinite; } } } } & .customerNo { width: 10%; } & .customerName { width: 40%; } & .customerAddress { width: 20%; } & .customerPC { width: 10%; } & .customerCity { width: 12.5%; } & .customerCountry { width: 7.5%; } & .showSalesOrders { & .customerNo { width: 5%; } & .customerName { width: 30%; } & .customerAddress { width: 15%; } & .customerPC { width: 5%; } & .customerCity { width: 10%; } & .customerCountry { width: 5%; } & .orderCount { width: 7.5%; } & .orderValue { width: 7.5%; } & .quoteCount { width: 7.5%; } & .quoteValue { width: 7.5%; } } } } & .pageSelect { display: flex; justify-content: center; align-items: center; gap: var(--gapM); & input { width: 6ch; } } } &.quoteActive { & .customersContainer { & tbody td span { text-overflow: ellipsis; word-wrap: break-word; overflow: hidden; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; border: none; } } & .drawer-salesquotes { right: 0; } &:has(.drawer-salesquotes.loading) .salesCustomerList tr { pointer-events: none; } } } .drawer-salesquotes { height: calc(100dvh - var(--_topHeight)); top: var(--_topHeight); right: -100vw; width: min(max(460px, 30vw), 100vw); max-width: min(max(460px, 30vw), 100vw); display: flex; flex-direction: column; position: fixed; background-color: var(--background); overflow: hidden; box-shadow: var(--_navShadow); padding: 0 var(--gapL); box-shadow: var(--shadowLvl3); transition: top var(--defaultTransitionTime) var(--defaultTransitionMethod), right .5s ease-out, padding var(--defaultTransitionTime) var(--defaultTransitionMethod), max-width var(--defaultTransitionTime) var(--defaultTransitionMethod); --linkTransition: all var(--defaultTransitionTime) var(--defaultTransitionMethod), right var(--defaultTransitionTime) var(--defaultTransitionMethod), width var(--defaultTransitionTime) var(--defaultTransitionMethod); & .header { text-align: end; padding-block: var(--gapM); margin-bottom: 0; border-bottom: 1px solid currentColor; } & [class^="contentSection"] { display: flex; opacity: 0; order: 0; max-height: 0; overflow: visible; flex-direction: column; transition: opacity .3s ease-out; pointer-events: none; & .divider { margin-top: var(--gapM); font-weight: var(--fontWeightH2); } & .linesSection { padding-inline: var(--gapM); border-left: 2px solid var(--primary); & .sectionHeader { display: flex; flex-wrap: wrap; & button { min-width: fit-content; margin-inline-start: auto; } } & .linesBody { display: flex; flex-direction: column; gap: var(--gapS); margin-block: var(--gapM); & .salesQuote, .salesOrder { background-color: var(--accentFaded); border-radius: var(--popupBorderRadius); display: flex; flex-wrap: wrap; padding: var(--gapS) var(--gapM); --_hoverBG: var(--accentLight); & .quoteDate, .orderDate { flex-basis: 70%; font-weight: var(--fontWeightH2); } & .quoteNo, .orderNo { margin-inline-start: auto; } & .quoteLines, .orderRDD { flex-basis: 50%; &.quoteLines::before { content: "Lines: "; } &.orderRDD::before { content: "RDD: "; } &.noRDD { opacity: 0; } } & .quoteTotal, .orderTotal { flex-basis: 50%; text-align: end; &::before { content: "Total: "; } } &.salesOrder:has(.isLate) { background-color: var(--errorOverlay); } } } } & .ordersHeader { display: flex; justify-content: space-between; align-items: center; & label { display: flex; gap: var(--gapM); } } } & .onlyShowLate { opacity: 0; z-index: 1; position: absolute; inset: auto var(--gapL) var(--gapL) auto; padding: var(--cardPadding); margin-inline: auto 1rem; width: fit-content; padding-inline: var(--gapL); display: flex; gap: var(--gapM); transition: opacity .3s ease-in; background-color: var(--cardBackground); color: var(--onCard); --_hoverBG: var(--cardBackground); --_hoverCLR: var(--onCard); border-radius: var(--buttonBorderRadius); border: var(--buttonBorder); box-shadow: var(--shadowLvl5); } &:has(.quotesTab.active) .contentSectionQuotes { opacity: 1; transition: opacity .3s ease-in; max-height: 100%; order: 1; pointer-events: all; overflow: auto; } &:has(.ordersTab.active) { & .contentSectionOrders { opacity: 1; transition: opacity .3s ease-in; max-height: 100%; order: 1; pointer-events: all; overflow: auto; padding-bottom: 3var(--gapSM); } & .onlyShowLate { opacity: 1; } } &:not(:has(.tab-control)) .contentSectionQuotes { opacity: 1; transition: opacity .3s ease-in; max-height: 100%; pointer-events: all; overflow: auto; } & .closeDrawer { position: absolute; top: var(--gapS); left: var(--gapS); padding: var(--gapS); } &.loading { & .tab-control, [class^="contentSection"], .onlyShowLate { display: none; } & .header { color: transparent; } & .infoSpan::after { content: ""; position: absolute; width: 4rem; height: 4rem; top: 30%; left: calc(50% - 2rem); border: 12px solid; border-color: white transparent white transparent; border-radius: 100vh; animation: loading-ring 1.2s linear infinite; } } &:not(:has(.ordersHeader)) .onlyShowLate { display: none; } &:has(.onlyShowLate input:checked) { & .salesOrder:not(:has(.isLate)) { display: none !important; } } & .infoSpan { position: absolute; top: calc(30% + 5rem); left: 0; width: 100%; color: white; font-size: var(--fontSizeH2); font-weight: var(--fontWeightH2); letter-spacing: var(--letterSpacingH2); text-align: center; } } .pageViewSalesPerson[class*="--xxl"] { & .OuterContainer:has(.drawer-salesquotes) { padding-block: 0 !important; height: calc(100vh - var(--_topHeight)); flex-direction: row; max-width: 100vw; overflow: clip; & .customersContainer { height: fit-content; overflow: auto; height: 100%; flex: 1; padding: var(--gapM); & .table-responsive, .header { width: var(--_maxContainerW); margin-inline: auto; } } & .drawer-salesquotes { position: relative; height: 100%; top: unset; right: unset; &>*:not(button, label) { width: calc(min(max(460px, 30vw), 100vw) - 2 * var(--gapL)); } } } &:not(.quoteActive) .drawer-salesquotes { padding-inline: 0; max-width: 0; } } /* ACCOUNT */ [class*="pageViewAccount"] { & svg { top: -100vh; } & #accountHeader { display: flex; justify-content: space-between; } & .viewSection { gap: var(--gapM); } } /*MISC*/ .GalleryTitle .GalleryOptsBar .sectionLayout { width: fit-content; display: flex; justify-content: end; gap: var(--gapSM); } :is(.VariantProductsTable, .favItem, .relatedProductsTable, .ProductMatrixTable, .specProductsTable) :is(td, th) { vertical-align: middle; } .ProductBCVariantDropDown { display: flex; flex-direction: column; gap: var(--gapM); } .layoutButton1 { & i::before { content: var(--layoutIconContent1); } } .layoutButton2 { & i::before { content: var(--layoutIconContent2); } } .layoutButton3 { & i::before { content: var(--layoutIconContent3); } } .collapseMainNav .languageFlags { opacity: 0; inset: auto auto 0 0; transition: opacity .3s; } .collapseMainNav #lang-dropdown::after { transform: rotate(180deg) } .collapseMainNav:has(#main_nav.show) .languageFlags { opacity: 1; } .languageFlags { position: fixed; right: var(--gapS); top: var(--_b2aHeight); z-index: 9999; & .dropdown-menu { min-width: unset; right: var(--gapM); overscroll-behavior: none; } & #lang-dropdown { border: none; background-color: transparent !important; padding: var(--gapM); box-shadow: none; &::after { color: var(--onBackground); } } } #language_menu { background-color: var(--accentLight); } #language_menu { padding-block: var(--gapS); } #language_menu .dropdown-item { width: 100%; display: flex; justify-content: center; padding-block: var(--gapS); } .lang-option { --_hoverBG: var(--accent); } .attention { color: var(--attentionClr, var(--primary)); --fontWeight: var(--fontWeightAttention, var(--fontWeightH6)); --fontSize: var(--fontSizeAttention, var(--fontSizeH6)); } #ShipmentMethodSelector, #deliveryDate { cursor: pointer; } .float-end { margin-inline-start: auto; } #AcceptTerms { margin-inline: var(--gapS); } #body_overlay { display: none; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: var(--overlayBG); z-index: 9999; & .infoSpan { display: none; } } body:is(.loading, .processing) { &.processing { & #body_overlay { display: block; animation: fadeIn .3s linear; } &.loading { & #body_overlay { &:after { content: ""; position: absolute; width: 4rem; height: 4rem; top: 30%; left: calc(50% - 2rem); border: 12px solid; border-color: white transparent white transparent; border-radius: 100vh; animation: loading-ring 1.2s linear infinite; } & .infoSpan { display: block; position: fixed; top: calc(30vh + 5rem); left: 0; width: 100vw; color: white; font-size: var(--fontSizeH2); font-weight: var(--fontWeightH2); letter-spacing: var(--letterSpacingH2); text-align: center; } } } } &.processing:has(.overlay-form:not(.d-none)) { & #body_overlay { & .infoSpan, &::after { display: none; } } & .overlay-form:not(:has(input, iframe)) { opacity: .8; &:after { margin-inline: auto; opacity: 1; transition: opacity var(--defaultTransitionTime) var(--defaultTransitionMethod); content: ""; width: 4rem; height: 4rem; border: 12px solid; border-color: var(--accent) transparent var(--accent) transparent; border-radius: 100vh; animation: loading-ring 1.2s linear infinite; } } } &.loading:not(.processing) { & .basketTableSection { position: relative; &:after { content: ""; position: absolute; inset: 0; background-color: #ffffff99; transition: background-color var(--defaultTransitionTime) var(--defaultTransitionMethod); @starting-style { background-color: transparent; } } & .basketRowLines { position: relative; &:after { content: ""; display: block; position: absolute; width: 4rem; height: 4rem; top: 5rem; left: calc(50% - 2rem); border: 12px solid; border-color: var(--onBackground) transparent var(--onBackground) transparent; border-radius: 100vh; animation: loading-ring 1.2s linear infinite; z-index: 999; } } } & .PriceBox { opacity: 0.35; } & .btn { opacity: 0.5; } } &.pageViewItemCompare .UOMBox:not(:first-child) { opacity: 0; } } /* nice select */ .niceSelect { border-radius: var(--buttonBorderRadius); padding: var(--buttonPadding); -webkit-tap-highlight-color: transparent; box-sizing: border-box; clear: both; cursor: pointer; float: left; font-family: inherit; font-weight: normal; outline: none; position: relative; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; white-space: nowrap; width: auto; -webkit-transition: all var(--defaultTransitionTime) var(--defaultTransitionMethod); transition: all var(--defaultTransitionTime) var(--defaultTransitionMethod); & .option, li { display: flex; padding: var(--buttonPadding); align-items: center; cursor: pointer; --fontSize: var(--fontSizeSmall); --fontWeight: 400; list-style: none; outline: none; text-align: left; -webkit-transition: all 0.2s; transition: all 0.2s; border-radius: 4px; gap: var(--gapM); & .valuetext { width: fit-content; overflow: clip; text-overflow: ellipsis; } & .stock { margin-inline-start: auto; font-weight: normal; } & .pricetag { float: right; font-weight: normal; } & .stocktext { display: none; } &.selected { font-weight: bold; } &.disabled { background-color: transparent; color: #90a1b5; cursor: default; } } &::after { display: block; position: absolute; inset: 0 0 0 auto; line-height: 1.75; padding-inline: var(--gapXS); content: '\f078'; font-family: "Font Awesome 5 Free"; pointer-events: none; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; font-weight: 700; scale: .55; } &.open { &::after { -webkit-transform: rotate(-180deg); -ms-transform: rotate(-180deg); transform: rotate(-180deg); } & .list { opacity: 1; pointer-events: auto; -webkit-transform: scale(1) translateY(0); -ms-transform: scale(1) translateY(0); transform: scale(1) translateY(0); overflow: auto; } } &.disabled { border-color: #e7ecf2; color: #90a1b5; pointer-events: none; &::after { border-color: #cdd5de; } } &.wide { width: calc(var(--productBuySectionMinWidth) - 2 * var(--gapXL)); max-width: calc(var(--productBuySectionMaxWidth) - 2 * var(--gapXL)); & .list { left: 0 !important; right: 0 !important; } } &.right { float: right; & .list { left: auto; right: 0; } } &.small { font-size: 12px; height: 36px; line-height: 34px; &::after { height: 4px; width: 4px; } & .option { line-height: 34px; min-height: 34px; } } & .list { --fontSize: 16px; --lineHeight: 1.6; margin-top: var(--gapS); max-height: 50vh; padding: var(--gapS); background-color: #fff; border-radius: var(--buttonBorderRadius); box-shadow: var(--shadowLvl2); border: 1px solid #d8e2ef; box-sizing: border-box; opacity: 0; overflow: hidden; pointer-events: none; position: absolute; top: 100%; left: 0; -webkit-transform-origin: 50% 0; -ms-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform: scale(0.75) translateY(-21px); -ms-transform: scale(0.75) translateY(-21px); transform: scale(0.75) translateY(-21px); -webkit-transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; transition: all 0.2s cubic-bezier(0.5, 0, 0, 1.25), opacity 0.15s ease-out; z-index: 100000; &:hover .option:not(:hover) { background-color: transparent !important; } } & .current { display: block; overflow: clip; text-overflow: ellipsis; } } .mobileTrue { & .niceSelect { & .list { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 2 * var(--gapL)); max-width: calc(100vw - 2 * var(--gapL)); overflow: auto; } } &:has(.niceSelect.open) #body_overlay { display: block; & span { display: none; } } } /*Keyframes*/ @keyframes fadeIn { 0% { opacity: 0 } 100% { opacity: 1 } } @keyframes loading-ring { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes newItemAlert { 0% { transform: scale(1); } 50% { transform: scale(1.025); background-color: var(--accentLight); } 100% { transform: scale(1); } } @keyframes loading-bg { 0% { background-position-x: 0; } 100% { background-position-x: 300px; } } /*MEDIA PRINT ONLY*/ @media print { :root { width: 70.721vh; --_navbarHeight: var(--PRINT-navbarHeight); --fontSize: var(--PRINT-fontSize); --productColGap: var(--PRINT-sectionMargin); --productRowGap: var(--PRINT-sectionMargin); } /*hide*/ .pageViewProduct :is(.user-navbar, .breadcrumbSection, .ProductBuySectionWrap, .btn-download, #B2A, .languageFlags, .ProductLinks, .ProductRelated, nav .container > *:not(.logoSection), footer :is(.media, .terms), .ProductImage > :not(.mainImageFrame)), .ProductLoginSectionWrap { display: none !important; } /*variables*/ .pageViewProduct main { min-height: unset; height: calc(100vh - var(--_navbarHeight) - var(--PRINT-footerPrintHeight)); overflow: hidden; } .pageViewProduct .navbar { background-color: var(--PRINT-navbarBG); padding: var(--PRINT-pageMargin) !important; } .pageViewProduct footer { display: var(--PRINT-footerDisplay); padding: var(--PRINT-pageMargin) !important; height: var(--PRINT-footerPrintHeight); min-height: var(--PRINT-footerPrintHeight); max-height: var(--PRINT-footerPrintHeight); background-color: var(--PRINT-footerBG); } .pageViewProduct .navbar .container { justify-content: var(--PRINT-logoJustification); padding: var(--_navPadding) !important; } .pageViewProduct .viewSection { padding: var(--PRINT-pageMargin) !important; } h1, .header { padding: var(--PRINT-headerMargin) !important; text-align: var(--PRINT-headerJustification); font-size: var(--PRINT-titleSize) !important; } h2 { font-size: var(--PRINT-headerSize) !important; } h3 { font-size: var(--PRINT-subheaderSize) !important; } .pageViewProduct footer .info { display: var(--PRINT-footerCompanyDisplay); } .pageViewProduct footer .contact { display: var(--PRINT-footerContactDisplay); } .pageViewProduct .ProductImage { display: flex; align-items: var(--PRINT-imaageAlignment); } .pageViewProduct footer .container { justify-content: var(--PRINT-footerJustification); align-items: var(--PRINT-footerAlignment); } .pageViewProduct :is(.ProductInfoSectionWrap div[class*="Product"], .ProductDescription) { border-top: var(--PRINT-sectionBorder); padding-top: calc(var(--PRINT-sectionMargin) / 2) !important; margin-top: calc(var(--PRINT-sectionMargin) / 2) !important; } .miniNav { --_navbarHeight: var(--navbarHeight); } /*adjust*/ nav, .navbar, footer, .logoSection { position: relative !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; box-shadow: none !important; background-repeat: no-repeat !important; } .OuterContainer, .viewSection { height: 100% !important; max-height: 100% !important; min-width: 100% !important; height: 100%; } .B2ATrue { padding: 0; } .logoSection img { opacity: 0; } .pageViewProduct * { margin: 0 !important; padding: 0 !important; } .pageViewProduct .ProductImage .imagediv { display: block !important; } .pageViewProduct .viewSection>div:not(.ProductImage, .ProductNameHeader) { max-width: unset !important; min-width: unset !important; } } /*MEDIA SCREEN ONLY*/ @media screen { nav .logoSection { background: unset !important; } } /* ----- BOILERPLATE CSS ----- */