├── .bundle └── config ├── .bundler-version ├── .github ├── ISSUE_TEMPLATE │ └── config.yml ├── dependabot.yml └── pull_request_template.md ├── .gitignore ├── .travis.yml ├── CONTRIBUTING.md ├── Gemfile ├── Gemfile.lock ├── LICENSE.md ├── README.md ├── _config.yml ├── _data ├── header.yml └── navigation.yml ├── _includes ├── components │ ├── banner.html │ └── header.html ├── footer.html ├── head.html ├── scripts.html ├── sidenav.html └── svg │ └── dottedgov-round.svg ├── _layouts ├── base.html ├── docs.html └── landing.html ├── _sass ├── _custom.scss ├── all.scss └── lib │ └── uswds │ ├── _all.scss │ ├── components │ ├── _accordions.scss │ ├── _alerts.scss │ ├── _banner.scss │ ├── _footer.scss │ ├── _forms.scss │ ├── _graphic-list.scss │ ├── _header.scss │ ├── _hero.scss │ ├── _layout.scss │ ├── _media-block.scss │ ├── _navigation.scss │ ├── _search.scss │ ├── _section.scss │ ├── _sidenav.scss │ └── _skipnav.scss │ ├── core │ ├── _base.scss │ ├── _defaults.scss │ ├── _fonts.scss │ ├── _grid-settings.scss │ ├── _grid.scss │ ├── _utilities.scss │ └── _variables.scss │ ├── elements │ ├── _buttons.scss │ ├── _embed.scss │ ├── _figure.scss │ ├── _inputs.scss │ ├── _labels.scss │ ├── _list.scss │ ├── _table.scss │ └── _typography.scss │ ├── lib │ ├── _bourbon-deprecate.scss │ ├── _bourbon-deprecated-upcoming.scss │ ├── _bourbon.scss │ ├── _neat-helpers.scss │ ├── _neat.scss │ ├── _normalize.scss │ ├── addons │ │ ├── _border-color.scss │ │ ├── _border-radius.scss │ │ ├── _border-style.scss │ │ ├── _border-width.scss │ │ ├── _buttons.scss │ │ ├── _clearfix.scss │ │ ├── _ellipsis.scss │ │ ├── _font-stacks.scss │ │ ├── _hide-text.scss │ │ ├── _margin.scss │ │ ├── _padding.scss │ │ ├── _position.scss │ │ ├── _prefixer.scss │ │ ├── _retina-image.scss │ │ ├── _size.scss │ │ ├── _text-inputs.scss │ │ ├── _timing-functions.scss │ │ ├── _triangle.scss │ │ └── _word-wrap.scss │ ├── css3 │ │ ├── _animation.scss │ │ ├── _appearance.scss │ │ ├── _backface-visibility.scss │ │ ├── _background-image.scss │ │ ├── _background.scss │ │ ├── _border-image.scss │ │ ├── _calc.scss │ │ ├── _columns.scss │ │ ├── _filter.scss │ │ ├── _flex-box.scss │ │ ├── _font-face.scss │ │ ├── _font-feature-settings.scss │ │ ├── _hidpi-media-query.scss │ │ ├── _hyphens.scss │ │ ├── _image-rendering.scss │ │ ├── _keyframes.scss │ │ ├── _linear-gradient.scss │ │ ├── _perspective.scss │ │ ├── _placeholder.scss │ │ ├── _radial-gradient.scss │ │ ├── _selection.scss │ │ ├── _text-decoration.scss │ │ ├── _transform.scss │ │ ├── _transition.scss │ │ └── _user-select.scss │ ├── functions │ │ ├── _assign-inputs.scss │ │ ├── _contains-falsy.scss │ │ ├── _contains.scss │ │ ├── _is-length.scss │ │ ├── _is-light.scss │ │ ├── _is-number.scss │ │ ├── _is-size.scss │ │ ├── _modular-scale.scss │ │ ├── _new-breakpoint.scss │ │ ├── _private.scss │ │ ├── _px-to-em.scss │ │ ├── _px-to-rem.scss │ │ ├── _shade.scss │ │ ├── _strip-units.scss │ │ ├── _tint.scss │ │ ├── _transition-property-name.scss │ │ └── _unpack.scss │ ├── grid │ │ ├── _box-sizing.scss │ │ ├── _direction-context.scss │ │ ├── _display-context.scss │ │ ├── _fill-parent.scss │ │ ├── _media.scss │ │ ├── _omega.scss │ │ ├── _outer-container.scss │ │ ├── _pad.scss │ │ ├── _private.scss │ │ ├── _row.scss │ │ ├── _shift.scss │ │ ├── _span-columns.scss │ │ ├── _to-deprecate.scss │ │ └── _visual-grid.scss │ ├── helpers │ │ ├── _convert-units.scss │ │ ├── _directional-values.scss │ │ ├── _font-source-declaration.scss │ │ ├── _gradient-positions-parser.scss │ │ ├── _linear-angle-parser.scss │ │ ├── _linear-gradient-parser.scss │ │ ├── _linear-positions-parser.scss │ │ ├── _linear-side-corner-parser.scss │ │ ├── _radial-arg-parser.scss │ │ ├── _radial-gradient-parser.scss │ │ ├── _radial-positions-parser.scss │ │ ├── _render-gradients.scss │ │ ├── _shape-size-stripper.scss │ │ └── _str-to-num.scss │ ├── mixins │ │ └── _clearfix.scss │ └── settings │ │ ├── _asset-pipeline.scss │ │ ├── _deprecation-warnings.scss │ │ ├── _disable-warnings.scss │ │ ├── _grid.scss │ │ ├── _prefixer.scss │ │ ├── _px-to-em.scss │ │ └── _visual-grid.scss │ └── uswds.scss ├── assets ├── bia-agreement.pdf ├── css │ └── main.scss ├── img │ ├── dotgov-152.png │ ├── dottedgov-round.svg │ ├── dottedgov.svg │ ├── gov-no-cost.png │ ├── home-hero.jpg │ ├── logo-email.png │ ├── logo-github.png │ └── securedotgov.png ├── js │ └── heading-links.js ├── policies-for-dot-gov-domain-issuance-for-federal-agency-public-websites.pdf └── transition-report-to-congress.pdf ├── favicon.ico └── pages ├── about ├── about.md └── elections.md ├── data.md ├── forms ├── city-county.md ├── federal.md ├── independent-intrastate.md ├── interstate.md ├── native-sovereign-nation.md ├── state-territory.md └── transfers.md ├── help ├── help.md ├── security-best-practices.md └── what-to-think-about.md ├── home.md ├── privacy.md ├── registration ├── registration.md ├── request-templates.md ├── requirements-retired.md └── requirements.md └── updates ├── 2022-omnibus.md ├── 2023-transition-email.md ├── 2023-transition.md ├── doing-the-2step.md ├── increase-security-passwords.md ├── intent-to-preload.md ├── moving-to-cisa.md ├── new-day-for-gov.md ├── october-2023-update.md ├── preloading.md └── updates.md /.bundle/config: -------------------------------------------------------------------------------- 1 | --- 2 | BUNDLE_PATH: "vendor/bundle" 3 | -------------------------------------------------------------------------------- /.bundler-version: -------------------------------------------------------------------------------- 1 | 2.0.1 2 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: true 2 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | --- 2 | version: 2 3 | updates: 4 | - package-ecosystem: "bundler" 5 | directory: "/" 6 | schedule: 7 | interval: "monthly" 8 | 9 | - package-ecosystem: "npm" 10 | directory: "/" 11 | schedule: 12 | interval: "monthly" 13 | -------------------------------------------------------------------------------- /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache 2 | _site 3 | .DS_Store 4 | todo.txt 5 | .jekyll-metadata 6 | /vendor 7 | .ruby-version 8 | *.pyc 9 | creds.txt 10 | .jekyll-cache/ 11 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: ruby 2 | rvm: 3 | - 2.7 4 | sudo: false 5 | git: 6 | submodules: false 7 | script: bundle exec jekyll b --trace 8 | cache: bundler 9 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | ## Public domain 2 | 3 | This project is in the public domain within the United States, and 4 | copyright and related rights in the work worldwide are waived through 5 | the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/). 6 | 7 | All contributions to this project will be released under the CC0 8 | dedication. By submitting a pull request, you are agreeing to comply 9 | with this waiver of copyright interest. 10 | -------------------------------------------------------------------------------- /Gemfile: -------------------------------------------------------------------------------- 1 | source 'https://rubygems.org' 2 | 3 | gem 'jekyll' 4 | gem 'uswds-jekyll' 5 | gem 'kramdown-parser-gfm' 6 | gem 'jekyll-redirect-from' 7 | -------------------------------------------------------------------------------- /Gemfile.lock: -------------------------------------------------------------------------------- 1 | GEM 2 | remote: https://rubygems.org/ 3 | specs: 4 | addressable (2.8.0) 5 | public_suffix (>= 2.0.2, < 5.0) 6 | colorator (1.1.0) 7 | concurrent-ruby (1.1.10) 8 | em-websocket (0.5.3) 9 | eventmachine (>= 0.12.9) 10 | http_parser.rb (~> 0) 11 | eventmachine (1.2.7) 12 | ffi (1.15.5) 13 | forwardable-extended (2.6.0) 14 | http_parser.rb (0.8.0) 15 | i18n (0.9.5) 16 | concurrent-ruby (~> 1.0) 17 | jekyll (3.9.2) 18 | addressable (~> 2.4) 19 | colorator (~> 1.0) 20 | em-websocket (~> 0.5) 21 | i18n (~> 0.7) 22 | jekyll-sass-converter (~> 1.0) 23 | jekyll-watch (~> 2.0) 24 | kramdown (>= 1.17, < 3) 25 | liquid (~> 4.0) 26 | mercenary (~> 0.3.3) 27 | pathutil (~> 0.9) 28 | rouge (>= 1.7, < 4) 29 | safe_yaml (~> 1.0) 30 | jekyll-redirect-from (0.16.0) 31 | jekyll (>= 3.3, < 5.0) 32 | jekyll-sass-converter (1.5.2) 33 | sass (~> 3.4) 34 | jekyll-watch (2.2.1) 35 | listen (~> 3.0) 36 | kramdown (2.3.2) 37 | rexml 38 | kramdown-parser-gfm (1.1.0) 39 | kramdown (~> 2.0) 40 | liquid (4.0.3) 41 | listen (3.7.1) 42 | rb-fsevent (~> 0.10, >= 0.10.3) 43 | rb-inotify (~> 0.9, >= 0.9.10) 44 | mercenary (0.3.6) 45 | pathutil (0.16.2) 46 | forwardable-extended (~> 2.6) 47 | public_suffix (4.0.6) 48 | rb-fsevent (0.11.1) 49 | rb-inotify (0.10.1) 50 | ffi (~> 1.0) 51 | rexml (3.2.5) 52 | rouge (3.28.0) 53 | safe_yaml (1.0.5) 54 | sass (3.7.4) 55 | sass-listen (~> 4.0.0) 56 | sass-listen (4.0.0) 57 | rb-fsevent (~> 0.9, >= 0.9.4) 58 | rb-inotify (~> 0.9, >= 0.9.7) 59 | uswds-jekyll (4.2.0) 60 | jekyll (~> 3.4) 61 | 62 | PLATFORMS 63 | ruby 64 | 65 | DEPENDENCIES 66 | jekyll 67 | jekyll-redirect-from 68 | kramdown-parser-gfm 69 | uswds-jekyll 70 | 71 | BUNDLED WITH 72 | 2.1.4 73 | -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | As a work of the United States Government, this project is in the 2 | public domain within the United States. 3 | 4 | Additionally, we waive copyright and related rights in the work 5 | worldwide through the CC0 1.0 Universal public domain dedication. 6 | 7 | ## CC0 1.0 Universal Summary 8 | 9 | This is a human-readable summary of the 10 | [Legal Code (read the full text)](https://creativecommons.org/publicdomain/zero/1.0/legalcode). 11 | 12 | ### No Copyright 13 | 14 | The person who associated a work with this deed has dedicated the work to 15 | the public domain by waiving all of his or her rights to the work worldwide 16 | under copyright law, including all related and neighboring rights, to the 17 | extent allowed by law. 18 | 19 | You can copy, modify, distribute and perform the work, even for commercial 20 | purposes, all without asking permission. 21 | 22 | ### Other Information 23 | 24 | In no way are the patent or trademark rights of any person affected by CC0, 25 | nor are the rights that other persons may have in the work or in how the 26 | work is used, such as publicity or privacy rights. 27 | 28 | Unless expressly stated otherwise, the person who associated a work with 29 | this deed makes no warranties about the work, and disclaims liability for 30 | all uses of the work, to the fullest extent permitted by applicable law. 31 | When using or citing the work, you should not imply endorsement by the 32 | author or the affirmer. 33 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## The .gov website 2 | 3 | A site for the .gov program, circa 2017 - 2024. We're now at https://github.com/cisagov/get.gov. 4 | 5 | ### Built using 6 | 7 | * The [U.S. Web Design Standards](https://standards.usa.gov), a set of reusable, high quality components for modern websites. Maintains consistency with the [many other U.S. government websites using the Standards](https://github.com/uswds/uswds/blob/develop/docs/WHO_IS_USING_USWDS.md). 8 | 9 | * The U.S. Web Design Standards [Jekyll theme](https://github.com/18F/uswds-jekyll). A few of the components have been overwritten or customized, but the theme is in use. 10 | 11 | ### Developing locally 12 | 13 | This site uses [Jekyll](https://jekyllrb.com), a Ruby-based static site generator. 14 | 15 | The application is optimized for deployment on 18F's [Federalist](https://federalist.18f.gov) static site hosting service. 16 | 17 | Install dependencies with Bundler: 18 | 19 | ``` 20 | bundle install 21 | ``` 22 | 23 | And run the site with Jekyll: 24 | 25 | ``` 26 | bundle exec jekyll serve 27 | ``` 28 | 29 | If all goes well, visit the site at `http://localhost:4000`. 30 | 31 | ### Public domain 32 | 33 | This project is in the worldwide [public domain](LICENSE.md). As stated in [CONTRIBUTING](CONTRIBUTING.md): 34 | 35 | > This project is in the public domain within the United States, and copyright and related rights in the work worldwide are waived through the [CC0 1.0 Universal public domain dedication](https://creativecommons.org/publicdomain/zero/1.0/). 36 | > 37 | > All contributions to this project will be released under the CC0 dedication. By submitting a pull request, you are agreeing to comply with this waiver of copyright interest. 38 | -------------------------------------------------------------------------------- /_config.yml: -------------------------------------------------------------------------------- 1 | # Using https://github.com/18F/uswds-jekyll 2 | theme: uswds-jekyll 3 | 4 | # OpenGraph / Twitter metadata 5 | title: .gov 6 | description: The top-level domain for U.S.-based government organizations 7 | 8 | # GA and GitHub data 9 | google_analytics_ua: ua-33523145-2 10 | repo: https://github.com/cisagov/dotgov-home 11 | 12 | search_site_handle: dotgov 13 | 14 | exclude: 15 | - CONTRIBUTING.md 16 | - _config.yml 17 | - .travis.yml 18 | - .gitignore 19 | - Gemfile 20 | - Gemfile.lock 21 | - LICENSE.md 22 | - README.md 23 | - vendor 24 | 25 | 26 | defaults: 27 | - scope: 28 | path: "" 29 | type: "pages" 30 | values: 31 | layout: "default" 32 | 33 | 34 | collections: 35 | pages: 36 | output: true 37 | #permalink: /:path/ 38 | 39 | plugins: 40 | - jekyll-redirect-from 41 | 42 | kramdown: 43 | parse_block_html: true 44 | -------------------------------------------------------------------------------- /_data/header.yml: -------------------------------------------------------------------------------- 1 | primary: 2 | links: primary 3 | type: basic 4 | 5 | # secondary: 6 | # links: secondary 7 | # search: false 8 | -------------------------------------------------------------------------------- /_data/navigation.yml: -------------------------------------------------------------------------------- 1 | primary: 2 | - text: Registration 3 | href: /registration/ 4 | - text: About 5 | href: /about/ 6 | - text: Updates 7 | href: /updates/ 8 | - text: Data 9 | href: /data/ 10 | - text: Help 11 | href: /help/ 12 | 13 | registration: 14 | - text: Registration 15 | href: /registration/ 16 | - text: Domain requirements 17 | href: /registration/requirements/ 18 | - text: Authorization letter templates 19 | href: /registration/authorization-templates/ 20 | 21 | about: 22 | - text: About 23 | href: /about/ 24 | - text: About, for elections 25 | href: /about/elections/ 26 | 27 | management: 28 | - text: Domain management 29 | href: /management/ 30 | - text: HSTS preloading 31 | href: /management/preloading/ 32 | 33 | data: 34 | - text: Data 35 | href: /data/ 36 | 37 | help: 38 | - text: Help 39 | href: /help/ 40 | - text: Thinking about moving to .gov? 41 | href: /help/what-to-think-about-moving-to-gov/ 42 | - text: Domain security best practices 43 | href: /help/security-best-practices/ 44 | - text: 2-step verification 45 | href: /2step/ 46 | -------------------------------------------------------------------------------- /_includes/components/banner.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |
6 |
7 |
8 | U.S. flag 9 |

An official website of the United States government

10 | 14 |
15 |

Requests for new .gov domains are paused until January 2024. See our blog post to learn more.

16 |
17 |
18 |
19 |
20 |
21 | Dot gov 22 |
23 |

24 | Official websites use .gov 25 |
26 | A .gov website belongs to an official government organization in the United States. 27 |

28 |
29 |
30 |
31 | SSL 32 |
33 |

34 | Secure .gov websites use HTTPS 35 |
36 | A lock or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites. 37 |

38 |
39 |
40 |
41 |
42 |
43 |
44 |

Requests for new .gov domains are paused until January 2024. See our blog post to learn more.

45 |
46 | -------------------------------------------------------------------------------- /_includes/footer.html: -------------------------------------------------------------------------------- 1 | 40 | -------------------------------------------------------------------------------- /_includes/head.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | {% if page.title %}{{ site.title }} - {{ page.title }}{% else %}{{ site.title }}{% endif %} 7 | 8 | 9 | 10 | 11 | 12 | 13 | 18 | -------------------------------------------------------------------------------- /_includes/scripts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 21 | -------------------------------------------------------------------------------- /_includes/sidenav.html: -------------------------------------------------------------------------------- 1 | {% if page.sidenav %} 2 | 32 | {% endif %} 33 | 34 | {% if page.url == page.permalink and page.subnav %} 35 |
Contents
36 | 39 | {% endif %} 40 | -------------------------------------------------------------------------------- /_includes/svg/dottedgov-round.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | .gov 5 | 6 | -------------------------------------------------------------------------------- /_layouts/base.html: -------------------------------------------------------------------------------- 1 | --- 2 | --- 3 | 4 | 5 | 6 | {% include meta.html %} 7 | {% include styles.html %} 8 | 9 | 10 | 11 | {% include skipnav.html %} 12 | {% include header.html %} 13 | 14 |
15 | {{ content }} 16 |
17 | 18 | {% include footer.html %} 19 | {% include scripts.html %} 20 | 21 | 22 | -------------------------------------------------------------------------------- /_layouts/docs.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | main: 4 | class: usa-grid usa-section usa-content usa-layout-docs 5 | --- 6 | 7 | 8 | {% assign sidenav = site.data.navigation[page.sidenav] | default: page.sidenav %} 9 | {% if sidenav or page.subnav %} 10 | 13 | {% endif %} 14 | 15 |
16 | {% if page.title %} 17 |

{{ page.title }}

18 | {% endif %} 19 | {% if page.intro %} 20 |

{{ page.intro }}

21 | {% endif %} 22 | 23 | {{ content }} 24 |
25 | -------------------------------------------------------------------------------- /_layouts/landing.html: -------------------------------------------------------------------------------- 1 | --- 2 | layout: base 3 | --- 4 | 5 | {% assign hero = page.hero %} 6 | 7 |
8 |
9 |

10 | {{ hero.heading }} 11 |

12 |

{{ hero.content }}

13 | 15 | {{ hero.button.text }} 16 | 17 | {{ hero.link.text }} 18 |
19 |
20 | 21 | {% if page.tagline and page.intro %} 22 |
23 |
24 |

{{ page.tagline }}

