uswds-rails 1.4.0 → 1.4.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (112) hide show
  1. checksums.yaml +5 -5
  2. data/.codeclimate.yml +1 -0
  3. data/.rubocop +2 -0
  4. data/.ruby-version +1 -1
  5. data/.travis.yml +3 -3
  6. data/CONTRIBUTING.md +2 -2
  7. data/README.md +4 -4
  8. data/app/assets/stylesheets/uswds/components/_navigation.scss +109 -68
  9. data/app/assets/stylesheets/uswds/core/_utilities.scss +5 -4
  10. data/app/assets/stylesheets/uswds/elements/_inputs.scss +4 -4
  11. data/app/assets/stylesheets/uswds/elements/_typography.scss +4 -4
  12. data/app/assets/stylesheets/uswds/uswds.scss +1 -1
  13. data/lib/uswds/rails/version.rb +1 -1
  14. data/uswds-rails.gemspec +6 -8
  15. data/vendor/assets/fonts/uswds/sourcesanspro-bold-webfont.eot +0 -0
  16. data/vendor/assets/fonts/uswds/sourcesanspro-bold-webfont.ttf +0 -0
  17. data/vendor/assets/fonts/uswds/sourcesanspro-bold-webfont.woff +0 -0
  18. data/vendor/assets/fonts/uswds/sourcesanspro-bold-webfont.woff2 +0 -0
  19. data/vendor/assets/fonts/uswds/sourcesanspro-italic-webfont.eot +0 -0
  20. data/vendor/assets/fonts/uswds/sourcesanspro-italic-webfont.ttf +0 -0
  21. data/vendor/assets/fonts/uswds/sourcesanspro-italic-webfont.woff +0 -0
  22. data/vendor/assets/fonts/uswds/sourcesanspro-italic-webfont.woff2 +0 -0
  23. data/vendor/assets/fonts/uswds/sourcesanspro-light-webfont.eot +0 -0
  24. data/vendor/assets/fonts/uswds/sourcesanspro-light-webfont.ttf +0 -0
  25. data/vendor/assets/fonts/uswds/sourcesanspro-light-webfont.woff +0 -0
  26. data/vendor/assets/fonts/uswds/sourcesanspro-light-webfont.woff2 +0 -0
  27. data/vendor/assets/fonts/uswds/sourcesanspro-regular-webfont.eot +0 -0
  28. data/vendor/assets/fonts/uswds/sourcesanspro-regular-webfont.ttf +0 -0
  29. data/vendor/assets/fonts/uswds/sourcesanspro-regular-webfont.woff +0 -0
  30. data/vendor/assets/fonts/uswds/sourcesanspro-regular-webfont.woff2 +0 -0
  31. data/vendor/assets/images/uswds/angle-arrow-down-hover.png +0 -0
  32. data/vendor/assets/images/uswds/angle-arrow-down-hover.svg +0 -0
  33. data/vendor/assets/images/uswds/angle-arrow-down-primary-hover.png +0 -0
  34. data/vendor/assets/images/uswds/angle-arrow-down-primary-hover.svg +0 -0
  35. data/vendor/assets/images/uswds/angle-arrow-down-primary.png +0 -0
  36. data/vendor/assets/images/uswds/angle-arrow-down-primary.svg +0 -0
  37. data/vendor/assets/images/uswds/angle-arrow-down.png +0 -0
  38. data/vendor/assets/images/uswds/angle-arrow-down.svg +0 -0
  39. data/vendor/assets/images/uswds/angle-arrow-up-primary-hover.png +0 -0
  40. data/vendor/assets/images/uswds/angle-arrow-up-primary-hover.svg +0 -0
  41. data/vendor/assets/images/uswds/angle-arrow-up-primary.png +0 -0
  42. data/vendor/assets/images/uswds/angle-arrow-up-primary.svg +0 -0
  43. data/vendor/assets/images/uswds/arrow-both.png +0 -0
  44. data/vendor/assets/images/uswds/arrow-both.svg +0 -0
  45. data/vendor/assets/images/uswds/arrow-down.png +0 -0
  46. data/vendor/assets/images/uswds/arrow-down.svg +0 -0
  47. data/vendor/assets/images/uswds/arrow-right.png +0 -0
  48. data/vendor/assets/images/uswds/arrow-right.svg +0 -0
  49. data/vendor/assets/images/uswds/circle-124.png +0 -0
  50. data/vendor/assets/images/uswds/close-primary.png +0 -0
  51. data/vendor/assets/images/uswds/close-primary.svg +0 -0
  52. data/vendor/assets/images/uswds/close.png +0 -0
  53. data/vendor/assets/images/uswds/close.svg +0 -0
  54. data/vendor/assets/images/uswds/correct9.png +0 -0
  55. data/vendor/assets/images/uswds/external-link-alt-hover.png +0 -0
  56. data/vendor/assets/images/uswds/external-link-alt-hover.svg +0 -0
  57. data/vendor/assets/images/uswds/external-link-alt.png +0 -0
  58. data/vendor/assets/images/uswds/external-link-alt.svg +0 -0
  59. data/vendor/assets/images/uswds/external-link-hover.png +0 -0
  60. data/vendor/assets/images/uswds/external-link-hover.svg +0 -0
  61. data/vendor/assets/images/uswds/external-link.png +0 -0
  62. data/vendor/assets/images/uswds/external-link.svg +0 -0
  63. data/vendor/assets/images/uswds/hero.png +0 -0
  64. data/vendor/assets/images/uswds/icon-dot-gov.svg +0 -0
  65. data/vendor/assets/images/uswds/icon-https.svg +0 -0
  66. data/vendor/assets/images/uswds/logo-img.png +0 -0
  67. data/vendor/assets/images/uswds/minus-alt.png +0 -0
  68. data/vendor/assets/images/uswds/minus-alt.svg +0 -0
  69. data/vendor/assets/images/uswds/minus.png +0 -0
  70. data/vendor/assets/images/uswds/minus.svg +0 -0
  71. data/vendor/assets/images/uswds/plus-alt.png +0 -0
  72. data/vendor/assets/images/uswds/plus-alt.svg +0 -0
  73. data/vendor/assets/images/uswds/plus.png +0 -0
  74. data/vendor/assets/images/uswds/plus.svg +0 -0
  75. data/vendor/assets/images/uswds/search-primary.png +0 -0
  76. data/vendor/assets/images/uswds/search-primary.svg +0 -0
  77. data/vendor/assets/images/uswds/social-icons/png/facebook25.png +0 -0
  78. data/vendor/assets/images/uswds/social-icons/png/rss25.png +0 -0
  79. data/vendor/assets/images/uswds/social-icons/png/twitter16.png +0 -0
  80. data/vendor/assets/images/uswds/social-icons/png/youtube15.png +0 -0
  81. data/vendor/assets/images/uswds/us_flag_small.png +0 -0
  82. data/vendor/assets/javascripts/uswds/uswds.js +200 -202
  83. data/vendor/assets/stylesheets/uswds/components/_accordions.scss +0 -0
  84. data/vendor/assets/stylesheets/uswds/components/_alerts.scss +0 -0
  85. data/vendor/assets/stylesheets/uswds/components/_banner.scss +0 -0
  86. data/vendor/assets/stylesheets/uswds/components/_footer.scss +0 -0
  87. data/vendor/assets/stylesheets/uswds/components/_forms.scss +0 -0
  88. data/vendor/assets/stylesheets/uswds/components/_graphic-list.scss +0 -0
  89. data/vendor/assets/stylesheets/uswds/components/_header.scss +5 -6
  90. data/vendor/assets/stylesheets/uswds/components/_hero.scss +0 -0
  91. data/vendor/assets/stylesheets/uswds/components/_layout.scss +0 -0
  92. data/vendor/assets/stylesheets/uswds/components/_media-block.scss +0 -0
  93. data/vendor/assets/stylesheets/uswds/components/_navigation.scss +109 -68
  94. data/vendor/assets/stylesheets/uswds/components/_search.scss +0 -0
  95. data/vendor/assets/stylesheets/uswds/components/_section.scss +0 -0
  96. data/vendor/assets/stylesheets/uswds/components/_sidenav.scss +0 -0
  97. data/vendor/assets/stylesheets/uswds/components/_skipnav.scss +0 -0
  98. data/vendor/assets/stylesheets/uswds/core/_base.scss +0 -0
  99. data/vendor/assets/stylesheets/uswds/core/_fonts.scss +0 -0
  100. data/vendor/assets/stylesheets/uswds/core/_grid.scss +0 -0
  101. data/vendor/assets/stylesheets/uswds/core/_utilities.scss +1 -0
  102. data/vendor/assets/stylesheets/uswds/core/_variables.scss +1 -1
  103. data/vendor/assets/stylesheets/uswds/elements/_buttons.scss +0 -0
  104. data/vendor/assets/stylesheets/uswds/elements/_embed.scss +0 -0
  105. data/vendor/assets/stylesheets/uswds/elements/_figure.scss +0 -0
  106. data/vendor/assets/stylesheets/uswds/elements/_inputs.scss +0 -0
  107. data/vendor/assets/stylesheets/uswds/elements/_labels.scss +0 -0
  108. data/vendor/assets/stylesheets/uswds/elements/_list.scss +0 -0
  109. data/vendor/assets/stylesheets/uswds/elements/_table.scss +0 -0
  110. data/vendor/assets/stylesheets/uswds/elements/_typography.scss +0 -0
  111. data/vendor/assets/stylesheets/uswds/uswds.scss +0 -0
  112. metadata +21 -21
