[ADD] Add more themes!

addons/theme_cobalt/LICENSE

@@ -0,0 +1,27 @@
+Odoo Proprietary License v1.0
+
+This software and associated files (the "Software") may only be used (executed,
+modified, executed after modifications) if you have purchased a valid license
+from the authors, typically via Odoo Apps, or if you have received a written
+agreement from the authors of the Software (see the COPYRIGHT file).
+
+You may develop Odoo modules that use the Software as a library (typically
+by depending on it, importing it and using its resources), but without copying
+any source code or material from the Software. You may distribute those
+modules under the license of your choice, provided that this license is
+compatible with the terms of the Odoo Proprietary License (For example:
+LGPL, MIT, or proprietary licenses similar to this one).
+
+It is forbidden to publish, distribute, sublicense, or sell copies of the Software
+or modified copies of the Software.
+
+The above copyright notice and this permission notice must be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

addons/theme_cobalt/__init__.py

@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+from . import models

addons/theme_cobalt/__manifest__.py

@@ -0,0 +1,37 @@
+{
+    'name': 'Cobalt Theme',
+    'description': 'Clean and sharp design.',
+    'category': 'Theme/Corporate',
+    'summary': 'Development, IT development, Design, Tech, Computers, IT, Blogs',
+    'sequence': 110,
+    'version': '2.0.0',
+    'author': 'Odoo S.A.',
+    'depends': ['website'],
+    'data': [
+        'data/ir_asset.xml',
+        'views/images.xml',
+        'views/customizations.xml',
+    ],
+    'images': [
+        'static/description/cobalt_poster.jpg',
+        'static/description/cobalt_screenshot.jpg',
+    ],
+    'images_preview_theme': {
+        'website.library_image_03': '/theme_cobalt/static/src/img/pictures/s_image_1.jpg',
+        'website.library_image_14': '/theme_cobalt/static/src/img/pictures/s_image_6.jpg',
+        'website.library_image_10': '/theme_cobalt/static/src/img/pictures/s_image_4.jpg',
+        'website.library_image_13': '/theme_cobalt/static/src/img/pictures/s_image_2.jpg',
+        'website.library_image_16': '/theme_cobalt/static/src/img/pictures/s_image_3.jpg',
+        'website.library_image_05': '/theme_cobalt/static/src/img/pictures/s_image_5.jpg',
+    },
+    'snippet_lists': {
+        'homepage': ['s_banner', 's_references', 's_text_image', 's_color_blocks_2', 's_images_wall'],
+    },
+    'license': 'LGPL-3',
+    'live_test_url': 'https://theme-cobalt.odoo.com',
+    'assets': {
+        'website.assets_editor': [
+            'theme_cobalt/static/src/js/tour.js',
+        ],
+    }
+}

addons/theme_cobalt/data/ir_asset.xml

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<record id="theme_cobalt.primary_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_cobalt.primary_variables_scss</field>
+    <field name="name">Primary variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_cobalt/static/src/scss/primary_variables.scss</field>
+</record>
+
+<record id="theme_cobalt.bootstrap_overridden_scss" model="theme.ir.asset">
+    <field name="key">theme_cobalt.bootstrap_overridden_scss</field>
+    <field name="name">Bootstrap overridden SCSS</field>
+    <field name="bundle">web._assets_frontend_helpers</field>
+    <field name="directive">prepend</field>
+    <field name="path">theme_cobalt/static/src/scss/bootstrap_overridden.scss</field>
+</record>
+
+</odoo>

addons/theme_cobalt/i18n/theme_cobalt.pot

@@ -0,0 +1,117 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# 	* theme_cobalt
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 15.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2021-12-13 08:00+0000\n"
+"PO-Revision-Date: 2021-12-13 08:00+0000\n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_picture
+msgid "<em>Our office in Dhaka</em>"
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_color_blocks_2
+msgid ""
+"Are you a startup or a seasoned company looking for a new brand identity?"
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_color_blocks_2
+msgid "Are you an established brand looking for ongoing creative services?"
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_banner
+msgid ""
+"Building game-changing digital experiences designed to set your brand apart."
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_text_image
+msgid "Digital Transformation"
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_three_columns
+msgid "Latest projects"
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_text_image
+msgid ""
+"Leader in digital business, we’re helping companies of all sizes to thrive "
+"in an ever-changing landscape."
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_banner
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_image_text
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_text_image
+msgid "Marketing"
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_title
+msgid "Projects"
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_call_to_action
+msgid "START NOW"
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_banner
+msgid "Start now"
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_image_text
+msgid "Strategy synchronising multiple channels"
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_banner
+msgid "The ultimate marketing platform for brands"
+msgstr ""
+
+#. module: theme_cobalt
+#: model:ir.model,name:theme_cobalt.model_theme_utils
+msgid "Theme Utils"
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_image_text
+msgid ""
+"We create a consistent customer experience through a detailed digital "
+"strategy built on precise customer research."
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_text_image
+msgid ""
+"We have collected solid experience in building native and cross-platform "
+"mobile applications and websites. Check our portfolio from clients around "
+"the world."
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_text_image
+msgid "Web &amp; App Development"
+msgstr ""
+
+#. module: theme_cobalt
+#: model_terms:theme.ir.ui.view,arch:theme_cobalt.s_text_image
+msgid "What we can do, <b>for you</b><br/>"
+msgstr ""

addons/theme_cobalt/models/__init__.py

@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+from . import theme_cobalt

addons/theme_cobalt/models/theme_cobalt.py

@@ -0,0 +1,10 @@
+from odoo import models
+
+
+class ThemeCobalt(models.AbstractModel):
+    _inherit = 'theme.utils'
+
+    def _theme_cobalt_post_copy(self, mod):
+        self.enable_asset("website.ripple_effect_scss")
+        self.enable_asset("website.ripple_effect_js")
+        self.enable_header_off_canvas()

addons/theme_cobalt/static/src/js/tour.js