25 |
26 |
27 | {{ page.intro | markdownify }} 28 |
29 |
30 | {% endif %} 31 | 32 | {% capture _graphics %} 33 | {% include graphic-list.html graphics=page.graphics %} 34 | {% endcapture %} 35 | {% if page.graphics_position != 'after' %}{{ _graphics }}{% endif %} 36 | 37 | {{ content }} 38 | 39 | {% if page.graphics_position == 'after' %}{{ _graphics }}{% endif %} 40 | -------------------------------------------------------------------------------- /_sass/all.scss: -------------------------------------------------------------------------------- 1 | @import "custom" 2 | -------------------------------------------------------------------------------- /_sass/lib/uswds/_all.scss: -------------------------------------------------------------------------------- 1 | @import 'uswds'; 2 | -------------------------------------------------------------------------------- /_sass/lib/uswds/components/_accordions.scss: -------------------------------------------------------------------------------- 1 | // Variables 2 | 3 | $accordion-border: 3px solid $color-gray-lightest; 4 | 5 | // Accordion Styles 6 | 7 | @mixin accordion-list-styles { 8 | @include unstyled-list; 9 | color: $color-base; 10 | margin: 0; 11 | padding: 0; 12 | width: 100%; 13 | } 14 | 15 | @mixin accordion-list-item-styles { 16 | background-color: $color-gray-lightest; 17 | font-family: $font-sans; 18 | list-style: none; 19 | margin-bottom: 6px; 20 | width: 100%; 21 | } 22 | 23 | // scss-lint:disable PropertyCount 24 | @mixin accordion-button-styles { 25 | @include button-unstyled; 26 | background-color: $color-gray-lightest; 27 | background-image: url('#{$image-path}/minus.png'); 28 | background-image: url('#{$image-path}/minus.svg'); 29 | background-position: right 3rem center; 30 | background-repeat: no-repeat; 31 | background-size: 13px; 32 | color: $color-base; 33 | cursor: pointer; 34 | display: inline-block; 35 | font-family: $font-sans; 36 | font-weight: $font-bold; 37 | margin: 0; 38 | padding: 1.5rem 5.5rem 1.5rem 3rem; 39 | width: 100%; 40 | 41 | &:focus { 42 | box-shadow: $focus-shadow; 43 | } 44 | 45 | &:hover { 46 | background-color: $color-gray-lighter; 47 | color: $color-base; 48 | } 49 | 50 | h1, 51 | h2, 52 | h3, 53 | h4, 54 | h5, 55 | h6 { 56 | margin: 0; 57 | } 58 | } 59 | // scss-lint:enable PropertyCount 60 | 61 | @mixin accordion-button-unopened-styles { 62 | background-image: url('#{$image-path}/plus.png'); 63 | background-image: url('#{$image-path}/plus.svg'); 64 | background-repeat: no-repeat; 65 | background-size: 1.3rem; 66 | } 67 | 68 | @mixin accordion-nested-list { 69 | > ul li ul { 70 | list-style: disc; 71 | > li > ul { 72 | list-style: circle; 73 | > li > ul { 74 | list-style: square; 75 | } 76 | } 77 | } 78 | } 79 | 80 | .usa-accordion, 81 | .usa-accordion-bordered { 82 | @include accordion-list-styles; 83 | @include accordion-nested-list; 84 | 85 | + .usa-accordion, 86 | + .usa-accordion-bordered { 87 | margin-top: 1rem; 88 | } 89 | 90 | // TODO deprecated ruleset based on old accordion. 91 | > ul { 92 | @include accordion-list-styles; 93 | 94 | // TODO deprecated ruleset based on old accordion. 95 | > li { 96 | @include accordion-list-item-styles; 97 | } 98 | 99 | // TODO deprecated ruleset based on old accordion. 100 | button { 101 | @include accordion-button-styles; 102 | } 103 | 104 | // TODO deprecated ruleset based on old accordion. 105 | [aria-expanded=false] { 106 | @include accordion-button-unopened-styles; 107 | } 108 | } 109 | 110 | > li { 111 | @include accordion-list-item-styles; 112 | } 113 | 114 | } 115 | 116 | .usa-accordion-bordered { 117 | .usa-accordion-content { 118 | border-bottom: $accordion-border; 119 | border-left: $accordion-border; 120 | border-right: $accordion-border; 121 | } 122 | } 123 | 124 | .usa-accordion-content { 125 | background-color: $color-white; 126 | overflow: auto; 127 | padding: 3rem; 128 | 129 | > *:first-child { 130 | margin-top: 0; 131 | } 132 | 133 | > *:last-child { 134 | margin-bottom: 0; 135 | } 136 | 137 | &:not([aria-hidden]) { 138 | @include sr-only(); 139 | } 140 | 141 | @include accessibly-hidden(); 142 | } 143 | 144 | .usa-accordion-button { 145 | @include accordion-button-styles; 146 | } 147 | 148 | .usa-accordion-button[aria-expanded=false] { 149 | @include accordion-button-unopened-styles; 150 | } 151 | -------------------------------------------------------------------------------- /_sass/lib/uswds/components/_alerts.scss: -------------------------------------------------------------------------------- 1 | // Alert variables ---------- // 2 | $usa-custom-alerts: () !default; 3 | 4 | $usa-alerts: ( 5 | success: $color-green-lightest, 6 | warning: $color-gold-lightest, 7 | error: $color-secondary-lightest, 8 | info: $color-primary-alt-lightest 9 | ); 10 | 11 | $alerts: map-merge($usa-alerts, $usa-custom-alerts); 12 | 13 | .usa-alert { 14 | background-color: $color-gray-lightest; 15 | background-position: 1rem 2rem; 16 | background-repeat: no-repeat; 17 | background-size: 4rem; 18 | margin-top: 1.5em; 19 | padding: 1em; 20 | 21 | @include media($medium-screen) { 22 | background-size: 5.2rem; 23 | } 24 | 25 | a { 26 | color: $color-primary-darker; 27 | 28 | &:focus, 29 | &:hover { 30 | color: $color-primary-darkest; 31 | } 32 | } 33 | 34 | ul { 35 | margin-bottom: 0; 36 | margin-top: 1em; 37 | padding-left: 1em; 38 | } 39 | } 40 | 41 | .usa-alert-icon { 42 | display: table-cell; 43 | padding-right: 1rem; 44 | } 45 | 46 | .usa-alert-body { 47 | display: table-cell; 48 | padding-left: 3.5rem; 49 | vertical-align: top; 50 | 51 | @include media($medium-screen) { 52 | padding-left: 5rem; 53 | } 54 | 55 | p:first-child { 56 | margin-top: 0.8rem; 57 | } 58 | 59 | p:last-child { 60 | margin-bottom: 0.8rem; 61 | } 62 | } 63 | 64 | .usa-alert-heading { 65 | margin-bottom: .3rem; 66 | margin-top: 0; 67 | 68 | @include media($medium-screen) { 69 | margin-top: .3rem; 70 | } 71 | } 72 | 73 | .usa-alert-text { 74 | font-family: $font-sans; 75 | margin-bottom: 0; 76 | margin-top: 0; 77 | } 78 | 79 | @each $name, $bgcolor in $alerts { 80 | .usa-alert-#{$name} { 81 | background-color: $bgcolor; 82 | background-image: url('#{$image-path}/alerts/#{$name}.png'); 83 | background-image: url('#{$image-path}/alerts/#{$name}.svg'); 84 | } 85 | } 86 | 87 | .usa-alert-no_icon { 88 | background-image: none; 89 | } 90 | 91 | .usa-alert-paragraph { 92 | width: $text-max-width; 93 | padding: 1em 3em 1em 1em; 94 | } 95 | -------------------------------------------------------------------------------- /_sass/lib/uswds/components/_forms.scss: -------------------------------------------------------------------------------- 1 | $usa-form-width: 32rem; 2 | 3 | form { 4 | a { 5 | border-bottom: 0; 6 | } 7 | 8 | [type=submit], 9 | [type=submit] { 10 | display: block; 11 | margin-bottom: 1.5em; 12 | margin-top: 2.5rem; 13 | 14 | @include media($medium-screen) { 15 | padding-left: 2.7em; 16 | padding-right: 2.7em; 17 | width: auto; 18 | } 19 | } 20 | 21 | [name=password], 22 | [name=confirmPassword] { 23 | margin-bottom: 1.1rem; 24 | } 25 | } 26 | 27 | .usa-form { 28 | @include media($medium-screen) { 29 | max-width: $usa-form-width; 30 | } 31 | } 32 | 33 | .usa-form-note { 34 | float: right; 35 | font-family: $font-sans; 36 | font-size: $h5-font-size; 37 | margin: 0 0 1.5rem; 38 | 39 | + * { 40 | clear: both; 41 | } 42 | } 43 | 44 | fieldset { 45 | border: none; 46 | margin: 0; 47 | padding: 0; 48 | } 49 | 50 | .usa-form-large { 51 | @include media($medium-screen) { 52 | max-width: 46rem; 53 | } 54 | } 55 | 56 | input { 57 | &.usa-input-tiny { /* stylelint-disable-line selector-no-qualifying-type */ 58 | @include media($medium-screen) { 59 | max-width: 6rem; 60 | } 61 | } 62 | 63 | &.usa-input-medium { /* stylelint-disable-line selector-no-qualifying-type */ 64 | @include media($medium-screen) { 65 | max-width: 12rem; 66 | } 67 | } 68 | } 69 | 70 | .usa-input-grid { 71 | @include media($medium-screen) { 72 | padding-right: 5%; 73 | } 74 | } 75 | 76 | .usa-input-grid:last-of-type { 77 | @include media($medium-screen) { 78 | padding-right: 0; 79 | } 80 | } 81 | 82 | .usa-input-grid-small { 83 | @include media($medium-screen) { 84 | float: left; 85 | width: 35%; 86 | } 87 | 88 | input { 89 | margin-bottom: 3rem; 90 | } 91 | 92 | select { 93 | margin-bottom: 3rem; 94 | } 95 | } 96 | 97 | .usa-input-grid-medium { 98 | @include media($medium-screen) { 99 | float: left; 100 | width: 65%; 101 | } 102 | 103 | input { 104 | margin-bottom: 3rem; 105 | } 106 | 107 | select { 108 | margin-bottom: 3rem; 109 | } 110 | } 111 | 112 | .usa-input-grid-large { 113 | @include media($medium-screen) { 114 | float: left; 115 | width: 100%; 116 | } 117 | 118 | input { 119 | margin-bottom: 3rem; 120 | } 121 | 122 | select { 123 | margin-bottom: 3rem; 124 | } 125 | } 126 | 127 | .usa-additional_text { 128 | font-weight: normal; 129 | } 130 | 131 | // Reset password checklist 132 | 133 | .usa-checklist { 134 | list-style: none; 135 | margin-left: 0; 136 | padding-left: 0; 137 | 138 | li { 139 | display: inline-block; 140 | list-style: none; 141 | margin-bottom: 0; 142 | margin-top: 0; 143 | padding-left: 3em; 144 | text-indent: -2em; 145 | 146 | &::before { 147 | content: ' '; 148 | display: inline-block; 149 | height: .8em; 150 | margin-right: .2em; 151 | width: 1.8em; 152 | } 153 | } 154 | } 155 | 156 | .usa-checklist-checked { 157 | &::before { 158 | background-image: url('#{$image-path}/correct9.png'); 159 | background-image: url('#{$image-path}/correct9.svg'); 160 | background-position: 100%; 161 | background-repeat: no-repeat; 162 | background-size: 100%; 163 | } 164 | } 165 | -------------------------------------------------------------------------------- /_sass/lib/uswds/components/_graphic-list.scss: -------------------------------------------------------------------------------- 1 | // A collection of media block objects 2 | 3 | .usa-graphic_list { 4 | .usa-graphic_list-row { 5 | .usa-media_block { 6 | margin-bottom: $site-margins; 7 | 8 | @include media($medium-screen) { 9 | margin-bottom: $site-margins * 2; 10 | } 11 | } 12 | 13 | &:last-child { 14 | .usa-media_block { 15 | @include media($medium-screen) { 16 | margin-bottom: 0; 17 | } 18 | 19 | &:last-child { 20 | margin-bottom: 0; 21 | } 22 | } 23 | } 24 | } 25 | 26 | .usa-media_block-img { 27 | margin-right: $site-margins; 28 | } 29 | 30 | .usa-media_block-body { 31 | > :first-child { 32 | margin-top: 0; 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /_sass/lib/uswds/components/_hero.scss: -------------------------------------------------------------------------------- 1 | // Hero feature 2 | // ========================== 3 | 4 | .usa-hero { 5 | @include padding($site-margins null); 6 | background-image: url('#{$image-path}/hero.png'); 7 | background-position: center; 8 | background-size: cover; 9 | 10 | .usa-button { 11 | color: $color-white; 12 | } 13 | } 14 | 15 | .usa-section-dark { 16 | .usa-hero-link { 17 | color: $color-primary-alt; 18 | } 19 | } 20 | 21 | .usa-hero-callout { 22 | background-color: $color-primary-darkest; 23 | padding: 3rem; 24 | 25 | @include media($small-screen) { 26 | max-width: 30rem; 27 | } 28 | 29 | > *:first-child { 30 | @include margin(0 null $site-margins null); 31 | } 32 | 33 | .usa-button { 34 | font-size: $small-font-size; 35 | margin-top: 7rem; 36 | width: 100%; 37 | } 38 | } 39 | 40 | .usa-hero-callout-alt { 41 | color: $color-white; 42 | display: block; 43 | } 44 | -------------------------------------------------------------------------------- /_sass/lib/uswds/components/_layout.scss: -------------------------------------------------------------------------------- 1 | // Flexbox positioning to move sidenav below main content on small screens 2 | .usa-layout-docs { 3 | display: flex; 4 | flex-direction: column; 5 | 6 | @include media($large-screen) { 7 | display: inherit; 8 | } 9 | 10 | .usa-grid { 11 | > :first-child:not(.usa-width-*) { 12 | margin-top: 0; 13 | } 14 | 15 | > :last-child:not(.usa-width-*) { 16 | margin-bottom: 0; 17 | } 18 | } 19 | } 20 | 21 | .usa-layout-docs-sidenav { 22 | order: 2; 23 | } 24 | 25 | .usa-layout-docs-main_content { 26 | margin-bottom: $site-margins; 27 | order: 1; 28 | 29 | @include media($large-screen) { 30 | margin-bottom: 0; 31 | } 32 | 33 | > :first-child { 34 | margin-top: 0; 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /_sass/lib/uswds/components/_media-block.scss: -------------------------------------------------------------------------------- 1 | @mixin media-block-img($margin-right: 1rem) { 2 | float: left; 3 | margin-right: $margin-right; 4 | } 5 | 6 | .usa-media_block-img { 7 | @include media-block-img; 8 | } 9 | 10 | .usa-media_block-body { 11 | overflow: hidden; 12 | } 13 | -------------------------------------------------------------------------------- /_sass/lib/uswds/components/_search.scss: -------------------------------------------------------------------------------- 1 | $usa-btn-small-width: 4.5rem; 2 | $usa-btn-medium-width: 8.5rem; 3 | $usa-btn-big-width: 11.6rem; 4 | 5 | @mixin search-icon { 6 | background-image: url('#{$image-path}/search.png'); 7 | background-image: url('#{$image-path}/search.svg'); 8 | background-position: 50%; 9 | background-repeat: no-repeat; 10 | } 11 | 12 | .usa-search { 13 | @include clearfix; 14 | max-width: none; 15 | position: relative; 16 | 17 | [type=search], 18 | .usa-search-input { 19 | @include padding(0 null); 20 | -webkit-appearance: none; 21 | border-bottom-right-radius: 0; 22 | border-right: none; 23 | border-top-right-radius: 0; 24 | box-sizing: border-box; 25 | float: left; 26 | font-size: $small-font-size; 27 | height: 3.3rem; 28 | margin: 0; 29 | width: calc(100% - #{$usa-btn-small-width}); 30 | 31 | @include media($small-screen) { 32 | width: calc(100% - #{$usa-btn-medium-width}); 33 | } 34 | } 35 | 36 | [type=submit], 37 | .usa-search-submit { 38 | @include search-icon; 39 | border-bottom-left-radius: 0; 40 | border-top-left-radius: 0; 41 | height: 3.3rem; 42 | margin: 0; 43 | padding: 0; 44 | width: $usa-btn-small-width; 45 | 46 | @include media($small-screen) { 47 | background-image: none; 48 | width: $usa-btn-medium-width; 49 | } 50 | } 51 | 52 | .usa-search-submit-text { 53 | display: none; 54 | 55 | @include media($small-screen) { 56 | display: block; 57 | } 58 | } 59 | 60 | &.usa-search-big { 61 | @include media($small-screen) { 62 | $height: 4.4rem; 63 | $width: $usa-btn-big-width; 64 | 65 | [type=search], 66 | .usa-search-input { 67 | font-size: $base-font-size; 68 | height: $height; 69 | width: calc(100% - #{$width}); 70 | } 71 | 72 | [type=submit], 73 | .usa-search-submit { 74 | font-size: $h3-font-size; 75 | height: $height; 76 | width: $width; 77 | } 78 | } 79 | } 80 | 81 | &.usa-search-small { 82 | @include media($small-screen) { 83 | $width: $usa-btn-small-width; 84 | 85 | [type=search], 86 | .usa-search-input { 87 | width: calc(100% - #{$width}); 88 | } 89 | 90 | [type=submit], 91 | .usa-search-submit { 92 | @include search-icon; 93 | width: $width; 94 | } 95 | } 96 | 97 | $lt-nav-width: $nav-width - 1px; 98 | 99 | @media screen and (max-width: $lt-nav-width) { 100 | &.usa-sr-only { 101 | left: auto; 102 | position: relative; 103 | } 104 | } 105 | } 106 | } 107 | -------------------------------------------------------------------------------- /_sass/lib/uswds/components/_section.scss: -------------------------------------------------------------------------------- 1 | .usa-section { 2 | @include padding($site-margins null); 3 | 4 | @include media($medium-screen) { 5 | @include padding(6rem null); 6 | } 7 | } 8 | 9 | .usa-section-light { 10 | background-color: $color-gray-lightest; 11 | } 12 | 13 | .usa-section-dark { 14 | background-color: $color-primary-darkest; 15 | color: $color-white; 16 | 17 | h1, 18 | h2, 19 | h3, 20 | h4, 21 | h5, 22 | h6 { 23 | color: $color-primary-alt; 24 | } 25 | 26 | p { 27 | color: $color-white; 28 | } 29 | 30 | a { 31 | color: $color-gray-lighter; 32 | 33 | &:hover { 34 | color: $color-white; 35 | } 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /_sass/lib/uswds/components/_sidenav.scss: -------------------------------------------------------------------------------- 1 | 2 | .usa-sidenav-list { 3 | @include usa-sidenav-list; 4 | } 5 | 6 | .usa-sidenav-sub_list { 7 | @include usa-sidenav-sublist; 8 | } 9 | -------------------------------------------------------------------------------- /_sass/lib/uswds/components/_skipnav.scss: -------------------------------------------------------------------------------- 1 | .usa-skipnav { 2 | background: transparent; 3 | color: $color-base; 4 | left: 0; 5 | padding: 1rem 1.5rem; 6 | position: absolute; 7 | top: -4.2rem; 8 | transition: all 0.2s ease-in-out; 9 | z-index: 100; 10 | 11 | &:focus { 12 | background: $color-white; 13 | left: 0; 14 | outline: 0; 15 | position: absolute; 16 | top: 0; 17 | transition: all 0.2s ease-in-out; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /_sass/lib/uswds/core/_base.scss: -------------------------------------------------------------------------------- 1 | // Apply a natural box layout model to all elements, but allowing components to 2 | // change 3 | 4 | html { 5 | box-sizing: border-box; 6 | } 7 | 8 | *, 9 | *::before, 10 | *::after { 11 | box-sizing: inherit; 12 | } 13 | 14 | body { 15 | background-color: $color-white; 16 | overflow-x: hidden; 17 | } 18 | 19 | // Hack for clearfixes 20 | .lt-ie9 { 21 | * { 22 | filter: none !important; /* stylelint-disable-line declaration-no-important */ 23 | } 24 | } 25 | 26 | // for IE < 11, see: 27 | // 28 | [hidden] { 29 | display: none !important; /* stylelint-disable-line declaration-no-important */ 30 | } 31 | -------------------------------------------------------------------------------- /_sass/lib/uswds/core/_defaults.scss: -------------------------------------------------------------------------------- 1 | // XXX This file has been deprecated in favor of _variables.scss, and is no 2 | // longer relevant. Instead, set any variables that you wish to override, then 3 | // @import '{path/to/uswds/}core/variables'; 4 | 5 | // For backwards compatibility with consumers of _defaults.scss, we just 6 | // re-import _variables here. This should be a noop if it has already been 7 | // imported, since every variable is declared with `!default`. 8 | @import './variables'; 9 | -------------------------------------------------------------------------------- /_sass/lib/uswds/core/_fonts.scss: -------------------------------------------------------------------------------- 1 | /* stylelint-disable at-rule-empty-line-before */ 2 | @include font-face( 3 | 'Source Sans Pro', 4 | '#{$font-path}/sourcesanspro-light-webfont', 5 | 300, 6 | normal, 7 | $file-formats: eot woff2 woff ttf 8 | ); 9 | 10 | @include font-face( 11 | 'Source Sans Pro', 12 | '#{$font-path}/sourcesanspro-regular-webfont', 13 | 400, 14 | normal, 15 | $file-formats: eot woff2 woff ttf 16 | ); 17 | 18 | @include font-face( 19 | 'Source Sans Pro', 20 | '#{$font-path}/sourcesanspro-italic-webfont', 21 | 400, 22 | italic, 23 | $file-formats: eot woff2 woff ttf 24 | ); 25 | 26 | @include font-face( 27 | 'Source Sans Pro', 28 | '#{$font-path}/sourcesanspro-bold-webfont', 29 | 700, 30 | normal, 31 | $file-formats: eot woff2 woff ttf 32 | ); 33 | 34 | @include font-face( 35 | 'Merriweather', 36 | '#{$font-path}/merriweather-light-webfont', 37 | 300, 38 | normal, 39 | $file-formats: eot woff2 woff ttf 40 | ); 41 | 42 | @include font-face( 43 | 'Merriweather', 44 | '#{$font-path}/merriweather-regular-webfont', 45 | 400, 46 | normal, 47 | $file-formats: eot woff2 woff ttf 48 | ); 49 | 50 | @include font-face( 51 | 'Merriweather', 52 | '#{$font-path}/merriweather-italic-webfont', 53 | 400, 54 | italic, 55 | $file-formats: eot woff2 woff ttf 56 | ); 57 | 58 | @include font-face( 59 | 'Merriweather', 60 | '#{$font-path}/merriweather-bold-webfont', 61 | 700, 62 | normal, 63 | $file-formats: eot woff2 woff ttf 64 | ); 65 | /* stylelint-enable */ 66 | -------------------------------------------------------------------------------- /_sass/lib/uswds/core/_grid-settings.scss: -------------------------------------------------------------------------------- 1 | // XXX This file has been deprecated. Grid size variables 2 | // ($grid-columns-*) are now declared in _variables.scss as !default, and 3 | // can be overridden individually. 4 | -------------------------------------------------------------------------------- /_sass/lib/uswds/core/_grid.scss: -------------------------------------------------------------------------------- 1 | // Grid container 2 | .usa-grid, 3 | .usa-grid-full { 4 | @include outer-container(); 5 | max-width: $site-max-width; 6 | } 7 | 8 | .usa-grid { 9 | @include padding(null $site-margins-mobile); 10 | 11 | @include media($medium-screen) { 12 | @include padding(null $site-margins); 13 | } 14 | } 15 | 16 | .usa-grid-full { 17 | padding: 0; 18 | } 19 | 20 | // Grid items 21 | @include media($medium) { 22 | .usa-width-one-whole { 23 | @include span-columns(6); 24 | } 25 | 26 | .usa-width-one-half { 27 | @include span-columns(3); 28 | } 29 | 30 | .usa-width-one-third { 31 | @include span-columns(2); 32 | } 33 | 34 | .usa-width-two-thirds { 35 | @include span-columns(4); 36 | } 37 | 38 | .usa-width-one-fourth { 39 | @include span-columns(3); 40 | 41 | &:nth-child(2n) { 42 | margin-right: 0; 43 | } 44 | } 45 | 46 | .usa-width-three-fourths { 47 | @include span-columns(6); 48 | } 49 | 50 | .usa-width-one-sixth { 51 | @include span-columns(2); 52 | 53 | &:nth-child(3n) { 54 | margin-right: 0; 55 | } 56 | } 57 | 58 | .usa-width-five-sixths { 59 | @include span-columns(4); 60 | } 61 | 62 | .usa-width-one-twelfth { 63 | @include span-columns(2); 64 | 65 | &:nth-child(3n) { 66 | margin-right: 0; 67 | } 68 | } 69 | 70 | .usa-width-five-twelfths { 71 | @include span-columns(2); 72 | } 73 | 74 | .usa-width-seven-twelfths { 75 | @include span-columns(4); 76 | } 77 | } 78 | 79 | @include media($large) { 80 | .usa-width-one-whole { 81 | @include span-columns(12); 82 | } 83 | 84 | .usa-width-one-half { 85 | @include span-columns(6); 86 | } 87 | 88 | .usa-width-one-third { 89 | @include span-columns(4); 90 | } 91 | 92 | .usa-width-two-thirds { 93 | @include span-columns(8); 94 | } 95 | 96 | .usa-width-one-fourth { 97 | @include span-columns(3); 98 | 99 | &:nth-child(2n) { 100 | @include span-columns(3); 101 | } 102 | 103 | &:nth-child(4n) { 104 | margin-right: 0; 105 | } 106 | } 107 | 108 | .usa-width-three-fourths { 109 | @include span-columns(9); 110 | } 111 | 112 | .usa-width-one-sixth { 113 | @include span-columns(2); 114 | 115 | &:nth-child(3n) { 116 | @include span-columns(2); 117 | } 118 | 119 | &:nth-child(6n) { 120 | margin-right: 0; 121 | } 122 | } 123 | 124 | .usa-width-five-sixths { 125 | @include span-columns(10); 126 | } 127 | 128 | .usa-width-one-twelfth { 129 | @include span-columns(1); 130 | 131 | &:nth-child(3n) { 132 | @include span-columns(1); 133 | } 134 | 135 | &:nth-child(12n) { 136 | margin-right: 0; 137 | } 138 | } 139 | 140 | .usa-width-five-twelfths { 141 | @include span-columns(5); 142 | } 143 | 144 | .usa-width-seven-twelfths { 145 | @include span-columns(7); 146 | } 147 | } 148 | 149 | // Specifies end of a row. 150 | // Required if grid-box contains multiple rows. 151 | // Required if browser does not support :last-child 152 | .usa-end-row { 153 | @include omega(); 154 | } 155 | 156 | // Grid Offsets 157 | .usa-offset-one-twelfth { 158 | @include shift(1 of 12); 159 | } 160 | 161 | .usa-offset-one-sixth { 162 | @include shift(2 of 12); 163 | } 164 | 165 | .usa-offset-one-fourth { 166 | @include shift(3 of 12); 167 | } 168 | 169 | .usa-offset-one-third { 170 | @include shift(4 of 12); 171 | } 172 | 173 | .usa-offset-five-twelfths { 174 | @include shift(5 of 12); 175 | } 176 | 177 | .usa-offset-one-half { 178 | @include shift(6 of 12); 179 | } 180 | 181 | .usa-offset-seven-twelfths { 182 | @include shift(7 of 12); 183 | } 184 | 185 | .usa-offset-two-thirds { 186 | @include shift(8 of 12); 187 | } 188 | 189 | .usa-offset-three-fourths { 190 | @include shift(9 of 12); 191 | } 192 | 193 | .usa-offset-five-sixths { 194 | @include shift(10 of 12); 195 | } 196 | 197 | .usa-offset-eleven-twelfths { 198 | @include shift(11 of 12); 199 | } 200 | -------------------------------------------------------------------------------- /_sass/lib/uswds/elements/_embed.scss: -------------------------------------------------------------------------------- 1 | $aspect-height: 9; 2 | $aspect-width: 16; 3 | 4 | @mixin embed-container ($height, $width) { 5 | padding-bottom: percentage($height/$width); 6 | } 7 | 8 | .usa-embed-container { 9 | iframe, 10 | object, 11 | embed { 12 | position: absolute; 13 | top: 0; 14 | left: 0; 15 | width: 100%; 16 | height: 100%; 17 | } 18 | } 19 | 20 | .usa-embed-container { 21 | @include embed-container($aspect-height, $aspect-width); 22 | position: relative; 23 | height: 0; 24 | overflow: hidden; 25 | max-width: 100%; 26 | } 27 | -------------------------------------------------------------------------------- /_sass/lib/uswds/elements/_figure.scss: -------------------------------------------------------------------------------- 1 | img { 2 | max-width: 100%; 3 | } 4 | 5 | // TODO: Add documentation instructions for using this class on image links 6 | @mixin media-link { 7 | display: inline-block; 8 | line-height: 0; 9 | } 10 | 11 | .media_link { 12 | @include media-link(); 13 | } 14 | -------------------------------------------------------------------------------- /_sass/lib/uswds/elements/_labels.scss: -------------------------------------------------------------------------------- 1 | .usa-label { 2 | background-color: $color-primary; 3 | border-radius: $border-radius; 4 | color: $color-white; 5 | font-size: $h5-font-size; 6 | margin-right: 0.5rem; 7 | padding: 0.1rem 0.7rem; 8 | text-transform: uppercase; 9 | 10 | &:only-of-type { 11 | margin-right: 0; 12 | } 13 | } 14 | 15 | .usa-label-big { 16 | @extend .usa-label; 17 | font-size: $base-font-size; 18 | padding-left: 0.9rem; 19 | padding-right: 0.9rem; 20 | } 21 | -------------------------------------------------------------------------------- /_sass/lib/uswds/elements/_list.scss: -------------------------------------------------------------------------------- 1 | ul, 2 | ol { 3 | @include margin(1em null); 4 | padding-left: 1.94em; // Approximately 15px left padding at default font size 5 | } 6 | 7 | li { 8 | line-height: $base-line-height; 9 | margin-bottom: 0.5em; 10 | 11 | &:last-child { 12 | margin-bottom: 0; 13 | } 14 | } 15 | 16 | h1, 17 | h2, 18 | h3, 19 | h4, 20 | h5, 21 | h6, 22 | p { 23 | + ul, 24 | + ol { 25 | margin-top: 0; 26 | } 27 | } 28 | 29 | // Unstyled lists 30 | .usa-unstyled-list { 31 | @include unstyled-list; 32 | } 33 | -------------------------------------------------------------------------------- /_sass/lib/uswds/elements/_table.scss: -------------------------------------------------------------------------------- 1 | table { 2 | border-spacing: 0; 3 | margin: 2em 0; 4 | min-width: 100%; 5 | 6 | thead { 7 | th, 8 | td { 9 | background-color: $color-gray-lightest; 10 | } 11 | } 12 | 13 | th { 14 | text-align: left; 15 | } 16 | 17 | tbody { 18 | th { 19 | font-weight: $font-normal; 20 | } 21 | } 22 | 23 | th, 24 | td { 25 | background-color: $color-white; 26 | border: 1px solid $color-white; 27 | padding: 1.5rem; 28 | } 29 | } 30 | 31 | .usa-table-borderless { 32 | thead { 33 | tr { 34 | background-color: transparent; 35 | } 36 | 37 | th { 38 | border-top: 0; 39 | } 40 | } 41 | 42 | th, 43 | td { 44 | border-left: 0; 45 | border-right: 0; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/_bourbon-deprecate.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Throws Sass warnings to announce library deprecations. You can disable them 4 | /// by setting the `$output-bourbon-deprecation-warnings` variable to `false`. 5 | /// 6 | /// @access private 7 | 8 | @mixin _bourbon-deprecate($feature, $message: null) { 9 | @if $output-bourbon-deprecation-warnings == true { 10 | @warn "[Bourbon] [Deprecation] `#{$feature}` is deprecated and will be " + 11 | "removed in 5.0.0. #{$message}"; 12 | @content; 13 | } 14 | } 15 | 16 | @mixin _bourbon-deprecate-for-prefixing($feature) { 17 | @include _bourbon-deprecate($feature, "We suggest using an automated " + 18 | "prefixing tool, like Autoprefixer."); 19 | } 20 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/_bourbon.scss: -------------------------------------------------------------------------------- 1 | // Bourbon 4.2.7 2 | // http://bourbon.io 3 | // Copyright 2011-2015 thoughtbot, inc. 4 | // MIT License 5 | 6 | @import "settings/prefixer"; 7 | @import "settings/px-to-em"; 8 | @import "settings/asset-pipeline"; 9 | 10 | @import "functions/assign-inputs"; 11 | @import "functions/contains"; 12 | @import "functions/contains-falsy"; 13 | @import "functions/is-length"; 14 | @import "functions/is-light"; 15 | @import "functions/is-number"; 16 | @import "functions/is-size"; 17 | @import "functions/px-to-em"; 18 | @import "functions/px-to-rem"; 19 | @import "functions/shade"; 20 | @import "functions/strip-units"; 21 | @import "functions/tint"; 22 | @import "functions/transition-property-name"; 23 | @import "functions/unpack"; 24 | @import "functions/modular-scale"; 25 | 26 | @import "helpers/convert-units"; 27 | @import "helpers/directional-values"; 28 | @import "helpers/font-source-declaration"; 29 | @import "helpers/gradient-positions-parser"; 30 | @import "helpers/linear-angle-parser"; 31 | @import "helpers/linear-gradient-parser"; 32 | @import "helpers/linear-positions-parser"; 33 | @import "helpers/linear-side-corner-parser"; 34 | @import "helpers/radial-arg-parser"; 35 | @import "helpers/radial-positions-parser"; 36 | @import "helpers/radial-gradient-parser"; 37 | @import "helpers/render-gradients"; 38 | @import "helpers/shape-size-stripper"; 39 | @import "helpers/str-to-num"; 40 | 41 | @import "css3/animation"; 42 | @import "css3/appearance"; 43 | @import "css3/backface-visibility"; 44 | @import "css3/background"; 45 | @import "css3/background-image"; 46 | @import "css3/border-image"; 47 | @import "css3/calc"; 48 | @import "css3/columns"; 49 | @import "css3/filter"; 50 | @import "css3/flex-box"; 51 | @import "css3/font-face"; 52 | @import "css3/font-feature-settings"; 53 | @import "css3/hidpi-media-query"; 54 | @import "css3/hyphens"; 55 | @import "css3/image-rendering"; 56 | @import "css3/keyframes"; 57 | @import "css3/linear-gradient"; 58 | @import "css3/perspective"; 59 | @import "css3/placeholder"; 60 | @import "css3/radial-gradient"; 61 | @import "css3/selection"; 62 | @import "css3/text-decoration"; 63 | @import "css3/transform"; 64 | @import "css3/transition"; 65 | @import "css3/user-select"; 66 | 67 | @import "addons/border-color"; 68 | @import "addons/border-radius"; 69 | @import "addons/border-style"; 70 | @import "addons/border-width"; 71 | @import "addons/buttons"; 72 | @import "addons/clearfix"; 73 | @import "addons/ellipsis"; 74 | @import "addons/font-stacks"; 75 | @import "addons/hide-text"; 76 | @import "addons/margin"; 77 | @import "addons/padding"; 78 | @import "addons/position"; 79 | @import "addons/prefixer"; 80 | @import "addons/retina-image"; 81 | @import "addons/size"; 82 | @import "addons/text-inputs"; 83 | @import "addons/timing-functions"; 84 | @import "addons/triangle"; 85 | @import "addons/word-wrap"; 86 | 87 | @import "bourbon-deprecated-upcoming"; 88 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/_neat-helpers.scss: -------------------------------------------------------------------------------- 1 | // Mixins 2 | @import "mixins/clearfix"; 3 | 4 | // Functions 5 | @import "functions/private"; 6 | @import "functions/new-breakpoint"; 7 | 8 | // Settings 9 | @import "settings/grid"; 10 | @import "settings/visual-grid"; 11 | @import "settings/disable-warnings"; 12 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/_neat.scss: -------------------------------------------------------------------------------- 1 | // Neat 1.8.0 2 | // http://neat.bourbon.io 3 | // Copyright 2012-2015 thoughtbot, inc. 4 | // MIT License 5 | 6 | // Helpers 7 | @import "neat-helpers"; 8 | 9 | // Grid 10 | @import "grid/private"; 11 | @import "grid/box-sizing"; 12 | @import "grid/omega"; 13 | @import "grid/outer-container"; 14 | @import "grid/span-columns"; 15 | @import "grid/row"; 16 | @import "grid/shift"; 17 | @import "grid/pad"; 18 | @import "grid/fill-parent"; 19 | @import "grid/media"; 20 | @import "grid/to-deprecate"; 21 | @import "grid/visual-grid"; 22 | @import "grid/display-context"; 23 | @import "grid/direction-context"; 24 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_border-color.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `border-color` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include border-color(#a60b55 #76cd9c null #e8ae1a); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// border-left-color: #e8ae1a; 16 | /// border-right-color: #76cd9c; 17 | /// border-top-color: #a60b55; 18 | /// } 19 | /// 20 | /// @require {mixin} directional-property 21 | /// 22 | /// @output `border-color` 23 | 24 | @mixin border-color($vals...) { 25 | @include directional-property(border, color, $vals...); 26 | } 27 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_border-radius.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `border-radius` on both corners on the side of a box. 4 | /// 5 | /// @param {Number} $radii 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element-one { 10 | /// @include border-top-radius(5px); 11 | /// } 12 | /// 13 | /// .element-two { 14 | /// @include border-left-radius(3px); 15 | /// } 16 | /// 17 | /// @example css - CSS Output 18 | /// .element-one { 19 | /// border-top-left-radius: 5px; 20 | /// border-top-right-radius: 5px; 21 | /// } 22 | /// 23 | /// .element-two { 24 | /// border-bottom-left-radius: 3px; 25 | /// border-top-left-radius: 3px; 26 | /// } 27 | /// 28 | /// @output `border-radius` 29 | 30 | @mixin border-top-radius($radii) { 31 | border-top-left-radius: $radii; 32 | border-top-right-radius: $radii; 33 | } 34 | 35 | @mixin border-right-radius($radii) { 36 | border-bottom-right-radius: $radii; 37 | border-top-right-radius: $radii; 38 | } 39 | 40 | @mixin border-bottom-radius($radii) { 41 | border-bottom-left-radius: $radii; 42 | border-bottom-right-radius: $radii; 43 | } 44 | 45 | @mixin border-left-radius($radii) { 46 | border-bottom-left-radius: $radii; 47 | border-top-left-radius: $radii; 48 | } 49 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_border-style.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `border-style` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include border-style(dashed null solid); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// border-bottom-style: solid; 16 | /// border-top-style: dashed; 17 | /// } 18 | /// 19 | /// @require {mixin} directional-property 20 | /// 21 | /// @output `border-style` 22 | 23 | @mixin border-style($vals...) { 24 | @include directional-property(border, style, $vals...); 25 | } 26 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_border-width.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `border-width` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include border-width(1em null 20px); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// border-bottom-width: 20px; 16 | /// border-top-width: 1em; 17 | /// } 18 | /// 19 | /// @require {mixin} directional-property 20 | /// 21 | /// @output `border-width` 22 | 23 | @mixin border-width($vals...) { 24 | @include directional-property(border, width, $vals...); 25 | } 26 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_buttons.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Generates variables for all buttons. Please note that you must use interpolation on the variable: `#{$all-buttons}`. 4 | /// 5 | /// @example scss - Usage 6 | /// #{$all-buttons} { 7 | /// background-color: #f00; 8 | /// } 9 | /// 10 | /// #{$all-buttons-focus}, 11 | /// #{$all-buttons-hover} { 12 | /// background-color: #0f0; 13 | /// } 14 | /// 15 | /// #{$all-buttons-active} { 16 | /// background-color: #00f; 17 | /// } 18 | /// 19 | /// @example css - CSS Output 20 | /// button, 21 | /// input[type="button"], 22 | /// input[type="reset"], 23 | /// input[type="submit"] { 24 | /// background-color: #f00; 25 | /// } 26 | /// 27 | /// button:focus, 28 | /// input[type="button"]:focus, 29 | /// input[type="reset"]:focus, 30 | /// input[type="submit"]:focus, 31 | /// button:hover, 32 | /// input[type="button"]:hover, 33 | /// input[type="reset"]:hover, 34 | /// input[type="submit"]:hover { 35 | /// background-color: #0f0; 36 | /// } 37 | /// 38 | /// button:active, 39 | /// input[type="button"]:active, 40 | /// input[type="reset"]:active, 41 | /// input[type="submit"]:active { 42 | /// background-color: #00f; 43 | /// } 44 | /// 45 | /// @require assign-inputs 46 | /// 47 | /// @type List 48 | /// 49 | /// @todo Remove double assigned variables (Lines 59–62) in v5.0.0 50 | 51 | $buttons-list: 'button', 52 | 'input[type="button"]', 53 | 'input[type="reset"]', 54 | 'input[type="submit"]'; 55 | 56 | $all-buttons: assign-inputs($buttons-list); 57 | $all-buttons-active: assign-inputs($buttons-list, active); 58 | $all-buttons-focus: assign-inputs($buttons-list, focus); 59 | $all-buttons-hover: assign-inputs($buttons-list, hover); 60 | 61 | $all-button-inputs: $all-buttons; 62 | $all-button-inputs-active: $all-buttons-active; 63 | $all-button-inputs-focus: $all-buttons-focus; 64 | $all-button-inputs-hover: $all-buttons-hover; 65 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides an easy way to include a clearfix for containing floats. 4 | /// 5 | /// @link http://cssmojo.com/latest_new_clearfix_so_far/ 6 | /// 7 | /// @example scss - Usage 8 | /// .element { 9 | /// @include clearfix; 10 | /// } 11 | /// 12 | /// @example css - CSS Output 13 | /// .element::after { 14 | /// clear: both; 15 | /// content: ""; 16 | /// display: table; 17 | /// } 18 | 19 | @mixin clearfix { 20 | &::after { 21 | clear: both; 22 | content: ""; 23 | display: table; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_ellipsis.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Truncates text and adds an ellipsis to represent overflow. 4 | /// 5 | /// @param {Number} $width [100%] 6 | /// Max-width for the string to respect before being truncated 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include ellipsis; 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// display: inline-block; 16 | /// max-width: 100%; 17 | /// overflow: hidden; 18 | /// text-overflow: ellipsis; 19 | /// white-space: nowrap; 20 | /// word-wrap: normal; 21 | /// } 22 | 23 | @mixin ellipsis($width: 100%) { 24 | display: inline-block; 25 | max-width: $width; 26 | overflow: hidden; 27 | text-overflow: ellipsis; 28 | white-space: nowrap; 29 | word-wrap: normal; 30 | } 31 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_font-stacks.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Georgia font stack. 4 | /// 5 | /// @type List 6 | 7 | $georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif; 8 | 9 | /// Helvetica font stack. 10 | /// 11 | /// @type List 12 | 13 | $helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; 14 | 15 | /// Lucida Grande font stack. 16 | /// 17 | /// @type List 18 | 19 | $lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif; 20 | 21 | /// Monospace font stack. 22 | /// 23 | /// @type List 24 | 25 | $monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace; 26 | 27 | /// Verdana font stack. 28 | /// 29 | /// @type List 30 | 31 | $verdana: "Verdana", "Geneva", sans-serif; 32 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_hide-text.scss: -------------------------------------------------------------------------------- 1 | /// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied. 2 | /// 3 | /// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement 4 | /// 5 | /// @example scss - Usage 6 | /// .element { 7 | /// @include hide-text; 8 | /// } 9 | /// 10 | /// @example css - CSS Output 11 | /// .element { 12 | /// overflow: hidden; 13 | /// text-indent: 101%; 14 | /// white-space: nowrap; 15 | /// } 16 | /// 17 | /// @todo Remove height argument in v5.0.0 18 | 19 | @mixin hide-text($height: null) { 20 | overflow: hidden; 21 | text-indent: 101%; 22 | white-space: nowrap; 23 | 24 | @if $height { 25 | @warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0"; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_margin.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include margin(null 10px 3em 20vh); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// margin-bottom: 3em; 16 | /// margin-left: 20vh; 17 | /// margin-right: 10px; 18 | /// } 19 | /// 20 | /// @require {mixin} directional-property 21 | /// 22 | /// @output `margin` 23 | 24 | @mixin margin($vals...) { 25 | @include directional-property(margin, false, $vals...); 26 | } 27 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_padding.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Arglist} $vals 6 | /// List of arguments 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include padding(12vh null 10px 5%); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// padding-bottom: 10px; 16 | /// padding-left: 5%; 17 | /// padding-top: 12vh; 18 | /// } 19 | /// 20 | /// @require {mixin} directional-property 21 | /// 22 | /// @output `padding` 23 | 24 | @mixin padding($vals...) { 25 | @include directional-property(padding, false, $vals...); 26 | } 27 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_position.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side. 4 | /// 5 | /// @param {Position} $position [relative] 6 | /// A CSS position value 7 | /// 8 | /// @param {Arglist} $coordinates [null null null null] 9 | /// List of values that correspond to the 4-value syntax for the edges of a box 10 | /// 11 | /// @example scss - Usage 12 | /// .element { 13 | /// @include position(absolute, 0 null null 10em); 14 | /// } 15 | /// 16 | /// @example css - CSS Output 17 | /// .element { 18 | /// left: 10em; 19 | /// position: absolute; 20 | /// top: 0; 21 | /// } 22 | /// 23 | /// @require {function} is-length 24 | /// @require {function} unpack 25 | 26 | @mixin position($position: relative, $coordinates: null null null null) { 27 | @if type-of($position) == list { 28 | $coordinates: $position; 29 | $position: relative; 30 | } 31 | 32 | $coordinates: unpack($coordinates); 33 | 34 | $offsets: ( 35 | top: nth($coordinates, 1), 36 | right: nth($coordinates, 2), 37 | bottom: nth($coordinates, 3), 38 | left: nth($coordinates, 4) 39 | ); 40 | 41 | position: $position; 42 | 43 | @each $offset, $value in $offsets { 44 | @if is-length($value) { 45 | #{$offset}: $value; 46 | } 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_prefixer.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// A mixin for generating vendor prefixes on non-standardized properties. 4 | /// 5 | /// @param {String} $property 6 | /// Property to prefix 7 | /// 8 | /// @param {*} $value 9 | /// Value to use 10 | /// 11 | /// @param {List} $prefixes 12 | /// Prefixes to define 13 | /// 14 | /// @example scss - Usage 15 | /// .element { 16 | /// @include prefixer(border-radius, 10px, webkit ms spec); 17 | /// } 18 | /// 19 | /// @example css - CSS Output 20 | /// .element { 21 | /// -webkit-border-radius: 10px; 22 | /// -moz-border-radius: 10px; 23 | /// border-radius: 10px; 24 | /// } 25 | /// 26 | /// @require {variable} $prefix-for-webkit 27 | /// @require {variable} $prefix-for-mozilla 28 | /// @require {variable} $prefix-for-microsoft 29 | /// @require {variable} $prefix-for-opera 30 | /// @require {variable} $prefix-for-spec 31 | 32 | @mixin prefixer($property, $value, $prefixes) { 33 | @each $prefix in $prefixes { 34 | @if $prefix == webkit { 35 | @if $prefix-for-webkit { 36 | -webkit-#{$property}: $value; 37 | } 38 | } @else if $prefix == moz { 39 | @if $prefix-for-mozilla { 40 | -moz-#{$property}: $value; 41 | } 42 | } @else if $prefix == ms { 43 | @if $prefix-for-microsoft { 44 | -ms-#{$property}: $value; 45 | } 46 | } @else if $prefix == o { 47 | @if $prefix-for-opera { 48 | -o-#{$property}: $value; 49 | } 50 | } @else if $prefix == spec { 51 | @if $prefix-for-spec { 52 | #{$property}: $value; 53 | } 54 | } @else { 55 | @warn "Unrecognized prefix: #{$prefix}"; 56 | } 57 | } 58 | } 59 | 60 | @mixin disable-prefix-for-all() { 61 | $prefix-for-webkit: false !global; 62 | $prefix-for-mozilla: false !global; 63 | $prefix-for-microsoft: false !global; 64 | $prefix-for-opera: false !global; 65 | $prefix-for-spec: false !global; 66 | } 67 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_retina-image.scss: -------------------------------------------------------------------------------- 1 | @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) { 2 | @if $asset-pipeline { 3 | background-image: image-url("#{$filename}.#{$extension}"); 4 | } @else { 5 | background-image: url("#{$filename}.#{$extension}"); 6 | } 7 | 8 | @include hidpi { 9 | @if $asset-pipeline { 10 | @if $retina-filename { 11 | background-image: image-url("#{$retina-filename}.#{$extension}"); 12 | } @else { 13 | background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}"); 14 | } 15 | } @else { 16 | @if $retina-filename { 17 | background-image: url("#{$retina-filename}.#{$extension}"); 18 | } @else { 19 | background-image: url("#{$filename}#{$retina-suffix}.#{$extension}"); 20 | } 21 | } 22 | 23 | background-size: $background-size; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_size.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Sets the `width` and `height` of the element. 4 | /// 5 | /// @param {List} $size 6 | /// A list of at most 2 size values. 7 | /// 8 | /// If there is only a single value in `$size` it is used for both width and height. All units are supported. 9 | /// 10 | /// @example scss - Usage 11 | /// .first-element { 12 | /// @include size(2em); 13 | /// } 14 | /// 15 | /// .second-element { 16 | /// @include size(auto 10em); 17 | /// } 18 | /// 19 | /// @example css - CSS Output 20 | /// .first-element { 21 | /// width: 2em; 22 | /// height: 2em; 23 | /// } 24 | /// 25 | /// .second-element { 26 | /// width: auto; 27 | /// height: 10em; 28 | /// } 29 | /// 30 | /// @todo Refactor in 5.0.0 to use a comma-separated argument 31 | 32 | @mixin size($value) { 33 | $width: nth($value, 1); 34 | $height: $width; 35 | 36 | @if length($value) > 1 { 37 | $height: nth($value, 2); 38 | } 39 | 40 | @if is-size($height) { 41 | height: $height; 42 | } @else { 43 | @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin."; 44 | } 45 | 46 | @if is-size($width) { 47 | width: $width; 48 | } @else { 49 | @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin."; 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_text-inputs.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`. 4 | /// 5 | /// @example scss - Usage 6 | /// #{$all-text-inputs} { 7 | /// border: 1px solid #f00; 8 | /// } 9 | /// 10 | /// #{$all-text-inputs-focus}, 11 | /// #{$all-text-inputs-hover} { 12 | /// border: 1px solid #0f0; 13 | /// } 14 | /// 15 | /// #{$all-text-inputs-active} { 16 | /// border: 1px solid #00f; 17 | /// } 18 | /// 19 | /// @example css - CSS Output 20 | /// input[type="color"], 21 | /// input[type="date"], 22 | /// input[type="datetime"], 23 | /// input[type="datetime-local"], 24 | /// input[type="email"], 25 | /// input[type="month"], 26 | /// input[type="number"], 27 | /// input[type="password"], 28 | /// input[type="search"], 29 | /// input[type="tel"], 30 | /// input[type="text"], 31 | /// input[type="time"], 32 | /// input[type="url"], 33 | /// input[type="week"], 34 | /// textarea { 35 | /// border: 1px solid #f00; 36 | /// } 37 | /// 38 | /// input[type="color"]:focus, 39 | /// input[type="date"]:focus, 40 | /// input[type="datetime"]:focus, 41 | /// input[type="datetime-local"]:focus, 42 | /// input[type="email"]:focus, 43 | /// input[type="month"]:focus, 44 | /// input[type="number"]:focus, 45 | /// input[type="password"]:focus, 46 | /// input[type="search"]:focus, 47 | /// input[type="tel"]:focus, 48 | /// input[type="text"]:focus, 49 | /// input[type="time"]:focus, 50 | /// input[type="url"]:focus, 51 | /// input[type="week"]:focus, 52 | /// textarea:focus, 53 | /// input[type="color"]:hover, 54 | /// input[type="date"]:hover, 55 | /// input[type="datetime"]:hover, 56 | /// input[type="datetime-local"]:hover, 57 | /// input[type="email"]:hover, 58 | /// input[type="month"]:hover, 59 | /// input[type="number"]:hover, 60 | /// input[type="password"]:hover, 61 | /// input[type="search"]:hover, 62 | /// input[type="tel"]:hover, 63 | /// input[type="text"]:hover, 64 | /// input[type="time"]:hover, 65 | /// input[type="url"]:hover, 66 | /// input[type="week"]:hover, 67 | /// textarea:hover { 68 | /// border: 1px solid #0f0; 69 | /// } 70 | /// 71 | /// input[type="color"]:active, 72 | /// input[type="date"]:active, 73 | /// input[type="datetime"]:active, 74 | /// input[type="datetime-local"]:active, 75 | /// input[type="email"]:active, 76 | /// input[type="month"]:active, 77 | /// input[type="number"]:active, 78 | /// input[type="password"]:active, 79 | /// input[type="search"]:active, 80 | /// input[type="tel"]:active, 81 | /// input[type="text"]:active, 82 | /// input[type="time"]:active, 83 | /// input[type="url"]:active, 84 | /// input[type="week"]:active, 85 | /// textarea:active { 86 | /// border: 1px solid #00f; 87 | /// } 88 | /// 89 | /// @require assign-inputs 90 | /// 91 | /// @type List 92 | 93 | $text-inputs-list: 'input[type="color"]', 94 | 'input[type="date"]', 95 | 'input[type="datetime"]', 96 | 'input[type="datetime-local"]', 97 | 'input[type="email"]', 98 | 'input[type="month"]', 99 | 'input[type="number"]', 100 | 'input[type="password"]', 101 | 'input[type="search"]', 102 | 'input[type="tel"]', 103 | 'input[type="text"]', 104 | 'input[type="time"]', 105 | 'input[type="url"]', 106 | 'input[type="week"]', 107 | 'input:not([type])', 108 | 'textarea'; 109 | 110 | $all-text-inputs: assign-inputs($text-inputs-list); 111 | $all-text-inputs-active: assign-inputs($text-inputs-list, active); 112 | $all-text-inputs-focus: assign-inputs($text-inputs-list, focus); 113 | $all-text-inputs-hover: assign-inputs($text-inputs-list, hover); 114 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_timing-functions.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie) 4 | /// 5 | /// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html 6 | /// 7 | /// @type cubic-bezier 8 | 9 | $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530); 10 | $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190); 11 | $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220); 12 | $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060); 13 | $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715); 14 | $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035); 15 | $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335); 16 | $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045); 17 | 18 | $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940); 19 | $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000); 20 | $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000); 21 | $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000); 22 | $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000); 23 | $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000); 24 | $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000); 25 | $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275); 26 | 27 | $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955); 28 | $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000); 29 | $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000); 30 | $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000); 31 | $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950); 32 | $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000); 33 | $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860); 34 | $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550); 35 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_triangle.scss: -------------------------------------------------------------------------------- 1 | @mixin triangle($size, $color, $direction) { 2 | $width: nth($size, 1); 3 | $height: nth($size, length($size)); 4 | $foreground-color: nth($color, 1); 5 | $background-color: if(length($color) == 2, nth($color, 2), transparent); 6 | height: 0; 7 | width: 0; 8 | 9 | @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) { 10 | $width: $width / 2; 11 | $height: if(length($size) > 1, $height, $height/2); 12 | 13 | @if $direction == up { 14 | border-bottom: $height solid $foreground-color; 15 | border-left: $width solid $background-color; 16 | border-right: $width solid $background-color; 17 | } @else if $direction == right { 18 | border-bottom: $width solid $background-color; 19 | border-left: $height solid $foreground-color; 20 | border-top: $width solid $background-color; 21 | } @else if $direction == down { 22 | border-left: $width solid $background-color; 23 | border-right: $width solid $background-color; 24 | border-top: $height solid $foreground-color; 25 | } @else if $direction == left { 26 | border-bottom: $width solid $background-color; 27 | border-right: $height solid $foreground-color; 28 | border-top: $width solid $background-color; 29 | } 30 | } @else if ($direction == up-right) or ($direction == up-left) { 31 | border-top: $height solid $foreground-color; 32 | 33 | @if $direction == up-right { 34 | border-left: $width solid $background-color; 35 | } @else if $direction == up-left { 36 | border-right: $width solid $background-color; 37 | } 38 | } @else if ($direction == down-right) or ($direction == down-left) { 39 | border-bottom: $height solid $foreground-color; 40 | 41 | @if $direction == down-right { 42 | border-left: $width solid $background-color; 43 | } @else if $direction == down-left { 44 | border-right: $width solid $background-color; 45 | } 46 | } @else if ($direction == inset-up) { 47 | border-color: $background-color $background-color $foreground-color; 48 | border-style: solid; 49 | border-width: $height $width; 50 | } @else if ($direction == inset-down) { 51 | border-color: $foreground-color $background-color $background-color; 52 | border-style: solid; 53 | border-width: $height $width; 54 | } @else if ($direction == inset-right) { 55 | border-color: $background-color $background-color $background-color $foreground-color; 56 | border-style: solid; 57 | border-width: $width $height; 58 | } @else if ($direction == inset-left) { 59 | border-color: $background-color $foreground-color $background-color $background-color; 60 | border-style: solid; 61 | border-width: $width $height; 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/addons/_word-wrap.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides an easy way to change the `word-wrap` property. 4 | /// 5 | /// @param {String} $wrap [break-word] 6 | /// Value for the `word-break` property. 7 | /// 8 | /// @example scss - Usage 9 | /// .wrapper { 10 | /// @include word-wrap(break-word); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .wrapper { 15 | /// overflow-wrap: break-word; 16 | /// word-break: break-all; 17 | /// word-wrap: break-word; 18 | /// } 19 | 20 | @mixin word-wrap($wrap: break-word) { 21 | overflow-wrap: $wrap; 22 | word-wrap: $wrap; 23 | 24 | @if $wrap == break-word { 25 | word-break: break-all; 26 | } @else { 27 | word-break: $wrap; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_animation.scss: -------------------------------------------------------------------------------- 1 | // http://www.w3.org/TR/css3-animations/#the-animation-name-property- 2 | // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties. 3 | 4 | @mixin animation($animations...) { 5 | @include prefixer(animation, $animations, webkit moz spec); 6 | } 7 | 8 | @mixin animation-name($names...) { 9 | @include prefixer(animation-name, $names, webkit moz spec); 10 | } 11 | 12 | @mixin animation-duration($times...) { 13 | @include prefixer(animation-duration, $times, webkit moz spec); 14 | } 15 | 16 | @mixin animation-timing-function($motions...) { 17 | // ease | linear | ease-in | ease-out | ease-in-out 18 | @include prefixer(animation-timing-function, $motions, webkit moz spec); 19 | } 20 | 21 | @mixin animation-iteration-count($values...) { 22 | // infinite | 23 | @include prefixer(animation-iteration-count, $values, webkit moz spec); 24 | } 25 | 26 | @mixin animation-direction($directions...) { 27 | // normal | alternate 28 | @include prefixer(animation-direction, $directions, webkit moz spec); 29 | } 30 | 31 | @mixin animation-play-state($states...) { 32 | // running | paused 33 | @include prefixer(animation-play-state, $states, webkit moz spec); 34 | } 35 | 36 | @mixin animation-delay($times...) { 37 | @include prefixer(animation-delay, $times, webkit moz spec); 38 | } 39 | 40 | @mixin animation-fill-mode($modes...) { 41 | // none | forwards | backwards | both 42 | @include prefixer(animation-fill-mode, $modes, webkit moz spec); 43 | } 44 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_appearance.scss: -------------------------------------------------------------------------------- 1 | @mixin appearance($value) { 2 | @include prefixer(appearance, $value, webkit moz ms o spec); 3 | } 4 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_backface-visibility.scss: -------------------------------------------------------------------------------- 1 | @mixin backface-visibility($visibility) { 2 | @include prefixer(backface-visibility, $visibility, webkit spec); 3 | } 4 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_background-image.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background-image property for adding multiple background images with 3 | // gradients, or for stringing multiple gradients together. 4 | //************************************************************************// 5 | 6 | @mixin background-image($images...) { 7 | $webkit-images: (); 8 | $spec-images: (); 9 | 10 | @each $image in $images { 11 | $webkit-image: (); 12 | $spec-image: (); 13 | 14 | @if (type-of($image) == string) { 15 | $url-str: str-slice($image, 1, 3); 16 | $gradient-type: str-slice($image, 1, 6); 17 | 18 | @if $url-str == "url" { 19 | $webkit-image: $image; 20 | $spec-image: $image; 21 | } 22 | 23 | @else if $gradient-type == "linear" { 24 | $gradients: _linear-gradient-parser($image); 25 | $webkit-image: map-get($gradients, webkit-image); 26 | $spec-image: map-get($gradients, spec-image); 27 | } 28 | 29 | @else if $gradient-type == "radial" { 30 | $gradients: _radial-gradient-parser($image); 31 | $webkit-image: map-get($gradients, webkit-image); 32 | $spec-image: map-get($gradients, spec-image); 33 | } 34 | } 35 | 36 | $webkit-images: append($webkit-images, $webkit-image, comma); 37 | $spec-images: append($spec-images, $spec-image, comma); 38 | } 39 | 40 | background-image: $webkit-images; 41 | background-image: $spec-images; 42 | } 43 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_background.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Background property for adding multiple backgrounds using shorthand 3 | // notation. 4 | //************************************************************************// 5 | 6 | @mixin background($backgrounds...) { 7 | $webkit-backgrounds: (); 8 | $spec-backgrounds: (); 9 | 10 | @each $background in $backgrounds { 11 | $webkit-background: (); 12 | $spec-background: (); 13 | $background-type: type-of($background); 14 | 15 | @if $background-type == string or $background-type == list { 16 | $background-str: if($background-type == list, nth($background, 1), $background); 17 | 18 | $url-str: str-slice($background-str, 1, 3); 19 | $gradient-type: str-slice($background-str, 1, 6); 20 | 21 | @if $url-str == "url" { 22 | $webkit-background: $background; 23 | $spec-background: $background; 24 | } 25 | 26 | @else if $gradient-type == "linear" { 27 | $gradients: _linear-gradient-parser("#{$background}"); 28 | $webkit-background: map-get($gradients, webkit-image); 29 | $spec-background: map-get($gradients, spec-image); 30 | } 31 | 32 | @else if $gradient-type == "radial" { 33 | $gradients: _radial-gradient-parser("#{$background}"); 34 | $webkit-background: map-get($gradients, webkit-image); 35 | $spec-background: map-get($gradients, spec-image); 36 | } 37 | 38 | @else { 39 | $webkit-background: $background; 40 | $spec-background: $background; 41 | } 42 | } 43 | 44 | @else { 45 | $webkit-background: $background; 46 | $spec-background: $background; 47 | } 48 | 49 | $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma); 50 | $spec-backgrounds: append($spec-backgrounds, $spec-background, comma); 51 | } 52 | 53 | background: $webkit-backgrounds; 54 | background: $spec-backgrounds; 55 | } 56 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_border-image.scss: -------------------------------------------------------------------------------- 1 | @mixin border-image($borders...) { 2 | $webkit-borders: (); 3 | $spec-borders: (); 4 | 5 | @each $border in $borders { 6 | $webkit-border: (); 7 | $spec-border: (); 8 | $border-type: type-of($border); 9 | 10 | @if $border-type == string or list { 11 | $border-str: if($border-type == list, nth($border, 1), $border); 12 | 13 | $url-str: str-slice($border-str, 1, 3); 14 | $gradient-type: str-slice($border-str, 1, 6); 15 | 16 | @if $url-str == "url" { 17 | $webkit-border: $border; 18 | $spec-border: $border; 19 | } 20 | 21 | @else if $gradient-type == "linear" { 22 | $gradients: _linear-gradient-parser("#{$border}"); 23 | $webkit-border: map-get($gradients, webkit-image); 24 | $spec-border: map-get($gradients, spec-image); 25 | } 26 | 27 | @else if $gradient-type == "radial" { 28 | $gradients: _radial-gradient-parser("#{$border}"); 29 | $webkit-border: map-get($gradients, webkit-image); 30 | $spec-border: map-get($gradients, spec-image); 31 | } 32 | 33 | @else { 34 | $webkit-border: $border; 35 | $spec-border: $border; 36 | } 37 | } 38 | 39 | @else { 40 | $webkit-border: $border; 41 | $spec-border: $border; 42 | } 43 | 44 | $webkit-borders: append($webkit-borders, $webkit-border, comma); 45 | $spec-borders: append($spec-borders, $spec-border, comma); 46 | } 47 | 48 | -webkit-border-image: $webkit-borders; 49 | border-image: $spec-borders; 50 | border-style: solid; 51 | } 52 | 53 | //Examples: 54 | // @include border-image(url("image.png")); 55 | // @include border-image(url("image.png") 20 stretch); 56 | // @include border-image(linear-gradient(45deg, orange, yellow)); 57 | // @include border-image(linear-gradient(45deg, orange, yellow) stretch); 58 | // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round); 59 | // @include border-image(radial-gradient(top, cover, orange, yellow, orange)); 60 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_calc.scss: -------------------------------------------------------------------------------- 1 | @mixin calc($property, $value) { 2 | #{$property}: -webkit-calc(#{$value}); 3 | #{$property}: calc(#{$value}); 4 | } 5 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_columns.scss: -------------------------------------------------------------------------------- 1 | @mixin columns($arg: auto) { 2 | // || 3 | @include prefixer(columns, $arg, webkit moz spec); 4 | } 5 | 6 | @mixin column-count($int: auto) { 7 | // auto || integer 8 | @include prefixer(column-count, $int, webkit moz spec); 9 | } 10 | 11 | @mixin column-gap($length: normal) { 12 | // normal || length 13 | @include prefixer(column-gap, $length, webkit moz spec); 14 | } 15 | 16 | @mixin column-fill($arg: auto) { 17 | // auto || length 18 | @include prefixer(column-fill, $arg, webkit moz spec); 19 | } 20 | 21 | @mixin column-rule($arg) { 22 | // || || 23 | @include prefixer(column-rule, $arg, webkit moz spec); 24 | } 25 | 26 | @mixin column-rule-color($color) { 27 | @include prefixer(column-rule-color, $color, webkit moz spec); 28 | } 29 | 30 | @mixin column-rule-style($style: none) { 31 | // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid 32 | @include prefixer(column-rule-style, $style, webkit moz spec); 33 | } 34 | 35 | @mixin column-rule-width ($width: none) { 36 | @include prefixer(column-rule-width, $width, webkit moz spec); 37 | } 38 | 39 | @mixin column-span($arg: none) { 40 | // none || all 41 | @include prefixer(column-span, $arg, webkit moz spec); 42 | } 43 | 44 | @mixin column-width($length: auto) { 45 | // auto || length 46 | @include prefixer(column-width, $length, webkit moz spec); 47 | } 48 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_filter.scss: -------------------------------------------------------------------------------- 1 | @mixin filter($function: none) { 2 | // [ 3 | @include prefixer(perspective, $depth, webkit moz spec); 4 | } 5 | 6 | @mixin perspective-origin($value: 50% 50%) { 7 | @include prefixer(perspective-origin, $value, webkit moz spec); 8 | } 9 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_placeholder.scss: -------------------------------------------------------------------------------- 1 | @mixin placeholder { 2 | $placeholders: ":-webkit-input" ":-moz" "-moz" "-ms-input"; 3 | @each $placeholder in $placeholders { 4 | &:#{$placeholder}-placeholder { 5 | @content; 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_radial-gradient.scss: -------------------------------------------------------------------------------- 1 | // Requires Sass 3.1+ 2 | @mixin radial-gradient($g1, $g2, 3 | $g3: null, $g4: null, 4 | $g5: null, $g6: null, 5 | $g7: null, $g8: null, 6 | $g9: null, $g10: null, 7 | $pos: null, 8 | $shape-size: null, 9 | $fallback: null) { 10 | 11 | $data: _radial-arg-parser($g1, $g2, $pos, $shape-size); 12 | $g1: nth($data, 1); 13 | $g2: nth($data, 2); 14 | $pos: nth($data, 3); 15 | $shape-size: nth($data, 4); 16 | 17 | $full: $g1, $g2, $g3, $g4, $g5, $g6, $g7, $g8, $g9, $g10; 18 | 19 | // Strip deprecated cover/contain for spec 20 | $shape-size-spec: _shape-size-stripper($shape-size); 21 | 22 | // Set $g1 as the default fallback color 23 | $first-color: nth($full, 1); 24 | $fallback-color: nth($first-color, 1); 25 | 26 | @if (type-of($fallback) == color) or ($fallback == "transparent") { 27 | $fallback-color: $fallback; 28 | } 29 | 30 | // Add Commas and spaces 31 | $shape-size: if($shape-size, "#{$shape-size}, ", null); 32 | $pos: if($pos, "#{$pos}, ", null); 33 | $pos-spec: if($pos, "at #{$pos}", null); 34 | $shape-size-spec: if(($shape-size-spec != " ") and ($pos == null), "#{$shape-size-spec}, ", "#{$shape-size-spec} "); 35 | 36 | background-color: $fallback-color; 37 | background-image: -webkit-radial-gradient(#{$pos}#{$shape-size}#{$full}); 38 | background-image: radial-gradient(#{$shape-size-spec}#{$pos-spec}#{$full}); 39 | } 40 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_selection.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Outputs the spec and prefixed versions of the `::selection` pseudo-element. 4 | /// 5 | /// @param {Bool} $current-selector [false] 6 | /// If set to `true`, it takes the current element into consideration. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include selection(true) { 11 | /// background-color: #ffbb52; 12 | /// } 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .element::-moz-selection { 17 | /// background-color: #ffbb52; 18 | /// } 19 | /// 20 | /// .element::selection { 21 | /// background-color: #ffbb52; 22 | /// } 23 | 24 | @mixin selection($current-selector: false) { 25 | @if $current-selector { 26 | &::-moz-selection { 27 | @content; 28 | } 29 | 30 | &::selection { 31 | @content; 32 | } 33 | } @else { 34 | ::-moz-selection { 35 | @content; 36 | } 37 | 38 | ::selection { 39 | @content; 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_text-decoration.scss: -------------------------------------------------------------------------------- 1 | @mixin text-decoration($value) { 2 | // || || 3 | @include prefixer(text-decoration, $value, moz); 4 | } 5 | 6 | @mixin text-decoration-line($line: none) { 7 | // none || underline || overline || line-through 8 | @include prefixer(text-decoration-line, $line, moz); 9 | } 10 | 11 | @mixin text-decoration-style($style: solid) { 12 | // solid || double || dotted || dashed || wavy 13 | @include prefixer(text-decoration-style, $style, moz webkit); 14 | } 15 | 16 | @mixin text-decoration-color($color: currentColor) { 17 | // currentColor || 18 | @include prefixer(text-decoration-color, $color, moz); 19 | } 20 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_transform.scss: -------------------------------------------------------------------------------- 1 | @mixin transform($property: none) { 2 | // none | 3 | @include prefixer(transform, $property, webkit moz ms o spec); 4 | } 5 | 6 | @mixin transform-origin($axes: 50%) { 7 | // x-axis - left | center | right | length | % 8 | // y-axis - top | center | bottom | length | % 9 | // z-axis - length 10 | @include prefixer(transform-origin, $axes, webkit moz ms o spec); 11 | } 12 | 13 | @mixin transform-style($style: flat) { 14 | @include prefixer(transform-style, $style, webkit moz ms o spec); 15 | } 16 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_transition.scss: -------------------------------------------------------------------------------- 1 | // Shorthand mixin. Supports multiple parentheses-deliminated values for each variable. 2 | // Example: @include transition (all 2s ease-in-out); 3 | // @include transition (opacity 1s ease-in 2s, width 2s ease-out); 4 | // @include transition-property (transform, opacity); 5 | 6 | @mixin transition($properties...) { 7 | // Fix for vendor-prefix transform property 8 | $needs-prefixes: false; 9 | $webkit: (); 10 | $moz: (); 11 | $spec: (); 12 | 13 | // Create lists for vendor-prefixed transform 14 | @each $list in $properties { 15 | @if nth($list, 1) == "transform" { 16 | $needs-prefixes: true; 17 | $list1: -webkit-transform; 18 | $list2: -moz-transform; 19 | $list3: (); 20 | 21 | @each $var in $list { 22 | $list3: join($list3, $var); 23 | 24 | @if $var != "transform" { 25 | $list1: join($list1, $var); 26 | $list2: join($list2, $var); 27 | } 28 | } 29 | 30 | $webkit: append($webkit, $list1); 31 | $moz: append($moz, $list2); 32 | $spec: append($spec, $list3); 33 | } @else { 34 | $webkit: append($webkit, $list, comma); 35 | $moz: append($moz, $list, comma); 36 | $spec: append($spec, $list, comma); 37 | } 38 | } 39 | 40 | @if $needs-prefixes { 41 | -webkit-transition: $webkit; 42 | -moz-transition: $moz; 43 | transition: $spec; 44 | } @else { 45 | @if length($properties) >= 1 { 46 | @include prefixer(transition, $properties, webkit moz spec); 47 | } @else { 48 | $properties: all 0.15s ease-out 0s; 49 | @include prefixer(transition, $properties, webkit moz spec); 50 | } 51 | } 52 | } 53 | 54 | @mixin transition-property($properties...) { 55 | -webkit-transition-property: transition-property-names($properties, "webkit"); 56 | -moz-transition-property: transition-property-names($properties, "moz"); 57 | transition-property: transition-property-names($properties, false); 58 | } 59 | 60 | @mixin transition-duration($times...) { 61 | @include prefixer(transition-duration, $times, webkit moz spec); 62 | } 63 | 64 | @mixin transition-timing-function($motions...) { 65 | // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() 66 | @include prefixer(transition-timing-function, $motions, webkit moz spec); 67 | } 68 | 69 | @mixin transition-delay($times...) { 70 | @include prefixer(transition-delay, $times, webkit moz spec); 71 | } 72 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/css3/_user-select.scss: -------------------------------------------------------------------------------- 1 | @mixin user-select($value: none) { 2 | @include prefixer(user-select, $value, webkit moz ms spec); 3 | } 4 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_assign-inputs.scss: -------------------------------------------------------------------------------- 1 | @function assign-inputs($inputs, $pseudo: null) { 2 | $list: (); 3 | 4 | @each $input in $inputs { 5 | $input: unquote($input); 6 | $input: if($pseudo, $input + ":" + $pseudo, $input); 7 | $list: append($list, $input, comma); 8 | } 9 | 10 | @return $list; 11 | } 12 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_contains-falsy.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks if a list does not contains a value. 4 | /// 5 | /// @access private 6 | /// 7 | /// @param {List} $list 8 | /// The list to check against. 9 | /// 10 | /// @return {Bool} 11 | 12 | @function contains-falsy($list) { 13 | @each $item in $list { 14 | @if not $item { 15 | @return true; 16 | } 17 | } 18 | 19 | @return false; 20 | } 21 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_contains.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks if a list contains a value(s). 4 | /// 5 | /// @access private 6 | /// 7 | /// @param {List} $list 8 | /// The list to check against. 9 | /// 10 | /// @param {List} $values 11 | /// A single value or list of values to check for. 12 | /// 13 | /// @example scss - Usage 14 | /// contains($list, $value) 15 | /// 16 | /// @return {Bool} 17 | 18 | @function contains($list, $values...) { 19 | @each $value in $values { 20 | @if type-of(index($list, $value)) != "number" { 21 | @return false; 22 | } 23 | } 24 | 25 | @return true; 26 | } 27 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_is-length.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid CSS length. 4 | /// 5 | /// @param {String} $value 6 | 7 | @function is-length($value) { 8 | @return type-of($value) != "null" and (str-slice($value + "", 1, 4) == "calc" 9 | or index(auto inherit initial 0, $value) 10 | or (type-of($value) == "number" and not(unitless($value)))); 11 | } 12 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_is-light.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Programatically determines whether a color is light or dark. 4 | /// 5 | /// @link http://robots.thoughtbot.com/closer-look-color-lightness 6 | /// 7 | /// @param {Color (Hex)} $color 8 | /// 9 | /// @example scss - Usage 10 | /// is-light($color) 11 | /// 12 | /// @return {Bool} 13 | 14 | @function is-light($hex-color) { 15 | $-local-red: red(rgba($hex-color, 1)); 16 | $-local-green: green(rgba($hex-color, 1)); 17 | $-local-blue: blue(rgba($hex-color, 1)); 18 | $-local-lightness: ($-local-red * 0.2126 + $-local-green * 0.7152 + $-local-blue * 0.0722) / 255; 19 | 20 | @return $-local-lightness > 0.6; 21 | } 22 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_is-number.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid number. 4 | /// 5 | /// @param {Number} $value 6 | /// 7 | /// @require {function} contains 8 | 9 | @function is-number($value) { 10 | @return contains("0" "1" "2" "3" "4" "5" "6" "7" "8" "9" 0 1 2 3 4 5 6 7 8 9, $value); 11 | } 12 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_is-size.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Checks for a valid CSS size. 4 | /// 5 | /// @param {String} $value 6 | /// 7 | /// @require {function} contains 8 | /// @require {function} is-length 9 | 10 | @function is-size($value) { 11 | @return is-length($value) 12 | or contains("fill" "fit-content" "min-content" "max-content", $value); 13 | } 14 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_modular-scale.scss: -------------------------------------------------------------------------------- 1 | // Scaling Variables 2 | $golden: 1.618; 3 | $minor-second: 1.067; 4 | $major-second: 1.125; 5 | $minor-third: 1.2; 6 | $major-third: 1.25; 7 | $perfect-fourth: 1.333; 8 | $augmented-fourth: 1.414; 9 | $perfect-fifth: 1.5; 10 | $minor-sixth: 1.6; 11 | $major-sixth: 1.667; 12 | $minor-seventh: 1.778; 13 | $major-seventh: 1.875; 14 | $octave: 2; 15 | $major-tenth: 2.5; 16 | $major-eleventh: 2.667; 17 | $major-twelfth: 3; 18 | $double-octave: 4; 19 | 20 | $modular-scale-ratio: $perfect-fourth !default; 21 | $modular-scale-base: em($em-base) !default; 22 | 23 | @function modular-scale($increment, $value: $modular-scale-base, $ratio: $modular-scale-ratio) { 24 | $v1: nth($value, 1); 25 | $v2: nth($value, length($value)); 26 | $value: $v1; 27 | 28 | // scale $v2 to just above $v1 29 | @while $v2 > $v1 { 30 | $v2: ($v2 / $ratio); // will be off-by-1 31 | } 32 | @while $v2 < $v1 { 33 | $v2: ($v2 * $ratio); // will fix off-by-1 34 | } 35 | 36 | // check AFTER scaling $v2 to prevent double-counting corner-case 37 | $double-stranded: $v2 > $v1; 38 | 39 | @if $increment > 0 { 40 | @for $i from 1 through $increment { 41 | @if $double-stranded and ($v1 * $ratio) > $v2 { 42 | $value: $v2; 43 | $v2: ($v2 * $ratio); 44 | } @else { 45 | $v1: ($v1 * $ratio); 46 | $value: $v1; 47 | } 48 | } 49 | } 50 | 51 | @if $increment < 0 { 52 | // adjust $v2 to just below $v1 53 | @if $double-stranded { 54 | $v2: ($v2 / $ratio); 55 | } 56 | 57 | @for $i from $increment through -1 { 58 | @if $double-stranded and ($v1 / $ratio) < $v2 { 59 | $value: $v2; 60 | $v2: ($v2 / $ratio); 61 | } @else { 62 | $v1: ($v1 / $ratio); 63 | $value: $v1; 64 | } 65 | } 66 | } 67 | 68 | @return $value; 69 | } 70 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_new-breakpoint.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Returns a media context (media query / grid context) that can be stored in a variable and passed to `media()` as a single-keyword argument. Media contexts defined using `new-breakpoint` are used by the visual grid, as long as they are defined before importing Neat. 4 | /// 5 | /// @param {List} $query 6 | /// A list of media query features and values. Each `$feature` should have a corresponding `$value`. 7 | /// 8 | /// If there is only a single `$value` in `$query`, `$default-feature` is going to be used. 9 | /// 10 | /// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1). 11 | /// 12 | /// @param {Number (unitless)} $total-columns [$grid-columns] 13 | /// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter. 14 | /// 15 | /// @example scss - Usage 16 | /// $mobile: new-breakpoint(max-width 480px 4); 17 | /// 18 | /// .element { 19 | /// @include media($mobile) { 20 | /// @include span-columns(4); 21 | /// } 22 | /// } 23 | /// 24 | /// @example css - CSS Output 25 | /// @media screen and (max-width: 480px) { 26 | /// .element { 27 | /// display: block; 28 | /// float: left; 29 | /// margin-right: 7.42297%; 30 | /// width: 100%; 31 | /// } 32 | /// .element:last-child { 33 | /// margin-right: 0; 34 | /// } 35 | /// } 36 | 37 | @function new-breakpoint($query: $feature $value $columns, $total-columns: $grid-columns) { 38 | @if length($query) == 1 { 39 | $query: $default-feature nth($query, 1) $total-columns; 40 | } @else if is-even(length($query)) { 41 | $query: append($query, $total-columns); 42 | } 43 | 44 | @if is-not(belongs-to($query, $visual-grid-breakpoints)) { 45 | $visual-grid-breakpoints: append($visual-grid-breakpoints, $query, comma) !global; 46 | } 47 | 48 | @return $query; 49 | } 50 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_private.scss: -------------------------------------------------------------------------------- 1 | // Not function for Libsass compatibility 2 | // https://github.com/sass/libsass/issues/368 3 | @function is-not($value) { 4 | @return if($value, false, true); 5 | } 6 | 7 | // Checks if a number is even 8 | @function is-even($int) { 9 | @return $int % 2 == 0; 10 | } 11 | 12 | // Checks if an element belongs to a list or not 13 | @function belongs-to($tested-item, $list) { 14 | @return is-not(not-belongs-to($tested-item, $list)); 15 | } 16 | 17 | @function not-belongs-to($tested-item, $list) { 18 | @return is-not(index($list, $tested-item)); 19 | } 20 | 21 | // Contains display value 22 | @function contains-display-value($query) { 23 | @return belongs-to(table, $query) 24 | or belongs-to(block, $query) 25 | or belongs-to(inline-block, $query) 26 | or belongs-to(inline, $query); 27 | } 28 | 29 | // Parses the first argument of span-columns() 30 | @function container-span($span: $span) { 31 | @if length($span) == 3 { 32 | $container-columns: nth($span, 3); 33 | @return $container-columns; 34 | } @else if length($span) == 2 { 35 | $container-columns: nth($span, 2); 36 | @return $container-columns; 37 | } 38 | 39 | @return $grid-columns; 40 | } 41 | 42 | @function container-shift($shift: $shift) { 43 | $parent-columns: $grid-columns !default !global; 44 | 45 | @if length($shift) == 3 { 46 | $container-columns: nth($shift, 3); 47 | @return $container-columns; 48 | } @else if length($shift) == 2 { 49 | $container-columns: nth($shift, 2); 50 | @return $container-columns; 51 | } 52 | 53 | @return $parent-columns; 54 | } 55 | 56 | // Generates a striped background 57 | @function gradient-stops($grid-columns, $color: $visual-grid-color) { 58 | $transparent: transparent; 59 | 60 | $column-width: flex-grid(1, $grid-columns); 61 | $gutter-width: flex-gutter($grid-columns); 62 | $column-offset: $column-width; 63 | 64 | $values: ($transparent 0, $color 0); 65 | 66 | @for $i from 1 to $grid-columns*2 { 67 | @if is-even($i) { 68 | $values: append($values, $transparent $column-offset, comma); 69 | $values: append($values, $color $column-offset, comma); 70 | $column-offset: $column-offset + $column-width; 71 | } @else { 72 | $values: append($values, $color $column-offset, comma); 73 | $values: append($values, $transparent $column-offset, comma); 74 | $column-offset: $column-offset + $gutter-width; 75 | } 76 | } 77 | 78 | @return $values; 79 | } 80 | 81 | // Layout direction 82 | @function get-direction($layout, $default) { 83 | $direction: null; 84 | 85 | @if to-upper-case($layout) == "LTR" or to-upper-case($layout) == "RTL" { 86 | $direction: direction-from-layout($layout); 87 | } @else { 88 | $direction: direction-from-layout($default); 89 | } 90 | 91 | @return $direction; 92 | } 93 | 94 | @function direction-from-layout($layout) { 95 | $direction: null; 96 | 97 | @if to-upper-case($layout) == "LTR" { 98 | $direction: right; 99 | } @else { 100 | $direction: left; 101 | } 102 | 103 | @return $direction; 104 | } 105 | 106 | @function get-opposite-direction($direction) { 107 | $opposite-direction: left; 108 | 109 | @if $direction == "left" { 110 | $opposite-direction: right; 111 | } 112 | 113 | @return $opposite-direction; 114 | } 115 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to ems 2 | // eg. for a relational value of 12px write em(12) when the parent is 16px 3 | // if the parent is another value say 24px write em(12, 24) 4 | 5 | @function em($pxval, $base: $em-base) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | @if not unitless($base) { 10 | $base: strip-units($base); 11 | } 12 | @return ($pxval / $base) * 1em; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_px-to-rem.scss: -------------------------------------------------------------------------------- 1 | // Convert pixels to rems 2 | // eg. for a relational value of 12px write rem(12) 3 | // Assumes $em-base is the font-size of 4 | 5 | @function rem($pxval) { 6 | @if not unitless($pxval) { 7 | $pxval: strip-units($pxval); 8 | } 9 | 10 | $base: $em-base; 11 | @if not unitless($base) { 12 | $base: strip-units($base); 13 | } 14 | @return ($pxval / $base) * 1rem; 15 | } 16 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_shade.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Mixes a color with black. 4 | /// 5 | /// @param {Color} $color 6 | /// 7 | /// @param {Number (Percentage)} $percent 8 | /// The amount of black to be mixed in. 9 | /// 10 | /// @example scss - Usage 11 | /// .element { 12 | /// background-color: shade(#ffbb52, 60%); 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .element { 17 | /// background-color: #664a20; 18 | /// } 19 | /// 20 | /// @return {Color} 21 | 22 | @function shade($color, $percent) { 23 | @return mix(#000, $color, $percent); 24 | } 25 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_strip-units.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Strips the unit from a number. 4 | /// 5 | /// @param {Number (With Unit)} $value 6 | /// 7 | /// @example scss - Usage 8 | /// $dimension: strip-units(10em); 9 | /// 10 | /// @example css - CSS Output 11 | /// $dimension: 10; 12 | /// 13 | /// @return {Number (Unitless)} 14 | 15 | @function strip-units($value) { 16 | @return ($value / ($value * 0 + 1)); 17 | } 18 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_tint.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Mixes a color with white. 4 | /// 5 | /// @param {Color} $color 6 | /// 7 | /// @param {Number (Percentage)} $percent 8 | /// The amount of white to be mixed in. 9 | /// 10 | /// @example scss - Usage 11 | /// .element { 12 | /// background-color: tint(#6ecaa6, 40%); 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .element { 17 | /// background-color: #a8dfc9; 18 | /// } 19 | /// 20 | /// @return {Color} 21 | 22 | @function tint($color, $percent) { 23 | @return mix(#fff, $color, $percent); 24 | } 25 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_transition-property-name.scss: -------------------------------------------------------------------------------- 1 | // Return vendor-prefixed property names if appropriate 2 | // Example: transition-property-names((transform, color, background), moz) -> -moz-transform, color, background 3 | //************************************************************************// 4 | @function transition-property-names($props, $vendor: false) { 5 | $new-props: (); 6 | 7 | @each $prop in $props { 8 | $new-props: append($new-props, transition-property-name($prop, $vendor), comma); 9 | } 10 | 11 | @return $new-props; 12 | } 13 | 14 | @function transition-property-name($prop, $vendor: false) { 15 | // put other properties that need to be prefixed here aswell 16 | @if $vendor and $prop == transform { 17 | @return unquote('-'+$vendor+'-'+$prop); 18 | } 19 | @else { 20 | @return $prop; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/functions/_unpack.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Converts shorthand to the 4-value syntax. 4 | /// 5 | /// @param {List} $shorthand 6 | /// 7 | /// @example scss - Usage 8 | /// .element { 9 | /// margin: unpack(1em 2em); 10 | /// } 11 | /// 12 | /// @example css - CSS Output 13 | /// .element { 14 | /// margin: 1em 2em 1em 2em; 15 | /// } 16 | 17 | @function unpack($shorthand) { 18 | @if length($shorthand) == 1 { 19 | @return nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1) nth($shorthand, 1); 20 | } @else if length($shorthand) == 2 { 21 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 1) nth($shorthand, 2); 22 | } @else if length($shorthand) == 3 { 23 | @return nth($shorthand, 1) nth($shorthand, 2) nth($shorthand, 3) nth($shorthand, 2); 24 | } @else { 25 | @return $shorthand; 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_box-sizing.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @if $border-box-sizing == true { 4 | html { // http://bit.ly/1qk2tVR 5 | box-sizing: border-box; 6 | } 7 | 8 | * { 9 | &, 10 | &::after, 11 | &::before { 12 | box-sizing: inherit; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_direction-context.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Changes the direction property used by other mixins called in the code block argument. 4 | /// 5 | /// @param {String} $direction [left-to-right] 6 | /// Layout direction to be used within the block. Can be `left-to-right` or `right-to-left`. 7 | /// 8 | /// @example scss - Usage 9 | /// @include direction-context(right-to-left) { 10 | /// .right-to-left-block { 11 | /// @include span-columns(6); 12 | /// } 13 | /// } 14 | /// 15 | /// @example css - CSS Output 16 | /// .right-to-left-block { 17 | /// float: right; 18 | /// ... 19 | /// } 20 | 21 | @mixin direction-context($direction: left-to-right) { 22 | $scope-direction: $layout-direction; 23 | 24 | @if to-lower-case($direction) == "left-to-right" { 25 | $layout-direction: LTR !global; 26 | } @else if to-lower-case($direction) == "right-to-left" { 27 | $layout-direction: RTL !global; 28 | } 29 | 30 | @content; 31 | 32 | $layout-direction: $scope-direction !global; 33 | } 34 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_display-context.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Changes the display property used by other mixins called in the code block argument. 4 | /// 5 | /// @param {String} $display [block] 6 | /// Display value to be used within the block. Can be `table` or `block`. 7 | /// 8 | /// @example scss 9 | /// @include display-context(table) { 10 | /// .display-table { 11 | /// @include span-columns(6); 12 | /// } 13 | /// } 14 | /// 15 | /// @example css 16 | /// .display-table { 17 | /// display: table-cell; 18 | /// ... 19 | /// } 20 | 21 | @mixin display-context($display: block) { 22 | $scope-display: $container-display-table; 23 | $container-display-table: $display == table !global; 24 | 25 | @content; 26 | 27 | $container-display-table: $scope-display !global; 28 | } 29 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_fill-parent.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Forces the element to fill its parent container. 4 | /// 5 | /// @example scss - Usage 6 | /// .element { 7 | /// @include fill-parent; 8 | /// } 9 | /// 10 | /// @example css - CSS Output 11 | /// .element { 12 | /// width: 100%; 13 | /// box-sizing: border-box; 14 | /// } 15 | 16 | @mixin fill-parent() { 17 | width: 100%; 18 | 19 | @if $border-box-sizing == false { 20 | box-sizing: border-box; 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_media.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Outputs a media-query block with an optional grid context (the total number of columns used in the grid). 4 | /// 5 | /// @param {List} $query 6 | /// A list of media query features and values, where each `$feature` should have a corresponding `$value`. 7 | /// For a list of valid values for `$feature`, click [here](http://www.w3.org/TR/css3-mediaqueries/#media1). 8 | /// 9 | /// If there is only a single `$value` in `$query`, `$default-feature` is going to be used. 10 | /// 11 | /// The number of total columns in the grid can be set by passing `$columns` at the end of the list (overrides `$total-columns`). 12 | /// 13 | /// 14 | /// @param {Number (unitless)} $total-columns [$grid-columns] 15 | /// - Number of columns to use in the new grid context. Can be set as a shorthand in the first parameter. 16 | /// 17 | /// @example scss - Usage 18 | /// .responsive-element { 19 | /// @include media(769px) { 20 | /// @include span-columns(6); 21 | /// } 22 | /// } 23 | /// 24 | /// .new-context-element { 25 | /// @include media(min-width 320px max-width 480px, 6) { 26 | /// @include span-columns(6); 27 | /// } 28 | /// } 29 | /// 30 | /// @example css - CSS Output 31 | /// @media screen and (min-width: 769px) { 32 | /// .responsive-element { 33 | /// display: block; 34 | /// float: left; 35 | /// margin-right: 2.35765%; 36 | /// width: 48.82117%; 37 | /// } 38 | /// 39 | /// .responsive-element:last-child { 40 | /// margin-right: 0; 41 | /// } 42 | /// } 43 | /// 44 | /// @media screen and (min-width: 320px) and (max-width: 480px) { 45 | /// .new-context-element { 46 | /// display: block; 47 | /// float: left; 48 | /// margin-right: 4.82916%; 49 | /// width: 100%; 50 | /// } 51 | /// 52 | /// .new-context-element:last-child { 53 | /// margin-right: 0; 54 | /// } 55 | /// } 56 | 57 | @mixin media($query: $feature $value $columns, $total-columns: $grid-columns) { 58 | @if length($query) == 1 { 59 | @media screen and ($default-feature: nth($query, 1)) { 60 | $default-grid-columns: $grid-columns; 61 | $grid-columns: $total-columns !global; 62 | @content; 63 | $grid-columns: $default-grid-columns !global; 64 | } 65 | } @else { 66 | $loop-to: length($query); 67 | $media-query: "screen and "; 68 | $default-grid-columns: $grid-columns; 69 | $grid-columns: $total-columns !global; 70 | 71 | @if is-not(is-even(length($query))) { 72 | $grid-columns: nth($query, $loop-to) !global; 73 | $loop-to: $loop-to - 1; 74 | } 75 | 76 | $i: 1; 77 | @while $i <= $loop-to { 78 | $media-query: $media-query + "(" + nth($query, $i) + ": " + nth($query, $i + 1) + ") "; 79 | 80 | @if ($i + 1) != $loop-to { 81 | $media-query: $media-query + "and "; 82 | } 83 | 84 | $i: $i + 2; 85 | } 86 | 87 | @media #{$media-query} { 88 | @content; 89 | $grid-columns: $default-grid-columns !global; 90 | } 91 | } 92 | } 93 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_omega.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Removes the element's gutter margin, regardless of its position in the grid hierarchy or display property. It can target a specific element, or every `nth-child` occurrence. Works only with `block` layouts. 4 | /// 5 | /// @param {List} $query [block] 6 | /// List of arguments. Supported arguments are `nth-child` selectors (targets a specific pseudo element) and `auto` (targets `last-child`). 7 | /// 8 | /// When passed an `nth-child` argument of type `*n` with `block` display, the omega mixin automatically adds a clear to the `*n+1` th element. Note that composite arguments such as `2n+1` do not support this feature. 9 | /// 10 | /// **Deprecation warning**: The omega mixin will no longer take a `$direction` argument. To change the layout direction, use `row($direction)` or set `$default-layout-direction` instead. 11 | /// 12 | /// @example scss - Usage 13 | /// .element { 14 | /// @include omega; 15 | /// } 16 | /// 17 | /// .nth-element { 18 | /// @include omega(4n); 19 | /// } 20 | /// 21 | /// @example css - CSS Output 22 | /// .element { 23 | /// margin-right: 0; 24 | /// } 25 | /// 26 | /// .nth-element:nth-child(4n) { 27 | /// margin-right: 0; 28 | /// } 29 | /// 30 | /// .nth-element:nth-child(4n+1) { 31 | /// clear: left; 32 | /// } 33 | 34 | @mixin omega($query: block, $direction: default) { 35 | $table: belongs-to(table, $query); 36 | $auto: belongs-to(auto, $query); 37 | 38 | @if $direction != default { 39 | @include -neat-warn("The omega mixin will no longer take a $direction argument. To change the layout direction, use the direction(){...} mixin."); 40 | } @else { 41 | $direction: get-direction($layout-direction, $default-layout-direction); 42 | } 43 | 44 | @if $table { 45 | @include -neat-warn("The omega mixin no longer removes padding in table layouts."); 46 | } 47 | 48 | @if length($query) == 1 { 49 | @if $auto { 50 | &:last-child { 51 | margin-#{$direction}: 0; 52 | } 53 | } 54 | 55 | @else if contains-display-value($query) and $table == false { 56 | margin-#{$direction}: 0; 57 | } 58 | 59 | @else { 60 | @include nth-child($query, $direction); 61 | } 62 | } @else if length($query) == 2 { 63 | @if $auto { 64 | &:last-child { 65 | margin-#{$direction}: 0; 66 | } 67 | } @else { 68 | @include nth-child(nth($query, 1), $direction); 69 | } 70 | } @else { 71 | @include -neat-warn("Too many arguments passed to the omega() mixin."); 72 | } 73 | } 74 | 75 | @mixin nth-child($query, $direction) { 76 | $opposite-direction: get-opposite-direction($direction); 77 | 78 | &:nth-child(#{$query}) { 79 | margin-#{$direction}: 0; 80 | } 81 | 82 | @if type-of($query) == number and unit($query) == "n" { 83 | &:nth-child(#{$query}+1) { 84 | clear: $opposite-direction; 85 | } 86 | } 87 | } 88 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_outer-container.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Makes an element a outer container by centering it in the viewport, clearing its floats, and setting its `max-width`. 4 | /// Although optional, using `outer-container` is recommended. The mixin can be called on more than one element per page, as long as they are not nested. 5 | /// 6 | /// @param {Number [unit]} $local-max-width [$max-width] 7 | /// Max width to be applied to the element. Can be a percentage or a measure. 8 | /// 9 | /// @example scss - Usage 10 | /// .element { 11 | /// @include outer-container(100%); 12 | /// } 13 | /// 14 | /// @example css - CSS Output 15 | /// .element { 16 | /// max-width: 100%; 17 | /// margin-left: auto; 18 | /// margin-right: auto; 19 | /// } 20 | /// 21 | /// .element::after { 22 | /// clear: both; 23 | /// content: ""; 24 | /// display: table; 25 | /// } 26 | 27 | @mixin outer-container($local-max-width: $max-width) { 28 | @include clearfix; 29 | max-width: $local-max-width; 30 | margin: { 31 | left: auto; 32 | right: auto; 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_pad.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Adds padding to the element. 4 | /// 5 | /// @param {List} $padding [flex-gutter()] 6 | /// A list of padding value(s) to use. Passing `default` in the list will result in using the gutter width as a padding value. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include pad(30px -20px 10px default); 11 | /// } 12 | /// 13 | /// @example css - CSS Output 14 | /// .element { 15 | /// padding: 30px -20px 10px 2.35765%; 16 | /// } 17 | 18 | @mixin pad($padding: flex-gutter()) { 19 | $padding-list: null; 20 | @each $value in $padding { 21 | $value: if($value == 'default', flex-gutter(), $value); 22 | $padding-list: join($padding-list, $value); 23 | } 24 | padding: $padding-list; 25 | } 26 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_private.scss: -------------------------------------------------------------------------------- 1 | $parent-columns: $grid-columns !default; 2 | $fg-column: $column; 3 | $fg-gutter: $gutter; 4 | $fg-max-columns: $grid-columns; 5 | $container-display-table: false !default; 6 | $layout-direction: LTR !default; 7 | 8 | @function flex-grid($columns, $container-columns: $fg-max-columns) { 9 | $width: $columns * $fg-column + ($columns - 1) * $fg-gutter; 10 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 11 | @return percentage($width / $container-width); 12 | } 13 | 14 | @function flex-gutter($container-columns: $fg-max-columns, $gutter: $fg-gutter) { 15 | $container-width: $container-columns * $fg-column + ($container-columns - 1) * $fg-gutter; 16 | @return percentage($gutter / $container-width); 17 | } 18 | 19 | @function grid-width($n) { 20 | @return $n * $gw-column + ($n - 1) * $gw-gutter; 21 | } 22 | 23 | @function get-parent-columns($columns) { 24 | @if $columns != $grid-columns { 25 | $parent-columns: $columns !global; 26 | } @else { 27 | $parent-columns: $grid-columns !global; 28 | } 29 | 30 | @return $parent-columns; 31 | } 32 | 33 | @function is-display-table($container-is-display-table, $display) { 34 | @return $container-is-display-table == true or $display == table; 35 | } 36 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_row.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Designates the element as a row of columns in the grid layout. It clears the floats on the element and sets its display property. Rows can't be nested, but there can be more than one row element—with different display properties—per layout. 4 | /// 5 | /// @param {String} $display [default] 6 | /// Sets the display property of the element and the display context that will be used by its children. Can be `block` or `table`. 7 | /// 8 | /// @param {String} $direction [$default-layout-direction] 9 | /// Sets the layout direction. Can be `LTR` (left-to-right) or `RTL` (right-to-left). 10 | /// 11 | /// @example scss - Usage 12 | /// .element { 13 | /// @include row(); 14 | /// } 15 | /// 16 | /// @example css - CSS Output 17 | /// .element { 18 | /// *zoom: 1; 19 | /// display: block; 20 | /// } 21 | /// 22 | /// .element:before, .element:after { 23 | /// content: " "; 24 | /// display: table; 25 | /// } 26 | /// 27 | /// .element:after { 28 | /// clear: both; 29 | /// } 30 | 31 | @mixin row($display: default, $direction: $default-layout-direction) { 32 | @if $direction != $default-layout-direction { 33 | @include -neat-warn("The $direction argument will be deprecated in future versions in favor of the direction(){...} mixin."); 34 | } 35 | 36 | $layout-direction: $direction !global; 37 | 38 | @if $display != default { 39 | @include -neat-warn("The $display argument will be deprecated in future versions in favor of the display(){...} mixin."); 40 | } 41 | 42 | @if $display == table { 43 | display: table; 44 | @include fill-parent; 45 | table-layout: fixed; 46 | $container-display-table: true !global; 47 | } @else { 48 | @include clearfix; 49 | display: block; 50 | $container-display-table: false !global; 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_shift.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Translates an element horizontally by a number of columns. Positive arguments shift the element to the active layout direction, while negative ones shift it to the opposite direction. 4 | /// 5 | /// @param {Number (unitless)} $n-columns [1] 6 | /// Number of columns by which the element shifts. 7 | /// 8 | /// @example scss - Usage 9 | /// .element { 10 | /// @include shift(-3); 11 | /// } 12 | /// 13 | /// @example css - CSS output 14 | /// .element { 15 | /// margin-left: -25.58941%; 16 | /// } 17 | 18 | @mixin shift($n-columns: 1) { 19 | @include shift-in-context($n-columns); 20 | } 21 | 22 | /// Translates an element horizontally by a number of columns, in a specific nesting context. 23 | /// 24 | /// @param {List} $shift 25 | /// A list containing the number of columns to shift (`$columns`) and the number of columns of the parent element (`$container-columns`). 26 | /// 27 | /// The two values can be separated with any string such as `of`, `/`, etc. 28 | /// 29 | /// @example scss - Usage 30 | /// .element { 31 | /// @include shift(-3 of 6); 32 | /// } 33 | /// 34 | /// @example css - CSS output 35 | /// .element { 36 | /// margin-left: -52.41458%; 37 | /// } 38 | 39 | @mixin shift-in-context($shift: $columns of $container-columns) { 40 | $n-columns: nth($shift, 1); 41 | $parent-columns: container-shift($shift) !global; 42 | 43 | $direction: get-direction($layout-direction, $default-layout-direction); 44 | $opposite-direction: get-opposite-direction($direction); 45 | 46 | margin-#{$opposite-direction}: $n-columns * flex-grid(1, $parent-columns) + $n-columns * flex-gutter($parent-columns); 47 | 48 | // Reset nesting context 49 | $parent-columns: $grid-columns !global; 50 | } 51 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_span-columns.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Specifies the number of columns an element should span. If the selector is nested the number of columns of its parent element should be passed as an argument as well. 4 | /// 5 | /// @param {List} $span 6 | /// A list containing `$columns`, the unitless number of columns the element spans (required), and `$container-columns`, the number of columns the parent element spans (optional). 7 | /// 8 | /// If only one value is passed, it is assumed that it's `$columns` and that that `$container-columns` is equal to `$grid-columns`, the total number of columns in the grid. 9 | /// 10 | /// The values can be separated with any string such as `of`, `/`, etc. 11 | /// 12 | /// `$columns` also accepts decimals for when it's necessary to break out of the standard grid. E.g. Passing `2.4` in a standard 12 column grid will divide the row into 5 columns. 13 | /// 14 | /// @param {String} $display [block] 15 | /// Sets the display property of the element. By default it sets the display property of the element to `block`. 16 | /// 17 | /// If passed `block-collapse`, it also removes the margin gutter by adding it to the element width. 18 | /// 19 | /// If passed `table`, it sets the display property to `table-cell` and calculates the width of the element without taking gutters into consideration. The result does not align with the block-based grid. 20 | /// 21 | /// @example scss - Usage 22 | /// .element { 23 | /// @include span-columns(6); 24 | /// 25 | /// .nested-element { 26 | /// @include span-columns(2 of 6); 27 | /// } 28 | /// } 29 | /// 30 | /// @example css - CSS Output 31 | /// .element { 32 | /// display: block; 33 | /// float: left; 34 | /// margin-right: 2.35765%; 35 | /// width: 48.82117%; 36 | /// } 37 | /// 38 | /// .element:last-child { 39 | /// margin-right: 0; 40 | /// } 41 | /// 42 | /// .element .nested-element { 43 | /// display: block; 44 | /// float: left; 45 | /// margin-right: 4.82916%; 46 | /// width: 30.11389%; 47 | /// } 48 | /// 49 | /// .element .nested-element:last-child { 50 | /// margin-right: 0; 51 | /// } 52 | 53 | @mixin span-columns($span: $columns of $container-columns, $display: block) { 54 | $columns: nth($span, 1); 55 | $container-columns: container-span($span); 56 | 57 | $parent-columns: get-parent-columns($container-columns) !global; 58 | 59 | $direction: get-direction($layout-direction, $default-layout-direction); 60 | $opposite-direction: get-opposite-direction($direction); 61 | 62 | $display-table: is-display-table($container-display-table, $display); 63 | 64 | @if $display-table { 65 | display: table-cell; 66 | width: percentage($columns / $container-columns); 67 | } @else { 68 | float: #{$opposite-direction}; 69 | 70 | @if $display != no-display { 71 | display: block; 72 | } 73 | 74 | @if $display == collapse { 75 | @include -neat-warn("The 'collapse' argument will be deprecated. Use 'block-collapse' instead."); 76 | } 77 | 78 | @if $display == collapse or $display == block-collapse { 79 | width: flex-grid($columns, $container-columns) + flex-gutter($container-columns); 80 | 81 | &:last-child { 82 | width: flex-grid($columns, $container-columns); 83 | } 84 | 85 | } @else { 86 | margin-#{$direction}: flex-gutter($container-columns); 87 | width: flex-grid($columns, $container-columns); 88 | 89 | &:last-child { 90 | margin-#{$direction}: 0; 91 | } 92 | } 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_to-deprecate.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @mixin breakpoint($query:$feature $value $columns, $total-columns: $grid-columns) { 4 | @include -neat-warn("The breakpoint() mixin was renamed to media() in Neat 1.0. Please update your project with the new syntax before the next version bump."); 5 | 6 | @if length($query) == 1 { 7 | @media screen and ($default-feature: nth($query, 1)) { 8 | $default-grid-columns: $grid-columns; 9 | $grid-columns: $total-columns; 10 | @content; 11 | $grid-columns: $default-grid-columns; 12 | } 13 | } @else if length($query) == 2 { 14 | @media screen and (nth($query, 1): nth($query, 2)) { 15 | $default-grid-columns: $grid-columns; 16 | $grid-columns: $total-columns; 17 | @content; 18 | $grid-columns: $default-grid-columns; 19 | } 20 | } @else if length($query) == 3 { 21 | @media screen and (nth($query, 1): nth($query, 2)) { 22 | $default-grid-columns: $grid-columns; 23 | $grid-columns: nth($query, 3); 24 | @content; 25 | $grid-columns: $default-grid-columns; 26 | } 27 | } @else if length($query) == 4 { 28 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { 29 | $default-grid-columns: $grid-columns; 30 | $grid-columns: $total-columns; 31 | @content; 32 | $grid-columns: $default-grid-columns; 33 | } 34 | } @else if length($query) == 5 { 35 | @media screen and (nth($query, 1): nth($query, 2)) and (nth($query, 3): nth($query, 4)) { 36 | $default-grid-columns: $grid-columns; 37 | $grid-columns: nth($query, 5); 38 | @content; 39 | $grid-columns: $default-grid-columns; 40 | } 41 | } @else { 42 | @include -neat-warn("Wrong number of arguments for breakpoint(). Read the documentation for more details."); 43 | } 44 | } 45 | 46 | @mixin nth-omega($nth, $display: block, $direction: default) { 47 | @include -neat-warn("The nth-omega() mixin is deprecated. Please use omega() instead."); 48 | @include omega($nth $display, $direction); 49 | } 50 | 51 | /// Resets the active display property to `block`. Particularly useful when changing the display property in a single row. 52 | /// 53 | /// @example scss - Usage 54 | /// .element { 55 | /// @include row(table); 56 | /// // Context changed to table display 57 | /// } 58 | /// 59 | /// @include reset-display; 60 | /// // Context is reset to block display 61 | 62 | @mixin reset-display { 63 | $container-display-table: false !global; 64 | @include -neat-warn("Resetting $display will be deprecated in future versions in favor of the display(){...} mixin."); 65 | } 66 | 67 | /// Resets the active layout direction to the default value set in `$default-layout-direction`. Particularly useful when changing the layout direction in a single row. 68 | /// 69 | /// @example scss - Usage 70 | /// .element { 71 | /// @include row($direction: RTL); 72 | /// // Context changed to right-to-left 73 | /// } 74 | /// 75 | /// @include reset-layout-direction; 76 | /// // Context is reset to left-to-right 77 | 78 | @mixin reset-layout-direction { 79 | $layout-direction: $default-layout-direction !global; 80 | @include -neat-warn("Resetting $direction will be deprecated in future versions in favor of the direction(){...} mixin."); 81 | } 82 | 83 | /// Resets both the active layout direction and the active display property. 84 | /// 85 | /// @example scss - Usage 86 | /// .element { 87 | /// @include row(table, RTL); 88 | /// // Context changed to table table and right-to-left 89 | /// } 90 | /// 91 | /// @include reset-all; 92 | /// // Context is reset to block display and left-to-right 93 | 94 | @mixin reset-all { 95 | @include reset-display; 96 | @include reset-layout-direction; 97 | } 98 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/grid/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | @mixin grid-column-gradient($values...) { 4 | background-image: -webkit-linear-gradient(left, $values); 5 | background-image: -moz-linear-gradient(left, $values); 6 | background-image: -ms-linear-gradient(left, $values); 7 | background-image: -o-linear-gradient(left, $values); 8 | background-image: unquote("linear-gradient(to left, #{$values})"); 9 | } 10 | 11 | @if $visual-grid == true or $visual-grid == yes { 12 | body:before { 13 | @include grid-column-gradient(gradient-stops($grid-columns)); 14 | content: ""; 15 | display: inline-block; 16 | height: 100%; 17 | left: 0; 18 | margin: 0 auto; 19 | max-width: $max-width; 20 | opacity: $visual-grid-opacity; 21 | pointer-events: none; 22 | position: fixed; 23 | right: 0; 24 | width: 100%; 25 | 26 | @if $visual-grid-index == back { 27 | z-index: -1; 28 | } 29 | 30 | @else if $visual-grid-index == front { 31 | z-index: 9999; 32 | } 33 | 34 | @each $breakpoint in $visual-grid-breakpoints { 35 | @if $breakpoint { 36 | @include media($breakpoint) { 37 | @include grid-column-gradient(gradient-stops($grid-columns)); 38 | } 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_convert-units.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for str-to-num fn. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _convert-units($number, $unit) { 6 | $strings: "px", "cm", "mm", "%", "ch", "pica", "in", "em", "rem", "pt", "pc", "ex", "vw", "vh", "vmin", "vmax", "deg", "rad", "grad", "turn"; 7 | $units: 1px, 1cm, 1mm, 1%, 1ch, 1pica, 1in, 1em, 1rem, 1pt, 1pc, 1ex, 1vw, 1vh, 1vmin, 1vmax, 1deg, 1rad, 1grad, 1turn; 8 | $index: index($strings, $unit); 9 | 10 | @if not $index { 11 | @warn "Unknown unit `#{$unit}`."; 12 | @return false; 13 | } 14 | 15 | @if type-of($number) != "number" { 16 | @warn "`#{$number} is not a number`"; 17 | @return false; 18 | } 19 | 20 | @return $number * nth($units, $index); 21 | } 22 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_directional-values.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Directional-property mixins are shorthands for writing properties like the following 4 | /// 5 | /// @ignore You can also use `false` instead of `null`. 6 | /// 7 | /// @param {List} $vals 8 | /// List of directional values 9 | /// 10 | /// @example scss - Usage 11 | /// .element { 12 | /// @include border-style(dotted null); 13 | /// @include margin(null 0 10px); 14 | /// } 15 | /// 16 | /// @example css - CSS Output 17 | /// .element { 18 | /// border-bottom-style: dotted; 19 | /// border-top-style: dotted; 20 | /// margin-bottom: 10px; 21 | /// margin-left: 0; 22 | /// margin-right: 0; 23 | /// } 24 | /// 25 | /// @require {function} contains-falsy 26 | /// 27 | /// @return {List} 28 | 29 | @function collapse-directionals($vals) { 30 | $output: null; 31 | 32 | $a: nth($vals, 1); 33 | $b: if(length($vals) < 2, $a, nth($vals, 2)); 34 | $c: if(length($vals) < 3, $a, nth($vals, 3)); 35 | $d: if(length($vals) < 2, $a, nth($vals, if(length($vals) < 4, 2, 4))); 36 | 37 | @if $a == 0 { $a: 0; } 38 | @if $b == 0 { $b: 0; } 39 | @if $c == 0 { $c: 0; } 40 | @if $d == 0 { $d: 0; } 41 | 42 | @if $a == $b and $a == $c and $a == $d { $output: $a; } 43 | @else if $a == $c and $b == $d { $output: $a $b; } 44 | @else if $b == $d { $output: $a $b $c; } 45 | @else { $output: $a $b $c $d; } 46 | 47 | @return $output; 48 | } 49 | 50 | /// Output directional properties, for instance `margin`. 51 | /// 52 | /// @access private 53 | /// 54 | /// @param {String} $pre 55 | /// Prefix to use 56 | /// @param {String} $suf 57 | /// Suffix to use 58 | /// @param {List} $vals 59 | /// List of values 60 | /// 61 | /// @require {function} collapse-directionals 62 | /// @require {function} contains-falsy 63 | 64 | @mixin directional-property($pre, $suf, $vals) { 65 | // Property Names 66 | $top: $pre + "-top" + if($suf, "-#{$suf}", ""); 67 | $bottom: $pre + "-bottom" + if($suf, "-#{$suf}", ""); 68 | $left: $pre + "-left" + if($suf, "-#{$suf}", ""); 69 | $right: $pre + "-right" + if($suf, "-#{$suf}", ""); 70 | $all: $pre + if($suf, "-#{$suf}", ""); 71 | 72 | $vals: collapse-directionals($vals); 73 | 74 | @if contains-falsy($vals) { 75 | @if nth($vals, 1) { #{$top}: nth($vals, 1); } 76 | 77 | @if length($vals) == 1 { 78 | @if nth($vals, 1) { #{$right}: nth($vals, 1); } 79 | } @else { 80 | @if nth($vals, 2) { #{$right}: nth($vals, 2); } 81 | } 82 | 83 | @if length($vals) == 2 { 84 | @if nth($vals, 1) { #{$bottom}: nth($vals, 1); } 85 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 86 | } @else if length($vals) == 3 { 87 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 88 | @if nth($vals, 2) { #{$left}: nth($vals, 2); } 89 | } @else if length($vals) == 4 { 90 | @if nth($vals, 3) { #{$bottom}: nth($vals, 3); } 91 | @if nth($vals, 4) { #{$left}: nth($vals, 4); } 92 | } 93 | } @else { 94 | #{$all}: $vals; 95 | } 96 | } 97 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_font-source-declaration.scss: -------------------------------------------------------------------------------- 1 | // Used for creating the source string for fonts using @font-face 2 | // Reference: http://goo.gl/Ru1bKP 3 | 4 | @function font-url-prefixer($asset-pipeline) { 5 | @if $asset-pipeline == true { 6 | @return font-url; 7 | } @else { 8 | @return url; 9 | } 10 | } 11 | 12 | @function font-source-declaration( 13 | $font-family, 14 | $file-path, 15 | $asset-pipeline, 16 | $file-formats, 17 | $font-url) { 18 | 19 | $src: (); 20 | 21 | $formats-map: ( 22 | eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"), 23 | woff2: "#{$file-path}.woff2" format("woff2"), 24 | woff: "#{$file-path}.woff" format("woff"), 25 | ttf: "#{$file-path}.ttf" format("truetype"), 26 | svg: "#{$file-path}.svg##{$font-family}" format("svg") 27 | ); 28 | 29 | @each $key, $values in $formats-map { 30 | @if contains($file-formats, $key) { 31 | $file-path: nth($values, 1); 32 | $font-format: nth($values, 2); 33 | 34 | @if $asset-pipeline == true { 35 | $src: append($src, font-url($file-path) $font-format, comma); 36 | } @else { 37 | $src: append($src, url($file-path) $font-format, comma); 38 | } 39 | } 40 | } 41 | 42 | @return $src; 43 | } 44 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_gradient-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _gradient-positions-parser($gradient-type, $gradient-positions) { 2 | @if $gradient-positions 3 | and ($gradient-type == linear) 4 | and (type-of($gradient-positions) != color) { 5 | $gradient-positions: _linear-positions-parser($gradient-positions); 6 | } 7 | @else if $gradient-positions 8 | and ($gradient-type == radial) 9 | and (type-of($gradient-positions) != color) { 10 | $gradient-positions: _radial-positions-parser($gradient-positions); 11 | } 12 | @return $gradient-positions; 13 | } 14 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_linear-angle-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-angle-parser($image, $first-val, $prefix, $suffix) { 3 | $offset: null; 4 | $unit-short: str-slice($first-val, str-length($first-val) - 2, str-length($first-val)); 5 | $unit-long: str-slice($first-val, str-length($first-val) - 3, str-length($first-val)); 6 | 7 | @if ($unit-long == "grad") or 8 | ($unit-long == "turn") { 9 | $offset: if($unit-long == "grad", -100grad * 3, -0.75turn); 10 | } 11 | 12 | @else if ($unit-short == "deg") or 13 | ($unit-short == "rad") { 14 | $offset: if($unit-short == "deg", -90 * 3, 1.6rad); 15 | } 16 | 17 | @if $offset { 18 | $num: _str-to-num($first-val); 19 | 20 | @return ( 21 | webkit-image: -webkit- + $prefix + ($offset - $num) + $suffix, 22 | spec-image: $image 23 | ); 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_linear-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 1, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $has-multiple-vals: str-index($first-val, " "); 12 | $has-single-position: unquote(_position-flipper($first-val) + ""); 13 | $has-angle: is-number(str-slice($first-val, 1, 1)); 14 | 15 | @if $has-multiple-vals { 16 | $gradients: _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals); 17 | } 18 | 19 | @else if $has-single-position != "" { 20 | $pos: unquote($has-single-position + ""); 21 | 22 | $gradients: ( 23 | webkit-image: -webkit- + $image, 24 | spec-image: $prefix + "to " + $pos + $suffix 25 | ); 26 | } 27 | 28 | @else if $has-angle { 29 | // Rotate degree for webkit 30 | $gradients: _linear-angle-parser($image, $first-val, $prefix, $suffix); 31 | } 32 | 33 | @else { 34 | $gradients: ( 35 | webkit-image: -webkit- + $image, 36 | spec-image: $image 37 | ); 38 | } 39 | 40 | @return $gradients; 41 | } 42 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_linear-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _linear-positions-parser($pos) { 2 | $type: type-of(nth($pos, 1)); 3 | $spec: null; 4 | $degree: null; 5 | $side: null; 6 | $corner: null; 7 | $length: length($pos); 8 | // Parse Side and corner positions 9 | @if ($length > 1) { 10 | @if nth($pos, 1) == "to" { // Newer syntax 11 | $side: nth($pos, 2); 12 | 13 | @if $length == 2 { // eg. to top 14 | // Swap for backwards compatibility 15 | $degree: _position-flipper(nth($pos, 2)); 16 | } 17 | @else if $length == 3 { // eg. to top left 18 | $corner: nth($pos, 3); 19 | } 20 | } 21 | @else if $length == 2 { // Older syntax ("top left") 22 | $side: _position-flipper(nth($pos, 1)); 23 | $corner: _position-flipper(nth($pos, 2)); 24 | } 25 | 26 | @if ("#{$side} #{$corner}" == "left top") or ("#{$side} #{$corner}" == "top left") { 27 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 28 | } 29 | @else if ("#{$side} #{$corner}" == "right top") or ("#{$side} #{$corner}" == "top right") { 30 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 31 | } 32 | @else if ("#{$side} #{$corner}" == "right bottom") or ("#{$side} #{$corner}" == "bottom right") { 33 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 34 | } 35 | @else if ("#{$side} #{$corner}" == "left bottom") or ("#{$side} #{$corner}" == "bottom left") { 36 | $degree: _position-flipper(#{$side}) _position-flipper(#{$corner}); 37 | } 38 | $spec: to $side $corner; 39 | } 40 | @else if $length == 1 { 41 | // Swap for backwards compatibility 42 | @if $type == string { 43 | $degree: $pos; 44 | $spec: to _position-flipper($pos); 45 | } 46 | @else { 47 | $degree: -270 - $pos; //rotate the gradient opposite from spec 48 | $spec: $pos; 49 | } 50 | } 51 | $degree: unquote($degree + ","); 52 | $spec: unquote($spec + ","); 53 | @return $degree $spec; 54 | } 55 | 56 | @function _position-flipper($pos) { 57 | @return if($pos == left, right, null) 58 | if($pos == right, left, null) 59 | if($pos == top, bottom, null) 60 | if($pos == bottom, top, null); 61 | } 62 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_linear-side-corner-parser.scss: -------------------------------------------------------------------------------- 1 | // Private function for linear-gradient-parser 2 | @function _linear-side-corner-parser($image, $first-val, $prefix, $suffix, $has-multiple-vals) { 3 | $val-1: str-slice($first-val, 1, $has-multiple-vals - 1); 4 | $val-2: str-slice($first-val, $has-multiple-vals + 1, str-length($first-val)); 5 | $val-3: null; 6 | $has-val-3: str-index($val-2, " "); 7 | 8 | @if $has-val-3 { 9 | $val-3: str-slice($val-2, $has-val-3 + 1, str-length($val-2)); 10 | $val-2: str-slice($val-2, 1, $has-val-3 - 1); 11 | } 12 | 13 | $pos: _position-flipper($val-1) _position-flipper($val-2) _position-flipper($val-3); 14 | $pos: unquote($pos + ""); 15 | 16 | // Use old spec for webkit 17 | @if $val-1 == "to" { 18 | @return ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ); 22 | } 23 | 24 | // Bring the code up to spec 25 | @else { 26 | @return ( 27 | webkit-image: -webkit- + $image, 28 | spec-image: $prefix + "to " + $pos + $suffix 29 | ); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_radial-arg-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-arg-parser($g1, $g2, $pos, $shape-size) { 2 | @each $value in $g1, $g2 { 3 | $first-val: nth($value, 1); 4 | $pos-type: type-of($first-val); 5 | $spec-at-index: null; 6 | 7 | // Determine if spec was passed to mixin 8 | @if type-of($value) == list { 9 | $spec-at-index: if(index($value, at), index($value, at), false); 10 | } 11 | @if $spec-at-index { 12 | @if $spec-at-index > 1 { 13 | @for $i from 1 through ($spec-at-index - 1) { 14 | $shape-size: $shape-size nth($value, $i); 15 | } 16 | @for $i from ($spec-at-index + 1) through length($value) { 17 | $pos: $pos nth($value, $i); 18 | } 19 | } 20 | @else if $spec-at-index == 1 { 21 | @for $i from ($spec-at-index + 1) through length($value) { 22 | $pos: $pos nth($value, $i); 23 | } 24 | } 25 | $g1: null; 26 | } 27 | 28 | // If not spec calculate correct values 29 | @else { 30 | @if ($pos-type != color) or ($first-val != "transparent") { 31 | @if ($pos-type == number) 32 | or ($first-val == "center") 33 | or ($first-val == "top") 34 | or ($first-val == "right") 35 | or ($first-val == "bottom") 36 | or ($first-val == "left") { 37 | 38 | $pos: $value; 39 | 40 | @if $pos == $g1 { 41 | $g1: null; 42 | } 43 | } 44 | 45 | @else if 46 | ($first-val == "ellipse") 47 | or ($first-val == "circle") 48 | or ($first-val == "closest-side") 49 | or ($first-val == "closest-corner") 50 | or ($first-val == "farthest-side") 51 | or ($first-val == "farthest-corner") 52 | or ($first-val == "contain") 53 | or ($first-val == "cover") { 54 | 55 | $shape-size: $value; 56 | 57 | @if $value == $g1 { 58 | $g1: null; 59 | } 60 | 61 | @else if $value == $g2 { 62 | $g2: null; 63 | } 64 | } 65 | } 66 | } 67 | } 68 | @return $g1, $g2, $pos, $shape-size; 69 | } 70 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_radial-gradient-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-gradient-parser($image) { 2 | $image: unquote($image); 3 | $gradients: (); 4 | $start: str-index($image, "("); 5 | $end: str-index($image, ","); 6 | $first-val: str-slice($image, $start + 1, $end - 1); 7 | 8 | $prefix: str-slice($image, 1, $start); 9 | $suffix: str-slice($image, $end, str-length($image)); 10 | 11 | $is-spec-syntax: str-index($first-val, "at"); 12 | 13 | @if $is-spec-syntax and $is-spec-syntax > 1 { 14 | $keyword: str-slice($first-val, 1, $is-spec-syntax - 2); 15 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 16 | $pos: append($pos, $keyword, comma); 17 | 18 | $gradients: ( 19 | webkit-image: -webkit- + $prefix + $pos + $suffix, 20 | spec-image: $image 21 | ); 22 | } 23 | 24 | @else if $is-spec-syntax == 1 { 25 | $pos: str-slice($first-val, $is-spec-syntax + 3, str-length($first-val)); 26 | 27 | $gradients: ( 28 | webkit-image: -webkit- + $prefix + $pos + $suffix, 29 | spec-image: $image 30 | ); 31 | } 32 | 33 | @else if str-index($image, "cover") or str-index($image, "contain") { 34 | @warn "Radial-gradient needs to be updated to conform to latest spec."; 35 | 36 | $gradients: ( 37 | webkit-image: null, 38 | spec-image: $image 39 | ); 40 | } 41 | 42 | @else { 43 | $gradients: ( 44 | webkit-image: -webkit- + $image, 45 | spec-image: $image 46 | ); 47 | } 48 | 49 | @return $gradients; 50 | } 51 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_radial-positions-parser.scss: -------------------------------------------------------------------------------- 1 | @function _radial-positions-parser($gradient-pos) { 2 | $shape-size: nth($gradient-pos, 1); 3 | $pos: nth($gradient-pos, 2); 4 | $shape-size-spec: _shape-size-stripper($shape-size); 5 | 6 | $pre-spec: unquote(if($pos, "#{$pos}, ", null)) 7 | unquote(if($shape-size, "#{$shape-size},", null)); 8 | $pos-spec: if($pos, "at #{$pos}", null); 9 | 10 | $spec: "#{$shape-size-spec} #{$pos-spec}"; 11 | 12 | // Add comma 13 | @if ($spec != " ") { 14 | $spec: "#{$spec},"; 15 | } 16 | 17 | @return $pre-spec $spec; 18 | } 19 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_render-gradients.scss: -------------------------------------------------------------------------------- 1 | // User for linear and radial gradients within background-image or border-image properties 2 | 3 | @function _render-gradients($gradient-positions, $gradients, $gradient-type, $vendor: false) { 4 | $pre-spec: null; 5 | $spec: null; 6 | $vendor-gradients: null; 7 | @if $gradient-type == linear { 8 | @if $gradient-positions { 9 | $pre-spec: nth($gradient-positions, 1); 10 | $spec: nth($gradient-positions, 2); 11 | } 12 | } 13 | @else if $gradient-type == radial { 14 | $pre-spec: nth($gradient-positions, 1); 15 | $spec: nth($gradient-positions, 2); 16 | } 17 | 18 | @if $vendor { 19 | $vendor-gradients: -#{$vendor}-#{$gradient-type}-gradient(#{$pre-spec} $gradients); 20 | } 21 | @else if $vendor == false { 22 | $vendor-gradients: "#{$gradient-type}-gradient(#{$spec} #{$gradients})"; 23 | $vendor-gradients: unquote($vendor-gradients); 24 | } 25 | @return $vendor-gradients; 26 | } 27 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_shape-size-stripper.scss: -------------------------------------------------------------------------------- 1 | @function _shape-size-stripper($shape-size) { 2 | $shape-size-spec: null; 3 | @each $value in $shape-size { 4 | @if ($value == "cover") or ($value == "contain") { 5 | $value: null; 6 | } 7 | $shape-size-spec: "#{$shape-size-spec} #{$value}"; 8 | } 9 | @return $shape-size-spec; 10 | } 11 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/helpers/_str-to-num.scss: -------------------------------------------------------------------------------- 1 | //************************************************************************// 2 | // Helper function for linear/radial-gradient-parsers. 3 | // Source: http://sassmeister.com/gist/9647408 4 | //************************************************************************// 5 | @function _str-to-num($string) { 6 | // Matrices 7 | $strings: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; 8 | $numbers: 0 1 2 3 4 5 6 7 8 9; 9 | 10 | // Result 11 | $result: 0; 12 | $divider: 0; 13 | $minus: false; 14 | 15 | // Looping through all characters 16 | @for $i from 1 through str-length($string) { 17 | $character: str-slice($string, $i, $i); 18 | $index: index($strings, $character); 19 | 20 | @if $character == "-" { 21 | $minus: true; 22 | } 23 | 24 | @else if $character == "." { 25 | $divider: 1; 26 | } 27 | 28 | @else { 29 | @if not $index { 30 | $result: if($minus, $result * -1, $result); 31 | @return _convert-units($result, str-slice($string, $i)); 32 | } 33 | 34 | $number: nth($numbers, $index); 35 | 36 | @if $divider == 0 { 37 | $result: $result * 10; 38 | } 39 | 40 | @else { 41 | // Move the decimal dot to the left 42 | $divider: $divider * 10; 43 | $number: $number / $divider; 44 | } 45 | 46 | $result: $result + $number; 47 | } 48 | } 49 | @return if($minus, $result * -1, $result); 50 | } 51 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/mixins/_clearfix.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Provides an easy way to include a clearfix for containing floats. 4 | /// 5 | /// @link http://goo.gl/yP5hiZ 6 | /// 7 | /// @example scss 8 | /// .element { 9 | /// @include clearfix; 10 | /// } 11 | /// 12 | /// @example css 13 | /// .element::after { 14 | /// clear: both; 15 | /// content: ""; 16 | /// display: block; 17 | /// } 18 | 19 | @mixin clearfix { 20 | &::after { 21 | clear: both; 22 | content: ""; 23 | display: block; 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/settings/_asset-pipeline.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// A global setting to enable or disable the `$asset-pipeline` variable for all functions that accept it. 4 | /// 5 | /// @type Bool 6 | 7 | $asset-pipeline: false !default; 8 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/settings/_deprecation-warnings.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Enable or disable output of Bourbon’s deprecation-related Sass warnings. 4 | /// This variable must be declared _before_ importing Bourbon. 5 | /// 6 | /// @type Bool 7 | 8 | $output-bourbon-deprecation-warnings: true !default; 9 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/settings/_disable-warnings.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Disable all deprecation warnings. Defaults to `false`. Set with a `!global` flag. 4 | /// 5 | /// @type Bool 6 | 7 | $disable-warnings: false !default; 8 | 9 | @mixin -neat-warn($message) { 10 | @if $disable-warnings == false { 11 | @warn "#{$message}"; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/settings/_grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Sets the relative width of a single grid column. The unit used should be the same one used to define `$gutter`. Set with a `!global` flag. 4 | /// 5 | /// @type Number (Unit) 6 | 7 | $column: 4.2358em !default; 8 | 9 | /// Sets the relative width of a single grid gutter. The unit used should be the same one used to define `$column`. Set with the `!global` flag. 10 | /// 11 | /// @type Number (Unit) 12 | 13 | $gutter: 1.618em !default; 14 | 15 | /// Sets the total number of columns in the grid. Its value can be overridden inside a media query using the `media()` mixin. Set with the `!global` flag. 16 | /// 17 | /// @type Number (Unitless) 18 | 19 | $grid-columns: 12 !default; 20 | 21 | /// Sets the max-width property of the element that includes `outer-container()`. Set with the `!global` flag. 22 | /// 23 | /// @type Number (Unit) 24 | /// 25 | $max-width: 1200px !default; 26 | 27 | /// When set to true, it sets the box-sizing property of all elements to `border-box`. Set with a `!global` flag. 28 | /// 29 | /// @type Bool 30 | /// 31 | /// @example css - CSS Output 32 | /// html { 33 | /// box-sizing: border-box; } 34 | /// 35 | /// *, *::after, *::before { 36 | /// box-sizing: inherit; 37 | /// } 38 | 39 | $border-box-sizing: true !default; 40 | 41 | /// Sets the default [media feature](http://www.w3.org/TR/css3-mediaqueries/#media) that `media()` and `new-breakpoint()` revert to when only a breakpoint value is passed. Set with a `!global` flag. 42 | /// 43 | /// @type String 44 | 45 | $default-feature: min-width; // Default @media feature for the breakpoint() mixin 46 | 47 | ///Sets the default layout direction of the grid. Can be `LTR` or `RTL`. Set with a `!global` flag. 48 | /// 49 | ///@type String 50 | 51 | $default-layout-direction: LTR !default; 52 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/settings/_prefixer.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Global variables to enable or disable vendor prefixes 4 | 5 | $prefix-for-webkit: true !default; 6 | $prefix-for-mozilla: true !default; 7 | $prefix-for-microsoft: true !default; 8 | $prefix-for-opera: true !default; 9 | $prefix-for-spec: true !default; 10 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/settings/_px-to-em.scss: -------------------------------------------------------------------------------- 1 | $em-base: 16px !default; 2 | -------------------------------------------------------------------------------- /_sass/lib/uswds/lib/settings/_visual-grid.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | 3 | /// Displays the visual grid when set to true. The overlaid grid may be few pixels off depending on the browser's rendering engine and pixel rounding algorithm. Set with the `!global` flag. 4 | /// 5 | /// @type Bool 6 | 7 | $visual-grid: false !default; 8 | 9 | /// Sets the visual grid color. Set with `!global` flag. 10 | /// 11 | /// @type Color 12 | 13 | $visual-grid-color: #eee !default; 14 | 15 | /// Sets the `z-index` property of the visual grid. Can be `back` (behind content) or `front` (in front of content). Set with `!global` flag. 16 | /// 17 | /// @type String 18 | 19 | $visual-grid-index: back !default; 20 | 21 | /// Sets the opacity property of the visual grid. Set with `!global` flag. 22 | /// 23 | /// @type Number (unitless) 24 | 25 | $visual-grid-opacity: 0.4 !default; 26 | 27 | $visual-grid-breakpoints: () !default; 28 | -------------------------------------------------------------------------------- /_sass/lib/uswds/uswds.scss: -------------------------------------------------------------------------------- 1 | /*! uswds @version */ 2 | 3 | // Vendor -------------- // 4 | @import 'lib/bourbon'; 5 | @import 'lib/neat'; 6 | @import 'lib/normalize'; 7 | 8 | // Core -------------- // 9 | @import 'core/variables'; 10 | @import 'core/fonts'; 11 | @import 'core/base'; 12 | @import 'core/grid'; 13 | @import 'core/utilities'; 14 | 15 | // Elements -------------- // 16 | // Styles basic HTML elements 17 | @import 'elements/buttons'; 18 | @import 'elements/embed'; 19 | @import 'elements/figure'; 20 | @import 'elements/inputs'; 21 | @import 'elements/labels'; 22 | @import 'elements/list'; 23 | @import 'elements/table'; 24 | @import 'elements/typography'; 25 | 26 | // Components -------------- // 27 | @import 'components/accordions'; 28 | @import 'components/alerts'; 29 | @import 'components/banner'; 30 | @import 'components/footer'; 31 | @import 'components/forms'; 32 | @import 'components/graphic-list'; 33 | @import 'components/header'; 34 | @import 'components/hero'; 35 | @import 'components/layout'; 36 | @import 'components/media-block'; 37 | @import 'components/navigation'; 38 | @import 'components/search'; 39 | @import 'components/section'; 40 | @import 'components/sidenav'; 41 | @import 'components/skipnav'; 42 | -------------------------------------------------------------------------------- /assets/bia-agreement.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cisagov/dotgov-home/b682065874276eeee2de2af332e59a8be2ad4e5e/assets/bia-agreement.pdf -------------------------------------------------------------------------------- /assets/css/main.scss: -------------------------------------------------------------------------------- 1 | --- 2 | # Only the main Sass file needs front matter (the dashes are enough) 3 | --- 4 | 5 | $site-margins-mobile: 2rem; 6 | 7 | $font-path: '../uswds/fonts'; 8 | $image-path: '../uswds/img'; 9 | 10 | @import "lib/uswds/all"; 11 | @import "all"; -------------------------------------------------------------------------------- /assets/img/dotgov-152.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cisagov/dotgov-home/b682065874276eeee2de2af332e59a8be2ad4e5e/assets/img/dotgov-152.png -------------------------------------------------------------------------------- /assets/img/dottedgov-round.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | .gov 5 | 6 | -------------------------------------------------------------------------------- /assets/img/dottedgov.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | .gov 5 | 6 | 7 | -------------------------------------------------------------------------------- /assets/img/gov-no-cost.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cisagov/dotgov-home/b682065874276eeee2de2af332e59a8be2ad4e5e/assets/img/gov-no-cost.png -------------------------------------------------------------------------------- /assets/img/home-hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cisagov/dotgov-home/b682065874276eeee2de2af332e59a8be2ad4e5e/assets/img/home-hero.jpg -------------------------------------------------------------------------------- /assets/img/logo-email.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cisagov/dotgov-home/b682065874276eeee2de2af332e59a8be2ad4e5e/assets/img/logo-email.png -------------------------------------------------------------------------------- /assets/img/logo-github.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cisagov/dotgov-home/b682065874276eeee2de2af332e59a8be2ad4e5e/assets/img/logo-github.png -------------------------------------------------------------------------------- /assets/img/securedotgov.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cisagov/dotgov-home/b682065874276eeee2de2af332e59a8be2ad4e5e/assets/img/securedotgov.png -------------------------------------------------------------------------------- /assets/js/heading-links.js: -------------------------------------------------------------------------------- 1 | var anchorForId = function (id) { 2 | var anchor = document.createElement("a"); 3 | anchor.className = "header-link"; 4 | anchor.href = "#" + id; 5 | var idString = id.replace(/-/g, " "); 6 | anchor.innerHTML = "Anchor link for: " + idString + ""; 7 | anchor.title = "Anchor link"; 8 | return anchor; 9 | }; 10 | 11 | var linkifyAnchors = function (level, containingElement) { 12 | var headers = containingElement.getElementsByTagName("h" + level); 13 | for (var h = 0; h < headers.length; h++) { 14 | var header = headers[h]; 15 | 16 | if (typeof header.id !== "undefined" && header.id !== "") { 17 | header.appendChild(anchorForId(header.id)); 18 | } 19 | } 20 | }; 21 | 22 | document.onreadystatechange = function () { 23 | if (this.readyState === "complete") { 24 | var contentBlock = document.getElementsByClassName("usa-layout-docs")[0]; 25 | if (!contentBlock) { 26 | return; 27 | } 28 | for (var level = 1; level <= 6; level++) { 29 | linkifyAnchors(level, contentBlock); 30 | } 31 | } 32 | }; -------------------------------------------------------------------------------- /assets/policies-for-dot-gov-domain-issuance-for-federal-agency-public-websites.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cisagov/dotgov-home/b682065874276eeee2de2af332e59a8be2ad4e5e/assets/policies-for-dot-gov-domain-issuance-for-federal-agency-public-websites.pdf -------------------------------------------------------------------------------- /assets/transition-report-to-congress.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cisagov/dotgov-home/b682065874276eeee2de2af332e59a8be2ad4e5e/assets/transition-report-to-congress.pdf -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cisagov/dotgov-home/b682065874276eeee2de2af332e59a8be2ad4e5e/favicon.ico -------------------------------------------------------------------------------- /pages/about/about.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: About 3 | layout: docs 4 | permalink: /about/ 5 | intro: We put U.S. governments on the internet. 6 | sidenav: about 7 | subnav: 8 | - text: Why use .gov? 9 | href: '#why-use-gov' 10 | - text: What does .gov do? 11 | href: '#what-does-gov-do' 12 | 13 | --- 14 | 15 | ### Why use .gov? 16 | 17 | .gov is a 'top-level domain', or TLD, similar to _.com_, _.org_, or _.us_. Enterprises use a TLD to register a domain name (often simply called a _domain_) for use in their online services, like a website or email. 18 | 19 | In many well-known TLDs, anyone can register a domain for a fee, and as long as they pay there aren't many questions asked about whether the name they chose corresponds to their real-life name or services. While this can be a useful property for creative communication, it can also make it difficult to know whether the people behind a name are _really_ who they claim to be. 20 | 21 | **It should be easy to identify governments on the internet**, and using a .gov domain shows you’re official. The public shouldn't have to guess whether the site they're on or the email that hits their inbox is genuine. 22 | 23 | [CISA](https://www.cisa.gov), the Cybersecurity and Infrastructure Security Agency, [sponsors the .gov TLD](https://www.iana.org/domains/root/db/gov.html) and makes it available _solely_ to U.S.-based government organizations and publicly controlled entities. For those that qualify for a .gov domain, it's available without a fee. 24 | 25 | Additionally, using .gov **increases security**: 26 | * [Multi-factor authentication]({{ site.baseurl }}/2018/10/1/doing-the-2-step/) is enforced on all accounts in the .gov registrar, different than commercial registrars. 27 | * We ‘[preload]({{ site.baseurl }}/2020/6/21/an-intent-to-preload/)’ all new domains, which requires browsers to only use a secure HTTPS connection with your website. This protects your visitors' privacy and ensures the content you publish is exactly what's received. 28 | * You can [add a security contact]({{ site.baseurl }}/help/security-best-practices/) for your domain, making it easier for the public to tell you of a potential security issue with your online services. 29 | 30 | _If you're from the government, we're here to help_. Check out our [registration page]({{ site.baseurl }}/registration/) to begin. 31 | 32 | --- 33 | 34 | ### What does .gov do? 35 | 36 | We make it easy to register a .gov domain name and ensure that the name resolves in the global domain name system ([DNS]( {{ site.baseurl }}/help/#dns)). DNS maps easy-to-remember names on top of hard-to-recall numbers, allowing you to use `cisa.gov` instead of something like `104.106.178.124`. 37 | 38 | .gov domains are intertwined with access to public services. That makes the .gov TLD _critical infrastructure_ for governments, citizens, and international internet users. We work to **make .gov a trusted, secure space** by: 39 | 40 | * administering our [domain requirements]({{ site.baseurl }}/registration/requirements/), 41 | * publishing the [complete list of .gov domains]({{ site.baseurl }}/data/), 42 | * recommending [security best practices]({{ site.baseurl }}/help/security-best-practices/), and 43 | * implementing [key initiatives]( {{site.baseurl }}/2020/6/21/an-intent-to-preload/) to protect the entire namespace. 44 | 45 | We put U.S. governments on the internet, but there are some things we *don’t* do. We don't offer authoritative DNS services, host .gov websites or email, or monitor all .gov network traffic. 46 | 47 | Have a question? [Contact us]( {{site.baseurl }}/help/#contact-us). 48 | -------------------------------------------------------------------------------- /pages/data.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Data 3 | layout: docs 4 | permalink: /data/ 5 | intro: The complete list of .gov domains is updated daily. 6 | 7 | subnav: 8 | - text: All .gov domains 9 | href: '#all-gov-domains' 10 | - text: Federal .gov domains 11 | href: '#federal-gov-domains' 12 | - text: .gov zone file 13 | href: '#gov-zone-file' 14 | --- 15 | 16 | #### All .gov domains 17 | 18 | * [web](https://flatgithub.com/cisagov/dotgov-data/blob/main/?filename=current-full.csv) (flatgithub.com) 19 | * [.csv](https://raw.githubusercontent.com/cisagov/dotgov-data/main/current-full.csv) 20 | 21 | Includes all registered domains from every [domain type]({{ site.baseurl }}/help/#whats-an-authorizing-authority-and-who-is-ours): _federal, tribal, state/territory, interstate, independent intrastate,_ and _city/county_. 22 | 23 | #### Federal .gov domains 24 | 25 | * [web](https://flatgithub.com/cisagov/dotgov-data/blob/main/?filename=current-federal.csv) (flatgithub.com) 26 | * [.csv](https://raw.githubusercontent.com/cisagov/dotgov-data/main/current-federal.csv) 27 | 28 | A subset of all .gov domains, includes only those registered to federal legislative, executive, and judicial agencies. 29 | 30 | #### .gov zone file 31 | * [.txt](https://raw.githubusercontent.com/cisagov/dotgov-data/main/gov.txt) (~5 MB) 32 | * [CZDS](https://czds.icann.org/home) (registration required) 33 | 34 | DNS information and addresses. Updated periodically. 35 | 36 | >*This data is maintained in our [GitHub repository](https://github.com/cisagov/dotgov-data/). If you have questions about the data or suggestions for improving it, feel free to [open an issue](https://github.com/cisagov/dotgov-data/issues).* 37 | -------------------------------------------------------------------------------- /pages/forms/city-county.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Authorization letter template: City/County" 3 | layout: docs 4 | permalink: /registration/authorization-templates/city-county/ 5 | 6 | sidenav: registration 7 | --- 8 | 9 | > **Requests for new .gov domains are paused** until January 2024. See our [blog post]({{ site.baseurl }}/updates/2023/10/13/transition-update/) to learn more. 10 | 11 | [City government letterhead] 12 | 13 | [Date] 14 | 15 | .Gov Domain Registration\ 16 | c/o Verisign, Inc.\ 17 | 12061 Bluemont Way\ 18 | Reston, Virginia 20190 19 | 20 | To the .gov Program: 21 | 22 | As [authorizing authority]({{ site.baseurl }}/registration/requirements/#city-and-county-domains) for [City/County], I request that responsibility for the domain name [\_\_\_\_\_\_\_\_\_\_\_.gov] be delegated to my municipality. 23 | 24 | [*Briefly describe the mission or initiative that drives the domain name request, explaining what the domain name will be used for.*] 25 | 26 | In order to obtain and maintain [\_\_\_\_\_\_\_\_\_\_\_.gov] [City/County] will meet the general and specific requirements for federal agencies, found at [https://get.gov/registration/requirements]({{ site.baseurl }}/registration/requirements/). 27 | 28 | The following will be listed as contacts for [\_\_\_\_\_\_\_\_\_\_\_.gov], which [City/County] will keep up to date in the .gov registrar. 29 | 30 | [*Administrative and technical contacts are named individuals and must be unique; a security contact should generally be a team email address.*] 31 | 32 | **Administrative contact**\ 33 | First Last\ 34 | Title\ 35 | Address\ 36 | Phone number\ 37 | Email address 38 | 39 | **Technical contact**\ 40 | First Last\ 41 | Title\ 42 | Address\ 43 | Phone number\ 44 | Email address 45 | 46 | **Security contact** [[recommended]({{ site.baseurl }}/help/security-best-practices/#add-a-security-contact)]\ 47 | Email address 48 | 49 | I understand that if I wish to retire [\_\_\_\_\_\_\_\_\_\_\_.gov], I must submit a written request to . 50 | 51 | Sincerely,\ 52 | [Signature] 53 | 54 | [Name]\ 55 | [Title] 56 | -------------------------------------------------------------------------------- /pages/forms/federal.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Authorization letter template: Federal" 3 | layout: docs 4 | permalink: /registration/authorization-templates/federal/ 5 | 6 | sidenav: registration 7 | --- 8 | > **Requests for new .gov domains are paused** until January 2024. See our [blog post]({{ site.baseurl }}/updates/2023/10/13/transition-update/) to learn more. 9 | 10 | [Federal agency letterhead] 11 | 12 | [Date] 13 | 14 | .Gov Domain Registration\ 15 | c/o Verisign, Inc.\ 16 | 12061 Bluemont Way\ 17 | Reston, Virginia 20190 18 | 19 | To the .gov Program: 20 | 21 | As [authorizing authority]({{ site.baseurl }}/registration/requirements/#federal-domains) for [Agency Name], I request that responsibility for the domain name [\_\_\_\_\_\_\_\_\_\_\_.gov\] be delegated to my organization. 22 | 23 | [*Briefly describe your agency's mission or initiative that drives the domain name request, explaining what the domain name will be used for.*] 24 | 25 | In order to obtain and maintain [\_\_\_\_\_\_\_\_\_\_\_.gov] [Agency Name] will meet the general and specific requirements for federal agencies, found at [https://get.gov/registration/requirements]({{ site.baseurl }}/registration/requirements/). 26 | 27 | The following will be listed as contacts for [\_\_\_\_\_\_\_\_\_\_\_.gov], which [Agency Name] will keep up to date in the .gov registrar. 28 | 29 | [*Administrative and technical contacts are named individuals and must be unique; a security contact should generally be a team email address.*] 30 | 31 | **Administrative contact**\ 32 | First Last\ 33 | Title\ 34 | Address\ 35 | Phone number\ 36 | Email address 37 | 38 | **Technical contact**\ 39 | First Last\ 40 | Title\ 41 | Address\ 42 | Phone number\ 43 | Email address 44 | 45 | **Security contact** [[required for the executive branch](https://cyber.dhs.gov/bod/20-01/#enable-receipt-of-unsolicited-reports)]\ 46 | Email address 47 | 48 | I understand that if I wish to retire \[\_\_\_\_\_\_\_\_\_\_\_.gov\], I must submit a written request to . 49 | 50 | Sincerely,\ 51 | [Signature] 52 | 53 | [Name]\ 54 | [Title] 55 | -------------------------------------------------------------------------------- /pages/forms/independent-intrastate.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Authorization letter template: Independent intrastate" 3 | layout: docs 4 | permalink: /registration/authorization-templates/independent-intrastate/ 5 | 6 | sidenav: registration 7 | --- 8 | > **Requests for new .gov domains are paused** until January 2024. See our [blog post]({{ site.baseurl }}/updates/2023/10/13/transition-update/) to learn more. 9 | 10 | [Independent intrastate governmental organization letterhead] 11 | 12 | [Date] 13 | 14 | .Gov Domain Registration\ 15 | c/o Verisign, Inc.\ 16 | 12061 Bluemont Way\ 17 | Reston, Virginia 20190 18 | 19 | To the .gov Program: 20 | 21 | As [authorizing authority]({{ site.baseurl }}/registration/requirements/#independent-intrastate-domains) for [Agency Name], I request that responsibility for the domain name [\_\_\_\_\_\_\_\_\_\_\_.gov] be delegated to [Organization]. 22 | 23 | [*Briefly describe your organization's mission or initiative that drives the domain name request, explaining what the domain name will be used for. Describe how your organization is a bona fide government organization that is independent of your state's government. Include links to, or add as an appendix, authorizing legislation, applicable bylaws or charter, or other documentation to support your claims.*] 24 | 25 | In order to obtain and maintain [\_\_\_\_\_\_\_\_\_\_\_.gov] [Organization] will meet the general and specific requirements for federal agencies, found at [https://get.gov/registration/requirements]({{ site.baseurl }}/registration/requirements/). 26 | 27 | The following will be listed as contacts for [\_\_\_\_\_\_\_\_\_\_\_.gov], which [Organization] will keep up to date in the .gov registrar. 28 | 29 | [*Administrative and technical contacts are named individuals and must be unique; a security contact should generally be a team email address.*] 30 | 31 | **Administrative contact**\ 32 | First Last\ 33 | Title\ 34 | Address\ 35 | Phone number\ 36 | Email address 37 | 38 | **Technical contact**\ 39 | First Last\ 40 | Title\ 41 | Address\ 42 | Phone number\ 43 | Email address 44 | 45 | **Security contact** [[recommended]({{ site.baseurl }}/help/security-best-practices/#add-a-security-contact)]\ 46 | Email address 47 | 48 | I understand that if I wish to retire [\_\_\_\_\_\_\_\_\_\_\_.gov], I must submit a written request to . 49 | 50 | Sincerely,\ 51 | [Signature] 52 | 53 | [Name]\ 54 | [Title] 55 | -------------------------------------------------------------------------------- /pages/forms/interstate.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Authorization letter template: Interstate" 3 | layout: docs 4 | permalink: /registration/authorization-templates/interstate/ 5 | 6 | sidenav: registration 7 | --- 8 | > **Requests for new .gov domains are paused** until January 2024. See our [blog post]({{ site.baseurl }}/updates/2023/10/13/transition-update/) to learn more. 9 | 10 | [Interstate governmental organization (or State government) letterhead] 11 | 12 | [Date] 13 | 14 | .Gov Domain Registration\ 15 | c/o Verisign, Inc.\ 16 | 12061 Bluemont Way\ 17 | Reston, Virginia 20190 18 | 19 | To the .gov Program: 20 | 21 | As [authorizing authority]({{ site.baseurl }}/registration/requirements/#interstate-domains) for [Agency Name], I request that responsibility for the domain name [\_\_\_\_\_\_\_\_\_\_\_.gov] be delegated to [Organization]. 22 | 23 | [*Briefly describe your organization's mission or initiative that drives the domain name request, explaining what the domain name will be used for. List the states your organization is associated with and describe the nature of the relationship between them and your organization. Include links to, or add as an appendix, authorizing legislation, applicable bylaws or charter, or other documentation that demonstrates your being a bona fide interstate governmental organization.*] 24 | 25 | In order to obtain and maintain [\_\_\_\_\_\_\_\_\_\_\_.gov] [Organization] will meet the general and specific requirements for federal agencies, found at [https://get.gov/registration/requirements/]({{ site.baseurl }}/registration/requirements). 26 | 27 | The following will be listed as contacts for [\_\_\_\_\_\_\_\_\_\_\_.gov], which [Organization] will keep up to date in the .gov registrar. 28 | 29 | [*Administrative and technical contacts are named individuals and must be unique; a security contact should generally be a team email address.*] 30 | 31 | **Administrative contact**\ 32 | First Last\ 33 | Title\ 34 | Address\ 35 | Phone number\ 36 | Email address 37 | 38 | **Technical contact**\ 39 | First Last\ 40 | Title\ 41 | Address\ 42 | Phone number\ 43 | Email address 44 | 45 | **Security contact** [[recommended]({{ site.baseurl }}/help/security-best-practices/#add-a-security-contact)]\ 46 | Email address 47 | 48 | I understand that if I wish to retire [\_\_\_\_\_\_\_\_\_\_\_.gov], I must submit a written request to . 49 | 50 | Sincerely,\ 51 | [Signature] 52 | 53 | [Name]\ 54 | [Title] 55 | -------------------------------------------------------------------------------- /pages/forms/native-sovereign-nation.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Authorization letter template: Tribal" 3 | layout: docs 4 | permalink: /registration/authorization-templates/tribal/ 5 | 6 | sidenav: registration 7 | --- 8 | > **Requests for new .gov domains are paused** until January 2024. See our [blog post]({{ site.baseurl }}/updates/2023/10/13/transition-update/) to learn more. 9 | 10 | [Tribal government letterhead] 11 | 12 | [Date] 13 | 14 | .Gov Domain Registration\ 15 | c/o Verisign, Inc.\ 16 | 12061 Bluemont Way\ 17 | Reston, Virginia 20190 18 | 19 | To the .gov Program: 20 | 21 | As [authorizing authority]({{ site.baseurl }}/registration/requirements/#tribal-domains) for [Tribe recognized by the Federal or a State government], I request that responsibility for the domain name [\_\_\_\_\_\_\_\_\_\_\_.gov] be delegated to my tribe. 22 | 23 | [*Briefly describe the mission or initiative that drives the domain name request, explaining what the domain name will be used for. Include links to, or add as an appendix, authorizing Tribal resolution, legislation, applicable bylaws or charter, or other documentation that demonstrates your tribe has been recognized by the Federal or a State government.*] 24 | 25 | In order to obtain and maintain [\_\_\_\_\_\_\_\_\_\_\_.gov] [Tribe] will meet the general and specific requirements for federal agencies, found at [https://get.gov/registration/requirements]({{ site.baseurl }}/registration/requirements/). 26 | 27 | The following will be listed as contacts for [\_\_\_\_\_\_\_\_\_\_\_.gov], which [Tribe] will keep up to date in the .gov registrar. 28 | 29 | [*Administrative and technical contacts are named individuals and must be unique; a security contact should generally be a team email address.*] 30 | 31 | **Administrative contact**\ 32 | First Last\ 33 | Title\ 34 | Address\ 35 | Phone number\ 36 | Email address 37 | 38 | **Technical contact**\ 39 | First Last\ 40 | Title\ 41 | Address\ 42 | Phone number\ 43 | Email address 44 | 45 | **Security contact** [[recommended]({{ site.baseurl }}/help/security-best-practices/#add-a-security-contact)]\ 46 | Email address 47 | 48 | I understand that if I wish to retire [\_\_\_\_\_\_\_\_\_\_\_.gov], I must submit a written request to . 49 | 50 | Sincerely,\ 51 | [Signature] 52 | 53 | [Name]\ 54 | [Title] 55 | -------------------------------------------------------------------------------- /pages/forms/state-territory.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Authorization letter template: State/U.S. Territory" 3 | layout: docs 4 | permalink: /registration/authorization-templates/state-territory/ 5 | 6 | sidenav: registration 7 | --- 8 | > **Requests for new .gov domains are paused** until January 2024. See our [blog post]({{ site.baseurl }}/updates/2023/10/13/transition-update/) to learn more. 9 | 10 | [State/Territory government letterhead] 11 | 12 | [Date] 13 | 14 | .Gov Domain Registration\ 15 | c/o Verisign, Inc.\ 16 | 12061 Bluemont Way\ 17 | Reston, Virginia 20190 18 | 19 | To the .gov Program: 20 | 21 | As [authorizing authority]({{ site.baseurl }}/registration/requirements/#state-and-us-territory-domains) for [Agency Name], I request that responsibility for the domain name [\_\_\_\_\_\_\_\_\_\_\_.gov] be delegated to [Organization]. 22 | 23 | [*Briefly describe your organization's mission or initiative that drives the domain name request, explaining what the domain name will be used for.*] 24 | 25 | In order to obtain and maintain [\_\_\_\_\_\_\_\_\_\_\_.gov] [Organization] will meet the general and specific requirements for federal agencies, found at [https://get.gov/registration/requirements]({{ site.baseurl }}/registration/requirements/). 26 | 27 | The following will be listed as contacts for [\_\_\_\_\_\_\_\_\_\_\_.gov], which [Organization] will keep up to date in the .gov registrar. 28 | 29 | [*Administrative and technical contacts are named individuals and must be unique; a security contact should generally be a team email address.*] 30 | 31 | **Administrative contact**\ 32 | First Last\ 33 | Title\ 34 | Address\ 35 | Phone number\ 36 | Email address 37 | 38 | **Technical contact**\ 39 | First Last\ 40 | Title\ 41 | Address\ 42 | Phone number\ 43 | Email address 44 | 45 | **Security contact** [[recommended]({{ site.baseurl }}/help/security-best-practices/#add-a-security-contact)]\ 46 | Email address 47 | 48 | I understand that if I wish to retire [\_\_\_\_\_\_\_\_\_\_\_.gov], I must submit a written request to . 49 | 50 | Sincerely,\ 51 | [Signature] 52 | 53 | [Name]\ 54 | [Title] 55 | -------------------------------------------------------------------------------- /pages/forms/transfers.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: "Domain Transfer Letter" 3 | layout: docs 4 | permalink: /management/authorization-templates/transfers/ 5 | 6 | sidenav: registration 7 | --- 8 | 9 | [Agency letterhead] 10 | 11 | [Date] 12 | 13 | .Gov Domain Registration\ 14 | c/o Verisign, Inc.\ 15 | 12061 Bluemont Way\ 16 | Reston, Virginia 20190 17 | 18 | To the .gov Program: 19 | 20 | As [authorizing authority]({{ site.baseurl }}/registration/requirements/#federal-domains) for [Agency Name], I request that responsibility for the domain name [\_\_\_\_\_\_\_\_\_\_\_.gov\] be transferred [to \_\_\_\_\_\_\_\_\_\_\_ /from my organization]. 21 | 22 | [*Briefly state why this domain is being transferred to/from your agency.*] 23 | 24 | [*If **receiving**, complete the contact information. Administrative, technical, and billing contacts are named individuals and must be unique; a security contact should generally be a team email address.*] 25 | 26 | The following will be listed as contacts for [\_\_\_\_\_\_\_\_\_\_\_.gov], which [Organization] will keep up to date in the .gov registrar. 27 | 28 | **Administrative contact**\ 29 | First Last\ 30 | Title\ 31 | Address\ 32 | Phone number\ 33 | Email address 34 | 35 | **Technical contact**\ 36 | First Last\ 37 | Title\ 38 | Address\ 39 | Phone number\ 40 | Email address 41 | 42 | [*Most domains created before 2022 have a billing contact. If the domain has a billing contact, the receiving agency will also need to define one.*] 43 | 44 | _**Billing contact**\ 45 | First Last\ 46 | Title\ 47 | Address\ 48 | Phone number\ 49 | Email address_ 50 | 51 | **Security contact** [[required for the executive branch](https://cyber.dhs.gov/bod/20-01/#enable-receipt-of-unsolicited-reports)]\ 52 | Email address 53 | 54 | I understand that if I wish to retire [\_\_\_\_\_\_\_\_\_\_\_.gov], I must submit a written request to . 55 | 56 | Sincerely,\ 57 | [Signature] 58 | 59 | [Name]\ 60 | [Title] 61 | -------------------------------------------------------------------------------- /pages/home.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Home 3 | layout: landing 4 | permalink: / 5 | top: false 6 | 7 | hero: 8 | heading: It should be easy to identify governments on the internet. 9 | content: .gov is the top-level domain for U.S.-based government organizations. 10 | button: 11 | text: Manage your domain 12 | href: https://manage.get.gov 13 | --- 14 | 15 |
16 |
17 |
18 | ## Recent updates 19 |
20 | 21 | 22 |
23 | 24 | **November 17th, 2023**: We've emailed all .gov registrants with instructions on how to access the new .gov registrar. Domain requests are still [paused]({{ site.baseurl }}/updates/2023/10/13/transition-update/) until January 2024. 25 | 26 | **October 13th, 2023**: New domain requests are [paused]({{ site.baseurl }}/updates/2023/10/13/transition-update/) until January 2024 as we transition to new infrastructure. 27 | 28 | **September 6, 2023**: We're leading a [change to .gov's infrastructure]({{ site.baseurl }}/updates/2023/9/6/infrastructure-as-a-public-service/) that requires current users to take certain actions. In October 2023, we'll also initiate a pause on new domain requests. 29 | 30 | **February 8th, 2023**: Federal executive branch agencies have [updated requirements]({{ site.baseurl }}/registration/requirements/#executive-branch) for the registration and use of .gov domains, via [OMB Memorandum 23-10](https://www.whitehouse.gov/wp-content/uploads/2023/02/M-23-10-DOTGOV-Act-Guidance.pdf). The update details how domains are requested and which may be approved. 31 | 32 | **January 31st, 2023**: The .gov zone file is [now available](https://czds.icann.org/home) in ICANN's Centralized Zone Data Service. [Learn more]({{ site.baseurl }}/updates/2022/9/14/making-infrastructure-less-invisible/#publishing-the-gov-zone-file) in last September's blog post. 33 | -------------------------------------------------------------------------------- /pages/privacy.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Privacy policy 3 | layout: docs 4 | permalink: /privacy/ 5 | intro: Thank you for visiting dotgov.gov 6 | --- 7 | 8 | Our privacy policy is clear: Unless you choose to provide additional information to us, we will collect no personal information about you other than statistical information that can be used to make the site more effective for all our visitors. 9 | 10 | ## Information we gather 11 | 12 | The only information that is automatically collected and stored is: 13 | 14 | - the name of the domain from which you access the internet (i.e., DHS.gov if you are connecting from a DHS account, or GMU.edu if you are connecting from George Mason University’s domain) 15 | - the date and time of your visit 16 | - the pages you visit on [dotgov.gov](https://domains.dotgov.gov) 17 | - the internet address of the website you came from if it linked you directly to [dotgov.gov](https://domains.dotgov.gov) 18 | - search terms that you enter into the dotgov.gov search tool 19 | 20 | If your browser accepts cookies, we may use a session cookie to lean how many different visitors come to [dotgov.gov](https://domains.dotgov.gov). We use this information for statistical purposes and to help us make our site more useful to you. 21 | 22 | ## Information you send us 23 | 24 | When you send us personal information (e.g., in an electronic mail message containing a question or comment) or by filling out a form that emails us this information, we only use this information to respond to your request. Such application information is carefully protected by the agency and not available in or retained by web tracking software. We may forward your email to the government employee who can best answer your question(s). We do not disclose, give, sell, or transfer any personal information about our visitors, unless required for law enforcement or statute. 25 | 26 | Domain Registration information: Registration information for .Gov domains requires Point of Contact information. In order to support security of the internet, we are required to offer the WHOIS service with respect to the top-level domain.Gov for which we are the registry. This service allows you or anyone else to determine the availability of domain names and the contact information for the registrar who registered a domain name on behalf of a registrant. WHOIS service typically contains the registrant’s name, contact person's name, address, telephone number, email address, and/or IP address as provided to us by the registrar for the domain name. Via the WHOIS service, this information may be disclosed to unaffiliated third parties in order to determine the registrant or the registrar in case of: 27 | 28 | 1. technical problems that might occur when accessing its domain 29 | 2. assisting law enforcement authorities in investigations, crime prevention, and matters of national security 30 | 3. helping to counter the infringement of third-party legal rights 31 | 4. preventing fraud 32 | 33 | However, only that data necessary for the purposes described above. 34 | 35 | We want to make it clear that we will not obtain personally identifying information about you when you visit our site, unless you choose to provide that information to us. Except for authorized law enforcement investigations, or as otherwise required by law, we do not share any information we receive with anyone else. 36 | 37 | ## Security 38 | 39 | For site security purposes and to ensure that this service remains available to all users, GSA servers (owned or contracted), use industry-standard methods to monitor network traffic to identify unauthorized attempts to upload or change information, or otherwise cause damage. Unauthorized attempts to upload information or change information on GSA servers are strictly prohibited and may be punishable by law, including the Computer Fraud and Abuse Act of 1986 and the National Information Infrastructure Protection Act. 40 | -------------------------------------------------------------------------------- /pages/registration/registration.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Registration 3 | layout: docs 4 | permalink: /registration/ 5 | sidenav: registration 6 | 7 | --- 8 | > **Requests for new .gov domains are paused** until January 2024. See our [blog post]({{ site.baseurl }}/updates/2023/10/13/transition-update/) to learn more. 9 | 10 | * If you want a new .gov domain, you can prepare by reviewing [the new domain request process](https://beta.get.gov/domains/before/) on the beta version of our new website. 11 | * You can [get notified](https://forms.office.com/g/aLbfNuuFD4) when .gov opens for new requests. 12 | * If you submitted a request before October 13, 2023, it will be reviewed before the move to our new registrar. 13 | 14 | [Contact us]({{ site.baseurl }}/help/#contact-us) if you have questions. 15 | -------------------------------------------------------------------------------- /pages/registration/request-templates.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Authorization letter templates 3 | layout: docs 4 | permalink: /registration/authorization-templates/ 5 | warn: Requests for new .gov domains are paused** until January 2024. 6 | sidenav: registration 7 | --- 8 | 9 | > **Requests for new .gov domains are paused** until January 2024. See our [blog post]({{ site.baseurl }}/updates/2023/10/13/transition-update/) to learn more. 10 | 11 | Choose an authorization letter template to copy and paste from: 12 | 13 | * [City/County]({{ site.baseurl }}/registration/authorization-templates/city-county/) 14 | * [Federal]({{ site.baseurl }}/registration/authorization-templates/federal/) 15 | * [State/U.S. territory]({{ site.baseurl }}/registration/authorization-templates/state-territory/) 16 | * [Tribal]({{ site.baseurl }}/registration/authorization-templates/tribal) 17 | * [Interstate]({{ site.baseurl }}/registration/authorization-templates/interstate/) 18 | * [Independent intrastate]({{ site.baseurl }}/registration/authorization-templates/independent-intrastate/) 19 | 20 | *Unsure which letter to select?* Check out the FAQ, [What's an "authorizing authority", and who is ours?]({{site.basurl}}/help/#whats-an-authorizing-authority-and-who-is-ours) for a breakdown of each domain type. 21 | 22 | CISA will share approved authorization letters submitted by the authorizing authority with the U.S. Census Bureau, including letters that have already been collected by CISA. 23 | -------------------------------------------------------------------------------- /pages/updates/2023-transition-email.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Action required for your .gov account 3 | layout: docs 4 | permalink: /updates/2023/9/6/transition-email/ 5 | intro: An email sent to .gov registrants, September 2023 6 | subnav: 7 | - text: What's happening? 8 | href: '#whats-happening' 9 | - text: What do I need to do? 10 | href: '#what-do-i-need-to-do' 11 | - text: What other changes impact my organization? 12 | href: '#what-other-changes-impact-my-organization' 13 | --- 14 | 15 | Hello from .gov. We're emailing to notify you about changes coming to the .gov registrar that will affect your account. 16 | 17 | ### What's happening? 18 | 19 | We [built a new way]({{ site.baseurl }}/updates/2023/9/6/infrastructure-as-a-public-service/) to request and manage .gov domains – _**a new .gov registrar**_. We'll retire our current platform in late fall 2023. The new registrar will be the foundation for the services we'll offer in the coming years. 20 | 21 | To access the new registrar, you'll need a [Login.gov](https://login.gov) account that is linked to the same email address you're using in our current registrar. In preparation, we ask that you set up that account now. 22 | 23 | Login.gov provides a simple and secure process for signing into many government services with one account. It also lets you choose from several multi-factor authentication options, including phishing-resistant choices like security keys or the U.S. government’s PIV (personal identity verification) cards or CACs (common access cards). 24 | 25 | ### What do I need to do? 26 | 27 | 1. First, check which email address you use in the current registrar. Log in at [https://domains.dotgov.gov](https://domains.dotgov.gov) and click "Account" in the side navigation. If you need to update this address, please [contact us]({{ site.baseurl }}/help/#contact-us). 28 | 29 | 2. Next, [create a Login.gov account](https://www.login.gov/create-an-account/). Verify your identity to confirm you're you and not someone pretending to be you. Once you have your Login.gov account, you're all set. We'll email you when you can access the new registrar. (If you need assistance setting up your account, review [https://login.gov/help/](https://login.gov/help/).) 30 | 31 | *If you don't take these actions **before early November**, you will lose the ability to make changes to your domain's nameservers.* However, your DNS will remain unchanged and will still resolve online. 32 | 33 | ### What other changes impact my organization? 34 | 35 | * *Our contact details are changing*. We'll begin using help@get.gov for email correspondence and will end phone support in November. You can still [contact us]({{ site.baseurl }}/help/#contact-us) by phone until then. 36 | 37 | * *We will pause new domain requests while we transition to the new system*. We anticipate this will last from October 2023 until January 2024. You can [request to be notified](https://forms.office.com/g/aLbfNuuFD4) when domain registrations open again. 38 | 39 | * *Future domain name requests will not require a physical signature.* Our new request process is fully digital, so your ranking official won't need to sign a letter any longer. 40 | 41 | * *Expiration dates will be automatically extended on all domains by one year*. There's no action needed on your part. 42 | 43 | * *You will be responsible for certificate authorization*. Organizations that wish to use Organization Validated or Extended Validation certificates will need a public security contact in Whois for your domain, which can be set at our registrar. 44 | 45 | ### Changing for better 46 | 47 | We’re building a better way to get and manage a .gov domain. We’ve also shared other changes happening to the .gov infrastructure in a [blog on get.gov]({{ site.baseurl }}/updates/2023/9/6/infrastructure-as-a-public-service/). 48 | 49 | We’ll work to make these changes as easy as we can for the .gov community, and we welcome your feedback. 50 | 51 | \- The .gov team 52 | -------------------------------------------------------------------------------- /pages/updates/2023-transition.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Infrastructure as a (public) service 3 | layout: docs 4 | permalink: /updates/2023/9/6/infrastructure-as-a-public-service/ 5 | intro: Coming soon – a better way to get and manage a .gov 6 | subnav: 7 | - text: Three changes coming to .gov 8 | href: '#three-changes-coming-to-gov-this-fall' 9 | - text: How these changes impact governments 10 | href: '#how-these-changes-impact-governments' 11 | - text: Changing for better 12 | href: '#changing-for-better' 13 | --- 14 | ###### September 6, 2023 15 | 16 | *By: Cameron Dixon, .gov registry manager* 17 | 18 | It should be easy for governments to get a .gov domain – and hard to manage one insecurely. So, over the next few months, CISA will initiate major changes to the .gov top-level domain’s tech infrastructure, laying a foundation for the services we will offer in the coming years. We have great plans for making .gov the place governments want to be online. 19 | 20 | We [announced]({{ site.baseurl }}/updates/2022/9/14/making-infrastructure-less-invisible/) much of this work a year ago; here’s an update on our progress. 21 | 22 | ### Three changes coming to .gov this fall 23 | 24 | 1. **Moving the .gov registry and DNS**: The most critical element of our work, the *global publication of the .gov DNS zone and related registry software*, will transition to a new service provider. This shift will be carefully coordinated to ensure no impact to U.S.-based government organizations or the public, who depend on .gov websites and email addresses. (To be clear, we don’t run those websites or mail servers, but .gov is the supporting technology layer that makes them navigable online.) 25 | 26 | 2. **A new online home for .gov domains**: We’re launching a new *registrar*, the online home for governments to request and manage a .gov domain. We put the domain request process online (no more physical signatures required). The new registrar will enable many future features, like DNS hosting. Moving to the new registrar requires our users to take some actions, which we detailed in an [email to domain registrants]({{ site.baseurl }}/updates/2023/9/6/transition-email/). 27 | 28 | 3. **A new website for .gov**: Finally, we’re sharing a *beta version of our new website*, which will help governments learn about .gov and why they should use it. We’re still building and testing this site, so that’s why the URL is [beta.get.gov](https://beta.get.gov). 29 | 30 | Both the registrar and our new website are being developed as open source software. You can check out the code for [the registrar](https://github.com/cisagov/getgov) and our [beta site](https://github.com/cisagov/getgov-home) on GitHub. 31 | 32 | ### How these changes impact governments 33 | 34 | * *Our contact details are changing*. We’ll begin using help@get.gov for email correspondence and end phone support in November. You can still [contact us]({{ site.baseurl }}/help/#contact-us) by phone until then. 35 | * *We will pause new domain requests while we transition to the new system*. We anticipate this pause will last from October 2023 until January 2024. You can [request to be notified](https://forms.office.com/g/aLbfNuuFD4) when domain registrations open again. 36 | * *Future domain name requests will not require a physical signature*. Our new request process is fully digital, so your ranking official won’t need to sign a letter any longer. 37 | * *Expiration dates will be automatically extended on all domains by one year*. There’s no action needed on your part. 38 | * *You will be responsible for certificate authorization*. Organizations that wish to use Organization Validated or Extended Validation certificates will need a [security contact]({{ site.baseurl}}/help/security-best-practices/#add-a-security-contact) in Whois for your domain, which can be set at our [current registrar](https://domains.dotgov.gov). 39 | 40 | ### Changing for better 41 | 42 | We’re building a better and more secure way to get and manage a .gov domain, but we understand change can be hard. We'll work to make these changes as easy as we can for the .gov community, and we welcome your feedback. 43 | 44 | .Gov is infrastructure as a (public) service. This work sets the stage for everything good that will follow. For instance, in response to requests from many of you, we plan to offer DNS hosting for .gov domains by the end of 2024. 45 | 46 | If you have any questions or comments, feel free to [reach out to us](https://get.gov/help/#contact-us). -------------------------------------------------------------------------------- /pages/updates/increase-security-passwords.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Increasing the security of passwords 3 | layout: docs 4 | permalink: /2018/4/17/increase-security-passwords/ 5 | redirect_from: 6 | - /password-update/ 7 | --- 8 | 9 | The DotGov registrar has added a security feature to prevent the use of passwords that have been identified in various publicly known data breaches. **All DotGov users will need to update their password** – even if your password has not been re-used or breached – in order for your account to be protected. 10 | 11 | ## Why is this change happening? 12 | The secrecy of your password is crucial to account security, and password reuse is the most common threat to password secrecy. An attacker who breaches one system’s password can often pivot to another system using those credentials. 13 | 14 | By ensuring that [passwords found in data taken from past public breaches](https://www.troyhunt.com/introducing-306-million-freely-downloadable-pwned-passwords/) cannot be used, we minimize the threat of password reuse. 15 | 16 | To do this, we have to ask **all** DotGov users to reset their passwords, because the only practical way for us to implement this check is to do it at the moment a user selects a password. After a user sets their password, it is stored in such a way that it cannot efficiently be checked against lists of known-breached passwords. 17 | 18 | To be clear, this action is **not** being taken because of a breach on any DotGov-related system. The General Services Administration is proactively working to improve the security of the .gov zone for its users and administrators. 19 | 20 | ## What should DotGov users do now? 21 | 1. We **strongly recommend that you use a password manager** to generate and store a long, complex, unique password used only for the DotGov service. 22 | 23 | 2. Change your password at [https://domains.dotgov.gov](https://domains.dotgov.gov). If it’s in a publicly known data breach, you will be asked to select a different one. _If you get this alert and it’s a password you use anywhere else_, we urge you to **change your password in those applications**, too. 24 | -------------------------------------------------------------------------------- /pages/updates/moving-to-cisa.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: .gov is moving to CISA 3 | layout: docs 4 | permalink: /2021/3/8/moving-to-cisa/ 5 | redirect_from: 6 | - /moving-to-cisa/ 7 | subnav: 8 | - text: What's happening now 9 | href: '#whats-happening-now' 10 | - text: What's happening next 11 | href: '#whats-happening-next' 12 | --- 13 | ###### March 8, 2021 14 | 15 | .gov exists so that the online services of bona fide U.S.-based government organizations are easy to identify on the internet. Increasing and normalizing its use helps the public know where to find official government information -- *and where not to*. 16 | 17 | For those that use it, .gov is *critical infrastructure*: it's central to the availability and integrity of thousands of online services relied upon by millions of users. Since it underpins communication with and within these institutions, all aspects of .gov's administration have cybersecurity significance. 18 | 19 | ## What's happening now 20 | 21 | Because of this, the **[Cybersecurity and Infrastructure Security Agency](https://cisa.gov) will be the new policy and management authority for the .gov top-level domain** (TLD), assuming governance from the U.S. General Services Administration (GSA). This is happening under the DOTGOV Act of 2020, legislation that was part of the recently enacted [Consolidated Appropriations Act of 2021](https://www.congress.gov/bill/116th-congress/house-bill/133/text/enr#:~:text=dotgov). For more than 20 years, GSA has supported government organizations and worked to make .gov a trusted space. CISA is committed to that aim, too. We'll be good stewards of the program GSA created and .gov's shared infrastructure, and we thank the dedicated public servants at GSA for their work. 22 | 23 | For current .gov registrants, the transfer won't impact use of the [.gov registrar](https://domains.dotgov.gov/), which is where domains are managed, renewed, and where new domains can be requested. GSA and CISA are working together to ensure a seamless transition in day-to-day operations, which will be finalized by late April. 24 | 25 | ## What's happening next 26 | 27 | In the coming months and years, CISA intends to provide a user-centered platform for DNS management, help government organizations maintain better awareness of the security threats their .gov systems are exposed to, and offer additional services to support the privacy, reliability, accessibility, and speed of .gov domains. 28 | 29 | The DOTGOV Act reports Congress' finding that "the .gov internet domain should be available at no cost or a negligible cost" to U.S.-based government organizations. CISA is working on this -- and we ask for your patience. The way .gov domains are priced is tied closely with the service contract to operate the TLD, and change in the price of a domain is not expected until next year. The Act also contemplates the use of Homeland Security Grants for "migrating any online service" to .gov, a process we will work out with FEMA. 30 | 31 | .gov holds a unique place in internet history, and we couldn't be more excited to honor and build on that legacy. If you're from the government, we're here to help: 32 | 33 | - To obtain a .gov domain, check out [dotgov.gov](https://home.dotgov.gov/registration/). 34 | - If you're a U.S.-based government organization, we want to hear what you'd like to see in .gov and what challenges we can help resolve: email us at . 35 | -------------------------------------------------------------------------------- /pages/updates/updates.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Updates 3 | layout: docs 4 | intro: What's happening around .gov 5 | permalink: /updates/ 6 | subnav: 7 | - text: 2023 8 | href: '#2023' 9 | - text: 2022 10 | href: '#2022' 11 | - text: 2021 12 | href: '#2021' 13 | - text: 2020 14 | href: '#2020' 15 | - text: 2019 16 | href: '#2019' 17 | - text: 2018 18 | href: '#2018' 19 | - text: 2017 20 | href: '#2017' 21 | --- 22 | ### 2023 23 | 24 | * *November 17th*: **A new registrar**: We've emailed all .gov registrants with instructions on how to access the new .gov registrar. 25 | 26 | * *October 13th*: **[A temporary pause]({{ site.baseurl }}/updates/2023/10/13/transition-update/)**: new domain requests are paused until January 2024. 27 | 28 | * *September 6th:* **[Infrastructure as a (public) service]({{ site.baseurl }}/updates/2023/9/6/infrastructure-as-a-public-service/)**. In fall 2023, we'll launch a new registrar: a better way to get and manage a .gov domain. 29 | 30 | * *February 8th*: **[Updated requirements]({{ site.baseurl }}/registration/requirements/#executive-branch)** for federal executive branch agencies via [OMB Memorandum 23-10](https://www.whitehouse.gov/wp-content/uploads/2023/02/M-23-10-DOTGOV-Act-Guidance.pdf). The update details how domains are requested and which may be approved. 31 | 32 | * *January 31st*: **[The .gov zone file is available](https://czds.icann.org/home)** via ICANN's Centralized Zone Data Service. Learn more in [last September's blog post]({{ site.baseurl }}/updates/2022/9/14/making-infrastructure-less-invisible/#publishing-the-gov-zone-file). 33 | 34 | ### 2022 35 | 36 | * *September 14th:* **[Making infrastructure less invisible]({{ site.baseurl }}/updates/2022/9/14/making-infrastructure-less-invisible)**. Invisible consistency tends to be a trait of good infrastructure, but it doesn't have to be hidden. 37 | 38 | ### 2021 39 | 40 | * *July 21st:* **[About .gov, for elections]({{ site.baseurl}}/about/elections)**. We've added a page to help the election community learn about .gov. 41 | 42 | * *June 30:* **[A request for information](https://sam.gov/opp/78749b4fc58145568148dbdecfa83f6d/view)**. We released an RFI to gather feedback on our objectives for .gov's next phase. 43 | 44 | * *April 27:* **[A new day for .gov]({{ site.baseurl }}/2021/4/27/a-new-day-for-gov/)**. Domains are available to qualifying U.S.-based government organizations *at no cost*, and the registration requirements have been updated. 45 | 46 | * *March 8:* **[.gov is moving to CISA]({{ site.baseurl }}/2021/3/8/moving-to-cisa/)**. The .gov TLD is moving to the Cybersecurity and Infrastructure Security Agency. 47 | 48 | ### 2020 49 | * *June 21:* **[An intent to preload]({{ site.baseurl }}/2020/6/21/an-intent-to-preload/)**. HSTS preloading can protect individual domains names, but it can also be applied to a top-level domain. 50 | 51 | ### 2019 52 | * *July 17:* **[DNS change notifications]({{ site.baseurl }}/help/#will-i-be-notified-if-a-change-is-made-to-my-dns-information)**. Authorized .gov domain contacts will receive a system-generated email when a change is made to their DNS in the .gov registrar. 53 | 54 | ### 2018 55 | * *October 29:* **[GSA steps up security for .gov](https://digital.gov/2018/10/29/gsa-steps-up-security-for-dotgov/)**. This guest post on digital.gov summarized many of this year's activities. 56 | * *October 1:* **[Doing the 2-step]({{ site.baseurl }}/2018/10/1/doing-the-2-step/)**. We added a new feature – and made it mandatory – to improve the security of .gov registrar accounts. 57 | * *August 21:* **[Opt-in to preload your domains]({{ site.baseurl }}/management/preloading/)**. New .gov domains can opt-in to HSTS preloading at the time of registration. 58 | 59 | * *April 17:* **[Increasing the security of passwords](/2018/4/17/increase-security-passwords/)**. We minimize the threat of password reuse by ensuring that passwords found in data taken from past public breaches cannot be used. 60 | 61 | ### 2017 62 | * *January 19:* **[Automatic HTTPS enforcement for new executive branch .gov domains](https://www.cio.gov/2017/01/19/automatic-https.html)**. A guest post on cio.gov. As new executive branch domains are registered, they will be submitted to web browsers for “preloading.” 63 | --------------------------------------------------------------------------------