You are here:
cpq-base-variables (template)
The cpq-base-variables template contains CSS variables used in other templates and themes.
Template Type
Mixin
Code
CSS/SCSS
Image
n/a
example
Example CSS for cpq-base-theme-variables
/*** CPQ BASE VARIABLES ***/
/***
Do not modify this variables, Instead use Themes.
Modify only when you are sure what you are doing and the impact it may have.
These variables are used in different templates/themes.
**/
$black: #000000;
$white: #FFFFFF;
$mid-black: #16325c;
$dark-gray: #7c7c7c;
$text-gray: #9999a7;
$middle-dark-gray: #c7c7c7;
$mid-gray: #d8d8d8;
$middle-light-gray: #dedede;
$light-gray: #f2f2f2;
$lightest-gray: #f8f8f8;
$dark-blue: #008ab3;
$light-blue: #05a6df;
$warning: #eac438;
$success: #58a300;
$error: #f65327;
$font-family: "Salesforce Sans", Arial, sans-serif;
$font-size: 14px;
$line-height: 20px;
$font-title-size: 28px;
$font-heading-size: 22px;
$font-thin: normal 100 14px/18px $font-family;
$font-light: normal 300 14px/18px $font-family;
$font-regular: normal 400 14px/18px $font-family;
$font-semibold: normal 600 14px/18px $font-family;
/*** SLDS VARIABLES ***/
//*** RESPONSIVE BREAKPOINTS ***//
$bp-xsmall: 20em;
$bp-small: 30em;
$bp-xmedium: 44em;
$bp-medium: 48em;
$bp-large: 64em;
$bp-xlarge: 80em;
//*** COLORS ***//
// Grays
$header-gray: #f7f9fb;
$cards-gray: #f4f6f9;
$cards-border-gray: #d8dde6;
$mobile-icons-gray: #9faab5;
// Notifications
$notify-danger: #c23934;
$notify-warning: #ffb75d;
$notify-success: #04844b;
$notify-default: #54698d;
// Neutrals
$neutral-lightest: #EEF1F6;
$neutral-light: #CFD7E6;
$neutral-medium: #A7B8D1;
$neutral-dark: #4F6A92;
// Modals
$modal-overlay: #7e8c99;
// Primary Colors
$primary-alternative: #4A90E2;
$primary-lightest: #0C8EFF;
$primary-light: #0070D2;
$primary-medium: #005FB2;
$primary-dark: #00396B;
// Secondary Colors
$secondary-pink: #EF7EAD;
$secondary-green: #4BC076;
$secondary-aqua: #50E3C2;
$secondary-purple: #7F8DE1;
$secondary-orange: #F88962;
// Other Colors
$slds-red: #ef6e64;
// Fonts
$slds-font: "Salesforce Sans", Arial, sans-serif;
// Namespace
$cpq-namespace: 'cpq';
$assets-namespace: 'assets'Did this article solve your issue?
Let us know so we can improve!
