style and image path updates for alert and action link (#1378)

department-of-veterans-affairs · Oct 25, 2024 · ed309fc · ed309fc
1 parent e0923ba
commit ed309fc
Show file tree

Hide file tree

Showing 16 changed files with 30 additions and 18 deletions.
diff --git a/...ges/css-library/dist/img/alerts/error.svg → packages/css-library/dist/img/error.svg b/...ges/css-library/dist/img/alerts/error.svg → packages/css-library/dist/img/error.svg
diff --git a/...ages/css-library/dist/img/alerts/info.svg → packages/css-library/dist/img/info.svg b/...ages/css-library/dist/img/alerts/info.svg → packages/css-library/dist/img/info.svg
diff --git a/...s/css-library/dist/img/alerts/success.svg → packages/css-library/dist/img/success.svg b/...s/css-library/dist/img/alerts/success.svg → packages/css-library/dist/img/success.svg
diff --git a/...s/css-library/dist/img/alerts/warning.svg → packages/css-library/dist/img/warning.svg b/...s/css-library/dist/img/alerts/warning.svg → packages/css-library/dist/img/warning.svg
diff --git a/packages/css-library/dist/stylesheets/modules/m-action-link.css b/packages/css-library/dist/stylesheets/modules/m-action-link.css
diff --git a/packages/css-library/dist/stylesheets/modules/m-action-link.css.map b/packages/css-library/dist/stylesheets/modules/m-action-link.css.map
diff --git a/packages/css-library/dist/stylesheets/modules/m-alert.css b/packages/css-library/dist/stylesheets/modules/m-alert.css
diff --git a/packages/css-library/dist/stylesheets/modules/m-alert.css.map b/packages/css-library/dist/stylesheets/modules/m-alert.css.map
diff --git a/packages/css-library/dist/tokens/css/variables.css b/packages/css-library/dist/tokens/css/variables.css
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed, 23 Oct 2024 15:16:57 GMT
+ * Generated on Fri, 25 Oct 2024 14:10:23 GMT
  */
 
 :root {

diff --git a/packages/css-library/dist/tokens/scss/variables.scss b/packages/css-library/dist/tokens/scss/variables.scss
@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 23 Oct 2024 15:16:57 GMT
+// Generated on Fri, 25 Oct 2024 14:10:23 GMT
 
 $xsmall-screen: 320px;
 $small-screen: 481px;

diff --git a/...s-library/src/assets/img/alerts/error.svg → ...ages/css-library/src/assets/img/error.svg b/...s-library/src/assets/img/alerts/error.svg → ...ages/css-library/src/assets/img/error.svg
diff --git a/...ss-library/src/assets/img/alerts/info.svg → packages/css-library/src/assets/img/info.svg b/...ss-library/src/assets/img/alerts/info.svg → packages/css-library/src/assets/img/info.svg
diff --git a/...library/src/assets/img/alerts/success.svg → ...es/css-library/src/assets/img/success.svg b/...library/src/assets/img/alerts/success.svg → ...es/css-library/src/assets/img/success.svg
diff --git a/...library/src/assets/img/alerts/warning.svg → ...es/css-library/src/assets/img/warning.svg b/...library/src/assets/img/alerts/warning.svg → ...es/css-library/src/assets/img/warning.svg
diff --git a/packages/css-library/src/stylesheets/modules/m-action-link.scss b/packages/css-library/src/stylesheets/modules/m-action-link.scss
@@ -1,3 +1,5 @@
+@use '../core-variables' as *;
+
 @import "../../../dist/tokens/scss/variables.scss";
 @import "../formation-overrides/variables";
 @import "../mixins";
@@ -6,7 +8,7 @@
 
 a.vads-c-action-link--blue, a.vads-c-action-link--green, a.vads-c-action-link--white {
   &:before {
-    background-image: url("../../img/arrow-right-white.svg");
+    background-image: url("#{$image-path}/arrow-right-white.svg");
     background-size: 18px 18px;
     background-repeat: no-repeat;
     background-position: center;
@@ -39,7 +41,7 @@ a.vads-c-action-link--white {
   color: $vads-color-white;
 
   &:before {
-    background-image: url("../../img/arrow-right.svg");
+    background-image: url("#{$image-path}/arrow-right.svg");
     background-color: $vads-color-white;
     @include color-transition;
   }

diff --git a/packages/css-library/src/stylesheets/modules/m-alert.scss b/packages/css-library/src/stylesheets/modules/m-alert.scss
@@ -1,3 +1,5 @@
+@use '../core-variables' as *;
+
 @import "../formation-overrides/variables";
 @import "../../../dist/tokens/scss/variables.scss";
 @import "../mixins";
@@ -14,10 +16,11 @@
   width: 100%;
 
   &::before {
-    background-image: url("../../img/alerts/info.svg");
+    background-image: url("#{$image-path}/alerts/info.svg");
     background-size: 35px 35px;
     background-repeat: no-repeat;
     background-position: center;
+    background-color: unset;
     border-radius: 50%;
     content: "";
     height: 31px;
@@ -27,6 +30,9 @@
     font-family: unset;
     font-weight: unset;
     font-size: unset;
+    margin-right: 1rem;
+    position: static;
+    display: block;
   }
 
   // &-body would not have had high enough precedence.
@@ -74,7 +80,7 @@
     border-left-color: $color-primary-alt-dark;
 
     &::before {
-      background-image: url("../../img/alerts/info.svg");
+      background-image: url("#{$image-path}/alerts/info.svg");
     }
 
     &.background-color-only {
@@ -86,7 +92,7 @@
     border-left-color: $color-secondary-dark;
 
     &::before {
-      background-image: url("../../img/alerts/error.svg");
+      background-image: url("#{$image-path}/alerts/error.svg");
     }
 
     &.background-color-only {
@@ -98,7 +104,7 @@
     border-left-color: $color-green;
 
     &::before {
-      background-image: url("../../img/alerts/success.svg");
+      background-image: url("#{$image-path}/alerts/success.svg");
     }
 
     &.background-color-only {
@@ -110,7 +116,7 @@
     border-left-color: $color-gold;
 
     &::before {
-      background-image: url("../../img/alerts/warning.svg");
+      background-image: url("#{$image-path}/alerts/warning.svg");
     }
 
     &.background-color-only {