[IMP] theme_nano: update the theme

This commit updates the theme to improve the design with new colors, new
pictures and new snippet customizations.

task-2590182

Part-of: odoo/design-themes#500

theme_nano/views/snippets/s_banner.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_banner" inherit_id="website.s_banner">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt256 o_cc o_cc5" remove="pt96 pb96" separator=" "/>
+        <attribute name="style" add="background-position: 50% 100%;" remove="background-position: 50% 0;" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/12_001"}</attribute>
+    </xpath>
+    <xpath expr="//*[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Bold_12_001"/>
+    </xpath>
+    <xpath expr="//*[hasclass('container')]" position="attributes">
+        <attribute name="class" add="container-fluid" remove="container" separator=" "/>
+    </xpath>
+    <!-- Box -->
+    <xpath expr="//*[hasclass('jumbotron')]" position="attributes">
+        <attribute name="class" add="o_cc5" remove="o_cc1" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_nano/views/snippets/s_carousel.xml

@@ -1,31 +1,20 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <template id="s_carousel" inherit_id="website.s_carousel">
-        <!-- Carousel -->
-        <xpath expr="//div[hasclass('s_carousel')]" position="attributes">
-            <attribute name="class" add="s_carousel_bordered carousel-fade" remove="s_carousel_default" separator=" "/>
-        </xpath>
-        <!-- Slide #01 -->
-        <xpath expr="//div[hasclass('carousel-item')][1]" position="attributes">
-             <attribute name="class" remove="pt152 pb152" separator=" "/>
-            <attribute name="style" add="background-position: 50% 50%;" separator=" "/>
-        </xpath>
-        <xpath expr="//div[hasclass('carousel-item')][1]//div[hasclass('carousel-content')]" position="attributes">
-            <attribute name="class" add="col-lg-8 offset-lg-2 bg-white-50 pt200 pb192 text-center" remove="col-lg-6" separator=" "/>
-        </xpath>
-        <xpath expr="//div[hasclass('carousel-item')][1]//h2" position="replace">
-            <h2><font style="font-size: 48px;">Creative Studio</font></h2>
-        </xpath>
-        <xpath expr="//div[hasclass('carousel-item')][1]//p" position="replace">
-            <p class="lead">We combine smart design with rich technology <br/>to craft innovative products.</p>
-        </xpath>
-        <!-- Slide #02 -->
-        <xpath expr="//div[hasclass('carousel-item')][2]//div[hasclass('carousel-content')]" position="attributes">
-            <attribute name="class" add="bg-white-50" remove="bg-black-50" separator=" "/>
-        </xpath>
-        <xpath expr="//div[hasclass('carousel-item')][2]//div[hasclass('s_hr')]" position="replace"/>
-        <!-- Slide #03 -->
-        <xpath expr="//div[hasclass('carousel-item')][3]" position="replace"/>
-        <xpath expr="//*[@data-slide-to='2']" position="replace"/>
-    </template>
+
+<template id="s_carousel" inherit_id="website.s_carousel">
+    <!-- Carousel -->
+    <xpath expr="//*[hasclass('s_carousel')]" position="attributes">
+        <attribute name="class" add="s_carousel_bordered carousel-fade bg-o-color-4" remove="s_carousel_default" separator=" "/>
+    </xpath>
+    <!-- Slide #01 -->
+    <xpath expr="//*[hasclass('carousel-content')][1]" position="attributes">
+        <attribute name="class" add="col-lg-8 offset-lg-2 bg-black-50 text-center pt48 pb40" remove="col-lg-6" separator=" "/>
+    </xpath>
+    <!-- Slide #02 -->
+    <xpath expr="//*[hasclass('s_hr')][1]" position="replace"/>
+    <!-- Slide #03 -->
+    <xpath expr="//*[hasclass('carousel-item')][3]" position="replace"/>
+    <xpath expr="//*[@data-slide-to='2']" position="replace"/>
+</template>
+
 </odoo>

theme_nano/views/snippets/s_cover.xml

