Merge pull request #5582 from uswds/al-theme-site-margins-fix

thisisdano · web-flow · commit 64e7dec98cff · 2023-11-02T09:50:14.000-07:00
USWDS - Settings: Fix math errors with $theme-site-margins-width
diff --git a/packages/uswds-core/src/styles/mixins/helpers/alert-status-styles.scss b/packages/uswds-core/src/styles/mixins/helpers/alert-status-styles.scss
@@ -90,7 +90,8 @@
 
   padding-left: units($theme-alert-icon-size) + ($alert-icon-optical-padding);
   @include at-media($theme-site-margins-breakpoint) {
-    @include u-padding-x($theme-site-margins-width * 2);
+    padding-left: units($theme-site-margins-width) * 2;
+    padding-right: units($theme-site-margins-width) * 2;
   }
 
   .usa-link {
@@ -122,7 +123,9 @@
     position: absolute;
     top: units($theme-alert-padding-y) * 0.75;
     @include at-media($theme-site-margins-breakpoint) {
-      left: units($theme-site-margins-width) - units($theme-alert-bar-width);
+      left: calc(
+        units($theme-site-margins-width) - units($theme-alert-bar-width)
+      );
     }
   }
 }
@@ -163,7 +166,9 @@
 
     padding-left: $alert-slim-icon-size + $alert-icon-optical-padding;
     @include at-media($theme-site-margins-breakpoint) {
-      padding-left: units($theme-site-margins-width) + $alert-slim-icon-size;
+      padding-left: calc(
+        units($theme-site-margins-width) + $alert-slim-icon-size
+      );
     }
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -90,7 +90,8 @@`
`90`	`90`
`91`	`91`	`padding-left: units($theme-alert-icon-size) + ($alert-icon-optical-padding);`
`92`	`92`	`@include at-media($theme-site-margins-breakpoint) {`
`93`		`- @include u-padding-x($theme-site-margins-width * 2);`
	`93`	`+ padding-left: units($theme-site-margins-width) * 2;`
	`94`	`+ padding-right: units($theme-site-margins-width) * 2;`
`94`	`95`	`}`
`95`	`96`
`96`	`97`	`.usa-link {`
`@@ -122,7 +123,9 @@`
`122`	`123`	`position: absolute;`
`123`	`124`	`top: units($theme-alert-padding-y) * 0.75;`
`124`	`125`	`@include at-media($theme-site-margins-breakpoint) {`
`125`		`- left: units($theme-site-margins-width) - units($theme-alert-bar-width);`
	`126`	`+ left: calc(`
	`127`	`+ units($theme-site-margins-width) - units($theme-alert-bar-width)`
	`128`	`+ );`
`126`	`129`	`}`
`127`	`130`	`}`
`128`	`131`	`}`
`@@ -163,7 +166,9 @@`
`163`	`166`
`164`	`167`	`padding-left: $alert-slim-icon-size + $alert-icon-optical-padding;`
`165`	`168`	`@include at-media($theme-site-margins-breakpoint) {`
`166`		`- padding-left: units($theme-site-margins-width) + $alert-slim-icon-size;`
	`169`	`+ padding-left: calc(`
	`170`	`+ units($theme-site-margins-width) + $alert-slim-icon-size`
	`171`	`+ );`
`167`	`172`	`}`
`168`	`173`	`}`
`169`	`174`	`}`