uswds-jekyll 2.0.1 → 2.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (59) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +28 -3
  3. data/_includes/analytics.html +20 -0
  4. data/_includes/components/header--basic.html +2 -2
  5. data/_includes/components/header--extended.html +3 -3
  6. data/_includes/components/hero.html +1 -1
  7. data/_includes/subnav.html +1 -1
  8. data/_layouts/default.html +3 -0
  9. data/_sass/uswds/components/_accordions.scss +11 -11
  10. data/_sass/uswds/components/_alerts.scss +60 -29
  11. data/_sass/uswds/components/_footer.scss +176 -40
  12. data/_sass/uswds/components/_header.scss +6 -9
  13. data/_sass/uswds/components/_hero.scss +1 -7
  14. data/_sass/uswds/components/_navigation.scss +115 -20
  15. data/_sass/uswds/components/_search.scss +32 -27
  16. data/_sass/uswds/core/_base.scss +5 -0
  17. data/_sass/uswds/core/_utilities.scss +25 -5
  18. data/_sass/uswds/core/_variables.scss +77 -45
  19. data/_sass/uswds/elements/_buttons.scss +76 -50
  20. data/_sass/uswds/elements/_inputs.scss +49 -44
  21. data/_sass/uswds/elements/_labels.scss +2 -2
  22. data/_sass/uswds/elements/_table.scss +30 -22
  23. data/_sass/uswds/elements/_typography.scss +11 -8
  24. data/_sass/uswds/uswds.scss +1 -1
  25. data/assets/uswds/CONTRIBUTING.md +33 -0
  26. data/assets/uswds/LICENSE.md +0 -8
  27. data/assets/uswds/README.md +2 -2
  28. data/assets/uswds/css/uswds.css +862 -476
  29. data/assets/uswds/css/uswds.min.css +2 -2
  30. data/assets/uswds/css/uswds.min.css.map +1 -1
  31. data/assets/uswds/img/arrow-both.png +0 -0
  32. data/assets/uswds/img/arrow-both.svg +1 -0
  33. data/assets/uswds/img/close-primary.png +0 -0
  34. data/assets/uswds/img/close-primary.svg +16 -0
  35. data/assets/uswds/img/close.png +0 -0
  36. data/assets/uswds/img/close.svg +12 -1
  37. data/assets/uswds/img/search-primary.png +0 -0
  38. data/assets/uswds/img/search-primary.svg +12 -0
  39. data/assets/uswds/js/uswds.js +45 -13
  40. data/assets/uswds/js/uswds.min.js +1 -1
  41. data/assets/uswds/js/uswds.min.js.map +1 -1
  42. data/assets/uswds/scss/components/_accordions.scss +11 -11
  43. data/assets/uswds/scss/components/_alerts.scss +60 -29
  44. data/assets/uswds/scss/components/_footer.scss +176 -40
  45. data/assets/uswds/scss/components/_header.scss +6 -9
  46. data/assets/uswds/scss/components/_hero.scss +1 -7
  47. data/assets/uswds/scss/components/_navigation.scss +115 -20
  48. data/assets/uswds/scss/components/_search.scss +32 -27
  49. data/assets/uswds/scss/core/_base.scss +5 -0
  50. data/assets/uswds/scss/core/_utilities.scss +25 -5
  51. data/assets/uswds/scss/core/_variables.scss +77 -45
  52. data/assets/uswds/scss/elements/_buttons.scss +76 -50
  53. data/assets/uswds/scss/elements/_inputs.scss +49 -44
  54. data/assets/uswds/scss/elements/_labels.scss +2 -2
  55. data/assets/uswds/scss/elements/_table.scss +30 -22
  56. data/assets/uswds/scss/elements/_typography.scss +11 -8
  57. data/assets/uswds/scss/uswds.scss +1 -1
  58. data/assets/uswds/{uswds-1.3.1.zip → uswds-1.4.3.zip} +0 -0
  59. metadata +11 -4
