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

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 +2 -3
  2. package/dist/stylesheets/base/fonts.css +1 -1589
  3. package/dist/stylesheets/base/headings.css +1 -1523
  4. package/dist/stylesheets/base/utils.css +1 -137
  5. package/dist/stylesheets/base/va.css +1 -1843
  6. package/dist/stylesheets/core.css +1 -6033
  7. package/dist/stylesheets/formation-overrides/core/base.css +1 -64
  8. package/dist/stylesheets/formation-overrides/core/fonts.css +1 -46
  9. package/dist/stylesheets/formation-overrides/elements/buttons.css +1 -562
  10. package/dist/stylesheets/formation-overrides/elements/inputs.css +1 -384
  11. package/dist/stylesheets/formation-overrides/elements/labels.css +1 -28
  12. package/dist/stylesheets/formation-overrides/elements/lists.css +1 -57
  13. package/dist/stylesheets/formation-overrides/elements/table.css +1 -78
  14. package/dist/stylesheets/formation-overrides/elements/typography.css +1 -312
  15. package/dist/stylesheets/mobile-typography.css +1 -13
  16. package/dist/stylesheets/modules/m-action-link.css +1 -1447
  17. package/dist/stylesheets/modules/m-additional-info.css +1 -39
  18. package/dist/stylesheets/modules/m-alert.css +1 -248
  19. package/dist/stylesheets/modules/m-breadcrumbs.css +1 -96
  20. package/dist/stylesheets/modules/m-button.css +1 -153
  21. package/dist/stylesheets/modules/m-dropdown.css +1 -47
  22. package/dist/stylesheets/modules/m-emergency-banner.css +1 -33
  23. package/dist/stylesheets/modules/m-external-link.css +1 -14
  24. package/dist/stylesheets/modules/m-form-elements.css +1 -231
  25. package/dist/stylesheets/modules/m-form-process.css +1 -219
  26. package/dist/stylesheets/modules/m-homepage-hero.css +1 -76
  27. package/dist/stylesheets/modules/m-hub-page-link-list.css +1 -40
  28. package/dist/stylesheets/modules/m-loading-indicator.css +1 -41
  29. package/dist/stylesheets/modules/m-maintenance-banner.css +1 -33
  30. package/dist/stylesheets/modules/m-megamenu.css +1 -370
  31. package/dist/stylesheets/modules/m-modal.css +1 -117
  32. package/dist/stylesheets/modules/m-nav-linklist.css +1 -49
  33. package/dist/stylesheets/modules/m-nav-sidebar.css +1 -349
  34. package/dist/stylesheets/modules/m-omb-info.css +0 -5
  35. package/dist/stylesheets/modules/m-overlay.css +1 -72
  36. package/dist/stylesheets/modules/m-print.css +1 -27
  37. package/dist/stylesheets/modules/m-process-list.css +1 -162
  38. package/dist/stylesheets/modules/va-pagination.css +1 -90
  39. package/dist/stylesheets/modules/va-tabs.css +1 -53
  40. package/dist/stylesheets/shame.css +1 -266
  41. package/dist/stylesheets/uswds-typography.css +1 -4201
  42. package/dist/stylesheets/utilities.css +1 -15539
  43. package/dist/tokens/css/variables.css +10 -3
  44. package/dist/tokens/json/variables.json +157 -4
  45. package/dist/tokens/scss/variables.scss +10 -3
  46. package/package.json +3 -3
