eSales Media Git repositories
Browse code

Modernize and adjust code to Contao 5

Benjamin Roth authored on26/10/2023 15:21:49
Showing1 changed files
src/Resources/public/css/columns-flex.scss
History View file @a95b6ce
1 1 
deleted file mode 100644
... ... 
@@ -1,97 +0,0 @@
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 
-}
Browse code

Remove preset margin for multiple wrapped elements in flex columns

Benjamin Roth authored on24/03/2019 16:55:50
Showing1 changed files
src/Resources/public/css/columns-flex.scss
History View file @f45e2cb
... ... 
@@ -43,9 +43,9 @@ $gutter-width: floor((1 / 960) * 1000000) / 1000000 * 30;
43 43 
   margin-left: $gutter-width * 100%;
44 44 
   order: 6;
45 45
46 
-  > * + * {
46 
+  /*> * + * {
47 47 
     margin-top: 30px;
48 
-  }
48 
+  }*/
49 49
50 50 
   @include column-classes($gutter-width, 6, large);
51 51
Browse code

Add flexbox extension to rocksolid columns again

Benjamin Roth authored on10/03/2019 13:23:11
Showing1 changed files
src/Resources/public/css/columns-flex.scss
History View file @22cc49b
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 
+}