[IMP] web_editor: review dropdown design

Part of https://github.com/odoo/odoo/pull/55645
task-2157252
This commit is contained in:
stefanorigano (SRI)
2020-08-07 22:14:22 +00:00
committed by qsm-odoo
parent b7098ddf2c
commit 4c6775ee6c
2 changed files with 29 additions and 6 deletions
@@ -61,11 +61,14 @@ $o-we-dropdown-bg: $o-we-bg-darker !default;
$o-we-dropdown-border-width: 1px !default;
$o-we-dropdown-border-color: $o-we-bg-darkest !default;
$o-we-dropdown-shadow: 0 2px 8px 0 rgba(black, 0.5) !default;
$o-we-dropdown-item-height: 30px !default;
$o-we-dropdown-item-height: 34px !default;
$o-we-dropdown-item-spacing: 1px !default;
$o-we-dropdown-item-bg: $o-we-bg-light !default;
$o-we-dropdown-item-bg: $o-we-bg-lighter !default;
$o-we-dropdown-item-bg-hover: $o-we-bg-light !default;
$o-we-dropdown-item-color: $o-we-fg-dark !default;
$o-we-dropdown-item-active-color: $o-we-fg-light !default;
$o-we-dropdown-item-hover-color: $o-we-fg-light !default;
$o-we-dropdown-item-active-bg: mix($o-we-dropdown-item-bg, $o-we-dropdown-item-bg-hover) !default;
$o-we-dropdown-item-active-color: $o-we-fg-lighter !default;
$o-we-sidebar-bg: $o-we-bg !default;
$o-we-sidebar-color: $o-we-color !default;
@@ -139,12 +142,15 @@ $o-we-sidebar-content-field-dropdown-shadow: $o-we-dropdown-shadow !default;
$o-we-sidebar-content-field-dropdown-item-height: $o-we-dropdown-item-height !default;
$o-we-sidebar-content-field-dropdown-item-spacing: $o-we-dropdown-item-spacing !default;
$o-we-sidebar-content-field-dropdown-item-bg: $o-we-dropdown-item-bg !default;
$o-we-sidebar-content-field-dropdown-item-bg-hover: $o-we-dropdown-item-bg-hover !default;
$o-we-sidebar-content-field-dropdown-item-color: $o-we-dropdown-item-color !default;
$o-we-sidebar-content-field-dropdown-item-hover-color: $o-we-dropdown-item-hover-color !default;
$o-we-sidebar-content-field-dropdown-item-active-bg: $o-we-dropdown-item-active-bg !default;
$o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-active-color !default;
$o-we-sidebar-content-field-colorpicker-size: 20px !default;
$o-we-sidebar-content-field-colorpicker-shadow: inset 0 0 0 1px rgba(white, 0.5) !default;
$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-light !default;
$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-lighter !default;
$o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !default;
$o-we-sidebar-content-field-colorpicker-dropdown-active-color: $o-we-fg-lighter !default;
$o-we-sidebar-content-field-colorpicker-cc-width: 208px !default;
@@ -343,8 +343,12 @@ body.editor_enable.editor_has_snippets {
background-color: $o-we-sidebar-content-field-dropdown-bg;
box-shadow: $o-we-sidebar-content-field-dropdown-shadow;
}
&.active + * {
display: block !important;
&.active {
@include we-icon-button('\f0d8');
+ * {
display: block !important;
}
}
}
%we-icon-button {
@@ -549,6 +553,10 @@ body.editor_enable.editor_has_snippets {
background-color: $o-we-sidebar-content-field-dropdown-item-bg;
color: $o-we-sidebar-content-field-dropdown-item-color;
> we-title {
flex-grow: 1;
}
> div {
line-height: $o-we-sidebar-content-field-dropdown-item-height;
}
@@ -562,9 +570,18 @@ body.editor_enable.editor_has_snippets {
border-top: $o-we-sidebar-content-field-dropdown-item-spacing solid transparent;
}
&:hover {
background-color: $o-we-sidebar-content-field-dropdown-item-bg-hover;
color: $o-we-sidebar-content-field-dropdown-item-hover-color;
}
&.active {
@include we-icon-button('\f00c', $align: left);
background-color: $o-we-sidebar-content-field-dropdown-item-active-bg;
color: $o-we-sidebar-content-field-dropdown-item-active-color;
&:after {
color: $o-we-accent;
}
}
}
}