@@ -0,0 +1,45 @@
+/** @odoo-module */
+
+import wTourUtils from 'website.tour_utils';
+
+const snippets = [
+    {
+        id: 's_banner',
+        name: 'Banner',
+    },
+    {
+        id: 's_references',
+        name: 'References',
+    },
+    {
+        id: 's_text_image',
+        name: 'Text - Image',
+    },
+    {
+        id: 's_color_blocks_2',
+        name: 'Big Boxes',
+    },
+    {
+        id: 's_title',
+        name: 'Title',
+    },
+    {
+        id: 's_image_gallery',
+        name: 'Images Wall',
+    },
+];
+
+
+wTourUtils.registerThemeHomepageTour("cobalt_tour", [
+    wTourUtils.assertCssVariable('--color-palettes-name', '"cobalt-1"'),
+    wTourUtils.dragNDrop(snippets[0]),
+    wTourUtils.clickOnText(snippets[0], 'h1', 'top'),
+    wTourUtils.goBackToBlocks(),
+
+    wTourUtils.dragNDrop(snippets[1]),
+    wTourUtils.dragNDrop(snippets[2]),
+    wTourUtils.dragNDrop(snippets[3]),
+
+    wTourUtils.dragNDrop(snippets[4]),
+    wTourUtils.dragNDrop(snippets[5]),
+]);

addons/theme_cobalt/static/src/scss/bootstrap_overridden.scss

@@ -0,0 +1,8 @@
+//------------------------------------------------------------------------------
+// Bootstrap Overridden
+//------------------------------------------------------------------------------
+
+// Headings
+
+$headings-line-height: 1.1 !default;
+$headings-font-weight: 600 !default;

addons/theme_cobalt/static/src/scss/primary_variables.scss

@@ -0,0 +1,75 @@
+//------------------------------------------------------------------------------
+// Fonts
+//------------------------------------------------------------------------------
+
+$o-theme-h1-font-size-multiplier: (62 / 16);
+$o-theme-h2-font-size-multiplier: (48 / 16);
+$o-theme-h3-font-size-multiplier: (32 / 16);
+$o-theme-h4-font-size-multiplier: (24 / 16);
+$o-theme-h5-font-size-multiplier: (20 / 16);
+$o-theme-h6-font-size-multiplier: 1.1;
+
+$o-theme-font-configs: (
+    'Inter': (
+        'family': ('Inter', serif),
+        'url': 'Inter:400,400i,600,600i,800,800i',
+    ),
+
+    'Abril Fatface': (
+        'family': ('Abril Fatface', serif),
+        'url': 'Abril+Fatface:300,300i,400,400i,700,700i',
+    ),
+);
+
+
+//------------------------------------------------------------------------------
+// Website customizations
+//------------------------------------------------------------------------------
+
+$o-website-values-palettes: (
+    (
+        'color-palettes-name': 'cobalt-1',
+
+        'font': 'Inter',
+
+        'hamburger-type': 'off-canvas',
+        'menu-box-shadow': false,
+
+        'btn-ripple': true,
+        'btn-secondary-outline': true,
+        'btn-border-radius': 2px,
+    ),
+);
+
+$o-selected-color-palettes-names: append($o-selected-color-palettes-names, 'cobalt-1');
+
+$o-color-palettes-compatibility-indexes: (
+    1: 'cobalt-1',
+    2: 'generic-1',
+    3: 'generic-2',
+    4: 'generic-3',
+    5: 'generic-4',
+    6: 'generic-5',
+    7: 'generic-6',
+    8: 'generic-7',
+    9: 'generic-8',
+    10: 'generic-9',
+    11: 'generic-10',
+    12: 'generic-11',
+    13: 'generic-12',
+    14: 'generic-13',
+    15: 'generic-14',
+    16: 'generic-15',
+    17: 'generic-16',
+    18: 'generic-17',
+);
+
+//------------------------------------------------------------------------------
+// Shapes
+//------------------------------------------------------------------------------
+// Keep for compatibility
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Blobs/03', (2: 2));
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Bold/01', (2: 2));
+$o-bg-shapes: add-footer-shape-colors-mapping('web_editor', 'Bold/01', (2: 'footer'));
+// New
+$o-bg-shapes: change-shape-colors-mapping('web_editor', 'Origins/11_001', (3: 1));

addons/theme_cobalt/views/customizations.xml

