initial commit

62 files changed, 4836 insertions, 0 deletions

diff --git a/theme_common/static/src/js/compatibility_editor.js b/theme_common/static/src/js/compatibility_editor.js
new file mode 100644
index 0000000..0f3aeb3
--- /dev/null
+++ b/theme_common/static/src/js/compatibility_editor.js
@@ -0,0 +1,19 @@
+odoo.define('theme_common.compatibility_editor', function (require) {
+'use strict';
+
+var sOptions = require('web_editor.snippets.options');
+
+sOptions.registry.BackgroundImage.include({
+    /**
+     * @override
+     */
+    background: function (previewMode, widgetValue, params) {
+        this._super.apply(this, arguments);
+
+        var customClass = this.$target.attr('class').match(/\b(bg-img-\d+)\b/);
+        if (customClass) {
+            this.$target.removeClass(customClass[1]);
+        }
+    },
+});
+});
diff --git a/theme_common/static/src/js/preheader.js b/theme_common/static/src/js/preheader.js
new file mode 100644
index 0000000..7c1e8e2
--- /dev/null
+++ b/theme_common/static/src/js/preheader.js
@@ -0,0 +1,115 @@
+odoo.define('theme_common.preheader', function (require) {
+'use strict';
+
+var publicWidget = require('web.public.widget');
+require('website.content.menu');
+
+publicWidget.registry.StandardAffixedHeader.include({
+    /**
+     * @override
+     */
+    start: function () {
+        this.$preheader = this.$el.find('#o_theme_preheader');
+        this.preheaderVisible = this.$preheader.css('display') !== 'none';
+        return this._super.apply(this, arguments);
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this.$el.find('#o_theme_preheader').show();
+        return this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _updateHeaderOnScroll: function (scrollTop) {
+        var def = this._super.apply(this, arguments);
+        if (this.preheaderVisible) {
+            if (this.$el.hasClass('o_header_is_scrolled')) {
+                this.$el.find('#o_theme_preheader').hide();
+            } else {
+                this.$el.find('#o_theme_preheader').show(200);
+            }
+        }
+        return def;
+    }
+});
+publicWidget.registry.FixedHeader.include({
+    /**
+     * @override
+     */
+    start: function () {
+        this.$preheader = this.$el.find('#o_theme_preheader');
+        this.preheaderVisible = this.$preheader.css('display') !== 'none';
+        return this._super.apply(this, arguments);
+    },
+    /**
+     * @override
+     */
+    destroy: function () {
+        this.$el.css('transform', '');
+        return this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _updateHeaderOnScroll: function (scrollTop) {
+        var def = this._super.apply(this, arguments);
+        if (this.preheaderVisible) {
+            if (this.$el.hasClass('o_header_is_scrolled')) {
+                if (!this.$el.hasClass('o_header_disappears') && !this.$el.hasClass('o_header_fade_out')) {
+                    const preheaderHeight = this.$el.find('#o_theme_preheader').outerHeight();
+                    this.$el.css('transform', 'translate(0, -' + preheaderHeight + 'px)');
+                }
+            } else {
+                this.$el.css('transform', '');
+            }
+        }
+        return def;
+    }
+});
+
+const BaseDisappearingPreheader = {
+    /**
+     * @override
+     */
+    start: function () {
+        this.$preheader = this.$el.find('#o_theme_preheader');
+        this.preheaderVisible = this.$preheader.css('display') !== 'none';
+        return this._super.apply(this, arguments);
+    },
+
+    //--------------------------------------------------------------------------
+    // Private
+    //--------------------------------------------------------------------------
+
+    /**
+     * @override
+     */
+    _showHeader: function () {
+        var def = this._super.apply(this, arguments);
+        if (this.preheaderVisible) {
+            const preheaderHeight = this.$preheader.outerHeight();
+            if (this.$el.hasClass('o_header_is_scrolled')) {
+                this.$el.css('transform', 'translate(0, -' + preheaderHeight + 'px)');
+            }
+        }
+        return def;
+    }
+};
+
+publicWidget.registry.DisappearingHeader.include(BaseDisappearingPreheader);
+publicWidget.registry.FadeOutHeader.include(BaseDisappearingPreheader);
+
+});
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;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_banner_parallax/000.scss b/theme_common/static/src/old_snippets/s_banner_parallax/000.scss
new file mode 100644
index 0000000..b651dbc
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_banner_parallax/000.scss
@@ -0,0 +1,55 @@
+$s-banner-parallax-text-color: o-color('alpha') !default;
+
+#wrapwrap .s_banner_parallax {
+    margin-bottom: 0px !important;
+
+    @include media-breakpoint-down(sm) {
+        background-position: $s-banner-parallax-bg-position;
+    }
+    @include s-banner-parallax-height-hook;
+
+    .container-fluid {
+
+        .row {
+            height: $s-banner-parallax-height;
+            @include s-banner-parallax-row-hook;
+
+            .hero-bg {
+                padding-left: $s-banner-parallax-padding;
+                color: $s-banner-parallax-text-color;
+                @include s-banner-parallax-hero-bg-hook;
+
+                @include media-breakpoint-down(sm) {
+                    text-align: center;
+                    padding-left: 15px;
+                }
+
+                h1 {
+                    font-size: $s-banner-parallax-h1-size;
+                    text-shadow: $s-banner-parallax-text-shadow;
+
+                    @media screen and (max-width: 360px) { // FIXME
+                        font-size: 50px;
+                    }
+                }
+
+                h2 {
+                    font-size: 40px;
+                    text-shadow: $s-banner-parallax-text-shadow;
+
+                    @media screen and (max-width: 360px) { // FIXME
+                        font-size: 30px;
+                    }
+                }
+
+                img {
+                    max-height: $s-banner-parallax-img-height;
+
+                    @media screen and (max-width: 360px) { // FIXME
+                        max-height: 200px;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_banner_parallax/000_variables.scss b/theme_common/static/src/old_snippets/s_banner_parallax/000_variables.scss
new file mode 100644
index 0000000..1515989
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_banner_parallax/000_variables.scss
@@ -0,0 +1,11 @@
+$s-banner-parallax-height: 500px;
+$s-banner-parallax-padding: 130px;
+$s-banner-parallax-img-height: 200px;
+$s-banner-parallax-text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86);
+$s-banner-parallax-text-color: null;
+$s-banner-parallax-bg-position: center !important;
+$s-banner-parallax-h1-size: 80px;
+
+@mixin s-banner-parallax-row-hook {}
+@mixin s-banner-parallax-height-hook {}
+@mixin s-banner-parallax-hero-bg-hook {}
diff --git a/theme_common/static/src/old_snippets/s_big_icons/000.scss b/theme_common/static/src/old_snippets/s_big_icons/000.scss
new file mode 100644
index 0000000..b1e5fc4
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_big_icons/000.scss
@@ -0,0 +1,42 @@
+.s_big_icons {
+    text-align: center;
+    @include s-big-icon-circle-height-hook;
+    //fix -- without this in mobile view the circles go to the top and so they hide the h2 and h3 above it.
+    .col-lg-12 {
+        float: none;
+    }
+}
+
+.s_big_icons_box {
+    text-align: center;
+    width: 150px;
+    margin: 0 auto;
+    .fa {
+        color: #fff;
+        font-size: 40px;
+        @include s-big-icon-circle-fa-hook;
+    }
+}
+
+.s_big_icons_icon {
+    width: $s-big-icon-circle-icon-size;
+    height: $s-big-icon-circle-icon-size;
+    text-align: center;
+    padding: 40px 0;
+    transition: all 0.3s ease-in-out;
+    border-radius: 80px;
+    margin: 0px auto;
+    h5 {
+        margin-top: 48px;
+    }
+}
+
+.s_big_icons_box:hover .s_big_icons_icon {
+    transition: all 0.3s ease-in-out;
+    background-color: o-color('gamma');
+}
+
+.s_big_icons_box:hover .s_big_icons_content h4 {
+    transition: all 0.3s ease-in-out;
+    color: o-color('gamma');
+}
diff --git a/theme_common/static/src/old_snippets/s_big_icons/000_variables.scss b/theme_common/static/src/old_snippets/s_big_icons/000_variables.scss
new file mode 100644
index 0000000..828f6a4
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_big_icons/000_variables.scss
@@ -0,0 +1,23 @@
+$s-big-icon-circle-icon-size: 120px;
+
+@mixin s-big-icon-circle-height-hook {}
+@mixin s-big-icon-circle-fa-hook {}
+
+@mixin o-theme-chd-big-icons-classes($border, $font-color) {
+    .s_big_icons_box {
+        .s_big_icons_icon {
+            border: $border;
+            color: #fff;
+            .fa {
+                color: o-color('alpha') !important;
+            }
+            h5.o_default_snippet_text {
+                color: $font-color;
+                margin-top: 20px;
+            }
+        }
+        &:hover .s_big_icons_icon {
+            @include o-theme-chd-big-icons-styles($h5-color: o-color('alpha'));
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_big_image/000.scss b/theme_common/static/src/old_snippets/s_big_image/000.scss
new file mode 100644
index 0000000..01244e8
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_big_image/000.scss
@@ -0,0 +1,13 @@
+#wrapwrap .s_big_image {
+    height: 760px;
+    background-size: cover;
+}
+
+#wrapwrap .s_big_image_content {
+    z-index: 999;
+    h1 {
+        color: white;
+        font-size: 60px;
+
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_big_image_parallax/000.scss b/theme_common/static/src/old_snippets/s_big_image_parallax/000.scss
new file mode 100644
index 0000000..f97c5c3
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_big_image_parallax/000.scss
@@ -0,0 +1,12 @@
+#wrapwrap .s_big_image_parallax {
+    min-height: 780px;
+    padding-top: 80px;
+}
+
+#wrapwrap .s_big_image_parallax_content {
+    z-index: 999;
+    h1 {
+        color: white;
+        font-size: 60px;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_clonable_boxes/000.scss b/theme_common/static/src/old_snippets/s_clonable_boxes/000.scss
new file mode 100644
index 0000000..b1dbcaf
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_clonable_boxes/000.scss
@@ -0,0 +1,34 @@
+
+#wrapwrap .s_clonable_boxes {
+    width: 100%;
+    height: auto!important; // Force height to avoid overlaps
+
+    .row {
+        display: flex;
+        flex-flow: row wrap;
+
+        > div {
+            display: flex;
+            flex-flow: column wrap;
+            justify-content: center;
+            text-align: center;
+            padding-top: $grid-gutter-width/2;
+            padding-bottom: $grid-gutter-width/2;
+
+            @include media-breakpoint-down(md) {
+                width: 100%;
+            }
+        }
+    }
+}
+
+html[data-no-flex] .s_clonable_boxes {
+    width: 100%;
+    overflow: hidden;
+
+    .item {
+        height: 200px;
+        overflow: hidden;
+        text-align: center;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_color_blocks_4/000.scss b/theme_common/static/src/old_snippets/s_color_blocks_4/000.scss
new file mode 100644
index 0000000..5075141
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_color_blocks_4/000.scss
@@ -0,0 +1,25 @@
+#wrapwrap .s_color_blocks_4 {
+    .row {
+        display: flex;
+        flex-flow: row wrap;
+
+        // Fix for safari browser as it 'supports' flex but not with the right
+        // behavior
+        &::before, &::after {
+            width: 0;
+        }
+    }
+    [class*="col-lg-"] {
+        padding: 64px 20px;
+    }
+    @include media-breakpoint-down(md) {
+        [class*="col-lg-"] {
+            flex: 1 1 100%;
+        }
+    }
+
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_color_blocks_img/000.scss b/theme_common/static/src/old_snippets/s_color_blocks_img/000.scss
new file mode 100644
index 0000000..011f7e4
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_color_blocks_img/000.scss
@@ -0,0 +1,13 @@
+
+#wrapwrap .s_color_blocks_img_title {
+    margin-bottom: 0px;
+    h5 {
+        padding-top: 32px;
+    }
+}
+
+#wrapwrap .s_color_blocks_img_img img {
+    max-width: 100%;
+    height: auto;
+
+}
diff --git a/theme_common/static/src/old_snippets/s_compact_menu/000.scss b/theme_common/static/src/old_snippets/s_compact_menu/000.scss
new file mode 100644
index 0000000..68eea85
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_compact_menu/000.scss
@@ -0,0 +1,37 @@
+#wrapwrap .s_compact_menu {
+    overflow: hidden;
+
+    .container-fluid .menu-container {
+        overflow: hidden;
+
+        > div {
+            &.s_compact_menu_row_title {
+                h4 {
+                    font-size: 20px;
+                }
+                .fa {
+                    margin: 20px 0px;
+                }
+            }
+
+            > .row {
+                min-height: 150px;
+                height: auto;
+                border-left: 3px solid gray('200');
+
+                > .menublock {
+                    margin: 0 0 0 20px;
+                    padding: 0 20px 0 0;
+                    border-bottom: 1px solid gray('200');
+                    float: left;
+                    h4 {
+                        font-weight: bold;
+                    }
+                    span {
+                        list-style: none;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_css_slider/000.js b/theme_common/static/src/old_snippets/s_css_slider/000.js
new file mode 100644
index 0000000..99d225c
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_css_slider/000.js
@@ -0,0 +1,122 @@
+odoo.define('theme_common.s_css_slider_frontend', function (require) {
+    'use strict';
+
+    var publicWidget = require('web.public.widget');
+
+    publicWidget.registry.s_css_slider = publicWidget.Widget.extend({
+        selector: ".s_css_slider",
+        disabledInEditableMode: false,
+
+        start: function () {
+            var self = this;
+            var $container = self.$target;
+            $container.find(".s_css_slider_pagination").remove();
+            // create slider pagination
+            var sliderPagination = self.createSliderPagination($container);
+            self.bindEvents($container, sliderPagination);
+            $(window).on("resize", function () {
+                self.resizeImgs($container);
+            }).trigger("resize");
+            return this._super.apply(this, arguments);
+        },
+
+        bindEvents: function ($container, sliderPagination) {
+            var self      = this,
+                $next_btn = $container.find('.next'),
+                $prev_btn = $container.find('.prev');
+
+            $next_btn.on('click.s_css', function (e) {
+                self.nextSlide($container, sliderPagination);
+            });
+
+            $prev_btn.on('click.s_css', function (e) {
+                self.prevSlide($container, sliderPagination);
+            });
+
+            if ($container.hasClass("autoplay") && this.editableMode !== true) {
+                var interval;
+                var autoplay = function () {
+                    interval = setInterval(function () {
+                        if (!$next_btn.hasClass("inactive")) {
+                            self.nextSlide($container, sliderPagination);
+                        } else {
+                            self.prevSlide($container, sliderPagination, 0);
+                        }
+                    }, 3000);
+                };
+                autoplay();
+                $container.hover(function () { clearInterval(interval); });
+                $container.mouseleave(function () { autoplay(); });
+            }
+
+            sliderPagination.on('click.s_css', function () {
+                var selectedDot = $(this);
+                if (!selectedDot.hasClass('selected')) {
+                    var selectedPosition = selectedDot.index(),
+                            activePosition = $container.find('.slider .selected').index();
+                    if ( activePosition < selectedPosition) {
+                        self.nextSlide($container, sliderPagination, selectedPosition);
+                    } else {
+                        self.prevSlide($container, sliderPagination, selectedPosition);
+                    }
+                }
+            });
+        },
+
+        resizeImgs: function ($container) {
+            var cont_h = $container.height(),
+                imgs   = $container.find(".slide img");
+
+            imgs.each(function () {
+                var $img  = $(this),
+                    img_h = $img.height();
+                if (img_h > cont_h) {
+                    $img.css("width", "100%");
+                    $img.css("margin-top", (cont_h - img_h)/2);
+                }
+            });
+        },
+
+        createSliderPagination: function ($container) {
+            var wrapper = $('<ul class="s_css_slider_pagination"></ul>').insertAfter($container.find('.navigation'));
+            $container.find('.slider .slide').each(function (index) {
+                var dotWrapper = (index === 0) ? $('<li class="selected"></li>') : $('<li></li>'),
+                    dot = $('<a href="#0"></a>').appendTo(dotWrapper);
+                dotWrapper.appendTo(wrapper);
+                dot.text(index+1);
+            });
+            return wrapper.children('li');
+        },
+
+        nextSlide: function ($container, $pagination, $n) {
+            var self = this,
+                visibleSlide = $container.find('.slider .selected'),
+                navigationDot = $container.find('.s_css_slider_pagination .selected');
+
+            if (typeof $n === 'undefined') $n = visibleSlide.index() + 1;
+            visibleSlide.removeClass('selected');
+            $container.find('.slider .slide').eq($n).addClass('selected').prevAll().addClass('move-left');
+            navigationDot.removeClass('selected');
+            $pagination.eq($n).addClass('selected');
+            self.updateNavigation($container, $container.find('.slider .slide').eq($n));
+        },
+
+        prevSlide: function ($container, $pagination, $n) {
+            var self = this,
+                visibleSlide  = $container.find('.slider .selected'),
+                navigationDot = $container.find('.s_css_slider_pagination .selected');
+
+            if (typeof $n === 'undefined') $n = visibleSlide.index() - 1;
+            visibleSlide.removeClass('selected');
+            $container.find('.slider .slide').eq($n).addClass('selected').removeClass('move-left').nextAll().removeClass('move-left');
+            navigationDot.removeClass('selected');
+            $pagination.eq($n).addClass('selected');
+            self.updateNavigation($container, $container.find('.slider .slide').eq($n));
+        },
+
+        updateNavigation: function ($container, $active) {
+            $container.find('.prev').toggleClass('inactive', $active.is(':first-child'));
+            $container.find('.next').toggleClass('inactive', $active.is(':last-child'));
+        },
+    });
+});
diff --git a/theme_common/static/src/old_snippets/s_css_slider/000.scss b/theme_common/static/src/old_snippets/s_css_slider/000.scss
new file mode 100644
index 0000000..3fdc00f
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_css_slider/000.scss
@@ -0,0 +1,153 @@
+
+#wrapwrap .s_css_slider {
+    position: relative;
+    min-height: 150px;
+
+    .wrapper {
+        height: 100%;
+        position: relative;
+        z-index: 10;
+        transition: width 400ms;
+        /* Force Hardware Acceleration */
+        transform: translateZ(0);
+        backface-visibility: hidden;
+
+        @include s-css-slider-wrapper-hook;
+    }
+
+    .slider{
+        padding: 0;
+        height: 100%;
+        position: relative;
+        z-index: 10;
+        overflow: hidden;
+        @include s-css-slider-slider-hook;
+    }
+
+    .slider .slide {
+        position: absolute;
+        list-style: none;
+        overflow: hidden;
+        top:0;
+        left:0;
+        margin: 0;
+        z-index: 10;
+        height: 100%;
+        width: 100%;
+        transform: translate(100%, 0);
+        transition: transform 300ms linear;
+        .info {
+            position: relative;
+            margin: 0;
+
+            &:not([class*=bg-]) {
+                color : $s-css-slider-info-text-color;
+                background-color : $s-css-slider-info-bg-color;
+            }
+
+            @include media-breakpoint-up(md) {
+                padding: $grid-gutter-width;
+                padding-top: $grid-gutter-width*0.5;
+                @include o-position-absolute(30%, $left: 60px);
+                max-width: 60%;
+            }
+        }
+        img {
+            display:block;
+            width:100%;
+
+            // Fix the image size on some devices (e.g. iPhone X)
+            @media screen and (max-width: 400px) {
+                // The image height was greater than the container height
+                height: 100%;
+
+                // Necessary if we don't want images of different sizes
+                // see resizeImgs() in s_css_slider_frontend.js
+                margin-top: 0 !important;
+            }
+        }
+        &.selected {
+            position:relative;
+            z-index:12;
+            transform: translate(0, 0);
+        }
+        &.move-left {
+            transform: translate(-100%, 0);
+        }
+    }
+    .navigation li {
+        position:absolute;
+        z-index:12;
+        top:50%;
+        list-style:none;
+        bottom:auto;
+        transform: translate(0, -50%);
+
+        span {
+            display: block;
+            width: 48px;
+            height: 48px;
+            overflow: hidden;
+            font-size: 1.6em;
+            color: $s-css-slider-navigation-color;
+            text-shadow: $s-css-slider-navigation-text-shadow;
+            white-space: nowrap;
+            transition: e("opacity 200ms, visibility 0s");
+
+            @include s-css-slider-navigation-buttons-hook;
+
+            &.inactive {
+                opacity:0;
+                visibility:hidden;
+                transition: e("opacity 200ms 0s, visibility 0s 200ms");
+            }
+            &:hover {
+                opacity:.7;
+            }
+        }
+        &:first-of-type {
+            left:10px;
+        }
+        &:last-of-type {
+            right:10px;
+        }
+
+        @include s-css-slider-navigation-hook;
+    }
+
+    .s_css_slider_pagination {
+        position:absolute;
+        padding: 0;
+        z-index: 12;
+        bottom: 30px;
+        left: 50%;
+        right:auto;
+        transform: translate(-50%, 0);
+
+        li {
+            display:inline-block;
+            float:left;
+            margin:0 5px;
+        }
+        li.selected a {
+            background:#f5f4f3;
+        }
+        a {
+            display:block;
+            height:12px;
+            width:12px;
+            border-radius:50%;
+            box-shadow: 0 1px 0 #333;
+            border:1px solid #f5f4f3;
+            background-color:rgba(255,255,255,0);
+            overflow:hidden;
+            text-indent:100%;
+            white-space:nowrap;
+        }
+        &:after {
+            content:"";
+            display:table;
+            clear:both;
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_css_slider/000_variables.scss b/theme_common/static/src/old_snippets/s_css_slider/000_variables.scss
new file mode 100644
index 0000000..aa8ae79
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_css_slider/000_variables.scss
@@ -0,0 +1,10 @@
+$s-css-slider-navigation-color: white;
+$s-css-slider-navigation-text-shadow: 0 1px 0 #333;
+$s-css-slider-info-bg-color: #fff;
+$s-css-slider-info-text-color: #333;
+
+@mixin s-css-slider-wrapper-hook {}
+@mixin s-css-slider-slider-hook {}
+@mixin s-css-slider-slider-hover-hook {}
+@mixin s-css-slider-navigation-hook {}
+@mixin s-css-slider-navigation-buttons-hook {}
diff --git a/theme_common/static/src/old_snippets/s_discount/000.scss b/theme_common/static/src/old_snippets/s_discount/000.scss
new file mode 100644
index 0000000..b50b1e1
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_discount/000.scss
@@ -0,0 +1,99 @@
+
+#wrapwrap .s_discount_box {
+    background: white;
+    padding: 30px 0;
+    border-radius: $s-discount-box-border-radius;
+    position: relative;
+    box-shadow: 0px 0px 5px 0px rgba(gray('700'), 0.5);
+    word-wrap: break-word;
+
+    &:before {
+        content: " ";
+        height: 20px;
+        width: 20px;
+        background: white;
+        border-radius: 20px;
+        position: absolute;
+        left: 50%;
+        top: 20px;
+        margin-left: -10px;
+    }
+
+    @include s-discount-box-hook;
+}
+
+#wrapwrap .s_discount_brand {
+    text-transform: uppercase;
+    letter-spacing: $s-discount-brand-letter-spacing;
+    padding: 10px 15px;
+    margin-top: 10px;
+    text-align: center;
+    min-height: 100px;
+    @include s-discount-brand-hook;
+}
+
+#wrapwrap .s_discount_amount {
+    min-height: 100px;
+    position: relative;
+    font-size: $s-discount-amount-size;
+    text-align: center;
+    font-weight: bold;
+    padding: 20px 15px;
+    text-shadow: 1px 1px 2px 0px white;
+    color: white;
+
+    &:after {
+        content: " ";
+        border-right: 20px solid rgba(0, 0, 0, 0);
+        border-left: 20px solid rgba(0, 0, 0, 0);
+        position: absolute;
+        bottom: -20px;
+        left: 20%;
+    }
+
+}
+
+#wrapwrap .s_discount_type {
+    font-size: 20px;
+
+    letter-spacing: 1px;
+    text-transform: uppercase;
+}
+
+#wrapwrap .s_discount_descr {
+    text-align: center;
+    font-size: 13px;
+    color: gray('800');
+    margin-top: 10px;
+    padding: 20px 25px;
+    @include s-discount-descr-hook;
+}
+
+#wrapwrap .s_discount_ends {
+    padding: 0 25px;
+    margin-bottom: 10px;
+}
+
+#wrapwrap .s_discount_coupon {
+    min-height: 50px;
+    text-align: center;
+    text-transform: uppercase;
+    font-weight: bold;
+    font-size: 18px;
+    padding: 20px 15px;
+
+    a {
+        color: $s-discount-coupon-color;
+    }
+}
+
+#wrapwrap .s_discount_code {
+    letter-spacing: 1px;
+    border-radius: 4px;
+    margin-top: 10px;
+    background: #f0f0f0;
+    color: gray('800');
+    .code {
+        padding: 10px 15px;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_discount/000_variables.scss b/theme_common/static/src/old_snippets/s_discount/000_variables.scss
new file mode 100644
index 0000000..02c65f2
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_discount/000_variables.scss
@@ -0,0 +1,8 @@
+$s-discount-box-border-radius: 20px;
+$s-discount-brand-letter-spacing: 3px;
+$s-discount-coupon-color: white;
+$s-discount-amount-size: 80px;
+
+@mixin s-discount-brand-hook {}
+@mixin s-discount-descr-hook {}
+@mixin s-discount-box-hook {}
diff --git a/theme_common/static/src/old_snippets/s_event_list/000.scss b/theme_common/static/src/old_snippets/s_event_list/000.scss
new file mode 100644
index 0000000..33b47b2
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_event_list/000.scss
@@ -0,0 +1,188 @@
+
+#wrapwrap .s_event_list_item {
+    @include clearfix;
+    box-shadow: 0px 0px 5px rgba(black, 0.25);
+    margin: 0px 0px 20px;
+
+    > time {
+        display: block;
+        padding: 5px;
+        text-align: center;
+        text-transform: uppercase;
+        div {
+            display: none;
+        }
+        .s_event_list_day, .s_event_list_month, .s_event_list_time {
+            display: block;
+            line-height: 1;
+        }
+        .s_event_list_day {
+            font-size: 50px;
+            padding-top: 10px;
+        }
+        .s_event_list_month {
+            font-size: 30px;
+        }
+        .s_event_list_time {
+            font-size: 16px;
+            font-weight: 200;
+            padding-bottom: 10px;
+        }
+    }
+    > .s_event_list_icon  {
+        text-align: center;
+    }
+
+    > .s_event_list_info,
+    > .s_event_list_social {
+        > ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+            text-align: center;
+            > li {
+                float: left;
+                color: gray('800');
+                font-size: 11px;
+                font-weight: 300;
+
+                &:hover {
+                    color: gray('800');
+                    background-color: gray('200');
+                }
+
+                > a {
+                    display: block;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+    }
+    > .s_event_list_info {
+        padding-top: 5px;
+        text-align: center;
+        > .s_event_list_title {
+            margin: 5px 0 0;
+            @include o-text-overflow;
+        }
+        > .s_event_list_desc {
+            font-size: 14px;
+            font-weight: 300;
+            margin: 8px 0 0;
+            word-wrap: break-word;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            max-height: 2.2em;
+            line-height: 1.1em;
+            .fa {
+                color: white;
+            }
+        }
+
+        > ul {
+            margin-top: 10px;
+            > li {
+                width: 50%;
+                > a {
+                    display: block;
+                    width: 100%;
+                    color: gray('800');
+                    text-decoration: none;
+                }
+            }
+        }
+    }
+    > .s_event_list_social > ul {
+        > li {
+            width: 33.3333%;
+            padding: 0px;
+            > a {
+                padding: 9px 0px 3px;
+            }
+
+            &:hover > a {
+                color: white!important;
+            }
+        }
+    }
+
+    .s_event_list_facebook a {
+        color: $color-facebook!important;
+    }
+    .s_event_list_twitter a {
+        color: $color-twitter!important;
+    }
+    .s_event_list_google_plus a {
+        color: $color-google!important;
+    }
+    .s_event_list_facebook:hover a {
+        background-color: $color-facebook !important;
+    }
+    .s_event_list_twitter:hover a {
+        background-color: $color-twitter !important;
+    }
+    .s_event_list_google_plus:hover a {
+        background-color: $color-google !important;
+    }
+}
+
+@include media-breakpoint-up(md) {
+    #wrapwrap .s_event_list_item {
+        display: flex;
+        position: relative;
+        > .s_event_list_icon  {
+            width: $s-event-list-main-size;
+            height: $s-event-list-main-size;
+            float: left;
+            text-align: center;
+            .fa  {
+                line-height: $s-event-list-main-size;
+            }
+        }
+        > img {
+            height: $s-event-list-main-size;
+        }
+        > time {
+            max-width: $s-event-list-main-size;
+        }
+        > time, > img {
+            flex: 1 1 auto;
+            min-height: $s-event-list-main-size;
+            min-width: $s-event-list-main-size;
+            margin: 0px;
+            padding: 0px;
+            float: left;
+        }
+        > .s_event_list_info {
+            flex: 1 1 auto;
+            position: relative;
+            overflow: hidden;
+            min-height: $s-event-list-main-size;
+            padding-right: 40px;
+            text-align: left;
+            > .s_event_list_title, .s_event_list_desc {
+                padding: 0px 10px;
+            }
+            > ul {
+                @include o-position-absolute($left: 0, $bottom: 0, $right: 40px);
+            }
+        }
+        > .s_event_list_social {
+            flex: 1 1 auto;
+            @include o-position-absolute($top: 0, $right: 0, $bottom: 0);
+            width: 40px;
+            > ul {
+                height: 100%;
+                border-left: 1px solid lighten(gray('200'), 10%);
+                > li {
+                    width: 100%;
+                    height: 33.333%;
+                    > a {
+                        padding: 9px 0px;
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_event_list/000_variables.scss b/theme_common/static/src/old_snippets/s_event_list/000_variables.scss
new file mode 100644
index 0000000..b60bbd1
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_event_list/000_variables.scss
@@ -0,0 +1,4 @@
+$color-facebook: #4b6ea8;
+$color-twitter:  #4fd5f8;
+$color-google:   #dd4b39;
+$s-event-list-main-size: 120px;
diff --git a/theme_common/static/src/old_snippets/s_event_slide/000.scss b/theme_common/static/src/old_snippets/s_event_slide/000.scss
new file mode 100644
index 0000000..ee803f6
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_event_slide/000.scss
@@ -0,0 +1,51 @@
+#wrapwrap .s_event_slide {
+    overflow: hidden;
+    .row {
+        text-align: center;
+        overflow: hidden;
+        box-shadow: inset 0px -7px 9px -6px rgba(0,0,0,0.45);
+        .s_event_slide_title{
+            float: left;
+            @media screen and (max-width: 640px) { // FIXME
+                padding-bottom: 0;
+                margin-bottom: 0;
+            }
+        }
+        .s_event_slide_list {
+            float: right;
+            border-left: 4px solid o-color('epsilon');
+            .header-border {
+                width: 20%;
+                height: 5px;
+                margin-bottom: 15px;
+                border-radius: 10px;
+                background-color: o-color('epsilon');
+            }
+            > .row > div {
+                border-right: 1px solid gray('200');
+                border-bottom: 1px solid gray('200');
+                text-align: left;
+                h4 {
+                    text-align: center;
+                }
+            }
+            .event {
+                height: 400px;
+                overflow: hidden;
+                overflow-y: scroll;
+                padding-top: 40px;
+                @include media-breakpoint-down(sm) {
+                    overflow: visible;
+                    height: auto;
+                }
+                img {
+                    width: 100%;
+                }
+            }
+        }
+    }
+    .fa {
+        display: inline-block;
+        margin-top: 50px;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_features_carousel/000.scss b/theme_common/static/src/old_snippets/s_features_carousel/000.scss
new file mode 100644
index 0000000..6ed4489
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_features_carousel/000.scss
@@ -0,0 +1,69 @@
+
+#wrapwrap .s_features_carousel {
+    //height: 650px;
+    @include s-features-carousel-inner-hook;
+    [class*="col-lg-"] img {
+        max-height: 400px;
+    }
+
+    .circle {
+        position: relative;
+        height: 250px;
+        width: 250px;
+        @media only screen and (max-width : 360px) { // FIXME
+            width: 165px;
+            height: 165px;
+        }
+    }
+    .mask {
+        display: inline-flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 250px;
+        height: 250px;
+        padding: 40px;
+        border-radius: 50%;
+        font-size: 20px;
+        line-height: 20px;
+        text-align: center;
+        text-transform: uppercase;
+        @include s-features-carousel-mask-hook;
+        @media only screen and (max-width : 360px) { // FIXME
+            font-size: 15px;
+            line-height: 15px;
+            padding: 15px;
+            height: auto;
+        }
+    }
+
+    h2 {
+        border-bottom: {
+            width: $s-features-carousel-border-width;
+            style: $s-features-carousel-border-style;
+            color: if(s-features-carousel-border-color != null, $s-features-carousel-border-color, gray('600'));
+        }
+        text-align: center;
+        padding-bottom: 30px;
+    }
+    .carousel-indicators {
+        border-top: 1px dotted gray('600');
+        padding-top: 32px;
+        visibility: $s-features-carousel-indicators-visible;
+        li {
+            border: 1px solid gray('200');
+        }
+    }
+    .carousel-indicators .active {
+        border: 1px solid o-color('gamma') !important;
+    }
+    .carousel-control-prev,
+    .carousel-control-next {
+        opacity: 1;
+        cursor: pointer;
+    }
+    @include media-breakpoint-down(sm) {
+        [class*="col-lg-"] > p {
+            padding: 0 30px;
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_features_carousel/000_variables.scss b/theme_common/static/src/old_snippets/s_features_carousel/000_variables.scss
new file mode 100644
index 0000000..44c3246
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_features_carousel/000_variables.scss
@@ -0,0 +1,7 @@
+$s-features-carousel-border-width: 1px;
+$s-features-carousel-border-style: dotted;
+$s-features-carousel-border-color: null; // (default to a BS color)
+$s-features-carousel-indicators-visible: hidden;
+
+@mixin s-features-carousel-inner-hook {}
+@mixin s-features-carousel-mask-hook {}
diff --git a/theme_common/static/src/old_snippets/s_full_menu/000.scss b/theme_common/static/src/old_snippets/s_full_menu/000.scss
new file mode 100644
index 0000000..ed86269
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_full_menu/000.scss
@@ -0,0 +1,46 @@
+#wrapwrap .s_full_menu {
+    overflow: hidden;
+    .container-fluid {
+        h2 {
+            text-align: center;
+        }
+        h4 {
+            font-size: 20px;
+        }
+        .menu-container > .s_full_menu_content {
+            border-left: 3px solid gray('200');
+            .row {
+                .s_full_menu_content_description {
+                    border-bottom: 1px solid gray('200');
+                    padding-bottom: 15px;
+                    line-height: 1;
+                    span {
+                        text-transform: uppercase;
+                        list-style: none;
+                    }
+                    @media screen and (max-width: 1024px) { // FIXME
+                        font-size: 12px;
+                    }
+                    @media screen and (max-width: 360px) { // FIXME
+                        top: 0px;
+                    }
+                }
+                img {
+                    max-width: 200px;
+                }
+            }
+        }
+    }
+    .price {
+        font-size: 2vw;
+        @media screen and (max-width: 360px) { // FIXME
+            font-size: 6.5vw;
+        }
+    }
+    .slash {
+        font-size: 2vw;
+        @media screen and (max-width: 360px) { // FIXME
+            font-size: 6.5vw;
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_header_text_big_picture/000.scss b/theme_common/static/src/old_snippets/s_header_text_big_picture/000.scss
new file mode 100644
index 0000000..bdd5b35
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_header_text_big_picture/000.scss
@@ -0,0 +1,11 @@
+#wrapwrap .s_header_text_big_picture {
+    .s_header_text_big_picture_picturecol {
+        padding: 0;
+        img {
+            width: 100%;
+        }
+    }
+    [class*="col-lg-"] p {
+        padding: 0 25px;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_icon_box/000.scss b/theme_common/static/src/old_snippets/s_icon_box/000.scss
new file mode 100644
index 0000000..2ddec1f
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_icon_box/000.scss
@@ -0,0 +1,12 @@
+#wrapwrap .s_icon_box {
+    .fa {
+        margin: 10px 20px;
+        &:hover {
+            transition: all 0.3s ease-in-out;
+            color: o-color('gamma');
+        }
+    }
+    .icon_box_content {
+        overflow: hidden;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_images_carousel/000.scss b/theme_common/static/src/old_snippets/s_images_carousel/000.scss
new file mode 100644
index 0000000..5007997
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_images_carousel/000.scss
@@ -0,0 +1,26 @@
+.s_images_carousel {
+    height: 400px;
+    &.carousel {
+        @include media-breakpoint-down(md) {
+            height: auto !important;
+        }
+        .carousel-inner,
+        .carousel-item {
+            height: 100%;
+        }
+    }
+    @include media-breakpoint-up(lg) {
+        img {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+        }
+    }
+    .carousel-caption {
+        background-color: #fff;
+        color: $body-color;
+        padding: 5px 0;
+        bottom: 55px;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_images_row/000.scss b/theme_common/static/src/old_snippets/s_images_row/000.scss
new file mode 100644
index 0000000..a059e1d
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_images_row/000.scss
@@ -0,0 +1,15 @@
+.s_images_row {
+    .s_images_row_overlay {
+        min-height: 250px;
+        &:after {
+            content: '';
+            display: block;
+        }
+    }
+    .s_images_row_body {
+        // @include o-position-absolute($spacer,$spacer,$spacer,$spacer);
+        background-color: #fff;
+        padding: $spacer/2 $spacer;
+        display: inline-block;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_menu_three_columns/000.scss b/theme_common/static/src/old_snippets/s_menu_three_columns/000.scss
new file mode 100644
index 0000000..38568fe
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_menu_three_columns/000.scss
@@ -0,0 +1,39 @@
+#wrapwrap .s_menu_three_columns {
+    .three-column {
+        width: 100%;
+        position: relative;
+        z-index: 800;
+        .big-menu {
+            height: 150px;
+            position: relative;
+            padding: 0;
+            @include media-breakpoint-down(sm) {
+                height: 100px;
+            }
+            @media only screen and (max-width : 360px) { // FIXME
+                height: 80px;
+            }
+            a {
+                text-decoration: none;
+                display: block;
+                &:hover, &:focus {
+                    text-decoration: none;
+                    background-color: $white;
+                    transition: all 200ms ease;
+                }
+            }
+            h2 {
+                line-height: 150px;
+                margin-top: 0;
+                @include media-breakpoint-down(sm) {
+                    line-height: 100px;
+                    line-height: 100px;
+                }
+                @media only screen and (max-width : 360px) { // FIXME
+                    height: 80px;
+                    line-height: 80px;
+                }
+            }
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_mini_nav_bar/000.js b/theme_common/static/src/old_snippets/s_mini_nav_bar/000.js
new file mode 100644
index 0000000..e9cedec
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_mini_nav_bar/000.js
@@ -0,0 +1,31 @@
+odoo.define('theme_common.s_mini_nav_bar', function (require) {
+'use strict';
+
+const dom = require('web.dom');
+var publicWidget = require('web.public.widget');
+
+publicWidget.registry.miniNavbarScroll = publicWidget.Widget.extend({
+    selector: '.s_mini_nav_bar a[href*="#"]:not([href="#"])',
+    events: {
+        'click': '_onClick',
+    },
+
+    //----------------------------------------------------------------------
+    // Handlers
+    //----------------------------------------------------------------------
+
+    /**
+     * Called on click on the mini navbar link -> scroll to the section.
+     *
+     * @private
+     */
+    _onClick: function (ev) {
+        var index = $(this).parent().index();
+        var target = $('.o_scroll_nav').get(index);
+        if (target) {
+            ev.preventDefault();
+            dom.scrollTo(target);
+        }
+    },
+});
+});
diff --git a/theme_common/static/src/old_snippets/s_mini_nav_bar/000.scss b/theme_common/static/src/old_snippets/s_mini_nav_bar/000.scss
new file mode 100644
index 0000000..06893cc
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_mini_nav_bar/000.scss
@@ -0,0 +1,27 @@
+
+#wrapwrap .s_mini_nav_bar_nav {
+    position: relative;
+    top: -50px;
+    height: 82px;
+    padding: 0px;
+    .btn {
+        font-family: $font-family-sans-serif;
+        text-align: center;
+        width: 82px;
+        height: 82px;
+        line-height: 1.33;
+        border-radius: 48px;
+        border: 0px;
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
+    }
+}
+
+#wrapwrap .s_mini_nav_bar_content h1 {
+    color: white;
+    font-size: 60px;
+}
+
+#wrapwrap .s_mini_nav_bar_item {
+    margin: 0 20px;
+    min-height: 100px;
+}
diff --git a/theme_common/static/src/old_snippets/s_news_carousel/000.scss b/theme_common/static/src/old_snippets/s_news_carousel/000.scss
new file mode 100644
index 0000000..a06afae
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_news_carousel/000.scss
@@ -0,0 +1,27 @@
+.s_news_carousel {
+    .carousel-inner {
+        width: 80%;
+        margin: 0 auto;
+    }
+
+    .s_news_carousel_date {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        padding: $grid-gutter-width;
+    }
+
+    .s_news_carousel_day {
+        line-height: 1;
+        font-weight: 300;
+    }
+
+    .s_news_carousel_month {
+        margin-bottom: 10px;
+        text-transform: uppercase;
+    }
+    .s_news_carousel_content {
+        padding: $grid-gutter-width;
+        background-color: #fff;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_pricing/000.scss b/theme_common/static/src/old_snippets/s_pricing/000.scss
new file mode 100644
index 0000000..f475e53
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_pricing/000.scss
@@ -0,0 +1,31 @@
+#wrapwrap .s_pricing strong {
+    font-weight: 700;
+    color: gray('800');
+}
+
+#wrapwrap .s_pricing_footer {
+    height: 32px;
+}
+#wrapwrap .s_pricing_box {
+    box-shadow: 0px 2px 5px 0px rgba(black, 0.1);
+    border: 1px solid lighten(gray('200'), 10%);
+}
+
+#wrapwrap .s_pricing_header {
+    padding: 24px 12px;
+    min-height: 180px;
+
+    h2 {
+        font-weight: 700;
+    }
+    h3 {
+        font-weight: 500;
+    }
+}
+
+#wrapwrap .s_pricing_features {
+    padding: 15px 10px 15px 10px;
+    text-align: center;
+    line-height: 20px;
+    font-size: 14px;
+}
diff --git a/theme_common/static/src/old_snippets/s_products_carousel/000.scss b/theme_common/static/src/old_snippets/s_products_carousel/000.scss
new file mode 100644
index 0000000..fc90b51
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_products_carousel/000.scss
@@ -0,0 +1,91 @@
+
+#wrapwrap .s_products_carousel {
+
+    .carousel-inner {
+        height: $s-products-carousel-carousel-height;
+        .carousel-item {
+            height: 100%
+        }
+    }
+
+    .carousel-indicators {
+        visibility: $s-products-carousel-indicators-visible;
+        bottom: $s-products-carousel-indicators-position;
+    }
+
+    .carousel-control-prev,
+    .carousel-control-next {
+        cursor: pointer;
+        opacity: 1;
+        width: 70px;
+    }
+
+    .carousel-control-prev-icon,
+    .carousel-control-next-icon {
+        width: 30px;
+        height: 30px;
+    }
+
+    .row {
+        margin: 0;
+    }
+
+    .container-fluid {
+        padding: 0;
+        overflow: hidden;
+
+        .product-widget {
+            position: absolute;
+            bottom: 0;
+            text-align: center;
+
+            @media screen and (max-width: 360px) {
+                height: auto;
+            }
+        }
+
+        .widget{
+            display: inline-block;
+            overflow: hidden;
+
+            @media screen and (max-width: 360px) {
+                transform: none;
+                padding-bottom: 10px;
+            }
+
+            img {
+                max-height: 120px;
+                &:hover {
+                    opacity: 0.7;
+                }
+            }
+        }
+
+        .hero-bg {
+            padding: $s-products-carousel-hero-bg-padding;
+            color: o-color('alpha');
+            text-align: center;
+
+            @include media-breakpoint-down(sm) {
+                padding-top: 20px;
+                text-align: center;
+            }
+
+            @media screen and (max-width: 360px) {
+                padding: 0;
+            }
+
+            h2 {
+                font-size: 85px;
+                text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86);
+
+                @include media-breakpoint-down(sm) {
+                    font-size: 65px;
+                }
+                @media screen and (max-width: 360px) {
+                    font-size: 35px;
+                }
+            }
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_products_carousel/000_variables.scss b/theme_common/static/src/old_snippets/s_products_carousel/000_variables.scss
new file mode 100644
index 0000000..7d0238f
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_products_carousel/000_variables.scss
@@ -0,0 +1,6 @@
+$s-products-carousel-carousel-height: 500px;
+$s-products-carousel-indicators-position: 0;
+$s-products-carousel-indicators-visible: hidden;
+$s-products-carousel-hero-bg-padding: 60px 90px 0 90px;
+
+@mixin s-products-carousel-hook {}
diff --git a/theme_common/static/src/old_snippets/s_profile/000.scss b/theme_common/static/src/old_snippets/s_profile/000.scss
new file mode 100644
index 0000000..33b358e
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_profile/000.scss
@@ -0,0 +1,34 @@
+#wrapwrap .s_profile_box {
+    min-height: 450px;
+    color: gray('800');
+
+    @include media-breakpoint-down(md) {
+        text-align: center;
+    }
+
+    h2 {
+        color: gray('800');
+    }
+
+    span.tags
+    {
+        background: gray('700');
+        border-radius: 2px;
+        color: white;
+        padding: 2px 4px;
+    }
+
+}
+
+#wrapwrap .s_profile_box_divider {
+    border-top: 1px solid lighten(gray('600'), 15%);
+}
+
+#wrapwrap .s_profile_box_emphasis:hover {
+    transition: all 0.3s ease-in-out;
+    background-color: lighten(gray('200'), 10%);
+}
+
+#wrapwrap .s_profile .card p, #wrapwrap .s_profile .card h2 {
+    color: gray('800');
+}
diff --git a/theme_common/static/src/old_snippets/s_progress/000.scss b/theme_common/static/src/old_snippets/s_progress/000.scss
new file mode 100644
index 0000000..25dbb88
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_progress/000.scss
@@ -0,0 +1,73 @@
+#wrapwrap .s_progress {
+    > div > .row > div {
+        border-left-width: 1px;
+        border-left-style: solid;
+        @include media-breakpoint-down(sm) {
+            border-bottom-width: 1px;
+            border-bottom-style: solid;
+            border-left-width: 0;
+        }
+
+        &:first-child {
+            border-left-width: 0;
+        }
+
+        &:last-child .process {
+            color: rgba(0, 0, 0, 0);
+        }
+    }
+
+    .fa {
+        font-size: 60px;
+    }
+    .icon-container {
+        max-width: 250px;
+    }
+    .progress-iconset {
+        padding: 10px;
+        text-align: center;
+        min-height: 230px;
+        @include media-breakpoint-down(sm) {
+            min-height: 50px;
+        }
+
+        &:after, &:before {
+            content: " ";
+            display: block;
+            width: 50%;
+            height: 50px;
+            border-right: 1px solid silver;
+            margin: 10px 0;
+        }
+        &:before {
+            display: none;
+        }
+    }
+    .progress-content ~ .progress-iconset {
+        &:after {
+            display: none;
+        }
+        &:before {
+            display: block;
+        }
+    }
+    .process {
+        font-size: 25px;
+        height: 25px;
+        text-align: right;
+        width: 100%;
+        @include media-breakpoint-down(sm) {
+            display: none;
+        }
+    }
+    .progress-content {
+        padding: 10px 25px;
+        min-height: 230px;
+        @include media-breakpoint-down(sm) {
+            min-height: 50px;
+        }
+        h1 {
+            margin-top: 0;
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_separator_nav/000.scss b/theme_common/static/src/old_snippets/s_separator_nav/000.scss
new file mode 100644
index 0000000..66e8559
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_separator_nav/000.scss
@@ -0,0 +1,24 @@
+
+#wrapwrap .s_separator_nav {
+    position: relative;
+    top: -50px;
+    height: 82px;
+    padding: 0px;
+    .btn {
+        font-family: $font-family-sans-serif;
+        text-align: center;
+        width: 82px;
+        height: 82px;
+        padding-top: 24px;
+        font-size: 26px;
+        line-height: 1.33;
+        border-radius: 48px;
+        border: 0px;
+        box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
+    }
+}
+
+#wrapwrap .s_separator_nav_item {
+    margin: 0 20px;
+    min-height: 100px;
+}
diff --git a/theme_common/static/src/old_snippets/s_showcase_image/000.scss b/theme_common/static/src/old_snippets/s_showcase_image/000.scss
new file mode 100644
index 0000000..0cf49dd
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_showcase_image/000.scss
@@ -0,0 +1,106 @@
+
+#wrapwrap .s_showcase_image {
+    height: auto;
+    text-align: left;
+    .info {
+        margin-bottom: 1.5em;
+    }
+    > .row {
+        height: 100%;
+    }
+    figure {
+        background-size : cover;
+        position        : relative;
+        height          : 200px;
+
+        // Layout Options
+        // =======================
+        &.tl figcaption {
+            top    : 0;
+            left   : 0;
+            bottom : auto;
+            right  : auto;
+            margin-left : 14px;
+            text-align: right;
+        }
+        &.tr figcaption {
+            top    : 0;
+            left   : auto;
+            bottom : auto;
+            right  : 0;
+        }
+        &.bl figcaption {
+            top    : auto;
+            left   : 0;
+            bottom : 0;
+            margin-left : 14px;
+            right  : auto;
+            text-align: right;
+        }
+    }
+    figcaption {
+        position    : absolute;
+        bottom      : 0;
+        width       : 100%;
+        text-shadow : $s-showcase-image-caption-text-shadow;
+        font-size   : $s-showcase-image-caption-font-size-mobile;
+        padding     : $s-showcase-image-caption-padding;
+
+        &:not([class*=bg-]) {
+            color       : $s-showcase-image-caption-color;
+            background  : $s-showcase-image-caption-bg;
+        }
+
+        h6 {
+            margin-top: 0;
+        }
+    }
+
+    @include media-breakpoint-up(lg) {
+        height: 350px;
+        .info {
+            height: 100%;
+            margin-bottom: 0;
+            display: flex;
+            flex-flow: column nowrap;
+            justify-content: center;
+        }
+        figure {
+            height: 100%;
+        }
+        figcaption {
+            position     : absolute;
+            bottom       : 0;
+            right        : 0;
+            width        : 50%;
+            font-size : $s-showcase-image-caption-font-size-desktop;
+            padding   : $s-showcase-image-caption-padding;
+        }
+    }
+
+    &.s_right {
+        text-align: right;
+        figure {
+            float: right;
+
+            // Layout Options
+            // =======================
+            &.tl figcaption {
+                margin-left: 0;
+            }
+            &.tr figcaption {
+                margin-right : 14px;
+            }
+            &.bl figcaption {
+                margin-left: 0;
+            }
+        }
+
+        @include media-breakpoint-up(lg) {
+            figcaption {
+                margin-right : 14px;
+                text-align   : left;
+            }
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_showcase_image/000_variables.scss b/theme_common/static/src/old_snippets/s_showcase_image/000_variables.scss
new file mode 100644
index 0000000..46eb944
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_showcase_image/000_variables.scss
@@ -0,0 +1,6 @@
+$s-showcase-image-caption-bg                : white;
+$s-showcase-image-caption-color             : #333;
+$s-showcase-image-caption-padding           : 1em;
+$s-showcase-image-caption-font-size-mobile  : 1em;
+$s-showcase-image-caption-font-size-desktop : .8em;
+$s-showcase-image-caption-text-shadow       : none;
diff --git a/theme_common/static/src/old_snippets/s_showcase_slider/000.js b/theme_common/static/src/old_snippets/s_showcase_slider/000.js
new file mode 100644
index 0000000..cbdb73a
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_showcase_slider/000.js
@@ -0,0 +1,132 @@
+odoo.define("theme_common.s_showcase_slider_frontend", function (require) {
+    "use strict";
+
+    const dom = require('web.dom');
+    var publicWidget = require('web.public.widget');
+
+    publicWidget.registry.s_showcase_slider = publicWidget.Widget.extend({
+        selector: ".s_showcase_slider",
+
+        start: function () {
+            _.defer(this.bindEvents.bind(this)); // FIXME delayed to counter a web_editor bug which off all click event
+            this.createPagination();
+            return this._super.apply(this, arguments);
+        },
+
+        destroy: function () {
+            this._super.apply(this, arguments);
+            _.defer(this.unbindEvents.bind(this)); // FIXME delayed to counter a web_editor bug which off all click event
+            this.destroyPagination();
+            this.$target.removeClass("active");
+        },
+
+        bindEvents: function () {
+            // Enlarge image on click if not already enlarged
+            this.$target.on("click.s_showcase_slider", ".s_ss_slider", (function (e) {
+                if (this.$target.hasClass("active")) return;
+
+                this.$target
+                    .addClass("active")
+                    .one("webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend", (function () {
+                        dom.scrollTo(this.$target[0], {
+                            duration: 200,
+                            extraOffset: 70,
+                        });
+                        this.$target.trigger("transitionIsFinished");
+                    }).bind(this));
+            }).bind(this));
+
+            // Close the enlarged image on close icon click
+            this.$target.on("click.s_showcase_slider", ".s_ss_close", (function (e) {
+                this.$target.removeClass("active");
+            }).bind(this));
+
+            // Handle click navigation
+            this.$target.on("click.s_showcase_slider", ".s_ss_prev", this.prevSlide.bind(this));
+            this.$target.on("click.s_showcase_slider", ".s_ss_next", this.nextSlide.bind(this));
+            this.$target.on("click.s_showcase_slider", ".s_ss_slider_pagination > li > a", (function (e) {
+                e.preventDefault();
+                var $selectedDot = $(e.currentTarget).parent();
+                if ($selectedDot.hasClass("selected")) return;
+                this.changeSlide($selectedDot.index());
+            }).bind(this));
+
+            // Keyboard slider navigation
+            $(document).on("keyup.s_showcase_slider", (function (e) {
+                if (!this.$target.hasClass("active")) return;
+
+                switch (e.which) {
+                    case $.ui.keyCode.LEFT:
+                        this.prevSlide();
+                        break;
+                    case $.ui.keyCode.RIGHT:
+                        this.nextSlide();
+                        break;
+                    case $.ui.keyCode.ESCAPE:
+                        this.$target.removeClass("active");
+                        break;
+                }
+            }).bind(this));
+        },
+
+        unbindEvents: function () {
+            this.$target.off(".s_showcase_slider");
+            $(document).off(".s_showcase_slider");
+        },
+
+        createPagination: function () { // FIXME pagination should be saved with editor but keep this for compatibility
+            this.$target.find(".s_ss_slider_pagination").remove(); // Remove saved-with-editor pagination
+
+            this.$pagination = $("<ul/>", {class: "s_ss_slider_pagination"});
+            this.$pagination.insertAfter(this.$target.find(".s_ss_slider_navigation"));
+
+            var nbSlides = this.$target.find(".s_ss_slider").children().length;
+            for (var i = 0 ; i < nbSlides ; i++) {
+                this.$pagination.append("<li><a href=\"#\"></a></li>");
+            }
+
+            this.$pagination.children().eq(this.getCurrentIndex()).addClass("selected");
+        },
+
+        destroyPagination: function () {
+            if (this.$pagination) {
+                this.$pagination.remove();
+                this.$pagination = null;
+            }
+        },
+
+        prevSlide: function () {
+            var nbSlides = this.$target.find(".s_ss_slider").children().length;
+            var currentIndex = this.getCurrentIndex();
+            this.changeSlide(currentIndex > 0 ? (currentIndex - 1) : (nbSlides - 1));
+        },
+
+        nextSlide: function () {
+            var nbSlides = this.$target.find(".s_ss_slider").children().length;
+            var currentIndex = this.getCurrentIndex();
+            this.changeSlide((currentIndex + 1) % nbSlides);
+        },
+
+        getCurrentIndex: function () {
+            return this.$target.find(".s_ss_slider > .selected").index();
+        },
+
+        changeSlide: function (n) {
+            var $slides = this.$target.find(".s_ss_slider > li").removeClass("selected");
+            this.$target.find(".s_ss_slider_pagination > li").removeClass("selected");
+
+            var $slide = $slides.eq(n).addClass("selected");
+            $slides.removeClass("move-left");
+            $slide.prevAll().addClass("move-left");
+
+            this.$pagination.children().eq(n).addClass("selected");
+            this.updateNavigation();
+        },
+
+        updateNavigation: function () {
+            var $active = this.$target.find(".s_ss_slider > .selected");
+            this.$target.find(".s_ss_prev").toggleClass("inactive", $active.is(":first-child"));
+            this.$target.find(".s_ss_next").toggleClass("inactive", $active.is(":last-child"));
+        },
+    });
+});
diff --git a/theme_common/static/src/old_snippets/s_showcase_slider/000.scss b/theme_common/static/src/old_snippets/s_showcase_slider/000.scss
new file mode 100644
index 0000000..62a0cdb
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_showcase_slider/000.scss
@@ -0,0 +1,241 @@
+
+#wrapwrap .s_showcase_slider {
+    position: relative;
+
+    .s_ss_slider_wrapper {
+        position: relative;
+        z-index: 10;
+        transition: width 400ms;
+        /* Force Hardware Acceleration */
+        transform: translateZ(0);
+        backface-visibility: hidden;
+
+        @include s-showcase-slider-wrapper-hook;
+
+        .s_ss_close {
+            display: none;
+            @include o-position-absolute(30px, 30px);
+            z-index: 12;
+            width: 48px;
+            height: 48px;
+            overflow: hidden;
+            white-space: nowrap;
+            visibility: hidden;
+            opacity: 0;
+            font-size: 1.6em;
+            text-align: right;
+            color: $s-ss-slider-navigation-color;
+            text-shadow: $s-ss-slider-navigation-text-shadow;
+            transition: transform 0.3s 0s, visibility 0s 0.4s;
+
+            &:hover {
+                transform: scale(1.2);
+            }
+
+            @include s-showcase-slider-close-hook;
+        }
+
+        ul {
+            margin: 0;
+        }
+    }
+
+    .s_ss_slider {
+        padding: 0;
+        position: relative;
+        z-index: 10;
+        overflow: hidden;
+        &:before { /* never visible - this is used by javascript to check the current window size */
+            content: 'mobile';
+            display: none;
+        }
+        @include s-showcase-slider-slider-hook;
+
+        li {
+            @include o-position-absolute($top: 0, $left: 0);
+            list-style: none;
+            z-index: 10;
+            width: 100%;
+            height: 100%;
+            transform: translate(100%, 0);
+            transition: transform 300ms linear;
+            img {
+                display:block;
+                width:100%;
+            }
+            &.selected {
+                position:relative;
+                z-index:12;
+                transform: translate(0, 0);
+            }
+            &.move-left {
+                transform: translate(-100%, 0);
+            }
+        }
+    }
+
+    .s_ss_slider_navigation li {
+        @include o-position-absolute($top: 50%);
+        z-index:12;
+        list-style:none;
+        transform: translate(0, -50%);
+
+        span {
+            display: block;
+            width: 48px;
+            height: 48px;
+            overflow: hidden;
+            font-size: 1.6em;
+            color: $s-ss-slider-navigation-color;
+            text-shadow: $s-ss-slider-navigation-text-shadow;
+            white-space: nowrap;
+            transition: e("opacity 200ms, visibility 0s");
+
+            @include s-showcase-slider-navigation-buttons-hook;
+
+            &.inactive {
+                opacity: 0;
+                visibility: hidden;
+                transition: e("opacity 200ms 0s, visibility 0s 200ms");
+            }
+            &:hover {
+                opacity: 0.7;
+            }
+        }
+        &:first-of-type {
+            left: 10px;
+        }
+        &:last-of-type {
+            right: 10px;
+        }
+
+        @include s-showcase-slider-navigation-hook;
+    }
+
+    .s_ss_slider_pagination {
+        @include o-position-absolute($left: 50%, $bottom: 30px);
+        z-index: 12;
+        transform: translate(-50%, 0);
+        visibility: hidden;
+        li {
+            display: inline-block;
+            float: left;
+            margin: 0 5px;
+        }
+        li.selected a {
+            background: #f5f4f3;
+        }
+        a {
+            display: block;
+            height: 12px;
+            width: 12px;
+            border-radius: 50%;
+            box-shadow: 0 1px 0 #333;
+            border: 1px solid #f5f4f3;
+            background-color: rgba(255,255,255,0);
+            overflow: hidden;
+            text-indent: 100%;
+            white-space: nowrap;
+        }
+        &:after {
+            content: "";
+            display: table;
+            clear: both;
+        }
+    }
+
+    .s_ss_item_info {
+        padding: 50px 5%;
+
+        @include s-showcase-slider-info-hook;
+    }
+
+    // ================ READABLE
+    &.readable {
+        font-size: 100%;
+        .s_ss_item_info {
+            padding: 0 20px;
+        }
+    }
+
+    // ================ SLIDER ACTIVE
+    &.active .s_ss_slider_wrapper .s_ss_close {
+        visibility: visible;
+        opacity: 1;
+        transition: transform 0.3s 0s, visibility 0s 0s, opacity .4s .4s;
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    #wrapwrap .s_showcase_slider {
+        .s_ss_slider {
+            cursor: pointer;
+            &:before { content: 'desktop'; }
+            &:after {
+                content: '';
+                display: block;
+                @include o-position-absolute($top: 0, $left: 0);
+                width: 100%;
+                height: 100%;
+                pointer-events: none;
+                background: rgba(255, 255, 255, 0.4);
+                background-size: 48px;
+                opacity: 0;
+                z-index: 14;
+                transition: opacity 200ms;
+            }
+            &:hover::after {
+                opacity: 1;
+            }
+            @include s-showcase-slider-slider-hover-hook;
+        }
+
+        .s_ss_item_info {
+            @include o-position-absolute(0, 0);
+            width: 50%;
+            padding: 60px 60px 0;
+            margin: 0;
+        }
+
+        .s_ss_slider_wrapper {
+            width: 50%;
+            .s_ss_close {
+                display: block;
+            }
+        }
+        .s_ss_slider_navigation li,
+        .s_ss_slider_pagination {
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.4s 0s, visibility 0s .4s;
+        }
+
+        .s_ss_slider_navigation li {
+            &:first-child {
+                left: 30px;
+            }
+            li:last-child {
+                right: 30px;
+            }
+        }
+        // ================ SLIDER ACTIVE
+        &.active {
+            .s_ss_slider {
+                cursor: auto;
+                &:after {
+                    display: none;
+                }
+            }
+            .s_ss_slider_wrapper {
+                width: 100%;
+                z-index: 10;
+            }
+            .s_ss_slider_navigation li,
+            .s_ss_slider_pagination {
+                opacity: 1;
+                visibility: visible;
+                transition: opacity 0.4s .4s, visibility 0s .4s;
+            }
+        }
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_showcase_slider/000_variables.scss b/theme_common/static/src/old_snippets/s_showcase_slider/000_variables.scss
new file mode 100644
index 0000000..a70b265
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_showcase_slider/000_variables.scss
@@ -0,0 +1,10 @@
+$s-ss-slider-navigation-color : white;
+$s-ss-slider-navigation-text-shadow : 0 1px 0 #333;
+
+@mixin s-showcase-slider-wrapper-hook {}
+@mixin s-showcase-slider-slider-hook {}
+@mixin s-showcase-slider-slider-hover-hook {}
+@mixin s-showcase-slider-navigation-hook {}
+@mixin s-showcase-slider-navigation-buttons-hook {}
+@mixin s-showcase-slider-close-hook {}
+@mixin s-showcase-slider-info-hook {}
diff --git a/theme_common/static/src/old_snippets/s_team_profiles/000.scss b/theme_common/static/src/old_snippets/s_team_profiles/000.scss
new file mode 100644
index 0000000..7e78c16
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_team_profiles/000.scss
@@ -0,0 +1,5 @@
+.s_team_profiles {
+    [class*="col-"] {
+        color: initial;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_text_picture_text/000.scss b/theme_common/static/src/old_snippets/s_text_picture_text/000.scss
new file mode 100644
index 0000000..7eb09a5
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_text_picture_text/000.scss
@@ -0,0 +1,10 @@
+#wrapwrap .s_text_picture_text {
+    h3 {
+        padding-bottom: 30px;
+    }
+
+    .row div:nth-child(2) img {
+        margin-bottom: 20px;
+        width: 100%;
+    }
+}
diff --git a/theme_common/static/src/old_snippets/s_two_columns/000.scss b/theme_common/static/src/old_snippets/s_two_columns/000.scss
new file mode 100644
index 0000000..169e2ff
--- /dev/null
+++ b/theme_common/static/src/old_snippets/s_two_columns/000.scss
@@ -0,0 +1,5 @@
+#wrapwrap .s_two_columns {
+    [class*="col-lg-"] > img {
+        margin: 0 auto;
+    }
+}
diff --git a/theme_common/static/src/scss/compatibility-saas-10-1.scss b/theme_common/static/src/scss/compatibility-saas-10-1.scss
new file mode 100644
index 0000000..4c1066a
--- /dev/null
+++ b/theme_common/static/src/scss/compatibility-saas-10-1.scss
@@ -0,0 +1,17 @@
+// This file is for compatibility since saas-10 web_editor refactoring.
+// As a fix to work properly in the editor, some classes have been renamed.
+// To allow a smooth transition, old classes alias are created here.
+
+@mixin bg-compatibility-mixin($bg, $color) {
+    background-color: $bg;
+    color: $color;
+    .text-muted {
+        color: rgba($color, 0.4);
+    }
+}
+
+.black { @include bg-compatibility-mixin($black, gray('600')); }
+.darkgray { @include bg-compatibility-mixin(gray('800'), $white); }
+.gray { @include bg-compatibility-mixin(gray('700'), $white); }
+.lightgray { @include bg-compatibility-mixin(gray('200'), gray('700')); }
+.white { @include bg-compatibility-mixin($white, gray('700')); }
diff --git a/theme_common/static/src/scss/compatibility-saas-10-2.scss b/theme_common/static/src/scss/compatibility-saas-10-2.scss
new file mode 100644
index 0000000..41f2709
--- /dev/null
+++ b/theme_common/static/src/scss/compatibility-saas-10-2.scss
@@ -0,0 +1,28 @@
+// This file is for compatibility since saas-10 web_editor refactoring.
+// As a fix to work properly in the editor, some classes have been renamed.
+// To allow a smooth transition, old classes alias are created here.
+
+// Define new theme variables in case the user changes its theme
+$gray-light-light: gray('200');
+$gray-light-dark: gray('600');
+$gray-dark-light: gray('700');
+$gray-dark-dark: gray('900');
+$gray-darkest: gray('900');
+
+body .color-black { color: $black; }
+body .color-white { color: $white; }
+body .color-gray-lighter { color: gray('200'); }
+body .color-gray-light-light { color: $gray-light-light; }
+body .color-gray-light { color: gray('600'); }
+body .color-gray-light-dark { color: $gray-light-dark; }
+body .color-gray { color: gray('700'); }
+body .color-gray-dark-light { color: $gray-dark-light; }
+body .color-gray-dark { color: gray('900'); }
+body .color-gray-dark-dark { color: $gray-dark-dark; }
+body .color-gray-darker { color: gray('900'); }
+body .color-gray-darkest { color: $gray-darkest; }
+body .color-alpha { color: o-color('alpha'); }
+body .color-beta { color: o-color('beta'); }
+body .color-gamma { color: o-color('gamma'); }
+body .color-delta { color: o-color('delta'); }
+body .color-epsilon { color: o-color('epsilon'); }
diff --git a/theme_common/static/src/scss/compatibility-saas-11.4-variables.scss b/theme_common/static/src/scss/compatibility-saas-11.4-variables.scss
new file mode 100644
index 0000000..ca460c6
--- /dev/null
+++ b/theme_common/static/src/scss/compatibility-saas-11.4-variables.scss
@@ -0,0 +1,62 @@
+
+@mixin carousel-indicators($bottom, $bottom-sm) {
+    bottom: $bottom;
+    li {
+        width: 12px;
+        height: 12px;
+        border-color: gray('900');
+        margin: 0;
+        &:hover {
+            border-color: o-color('alpha');
+        }
+        &.active {
+            background-color: o-color('alpha');
+            border-color: o-color('alpha');
+            margin: 0;
+        }
+    }
+    @include media-breakpoint-down(md) {
+        bottom: $bottom-sm;
+    }
+}
+
+$s-banner-2-background-position: 50% 50%;
+$s-banner-2-content-margin: 0;
+
+$s-banner-3-carosel-control-color: rgba(0, 0, 0, 0);
+$s-banner-3-carosel-control-height: 100%;
+$s-banner-3-padding: 130px;
+$s-banner-3-fa-color: o-color('gamma');
+$s-banner-3-carousel-height: 500px;
+$s-banner-3-text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86);
+$s-banner-3-hero-bg-color: o-color('alpha');
+$s-banner-3-indicators-visible: hidden;
+$s-banner-3-h1-size: 80px;
+$s-banner-3-h2-size: 40px;
+$s-banner-3-h1-mobile-font-size: 50px;
+
+@mixin s-banner-3-col-center-hook {};
+@mixin s-banner-3-row-hook {};
+@mixin s-banner-3-carousel-control-hook {};
+@mixin s-banner-3-carousel-control-right-hook {};
+@mixin s-banner-3-carousel-control-left-hook {};
+
+$s-text-big-picture-padding: 50px 0;
+$s-text-big-picture-text-align: left;
+
+@mixin s-text-big-picture-hero-hook {};
+@mixin s-big-picture-text-hero-hook {};
+
+$s-big-picture-text-padding: 50px 0;
+$s-big-picture-text-align: left;
+
+@mixin s-big-picture-text-hero-hook {};
+@mixin s-big-picture-row-hook {};
+
+$s-cubes-big-cube-min-height: 600px;
+
+$s-products-carousel-carousel-control-color: rgba(0, 0, 0, 0);
+$s-products-carousel-carousel-icon-color: o-color('gamma') !default;
+
+$s-timeline-company-color: null;
+$s-timeline-color: if(variable-exists(color-wind), $color-wind, #F7F7F7);
diff --git a/theme_common/static/src/scss/compatibility-saas-11.4.scss b/theme_common/static/src/scss/compatibility-saas-11.4.scss
new file mode 100644
index 0000000..a313523
--- /dev/null
+++ b/theme_common/static/src/scss/compatibility-saas-11.4.scss
@@ -0,0 +1,1276 @@
+
+// This file is for compatibility before 12.0 website snippets refactoring.
+// As a fix to work properly in the editor, some classes have been renamed.
+// To allow a smoother transition, old classes alias are created here.
+
+.s_1_column_text,
+.s_2_column_text,
+.s_3_column_text,
+.s_4_column_text {
+    padding: 30px 0px;
+}
+
+.s_logo_bar {
+    min-height: 192px;
+    color: white;
+    padding: 48px 0;
+    img {
+        max-height: 80px;
+    }
+    @include media-breakpoint-down(sm) {
+        [class*="col-lg-"] {
+            padding-bottom: 15px;
+        }
+    }
+}
+
+#wrapwrap .s_banner_2.carousel {
+    margin-top: 0;
+    margin-bottom: 0;
+    .row.content {
+        margin: $s-banner-2-content-margin;
+        outline: 0;
+    }
+    .carousel-box-content {
+        padding: 15px 30px;
+    }
+    .carousel-box-image {
+        padding: 0;
+    }
+    .carousel-inner .item {
+        background-position: $s-banner-2-background-position;
+    }
+    .carousel-control {
+        @include carousel-control(15px, 0, 2px);
+    }
+    .carousel-indicators {
+        @include carousel-indicators(10px, 10px);
+    }
+}
+
+.s_banner_3 {
+    .fa {
+        color: $s-banner-3-fa-color;
+        font-size: 35px;
+        transition: all 0.3s ease 0s;
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+        &:hover {
+            color: o-color('beta');
+        }
+    }
+    .carousel-inner {
+        height: $s-banner-3-carousel-height;
+    }
+    .carousel-control {
+        opacity: 1;
+        top: 205px;
+        width: 70px;
+        height: 70px;
+        text-shadow: none;
+        &.left, &.right {
+            @include s-banner-3-carousel-control-hook;
+            background-color: $s-banner-3-carosel-control-color;
+            background-image: none;
+            height: $s-banner-3-carosel-control-height;
+            top: 0px;
+        }
+        &.left {
+            left: 0px;
+            @include s-banner-3-carousel-control-left-hook;
+            .fa-chevron-left {
+                right: 39%;
+                top: 50%;
+            }
+        }
+        &.right {
+            right: 0px;
+            @include s-banner-3-carousel-control-right-hook;
+            .fa-chevron-right {
+                left: 39%;
+                top: 50%;
+            }
+        }
+    }
+    .carousel-indicators {
+        bottom: 0px;
+        visibility: $s-banner-3-indicators-visible;
+    }
+    .carousel .carousel-control.left *, .carousel .carousel-control.right * {
+        position: relative;
+        top: 19px;
+        z-index: 5;
+    }
+    .container-fluid {
+        padding: 0;
+        overflow: hidden;
+        @include s-banner-3-row-hook;
+        .row .hero-bg {
+            @include s-banner-3-col-center-hook;
+            padding-left: $s-banner-3-padding;
+            color: $s-banner-3-hero-bg-color;
+            @include media-breakpoint-down(sm) {
+                top: 0px;
+                text-align: center;
+                padding-left: 0px;
+            }
+            @media screen and (max-width: 360px) { // FIXME
+                padding-left: 15px;
+            }
+            h1 {
+                font-size: $s-banner-3-h1-size;
+                text-shadow: $s-banner-3-text-shadow;
+                @media screen and (max-width: 360px) { // FIXME
+                    font-size: 50px;
+                }
+            }
+            h2 {
+                font-size: $s-banner-3-h2-size;
+                text-shadow: $s-banner-3-text-shadow;
+                @media screen and (max-width: 360px) { // FIXME
+                    font-size: 30px;
+                }
+            }
+            img {
+                max-height: 200px;
+                @media screen and (max-width: 360px) { // FIXME
+                    max-width: 250px;
+                }
+            }
+        }
+    }
+}
+
+.s_slide_banner {
+    min-height: 480px;
+    &.carousel {
+        overflow: hidden;
+        .carousel-content {
+            background: none;
+            margin-top: 75px;
+            color: $body-color;
+        }
+        .carousel-inner {
+            height: 100%;
+            .item {
+                height: 100%;
+                background-size: cover;
+            }
+        }
+        .carousel-control {
+            width: 10%;
+            cursor: pointer;
+            span {
+                @include o-position-absolute($top: 50%);
+                margin-top: -8px;
+            }
+            &.left {
+                left: -10px;
+                * {
+                    @include o-position-absolute(50%, 50%);
+                }
+            }
+            &.right {
+                right: -10px;
+                * {
+                    @include o-position-absolute($top: 50%);
+                }
+            }
+        }
+    }
+}
+
+#wrapwrap .s_carousel_boxed .carousel {
+    .carousel-inner {
+        border-radius: $border-radius;
+    }
+    .carousel-control {
+        width: 10%;
+        @include carousel-control(15px, 20px, 3px);
+        @include fa-size-generator(15px);
+        .fa {
+            top: auto;
+            bottom: 30px;
+        }
+    }
+    .carousel-indicators {
+        display: none;
+    }
+    .carousel-caption {
+        bottom: 15px;
+        border-radius: ($border-radius-lg * 3);
+        min-height: 35px;
+        padding: 5px 0;
+        p {
+            margin: 0;
+        }
+    }
+}
+
+.s_text_big_picture {
+    padding: $s-text-big-picture-padding;
+    .row {
+        @include s-big-picture-row-hook;
+    }
+    .hero-paragraph {
+        padding: 0px 40px;
+        text-align: $s-text-big-picture-text-align;
+        h1 {
+            font-weight: 900;
+            @include s-text-big-picture-hero-hook;
+            @media only screen and (max-width : 1024px) {
+                font-size: 25px;
+                font-weight: 900;
+            }
+        }
+        h2 {
+            @media only screen and (max-width : 1024px) {
+                font-size: 20px;
+            }
+        }
+        p {
+            font-size: 16px;
+            @media only screen and (max-width : 1024px) {
+                font-size: 14px;
+            }
+        }
+    }
+    .hero-image {
+        padding-left: 0px;
+        padding-right: 0px;
+        float: right;
+        img {
+            width: 100%;
+        }
+    }
+}
+
+.s_big_picture_text {
+    padding: $s-big-picture-text-padding;
+    .row {
+        @include s-big-picture-row-hook;
+    }
+    .hero-paragraph {
+        padding: 0px 40px;
+        text-align: $s-big-picture-text-align;
+        h1 {
+            font-weight: 900;
+            @include s-big-picture-text-hero-hook;
+            @media only screen and (max-width : 1024px) { // FIXME
+                font-size: 25px;
+                font-weight: 900;
+            }
+        }
+        h2 {
+            @media only screen and (max-width : 1024px) { // FIXME
+                font-size: 20px;
+            }
+        }
+        p {
+            font-size: 16px;
+            @media only screen and (max-width : 1024px) { // FIXME
+                font-size: 14px;
+            }
+        }
+    }
+    .hero-image {
+        padding-left: 0px;
+        padding-right: 0px;
+        img {
+            width: 100%;
+        }
+    }
+}
+
+.s_separator_color hr {
+    height: 12px;
+    background-color:  $secondary !important;
+    border-radius: 0px;
+}
+
+#wrapwrap .s_separator_block {
+    min-height: 1px;
+}
+
+#wrapwrap .s_separator_color hr {
+    height: 2px;
+    border-top: 0;
+    background-color: o-color('beta');
+    border-radius: 5px;
+}
+
+#wrapwrap .s_separator_multicolor_fw div {
+    padding: 0px;
+    margin: 0;
+    height: 14px;
+
+    hr {
+        height: 14px;
+        border-top: 0;
+        padding: 0px;
+        margin: 0;
+        background: linear-gradient(to right, o-color('beta') 0%, o-color('beta') 30%, o-color('delta') 30%, o-color('delta') 80%, o-color('gamma') 80%);
+    }
+}
+
+#wrapwrap .s_separator_shade hr {
+    height: 2px;
+    border-top: 0;
+    background: gray('700');
+    border-radius: 5px;
+}
+
+#wrapwrap .s_separator_multicolor hr {
+    height: 12px;
+    border-top: 0;
+    background: linear-gradient(to right, o-color('beta') 0%, o-color('beta') 30%, o-color('delta') 30%, o-color('delta') 80%, o-color('gamma') 80%);
+}
+
+.s_separator {
+    border-color: inherit;
+    border-top: 0;
+    padding: 8px 0;
+    margin: 0 0 16px 0;
+    height: 1px;
+    display: inline-block;
+    width: 100%;
+    border-style: solid;
+    border-bottom-width: 1px;
+    &.hr-small {
+        width: 20%;
+    }
+    &.hr-half {
+        width: 50%;
+    }
+    &.hr-full {
+        width: 100%;
+    }
+    &.hr-dashed {
+        border-style: dashed;
+    }
+    &.hr-dotted {
+        border-style: dotted;
+    }
+    &.hr-double {
+        border-style: double;
+    }
+    &.hr-solid {
+        border-style: solid;
+    }
+    @mixin hr-thickness($n) {
+        @for $i from 1 through $n {
+            &.hr-#{$i}{
+                border-bottom-width: ($i * 1);
+            }
+        }
+    }
+    @include hr-thickness(5);
+}
+
+.s_testimonial_slider {
+    &.carousel {
+        .carousel-inner {
+            .item {
+                opacity: 0;
+                -webkit-transition-property: opacity;
+                -ms-transition-property: opacity;
+                transition-property: opacity;
+            }
+            .active {
+                opacity: 1;
+                -webkit-transition-property: opacity;
+                -ms-transition-property: opacity;
+                transition-property: opacity;
+            }
+        }
+        .carousel-indicators {
+            bottom: 10px;
+            > li {
+                background-color: $primary;
+                border: none;
+            }
+        }
+    }
+    blockquote {
+        text-align: center;
+        border: none;
+        font-size: 28px;
+        font-weight: 300;
+    }
+    .row > div > img {
+        @include media-breakpoint-down(sm) {
+            max-height: 100px;
+        }
+    }
+}
+
+.s_lead_bar {
+    min-height: 192px;
+    overflow: hidden;
+    color: white;
+    padding-top: 32px;
+    p {
+        color: gray('800');
+        font-size: 16px;
+    }
+}
+
+#wrapwrap .s_features_circle {
+    @include fa-size-generator(20px);
+}
+
+#wrapwrap .s_features_grid_circle {
+    @include fa-size-generator(20px);
+    .feature-text {
+        overflow: hidden;
+        margin: 0 0 12px 0;
+        padding: 0 0 0 10px;
+    }
+}
+
+#wrapwrap .s_quotes_slider_2 {
+    blockquote{
+      padding: 0 20px;
+    }
+    &.quotecarousel {
+        padding: 0;
+    }
+    @include blockquote-layout(#fff, gray('900'));
+    .carousel-indicators {
+        @include carousel-indicators(5px, -5px);
+    }
+}
+
+#wrapwrap .s_three_columns {
+    [class*="bg-"] {
+        border: 10px solid rgba(0, 0, 0, 0);
+        padding: 20px;
+        background-clip: padding-box;
+        > .carousel [class*="bg-"]{
+            border: 0;
+        }
+    }
+    .bg-none {
+        padding: 0;
+    }
+    .carousel-control {
+        @include carousel-control(0, 0, 2px);
+    }
+}
+
+#wrapwrap .s_icon_box_square {
+    .fa {
+        margin: 0 20px;
+        &:hover {
+            transition: all 0.3s ease-in-out;
+            background-color: o-color('gamma');
+        }
+    }
+    @include fa-size-generator(25px);
+    .icon_box_content {
+        overflow: hidden;
+    }
+}
+
+#wrapwrap .s_icon_box_circle {
+    .fa {
+        margin: 0 20px;
+        &:hover {
+            transition: all 0.3s ease-in-out;
+            background-color: o-color('gamma');
+        }
+    }
+    @include fa-size-generator(25px);
+    .icon_box_content {
+        overflow: hidden;
+    }
+}
+
+#wrapwrap .s_big_icon_square {
+    text-align: center!important;
+}
+
+#wrapwrap .s_big_icon_square_box {
+    text-align: center!important;
+    min-height: 180px;
+    width: 150px;
+    margin: 0 auto;
+
+    .fa {
+        color:white;
+        font-size: 40px;
+    }
+}
+
+#wrapwrap .s_big_icon_square_icon {
+    width:120px;
+    height:110px;
+    text-align:center!important;
+    color:#fff;
+    padding: 36px 0;
+    transition: all 0.3s ease-in-out;
+    background-color: o-color('alpha');
+    h5 {
+        margin-top: 48px;
+        color: o-color('alpha');
+    }
+}
+
+#wrapwrap .s_big_icon_square_box:hover .s_big_icon_square_icon {
+    transition: all 0.3s ease-in-out;
+    background-color: o-color('gamma');
+}
+
+#wrapwrap .s_big_icon_square_box:hover .s_big_icon_square_content h4 {
+    transition: all 0.3s ease-in-out;
+    color: o-color('gamma');
+}
+
+#wrapwrap .s_big_icons {
+    text-align: center!important;
+    @include s-big-icon-circle-height-hook;
+    //fix -- without this in mobile view the circles go to the top and so they hide the h2 and h3 above it.
+    .col-lg-12 {
+        float: none;
+    }
+}
+
+#wrapwrap .s_big_icons_box {
+    text-align: center!important;
+    width: 150px;
+    margin: 0 auto;
+
+    .fa {
+        color:white;
+        font-size: 40px;
+        @include s-big-icon-circle-fa-hook;
+    }
+}
+
+#wrapwrap .s_big_icons_icon {
+    width: $s-big-icon-circle-icon-size;
+    height: $s-big-icon-circle-icon-size;
+    text-align:center!important;
+    padding: 40px 0;
+    transition: all 0.3s ease-in-out;
+    border-radius: 80px;
+    margin: 0px auto;
+    h5 {
+        margin-top: 48px;
+    }
+}
+
+#wrapwrap .s_big_icons_box:hover .s_big_icons_icon {
+    transition: all 0.3s ease-in-out;
+    background-color: o-color('gamma');
+}
+
+#wrapwrap .s_big_icons_box:hover .s_big_icons_content h4 {
+    transition: all 0.3s ease-in-out;
+    color: o-color('gamma');
+}
+
+#wrapwrap .s_color_blocks_slider {
+    width: 100%;
+
+    .s_color_blocks_slider_img {
+        padding: 0;
+    }
+
+    .s_color_blocks_slider_content {
+        padding: 8% 5%;
+        height: auto;
+        .fa {
+            color: white;
+        }
+        img {
+            max-width: 100%;
+            height: auto;
+        }
+    }
+}
+
+#wrapwrap .s_timeline_ul {
+    list-style: none;
+    padding: 20px 0 20px;
+    position: relative;
+
+    &:before {
+        top: 0;
+        bottom: 0;
+        position: absolute;
+        content: " ";
+        width: 3px;
+        background-color: gray('200');
+        left: 50%;
+        margin-left: -1.5px;
+    }
+
+    > li {
+        margin-bottom: 20px;
+        position: relative;
+
+        &:before,
+        &:after {
+            content: " ";
+            display: table;
+        }
+
+        &:after {
+            clear: both;
+        }
+
+        &:before,
+        &:after {
+            content: " ";
+            display: table;
+        }
+
+        &:after {
+            clear: both;
+        }
+
+        > .s_timeline_panel {
+            width: 50%;
+            position: relative;
+            float: left;
+            padding: 0 44px 0 0;
+
+            @include media-breakpoint-down(sm) {
+                width: 100%;
+                padding: 0;
+            }
+
+            > div {
+                background-color: $s-timeline-color;
+                width: 100%;
+                float: left;
+                border: 1px solid #d4d4d4;
+                border-radius: 2px;
+                padding: 20px;
+                position: relative;
+                -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+                box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
+
+                &:before {
+                    position: absolute;
+                    top: 26px;
+                    right: -15px;
+                    display: inline-block;
+                    border-top: 15px solid rgba(0, 0, 0, 0);
+                    border-left: 15px solid #ccc;
+                    border-right: 0 solid #ccc;
+                    border-bottom: 15px solid rgba(0, 0, 0, 0);
+                    content: " ";
+                    @include media-breakpoint-down(sm) {
+                        display: none;
+                    }
+                }
+
+                &:after {
+                    position: absolute;
+                    top: 27px;
+                    right: -14px;
+                    display: inline-block;
+                    border-top: 14px solid rgba(0, 0, 0, 0);
+                    border-left: 14px solid $s-timeline-color;
+                    border-right: 0 solid $s-timeline-color;
+                    border-bottom: 14px solid rgba(0, 0, 0, 0);
+                    content: " ";
+                    @include media-breakpoint-down(sm) {
+                        display: none;
+                    }
+                }
+            }
+        }
+
+        > .s_timeline_badge {
+            color: #fff;
+            width: 50px;
+            height: 50px;
+            line-height: 50px;
+            font-size: 1.4em;
+            text-align: center;
+            position: absolute;
+            top: 16px;
+            left: 50%;
+            margin-left: -25px;
+            background-color: #999999;
+            z-index: 100;
+            border-top-right-radius: 50%;
+            border-top-left-radius: 50%;
+            border-bottom-right-radius: 50%;
+            border-bottom-left-radius: 50%;
+
+            @include media-breakpoint-down(sm) {
+                display: none;
+            }
+        }
+
+        &:not(.s_timeline_inverted) > .s_timeline_panel:nth-child(2n+1) {
+            float: right;
+            padding: 0 0 0 44px;
+
+            @include media-breakpoint-down(sm) {
+                padding: 0;
+                margin-top: 20px;
+            }
+
+            > div {
+                float: right;
+
+                &:before {
+                    border-left-width: 0;
+                    border-right-width: 15px;
+                    left: -15px;
+                    right: auto;
+                }
+
+                &:after {
+                    border-left-width: 0;
+                    border-right-width: 14px;
+                    left: -14px;
+                    right: auto;
+                }
+            }
+        }
+
+        &.s_timeline_inverted > .s_timeline_panel:nth-child(2n) {
+            float: right;
+            padding: 0 0 0 44px;
+
+            @include media-breakpoint-down(sm) {
+                padding: 0;
+            }
+
+            > div {
+                float: right;
+
+                &:before {
+                    border-left-width: 0;
+                    border-right-width: 15px;
+                    left: -15px;
+                    right: auto;
+                }
+
+                &:after {
+                    border-left-width: 0;
+                    border-right-width: 14px;
+                    left: -14px;
+                    right: auto;
+                }
+            }
+        }
+    }
+}
+
+#wrapwrap .s_timeline_badge.primary {
+    background-color: o-color('alpha') !important;
+}
+
+#wrapwrap .s_timeline_badge.success {
+    background-color: o-color('beta') !important;
+}
+
+#wrapwrap .s_timeline_badge.warning {
+    background-color: o-color('delta') !important;
+}
+
+#wrapwrap .s_timeline_badge.danger {
+    background-color: o-color('epsilon') !important;
+}
+
+#wrapwrap .s_timeline_badge.info {
+    background-color: o-color('gamma') !important;
+}
+
+#wrapwrap .s_timeline_title {
+    margin-top: 0;
+    color: gray('800');
+}
+
+#wrapwrap .s_timeline_info {
+    margin-top: 0;
+    color: gray('700');
+}
+
+#wrapwrap .s_timeline_date {
+    margin-top: 0;
+    color: gray('800');
+}
+
+$s-timeline-company-color: o-color('alpha') !default;
+
+#wrapwrap .s_timeline_company {
+    margin-top: 0;
+    color: $s-timeline-company-color;
+}
+
+#wrapwrap .s_timeline_heading {
+    color: gray('800');
+}
+
+#wrapwrap .s_timeline_body > p,
+#wrapwrap .s_timeline_body > ul {
+    margin-bottom: 0;
+    color: gray('800');
+}
+
+#wrapwrap .s_timeline_body > p + p {
+    margin-top: 5px;
+}
+
+@include media-breakpoint-down(sm) {
+    #wrapwrap ul.timeline:before {
+        display: none;
+    }
+
+    #wrapwrap ul.timeline > li {
+        margin-bottom: 0;
+        > .s_timeline_panel {
+            float: right;
+            width: 100%;
+            padding: 0 !important;
+            margin-bottom: 20px;
+            > .s_timeline_panel_content {
+                &:before, &:after {
+                    display: none;
+                }
+            }
+        }
+        > .s_timeline_badge {
+            display: none;
+        }
+    }
+}
+
+#wrapwrap .s_timeline_icons ul.timeline {
+    list-style: none;
+    padding: 0;
+    &:before {
+        content: '';
+        position: absolute;
+        width: 1px;
+        top: 10px;
+        bottom: 10px;
+        left: 50%;
+        background-color: gray('700');
+    }
+
+    li {
+        position: relative;
+        margin-bottom: 15px;
+        &:before,
+        &:after {
+            content: '';
+            display: table;
+        }
+        &:after {
+            clear: both;
+        }
+
+        /* Left & Right */
+        .timeline-content,
+        .timeline-content-double {
+            position: relative;
+            width: 50%;
+            color: gray('900');
+            &:after {
+                content: '';
+                position: absolute;
+                top: 10px;
+                right: 30px;
+                display: inline-block;
+                border-top: 5px solid rgba(0, 0, 0, 0);
+                border-left: 5px solid gray('900');
+                border-right: 0 solid gray('900');
+                border-bottom: 5px solid rgba(0, 0, 0, 0);
+            }
+
+            /* Text */
+            .timeline-text {
+                overflow: hidden;
+                min-height: 50px;
+                padding: 3px 10px;
+                p, ul{
+                    margin: 0;
+                    + p{
+                        margin-top: 5px;
+                    }
+                }
+            }
+
+            /* Badge */
+            .fa {
+                margin: -5px 0 0 0;
+                color: #fff;
+                text-align: center;
+            }
+
+            /* Icons size */
+            @include fa-size-generator(20px);
+
+        }
+
+        /* Date */
+        .timeline-date {
+            position: absolute;
+            left: 50%;
+            width: 60px;
+            height: 30px;
+            line-height: 30px;
+            margin-left: -40px;
+            background-color: #fff;
+            color: gray('900');
+            font-weight: 700;
+            text-align: center;
+            z-index: $zindex-navbar;
+        }
+
+        /* Left */
+        &:not(.timeline-inverted) .timeline-content,
+        &.timeline-inverted .timeline-content-double {
+            float: left;
+            padding: 0 45px 0 0;
+            text-align: right;
+            .fa {
+                float: right;
+                margin-left: 10px;
+            }
+        }
+
+        /* Right */
+        &.timeline-inverted .timeline-content,
+        &:not(.timeline-inverted) .timeline-content-double {
+            float: right;
+            padding: 0 0 0 45px;
+            &:after {
+                border-left-width: 0;
+                border-right-width: 5px;
+                left: 30px;
+                right: auto;
+            }
+            .fa {
+                float: left;
+                margin-right: 10px;
+            }
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    #wrapwrap .s_timeline_icons ul.timeline {
+        text-align: center;
+        &:before{
+            display: none;
+        }
+
+        li {
+            border-bottom: 1px solid gray('200');
+            &:last-child{
+                border-bottom: 0;
+            }
+            &.timeline-inverted .timeline-content,
+            &.timeline-inverted .timeline-content-double,
+            &:not(.timeline-inverted) .timeline-content,
+            &:not(.timeline-inverted) .timeline-content-double {
+                width: 100%;
+                padding: 0;
+                text-align: center;
+                &:after{
+                    display: none;
+                }
+
+                .fa {
+                    float: none;
+                    margin: 10px 0 0 0;
+                }
+
+                .timeline-text{
+                    padding: 10px 0 20px 0;
+                    min-height: 0;
+                }
+            }
+
+            .timeline-date{
+                position: relative;
+                left: auto;
+                margin: 0;
+                background-color: rgba(0, 0, 0, 0);
+            }
+        }
+    }
+}
+
+#wrapwrap .s_images_captions_fw [class*="col-"] {
+    padding: 0;
+    p {
+        display: inline-block;
+        margin: 0;
+        padding: 5px 15px;
+    }
+}
+
+#wrapwrap .s_team_profile_box {
+    margin: 0.32em;
+    padding: 32px 24px;
+    box-shadow: 0px 1px 8px rgba(black, 0.15);
+    background-color: rgba(white, 0.05);
+    border: 1px solid rgba(white, 0.05);
+    img {
+        border: 4px solid white;
+        width: 160px;
+        box-shadow: 1px 1px 8px rgba(black, 0.1);
+    }
+
+}
+
+#wrapwrap .s_team_profile_share {
+    margin: 24px 0;
+    .fa {
+        color: o-color('alpha');
+        padding: 0 2px;
+    }
+}
+
+#wrapwrap .s_team_profiles_2 {
+    .profile-body {
+        padding: 30px;
+        img {
+            display: inline-block;
+            margin: 30px 0 0 0;
+            max-width: 50%;
+        }
+    }
+    .profile-options {
+        font-size: $font-size-sm;
+        margin: 0;
+        div {
+            border-bottom: 1px solid #fff;
+            border-right: 1px solid #fff;
+            padding: 0;
+
+            &:last-child {
+                border-right: none;
+            }
+        }
+        a {
+            display: block;
+            padding: 8px 0;
+        }
+        p {
+            display: block;
+            padding: 8px 0;
+            margin-bottom: 0;
+
+        }
+        .fa {
+            padding: 16px 0 0 0;
+            display: block;
+        }
+    }
+}
+
+#wrapwrap .s_cubes {
+    .cube {
+        min-height: 200px;
+
+        h3 {
+            text-align: center;
+        }
+        h4 {
+            padding-bottom: 20px;
+        }
+
+        .cube-heading {
+            position: relative;
+            top: 25%;
+        }
+        > .row {
+            height: 50%;
+        }
+    }
+
+    .cube-big {
+        height: 600px;
+        @media screen and (max-width: 640px) { // FIXME
+            height: auto;
+        }
+
+        .cube-heading {
+            position: relative;
+            top: 25%;
+        }
+        &:first-child {
+            min-height: $s-cubes-big-cube-min-height;
+        }
+    }
+
+    .cube-small, .cube-text {
+        height: 300px;
+    }
+}
+
+#wrapwrap .s_news_carousel {
+    .container {
+        height: 100%;
+        .row {
+            height: 100%;
+            > div {
+                height: 100%;
+                @include media-breakpoint-down(md) {
+                    height: auto !important;
+                }
+            }
+        }
+    }
+    .carousel-inner {
+        width: 80%;
+        margin: 0 10%;
+        @include media-breakpoint-down(md) {
+            width: 100%;
+            margin: 0;
+        }
+        .item {
+            padding: 0 15px;
+        }
+    }
+    .news-carousel-time {
+        padding: 32px 0;
+        .day {
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+            width: ($h2-font-size * 2);
+            height: ($h2-font-size * 2);
+            line-height: ($h2-font-size * 2);
+            font-size: $h2-font-size;
+        }
+        .month {
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+            font-size: $h6-font-size;
+            margin-top: 6px;
+        }
+        .year {
+            display: block;
+            margin-left: auto;
+            margin-right: auto;
+            font-size: $h6-font-size;
+        }
+    }
+    .news-carousel-content {
+        padding: 32px;
+    }
+    .carousel-control {
+        @include carousel-control(15px, 0, 2px);
+        .fa {
+            margin-top: -21px;
+            @include media-breakpoint-down(md) {
+                top: 65px;
+                margin-top: 0;
+            }
+        }
+    }
+}
+
+#wrapwrap .s_references_2 {
+    @include blockquote-layout(gray('200'), gray('900'));
+    .carousel-indicators {
+        @include carousel-indicators(-15px, -10px);
+    }
+}
+
+#wrapwrap .s_medias_list {
+    background-color: if($s-medias-list-bg-color-main != null, $s-medias-list-bg-color-main, gray('200'));
+    .media {
+        @include media-breakpoint-down(md) {
+            height: auto !important;
+        }
+        > .row {
+            margin: 16px 0;
+            background-color: #fff;
+            > [class*="col-"] {
+                padding: 0;
+                &.media-content{
+                    padding: 30px;
+                }
+            }
+            .media-options {
+                height: 100%;
+                background-color: gray('200');
+                > .row {
+                    margin: 0;
+                    [class*="col-"]{
+                        padding: 0;
+                        margin-bottom: 1px;
+                        p {
+                            margin: 0;
+                            font-size: $font-size-sm;
+                            display: inline-block;
+                        }
+                        @include fa-size-generator(10px);
+                        .fa {
+                            margin-right: 10px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+#wrapwrap .s_products_carousel {
+    .fa {
+        color: $s-products-carousel-carousel-icon-color;
+        font-size: 35px;
+        transition: all 0.3s ease 0s;
+        position: relative;
+        top: 50%;
+        transform: translateY(-50%);
+        &:hover {
+            color: o-color('beta');
+        }
+    }
+
+    .carousel-control {
+        opacity: 1;
+        top: 205px;
+        width: 70px;
+        height: 70px;
+        text-shadow: none;
+    }
+
+    .carousel-control.left, .carousel-control.right {
+        @include s-products-carousel-hook;
+        background-color: $s-products-carousel-carousel-control-color;
+        background-image: none;
+        height: 100%;
+        top: 0;
+    }
+
+    .carousel-control.left {
+        left: 0;
+        .fa-chevron-left {
+            right: 39%;
+            top: 50%;
+        }
+    }
+
+    .carousel-control.right {
+        right: 0;
+        .fa-chevron-right {
+            left: 39%;
+            top: 50%;
+        }
+    }
+
+    .carousel .carousel-control.left *,
+    .carousel .carousel-control.right * {
+        position: relative;
+        top: 19px;
+        z-index: 5;
+    }
+}
diff --git a/theme_common/static/src/scss/fonts.scss b/theme_common/static/src/scss/fonts.scss
new file mode 100644
index 0000000..8195f75
--- /dev/null
+++ b/theme_common/static/src/scss/fonts.scss
@@ -0,0 +1,9 @@
+/**
+ * Fonts which are not google fonts and thus need to be served by Odoo directly.
+ * Ideally, using google fonts is always better !
+ *
+ *  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ *  ! Please triple check Licence before to add new font !
+ *  !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+ */
+
diff --git a/theme_common/static/src/scss/mixins.scss b/theme_common/static/src/scss/mixins.scss
new file mode 100644
index 0000000..8f5ae18
--- /dev/null
+++ b/theme_common/static/src/scss/mixins.scss
@@ -0,0 +1,1205 @@
+@function o-theme-common-add-color-variations($from, $to, $variations: ('light': 10%, 'dark': -10%)) {
+    $color-variations: ();
+    @each $color-name in ('alpha', 'beta', 'gamma', 'delta', 'epsilon') {
+        $color: map-get($from, $color-name);
+        @if $color != null {
+            @each $variation-name, $amount in $variations {
+                $color-variations: map-merge($color-variations, (
+                    '#{$color-name}-#{$variation-name}': adjust-color($color, $lightness: $amount),
+                ));
+            }
+        }
+    }
+    @return map-merge($color-variations, $to);
+}
+
+@mixin fa-size-generator($base-size) {
+    .fa {
+        text-align: center;
+        display: inline-block;
+        vertical-align: middle;
+    }
+    .fa,
+    .fa.fa-1x {
+        width: ($base-size + 20px);
+        height: ($base-size + 20px);
+        line-height: ($base-size + 20px);
+    }
+    .fa.fa-2x {
+        width: ($base-size + 40px);
+        height: ($base-size + 40px);
+        line-height: ($base-size + 40px);
+    }
+    .fa.fa-3x {
+        width: ($base-size + 60px);
+        height: ($base-size + 60px);
+        line-height: ($base-size + 60px);
+    }
+    .fa.fa-4x {
+        width: ($base-size + 80px);
+        height: ($base-size + 80px);
+        line-height: ($base-size + 80px);
+    }
+    .fa.fa-5x {
+        width: ($base-size + 100px);
+        height: ($base-size + 100px);
+        line-height: ($base-size + 100px);
+    }
+}
+
+@mixin blockquote-layout($bg-color, $color) {
+    blockquote {
+        font-style: italic;
+        margin: 0 0 12px 0;
+        padding: 0;
+        border: 0;
+        > .fa,
+        > span .fa {
+            float: left;
+        }
+        @include fa-size-generator(20px);
+        img {
+            display: inline-block;
+            max-width: 40px;
+            max-height: 40px;
+        }
+        small {
+            display: inline-block;
+        }
+        .blockquote-text {
+            overflow: hidden;
+            font-size: $font-size-base;
+            text-align: left;
+            &:focus{
+                outline: none;
+            }
+        }
+        p {
+            padding: 24px;
+        }
+    }
+}
+
+@mixin carousel-control($position, $fa-position, $fa-padding) {
+    opacity: 1;
+    text-shadow: none;
+    color: gray('900');
+    font-size: inherit;
+    width: 5%;
+    .fa {
+        top: 50%;
+        background-color: #fff;
+        &:hover {
+            color: theme-color('primary');
+        }
+        @include media-breakpoint-down(sm) {
+            top: auto;
+            bottom: 0;
+        }
+    }
+    @include fa-size-generator(20px);
+    &.left {
+        background-image: none;
+        left: $position;
+        .fa {
+            left: $fa-position;
+            right: auto;
+            padding-right: $fa-padding;
+        }
+    }
+    &.right {
+        background-image: none;
+        right: $position;
+        .fa {
+            right: $fa-position;
+            left: auto;
+            padding-left: $fa-padding;
+        }
+    }
+}
+
+@mixin PlaceholderStyle($color) {
+    ::-webkit-input-placeholder { /* WebKit browsers */
+        color: $color;
+    }
+    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */
+        color: $color;
+        opacity: 1;
+    }
+    ::-moz-placeholder { /* Mozilla Firefox 19+ */
+        color: $color;
+        opacity: 1;
+    }
+    :-ms-input-placeholder { /* Internet Explorer 10+ */
+        color: $color;
+    }
+}
+
+//------------------------------------------------------------------------------
+// Themes specific style.
+//
+// This was introduced as a post-stable-12.0 review. The goal is to regroup
+// similar block of scss code (accross different theme) in theme_common
+// mixins which are then simply called in the related themes. This will ease
+// stable fixes and master refactorings.
+//------------------------------------------------------------------------------
+
+@mixin o-theme-responsive-spacing-classes($lg, $md, $sm, $xs) {
+    @include media-breakpoint-down(lg) {
+        @include o-spacing-all($lg);
+    }
+    @include media-breakpoint-down(md) {
+        @include o-spacing-all($md);
+    }
+    @include media-breakpoint-down(sm) {
+        @include o-spacing-all($sm);
+    }
+    @include media-breakpoint-down(xs) {
+        @include o-spacing-all($xs);
+    }
+}
+
+@mixin o-theme-cfa-bg-img-classes(
+        $bg1: $o-theme-bg-img-01, $bg2: $o-theme-bg-img-02, $bg3: $o-theme-bg-img-03,
+        $bg4: $o-theme-bg-img-04, $bg5: $o-theme-bg-img-05, $bg6: $o-theme-bg-img-06,
+        $bg7: $o-theme-bg-img-07) {
+    %cfa-bg-img {
+        background-size: cover;
+        background-position: center center;
+    }
+    .bg-img-01 {
+        @extend %cfa-bg-img;
+        background-image: $bg1;
+    }
+    .bg-img-02 {
+        @extend %cfa-bg-img;
+        background-image: $bg2;
+    }
+    .bg-img-03 {
+        @extend %cfa-bg-img;
+        background-image: $bg3;
+    }
+    .bg-img-04 {
+        @extend %cfa-bg-img;
+        background-image: $bg4;
+    }
+    .bg-img-05 {
+        @extend %cfa-bg-img;
+        background-image: $bg5;
+    }
+    .bg-img-06 {
+        @extend %cfa-bg-img;
+        background-image: $bg6;
+    }
+    .bg-img-07 {
+        @extend %cfa-bg-img;
+        background-image: $bg7;
+    }
+}
+
+// This is probably to deprecate
+@mixin o-theme-cfa-px-classes() {
+    .px14 {
+        font-size: 14px !important;
+        line-height: 25px;
+    }
+    .px16 {
+        font-size: 16px !important;
+        line-height: 28px;
+    }
+    .px18 {
+        font-size: 18px !important;
+        line-height: 30px;
+    }
+    .px22 {
+        font-size: 22px !important;
+        line-height: 32px;
+    }
+    .px30 {
+        font-size: 30px !important;
+        line-height: 30px;
+    }
+    .px36 {
+        font-size: 36px !important;
+        line-height: 36px;
+    }
+    .px42 {
+        font-size: 42px !important;
+        line-height: 42px;
+    }
+    .px50 {
+        font-size: 50px !important;
+        line-height: 50px;
+    }
+    .px60 {
+        font-size: 60px !important;
+        line-height: 60px;
+    }
+}
+
+@mixin o-theme-cfa-btn-main-style() {
+    .btn {
+        transition: all 0.3s ease-out;
+    }
+}
+
+@mixin o-theme-cfa-btn-style() {
+    @include o-theme-cfa-btn-main-style();
+
+    @if ($o-support-13-0-color-system) {
+        .btn {
+            // TODO this is not very consistent but this was how the theme was
+            // designed... should we keep this ?
+            @each $color, $alias in ('success': 'epsilon', 'info': 'gamma', 'warning': 'delta') {
+                &.btn-#{$color} {
+                    @include button-variant(theme-color($alias), theme-color($alias));
+                }
+                &.btn-outline-#{$color} {
+                    @include button-outline-variant(theme-color($alias));
+                }
+            }
+            &.btn-danger {
+                @include button-variant(gray('black'), gray('black'));
+            }
+            &.btn-outline-danger {
+                @include button-outline-variant(gray('black'), gray('black'));
+            }
+        }
+    }
+}
+
+@mixin o-theme-cfa-header-responsive-sizes() {
+    @include media-breakpoint-down(sm) {
+        h1 {
+            font-size: 30px;
+        }
+        h2 {
+            font-size: 26px;
+        }
+        h3 {
+            font-size: 22px;
+        }
+    }
+}
+
+@mixin o-theme-cfa-custom-form-control($with-color: true, $with-focus-border-width: true) {
+    border-top-width: 0px;
+    border-left-width: 0px;
+    border-right-width: 0px;
+    border-radius: 0px;
+    @if $with-color {
+        color: gray('700');
+    }
+
+    &:focus {
+        border-bottom-color: o-color('primary');
+        @if $with-focus-border-width {
+            border-bottom-width: 2px;
+        }
+    }
+
+    + .input-group-append {
+        margin-left: 1em;
+    }
+}
+
+@mixin o-theme-cfa-full-width-styles() {
+    #wrapwrap {
+        #wrap {
+            width: 100%;
+            max-width: 100%;
+            margin: auto;
+        }
+        .navbar > .container {
+            max-width: 100%;
+        }
+    }
+    #footer {
+        width: 100%;
+    }
+}
+
+@mixin o-theme-cfa-card-classes($font-size: $h4-font-size) {
+    .card-header {
+        background-color: inherit;
+        border: none;
+        font-size: $font-size;
+    }
+    .card-footer {
+        background: inherit;
+    }
+    .card {
+        text-align: center;
+        box-shadow: none;
+        border-radius: 0px;
+    }
+}
+
+@mixin o-theme-cfa-top-menu-style($padding: 0, $display: flex, $margin: 0, $media-padding: 0,
+    $bg-color: white, $top: auto, $font-size: inherit, $dropdown-item-color: o-color('delta'),
+    $dropdown-item-hover-bg-color: rgba(0, 0, 0, 0), $dropdown-item-hover-color: o-color('epsilon'),
+    $nav-link-color: rgba(0, 0, 0, 0.5), $font-weight: normal, $text-transform: none,
+    $transition: all 0s ease 0s) {
+
+    padding: $padding;
+    margin: $margin;
+    @include media-breakpoint-up(md) {
+        display: $display;
+    }
+    @include media-breakpoint-down(sm) {
+        padding: $media-padding;
+    }
+    .divider {
+        display: none;
+    }
+    .nav-link {
+        font-weight: $font-weight;
+        text-transform: $text-transform;
+        transition: $transition;
+
+        &.active {
+            font-weight: bolder;
+        }
+    }
+    .dropdown-menu, .navbar-collapse { // FIXME navbar should be removed ? (https://github.com/odoo/design-themes/commit/d20298fe41fdee5324c7e32f78e89d26edc71896#diff-042ad6434fc37ef55af3ca7db63906b8L259)
+        border-radius: 0px;
+        box-shadow: none;
+        top: $top;
+        .dropdown-item, .nav-link {
+            font-size: $font-size;
+        }
+        .dropdown-divider, .divider {
+            margin: 0;
+        }
+    }
+}
+
+@mixin o-theme-cfa-footer-style($font-size: 14px, $container-padding: 8px 65px 32px, $padding: 0, $border-top: 0, $margin-right: 50px, $h4-padding: 0 0 0 20px, $text-transform: uppercase) {
+
+    .container {
+        .js_language_selector .dropdown-toggle {
+            padding: 6px 20px;
+        }
+        p, .list-unstyled {
+            font-size: $font-size;
+        }
+        h4 {
+            margin-right: $margin-right;
+            padding: $h4-padding;
+            text-transform: $text-transform;
+        }
+    }
+    .o_footer_copyright {
+        border-top: $border-top;
+        padding: $padding;
+    }
+}
+
+@mixin o-theme-cfa-ecommerce-classes(
+    $nav-link-color: o-color('epsilon'), $nav-link-hover-color: o-color('beta'), $nav-link-hover-bg-color: gray('800'),
+    $nav-link-active-bg-color: rgba(0, 0, 0, 0), $nav-link-active-color: o-color('epsilon'),
+    $js-attributes-padding: 0px 15px 15px 15px, $js-attributes-strong-color: o-color('gamma'), $js-attributes-label-color: gray('700'),
+    $h6-padding-y: 10px, $h6-font-size: 13px, $h6-text-align: left, $h6-border-top: 0, $h6-border-bottom: 0, $h6-color: o-color('delta'),
+    $price-font-size: 12px, $product-price-padding: 0, $product-price-align: left, $btn-secondary-padding: 5px 10px,
+    $right-column-border-bottom: 1px solid gray('700'), $right-column-color: gray('700'), $right-column-font-weight: bold,
+    $add-cart-bg-color: gray('700'), $add-cart-color: white, $add-cart-width: auto, $price-h4: 25px) {
+
+    .breadcrumb {
+        padding-top: 20px;
+        font-size: 15px;
+    }
+    .form-inline .input-group {
+        .form-control {
+            width: 100%;
+            box-shadow: none;
+            &:focus {
+                box-shadow: none;
+            }
+        }
+        .input-group-btn {
+            width: 50px;
+            .btn {
+                line-height: 2.5;
+            }
+            .btn-secondary {
+                border-radius: 0px;
+                height: 50px;
+                width: 50px;
+            }
+        }
+    }
+    .js_add_cart_variants {
+        li strong {
+            font-size: 20px;
+        }
+    }
+    .oe_product  {
+        .btn.btn-danger {
+            @include button-variant(theme-color('danger'), theme-color('danger'));
+        }
+        .text-danger {
+            color: theme-color('danger') !important;
+        }
+        .o_wsale_product_information {
+            padding: 0px 15px;
+            h6 {
+                border-top: $h6-border-top;
+                border-bottom: $h6-border-bottom;
+                font-size: $h6-font-size;
+                margin: 0px;
+                padding: $h6-padding-y 0px;
+                text-align: $h6-text-align;
+            }
+            .oe_subdescription {
+                text-align: left;
+            }
+            .product_price {
+                font-size: $price-font-size;
+                padding: $product-price-padding;
+                position: relative;
+                text-align: $product-price-align;
+            }
+        }
+
+        .o_wsale_product_btn {
+            @include o-position-absolute(auto, map-get($spacers, 2), map-get($spacers, 2), auto);
+            padding: 0;
+
+            .btn {
+                padding: $btn-padding-y-sm $btn-padding-x-sm;
+                transform: scale(1);
+            }
+        }
+    }
+    .oe_product_cart {
+        &:not(:hover) {
+            border-color: transparent;
+        }
+    }
+
+    #products_grid {
+        &.o_wsale_layout_list {
+            .oe_product_cart {
+                border-bottom: $card-border-width solid $card-border-color;
+
+                .o_wsale_product_information {
+                    padding-right: 0px !important;
+
+                    h6 {
+                        text-align: left !important;
+                        font-size: 24px !important;
+                        border-bottom: none !important;
+                    }
+                    .product_price {
+                        display: inline-block;
+                        font-size: 18px !important;
+                    }
+                    .oe_subdescription {
+                        max-width: 70%;
+                    }
+                }
+                .o_wsale_product_btn {
+                    position: static;
+                    display: inline-block;
+                    width: auto;
+                    padding: 0;
+                    background: transparent;
+
+                    > .btn {
+                        padding: $btn-padding-y $btn-padding-x;
+                    }
+                }
+            }
+        }
+    }
+
+    /* =================== Categories =================== */
+    #products_grid_before {
+
+        .card, .card-body {
+            border: none !important;
+            padding: 0 !important;
+            background-color: transparent !important;
+            box-shadow: none !important;
+            text-align: left !important
+        }
+
+        .js_attributes {
+            padding: $js-attributes-padding;
+
+            .css_attribute_color.active {
+                border: 5px ridge o-color('primary');
+            }
+            li > ul {
+                display: block;
+                padding-left: 15px;
+            }
+            strong {
+                display: block;
+                padding-left: 10px;
+                margin-bottom: 10px;
+                margin-top: 10px;
+                text-transform: uppercase;
+            }
+        }
+    }
+    .list-unstyled .css_attribute_color.active {
+        border: 3px solid;
+    }
+    #website_sale_recommended_products {
+        padding: 30px;
+        h3 {
+            text-align: center;
+            border-bottom: 5px solid;
+            padding-bottom: 20px;
+        }
+        .row {
+            padding: 0 15px;
+        }
+        .col-lg-2 {
+            margin-top: 10px;
+            min-height: 160px;
+        }
+    }
+    .oe_cart {
+        .btn {
+            @include media-breakpoint-down(sm) {
+                padding: 10px;
+            }
+        }
+        .card {
+            background-color: rgba(0, 0, 0, 0);
+        }
+        strong {
+            color: gray('700');
+        }
+        #cart_products img {
+            max-width: 100px;
+        }
+        .a-submit {
+            padding: 20px 0px;
+            min-width: 150px;
+        }
+    }
+    #modal_optional_products {
+        .modal-title {
+            background: rgba(0, 0, 0, 0);
+        }
+        .input-group {
+            border-collapse: inherit;
+        }
+    }
+    .product-description {
+        text-align: center;
+        font-size: 18px;
+    }
+    #right_column {
+        color: gray('700');
+        a {
+            color: red;
+        }
+        .btn {
+            border-radius: 0px;
+            border: none;
+        }
+        .input-group-btn {
+            padding-left: 5px;
+        }
+        h4 {
+            border-bottom: $right-column-border-bottom;
+            color: $right-column-color;
+            font-size: 22px;
+            font-weight: $right-column-font-weight;
+        }
+        .fa {
+            padding-right: 5px;
+        }
+    }
+    .wizard {
+        box-shadow: none;
+        @include media-breakpoint-down(sm) {
+            padding-right: 0px;
+            li {
+                padding-left: 7px;
+            }
+        }
+    }
+    .oe_sale_acquirer_button .btn {
+        min-width: 150px !important;
+        text-transform: uppercase;
+        font-size: 20px;
+        margin-bottom: 20px;
+    }
+}
+
+@mixin o-theme-chd-bg-img-classes(
+        $bg1: $o-theme-bg-img-01, $bg2: $o-theme-bg-img-02, $bg3: $o-theme-bg-img-03,
+        $bg4: $o-theme-bg-img-04, $bg5: $o-theme-bg-img-05, $bg6: $o-theme-bg-img-06,
+        $bg7: $o-theme-bg-img-07, $bg8: $o-theme-bg-img-08, $bg9: $o-theme-bg-img-09,
+        $bg10: $o-theme-bg-img-10, $bg11: $o-theme-bg-img-11, $bg12: $o-theme-bg-img-12,
+        $font-color: white) {
+    %chd-bg-img {
+        background-size: cover;
+    }
+    .bg-img-01 {
+        @extend %chd-bg-img;
+        background-image: $bg1;
+    }
+    .bg-img-02 {
+        @extend %chd-bg-img;
+        background-image: $bg2;
+    }
+    .bg-img-03 {
+        @extend %chd-bg-img;
+        background-image: $bg3;
+    }
+    .bg-img-04 {
+        @extend %chd-bg-img;
+        background-image: $bg4;
+    }
+    .bg-img-05 {
+        @extend %chd-bg-img;
+        background-image: $bg5;
+    }
+    .bg-img-06 {
+        @extend %chd-bg-img;
+        background-image: $bg6;
+    }
+    .bg-img-07 {
+        @extend %chd-bg-img;
+        background-image: $bg7;
+    }
+    .bg-img-08 {
+        @extend %chd-bg-img;
+        background-image: $bg8;
+    }
+    .bg-img-09 {
+        @extend %chd-bg-img;
+        background-image: $bg9;
+    }
+    .bg-img-10 {
+        @extend %chd-bg-img;
+        background-image: $bg10;
+    }
+    .bg-img-11 {
+        @extend %chd-bg-img;
+        background-image: $bg11;
+    }
+    .bg-img-12 {
+        @extend %chd-bg-img;
+        background-image: $bg12;
+    }
+}
+
+@mixin o-theme-chd-bg-pattern-classes($o-theme-bg-patterns) {
+    @for $i from 1 through length($o-theme-bg-patterns) {
+        .bg-pattern-0#{$i} {
+            background-image: nth($o-theme-bg-patterns, $i);
+        }
+    }
+}
+
+@mixin o-theme-chd-bg-gradient-classes() {
+    .bg_gradient_primary_down {
+        background-image: linear-gradient( rgba(theme-color('primary'), 0), rgba(theme-color('primary'), 1) ),;
+    }
+    .bg_gradient_primary_up {
+        background-image: linear-gradient( rgba(theme-color('primary'), 1), rgba(theme-color('primary'), 0) ),;
+    }
+    .bg_gradient_white_down_thumb {
+        background-image: linear-gradient( rgba(#ccc, 1), rgba(white, 0.5) ),;
+    }
+    .bg_gradient_white_down {
+        background-image: linear-gradient( rgba(white, 0), rgba(white, 0.5) ),;
+    }
+    .bg_gradient_white_up_thumb {
+        background-image: linear-gradient( rgba(white, 0.5), rgba(#ccc, 1) ),;
+    }
+    .bg_gradient_white_up {
+        background-image: linear-gradient( rgba(white, 0.5), rgba(white, 0) ),;
+    }
+    .bg_gradient_black_up {
+        background-image: linear-gradient( rgba(black, 0.5), rgba(black, 0) ),;
+    }
+    .bg_gradient_black_down {
+        background-image: linear-gradient( rgba(black, 0), rgba(black, 0.5) ),;
+    }
+}
+
+@mixin o-theme-chd-bg-option-menu-styles() {
+    .bg_option_menu_img, .bg_option_menu_gradient {
+        height: 25px;
+        width: 120px;
+        border: 1px solid #ccc;
+    }
+}
+
+@mixin o-theme-chd-padding-l-r-classes() {
+    // Note: To be removed.
+    // Kept for back-compatibility only.
+    .padding-l-r-8 {
+        @extend .px-2;
+    }
+    .padding-l-r-16 {
+        @extend .px-3;
+    }
+    .padding-l-r-32 {
+        @extend .px-4;
+    }
+}
+
+@mixin o-theme-chd-footer-styles() {
+    p {
+        text-align: justify;
+    }
+}
+
+@mixin o-theme-chd-ecommerce-classes() {
+    #products_grid .oe_product section {
+        padding: 4px 15px 24px 10px;
+        border-top: 1px dotted;
+        background-color: rgba(o-color('primary'), 0.2);
+        h5 a {
+            font-weight: 300;
+        }
+        &:hover {
+            background-color: rgba(o-color('primary'), 0.4);
+            transition: all 0.3s ease-in-out;
+        }
+    }
+    #products_grid_before .nav-pills {
+        font-size: 15px;
+        .nav-link {
+            font-size: 16px;
+            margin: 1px 0px;
+
+            &.active, &:focus, &:hover {
+                transition: all 0.3s ease-in-out;
+                padding: 6px 6px;
+            }
+        }
+    }
+}
+
+@mixin o-theme-chd-big-icons-styles($bg-color: o-color('alpha'), $border-color: o-color('alpha'),
+    $transform: scale(1.1, 1.1), $fa-color: white, $h5-color: white) {
+
+    background-color: $bg-color !important;
+    border-color: $border-color;
+    transform: $transform;
+    .fa {
+        color: $fa-color !important;
+    }
+    h5.o_default_snippet_text {
+        color: $h5-color !important;
+    }
+}
+
+@mixin o-theme-sri-bg-effects-styles(
+    $opacity: 1, $border-top: 2px solid #fff, $border-bottom: 2px solid #848484,
+    $background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(241, 241, 241, 0.5) 50%, rgba(225, 225, 225, 0.5) 51%, rgba(246, 246, 246, 0.5) 100%)) {
+
+    position: relative;
+    opacity: 0.999; // Force stacking context creation
+    &:before {
+        content: "";
+        z-index: -1;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        display: block;
+        opacity: $opacity;
+        background: $background;
+        border-top: $border-top;
+        border-bottom: $border-bottom;
+    }
+}
+
+@mixin o-theme-sri-bg-effects-classes() {
+    // TODO: remove these classes in a future version (kept for compatibility)
+    .glossy {
+        @include o-theme-sri-bg-effects-styles($border-top: 2px solid rgba(255, 255, 255, 0.73), $border-bottom: 1px solid rgba(155, 155, 155, 0.73));
+    }
+    .glossy-medium {
+        @include o-theme-sri-bg-effects-styles($opacity: 0.7);
+    }
+    .glossy-soft {
+        @include o-theme-sri-bg-effects-styles($opacity: 0.3);
+    }
+    .insetShadow {
+        @include o-theme-sri-bg-effects-styles(
+            $background: linear-gradient(to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.2) 100%),
+            $border-top: 0, $border-bottom: 0);
+    }
+    .insetShadowBig {
+        @include o-theme-sri-bg-effects-styles(
+            $background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 50%,rgba(0, 0, 0, 0.4) 100%),
+            $border-top: 0, $border-bottom: 0);
+    }
+}
+
+@mixin o-theme-sri-bg-styles($std-url, $x, $y, $body-color, $url-2x) {
+    background-image: $std-url!important;
+    background-position: $x $y;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: $body-color;
+
+    @media
+    only screen and (-webkit-min-device-pixel-ratio: 2),
+    only screen and (   min--moz-device-pixel-ratio: 2),
+    only screen and (     -o-min-device-pixel-ratio: 2/1),
+    only screen and (        min-device-pixel-ratio: 2),
+    only screen and (                min-resolution: 192dpi),
+    only screen and (                min-resolution: 2dppx) {
+        background-image: $url-2x!important;
+    }
+}
+
+@mixin o-theme-sri-bg-image-styles($img, $body-color: white, $shadow-color : rgba(255, 0, 0, 0), $x: 50%, $y: 50%) {
+    @include o-theme-sri-bg-styles(url("/#{$o-theme-img-base-url}#{$img}"), $x, $y, $body-color, url("/#{$o-theme-img-base-url}#{$o-theme-pattern-2x-prefix}#{$img}"));
+    text-shadow: 0 1px 1px transparentize($shadow-color, 0.4);
+}
+
+@mixin o-theme-sri-bg-pattern-styles($img, $body-color: white, $x: 50%, $y: 50%) {
+    @include o-theme-sri-bg-styles(url("/#{$o-theme-pattern-base-url}#{$img}"), $x, $y, $body-color, url("/#{$o-theme-pattern-base-url}#{$o-theme-img-2x-prefix}#{$img}"));
+}
+
+@mixin o-theme-sri-bg-img-thumb-classes($backgrounds) {
+    @each $name, $image in $backgrounds {
+        .#{$name}-thumb {
+            background-image: url("/#{$o-theme-thumb-base-url}#{$image}") !important;
+            background-position: center center;
+            background-size: cover;
+        }
+    }
+}
+
+@mixin o-theme-sri-ecommerce-classes() {
+    // GENERAL
+    .oe_website_sale .wizard {
+        font-weight: bold;
+    }
+    // PRODUCTS' LIST
+    #products_grid {
+        div.oe_product {
+            padding-bottom: 15px;
+            padding-top: 10px;
+
+            &:nth-child(odd) {
+                background: rgba(black, 0.015);
+            }
+            &:first-child {
+                border-top: 1px solid rgba(black, 0.1);
+            }
+        }
+        td.oe_product, div.oe_product .oe_product_image  {
+            padding: 5px;
+        }
+    }
+    // PPRODUCTS CATEGORIES
+    #products_grid_before > ul > li {
+        &:first-child {
+            margin-bottom: 10px;
+        }
+        > a {
+            font-weight: bold;
+            margin-top: 5px;
+        }
+    }
+    // PPRODUCT PAGE
+    #product_detail {
+        > .row:first-of-type{
+            margin-bottom: 36px;
+        }
+        form .form-control, form .input-group .btn {
+            height: 36px;
+        }
+        #product_details {
+            position: relative;
+
+            &:before {
+                content: "";
+                width: 1px;
+                background-color: gray('200');
+                height: 100%;
+                @include o-position-absolute(0, auto, 0, -10%);
+            }
+            > h1 {
+                margin: 0 0 20px;
+            }
+            hr:first-of-type{
+                display: none;
+            }
+            // LIST VIEW OF VARIANTS
+            .js_product > label > input{
+                position: relative;
+                margin: 0 10px 0 0;
+            }
+            // PRODUCTS'S VARIANTS
+            ul.js_add_cart_variants {
+                margin-bottom: 20px;
+                display: table;
+                width: 100%;
+
+                > li {
+                    display: block;
+                    > strong {
+                        font-size: 0.9em;
+                        display: block;
+                        opacity: 0.7;
+                        padding: 0;
+                        margin-top: 20px;
+                    }
+                    > ul {
+                        display: block;
+                        padding-left: 0;
+                        margin-left: 0;
+
+                        &.list-unstyled > label {
+                            margin: 0!important;
+                        }
+                        &.list-inline {
+                            li {
+                                padding-left: 0;
+                            }
+                            label.css_attribute_color {
+                                opacity: 0.8;
+                                cursor: pointer;
+                                border: 1px solid gray('600');
+                                box-shadow: inset 0 0 0 2px #fff;
+                                border-radius: 2px;
+
+                                input {
+                                    cursor: pointer;
+                                    margin: 1px;
+                                    width: 18px;
+                                }
+                                &.active {
+                                    opacity: 1;
+                                    border: 2px solid #55e58e;
+                                }
+                                &:hover {
+                                    opacity: 1;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            @include media-breakpoint-up(md) {
+                .css_quantity {
+                    float: left;
+                }
+                #add_to_cart {
+                    margin-top: 0!important;
+                    margin-left: 10px;
+                }
+                ul.js_add_cart_variants > li {
+                    display: table-row;
+                    > strong, > ul {
+                        display: table-cell;
+                    }
+                }
+            }
+            .product_price h4 {
+                border-top: 1px solid #eee;
+                font-size: 35px;
+                margin-top: 25px;
+                padding-top: 10px;
+            }
+        }
+    }
+}
+
+@mixin o-theme-sri-header-styles($name, $text-transform, $font-weight) {
+    ##{$name}_header {
+        font-family: $headings-font-family;
+        .navbar {
+            padding: 20px 0 20px;
+
+            .navbar-nav {
+                > li > a {
+                    text-transform: $text-transform;
+                    font-weight: $font-weight;
+                }
+                .navbar-toggle {
+                    margin: 0;
+                }
+            }
+        }
+    }
+    #wrapwrap {
+        .o_header_affixed:not(.o_header_fixed) {
+            .navbar {
+                padding: 2px 20px;
+            }
+        }
+        &.o_header_overlay {
+            > main, > footer {
+                opacity: 0.999; // hack to create a stacking context allowing to place top_content on top of background but behind everything else
+            }
+            .move_to_top {
+                z-index: -1;
+                width: 100%;
+                @include o-position-absolute($top: 0, $left: 0);
+            }
+        }
+    }
+}
+
+@mixin o-theme-sri-ripple-animation-styles($name) {
+    .preserve3d, %preserve3d {
+        -webkit-transform-style: preserve-3d;
+        -moz-transform-style: preserve-3d;
+        transform-style: preserve-3d;
+    }
+
+    .btn {
+        z-index: 2;
+        @extend %preserve3d;
+    }
+
+    @keyframes ripple {
+        100% { opacity: 0; transform: scale(2.5); }
+    }
+
+    .#{$name}-ripple {
+        display: block;
+        position: absolute;
+        border-radius: 100%;
+        opacity: 0.3;
+        z-index: -1;
+        background: currentColor;
+        pointer-events: none;
+        transform: scale(0);
+
+        &.#{$name}-ripple-animated {
+            animation: ripple 0.35s ease-in;
+        }
+    }
+}
+
+@mixin o-theme-sri-v-align-class() {
+    .v-align {
+        position: relative;
+        top: 50%;
+        -webkit-transform: translateY(-50%);
+        -ms-transform: translateY(-50%);
+        transform: translateY(-50%);
+
+        @media only screen and (max-width : 480px) {
+            top: auto;
+            transform: translate(0, 0);
+        }
+        > *:first-child {
+            margin-top: 0;
+        }
+    }
+}
+
+@mixin o-theme-nmi-website-forum-classes($border-radius, $navbar-brand-color, $padding,
+    $hover-bg-color, $hover-color, $active-bg-color) {
+    .o_wforum_navbar_container {
+        .navbar {
+            padding-top: 0;
+            padding-bottom: 0;
+            border-radius: $border-radius;
+            .navbar-brand {
+                padding: 18px;
+                font-weight: $font-weight-bold;
+                color: $navbar-brand-color;
+            }
+            .navbar-nav .nav-link {
+                &:hover {
+                    background-color: $hover-bg-color;
+                    color: $hover-color;
+                }
+                &.active, &:focus {
+                    background-color: $active-bg-color;
+                    color: $hover-bg-color;
+                }
+            }
+        }
+        .input-group .form-control {
+            height: auto;
+            padding: $padding;
+            color: gray('900');
+            @include border-left-radius(20px);
+
+            + .input-group-append button {
+                padding: 6px 20px;
+            }
+        }
+    }
+    .website_forum #wrap {
+        // Ask a question - Button
+        .btn-group .btn {
+            padding: 6px 12px;
+            @include border-right-radius(0);
+            &.dropdown-toggle {
+                @include border-left-radius(0);
+                @include border-right-radius(20px);
+            }
+        }
+        // Ask a question - Editor icons
+        .btn-toolbar .btn {
+            background-color: rgba(0, 0, 0, 0);
+            color: #000;
+            border-radius: 0;
+            &.dropdown-toggle {
+                border-radius: 0;
+            }
+        }
+    }
+}
+
+@mixin o-theme-nmi-bg-pattern-classes($o-theme-bg-patterns) {
+    @for $i from 1 through length($o-theme-bg-patterns) {
+        .bg-pattern-0#{$i}{
+            background-image: nth($o-theme-bg-patterns, $i);
+            background-repeat: repeat !important;
+            background-size: inherit !important;
+        }
+    }
+}
+
+@mixin o-theme-nmi-bg-image-classes($o-theme-bg-imgs, $bg-size) {
+    @for $i from 1 through length($o-theme-bg-imgs) {
+        $j: $i;
+        @if $i < 10 { $j: 0#{$i}; }
+        .bg-img-#{$j}{
+            background: nth($o-theme-bg-imgs, $i);
+            background-repeat: no-repeat !important;
+            background-size: $bg-size !important;
+        }
+    }
+}
+
+@mixin o-theme-nmi-wrapwrap-styles($shadow-class, $border-radius) {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+
+    background-color: rgba(0, 0, 0, 0);
+
+    p:not(.s_share) a:not(.btn) {
+        text-decoration: underline;
+    }
+    .readable {
+        padding: 0 30px;
+        .container {
+            width: auto;
+        }
+    }
+    .text-underline {
+        text-decoration: underline;
+    }
+    .text-boxed {
+        border: 1px solid;
+        border-color: inherit;
+        padding: 20px;
+        border-radius: $border-radius;
+    }
+}
diff --git a/theme_common/static/src/scss/options/colors/option_colors_02_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_02_variables.scss
new file mode 100644
index 0000000..2823f13
--- /dev/null
+++ b/theme_common/static/src/scss/options/colors/option_colors_02_variables.scss
@@ -0,0 +1,3 @@
+$o-color-palette-number: 2;
+$o-theme-color-palette-number: 2;
+$o-gray-color-palette-number: 2;
diff --git a/theme_common/static/src/scss/options/colors/option_colors_03_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_03_variables.scss
new file mode 100644
index 0000000..9bdce54
--- /dev/null
+++ b/theme_common/static/src/scss/options/colors/option_colors_03_variables.scss
@@ -0,0 +1,3 @@
+$o-color-palette-number: 3;
+$o-theme-color-palette-number: 3;
+$o-gray-color-palette-number: 3;
diff --git a/theme_common/static/src/scss/options/colors/option_colors_04_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_04_variables.scss
new file mode 100644
index 0000000..9150d43
--- /dev/null
+++ b/theme_common/static/src/scss/options/colors/option_colors_04_variables.scss
@@ -0,0 +1,3 @@
+$o-color-palette-number: 4;
+$o-theme-color-palette-number: 4;
+$o-gray-color-palette-number: 4;
diff --git a/theme_common/static/src/scss/options/colors/option_colors_05_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_05_variables.scss
new file mode 100644
index 0000000..58021de
--- /dev/null
+++ b/theme_common/static/src/scss/options/colors/option_colors_05_variables.scss
@@ -0,0 +1,3 @@
+$o-color-palette-number: 5;
+$o-theme-color-palette-number: 5;
+$o-gray-color-palette-number: 5;
diff --git a/theme_common/static/src/scss/options/colors/option_colors_06_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_06_variables.scss
new file mode 100644
index 0000000..bd9a2b5
--- /dev/null
+++ b/theme_common/static/src/scss/options/colors/option_colors_06_variables.scss
@@ -0,0 +1,3 @@
+$o-color-palette-number: 6;
+$o-theme-color-palette-number: 6;
+$o-gray-color-palette-number: 6;
diff --git a/theme_common/static/src/scss/options/colors/option_colors_07_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_07_variables.scss
new file mode 100644
index 0000000..464ff4a
--- /dev/null
+++ b/theme_common/static/src/scss/options/colors/option_colors_07_variables.scss
@@ -0,0 +1,3 @@
+$o-color-palette-number: 7;
+$o-theme-color-palette-number: 7;
+$o-gray-color-palette-number: 7;
diff --git a/theme_common/static/src/scss/options/colors/option_colors_08_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_08_variables.scss
new file mode 100644
index 0000000..6fa642a
--- /dev/null
+++ b/theme_common/static/src/scss/options/colors/option_colors_08_variables.scss
@@ -0,0 +1,3 @@
+$o-color-palette-number: 8;
+$o-theme-color-palette-number: 8;
+$o-gray-color-palette-number: 8;
diff --git a/theme_common/static/src/scss/options/colors/option_colors_09_variables.scss b/theme_common/static/src/scss/options/colors/option_colors_09_variables.scss
new file mode 100644
index 0000000..da879d2
--- /dev/null
+++ b/theme_common/static/src/scss/options/colors/option_colors_09_variables.scss
@@ -0,0 +1,3 @@
+$o-color-palette-number: 9;
+$o-theme-color-palette-number: 9;
+$o-gray-color-palette-number: 9;
diff --git a/theme_common/static/src/scss/primary_variables.scss b/theme_common/static/src/scss/primary_variables.scss
new file mode 100644
index 0000000..72feaa2
--- /dev/null
+++ b/theme_common/static/src/scss/primary_variables.scss
@@ -0,0 +1,5 @@
+//------------------------------------------------------------------------------
+// s_medias_list
+//------------------------------------------------------------------------------
+
+$s-medias-list-bg-color-main: null; // Default to BS color