168 lines
5.2 KiB
SCSS
168 lines
5.2 KiB
SCSS
/*
|
|
* AT-ST Variables
|
|
* ===================================================
|
|
*/
|
|
|
|
$gap: 0.8rem; // 8px at 10px $em-base
|
|
$topbar-height: 4.8rem;
|
|
$icon-bar-width: 4.0rem;
|
|
$icon-size-small: 2.4rem;
|
|
$hover-transition-time: 0.2s;
|
|
$search-input-height: 4.4rem;
|
|
$search-button-width: 5.0rem;
|
|
|
|
/*
|
|
* USWDS Variables
|
|
* @see https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_variables.scss
|
|
* ===================================================
|
|
*/
|
|
|
|
// $em-base: 10px; This is not defaulted in USWDS, so we cant override it
|
|
$base-font-size: 1.7rem;
|
|
$small-font-size: 1.4rem;
|
|
$lead-font-size: 2rem;
|
|
$title-font-size: 5.2rem;
|
|
$h1-font-size: 4rem;
|
|
$h2-font-size: 3rem;
|
|
$h3-font-size: 2rem;
|
|
$h4-font-size: 1.7rem;
|
|
$h5-font-size: 1.5rem;
|
|
$h6-font-size: 1.3rem;
|
|
$base-line-height: 1.5;
|
|
$heading-line-height: 1.3;
|
|
$lead-line-height: 1.7;
|
|
|
|
$font-sans: 'Source Sans Pro', sans-serif;
|
|
$font-serif: 'Merriweather', serif;
|
|
|
|
$font-normal: 400;
|
|
$font-bold: 700;
|
|
|
|
// Color
|
|
$color-blue: #0071bc;
|
|
$color-blue-darker: #205493;
|
|
$color-blue-darkest: #112e51;
|
|
|
|
$color-aqua: #02bfe7;
|
|
$color-aqua-dark: #00a6d2;
|
|
$color-aqua-darkest: #046b99;
|
|
$color-aqua-light: #9bdaf1;
|
|
$color-aqua-lightest: #e1f3f8;
|
|
|
|
$color-red: #e31c3d;
|
|
$color-red-dark: #cd2026;
|
|
$color-red-darkest: #981b1e;
|
|
$color-red-light: #e59393;
|
|
$color-red-lightest: #f9dede;
|
|
|
|
$color-white: #ffffff;
|
|
$color-black: #000000;
|
|
$color-black-light: #212121;
|
|
|
|
$color-gray-dark: #323a45;
|
|
$color-gray: #5b616b;
|
|
$color-gray-medium: #757575;
|
|
$color-gray-light: #aeb0b5;
|
|
$color-gray-lighter: #d6d7d9;
|
|
$color-gray-lightest: #f1f1f1;
|
|
|
|
$color-gray-warm-dark: #494440;
|
|
$color-gray-warm-light: #e4e2e0;
|
|
$color-gray-cool-light: #dce4ef;
|
|
|
|
$color-gold: #fdb81e;
|
|
$color-gold-light: #f9c642;
|
|
$color-gold-lighter: #fad980;
|
|
$color-gold-lightest: #fff1d2;
|
|
|
|
$color-green: #2e8540;
|
|
$color-green-light: #4aa564;
|
|
$color-green-lighter: #94bfa2;
|
|
$color-green-lightest: #e7f4e4;
|
|
|
|
$color-cool-blue: #205493;
|
|
$color-cool-blue-light: #4773aa;
|
|
$color-cool-blue-lighter: #8ba6ca;
|
|
$color-cool-blue-lightest: #dce4ef;
|
|
|
|
$color-purple: #4c2c92;
|
|
|
|
// Functional colors
|
|
$color-primary: $color-blue;
|
|
$color-primary-darker: $color-blue-darker;
|
|
$color-primary-darkest: $color-blue-darkest;
|
|
|
|
$color-primary-alt: $color-aqua;
|
|
$color-primary-alt-dark: $color-aqua-dark;
|
|
$color-primary-alt-darkest: $color-aqua-darkest;
|
|
$color-primary-alt-light: $color-aqua-light;
|
|
$color-primary-alt-lightest: $color-aqua-lightest;
|
|
|
|
$color-secondary: $color-red;
|
|
$color-secondary-dark: $color-red-dark;
|
|
$color-secondary-darkest: $color-red-darkest;
|
|
$color-secondary-light: $color-red-light;
|
|
$color-secondary-lightest: $color-red-lightest;
|
|
|
|
$color-base: $color-black-light;
|
|
$color-focus: $color-gray-light;
|
|
$color-visited: $color-purple;
|
|
|
|
$color-overlay: rgba(#000, 0.5);
|
|
$color-shadow: rgba(#000, 0.3);
|
|
$color-transparent: rgba(#000, 0);
|
|
|
|
// Mobile First Breakpoints
|
|
$small-screen: 481px;
|
|
$medium-screen: 600px;
|
|
$large-screen: 800px;
|
|
$xlarge-screen: 1200px;
|
|
|
|
// Grid column counts by screen size
|
|
$grid-columns-small: 1;
|
|
$grid-columns-medium: 6;
|
|
$grid-columns-large: 12;
|
|
|
|
// @media single-keyword helpers
|
|
// $small: new-breakpoint(min-width $small-screen $grid-columns-small);
|
|
// $medium: new-breakpoint(min-width $medium-screen $grid-columns-medium);
|
|
// $large: new-breakpoint(min-width $large-screen $grid-columns-large);
|
|
|
|
// Set the base path for assets (used for font and image paths below)
|
|
$asset-path: '../static/';
|
|
|
|
// Relative font and image file paths
|
|
$font-path: '#{$asset-path}fonts';
|
|
$image-path: '#{$asset-path}img';
|
|
|
|
// Set $asset-pipeline to true if you're using the Rails Asset Pipeline
|
|
$asset-pipeline: false;
|
|
|
|
// Magic Numbers
|
|
$text-max-width: 66ch; // 66 characters per line
|
|
$lead-max-width: 77rem;
|
|
$site-max-width: 1200px; // previously 1040px;
|
|
$site-margins: $gap; // previously 3rem;
|
|
$site-margins-mobile: $gap / 2; // previously 1.5rem;
|
|
$article-max-width: 600px;
|
|
$input-max-width: 46rem;
|
|
$label-border-radius: 2px;
|
|
$checkbox-border-radius: 2px;
|
|
$border-radius: 3px;
|
|
$button-border-radius: 5px;
|
|
$box-shadow: 0 0 2px $color-shadow;
|
|
$focus-outline: 2px dotted $color-gray-light;
|
|
$focus-spacing: 3px;
|
|
$nav-width: 300px; // previously 951px;
|
|
$sidenav-current-border-width: 0.4rem; // must be in rem for math
|
|
|
|
// 44 x 44 pixels hit target following Apple iOS Human Interface
|
|
// Guidelines
|
|
$hit-area: 4.4rem;
|
|
|
|
$spacing-x-small: 0.5rem;
|
|
$spacing-small: 1rem;
|
|
$spacing-md-small: 1.5rem;
|
|
$spacing-medium: 2rem;
|
|
$spacing-large: 3rem;
|