@@ -28,3 +28,8 @@ body {
28
28
  [hidden] {
29
29
  display: none !important; /* stylelint-disable-line declaration-no-important */
30
30
  }
31
+
32
+ *:focus,
33
+ .usa-focus {
34
+ @include focus;
35
+ }
@@ -30,12 +30,18 @@
30
30
  }
31
31
 
32
32
  @mixin h6 {
33
- font-family: $font-sans;
34
33
  font-size: $h6-font-size;
35
34
  font-weight: $font-normal;
35
+ line-height: $base-line-height;
36
36
  text-transform: uppercase;
37
37
  }
38
38
 
39
+ // Focus state mixin
40
+ @mixin focus {
41
+ outline: $focus-outline;
42
+ outline-offset: $focus-spacing;
43
+ }
44
+
39
45
  // Mobile-first media query helper
40
46
  @mixin media($bp) {
41
47
  @media screen and (min-width: #{$bp}) {
@@ -49,6 +55,15 @@
49
55
  left: -999em;
50
56
  }
51
57
 
58
+ // This "negates" the sr-only() helper; useful if
59
+ // we want the default state of something to be
60
+ // for screen readers only, but we want to force
61
+ // it to show for sighted users under more specific
62
+ // conditions.
63
+ @mixin not-sr-only() {
64
+ position: static;
65
+ }
66
+
52
67
  .usa-sr-only {
53
68
  @include sr-only();
54
69
  }
@@ -132,8 +147,8 @@
132
147
 
133
148
  @mixin display-icon($icon, $direction, $size, $margin, $hover) {
134
149
  &::#{$direction} {
135
- background-image: url(#{$image-path}/#{$icon}.png);
136
- background-image: url(#{$image-path}/#{$icon}.svg);
150
+ background-image: url('#{$image-path}/#{$icon}.png');
151
+ background-image: url('#{$image-path}/#{$icon}.svg');
137
152
  background-size: 100%;
138
153
  content: '';
139
154
  display: inline-block;
@@ -151,8 +166,8 @@
151
166
 
152
167
  @if $hover == 'hover' {
153
168
  &:hover::#{$direction} {
154
- background-image: url(#{$image-path}/#{$icon}-hover.png);
155
- background-image: url(#{$image-path}/#{$icon}-hover.svg);
169
+ background-image: url('#{$image-path}/#{$icon}-hover.png');
170
+ background-image: url('#{$image-path}/#{$icon}-hover.svg');
156
171
  }
157
172
  }
158
173
  }
@@ -186,6 +201,7 @@
186
201
  }
187
202
 
188
203
  &:focus {
204
+ outline-offset: 0;
189
205
  position: relative;
190
206
  z-index: 1;
191
207
  }
@@ -224,6 +240,10 @@
224
240
  a {
225
241
  padding-left: 3.8rem;
226
242
 
243
+ &:focus {
244
+ outline-offset: 0;
245
+ }
246
+
227
247
  &:hover {
228
248
  padding-left: 3.8rem;
229
249
  }
@@ -28,60 +28,82 @@ $lead-line-height: 1.7 !default;
28
28
  $font-sans: 'Source Sans Pro', $helvetica !default;
29
29
  $font-serif: 'Merriweather', $georgia !default;
30
30
 
31
+ // TODO these should be called font-weight-${}
31
32
  $font-normal: 400 !default;
32
33
  $font-bold: 700 !default;
33
34
 
34
35
  // Color
35
- $color-primary: #0071bc !default;
36
- $color-primary-darker: #205493 !default;
37
- $color-primary-darkest: #112e51 !default;
38
-
39
- $color-primary-alt: #02bfe7 !default;
40
- $color-primary-alt-dark: #00a6d2 !default;
41
- $color-primary-alt-darkest: #046b99 !default;
42
- $color-primary-alt-light: #9bdaf1 !default; // lighten($color-primary-alt, 60%)
43
- $color-primary-alt-lightest: #e1f3f8 !default; // lighten($color-primary-alt, 90%)
44
-
45
- $color-secondary: #e31c3d !default;
46
- $color-secondary-dark: #cd2026 !default;
47
- $color-secondary-darkest: #981b1e !default;
48
- $color-secondary-light: #e59393 !default; // lighten($color-secondary, 60%)
49
- $color-secondary-lightest: #f9dede !default; // lighten($color-secondary, 90%)
36
+ $color-blue: #0071bc !default;
37
+ $color-blue-darker: #205493 !default;
38
+ $color-blue-darkest: #112e51 !default;
39
+
40
+ $color-aqua: #02bfe7 !default;
41
+ $color-aqua-dark: #00a6d2 !default;
42
+ $color-aqua-darkest: #046b99 !default;
43
+ $color-aqua-light: #9bdaf1 !default;
44
+ $color-aqua-lightest: #e1f3f8 !default;
45
+
46
+ $color-red: #e31c3d !default;
47
+ $color-red-dark: #cd2026 !default;
48
+ $color-red-darkest: #981b1e !default;
49
+ $color-red-light: #e59393 !default;
50
+ $color-red-lightest: #f9dede !default;
50
51
 
51
52
  $color-white: #ffffff !default;
52
- $color-base: #212121 !default;
53
53
  $color-black: #000000 !default;
54
+ $color-black-light: #212121 !default;
54
55
 
55
56
  $color-gray-dark: #323a45 !default;
56
- $color-gray: #5b616b !default; // lighten($color-gray-dark, 20%)
57
- $color-gray-medium: #757575 !default; // lightest gray that passes color contrast
58
- $color-gray-light: #aeb0b5 !default; // lighten($color-gray-dark, 60%)
59
- $color-gray-lighter: #d6d7d9 !default; // lighten($color-gray-dark, 80%)
60
- $color-gray-lightest: #f1f1f1 !default; // lighten($color-gray-dark, 91%)
57
+ $color-gray: #5b616b !default;
58
+ $color-gray-medium: #757575 !default;
59
+ $color-gray-light: #aeb0b5 !default;
60
+ $color-gray-lighter: #d6d7d9 !default;
61
+ $color-gray-lightest: #f1f1f1 !default;
61
62
 
62
63
  $color-gray-warm-dark: #494440 !default;
63
- $color-gray-warm-light: #e4e2e0 !default; // lighten($color-gray-warm-dark, 90%)
64
- $color-gray-cool-light: #dce4ef !default; // lighten($color-primary, 90%)
64
+ $color-gray-warm-light: #e4e2e0 !default;
65
+ $color-gray-cool-light: #dce4ef !default;
65
66
 
66
67
  $color-gold: #fdb81e !default;
67
- $color-gold-light: #f9c642 !default; // lighten($color-gold, 20%)
68
- $color-gold-lighter: #fad980 !default; // lighten($color-gold, 60%)
69
- $color-gold-lightest: #fff1d2 !default; // lighten($color-gold, 83%)
68
+ $color-gold-light: #f9c642 !default;
69
+ $color-gold-lighter: #fad980 !default;
70
+ $color-gold-lightest: #fff1d2 !default;
70
71
 
71
72
  $color-green: #2e8540 !default;
72
- $color-green-light: #4aa564 !default; // lighten($color-green, 20%)
73
- $color-green-lighter: #94bfa2 !default; // lighten($color-green, 60%)
74
- $color-green-lightest: #e7f4e4 !default; // lighten($color-green, 60%)
73
+ $color-green-light: #4aa564 !default;
74
+ $color-green-lighter: #94bfa2 !default;
75
+ $color-green-lightest: #e7f4e4 !default;
75
76
 
76
77
  $color-cool-blue: #205493 !default;
77
- $color-cool-blue-light: #4773aa !default; // lighten($color-cool-blue, 20%)
78
- $color-cool-blue-lighter: #8ba6ca !default; // lighten($color-cool-blue, 60%)
79
- $color-cool-blue-lightest: #dce4ef !default; // lighten($color-cool-blue, 90%)
78
+ $color-cool-blue-light: #4773aa !default;
79
+ $color-cool-blue-lighter: #8ba6ca !default;
80
+ $color-cool-blue-lightest: #dce4ef !default;
80
81
 
81
- $color-focus: #3e94cf !default;
82
- $color-visited: #4c2c92 !default;
82
+ $color-purple: #4c2c92 !default;
83
+
84
+ // Functional colors
85
+ $color-primary: $color-blue !default;
86
+ $color-primary-darker: $color-blue-darker !default;
87
+ $color-primary-darkest: $color-blue-darkest !default;
88
+
89
+ $color-primary-alt: $color-aqua !default;
90
+ $color-primary-alt-dark: $color-aqua-dark !default;
91
+ $color-primary-alt-darkest: $color-aqua-darkest !default;
92
+ $color-primary-alt-light: $color-aqua-light !default;
93
+ $color-primary-alt-lightest: $color-aqua-lightest !default;
94
+
95
+ $color-secondary: $color-red !default;
96
+ $color-secondary-dark: $color-red-dark !default;
97
+ $color-secondary-darkest: $color-red-darkest !default;
98
+ $color-secondary-light: $color-red-light !default;
99
+ $color-secondary-lightest: $color-red-lightest !default;
100
+
101
+ $color-base: $color-black-light !default;
102
+ $color-focus: $color-gray-light !default;
103
+ $color-visited: $color-purple !default;
83
104
 
84
105
  $color-shadow: rgba(#000, 0.3) !default;
106
+ $color-transparent: rgba(#000, 0) !default;
85
107
 
86
108
  // Mobile First Breakpoints
87
109
  $small-screen: 481px !default;
@@ -106,18 +128,28 @@ $image-path: '../img' !default;
106
128
  $asset-pipeline: false !default;
107
129
 
108
130
  // Magic Numbers
109
- $text-max-width: 53rem !default;
110
- $lead-max-width: 77rem !default;
111
- $site-max-width: 1040px !default;
112
- $site-margins: 3rem !default;
113
- $site-margins-mobile: 1.5rem !default;
114
- $article-max-width: 600px !default;
115
- $input-max-width: 46rem !default;
116
- $border-radius: 3px !default;
117
- $box-shadow: 0 0 2px $color-shadow !default;
118
- $focus-shadow: 0 0 3px $color-focus, 0 0 7px $color-focus !default;
119
- $nav-width: 951px !default;
131
+ $text-max-width: 66ch !default; // 66 characters per line
132
+ $lead-max-width: 77rem !default;
133
+ $site-max-width: 1040px !default;
134
+ $site-margins: 3rem !default;
135
+ $site-margins-mobile: 1.5rem !default;
136
+ $article-max-width: 600px !default;
137
+ $input-max-width: 46rem !default;
138
+ $label-border-radius: 2px !default;
139
+ $checkbox-border-radius: 2px !default;
140
+ $border-radius: 3px !default;
141
+ $button-border-radius: 5px !default;
142
+ $box-shadow: 0 0 2px $color-shadow !default;
143
+ $focus-outline: 2px dotted $color-gray-light;
144
+ $focus-spacing: 3px;
145
+ $nav-width: 951px !default;
120
146
 
121
147
  // 44 x 44 pixels hit target following Apple iOS Human Interface
122
148
  // Guidelines
123
149
  $hit-area: 4.4rem !default;
150
+
151
+ $spacing-x-small: 0.5rem;
152
+ $spacing-small: 1rem;
153
+ $spacing-md-small: 1.5rem;
154
+ $spacing-medium: 2rem;
155
+ $spacing-large: 3rem;
@@ -4,6 +4,24 @@ $button-stroke: inset 0 0 0 2px;
4
4
 
5
5
  // Buttons
6
6
 
7
+ // This mixin is only needed until we fully remove the
8
+ // deprecated usa-button-disabled style.
9
+ @mixin disabledesque {
10
+ background-color: $color-gray-lighter;
11
+ pointer-events: none;
12
+
13
+ &:hover,
14
+ &.usa-button-hover,
15
+ &:active,
16
+ &.usa-button-active,
17
+ &:focus,
18
+ &.usa-focus {
19
+ background-color: $color-gray-lighter;
20
+ border: 0;
21
+ box-shadow: none;
22
+ }
23
+ }
24
+
7
25
  /* stylelint-disable selector-no-qualifying-type */
8
26
  .usa-button,
9
27
  .usa-button-primary,
@@ -19,7 +37,7 @@ button,
19
37
  appearance: none;
20
38
  background-color: $color-primary;
21
39
  border: 0;
22
- border-radius: $border-radius;
40
+ border-radius: $button-border-radius;
23
41
  color: $color-white;
24
42
  cursor: pointer;
25
43
  display: inline-block;
@@ -27,7 +45,6 @@ button,
27
45
  font-size: $base-font-size;
28
46
  font-weight: $font-bold;
29
47
  line-height: 1;
30
- outline: none;
31
48
  padding: 1rem 2rem;
32
49
  text-align: center;
33
50
  text-decoration: none;
@@ -45,11 +62,6 @@ button,
45
62
  text-decoration: none;
46
63
  }
47
64
 
48
- &:focus,
49
- &.usa-button-focus {
50
- box-shadow: $focus-shadow;
51
- }
52
-
53
65
  &:active,
54
66
  &.usa-button-active {
55
67
  background-color: $color-primary-darkest;
@@ -72,111 +84,125 @@ button,
72
84
  }
73
85
 
74
86
  &.usa-button-secondary {
75
- background-color: $color-secondary;
87
+ background-color: $color-white;
88
+ box-shadow: $button-stroke $color-primary;
89
+ color: $color-primary;
76
90
 
77
91
  &:hover,
78
92
  &.usa-button-hover {
79
- background-color: $color-secondary-dark;
93
+ box-shadow: $button-stroke $color-primary-darker;
94
+ color: $color-primary-darker;
80
95
  }
81
96
 
82
97
  &:active,
83
98
  &.usa-button-active {
84
- background-color: $color-secondary-darkest;
99
+ box-shadow: $button-stroke $color-primary-darkest;
100
+ color: $color-primary-darkest;
85
101
  }
86
102
  }
87
103
 
88
- &.usa-button-gray {
89
- background-color: $color-gray;
104
+ &.usa-button-secondary-inverse,
105
+ &.usa-button-outline-inverse { // Outline inverse to be deprecated in 2.0
106
+ background: transparent;
107
+ box-shadow: $button-stroke $color-white;
108
+ color: $color-white;
90
109
 
91
110
  &:hover,
92
111
  &.usa-button-hover {
93
- background-color: $color-gray-dark;
112
+ box-shadow: $button-stroke $color-gray-lighter;
113
+ color: $color-gray-lighter;
94
114
  }
95
115
 
96
116
  &:active,
97
117
  &.usa-button-active {
98
- background-color: $color-base;
118
+ box-shadow: $button-stroke $color-gray-light;
119
+ color: $color-gray-lighter;
99
120
  }
100
121
  }
101
122
 
102
- &.usa-button-outline {
103
- background-color: $color-white;
104
- box-shadow: $button-stroke $color-primary;
105
- color: $color-primary;
123
+ &.usa-button-gray {
124
+ background-color: $color-gray;
106
125
 
107
126
  &:hover,
108
127
  &.usa-button-hover {
109
- box-shadow: $button-stroke $color-primary-darker;
110
- color: $color-primary-darker;
128
+ background-color: $color-gray-dark;
111
129
  }
112
130
 
113
131
  &:active,
114
132
  &.usa-button-active {
115
- box-shadow: $button-stroke $color-primary-darkest;
116
- color: $color-primary-darkest;
117
- }
118
-
119
- &:focus,
120
- &.usa-button-focus {
121
- box-shadow: $button-stroke $color-primary-darkest, $focus-shadow;
133
+ background-color: $color-base;
122
134
  }
123
135
  }
124
136
 
125
- &.usa-button-outline-inverse {
126
- background: transparent;
127
- box-shadow: $button-stroke $color-white;
128
- color: $color-white;
137
+ &.usa-button-red {
138
+ background-color: $color-secondary;
129
139
 
130
140
  &:hover,
131
141
  &.usa-button-hover {
132
- box-shadow: $button-stroke $color-gray-lighter;
133
- color: $color-gray-lighter;
142
+ background-color: $color-secondary-dark;
134
143
  }
135
144
 
136
145
  &:active,
137
146
  &.usa-button-active {
138
- box-shadow: $button-stroke $color-gray-light;
139
- color: $color-gray-lighter;
140
- }
141
-
142
- &:focus,
143
- &.usa-button-focus {
144
- box-shadow: $button-stroke $color-gray-light, $focus-shadow;
147
+ background-color: $color-secondary-darkest;
145
148
  }
146
149
  }
147
150
 
148
151
  &.usa-button-big {
149
- font-size: 1.9rem;
152
+ border-radius: 8px;
153
+ font-size: 2.4rem;
150
154
  padding: 1.5rem 3rem;
151
155
  }
156
+
157
+ &:disabled {
158
+ @include disabledesque;
159
+ }
152
160
  }
153
161
  /* stylelint-disable */
154
162
 
155
- .usa-button:disabled,
156
- .usa-button-disabled {
157
- background-color: $color-gray-lighter;
158
- color: $color-gray-dark;
163
+ .usa-button-disabled // Deprecated
164
+ {
165
+ @include disabledesque
166
+ }
167
+
168
+ .usa-button-secondary-disabled, // Deprecated
169
+ .usa-button-secondary-inverse-disabled, // Deprecated
170
+ .usa-button-secondary:disabled,
171
+ .usa-button-secondary-inverse:disabled,
172
+ .usa-button-outline-inverse:disabled { // Outline inverse to be deprecated in 2.0
173
+ box-shadow: $button-stroke $color-gray-lighter;
159
174
  pointer-events: none;
175
+ color: $color-gray-lighter;
160
176
 
161
177
  &:hover,
162
178
  &.usa-button-hover,
163
179
  &:active,
164
180
  &.usa-button-active,
165
- &:focus {
166
- background-color: $color-gray-lighter;
181
+ &:focus,
182
+ &.usa-focus {
183
+ background-color: $color-white;
167
184
  border: 0;
168
- box-shadow: none;
169
- color: $color-gray-dark;
170
185
  }
171
186
  }
172
187
 
188
+ html .usa-button-secondary-disabled, // Deprecated
189
+ .usa-button-secondary:disabled {
190
+ background-color: $color-white;
191
+ }
192
+
193
+ html .usa-button-secondary-inverse-disabled, // Deprecated
194
+ .usa-button-secondary-inverse:disabled {
195
+ background-color: transparent;
196
+ color: $color-gray;
197
+ box-shadow: $button-stroke $color-gray;
198
+ }
199
+
173
200
  @mixin button-unstyled {
174
201
  background-color: transparent;
175
202
  border: 0;
176
203
  border-radius: 0;
177
204
  font-weight: $font-normal;
178
205
  margin: 0;
179
- outline: 0;
180
206
  padding: 0;
181
207
  text-align: left;
182
208
  -webkit-font-smoothing: auto;