@@ -0,0 +1,250 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<!-- ==== Banner ===== -->
+<template id="s_banner" inherit_id="website.s_banner" name="Cobalt s_banner">
+    <!-- Content -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc2 pt152 pb128" remove="parallax pt96 pb96" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Origins/11_001","flip":["y"]}</attribute>
+    </xpath>
+    <xpath expr="//section/div" position="before">
+        <div class="o_we_shape o_web_editor_Origins_11_001 o_we_flip_y"/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
+        <attribute name="class" remove="jumbotron rounded pt32 pb32 o_cc o_cc1" separator=" "/>
+    </xpath>
+    <!-- Image -->
+    <xpath expr="//div[hasclass('col-lg-6')]" position="after">
+        <div class="pt16 pb16 o_colored_level col-lg-5 offset-lg-1">
+            <img src="/web_editor/shape/theme_cobalt/s_banner.svg?c1=o-color-1" style="width: 100%;" alt="Marketing"/>
+        </div>
+    </xpath>
+    <!-- Content -->
+    <xpath expr="//h1" position="replace" mode="inner">
+        The ultimate marketing platform for brands
+    </xpath>
+    <xpath expr="//p" position="replace">
+        <p class="lead">Building game-changing digital experiences designed to set your brand apart.</p>
+        <p><br/></p>
+    </xpath>
+    <xpath expr="//t[@t-esc='cta_btn_text']" position="replace" mode="inner">
+        Start now
+    </xpath>
+    <xpath expr="//a" position="attributes">
+        <attribute name="class" add="btn-lg flat" separator=" "/>
+    </xpath>
+</template>
+
+<!-- ==== Image-Text ===== -->
+<template id="s_image_text" inherit_id="website.s_image_text" name="Cobalt s_image_text">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt152 pb128" remove="pt32 pb32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Blobs/03","flip":[]}</attribute>
+    </xpath>
+
+    <xpath expr="//section/div" position="before">
+        <div class="o_we_shape o_web_editor_Blobs_03"/>
+    </xpath>
+    <!-- Layout -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
+        <attribute name="class" add="col-lg-5 offset-lg-1" remove="col-lg-6" separator=" "/>
+    </xpath>
+    <!-- Image -->
+    <xpath expr="//img" position="replace">
+        <img src="/web_editor/shape/theme_cobalt/s_image_text.svg?c1=o-color-1" style="width: 100%;" alt="Marketing"/>
+    </xpath>
+    <!-- Content -->
+    <xpath expr="//h2" position="replace" mode="inner">
+        Strategy synchronising multiple channels
+    </xpath>
+    <xpath expr="//p" position="replace" mode="inner">
+        We create a consistent customer experience through a detailed digital strategy built on precise customer research.
+    </xpath>
+    <xpath expr="//p[last()-1]" position="replace"/>
+    <xpath expr="//a[hasclass('btn')]" position="replace"/>
+</template>
+
+<!-- ==== Text-Image ===== -->
+<template id="s_text_image" inherit_id="website.s_text_image" name="Cobalt s_text_image">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt80 pb88" remove="pt32 pb32" separator=" "/>
+    </xpath>
+    <!-- Content -->
+    <xpath expr="//h2" position="replace" mode="inner">
+        What we can do, <b>for you</b><br/>
+    </xpath>
+    <xpath expr="//img" position="replace">
+            <img src="/web_editor/shape/theme_cobalt/s_text_image.svg?c1=o-color-1" style="width: 100%;" alt="Marketing"/>
+    </xpath>
+    <xpath expr="//p" position="replace"/>
+    <xpath expr="//p" position="replace">
+        <h5>Digital Transformation</h5>
+        <p>Leader in digital business, we’re helping companies of all sizes to thrive in an ever-changing landscape.</p>
+        <br/>
+        <h5>Web &amp; App Development</h5>
+        <p>We have collected solid experience in building native and cross-platform mobile applications and websites. Check our portfolio from clients around the world.</p>
+        <br/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
+        <attribute name="class" add="col-lg-5" remove="col-lg-6" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
+        <attribute name="class" add="col-lg-7" remove="col-lg-6" separator=" "/>
+    </xpath>
+    <xpath expr="//a[hasclass('btn')]" position="replace"/>
+</template>
+
+<!-- ======== TITLE ======== -->
+<template id="s_title" inherit_id="website.s_title" name="Cobalt s_title">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt56" remove="pt40" separator=" "/>
+    </xpath>
+    <xpath expr="//h1" position="replace" mode="inner">
+        Projects
+    </xpath>
+</template>
+
+<!-- ======== QUOTES ======== -->
+ <template id="s_quotes_carousel" inherit_id="website.s_quotes_carousel" name="Cobalt s_quotes_carousel">
+    <!-- Assign slide3 as 'active' and move it in first position -->
+    <xpath expr="//div[hasclass('carousel-inner')]/div" position="attributes">
+        <attribute name="class" remove="active" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('carousel-inner')]/div[3]" position="attributes">
+        <attribute name="class" add="active" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('carousel-inner')]/div" position="before">
+        <xpath expr="//div[hasclass('carousel-inner')]/div[3]" position="move"/>
+    </xpath>
+    <!-- Adjust  (new-)slide3 bg position -->
+    <xpath expr="//div[hasclass('carousel-inner')]/div[3]" position="attributes">
+        <attribute name="style" remove="background-position: 50% 50%;" add="background-position: 50% 20%;" separator=";"/>
+    </xpath>
+</template>
+
+<!-- ==== References ===== -->
+<template id="s_references" inherit_id="website.s_references" name="Cobalt s_references">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc1" remove="pt48 pb32" separator=" "/>
+    </xpath>
+    <xpath expr="//h2" position="replace"/>
+    <xpath expr="//p" position="replace"/>
+</template>
+
+<!-- ==== Three Columns ===== -->
+<template id="s_three_columns" inherit_id="website.s_three_columns" name="Cobalt s_three_columns">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" remove="o_cc o_cc2 pt32 pb32" add="pt72 pb120" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/01","flip":["x"]}</attribute>
+    </xpath>
+    <xpath expr="//section/div" position="before">
+        <div class="o_we_shape o_web_editor_Bold_01 o_we_flip_x"/>
+    </xpath>
+    <xpath expr="//div[hasclass('row')]" position="before">
+        <h2 style="text-align: center;">Latest projects</h2>
+        <p/>
+    </xpath>
+</template>
+
+<!-- ==== Call To Action ===== -->
+<template id="s_call_to_action" inherit_id="website.s_call_to_action" name="Cobalt s_call_to_action">
+    <xpath expr="//t[@t-esc='cta_btn_text']" position="replace" mode="inner">
+        START NOW
+    </xpath>
+</template>
+
+<!-- ==== Picture ===== -->
+<template id="s_picture" inherit_id="website.s_picture" name="Cobalt s_picture">
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt72 overflow-hidden" remove="o_cc o_cc2 pt48" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/01","flip":["y"]}</attribute>
+    </xpath>
+    <xpath expr="//section/div" position="before">
+        <div class="o_we_shape o_web_editor_Bold_01 o_we_flip_y"></div>
+    </xpath>
+    <xpath expr="//div[hasclass('container')]" position="attributes">
+        <attribute name="class" add="container-fluid px-5 px-lg-0" remove="container" separator=" "/>
+    </xpath>
+    <xpath expr="//img" position="attributes">
+        <attribute name="class" add="img-fluid" remove="img-thumbnail padding-large" separator=" "/>
+    </xpath>
+    <xpath expr="//figcaption" position="replace">
+        <figcaption class="text-400"><em>Our office in Dhaka</em></figcaption>
+    </xpath>
+</template>
+
+<!-- ==== Images Gallery ===== -->
+ <template id="s_image_gallery" inherit_id="website.s_image_gallery">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="s_image_gallery_cover" separator=" "/>
+    </xpath>
+</template>
+
+<!-- ==== Images Wall ===== -->
+<template id="s_images_wall" inherit_id="website.s_images_wall">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pb64" remove="pb24" separator=" "/>
+    </xpath>
+    <!-- Delete 3rd col -->
+    <xpath expr="(//div[hasclass('col-lg-4')])[last()]" position="replace"/>
+    <!-- Switch to col-4-->
+    <xpath expr="//div[hasclass('col-lg-4')]" position="attributes">
+        <attribute name="class" add="col-lg-6" remove="col-lg-4" separator=" "/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-4')][1]" position="attributes">
+        <attribute name="class" add="col-lg-6" remove="col-lg-4" separator=" "/>
+    </xpath>
+    <!-- Add one more row of images -->
+    <xpath expr="//div[hasclass('col-lg-6')]/img" position="after">
+        <img class="img img-fluid d-block" src="/web/image/website.library_image_14" data-index="1" data-name="Image"/>
+    </xpath>
+    <xpath expr="//div[hasclass('col-lg-6')][2]/img" position="after">
+        <img class="img img-fluid d-block" src="/web/image/website.library_image_16" data-index="1" data-name="Image"/>
+    </xpath>
+</template>
+
+<!-- ======== BIG BOXES ======== -->
+<template id="s_color_blocks_2" inherit_id="website.s_color_blocks_2" name="Cobalt s_color_blocks_2">
+    <!-- Left column -->
+    <xpath expr="//div[hasclass('col-lg-6')]" position="attributes">
+        <attribute name="class" add="o_cc4" remove="o_cc3" separator=" "/>
+        <attribute name="style" add="background-image: linear-gradient(135deg, var(--o-color-2) 0%, var(--o-color-1) 100%);" separator=";"/>
+    </xpath>
+    <!-- Left column - Icon -->
+    <xpath expr="//div[hasclass('col-lg-6')]//i" position="replace"/>
+    <!-- Left column - Text -->
+    <xpath expr="//div[hasclass('col-lg-6')]//p" position="replace"/>
+    <!-- Left column - Title -->
+    <xpath expr="//div[hasclass('col-lg-6')][1]//h2" position="replace" mode="inner">
+        Are you a startup or a seasoned company looking for a new brand identity?
+    </xpath>
+    <!-- Left column - Button -->
+    <xpath expr="//div[hasclass('col-lg-6')]//a[hasclass('btn')]" position="attributes">
+        <attribute name="class" add="btn-lg flat" separator=" "/>
+    </xpath>
+
+    <!-- Right column -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]" position="attributes">
+        <attribute name="class" add="o_cc3" remove="o_cc5" separator=" "/>
+        <attribute name="style" add="background-image: linear-gradient(315deg, var(--o-color-2) 0%, var(--o-color-1) 100%);" separator=";"/>
+    </xpath>
+    <!-- Right column - Filter -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//i" position="replace"/>
+    <!-- Right column - Title -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//h2" position="replace" mode="inner">
+        Are you an established brand looking for ongoing creative services?
+    </xpath>
+    <!-- Right column - Text -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//p" position="replace"/>
+    <!-- Right column - Button -->
+    <xpath expr="//div[hasclass('col-lg-6')][2]//a[hasclass('btn')]" position="attributes">
+        <attribute name="class" add="btn-lg flat" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

