uswds-rails 0.1.0 → 1.3.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.
@@ -22,6 +22,15 @@ $alerts: map-merge($usa-alerts, $usa-custom-alerts);
22
22
  background-size: 5.2rem;
23
23
  }
24
24
 
25
+ a {
26
+ color: $color-primary-darker;
27
+
28
+ &:focus,
29
+ &:hover {
30
+ color: $color-primary-darkest;
31
+ }
32
+ }
33
+
25
34
  ul {
26
35
  margin-bottom: 0;
27
36
  margin-top: 1em;
@@ -193,7 +193,7 @@ $z-index-nav: 9000;
193
193
  &[aria-expanded=false],
194
194
  &[aria-expanded=true] { /* stylelint-disable-line selector-no-qualifying-type */
195
195
  @include media($nav-width) { /* stylelint-disable-line selector-no-qualifying-type */
196
- background-position: right 1.5rem top 50%;
196
+ background-position: right 1.5rem top 44%;
197
197
  }
198
198
  }
199
199
  }
@@ -12,7 +12,7 @@
12
12
  @include media($nav-width) {
13
13
  border-bottom: none;
14
14
  display: inline-block;
15
- height: 10.3rem;
15
+ height: 10.3rem; // XXX magic number
16
16
  }
17
17
  }
18
18
 
@@ -40,7 +40,6 @@
40
40
  $sliding-panel-width: 26rem;
41
41
 
42
42
  @include position(fixed, 0 0 0 auto);
43
- @include transform(translateX($sliding-panel-width));
44
43
 
45
44
  background: $color-white;
46
45
  border-left: 1px solid $color-gray-light;
@@ -49,28 +48,28 @@
49
48
  flex-direction: column;
50
49
  overflow-y: auto;
51
50
  padding: 2rem;
51
+ transform: translateX($sliding-panel-width);
52
52
  width: $sliding-panel-width;
53
53
  z-index: $z-index-nav;
54
54
 
55
55
  @include media($nav-width) {
56
56
  @include padding(5rem 0 0 null);
57
- @include transform(translateX(0));
58
-
59
57
  border-left: none;
60
58
  display: block;
61
59
  float: right;
62
60
  overflow-y: visible;
63
61
  position: relative;
62
+ transform: translateX(0);
64
63
  width: auto;
65
64
  }
66
65
 
67
66
  &.is-visible {
68
- @include transform(translateX(0));
69
- @include transition(all 0.3s ease-in-out);
67
+ transform: translateX(0);
68
+ transition: all 0.3s ease-in-out;
70
69
  }
71
70
 
