@department-of-veterans-affairs/css-library 0.12.1 → 0.13.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 (6) hide show
  1. package/dist/stylesheets/modules/m-action-link.css +18 -11
  2. package/dist/stylesheets/modules/m-alert.css +17 -23
  3. package/dist/stylesheets/utilities.css +32 -32
  4. package/dist/tokens/css/variables.css +1 -1
  5. package/dist/tokens/scss/variables.scss +1 -1
  6. package/package.json +1 -1
package/dist/stylesheets/modules/m-action-link.css CHANGED
@@ -1398,29 +1398,36 @@ a.vads-c-action-link--blue, a.vads-c-action-link--green, a.vads-c-action-link--w
1398
1398
  display: inline-block;
1399
1399
  }
1400
1400
  a.vads-c-action-link--blue:before, a.vads-c-action-link--green:before, a.vads-c-action-link--white:before {
1401
- font-family: "Font Awesome 5 Free";
1402
- font-weight: 900;
1403
- font-size: 175%;
1404
- content: "\f138";
1405
- content: "\f138"/"";
1401
+ background-image: url("../../img/arrow-right-white.svg");
1402
+ background-size: 18px 18px;
1403
+ background-repeat: no-repeat;
1404
+ background-position: center;
1405
+ border-radius: 50%;
1406
+ content: "";
1407
+ height: 30px;
1408
+ width: 30px;
1406
1409
  position: absolute;
1407
- left: 0px;
1408
- top: -4px;
1410
+ top: 2px;
1411
+ left: 0;
1412
+ font-family: unset;
1413
+ font-weight: unset;
1414
+ font-size: unset;
1409
1415
  }
1410
1416
 
1411
1417
  a.vads-c-action-link--blue:before {
1412
- color: #005ea2;
1418
+ background-color: #005ea2;
1413
1419
  }
1414
1420
 
1415
1421
  a.vads-c-action-link--green:before {
1416
- color: #008817;
1422
+ background-color: #008817;
1417
1423
  }
1418
1424
 
1419
1425
  a.vads-c-action-link--white {
1420
1426
  color: #ffffff;
1421
1427
  }
1422
1428
  a.vads-c-action-link--white:before {
1423
- color: #ffffff;
1429
+ background-image: url("../../img/arrow-right.svg");
1430
+ background-color: #ffffff;
1424
1431
  -webkit-transition-duration: 0.3s;
1425
1432
  transition-duration: 0.3s;
1426
1433
  -webkit-transition-timing-function: ease-in-out;
@@ -1434,7 +1441,7 @@ a.vads-c-action-link--white:hover {
1434
1441
  background-color: transparent;
1435
1442
  }
1436
1443
  a.vads-c-action-link--white:hover:before {
1437
- color: #face00;
1444
+ background-color: #face00;
1438
1445
  }
1439
1446
 
1440
1447
  /*# sourceMappingURL=m-action-link.css.map */
package/dist/stylesheets/modules/m-alert.css CHANGED
@@ -22,14 +22,19 @@
22
22
  width: 100%;
23
23
  }
24
24
  .usa-alert::before {
25
- display: block;
26
- width: auto;
27
- background: none;
28
- font-family: "Font Awesome 5 Free";
29
- font-size: 1.25rem;
30
- margin-right: units(2);
31
- position: static;
32
- font-weight: 900;
25
+ background-image: url("../../img/alerts/info.svg");
26
+ background-size: 35px 35px;
27
+ background-repeat: no-repeat;
28
+ background-position: center;
29
+ border-radius: 50%;
30
+ content: "";
31
+ height: 31px;
32
+ width: 31px;
33
+ top: 2px;
34
+ left: 0;
35
+ font-family: unset;
36
+ font-weight: unset;
37
+ font-size: unset;
33
38
  }
34
39
  .usa-alert .usa-alert-body {
35
40
  display: table-cell;
@@ -66,7 +71,7 @@
66
71
  border-left-color: #00a6d2;
67
72
  }
68
73
  .usa-alert-info::before {
69
- content: "\f05a";
74
+ background-image: url("../../img/alerts/info.svg");
70
75
  }
71
76
  .usa-alert-info.background-color-only {
72
77
  background-color: #e1f3f8;
@@ -75,8 +80,7 @@
75
80
  border-left-color: #cd2026;
76
81
  }
77
82
  .usa-alert-error::before {
78
- color: #cd2026;
79
- content: "\f06a";
83
+ background-image: url("../../img/alerts/error.svg");
80
84
  }
81
85
  .usa-alert-error.background-color-only {
82
86
  background-color: #f9dede;
@@ -85,8 +89,7 @@
85
89
  border-left-color: #008817;
86
90
  }
87
91
  .usa-alert-success::before {
88
- color: #008817;
89
- content: "\f00c";
92
+ background-image: url("../../img/alerts/success.svg");
90
93
  }