addons/theme_cobalt/views/images.xml

@@ -0,0 +1,234 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<!-- ======== Change default snippets images ======== -->
+<!-- Cover -->
+<record id="s_cover_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_cover_default_image</field>
+    <field name="name">website.s_cover_default_image</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_cover.jpg</field>
+</record>
+
+<!-- Banner -->
+<record id="s_banner_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_banner_default_image</field>
+    <field name="name">website.s_banner_default_image</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_banner.jpg</field>
+</record>
+
+<!-- (Big) Picture -->
+<record id="s_picture_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_picture_default_image</field>
+    <field name="name">website.s_picture_default_image</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_picture.jpg</field>
+</record>
+
+<!-- Columns -->
+<record id="library_image_11" model="theme.ir.attachment">
+    <field name="key">website.library_image_11</field>
+    <field name="name">website.library_image_11</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_three_columns_1.jpg</field>
+</record>
+<record id="s_three_columns_default_image_2" model="theme.ir.attachment">
+    <field name="key">s_three_columns_default_image_2</field>
+    <field name="name">s_three_columns_default_image_2</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_three_columns_2.jpg</field>
+</record>
+<record id="library_image_07" model="theme.ir.attachment">
+    <field name="key">website.library_image_07</field>
+    <field name="name">website.library_image_07</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_three_columns_3.jpg</field>
+</record>
+
+<!-- Masonry Blocks -->
+<record id="s_masonry_block_default_image_1" model="theme.ir.attachment">
+    <field name="key">website.s_masonry_block_default_image_1</field>
+    <field name="name">website.s_masonry_block_default_image_1</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_masonry_block_1.jpg</field>
+</record>
+
+<!-- Carousel Blocks -->
+<record id="s_carousel_default_image_1" model="theme.ir.attachment">
+    <field name="key">website.s_carousel_default_image_1</field>
+    <field name="name">website.s_carousel_default_image_1</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_carousel_1.jpg</field>
+</record>
+<record id="s_carousel_default_image_2" model="theme.ir.attachment">
+    <field name="key">website.s_carousel_default_image_2</field>
+    <field name="name">website.s_carousel_default_image_2</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_carousel_2.jpg</field>
+</record>
+<record id="s_carousel_default_image_3" model="theme.ir.attachment">
+    <field name="key">website.s_carousel_default_image_3</field>
+    <field name="name">website.s_carousel_default_image_3</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_carousel_3.jpg</field>
+</record>
+
+<!-- Parallax -->
+<record id="s_parallax_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_parallax_default_image</field>
+    <field name="name">website.s_parallax_default_image</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_parallax.jpg</field>
+</record>
+
+<!-- Team Snippet -->
+<record id="s_company_team_image_1" model="theme.ir.attachment">
+    <field name="key">website.s_company_team_image_1</field>
+    <field name="name">website.s_company_team_image_1</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_company_team_image_1.jpg</field>
+</record>
+<record id="s_company_team_image_2" model="theme.ir.attachment">
+    <field name="key">website.s_company_team_image_2</field>
+    <field name="name">website.s_company_team_image_2</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_company_team_image_2.jpg</field>
+</record>
+<record id="s_company_team_image_3" model="theme.ir.attachment">
+    <field name="key">website.s_company_team_image_3</field>
+    <field name="name">website.s_company_team_image_3</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_company_team_image_3.jpg</field>
+</record>
+<record id="s_company_team_image_4" model="theme.ir.attachment">
+    <field name="key">website.s_company_team_image_4</field>
+    <field name="name">website.s_company_team_image_4</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_company_team_image_4.jpg</field>
+</record>
+
+<!-- Quotes Carousel -->
+<!-- Avatar 1 -->
+<record id="s_quotes_carousel_demo_image_3" model="theme.ir.attachment">
+    <field name="key">website.s_quotes_carousel_demo_image_3</field>
+    <field name="name">website.s_quotes_carousel_demo_image_3</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_company_team_image_4.jpg</field>
+</record>
+<!-- Avatar 2 -->
+<record id="s_quotes_carousel_demo_image_4" model="theme.ir.attachment">
+    <field name="key">website.s_quotes_carousel_demo_image_4</field>
+    <field name="name">website.s_quotes_carousel_demo_image_4</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_company_team_image_2.jpg</field>
+</record>
+<!-- BG 2 -->
+<record id="s_quotes_carousel_demo_image_1" model="theme.ir.attachment">
+    <field name="key">website.s_quotes_carousel_demo_image_1</field>
+    <field name="name">website.s_quotes_carousel_demo_image_1</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_quotes_carousel_bg_slide2.jpg</field>
+</record>
+<!-- Avatar 3 -->
+<record id="s_quotes_carousel_demo_image_5" model="theme.ir.attachment">
+    <field name="key">website.s_quotes_carousel_demo_image_5</field>
+    <field name="name">website.s_quotes_carousel_demo_image_5</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_company_team_image_3.jpg</field>
+</record>
+<!-- BG 3 -->
+<record id="s_quotes_carousel_demo_image_2" model="theme.ir.attachment">
+    <field name="key">website.s_quotes_carousel_demo_image_2</field>
+    <field name="name">website.s_quotes_carousel_demo_image_2</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_quotes_carousel_bg_slide3.jpg</field>
+</record>
+
+<!-- Product Catalog (menu) -->
+<record id="s_product_catalog_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_product_catalog_default_image</field>
+    <field name="name">website.s_product_catalog_default_image</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_product_catalog.jpg</field>
+</record>
+
+<!-- Media List -->
+<record id="s_media_list_default_image_1" model="theme.ir.attachment">
+    <field name="key">website.s_media_list_default_image_1</field>
+    <field name="name">website.s_media_list_default_image_1</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_media_list_1.jpg</field>
+</record>
+<record id="s_media_list_default_image_2" model="theme.ir.attachment">
+    <field name="key">website.s_media_list_default_image_2</field>
+    <field name="name">website.s_media_list_default_image_2</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_media_list_2.jpg</field>
+</record>
+<record id="s_media_list_default_image_3" model="theme.ir.attachment">
+    <field name="key">website.s_media_list_default_image_3</field>
+    <field name="name">website.s_media_list_default_image_3</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_media_list_3.jpg</field>
+</record>
+
+<!-- Product List -->
+<record id="s_product_list_default_image_1" model="theme.ir.attachment">
+    <field name="key">website.s_product_list_default_image_1</field>
+    <field name="name">website.s_product_list_default_image_1</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_product_list_1.jpg</field>
+</record>
+<record id="s_product_list_default_image_2" model="theme.ir.attachment">
+    <field name="key">website.s_product_list_default_image_2</field>
+    <field name="name">website.s_product_list_default_image_2</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_product_list_2.jpg</field>
+</record>
+<record id="s_product_list_default_image_3" model="theme.ir.attachment">
+    <field name="key">website.s_product_list_default_image_3</field>
+    <field name="name">website.s_product_list_default_image_3</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_product_list_3.jpg</field>
+</record>
+<record id="s_product_list_default_image_4" model="theme.ir.attachment">
+    <field name="key">website.s_product_list_default_image_4</field>
+    <field name="name">website.s_product_list_default_image_4</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_product_list_4.jpg</field>
+</record>
+<record id="s_product_list_default_image_5" model="theme.ir.attachment">
+    <field name="key">website.s_product_list_default_image_5</field>
+    <field name="name">website.s_product_list_default_image_5</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_product_list_5.jpg</field>
+</record>
+<record id="s_product_list_default_image_6" model="theme.ir.attachment">
+    <field name="key">website.s_product_list_default_image_6</field>
+    <field name="name">website.s_product_list_default_image_6</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_product_list_6.jpg</field>
+</record>
+
+<!-- Popup -->
+<record id="s_popup_default_image" model="theme.ir.attachment">
+    <field name="key">website.s_popup_default_image</field>
+    <field name="name">website.s_popup_default_image</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_popup.jpeg</field>
+</record>
+
+<!-- Images Wall -->
+<record id="library_image_10" model="theme.ir.attachment">
+    <field name="key">website.library_image_10</field>
+    <field name="name">website.library_image_10</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_image_4.jpg</field>
+</record>
+<record id="library_image_13" model="theme.ir.attachment">
+    <field name="key">website.library_image_13</field>
+    <field name="name">website.library_image_13</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_image_2.jpg</field>
+</record>
+<record id="library_image_05" model="theme.ir.attachment">
+    <field name="key">website.library_image_05</field>
+    <field name="name">website.library_image_05</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_image_5.jpg</field>
+</record>
+<record id="library_image_16" model="theme.ir.attachment">
+    <field name="key">website.library_image_16</field>
+    <field name="name">website.library_image_16</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_image_3.jpg</field>
+</record>
+<record id="library_image_14" model="theme.ir.attachment">
+    <field name="key">website.library_image_14</field>
+    <field name="name">website.library_image_14</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_image_6.jpg</field>
+</record>
+<!-- Images Gallery -->
+<record id="library_image_08" model="theme.ir.attachment">
+    <field name="key">website.library_image_08</field>
+    <field name="name">website.library_image_08</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_gallery_1.jpg</field>
+</record>
+<record id="library_image_03" model="theme.ir.attachment">
+    <field name="key">website.library_image_03</field>
+    <field name="name">website.library_image_03</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_image_1.jpg</field>
+</record>
+<record id="library_image_02" model="theme.ir.attachment">
+    <field name="key">website.library_image_02</field>
+    <field name="name">website.library_image_02</field>
+    <field name="url">/theme_cobalt/static/src/img/pictures/s_gallery_3.jpg</field>
+</record>
+
+</odoo>

