[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:
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;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user