Skip to content

CSS Variables Reference

This table provides a list of all available CSS variables within the screets Product Search plugin, along with their descriptions and default values.

Example: Customizing Primary and Secondary Colors:

body .screets-product-search {
  --scxps--primary: #64CC98; /* Teal blue primary color */
  --scxps--secondary: #F0846F; /* Orange secondary color */


Variable NameDescriptionDefault Value
--scxps--text-primaryPrimary text color#141516 (dark gray)
--scxps--text-secondarySecondary text color#737384 (mid-gray)
--scxps--text-tertiaryTertiary text color#9595AC (light gray)
--scxps--text-disabledDisabled text color#bdc0c7 (very light gray)
--scxps--primaryBase color for primary elementsVaries (depends on user defined value or #64CC98 - teal blue)
--scxps--primary--solidSolid variant of primary color#ffffff (white)
--scxps--secondaryBase color for secondary elementsVaries (depends on user defined value or #F0846F - orange)
--scxps--secondary--solidSolid variant of secondary color#ffffff (white)
--scxps--linkBase color for linksVaries (depends on user defined value or #5246D0 - dark blue)
--scxps--link--solidSolid variant of link color#ffffff (white)
--scxps---markBackground color for highlighted text#ffe7b9 (light yellow)
--scxps--successColor for success messages#28a745 (green)
--scxps--warningColor for warning messages#ffc107 (yellow)
--scxps--dangerColor for error messages#dc3545 (red)
--scxps--button-colorBase color for buttons#e7e9ee (light gray)
--scxps--button-color--lightLighter variant of button color#f0f2f8 (very light gray)
--scxps--bg-colorBackground color of the plugin#fff (white)
--scxps--bg-color--lightLighter background color variant#FAFAFA (very light gray)
--scxps--border-colorColor of borders#D8D6F2 (light blue)
--scxps--border-radius--smallRadius for small rounded corners0.4rem
--scxps--border-radius--mediumRadius for medium rounded corners0.65rem
--scxps--border-radius--largeRadius for large rounded corners0.85rem


Variable NameDescriptionDefault Value
--scxps--font-size--xsmallFont size for very small text0.7rem
--scxps--font-size--smallFont size for small text0.875rem
--scxps--font-size--mediumFont size for standard text1rem
--scxps--font-size--largeFont size for large text1.25rem
--scxps--line-height--smallLine height for small text1.15
--scxps--line-height--mediumLine height for standard text1.35
--scxps--line-height--largeLine height for large text1.5
--scxps--font-weight--regularFont weight for regular text400 (normal)
--scxps--font-weight--boldFont weight for bold text600 (bold)
--scxps--font-weight--bolderFont weight for very bold text700 (bolder)


Variable NameDescriptionDefault Value
--scxps--icon--smallSize for small icons16px
--scxps--icon--mediumSize for medium icons19px
--scxps--icon--largeSize for large icons24px

Box Shadows

Variable NameDescriptionDefault Value
--scxps--box-shadow--smallApplies a small drop shadow effect0 1px 5px rgba(0, 0, 0, 0.16)
--scxps--box-shadow--mediumApplies a medium drop shadow effect0 3px 15px rgba(0, 0, 0, 0.16)
--scxps--box-shadow--largeApplies a large drop shadow effect0 3px 30px rgba(0, 0, 0, 0.16)


Variable NameDescriptionDefault Value
--scxps--popup-widthDefines the width of the search popupVaries (depends on user defined value or #{$breakpoint-lg})
--scxps--search-input--heightHeight of the search input field on desktop55px
--scxps--search-input--mobile-heightHeight of the search input field on mobile devices35px
--scxps--search-button--heightHeight of the search button40px


Variable NameDescriptionDefault Value
--scxps--spacing--xsmallDefines extra-small spacing0.5rem
--scxps--spacing--smallDefines small spacing0.65rem
--scxps--spacing--mediumDefines medium spacing1rem
--scxps--spacing--largeDefines large spacing1.35rem

Search Results View

Variable NameDescriptionDefault Value
--scxps--result-view--image--small-screen-sizeDefines image width on small screens40vw
--scxps--result-view--image--medium-screen-sizeDefines image width on medium screens60vw
--scxps--result-view--image--border-radiusInherits border radius from --scxps--border-radius--smallvar(--scxps--border-radius--small)
--scxps--result-view--price--colorDefines the color of the product pricevar(--scxps--text-primary)
--scxps--result-view--price--font-weightDefines the font weight of the product price700 (bold)
--scxps--result-view--original-price--colorDefines the color of the original product price (often used for strikethrough)var(--scxps--text-tertiary)
--scxps--result-view--discount--colorDefines the color of the discount percentagevar(--scxps--success)


Variable NameDescriptionDefault Value
--scxps--modal--backdrop-filterApplies a blur effect to the modal backdropblur(5px) or none