@@ -0,0 +1,27 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_cover" inherit_id="website.s_cover">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc5 pt200 pb200" remove="parallax s_parallax_is_fixed bg-black-50 pt96 pb96" separator=" "/>
+        <attribute name="data-scroll-background-ratio">0</attribute>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Bold/12_001","flip":["x"]}</attribute>
+        <attribute name="style">background-image: url('/web/image/website.s_cover_default_image'); background-position: 50% 0;</attribute>
+    </xpath>
+    <xpath expr="//*[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Bold_12_001 o_we_flip_x"/>
+    </xpath>
+    <xpath expr="//*[hasclass('o_we_bg_filter')]" position="replace"/>
+    <xpath expr="//*[hasclass('s_parallax_bg')]" position="replace"/>
+    <!-- Title & Text -->
+    <xpath expr="//h1//font" position="replace" mode="inner">
+        Creative Studio
+    </xpath>
+    <xpath expr="//p" position="replace" mode="inner">
+        We combine smart design with rich technology <br/>to craft innovative products.
+    </xpath>
+</template>
+
+</odoo>
+

theme_nano/views/snippets/s_features.xml

@@ -1,37 +1,39 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <template id="s_features" inherit_id="website.s_features">
-        <!-- Section -->
-        <xpath expr="//section" position="attributes">
-            <attribute name="class" add="pb48" remove="pb32" separator=" "/>
-        </xpath>
-        <!-- Column #01 -->
-        <xpath expr="//div[hasclass('row')]/div[1]" position="attributes">
-            <attribute name="class" add="col-lg-5 offset-lg-1" remove="col-lg-4" separator=" "/>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[1]/i" position="replace">
-            <i class="fa fa-3x fa-asterisk rounded bg-o-color-5 m-4"></i>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[1]/h3" position="replace">
-            <h2>Intuitive</h2>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[1]/p" position="replace">
-            <p>We create easy-to-use products.</p>
-        </xpath>
-        <!-- Column #02 -->
-        <xpath expr="//div[hasclass('row')]/div[2]" position="attributes">
-            <attribute name="class" add="col-lg-5" remove="col-lg-4" separator=" "/>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[2]/i" position="replace">
-            <i class="fa fa-3x fa-arrows-alt rounded bg-primary m-4"></i>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[2]/h3" position="replace">
-            <h2>Adaptable</h2>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[2]/p" position="replace">
-            <p>We create modular solutions.</p>
-        </xpath>
-        <!-- Column #03 -->
-        <xpath expr="//div[hasclass('row')]/div[3]" position="replace"/>
-    </template>
+
+<template id="s_features" inherit_id="website.s_features">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt40 pb48 o_cc o_cc5" remove="pt32 pb32" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Floats/12"}</attribute>
+    </xpath>
+    <xpath expr="//*[hasclass('container')]" position="before">
+        <div class="o_we_shape o_web_editor_Floats_12"/>
+    </xpath>
+    <!-- Column #01 -->
+    <xpath expr="//h3" position="replace" mode="inner">
+        Intuitive
+    </xpath>
+    <xpath expr="//p" position="replace" mode="inner">
+        We create easy-to-use products.
+    </xpath>
+    <!-- Column #02 -->
+    <xpath expr="(//i)[2]" position="attributes">
+        <attribute name="class" add="bg-o-color-4" remove="bg-o-color-5" separator=" "/>
+    </xpath>
+    <xpath expr="(//h3)[2]" position="replace" mode="inner">
+        Adaptable
+    </xpath>
+    <xpath expr="(//p)[2]" position="replace" mode="inner">
+        We build modular solutions.
+    </xpath>
+    <!-- Column #03 -->
+    <xpath expr="(//h3)[3]" position="replace" mode="inner">
+        Durable
+    </xpath>
+    <xpath expr="(//p)[3]" position="replace" mode="inner">
+        We craft long-lasting goods.
+    </xpath>
+</template>
+
 </odoo>

theme_nano/views/snippets/s_image_text.xml

