@department-of-veterans-affairs/css-library 0.13.1-rc1 → 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 (45) hide show
  1. package/dist/stylesheets/base/fonts.css +1 -1589
  2. package/dist/stylesheets/base/headings.css +1 -1523
  3. package/dist/stylesheets/base/utils.css +1 -137
  4. package/dist/stylesheets/base/va.css +1 -392
  5. package/dist/stylesheets/core.css +1 -6441
  6. package/dist/stylesheets/formation-overrides/core/base.css +1 -64
  7. package/dist/stylesheets/formation-overrides/core/fonts.css +1 -46
  8. package/dist/stylesheets/formation-overrides/elements/buttons.css +1 -562
  9. package/dist/stylesheets/formation-overrides/elements/inputs.css +1 -384
  10. package/dist/stylesheets/formation-overrides/elements/labels.css +1 -28
  11. package/dist/stylesheets/formation-overrides/elements/lists.css +1 -57
  12. package/dist/stylesheets/formation-overrides/elements/table.css +1 -78
  13. package/dist/stylesheets/formation-overrides/elements/typography.css +1 -312
  14. package/dist/stylesheets/mobile-typography.css +1 -13
  15. package/dist/stylesheets/modules/m-action-link.css +1 -1447
  16. package/dist/stylesheets/modules/m-additional-info.css +1 -39
  17. package/dist/stylesheets/modules/m-alert.css +1 -252
  18. package/dist/stylesheets/modules/m-breadcrumbs.css +1 -96
  19. package/dist/stylesheets/modules/m-button.css +1 -153
  20. package/dist/stylesheets/modules/m-dropdown.css +1 -47
  21. package/dist/stylesheets/modules/m-emergency-banner.css +1 -33
  22. package/dist/stylesheets/modules/m-external-link.css +1 -14
  23. package/dist/stylesheets/modules/m-form-elements.css +1 -231
  24. package/dist/stylesheets/modules/m-form-process.css +1 -219
  25. package/dist/stylesheets/modules/m-homepage-hero.css +1 -76
  26. package/dist/stylesheets/modules/m-hub-page-link-list.css +1 -40
  27. package/dist/stylesheets/modules/m-loading-indicator.css +1 -41
  28. package/dist/stylesheets/modules/m-maintenance-banner.css +1 -33
  29. package/dist/stylesheets/modules/m-megamenu.css +1 -370
  30. package/dist/stylesheets/modules/m-modal.css +1 -117
  31. package/dist/stylesheets/modules/m-nav-linklist.css +1 -49
  32. package/dist/stylesheets/modules/m-nav-sidebar.css +1 -349
  33. package/dist/stylesheets/modules/m-omb-info.css +0 -5
  34. package/dist/stylesheets/modules/m-overlay.css +1 -72
  35. package/dist/stylesheets/modules/m-print.css +1 -27
  36. package/dist/stylesheets/modules/m-process-list.css +1 -162
  37. package/dist/stylesheets/modules/va-pagination.css +1 -90
  38. package/dist/stylesheets/modules/va-tabs.css +1 -53
  39. package/dist/stylesheets/shame.css +1 -267
  40. package/dist/stylesheets/uswds-typography.css +1 -4201
  41. package/dist/stylesheets/utilities.css +1 -15539
  42. package/dist/tokens/css/variables.css +8 -1
  43. package/dist/tokens/json/variables.json +153 -0
  44. package/dist/tokens/scss/variables.scss +8 -1
  45. package/package.json +2 -2
@@ -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,267 +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(1.875rem - 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 Web", "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
- margin: 0 auto;
156
- }
157
- body .row-padded {
158
- max-width: 62.5rem;
159
- padding: 0 0.625rem;
160
- margin: 0 auto;
161
- }
162
-
163
- @media screen and (min-width: 768px), print and (min-width: 768px) {
164
- .form-panel {
165
- max-width: 20rem;
166
- }
167
- }
168
-
169
- .progress-box button {
170
- width: 100%;
171
- }
172
-
173
- .progress-box {
174
- border: 1px solid #f1f1f1;
175
- margin: 0.9375rem 0;
176
- padding: 0.625rem 0;
177
- }
178
-
179
- .button-icon {
180
- font-size: 1.0625rem;
181
- }
182
-
183
- .input-section {
184
- margin-bottom: 2em;
185
- }
186
- .input-section .row {
187
- margin: 0;
188
- }
189
-
190
- .usa-input-error select {
191
- border: 3px solid #cd2026;
192
- }
193
-
194
- .hidden {
195
- display: none !important;
196
- }
197
-
198
- .csp-inline-patch-footer {
199
- display: none;
200
- visibility: hidden;
201
- }
202
-
203
- .csp-inline-patch-page-react {
204
- padding: 2em 0;
205
- }
206
-
207
- @media screen and (min-width: 768px), print and (min-width: 768px) {
208
- .usa-grid .usa-width-one-fourth {
209
- margin-right: 2.35765%;
210
- width: 23.23176%;
211
- }
212
- .usa-grid .usa-width-three-fourths {
213
- width: 74.41059%;
214
- }
215
- }
216
- input[type=checkbox],
217
- input[type=radio] {
218
- margin-left: -1.25rem;
219
- opacity: 0;
220
- position: absolute;
221
- left: auto;
222
- }
223
-
224
- [hidden=false] {
225
- display: block !important;
226
- }
227
-
228
- @media screen and (min-width: 768px), print and (min-width: 768px) {
229
- form [type=submit] {
230
- padding-left: 1.25rem;
231
- padding-right: 1.25rem;
232
- width: 100%;
233
- }
234
- }
235
-
236
- #top-of-page-alert-container {
237
- width: 100%;
238
- background-color: #fef0c8;
239
- position: relative;
240
- }
241
- #top-of-page-alert-container:before {
242
- background-color: #fdb81e;
243
- content: "";
244
- height: 100%;
245
- left: 0;
246
- position: absolute;
247
- top: 0;
248
- width: 0.625rem;
249
- }
250
-
251
- #top-of-page-alert {
252
- max-width: 62.5em;
253
- margin: 0 auto;
254
- }
255
- #top-of-page-alert.usa-alert::before {
256
- content: none;
257
- }
258
- #top-of-page-alert .usa-alert-body {
259
- margin: 0 auto;
260
- text-align: left;
261
- }
262
- #top-of-page-alert .usa-alert-body .usa-alert-heading {
263
- margin: 0 auto;
264
- padding: 0;
265
- }
266
-
267
- /*# 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 */