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 */
}

Colors

Variable Name	Description	Default Value
--scxps--text-primary	Primary text color	#141516 (dark gray)
--scxps--text-secondary	Secondary text color	#737384 (mid-gray)
--scxps--text-tertiary	Tertiary text color	#9595AC (light gray)
--scxps--text-disabled	Disabled text color	#bdc0c7 (very light gray)
--scxps--primary	Base color for primary elements	Varies (depends on user defined value or #64CC98 - teal blue)
--scxps--primary--solid	Solid variant of primary color	#ffffff (white)
--scxps--secondary	Base color for secondary elements	Varies (depends on user defined value or #F0846F - orange)
--scxps--secondary--solid	Solid variant of secondary color	#ffffff (white)
--scxps--link	Base color for links	Varies (depends on user defined value or #5246D0 - dark blue)
--scxps--link--solid	Solid variant of link color	#ffffff (white)
--scxps---mark	Background color for highlighted text	#ffe7b9 (light yellow)
--scxps--success	Color for success messages	#28a745 (green)
--scxps--warning	Color for warning messages	#ffc107 (yellow)
--scxps--danger	Color for error messages	#dc3545 (red)
--scxps--button-color	Base color for buttons	#e7e9ee (light gray)
--scxps--button-color--light	Lighter variant of button color	#f0f2f8 (very light gray)
--scxps--bg-color	Background color of the plugin	#fff (white)
--scxps--bg-color--light	Lighter background color variant	#FAFAFA (very light gray)
--scxps--border-color	Color of borders	#D8D6F2 (light blue)
--scxps--border-radius--small	Radius for small rounded corners	0.4rem
--scxps--border-radius--medium	Radius for medium rounded corners	0.65rem
--scxps--border-radius--large	Radius for large rounded corners	0.85rem

Typography

Variable Name	Description	Default Value
--scxps--font-size--xsmall	Font size for very small text	0.7rem
--scxps--font-size--small	Font size for small text	0.875rem
--scxps--font-size--medium	Font size for standard text	1rem
--scxps--font-size--large	Font size for large text	1.25rem
--scxps--line-height--small	Line height for small text	1.15
--scxps--line-height--medium	Line height for standard text	1.35
--scxps--line-height--large	Line height for large text	1.5
--scxps--font-weight--regular	Font weight for regular text	400 (normal)
--scxps--font-weight--bold	Font weight for bold text	600 (bold)
--scxps--font-weight--bolder	Font weight for very bold text	700 (bolder)

Icons

Variable Name	Description	Default Value
--scxps--icon--small	Size for small icons	16px
--scxps--icon--medium	Size for medium icons	19px
--scxps--icon--large	Size for large icons	24px

Box Shadows

Variable Name	Description	Default Value
--scxps--box-shadow--small	Applies a small drop shadow effect	0 1px 5px rgba(0, 0, 0, 0.16)
--scxps--box-shadow--medium	Applies a medium drop shadow effect	0 3px 15px rgba(0, 0, 0, 0.16)
--scxps--box-shadow--large	Applies a large drop shadow effect	0 3px 30px rgba(0, 0, 0, 0.16)

Layout

Variable Name	Description	Default Value
--scxps--popup-width	Defines the width of the search popup	Varies (depends on user defined value or #{$breakpoint-lg})
--scxps--search-input--height	Height of the search input field on desktop	55px
--scxps--search-input--mobile-height	Height of the search input field on mobile devices	35px
--scxps--search-button--height	Height of the search button	40px

Spacing

Variable Name	Description	Default Value
--scxps--spacing--xsmall	Defines extra-small spacing	0.5rem
--scxps--spacing--small	Defines small spacing	0.65rem
--scxps--spacing--medium	Defines medium spacing	1rem
--scxps--spacing--large	Defines large spacing	1.35rem

Search Results View

Variable Name	Description	Default Value
--scxps--result-view--image--small-screen-size	Defines image width on small screens	40vw
--scxps--result-view--image--medium-screen-size	Defines image width on medium screens	60vw
--scxps--result-view--image--border-radius	Inherits border radius from --scxps--border-radius--small	var(--scxps--border-radius--small)
---	---	---
--scxps--result-view--price--color	Defines the color of the product price	var(--scxps--text-primary)
--scxps--result-view--price--font-weight	Defines the font weight of the product price	700 (bold)
--scxps--result-view--original-price--color	Defines the color of the original product price (often used for strikethrough)	var(--scxps--text-tertiary)
--scxps--result-view--discount--color	Defines the color of the discount percentage	var(--scxps--success)

Effects

Variable Name	Description	Default Value
--scxps--modal--backdrop-filter	Applies a blur effect to the modal backdrop	blur(5px) or none