@@ -1,30 +1,25 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <template id="s_image_text" inherit_id="website.s_image_text">
-        <!-- Section -->
-        <xpath expr="//section" position="attributes">
-            <attribute name="class" add="bg-o-color-5" remove="pt32 pb32" separator=" "/>
-        </xpath>
-        <!-- Column #01 -->
-        <xpath expr="//div[hasclass('row')]/div[1]" position="attributes">
-            <attribute name="class" add="p-lg-0" remove="pt16 pb16" separator=" "/>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[1]/img" position="attributes">
-            <attribute name="class" add="w-100 h-100" remove="img-fluid" separator=" "/>
-            <attribute name="style">object-fit: cover;</attribute>
-        </xpath>
-        <!-- Column #02 -->
-        <xpath expr="//div[hasclass('row')]/div[2]" position="attributes">
-            <attribute name="class" add="col-lg-4 offset-lg-1 pt48 pb48" remove="col-lg-6 pt16 pb16" separator=" "/>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[2]/h2" position="replace">
-            <h2>How we Work</h2>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[2]/p[1]" position="replace">
-            <p>Come up with your big idea. <br/>We take care of the rest.</p>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[2]/p[2]" position="replace">
-            <p>“Soon is not as good as now.” <br/><b>~Seth Godin</b><br/></p>
-        </xpath>
-    </template>
+
+<template id="s_image_text" inherit_id="website.s_image_text">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc5 pt48 pb48" remove="pt32 pb32" separator=" "/>
+    </xpath>
+    <xpath expr="//*[hasclass('container')]" position="attributes">
+        <attribute name="class" add="container-fluid px-0" remove="container" separator=" "/>
+    </xpath>
+    <!-- Image + Shape -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web_editor/image_shape/website.s_image_text_default_image/web_editor/float/flt_planets_2.svg</attribute>
+        <attribute name="data-file-name">s_image_text.svg</attribute>
+        <attribute name="data-shape">web_editor/float/flt_planets_2</attribute>
+        <attribute name="data-shape-colors">;;;;</attribute>
+    </xpath>
+    <!-- Column #02 -->
+    <xpath expr="//*[hasclass('row')]/*[2]" position="attributes">
+        <attribute name="class" add="col-lg-5 offset-lg-1 pt48 pb32" remove="col-lg-6 pt16 pb16" separator=" "/>
+    </xpath>
+</template>
+
 </odoo>

theme_nano/views/snippets/s_images_wall.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_images_wall" inherit_id="website.s_images_wall">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc5 o_spc-medium pt96" remove="o_spc-small pt24" separator=" "/>
+    </xpath>
+    <!-- Content -->
+    <xpath expr="//*[hasclass('container')]" position="attributes">
+        <attribute name="class" add="container-fluid px-0" remove="container" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_nano/views/snippets/s_parallax.xml

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_parallax" inherit_id="website.s_parallax">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="pt48 pb48" separator=" "/>
+        <attribute name="data-oe-shape-data">{"shape":"web_editor/Rainy/10", "flip":["x","y"]}</attribute>
+    </xpath>
+    <xpath expr="//*[hasclass('oe_structure')]" position="before">
+        <div class="o_we_shape o_web_editor_Rainy_10 o_we_flip_x o_we_flip_y"/>
+    </xpath>
+    <!-- Content -->
+    <xpath expr="//*[hasclass('oe_structure')]" position="inside">
+        <section class="s_title pt40 pb40" data-vcss="001">
+            <div class="container s_allow_columns">
+                <h3 style="text-align: center;"><font class="bg-o-color-5">Feel free to come up with your big idea. <br/> We take care of the rest.</font></h3>
+            </div>
+        </section>
+    </xpath>
+</template>
+
+</odoo>

theme_nano/views/snippets/s_references.xml

@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_references" inherit_id="website.s_references">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc5" separator=" "/>
+    </xpath>
+</template>
+
+</odoo>

theme_nano/views/snippets/s_text_block.xml

@@ -1,13 +1,15 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <template id="s_text_block" inherit_id="website.s_text_block">
-        <!-- Section -->
-        <xpath expr="//section" position="attributes">
-            <attribute name="class" add="pt96 pb96" remove="pt40 pb40" separator=" "/>
-        </xpath>
-        <!-- Content -->
-        <xpath expr="//div[hasclass('container')]" position="attributes">
-            <attribute name="class" add="o_container_small" remove="container" separator=" "/>
-        </xpath>
-    </template>
+
+<template id="s_text_block" inherit_id="website.s_text_block">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc1 pt96 pb96" remove="pt40 pb40" separator=" "/>
+    </xpath>
+    <!-- Content -->
+    <xpath expr="//*[hasclass('container')]" position="attributes">
+        <attribute name="class" add="o_container_small" remove="container" separator=" "/>
+    </xpath>
+</template>
+
 </odoo>