addons/theme_common/LICENSE

@@ -0,0 +1,27 @@
+Odoo Proprietary License v1.0
+
+This software and associated files (the "Software") may only be used (executed,
+modified, executed after modifications) if you have purchased a valid license
+from the authors, typically via Odoo Apps, or if you have received a written
+agreement from the authors of the Software (see the COPYRIGHT file).
+
+You may develop Odoo modules that use the Software as a library (typically
+by depending on it, importing it and using its resources), but without copying
+any source code or material from the Software. You may distribute those
+modules under the license of your choice, provided that this license is
+compatible with the terms of the Odoo Proprietary License (For example:
+LGPL, MIT, or proprietary licenses similar to this one).
+
+It is forbidden to publish, distribute, sublicense, or sell copies of the Software
+or modified copies of the Software.
+
+The above copyright notice and this permission notice must be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
+DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
+ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.

addons/theme_common/__init__.py

@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+from . import models

addons/theme_common/__manifest__.py

@@ -0,0 +1,16 @@
+{
+    'name': 'Theme Common',
+    'summary': 'Snippets Library',
+    'description': 'Snippets library containing snippets to be styled in themes.',
+    'category': 'Hidden',
+    'version': '1.1',
+    'depends': ['website'],
+    'data': [
+        'data/data.xml',
+        'views/old_snippets/s_column.xml',
+        'views/old_snippets/s_page_header.xml',
+        'views/old_snippets/s_three_columns_circle.xml',
+    ],
+    'application': False,
+    'license': 'LGPL-3',
+}

