eSales Media Git repositories
Browse code

Progress

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

Initial commit

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