atst/styles/core/_variables.scss
leigh-mil 2665094136 Apply max width to all input elements.
Update form class with better name and add form-conrainer--narrow class.
2020-02-19 11:42:03 -05:00

197 lines
4.8 KiB
SCSS

/*
* AT-ST Variables
* ===================================================
*/
$gap: 0.8rem;
// 8px at 10px $em-base
$topbar-height: 4.8rem;
$icon-bar-width: 4rem;
$icon-size-small: 2.4rem;
$hover-transition-time: 0.2s;
$search-input-height: 4.4rem;
$search-button-width: 5rem;
$footer-height: 5rem;
$usa-banner-height: 2.8rem;
$sidenav-expanded-width: 25rem;
$sidenav-collapsed-width: 10rem;
$max-panel-width: 90rem;
$home-pg-icon-width: 6rem;
$large-spacing: 4rem;
$max-page-width: $max-panel-width + $sidenav-expanded-width + $large-spacing;
$action-footer-height: 6rem;
$max-input-width: 46rem;
/*
* 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: 2.3rem;
$h4-font-size: 1.9rem;
$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-semibold: 600;
$font-bold: 700;
// Color
$color-blue: #0071bc;
$color-blue-darker: #205493;
$color-blue-darkest: #112e51;
$color-blue-light: #e5f1ff;
$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-offwhite: #fbfbfd;
$color-black: #000000;
$color-black-light: #212121;
$color-gray-dark: #323a45;
$color-gray: #5b616b;
$color-gray-medium: #9b9b9b;
$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: #eff2f7;
$color-gold-dark: #cd841b;
$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: #4190e2;
$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(208, 219, 231, 0.5);
$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: 0px 2px 5px 0px $color-shadow;
$box-shadow-big: 0 4px 10px 0 rgba(193, 193, 193, 0.5);
$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: 4rem;