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);
Browse code

Modernize and adjust code to Contao 5

Benjamin Roth authored on26/10/2023 15:21:49
Showing1 changed files
public/css/columns-flex.scss
History View file @a95b6ce
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,97 @@
1 
+@mixin column-classes($gutter-width, $max-columns, $class-name) {
2 
+  @for $cols from 1 through $max-columns {
3 
+    @for $span from 1 through $cols {
4 
+      &.-#{unquote($class-name)}-col-#{$cols}-#{$span} {
5 
+        flex-basis: 100% / $cols * $span - ($gutter-width * 100%);
6 
+        order: 6;
7 
+      }
8 
+    }
9 
+  }
10 
+
11 
+  @for $cols from 1 through $max-columns {
12 
+    &.-#{unquote($class-name)}-order-#{$cols} {
13 
+      order: $cols;
14 
+    }
15 
+  }
16 
+}
17 
+
18 
+$gutter-width: floor((1 / 960) * 1000000) / 1000000 * 30;
19 
+
20 
+.rs-columns {
21 
+  display: flex;
22 
+  align-items: flex-start;
23 
+  flex-wrap: wrap;
24 
+  margin-left: -#{$gutter-width * 100%};
25 
+  margin-top: -#{$gutter-width * 100%};
26 
+
27 
+  &.-valign-center {
28 
+    align-items: center;
29 
+  }
30 
+  &.-valign-bottom {
31 
+    align-items: flex-end;
32 
+  }
33 
+  &.-valign-stretch {
34 
+    align-items: stretch;
35 
+  }
36 
+}
37 
+
38 
+.rs-column {
39 
+  flex: 0;
40 
+  max-width: 100%;
41 
+  min-width: 0;
42 
+  margin-top: $gutter-width * 100%;
43 
+  margin-left: $gutter-width * 100%;
44 
+  order: 6;
45 
+
46 
+  /*> * + * {
47 
+    margin-top: 30px;
48 
+  }*/
49 
+
50 
+  @include column-classes($gutter-width, 6, large);
51 
+
52 
+  &.-valign-center {
53 
+    align-self: center;
54 
+  }
55 
+  &.-valign-bottom {
56 
+    align-self: flex-end;
57 
+  }
58 
+  &.-valign-stretch {
59 
+    align-self: stretch;
60 
+  }
61 
+}
62 
+
63 
+// Tablet portrait format (viewport width 900px and below)
64 
+@media screen and (max-width: 900px) {
65 
+  $gutter-width: floor((1 / 900) * 1000000) / 1000000 * 30;
66 
+
67 
+  .rs-columns {
68 
+    margin-left: -#{$gutter-width * 100%};
69 
+    margin-top: -#{$gutter-width * 100%};
70 
+  }
71 
+
72 
+  .rs-column {
73 
+    margin-top: $gutter-width * 100%;
74 
+    margin-left: $gutter-width * 100%;
75 
+    order: 6;
76 
+
77 
+    @include column-classes($gutter-width, 6, medium);
78 
+  }
79 
+}
80 
+
81 
+// Mobile (viewport width 599px and below)
82 
+@media screen and (max-width: 599px) {
83 
+  $gutter-width: floor((1 / 599) * 1000000) / 1000000 * 30;
84 
+
85 
+  .rs-columns {
86 
+    margin-left: -#{$gutter-width * 100%};
87 
+    margin-top: -#{$gutter-width * 100%};
88 
+  }
89 
+
90 
+  .rs-column {
91 
+    margin-top: $gutter-width * 100%;
92 
+    margin-left: $gutter-width * 100%;
93 
+    order: 6;
94 
+
95 
+    @include column-classes($gutter-width, 6, small);
96 
+  }
97 
+}