91
94
  .usa-alert-success.background-color-only {
92
95
  background-color: #e7f4e4;
@@ -95,7 +98,7 @@
95
98
  border-left-color: #fdb81e;
96
99
  }
97
100
  .usa-alert-warning::before {
98
- content: "\f071";
101
+ background-image: url("../../img/alerts/warning.svg");
99
102
  }
100
103
  .usa-alert-warning.background-color-only {
101
104
  background-color: #fff1d2;
@@ -103,10 +106,6 @@
103
106
  .usa-alert-continue {
104
107
  border-left-color: #008817;
105
108
  }
106
- .usa-alert-continue::before {
107
- color: #008817;
108
- content: "\f023";
109
- }
110
109
  .usa-alert.background-color-only {
111
110
  border-left: none;
112
111
  padding: 1.25rem;
@@ -243,12 +242,7 @@ p.usa-alert-heading {
243
242
  border-top: 0.625rem solid #00a6d2;
244
243
  }
245
244
  .usa-alert-full-width-info .usa-alert:before, .usa-alert-full-width-information .usa-alert:before {
246
- content: "\f05a";
247
245
  background: none;
248
- font-size: 1.25rem;
249
- margin-right: 0.9375rem;
250
- position: static;
251
- font-weight: 900;
252
246
  }
253
247
 
254
248
  /*# sourceMappingURL=m-alert.css.map */
package/dist/stylesheets/utilities.css CHANGED
@@ -5304,11 +5304,11 @@ through all possible variants
5304
5304
  order: 0 !important;
5305
5305
  }
5306
5306
 
5307
- .vads-u-font--sans {
5307
+ .vads-u-font-family--sans {
5308
5308
  font-family: Source Sans Pro, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif !important;
5309
5309
  }
5310
5310
 
5311
- .vads-u-font--serif {
5311
+ .vads-u-font-family--serif {
5312
5312
  font-family: Bitter, Georgia, Cambria, Times New Roman, Times, serif !important;
5313
5313
  }
5314
5314
 
@@ -6247,16 +6247,16 @@ through all possible variants
6247
6247
  }
6248
6248
 
6249
6249
  .vads-u-margin-x--auto {
6250
- margin-left: -1px !important;
6251
- margin-right: -1px !important;
6250
+ margin-left: auto !important;
6251
+ margin-right: auto !important;
6252
6252
  }
6253
6253
 
6254
6254
  .vads-u-margin-right--auto {
6255
- margin-right: -1px !important;
6255
+ margin-right: auto !important;
6256
6256
  }
6257
6257
 
6258
6258
  .vads-u-margin-left--auto {
6259
- margin-left: -1px !important;
6259
+ margin-left: auto !important;
6260
6260
  }
6261
6261
 
6262
6262
  .vads-u-measure--1 {
@@ -7774,14 +7774,14 @@ through all possible variants
7774
7774
  margin-left: -1px !important;
7775
7775
  }
7776
7776
  .mobile\:vads-u-margin-x--auto {
7777
- margin-left: -1px !important;
7778
- margin-right: -1px !important;
7777
+ margin-left: auto !important;
7778
+ margin-right: auto !important;
7779
7779
  }
7780
7780
  .mobile\:vads-u-margin-right--auto {
7781
- margin-right: -1px !important;
7781
+ margin-right: auto !important;
7782
7782
  }
7783
7783
  .mobile\:vads-u-margin-left--auto {
7784
- margin-left: -1px !important;
7784
+ margin-left: auto !important;
7785
7785
  }
7786
7786
  .mobile\:vads-u-measure--1 {
7787
7787
  max-width: 40ch !important;
@@ -9161,14 +9161,14 @@ through all possible variants
9161
9161
  margin-left: -1px !important;
9162
9162
  }
9163
9163
  .mobile-lg\:vads-u-margin-x--auto {
9164
- margin-left: -1px !important;
9165
- margin-right: -1px !important;
9164
+ margin-left: auto !important;
9165
+ margin-right: auto !important;
9166
9166
  }
9167
9167
  .mobile-lg\:vads-u-margin-right--auto {
9168
- margin-right: -1px !important;
9168
+ margin-right: auto !important;
9169
9169
  }
9170
9170
  .mobile-lg\:vads-u-margin-left--auto {
9171
- margin-left: -1px !important;
9171
+ margin-left: auto !important;
9172
9172
  }
9173
9173
  .mobile-lg\:vads-u-measure--1 {
9174
9174
  max-width: 40ch !important;
@@ -10548,14 +10548,14 @@ through all possible variants
10548
10548
  margin-left: -1px !important;
10549
10549
  }
10550
10550
  .tablet\:vads-u-margin-x--auto {
10551
- margin-left: -1px !important;
10552
- margin-right: -1px !important;
10551
+ margin-left: auto !important;
10552
+ margin-right: auto !important;
10553
10553
  }
10554
10554
  .tablet\:vads-u-margin-right--auto {
10555
- margin-right: -1px !important;
10555
+ margin-right: auto !important;
10556
10556
  }
10557
10557
  .tablet\:vads-u-margin-left--auto {
10558
- margin-left: -1px !important;
10558
+ margin-left: auto !important;
10559
10559
  }
10560
10560
  .tablet\:vads-u-measure--1 {
10561
10561
  max-width: 40ch !important;
@@ -11935,14 +11935,14 @@ through all possible variants
11935
11935
  margin-left: -1px !important;
11936
11936
  }
11937
11937
  .desktop\:vads-u-margin-x--auto {
11938
- margin-left: -1px !important;
11939
- margin-right: -1px !important;
11938
+ margin-left: auto !important;
11939
+ margin-right: auto !important;
11940
11940
  }
11941
11941
  .desktop\:vads-u-margin-right--auto {
11942
- margin-right: -1px !important;
11942
+ margin-right: auto !important;
11943
11943
  }
11944
11944
  .desktop\:vads-u-margin-left--auto {
11945
- margin-left: -1px !important;
11945
+ margin-left: auto !important;
11946
11946
  }
11947
11947
  .desktop\:vads-u-measure--1 {
11948
11948
  max-width: 40ch !important;
@@ -13322,14 +13322,14 @@ through all possible variants
13322
13322
  margin-left: -1px !important;
13323
13323
  }
13324
13324
  .desktop-lg\:vads-u-margin-x--auto {
13325
- margin-left: -1px !important;
13326
- margin-right: -1px !important;
13325
+ margin-left: auto !important;
13326
+ margin-right: auto !important;
13327
13327
  }
13328
13328
  .desktop-lg\:vads-u-margin-right--auto {
13329
- margin-right: -1px !important;
13329
+ margin-right: auto !important;
13330
13330
  }
13331
13331
  .desktop-lg\:vads-u-margin-left--auto {
13332
- margin-left: -1px !important;
13332
+ margin-left: auto !important;
13333
13333
  }
13334
13334
  .desktop-lg\:vads-u-measure--1 {
13335
13335
  max-width: 40ch !important;
@@ -14341,10 +14341,10 @@ through all possible variants
14341
14341
  .medium-screen\:vads-u-order--initial {
14342
14342
  order: 0 !important;
14343
14343
  }
14344
- .medium-screen\:vads-u-font--sans {
14344
+ .medium-screen\:vads-u-font-family--sans {
14345
14345
  font-family: Source Sans Pro, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif !important;
14346
14346
  }
14347
- .medium-screen\:vads-u-font--serif {
14347
+ .medium-screen\:vads-u-font-family--serif {
14348
14348
  font-family: Bitter, Georgia, Cambria, Times New Roman, Times, serif !important;
14349
14349
  }
14350
14350
  .medium-screen\:vads-u-font-size--sm {
@@ -15063,14 +15063,14 @@ through all possible variants
15063
15063
  margin-left: -1px !important;
15064
15064
  }
15065
15065
  .medium-screen\:vads-u-margin-x--auto {
15066
- margin-left: -1px !important;
15067
- margin-right: -1px !important;
15066
+ margin-left: auto !important;
15067
+ margin-right: auto !important;
15068
15068
  }
15069
15069
  .medium-screen\:vads-u-margin-right--auto {
15070
- margin-right: -1px !important;
15070
+ margin-right: auto !important;
15071
15071
  }
15072
15072
  .medium-screen\:vads-u-margin-left--auto {
15073
- margin-left: -1px !important;
15073
+ margin-left: auto !important;
15074
15074
  }
15075
15075
  .medium-screen\:vads-u-measure--1 {
15076
15076
  max-width: 40ch !important;
package/dist/tokens/css/variables.css CHANGED
@@ -1,6 +1,6 @@
1
1
  /**
2
2
  * Do not edit directly
3
- * Generated on Thu, 03 Oct 2024 16:20:58 GMT
3
+ * Generated on Thu, 24 Oct 2024 17:40:22 GMT
4
4
  */
5
5
 
6
6
  :root {
package/dist/tokens/scss/variables.scss CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  // Do not edit directly
3
- // Generated on Thu, 03 Oct 2024 16:20:58 GMT
3
+ // Generated on Thu, 24 Oct 2024 17:40:22 GMT
4
4
 
5
5
  $xsmall-screen: 320px;
6
6
  $small-screen: 481px;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@department-of-veterans-affairs/css-library",
3
- "version": "0.12.1",
3
+ "version": "0.13.0",
4
4
  "description": "Department of Veterans Affairs stylesheets, tokens, and utilities",
5
5
  "packageManager": "yarn@3.2.0",
6
6
  "files": [