@department-of-veterans-affairs/css-library 0.13.1-rc2 → 0.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (46) hide show
  1. package/dist/stylesheets/_mixins.scss +3 -2
  2. package/dist/stylesheets/base/fonts.css +1596 -1
  3. package/dist/stylesheets/base/headings.css +1530 -1
  4. package/dist/stylesheets/base/utils.css +137 -1
  5. package/dist/stylesheets/base/va.css +1850 -1
  6. package/dist/stylesheets/core.css +6047 -1
  7. package/dist/stylesheets/formation-overrides/core/base.css +64 -1
  8. package/dist/stylesheets/formation-overrides/core/fonts.css +46 -1
  9. package/dist/stylesheets/formation-overrides/elements/buttons.css +562 -1
  10. package/dist/stylesheets/formation-overrides/elements/inputs.css +384 -1
  11. package/dist/stylesheets/formation-overrides/elements/labels.css +28 -1
  12. package/dist/stylesheets/formation-overrides/elements/lists.css +57 -1
  13. package/dist/stylesheets/formation-overrides/elements/table.css +78 -1
  14. package/dist/stylesheets/formation-overrides/elements/typography.css +312 -1
  15. package/dist/stylesheets/mobile-typography.css +13 -1
  16. package/dist/stylesheets/modules/m-action-link.css +1454 -1
  17. package/dist/stylesheets/modules/m-additional-info.css +39 -1
  18. package/dist/stylesheets/modules/m-alert.css +252 -1
  19. package/dist/stylesheets/modules/m-breadcrumbs.css +96 -1
  20. package/dist/stylesheets/modules/m-button.css +153 -1
  21. package/dist/stylesheets/modules/m-dropdown.css +47 -1
  22. package/dist/stylesheets/modules/m-emergency-banner.css +33 -1
  23. package/dist/stylesheets/modules/m-external-link.css +14 -1
  24. package/dist/stylesheets/modules/m-form-elements.css +231 -1
  25. package/dist/stylesheets/modules/m-form-process.css +219 -1
  26. package/dist/stylesheets/modules/m-homepage-hero.css +76 -1
  27. package/dist/stylesheets/modules/m-hub-page-link-list.css +40 -1
  28. package/dist/stylesheets/modules/m-loading-indicator.css +41 -1
  29. package/dist/stylesheets/modules/m-maintenance-banner.css +33 -1
  30. package/dist/stylesheets/modules/m-megamenu.css +370 -1
  31. package/dist/stylesheets/modules/m-modal.css +117 -1
  32. package/dist/stylesheets/modules/m-nav-linklist.css +49 -1
  33. package/dist/stylesheets/modules/m-nav-sidebar.css +349 -1
  34. package/dist/stylesheets/modules/m-omb-info.css +5 -0
  35. package/dist/stylesheets/modules/m-overlay.css +72 -1
  36. package/dist/stylesheets/modules/m-print.css +27 -1
  37. package/dist/stylesheets/modules/m-process-list.css +162 -1
  38. package/dist/stylesheets/modules/va-pagination.css +90 -1
  39. package/dist/stylesheets/modules/va-tabs.css +53 -1
  40. package/dist/stylesheets/shame.css +266 -1
  41. package/dist/stylesheets/uswds-typography.css +4222 -1
  42. package/dist/stylesheets/utilities.css +15622 -1
  43. package/dist/tokens/css/variables.css +3 -3
  44. package/dist/tokens/json/variables.json +4 -4
  45. package/dist/tokens/scss/variables.scss +3 -3
  46. package/package.json +2 -2
