diff options
| author | qsm-odoo <qsm@odoo.com> | 2020-01-28 17:26:37 +0000 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2020-01-29 10:30:38 +0000 |
| commit | ab7016c8e129b8bc80c5ed5a40bf58a08e66f192 (patch) | |
| tree | e0b7ec67f29c54d29298bec097f776dae1adaba1 /addons/web_editor/static/src | |
| parent | df296322825a9d6ffa344091427de5a9413bad67 (diff) | |
[IMP] web_editor, *: make all editor left panel items inline
* website, website_sale
The design will be deeply reviewed in a future update. This commit is
just about unifying it and making sure no element is cut/overflowing.
-> All items are now inline automatically
-> If there is no enough space, it becomes full-width over two lines
automatically (this can be forced with the o_we_fw class)
-> Force to stay on one line with the o_we_force_inline class
closes odoo/odoo#44142
Signed-off-by: Quentin Smetz (qsm) <qsm@odoo.com>
Diffstat (limited to 'addons/web_editor/static/src')
| -rw-r--r-- | addons/web_editor/static/src/scss/wysiwyg_snippets.scss | 39 |
1 files changed, 25 insertions, 14 deletions
diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index c6d1e8fa394..5d610465f92 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -323,7 +323,8 @@ body.editor_enable.editor_has_snippets { .o_we_user_value_widget { flex: 1 1 auto; - display: block; + min-width: 0; + @extend %o-we-inline; > div { display: flex; @@ -345,7 +346,7 @@ body.editor_enable.editor_has_snippets { // Checkboxes .o_we_checkbox_wrapper.o_we_user_value_widget { - @extend .o_we_inline; + @extend .o_we_force_inline; flex: 0 0 auto; padding: 0; border: none; @@ -419,7 +420,7 @@ body.editor_enable.editor_has_snippets { // Color Pickers .o_we_so_color_palette.o_we_user_value_widget { - @extend .o_we_inline; + @extend .o_we_force_inline; flex: 0 0 auto; .o_we_color_preview { @@ -484,7 +485,8 @@ body.editor_enable.editor_has_snippets { we-row { position: relative; flex: 1 1 auto; - display: block; + min-width: 0; + @extend %o-we-inline; > div { display: flex; @@ -501,18 +503,27 @@ body.editor_enable.editor_has_snippets { } } - .o_we_inline { - &, &.o_we_user_value_widget { - display: flex; - align-items: center; + %o-we-inline:not(.o_we_fw) { + display: flex; + flex-flow: row wrap; + align-items: center; + + > we-title { + @include o-text-overflow(); + max-width: 95%; + min-width: 30%; + margin-right: 5%; + } + > div { + flex: 1 1 auto; + min-width: 30%; + } + + &.o_we_force_inline { + flex-flow: row nowrap; - > we-title { - @include o-text-overflow(); - min-width: 60%; - margin-right: 5%; - } > div { - flex: 1 1 auto; + min-width: 0; } } } |