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/inc/custom-elements.scss
History View file @bd9ee9a
1 1 
deleted file mode 100644
... ... 
@@ -1,269 +0,0 @@
1 
-@if not-imported("import_once_func") { @import "import_once_func"; }
2 
-@if not-imported("framework") { @import "framework"; }
3 
-/**
4 
- * Custom Elements
5 
- */
6 
-
7 
-
8 
-/**
9 
- * WRAPPER
10 
- */
11 
-.background-wrapper {
12 
-  zoom: 1;
13 
-  position: relative;
14 
-  clear: both;
15 
-  background: 50% 50% no-repeat;
16 
-  background-size: cover;
17 
-  overflow: hidden;
18 
-
19 
-  &:before {
20 
-    content: "";
21 
-    display: table;
22 
-  }
23 
-  &:after {
24 
-    content: "";
25 
-    display: table;
26 
-    clear: both;
27 
-  }
28 
-  &.-alt-color,
29 
-  &.-alt-color2 {
30 
-    color: $color-text-invert;
31 
-
32 
-    &:not(.-alt-color2)
33 
-    {
34 
-      h1,h2,h3,h4,h5,h6 {
35 
-        color: $color-headline-invert;
36 
-      }
37 
-    }
38 
-  }
39 
-  &.-alt-color {
40 
-    background-color: $color-bg-secondary;
41 
-
42 
-    a {
43 
-      color: $color-bg-tertiary;
44 
-
45 
-      &:hover {
46 
-        color: mix($color-bg-tertiary,#fff,70%);
47 
-      }
48 
-    }
49 
-
50 
-    .ce_text {
51 
-      a[target="_blank"]:not(.button):not(.-ico-dl) {
52 
-        &:before {
53 
-          background: $color-bg-tertiary;
54 
-        }
55 
-        &:hover {
56 
-          &:before {
57 
-            background: mix($color-bg-tertiary, #fff, 80%);
58 
-          }
59 
-        }
60 
-      }
61 
-    }
62 
-  }
63 
-  &.-alt-color2 {
64 
-    background-color: $color-bg-tertiary;
65 
-  }
66 
-  &.-small > .background-wrapper-helper > .background-wrapper-inner {
67 
-    min-height: 250px;
68 
-  }
69 
-  @media screen and (max-width: 599px) {
70 
-    &.-small > .background-wrapper-helper > .background-wrapper-inner {
71 
-      min-height: 150px;
72 
-    }
73 
-  }
74 
-  &.-medium > .background-wrapper-helper > .background-wrapper-inner {
75 
-    min-height: 450px;
76 
-  }
77 
-  @media screen and (max-width: 599px) {
78 
-    &.-medium > .background-wrapper-helper > .background-wrapper-inner {
79 
-      min-height: 300px;
80 
-    }
81 
-  }
82 
-  &.-large > .background-wrapper-helper > .background-wrapper-inner {
83 
-    min-height: 750px;
84 
-  }
85 
-  @media screen and (max-width: 599px) {
86 
-    &.-large > .background-wrapper-helper > .background-wrapper-inner {
87 
-      min-height: 450px;
88 
-    }
89 
-  }
90 
-
91 
-  &.-background-mousemove,
92 
-  &.-background-mousemove-inverted,
93 
-  &.-background-parallax {
94 
-    overflow: hidden;
95 
-  }
96 
-
97 
-  &.-full-vh > .background-wrapper-helper {
98 
-    min-height: 100vh;
99 
-    display: flex;
100 
-    align-items: stretch;
101 
-    width: 100%;
102 
-    -webkit-box-sizing: border-box;
103 
-    -moz-box-sizing: border-box;
104 
-    box-sizing: border-box;
105 
-
106 
-    > .background-wrapper-inner {
107 
-      width: 100%;
108 
-      //height: 100%;
109 
-      display: flex;
110 
-      flex-direction: column;
111 
-      justify-content: center;
112 
-
113 
-      > * {
114 
-        flex: 1 0 auto;
115 
-      }
116 
-
117 
-      .client-showcase & {
118 
-        > *:last-child {
119 
-          flex: 0 0 auto;
120 
-        }
121 
-      }
122 
-    }
123 
-  }
124 
-
125 
-  &.-full-vh-header > .background-wrapper-helper {
126 
-    height: 90vh;
127 
-    //height: calc(100vh - #{$header-height});
128 
-    //height: 100%;
129 
-    display: table;
130 
-    table-layout: fixed;
131 
-    width: 100%;
132 
-    -webkit-box-sizing: border-box;
133 
-    -moz-box-sizing: border-box;
134 
-    box-sizing: border-box;
135 
-
136 
-    > .background-wrapper-inner {
137 
-      width: 100%;
138 
-      height: 100%;
139 
-      display: table-cell;
140 
-    }
141 
-
142 
-  }
143 
-
144 
-  &.-valign-center > .background-wrapper-helper {
145 
-    display: flex;
146 
-    align-items: center;
147 
-    height: 100%;
148 
-
149 
-    > .background-wrapper-inner {
150 
-      width: 100%;
151 
-      /*flex: 0 0 auto;
152 
-      width: 100%;
153 
-      display: flex;
154 
-      align-items: center;
155 
-      justify-content: center;
156 
-      flex-direction: column;*/
157 
-    }
158 
-  }
159 
-
160 
-  &.-shadow {
161 
-    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
162 
-    -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
163 
-    box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
164 
-  }
165 
-
166 
-  &.-invert {
167 
-    color: $color-text-invert;
168 
-    h1, h2, h3, h4, h5, h6 {
169 
-      color: $color-text-invert;
170 
-    }
171 
-  }
172 
-  &.-text-shadow {
173 
-    text-shadow: 0 0 5px #fff;
174 
-
175 
-    &.-invert {
176 
-      text-shadow: 0 0 5px #000;
177 
-    }
178 
-  }
179 
-
180 
-  &.-bg-restraint,
181 
-  .background-wrapper-helper {
182 
-    @include centered-1200;
183 
-    /*padding-left: $gutter-default/2;
184 
-    padding-right: $gutter-default/2;*/
185 
-  }
186 
-
187 
-  &.-width-expand > .background-wrapper-helper {
188 
-    max-width: none;
189 
-    /*padding-left: 15px;
190 
-    padding-right: 15px;*/
191 
-    .background-wrapper-inner {
192 
-      > .rs-columns {
193 
-        margin-top: -30px;
194 
-
195 
-        > .rs-column {
196 
-          margin-top: 30px;
197 
-        }
198 
-      }
199 
-    }
200 
-  }
201 
-
202 
-  .overlay {
203 
-    position: absolute;
204 
-    top: 0;
205 
-    left: 0;
206 
-    right: 0;
207 
-    bottom: 0;
208 
-    background: rgba(0,0,0,0.8);
209 
-  }
210 
-}
211 
-
212 
-.background-wrapper-background {
213 
-  position: absolute;
214 
-  top: 0;
215 
-  right: 0;
216 
-  bottom: 0;
217 
-  left: 0;
218 
-  overflow: hidden;
219 
-  background: 50% 50% no-repeat;
220 
-  background-size: cover;
221 
-
222 
-  video {
223 
-    /* Change this to `object-fit: cover;` once all browsers support it, */
224 
-    /* see http://stackoverflow.com/a/20851590 */
225 
-    position: absolute;
226 
-    top: 50%;
227 
-    left: 50%;
228 
-    min-width: 100%;
229 
-    min-height: 100%;
230 
-    -webkit-transform: translate(-50%, -50%);
231 
-    -moz-transform: translate(-50%, -50%);
232 
-    -ms-transform: translate(-50%, -50%);
233 
-    -o-transform: translate(-50%, -50%);
234 
-    transform: translate(-50%, -50%);
235 
-  }
236 
-
237 
-  .-background-mousemove > &, .-background-mousemove-inverted > & {
238 
-    right: -12%;
239 
-  }
240 
-}
241 
-
242 
-.background-wrapper-inner {
243 
-  position: relative;
244 
-
245 
-  /*& {
246 
-    @include centered-1200;
247 
-  }*/
248 
-
249 
-  &.-padding {
250 
-    padding: $gutter-default*1.5 0;
251 
-  }
252 
-  &.-medium-padding {
253 
-    padding: 50px 0;
254 
-  }
255 
-  &.-large-padding {
256 
-    padding: 100px 0;
257 
-  }
258 
-
259 
-  &.-padding-top {
260 
-    padding: $gutter-default*1.5 0 0;
261 
-  }
262 
-  &.-medium-padding-top {
263 
-    padding: 50px 0 0;
264 
-  }
265 
-  &.-large-padding-top {
266 
-    padding: 100px 0 0;
267 
-  }
268 
-
269 
-}
270 0 
\ No newline at end of file
Browse code

Initial commit

Benjamin Roth authored on07/11/2022 09:19:06
Showing1 changed files
files/themes/aldegott_2022/assets/css/landingpage/wein/inc/custom-elements.scss
History View file @6e83285
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,269 @@
1 
+@if not-imported("import_once_func") { @import "import_once_func"; }
2 
+@if not-imported("framework") { @import "framework"; }
3 
+/**
4 
+ * Custom Elements
5 
+ */
6 
+
7 
+
8 
+/**
9 
+ * WRAPPER
10 
+ */
11 
+.background-wrapper {
12 
+  zoom: 1;
13 
+  position: relative;
14 
+  clear: both;
15 
+  background: 50% 50% no-repeat;
16 
+  background-size: cover;
17 
+  overflow: hidden;
18 
+
19 
+  &:before {
20 
+    content: "";
21 
+    display: table;
22 
+  }
23 
+  &:after {
24 
+    content: "";
25 
+    display: table;
26 
+    clear: both;
27 
+  }
28 
+  &.-alt-color,
29 
+  &.-alt-color2 {
30 
+    color: $color-text-invert;
31 
+
32 
+    &:not(.-alt-color2)
33 
+    {
34 
+      h1,h2,h3,h4,h5,h6 {
35 
+        color: $color-headline-invert;
36 
+      }
37 
+    }
38 
+  }
39 
+  &.-alt-color {
40 
+    background-color: $color-bg-secondary;
41 
+
42 
+    a {
43 
+      color: $color-bg-tertiary;
44 
+
45 
+      &:hover {
46 
+        color: mix($color-bg-tertiary,#fff,70%);
47 
+      }
48 
+    }
49 
+
50 
+    .ce_text {
51 
+      a[target="_blank"]:not(.button):not(.-ico-dl) {
52 
+        &:before {
53 
+          background: $color-bg-tertiary;
54 
+        }
55 
+        &:hover {
56 
+          &:before {
57 
+            background: mix($color-bg-tertiary, #fff, 80%);
58 
+          }
59 
+        }
60 
+      }
61 
+    }
62 
+  }
63 
+  &.-alt-color2 {
64 
+    background-color: $color-bg-tertiary;
65 
+  }
66 
+  &.-small > .background-wrapper-helper > .background-wrapper-inner {
67 
+    min-height: 250px;
68 
+  }
69 
+  @media screen and (max-width: 599px) {
70 
+    &.-small > .background-wrapper-helper > .background-wrapper-inner {
71 
+      min-height: 150px;
72 
+    }
73 
+  }
74 
+  &.-medium > .background-wrapper-helper > .background-wrapper-inner {
75 
+    min-height: 450px;
76 
+  }
77 
+  @media screen and (max-width: 599px) {
78 
+    &.-medium > .background-wrapper-helper > .background-wrapper-inner {
79 
+      min-height: 300px;
80 
+    }
81 
+  }
82 
+  &.-large > .background-wrapper-helper > .background-wrapper-inner {
83 
+    min-height: 750px;
84 
+  }
85 
+  @media screen and (max-width: 599px) {
86 
+    &.-large > .background-wrapper-helper > .background-wrapper-inner {
87 
+      min-height: 450px;
88 
+    }
89 
+  }
90 
+
91 
+  &.-background-mousemove,
92 
+  &.-background-mousemove-inverted,
93 
+  &.-background-parallax {
94 
+    overflow: hidden;
95 
+  }
96 
+
97 
+  &.-full-vh > .background-wrapper-helper {
98 
+    min-height: 100vh;
99 
+    display: flex;
100 
+    align-items: stretch;
101 
+    width: 100%;
102 
+    -webkit-box-sizing: border-box;
103 
+    -moz-box-sizing: border-box;
104 
+    box-sizing: border-box;
105 
+
106 
+    > .background-wrapper-inner {
107 
+      width: 100%;
108 
+      //height: 100%;
109 
+      display: flex;
110 
+      flex-direction: column;
111 
+      justify-content: center;
112 
+
113 
+      > * {
114 
+        flex: 1 0 auto;
115 
+      }
116 
+
117 
+      .client-showcase & {
118 
+        > *:last-child {
119 
+          flex: 0 0 auto;
120 
+        }
121 
+      }
122 
+    }
123 
+  }
124 
+
125 
+  &.-full-vh-header > .background-wrapper-helper {
126 
+    height: 90vh;
127 
+    //height: calc(100vh - #{$header-height});
128 
+    //height: 100%;
129 
+    display: table;
130 
+    table-layout: fixed;
131 
+    width: 100%;
132 
+    -webkit-box-sizing: border-box;
133 
+    -moz-box-sizing: border-box;
134 
+    box-sizing: border-box;
135 
+
136 
+    > .background-wrapper-inner {
137 
+      width: 100%;
138 
+      height: 100%;
139 
+      display: table-cell;
140 
+    }
141 
+
142 
+  }
143 
+
144 
+  &.-valign-center > .background-wrapper-helper {
145 
+    display: flex;
146 
+    align-items: center;
147 
+    height: 100%;
148 
+
149 
+    > .background-wrapper-inner {
150 
+      width: 100%;
151 
+      /*flex: 0 0 auto;
152 
+      width: 100%;
153 
+      display: flex;
154 
+      align-items: center;
155 
+      justify-content: center;
156 
+      flex-direction: column;*/
157 
+    }
158 
+  }
159 
+
160 
+  &.-shadow {
161 
+    -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
162 
+    -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
163 
+    box-shadow: 0 0 5px 0 rgba(0,0,0,0.9);
164 
+  }
165 
+
166 
+  &.-invert {
167 
+    color: $color-text-invert;
168 
+    h1, h2, h3, h4, h5, h6 {
169 
+      color: $color-text-invert;
170 
+    }
171 
+  }
172 
+  &.-text-shadow {
173 
+    text-shadow: 0 0 5px #fff;
174 
+
175 
+    &.-invert {
176 
+      text-shadow: 0 0 5px #000;
177 
+    }
178 
+  }
179 
+
180 
+  &.-bg-restraint,
181 
+  .background-wrapper-helper {
182 
+    @include centered-1200;
183 
+    /*padding-left: $gutter-default/2;
184 
+    padding-right: $gutter-default/2;*/
185 
+  }
186 
+
187 
+  &.-width-expand > .background-wrapper-helper {
188 
+    max-width: none;
189 
+    /*padding-left: 15px;
190 
+    padding-right: 15px;*/
191 
+    .background-wrapper-inner {
192 
+      > .rs-columns {
193 
+        margin-top: -30px;
194 
+
195 
+        > .rs-column {
196 
+          margin-top: 30px;
197 
+        }
198 
+      }
199 
+    }
200 
+  }
201 
+
202 
+  .overlay {
203 
+    position: absolute;
204 
+    top: 0;
205 
+    left: 0;
206 
+    right: 0;
207 
+    bottom: 0;
208 
+    background: rgba(0,0,0,0.8);
209 
+  }
210 
+}
211 
+
212 
+.background-wrapper-background {
213 
+  position: absolute;
214 
+  top: 0;
215 
+  right: 0;
216 
+  bottom: 0;
217 
+  left: 0;
218 
+  overflow: hidden;
219 
+  background: 50% 50% no-repeat;
220 
+  background-size: cover;
221 
+
222 
+  video {
223 
+    /* Change this to `object-fit: cover;` once all browsers support it, */
224 
+    /* see http://stackoverflow.com/a/20851590 */
225 
+    position: absolute;
226 
+    top: 50%;
227 
+    left: 50%;
228 
+    min-width: 100%;
229 
+    min-height: 100%;
230 
+    -webkit-transform: translate(-50%, -50%);
231 
+    -moz-transform: translate(-50%, -50%);
232 
+    -ms-transform: translate(-50%, -50%);
233 
+    -o-transform: translate(-50%, -50%);
234 
+    transform: translate(-50%, -50%);
235 
+  }
236 
+
237 
+  .-background-mousemove > &, .-background-mousemove-inverted > & {
238 
+    right: -12%;
239 
+  }
240 
+}
241 
+
242 
+.background-wrapper-inner {
243 
+  position: relative;
244 
+
245 
+  /*& {
246 
+    @include centered-1200;
247 
+  }*/
248 
+
249 
+  &.-padding {
250 
+    padding: $gutter-default*1.5 0;
251 
+  }
252 
+  &.-medium-padding {
253 
+    padding: 50px 0;
254 
+  }
255 
+  &.-large-padding {
256 
+    padding: 100px 0;
257 
+  }
258 
+
259 
+  &.-padding-top {
260 
+    padding: $gutter-default*1.5 0 0;
261 
+  }
262 
+  &.-medium-padding-top {
263 
+    padding: 50px 0 0;
264 
+  }
265 
+  &.-large-padding-top {
266 
+    padding: 100px 0 0;
267 
+  }
268 
+
269 
+}
0 270 
\ No newline at end of file