addons/theme_common/data/data.xml

@@ -0,0 +1,3 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+</odoo>

addons/theme_common/data/ir_asset.xml

@@ -0,0 +1,474 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<record id="theme_common.s_clonable_boxes_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_clonable_boxes_000_scss</field>
+    <field name="name">Clonable boxes 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_clonable_boxes/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_banner_parallax_000_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_banner_parallax_000_variables_scss</field>
+    <field name="name">Banner parallax 000 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/old_snippets/s_banner_parallax/000_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_banner_parallax_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_banner_parallax_000_scss</field>
+    <field name="name">Banner parallax 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_banner_parallax/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_features_carousel_000_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_features_carousel_000_variables_scss</field>
+    <field name="name">Features carousel 000 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/old_snippets/s_features_carousel/000_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_features_carousel_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_features_carousel_000_scss</field>
+    <field name="name">Features carousel 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_features_carousel/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_text_picture_text_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_text_picture_text_000_scss</field>
+    <field name="name">Text picture text 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_text_picture_text/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_color_blocks_4_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_color_blocks_4_000_scss</field>
+    <field name="name">Color blocks 4 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_color_blocks_4/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_products_carousel_000_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_products_carousel_000_variables_scss</field>
+    <field name="name">Products carousel 000 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/old_snippets/s_products_carousel/000_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_products_carousel_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_products_carousel_000_scss</field>
+    <field name="name">Products carousel 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_products_carousel/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_two_columns_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_two_columns_000_scss</field>
+    <field name="name">Two columns 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_two_columns/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_big_image_parallax_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_big_image_parallax_000_scss</field>
+    <field name="name">Big image parallax 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_big_image_parallax/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_news_carousel_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_news_carousel_000_scss</field>
+    <field name="name">News carousel 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_news_carousel/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_event_list_000_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_event_list_000_variables_scss</field>
+    <field name="name">Event list 000 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/old_snippets/s_event_list/000_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_event_list_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_event_list_000_scss</field>
+    <field name="name">Event list 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_event_list/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_images_row_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_images_row_000_scss</field>
+    <field name="name">Images row 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_images_row/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_profile_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_profile_000_scss</field>
+    <field name="name">Profile 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_profile/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_showcase_slider_000_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_showcase_slider_000_variables_scss</field>
+    <field name="name">Showcase slider 000 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/old_snippets/s_showcase_slider/000_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_showcase_slider_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_showcase_slider_000_scss</field>
+    <field name="name">Showcase slider 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_showcase_slider/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_showcase_slider_000_js" model="theme.ir.asset">
+    <field name="key">theme_common.s_showcase_slider_000_js</field>
+    <field name="name">Showcase slider 000 JS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_showcase_slider/000.js</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_full_menu_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_full_menu_000_scss</field>
+    <field name="name">Full menu 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_full_menu/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_team_profiles_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_team_profiles_000_scss</field>
+    <field name="name">Team profiles 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_team_profiles/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_separator_nav_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_separator_nav_000_scss</field>
+    <field name="name">Separator nav 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_separator_nav/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_compact_menu_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_compact_menu_000_scss</field>
+    <field name="name">Compact menu 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_compact_menu/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_big_image_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_big_image_000_scss</field>
+    <field name="name">Big image 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_big_image/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_menu_three_columns_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_menu_three_columns_000_scss</field>
+    <field name="name">Menu three columns 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_menu_three_columns/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_event_slide_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_event_slide_000_scss</field>
+    <field name="name">Event slide 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_event_slide/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_animated_boxes_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_animated_boxes_000_scss</field>
+    <field name="name">Animated boxes 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_animated_boxes/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_animated_boxes_000_js" model="theme.ir.asset">
+    <field name="key">theme_common.s_animated_boxes_000_js</field>
+    <field name="name">Animated boxes 000 JS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_animated_boxes/000.js</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_css_slider_000_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_css_slider_000_variables_scss</field>
+    <field name="name">Css slider 000 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/old_snippets/s_css_slider/000_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_css_slider_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_css_slider_000_scss</field>
+    <field name="name">Css slider 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_css_slider/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_css_slider_000_js" model="theme.ir.asset">
+    <field name="key">theme_common.s_css_slider_000_js</field>
+    <field name="name">Css slider 000 JS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_css_slider/000.js</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_color_blocks_img_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_color_blocks_img_000_scss</field>
+    <field name="name">Color blocks img 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_color_blocks_img/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_showcase_image_000_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_showcase_image_000_variables_scss</field>
+    <field name="name">Showcase image 000 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/old_snippets/s_showcase_image/000_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_showcase_image_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_showcase_image_000_scss</field>
+    <field name="name">Showcase image 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_showcase_image/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_pricing_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_pricing_000_scss</field>
+    <field name="name">Pricing 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_pricing/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_header_text_big_picture_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_header_text_big_picture_000_scss</field>
+    <field name="name">Header text big picture 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_header_text_big_picture/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_progress_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_progress_000_scss</field>
+    <field name="name">Progress 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_progress/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_icon_box_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_icon_box_000_scss</field>
+    <field name="name">Icon box 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_icon_box/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_big_icons_000_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_big_icons_000_variables_scss</field>
+    <field name="name">Big icons 000 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/old_snippets/s_big_icons/000_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_big_icons_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_big_icons_000_scss</field>
+    <field name="name">Big icons 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_big_icons/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_mini_nav_bar_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_mini_nav_bar_000_scss</field>
+    <field name="name">Mini nav bar 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_mini_nav_bar/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_mini_nav_bar_000_js" model="theme.ir.asset">
+    <field name="key">theme_common.s_mini_nav_bar_000_js</field>
+    <field name="name">Mini nav bar 000 JS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_mini_nav_bar/000.js</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_discount_000_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_discount_000_variables_scss</field>
+    <field name="name">Discount 000 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/old_snippets/s_discount/000_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_discount_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_discount_000_scss</field>
+    <field name="name">Discount 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_discount/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.s_images_carousel_000_scss" model="theme.ir.asset">
+    <field name="key">theme_common.s_images_carousel_000_scss</field>
+    <field name="name">Images carousel 000 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/old_snippets/s_images_carousel/000.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.option_colors_02_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.option_colors_02_variables_scss</field>
+    <field name="name">Option colors 02 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/scss/options/colors/option_colors_02_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.option_colors_03_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.option_colors_03_variables_scss</field>
+    <field name="name">Option colors 03 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/scss/options/colors/option_colors_03_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.option_colors_04_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.option_colors_04_variables_scss</field>
+    <field name="name">Option colors 04 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/scss/options/colors/option_colors_04_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.option_colors_05_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.option_colors_05_variables_scss</field>
+    <field name="name">Option colors 05 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/scss/options/colors/option_colors_05_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.option_colors_06_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.option_colors_06_variables_scss</field>
+    <field name="name">Option colors 06 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/scss/options/colors/option_colors_06_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.option_colors_07_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.option_colors_07_variables_scss</field>
+    <field name="name">Option colors 07 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/scss/options/colors/option_colors_07_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.option_colors_08_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.option_colors_08_variables_scss</field>
+    <field name="name">Option colors 08 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/scss/options/colors/option_colors_08_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.option_colors_09_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.option_colors_09_variables_scss</field>
+    <field name="name">Option colors 09 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/scss/options/colors/option_colors_09_variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.primary_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.primary_variables_scss</field>
+    <field name="name">Primary variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">theme_common/static/src/scss/primary_variables.scss</field>
+</record>
+
+<record id="theme_common.fonts_scss" model="theme.ir.asset">
+    <field name="key">theme_common.fonts_scss</field>
+    <field name="name">Fonts SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">theme_common/static/src/scss/fonts.scss</field>
+</record>
+
+<record id="theme_common.compatibility_saas_10_1_scss" model="theme.ir.asset">
+    <field name="key">theme_common.compatibility_saas_10_1_scss</field>
+    <field name="name">Compatibility saas 10 1 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">/theme_common/static/src/scss/compatibility-saas-10-1.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.compatibility_saas_10_2_scss" model="theme.ir.asset">
+    <field name="key">theme_common.compatibility_saas_10_2_scss</field>
+    <field name="name">Compatibility saas 10 2 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">/theme_common/static/src/scss/compatibility-saas-10-2.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.compatibility_saas_11_4_variables_scss" model="theme.ir.asset">
+    <field name="key">theme_common.compatibility_saas_11_4_variables_scss</field>
+    <field name="name">Compatibility saas 11 4 variables SCSS</field>
+    <field name="bundle">web._assets_primary_variables</field>
+    <field name="path">/theme_common/static/src/scss/compatibility-saas-11.4-variables.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+<record id="theme_common.compatibility_saas_11_4_scss" model="theme.ir.asset">
+    <field name="key">theme_common.compatibility_saas_11_4_scss</field>
+    <field name="name">Compatibility saas 11 4 SCSS</field>
+    <field name="bundle">web.assets_frontend</field>
+    <field name="path">/theme_common/static/src/scss/compatibility-saas-11.4.scss</field>
+    <field name="active" eval="False"/>
+</record>
+
+</odoo>

