| ... | ... |
@@ -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 |
} |
| ... | ... |
@@ -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', |