@@ -1,90 +1 @@
1
- @charset "UTF-8";
2
- /**
3
- Variables ported over from Formation so that we can keep those stylesheets
4
- working while we work on deprecation.
5
- **/
6
- .va-pagination {
7
- border-top: 1px solid #f1f1f1;
8
- font-size: 0.9em;
9
- overflow: hidden;
10
- padding: 1.25rem 0 0.625rem;
11
- position: relative;
12
- text-align: center;
13
- width: 100%;
14
- display: flex;
15
- justify-content: center;
16
- }
17
- @media (max-width: 768px) {
18
- .va-pagination-prev {
19
- margin-left: -1.875rem;
20
- padding: 0 0.625rem 0 0;
21
- }
22
- }
23
- @media (min-width: 481px) {
24
- .va-pagination-prev:not(:empty) a::before {
25
- content: "‹  ";
26
- }
27
- }
28
- @media (max-width: 768px) {
29
- .va-pagination-next {
30
- margin-right: -1.875rem;
31
- padding: 0 0 0 0.625rem;
32
- }
33
- }
34
- @media (min-width: 481px) {
35
- .va-pagination-next:not(:empty) a::after {
36
- content: "  ›";
37
- }
38
- }
39
- .va-pagination-prev, .va-pagination-next {
40
- position: relative;
41
- }
42
- .va-pagination-prev:hover, .va-pagination-prev:focus, .va-pagination-next:hover, .va-pagination-next:focus {
43
- text-decoration: underline;
44
- }
45
- @media (min-width: 768px) {
46
- .va-pagination-prev, .va-pagination-next {
47
- padding: 0 0.625rem;
48
- }
49
- }
50
- .va-pagination-inner {
51
- white-space: nowrap;
52
- overflow: hidden;
53
- }
54
- @media (max-width: 768px) {
55
- .va-pagination-inner {
56
- width: 12.5rem;
57
- }
58
- }
59
- @media (min-width: 1201px) {
60
- .va-pagination-inner {
61
- width: 25rem;
62
- }
63
- }
64
- .va-pagination-prev, .va-pagination-next, .va-pagination-inner {
65
- padding-bottom: 4px;
66
- padding-top: 4px;
67
- }
68
- .va-pagination a {
69
- line-height: 2;
70
- text-decoration: none;
71
- }
72
-
73
- .va-pagination-inner a {
74
- border-radius: 1000px;
75
- display: inline-block;
76
- height: 1.875rem;
77
- margin: 0 0.3125rem;
78
- width: 1.875rem;
79
- text-decoration: none;
80
- }
81
-
82
- .va-pagination-inner a:hover,
83
- .va-pagination-inner a:focus,
84
- .va-pagination-active,
85
- .va-pagination-active:visited {
86
- background: #005ea2;
87
- color: #ffffff;
88
- }
89
-
90
- /*# sourceMappingURL=va-pagination.css.map */
1
+ .va-pagination{border-top:1px solid #f1f1f1;font-size:.9em;overflow:hidden;padding:1.25rem 0 .625rem;position:relative;text-align:center;width:100%;display:flex;justify-content:center}@media(max-width: 768px){.va-pagination-prev{margin-left:-1.875rem;padding:0 .625rem 0 0}}@media(min-width: 481px){.va-pagination-prev:not(:empty) a::before{content:"‹  "}}@media(max-width: 768px){.va-pagination-next{margin-right:-1.875rem;padding:0 0 0 .625rem}}@media(min-width: 481px){.va-pagination-next:not(:empty) a::after{content:"  ›"}}.va-pagination-prev,.va-pagination-next{position:relative}.va-pagination-prev:hover,.va-pagination-prev:focus,.va-pagination-next:hover,.va-pagination-next:focus{text-decoration:underline}@media(min-width: 768px){.va-pagination-prev,.va-pagination-next{padding:0 .625rem}}.va-pagination-inner{white-space:nowrap;overflow:hidden}@media(max-width: 768px){.va-pagination-inner{width:12.5rem}}@media(min-width: 1201px){.va-pagination-inner{width:25rem}}.va-pagination-prev,.va-pagination-next,.va-pagination-inner{padding-bottom:4px;padding-top:4px}.va-pagination a{line-height:2;text-decoration:none}.va-pagination-inner a{border-radius:1000px;display:inline-block;height:1.875rem;margin:0 .3125rem;width:1.875rem;text-decoration:none}.va-pagination-inner a:hover,.va-pagination-inner a:focus,.va-pagination-active,.va-pagination-active:visited{background:#005ea2;color:#fff}/*# sourceMappingURL=va-pagination.css.map */
@@ -1,53 +1 @@
1
- /**
2
- Variables ported over from Formation so that we can keep those stylesheets
3
- working while we work on deprecation.
4
- **/
5
- .va-tabs {
6
- list-style: none;
7
- margin-bottom: -1px;
8
- min-width: 260px;
9
- padding-left: 0;
10
- }
11
- .va-tabs > li {
12
- background: #f1f1f1;
13
- border-width: 1px 0px 0 1px;
14
- border-color: #5b616b;
15
- border-style: solid;
16
- display: inline-block;
17
- margin-bottom: 0;
18
- }
19
- .va-tabs > li:last-child {
20
- border-right-width: 1px;
21
- }
22
-
23
- .va-tab-trigger {
24
- border-width: 5px 1px 1px;
25
- border-style: solid;
26
- border-color: transparent;
27
- border-bottom-color: #5b616b;
28
- color: #5b616b;
29
- display: inline-block;
30
- padding: 0.625rem;
31
- margin: 0px -1px;
32
- text-decoration: none;
33
- }
34
- .va-tab-trigger:hover, .va-tab-trigger:focus, .va-tab-trigger--current {
35
- background: #ffffff;
36
- border-color: #005ea2;
37
- border-bottom-color: #ffffff;
38
- }
39
- .va-tab-trigger:visited {
40
- color: inherit;
41
- }
42
- @media (min-width: 481px) {
43
- .va-tab-trigger {
44
- padding-left: 1.25rem;
45
- padding-right: 1.25rem;
46
- }
47
- }
48
-
49
- .va-tab-content {
50
- border-top: 1px solid #5b616b;
51
- }
52
-
53
- /*# sourceMappingURL=va-tabs.css.map */
1
+ .va-tabs{list-style:none;margin-bottom:-1px;min-width:260px;padding-left:0}.va-tabs>li{background:#f1f1f1;border-width:1px 0px 0 1px;border-color:#5b616b;border-style:solid;display:inline-block;margin-bottom:0}.va-tabs>li:last-child{border-right-width:1px}.va-tab-trigger{border-width:5px 1px 1px;border-style:solid;border-color:rgba(0,0,0,0);border-bottom-color:#5b616b;color:#5b616b;display:inline-block;padding:.625rem;margin:0px -1px;text-decoration:none}.va-tab-trigger:hover,.va-tab-trigger:focus,.va-tab-trigger--current{background:#fff;border-color:#005ea2;border-bottom-color:#fff}.va-tab-trigger:visited{color:inherit}@media(min-width: 481px){.va-tab-trigger{padding-left:1.25rem;padding-right:1.25rem}}.va-tab-content{border-top:1px solid #5b616b}/*# sourceMappingURL=va-tabs.css.map */
@@ -1,266 +1 @@
1
- /*
2
- Original: @import "~uswds/src/stylesheets/components/forms";
3
- ***THIS IS USWDS v1***
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
- Variables ported over from Formation so that we can keep those stylesheets
11
- working while we work on deprecation.
12
- **/
13
- /**
14
- /uswds/dist/scss/lib/addons/_margin.scss
15
- **/
16
- /**
17
- uswds/src/stylesheets/lib/helpers/_directional-values.scss
18
- **/
19
- @media screen and (min-width: 768px), print and (min-width: 768px) {
20
- [type=submit] {
21
- margin-top: calc(3rem - 0.2em);
22
- }
23
- }
24
-
25
- fieldset {
26
- border: none;
27
- margin: 0;
28
- padding: 0;
29
- }
30
-
31
- @media screen and (min-width: 768px), print and (min-width: 768px) {
32
- .usa-form {
33
- max-width: 20rem;
34
- }
35
- }
36
-
37
- @media screen and (min-width: 768px), print and (min-width: 768px) {
38
- .usa-input-tiny {
39
- max-width: 3.75rem;
40
- }
41
- }
42
-
43
- @media screen and (min-width: 768px), print and (min-width: 768px) {
44
- .usa-input-medium {
45
- max-width: 7.5rem;
46
- }
47
- }
48
-
49
- .usa-form-note {
50
- float: right;
51
- font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
52
- font-size: 0.9375rem;
53
- margin: 0 0 scale(1.5rem);
54
- }
55
- .usa-form-note + * {
56
- clear: both;
57
- }
58
-
59
- @media screen and (min-width: 768px), print and (min-width: 768px) {
60
- .usa-form-large {
61
- max-width: 28.75rem;
62
- }
63
- }
64
-
65
- @media screen and (min-width: 768px), print and (min-width: 768px) {
66
- .usa-input-grid {
67
- padding-right: 5%;
68
- }
69
- }
70
-
71
- @media screen and (min-width: 768px), print and (min-width: 768px) {
72
- .usa-input-grid:last-of-type {
73
- padding-right: 0;
74
- }
75
- }
76
-
77
- @media screen and (min-width: 768px), print and (min-width: 768px) {
78
- .usa-input-grid-small {
79
- float: left;
80
- width: 35%;
81
- }
82
- }
83
- .usa-input-grid-small input {
84
- margin-bottom: 1.875rem;
85
- }
86
- .usa-input-grid-small select {
87
- margin-bottom: 1.875rem;
88
- }
89
-
90
- @media screen and (min-width: 768px), print and (min-width: 768px) {
91
- .usa-input-grid-medium {
92
- float: left;
93
- width: 65%;
94
- }
95
- }
96
- .usa-input-grid-medium input {
97
- margin-bottom: 1.875rem;
98
- }
99
- .usa-input-grid-medium select {
100
- margin-bottom: 1.875rem;
101
- }
102
-
103
- @media screen and (min-width: 768px), print and (min-width: 768px) {
104
- .usa-input-grid-large {
105
- float: left;
106
- width: 100%;
107
- }
108
- }
109
- .usa-input-grid-large input {
110
- margin-bottom: 1.875rem;
111
- }
112
- .usa-input-grid-large select {
113
- margin-bottom: 1.875rem;
114
- }
115
-
116
- .usa-additional_text {
117
- font-weight: normal;
118
- }
119
-
120
- .usa-checklist {
121
- list-style: none;
122
- margin-left: 0;
123
- padding-left: 0;
124
- }
125
- .usa-checklist li {
126
- display: inline-block;
127
- list-style: none;
128
- margin-bottom: 0;
129
- margin-top: 0;
130
- padding-left: 3em;
131
- text-indent: -2em;
132
- }
133
- .usa-checklist li::before {
134
- content: " ";
135
- display: inline-block;
136
- height: 0.8em;
137
- margin-right: 0.2em;
138
- width: 1.8em;
139
- }
140
-
141
- .usa-checklist-checked::before {
142
- background-image: url("/img/correct9.png");
143
- background-image: url("/img/correct9.svg");
144
- background-position: 100%;
145
- background-repeat: no-repeat;
146
- background-size: 100%;
147
- }
148
-
149
- /**
150
- Variables ported over from Formation so that we can keep those stylesheets
151
- working while we work on deprecation.
152
- **/
153
- body .row {
154
- max-width: 62.5em;
155
- }
156
- body .row-padded {
157
- max-width: 62.5rem;
158
- padding: 0 0.625rem;
159
- margin: 0 auto;
160
- }
161
-
162
- @media screen and (min-width: 768px), print and (min-width: 768px) {
163
- .form-panel {
164
- max-width: 20rem;
165
- }
166
- }
167
-
168
- .progress-box button {
169
- width: 100%;
170
- }
171
-
172
- .progress-box {
173
- border: 1px solid #f1f1f1;
174
- margin: 0.9375rem 0;
175
- padding: 0.625rem 0;
176
- }
177
-
178
- .button-icon {
179
- font-size: 1.0625rem;
180
- }
181
-
182
- .input-section {
183
- margin-bottom: 2em;
184
- }
185
- .input-section .row {
186
- margin: 0;
187
- }
188
-
189
- .usa-input-error select {
190
- border: 3px solid #cd2026;
191
- }
192
-
193
- .hidden {
194
- display: none !important;
195
- }
196
-
197
- .csp-inline-patch-footer {
198
- display: none;
199
- visibility: hidden;
200
- }
201
-
202
- .csp-inline-patch-page-react {
203
- padding: 2em 0;
204
- }
205
-
206
- @media screen and (min-width: 768px), print and (min-width: 768px) {
207
- .usa-grid .usa-width-one-fourth {
208
- margin-right: 2.35765%;
209
- width: 23.23176%;
210
- }
211
- .usa-grid .usa-width-three-fourths {
212
- width: 74.41059%;
213
- }
214
- }
215
- input[type=checkbox],
216
- input[type=radio] {
217
- margin-left: -1.25rem;
218
- opacity: 0;
219
- position: absolute;
220
- left: auto;
221
- }
222
-
223
- [hidden=false] {
224
- display: block !important;
225
- }
226
-
227
- @media screen and (min-width: 768px), print and (min-width: 768px) {
228
- form [type=submit] {
229
- padding-left: 1.25rem;
230
- padding-right: 1.25rem;
231
- width: 100%;
232
- }
233
- }
234
-
235
- #top-of-page-alert-container {
236
- width: 100%;
237
- background-color: #fef0c8;
238
- position: relative;
239
- }
240
- #top-of-page-alert-container:before {
241
- background-color: #fdb81e;
242
- content: "";
243
- height: 100%;
244
- left: 0;
245
- position: absolute;
246
- top: 0;
247
- width: 0.625rem;
248
- }
249
-
250
- #top-of-page-alert {
251
- max-width: 62.5em;
252
- margin: 0 auto;
253
- }
254
- #top-of-page-alert.usa-alert::before {
255
- content: none;
256
- }
257
- #top-of-page-alert .usa-alert-body {
258
- margin: 0 auto;
259
- text-align: left;
260
- }
261
- #top-of-page-alert .usa-alert-body .usa-alert-heading {
262
- margin: 0 auto;
263
- padding: 0;
264
- }
265
-
266
- /*# sourceMappingURL=shame.css.map */
1
+ @media screen and (min-width: 768px),print and (min-width: 768px){[type=submit]{margin-top:calc(1.875rem - .2em)}}fieldset{border:none;margin:0;padding:0}@media screen and (min-width: 768px),print and (min-width: 768px){.usa-form{max-width:20rem}}@media screen and (min-width: 768px),print and (min-width: 768px){.usa-input-tiny{max-width:3.75rem}}@media screen and (min-width: 768px),print and (min-width: 768px){.usa-input-medium{max-width:7.5rem}}.usa-form-note{float:right;font-family:"Source Sans Pro Web","Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;font-size:.9375rem;margin:0 0 scale(1.5rem)}.usa-form-note+*{clear:both}@media screen and (min-width: 768px),print and (min-width: 768px){.usa-form-large{max-width:28.75rem}}@media screen and (min-width: 768px),print and (min-width: 768px){.usa-input-grid{padding-right:5%}}@media screen and (min-width: 768px),print and (min-width: 768px){.usa-input-grid:last-of-type{padding-right:0}}@media screen and (min-width: 768px),print and (min-width: 768px){.usa-input-grid-small{float:left;width:35%}}.usa-input-grid-small input{margin-bottom:1.875rem}.usa-input-grid-small select{margin-bottom:1.875rem}@media screen and (min-width: 768px),print and (min-width: 768px){.usa-input-grid-medium{float:left;width:65%}}.usa-input-grid-medium input{margin-bottom:1.875rem}.usa-input-grid-medium select{margin-bottom:1.875rem}@media screen and (min-width: 768px),print and (min-width: 768px){.usa-input-grid-large{float:left;width:100%}}.usa-input-grid-large input{margin-bottom:1.875rem}.usa-input-grid-large select{margin-bottom:1.875rem}.usa-additional_text{font-weight:normal}.usa-checklist{list-style:none;margin-left:0;padding-left:0}.usa-checklist li{display:inline-block;list-style:none;margin-bottom:0;margin-top:0;padding-left:3em;text-indent:-2em}.usa-checklist li::before{content:" ";display:inline-block;height:.8em;margin-right:.2em;width:1.8em}.usa-checklist-checked::before{background-image:url("/img/correct9.png");background-image:url("/img/correct9.svg");background-position:100%;background-repeat:no-repeat;background-size:100%}body .row{max-width:62.5em;margin:0 auto}body .row-padded{max-width:62.5rem;padding:0 .625rem;margin:0 auto}@media screen and (min-width: 768px),print and (min-width: 768px){.form-panel{max-width:20rem}}.progress-box button{width:100%}.progress-box{border:1px solid #f1f1f1;margin:.9375rem 0;padding:.625rem 0}.button-icon{font-size:1.0625rem}.input-section{margin-bottom:2em}.input-section .row{margin:0}.usa-input-error select{border:3px solid #cd2026}.hidden{display:none !important}.csp-inline-patch-footer{display:none;visibility:hidden}.csp-inline-patch-page-react{padding:2em 0}@media screen and (min-width: 768px),print and (min-width: 768px){.usa-grid .usa-width-one-fourth{margin-right:2.35765%;width:23.23176%}.usa-grid .usa-width-three-fourths{width:74.41059%}}input[type=checkbox],input[type=radio]{margin-left:-1.25rem;opacity:0;position:absolute;left:auto}[hidden=false]{display:block !important}@media screen and (min-width: 768px),print and (min-width: 768px){form [type=submit]{padding-left:1.25rem;padding-right:1.25rem;width:100%}}#top-of-page-alert-container{width:100%;background-color:#fef0c8;position:relative}#top-of-page-alert-container:before{background-color:#fdb81e;content:"";height:100%;left:0;position:absolute;top:0;width:.625rem}#top-of-page-alert{max-width:62.5em;margin:0 auto}#top-of-page-alert.usa-alert::before{content:none}#top-of-page-alert .usa-alert-body{margin:0 auto;text-align:left}#top-of-page-alert .usa-alert-body .usa-alert-heading{margin:0 auto;padding:0}/*# sourceMappingURL=shame.css.map */