[FIX] web_editor: review temporary text tools design

The text tools are being reworked with the new editor. Meanwhile, this
commit will get closer to the desired design with a pure CSS solution.

Part of https://github.com/odoo/odoo/pull/58638

X-original-commit: ad20f2b97ef925a27cef4976462d3d0aa39d0433
This commit is contained in:
stefanorigano (SRI)
2020-09-28 18:58:25 +00:00
committed by qsm-odoo
parent 66cc01e76d
commit 093ae661e9
@@ -44,7 +44,10 @@ body.editor_enable.editor_has_snippets {
// Ugly hack to force ugly rules... while waiting for new editor
#oe_snippets#oe_snippets .o_we_snippet_text_tools {
padding: $o-we-sidebar-content-field-spacing $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
$-text-tools-gap: 3px;
$-text-tools-header-height: 35px;
padding: $-text-tools-header-height $o-we-sidebar-content-padding-base 0 $o-we-sidebar-content-indent;
box-shadow: $o-we-item-standup-top rgba($o-we-item-standup-color-light, .2);
z-index: $o-we-zindex;
@@ -58,15 +61,70 @@ body.editor_enable.editor_has_snippets {
.popover-body {
padding: 0 !important;
border: none !important;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: $-text-tools-gap;
> * {
margin-bottom: $o-we-sidebar-content-field-spacing;
margin: 0 0 $o-we-sidebar-content-field-spacing*.5 0;
}
}
.btn {
@extend %we-generic-button;
border-radius: 0;
padding: 0 $o-we-sidebar-content-field-button-group-button-spacing!important;
line-height: $o-we-sidebar-content-field-height + ($o-we-sidebar-content-field-border-width*2)!important;
}
// Achieve a "button-group effect" for siblings buttons.
.popover-body > .btn-group {
> .btn {
border-radius: 0;
}
> .btn:first-of-type, > div:first-of-type .btn {
@include border-left-radius($o-we-sidebar-content-field-border-radius);
}
> .btn:last-of-type, > div:last-of-type .btn {
@include border-right-radius($o-we-sidebar-content-field-border-radius);
}
}
.btn-group {
&.note-color {
order: -3;
.note-back-color-preview {
margin-left: $-text-tools-gap;
}
.btn:after {
display: none;
}
}
&.note-style {
order: -2;
&, > div {
flex-grow: 1;
}
}
&.note-fontsize {
order: -1;
}
&.note-font [data-name="clear"] {
@include o-position-absolute(($-text-tools-header-height*-1) + 5px, 0);
background: 0;
border: 0;
@extend %we-generic-link;
}
&.note-para {
flex-grow: 1;
gap: $-text-tools-gap;
justify-content: space-between;
> * {
flex: 1 1 33%;
}
}
> .d-none + * {
margin-left: 0 !important;
}