From ca7bb63ebd77cd7efce772c3b9d9098a772c345c Mon Sep 17 00:00:00 2001
From: Romain Derie <rde@odoo.com>
Date: Wed, 18 Dec 2019 10:20:24 +0000
Subject: [PATCH] [IMP] website: review 's_hr' snippet

To fit the general look&like of the left panel, the size elements should be
handled with an input to allow full control.

Part of https://github.com/odoo/odoo/pull/42937
task-2088157
task-2152191
---
 .../website/static/src/snippets/s_hr/000.scss | 16 +---------
 addons/website/views/snippets/s_hr.xml        | 31 +++++++++----------
 2 files changed, 16 insertions(+), 31 deletions(-)

diff --git a/addons/website/static/src/snippets/s_hr/000.scss b/addons/website/static/src/snippets/s_hr/000.scss
index ec548e3c555..d7b5c0f57aa 100644
--- a/addons/website/static/src/snippets/s_hr/000.scss
+++ b/addons/website/static/src/snippets/s_hr/000.scss
@@ -4,21 +4,7 @@
     hr {
         padding: 0;
         border: 0;
-        border-top-color: inherit;
+        border-top: 1px solid inherit;
         margin: 0;
     }
-    // Style
-    .s_hr_dashed { border-top-style: dashed; }
-    .s_hr_double { border-top-style: double; }
-    .s_hr_dotted { border-top-style: dotted; }
-    .s_hr_solid  { border-top-style: solid;  }
-    // Thickness
-    $count: 5;
-    $base-width: 1px;
-    @while $count > 0 {
-        .s_hr_#{$base-width * $count} {
-            border-top-width: $base-width * $count;
-        }
-        $count: $count - 1;
-    }
 }
diff --git a/addons/website/views/snippets/s_hr.xml b/addons/website/views/snippets/s_hr.xml
index 14a140ee008..876d284f327 100644
--- a/addons/website/views/snippets/s_hr.xml
+++ b/addons/website/views/snippets/s_hr.xml
@@ -3,28 +3,27 @@
 
 <template id="s_hr" name="Separator">
     <div class="s_hr text-left pt32 pb32">
-        <hr class="s_hr_1px s_hr_solid border-600 w-100 mx-auto"/>
+        <hr class="border-600 w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid;"/>
     </div>
 </template>
 
 <template id="s_hr_options" inherit_id="website.snippet_options">
     <xpath expr="." position="inside">
         <div data-selector=".s_hr" data-target="hr">
-            <we-colorpicker string="Color"
-                data-select-style="true"
-                data-css-property="border-color"
-                data-color-prefix="border-"
-                data-excluded="transparent_grayscale"/>
-            <we-select string="Thickness">
-                <t t-foreach="range(1,6)" t-as="s_hr_thickness">
-                    <we-button t-attf-data-select-class="s_hr_{{s_hr_thickness}}px"><t t-esc="s_hr_thickness"/>px</we-button>
-                </t>
-            </we-select>
-            <we-select string="Style">
-                <we-button data-select-class="s_hr_solid">Solid</we-button>
-                <we-button data-select-class="s_hr_dashed">Dashed</we-button>
-                <we-button data-select-class="s_hr_dotted">Dotted</we-button>
-                <we-button data-select-class="s_hr_double">Double</we-button>
+            <we-row string="Thickness" class="o_we_inline">
+                <we-colorpicker
+                    data-select-style="true"
+                    data-css-property="border-color"
+                    data-color-prefix="border-"
+                    data-excluded="transparent_grayscale"/>
+                <we-input data-unit="px" data-select-style="1px"
+                          data-css-property="border-top-width"/>
+            </we-row>
+            <we-select string="Style" data-css-property="border-top-style">
+                <we-button data-select-style="solid">Solid</we-button>
+                <we-button data-select-style="dashed">Dashed</we-button>
+                <we-button data-select-style="dotted">Dotted</we-button>
+                <we-button data-select-style="double">Double</we-button>
             </we-select>
             <we-select string="Width">
                 <we-button data-select-class="w-25">25%</we-button>