diff options
Diffstat (limited to 'addons/web_editor/static/src')
| -rw-r--r-- | addons/web_editor/static/src/scss/wysiwyg_snippets.scss | 54 | ||||
| -rw-r--r-- | addons/web_editor/static/src/xml/snippets.xml | 18 |
2 files changed, 32 insertions, 40 deletions
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index a1f2a3152be..496d2a39b95 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -1087,39 +1087,27 @@ body.editor_enable.editor_has_snippets { background-color: $o-we-sidebar-content-field-colorpicker-dropdown-bg; color: $o-we-sidebar-content-field-colorpicker-dropdown-color; - .d-flex .btn.o_we_colorpicker_switch_pane_btn { - color: inherit !important; - font-size: inherit !important; - font-weight: inherit !important; - - &.active { - color: $o-we-sidebar-content-field-colorpicker-dropdown-active-color; - border-bottom: $o-we-sidebar-tabs-active-border-width solid $o-we-sidebar-tabs-active-border-color; - } - + .o_colorpicker_reset { - padding: 0 $o-we-sidebar-content-field-clickable-spacing !important; - border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color !important; - border-radius: $o-we-sidebar-content-field-border-radius !important; - background: $o-we-sidebar-content-field-clickable-bg !important; - line-height: $o-we-sidebar-content-field-height - 2 * $o-we-sidebar-content-field-border-width !important; - color: inherit !important; - font-size: inherit !important; - font-weight: inherit !important; - align-self: center; - } - &:focus { - box-shadow: none; - } + .o_we_colorpicker_switch_panel { + border-bottom: 1px solid $o-we-bg-dark; + box-shadow: inset 0 1px 0 rgba(white, .2); + } + .o_we_colorpicker_switch_pane_btn { + @extend %we-generic-tab-button; + flex: 0 0 auto; + } + .o_colorpicker_reset { + max-width: 40%; + @extend %we-generic-button; } .o_colorpicker_sections { .o_we_color_btn, .o_we_color_combination_btn { float: left; width: percentage(1 / 8); - padding-top: percentage(1 / 8); + padding-top: percentage(1 / 10); margin: 0; - border: none; - box-shadow: inset 0 0 0 1px $o-we-sidebar-content-field-colorpicker-dropdown-bg; + border: 1px solid $o-we-sidebar-content-field-colorpicker-dropdown-bg; + box-shadow: $o-we-sidebar-content-field-colorpicker-shadow; &.o_colorpicker_reset { background-color: transparent; @@ -1135,25 +1123,23 @@ body.editor_enable.editor_has_snippets { } } } - .o_we_color_combination_btn { float: none; width: 100%; padding: 0; margin: 0; + border: 0; background-clip: padding-box; border-top: $o-we-sidebar-content-field-spacing solid transparent; border-bottom: $o-we-sidebar-content-field-spacing solid transparent; - > .o_we_cc_preview_wrapper { - padding: $o-we-sidebar-content-field-clickable-spacing; - } - - + .o_we_color_combination_btn { - margin-top: -$o-we-sidebar-content-field-spacing; + .o_we_cc_preview_wrapper:after { + // For some reasons, in this specific context we have to + // compensate a 1px gap between the flex container and the + // absolute positioned pseudo-element that generates the bg. + bottom: -1px; } } - .o_colorpicker_section { padding-top: $o-we-sidebar-content-field-spacing; diff --git a/addons/web_editor/static/src/xml/snippets.xml b/addons/web_editor/static/src/xml/snippets.xml index f62c855d6f6..41c7c6e612d 100644 --- a/addons/web_editor/static/src/xml/snippets.xml +++ b/addons/web_editor/static/src/xml/snippets.xml @@ -43,15 +43,21 @@ <!-- options --> <div t-name="web_editor.snippet.option.colorpicker" class="colorpicker"> - <div class="d-flex px-1"> - <button t-if="widget.withCombinations" type="button" class="btn flex-grow-1 o_we_colorpicker_switch_pane_btn active" data-target="color-combinations">Combinations</button> - <button type="button" t-attf-class="btn flex-grow-1 o_we_colorpicker_switch_pane_btn #{widget.withCombinations ? '' : 'active'}" data-target="theme-colors">Custom</button> - <button t-if="widget.resetButton" type="button" class="btn flex-grow-1 o_we_color_btn o_colorpicker_reset"> + <div class="o_we_colorpicker_switch_panel d-flex justify-content-end px-2"> + <t t-if="widget.withCombinations"> + <button type="button" tabindex="1" class="o_we_colorpicker_switch_pane_btn active" data-target="color-combinations"> + <span>Combinations</span> + </button> + <button type="button" tabindex="2" t-attf-class="o_we_colorpicker_switch_pane_btn #{widget.withCombinations ? '' : 'active'}" data-target="theme-colors"> + <span>Custom</span> + </button> + </t> + <button t-if="widget.resetButton" type="button" class="my-1 ml-auto o_we_color_btn o_colorpicker_reset"> <t t-if="widget.withCombinations">None</t> <t t-else="">Reset</t> </button> </div> - <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? '' : 'd-none'} px-1" data-color-tab="color-combinations"> + <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? '' : 'd-none'} pt-2 px-2 pb-3 bg-black-25" data-color-tab="color-combinations"> <!-- List all Presets --> <t t-foreach="5" t-as="i"> <t t-call="web_editor.colorpalette.combination.btn"> @@ -59,7 +65,7 @@ </t> </t> </div> - <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? 'd-none' : ''} p-1" data-color-tab="theme-colors"/> + <div t-attf-class="o_colorpicker_sections #{widget.withCombinations ? 'd-none' : ''} pt-2 px-2 pb-3 bg-black-25" data-color-tab="theme-colors"/> </div> <t t-name="web_editor.colorpalette.combination.btn"> <button type="button" class="o_we_color_btn o_we_color_combination_btn" |