[IMP] website, *: add prettier preview of border styles

*: web_editor

Part of https://github.com/odoo/odoo/pull/53930
task-2157252
This commit is contained in:
qsm-odoo
2020-07-14 14:43:16 +00:00
parent 43c158295b
commit b4ce6fbc01
3 changed files with 30 additions and 13 deletions
@@ -126,3 +126,12 @@ we-collapse {
position: relative;
padding: 0.3em 0.3em 0.3em 1em;
}
.o_we_border_preview {
display: inline-block;
width: 999px;
max-width: 100%;
margin-bottom: 2px;
border-width: 4px;
border-bottom: none !important;
}
+4 -4
View File
@@ -124,10 +124,10 @@
<we-colorpicker data-dependencies="border_width_opt"
data-select-style="true" data-css-property="border-color" data-color-prefix="border-"/>
<we-select data-css-property="border-style" data-dependencies="border_width_opt">
<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-button title="Solid" data-select-style="solid"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: solid;"/></we-button>
<we-button title="Dashed" data-select-style="dashed"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dashed;"/></we-button>
<we-button title="Dotted" data-select-style="dotted"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: dotted;"/></we-button>
<we-button title="Double" data-select-style="double"><div class="o_we_fake_img_item o_we_border_preview" style="border-style: double; border-left: none; border-right: none;"/></we-button>
</we-select>
<we-input data-name="border_width_opt"
data-select-style="0" data-css-property="border-width"