diff --git a/addons/web_editor/static/src/img/snippets_options/o_overlay_move_drag.svg b/addons/web_editor/static/src/img/snippets_options/o_overlay_move_drag.svg new file mode 100644 index 00000000000..7d701fa3ef1 --- /dev/null +++ b/addons/web_editor/static/src/img/snippets_options/o_overlay_move_drag.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 55faa0a39f0..17b5f1aba7d 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -27,14 +27,14 @@ $o-we-bg: $o-we-bg-light !default; $o-we-color: $o-we-fg-light !default; $o-we-font-size: 13px !default; $o-we-font-family: Roboto, 'Montserrat', 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif !default; -$o-we-accent: #00ABC1 !default; +$o-we-accent: #01bad2 !default; $o-we-border-width: 1px !default; $o-we-border-color: $o-we-bg-light !default; $o-we-ace-color: #2F3129 !default; $o-we-handles-offset-to-hide: 10000px !default; -$o-we-handles-btn-size: 18px !default; +$o-we-handles-btn-size: 20px !default; $o-we-handles-accent-color: $o-we-accent !default; $o-we-handles-accent-color-preview: $o-enterprise-color !default; $o-we-handle-edge-size: 8px !default; diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index 9710edfb17b..cca8b4600c0 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -1336,14 +1336,19 @@ body.editor_enable.editor_has_snippets { display: block; width: $o-we-handles-btn-size; height: $o-we-handles-btn-size; - border: solid 1px darken($o-we-handles-accent-color, 10%); + border: solid 1px darken($o-we-handles-accent-color, 20%); line-height: $o-we-handles-btn-size - 2; font-size: 14px; font-family: FontAwesome; - background-color: darken($o-we-handles-accent-color, 20%); + background-color: darken($o-we-handles-accent-color, 10%); color: white; } + &.o_handle_start:after { + background-color: rgba($o-we-sidebar-content-field-clickable-bg, .6); + border-color: rgba($o-we-sidebar-content-field-border-color, .2); + } + &:hover, &.o_active { background-color: rgba($o-we-handles-accent-color, 0.2); @@ -1409,35 +1414,38 @@ body.editor_enable.editor_has_snippets { > div { display: flex; - align-items: center; > * { - margin: 0 2px; - border: 1px solid #999999; - border-radius: 20%; - color: #999999; - opacity: 0.5; - transition: opacity 400ms ease 0s; - cursor: pointer; - - &:hover { - opacity: 1; - } + @extend %we-generic-button; + margin: 0 1px 0; + min-width: 22px; + padding: 0 $o-we-sidebar-content-field-button-group-button-spacing * .5; + color: $o-we-fg-lighter; } - } - } - - .o_overlay_move_options { - .o_move_handle { - padding: 3px 4px; - cursor: move; - - &::before, &::after { - content: '\f141'; - display: block; - font-family: FontAwesome; - font-size: 0.8em; - line-height: 0.4em; + .o_move_handle { + cursor: move; + width: 30px; + height: 22px; + background-image: url('/web_editor/static/src/img/snippets_options/o_overlay_move_drag.svg'); + background-position: center; + background-repeat: no-repeat; + } + .o_delete_button { + margin-left: $o-we-sidebar-content-field-button-group-button-spacing; + background-color: mix($o-we-color-danger, $o-we-sidebar-content-field-clickable-bg);; + } + &:hover { + > * { + @include o-hover-opacity(.6); + } + we-button:hover, .o_move_handle:hover { + border-color: mix($o-we-handles-accent-color, $o-we-sidebar-content-field-pressed-bg, .4); + background-color: $o-we-sidebar-content-field-pressed-bg; + } + .o_delete_button:hover { + border-color: mix($o-we-color-danger, $o-we-sidebar-content-field-pressed-bg, .4); + background-color: $o-we-color-danger; + } } } }