[IMP] web_editor: review dropdown design
Part of https://github.com/odoo/odoo/pull/55645 task-2157252
This commit is contained in:
committed by
qsm-odoo
parent
b7098ddf2c
commit
4c6775ee6c
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user