You are here:
cpq-base-theme-variables (template)
The cpq-base-theme variables template contains CSS variables that are used in other templates.
Template Type
Mixin
Code
CSS/SCSS
Image
n/a
example
Example CSS for cpq-base-theme-variables
/*** CPQ BASE THEME VARIABLES ***/
@import "cpq-base-variables";
// Common padding
$cpq-padding-base-vertical: 6px !default;
$cpq-padding-base-horizontal: 12px !default;
$cpq-padding-large-vertical: 10px !default;
$cpq-padding-large-horizontal: 16px !default;
$cpq-padding-small-vertical: 5px !default;
$cpq-padding-small-horizontal: 10px !default;
$cpq-padding-xs-vertical: 1px !default;
$cpq-padding-xs-horizontal: 5px !default;
$cpq-headings-font-weight: 600;
$cpq-cart-item-product-group-font-weight: 300;
$cpq-page-bg-color: #f4f6f9;
$cpq-product-container-bg-color: $white;
$cpq-product-container-border-color: $mid-gray;
$cpq-product-padding: 10px;
$cpq-product-item-padding: 3px;
$cpq-cart-container-tabs-height: 40px;
$cpq-cart-container-tabs-top-margin: -10px;
$cpq-cart-container-bg-color: $white;
$cpq-cart-container-border-color: $mid-gray;
$cpq-cart-total-bar-bg-color: #14315D;
$cpq-product-cart-items-bg-color: $white;
$cpq-product-cart-items-attr-value-color: $dark-gray;
$cpq-product-cart-item-selected-border-color: #FDB734;
$cpq-product-cart-order-bg-color: $mid-gray;
$cpq-product-cart-config-error-font-size: .75rem;
$cpq-product-cart-config-error-margin-top: .5rem;
$cpq-product-cart-discount-price: #97C077;
$cpq-cart-item-attr-label-font-size: 11px;
$cpq-cart-item-product-group-label-color: $black;
$cpq-cart-section-title-font-size: 15px;
$cpq-cart-item-product-messages-padding: 28px;
$cpq-cart-item-product-details-padding: 20px;
$cpq-cart-item-product-cfg-attr-font-size: 13px;
$cpq-cart-promo-item-bg-color: #F9FCF3;
$cpq-cart-promo-button-bg-color: #9ECC3B;
$cpq-cart-promo-item-border-color: #CCE29C;
$cpq-cart-promo-item-border-width: 2px;
$cpq-cart-promo-item-border-radius: 5px;
$cpq-loyalty-points-color: #061C3F;
$cpq-product-link-color: #0070d2;
$cpq-offers-count-bg-color: #FDB734;
$cpq-product-cart-item-popover-top: -3.5rem;
$cpq-product-cart-item-popover-left: -0.5rem;
$product-item-bookmark-red: #f65327;
$product-item-bookmark-blue: #0058C6;
$product-item-bookmark-green: #13834D;
$product-item-bookmark-yellow: #FFB75D;
$product-item-bookmark-grayish-blue: #54698D;Did this article solve your issue?
Let us know so we can improve!
