eSales Media Git repositories
Browse code

Use gap instead of margin in columns-flex.scss

Benjamin Roth authored on26/10/2023 15:35:17
Showing1 changed files
public/css/columns-flex.scss
History View file @51614f3
... ... 
@@ -2,7 +2,9 @@
2 2 
   @for $cols from 1 through $max-columns {
3 3 
     @for $span from 1 through $cols {
4 4 
       &.-#{unquote($class-name)}-col-#{$cols}-#{$span} {
5 
-        flex-basis: 100% / $cols * $span - ($gutter-width * 100%);
5 
+        $width: (100% - (($cols - 1) * ($gutter-width * 100%))) / $cols * $span;
6 
+        flex-basis: $width;
7 
+        max-width: $width;
6 8 
         order: 6;
7 9 
       }
8 10 
     }
... ... 
@@ -15,14 +17,13 @@
15 17 
   }
16 18 
 }
17 19
18 
-$gutter-width: floor((1 / 960) * 1000000) / 1000000 * 30;
20 
+$gutter-width: floor((1 / 960) * 1000000) / 1000000 * 60;
19 21
20 22 
 .rs-columns {
21 23 
   display: flex;
22 24 
   align-items: flex-start;
23 25 
   flex-wrap: wrap;
24 
-  margin-left: -#{$gutter-width * 100%};
25 
-  margin-top: -#{$gutter-width * 100%};
26 
+  gap: #{$gutter-width * 100%};
26 27
27 28 
   &.-valign-center {
28 29 
     align-items: center;
... ... 
@@ -39,8 +40,6 @@ $gutter-width: floor((1 / 960) * 1000000) / 1000000 * 30;
39 40 
   flex: 0;
40 41 
   max-width: 100%;
41 42 
   min-width: 0;
42 
-  margin-top: $gutter-width * 100%;
43 
-  margin-left: $gutter-width * 100%;
44 43 
   order: 6;
45 44
46 45 
   /*> * + * {
... ... 
@@ -62,16 +61,13 @@ $gutter-width: floor((1 / 960) * 1000000) / 1000000 * 30;
62 61
63 62 
 // Tablet portrait format (viewport width 900px and below)
64 63 
 @media screen and (max-width: 900px) {
65 
-  $gutter-width: floor((1 / 900) * 1000000) / 1000000 * 30;
64 
+  $gutter-width: floor((1 / 900) * 1000000) / 1000000 * 60;
66 65
67 66 
   .rs-columns {
68 
-    margin-left: -#{$gutter-width * 100%};
69 
-    margin-top: -#{$gutter-width * 100%};
67 
+    gap: #{$gutter-width * 100%};
70 68 
   }
71 69
72 70 
   .rs-column {
73 
-    margin-top: $gutter-width * 100%;
74 
-    margin-left: $gutter-width * 100%;
75 71 
     order: 6;
76 72
77 73 
     @include column-classes($gutter-width, 6, medium);
... ... 
@@ -83,13 +79,10 @@ $gutter-width: floor((1 / 960) * 1000000) / 1000000 * 30;
83 79 
   $gutter-width: floor((1 / 599) * 1000000) / 1000000 * 30;
84 80
85 81 
   .rs-columns {
86 
-    margin-left: -#{$gutter-width * 100%};
87 
-    margin-top: -#{$gutter-width * 100%};
82 
+    gap: #{$gutter-width * 100%};
88 83 
   }
89 84
90 85 
   .rs-column {
91 
-    margin-top: $gutter-width * 100%;
92 
-    margin-left: $gutter-width * 100%;
93 86 
     order: 6;
94 87
95 88 
     @include column-classes($gutter-width, 6, small);