2 files changed, 92 insertions, 0 deletions
diff --git a/theme_common/static/src/old_snippets/s_animated_boxes/000.js b/theme_common/static/src/old_snippets/s_animated_boxes/000.js
new file mode 100644
index 0000000..ec39eab
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_animated_boxes/000.js
@@ -0,0 +1,15 @@
+odoo.define('theme_common.s_animated_boxes_frontend', function (require) {
+    'use strict';
+
+var publicWidget = require('web.public.widget');
+
+/**
+ * This is a fix for some apple devices.
+ * The slide of animated boxes widget is shown on hover or click on mobile
+ * devices, but iOS only activates :hover if the element targeted is
+ * clickable.
+ */
+publicWidget.registry._fixAnimatedBoxesAppleClick = publicWidget.registry._fixAppleCollapse.extend({
+    selector: '.s_animated_boxes .item',
+});
+});
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;
+    }
+}