@charset "UTF-8"; /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- GENERAL SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* ---------------------------------------- Image path ---------------------------------------- Relative image file path ---------------------------------------- */ /* ---------------------------------------- Show compile warnings ---------------------------------------- Show Sass warnings when functions and mixins use non-standard tokens. AND Show updates and notifications. ---------------------------------------- */ /* ---------------------------------------- Namespace ---------------------------------------- */ /* ---------------------------------------- Prefix separator ---------------------------------------- Set the character the separates responsive and state prefixes from the main class name. The default (":") needs to be preceded by two backslashes to be properly escaped. ---------------------------------------- */ /* ---------------------------------------- Layout grid ---------------------------------------- Should the layout grid classes output with !important ---------------------------------------- */ /* ---------------------------------------- Border box sizing ---------------------------------------- When set to true, sets the box-sizing property of all site elements to `border-box`. ---------------------------------------- */ /* ---------------------------------------- Focus styles ---------------------------------------- */ /* ---------------------------------------- Icons ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- TYPOGRAPHY SETTINGS ---------------------------------------- Read more about settings and USWDS typography tokens in the documentation: https://designsystem.digital.gov/design-tokens/typesetting/font-family/ ---------------------------------------- */ /* ---------------------------------------- Root font size ---------------------------------------- Setting $theme-respect-user-font-size to true sets the root font size to 100% and uses ems for media queries ---------------------------------------- $theme-root-font-size only applies when $theme-respect-user-font-size is set to false. This will set the root font size as a specific px value and use px values for media queries. Accepts true or false ---------------------------------------- */ /* ---------------------------------------- Global styles ---------------------------------------- Adds basic styling for the following unclassed elements: - paragraph: paragraph text - link: links - content: paragraph text, links, headings, lists, and tables ---------------------------------------- */ /* ---------------------------------------- Font path ---------------------------------------- Relative font file path ---------------------------------------- */ /* ---------------------------------------- Custom typeface tokens ---------------------------------------- Add a new custom typeface token if your project uses a typeface not already defined by USWDS. ---------------------------------------- USWDS defines the following tokens by default: ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- Add as many new tokens as you have custom typefaces. Reference your new token(s) in the type-based font settings using the quoted name of the token. For example: $theme-font-type-cond: 'example-font-token'; display-name: The display name of your font cap-height: The height of a 500px `N` in Sketch ---------------------------------------- You should change `example-[style]-token` names to something more descriptive. ---------------------------------------- */ /* ---------------------------------------- Type-based font settings ---------------------------------------- Set the type-based tokens for your project from the following tokens, or from any new font tokens you added in $theme-typeface-tokens. ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- */ /* ---------------------------------------- Custom font stacks ---------------------------------------- Add custom font stacks to any of the type-based fonts. Any USWDS typeface token already has a default stack. Custom stacks don't need to include the font's display name. It will automatically appear at the start of the stack. ---------------------------------------- Example: $theme-font-type-sans: 'source-sans-pro'; $theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; Output: font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; ---------------------------------------- */ /* ---------------------------------------- Add any custom font source files ---------------------------------------- If you want USWDS to generate additional @font-face declarations, add your font data below, following the example that follows. ---------------------------------------- USWDS automatically generates @font-face decalarations for the following 'merriweather' 'public-sans' 'roboto-mono' 'source-sans-pro' These typefaces not require custom source files. ---------------------------------------- EXAMPLE - dir: Directory relative to $theme-font-path - This directory should include fonts saved as .ttf, .woff, and .woff2 ExampleSerif-Normal.ttf ExampleSerif-Normal.woff ExampleSerif-Normal.woff2 $theme-font-serif-custom-src: ( dir: 'custom/example-serif', roman: ( 100: false, 200: false, 300: 'ExampleSerif-Light', 400: 'ExampleSerif-Normal', 500: false, 600: false, 700: 'ExampleSerif-Bold', 800: false, 900: false, ), italic: ( 100: false, 200: false, 300: 'ExampleSerif-LightItalic', 400: 'ExampleSerif-Italic', 500: false, 600: false, 700: 'ExampleSerif-BoldItalic', 800: false, 900: false, ), ); ---------------------------------------- */ /* ---------------------------------------- Role-based font settings ---------------------------------------- Set the role-based tokens for your project from the following font-type tokens. ---------------------------------------- 'cond' 'icon' 'lang' 'mono' 'sans' 'serif' ---------------------------------------- */ /* ---------------------------------------- Type scale ---------------------------------------- Define your project's type scale using values from the USWDS system type scale 1-20 ---------------------------------------- */ /* ---------------------------------------- Font weights ---------------------------------------- Assign weights 100-900 Or use `false` for unneeded weights. ---------------------------------------- */ /* ---------------------------------------- General typography settings ---------------------------------------- Type scale tokens ---------------------------------------- micro: 10px 1: 12px 2: 13px 3: 14px 4: 15px 5: 16px 6: 17px 7: 18px 8: 20px 9: 22px 10: 24px 11: 28px 12: 32px 13: 36px 14: 40px 15: 48px 16: 56px 17: 64px 18: 80px 19: 120px 20: 140px ---------------------------------------- Line height tokens ---------------------------------------- 1: 1 2: 1.15 3: 1.35 4: 1.5 5: 1.62 6: 1.75 ---------------------------------------- Font role tokens ---------------------------------------- 'ui' 'heading' 'body' 'code' 'alt' ---------------------------------------- Measure (max-width) tokens ---------------------------------------- 1: 44ex 2: 60ex 3: 64ex 4: 68ex 5: 74ex 6: 88ex none: none ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- SPACING SETTINGS ---------------------------------------- Read more about settings and USWDS spacing units tokens in the documentation: https://designsystem.digital.gov/design-tokens/spacing-units ---------------------------------------- */ /* ---------------------------------------- Border radius ---------------------------------------- 2px 2px 0.5 4px 1 8px 1.5 12px 2 16px 2.5 20px 3 24px 4 32px 5 40px 6 48px 7 56px 8 64px 9 72px ---------------------------------------- */ /* ---------------------------------------- Column gap ---------------------------------------- 2px 2px 0.5 4px 1 8px 2 16px 3 24px 4 32px 5 40px 6 48px ---------------------------------------- */ /* ---------------------------------------- Grid container max-width ---------------------------------------- mobile mobile-lg tablet tablet-lg desktop desktop-lg widescreen ---------------------------------------- */ /* ---------------------------------------- Site ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- COLOR SETTINGS ---------------------------------------- Read more about settings and USWDS color tokens in the documentation: https://designsystem.digital.gov/design-tokens/color ---------------------------------------- */ /* ---------------------------------------- Theme palette colors ---------------------------------------- */ /* ---------------------------------------- State palette colors ---------------------------------------- */ /* ---------------------------------------- General colors ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- UTILITIES SETTINGS ---------------------------------------- Read more about settings and USWDS utilities in the documentation: https://designsystem.digital.gov/utilities ---------------------------------------- */ /* ---------------------------------------- Utility breakpoints ---------------------------------------- Which breakpoints does your project need? Select as `true` any breakpoint used by utilities or layout grid ---------------------------------------- */ /* ---------------------------------------- Global colors ---------------------------------------- The following palettes will be added to - background-color - border-color - color - text-decoration-color ---------------------------------------- */ /* ---------------------------------------- Settings ---------------------------------------- */ /* ---------------------------------------- Values ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- COMPONENT SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- GENERAL SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* ---------------------------------------- Image path ---------------------------------------- Relative image file path ---------------------------------------- */ /* ---------------------------------------- Show compile warnings ---------------------------------------- Show Sass warnings when functions and mixins use non-standard tokens. AND Show updates and notifications. ---------------------------------------- */ /* ---------------------------------------- Namespace ---------------------------------------- */ /* ---------------------------------------- Prefix separator ---------------------------------------- Set the character the separates responsive and state prefixes from the main class name. The default (":") needs to be preceded by two backslashes to be properly escaped. ---------------------------------------- */ /* ---------------------------------------- Layout grid ---------------------------------------- Should the layout grid classes output with !important ---------------------------------------- */ /* ---------------------------------------- Border box sizing ---------------------------------------- When set to true, sets the box-sizing property of all site elements to `border-box`. ---------------------------------------- */ /* ---------------------------------------- Focus styles ---------------------------------------- */ /* ---------------------------------------- Icons ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- TYPOGRAPHY SETTINGS ---------------------------------------- Read more about settings and USWDS typography tokens in the documentation: https://designsystem.digital.gov/design-tokens/typesetting/overview/ ---------------------------------------- */ /* ---------------------------------------- Root font size ---------------------------------------- Setting $theme-respect-user-font-size to true sets the root font size to 100% and uses ems for media queries ---------------------------------------- $theme-root-font-size only applies when $theme-respect-user-font-size is set to false. This will set the root font size as a specific px value and use px values for media queries. Accepts true or false ---------------------------------------- */ /* ---------------------------------------- Global styles ---------------------------------------- Adds basic styling for the following unclassed elements: - paragraph: paragraph text - link: links - content: paragraph text, links, headings, lists, and tables ---------------------------------------- */ /* ---------------------------------------- Font path ---------------------------------------- Relative font file path ---------------------------------------- */ /* ---------------------------------------- Custom typeface tokens ---------------------------------------- Add a new custom typeface token if your project uses a typeface not already defined by USWDS. ---------------------------------------- USWDS defines the following tokens by default: ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- Add as many new tokens as you have custom typefaces. Reference your new token(s) in the type-based font settings using the quoted name of the token. For example: $theme-font-type-cond: 'example-font-token'; display-name: The display name of your font cap-height: The height of a 500px `N` in Sketch ---------------------------------------- You should change `example-[style]-token` names to something more descriptive. ---------------------------------------- */ /* ---------------------------------------- Type-based font settings ---------------------------------------- Set the type-based tokens for your project from the following tokens, or from any new font tokens you added in $theme-typeface-tokens. ---------------------------------------- 'georgia' 'helvetica' 'merriweather' 'open-sans' 'public-sans' 'roboto-mono' 'source-sans-pro' 'system' 'tahoma' 'verdana' ---------------------------------------- */ /* ---------------------------------------- Custom font stacks ---------------------------------------- Add custom font stacks to any of the type-based fonts. Any USWDS typeface token already has a default stack. Custom stacks don't need to include the font's display name. It will automatically appear at the start of the stack. ---------------------------------------- Example: $theme-font-type-sans: 'source-sans-pro'; $theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans; Output: font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans; ---------------------------------------- */ /* ---------------------------------------- Add any custom font source files ---------------------------------------- If you want USWDS to generate additional @font-face declarations, add your font data below, following the example that follows. ---------------------------------------- USWDS automatically generates @font-face decalarations for the following 'merriweather' 'public-sans' 'roboto-mono' 'source-sans-pro' These typefaces not require custom source files. ---------------------------------------- EXAMPLE - dir: Directory relative to $theme-font-path - This directory should include fonts saved as .ttf, .woff, and .woff2 ExampleSerif-Normal.ttf ExampleSerif-Normal.woff ExampleSerif-Normal.woff2 $theme-font-serif-custom-src: ( dir: 'custom/example-serif', roman: ( 100: false, 200: false, 300: 'ExampleSerif-Light', 400: 'ExampleSerif-Normal', 500: false, 600: false, 700: 'ExampleSerif-Bold', 800: false, 900: false, ), italic: ( 100: false, 200: false, 300: 'ExampleSerif-LightItalic', 400: 'ExampleSerif-Italic', 500: false, 600: false, 700: 'ExampleSerif-BoldItalic', 800: false, 900: false, ), ); ---------------------------------------- */ /* ---------------------------------------- Role-based font settings ---------------------------------------- Set the role-based tokens for your project from the following font-type tokens. ---------------------------------------- 'cond' 'icon' 'lang' 'mono' 'sans' 'serif' ---------------------------------------- */ /* ---------------------------------------- Type scale ---------------------------------------- Define your project's type scale using values from the USWDS system type scale 1-20 ---------------------------------------- */ /* ---------------------------------------- Font weights ---------------------------------------- Assign weights 100-900 Or use `false` for unneeded weights. ---------------------------------------- */ /* ---------------------------------------- General typography settings ---------------------------------------- Type scale tokens ---------------------------------------- micro: 10px 1: 12px 2: 13px 3: 14px 4: 15px 5: 16px 6: 17px 7: 18px 8: 20px 9: 22px 10: 24px 11: 28px 12: 32px 13: 36px 14: 40px 15: 48px 16: 56px 17: 64px 18: 80px 19: 120px 20: 140px ---------------------------------------- Line height tokens ---------------------------------------- 1: 1 2: 1.15 3: 1.35 4: 1.5 5: 1.62 6: 1.75 ---------------------------------------- Font role tokens ---------------------------------------- 'ui' 'heading' 'body' 'code' 'alt' ---------------------------------------- Measure (max-width) tokens ---------------------------------------- 1: 44ex 2: 60ex 3: 64ex 4: 68ex 5: 74ex 6: 88ex none: none ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- COLOR SETTINGS ---------------------------------------- Read more about settings and USWDS color tokens in the documentation: https://designsystem.digital.gov/design-tokens/color ---------------------------------------- */ /* ---------------------------------------- Theme palette colors ---------------------------------------- */ /* ---------------------------------------- State palette colors ---------------------------------------- */ /* ---------------------------------------- General colors ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- SPACING SETTINGS ---------------------------------------- Read more about settings and USWDS spacing units tokens in the documentation: https://designsystem.digital.gov/design-tokens/spacing-units ---------------------------------------- */ /* ---------------------------------------- Border radius ---------------------------------------- 2px 2px 0.5 4px 1 8px 1.5 12px 2 16px 2.5 20px 3 24px 4 32px 5 40px 6 48px 7 56px 8 64px 9 72px ---------------------------------------- */ /* ---------------------------------------- Column gap ---------------------------------------- 2px 2px 0.5 4px 1 8px 2 16px 3 24px 4 32px 5 40px 6 48px ---------------------------------------- */ /* ---------------------------------------- Grid container max-width ---------------------------------------- mobile mobile-lg tablet tablet-lg desktop desktop-lg widescreen ---------------------------------------- */ /* ---------------------------------------- Site ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- UTILITIES SETTINGS ---------------------------------------- Read more about settings and USWDS utilities in the documentation: https://designsystem.digital.gov/utilities ---------------------------------------- */ /* ---------------------------------------- Utility breakpoints ---------------------------------------- Which breakpoints does your project need? Select as `true` any breakpoint used by utilities or layout grid ---------------------------------------- */ /* ---------------------------------------- Global colors ---------------------------------------- The following palettes will be added to - background-color - border-color - color - text-decoration-color ---------------------------------------- */ /* ---------------------------------------- Settings ---------------------------------------- */ /* ---------------------------------------- Values ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.13.1 ---------------------------------------- COMPONENT SETTINGS ---------------------------------------- Read more about settings and USWDS style tokens in the documentation: https://designsystem.digital.gov/design-tokens ---------------------------------------- */ /* ======================================== Functions ---------------------------------------- */ /* ======================================== General-purpose functions ---------------------------------------- */ /* ---------------------------------------- divide() ---------------------------------------- Divides one number by another, to a specified precision. ---------------------------------------- */ /* ---------------------------------------- uswds-error() ---------------------------------------- Allow the system to pass an error as text to test error states in unit testing ---------------------------------------- */ /* ---------------------------------------- error-not-token() ---------------------------------------- Returns a common not-a-token error. ---------------------------------------- */ /* ---------------------------------------- map-deep-get() ---------------------------------------- @author Hugo Giraudel @access public @param {Map} $map - Map @param {Arglist} $keys - Key chain @return {*} - Desired value ---------------------------------------- */ /* ---------------------------------------- strip-unit() ---------------------------------------- Remove the unit of a length @author Hugo Giraudel @param {Number} $number - Number to remove unit from @return {Number} - Unitless number ---------------------------------------- */ /* ---------------------------------------- multi-cat() ---------------------------------------- Concatenate two lists ---------------------------------------- */ /* ---------------------------------------- map-collect() ---------------------------------------- Collect multiple maps into a single large map source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe ---------------------------------------- */ /* ---------------------------------------- smart-quote() ---------------------------------------- Quotes strings Inspects `px`, `xs`, and `xl` numbers Leaves bools as is ---------------------------------------- */ /* ---------------------------------------- remove() ---------------------------------------- Remove a value from a list ---------------------------------------- */ /* ---------------------------------------- to-map() ---------------------------------------- Convert a single value to a USWDS value map. Candidate for deprecation if we remove isReadable ---------------------------------------- */ /* ---------------------------------------- base-to-map() ---------------------------------------- Convert a single base to a USWDS value map. Candidate for deprecation if we remove isReadable ---------------------------------------- */ /* ---------------------------------------- ns() ---------------------------------------- Add a namesspace of $type if that namespace is set to output ---------------------------------------- */ /* ---------------------------------------- de-list() ---------------------------------------- Transform a one-element list or arglist into that single element. ---------------------------------------- (1) => 1 ((1)) => (1) ---------------------------------------- */ /* ---------------------------------------- unpack() ---------------------------------------- Create lists of single items from lists of lists. ---------------------------------------- (1, (2.1, 2.2), 3) --> (1, 2.1, 2.2, 3) ---------------------------------------- */ /* ---------------------------------------- get-last() ---------------------------------------- Return the last item of a list, Return null if the value is null ---------------------------------------- */ /* ---------------------------------------- has-important() ---------------------------------------- Check to see if `!important` is being passed in a mixin's props ---------------------------------------- */ /* ---------------------------------------- append-important() ---------------------------------------- Append `!important` to a list ---------------------------------------- */ /* ---------------------------------------- spacing-multiple() ---------------------------------------- Converts a spacing unit multiple into the desired final units (currently rem) ---------------------------------------- */ /* ---------------------------------------- rem-to-px() ---------------------------------------- Converts a value in rem to a value in px ---------------------------------------- */ /* ---------------------------------------- rem-to-user-em() ---------------------------------------- Converts a value in rem to a value in [user-settings] em for use in media queries ---------------------------------------- */ /* ---------------------------------------- validate-typeface-token() ---------------------------------------- Check to see if a typeface-token exists. Throw an error if a passed token does not exist in the typeface-token map. ---------------------------------------- */ /* ---------------------------------------- cap-height() ---------------------------------------- Get the cap height of a valid typeface ---------------------------------------- */ /* ---------------------------------------- px-to-rem() ---------------------------------------- Converts a value in px to a value in rem ---------------------------------------- */ /* ---------------------------------------- normalize-type-scale() ---------------------------------------- Normalizes a specific face's optical size to a set target ---------------------------------------- */ /* ---------------------------------------- utility-font() ---------------------------------------- Get a normalized font-size in rem from a family and a type size in either system scale or project scale ---------------------------------------- Not the public-facing function. Used for building the utilities and withholds certain errors. ---------------------------------------- */ /* ---------------------------------------- line-height() lh() ---------------------------------------- Get a normalized line-height from a family and a line-height scale unit ---------------------------------------- */ /* ---------------------------------------- convert-to-font-type() ---------------------------------------- Converts a font-role token into a font-type token. Leaves font-type tokens unchanged. ---------------------------------------- */ /* ---------------------------------------- get-font-stack() ---------------------------------------- Get a font stack from a style- or role-based font token. ---------------------------------------- */ /* ---------------------------------------- get-typeface-token() ---------------------------------------- Get a typeface token from a font-type or font-role token. ---------------------------------------- */ /* ---------------------------------------- get-system-color() ---------------------------------------- Derive a system color from its family, value, and vivid or a passed variable that is, itself, a list ---------------------------------------- */ /* ---------------------------------------- system-type-scale() ---------------------------------------- Get a value from the system type scale ---------------------------------------- */ /* ---------------------------------------- calc-gap-offset() ---------------------------------------- Calculate a valid uswds unit that is half the width of a given unit, for calculating gap offset in the layout grid. ---------------------------------------- */ /* ---------------------------------------- get-standard-values() ---------------------------------------- Gets a map of USWDS standard values for a property ---------------------------------------- */ /* ---------------------------------------- number-to-token() ---------------------------------------- Converts an integer or numeric value into a system value Ex: 0.5 --> '05' -1px --> 'neg-1px' ---------------------------------------- */ /* ---------------------------------------- columns() ---------------------------------------- outputs a grid-col number based on the number of desired columns in the 12-column grid Ex: columns(2) --> 6 grid-col(columns(2)) ---------------------------------------- */ /* ---------------------------------------- get-uswds-value() ---------------------------------------- Finds and outputs a value from the USWDS standard values. Used to build other standard utility functions and mixins. ---------------------------------------- */ /* ---------------------------------------- decompose-color-token() ---------------------------------------- Convert a color token into into a list of form [family], [grade], [variant] Vivid variants return "vivid" as the variant. If neither grade nor variant exists, returns 'false' ---------------------------------------- */ /* ---------------------------------------- test-colors() ---------------------------------------- Check to see if all system colors fall between the proper relative luminance range for their grade. Has a couple quirks, as the luminance() function returns slightly different results than expected. ---------------------------------------- */ /* ---------------------------------------- str-split() ---------------------------------------- Split a string at a given separator and convert into a lisrt of substrings ---------------------------------------- */ /* ---------------------------------------- str-replace() ---------------------------------------- Replace any substring with another string ---------------------------------------- */ /* ---------------------------------------- is-system-color-token() ---------------------------------------- Return whether a token is a system color token ---------------------------------------- */ /* ---------------------------------------- is-theme-color-token() ---------------------------------------- Return whether a token is a theme color token ---------------------------------------- */ /* ---------------------------------------- color-token-assignment() ---------------------------------------- Get the system token equivalent of any theme color token ---------------------------------------- */ /* ---------------------------------------- is-color-token() ---------------------------------------- Returns whether a given string is a USWDS color token. ---------------------------------------- */ /* ---------------------------------------- calculate-grade() ---------------------------------------- Derive the grade equivalent any color, even non-token colors ---------------------------------------- */ /* ---------------------------------------- color() ---------------------------------------- Derive a color from a color shortcode ---------------------------------------- */ /* ---------------------------------------- advanced-color() ---------------------------------------- Derive a color from a color triplet: [family], [grade], [variant] ---------------------------------------- */ /* ---------------------------------------- units() ---------------------------------------- Converts a spacing unit into the desired final units (currently rem) ---------------------------------------- */ /* ---------------------------------------- get-palettes() ---------------------------------------- Build a single map of plugin values from a list of plugin keys. ---------------------------------------- */ /* ---------------------------------------- border-radius() ---------------------------------------- Get a border-radius from the system border-radii ---------------------------------------- */ /* ---------------------------------------- font-weight() fw() ---------------------------------------- Get a font-weight value from the system font-weight ---------------------------------------- */ /* ---------------------------------------- feature() ---------------------------------------- Gets a valid USWDS font feature setting ---------------------------------------- */ /* ---------------------------------------- flex() ---------------------------------------- Gets a valid USWDS flex value ---------------------------------------- */ /* ---------------------------------------- font-family() family() ---------------------------------------- Get a font-family stack from a role-based or type-based font family ---------------------------------------- */ /* ---------------------------------------- letter-spacing() ls() ---------------------------------------- Get a letter-spacing value from the system letter-spacing ---------------------------------------- */ /* ---------------------------------------- measure() ---------------------------------------- Gets a valid USWDS reading line length ---------------------------------------- */ /* ---------------------------------------- opacity() ---------------------------------------- Get an opacity from the system opacities ---------------------------------------- */ /* ---------------------------------------- order() ---------------------------------------- Get an order value from the system orders ---------------------------------------- */ /* ---------------------------------------- radius() ---------------------------------------- Get a border-radius value from the system letter-spacing ---------------------------------------- */ /* ---------------------------------------- font-size() ---------------------------------------- Get type scale value from a [family] and [scale] ---------------------------------------- */ /* ---------------------------------------- z-index() z() ---------------------------------------- Get a z-index value from the system z-index ---------------------------------------- */ /* ---------------------------------------- magic-number() ---------------------------------------- Returns the magic number of two color grades. Takes numbers or color tokens. magic-number(50, 10) return: 40 magic-number("red-50", "red-10") return: 40 ---------------------------------------- */ /* ---------------------------------------- get-default() ---------------------------------------- Returns the default value from a map of project defaults get-default("bg-color") > $theme-body-background-color ---------------------------------------- */ /* ---------------------------------------- get-color-token-from-bg() ---------------------------------------- Returns an accessible foreground color token, given a background, preferred color, fallback color, and WCAG target returns: color-token get-color-token-from-bg( "black", "red-60", "red-10", "AA") > "red-10" ---------------------------------------- */ /* ---------------------------------------- get-link-tokens-from-bg() ---------------------------------------- Get accessible link colors for a given background color returns: link-token, hover-token get-link-tokens-from-bg( "black", "red-60", "red-10", "AA") > "red-10", "red-5" get-link-tokens-from-bg( "black", "red-60v", "red-10v", "AA-large") > "red-60v", "red-50v" get-link-tokens-from-bg( "black", "red-5v", "red-60v", "AA") > "red-5v", "white" get-link-tokens-from-bg( "black", "white", "red-60v", "AA") > "white", "white" ---------------------------------------- */ /* ---------------------------------------- color-token-type() ---------------------------------------- Returns the type of a color token. Returns: "system" | "theme" ---------------------------------------- */ /* ---------------------------------------- color-token-family() ---------------------------------------- Returns the family of a color token. Returns: color-family color-token-family("accent-warm-vivid") > "accent-warm" color-token-family("red-50v") > "red" color-token-variant(("red", 50, "vivid")) > "red" ---------------------------------------- */ /* ---------------------------------------- color-token-grade() ---------------------------------------- Returns the grade of a USWDS color token. Returns: color-grade color-token-grade("accent-warm") > "root" color-token-grade("accent-warm-vivid") > "root" color-token-grade("accent-warm-darker") > "darker" color-token-grade("red-50v") > 50 color-token-variant(("red", 50, "vivid")) > 50 ---------------------------------------- */ /* ---------------------------------------- color-token-variant() ---------------------------------------- Returns the variant of color token. Returns: "vivid" | false color-token-variant("accent-warm") > false color-token-variant("accent-warm-vivid") > "vivid" color-token-variant("red-50v") > "vivid" color-token-variant(("red", 50, "vivid")) > "vivid" ---------------------------------------- */ /* ---------------------------------------- next-token() ---------------------------------------- Returns next "darker" or "lighter" color token of the same token type and variant. Returns: color-token | false next-token("accent-warm", "lighter") > "accent-warm-light" next-token("gray-10", "lighter") > "gray-5" next-token("gray-5", "lighter") > "white" next-token("white", "lighter") > false next-token("red-50v", "darker") > "red-60v" next-token("red-50", "darker") > "red-60" next-token("red-80v", "darker") > "red-90" next-token("red-90", "darker") > "black" next-token("white", "darker") > "gray-5" next-token("black", "lighter") > "gray-90" ---------------------------------------- */ /* ---------------------------------------- wcag-magic-number() ---------------------------------------- Returns the magic number of a specific wcag grade: "AA" "AA-Large" "AAA" wcag-magic-number("AA") > 50 ---------------------------------------- */ /* ---------------------------------------- is-accessible-magic-number() ---------------------------------------- Returns whether two grades achieve specified target color contrast Returns: true | false is-accessible-magic-number(10, 50, "AA") > false is-accessible-magic-number(10, 60, "AA") > true ---------------------------------------- */ /* ======================================== core/units ---------------------------------------- The master palettes of - colors - whitespace - typescale ---------------------------------------- This file is not meant to be modified by USWDS project teams. Change your project values in project/uswds-project-settings ---------------------------------------- */ /* ---------------------------------------- Spacing grid multiplier ---------------------------------------- */ /* ---------------------------------------- Spacing grid ---------------------------------------- */ /* ---------------------------------------- Breakpoints ---------------------------------------- */ /* ---------------------------------------- Units ---------------------------------------- */ /* ---------------------------------------- Layout grid widths ---------------------------------------- */ /* ---------------------------------------- Font stacks ---------------------------------------- */ /* ---------------------------------------- Typeface ---------------------------------------- */ /* ---------------------------------------- Typescale ---------------------------------------- */ /* ---------------------------------------- Measure ---------------------------------------- */ /* ---------------------------------------- Line height ---------------------------------------- */ /* ---------------------------------------- Base cap height ---------------------------------------- 500px 'N' height measured in Sketch. Used for normalizing font sizes. Current normalized to Apple system fonts. ---------------------------------------- */ /* ---------------------------------------- Luminance ranges ---------------------------------------- */ /* ---------------------------------------- Colors ---------------------------------------- */ /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS 2.0 Variables Use for computed variables or any not meant to be set by system users directly. ---------------------------------------- */ /* ---------------------------------------- Touch target size ---------------------------------------- */ /* ---------------------------------------- Namespace ---------------------------------------- */ /* ---------------------------------------- Separator ---------------------------------------- */ /* ---------------------------------------- Spacing ---------------------------------------- All spacing values that can be called by units() ---------------------------------------- */ /* ---------------------------------------- Project fonts ---------------------------------------- Collects font settings in a map for looping. ---------------------------------------- */ /* ---------------------------------------- Font stack ---------------------------------------- Compute the project font stack based on the project fonts and the font definition values set in core/_font-definitions ---------------------------------------- */ /* ---------------------------------------- Cap heights ---------------------------------------- Collect project cap heights ---------------------------------------- */ /* ---------------------------------------- Theme color families and grades ---------------------------------------- */ /* ---------------------------------------- Theme color map ---------------------------------------- */ /* ---------------------------------------- Theme color shortcodes ---------------------------------------- */ /* ---------------------------------------- System magic numbers for color contrast ---------------------------------------- */ /* ---------------------------------------- Luminance color component values ---------------------------------------- */ /* ---------------------------------------- Build the project type scale map ---------------------------------------- */ /* ---------------------------------------- Border-radius ---------------------------------------- */ /* ---------------------------------------- Column gaps ---------------------------------------- */ /* ---------------------------------------- Grid ---------------------------------------- */ /* ---------------------------------------- Aspect Ratios ---------------------------------------- */ /* ---------------------------------------- Easing ---------------------------------------- */ /* ---------------------------------------- Project defaults ---------------------------------------- */ /* ---------------------------------------- USWDS Properties ---------------------------------------- */ /* ---------------------------------------- family() ---------------------------------------- Get a font-family stack ---------------------------------------- */ /* ---------------------------------------- size() ---------------------------------------- Get a normalized font-size in rem from a family and a type size in either system scale or project scale ---------------------------------------- */ /* ---------------------------------------- font() ---------------------------------------- Get a font-family stack AND Get a normalized font-size in rem from a family and a type size in either system scale or project scale ---------------------------------------- */ /* ---------------------------------------- typeset() ---------------------------------------- Sets: - family - size - line-height ---------------------------------------- */ /* stylelint-disable max-nesting-depth */ /* ---------------------------------------- @render-pseudoclass ---------------------------------------- Build a pseucoclass utiliy from values calculated in the @render-utilities-in loop ---------------------------------------- */ /* ---------------------------------------- @render-utility ---------------------------------------- Build a utility from values calculated in the @render-utilities-in loop ---------------------------------------- TODO: Determine the proper use of unquote() in the following. Changed to account for a 'interpolation near operators will be simplified in a future version of Sass' warning. ---------------------------------------- */ /* ---------------------------------------- @render-utilities-in ---------------------------------------- The master loop that sets the building blocks of utilities from the values in individual rule settings and loops through all possible variants ---------------------------------------- */ /* stylelint-enable */ /* deprecated.scss --- Occasionally the design system will deprecate old variables or functionality. If we replace the old functionality with something new, this is a place to connect the old functionality to the new functionality, in the service of better continuity and backwards compatibility within a major release cycle. Note the USWDS version where we deprecated the old functionality in a comment. Be sure to update notifications.scss. This file should started fresh at each major version. */ /* notifications.scss --- Adds a notification at the top of each USWDS compile. Use this file for important notifications and updates to the design system. This file should started fresh at each major version. */ /* prettier-ignore */ /* prettier-ignore */ /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } /* stylelint-disable */ @font-face { font-family: "Roboto Mono Web"; font-style: normal; font-weight: 300; font-display: fallback; src: url(../fonts/roboto-mono-v5-latin-300.woff2) format("woff2"), url(../fonts/roboto-mono-v5-latin-300.woff) format("woff"), url(../fonts/roboto-mono-v5-latin-300.ttf) format("truetype"); } @font-face { font-family: "Roboto Mono Web"; font-style: normal; font-weight: 400; font-display: fallback; src: url(../fonts/roboto-mono-v5-latin-regular.woff2) format("woff2"), url(../fonts/roboto-mono-v5-latin-regular.woff) format("woff"), url(../fonts/roboto-mono-v5-latin-regular.ttf) format("truetype"); } @font-face { font-family: "Roboto Mono Web"; font-style: normal; font-weight: 700; font-display: fallback; src: url(../fonts/roboto-mono-v5-latin-700.woff2) format("woff2"), url(../fonts/roboto-mono-v5-latin-700.woff) format("woff"), url(../fonts/roboto-mono-v5-latin-700.ttf) format("truetype"); } @font-face { font-family: "Roboto Mono Web"; font-style: italic; font-weight: 300; font-display: fallback; src: url(../fonts/roboto-mono-v5-latin-300italic.woff2) format("woff2"), url(../fonts/roboto-mono-v5-latin-300italic.woff) format("woff"), url(../fonts/roboto-mono-v5-latin-300italic.ttf) format("truetype"); } @font-face { font-family: "Roboto Mono Web"; font-style: italic; font-weight: 400; font-display: fallback; src: url(../fonts/roboto-mono-v5-latin-italic.woff2) format("woff2"), url(../fonts/roboto-mono-v5-latin-italic.woff) format("woff"), url(../fonts/roboto-mono-v5-latin-italic.ttf) format("truetype"); } @font-face { font-family: "Roboto Mono Web"; font-style: italic; font-weight: 700; font-display: fallback; src: url(../fonts/roboto-mono-v5-latin-700italic.woff2) format("woff2"), url(../fonts/roboto-mono-v5-latin-700italic.woff) format("woff"), url(../fonts/roboto-mono-v5-latin-700italic.ttf) format("truetype"); } @font-face { font-family: "Source Sans Pro Web"; font-style: normal; font-weight: 300; font-display: fallback; src: url(../fonts/sourcesanspro-light-webfont.woff2) format("woff2"), url(../fonts/sourcesanspro-light-webfont.woff) format("woff"), url(../fonts/sourcesanspro-light-webfont.ttf) format("truetype"); } @font-face { font-family: "Source Sans Pro Web"; font-style: normal; font-weight: 400; font-display: fallback; src: url(../fonts/sourcesanspro-regular-webfont.woff2) format("woff2"), url(../fonts/sourcesanspro-regular-webfont.woff) format("woff"), url(../fonts/sourcesanspro-regular-webfont.ttf) format("truetype"); } @font-face { font-family: "Source Sans Pro Web"; font-style: normal; font-weight: 700; font-display: fallback; src: url(../fonts/sourcesanspro-bold-webfont.woff2) format("woff2"), url(../fonts/sourcesanspro-bold-webfont.woff) format("woff"), url(../fonts/sourcesanspro-bold-webfont.ttf) format("truetype"); } @font-face { font-family: "Source Sans Pro Web"; font-style: italic; font-weight: 300; font-display: fallback; src: url(../fonts/sourcesanspro-lightitalic-webfont.woff2) format("woff2"), url(../fonts/sourcesanspro-lightitalic-webfont.woff) format("woff"), url(../fonts/sourcesanspro-lightitalic-webfont.ttf) format("truetype"); } @font-face { font-family: "Source Sans Pro Web"; font-style: italic; font-weight: 400; font-display: fallback; src: url(../fonts/sourcesanspro-italic-webfont.woff2) format("woff2"), url(../fonts/sourcesanspro-italic-webfont.woff) format("woff"), url(../fonts/sourcesanspro-italic-webfont.ttf) format("truetype"); } @font-face { font-family: "Source Sans Pro Web"; font-style: italic; font-weight: 700; font-display: fallback; src: url(../fonts/sourcesanspro-bolditalic-webfont.woff2) format("woff2"), url(../fonts/sourcesanspro-bolditalic-webfont.woff) format("woff"), url(../fonts/sourcesanspro-bolditalic-webfont.ttf) format("truetype"); } @font-face { font-family: "Merriweather Web"; font-style: normal; font-weight: 300; font-display: fallback; src: url(../fonts/merriweather/Latin-Merriweather-Light.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Light.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Light.ttf) format("truetype"); } @font-face { font-family: "Merriweather Web"; font-style: normal; font-weight: 400; font-display: fallback; src: url(../fonts/merriweather/Latin-Merriweather-Regular.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Regular.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Regular.ttf) format("truetype"); } @font-face { font-family: "Merriweather Web"; font-style: normal; font-weight: 700; font-display: fallback; src: url(../fonts/merriweather/Latin-Merriweather-Bold.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Bold.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Bold.ttf) format("truetype"); } @font-face { font-family: "Merriweather Web"; font-style: italic; font-weight: 300; font-display: fallback; src: url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-LightItalic.ttf) format("truetype"); } @font-face { font-family: "Merriweather Web"; font-style: italic; font-weight: 400; font-display: fallback; src: url(../fonts/merriweather/Latin-Merriweather-Italic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-Italic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-Italic.ttf) format("truetype"); } @font-face { font-family: "Merriweather Web"; font-style: italic; font-weight: 700; font-display: fallback; src: url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff2) format("woff2"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.woff) format("woff"), url(../fonts/merriweather/Latin-Merriweather-BoldItalic.ttf) format("truetype"); } /* stylelint-enable */ input:not([disabled]):focus, select:not([disabled]):focus, textarea:not([disabled]):focus, button:not([disabled]):focus { outline: 0.25rem solid #B11116; outline-offset: 0; } iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus { outline: 0.25rem solid #B11116; outline-offset: 0; } .usa-focus { outline: 0.25rem solid #B11116; outline-offset: 0; } html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; } html { font-feature-settings: "kern" 1; font-kerning: normal; font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size: 100%; } cite, var, address, dfn { font-style: normal; } .usa-combo-box__list, .usa-combo-box__input, .usa-input-group, .usa-input, .usa-textarea, .usa-range, .usa-select, .usa-checkbox__label, .usa-radio__label, .usa-fieldset, .usa-hint { font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size: 1.06rem; line-height: 1.3; } .usa-combo-box__input, .usa-input-group, .usa-input, .usa-textarea, .usa-range, .usa-select { border-width: 1px; border-color: #565c65; border-style: solid; appearance: none; border-radius: 0; color: #1b1b1b; display: block; height: 2.5rem; margin-top: 0.5rem; max-width: 30rem; padding: 0.5rem; width: 100%; } .usa-input--success.usa-combo-box__input, .usa-input--success.usa-input-group, .usa-input--success.usa-input, .usa-input--success.usa-textarea, .usa-input--success.usa-range, .usa-input--success.usa-select { border-width: 0.25rem; border-color: #00a91c; border-style: solid; } .usa-fieldset { border: none; margin: 0; padding: 0; } .usa-form-group { margin-top: 1.5rem; } .usa-form-group .usa-label:first-child { margin-top: 0; } .usa-form-group--error { border-left-width: 0.25rem; border-left-color: #b50909; border-left-style: solid; margin-top: 2rem; padding-left: 1rem; position: relative; } @media all and (min-width: 64em) { .usa-form-group--error { margin-left: -1.25rem; } } .usa-error-message { padding-bottom: 0.25rem; padding-top: 0.25rem; color: #b50909; display: block; font-weight: 700; } .usa-hint { color: #71767a; } .usa-label, .usa-legend { font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size: 1.06rem; line-height: 1.3; display: block; font-weight: normal; margin-top: 0.5rem; max-width: 30rem; } .usa-label--error { font-weight: 700; margin-top: 0; } .usa-label--required, .usa-hint--required { color: #b50909; } .usa-legend--large { font-size: 2.13rem; font-weight: 700; margin-top: 1rem; } abbr[title=required] { text-decoration: none; } .usa-input-list { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; } .usa-input-list li { line-height: 1.3; } .usa-prose .usa-input-list { margin-bottom: 0; margin-top: 0; list-style-type: none; padding-left: 0; } .usa-prose .usa-input-list li { line-height: 1.3; } .usa-checkbox, .usa-radio { background: white; } .usa-checkbox__label, .usa-radio__label { color: #1b1b1b; } .usa-checkbox__label::before, .usa-radio__label::before { background: white; box-shadow: 0 0 0 2px #1b1b1b; } .usa-checkbox__input:checked + [class*=__label]::before, .usa-radio__input:checked + [class*=__label]::before { background-color: #8b0a03; box-shadow: 0 0 0 2px #8b0a03; } .usa-checkbox__input:disabled + [class*=__label], .usa-radio__input:disabled + [class*=__label] { color: rgba(27, 27, 27, 0.3); } .usa-checkbox__input:disabled + [class*=__label]::before, .usa-radio__input:disabled + [class*=__label]::before { background-color: white; box-shadow: 0 0 0 2px rgba(27, 27, 27, 0.3); } .usa-checkbox__input--tile + [class*=__label], .usa-radio__input--tile + [class*=__label] { background-color: white; border: 2px solid rgba(27, 27, 27, 0.3); color: #1b1b1b; } .usa-checkbox__input--tile:checked + [class*=__label], .usa-radio__input--tile:checked + [class*=__label] { background-color: rgba(0, 94, 162, 0.1); border-color: #8b0a03; } .usa-checkbox__input--tile:disabled:checked + [class*=__label], .usa-radio__input--tile:disabled:checked + [class*=__label] { background-color: white; border-color: rgba(27, 27, 27, 0.3); } .usa-checkbox__input:checked + [class*=__label]::before, .usa-checkbox__input:checked:disabled + [class*=__label]::before { background-image: url("../img/correct8.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-checkbox__input:checked:disabled + [class*=__label]::before { background-color: rgba(27, 27, 27, 0.3); } .usa-radio__input:checked + [class*=__label]::before { box-shadow: 0 0 0 2px #8b0a03, inset 0 0 0 2px white; } .usa-radio__input:checked:disabled + [class*=__label]::before { background-color: rgba(27, 27, 27, 0.2); box-shadow: 0 0 0 2px rgba(27, 27, 27, 0.3), inset 0 0 0 2px white; } .usa-checkbox__input, .usa-radio__input { position: absolute; left: -999em; right: auto; } .usa-checkbox__input:focus + [class*=__label]::before, .usa-radio__input:focus + [class*=__label]::before { outline: 0.25rem solid #B11116; outline-offset: 0.25rem; } .usa-checkbox__input:disabled + [class*=__label]::before, .usa-radio__input:disabled + [class*=__label]::before { cursor: not-allowed; } .usa-checkbox__input:disabled + [class*=__label], .usa-radio__input:disabled + [class*=__label] { cursor: not-allowed; } .usa-checkbox__input--tile + [class*=__label], .usa-radio__input--tile + [class*=__label] { border-radius: 0.25rem; margin-top: 0.5rem; padding: 0.75rem 1rem 0.75rem 2.5rem; } .usa-checkbox__input--tile + [class*=__label]:before, .usa-radio__input--tile + [class*=__label]:before { left: 0.5rem; } @media print { .usa-radio__input:checked + [class*=__label]::before { box-shadow: inset 0 0 0 2px white, inset 0 0 0 1rem #8b0a03, 0 0 0 2px #8b0a03; } } .usa-checkbox__input:checked + [class*=__label]::before, .usa-checkbox__input:checked:disabled + [class*=__label]::before { background-position: center center; background-size: 0.75rem auto; } @media print { .usa-checkbox__input:checked + [class*=__label]::before, .usa-checkbox__input:checked:disabled + [class*=__label]::before { background-image: none; background-color: white; content: "✔"; text-align: center; } } .usa-checkbox__label, .usa-radio__label { cursor: pointer; display: inherit; font-weight: normal; margin-top: 0.75rem; padding-left: 2rem; position: relative; } .usa-checkbox__label:before, .usa-radio__label:before { content: " "; display: block; left: 0; margin-left: 2px; margin-top: 0.064rem; position: absolute; } .usa-checkbox__label::before { height: 1.25rem; width: 1.25rem; border-radius: 2px; } .usa-radio__label::before { height: 1.25rem; border-radius: 99rem; width: 1.25rem; } .usa-checkbox__label-description, .usa-radio__label-description { display: block; font-size: 0.93rem; margin-top: 0.5rem; } /* .checkbox-tests { @include set-text-and-bg("green-80"); @include checkbox-and-radio-colors("green-80", "green-warm-10v"); padding: units(2); border-radius: radius("md"); } */ .usa-memorable-date { display: flex; } .usa-memorable-date [type=number] { -moz-appearance: textfield; } .usa-memorable-date [type=number]::-webkit-inner-spin-button { appearance: none; } .usa-memorable-date [type=number]::-webkit-contacts-auto-fill-button { visibility: hidden; display: none !important; /* stylelint-disable-line declaration-no-important */ pointer-events: none; height: 0; width: 0; margin: 0; } .usa-memorable-date .usa-form-group { margin-top: 1rem; } .usa-form-group--day, .usa-form-group--month, .usa-form-group--year { flex: 0 1 auto; margin-right: 1rem; width: 3rem; } .usa-form-group--year { width: 4.5rem; } .usa-select { background-image: url("../img/unfold_more.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; appearance: none; background-color: white; background-position: right 0.5rem center; background-size: 1.25rem; padding-right: 2rem; } .usa-select::-ms-expand { display: none; } .usa-select:-webkit-autofill { appearance: menulist; } .usa-select:-moz-focusring { color: transparent; text-shadow: 0 0 0 black; } @media (forced-colors: active) { .usa-select { appearance: listbox; background-image: none; padding-right: 0; } } [type=file] { border: none; margin-top: 0.5rem; padding-left: 0; padding-top: 0.2rem; } .usa-file-input { display: block; max-width: 30rem; width: 100%; } .usa-file-input__target { border: 1px dashed #a9aeb1; display: block; font-size: 0.93rem; margin-top: 0.5rem; position: relative; text-align: center; width: 100%; } .usa-file-input__target:hover { border-color: #71767a; } .usa-file-input__target.has-invalid-file { border-color: #fa9441; } .usa-file-input__accepted-files-message { font-weight: bold; margin: -1.5rem 0 1.5rem; pointer-events: none; position: relative; z-index: 3; } .has-invalid-file .usa-file-input__accepted-files-message { color: #b50909; } .usa-file-input__choose { color: #8b0a03; text-decoration: underline; font-weight: normal; } .usa-file-input__choose:visited { color: #54278f; } .usa-file-input__choose:hover { color: #8b0a03; } .usa-file-input__choose:active { color: #8b0a03; } .usa-file-input__choose:focus { outline: 0.25rem solid #B11116; outline-offset: 0; } .usa-file-input__instructions { display: inline-block; padding: 2rem 1rem; pointer-events: none; position: relative; z-index: 3; } .usa-file-input__instructions.display-none { display: none; } .usa-file-input__box { background: white; height: 100%; left: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: 2; } .usa-file-input .usa-file-input__input[type] { cursor: pointer; height: 100%; left: 0; margin: 0; max-width: none; position: absolute; padding: 0.5rem; text-indent: -999em; top: 0; width: 100%; z-index: 1; } .usa-file-input .usa-file-input__input[type]::-webkit-file-upload-button { display: none; } .usa-file-input--drag .usa-file-input__target { border-color: #8b0a03; } .usa-file-input--drag .usa-file-input__box { background-color: #d9e8f6 !important; } .usa-file-input--drag .usa-file-input__preview { opacity: 0.1; } .usa-file-input__preview-heading { align-items: center; background: #d9e8f6; display: flex; font-weight: bold; justify-content: space-between; padding: 0.5rem; pointer-events: none; position: relative; z-index: 3; } .usa-file-input__preview { align-items: center; background: #d9e8f6; word-wrap: anywhere; display: flex; font-size: 0.87rem; margin-top: 1px; padding: 0.25rem 0.5rem; pointer-events: none; position: relative; text-align: left; z-index: 3; } .usa-file-input__preview:last-child { margin-bottom: -1.5rem; } .usa-file-input__preview-image { border: none; display: block; height: 2.5rem; margin-right: 0.5rem; object-fit: contain; width: 2.5rem; } .usa-file-input__preview-image.is-loading { background-image: url("../img/loader.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-position: center center; background-repeat: no-repeat; background-size: 2rem; } .usa-file-input__preview-image--generic, .usa-file-input__preview-image--pdf, .usa-file-input__preview-image--word, .usa-file-input__preview-image--excel, .usa-file-input__preview-image--video { background-position: center center; background-repeat: no-repeat; background-size: 1.5rem; } .usa-file-input__preview-image--pdf { background-image: url("../img/file-pdf.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-file-input__preview-image--generic { background-image: url("../img/file.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-file-input__preview-image--word { background-image: url("../img/file-word.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-file-input__preview-image--excel { background-image: url("../img/file-excel.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-file-input__preview-image--video { background-image: url("../img/file-video.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-form-group--error .usa-file-input__target { border-color: #b50909; border-width: 2px; } .usa-file-input--disabled { pointer-events: none; } .usa-file-input--disabled .usa-file-input__instructions { opacity: 0.5; } .usa-file-input--disabled .usa-file-input__box { background-color: #e6e6e6; } .usa-file-input--disabled .usa-file-input__input[type] { cursor: default; } .usa-range { appearance: none; border: none; padding-left: 1px; width: 100%; } .usa-range:focus { outline: none; } .usa-range:focus::-webkit-slider-thumb { background-color: white; box-shadow: 0 0 0 2px #B11116; } .usa-range:focus::-moz-range-thumb { background-color: white; box-shadow: 0 0 0 2px #B11116; } .usa-range:focus::-ms-thumb { background-color: white; box-shadow: 0 0 0 2px #B11116; } .usa-range::-webkit-slider-runnable-track { background-color: #f0f0f0; border-radius: 99rem; border: 1px solid #71767a; cursor: pointer; height: 1rem; width: 100%; } .usa-range::-moz-range-track { background-color: #f0f0f0; border-radius: 99rem; border: 1px solid #71767a; cursor: pointer; height: 1rem; width: 100%; } .usa-range::-ms-track { background-color: #f0f0f0; border-radius: 99rem; border: 1px solid #71767a; cursor: pointer; height: 1rem; width: 100%; } .usa-range::-webkit-slider-thumb { height: 1.25rem; border-radius: 99rem; width: 1.25rem; background: #f0f0f0; border: none; box-shadow: 0 0 0 2px #71767a; cursor: pointer; appearance: none; margin-top: -0.19rem; } .usa-range::-moz-range-thumb { height: 1.25rem; border-radius: 99rem; width: 1.25rem; background: #f0f0f0; border: none; box-shadow: 0 0 0 2px #71767a; cursor: pointer; } .usa-range::-ms-thumb { height: 1.25rem; border-radius: 99rem; width: 1.25rem; background: #f0f0f0; border: none; box-shadow: 0 0 0 2px #71767a; cursor: pointer; } .usa-range::-ms-fill-lower { background-color: #f0f0f0; border-radius: 99rem; border: 1px solid #71767a; } .usa-range::-ms-fill-upper { background-color: #f0f0f0; border-radius: 99rem; border: 1px solid #71767a; } .usa-textarea { height: 10rem; } .usa-input--error { border-width: 0.25rem; border-color: #b50909; border-style: solid; } .usa-input-group { align-items: center; background-color: white; display: flex; padding: 0; } .usa-input-group.is-focused { outline: 0.25rem solid #B11116; outline-offset: 0; } .usa-input-group--error { border-width: 0.25rem; border-color: #b50909; border-style: solid; } .usa-input-group input { border: 0; height: 100%; margin-top: 0; min-width: 0; width: 100%; } .usa-input-group input:focus { outline: none; } .usa-input-prefix, .usa-input-suffix { color: #71767a; line-height: 0; padding: 0 0.5rem; user-select: none; white-space: nowrap; } .usa-input-prefix .usa-icon, .usa-input-suffix .usa-icon { height: 1.5rem; width: 1.5rem; } .usa-character-count__message { display: inline-block; padding-top: 0.25rem; } .usa-character-count__message--invalid { color: #b50909; font-weight: 700; } .usa-combo-box { max-width: 30rem; position: relative; } .usa-combo-box--pristine .usa-combo-box__input { padding-right: calc(5em + 4px); } .usa-combo-box--pristine .usa-combo-box__input::-ms-clear { display: none; } .usa-combo-box--pristine .usa-combo-box__clear-input { display: block; } .usa-combo-box__input { appearance: none; margin-bottom: 0; max-width: none; padding-right: calc(2.5em + 3px); } button.usa-combo-box__toggle-list:focus, button.usa-combo-box__clear-input:focus { outline-offset: -4px; } /* stylelint-disable selector-class-pattern */ .usa-combo-box__toggle-list__wrapper:focus, .usa-combo-box__clear-input__wrapper:focus { outline: 0; } /* stylelint-enable selector-class-pattern */ .usa-combo-box__toggle-list, .usa-combo-box__clear-input { background-color: transparent; background-position: center; background-size: auto 1.5rem; border: 0; bottom: 1px; cursor: pointer; margin-bottom: 0; opacity: 0.6; padding-right: 2rem; position: absolute; top: 1px; z-index: 100; } .usa-combo-box__clear-input { background-image: url("../img/usa-icons/close.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; display: none; right: calc(2.5em + 3px); } .usa-combo-box__toggle-list { background-image: url("../img/usa-icons/expand_more.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; background-size: auto 2rem; right: 1px; } .usa-combo-box__input-button-separator { background-color: #c6cace; position: absolute; top: 1px; margin-bottom: 8px; margin-top: 8px; width: 1px; right: calc(2.5em + 2px); box-sizing: border-box; z-index: 200; } .usa-combo-box__list { border-width: 1px; border-color: #565c65; border-style: solid; background-color: white; border-radius: 0; border-top: 0; margin: 0; max-height: 12.1em; overflow-x: hidden; overflow-y: scroll; padding: 0; position: absolute; width: 100%; z-index: 300; } .usa-combo-box__list:focus { outline: 0; } .usa-combo-box__list-option { border-bottom: 1px solid #dfe1e2; cursor: pointer; display: block; padding: 0.5rem; } .usa-combo-box__list-option--focused { outline: 2px solid #8b0a03; outline-offset: -2px; position: relative; z-index: 100; } .usa-combo-box__list-option--focused:focus { outline-offset: -4px; } .usa-combo-box__list-option--selected { background-color: #8b0a03; border-color: #8b0a03; color: white; } .usa-combo-box__list-option--no-results { cursor: not-allowed; display: block; padding: 0.5rem; } .usa-date-picker__wrapper { display: none; position: relative; max-width: 30rem; } .usa-date-picker__wrapper:focus { outline: 0; } .usa-date-picker__calendar__year, .usa-date-picker__calendar__previous-year-chunk, .usa-date-picker__calendar__next-year-chunk, .usa-date-picker__calendar__month, .usa-date-picker__calendar__year-selection, .usa-date-picker__calendar__month-selection, .usa-date-picker__calendar__date, .usa-date-picker__calendar__previous-year, .usa-date-picker__calendar__previous-month, .usa-date-picker__calendar__next-year, .usa-date-picker__calendar__next-month, .usa-date-picker__button { background-color: #f0f0f0; border: 0; width: 100%; } .usa-date-picker__calendar__year:not([disabled]), .usa-date-picker__calendar__previous-year-chunk:not([disabled]), .usa-date-picker__calendar__next-year-chunk:not([disabled]), .usa-date-picker__calendar__month:not([disabled]), .usa-date-picker__calendar__year-selection:not([disabled]), .usa-date-picker__calendar__month-selection:not([disabled]), .usa-date-picker__calendar__date:not([disabled]), .usa-date-picker__calendar__previous-year:not([disabled]), .usa-date-picker__calendar__previous-month:not([disabled]), .usa-date-picker__calendar__next-year:not([disabled]), .usa-date-picker__calendar__next-month:not([disabled]), .usa-date-picker__button:not([disabled]) { cursor: pointer; } .usa-date-picker__calendar__year:not([disabled]):focus, .usa-date-picker__calendar__previous-year-chunk:not([disabled]):focus, .usa-date-picker__calendar__next-year-chunk:not([disabled]):focus, .usa-date-picker__calendar__month:not([disabled]):focus, .usa-date-picker__calendar__year-selection:not([disabled]):focus, .usa-date-picker__calendar__month-selection:not([disabled]):focus, .usa-date-picker__calendar__date:not([disabled]):focus, .usa-date-picker__calendar__previous-year:not([disabled]):focus, .usa-date-picker__calendar__previous-month:not([disabled]):focus, .usa-date-picker__calendar__next-year:not([disabled]):focus, .usa-date-picker__calendar__next-month:not([disabled]):focus, .usa-date-picker__button:not([disabled]):focus { outline-offset: -4px; } .usa-date-picker__calendar__year:not([disabled]):hover, .usa-date-picker__calendar__previous-year-chunk:not([disabled]):hover, .usa-date-picker__calendar__next-year-chunk:not([disabled]):hover, .usa-date-picker__calendar__month:not([disabled]):hover, .usa-date-picker__calendar__year-selection:not([disabled]):hover, .usa-date-picker__calendar__month-selection:not([disabled]):hover, .usa-date-picker__calendar__date:not([disabled]):hover, .usa-date-picker__calendar__previous-year:not([disabled]):hover, .usa-date-picker__calendar__previous-month:not([disabled]):hover, .usa-date-picker__calendar__next-year:not([disabled]):hover, .usa-date-picker__calendar__next-month:not([disabled]):hover, .usa-date-picker__button:not([disabled]):hover { background-color: #dfe1e2; } .usa-date-picker__calendar__year:not([disabled]):active, .usa-date-picker__calendar__previous-year-chunk:not([disabled]):active, .usa-date-picker__calendar__next-year-chunk:not([disabled]):active, .usa-date-picker__calendar__month:not([disabled]):active, .usa-date-picker__calendar__year-selection:not([disabled]):active, .usa-date-picker__calendar__month-selection:not([disabled]):active, .usa-date-picker__calendar__date:not([disabled]):active, .usa-date-picker__calendar__previous-year:not([disabled]):active, .usa-date-picker__calendar__previous-month:not([disabled]):active, .usa-date-picker__calendar__next-year:not([disabled]):active, .usa-date-picker__calendar__next-month:not([disabled]):active, .usa-date-picker__button:not([disabled]):active { background-color: #a9aeb1; } .usa-date-picker--active .usa-date-picker__button { background-color: #f0f0f0; } .usa-date-picker--active .usa-date-picker__calendar { z-index: 400; } .usa-date-picker__button { background-image: url("../img/usa-icons/calendar_today.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; align-self: stretch; background-color: transparent; background-position: center; background-size: 1.5rem; margin-top: 0.5em; width: 3em; } .usa-date-picker--initialized .usa-date-picker__wrapper { display: flex; } .usa-date-picker__calendar { background-color: #f0f0f0; left: auto; max-width: 20rem; position: absolute; right: 0; width: 100%; z-index: 100; } /* stylelint-disable selector-class-pattern */ .usa-date-picker__calendar__table { border-spacing: 0; border-collapse: collapse; table-layout: fixed; text-align: center; width: 100%; } .usa-date-picker__calendar__table th { font-weight: normal; } .usa-date-picker__calendar__table td { padding: 0; } .usa-date-picker__calendar__row { display: flex; flex-wrap: wrap; text-align: center; width: 100%; } .usa-date-picker__calendar__cell { background-color: #f0f0f0; flex: 1; } .usa-date-picker__calendar__cell--center-items { display: flex; justify-content: center; align-items: center; } .usa-date-picker__calendar__previous-year, .usa-date-picker__calendar__previous-month, .usa-date-picker__calendar__next-year, .usa-date-picker__calendar__next-month { background-position: center; background-size: auto 1.5rem; height: 1.5rem; padding: 20px 10px; } .usa-date-picker__calendar__previous-year:not([disabled]) { background-image: url("../img/usa-icons/navigate_far_before.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-date-picker__calendar__previous-month:not([disabled]) { background-image: url("../img/usa-icons/navigate_before.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-date-picker__calendar__next-year:not([disabled]) { background-image: url("../img/usa-icons/navigate_far_next.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-date-picker__calendar__next-month:not([disabled]) { background-image: url("../img/usa-icons/navigate_next.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-date-picker__calendar__day-of-week { padding: 6px 0px; } .usa-date-picker__calendar__date { padding: 10px 0px; } .usa-date-picker__calendar__date--focused { outline: 2px solid #8b0a03; outline-offset: -2px; position: relative; z-index: 100; } .usa-date-picker__calendar__date--next-month:not([disabled]), .usa-date-picker__calendar__date--previous-month:not([disabled]) { color: #5d5d52; } .usa-date-picker__calendar__date--selected, .usa-date-picker__calendar__date--range-date { background-color: #B11116; color: #f9f9f9; } .usa-date-picker__calendar__date--selected:not([disabled]), .usa-date-picker__calendar__date--range-date:not([disabled]) { background-color: #B11116; color: #f9f9f9; } .usa-date-picker__calendar__date--selected:not([disabled]):hover, .usa-date-picker__calendar__date--range-date:not([disabled]):hover { background-color: #B11116; color: #e6e6e6; } .usa-date-picker__calendar__date--selected:not([disabled]):focus, .usa-date-picker__calendar__date--range-date:not([disabled]):focus { background-color: #B11116; color: #f9f9f9; } .usa-date-picker__calendar__date--selected:not([disabled]):active, .usa-date-picker__calendar__date--range-date:not([disabled]):active { background-color: #8b0a03; } .usa-date-picker__calendar__date--range-date-start { border-top-left-radius: 10%; border-bottom-left-radius: 10%; } .usa-date-picker__calendar__date--range-date-end { border-top-right-radius: 10%; border-bottom-right-radius: 10%; } .usa-date-picker__calendar__date--within-range { background-color: #cfe8ff; } .usa-date-picker__calendar__date--within-range:not([disabled]) { background-color: #cfe8ff; } .usa-date-picker__calendar__date--within-range:not([disabled]):hover { background-color: #cfe8ff; } .usa-date-picker__calendar__date--within-range:not([disabled]):focus { background-color: #cfe8ff; } .usa-date-picker__calendar__date--within-range:not([disabled]):active { background-color: #cfe8ff; } .usa-date-picker__calendar__month-label { flex: 4; text-align: center; } .usa-date-picker__calendar__year-selection, .usa-date-picker__calendar__month-selection { display: inline-block; height: 100%; padding: 8px 4px; width: auto; } .usa-date-picker__calendar__month-picker { padding: 20px 5px; } .usa-date-picker__calendar__month { padding: 10px 0; } .usa-date-picker__calendar__month--focused { outline: 2px solid #8b0a03; outline-offset: -2px; position: relative; z-index: 100; } .usa-date-picker__calendar__month--selected { background-color: #B11116; color: #f9f9f9; } .usa-date-picker__calendar__month--selected:not([disabled]) { background-color: #B11116; color: #f9f9f9; } .usa-date-picker__calendar__month--selected:not([disabled]):hover { background-color: #B11116; color: #e6e6e6; } .usa-date-picker__calendar__month--selected:not([disabled]):focus { background-color: #B11116; color: #f9f9f9; } .usa-date-picker__calendar__month--selected:not([disabled]):active { background-color: #8b0a03; } .usa-date-picker__calendar__year-picker { padding: 20px 5px; } .usa-date-picker__calendar__previous-year-chunk, .usa-date-picker__calendar__next-year-chunk { background-position: center; background-size: auto 2rem; margin: auto; padding: 40px 0; } .usa-date-picker__calendar__previous-year-chunk:not([disabled]) { background-image: url("../img/usa-icons/navigate_before.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-date-picker__calendar__next-year-chunk:not([disabled]) { background-image: url("../img/usa-icons/navigate_next.svg"), linear-gradient(transparent, transparent); background-repeat: no-repeat; } .usa-date-picker__calendar__year { padding: 10px 0; } .usa-date-picker__calendar__year--focused { outline: 2px solid #8b0a03; outline-offset: -2px; position: relative; z-index: 100; } .usa-date-picker__calendar__year--selected { background-color: #B11116; color: #f9f9f9; } .usa-date-picker__calendar__year--selected:not([disabled]) { background-color: #B11116; color: #f9f9f9; } .usa-date-picker__calendar__year--selected:not([disabled]):hover { background-color: #B11116; color: #e6e6e6; } .usa-date-picker__calendar__year--selected:not([disabled]):focus { background-color: #B11116; color: #f9f9f9; } .usa-date-picker__calendar__year--selected:not([disabled]):active { background-color: #8b0a03; } /* stylelint-enable selector-class-pattern */ .usa-time-picker { width: 10em; } .usa-button-group { margin-bottom: 0; margin-top: 0; display: flex; flex-direction: column; flex-wrap: wrap; list-style-type: none; margin-left: -0.25rem; margin-right: -0.25rem; padding-left: 0; } @media all and (min-width: 30em) { .usa-button-group { flex-direction: row; } } .usa-button-group__item { margin: 0.25rem; } @media all and (min-width: 30em) { .usa-button-group__item:last-child { margin-right: 0; } } .usa-button-group__item .usa-button { margin-left: 0; margin-right: 0; } .usa-button-group--segmented { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; margin-left: 0; margin-right: 0; } @media all and (min-width: 30em) { .usa-button-group--segmented { justify-content: flex-start; } } .usa-button-group--segmented .usa-button { position: relative; width: calc(100% + 2px); } @media all and (min-width: 30em) { .usa-button-group--segmented .usa-button { width: auto; } } .usa-button-group--segmented .usa-button:hover, .usa-button-group--segmented .usa-button:active { z-index: 2; } .usa-button-group--segmented .usa-button:focus { z-index: 3; } .usa-button-group--segmented .usa-button-group__item { margin-left: 0; margin-right: 0; width: 100%; } @media all and (min-width: 30em) { .usa-button-group--segmented .usa-button-group__item { width: auto; } } .usa-button-group--segmented .usa-button-group__item:first-child > .usa-button { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -1px; } .usa-button-group--segmented .usa-button-group__item:last-child > .usa-button { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-right: 0; margin-left: -2px; width: calc(100% + 2px); } @media all and (min-width: 30em) { .usa-button-group--segmented .usa-button-group__item:last-child > .usa-button { margin-left: -1px; width: auto; } } .usa-button-group--segmented .usa-button-group__item:not(:first-child):not(:last-child) > .usa-button { border-radius: 0; margin-right: -1px; margin-left: -1px; } .usa-button-group--segmented .usa-button-group__item:not(:last-child) .usa-button::before { border-right: 1px solid #8b0a03; bottom: 0; content: ""; display: block; height: 100%; position: absolute; right: 1px; top: 0; width: 1px; z-index: 3; } .usa-button-group--segmented .usa-button-group__item:not(:last-child) .usa-button--secondary::before { border-right-color: #b50909; } .usa-button-group--segmented .usa-button-group__item:not(:last-child) .usa-button--accent-cool::before { border-right-color: #B11116; } .usa-button-group--segmented .usa-button-group__item:not(:last-child) .usa-button--base::before { border-right-color: #565c65; } .usa-button-group--segmented .usa-button-group__item:not(:last-child) .usa-button--secondary:disabled::before, .usa-button-group--segmented .usa-button-group__item:not(:last-child) .usa-button--accent-cool:disabled::before, .usa-button-group--segmented .usa-button-group__item:not(:last-child) .usa-button--base:disabled::before { border-right-color: #71767a; } .usa-button-group--segmented .usa-button-group__item:not(:last-child) .usa-button:active::before, .usa-button-group--segmented .usa-button-group__item:not(:last-child) .usa-button--outline::before { display: none; } .usa-button { font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size: 1.06rem; line-height: 0.9; color: white; background-color: #8b0a03; appearance: none; border: 0; border-radius: 0.25rem; cursor: pointer; display: inline-block; font-weight: 700; margin-right: 0.5rem; padding: 0.75rem 1.25rem; text-align: center; text-decoration: none; width: 100%; } @media all and (min-width: 30em) { .usa-button { width: auto; } } .usa-button:visited { color: white; } .usa-button:hover, .usa-button.usa-button--hover { color: white; background-color: #6d0803; border-bottom: 0; text-decoration: none; } .usa-button:active, .usa-button.usa-button--active { color: white; background-color: #6d0803; } .usa-button:not([disabled]):focus, .usa-button:not([disabled]).usa-focus { outline-offset: 0.25rem; } .usa-button:disabled { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-color: #c9c9c9; color: white; } .usa-button:disabled:hover, .usa-button:disabled.usa-button--hover, .usa-button:disabled:active, .usa-button:disabled.usa-button--active, .usa-button:disabled:focus, .usa-button:disabled.usa-focus { background-color: #c9c9c9; border: 0; box-shadow: none; } .usa-button--accent-cool { color: #1b1b1b; background-color: #B11116; } .usa-button--accent-cool:visited { color: #1b1b1b; background-color: #B11116; } .usa-button--accent-cool:hover, .usa-button--accent-cool.usa-button--hover { color: #1b1b1b; background-color: #B11116; } .usa-button--accent-cool:active, .usa-button--accent-cool.usa-button--active { color: white; background-color: #B11116; } .usa-button--accent-warm { color: #1b1b1b; background-color: #fa9441; } .usa-button--accent-warm:visited { color: #1b1b1b; background-color: #fa9441; } .usa-button--accent-warm:hover, .usa-button--accent-warm.usa-button--hover { color: white; background-color: #c05600; } .usa-button--accent-warm:active, .usa-button--accent-warm.usa-button--active { color: white; background-color: #775540; } .usa-button--outline { background-color: transparent; box-shadow: inset 0 0 0 2px #B11116; color: #B11116; } .usa-button--outline:visited { color: #B11116; } .usa-button--outline:hover, .usa-button--outline.usa-button--hover { background-color: transparent; box-shadow: inset 0 0 0 2px #B11116; color: #8b0a03; } .usa-button--outline:active, .usa-button--outline.usa-button--active { background-color: transparent; box-shadow: inset 0 0 0 2px #8b0a03; color: #8b0a03; } .usa-button--outline.usa-button--inverse { box-shadow: inset 0 0 0 2px #dfe1e2; color: #dfe1e2; } .usa-button--outline.usa-button--inverse:visited { color: #dfe1e2; } .usa-button--outline.usa-button--inverse:hover, .usa-button--outline.usa-button--inverse.usa-button--hover { box-shadow: inset 0 0 0 2px #f0f0f0; color: #f0f0f0; } .usa-button--outline.usa-button--inverse:active, .usa-button--outline.usa-button--inverse.usa-button--active { background-color: transparent; box-shadow: inset 0 0 0 2px white; color: white; } .usa-button--outline.usa-button--inverse.usa-button--unstyled { -moz-osx-font-smoothing: inherit; -webkit-font-smoothing: inherit; color: #8b0a03; text-decoration: underline; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; font-weight: normal; margin: 0; padding: 0; text-align: left; color: #dfe1e2; } .usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { color: #8b0a03; } .usa-button--outline.usa-button--inverse.usa-button--unstyled:hover { color: #8b0a03; } .usa-button--outline.usa-button--inverse.usa-button--unstyled:active { color: #8b0a03; } .usa-button--outline.usa-button--inverse.usa-button--unstyled:focus { outline: 0.25rem solid #B11116; outline-offset: 0; } .usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled:focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { -moz-osx-font-smoothing: inherit; -webkit-font-smoothing: inherit; background-color: transparent; box-shadow: none; text-decoration: underline; } .usa-button--outline.usa-button--inverse.usa-button--unstyled:disabled, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--disabled { color: #c9c9c9; } .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { color: #8b0a03; } .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { color: #8b0a03; } .usa-button--outline.usa-button--inverse.usa-button--unstyled:visited { color: #dfe1e2; } .usa-button--outline.usa-button--inverse.usa-button--unstyled:hover, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--hover { color: #f0f0f0; } .usa-button--outline.usa-button--inverse.usa-button--unstyled:active, .usa-button--outline.usa-button--inverse.usa-button--unstyled.usa-button--active { color: white; } .usa-button--base { color: white; background-color: #71767a; } .usa-button--base:hover, .usa-button--base.usa-button--hover { color: white; background-color: #565c65; } .usa-button--base:active, .usa-button--base.usa-button--active { color: white; background-color: #3d4551; } .usa-button--secondary { color: white; background-color: #d83933; } .usa-button--secondary:hover, .usa-button--secondary.usa-button--hover { color: white; background-color: #b50909; } .usa-button--secondary:active, .usa-button--secondary.usa-button--active { color: white; background-color: #8b0a03; } .usa-button--big { border-radius: 0.25rem; font-size: 1.46rem; padding: 1rem 1.5rem; } .usa-button--disabled { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; background-color: #c9c9c9; color: white; } .usa-button--disabled:hover, .usa-button--disabled.usa-button--hover, .usa-button--disabled:active, .usa-button--disabled.usa-button--active, .usa-button--disabled:focus, .usa-button--disabled.usa-focus { background-color: #c9c9c9; border: 0; box-shadow: none; } .usa-button--outline-disabled, .usa-button--outline-inverse-disabled, .usa-button--outline:disabled, .usa-button--outline-inverse:disabled, .usa-button--outline-inverse:disabled { background-color: transparent; } .usa-button--outline-disabled:hover, .usa-button--outline-disabled.usa-button--hover, .usa-button--outline-disabled:active, .usa-button--outline-disabled.usa-button--active, .usa-button--outline-disabled:focus, .usa-button--outline-disabled.usa-focus, .usa-button--outline-inverse-disabled:hover, .usa-button--outline-inverse-disabled.usa-button--hover, .usa-button--outline-inverse-disabled:active, .usa-button--outline-inverse-disabled.usa-button--active, .usa-button--outline-inverse-disabled:focus, .usa-button--outline-inverse-disabled.usa-focus, .usa-button--outline:disabled:hover, .usa-button--outline:disabled.usa-button--hover, .usa-button--outline:disabled:active, .usa-button--outline:disabled.usa-button--active, .usa-button--outline:disabled:focus, .usa-button--outline:disabled.usa-focus, .usa-button--outline-inverse:disabled:hover, .usa-button--outline-inverse:disabled.usa-button--hover, .usa-button--outline-inverse:disabled:active, .usa-button--outline-inverse:disabled.usa-button--active, .usa-button--outline-inverse:disabled:focus, .usa-button--outline-inverse:disabled.usa-focus, .usa-button--outline-inverse:disabled:hover, .usa-button--outline-inverse:disabled.usa-button--hover, .usa-button--outline-inverse:disabled:active, .usa-button--outline-inverse:disabled.usa-button--active, .usa-button--outline-inverse:disabled:focus, .usa-button--outline-inverse:disabled.usa-focus { background-color: transparent; border: 0; } .usa-button--outline-disabled, .usa-button--outline:disabled { box-shadow: inset 0 0 0 2px #c9c9c9; color: #c9c9c9; } .usa-button--outline-disabled.usa-button--inverse, .usa-button--outline:disabled.usa-button--inverse { background-color: transparent; box-shadow: inset 0 0 0 2px #71767a; color: #71767a; } .usa-button--unstyled { -moz-osx-font-smoothing: inherit; -webkit-font-smoothing: inherit; color: #8b0a03; text-decoration: underline; background-color: transparent; border: 0; border-radius: 0; box-shadow: none; font-weight: normal; margin: 0; padding: 0; text-align: left; } .usa-button--unstyled:visited { color: #B11116; } .usa-button--unstyled:hover { color: #B11116; } .usa-button--unstyled:active { color: #B11116; } .usa-button--unstyled:focus { outline: 0.25rem solid #B11116; outline-offset: 0; } .usa-button--unstyled:hover, .usa-button--unstyled.usa-button--hover, .usa-button--unstyled:disabled:hover, .usa-button--unstyled:disabled.usa-button--hover, .usa-button--unstyled.usa-button--disabled:hover, .usa-button--unstyled.usa-button--disabled.usa-button--hover, .usa-button--unstyled:active, .usa-button--unstyled.usa-button--active, .usa-button--unstyled:disabled:active, .usa-button--unstyled:disabled.usa-button--active, .usa-button--unstyled.usa-button--disabled:active, .usa-button--unstyled.usa-button--disabled.usa-button--active, .usa-button--unstyled:disabled:focus, .usa-button--unstyled:disabled.usa-focus, .usa-button--unstyled.usa-button--disabled:focus, .usa-button--unstyled.usa-button--disabled.usa-focus, .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { -moz-osx-font-smoothing: inherit; -webkit-font-smoothing: inherit; background-color: transparent; box-shadow: none; text-decoration: underline; } .usa-button--unstyled:disabled, .usa-button--unstyled.usa-button--disabled { color: #c9c9c9; } .usa-button--unstyled.usa-button--hover { color: #B11116; } .usa-button--unstyled.usa-button--active { color: #850d12; } /* * * * * * ============================== * * * * * ============================== * * * * * ============================== * * * * * ============================== ======================================== ======================================== ======================================== ---------------------------------------- USWDS THEME CUSTOM STYLES ---------------------------------------- !! Copy this file to your project's sass root. Don't edit the version in node_modules. ---------------------------------------- Custom project SASS goes here. i.e. @include u-padding-right('05'); ---------------------------------------- */