@@ -28,8 +28,7 @@ $z-index-nav: 9000;
28
28
  @include media($nav-width) {
29
29
  float: right;
30
30
  margin-bottom: 0;
31
- max-width: 23.5rem;
32
- width: 21.5rem;
31
+ max-width: 21.5rem;
33
32
  }
34
33
  }
35
34
  }
@@ -121,7 +120,7 @@ $z-index-nav: 9000;
121
120
  .usa-header-basic {
122
121
  .usa-logo {
123
122
  @include media($nav-width) {
124
- bottom: -4rem;
123
+ bottom: 0;
125
124
  position: absolute;
126
125
  }
127
126
  }
@@ -178,7 +177,7 @@ $z-index-nav: 9000;
178
177
  .usa-nav-inner {
179
178
  @include media($nav-width) {
180
179
  @include outer-container();
181
- @include padding(null $site-margins null 2rem);
180
+ @include padding(null $site-margins null 1.5rem);
182
181
  margin-top: -1px;
183
182
  max-width: $site-max-width;
184
183
  position: relative;
@@ -194,7 +193,7 @@ $z-index-nav: 9000;
194
193
  &[aria-expanded=false],
195
194
  &[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
196
195
  @include media($nav-width) { /* stylelint-disable-line selector-no-qualifying-type */
197
- background-position: right 1.5rem top 50%;
196
+ background-position: right 1.5rem top 53%;
198
197
  }
199
198
  }
200
199
  }
@@ -202,7 +201,7 @@ $z-index-nav: 9000;
202
201
 
203
202
  .usa-nav-link {
204
203
  @include media($nav-width) {
205
- padding-top: 1.9rem;
204
+ @include padding(1.8rem null);
206
205
  }
207
206
  }
208
207
 
@@ -1,40 +1,42 @@
1
1
  // Header navigation ------------- //
2
2
 
3
3
  @mixin nav-border {
4
+ border-bottom: 0.4rem solid $color-primary;
5
+ padding-bottom: 0.6rem;
6
+ }
7
+
8
+ @mixin nav-border-thick {
4
9
  border-bottom: 0.7rem solid $color-primary;
5
- padding-bottom: 1rem;
10
+ padding-bottom: 0.9rem;
6
11
  }
7
12
 
8
13
  .usa-navbar {
9
- border-bottom: 1px solid $color-gray-lighter;
14
+ border-bottom: 1px solid $color-gray-light;
10
15
  height: 4rem;
11
16
 
12
17
  @include media($nav-width) {
13
18
  border-bottom: none;
14
19
  display: inline-block;
20
+ height: 7.8rem; // XXX magic number
15
21
  }
16
22
  }
17
23
 
18
24
  .usa-nav-link {
19
25
  @include font-smoothing;
20
26
 
21
- &:focus {
22
- outline-offset: 0;
23
- }
24
-
25
- &.usa-accordion-button {
26
- @include media($nav-width) {
27
- span {
28
- margin-right: -2rem;
29
- padding-right: 2rem;
27
+ &:hover {
28
+ span {
29
+ @include media($nav-width) {
30
+ @include nav-border;
30
31
  }
31
32
  }
32
33
  }
33
34
 
34
- &:hover {
35
+ &.usa-accordion-button {
35
36
  span {
36
37
  @include media($nav-width) {
37
- @include nav-border;
38
+ margin-right: 0;
39
+ padding-right: 1.5rem;
38
40
  }
39
41
  }
40
42
  }
@@ -54,7 +56,7 @@
54
56
  @include position(fixed, 0 0 0 auto);
55
57
 
56
58
  background: $color-white;
57
- border-left: 1px solid $color-gray-lighter;
59
+ border-left: 1px solid $color-gray-light;
58
60
  border-right: 0;
59
61
  display: flex;
60
62
  flex-direction: column;
@@ -64,40 +66,20 @@
64
66
  width: $sliding-panel-width;
65
67
  z-index: $z-index-nav;
66
68
 
67
- // Defaulting to hidden is very important for ensuring
68
- // that the nav contents aren't in the tab order if
69
- // the nav menu is off-screen.
70
- visibility: hidden;
71
-
72
69
  @include media($nav-width) {
73
- @include padding(5rem 0 0 null);
74
- background: transparent;
70
+ @include padding(4.5rem 0 0 null);
75
71
  border-left: none;
76
72
  display: block;
77
73
  float: right;
78
74
  overflow-y: visible;
79
- padding-left: 0;
80
75
  position: relative;
81
76
  transform: translateX(0);
82
77
  width: auto;
83
- visibility: visible;
84
78
  }
85
79
 
86
80
  &.is-visible {
87
- // It's very important that we scope the transition to
88
- // only include 'transform' here; we used to transition
89
- // on 'all', but this prevented the close button from
90
- // being focused after activating the nav menu, as the
91
- // button wasn't yet visible due to 'visibility'
92
- // implicitly being part of the CSS transition.
93
81
  transform: translateX(0);
94
- transition: transform 0.3s ease-in-out;
95
-
96
- visibility: visible;
97
- }
98
-
99
- a:focus {
100
- outline-offset: 0;
82
+ transition: all 0.3s ease-in-out;
101
83
  }
102
84
 
103
85
  nav {
@@ -114,6 +96,10 @@
114
96
  color: $color-primary;
115
97
  font-weight: $font-bold;
116
98
  padding-left: 1.4rem;
99
+
100
+ @include media($nav-width) {
101
+ color: $color-base;
102
+ }
117
103
  }
118
104
 
119
105
  .usa-button {
@@ -122,7 +108,8 @@
122
108
 
123
109
  .usa-search {
124
110
  @include media($nav-width) {
125
- margin-left: 1.8rem; // XXX magic number
111
+ margin-left: 1.5rem; // XXX magic number
112
+ top: 4px;
126
113
  }
127
114
  }
128
115
  }
@@ -153,11 +140,11 @@
153
140
 
154
141
  > a {
155
142
  @include media($nav-width) {
156
- @include padding(1.3rem 1.5rem 1.7rem 1.5rem);
143
+ @include padding(1.3rem 1.5rem 2.2rem 1.5rem);
157
144
  color: $color-gray;
158
145
  font-size: $h5-font-size;
159
146
  font-weight: $font-bold;
160
- line-height: 1.2;
147
+ line-height: 1;
161
148
  }
162
149
 
163
150
  &:hover {
@@ -168,27 +155,48 @@
168
155
  }
169
156
  }
170
157
 
158
+ a {
159
+ @include media($nav-width) {
160
+ @include padding(0.75rem null);
161
+ }
162
+
163
+ &:hover {
164
+ @include media($nav-width) {
165
+ // color: $color-base;
166
+ }
167
+ }
168
+ }
169
+
171
170
  button {
172
- $button-vertical-offset: 44%;
171
+ $button-vertical-offset: 40%;
173
172
 
174
173
  @include button-unstyled;
175
174
  @include font-smoothing;
176
175
  font-weight: $font-normal;
177
- padding: 1.4rem 1.5rem 1rem 1.8rem;
176
+ line-height: 1.3;
177
+ padding: 0.85rem 1.5rem 0.85rem 1.8rem;
178
178
 
179
179
  @include media($nav-width) {
180
- @include padding(null 3.5rem 1.9rem 1.5rem);
180
+ @include padding(1.3rem 1.5rem 2.2rem 1.5rem);
181
181
  color: $color-gray;
182
182
  font-size: $h5-font-size;
183
183
  font-weight: $font-bold;
184
+ line-height: 1;
184
185
  width: initial;
185
186
  }
186
187
 
188
+ &:focus,
189
+ &:active {
190
+ box-shadow: $focus-outline;
191
+ }
192
+
187
193
  &:hover {
194
+ background-color: $color-gray-lightest;
188
195
  color: $color-primary;
189
196
 
190
197
  @include media($nav-width) {
191
198
  background-color: transparent;
199
+ // color: $color-base;
192
200
  }
193
201
  }
194
202
 
@@ -203,8 +211,10 @@
203
211
  background-image: url('#{$image-path}/angle-arrow-down.png');
204
212
  background-image: url('#{$image-path}/angle-arrow-down.svg');
205
213
  background-position: right 1.5rem top $button-vertical-offset;
214
+ }
206
215
 
207
- &:hover {
216
+ &:hover {
217
+ @include media($nav-width) {
208
218
  background-image: url('#{$image-path}/angle-arrow-down-primary.png');
209
219
  background-image: url('#{$image-path}/angle-arrow-down-primary.svg');
210
220
  }
@@ -231,19 +241,60 @@
231
241
 
232
242
  span {
233
243
  @include nav-border;
244
+ color: $color-white;
234
245
  }
235
246
  }
236
247
  }
237
248
  }
238
249
 
239
250
  @include media($nav-width) {
240
- a.usa-current { // stylelint-disable-line selector-no-qualifying-type
251
+ a.usa-current,
252
+ .usa-current { // stylelint-disable-line selector-no-qualifying-type
241
253
  // undo the sidenav style
242
254
  border-left: 0;
243
255
  padding-left: 1.5rem;
244
256
 
257
+ &:hover {
258
+ span {
259
+ color: $color-primary;
260
+ }
261
+ }
262
+
245
263
  span {
246
264
  @include nav-border;
265
+ color: $color-base;
266
+ }
267
+ }
268
+ }
269
+ }
270
+
271
+ // Extended header navigation ------- //
272
+
273
+ .usa-header-extended {
274
+ .usa-nav-link {
275
+ &:hover {
276
+ span {
277
+ @include media($nav-width) {
278
+ @include nav-border-thick;
279
+ }
280
+ }
281
+ }
282
+ }
283
+
284
+ .usa-nav-primary {
285
+ button[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
286
+ span {
287
+ @include media($nav-width) {
288
+ @include nav-border-thick;
289
+ }
290
+ }
291
+ }
292
+
293
+ .usa-current {
294
+ @include media($nav-width) {
295
+ span {
296
+ @include nav-border-thick;
297
+ }
247
298
  }
248
299
  }
249
300
  }
@@ -262,29 +313,28 @@
262
313
  @include margin(3rem null);
263
314
 
264
315
  @include media($nav-width) {
265
- @include margin(-0.2rem null 0 0);
316
+ @include margin(-0.9rem null 0 0);
266
317
  float: left;
267
- width: 21.5rem;
268
318
  }
269
319
  }
270
320
  }
271
321
 
272
322
  .usa-nav-secondary-links {
273
323
  @include media($nav-width) {
274
- float: right;
324
+ float: left;
275
325
  }
276
326
 
277
327
  li {
278
328
  @include media($nav-width) {
279
329
  display: inline;
280
- padding-left: 1rem;
330
+ padding-left: 0.5rem;
281
331
  }
282
332
 
283
333
  &:not(:last-child)::after {
284
334
  @include media($nav-width) {
285
335
  color: $color-gray-lighter;
286
336
  content: '|';
287
- padding-left: 1rem;
337
+ padding-left: 0.5rem;
288
338
  }
289
339
  }
290
340
  }
@@ -307,10 +357,11 @@
307
357
  display: none;
308
358
 
309
359
  @include media($nav-width) {
310
- background-image: url('#{$image-path}/search-primary.png');
311
- background-image: url('#{$image-path}/search-primary.svg');
360
+ background-image: url('#{$image-path}/search-alt.png');
361
+ background-image: url('#{$image-path}/search-alt.svg');
312
362
  background-repeat: no-repeat;
313
363
  background-position: left center;
364
+ background-size: 2.2rem;
314
365
  display: inline-block;
315
366
  padding-left: 2.3rem;
316
367
  }
@@ -334,15 +385,13 @@
334
385
  // Navigation submenu (dropdown and mega menu) ----- //
335
386
 
336
387
  .usa-nav-submenu {
337
- // @include usa-sidenav-sublist;
338
- padding-left: 1rem;
388
+ @include usa-sidenav-sublist;
339
389
 
340
390
  @include media($nav-width) {
341
391
  @include unstyled-list;
342
- @include padding(1.15rem null);
392
+ @include padding(0.75rem null 0.9rem null);
343
393
  background-color: $color-primary-darkest;
344
- min-width: 21.5rem;
345
- width: auto;
394
+ width: 21.5rem;
346
395
  position: absolute;
347
396
  }
348
397
 
@@ -360,6 +409,7 @@
360
409
  @include media($nav-width) {
361
410
  background-color: $color-primary-darkest;
362
411
  color: $color-white;
412
+ padding-left: 1.5rem;
363
413
  text-decoration: underline;
364
414
  }
365
415
  }
@@ -376,18 +426,8 @@
376
426
 
377
427
  li {
378
428
  font-size: $h5-font-size;
379
- list-style: none;
380
429
  margin-bottom: 0;
381
430
  }
382
-
383
- .usa-width-one-fourth {
384
- margin-right: 0;
385
- width: 100%;
386
-
387
- @include media($nav-width) {
388
- @include span-columns(3);
389
- }
390
- }
391
431
  }
392
432
 
393
433
  // Navigation close button -------- //
@@ -427,10 +467,11 @@
427
467
 
428
468
  .usa-megamenu {
429
469
  @include media($nav-width) {
430
- @include padding(2.15rem null); // XXX magic number
470
+ @include padding(3.15rem null); // XXX magic number
431
471
  // XXX this is the difference between the 2rem padding-left
432
472
  // of .usa-nav-inner and the $site-margins (3rem) padding-left
433
473
  // of .usa-megamenu
474
+ left: -1rem;
434
475
  width: 100%;
435
476
  }
436
477
 
@@ -465,7 +506,7 @@
465
506
  @include media($nav-width) {
466
507
  display: block;
467
508
  float: right;
468
- margin-top: -4.8rem;
509
+ margin-top: -3.8rem;
469
510
  }
470
511
  }
471
512