Cart Styling
How to style the Vinoshipper Cart.
Simple Styling
When using Simple Theming, then there's no further actions to take.
Advanced Styling
Find out more about Advanced Styling and using CSS Variables.
Color Contrast and Accessibility
When defining your own style, be mindful to style text with sufficient color contrast for accessibility. Check not only default, but
:hoverand:focusstates for each button you style.
Cart Button
CSS Variables
.vs-cart {
--vs-cart-font-family: "Proxima Nova", sans-serif;
--vs-cart-button-z-index: 1030;
--vs-cart-button-height: 60px;
--vs-cart-button-background-color: #efefef;
--vs-cart-button-icon: url('data:image/svg+xml; …');
--vs-cart-button-border-radius: 4px;
--vs-cart-button-color: #ffffff;
--vs-cart-button-font-size: 16px;
--vs-cart-button-font-weight: 700;
--vs-cart-button-line-height: 1.42857;
--vs-cart-button-padding-bottom: 6px;
}
Cart Background & Animation
These variables influence the Cart's background and display behaviors.
Animations
All Cart animations will not play when the client's browser is set prefers-reduced-motion to true.
CSS Variables
.vs-cart {
--vs-cart-font-family: "Proxima Nova", sans-serif;
--vs-cart-color: #000000;
--vs-cart-background-color: #ffffff;
--vs-cart-link-color: #1C6DB0;
--vs-cart-link-text-decoration: none;
--vs-cart-link-hover-color: #1C6DB0;
--vs-cart-link-hover-text-decoration: underline;
--vs-cart-shown-width-max: 400px;
--vs-cart-animation-duration: 300ms;
--vs-cart-animation-timing-function: ease-in;
--vs-cart-animation-close-duration: 300ms;
--vs-cart-animation-close-timing-function: ease-in-out;
--vs-cart-stage-backdrop-z-index: 1040;
--vs-cart-stage-backdrop-background-color: rgba(0, 0, 0, 0);
--vs-cart-stage-z-index: 1045;
--vs-cart-stage-backdrop-shown-background-color: rgba(0, 0, 0, 0.5);
}
/*
When using a simple theme in a dark contrast ('dark', 'red-dark', etc),
the default variables are as follows:
*/
.vs-cart[data-vs-theme-is-dark="true"] {
--vs-cart-color: #ffffff;
--vs-cart-background-color: #000000;
--vs-cart-stage-backdrop-background-color: rgba(255, 255, 255, 0);
--vs-cart-stage-backdrop-shown-background-color: rgba(255, 255, 255, 0.2);
}
Cart Contents
These variables influence the contents of the Cart when opened. The variables listed are the values of the default Vinoshipper theme.
CSS Variables
.vs-cart {
--vs-cart-font-family: 'Proxima Nova', sans-serif;
--vs-cart-color: #222222;
--vs-cart-icon-color: #7D8D93;
--vs-cart-link-color: #1C6DB0;
--vs-cart-link-text-decoration: none;
--vs-cart-link-hover-color: #1C6DB0;
--vs-cart-link-hover-text-decoration: underline;
--vs-cart-contents-border-color: #b0c0c8;
--vs-cart-icon-color: #7D8D93;
--vs-cart-close-color: #222222;
--vs-cart-close-opacity: 0.2;
--vs-cart-close-hover-color: #222222;
--vs-cart-close-hover-opacity: 0.5;
--vs-cart-contents-color: var(--vs-cart-color, inherit);
--vs-cart-contents-font-family: inherit;
--vs-cart-contents-font-size: 16px;
--vs-cart-contents-font-weight: normal;
--vs-cart-contents-line-height: 1.25;
--vs-cart-contents-item-name-font-family: inherit;
--vs-cart-contents-item-name-font-size: var(--vs-cart-content-font-size, 16px);
--vs-cart-contents-item-name-font-weight: 700;
--vs-cart-contents-item-name-line-height: 1;
--vs-cart-contents-item-name-letter-spacing: inherit;
--vs-cart-contents-item-name-text-transform: inherit;
--vs-cart-contents-qty-color: #65798B;
--vs-cart-contents-qty-font-family: inherit;
--vs-cart-contents-qty-font-size: 40px;
--vs-cart-contents-qty-font-weight: 900;
--vs-cart-contents-qty-line-height: 1;
--vs-cart-contents-qty-letter-spacing: inherit;
--vs-cart-contents-qty-text-transform: inherit;
--vs-cart-contents-remove-color: var(--vs-cart-link-color, #1C6DB0);
--vs-cart-contents-remove-font-size: 14px;
--vs-cart-contents-remove-font-weight: inherit;
--vs-cart-contents-remove-line-height: 1;
--vs-cart-contents-remove-text-decoration: underline;
--vs-cart-contents-remove-text-transform: inherit;
--vs-cart-contents-remove-hover-color: var(--vs-cart-link-hover-color, #1C6DB0);
--vs-cart-contents-remove-hover-text-decoration: underline;
--vs-cart-footer-subtotal-font-family: inherit;
--vs-cart-footer-subtotal-font-size: 16px;
--vs-cart-footer-subtotal-font-weight: 700;
--vs-cart-footer-subtotal-line-height: 1;
--vs-cart-footer-subtotal-letter-spacing: inherit;
--vs-cart-footer-subtotal-text-transform: inherit;
--vs-cart-actions-padding: 16px;
--vs-cart-actions-font-family: inherit;
--vs-cart-actions-font-size: inherit;
--vs-cart-actions-font-weight: inherit;
--vs-cart-actions-line-height: inherit;
--vs-cart-actions-letter-spacing: inherit;
--vs-cart-actions-text-transform: inherit;
--vs-cart-actions-text-decoration: inherit;
--vs-cart-actions-color: inherit;
--vs-cart-actions-background-color: inherit;
--vs-cart-actions-border-radius: inherit;
--vs-cart-actions-checkout-padding: var(--vs-cart-actions-padding, 16px);
--vs-cart-actions-checkout-font-family: var(--vs-cart-actions-font-family);
--vs-cart-actions-checkout-font-size: var(--vs-cart-actions-font-size);
--vs-cart-actions-checkout-font-weight: var(--vs-cart-actions-font-weight);
--vs-cart-actions-checkout-line-height: var(--vs-cart-actions-line-height);
--vs-cart-actions-checkout-letter-spacing: var(--vs-cart-actions-letter-spacing);
--vs-cart-actions-checkout-text-transform: var(--vs-cart-actions-text-transform);
--vs-cart-actions-checkout-text-decoration: var(--vs-cart-actions-text-decoration, none);
--vs-cart-actions-checkout-background-color: var(--vs-cart-actions-background-color, #1C6DB0);
--vs-cart-actions-checkout-color: var(--vs-cart-actions-color, #FFFFFF);
--vs-cart-actions-checkout-border-color: var(--vs-cart-actions-border-color, #1C6DB0);
--vs-cart-actions-checkout-border-width: var(--vs-cart-actions-border-width, 1px);
--vs-cart-actions-checkout-border-style: var(--vs-cart-actions-border-style, solid);
--vs-cart-actions-checkout-border-radius: var(--vs-cart-actions-border-radius, 4px);
--vs-cart-actions-checkout-hover-color: var(--vs-cart-actions-color, #FFFFFF);
--vs-cart-actions-checkout-hover-background-color: var(--vs-cart-actions-background-color, #155284);
--vs-cart-actions-checkout-hover-outline: var(--vs-cart-actions-outline, 1px solid #1C6DB0);
--vs-cart-actions-checkout-hover-border-color: var(--vs-cart-actions-border-color, #1C6DB0);
--vs-cart-actions-checkout-hover-border-width: var(--vs-cart-actions-border-width, 1px);
--vs-cart-actions-checkout-hover-border-style: var(--vs-cart-actions-border-style, solid);
--vs-cart-actions-checkout-hover-border-radius: var(--vs-cart-actions-border-radius, 4px);
--vs-cart-actions-checkout-hover-box-shadow: var(--vs-cart-actions-box-shadow, 0 0 4px #1C6DB0);
--vs-cart-actions-checkout-hover-text-decoration: var(--vs-cart-actions-text-decoration, none);
--vs-cart-actions-checkout-active-color: var(--vs-cart-action-actives-color, #FFFFFF);
--vs-cart-actions-checkout-active-background-color: var(--vs-cart-actions-active-background-color, #155284);
--vs-cart-actions-checkout-active-outline: var(--vs-cart-actions-active-outline, 1px solid #1C6DB0);
--vs-cart-actions-checkout-active-border-color: var(--vs-cart-actions-active-border-color, #1C6DB0);
--vs-cart-actions-checkout-active-border-width: var(--vs-cart-actions-active-border-width, 1px);
--vs-cart-actions-checkout-active-border-style: var(--vs-cart-actions-active-border-style, solid);
--vs-cart-actions-checkout-active-border-radius: var(--vs-cart-actions-active-border-radius, 4px);
--vs-cart-actions-checkout-active-box-shadow: var(--vs-cart-actions-active-box-shadow, 0 0 4px #1C6DB0);
--vs-cart-actions-checkout-active-text-decoration: var(--vs-cart-actions-active-text-decoration, none);
--vs-cart-actions-continue-padding: var(--vs-cart-actions-padding, 8px 16px);
--vs-cart-actions-continue-font-family: var(--vs-cart-actions-font-family);
--vs-cart-actions-continue-font-size: var(--vs-cart-actions-font-size);
--vs-cart-actions-continue-font-weight: var(--vs-cart-actions-font-weight);
--vs-cart-actions-continue-line-height: var(--vs-cart-actions-line-height);
--vs-cart-actions-continue-letter-spacing: var(--vs-cart-actions-letter-spacing);
--vs-cart-actions-continue-text-transform: var(--vs-cart-actions-text-transform);
--vs-cart-actions-continue-text-decoration: var(--vs-cart-actions-text-decoration);
--vs-cart-actions-continue-background-color: var(--vs-cart-actions-background-color);
--vs-cart-actions-continue-color: var(--vs-cart-link-color, #1C6DB0);
--vs-cart-actions-continue-border-color: var(--vs-cart-actions-border-color);
--vs-cart-actions-continue-border-width: var(--vs-cart-actions-border-width);
--vs-cart-actions-continue-border-style: var(--vs-cart-actions-border-style);
--vs-cart-actions-continue-border-radius: var(--vs-cart-actions-border-radius);
--vs-cart-actions-continue-hover-color: var(--vs-cart-actions-hover-color, var(--vs-cart-link-hover-color, #1C6DB0));
--vs-cart-actions-continue-hover-background-color: var(--vs-cart-actions-hover-background-color);
--vs-cart-actions-continue-hover-outline: var(--vs-cart-actions-hover-outline, 1px solid #1C6DB0);
--vs-cart-actions-continue-hover-border-color: var(--vs-cart-actions-hover-border-color, #1C6DB0);
--vs-cart-actions-continue-hover-border-width: var(--vs-cart-actions-hover-border-width, 1px);
--vs-cart-actions-continue-hover-border-style: var(--vs-cart-actions-hover-border-style, solid);
--vs-cart-actions-continue-hover-border-radius: var(--vs-cart-actions-hover-border-radius, 4px);
--vs-cart-actions-continue-hover-box-shadow: var(--vs-cart-actions-hover-box-shadow, 0 0 4px #1C6DB0);
--vs-cart-actions-continue-hover-text-decoration: var(--vs-cart-actions-hover-text-decoration, underline);
--vs-cart-actions-continue-active-color: var(--vs-cart-actions-active-color, #FFFFFF);
--vs-cart-actions-continue-active-background-color: var(--vs-cart-actions-active-background-color);
--vs-cart-actions-continue-active-outline: var(--vs-cart-actions-active-outline);
--vs-cart-actions-continue-active-border-color: var(--vs-cart-actions-active-border-color);
--vs-cart-actions-continue-active-border-width: var(--vs-cart-actions-active-border-width);
--vs-cart-actions-continue-active-border-style: var(--vs-cart-actions-active-border-style);
--vs-cart-actions-continue-active-border-radius: var(--vs-cart-actions-active-border-radius);
--vs-cart-actions-continue-active-box-shadow: var(--vs-cart-actions-active-box-shadow);
--vs-cart-actions-continue-active-text-decoration: var(--vs-cart-actions-active-text-decoration, underline);
}
Updated about 1 year ago