src/sass/_variables.scss
//**
//* Global Variables
//*
// We also import variables from ./sass-vars with sass-vars-loader
@import '~uswds/dist/scss/lib/bourbon';
@import '~uswds/dist/scss/core/variables';
//**
//* Color Palette
//*
// Primary
$primary-blue: #0071BC;
$primary-blue-darker: #205493;
$primary-blue-darkest: #112E51;
$primary-base: #333333;
$primary-gray-dark: #4E4E4E;
$primary-alt-darkest: #046B99;
$primary-alt-dark: #00A6D2;
$primary-alt-base: #02BFE7;
$primary-alt-light: #9BDAF1;
$primary-alt-lighter: #C7DAEB;
$primary-alt-lightest: #E1F3F8;
// Secondary
$secondary-darkest-2: #711415;
$secondary-darkest: #981B1E;
$secondary-dark: #CD2026;
$secondary-base: #E31C3D;
$secondary-light: #E59393;
$secondary-lightest: #F9DEDE;
// Tertiary
$tertiary-gold-darker: #7D6D40;
$tertiary-gold-dark: #C8AE66;
$tertiary-gold: #FDB81E;
$tertiary-gold-light: #F9C642;
$tertiary-gold-lighter: $var-tertiary-gold-lighter;
$tertiary-gold-lightest: $var-tertiary-gold-lightest;
$tertiary-success: #2E8540;
$tertiary-success-light: #4AA564;
$tertiary-success-lighter: #94BFA2;
$tertiary-success-lightest: #E7F4E4;
$tertiary-cool-blue: #205493;
$tertiary-cool-blue-light: $var-tertiary-cool-blue-light;
$tertiary-cool-blue-lighter: $var-tertiary-cool-blue-lighter;
$tertiary-cool-blue-lightest: $var-tertiary-cool-blue-lightest;
// Background
$bg-gray-dark-0: #323045; //# Base
$bg-gray-dark-1: #5B616B;
$bg-gray-dark-2: #AEB0B5;
$bg-gray-dark-3: #D6D7D9;
$bg-gray-dark-4: #F1F1F1; //# Lightest
$bg-gray-medium-0: #B1B1B1; //# Base
$bg-gray-medium-1: #CCCCCC;
$bg-gray-medium-2: #E0E0E0;
$bg-gray-medium-3: #F0F0F0;
$bg-gray-medium-4: #F2F2F2; //# Lightest
$bg-blue-dark-0: #112E51; //# Base
$bg-blue-dark-1: #00293F;
$bg-blue-dark-2: #DCE4EF; //# Lightest
// Special State
$progress: $tertiary-success;
$progress-medium: $tertiary-success-light;
$progress-light: $tertiary-success-lighter;
$progress-lightest: $tertiary-success-lightest;
$growth: #00FA87;
$growth-dark: #009472;
// Main
$alert-red: #B03C3F;
$blue-primary-light: #E8F2F8;
$blue-primary: $primary-blue;
$blue-primary-darker: $primary-blue-darker;
$blue-primary-darkest: $primary-blue-darkest;
$color-red: #CB232D;
$color-gray-lightest: $bg-gray-dark-4;
$color-gray-lightest-alt: $bg-gray-medium-3;
$color-gray-lighter: $bg-gray-dark-3;
$color-gray-light: $bg-gray-dark-2;
$color-gray: $bg-gray-dark-1;
$color-gray-darkest: #212121;
$color-white: #FFFFFF;
$color-black: #000000;
$color-primary-alt-light: $primary-alt-light;
$color-black-box-shadow: rgba(0, 0, 0, .75);
$color-blue-active: $blue-primary-darker;
$color-blue-hover: #0071BB;
$color-primary-alt-lightest: $primary-alt-lightest;
$color-blue-light: #E6F0F9;
$color-blue-neon: #00fff5;
$color-green: #4DA365;
$color-green-dark: $tertiary-success;
$color-green-dark-opacity50: #95BE9D;
$color-green-light: #ECF6EE;
$color-gold: #F8C54F;
$color-gold-dark: #FDB81E;
$color-gold-darker: #976E12;
$color-gold-darkest: #4B3709;
$color-dodger-blue: #1E90FF;
$color-botticelli-blue: #D9E3EB;
$color-cornflower-blue: #DDE4EF;
$color-blue-chill: #117C8D;
$color-blue-mariner: #2E72B7;
$color-purple: #4e499b;
$color-purple-medium: #E4E3F2;
$color-purple-light: #F2F2F8;
$tm-dark-blue: $bg-blue-dark-1;
$tm-white-smoke: #F5F5F5;
$tm-white-smoke-light: #F7F7F7;
$tm-gray: #AAAAAA;
$tm-navy: #215493;
$tm-navy-dark: $blue-primary-darkest;
//**
//* Ribbon Colors
$ribbon-hds: #89C1F2;
//**
//* DOS Colors
//*
$dos-blue: #102E51;
$dos-red: #CC3333;
//**
//* Header
//*
$header-desktop-height: 75px;
//**
//* Avatar
//*
$avatar-size: 100px;
$avatar-background: $blue-primary;
$avatar-color: $color-white;
$avatar-text-ratio: .36;
//**
//* Avatar Dropdown
//*
$avatar-dropdown-size: 45px;
$avatar-dropdown-background: $color-white;
$avatar-dropdown-border-top-color: rgba(0, 0, 0, .05);
$avatar-dropdown-box-shadow-color: rgba(0, 0, 0, .15);
$avatar-dropdown-account-segment-color: #E1E1E1;
//**
//* Editor
//*
$editor-background: #FEFEFE;
$editor-border: #DDDDDD;
$editor-box-shadow: #ABABAB;
$editor-headline-background: #FBFBFB;
$editor-headline-background-focus: #F3F3F3;
$editor-headline-color: #888888;
$results-card-accent: $blue-primary;
$results-card-border: $color-gray-lighter;
//**
//* Handshake Colors
//*
$hs-expiration-orange:#F7B578;
//**
//* Delegate Roles table
//*
$odd-td-background-color: #e6f1f8;
//**
//* Scrollbar
//*
$scrollbar-width: 10px;
//**
//* Accessibility
//*
$tm-focus-outline-color: $color-black;
$tm-focus-outline-default: 2px dotted $tm-focus-outline-color;
$tm-focus-outline-color-alt: $color-white;
$tm-focus-outline-offset-default: 3px;
//**
//* z-index
//*
// we'll use this section to keep track of and order them
$glossary-z: 20000;
$dropdown-content-z: 15000;
$feedback-z: 11000;
$skill-code-dropdown-z: 10500;
$back-to-top-z: 10200;
$feedback-button-z: 10000;
//Results Page joyride tutorial: 1000;
$client-header-z: 100;
$banner-toggle-z: 101;
$spinner-z: 99;
$bureau-spinner-z: 98;
$daterange-z: 50;
$autosuggest-suggestions-container-open-z: 20;
$ribbon-z: 10;
$toggle-button-z: 5;
$glossary-close-z: 1;
$ribbon-condensed-card-z: 1;
$condensed-card-top-z: 1;
$scrollbar-z: 0;
//**
//* Images
//*
$angle-down-blue: url('#{$asset-path}assets/img/angle-down-blue.svg');
$angle-down-black: url('#{$asset-path}assets/img/angle-down-black.svg');
//**
// other variables
//
$button-box-shadow: 5px 10px 20px -4px $color-black-box-shadow;
//**
//* Available Bidders
//*
$abl-actions-td: 12;
$abl-gray-config: (
"Status": 2,
"Step Letter": 3,
"Updated On": 10,
"Notes": 11
);
//**
//* remarks pills colors
//*
$remarks: (
"A": #1E600B,
"B": #4372C4,
"C": #3700AD,
"D": #012E16,
"E": #6F4F0B,
"G": #015E7A,
"I": #5D1EE6,
"L": #4F4A3F,
"M": #89471A,
"N": #003EBD,
"O": #0E6138,
"P": #3F0F10,
"R": #00102F,
"S": #8D5500,
"T": #446228,
"W": $color-cornflower-blue, // need to update this one
);
//**
//* Border Colors
//*
$borderColor:(
"WDR": #227C9D, // Withdrawn: turqoise
"DIS": #913831, // Disapproved: red
"APR": #2D6E0E, // Approved: dark green
"DEF": #36454F, // Deferred: grey
"XXX": #483C32, // Deferred - Proposed Position: dark brown
"RDY": #003EBD, // Ready: blue
"HLD": #6421A2, // Held: purple
"NR": #DC6601, // Not Ready: Orange
"OOO": #946f00, // Out of Order: copper
"PIP": #75673E, // PIP: light brown
"MOV": #301934, // Move to ML/ID: dark purple
"Default": #513C2C, // Default: brown
);
//**
//* Panel Status Colors
//*
$panelStatuses: (
"A": #6421A2,
"C": #913831,
"I": #757575,
"O": #003EBD,
"P": #DC6601,
);
//**
//* Agenda Item Maintenance Legs
//*
// this should match legHeaderData in AIMLegsFormEdit.jsx
// if Arrow's position changes, update onHover$ in AgendaLeg.jsx to match
// remember 1 is reserved for the x col to remove legs
$sm-height-config-aim-legs-form-edit: (
"Position Title": 3,
"Position Number": 4,
"Location/Org": 5,
"Arrow": 9,
"TED": 10,
"PP/Grade": 14
);
$md-height-config-aim-legs-form-edit: (
"Action": 2,
"Language": 6,
"ETA": 8,
"TOD": 11,
"Travel": 12,
"Vice": 13,
);
$lg-height-config-aim-legs-form-edit: (
"Skills": 7,
);
// this should match columnData in AIMLegsFormRead.jsx
// if Arrow's position changes, update onHover in AIMLegsFormRead.jsx to match
$sm-height-config-aim-legs-form-read: (
"Action": 1,
"ETA": 7,
"Arrow": 8,
"TED": 9,
"Travel": 11,
"PP/Grade": 13,
);
$md-height-config-aim-legs-form-read: (
"Position Title": 2,
"Position Number": 3,
"Location/Org": 4,
"Language": 5,
"TOD": 10,
"Vice": 12
);
$lg-height-config-aim-legs-form-read: (
"Skills": 6,
);
//**
//* resolution widths for .ai-legs
//*
// used in the following places:
// Agenda Item History
// Panel Agenda Items
$ai-legs-width-config: (
1000px: 67vw,
1300px: 73vw,
1500px: 75vw,
1700px: 80vw,
2000px: 83vw,
2400px: 95vw,
2700px: 98vw,
);
//**
//* Filters using Grid configurations
//*
// grid-size is optional - defaults to 10px buffer between
// longest label and input. Send in custom grid-size property
// if more spacing is desired between label-input groupings
// Note: To prevent shrinking of inputs or stacking of text,
// grid-size should be at least = label-width + picky-width + 10
// classname that will be generated: position-search--filters--${keyname}
// ex: position-search--filters--pos-man
$filters-sizing-config: (
pos-man: (
label-width: 115px,
picky-width: 200px,
),
cm: (
label-width: 80px,
picky-width: 240px,
grid-size: 400px,
),
cm-pos: (
label-width: 100px,
picky-width: 240px,
),
el: (
label-width: 120px,
picky-width: 240px,
),
panel-m: (
label-width: 85px,
picky-width: 240px,
),
panel-m-agendas: (
label-width: 100px,
picky-width: 200px,
),
pp: (
label-width: 100px,
picky-width: 220px,
),
pv-man: (
label-width: 100px,
picky-width: 200px,
),
mpa: (
label-width: 100px,
picky-width: 200px,
),
bs: (
label-width: 120px,
picky-width: 200px,
),
spa: (
label-width: 100px,
picky-width: 240px,
),
ba: (
label-width: 140px,
picky-width: 240px,
),
ac: (
label-width: 135px,
picky-width: 270px,
),
);
//**
//* Loading Animation Times
//*
$animation-times-config: [3, 5];