va_common 0.3.2 → 0.3.3
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/app/assets/js/vendor/jquery-accessible-simple-tooltip-aria.js +75 -0
- data/app/assets/stylesheets/_va.scss +694 -561
- data/app/assets/stylesheets/ie.css +147 -0
- data/app/views/va_common/_footer.html.erb +90 -50
- data/app/views/va_common/_header.html.erb +71 -37
- data/app/views/va_common/_main.html.erb +1 -1
- data/lib/va_common/version.rb +1 -1
- metadata +5 -3
@@ -1,5 +1,22 @@
|
|
1
1
|
// Vets.gov
|
2
2
|
|
3
|
+
// Skip link
|
4
|
+
|
5
|
+
.show-on-focus {
|
6
|
+
position: absolute;
|
7
|
+
top: -10em;
|
8
|
+
background: #fff;
|
9
|
+
padding: 1em;
|
10
|
+
color: $color-primary-darkest;
|
11
|
+
display: block;
|
12
|
+
font-weight: 600;
|
13
|
+
&:hover {background: #fff;}
|
14
|
+
&:focus {
|
15
|
+
position: inherit;
|
16
|
+
top: auto;
|
17
|
+
outline: 2px solid $color-gold;
|
18
|
+
}
|
19
|
+
}
|
3
20
|
|
4
21
|
// Other Colors
|
5
22
|
$polar:#E8F5FA;
|
@@ -11,7 +28,6 @@ $olso-gray:#849097;
|
|
11
28
|
$roboto-slab: 'Roboto Slab', serif;
|
12
29
|
|
13
30
|
|
14
|
-
|
15
31
|
// General
|
16
32
|
html, body {
|
17
33
|
padding: 0;
|
@@ -29,6 +45,49 @@ body, body.home {
|
|
29
45
|
}
|
30
46
|
|
31
47
|
|
48
|
+
// Gem Specific css
|
49
|
+
ul li:before {
|
50
|
+
content:none;
|
51
|
+
}
|
52
|
+
|
53
|
+
#content ul.breadcrumbs li.active {
|
54
|
+
margin: 0em;
|
55
|
+
}
|
56
|
+
|
57
|
+
|
58
|
+
// Search
|
59
|
+
|
60
|
+
.overlay {
|
61
|
+
z-index: 10000;
|
62
|
+
}
|
63
|
+
|
64
|
+
.reveal-modal #search_form {
|
65
|
+
margin-bottom: 1em;
|
66
|
+
}
|
67
|
+
|
68
|
+
.reveal-modal .close-reveal-modal {
|
69
|
+
font-size: 1em;
|
70
|
+
clear: both;
|
71
|
+
text-decoration: none;
|
72
|
+
color: $color-gray-dark;
|
73
|
+
text-align: center;
|
74
|
+
margin: 1em 0;
|
75
|
+
position: relative;
|
76
|
+
top: auto;
|
77
|
+
display: block;
|
78
|
+
padding: 1em 0;
|
79
|
+
right: auto;
|
80
|
+
width: 100%;
|
81
|
+
bottom: auto;
|
82
|
+
}
|
83
|
+
|
84
|
+
#search_form input[type="submit"] {
|
85
|
+
font-size: 1em;
|
86
|
+
max-height: 2.65em;
|
87
|
+
}
|
88
|
+
|
89
|
+
// end gem specific
|
90
|
+
|
32
91
|
// row
|
33
92
|
body .row.full {
|
34
93
|
width: 100%;
|
@@ -76,26 +135,6 @@ color: $color-gray-dark;
|
|
76
135
|
|
77
136
|
}
|
78
137
|
|
79
|
-
/*
|
80
|
-
a[href*="//"]:not([href*="http://department-of-veterans-affairs.github.io/vets-website"]) {
|
81
|
-
background: url(../images/icons/icon-exit-white.png);
|
82
|
-
-webkit-background-size: 18px 15.38px;
|
83
|
-
background-size: 18px 15.38px;
|
84
|
-
background-position: right center!important;
|
85
|
-
background-repeat: no-repeat;
|
86
|
-
padding-right: 2em;
|
87
|
-
position: relative;
|
88
|
-
&:hover {
|
89
|
-
background:rgba(0,0,0,0.2) url(../images/icons/icon-exit-gold.png)!important;
|
90
|
-
-webkit-background-size: 18px 15.38px!important;
|
91
|
-
background-size: 18px 15.38px!important;
|
92
|
-
background-position: right center!important;
|
93
|
-
background-repeat: no-repeat!important;
|
94
|
-
}
|
95
|
-
}
|
96
|
-
*/
|
97
|
-
|
98
|
-
|
99
138
|
|
100
139
|
// Logo and Header
|
101
140
|
|
@@ -138,21 +177,14 @@ h1 {
|
|
138
177
|
// Type
|
139
178
|
|
140
179
|
h1, h2 {
|
141
|
-
font-family: $font-sans;
|
142
|
-
font-weight: 600;
|
180
|
+
font-family: $font-sans;
|
181
|
+
font-weight: 600;
|
143
182
|
}
|
144
183
|
h3, h4, h5, h6 {
|
145
|
-
color:$color-primary-darkest;
|
146
|
-
font-
|
147
|
-
font-weight: 400;
|
148
|
-
&.alternate{
|
149
|
-
font-family: $font-sans;
|
150
|
-
}
|
184
|
+
color:$color-primary-darkest;
|
185
|
+
font-weight: 600;
|
151
186
|
}
|
152
187
|
|
153
|
-
// Header
|
154
|
-
|
155
|
-
|
156
188
|
// Links
|
157
189
|
|
158
190
|
a {text-decoration: underline; background: rgba(0,0,0,.05);}
|
@@ -163,114 +195,107 @@ a:hover {text-decoration: underline; background: rgba(0,0,0,.1);}
|
|
163
195
|
#content {margin: 0; padding: 0; color: $color-gray-dark;}
|
164
196
|
|
165
197
|
#content .splash {
|
166
|
-
padding: .5em 0;
|
167
|
-
margin: 0;
|
168
|
-
|
169
|
-
|
170
|
-
&.home {
|
171
|
-
background: #ccc;
|
172
|
-
background: rgba(0,0,0,.1);
|
173
|
-
}
|
198
|
+
padding: 0 0 .5em 0;
|
199
|
+
margin: 0;
|
200
|
+
@media #{$small} {padding: .5em 0;}
|
174
201
|
|
175
|
-
&.app {
|
176
|
-
padding: 0;
|
177
202
|
p {color: #fff; font-family: $font-sans;}
|
178
|
-
ul.breadcrumbs {
|
179
|
-
display: inline-block;
|
180
|
-
margin: 0 0 .5em 0; padding: 0;
|
181
|
-
@media #{$small} {margin-right: 1em;}
|
182
|
-
h2 {margin: 0; padding: .2em; line-height: 1em; display: block;}
|
183
|
-
li {overflow: hidden; padding: 0;}
|
184
|
-
}
|
185
|
-
p {margin: .5em 0 1em 0;}
|
186
|
-
}
|
187
203
|
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
|
199
|
-
}
|
204
|
+
&.app {
|
205
|
+
padding: 0;
|
206
|
+
p {color: #fff; font-family: $font-sans;}
|
207
|
+
ul.breadcrumbs {
|
208
|
+
display: inline-block;
|
209
|
+
margin: 0 0 .5em 0; padding: 0;
|
210
|
+
@media #{$small} {margin-right: 1em;}
|
211
|
+
h2 {margin: 0; padding: .2em; line-height: 1em; display: block;}
|
212
|
+
li {overflow: hidden; padding: 0;}
|
213
|
+
}
|
214
|
+
p {margin: .5em 0 1em 0;}
|
215
|
+
}
|
200
216
|
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
|
217
|
+
@media #{$small} {padding: 1em 0;}
|
218
|
+
@media #{$medium} {padding: 2em 0;}
|
219
|
+
@media #{$large} {padding: 2.5em 0;}
|
220
|
+
span, h2 {
|
221
|
+
padding: 0;
|
222
|
+
display: inline;
|
223
|
+
line-height: 1.3em;
|
224
|
+
margin: .5em 0 0 0;
|
225
|
+
white-space: pre-wrap;
|
226
|
+
color: #333;
|
227
|
+
a {background: $color-gold; color: #444;}
|
228
|
+
}
|
209
229
|
|
210
|
-
|
211
|
-
|
212
|
-
|
213
|
-
|
230
|
+
h2 span {clear: both; padding: .1em; display: inline-block; background: $color-gold; font-weight: normal;}
|
231
|
+
h2, h3, p {/*padding: .35em; */ margin: 0; display: inline-block; font-family: $roboto-slab;}
|
232
|
+
h2 {
|
233
|
+
font-size: 1em;
|
234
|
+
display: inline-block;
|
235
|
+
@media #{$small} {font-size: 2em;}
|
214
236
|
}
|
237
|
+
h3 {font-weight: 500; font-size: 1.4em; color: #555;}
|
215
238
|
|
216
|
-
|
217
|
-
|
239
|
+
&.alternate {
|
240
|
+
li a {
|
241
|
+
color: $color-primary-darkest;
|
242
|
+
border-bottom: 2px solid $secondary-color;
|
243
|
+
}
|
244
|
+
|
245
|
+
li.parent:after {color: #ccc;}
|
246
|
+
}
|
218
247
|
|
219
248
|
}
|
220
249
|
|
221
250
|
.pitch {
|
222
|
-
@media #{$small} {padding: .5em 0;}
|
223
|
-
h2, h3 {color: $color-primary-darkest; font-weight: 400; padding: .75em; line-height: 1.3em; display: inline-block; margin: 0;}
|
251
|
+
@media #{$small} {padding: .5em 0;}
|
252
|
+
h2, h3 {color: $color-primary-darkest; font-weight: 400; padding: .75em; line-height: 1.3em; display: inline-block; margin: 0;}
|
224
253
|
}
|
225
254
|
|
226
255
|
#experience .splash {padding: 0; margin: 0;}
|
227
256
|
|
228
257
|
#experience .splash h2 {
|
229
|
-
margin: .5em 0; padding: 0;
|
230
|
-
a {
|
231
|
-
|
232
|
-
|
233
|
-
|
234
|
-
|
235
|
-
|
236
|
-
}
|
258
|
+
margin: .5em 0; padding: 0;
|
259
|
+
a {
|
260
|
+
margin: 0;
|
261
|
+
color: #444;
|
262
|
+
background: $color-gold;
|
263
|
+
line-height: 1.4em;
|
264
|
+
font-size: .9em;
|
265
|
+
}
|
237
266
|
}
|
238
267
|
|
239
268
|
.feature-list ul {
|
240
|
-
margin: 0; padding: 0;
|
241
|
-
li {
|
242
|
-
a {font-weight: bold;}
|
243
|
-
list-style-position: outside;
|
244
|
-
list-style-type: none;
|
245
|
-
border-bottom: 1px solid #ccc;
|
246
|
-
padding: 1em 0;
|
247
|
-
&:last-of-type {border-bottom: none;}
|
248
|
-
}
|
269
|
+
margin: 0; padding: 0;
|
270
|
+
li {
|
271
|
+
a {font-weight: bold;}
|
272
|
+
list-style-position: outside;
|
273
|
+
list-style-type: none;
|
274
|
+
border-bottom: 1px solid #ccc;
|
275
|
+
padding: 1em 0;
|
276
|
+
&:last-of-type {border-bottom: none;}
|
277
|
+
}
|
249
278
|
}
|
250
279
|
|
251
280
|
.primary {
|
252
|
-
|
253
|
-
@media #{$small} {padding:
|
254
|
-
@media #{$
|
255
|
-
|
256
|
-
|
257
|
-
|
258
|
-
}
|
281
|
+
@media #{$small} {padding: 1em 0;}
|
282
|
+
@media #{$small} {padding: 2em 0;}
|
283
|
+
@media #{$medium} {padding: 2em 0;}
|
284
|
+
h3 {
|
285
|
+
padding: 0 0 .5em 0;
|
286
|
+
}
|
259
287
|
}
|
260
288
|
|
261
289
|
html.no-touch .banner {
|
262
|
-
background: image-url("design/banner.jpg") 50% 60% no-repeat;
|
263
|
-
background-size: cover;
|
290
|
+
background: image-url("design/banner.jpg") 50% 60% no-repeat;
|
291
|
+
background-size: cover;
|
264
292
|
}
|
265
293
|
|
266
294
|
// Headings
|
267
295
|
|
268
|
-
h1 {}
|
269
|
-
h2 {}
|
270
296
|
h3 {color: $color-primary-darkest; font-size: 1.8em; padding: 0 0 1em 0;}
|
271
297
|
h4 {font-size: 1.5em;}
|
272
298
|
h5 {font-size: 1em; font-weight: bold;}
|
273
|
-
h6 {}
|
274
299
|
|
275
300
|
// tagline
|
276
301
|
|
@@ -282,16 +307,22 @@ p {
|
|
282
307
|
margin: 0 0 2em 0;
|
283
308
|
color: rgba(255,255,255,.7);
|
284
309
|
line-height: 1.2em;
|
285
|
-
}
|
286
|
-
}
|
287
|
-
|
288
|
-
body.home, body.fourohfour {
|
289
|
-
.main {background: none;}
|
310
|
+
}
|
290
311
|
}
|
291
312
|
|
292
313
|
// Content Callouts
|
293
314
|
|
294
315
|
#content .main .section.one {
|
316
|
+
ol {
|
317
|
+
margin: 0;
|
318
|
+
list-style-position: outside;
|
319
|
+
li {
|
320
|
+
margin: 0 0 1em 0;
|
321
|
+
}
|
322
|
+
ul, ol {
|
323
|
+
margin: .5em 0 .5em 1.2em;
|
324
|
+
}
|
325
|
+
}
|
295
326
|
|
296
327
|
ul {
|
297
328
|
margin: 0 0 1em 1.2em;
|
@@ -318,12 +349,17 @@ body.home, body.fourohfour {
|
|
318
349
|
padding: 1em;
|
319
350
|
clear: both;
|
320
351
|
margin: 0 0 1.5em 0;
|
352
|
+
p {margin-bottom: 0; padding-bottom: .5em}
|
353
|
+
p:nth-child(1) {
|
354
|
+
font-size: 1em;
|
355
|
+
color: #333;
|
356
|
+
padding-bottom: inherit;
|
357
|
+
}
|
321
358
|
h3 {font-size: 1.5em;}
|
322
359
|
ul {
|
323
360
|
margin: 0 0 .5em 1.5em; padding: 0;
|
324
361
|
li {
|
325
362
|
list-style: square;
|
326
|
-
padding: 0 .25em;
|
327
363
|
margin: 0;
|
328
364
|
}
|
329
365
|
}
|
@@ -335,129 +371,129 @@ body.home, body.fourohfour {
|
|
335
371
|
li p:first-of-type,
|
336
372
|
ul+p
|
337
373
|
{
|
338
|
-
font-weight: normal;
|
374
|
+
font-weight: normal !important;
|
375
|
+
color: #333;
|
376
|
+
font-size: 1em;
|
377
|
+
padding-bottom: 0;
|
339
378
|
}
|
340
379
|
p:nth-child(1) {
|
341
|
-
font-size: 1.
|
380
|
+
font-size: 1.25em;
|
381
|
+
color: $color-primary-darker;
|
342
382
|
letter-spacing: normal;
|
343
|
-
font-weight:
|
383
|
+
font-weight: normal;
|
344
384
|
padding-bottom: 1em;
|
345
385
|
}
|
346
|
-
|
347
386
|
}
|
348
387
|
|
349
388
|
#content .main.interior {
|
350
|
-
background: #fff;
|
351
|
-
a {
|
352
|
-
text-decoration: underline;
|
353
|
-
|
354
|
-
// padding: .2em .3em .1em .3em;
|
355
|
-
// display: inline-block;
|
356
|
-
// margin-bottom: .2em;
|
357
|
-
}
|
358
|
-
|
359
|
-
// First Paragraph
|
360
|
-
|
361
|
-
|
362
|
-
|
389
|
+
background: #fff;
|
390
|
+
a {text-decoration: underline;}
|
363
391
|
}
|
364
392
|
|
365
393
|
// Home page specific
|
366
394
|
|
367
395
|
.home #content {
|
368
|
-
h2, h3, h4, h5, h6, p, ul, li, ol, a {color:
|
369
|
-
color:
|
396
|
+
h2, h3, h4, h5, h6, p, ul, li, ol, a {color: $color-gray-dark;}
|
397
|
+
.post-date {font-size: .5em; color: $color-gold;}
|
398
|
+
h3 {
|
399
|
+
border-bottom: 1px solid #fff;
|
400
|
+
line-height: 1.2em;
|
401
|
+
border-bottom: 6px solid $color-primary-darker;
|
402
|
+
font-size: 1.65em;
|
403
|
+
color: $color-primary;
|
404
|
+
margin: 0 0 2.5em 0;
|
405
|
+
padding: 0 0 .2em 0;
|
406
|
+
}
|
370
407
|
|
371
|
-
|
408
|
+
h4 a {
|
409
|
+
text-decoration: none;
|
410
|
+
&:hover {
|
411
|
+
border-bottom: 1px solid #fff;
|
412
|
+
color: $color-gold;
|
413
|
+
}
|
414
|
+
}
|
372
415
|
|
373
|
-
|
416
|
+
.read-more {
|
417
|
+
font-size: .5em;
|
418
|
+
display: inline-block;
|
419
|
+
border-bottom: 1px solid $secondary-color;
|
420
|
+
color: $secondary-color;
|
421
|
+
&:hover {
|
422
|
+
background: none;
|
423
|
+
color: $color-primary-darkest;
|
424
|
+
background: rgba(1,1,1,.1);
|
425
|
+
border-bottom: 1px solid $secondary-color;
|
426
|
+
}
|
427
|
+
}
|
374
428
|
|
375
|
-
|
376
|
-
|
377
|
-
|
378
|
-
border-bottom:
|
379
|
-
|
429
|
+
ul.plain {
|
430
|
+
margin: 0;
|
431
|
+
padding: 0;
|
432
|
+
li {list-style: none; border-bottom: none;}
|
433
|
+
/*a {background: none;}*/
|
380
434
|
}
|
381
|
-
}
|
382
435
|
|
383
|
-
.
|
384
|
-
|
385
|
-
|
386
|
-
border-bottom: 1px solid $secondary-color;
|
387
|
-
color: $secondary-color;
|
388
|
-
&:hover {
|
389
|
-
background: none;
|
390
|
-
color: $color-primary-darkest;
|
391
|
-
background: rgba(1,1,1,.1);
|
392
|
-
border-bottom: 1px solid $secondary-color;
|
436
|
+
.section {
|
437
|
+
padding: 4em 0 2em 0;
|
438
|
+
text-align: left;
|
393
439
|
}
|
394
|
-
}
|
395
440
|
|
396
|
-
|
397
|
-
|
398
|
-
|
399
|
-
|
400
|
-
|
401
|
-
|
441
|
+
.section.main-menu {
|
442
|
+
padding: .5em .5em 2.35em .5em;
|
443
|
+
@media #{$small} {padding: 1em 0 1.5em 0;}
|
444
|
+
.navigation {
|
445
|
+
padding: 1.5em 0 0 0;
|
446
|
+
background: none;
|
447
|
+
ul li a {
|
448
|
+
h3 {border-bottom: none;}
|
449
|
+
}
|
450
|
+
}
|
451
|
+
}
|
402
452
|
|
403
|
-
.section {
|
404
|
-
padding: 4em 0 2em 0;
|
405
|
-
text-align: left;
|
406
|
-
}
|
407
453
|
|
408
|
-
.section.
|
409
|
-
|
410
|
-
|
411
|
-
|
412
|
-
|
413
|
-
|
414
|
-
|
415
|
-
ul li a {
|
416
|
-
h3 {border-bottom: none;}
|
417
|
-
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.4);
|
454
|
+
.section.one, .section.two {
|
455
|
+
a {
|
456
|
+
color: $color-gray-dark;
|
457
|
+
&:hover {
|
458
|
+
color: $color-primary-darkest;
|
459
|
+
background: rgba(0,0,0,.15);
|
460
|
+
}
|
418
461
|
}
|
419
462
|
}
|
420
|
-
}
|
421
463
|
|
464
|
+
.home #content .section h3.alternate {
|
465
|
+
margin: 0 0 2em 0 !important; padding: 0;
|
466
|
+
}
|
422
467
|
|
423
|
-
.section.one
|
424
|
-
|
425
|
-
|
426
|
-
&:hover {
|
427
|
-
color: $color-gold;
|
428
|
-
background: rgba(0,0,0,.2);
|
429
|
-
}
|
468
|
+
.section.one {
|
469
|
+
padding: 0 0 1.5em 0;
|
470
|
+
@media #{$small} {padding: 2em 0 4em 0;}
|
430
471
|
}
|
431
|
-
}
|
432
472
|
|
433
|
-
.section.
|
434
|
-
|
435
|
-
|
436
|
-
}
|
473
|
+
.section.two {
|
474
|
+
padding: 2em 0;
|
475
|
+
a, h3 {color: #fff;}
|
476
|
+
h3 {border-bottom: none;}
|
477
|
+
background: rgba(0,0,0,.1);
|
478
|
+
}
|
437
479
|
|
438
|
-
.section.
|
439
|
-
|
440
|
-
|
441
|
-
|
442
|
-
|
480
|
+
.section.three {
|
481
|
+
background: #fff;
|
482
|
+
padding: 5em 0;
|
483
|
+
h2, h3, h4, h5, h6, p, li {color: #444;}
|
484
|
+
h4 {font-size: 1em; margin: 0; padding: 0; line-height: 1.2em;}
|
485
|
+
a {color: $color-primary-darkest;}
|
486
|
+
}
|
443
487
|
}
|
444
488
|
|
445
|
-
.section.three {
|
446
|
-
background: #fff;
|
447
|
-
padding: 5em 0;
|
448
|
-
h2, h3, h4, h5, h6, p, li {color: #444;}
|
449
|
-
h4 {font-size: 1em; margin: 0; padding: 0; line-height: 1.2em;}
|
450
|
-
a {color: $color-primary-darkest;}
|
451
|
-
}
|
452
|
-
}
|
453
489
|
|
454
490
|
#content .section.primary {
|
455
|
-
background: none;
|
456
|
-
padding: 2em 0;
|
457
|
-
background: $color-primary;
|
458
|
-
h1, h2, h3, h4, h5, h6, p, li {color: #fff;}
|
459
|
-
p {color: rgba(255,255,255,1);}
|
460
|
-
a {color: #fff;}
|
491
|
+
background: none;
|
492
|
+
padding: 2em 0;
|
493
|
+
background: $color-primary;
|
494
|
+
h1, h2, h3, h4, h5, h6, p, li {color: #fff;}
|
495
|
+
p {color: rgba(255,255,255,1);}
|
496
|
+
a {color: #fff;}
|
461
497
|
}
|
462
498
|
|
463
499
|
#content .section.secondary {
|
@@ -470,20 +506,15 @@ background: $polar;
|
|
470
506
|
}
|
471
507
|
|
472
508
|
#content .section.quaternary {
|
473
|
-
|
474
|
-
|
475
|
-
|
476
|
-
|
477
|
-
|
478
|
-
|
479
|
-
|
480
|
-
a {
|
481
|
-
height:12em;
|
509
|
+
background: #dcddde;
|
510
|
+
h1, h2, h3, h4, h5, h6, p, li {color: #fff;}
|
511
|
+
h4 {font-weight: 700;}
|
512
|
+
.cards {
|
513
|
+
a {
|
514
|
+
height:12em;
|
515
|
+
}
|
482
516
|
}
|
483
|
-
}
|
484
|
-
.feature {
|
485
|
-
background: none;
|
486
|
-
}
|
517
|
+
.feature {background: none;}
|
487
518
|
}
|
488
519
|
|
489
520
|
#content .section.coda {
|
@@ -498,10 +529,7 @@ h2, h3, h4, h5, h6 {margin: 0; padding: 0 0 .5em 0;}
|
|
498
529
|
h2 {line-height: 1.2em;}
|
499
530
|
}
|
500
531
|
|
501
|
-
#content .section .feature {
|
502
|
-
min-height: 11em;
|
503
|
-
|
504
|
-
}
|
532
|
+
#content .section .feature { min-height: 11em;}
|
505
533
|
|
506
534
|
#content .panel {
|
507
535
|
background: $color-gray-lightest;
|
@@ -510,20 +538,17 @@ margin-bottom: 1.5em;
|
|
510
538
|
clear: both;
|
511
539
|
}
|
512
540
|
|
513
|
-
#content .actions {padding: 1em 0;}
|
514
|
-
|
515
541
|
#content .section.do {
|
516
|
-
background: #efefef;
|
517
|
-
padding: 2em 0;
|
518
|
-
|
519
|
-
|
520
|
-
|
521
|
-
a {
|
522
|
-
a.usa-button-primary {background: $color-green;}
|
542
|
+
background: #efefef;
|
543
|
+
padding: 2em 0;
|
544
|
+
h2, h3, h4, h5, h6, p, li {color: #444;}
|
545
|
+
h4 {font-size: 1em; margin: 0; padding: 0; line-height: 1.2em;}
|
546
|
+
a {color: #fff;}
|
547
|
+
a.usa-button-primary {background: $color-green;}
|
523
548
|
}
|
524
549
|
|
525
|
-
#content
|
526
|
-
a.usa-button-primary.start {background: $color-green; text-decoration: none;}
|
550
|
+
#content {
|
551
|
+
a.usa-button-primary.start {background: $color-green; text-decoration: none;}
|
527
552
|
}
|
528
553
|
|
529
554
|
#content .section.secondary,
|
@@ -568,42 +593,21 @@ text-align: left;
|
|
568
593
|
}
|
569
594
|
|
570
595
|
|
571
|
-
// Iconic SVG icons
|
572
|
-
|
573
|
-
.icon {
|
574
|
-
display: inline-block;
|
575
|
-
margin: 10px;
|
576
|
-
width: 16px;
|
577
|
-
height: 16px;
|
578
|
-
}
|
579
|
-
|
580
|
-
.icon-account-login {
|
581
|
-
fill: #f00;
|
582
|
-
}
|
583
|
-
|
584
|
-
.icon {
|
585
|
-
color: red;
|
586
|
-
fill: red;
|
587
|
-
}
|
588
|
-
|
589
|
-
|
590
596
|
// Breadcrumbs
|
591
597
|
|
592
598
|
#content ul.breadcrumbs {
|
593
|
-
background: none;
|
594
|
-
border: none;
|
595
|
-
|
596
|
-
|
597
|
-
padding: 0;
|
598
|
-
@media #{$small} {margin: 0 0 1em 0;}
|
599
|
-
border-radius: 0;
|
600
|
-
border-radius: none;
|
601
|
-
-webkit-border-radius: 0;
|
602
|
-
|
599
|
+
background: none;
|
600
|
+
border: none;
|
601
|
+
margin: 0 0 1em 0;
|
602
|
+
h2 {font-size: 1em;}
|
603
|
+
padding: 0;
|
604
|
+
@media #{$small} {margin: 0 0 1em 0;}
|
605
|
+
border-radius: 0;
|
606
|
+
border-radius: none;
|
607
|
+
-webkit-border-radius: 0;
|
603
608
|
|
604
|
-
li {
|
609
|
+
li {
|
605
610
|
text-transform: none;
|
606
|
-
display: block;
|
607
611
|
margin: .25em 0;
|
608
612
|
padding: .1em;
|
609
613
|
display: inline-block;
|
@@ -615,37 +619,33 @@ li {
|
|
615
619
|
&:hover {border-bottom: none; text-decoration: none;}
|
616
620
|
&.parent {
|
617
621
|
a {background: none;}
|
618
|
-
display: block;
|
619
622
|
padding-top: .5em;
|
620
623
|
margin: 0 0 .75em 0;
|
621
624
|
@media #{$small} {display: inline-block;}
|
622
625
|
|
623
626
|
&:before {content: none; vertical-align: middle;}
|
624
627
|
&:after {content:" › "; display: inline-block; color: #fff; padding: 0 .5em;}
|
628
|
+
}
|
625
629
|
|
630
|
+
&.active {
|
631
|
+
background: $color-gold;
|
632
|
+
color: #000;
|
633
|
+
font-family: $roboto-slab;
|
634
|
+
font-weight: 400;
|
635
|
+
margin: .5em 0;
|
636
|
+
padding: .2em;
|
637
|
+
font-size: 1.35em;
|
638
|
+
@media #{$medium} {font-size: 1.8em;}
|
639
|
+
&:before {content: ""; padding: 0; margin: 0;}
|
640
|
+
}
|
641
|
+
}
|
642
|
+
a {
|
643
|
+
border-bottom: 3px solid #fff;
|
644
|
+
background: none;
|
645
|
+
text-decoration: none !important;
|
646
|
+
color: #fff;
|
647
|
+
&:hover {text-decoration: none; background: rgba(0,0,0,.1); border-bottom: 3px solid $color-gold;}
|
626
648
|
}
|
627
|
-
|
628
|
-
&.active {
|
629
|
-
background: $color-gold;
|
630
|
-
color: #000;
|
631
|
-
font-family: $roboto-slab;
|
632
|
-
font-weight: 400;
|
633
|
-
margin: .5em 0;
|
634
|
-
padding: .2em;
|
635
|
-
font-size: 1.35em;
|
636
|
-
@media #{$medium} {font-size: 1.8em;}
|
637
|
-
&:before {content: ""; padding: 0; margin: 0;}
|
638
|
-
}
|
639
|
-
|
640
|
-
|
641
|
-
}
|
642
|
-
a {
|
643
|
-
border-bottom: 3px solid #fff;
|
644
|
-
background: none;
|
645
|
-
text-decoration: none !important;
|
646
|
-
color: #fff;
|
647
|
-
&:hover {text-decoration: none; background: rgba(0,0,0,.1); border-bottom: 3px solid $color-gold;}
|
648
|
-
}
|
649
649
|
}
|
650
650
|
|
651
651
|
// General List Styles
|
@@ -685,6 +685,13 @@ li {
|
|
685
685
|
|
686
686
|
// Tables
|
687
687
|
table {
|
688
|
+
|
689
|
+
caption {
|
690
|
+
text-align: left;
|
691
|
+
padding: 0 0 .25em 0;
|
692
|
+
font-weight: bold;
|
693
|
+
font-size: 1.25em;
|
694
|
+
}
|
688
695
|
border: 0;
|
689
696
|
text-align: left;
|
690
697
|
@media #{$small-only} {
|
@@ -772,14 +779,6 @@ li {
|
|
772
779
|
|
773
780
|
// Navigation
|
774
781
|
|
775
|
-
#content.interior .section-nav {
|
776
|
-
padding: 1em 0 2em 0;
|
777
|
-
ul.small-block-grid-1 {
|
778
|
-
h2, h3, h4, h5, h6 {
|
779
|
-
}
|
780
|
-
}
|
781
|
-
}
|
782
|
-
|
783
782
|
#content.interior .navigation,
|
784
783
|
#content #playbook .navigation {
|
785
784
|
padding: 1em 0;
|
@@ -804,7 +803,7 @@ li {
|
|
804
803
|
ul.cards li {
|
805
804
|
margin: 0;
|
806
805
|
height: auto;
|
807
|
-
h3, h4, h5, h6 {color: $color-primary-darkest; font-weight:
|
806
|
+
h3, h4, h5, h6 {color: $color-primary-darkest; font-weight: 700; font-family: $font-sans; font-size: 1.35em;}
|
808
807
|
h4 {font-size: 1.3em;}
|
809
808
|
border-bottom: 1px solid rgba(0,0,0,.2);
|
810
809
|
&:last-of-type { border-bottom: none;}
|
@@ -825,7 +824,6 @@ li {
|
|
825
824
|
}
|
826
825
|
}
|
827
826
|
|
828
|
-
|
829
827
|
body.home .navigation, body.fourohfour .navigation {
|
830
828
|
background: none;
|
831
829
|
padding: 3em 0;
|
@@ -858,75 +856,61 @@ body.home .main-navigation {
|
|
858
856
|
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
|
859
857
|
-webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
|
860
858
|
transform: rotate(45deg);
|
861
|
-
transform-origin: 20% 40%;
|
862
|
-
|
863
|
-
}
|
864
|
-
|
865
|
-
// Cards
|
866
|
-
|
867
|
-
|
868
|
-
ul.large-block-grid-3 >li {
|
859
|
+
transform-origin: 20% 40%;
|
869
860
|
|
870
861
|
}
|
871
862
|
|
863
|
+
// Cards
|
864
|
+
|
872
865
|
[class*="block-grid-"]>li {
|
873
|
-
padding:
|
874
|
-
@media #{$small} {padding: 0 0.625rem 1.25rem;}
|
866
|
+
padding: 0;
|
867
|
+
@media #{$small} {padding: 0 0.625rem 1.25rem 0.625rem;}
|
875
868
|
}
|
876
869
|
|
877
|
-
|
878
870
|
#content .cards {
|
879
871
|
-webkit-backface-visibility: hidden;
|
880
872
|
backface-visibility: hidden;
|
881
873
|
|
882
|
-
a, .coming-soon {
|
883
|
-
|
884
|
-
|
885
|
-
|
886
|
-
|
887
|
-
|
888
|
-
|
889
|
-
@media #{$small} {padding: .45em .75em; text-align: left;}
|
890
|
-
width: 100%;
|
891
|
-
color: #fff;
|
892
|
-
display: block;
|
893
|
-
font-weight: normal;
|
894
|
-
text-decoration: none;
|
895
|
-
h3 {
|
874
|
+
a, .coming-soon {
|
875
|
+
padding: 1em 1.15em;
|
876
|
+
margin: 0 -0.9375rem;
|
877
|
+
border-bottom: 2px solid rgba(255,255,255,.3);
|
878
|
+
color: #fff;
|
879
|
+
display: block;
|
880
|
+
font-weight: normal;
|
896
881
|
text-decoration: none;
|
897
|
-
|
898
|
-
|
899
|
-
|
900
|
-
|
901
|
-
|
882
|
+
background: $color-primary-darker;
|
883
|
+
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.1);
|
884
|
+
@media #{$small} {padding: .45em .75em; border-bottom: none; text-align: left; border-radius: .2em; margin: 0 0 .25em 0}
|
885
|
+
@media #{$medium} {height: 10em;}
|
886
|
+
|
887
|
+
h3 {
|
888
|
+
text-decoration: none;
|
889
|
+
margin: 0;
|
890
|
+
padding: 0;
|
891
|
+
@media #{$small} {margin: 0 0 1em 0;}
|
892
|
+
}
|
902
893
|
|
903
|
-
|
904
|
-
h3, h4, h5 {font-size: 1.35em; font-weight: 700;}
|
894
|
+
h3, h4, h5 {font-size: 1.35em; font-weight: 700;}
|
905
895
|
|
906
|
-
|
907
|
-
/* display: -webkit-inline-flex;
|
908
|
-
display: inline-flex;
|
909
|
-
*/
|
910
|
-
@media #{$small} {padding: 0m 0 1em 0;}
|
911
|
-
line-height: 1.5em;
|
896
|
+
h4 {margin: 0; padding: 0;}
|
912
897
|
|
913
|
-
|
914
|
-
|
915
|
-
|
916
|
-
|
917
|
-
|
918
|
-
}
|
898
|
+
p {
|
899
|
+
@media #{$small} {padding: 0m 0 1em 0;}
|
900
|
+
line-height: 1.5em;
|
901
|
+
@media #{$small} {margin: 0;}
|
902
|
+
}
|
919
903
|
|
920
|
-
|
921
|
-
|
922
|
-
|
923
|
-
|
904
|
+
&:hover, &:active, &:focus {
|
905
|
+
background: $color-primary;
|
906
|
+
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.15);
|
907
|
+
}
|
924
908
|
|
925
|
-
|
909
|
+
h2, h3, h4, h5, h6 {padding: 0 0 .25em 0; margin: 0; color: #fff; display: block; clear: both; width: 100%;}
|
926
910
|
|
927
|
-
|
928
|
-
|
929
|
-
|
911
|
+
&:hover div {
|
912
|
+
a {color: $color-gold; p {color: $color-gold;}}
|
913
|
+
}
|
930
914
|
}
|
931
915
|
|
932
916
|
.coming-soon {
|
@@ -1160,10 +1144,15 @@ body.page-playbook {
|
|
1160
1144
|
margin: 0;
|
1161
1145
|
background: darken($color-primary-darkest, 02);
|
1162
1146
|
|
1147
|
+
.text-right {
|
1148
|
+
text-align: right;
|
1149
|
+
}
|
1163
1150
|
|
1164
|
-
|
1165
|
-
|
1166
|
-
|
1151
|
+
.small-block-grid-1 {
|
1152
|
+
li {padding: 0; margin: 0;}
|
1153
|
+
}
|
1154
|
+
|
1155
|
+
a.usa-button {text-decoration: none; margin-bottom: 1em;}
|
1167
1156
|
|
1168
1157
|
.usa-social-links a {
|
1169
1158
|
border-bottom: none;
|
@@ -1172,6 +1161,7 @@ body.page-playbook {
|
|
1172
1161
|
border-bottom: none;
|
1173
1162
|
}
|
1174
1163
|
}
|
1164
|
+
|
1175
1165
|
ul {
|
1176
1166
|
margin: 0;
|
1177
1167
|
padding: .5em 0;
|
@@ -1186,19 +1176,15 @@ body.page-playbook {
|
|
1186
1176
|
li, p, a {
|
1187
1177
|
color: #fff;
|
1188
1178
|
font-size: 1em;
|
1189
|
-
&:before {
|
1190
|
-
content: none;
|
1191
|
-
}
|
1192
1179
|
}
|
1193
1180
|
|
1194
1181
|
a {
|
1195
1182
|
text-decoration: underline;
|
1196
1183
|
display: block;
|
1197
1184
|
background: none;
|
1198
|
-
padding: 0;
|
1199
1185
|
font-weight: 400;
|
1200
1186
|
@media #{$small} {display: inline-block; margin: .25em 0;}
|
1201
|
-
&:hover {color
|
1187
|
+
&:hover {color: $color-gold;}
|
1202
1188
|
&.contact, &.blog {
|
1203
1189
|
padding: .65em; font-size: 1em; text-align: center; border: 2px solid $secondary-color;
|
1204
1190
|
@media #{$small} {margin: 1.5em auto; display: inline-block;}
|
@@ -1234,7 +1220,7 @@ a {
|
|
1234
1220
|
background: rgba(0,0,0,.055);
|
1235
1221
|
}
|
1236
1222
|
.footer-seal {
|
1237
|
-
background:image-url("design/seal/seal-footer.png") no-repeat;
|
1223
|
+
background: image-url("design/seal/seal-footer.png") no-repeat;
|
1238
1224
|
text-indent:-325px;
|
1239
1225
|
overflow: hidden;
|
1240
1226
|
|
@@ -1254,6 +1240,7 @@ a {
|
|
1254
1240
|
padding: 1.75em 0;
|
1255
1241
|
}
|
1256
1242
|
}
|
1243
|
+
|
1257
1244
|
.footer-crisis {
|
1258
1245
|
background:$color-gold;
|
1259
1246
|
margin: 1.625rem 0;
|
@@ -1281,13 +1268,13 @@ a {
|
|
1281
1268
|
}
|
1282
1269
|
ul.final-list {
|
1283
1270
|
text-align: center;
|
1284
|
-
|
1271
|
+
@media #{$large} {text-align: left;}
|
1272
|
+
font-size: 1em;
|
1285
1273
|
padding: 1.5em 0 0 0;
|
1286
1274
|
width: 100%;
|
1287
1275
|
border-bottom: none !important;
|
1288
1276
|
display: block;
|
1289
1277
|
margin: 0 auto;
|
1290
|
-
@media #{$medium} {font-size: .9em;}
|
1291
1278
|
|
1292
1279
|
&:after {
|
1293
1280
|
visibility: hidden;
|
@@ -1308,8 +1295,8 @@ ul.final-list {
|
|
1308
1295
|
}
|
1309
1296
|
&:after {
|
1310
1297
|
content:"|";
|
1311
|
-
padding: 0 .
|
1312
|
-
|
1298
|
+
padding: 0 .2em;
|
1299
|
+
opacity: .5;
|
1313
1300
|
}
|
1314
1301
|
&:last-of-type:after {
|
1315
1302
|
padding:0;
|
@@ -1317,7 +1304,10 @@ ul.final-list {
|
|
1317
1304
|
}
|
1318
1305
|
a {
|
1319
1306
|
display:inline-block;
|
1320
|
-
padding: .
|
1307
|
+
padding: .2em;
|
1308
|
+
&:hover {
|
1309
|
+
color: $color-gold;
|
1310
|
+
}
|
1321
1311
|
}
|
1322
1312
|
}
|
1323
1313
|
}
|
@@ -1396,6 +1386,15 @@ li {
|
|
1396
1386
|
}
|
1397
1387
|
}
|
1398
1388
|
|
1389
|
+
.primary blockquote {
|
1390
|
+
margin: 0 0 1em 0;
|
1391
|
+
padding: 0 0 0 1em;
|
1392
|
+
border-left: 2px solid $color-gray-lighter;
|
1393
|
+
p {
|
1394
|
+
color: $color-primary-darker;
|
1395
|
+
}
|
1396
|
+
}
|
1397
|
+
|
1399
1398
|
body.index, body.page-playbook {
|
1400
1399
|
.footer {
|
1401
1400
|
// background: $color-primary-darkest url(../img/design/seal/seal.png) bottom center no-repeat;
|
@@ -1492,10 +1491,6 @@ a {color: #fff; background: none;}
|
|
1492
1491
|
padding: 1.25em 0 1.5em 0;
|
1493
1492
|
border-top: none;
|
1494
1493
|
background: $color-primary-darker;
|
1495
|
-
|
1496
|
-
.usa-button {
|
1497
|
-
font-size: .9em;
|
1498
|
-
}
|
1499
1494
|
}
|
1500
1495
|
|
1501
1496
|
.feedback {
|
@@ -1506,21 +1501,14 @@ a {color: #fff; background: none;}
|
|
1506
1501
|
@media #{$medium-up} {
|
1507
1502
|
right:3em;
|
1508
1503
|
vertical-align: middle;
|
1509
|
-
|
1504
|
+
}
|
1505
|
+
a {
|
1506
|
+
opacity: 0.6;
|
1510
1507
|
}
|
1511
1508
|
}
|
1512
1509
|
.message {
|
1513
1510
|
font-size:.95rem;
|
1514
1511
|
font-weight: 700;
|
1515
|
-
span {
|
1516
|
-
background: image-url("design/icons/wrench.png") center left no-repeat;
|
1517
|
-
background-position: 0 4px;
|
1518
|
-
background-repeat: no-repeat;
|
1519
|
-
background-size: 16px 14px;
|
1520
|
-
display:inline-block;
|
1521
|
-
padding-left: 1.5em;
|
1522
|
-
|
1523
|
-
}
|
1524
1512
|
p {
|
1525
1513
|
font-size: .9rem;
|
1526
1514
|
font-weight: 300;
|
@@ -1541,69 +1529,6 @@ a {color: #fff; background: none;}
|
|
1541
1529
|
|
1542
1530
|
// Search
|
1543
1531
|
|
1544
|
-
#search_form {
|
1545
|
-
input[type="submit"] {
|
1546
|
-
font-size: 16px;
|
1547
|
-
}
|
1548
|
-
}
|
1549
|
-
.reveal-modal {
|
1550
|
-
padding: 0px;
|
1551
|
-
}
|
1552
|
-
#trigger-overlay-button button {
|
1553
|
-
font-size: 16px;
|
1554
|
-
padding: .5em;
|
1555
|
-
}
|
1556
|
-
|
1557
|
-
button#overlay-close-button {
|
1558
|
-
border-radius: 0;
|
1559
|
-
display: block;
|
1560
|
-
width: 100% !important;
|
1561
|
-
margin: 0;
|
1562
|
-
width: auto;
|
1563
|
-
background: #0071bc;
|
1564
|
-
color: #fff;
|
1565
|
-
}
|
1566
|
-
|
1567
|
-
.overlay {
|
1568
|
-
z-index: 10000;
|
1569
|
-
}
|
1570
|
-
.search-button {
|
1571
|
-
margin: 0.1em .5em 0 0;
|
1572
|
-
padding: 0;
|
1573
|
-
float: right;
|
1574
|
-
a {
|
1575
|
-
line-height: 1em;
|
1576
|
-
display: inline-block;
|
1577
|
-
padding: .41em;
|
1578
|
-
font-size: .85em;
|
1579
|
-
border-radius: .2em;
|
1580
|
-
text-decoration: none;
|
1581
|
-
background: $color-primary;
|
1582
|
-
color: #fff;
|
1583
|
-
}
|
1584
|
-
}
|
1585
|
-
|
1586
|
-
.reveal-modal #search_form {
|
1587
|
-
margin-bottom: 1em;
|
1588
|
-
}
|
1589
|
-
|
1590
|
-
.reveal-modal .close-reveal-modal {
|
1591
|
-
font-size: 1em;
|
1592
|
-
clear: both;
|
1593
|
-
text-decoration: none;
|
1594
|
-
color: $color-gray-dark;
|
1595
|
-
text-align: center;
|
1596
|
-
margin: 1em 0;
|
1597
|
-
position: relative;
|
1598
|
-
top: auto;
|
1599
|
-
display: block;
|
1600
|
-
padding: 1em 0;
|
1601
|
-
right: auto;
|
1602
|
-
width: 100%;
|
1603
|
-
bottom: auto;
|
1604
|
-
}
|
1605
|
-
|
1606
|
-
|
1607
1532
|
#search_form {
|
1608
1533
|
padding: 1.1em 0;
|
1609
1534
|
text-align: right;
|
@@ -2019,7 +1944,7 @@ li {
|
|
2019
1944
|
&.step.nine
|
2020
1945
|
{
|
2021
1946
|
&:before {
|
2022
|
-
background:white
|
1947
|
+
background:white url(../images/icons/SVG/loop2.svg)center center no-repeat;
|
2023
1948
|
display:inline-block;
|
2024
1949
|
width:3.4em;
|
2025
1950
|
height:2.2em;
|
@@ -2093,34 +2018,7 @@ li {
|
|
2093
2018
|
background: image-url("design/playbook/discover-process.svg") 40% center no-repeat;
|
2094
2019
|
}
|
2095
2020
|
}
|
2096
|
-
|
2097
|
-
background: none!important;
|
2098
|
-
border-bottom: none!important;
|
2099
|
-
i {
|
2100
|
-
background: image-url("icons/info-circle.png"); /* IE svg fallback */
|
2101
|
-
background-image: image-url("icons/SVG/info-circle.svg");
|
2102
|
-
display: inline-block;
|
2103
|
-
-webkit-background-size: 20px 20px;
|
2104
|
-
background-size: 20px 20px;
|
2105
|
-
width: 20px;
|
2106
|
-
height: 20px;
|
2107
|
-
position: relative;
|
2108
|
-
top:.3em
|
2109
|
-
}
|
2110
|
-
}
|
2111
|
-
.tooltip {
|
2112
|
-
background: #000044;
|
2113
|
-
&>.nub {
|
2114
|
-
border-color: transparent transparent #000044 transparent!important;
|
2115
|
-
@media #{$small-only} {
|
2116
|
-
border:none!important
|
2117
|
-
}
|
2118
|
-
}
|
2119
|
-
@media #{$small-only} {
|
2120
|
-
left:auto!important;
|
2121
|
-
max-width: 100%!important;
|
2122
|
-
}
|
2123
|
-
}
|
2021
|
+
|
2124
2022
|
.tap-to-close {
|
2125
2023
|
color:$color-gold!important;
|
2126
2024
|
font-size: .8em!important;
|
@@ -2297,103 +2195,127 @@ button[class*="usa-button-"] {
|
|
2297
2195
|
font-size: .8em;
|
2298
2196
|
color: #444;
|
2299
2197
|
background: #fff;
|
2198
|
+
&.minimal {
|
2199
|
+
border-top: none;
|
2200
|
+
padding: .25em 0;
|
2201
|
+
}
|
2202
|
+
}
|
2203
|
+
|
2204
|
+
// Info block
|
2205
|
+
|
2206
|
+
.info-block {
|
2207
|
+
p {
|
2208
|
+
padding: 0;
|
2209
|
+
margin: 0;
|
2210
|
+
}
|
2300
2211
|
}
|
2301
2212
|
|
2302
2213
|
body.home .disclaimer, body.page-playbook .disclaimer {
|
2303
2214
|
display: none;
|
2304
2215
|
}
|
2305
|
-
|
2306
|
-
|
2307
2216
|
// Mobile menu
|
2308
2217
|
|
2309
2218
|
/* Overlay style */
|
2310
|
-
.overlay {
|
2311
|
-
position: fixed;
|
2312
|
-
width: 100%;
|
2313
|
-
height: 100%;
|
2314
|
-
top: 0;
|
2315
|
-
left: 0;
|
2316
|
-
z-index: 800;
|
2317
|
-
background: rgba($color-primary-darkest, .95);
|
2318
|
-
}
|
2319
2219
|
|
2320
|
-
|
2321
|
-
.overlay .overlay-close {
|
2322
|
-
border: none;
|
2323
|
-
outline: none;
|
2324
|
-
z-index: 100;
|
2325
|
-
}
|
2220
|
+
@media #{$small-only} {
|
2326
2221
|
|
2222
|
+
.overlay {
|
2223
|
+
position: fixed;
|
2224
|
+
width: 100%;
|
2225
|
+
height: 100%;
|
2226
|
+
top: 0;
|
2227
|
+
left: 0;
|
2228
|
+
z-index: 800;
|
2229
|
+
background: rgba($color-primary-darkest, .95);
|
2230
|
+
}
|
2327
2231
|
|
2328
|
-
|
2329
|
-
|
2330
|
-
|
2331
|
-
|
2332
|
-
|
2232
|
+
/* Overlay closing cross */
|
2233
|
+
.overlay .overlay-close {
|
2234
|
+
display: block;
|
2235
|
+
border: none;
|
2236
|
+
outline: none;
|
2237
|
+
z-index: 100;
|
2238
|
+
}
|
2333
2239
|
|
2334
|
-
/* Effects */
|
2335
|
-
.overlay-fullscreen {
|
2336
|
-
opacity: 0;
|
2337
|
-
visibility: hidden;
|
2338
|
-
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
|
2339
|
-
transition: opacity 0.5s, visibility 0s 0.5s;
|
2340
2240
|
|
2341
|
-
button {
|
2342
|
-
|
2343
|
-
|
2344
|
-
|
2345
|
-
|
2346
|
-
|
2347
|
-
|
2241
|
+
button#trigger-overlay {
|
2242
|
+
padding: .5em;
|
2243
|
+
margin-top: 0;
|
2244
|
+
border-radius: .15em;
|
2245
|
+
}
|
2246
|
+
|
2247
|
+
/* Effects */
|
2248
|
+
.overlay-fullscreen {
|
2249
|
+
opacity: 0;
|
2250
|
+
visibility: hidden;
|
2251
|
+
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
|
2252
|
+
transition: opacity 0.5s, visibility 0s 0.5s;
|
2253
|
+
|
2254
|
+
button {
|
2255
|
+
border-radius: 0;
|
2256
|
+
display: block;
|
2257
|
+
width: 100% !important;
|
2258
|
+
margin: 0;
|
2259
|
+
width: auto;
|
2260
|
+
background: $color-primary;
|
2261
|
+
|
2262
|
+
}
|
2263
|
+
|
2264
|
+
input[type="text"] {
|
2265
|
+
border-radius: 3px 0 0 3px;
|
2266
|
+
-moz-border-radius: 3px 0 0 3px;
|
2267
|
+
-webkit-border-radius: 3px 0 0 3px;
|
2268
|
+
-webkit-appearance: none;
|
2269
|
+
}
|
2348
2270
|
|
2349
2271
|
}
|
2350
2272
|
|
2351
|
-
|
2352
|
-
|
2353
|
-
|
2354
|
-
-webkit-
|
2355
|
-
|
2273
|
+
.overlay-fullscreen.open {
|
2274
|
+
opacity: 1;
|
2275
|
+
visibility: visible;
|
2276
|
+
-webkit-transition: opacity 0.5s;
|
2277
|
+
transition: opacity 0.5s;
|
2278
|
+
.columns {
|
2279
|
+
padding: 0;
|
2280
|
+
}
|
2356
2281
|
}
|
2357
2282
|
|
2358
|
-
|
2283
|
+
.overlay-fullscreen .menu {
|
2284
|
+
-webkit-perspective: 1200px;
|
2285
|
+
perspective: 1200px;
|
2286
|
+
padding: 1em 1em;
|
2287
|
+
}
|
2359
2288
|
|
2360
|
-
.overlay-fullscreen
|
2361
|
-
|
2362
|
-
|
2363
|
-
|
2364
|
-
|
2365
|
-
|
2289
|
+
.overlay-fullscreen form {
|
2290
|
+
opacity: 0.4;
|
2291
|
+
-webkit-transform: translateY(-25%) rotateX(35deg);
|
2292
|
+
transform: translateY(-25%) rotateX(35deg);
|
2293
|
+
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
|
2294
|
+
transition: transform 0.5s, opacity 0.5s;
|
2295
|
+
}
|
2366
2296
|
|
2367
|
-
.overlay-fullscreen
|
2368
|
-
|
2369
|
-
|
2370
|
-
|
2371
|
-
}
|
2297
|
+
.overlay-fullscreen.open form {
|
2298
|
+
opacity: 1;
|
2299
|
+
-webkit-transform: rotateX(0deg);
|
2300
|
+
transform: rotateX(0deg);
|
2301
|
+
}
|
2372
2302
|
|
2373
|
-
.overlay-fullscreen form {
|
2374
|
-
|
2375
|
-
|
2376
|
-
|
2377
|
-
-webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
|
2378
|
-
transition: transform 0.5s, opacity 0.5s;
|
2379
|
-
}
|
2303
|
+
.overlay-fullscreen.close form {
|
2304
|
+
-webkit-transform: translateY(25%) rotateX(-35deg);
|
2305
|
+
transform: translateY(25%) rotateX(-35deg);
|
2306
|
+
}
|
2380
2307
|
|
2381
|
-
|
2382
|
-
|
2383
|
-
|
2384
|
-
|
2385
|
-
}
|
2308
|
+
@media screen and (max-height: 30.5em) {
|
2309
|
+
.overlay form {
|
2310
|
+
height: 70%;
|
2311
|
+
}
|
2386
2312
|
|
2387
|
-
|
2388
|
-
-webkit-transform: translateY(25%) rotateX(-35deg);
|
2389
|
-
transform: translateY(25%) rotateX(-35deg);
|
2390
|
-
}
|
2313
|
+
}
|
2391
2314
|
|
2392
|
-
|
2393
|
-
.overlay form {
|
2394
|
-
height: 70%;
|
2395
|
-
}
|
2315
|
+
}
|
2396
2316
|
|
2317
|
+
.overlay-close {
|
2318
|
+
display: none;
|
2397
2319
|
}
|
2398
2320
|
|
2399
2321
|
// List overrides
|
@@ -2411,30 +2333,241 @@ a.vets-app {
|
|
2411
2333
|
padding: 0 0 0 .5em !important;
|
2412
2334
|
}
|
2413
2335
|
|
2414
|
-
//
|
2336
|
+
// Tooltip
|
2337
|
+
button.js-simple-tooltip {
|
2338
|
+
font-family: 'Courier New', 'Courier', serif;
|
2339
|
+
font-weight:bold;
|
2340
|
+
cursor: pointer;
|
2341
|
+
display:inline-block;
|
2342
|
+
padding: 0;
|
2343
|
+
border-radius: 1.75em;
|
2344
|
+
background: $color-gray-dark;
|
2345
|
+
margin: 0 0 0 .5em;
|
2346
|
+
color: white;
|
2347
|
+
height: 1.75em;
|
2348
|
+
font-size: .8em;
|
2349
|
+
width: 1.75em;
|
2350
|
+
text-align: center;
|
2351
|
+
vertical-align: middle;
|
2352
|
+
}
|
2353
|
+
.simpletooltip[aria-hidden="true"] {
|
2354
|
+
display: none;
|
2355
|
+
}
|
2356
|
+
.simpletooltip_container {
|
2357
|
+
position: relative;
|
2358
|
+
}
|
2359
|
+
.simpletooltip {
|
2360
|
+
position: absolute;
|
2361
|
+
z-index: 777;
|
2362
|
+
width: 11em;
|
2363
|
+
border-radius: .3em;
|
2364
|
+
background: $color-gray-dark;
|
2365
|
+
color: $color-white;
|
2366
|
+
padding: .6em;
|
2367
|
+
text-align: left;
|
2368
|
+
font-size: 1em;
|
2369
|
+
font-weight: 300;
|
2370
|
+
line-height: 1.3;
|
2371
|
+
}
|
2372
|
+
.simpletooltip {
|
2373
|
+
right: auto;
|
2374
|
+
left: 100%;
|
2375
|
+
margin-left: .8em;
|
2376
|
+
}
|
2377
|
+
.simpletooltip:before {
|
2378
|
+
border-bottom: 10px solid transparent; /* left arrow slant */
|
2379
|
+
border-top: 10px solid transparent; /* right arrow slant */
|
2380
|
+
border-right: 10px solid $color-gray-dark;
|
2381
|
+
content:"";
|
2382
|
+
font-size: 0;
|
2383
|
+
position: absolute;
|
2384
|
+
top: 3px;
|
2385
|
+
left: 0px;
|
2386
|
+
line-height: 0;
|
2387
|
+
margin-left: -10px;
|
2388
|
+
width:0;
|
2389
|
+
height:0
|
2390
|
+
}
|
2391
|
+
@media (max-width: 40.063em) {
|
2392
|
+
.simpletooltip {
|
2393
|
+
top: 100%;
|
2394
|
+
left: 45%;
|
2395
|
+
right: 0;
|
2396
|
+
margin: 0;
|
2397
|
+
margin-top: .7em;
|
2398
|
+
margin-left: -5em;
|
2399
|
+
}
|
2400
|
+
.simpletooltip:before {
|
2401
|
+
top: -10px;
|
2402
|
+
right: auto;
|
2403
|
+
left: 45%;
|
2404
|
+
margin-left: -5px;
|
2405
|
+
margin-top: -10px;
|
2406
|
+
border: 10px solid transparent;
|
2407
|
+
border-bottom: 10px solid rgba( 0, 0, 0, .9 );
|
2408
|
+
}
|
2409
|
+
}
|
2410
|
+
|
2411
|
+
// html.no-touchevents {
|
2412
|
+
// .touch {display: none;}
|
2413
|
+
// .no-touch {display: block;}
|
2414
|
+
// }
|
2415
|
+
|
2416
|
+
// html.touchevents {
|
2417
|
+
// .touch {display: block;}
|
2418
|
+
// .no-touch {display: none;}
|
2419
|
+
// }
|
2420
|
+
|
2421
|
+
// Animate CSS components
|
2422
|
+
|
2423
|
+
|
2424
|
+
.animated {
|
2425
|
+
-webkit-animation-duration: 1.25s;
|
2426
|
+
animation-duration: 1.25s;
|
2427
|
+
-webkit-animation-fill-mode: both;
|
2428
|
+
animation-fill-mode: both;
|
2429
|
+
}
|
2430
|
+
|
2431
|
+
.animated.hinge {
|
2432
|
+
-webkit-animation-duration: 2s;
|
2433
|
+
animation-duration: 2s;
|
2434
|
+
}
|
2435
|
+
|
2436
|
+
@-webkit-keyframes bounce {
|
2437
|
+
0%, 20%, 50%, 80%, 100% {
|
2438
|
+
-webkit-transform: translateY(0);
|
2439
|
+
transform: translateY(0);
|
2440
|
+
}
|
2441
|
+
|
2442
|
+
40% {
|
2443
|
+
-webkit-transform: translateY(-30px);
|
2444
|
+
transform: translateY(-30px);
|
2445
|
+
}
|
2446
|
+
|
2447
|
+
60% {
|
2448
|
+
-webkit-transform: translateY(-15px);
|
2449
|
+
transform: translateY(-15px);
|
2450
|
+
}
|
2451
|
+
}
|
2452
|
+
|
2453
|
+
@keyframes bounce {
|
2454
|
+
0%, 20%, 50%, 80%, 100% {
|
2455
|
+
-webkit-transform: translateY(0);
|
2456
|
+
-ms-transform: translateY(0);
|
2457
|
+
transform: translateY(0);
|
2458
|
+
}
|
2459
|
+
|
2460
|
+
40% {
|
2461
|
+
-webkit-transform: translateY(-30px);
|
2462
|
+
-ms-transform: translateY(-30px);
|
2463
|
+
transform: translateY(-30px);
|
2464
|
+
}
|
2465
|
+
|
2466
|
+
60% {
|
2467
|
+
-webkit-transform: translateY(-15px);
|
2468
|
+
-ms-transform: translateY(-15px);
|
2469
|
+
transform: translateY(-15px);
|
2470
|
+
}
|
2471
|
+
}
|
2472
|
+
|
2473
|
+
.bounce {
|
2474
|
+
-webkit-animation-name: bounce;
|
2475
|
+
animation-name: bounce;
|
2476
|
+
}
|
2477
|
+
|
2478
|
+
@-webkit-keyframes flash {
|
2479
|
+
0%, 50%, 100% {
|
2480
|
+
opacity: 1;
|
2481
|
+
}
|
2482
|
+
|
2483
|
+
25%, 75% {
|
2484
|
+
opacity: 0;
|
2485
|
+
}
|
2486
|
+
}
|
2487
|
+
|
2488
|
+
@keyframes flash {
|
2489
|
+
0%, 50%, 100% {
|
2490
|
+
opacity: 1;
|
2491
|
+
}
|
2492
|
+
|
2493
|
+
25%, 75% {
|
2494
|
+
opacity: 0;
|
2495
|
+
}
|
2496
|
+
}
|
2497
|
+
|
2498
|
+
|
2499
|
+
|
2500
|
+
|
2501
|
+
@-webkit-keyframes fadeIn {
|
2502
|
+
0% {
|
2503
|
+
opacity: 0;
|
2504
|
+
}
|
2505
|
+
|
2506
|
+
100% {
|
2507
|
+
opacity: 1;
|
2508
|
+
}
|
2509
|
+
}
|
2510
|
+
|
2511
|
+
@keyframes fadeIn {
|
2512
|
+
0% {
|
2513
|
+
opacity: 0;
|
2514
|
+
}
|
2515
|
+
|
2516
|
+
100% {
|
2517
|
+
opacity: 1;
|
2518
|
+
}
|
2519
|
+
}
|
2520
|
+
|
2521
|
+
.fadeIn {
|
2522
|
+
-webkit-animation-name: fadeIn;
|
2523
|
+
animation-name: fadeIn;
|
2524
|
+
}
|
2525
|
+
|
2526
|
+
@-webkit-keyframes fadeInDown {
|
2527
|
+
0% {
|
2528
|
+
opacity: 0;
|
2529
|
+
-webkit-transform: translateY(-20px);
|
2530
|
+
transform: translateY(-20px);
|
2531
|
+
}
|
2415
2532
|
|
2416
|
-
|
2417
|
-
|
2533
|
+
100% {
|
2534
|
+
opacity: 1;
|
2535
|
+
-webkit-transform: translateY(0);
|
2536
|
+
transform: translateY(0);
|
2537
|
+
}
|
2538
|
+
}
|
2418
2539
|
|
2419
|
-
|
2420
|
-
|
2540
|
+
@keyframes fadeInDown {
|
2541
|
+
0% {
|
2542
|
+
opacity: 0;
|
2543
|
+
-webkit-transform: translateY(-20px);
|
2544
|
+
-ms-transform: translateY(-20px);
|
2545
|
+
transform: translateY(-20px);
|
2546
|
+
}
|
2421
2547
|
|
2422
|
-
|
2423
|
-
|
2548
|
+
100% {
|
2549
|
+
opacity: 1;
|
2550
|
+
-webkit-transform: translateY(0);
|
2551
|
+
-ms-transform: translateY(0);
|
2552
|
+
transform: translateY(0);
|
2553
|
+
}
|
2554
|
+
}
|
2424
2555
|
|
2425
|
-
|
2556
|
+
.fadeInDown {
|
2557
|
+
-webkit-animation-name: fadeInDown;
|
2558
|
+
animation-name: fadeInDown;
|
2559
|
+
}
|
2426
2560
|
|
2427
|
-
|
2428
|
-
|
2429
|
-
|
2430
|
-
|
2431
|
-
|
2561
|
+
@-webkit-keyframes fadeInDownBig {
|
2562
|
+
0% {
|
2563
|
+
opacity: 0;
|
2564
|
+
-webkit-transform: translateY(-2000px);
|
2565
|
+
transform: translateY(-2000px);
|
2566
|
+
}
|
2432
2567
|
|
2433
|
-
|
2434
|
-
|
2435
|
-
|
2436
|
-
|
2437
|
-
|
2438
|
-
|
2439
|
-
.tipsy-e .tipsy-arrow { right: 0; top: 50%; margin-top: -5px; border-left-style: solid; border-right: none; border-top-color: transparent; border-bottom-color: transparent; }
|
2440
|
-
.tipsy-w .tipsy-arrow { left: 0; top: 50%; margin-top: -5px; border-right-style: solid; border-left: none; border-top-color: transparent; border-bottom-color: transparent; }
|
2568
|
+
100% {
|
2569
|
+
opacity: 1;
|
2570
|
+
-webkit-transform: translateY(0);
|
2571
|
+
transform: translateY(0);
|
2572
|
+
}
|
2573
|
+
}
|