ef0ee332b7
Add a brief README explaining best practices for styling Add comment annotations to the top of each file that references the original USWDS documentation and source
161 lines
4.7 KiB
SCSS
161 lines
4.7 KiB
SCSS
/*
|
|
* AT-ST Variables
|
|
* ===================================================
|
|
*/
|
|
|
|
// What is this?
|
|
$nav-width: 300px;
|
|
|
|
|
|
/*
|
|
* USWDS Variables
|
|
* @see https://github.com/uswds/uswds/blob/develop/src/stylesheets/core/_variables.scss
|
|
* ===================================================
|
|
*/
|
|
|
|
$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-shadow: rgba(#000, 0.3);
|
|
$color-transparent: rgba(#000, 0);
|
|
|
|
// Mobile First Breakpoints
|
|
$small-screen: 481px;
|
|
$medium-screen: 600px;
|
|
$large-screen: 1201px;
|
|
|
|
// 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: '../';
|
|
|
|
// 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: 1040px;
|
|
$site-margins: 3rem;
|
|
$site-margins-mobile: 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: 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;
|