Variables
Variables
/* No context defined for this component. */
// Priority colours
$white : #fff !default;
$black : #000 !default;
$red : #e30613 !default;
// Semantic variable colours
$orange : #fab216 !default;
$yellow : #ffd500 !default;
$green : #0bcfc3 !default;
$green-dark : #1dcf45 !default;
$green-darker : #01b905 !default;
$blue-light : #f2f5f7 !default;
$blue : #2962ff !default;
$teal : #5bc0de !default;
$pink : #ff5b77 !default;
$purple : #613d7c !default;
$darkred : #c90613 !default;
$lightred : #f87d7d !default;
// Grayscale colors
$gray-background : #4b4b4b !default;
$gray-font : #757575 !default;
$gray-color : #656565 !default;
$gray-button : #343434 !default;
$gray-darkest : #1b1b1b !default;
$gray-darker : #252525 !default;
$gray-dark : #505050 !default;
$gray : #8f8f8f !default;
$gray-light : #c4c4c4 !default;
$gray-lighter : #e5e5e5 !default;
$gray-lightest : #f7f7f9 !default;
$gray-link : #363636 !default;
$gray-medium : #929292 !default;
// Priority colours website
$color-primary : $red !default;
$color-secondary : $gray-darkest !default;
$color-tertiary : $white !default;
$color-button : $green !default;
$color-button-darker : $green-darker !default;
$color-button-hover : $green-dark !default;
// Hover colour
//$background-hover : linear-gradient(180deg, rgba(0,0,0, 0.25) 0%, rgba($color-primary, 100)) !default;
// Semantic color scheme
$color-success : $green-darker !default;
$color-success-hover : $green-dark !default;
$color-info : $teal !default;
$color-warning : $orange !default;
$color-danger : $darkred !default;
$color-inverse : $gray-darker !default;
$color-focus : $gray-lighter !default;
// Background
$bg-color-base : $gray-lighter !default;
$bg-color-dark : $black !default;
$bg-color-green : $green !default;
// Border
$border-color-base : $gray-darker !default;
$border-width-base : 1px !default;
$border-style-base : solid !default;
$border-color-secondary : $gray-dark !default;
$border-width-secondary : 1px !default;
$border-style-secondary : solid !default;
$border-base : $border-width-base $border-style-base $border-color-base !default;
$border-focus : none $color-focus !default;
$border-focus-dark : none !default;
// Outline
$outline-base : none !default;
// Focus inline
$color-focus-inline : $white !default;
$color-focus-inline-dark : $gray-darkest !default;
$bg-focus-inline : $color-focus !default;
$bg-focus-inline-dark : $color-primary !default;
$outline-focus-inline : $outline-base !default;
$text-decoration-focus-inline : underline !default;
// Typography
$font-family-sans-serif : 'Montserrat', sans-serif !default;
$font-family-saira : 'Saira', sans-serif !default;
$font-family-saira-bold : 'Saira Bold', sans-serif !default;
$font-family-roboto : 'Roboto', sans-serif !default;
$font-family-roboto-condensed : 'Roboto Condensed', sans-serif !default;
$font-family-evogria : 'Evogria Regular', sans-serif !default;
$font-family-monospace : Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
$font-family-base : $font-family-roboto !default;
$font-family-heading : $font-family-evogria !default;
$font-family-base-condensed : $font-family-roboto-condensed !default;
$font-family-alternative : $font-family-saira !default;
$font-color-base : $gray-darkest !default;
$font-weight-normal : normal !default;
$font-weight-bold : bold !default;
$font-weight-bolder : bolder !default;
$font-weight-semibold : 600 !default;
$font-weight-base : $font-weight-normal !default;
$font-line-height : 1.2 !default;
$font-line-height-alternative : 1.6 !default;
$font-style-italic : italic !default;
$font-size-xxxxl : 50px !default;
$font-size-xxxl : 35px !default;
$font-size-xxl : 30px !default;
$font-size-extra-large : 22px !default;
$font-size-large : 18px !default;
$font-size-medium : 16px !default;
$font-size-base : 14px !default;
$font-size-small : 12px !default;
$font-size-extra-small : 10px !default;
// Z-index
$z-index-lowest : -1 !default;
$z-index-initial : auto !default;
$z-index-low : 1 !default;
$z-index-normal : 10 !default;
$z-index-high : 50 !default;
$z-index-highest : 99 !default; // reserved for modals - check _modal-variables.scss for more
// Layout
$max-content-width : 1350px !default;
// Layout - breakpoints
$screen-xs : 320px !default;
$screen-s : 480px !default;
$screen-m : 768px !default;
$screen-l : 992px !default;
$screen-xl : 1200px !default;
$screen-2xl : 1400px !default;
$screen-xxl : 1600px !default;
$screen-3xl : 1600px !default;
$screen-xxxl : 1920px !default;
$screen-4xl : 1920px !default;
// Components
$border-radius : 4px !default;
$border-radius-below : 0 0 $border-radius $border-radius !default;
$border-radius-above : $border-radius $border-radius 0 0 !default;
$border-radius-left : $border-radius 0 0 $border-radius !default;
$border-radius-right : 0 $border-radius 0 $border-radius 0 !default;
$border-radius--small : 3px !default;
$border-radius--large : 8px !default;
$form-elements-radius : 4px !default;
$form-elements-radius--small : 3px !default;
$form-elements-border-color : $gray-light !default;
$form-elements-border-color-focus: $gray-darker !default;
$form-input-box-shadow-focus : 0 4px 6px 0 rgba(57, 50, 67, 0.3) !default;
$form-select-background : #ecf5f4 !default;
$form-select-background--gray : #f6f6f6 !default;
$form-select-radius : 3px !default;
$form-checkbox-background-color : #f3f3f3 !default;
$form-checkbox-border : 1px solid #b2b2b2 !default;
$transition-base : all 0.3s ease-in-out, outline-offset 1ms !default;
$transition-fade : opacity 0.25s linear !default;
$box-shadow : 0 0 35px rgba(0, 0, 0, 0.2) !default;
$box-shadow-slider : 0 0 5px rgba(0, 0, 0, 0.2) !default;
$bg-shadow : linear-gradient(90deg, #1f1b1a 1.5%, rgba(31, 27, 26, 0) 110%);
// Spacers
$spacer--01 : 0.15rem !default;
$spacer--0225 : 0.225rem !default;
$spacer--036 : 0.36rem !default;
$spacer--05 : 0.5rem !default;
$spacer--075 : 0.75rem !default;
$spacer--1 : 1rem !default;
$spacer--125 : 1.225rem !default;
$spacer--15 : 1.5rem !default;
$spacer--2 : 2rem !default;
$spacer--25 : 2.5rem !default;
$spacer--3 : 3rem !default;
$spacer--35 : 3.5rem !default;
$spacer--4 : 4rem !default;
$spacer--5 : 5rem !default;
$spacer--6225 : 6.225rem !default;
$spacer--extra-small : $spacer--01 !default;
$spacer--small : $spacer--0225 !default;
$spacer : $spacer--05 !default;
$spacer--medium : $spacer--1 !default;
$spacer--default : $spacer--125 !default;
$spacer--m : $spacer--15 !default;
$spacer--semi-medium : $spacer--15 !default;
$spacer--large : $spacer--2 !default;
$spacer--l : $spacer--2 !default;
$spacer--semi-large : $spacer--25 !default;
$spacer--extra-large : $spacer--3 !default;
$spacer--xl : $spacer--3 !default;
$spacer--extra-extra-large : $spacer--4 !default;
$spacer--xxl : $spacer--4 !default;
$spacer--larger : $spacer--5 !default;
$spacer--largest : $spacer--6225 !default;
// Components
$border-radius : 3px !default;
$form-elements-radius : 5px !default;
$form-elements-radius--small : 3px !default;
$form-elements-border-color : $border-color-secondary !default;
$form-element-border-width : 1px !default;
$form-element-border-style : solid !default;
$form-elements-border : $form-element-border-width $form-element-border-style $form-elements-border-color !default;
$form-elements-border-focus : none !default;
$form-input-box-shadow-focus : 0 0 0 2px rgba(0, 0, 0, 0.4) !default;
$transition-base : all 0.3s ease-in-out !default;
$transition-fade : opacity 0.25s linear !default;
There are no notes for this item.