72
71
  nav {
73
- margin-top: 6rem;
72
+ margin-top: 6rem; // XXX magic number
74
73
  min-height: 100%;
75
74
 
76
75
  @include media($nav-width) {
@@ -91,7 +90,7 @@
91
90
 
92
91
  .usa-search {
93
92
  @include media($nav-width) {
94
- margin-left: 1.5rem;
93
+ margin-left: 1.5rem; // XXX magic number
95
94
  }
96
95
  }
97
96
  }
@@ -117,7 +116,7 @@
117
116
 
118
117
  @include media($nav-width) {
119
118
  display: inline-block;
120
- margin-left: -4px;
119
+ // margin-left: -4px;
121
120
  }
122
121
 
123
122
  > a {
@@ -138,13 +137,15 @@
138
137
  }
139
138
 
140
139
  button {
140
+ $button-vertical-offset: 36%;
141
+
141
142
  @include button-unstyled;
142
143
  @include font-smoothing;
143
144
  font-weight: $font-normal;
144
145
  padding: 1.4rem 1.5rem 1rem 1.8rem;
145
146
 
146
147
  @include media($nav-width) {
147
- @include padding(null 3rem 1.9rem 1.5rem);
148
+ @include padding(null 3rem 3rem 1.5rem);
148
149
  color: $color-gray;
149
150
  font-size: $h5-font-size;
150
151
  font-weight: $font-bold;
@@ -175,7 +176,7 @@
175
176
  @include media($nav-width) {
176
177
  background-image: url('#{$image-path}/angle-arrow-down.png');
177
178
  background-image: url('#{$image-path}/angle-arrow-down.svg');
178
- background-position: right 1.5rem top 44%;
179
+ background-position: right 1.5rem top $button-vertical-offset;
179
180
  }
180
181
  }
181
182
 
@@ -191,7 +192,7 @@
191
192
  color: $color-white;
192
193
  background-image: url('#{$image-path}/angle-arrow-down-hover.png');
193
194
  background-image: url('#{$image-path}/angle-arrow-down-hover.svg');
194
- background-position: right 1.5rem top 44%;
195
+ background-position: right 1.5rem top $button-vertical-offset;
195
196
 
196
197
  &:hover {
197
198
  background-color: $color-primary-darkest;
@@ -208,7 +209,7 @@
208
209
  a.usa-current { // stylelint-disable-line selector-no-qualifying-type
209
210
  // undo the sidenav style
210
211
  border-left: 0;
211
- padding-left: 1rem;
212
+ padding-left: 1.5rem;
212
213
 
213
214
  span {
214
215
  @include nav-border;
@@ -223,7 +224,7 @@
223
224
  @include media($nav-width) {
224
225
  position: absolute;
225
226
  right: $site-margins;
226
- top: -5.7rem;
227
+ top: -5.7rem; // XXX magic number
227
228
  }
228
229
 
229
230
  .usa-search {
@@ -300,7 +301,7 @@
300
301
  // Navigation submenu (dropdown and mega menu) ----- //
301
302
 
302
303
  .usa-nav-submenu {
303
- @include usa-sidenav-sublist;
304
+ // @include usa-sidenav-sublist;
304
305
 
305
306
  @include media($nav-width) {
306
307
  @include unstyled-list;
@@ -318,7 +319,7 @@
318
319
  a {
319
320
  @include media($nav-width) {
320
321
  color: $color-white;
321
- padding-left: 1.8rem;
322
+ padding-left: 1.5rem; // XXX magic number
322
323
  }
323
324
 
324
325
  &:hover {
@@ -329,15 +330,18 @@
329
330
  }
330
331
  }
331
332
 
332
- &:hover,
333
- &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
334
- @include media($nav-width) {
335
- padding-left: 1.8rem;
336
- }
337
- }
333
+ // this used to be necessary to undo the `usa-sidenav-sublist`
334
+ // include, above
335
+ // &:hover,
336
+ // &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
337
+ // @include media($nav-width) {
338
+ // padding-left: 1.8rem;
339
+ // }
340
+ // }
338
341
  }
339
342
 
340
343
  li {
344
+ font-size: $h5-font-size;
341
345
  margin-bottom: 0;
342
346
  }
343
347
  }
@@ -379,8 +383,11 @@
379
383
 
380
384
  .usa-megamenu {
381
385
  @include media($nav-width) {
382
- @include padding(3.15rem null);
383
- left: -1.8rem;
386
+ @include padding(3.15rem null); // XXX magic number
387
+ // XXX this is the difference between the 2rem padding-left
388
+ // of .usa-nav-inner and the $site-margins (3rem) padding-left
389
+ // of .usa-megamenu
390
+ left: -1rem;
384
391
  width: 100%;
385
392
  }
386
393
 
@@ -402,6 +409,7 @@
402
409
  .usa-header-basic-megamenu {
403
410
  .usa-nav {
404
411
  @include media($nav-width) {
412
+ padding-left: 0;
405
413
  padding-top: 0;
406
414
  width: 100%;
407
415
  }
@@ -412,7 +420,7 @@
412
420
  flex-direction: column;
413
421
 
414
422
  @include media($nav-width) {
415
- display: initial;
423
+ display: block;
416
424
  float: right;
417
425
  margin-top: -4.8rem;
418
426
  }
@@ -421,7 +429,7 @@
421
429
  .usa-nav-submenu {
422
430
  .usa-grid-full {
423
431
  @include media($nav-width) {
424
- margin-left: -1.8rem;
432
+ margin-left: -1.8rem; // XXX magic number
425
433
  }
426
434
  }
427
435
  }
@@ -152,3 +152,48 @@
152
152
  .usa-end-row {
153
153
  @include omega();
154
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
+ }
@@ -191,7 +191,7 @@
191
191
  }
192
192
 
193
193
  &.usa-current { /* stylelint-disable-line selector-no-qualifying-type */
194
- border-left: 4px solid $color-primary;
194
+ border-left: 0.4rem solid $color-primary;
195
195
  color: $color-primary;
196
196
  font-weight: $font-bold;
197
197
  padding-left: 1.4rem;
@@ -11,16 +11,16 @@
11
11
  // Removing the !default from $em-base so we are not inheriting that
12
12
  // value from Bourbon.
13
13
  $em-base: 10px;
14
- $base-font-size: rem(17px) !default;
15
- $small-font-size: rem(14px) !default;
16
- $lead-font-size: rem(20px) !default;
17
- $title-font-size: rem(52px) !default;
18
- $h1-font-size: rem(40px) !default;
19
- $h2-font-size: rem(30px) !default;
20
- $h3-font-size: rem(20px) !default;
21
- $h4-font-size: rem(17px) !default;
22
- $h5-font-size: rem(15px) !default;
23
- $h6-font-size: rem(13px) !default;
14
+ $base-font-size: 1.7rem !default;
15
+ $small-font-size: 1.4rem !default;
16
+ $lead-font-size: 2rem !default;
17
+ $title-font-size: 5.2rem !default;
18
+ $h1-font-size: 4rem !default;
19
+ $h2-font-size: 3rem !default;
20
+ $h3-font-size: 2rem !default;
21
+ $h4-font-size: 1.7rem !default;
22
+ $h5-font-size: 1.5rem !default;
23
+ $h6-font-size: 1.3rem !default;
24
24
  $base-line-height: 1.5 !default;
25
25
  $heading-line-height: 1.3 !default;
26
26
  $lead-line-height: 1.7 !default;
@@ -113,7 +113,7 @@ $site-margins: 3rem !default;
113
113
  $site-margins-mobile: 1.5rem !default;
114
114
  $article-max-width: 600px !default;
115
115
  $input-max-width: 46rem !default;
116
- $border-radius: rem(3px) !default;
116
+ $border-radius: 3px !default;
117
117
  $box-shadow: 0 0 2px $color-shadow !default;
118
118
  $focus-shadow: 0 0 3px $color-focus, 0 0 7px $color-focus !default;
119
119
  $nav-width: 951px !default;
@@ -1,7 +1,7 @@
1
1
  // scss-lint:disable QualifyingElement, PropertyCount
2
2
 
3
3
  $input-line-height: 1.3;
4
- $input-border-width: 1px;
4
+ $input-border-width: 0.1rem; // Using rem instead of px so function uses same units
5
5
  $input-padding-vertical: 1rem;
6
6
 
7
7
  // input heights will vary by browser and type
@@ -9,7 +9,7 @@ $input-padding-vertical: 1rem;
9
9
  $input-height-exact: (
10
10
  ($base-font-size * $input-line-height) +
11
11
  ($input-padding-vertical * 2) +
12
- (rem($input-border-width * 2))
12
+ ($input-border-width * 2)
13
13
  );
14
14
 
15
15
  // truncated to 1 decimal place
@@ -142,9 +142,9 @@ legend {
142
142
 
143
143
  [type=checkbox],
144
144
  [type=radio] {
145
- margin-left: -2rem;
146
- opacity: 0;
147
- position: absolute;
145
+ // The actual input element is only visible to screen readers, because
146
+ // all visual styling is done via the label.
147
+ @include sr-only();
148
148
 
149
149
  .lt-ie9 & {
150
150
  border: 0;
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: uswds-rails
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.1.0
4
+ version: 1.3.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Jason Garber
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2017-07-20 00:00:00.000000000 Z
11
+ date: 2017-07-24 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: bundler
@@ -150,50 +150,44 @@ dependencies:
150
150
  name: bourbon
151
151
  requirement: !ruby/object:Gem::Requirement
152
152
  requirements:
153
- - - "~>"
154
- - !ruby/object:Gem::Version
155
- version: '4.3'
156
- - - ">="
153
+ - - '='
157
154
  - !ruby/object:Gem::Version
158
- version: 4.3.4
155
+ version: 4.2.7
159
156
  type: :runtime
160
157
  prerelease: false
161
158
  version_requirements: !ruby/object:Gem::Requirement
162
159
  requirements:
163
- - - "~>"
164
- - !ruby/object:Gem::Version
165
- version: '4.3'
166
- - - ">="
160
+ - - '='
167
161
  - !ruby/object:Gem::Version
168
- version: 4.3.4
162
+ version: 4.2.7
169
163
  - !ruby/object:Gem::Dependency
170
164
  name: neat
171
165
  requirement: !ruby/object:Gem::Requirement
172
166
  requirements:
173
- - - "~>"
167
+ - - '='
174
168
  - !ruby/object:Gem::Version
175
169
  version: '1.8'
176
170
  type: :runtime
177
171
  prerelease: false
178
172
  version_requirements: !ruby/object:Gem::Requirement
179
173
  requirements:
180
- - - "~>"
174
+ - - '='
181
175
  - !ruby/object:Gem::Version
182
176
  version: '1.8'
183
177
  - !ruby/object:Gem::Dependency
184
- name: normalize-scss
178
+ name: rails-assets-normalize-css
185
179
  requirement: !ruby/object:Gem::Requirement
186
180
  requirements:
187
- - - "~>"
181
+ - - '='
188
182
  - !ruby/object:Gem::Version
189
- version: '7.0'
183
+ version: 3.0.3
190
184
  type: :runtime
191
185
  prerelease: false
192
186
  version_requirements: !ruby/object:Gem::Requirement
193
187
  requirements:
194
- - - "~>"
188
+ - - '='
195
189
  - !ruby/object:Gem::Version
196
- version: '7.0'
190
+ version: 3.0.3
197
191
  description: Integrate the U.S. Web Design Standards into a Ruby on Rails application.
198
192
  email:
199
193
  - jason@sixtwothree.org
@@ -223,7 +217,6 @@ files:
223
217
  - app/assets/stylesheets/uswds/components/_navigation.scss
224
218
  - app/assets/stylesheets/uswds/components/_search.scss
225
219
  - app/assets/stylesheets/uswds/core/_utilities.scss
226
- - app/assets/stylesheets/uswds/core/_variables.scss
227
220
  - app/assets/stylesheets/uswds/elements/_inputs.scss
228
221
  - app/assets/stylesheets/uswds/elements/_typography.scss
229
222
  - app/assets/stylesheets/uswds/uswds.scss
@@ -1,112 +0,0 @@
1
- // Typography
2
- $em-base: 10px;
3
- $base-font-size: rem(17px);
4
- $small-font-size: rem(14px);
5
- $lead-font-size: rem(20px);
6
- $title-font-size: rem(52px);
7
- $h1-font-size: rem(40px);
8
- $h2-font-size: rem(30px);
9
- $h3-font-size: rem(20px);
10
- $h4-font-size: rem(17px);
11
- $h5-font-size: rem(15px);
12
- $h6-font-size: rem(13px);
13
- $base-line-height: 1.5;
14
- $heading-line-height: 1.3;
15
- $lead-line-height: 1.7;
16
-
17
- $font-sans: 'Source Sans Pro', $helvetica;
18
- $font-serif: 'Merriweather', $georgia;
19
-
20
- $font-normal: 400;
21
- $font-bold: 700;
22
-
23
- // Color
24
- $color-primary: #0071bc;
25
- $color-primary-darker: #205493;
26
- $color-primary-darkest: #112e51;
27
-
28
- $color-primary-alt: #02bfe7;
29
- $color-primary-alt-dark: #00a6d2;
30
- $color-primary-alt-darkest: #046b99;
31
- $color-primary-alt-light: #9bdaf1; // lighten($color-primary-alt, 60%)
32
- $color-primary-alt-lightest: #e1f3f8; // lighten($color-primary-alt, 90%)
33
-
34
- $color-secondary: #e31c3d;
35
- $color-secondary-dark: #cd2026;
36
- $color-secondary-darkest: #981b1e;
37
- $color-secondary-light: #e59393; // lighten($color-secondary, 60%)
38
- $color-secondary-lightest: #f9dede; // lighten($color-secondary, 90%)
39
-
40
- $color-white: #ffffff;
41
- $color-base: #212121;
42
- $color-black: #000000;
43
-
44
- $color-gray-dark: #323a45;
45
- $color-gray: #5b616b; // lighten($color-gray-dark, 20%)
46
- $color-gray-medium: #757575; // lightest gray that passes color contrast
47
- $color-gray-light: #aeb0b5; // lighten($color-gray-dark, 60%)
48
- $color-gray-lighter: #d6d7d9; // lighten($color-gray-dark, 80%)
49
- $color-gray-lightest: #f1f1f1; // lighten($color-gray-dark, 91%)
50
-
51
- $color-gray-warm-dark: #494440;
52
- $color-gray-warm-light: #e4e2e0; // lighten($color-gray-warm-dark, 90%)
53
- $color-gray-cool-light: #dce4ef; // lighten($color-primary, 90%)
54
-
55
- $color-gold: #fdb81e;
56
- $color-gold-light: #f9c642; // lighten($color-gold, 20%)
57
- $color-gold-lighter: #fad980; // lighten($color-gold, 60%)
58
- $color-gold-lightest: #fff1d2; // lighten($color-gold, 83%)
59
-
60
- $color-green: #2e8540;
61
- $color-green-light: #4aa564; // lighten($color-green, 20%)
62
- $color-green-lighter: #94bfa2; // lighten($color-green, 60%)
63
- $color-green-lightest: #e7f4e4; // lighten($color-green, 60%)
64
-
65
- $color-cool-blue: #205493;
66
- $color-cool-blue-light: #4773aa; // lighten($color-cool-blue, 20%)
67
- $color-cool-blue-lighter: #8ba6ca; // lighten($color-cool-blue, 60%)
68
- $color-cool-blue-lightest: #dce4ef; // lighten($color-cool-blue, 90%)
69
-
70
- $color-focus: #3e94cf;
71
- $color-visited: #4c2c92;
72
-
73
- $color-shadow: rgba(#000, 0.3);
74
-
75
- // Mobile First Breakpoints
76
- $small-screen: 481px;
77
- $medium-screen: 600px;
78
- $large-screen: 1201px;
79
-
80
- // Grid column counts by screen size
81
- $grid-columns-small: 1;
82
- $grid-columns-medium: 6;
83
- $grid-columns-large: 12;
84
-
85
- // @media single-keyword helpers
86
- $small: new-breakpoint(min-width $small-screen $grid-columns-small);
87
- $medium: new-breakpoint(min-width $medium-screen $grid-columns-medium);
88
- $large: new-breakpoint(min-width $large-screen $grid-columns-large);
89
-
90
- // Relative font and image file paths
91
- $font-path: 'uswds';
92
- $image-path: 'uswds';
93
-
94
- // Set $asset-pipeline to true if you're using the Rails Asset Pipeline
95
- $asset-pipeline: true;
96
-
97
- // Magic Numbers
98
- $text-max-width: 53rem;
99
- $lead-max-width: 77rem;
100
- $site-max-width: 1040px;
101
- $site-margins: 3rem;
102
- $site-margins-mobile: 1.5rem;
103
- $article-max-width: 600px;
104
- $input-max-width: 46rem;
105
- $border-radius: rem(3px);
106
- $box-shadow: 0 0 2px $color-shadow;
107
- $focus-shadow: 0 0 3px $color-focus, 0 0 7px $color-focus;
108
- $nav-width: 951px;
109
-
110
- // 44 x 44 pixels hit target following Apple iOS Human Interface
111
- // Guidelines
112
- $hit-area: 4.4rem;