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.
- checksums.yaml +4 -4
- data/Gemfile +1 -0
- data/README.md +1 -1
- data/app/assets/stylesheets/uswds/components/_alerts.scss +9 -0
- data/app/assets/stylesheets/uswds/components/_navigation.scss +34 -26
- data/app/assets/stylesheets/uswds/core/_utilities.scss +1 -1
- data/app/assets/stylesheets/uswds/elements/_inputs.scss +5 -5
- data/app/assets/stylesheets/uswds/uswds.scss +10 -6
- data/lib/uswds/rails/engine.rb +2 -2
- data/lib/uswds/rails/version.rb +1 -2
- data/uswds-rails.gemspec +3 -3
- data/vendor/assets/javascripts/uswds/uswds.js +327 -235
- data/vendor/assets/stylesheets/uswds/components/_alerts.scss +9 -0
- data/vendor/assets/stylesheets/uswds/components/_header.scss +1 -1
- data/vendor/assets/stylesheets/uswds/components/_navigation.scss +34 -26
- data/vendor/assets/stylesheets/uswds/core/_grid.scss +45 -0
- data/vendor/assets/stylesheets/uswds/core/_utilities.scss +1 -1
- data/vendor/assets/stylesheets/uswds/core/_variables.scss +11 -11
- data/vendor/assets/stylesheets/uswds/elements/_inputs.scss +5 -5
- metadata +13 -20
- data/app/assets/stylesheets/uswds/core/_variables.scss +0 -112
@@ -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
|
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
|
-
|
69
|
-
|
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
|
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
|
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
|
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:
|
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.
|
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
|
-
|
333
|
-
|
334
|
-
|
335
|
-
|
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
|
-
|
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:
|
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:
|
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:
|
15
|
-
$small-font-size:
|
16
|
-
$lead-font-size:
|
17
|
-
$title-font-size:
|
18
|
-
$h1-font-size:
|
19
|
-
$h2-font-size:
|
20
|
-
$h3-font-size:
|
21
|
-
$h4-font-size:
|
22
|
-
$h5-font-size:
|
23
|
-
$h6-font-size:
|
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:
|
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:
|
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
|
-
(
|
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
|
-
|
146
|
-
|
147
|
-
|
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:
|
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-
|
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.
|
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.
|
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-
|
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:
|
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:
|
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;
|