@@ -1 +1,1454 @@
1
- a.vads-c-action-link--blue,a.vads-c-action-link--green,a.vads-c-action-link--white{font-weight:bold;padding:4px 0 4px 38px;position:relative;display:inline-block}a.vads-c-action-link--blue:before,a.vads-c-action-link--green:before,a.vads-c-action-link--white:before{background-image:url("/img/arrow-right-white.svg");background-size:18px 18px;background-repeat:no-repeat;background-position:center;border-radius:50%;content:"";height:30px;width:30px;position:absolute;top:2px;left:0;font-family:unset;font-weight:unset;font-size:unset}a.vads-c-action-link--blue:before{background-color:#005ea2}a.vads-c-action-link--green:before{background-color:#008817}a.vads-c-action-link--white{color:#fff}a.vads-c-action-link--white:before{background-image:url("/img/arrow-right.svg");background-color:#fff;-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transition-timing-function:ease-in-out;transition-timing-function:ease-in-out;-webkit-transition-property:color,background-color,border-color;transition-property:color,background-color,border-color}a.vads-c-action-link--white:hover{color:#face00;background-color:rgba(0,0,0,0)}a.vads-c-action-link--white:hover:before{background-color:#face00}/*# sourceMappingURL=m-action-link.css.map */
1
+ /**
2
+ Variables ported over from Formation so that we can keep those stylesheets
3
+ working while we work on deprecation.
4
+ **/
5
+ /**
6
+ Variables ported over from Formation so that we can keep those stylesheets
7
+ working while we work on deprecation.
8
+ **/
9
+ /**
10
+ /uswds/dist/scss/lib/addons/_margin.scss
11
+ **/
12
+ /**
13
+ uswds/src/stylesheets/lib/helpers/_directional-values.scss
14
+ **/
15
+ /*
16
+ ----------------------------------------
17
+ advanced-color()
18
+ ----------------------------------------
19
+ Derive a color from a color triplet:
20
+ [family], [grade], [variant]
21
+ ----------------------------------------
22
+ */
23
+ /*
24
+ ----------------------------------------
25
+ append-important()
26
+ ----------------------------------------
27
+ Append `!important` to a list
28
+ ----------------------------------------
29
+ */
30
+ /*
31
+ ----------------------------------------
32
+ get-last()
33
+ ----------------------------------------
34
+ Return the last item of a list,
35
+ Return null if the value is null
36
+ ----------------------------------------
37
+ */
38
+ /*
39
+ ----------------------------------------
40
+ de-list()
41
+ ----------------------------------------
42
+ Transform a one-element list or arglist
43
+ into that single element.
44
+ ----------------------------------------
45
+ (1) => 1
46
+ ((1)) => (1)
47
+ ----------------------------------------
48
+ */
49
+ /*
50
+ ----------------------------------------
51
+ error-not-token()
52
+ ----------------------------------------
53
+ Returns a common not-a-token error.
54
+ ----------------------------------------
55
+ */
56
+ /*
57
+ ----------------------------------------
58
+ uswds-error()
59
+ ----------------------------------------
60
+ Allow the system to pass an error as text
61
+ to test error states in unit testing
62
+ ----------------------------------------
63
+ */
64
+ /*
65
+ ----------------------------------------
66
+ get-default()
67
+ ----------------------------------------
68
+ Returns the default value from a map
69
+ of project defaults
70
+ get-default("bg-color")
71
+ > $theme-body-background-color
72
+ ----------------------------------------
73
+ */
74
+ /*
75
+ * * * * * ==============================
76
+ * * * * * ==============================
77
+ * * * * * ==============================
78
+ * * * * * ==============================
79
+ ========================================
80
+ ========================================
81
+ ========================================
82
+ ----------------------------------------
83
+ GENERAL SETTINGS
84
+ ----------------------------------------
85
+ Read more about settings and
86
+ USWDS style tokens in the documentation:
87
+ https://designsystem.digital.gov/design-tokens
88
+ ----------------------------------------
89
+ */
90
+ /*
91
+ ----------------------------------------
92
+ Image path
93
+ ----------------------------------------
94
+ Relative image file path
95
+ ----------------------------------------
96
+ */
97
+ /*
98
+ ----------------------------------------
99
+ Show compile warnings
100
+ ----------------------------------------
101
+ Show Sass warnings when functions and
102
+ mixins use non-standard tokens.
103
+ AND
104
+ Show updates and notifications.
105
+ ----------------------------------------
106
+ */
107
+ /*
108
+ ----------------------------------------
109
+ Namespace
110
+ ----------------------------------------
111
+ */
112
+ /*
113
+ ----------------------------------------
114
+ Prefix separator
115
+ ----------------------------------------
116
+ Set the character the separates
117
+ responsive and state prefixes from the
118
+ main class name.
119
+ The default (":") needs to be preceded
120
+ by two backslashes to be properly
121
+ escaped.
122
+ ----------------------------------------
123
+ */
124
+ /*
125
+ ----------------------------------------
126
+ Layout grid
127
+ ----------------------------------------
128
+ Should the layout grid classes output
129
+ with !important
130
+ ----------------------------------------
131
+ */
132
+ /*
133
+ ----------------------------------------
134
+ Border box sizing
135
+ ----------------------------------------
136
+ When set to true, sets the box-sizing
137
+ property of all site elements to
138
+ `border-box`.
139
+ ----------------------------------------
140
+ */
141
+ /*
142
+ ----------------------------------------
143
+ Focus styles
144
+ ----------------------------------------
145
+ */
146
+ /*
147
+ ----------------------------------------
148
+ Icons
149
+ ----------------------------------------
150
+ */
151
+ /*
152
+ * * * * * ==============================
153
+ * * * * * ==============================
154
+ * * * * * ==============================
155
+ * * * * * ==============================
156
+ ========================================
157
+ ========================================
158
+ ========================================
159
+ ----------------------------------------
160
+ TYPOGRAPHY SETTINGS
161
+ ----------------------------------------
162
+ Read more about settings and
163
+ USWDS typography tokens in the documentation:
164
+ https://designsystem.digital.gov/design-tokens/typesetting/overview/
165
+ ----------------------------------------
166
+ */
167
+ /*
168
+ ----------------------------------------
169
+ Root font size
170
+ ----------------------------------------
171
+ Setting $theme-respect-user-font-size to
172
+ true sets the root font size to 100% and
173
+ uses ems for media queries
174
+ ----------------------------------------
175
+ $theme-root-font-size only applies when
176
+ $theme-respect-user-font-size is set to
177
+ false.
178
+
179
+ This will set the root font size
180
+ as a specific px value and use px values
181
+ for media queries.
182
+
183
+ Accepts true or false
184
+ ----------------------------------------
185
+ */
186
+ /*
187
+ ----------------------------------------
188
+ Global styles
189
+ ----------------------------------------
190
+ Adds basic styling for the following
191
+ unclassed elements:
192
+
193
+ - paragraph: paragraph text
194
+ - link: links
195
+ - content: paragraph text, links,
196
+ headings, lists, and tables
197
+ ----------------------------------------
198
+ */
199
+ /*
200
+ ----------------------------------------
201
+ Broswer compatibility mode
202
+ ----------------------------------------
203
+ When true, outputs woff and ttf font
204
+ formats in addition to woff2
205
+ ----------------------------------------
206
+ */
207
+ /*
208
+ ----------------------------------------
209
+ Font path
210
+ ----------------------------------------
211
+ Relative font file path
212
+ ----------------------------------------
213
+ */
214
+ /*
215
+ ----------------------------------------
216
+ Custom typeface tokens
217
+ ----------------------------------------
218
+ Add a new custom typeface token if
219
+ your project uses a typeface not already
220
+ defined by USWDS.
221
+ ----------------------------------------
222
+ USWDS defines the following tokens
223
+ by default:
224
+ ----------------------------------------
225
+ 'georgia'
226
+ 'helvetica'
227
+ 'merriweather'
228
+ 'open-sans'
229
+ 'public-sans'
230
+ 'roboto-mono'
231
+ 'source-sans-pro'
232
+ 'system'
233
+ 'tahoma'
234
+ 'verdana'
235
+ ----------------------------------------
236
+ Add as many new tokens as you have
237
+ custom typefaces. Reference your new
238
+ token(s) in the type-based font settings
239
+ using the quoted name of the token.
240
+
241
+ For example:
242
+
243
+ $theme-font-type-cond: 'example-font-token';
244
+
245
+ display-name:
246
+ The display name of your font
247
+
248
+ cap-height:
249
+ The height of a 500px `N` in Sketch
250
+ ----------------------------------------
251
+ You should change `example-[style]-token`
252
+ names to something more descriptive.
253
+ ----------------------------------------
254
+ */
255
+ /*
256
+ ----------------------------------------
257
+ Type-based font settings
258
+ ----------------------------------------
259
+ Set the type-based tokens for your
260
+ project from the following tokens,
261
+ or from any new font tokens you added in
262
+ $theme-typeface-tokens.
263
+ ----------------------------------------
264
+ 'georgia'
265
+ 'helvetica'
266
+ 'merriweather'
267
+ 'open-sans'
268
+ 'public-sans'
269
+ 'roboto-mono'
270
+ 'source-sans-pro'
271
+ 'system'
272
+ 'tahoma'
273
+ 'verdana'
274
+ ----------------------------------------
275
+ */
276
+ /*
277
+ ----------------------------------------
278
+ Custom font stacks
279
+ ----------------------------------------
280
+ Add custom font stacks to any of the
281
+ type-based fonts. Any USWDS typeface
282
+ token already has a default stack.
283
+
284
+ Custom stacks don't need to include the
285
+ font's display name. It will
286
+ automatically appear at the start of
287
+ the stack.
288
+ ----------------------------------------
289
+ Example:
290
+ $theme-font-type-sans: 'source-sans-pro';
291
+ $theme-font-sans-custom-stack: "Helvetica Neue", Helvetica, Arial, sans;
292
+
293
+ Output:
294
+ font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans;
295
+ ----------------------------------------
296
+ */
297
+ /*
298
+ ----------------------------------------
299
+ Add any custom font source files
300
+ ----------------------------------------
301
+ If you want USWDS to generate additional
302
+ @font-face declarations, add your font
303
+ data below, following the example that
304
+ follows.
305
+ ----------------------------------------
306
+ USWDS automatically generates @font-face
307
+ declarations for the following
308
+
309
+ 'merriweather'
310
+ 'public-sans'
311
+ 'roboto-mono'
312
+ 'source-sans-pro'
313
+
314
+ These typefaces not require custom
315
+ source files.
316
+ ----------------------------------------
317
+ EXAMPLE
318
+
319
+ - dir:
320
+ Directory relative to $theme-font-path
321
+ - This directory should include fonts saved as
322
+ .woff2
323
+ ExampleSerif-Normal.woff2
324
+
325
+ $theme-font-serif-custom-src: (
326
+ dir: 'custom/example-serif',
327
+ roman: (
328
+ 100: false,
329
+ 200: false,
330
+ 300: 'ExampleSerif-Light',
331
+ 400: 'ExampleSerif-Normal',
332
+ 500: false,
333
+ 600: false,
334
+ 700: 'ExampleSerif-Bold',
335
+ 800: false,
336
+ 900: false,
337
+ ),
338
+ italic: (
339
+ 100: false,
340
+ 200: false,
341
+ 300: 'ExampleSerif-LightItalic',
342
+ 400: 'ExampleSerif-Italic',
343
+ 500: false,
344
+ 600: false,
345
+ 700: 'ExampleSerif-BoldItalic',
346
+ 800: false,
347
+ 900: false,
348
+ ),
349
+ );
350
+ ----------------------------------------
351
+ */
352
+ /*
353
+ ----------------------------------------
354
+ Role-based font settings
355
+ ----------------------------------------
356
+ Set the role-based tokens for your
357
+ project from the following font-type
358
+ tokens.
359
+ ----------------------------------------
360
+ 'cond'
361
+ 'icon'
362
+ 'lang'
363
+ 'mono'
364
+ 'sans'
365
+ 'serif'
366
+ ----------------------------------------
367
+ */
368
+ /*
369
+ ----------------------------------------
370
+ Type scale
371
+ ----------------------------------------
372
+ Define your project's type scale using
373
+ values from the USWDS system type scale
374
+
375
+ 1-20
376
+ ----------------------------------------
377
+ */
378
+ /*
379
+ ----------------------------------------
380
+ Font weights
381
+ ----------------------------------------
382
+ Assign weights 100-900
383
+ Or use `false` for unneeded weights.
384
+ ----------------------------------------
385
+ */
386
+ /*
387
+ ----------------------------------------
388
+ General typography settings
389
+ ----------------------------------------
390
+ Type scale tokens
391
+ ----------------------------------------
392
+ micro: 10px
393
+ 1: 12px
394
+ 2: 13px
395
+ 3: 14px
396
+ 4: 15px
397
+ 5: 16px
398
+ 6: 17px
399
+ 7: 18px
400
+ 8: 20px
401
+ 9: 22px
402
+ 10: 24px
403
+ 11: 28px
404
+ 12: 32px
405
+ 13: 36px
406
+ 14: 40px
407
+ 15: 48px
408
+ 16: 56px
409
+ 17: 64px
410
+ 18: 80px
411
+ 19: 120px
412
+ 20: 140px
413
+ ----------------------------------------
414
+ Line height tokens
415
+ ----------------------------------------
416
+ 1: 1
417
+ 2: 1.15
418
+ 3: 1.35
419
+ 4: 1.5
420
+ 5: 1.62
421
+ 6: 1.75
422
+ ----------------------------------------
423
+ Font role tokens
424
+ ----------------------------------------
425
+ 'ui'
426
+ 'heading'
427
+ 'body'
428
+ 'code'
429
+ 'alt'
430
+ ----------------------------------------
431
+ Measure (max-width) tokens
432
+ ----------------------------------------
433
+ 1: 44ex
434
+ 2: 60ex
435
+ 3: 64ex
436
+ 4: 68ex
437
+ 5: 74ex
438
+ 6: 88ex
439
+ none: none
440
+ ----------------------------------------
441
+ */
442
+ /*
443
+ * * * * * ==============================
444
+ * * * * * ==============================
445
+ * * * * * ==============================
446
+ * * * * * ==============================
447
+ ========================================
448
+ ========================================
449
+ ========================================
450
+ ----------------------------------------
451
+ COLOR SETTINGS
452
+ ----------------------------------------
453
+ Read more about settings and
454
+ USWDS color tokens in the documentation:
455
+ https://designsystem.digital.gov/design-tokens/color
456
+ ----------------------------------------
457
+ */
458
+ /*
459
+ ----------------------------------------
460
+ Theme palette colors
461
+ ----------------------------------------
462
+ */
463
+ /*
464
+ ----------------------------------------
465
+ State palette colors
466
+ ----------------------------------------
467
+ */
468
+ /*
469
+ ----------------------------------------
470
+ General colors
471
+ ----------------------------------------
472
+ */
473
+ /*
474
+ * * * * * ==============================
475
+ * * * * * ==============================
476
+ * * * * * ==============================
477
+ * * * * * ==============================
478
+ ========================================
479
+ ========================================
480
+ ========================================
481
+ ----------------------------------------
482
+ COMPONENT SETTINGS
483
+ ----------------------------------------
484
+ Read more about settings and
485
+ USWDS style tokens in the documentation:
486
+ https://designsystem.digital.gov/design-tokens
487
+ ----------------------------------------
488
+ */
489
+ /*
490
+ * * * * * ==============================
491
+ * * * * * ==============================
492
+ * * * * * ==============================
493
+ * * * * * ==============================
494
+ ========================================
495
+ ========================================
496
+ ========================================
497
+ ----------------------------------------
498
+ SPACING SETTINGS
499
+ ----------------------------------------
500
+ Read more about settings and
501
+ USWDS spacing units tokens in the
502
+ documentation:
503
+ https://designsystem.digital.gov/design-tokens/spacing-units
504
+ ----------------------------------------
505
+ */
506
+ /*
507
+ ----------------------------------------
508
+ Border radius
509
+ ----------------------------------------
510
+ 2px 2px
511
+ 0.5 4px
512
+ 1 8px
513
+ 1.5 12px
514
+ 2 16px
515
+ 2.5 20px
516
+ 3 24px
517
+ 4 32px
518
+ 5 40px
519
+ 6 48px
520
+ 7 56px
521
+ 8 64px
522
+ 9 72px
523
+ ----------------------------------------
524
+ */
525
+ /*
526
+ ----------------------------------------
527
+ Column gap
528
+ ----------------------------------------
529
+ 2px 2px
530
+ 0.5 4px
531
+ 1 8px
532
+ 2 16px
533
+ 3 24px
534
+ 4 32px
535
+ 5 40px
536
+ 6 48px
537
+ ----------------------------------------
538
+ */
539
+ /*
540
+ ----------------------------------------
541
+ Grid container max-width
542
+ ----------------------------------------
543
+ mobile
544
+ mobile-lg
545
+ tablet
546
+ tablet-lg
547
+ desktop
548
+ desktop-lg
549
+ widescreen
550
+ ----------------------------------------
551
+ */
552
+ /*
553
+ ----------------------------------------
554
+ Site
555
+ ----------------------------------------
556
+ */
557
+ /*
558
+ * * * * * ==============================
559
+ * * * * * ==============================
560
+ * * * * * ==============================
561
+ * * * * * ==============================
562
+ ========================================
563
+ ========================================
564
+ ========================================
565
+ ----------------------------------------
566
+ UTILITIES SETTINGS
567
+ ----------------------------------------
568
+ Read more about settings and
569
+ USWDS utilities in the documentation:
570
+ https://designsystem.digital.gov/utilities
571
+ ----------------------------------------
572
+ */
573
+ /*
574
+ ----------------------------------------
575
+ map-collect()
576
+ ----------------------------------------
577
+ Collect multiple maps into a single
578
+ large map
579
+ source: https://gist.github.com/bigglesrocks/d75091700f8f2be5abfe
580
+ ----------------------------------------
581
+ */
582
+ /*
583
+ ----------------------------------------
584
+ Utility breakpoints
585
+ ----------------------------------------
586
+ Which breakpoints does your project
587
+ need? Select as `true` any breakpoint
588
+ used by utilities or layout grid
589
+ ----------------------------------------
590
+ */
591
+ /*
592
+ ----------------------------------------
593
+ Global colors
594
+ ----------------------------------------
595
+ The following palettes will be added to
596
+ - background-color
597
+ - border-color
598
+ - color
599
+ - text-decoration-color
600
+ ----------------------------------------
601
+ */
602
+ /*
603
+ ----------------------------------------
604
+ Settings
605
+ ----------------------------------------
606
+ */
607
+ /*
608
+ ----------------------------------------
609
+ Values
610
+ ----------------------------------------
611
+ */
612
+ /*
613
+ ----------------------------------------
614
+ has-important()
615
+ ----------------------------------------
616
+ Check to see if `!important` is
617
+ being passed in a mixin's props
618
+ ----------------------------------------
619
+ */
620
+ /*
621
+ ----------------------------------------
622
+ map-deep-get()
623
+ ----------------------------------------
624
+ @author Hugo Giraudel
625
+ @access public
626
+ @param {Map} $map - Map
627
+ @param {Arglist} $keys - Key chain
628
+ @return {*} - Desired value
629
+ ----------------------------------------
630
+ */
631
+ /*
632
+ ----------------------------------------
633
+ multi-cat()
634
+ ----------------------------------------
635
+ Concatenate two lists
636
+ ----------------------------------------
637
+ */
638
+ /*
639
+ ----------------------------------------
640
+ remove()
641
+ ----------------------------------------
642
+ Remove a value from a list
643
+ ----------------------------------------
644
+ */
645
+ /*
646
+ ----------------------------------------
647
+ smart-quote()
648
+ ----------------------------------------
649
+ Quotes strings
650
+ Inspects `px`, `xs`, and `xl` numbers
651
+ Leaves bools as is
652
+ ----------------------------------------
653
+ */
654
+ /*
655
+ ----------------------------------------
656
+ str-replace()
657
+ ----------------------------------------
658
+ Replace any substring with another
659
+ string
660
+ ----------------------------------------
661
+ */
662
+ /*
663
+ ----------------------------------------
664
+ str-split()
665
+ ----------------------------------------
666
+ Split a string at a given separator
667
+ and convert into a list of substrings
668
+ ----------------------------------------
669
+ */
670
+ /*
671
+ ----------------------------------------
672
+ strip-unit()
673
+ ----------------------------------------
674
+ Remove the unit of a length
675
+ @author Hugo Giraudel
676
+ @param {Number} $number - Number to remove unit from
677
+ @return {Number} - Unitless number
678
+ ----------------------------------------
679
+ */
680
+ /*
681
+ ----------------------------------------
682
+ base-to-map()
683
+ @TODO: Deprecate and delete
684
+ ----------------------------------------
685
+ Convert a single base to a USWDS
686
+ value map.
687
+
688
+ Candidate for deprecation if we remove
689
+ isReadable
690
+ ----------------------------------------
691
+ */
692
+ /*
693
+ ----------------------------------------
694
+ to-number()
695
+ ----------------------------------------
696
+ Casts a string into a number
697
+ ----------------------------------------
698
+ @param {String | Number} $value - Value to be parsed
699
+ @return {Number}
700
+ ----------------------------------------
701
+ */
702
+ /*
703
+ ----------------------------------------
704
+ unpack()
705
+ ----------------------------------------
706
+ Create lists of single items from lists
707
+ of lists.
708
+ ----------------------------------------
709
+ (1, (2.1, 2.2), 3) -->
710
+ (1, 2.1, 2.2, 3)
711
+ ----------------------------------------
712
+ */
713
+ /*
714
+ ----------------------------------------
715
+ advanced-color()
716
+ ----------------------------------------
717
+ Derive a color from a color triplet:
718
+ [family], [grade], [variant]
719
+ ----------------------------------------
720
+ */
721
+ /*
722
+ ----------------------------------------
723
+ get-system-color()
724
+ ----------------------------------------
725
+ Derive a system color from its
726
+ family, value, and vivid or a passed
727
+ variable that is, itself, a list
728
+ ----------------------------------------
729
+ */
730
+ /*
731
+ ----------------------------------------
732
+ advanced-color()
733
+ ----------------------------------------
734
+ Derive a color from a color triplet:
735
+ [family], [grade], [variant]
736
+ ----------------------------------------
737
+ */
738
+ /*
739
+ ----------------------------------------
740
+ calculate-grade()
741
+ ----------------------------------------
742
+ Derive the grade equivalent any color,
743
+ even non-token colors
744
+ ----------------------------------------
745
+ */
746
+ /*
747
+ ----------------------------------------
748
+ Luminance ranges
749
+ ----------------------------------------
750
+ */
751
+ /*
752
+ ----------------------------------------
753
+ color-token-assignment()
754
+ ----------------------------------------
755
+ Get the system token equivalent of any
756
+ theme color token
757
+ ----------------------------------------
758
+ */
759
+ /*
760
+ ----------------------------------------
761
+ is-system-color-token()
762
+ ----------------------------------------
763
+ Return whether a token is a system
764
+ color token
765
+ ----------------------------------------
766
+ */
767
+ /*
768
+ ----------------------------------------
769
+ is-theme-color-token()
770
+ ----------------------------------------
771
+ Return whether a token is a theme
772
+ color token
773
+ ----------------------------------------
774
+ */
775
+ /*
776
+ ----------------------------------------
777
+ is-system-color-token()
778
+ ----------------------------------------
779
+ Return whether a token is a system
780
+ color token
781
+ ----------------------------------------
782
+ */
783
+ /*
784
+ ----------------------------------------
785
+ set-theme-color()
786
+ ----------------------------------------
787
+ Derive a color from a system color token
788
+ or a hex value
789
+ ----------------------------------------
790
+ */
791
+ /*
792
+ ----------------------------------------
793
+ color-token-family()
794
+ ----------------------------------------
795
+ Returns the family of a color token.
796
+ Returns: color-family
797
+ color-token-family("accent-warm-vivid")
798
+ > "accent-warm"
799
+ color-token-family("red-50v")
800
+ > "red"
801
+ color-token-variant(("red", 50, "vivid"))
802
+ > "red"
803
+ ----------------------------------------
804
+ */
805
+ /*
806
+ ----------------------------------------
807
+ decompose()
808
+ ----------------------------------------
809
+ Convert a color token into into a list
810
+ of form [family], [grade], [variant]
811
+ Vivid variants return "vivid" as the
812
+ variant.
813
+ If neither grade nor variant exists,
814
+ returns 'null'
815
+ ----------------------------------------
816
+ */
817
+ /*
818
+ ----------------------------------------
819
+ color-token-family()
820
+ ----------------------------------------
821
+ Returns the family of a color token.
822
+ Returns: color-family
823
+ color-token-family("accent-warm-vivid")
824
+ > "accent-warm"
825
+ color-token-family("red-50v")
826
+ > "red"
827
+ color-token-variant(("red", 50, "vivid"))
828
+ > "red"
829
+ ----------------------------------------
830
+ */
831
+ /*
832
+ ----------------------------------------
833
+ color-token-grade()
834
+ ----------------------------------------
835
+ Returns the grade of a USWDS color token.
836
+ Returns: color-grade
837
+ color-token-grade("accent-warm")
838
+ > "root"
839
+ color-token-grade("accent-warm-vivid")
840
+ > "root"
841
+ color-token-grade("accent-warm-darker")
842
+ > "darker"
843
+ color-token-grade("red-50v")
844
+ > 50
845
+ color-token-variant(("red", 50, "vivid"))
846
+ > 50
847
+ ----------------------------------------
848
+ */
849
+ /*
850
+ ----------------------------------------
851
+ color-token-family()
852
+ ----------------------------------------
853
+ Returns the family of a color token.
854
+ Returns: color-family
855
+ color-token-family("accent-warm-vivid")
856
+ > "accent-warm"
857
+ color-token-family("red-50v")
858
+ > "red"
859
+ color-token-variant(("red", 50, "vivid"))
860
+ > "red"
861
+ ----------------------------------------
862
+ */
863
+ /*
864
+ ----------------------------------------
865
+ is-color-token()
866
+ ----------------------------------------
867
+ Returns whether a given string is a
868
+ USWDS color token.
869
+ ----------------------------------------
870
+ */
871
+ /*
872
+ ----------------------------------------
873
+ is-system-color-token()
874
+ ----------------------------------------
875
+ Return whether a token is a system
876
+ color token
877
+ ----------------------------------------
878
+ */
879
+ /*
880
+ ----------------------------------------
881
+ is-theme-color-token()
882
+ ----------------------------------------
883
+ Return whether a token is a theme
884
+ color token
885
+ ----------------------------------------
886
+ */
887
+ /*
888
+ ----------------------------------------
889
+ pow()
890
+ ----------------------------------------
891
+ Raises a unitless number to the power
892
+ of another unitless number
893
+ Includes helper functions
894
+ ----------------------------------------
895
+ */
896
+ /*
897
+ ----------------------------------------
898
+ Helper functions
899
+ ----------------------------------------
900
+ */
901
+ /* factorial()
902
+ ----------------------------------------
903
+ */
904
+ /* summation()
905
+ ----------------------------------------
906
+ */
907
+ /* exp-maclaurin()
908
+ ----------------------------------------
909
+ */
910
+ /* ln()
911
+ ----------------------------------------
912
+ */
913
+ /*
914
+ ----------------------------------------
915
+ color-token-type()
916
+ ----------------------------------------
917
+ Returns the type of a color token.
918
+ Returns: "system" | "theme"
919
+ ----------------------------------------
920
+ */
921
+ /*
922
+ ----------------------------------------
923
+ color-token-variant()
924
+ ----------------------------------------
925
+ Returns the variant of color token.
926
+ Returns: "vivid" | false
927
+ color-token-variant("accent-warm")
928
+ > false
929
+ color-token-variant("accent-warm-vivid")
930
+ > "vivid"
931
+ color-token-variant("red-50v")
932
+ > "vivid"
933
+ color-token-variant(("red", 50, "vivid"))
934
+ > "vivid"
935
+ ----------------------------------------
936
+ */
937
+ /*
938
+ ----------------------------------------
939
+ magic-number()
940
+ ----------------------------------------
941
+ Returns the magic number of two color
942
+ grades. Takes numbers or color tokens.
943
+ magic-number(50, 10)
944
+ return: 40
945
+ magic-number("red-50", "red-10")
946
+ return: 40
947
+ ----------------------------------------
948
+ */
949
+ /*
950
+ ----------------------------------------
951
+ is-accessible-magic-number()
952
+ ----------------------------------------
953
+ Returns whether two grades achieve
954
+ specified target color contrast
955
+ Returns: true | false
956
+ is-accessible-magic-number(10, 50, "AA")
957
+ > false
958
+ is-accessible-magic-number(10, 60, "AA")
959
+ > true
960
+ ----------------------------------------
961
+ */
962
+ /*
963
+ ----------------------------------------
964
+ wcag-magic-number()
965
+ ----------------------------------------
966
+ Returns the magic number of a specific
967
+ wcag grade:
968
+ "AA"
969
+ "AA-Large"
970
+ "AAA"
971
+ wcag-magic-number("AA")
972
+ > 50
973
+ ----------------------------------------
974
+ */
975
+ /*
976
+ ----------------------------------------
977
+ get-link-tokens-from-bg()
978
+ ----------------------------------------
979
+ Get accessible link colors for a given
980
+ background color
981
+ returns: link-token, hover-token
982
+ get-link-tokens-from-bg(
983
+ "black",
984
+ "red-60",
985
+ "red-10",
986
+ "AA")
987
+ > "red-10", "red-5"
988
+ get-link-tokens-from-bg(
989
+ "black",
990
+ "red-60v",
991
+ "red-10v",
992
+ "AA-large")
993
+ > "red-60v", "red-50v"
994
+ get-link-tokens-from-bg(
995
+ "black",
996
+ "red-5v",
997
+ "red-60v",
998
+ "AA")
999
+ > "red-5v", "white"
1000
+ get-link-tokens-from-bg(
1001
+ "black",
1002
+ "white",
1003
+ "red-60v",
1004
+ "AA")
1005
+ > "white", "white"
1006
+ ----------------------------------------
1007
+ */
1008
+ /*
1009
+ ----------------------------------------
1010
+ next-token()
1011
+ ----------------------------------------
1012
+ Returns next "darker" or "lighter" color
1013
+ token of the same token type and variant.
1014
+ Returns: color-token | false
1015
+ next-token("accent-warm", "lighter")
1016
+ > "accent-warm-light"
1017
+ next-token("gray-10", "lighter")
1018
+ > "gray-5"
1019
+ next-token("gray-5", "lighter")
1020
+ > "white"
1021
+ next-token("white", "lighter")
1022
+ > false
1023
+ next-token("red-50v", "darker")
1024
+ > "red-60v"
1025
+ next-token("red-50", "darker")
1026
+ > "red-60"
1027
+ next-token("red-80v", "darker")
1028
+ > "red-90"
1029
+ next-token("red-90", "darker")
1030
+ > "black"
1031
+ next-token("white", "darker")
1032
+ > "gray-5"
1033
+ next-token("black", "lighter")
1034
+ > "gray-90"
1035
+ ----------------------------------------
1036
+ */
1037
+ /*
1038
+ ----------------------------------------
1039
+ color()
1040
+ ----------------------------------------
1041
+ Derive a color from a color shortcode
1042
+ ----------------------------------------
1043
+ */
1044
+ /*
1045
+ ----------------------------------------
1046
+ test-colors()
1047
+ ----------------------------------------
1048
+ Check to see if all system colors
1049
+ fall between the proper relative
1050
+ luminance range for their grade.
1051
+ Has a couple quirks, as the luminance()
1052
+ function returns slightly different
1053
+ results than expected.
1054
+ ----------------------------------------
1055
+ */
1056
+ /*
1057
+ ----------------------------------------
1058
+ cap-height()
1059
+ ----------------------------------------
1060
+ Get the cap height of a valid typeface
1061
+ ----------------------------------------
1062
+ */
1063
+ /*
1064
+ ----------------------------------------
1065
+ Line height
1066
+ ----------------------------------------
1067
+ */
1068
+ /*
1069
+ ----------------------------------------
1070
+ Measure
1071
+ ----------------------------------------
1072
+ */
1073
+ /*
1074
+ ----------------------------------------
1075
+ spacing-multiple()
1076
+ ----------------------------------------
1077
+ Converts a spacing unit multiple into
1078
+ the desired final units (currently rem)
1079
+ ----------------------------------------
1080
+ */
1081
+ /*
1082
+ ----------------------------------------
1083
+ cap-height()
1084
+ ----------------------------------------
1085
+ Get the cap height of a valid typeface
1086
+ ----------------------------------------
1087
+ */
1088
+ /*
1089
+ ----------------------------------------
1090
+ validate-typeface-token()
1091
+ ----------------------------------------
1092
+ Check to see if a typeface-token exists.
1093
+ Throw an error if a passed token does
1094
+ not exist in the typeface-token map.
1095
+ ----------------------------------------
1096
+ */
1097
+ /*
1098
+ ----------------------------------------
1099
+ convert-to-font-type()
1100
+ ----------------------------------------
1101
+ Converts a font-role token into a
1102
+ font-type token. Leaves font-type tokens
1103
+ unchanged.
1104
+ ----------------------------------------
1105
+ */
1106
+ /*
1107
+ ----------------------------------------
1108
+ font-sources()
1109
+ ----------------------------------------
1110
+ Outputs a list of font sources used in
1111
+ a @font-face declaration.
1112
+
1113
+ $theme-font-browser-compatibility: true - output woff2, woff, ttf
1114
+ $theme-font-browser-compatibility: false - output woff2
1115
+
1116
+ @param stem: string - [font path]/[custom-src.dir]/[custom-src.[style].[weight]]
1117
+ @output: string
1118
+
1119
+ filetypes must be one of the filetypes set in variables/$project-font-face-filetypes (woff, woff2, ttf)
1120
+ ----------------------------------------
1121
+ */
1122
+ /*
1123
+ ----------------------------------------
1124
+ get-font-stack()
1125
+ ----------------------------------------
1126
+ Get a font stack from a style- or
1127
+ role-based font token.
1128
+ ----------------------------------------
1129
+ */
1130
+ /*
1131
+ ----------------------------------------
1132
+ Project fonts
1133
+ ----------------------------------------
1134
+ Collects font settings in a map for
1135
+ looping.
1136
+ ----------------------------------------
1137
+ */
1138
+ /*
1139
+ ----------------------------------------
1140
+ get-typeface-token()
1141
+ ----------------------------------------
1142
+ Get a typeface token from a font-type or
1143
+ font-role token.
1144
+ ----------------------------------------
1145
+ */
1146
+ /*
1147
+ ----------------------------------------
1148
+ normalize-type-scale()
1149
+ ----------------------------------------
1150
+ Normalizes a specific face's optical size
1151
+ to a set target
1152
+ ----------------------------------------
1153
+ */
1154
+ /*
1155
+ ----------------------------------------
1156
+ px-to-rem()
1157
+ ----------------------------------------
1158
+ Converts a value in px to a value in rem
1159
+ ----------------------------------------
1160
+ */
1161
+ /*
1162
+ ----------------------------------------
1163
+ rem-to-user-em()
1164
+ ----------------------------------------
1165
+ Converts a value in rem to a value in
1166
+ [user-settings] em for use in media
1167
+ queries
1168
+ ----------------------------------------
1169
+ */
1170
+ /*
1171
+ ----------------------------------------
1172
+ px-to-user-em()
1173
+ ----------------------------------------
1174
+ Converts a value in px to a value in em
1175
+ ----------------------------------------
1176
+ */
1177
+ /*
1178
+ ----------------------------------------
1179
+ rem-to-px()
1180
+ ----------------------------------------
1181
+ Converts a value in rem to a value in px
1182
+ ----------------------------------------
1183
+ */
1184
+ /*
1185
+ ----------------------------------------
1186
+ units()
1187
+ ----------------------------------------
1188
+ Converts a spacing unit into
1189
+ the desired final units (currently rem)
1190
+ ----------------------------------------
1191
+ */
1192
+ /*
1193
+ ----------------------------------------
1194
+ number-to-token()
1195
+ ----------------------------------------
1196
+ Converts an integer or numeric value
1197
+ into a system value
1198
+
1199
+ Ex: 0.5 --> '05'
1200
+ -1px --> 'neg-1px'
1201
+ ----------------------------------------
1202
+ */
1203
+ /*
1204
+ ----------------------------------------
1205
+ system-type-scale()
1206
+ ----------------------------------------
1207
+ Get a value from the system type scale
1208
+ ----------------------------------------
1209
+ */
1210
+ /*
1211
+ ----------------------------------------
1212
+ columns()
1213
+ ----------------------------------------
1214
+ outputs a grid-col number based on
1215
+ the number of desired columns in the
1216
+ 12-column grid
1217
+
1218
+ Ex: columns(2) --> 6
1219
+ grid-col(columns(2))
1220
+ ----------------------------------------
1221
+ */
1222
+ /*
1223
+ ----------------------------------------
1224
+ USWDS Properties
1225
+ ----------------------------------------
1226
+ */
1227
+ /*
1228
+ ----------------------------------------
1229
+ get-uswds-value()
1230
+ ----------------------------------------
1231
+ Finds and outputs a value from the
1232
+ USWDS standard values.
1233
+
1234
+ Used to build other standard utility
1235
+ functions and mixins.
1236
+ ----------------------------------------
1237
+ */
1238
+ /*
1239
+ ----------------------------------------
1240
+ get-standard-values()
1241
+ ----------------------------------------
1242
+ Gets a map of USWDS standard values
1243
+ for a property
1244
+ ----------------------------------------
1245
+ */
1246
+ /*
1247
+ ----------------------------------------
1248
+ ns()
1249
+ ----------------------------------------
1250
+ Add a namesspace of $type if that
1251
+ namespace is set to output
1252
+ ----------------------------------------
1253
+ */
1254
+ /*
1255
+ ----------------------------------------
1256
+ border-radius()
1257
+ ----------------------------------------
1258
+ Get a border-radius from the system
1259
+ border-radii
1260
+ ----------------------------------------
1261
+ */
1262
+ /*
1263
+ ----------------------------------------
1264
+ font-weight()
1265
+ fw()
1266
+ ----------------------------------------
1267
+ Get a font-weight value from the
1268
+ system font-weight
1269
+ ----------------------------------------
1270
+ */
1271
+ /*
1272
+ ----------------------------------------
1273
+ feature()
1274
+ ----------------------------------------
1275
+ Gets a valid USWDS font feature setting
1276
+ ----------------------------------------
1277
+ */
1278
+ /*
1279
+ ----------------------------------------
1280
+ flex()
1281
+ ----------------------------------------
1282
+ Gets a valid USWDS flex value
1283
+ ----------------------------------------
1284
+ */
1285
+ /*
1286
+ ----------------------------------------
1287
+ font-family()
1288
+ family()
1289
+ ----------------------------------------
1290
+ Get a font-family stack from a
1291
+ role-based or type-based font family
1292
+ ----------------------------------------
1293
+ */
1294
+ /*
1295
+ ----------------------------------------
1296
+ letter-spacing()
1297
+ ls()
1298
+ ----------------------------------------
1299
+ Get a letter-spacing value from the
1300
+ system letter-spacing
1301
+ ----------------------------------------
1302
+ */
1303
+ /*
1304
+ ----------------------------------------
1305
+ measure()
1306
+ ----------------------------------------
1307
+ Gets a valid USWDS reading line length
1308
+ ----------------------------------------
1309
+ */
1310
+ /*
1311
+ ----------------------------------------
1312
+ opacity()
1313
+ ----------------------------------------
1314
+ Get an opacity from the system
1315
+ opacities
1316
+ ----------------------------------------
1317
+ */
1318
+ /*
1319
+ ----------------------------------------
1320
+ order()
1321
+ ----------------------------------------
1322
+ Get an order value from the
1323
+ system orders
1324
+ ----------------------------------------
1325
+ */
1326
+ /*
1327
+ ----------------------------------------
1328
+ radius()
1329
+ ----------------------------------------
1330
+ Get a border-radius value from the
1331
+ system letter-spacing
1332
+ ----------------------------------------
1333
+ */
1334
+ /*
1335
+ ----------------------------------------
1336
+ font-size()
1337
+ ----------------------------------------
1338
+ Get type scale value from a [family] and
1339
+ [scale]
1340
+ ----------------------------------------
1341
+ */
1342
+ /*
1343
+ ----------------------------------------
1344
+ z-index()
1345
+ z()
1346
+ ----------------------------------------
1347
+ Get a z-index value from the
1348
+ system z-index
1349
+ ----------------------------------------
1350
+ */
1351
+ /*
1352
+ ----------------------------------------
1353
+ utility-font()
1354
+ ----------------------------------------
1355
+ Get a normalized font-size in rem from
1356
+ a family and a type size in either
1357
+ system scale or project scale
1358
+ ----------------------------------------
1359
+ Not the public-facing function.
1360
+ Used for building the utilities and
1361
+ withholds certain errors.
1362
+ ----------------------------------------
1363
+ */
1364
+ /*
1365
+ ----------------------------------------
1366
+ family()
1367
+ ----------------------------------------
1368
+ Get a font-family stack
1369
+ ----------------------------------------
1370
+ */
1371
+ /*
1372
+ ----------------------------------------
1373
+ size()
1374
+ ----------------------------------------
1375
+ Get a normalized font-size in rem from
1376
+ a family and a type size in either
1377
+ system scale or project scale
1378
+ ----------------------------------------
1379
+ */
1380
+ /*
1381
+ ----------------------------------------
1382
+ font()
1383
+ ----------------------------------------
1384
+ Get a font-family stack
1385
+ AND
1386
+ Get a normalized font-size in rem from
1387
+ a family and a type size in either
1388
+ system scale or project scale
1389
+ ----------------------------------------
1390
+ */
1391
+ /*
1392
+ ----------------------------------------
1393
+ typeset()
1394
+ ----------------------------------------
1395
+ Sets:
1396
+ - family
1397
+ - size
1398
+ - line-height
1399
+ ----------------------------------------
1400
+ */
1401
+ a.vads-c-action-link--blue, a.vads-c-action-link--green, a.vads-c-action-link--white {
1402
+ font-weight: bold;
1403
+ padding: 4px 0 4px 38px;
1404
+ position: relative;
1405
+ display: inline-block;
1406
+ }
1407
+ a.vads-c-action-link--blue:before, a.vads-c-action-link--green:before, a.vads-c-action-link--white:before {
1408
+ background-image: url("/img/arrow-right-white.svg");
1409
+ background-size: 18px 18px;
1410
+ background-repeat: no-repeat;
1411
+ background-position: center;
1412
+ border-radius: 50%;
1413
+ content: "";
1414
+ height: 30px;
1415
+ width: 30px;
1416
+ position: absolute;
1417
+ top: 2px;
1418
+ left: 0;
1419
+ font-family: unset;
1420
+ font-weight: unset;
1421
+ font-size: unset;
1422
+ }
1423
+
1424
+ a.vads-c-action-link--blue:before {
1425
+ background-color: #005ea2;
1426
+ }
1427
+
1428
+ a.vads-c-action-link--green:before {
1429
+ background-color: #008817;
1430
+ }
1431
+
1432
+ a.vads-c-action-link--white {
1433
+ color: #ffffff;
1434
+ }
1435
+ a.vads-c-action-link--white:before {
1436
+ background-image: url("/img/arrow-right.svg");
1437
+ background-color: #ffffff;
1438
+ -webkit-transition-duration: 0.3s;
1439
+ transition-duration: 0.3s;
1440
+ -webkit-transition-timing-function: ease-in-out;
1441
+ transition-timing-function: ease-in-out;
1442
+ -webkit-transition-property: color, background-color, border-color;
1443
+ transition-property: color, background-color, border-color;
1444
+ }
1445
+
1446
+ a.vads-c-action-link--white:hover {
1447
+ color: #face00;
1448
+ background-color: transparent;
1449
+ }
1450
+ a.vads-c-action-link--white:hover:before {
1451
+ background-color: #face00;
1452
+ }
1453
+
1454
+ /*# sourceMappingURL=m-action-link.css.map */