theme_nano/views/snippets/s_text_image.xml

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<odoo>
+
+<template id="s_text_image" inherit_id="website.s_text_image">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc o_cc5 pt48 pb48" remove="pt32 pb32" separator=" "/>
+    </xpath>
+    <xpath expr="//*[hasclass('container')]" position="attributes">
+        <attribute name="class" add="container-fluid px-0" remove="container" separator=" "/>
+    </xpath>
+    <!-- Image + Shape -->
+    <xpath expr="//img" position="attributes">
+        <attribute name="src">/web_editor/image_shape/website.s_text_image_default_image/web_editor/pattern/pattern_points_1.svg</attribute>
+            <attribute name="data-file-name">s_text_image.svg</attribute>
+        <attribute name="data-shape">web_editor/pattern/pattern_points_1</attribute>
+        <attribute name="data-shape-colors">;;;;</attribute>
+    </xpath>
+</template>
+
+</odoo>

theme_nano/views/snippets/s_three_columns.xml

@@ -1,28 +1,50 @@
 <?xml version="1.0" encoding="utf-8"?>
 <odoo>
-    <template id="s_three_columns" inherit_id="website.s_three_columns">
-        <!-- Section -->
-        <xpath expr="//section" position="attributes">
-            <attribute name="class" add="pt80 pb80" remove="pt32 pb32" separator=" "/>
-        </xpath>
-        <!-- Column #01 -->
-        <xpath expr="//div[hasclass('row')]/div[1]" position="attributes">
-            <attribute name="class" add="offset-lg-2" separator=" "/>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[1]//*[hasclass('card-title')]" position="replace">
-            <h4 class="card-title">Handcrafted</h4>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[1]//*[hasclass('card-text')]" position="replace">
-            <p class="card-text">People should love the things they own. Things should be built to last.</p>
-        </xpath>
-        <!-- Column #02 -->
-        <xpath expr="//div[hasclass('row')]/div[2]//*[hasclass('card-title')]" position="replace">
-            <h4 class="card-title">Tailored</h4>
-        </xpath>
-        <xpath expr="//div[hasclass('row')]/div[2]//*[hasclass('card-text')]" position="replace">
-            <p class="card-text">Made in Santa's Workshop. High quality fabric &amp; exclusive designs.</p>
-        </xpath>
-        <!-- Column #03 -->
-        <xpath expr="//div[hasclass('row')]/div[3]" position="replace"/>
-    </template>
+
+<template id="s_three_columns" inherit_id="website.s_three_columns">
+    <!-- Section -->
+    <xpath expr="//section" position="attributes">
+        <attribute name="class" add="o_cc5 pt64 pb64" remove="o_cc2 pt32 pb32" separator=" "/>
+    </xpath>
+    <xpath expr="//*[hasclass('container')]" position="attributes">
+        <attribute name="class" add="container-fluid px-0" remove="container" separator=" "/>
+    </xpath>
+    <!-- Column #01 -->
+    <xpath expr="//*[hasclass('card-title')]" position="replace" mode="inner">
+        Handcrafted
+    </xpath>
+    <xpath expr="//*[hasclass('card-text')]" position="replace" mode="inner">
+        People should love the things they own. Things should be built to last.
+    </xpath>
+    <xpath expr="//*[hasclass('card-body')]" position="after">
+        <div class="card-footer">
+            <a href="#" class="btn btn-secondary">Details</a>
+        </div>
+    </xpath>
+    <!-- Column #02 -->
+    <xpath expr="(//*[hasclass('card-title')])[2]" position="replace" mode="inner">
+        Tailored
+    </xpath>
+    <xpath expr="(//*[hasclass('card-text')])[2]" position="replace" mode="inner">
+        Made in Santa's Workshop. High quality fabric &amp; exclusive designs.
+    </xpath>
+    <xpath expr="(//*[hasclass('card-body')])[2]" position="after">
+        <div class="card-footer">
+            <a href="#" class="btn btn-secondary">Details</a>
+        </div>
+    </xpath>
+    <!-- Column #03 -->
+    <xpath expr="(//*[hasclass('card-title')])[3]" position="replace" mode="inner">
+        Innovative
+    </xpath>
+    <xpath expr="(//*[hasclass('card-text')])[3]" position="replace" mode="inner">
+        Transforming traditional crafts — with a shot of modern savvy!
+    </xpath>
+    <xpath expr="(//*[hasclass('card-body')])[3]" position="after">
+        <div class="card-footer">
+            <a href="#" class="btn btn-secondary">Details</a>
+        </div>
+    </xpath>
+</template>
+
 </odoo>