Refactor(web): Leverage custom properties for Container padding to make it easily accessible

adamkudrna · adamkudrna · commit c4370dd7bc6d · 2022-05-23T12:01:42.000+02:00
diff --git a/packages/web/src/scss/components/Container/_Container.scss b/packages/web/src/scss/components/Container/_Container.scss
@@ -5,6 +5,7 @@
     width: 100%;
     max-width: theme.$container-max-width;
     margin-inline: auto;
+    padding-inline: var(--container-padding-inline);
 
     @include tools.paddings(theme.$container-paddings, theme.$container-breakpoints);
 }
diff --git a/packages/web/src/scss/components/Container/_tools.scss b/packages/web/src/scss/components/Container/_tools.scss
@@ -5,7 +5,7 @@
 @mixin paddings($paddings, $breakpoints) {
     @each $name, $breakpoint in $breakpoints {
         @include breakpoint.up($breakpoint) {
-            padding-inline: map.get($paddings, $name);
+            --container-padding-inline: #{map.get($paddings, $name)};
         }
     }
 }
diff --git a/packages/web/src/scss/helpers/_breakout.scss b/packages/web/src/scss/helpers/_breakout.scss
@@ -1,5 +1,3 @@
-@use '../tools/breakout';
-
 .breakout-container {
-    @include breakout.container();
+    margin-inline: calc(-1 * var(--container-padding-inline));
 }
diff --git a/packages/web/src/scss/tools/_breakout.scss b/packages/web/src/scss/tools/_breakout.scss

Original file line number	Diff line number	Diff line change
`@@ -5,6 +5,7 @@`
`5`	`5`	`width: 100%;`
`6`	`6`	`max-width: theme.$container-max-width;`
`7`	`7`	`margin-inline: auto;`
	`8`	`+ padding-inline: var(--container-padding-inline);`
`8`	`9`
`9`	`10`	`@include tools.paddings(theme.$container-paddings, theme.$container-breakpoints);`
`10`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,7 @@`
`5`	`5`	`@mixin paddings($paddings, $breakpoints) {`
`6`	`6`	`@each $name, $breakpoint in $breakpoints {`
`7`	`7`	`@include breakpoint.up($breakpoint) {`
`8`		`- padding-inline: map.get($paddings, $name);`
	`8`	`+ --container-padding-inline: #{map.get($paddings, $name)};`
`9`	`9`	`}`
`10`	`10`	`}`
`11`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,3 @@`
`1`		`-@use '../tools/breakout';`
`2`		`-`
`3`	`1`	`.breakout-container {`
`4`		`- @include breakout.container();`
	`2`	`+ margin-inline: calc(-1 * var(--container-padding-inline));`
`5`	`3`	`}`