From ad97722b1b35aff50d0adf13a19715f7b8373c07 Mon Sep 17 00:00:00 2001
From: Richard Sassine <richardsassine@tutanota.com>
Date: Tue, 4 May 2021 18:00:38 +0300
Subject: initial commit

---
 .../src/old_snippets/s_animated_boxes/000.scss     | 77 ++++++++++++++++++++++
 1 file changed, 77 insertions(+)
 create mode 100644 theme_common/static/src/old_snippets/s_animated_boxes/000.scss

(limited to 'theme_common/static/src/old_snippets/s_animated_boxes/000.scss')

diff --git a/theme_common/static/src/old_snippets/s_animated_boxes/000.scss b/theme_common/static/src/old_snippets/s_animated_boxes/000.scss
new file mode 100644
index 0000000..00bc21b
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_animated_boxes/000.scss
@@ -0,0 +1,77 @@
+
+#wrapwrap .s_animated_boxes{
+    margin: 0;
+    width: 100%;
+    overflow: hidden;
+
+    .item {
+        height: 200px;
+        background-size: cover;
+        overflow: hidden;
+        text-align: center;
+
+        > * {
+            z-index: 0;
+            position: relative;
+            padding-top: $grid-gutter-width/2;
+            padding-bottom: $grid-gutter-width/2;
+        }
+        .slide {
+            z-index: 1;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            background-size: cover;
+            left: 0;
+            top: 0;
+            opacity: 0;
+            padding: $grid-gutter-width/2;
+            transition: opacity 400ms;
+
+            &.visible{
+                opacity: 1;
+            }
+        }
+        &:hover .slide{
+            opacity: 1;
+            transition: opacity 100ms;
+        }
+
+        @include media-breakpoint-down(sm) {
+            height: auto;
+            min-height: 200px;
+
+            &::before {
+                content: "";
+                display: inline-block;
+                height: 100%;
+                min-height: 200px;
+                vertical-align: middle;
+            }
+
+            .v-align {
+                display: inline-block;
+                width: 98%;
+                vertical-align: middle;
+
+                top: auto;
+                transform: translate(0, 0);
+            }
+        }
+    }
+}
+
+// Used in editing mode
+body.editor_enable .s_animated_boxes {
+    .item:hover .slide {
+        display: none;
+        opacity: 0;
+    }
+
+    .item.showSlide .slide, .item.showSlide:hover .slide {
+        display: block;
+        opacity: 1;
+        transform: translateY(0%)!important;
+        transform: translateX(0%)!important;
+    }
+}
-- 
cgit v1.2.3