eSales Media Git repositories
Browse code

Update

Benjamin Roth authored on17/03/2023 09:52:56
Showing1 changed files
files/base/layout/css/elements/custom-elements/ce_rsce_extendedimagecolumns.scss
History View file @7812883
1 1 
new file mode 100644
... ... 
@@ -0,0 +1,201 @@
1 
+@import "../../variables-layout";
2 
+
3 
+@import "../../../_vendor/node_modules/bootstrap/scss/functions";
4 
+@import "../../../_vendor/node_modules/bootstrap/scss/variables";
5 
+@import "../../../_vendor/node_modules/bootstrap/scss/mixins";
6 
+@import "../../scaffolding/hacks";
7 
+@import "../../scss-variables";
8 
+@import "../../_theme/variables-layout";
9 
+
10 
+html body {
11 
+  .ce_rsce_extendedimagecolumns {
12 
+    margin-bottom: $basic-gutter;
13 
+
14 
+    .row {
15 
+      > div.col-md-6 {
16 
+        margin-bottom: $basic-gutter;;
17 
+
18 
+        &:nth-child(even) {
19 
+          @include media-breakpoint-up(md) {
20 
+            .box--image-overflow-wrapper {
21 
+              left: 0;
22 
+
23 
+              .box--image {
24 
+                left: 0;
25 
+              }
26 
+            }
27 
+          }
28 
+
29 
+          .box--content {
30 
+            @include media-breakpoint-up(md) {
31 
+              padding: 1rem 2rem;
32 
+              margin-right: auto;
33 
+            }
34 
+          }
35 
+        }
36 
+
37 
+        &:nth-child(odd) {
38 
+          @include media-breakpoint-up(md) {
39 
+            .box--image-overflow-wrapper {
40 
+              right: 0;
41 
+
42 
+              .box--image {
43 
+                right: 0;
44 
+              }
45 
+            }
46 
+          }
47 
+
48 
+          .box--content {
49 
+            @include media-breakpoint-up(md) {
50 
+              padding: 1rem 2rem;
51 
+              margin-left: auto;
52 
+            }
53 
+          }
54 
+        }
55 
+      }
56 
+
57 
+      > div:not(.col-md-6) {
58 
+        .box--image-holder {
59 
+
60 
+          .box--image-overflow-wrapper {
61 
+            @extend %make-fullwidth;
62 
+
63 
+            .box--image {
64 
+
65 
+            }
66 
+          }
67 
+
68 
+
69 
+        }
70 
+
71 
+        .box--content {
72 
+          max-width: rfs-value(650px);
73 
+        }
74 
+      }
75 
+
76 
+      > div:not(:last-child) {
77 
+        @include media-breakpoint-down(md) {
78 
+          margin-bottom: 3rem;
79 
+        }
80 
+      }
81 
+    }
82 
+
83 
+
84 
+    .row {
85 
+      > div:nth-child(even) {
86 
+        video {
87 
+          margin-right: auto;
88 
+        }
89 
+      }
90 
+
91 
+      > div:nth-child(odd) {
92 
+        video {
93 
+          margin-left: auto;
94 
+        }
95 
+      }
96 
+    }
97 
+
98 
+
99 
+    .box--image-holder {
100 
+      min-height: rfs-fluid-value(350px);
101 
+      position: relative;
102 
+
103 
+      @include media-breakpoint-up(xxl) {
104 
+        min-height: rfs-value(450px);
105 
+      }
106 
+
107 
+      .background-holder {
108 
+        position: absolute;
109 
+        z-index: -1;
110 
+        height: 100%;
111 
+        width: 50vw;
112 
+        display: block;
113 
+        right: 0;
114 
+        top: 0;
115 
+      }
116 
+
117 
+      &.is-video--holder {
118 
+        display: flex;
119 
+        flex-flow: row wrap;
120 
+        align-items: center;
121 
+        line-height: 0;
122 
+
123 
+        video {
124 
+          //width: auto;
125 
+        }
126 
+      }
127 
+
128 
+      .box--image-overflow-wrapper {
129 
+        overflow: hidden;
130 
+        max-height: 100%;
131 
+
132 
+
133 
+        &:not(.is-video--wrapper) {
134 
+          width: calc(50vw - calc(var(--bs-gutter-x) * .4));
135 
+          position: absolute;
136 
+
137 
+
138 
+          @include media-breakpoint-down(md) {
139 
+            width: 100vw;
140 
+            position: relative;
141 
+            left: 50%;
142 
+            right: 50%;
143 
+            margin-left: -50vw;
144 
+            margin-right: -50vw;
145 
+          }
146 
+        }
147 
+
148 
+
149 
+        .box--image {
150 
+          transition: all 0.3s ease-in-out;
151 
+
152 
+
153 
+          &:not(.is-video) {
154 
+            min-height: rfs-fluid-value(350px);
155 
+
156 
+            @include media-breakpoint-up(xxl) {
157 
+              min-height: rfs-value(450px);
158 
+            }
159 
+
160 
+            &:hover {
161 
+              transform: scale(1.05, 1.05);
162 
+            }
163 
+          }
164 
+        }
165 
+      }
166 
+    }
167 
+
168 
+    .box--content {
169 
+      max-width: rfs-value(400px);
170 
+      text-align: center;
171 
+      margin: -3rem auto 0 auto;
172 
+      transition: background-color .3s ease;
173 
+      position: relative;
174 
+
175 
+      &:not(.as-box) {
176 
+        background-color: var(--bs-body-bg);
177 
+      }
178 
+
179 
+
180 
+      &.as-box {
181 
+        .headline--wrapper {
182 
+          background-color: $body-bg;
183 
+          color: var(--bs-body-color);
184 
+          box-shadow: $box-shadow;
185 
+          padding: 1.5rem 2rem;
186 
+          text-align: center;
187 
+          display: inline-block;
188 
+
189 
+          > * {
190 
+            margin: 0px;
191 
+          }
192 
+        }
193 
+      }
194 
+
195 
+      .headline--wrapper {
196 
+        margin-bottom: 2rem;
197 
+      }
198 
+    }
199 
+
200 
+  }
201 
+}
0 202 
\ No newline at end of file