[FIX] web_editor: review snippets "Customize" dropdown style

1 files changed, 27 insertions, 24 deletions

diff --git a/addons/web_editor/static/src/scss/web_editor.ui.scss b/addons/web_editor/static/src/scss/web_editor.ui.scss
index 3d58590315a..66529d61839 100644
--- a/addons/web_editor/static/src/scss/web_editor.ui.scss
+++ b/addons/web_editor/static/src/scss/web_editor.ui.scss
@@ -169,7 +169,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                     }
                     .oe_snippet_thumbnail_title {
                         border: none;
-                        padding: 0px;
+                        padding: 5px 0;
                     }
 
                     &:hover .oe_snippet_thumbnail_img {
@@ -388,9 +388,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                             border-color: lighten($o-we-color-dark, 10%);
                             color: white;
                         }
-                        &:active, &:focus, &:active:focus {
-                            outline: none;
-                        }
+
                         &:before, &:after {
                             content: "";
                             width: 7px;
@@ -410,7 +408,10 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                     }
                     // Open menu
                     &.show .btn {
-                        background-color: $o-we-color-light;
+                        // background-color: $o-we-color-light;
+                        &:active, &:focus, &:active:focus {
+                            outline: none;
+                        }
                         &:before, &:after {
                             width: 9px;
                         }
@@ -436,7 +437,7 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                             color: $o-we-color-text-light;
                             font-weight: normal;
                             font-size: 12px;
-                            padding: 5px 35px 5px 20px;
+                            padding: 5px 40px 5px 10px;
 
                             &:hover {
                                 background-color: fade-out($o-we-color-dark, 0.5);
@@ -448,33 +449,30 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                                 color: white;
                                 background-color: fade-out($o-we-color-dark, 0.5);
                                 &:before {
-                                    @include o-position-absolute($top: 5px, $left: 5px);
+                                    @include o-position-absolute($top: 5px, $right: 5px);
                                     content: "\f00c";
                                     font-family: "FontAwesome";
                                     color: $o-brand-primary;
                                 }
                             }
-
                             > i {
-                                width: 16px;
-                                margin-right: 8px;
+                                width: 15px;
+                                margin-right: 10px;
+                                text-align: center;
                             }
                         }
 
                         .dropdown-submenu {
                             position: relative;
-
                             &::before {
-                                @include o-position-absolute($top: 10px, $right: 10px);
-                                @include o-caret-right(3px);
+                                @include o-position-absolute($top: 12px, $right: 10px);
+                                @include o-caret-right(4px);
                                 border-left-color: $o-we-color-text-light;
                             }
-
                             &:hover > .dropdown-menu {
                                 display: block;
                                 left: 100%;
                                 top: 0;
-
                                 &.o_open_to_left {
                                     left: auto;
                                     right: 100%;
@@ -485,16 +483,15 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                         .dropdown-divider {
                             display: block;
                             height: 1px;
-                            background: rgba($o-we-color-text-light, 0.1);
-                            margin: 0 8px;
+                            border-top: 1px solid #666;
+                            margin: 0;
                         }
 
                         .dropdown-header {
-                            color: white;
-                            font-weight: bold;
-                            font-size: 12px;
+                            color: wheat;
+                            font-size: 11px;
                             margin-top: 2px;
-
+                            text-transform: uppercase;
                             &:hover {
                                 background-color: initial;
                             }
@@ -503,24 +500,30 @@ html[lang] > body.editor_enable [data-oe-translation-state] {
                                 padding-left: 8px;
                             }
                             &.o_parent_editor_header {
+                                position: relative;
                                 color: wheat;
                                 font-weight: 400;
                                 font-size: 10px;
-                                margin: 7px 0 4px 4px;
+                                margin: 10px 0 0 10px;
+                                text-transform: uppercase;
+                                padding-bottom: .25em;
                                 &::before {
                                     content: "\f148";
-                                    @include o-position-absolute($top: 2px, $left: 8px);
+                                    @include o-position-absolute($top: 5px, $left: 4px);
                                     font-family: FontAwesome;
                                     transform: scaleX(-1);
                                 }
+                                ~ .dropdown-submenu .dropdown-item,
                                 ~ .dropdown-item {
                                     font-size: 11px;
-                                    padding: 4px 35px 4px 20px;
                                     opacity: 0.8;
                                     &:hover {
                                         opacity: 1;
                                     }
                                 }
+                                ~ .dropdown-submenu::before {
+                                    @include o-position-absolute($top: 10px, $right: 10px);
+                                }
                             }
                         }
                     }