Variables
Variables
/* No context defined for this component. */
// HEX Colors
$white : #ffffff !default;
$black : #000000 !default;
$red : #e62325 !default;
$orange : #e76d04 !default;
$orange-dark : #cd7803 !default;
$yellow : #ffd500 !default;
$green : #77f9b3 !default;
$green-light : #cdd08b !default;
$blue-light : #e0edf9 !default;
$blue : #3095cd !default;
$bright-sky-blue : #01074d !default;
$brown : #865b3c !default;
$teal : #0194ab !default;
$pink : #e73193 !default;
$purple : #613d7c !default;
$seafoam-blue : #77ccb9 !default;
$cyan : #8799c1 !default;
// HEX Grayscale colors
$gray-darkest : #010533 !default;
$gray-darker : #444444 !default;
$gray-dark : #737693 !default;
$gray : #d8d8d8 !default;
$gray-light : #f3f5f2 !default;
$gray-lighter : #fbfcfb !default;
$gray-lightest : #f9f9f9 !default;
// RGB Colors
$rgb-white : 255 255 255 !default;
$rgb-black : 0 0 0 !default;
$rgb-red : 230 35 37 !default;
$rgb-orange : 252 146 0 !default;
$rgb-orange-dark : 205 120 3 !default;
$rgb-yellow : 255 213 0 !default;
$rgb-green : 134 189 80 !default;
$rgb-gold : 180, 133, 76 !default;
$rgb-blue : 0 117 228 !default;
$rgb-bright-sky-blue : 0 184 255 !default;
$rgb-brown : 134 91 60 !default;
$rgb-teal : 1 148 171 !default;
$rgb-pink : 255 91 119 !default;
$rgb-purple : 97 61 124 !default;
$rgb-seafoam-blue : 119 204 185 !default;
$rgb-gray-darkest : 1 5 29 !default;
$rgb-gray-darker : 68 68 68 !default;
$rgb-gray-dark : 110 117 119 !default;
$rgb-gray : 216 216 216 !default;
$rgb-gray-light : 234 234 234 !default;
$rgb-gray-lighter : 251 251 251 !default;
$rgb-gray-lightest : 247 247 247 !default;
// Semantic color scheme
$theme-gold : #77f9b3 !default;
$theme-primary : $bright-sky-blue !default;
$theme-second : $green !default;
$theme-dark : $black !default;
$color-primary : $theme-dark !default;
$color-secondary : $gray-dark !default;
$color-tertiary : $theme-primary !default;
$color-success : $green !default;
$color-info : $color-primary !default;
$color-warning : $red !default;
$color-error : $red !default;
$color-inverse : $gray-dark !default;
$color-focus : $bright-sky-blue !default;
$color-rating : #f6e40e !default;
$color-seondary-light : #e7f2dc !default;
// Background
$bg-color-base : $white !default;
$bg-color-secondary : $gray-lighter !default;
$bg-color-dark : $gray-darkest !default;
$bg-color-tile : #f1f0f5 !default;
// Border
$border-color-base : $gray !default;
$border-width-base : 1px !default;
$border-style-base : solid !default;
$border-color-secondary : $gray-darkest !default;
$border-width-secondary : 1px !default;
$border-style-secondary : solid !default;
$border-color-tertiary : #fff !default;
$border-width-tertiary : 2px !default;
$border-style-tertiary : solid !default;
$border-base : $border-width-base $border-style-base $border-color-base !default;
$border-secondary : $border-width-secondary $border-style-secondary $border-color-secondary !default;
$border-tertiary : $border-width-tertiary $border-style-tertiary $border-color-tertiary !default;
// Outline
$outline-base : none !default;
// Focus
$border-focus : 2px solid $color-focus !default;
$border-focus-dark : 2px solid $color-primary !default;
// Focus inline
$color-focus-inline : $color-primary !default;
$color-focus-inline-dark : $color-primary !default;
$bg-focus-inline : $color-focus !default;
$bg-focus-inline-dark : $color-primary !default;
$outline-focus-inline : 0 !default;
$text-decoration-focus-inline : underline !default;
$focus-outline-offset : -1px !default;
$focus-input-border : $border-focus-dark;
// Spacers
$spacer--extra-small : 4px !default;
$spacer : 8px !default;
$spacer--small : 12px !default;
$spacer--medium : 16px !default;
$spacer--m : 20px !default;
$spacer--semi-medium : 24px !default;
$spacer--large : 32px !default;
$spacer--l : 36px !default;
$spacer--semi-large : 40px !default;
$spacer--xl : 42px !default;
$spacer--extra-large : 48px !default;
$spacer--xxl : 58px !default;
$spacer--extra-extra-large : 72px !default;
$spacer--larger : 80px !default;
$spacer--05 : 0.5rem !default;
$spacer--1 : 1rem !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--45 : 4.5rem !default;
$spacer--5 : 5rem !default;
// Typography
$font-family-sans-serif : 'Gotham SSm', sans-serif !default;
$font-family-serif : 'Gotham SSm', serif !default;
$font-family-monospace : Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
$font-family-base : $font-family-sans-serif !default;
$font-family-secondary : $font-family-serif !default;
$font-family-heading : $font-family-serif !default;
$font-color-base : $color-primary !default;
$font-weight-thin : 200 !default;
$font-weight-normal : 400 !default;
$font-weight-medium : 400 !default;
$font-weight-bold : 500 !default;
$font-weight-base : $font-weight-medium !default;
$font-line-height : 1.6 !default;
$font-size-heading-largest : 40px !default;
$font-size-heading-larger : 36px !default;
$font-size-heading-large : 32px !default;
$font-size-heading : 28px !default;
$font-size-super-extra-large : 28px !default;
$font-size-2x-large : 24px !default;
$font-size-extra-large : 22px !default;
$font-size-larger : 18px !default;
$font-size-large : 17px !default;
$font-size-medium-large : 16px !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 : 1450px !default;
// Layout - breakpoints
$screen-xs : 320px !default;
$screen-s : 480px !default;
$screen-m : 768px !default;
$screen-l : 1024px !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;
// shadow
$shadow : 0 2px 6px 0 rgba(0, 0, 0, 0.1) !default;
$darken-layout-hover : rgba($black, 0.2) !default;
// animations
$animation-position-top : -300px !default;
$animation-position-right : -300px !default;
$animation-position-left : -300px !default;
// Components
$border-radius : 25px !default;
$form-elements-radius : 35px !default;
$form-elements-radius--small : 15px !default;
$form-elements-border-color : $gray-darkest !default;
$form-element-unselect-border-color : rgba(1, 5, 29, 0.60) !default;
$form-element-unselect-border-width : 1px !default;
$form-element-border-width : 1.5px !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;
$base-box-shadow : 0 0 14px rgba(0, 0, 0, 0.4) !default;
$form-elements-unselect-border : $form-element-unselect-border-width $form-element-border-style $form-element-unselect-border-color !default;
$form-elements-select-border : $form-element-border-width $form-element-border-style $form-elements-border-color !default;
$transition-base : all 0.3s ease-in-out !default;
$transition-fade : opacity 0.25s linear !default;
$form-value-font-size : $font-size-base !default;
There are no notes for this item.