addons/theme_common/i18n/theme_common.pot

@@ -0,0 +1,21 @@
+# Translation of Odoo Server.
+# This file contains the translation of the following modules:
+# 	* theme_common
+#
+msgid ""
+msgstr ""
+"Project-Id-Version: Odoo Server 15.0\n"
+"Report-Msgid-Bugs-To: \n"
+"POT-Creation-Date: 2021-12-13 08:00+0000\n"
+"PO-Revision-Date: 2021-12-13 08:00+0000\n"
+"Last-Translator: \n"
+"Language-Team: \n"
+"MIME-Version: 1.0\n"
+"Content-Type: text/plain; charset=UTF-8\n"
+"Content-Transfer-Encoding: \n"
+"Plural-Forms: \n"
+
+#. module: theme_common
+#: model:ir.model,name:theme_common.model_theme_utils
+msgid "Theme Utils"
+msgstr ""

addons/theme_common/models/__init__.py

@@ -0,0 +1,3 @@
+# -*- coding: utf-8 -*-
+# Part of Odoo. See LICENSE file for full copyright and licensing details.
+from . import theme_common

addons/theme_common/models/theme_common.py

@@ -0,0 +1,15 @@
+from odoo import models
+
+
+class ThemeCommon(models.AbstractModel):
+    _inherit = 'theme.utils'
+
+    def _theme_common_post_copy(self, mod):
+        # Reset all default color when switching themes
+        self.disable_asset('theme_common.option_colors_02_variables')
+        self.disable_asset('theme_common.option_colors_03_variables')
+        self.disable_asset('theme_common.option_colors_04_variables')
+        self.disable_asset('theme_common.option_colors_05_variables')
+        self.disable_asset('theme_common.option_colors_06_variables')
+        self.disable_asset('theme_common.option_colors_07_variables')
+        self.disable_asset('theme_common.option_colors_08_variables')

