Browse code

Progress live

Benjamin Roth authored on12/12/2022 10:57:09
Showing3 changed files
... ...
@@ -1724,6 +1724,22 @@ $shadow-color: #fff;
1724 1724
   flex-direction: column;
1725 1725
   justify-content: flex-start;
1726 1726
 
1727
+  &.-alt-color {
1728
+    background-color: $color-bg-lightplatin;
1729
+  }
1730
+  &.-alt-color2 {
1731
+    background-color: $color-bg-footer;
1732
+
1733
+    &,
1734
+    h1,h2,h3,h4,h5,h6 {
1735
+      color: $color-text-footer;
1736
+
1737
+    }
1738
+  }
1739
+  &.-alt-color3 {
1740
+    background-color: $color-bg-footer2;
1741
+  }
1742
+
1727 1743
   &.-valign-center {
1728 1744
     justify-content: center;
1729 1745
   }
... ...
@@ -1889,4 +1905,31 @@ $shadow-color: #fff;
1889 1905
       font-size: font-size(50px);
1890 1906
     }
1891 1907
   }
1908
+
1909
+  &.is-animated {
1910
+    .media-col,
1911
+    .content-col {
1912
+      opacity: 0;
1913
+      visibility: hidden;
1914
+      @include transition(opacity 0.6s 0.25s linear, transform 0.6s 0.25s ease-out);
1915
+    }
1916
+    .media-col {
1917
+      @include transform(translate3d(0,50px,0));
1918
+    }
1919
+    .content-col {
1920
+      @include transform(translate3d(50px,0,0));
1921
+      .-text-left& {
1922
+        @include transform(translate3d(-50px,0,0));
1923
+      }
1924
+    }
1925
+
1926
+    &.-in-view {
1927
+      .media-col,
1928
+      .content-col {
1929
+        opacity: 1;
1930
+        visibility: visible;
1931
+        @include transform(translate3d(0,0,0));
1932
+      }
1933
+    }
1934
+  }
1892 1935
 }
... ...
@@ -4,6 +4,9 @@ $cssClasses = array(
4 4
     'feature-wrapper_' . $this->id,
5 5
     $this->class,
6 6
 );
7
+if ($this->colorVariation) {
8
+    $cssClasses[] = $this->colorVariation;
9
+}
7 10
 if ($this->contentPosition)
8 11
 {
9 12
     $cssClasses[] = $this->contentPosition;
... ...
@@ -160,6 +160,17 @@ return array(
160 160
             ),
161 161
             'eval' => array('tl_class' => 'w50'),
162 162
         ),
163
+        'colorVariation' => array(
164
+            'label' => array('Vordefinierte Hintergrundfarbe', 'Eine der vordefinierten Farben als Hintergrund verwenden. Die Farben lassen sich mit dem Theme Assistant, CSS oder Sass anpassen.'),
165
+            'inputType' => 'select',
166
+            'options' => array(
167
+                '' => '-',
168
+                '-alt-color' => 'Leichtes Platin',
169
+                '-alt-color2' => 'Footer',
170
+                '-alt-color3' => 'Footer-Alternativ',
171
+            ),
172
+            'eval' => array('tl_class' => 'w50'),
173
+        ),
163 174
         'viewportHeight' => array(
164 175
             'label' => array('Mind. Viewport Höhe', 'Der Inhaltsbereich hat mindestens die Höhe des Viewports. Der Inhalt wird zentriert dargestellt.'),
165 176
             'inputType' => 'checkbox',