CSS Variables
Livemarket components has many (and will probably have more) CSS variables that come with your package.
These variables come in handy when you want to customize your components for better user experience and website integration.
Current variables:
| Variable | Description | Default |
|---|---|---|
--shorts-title-opacity |
changes the opacity of the shorts title | 1 |
--button-border-radius |
changes the border radius of button in drawer and details drawer | 0.875rem |
--input-border-radius |
changes the border radius of the product variant selection input | 0.875rem |
--modal-video-border-radius |
changes modal video border radius - value in px | 25px |
--drawer-border-radius |
changes drawer border radius - value in px | 25px |
--author-font-weight |
changes font weight of author | 300 |
--video-bottom-overlay-gap |
changes the gap of the bottom overlay in the video component between author and video/product title | 8px |
--video-title-font-weight |
changes video title font weight | 600 |
--video-title-line-height |
changes the line height of video title | 24px |
| Carousel modifiers | ||
--carousel-padding |
adding padding to carousel component | 3rem |
--carousel-controls-fill |
control buttons background color in carousel | #d9d9d9 |
--carousel-controls-fill-opacity |
opacity of the controls buttons background | 0.3 |
--carousel-controls-arrows-color |
color of the arrows in carousel controls | #ffffff |
--carousel-controls-button-height |
height of the carousel control buttons | 2rem |
--carousel-controls-button-width |
width of the carousel control buttons | 2rem |
--carousel-controls-space |
horizontal space of the controls buttons from the carousel | 0.75rem |
--carousel-controls-shadow-offset-x |
horizontal offset of the shadow behind the control buttons of carousel | 0 |
--carousel-controls-shadow-offset-x |
vertical offset of the shadow behind the control buttons of carousel | 0 |
--carousel-controls-shadow-blur |
blur of the shadow behind the control buttons of carousel | 0 |
--carousel-controls-shadow-spread-radius |
spread of the shadow behind the control buttons of carousel | 0 |
--carousel-controls-shadow-color |
color of shadow behind the control buttons of carousel | #000 |
| Colors | ||
--white |
#fff |
|
--black |
#000 |
|
--gray-100 |
#f6f6f6 |
|
--gray-200 |
#eeeeee |
|
--gray-300 |
#e8ebed |
|
--gray-400 |
#e5e1e1 |
|
--gray-500 |
#cdd2da |
|
--gray-600 |
#b3b3b3 |
|
--gray-700 |
#818ea1 |
|
--gray-800 |
#576882 |
|
--text-dark |
Main dark text color | #031d44 |
--text-dark-secondary |
Secondary dark text color | #131466 |
--text-red |
Red text - prices | #bd1c33 |
--bg-video |
Changes background color of play button and short timer | #6e77f880 |
--bg-red |
Changes background color of dots and add to cart button | #BD1c33 |
--bg-red-hover |
Changes the hover background color of add to cart button | #d03 |
--bg-transparent-200 |
Changes the background color of space behind the modal when is active | rgba(0,0,0,0.2) |
--bg-transparent-500 |
Changes the background color of space behind the drawer when is active | rgba(0,0,0,0.5) |
--bg-transparent-white |
Changes the show more products in shorts button background color | rgba(255,255,255,0.3) |