addons/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]);
+        }
+    },
+});
+});

addons/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);
+
+});

addons/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',
+});
+});

addons/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(md) {
+            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;
+    }
+}

addons/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(md) {
+        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(md) {
+                    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;
+                    }
+                }
+            }
+        }
+    }
+}

addons/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 {}

addons/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');
+}

addons/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'));
+        }
+    }
+}

addons/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;
+
+    }
+}

addons/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;
+    }
+}

addons/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(lg) {
+                width: 100%;
+            }
+        }
+    }
+}
+
+html[data-no-flex] .s_clonable_boxes {
+    width: 100%;
+    overflow: hidden;
+
+    .item {
+        height: 200px;
+        overflow: hidden;
+        text-align: center;
+    }
+}

addons/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(lg) {
+        [class*="col-lg-"] {
+            flex: 1 1 100%;
+        }
+    }
+
+    img {
+        max-width: 100%;
+        height: auto;
+    }
+}

addons/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;
+
+}

addons/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 map-get($grays, '200');
+
+                > .menublock {
+                    margin: 0 0 0 20px;
+                    padding: 0 20px 0 0;
+                    border-bottom: 1px solid map-get($grays, '200');
+                    float: left;
+                    h4 {
+                        font-weight: bold;
+                    }
+                    span {
+                        list-style: none;
+                    }
+                }
+            }
+        }
+    }
+}

addons/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'));
+        },
+    });
+});

addons/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;
+        }
+    }
+}

addons/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 {}

addons/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(map-get($grays, '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: map-get($grays, '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: map-get($grays, '800');
+    .code {
+        padding: 10px 15px;
+    }
+}

addons/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 {}

addons/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: map-get($grays, '800');
+                font-size: 11px;
+                font-weight: 300;
+
+                &:hover {
+                    color: map-get($grays, '800');
+                    background-color: map-get($grays, '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: map-get($grays, '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(map-get($grays, '200'), 10%);
+                > li {
+                    width: 100%;
+                    height: 33.333%;
+                    > a {
+                        padding: 9px 0px;
+                    }
+                }
+            }
+        }
+    }
+}

addons/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;

addons/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 map-get($grays, '200');
+                border-bottom: 1px solid map-get($grays, '200');
+                text-align: left;
+                h4 {
+                    text-align: center;
+                }
+            }
+            .event {
+                height: 400px;
+                overflow: hidden;
+                overflow-y: scroll;
+                padding-top: 40px;
+                @include media-breakpoint-down(md) {
+                    overflow: visible;
+                    height: auto;
+                }
+                img {
+                    width: 100%;
+                }
+            }
+        }
+    }
+    .fa {
+        display: inline-block;
+        margin-top: 50px;
+    }
+}

addons/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, map-get($grays, '600'));
+        }
+        text-align: center;
+        padding-bottom: 30px;
+    }
+    .carousel-indicators {
+        border-top: 1px dotted map-get($grays, '600');
+        padding-top: 32px;
+        visibility: $s-features-carousel-indicators-visible;
+        li {
+            border: 1px solid map-get($grays, '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(md) {
+        [class*="col-lg-"] > p {
+            padding: 0 30px;
+        }
+    }
+}

addons/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 {}

addons/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 map-get($grays, '200');
+            .row {
+                .s_full_menu_content_description {
+                    border-bottom: 1px solid map-get($grays, '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;
+        }
+    }
+}

addons/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;
+    }
+}

addons/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;
+    }
+}

addons/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(lg) {
+            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;
+    }
+}

addons/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;
+    }
+}

addons/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(md) {
+                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(md) {
+                    line-height: 100px;
+                    line-height: 100px;
+                }
+                @media only screen and (max-width : 360px) { // FIXME
+                    height: 80px;
+                    line-height: 80px;
+                }
+            }
+        }
+    }
+}