From 3751379f1e9a4c215fb6eb898b4ccc67659b9ace Mon Sep 17 00:00:00 2001 From: stephanchrst Date: Tue, 10 May 2022 21:51:50 +0700 Subject: initial commit 2 --- ...3_0_color_system_support_primary_variables.scss | 1 + .../static/src/scss/bootstrap_overridden.scss | 76 + .../src/scss/bootstrap_overridden_backend.scss | 14 + .../static/src/scss/secondary_variables.scss | 137 ++ .../static/src/scss/web_editor.backend.scss | 69 + .../static/src/scss/web_editor.common.scss | 782 ++++++++ .../static/src/scss/web_editor.frontend.scss | 74 + .../static/src/scss/web_editor.variables.scss | 728 ++++++++ addons/web_editor/static/src/scss/wysiwyg.scss | 522 ++++++ .../web_editor/static/src/scss/wysiwyg_iframe.scss | 27 + .../static/src/scss/wysiwyg_snippets.scss | 1951 ++++++++++++++++++++ 11 files changed, 4381 insertions(+) create mode 100644 addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss create mode 100644 addons/web_editor/static/src/scss/bootstrap_overridden.scss create mode 100644 addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss create mode 100644 addons/web_editor/static/src/scss/secondary_variables.scss create mode 100644 addons/web_editor/static/src/scss/web_editor.backend.scss create mode 100644 addons/web_editor/static/src/scss/web_editor.common.scss create mode 100644 addons/web_editor/static/src/scss/web_editor.frontend.scss create mode 100644 addons/web_editor/static/src/scss/web_editor.variables.scss create mode 100644 addons/web_editor/static/src/scss/wysiwyg.scss create mode 100644 addons/web_editor/static/src/scss/wysiwyg_iframe.scss create mode 100644 addons/web_editor/static/src/scss/wysiwyg_snippets.scss (limited to 'addons/web_editor/static/src/scss') diff --git a/addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss b/addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss new file mode 100644 index 00000000..4fb5d42c --- /dev/null +++ b/addons/web_editor/static/src/scss/13_0_color_system_support_primary_variables.scss @@ -0,0 +1 @@ +$o-support-13-0-color-system: true; diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss new file mode 100644 index 00000000..f48d9bda --- /dev/null +++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss @@ -0,0 +1,76 @@ +// Use auto threshold for yiq colors +$yiq-contrasted-threshold: false !default; + +// Automatically update bootstrap colors map (unused by BS itself) +$colors: () !default; +@each $name, $color in $o-color-palette { + $colors: map-merge(('#{$name}': o-color($color)), $colors); +} + +$o-btn-bg-colors: () !default; +$o-btn-bg-colors: map-merge(( + 'primary': o-color('o-cc1-btn-primary'), + 'secondary': o-color('o-cc1-btn-secondary'), +), $o-btn-bg-colors); +$o-btn-border-colors: () !default; +$o-btn-border-colors: map-merge(( + 'primary': o-color('o-cc1-btn-primary-border'), + 'secondary': o-color('o-cc1-btn-secondary-border'), +), $o-btn-border-colors); + +// Automatically extend bootstrap to create theme background/text/button classes +$theme-colors: () !default; +@each $name, $color in $o-theme-color-palette { + $theme-colors: map-merge(('#{$name}': o-color($color)), $theme-colors); +} + +// Automatically extend bootstrap gray palette (the theme palette is supposed to +// at least declare white and black) +$grays: () !default; +@each $name, $color in $o-gray-color-palette { + $grays: map-merge(('#{$name}': o-color($color)), $grays); +} + +// Bootstrap use standard variables to define individual colors which are then +// placed into a map which is then used to get the value of each individual +// color. As BS4 allows to extend the map a priori to define our own colors, +// it does not take care of making the standard variables match the values in +// the user's map. The problem is that, at least for grays, bootstrap uses the +// standard variables in its _variables.scss file, so if: +// +// User file: +// $grays: ( +// '100': blue, +// ); +// +// BS4: +// $gray-100: gray !default; +// $grays: () !default; +// $grays: map-merge(( +// '100': $gray-100, +// ), $grays); +// +// -> Here gray('100') is blue but $gray-100 is still gray... so BS4 is not +// correctly generated as BS4 uses $gray-100 in _variables.scss +$primary: theme-color('primary') !default; +$secondary: theme-color('secondary') !default; +$success: theme-color('success') !default; +$info: theme-color('info') !default; +$warning: theme-color('warning') !default; +$danger: theme-color('danger') !default; +$light: theme-color('light') !default; +$dark: theme-color('dark') !default; + +$white: gray('white') !default; +$gray-100: gray('100') !default; +$gray-200: gray('200') !default; +$gray-300: gray('300') !default; +$gray-400: gray('400') !default; +$gray-500: gray('500') !default; +$gray-600: gray('600') !default; +$gray-700: gray('700') !default; +$gray-800: gray('800') !default; +$gray-900: gray('900') !default; +$black: gray('black') !default; + +$o-color-system-initialized: true; diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss new file mode 100644 index 00000000..ef2d6cf0 --- /dev/null +++ b/addons/web_editor/static/src/scss/bootstrap_overridden_backend.scss @@ -0,0 +1,14 @@ + +$o-theme-color-palette: map-remove($o-theme-color-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'); +$o-gray-color-palette: map-remove($o-gray-color-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900'); + +$o-btn-bg-colors: () !default; +$o-btn-bg-colors: map-merge(( + 'primary': null, + 'secondary': null, +), $o-btn-bg-colors); +$o-btn-border-colors: () !default; +$o-btn-border-colors: map-merge(( + 'primary': null, + 'secondary': null, +), $o-btn-border-colors); diff --git a/addons/web_editor/static/src/scss/secondary_variables.scss b/addons/web_editor/static/src/scss/secondary_variables.scss new file mode 100644 index 00000000..815e2c72 --- /dev/null +++ b/addons/web_editor/static/src/scss/secondary_variables.scss @@ -0,0 +1,137 @@ + +//------------------------------------------------------------------------------ +// Colors +//------------------------------------------------------------------------------ + +// Color combinations +$o-color-combinations: o-safe-nth($o-color-combinations-presets, $o-color-combinations-preset-number, ()) !default; +$-combination-additions: (); +@for $index from 1 through length($o-color-combinations) { + $combination: map-merge($o-base-color-combination, nth($o-color-combinations, $index)); + + @each $element, $color in $combination { + $-combination-additions: map-merge($-combination-additions, ( + 'o-cc#{$index}-#{$element}': $color, + )); + } +} + +// Colors +$o-color-palette: o-safe-nth($o-color-palettes, $o-color-palette-number, ()) !default; +// Original color palette can contain override of the default combinations (so keep 'null' values for this merge) +$o-color-palette: map-merge($-combination-additions, $o-color-palette); +$o-color-palette: map-merge($o-base-color-palette, o-map-omit($o-color-palette)); + +// Theme colors +$o-theme-color-palette: o-safe-nth($o-theme-color-palettes, $o-theme-color-palette-number, ()) !default; +@if not $o-support-13-0-color-system { + $o-theme-color-palette: map-remove($o-theme-color-palette, 'alpha', 'beta', 'gamma', 'delta', 'epsilon'); +} +$-main-color: map-get($o-color-palette, 'o-color-1'); +$-main-color-lightness: lightness($-main-color); +$o-theme-color-palette: map-merge(( + // color 1 and 2 are used to override primary and secondary BS4 + // colors by default, so that theme colors affect the default Odoo layouts + 'primary': $-main-color, + 'secondary': map-get($o-color-palette, 'o-color-2'), + + // BS light and dark colors are not used for any BS component, just + // for color utilities. By default, we set them to a very light and + // very dark version of a desaturate version of the main color + 'light': lighten(desaturate($-main-color, 80%), min(70%, max(0%, 97% - $-main-color-lightness))), // Does not increase over 97% lightness + 'dark': darken(desaturate($-main-color, 80%), min(70%, max(0%, $-main-color-lightness - 10%))), // Does not lower under 10% lightness +), o-map-omit($o-theme-color-palette)); +$o-theme-color-palette: map-merge($o-base-theme-color-palette, o-map-omit($o-theme-color-palette)); + +// Gray colors +// Extend grays with transparent ones (for some reason, BS4 create black-50 and +// white-50 but does not allow overridding that with variables). +$o-gray-color-palette: o-safe-nth($o-gray-color-palettes, $o-gray-color-palette-number, ()) !default; +$o-gray-color-palette: map-merge($o-transparent-grays, o-map-omit($o-gray-color-palette)); +$o-gray-color-palette: map-merge($o-base-gray-color-palette, o-map-omit($o-gray-color-palette)); + +$o-color-system-initialized: false; + +// Returns: +// - true if the given name is a css color or null +// - false if a potential valid color name +// - throws an error if the given arg cannot reference a color +@function check-color-identifier-type($name) { + $-type: type-of($name); + @if $-type == 'color' or $-type == 'null' { + @return true; + } @else if $-type != 'string' { + @error "Color name '#{$name}' is of unsupported type '#{$-type}'"; + } + @return false; +} +@function use-cc-bg($name) { + @if type-of($name) == 'number' { + // Preset number, let's return the background color of the related + // preset. + @return 'o-cc#{$name}-bg'; + } + @return $name; +} +// Looks up for the color related to the given name in the related odoo palettes +// following redirection a maximum number of time (by default none). +@function o-related-color($name, $max-recursions: 0, $original-name: $name, $use-cc-bg: false) { + @if $use-cc-bg { + $name: use-cc-bg($name); + } @else if type-of($name) == 'number' { + @return $name; + } + + @if $max-recursions < 0 or check-color-identifier-type($name) { + @return $name; + } + + $-value: null; + @if map-has-key($o-color-palette, $name) { + $-value: map-get($o-color-palette, $name); + } @else if map-has-key($o-theme-color-palette, $name) { + $-value: map-get($o-theme-color-palette, $name); + } @else if map-has-key($o-gray-color-palette, $name) { + $-value: map-get($o-gray-color-palette, $name); + } + @return o-related-color($-value, $max-recursions - 1, $original-name); +} +// Function which allows to retrieve a color value from a name, the color being +// either in $theme-colors, $grays or $colors maps. If those maps are not +// initialized yet, it will look up the color in the related odoo palettes. +@function o-color($name) { + $name: use-cc-bg($name); + + @if check-color-identifier-type($name) { + @return $name; + } + + // When the system is initialized, it means that the bootstrap maps have + // been configured and contain a direct mapping between color name -> css + // value. We can thus search in those. + @if $o-color-system-initialized { + @if map-has-key($colors, $name) { + @return color($name); + } + @if map-has-key($theme-colors, $name) { + @return theme-color($name); + } + @if map-has-key($grays, $name) { + @return gray($name); + } + } + + // If not initialized, search the css color value in selected color palettes + @return o-related-color($name, $max-recursions: 10, $use-cc-bg: true); +} + +// Same as 'increase-contrast' except that the color is not changed if the given +// related color name is part of the given exclusion list (default to a global +// exclusion list which can be extended by other apps). +$o-we-auto-contrast-exclusions: () !default; +@function auto-contrast($color1, $color2, $color1-name, $exclude: $o-we-auto-contrast-exclusions) { + @if index($exclude, $color1-name) { + @return $color1; + } + @return increase-contrast($color1, $color2); +} diff --git a/addons/web_editor/static/src/scss/web_editor.backend.scss b/addons/web_editor/static/src/scss/web_editor.backend.scss new file mode 100644 index 00000000..370baed9 --- /dev/null +++ b/addons/web_editor/static/src/scss/web_editor.backend.scss @@ -0,0 +1,69 @@ +.oe_form_field_html { + position: relative; + word-wrap: break-word; + + .note-editable { + min-height: 330px; + font: inherit !important; + font-family: inherit !important; + line-height: inherit !important; + color: inherit !important; + overflow: visible; + + p, div { + font-family: 'Lucida Grande', Helvetica, Verdana, Arial, sans-serif; + font-size: 13px; + } + } + ul > li > p, p { + margin: 0px; + } + > iframe { + display: block; + width: 100%; + margin: 0; + padding: 0; + ul > li > p { + margin: 0px; + } + min-height: 300px; + min-height: -webkit-calc(100vh - 170px); + min-height: calc(100vh - 170px); + + &.o_readonly { + border: none; + } + } + .rounded { + border-radius: .25rem !important; + } + table.table.table-bordered { + table-layout: fixed; + } +} + +.o_field_widgetTextHtml_fullscreen { + .oe_form_field_html.o_form_fullscreen_ancestor iframe { + position: absolute !important; + left: 0 !important; + right: 0 !important; + top: 0 !important; + bottom: 0 !important; + width: 100% !important; + min-height: 100% !important; + z-index: 1001 !important; + border: 0; + } + > :not(.modal):not(.modal-backdrop) { + display: none; + } + .o_form_fullscreen_ancestor { + display: block !important; + position: static !important; + top: 0 !important; + left: 0 !important; + width: auto !important; + overflow: hidden !important; + transform: none !important; + } +} diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss new file mode 100644 index 00000000..5b261c2f --- /dev/null +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -0,0 +1,782 @@ +/// +/// This file regroups basic style rules for web_editor enable page edition and backend utils. +/// + +:root { + @each $color, $value in $grays { + @include print-variable($color, $value); + } + + // Most of the keys of the color combination color should be null. We have + // to indicate their fallback values. + @for $index from 1 through length($o-color-combinations) { + $-bg-color: o-color(color('o-cc#{$index}-bg')); + + $-text: color('o-cc#{$index}-text') or color-yiq(o-color('o-cc#{$index}-bg')); + $-headings: color('o-cc#{$index}-headings') or $-text; + $-h2: color('o-cc#{$index}-h2') or $-headings; + $-h3: color('o-cc#{$index}-h3') or $-h2; + $-h4: color('o-cc#{$index}-h4') or $-h3; + $-h5: color('o-cc#{$index}-h5') or $-h4; + $-h6: color('o-cc#{$index}-h6') or $-h5; + + @if not color('o-cc#{$index}-text') { + @include print-variable('o-cc#{$index}-text', $-text); + } + @if not color('o-cc#{$index}-headings') { + @include print-variable('o-cc#{$index}-headings', $-headings); + } + @if not color('o-cc#{$index}-h2') { + @include print-variable('o-cc#{$index}-h2', $-h2); + } + @if not color('o-cc#{$index}-h3') { + @include print-variable('o-cc#{$index}-h3', $-h3); + } + @if not color('o-cc#{$index}-h4') { + @include print-variable('o-cc#{$index}-h4', $-h4); + } + @if not color('o-cc#{$index}-h5') { + @include print-variable('o-cc#{$index}-h5', $-h5); + } + @if not color('o-cc#{$index}-h6') { + @include print-variable('o-cc#{$index}-h6', $-h6); + } + + $-link: color('o-cc#{$index}-link'); + $-link-color: if($-link, o-color($-link), theme-color('primary')); + @include print-variable('o-cc#{$index}-link', auto-contrast($-link-color, $-bg-color, 'o-cc#{$index}-link')); + + $-btn-primary: color('o-cc#{$index}-btn-primary'); + @if not $-btn-primary { + @include print-variable('o-cc#{$index}-btn-primary', theme-color('primary')); + } + @if not color('o-cc#{$index}-btn-primary-border') { + @include print-variable('o-cc#{$index}-btn-primary-border', $-btn-primary or theme-color('primary')); + } + + $-btn-secondary: color('o-cc#{$index}-btn-secondary'); + @if not $-btn-secondary { + @include print-variable('o-cc#{$index}-btn-secondary', theme-color('secondary')); + } + @if not color('o-cc#{$index}-btn-secondary-border') { + @include print-variable('o-cc#{$index}-btn-secondary-border', $-btn-secondary or theme-color('secondary')); + } + } +} + +html, body { + position: relative; + width: 100%; + height: 100%; +} + +.css_non_editable_mode_hidden { + display: none !important; +} +.editor_enable .css_editable_mode_hidden { + display: none !important; +} +.note-toolbar { + margin-left: 0 !important; +} +.note-popover .popover > .arrow { + display: none; +} + +.note-popover .popover, .note-editor { + .dropdown-menu .dropdown-item { + > i { + visibility: hidden; + } + &.checked > i { + visibility: visible; + } + } +} + +/* ----- GENERIC LAYOUTING HELPERS ---- */ +/* table */ +#wrapwrap, .o_editable { + // Only style editor-made tables (shop/portal/... tables are not supposed to + // use table-bordered...) + table.table.table-bordered { + table-layout: fixed; + td { + min-width: 20px; + } + } + @include media-breakpoint-down(sm) { + .table-responsive > table.table { + table-layout: auto; + } + } +} + +// List +ul.o_checklist { + list-style: none; + + >li { + position: relative; + margin-left: $o-checklist-margin-left; + + &::before { + content: ''; + position: absolute; + left: - $o-checklist-margin-left; + display: block; + height: $o-checklist-before-size; + width: $o-checklist-before-size; + margin-top: 4px; + border: 1px solid; + text-align: center; + cursor: pointer; + } + &.o_checked { + text-decoration: line-through; + &::after { + content: "✓"; + position: absolute; + left: - ($o-checklist-margin-left - $o-checklist-checkmark-width); + top: +1px; + } + } + } +} +ol > li.o_indent, ul > li.o_indent { + margin-left: 0; + list-style: none; + &::before { + content: none; + } +} + +// Medias +img.o_we_custom_image { + // Images added with the editor are .img-fluid by default but should + // still behave like inline content. + display: inline-block; +} + +img.shadow { + box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2); +} +img.padding-small, .img.padding-small, span.fa.padding-small, iframe.padding-small { + padding: 4px; +} +img.padding-medium, .img.padding-medium, span.fa.padding-medium, iframe.padding-medium { + padding: 8px; +} +img.padding-large, .img.padding-large, span.fa.padding-large, iframe.padding-large { + padding: 16px; +} +img.padding-xl, .img.padding-xl, span.fa.padding-xl, iframe.padding-xl { + padding: 32px; +} +img.ml-auto, img.mx-auto { + display: block; +} + +.fa-6x { + font-size: 6em; +} +.fa-7x { + font-size: 7em; +} +.fa-8x { + font-size: 8em; +} +.fa-9x { + font-size: 9em; +} +.fa-10x { + font-size: 10em; +} +.fa.mx-auto { + display: block; + text-align: center; +} + +div.media_iframe_video { + margin: 0 auto; + text-align: center; + position: relative; + overflow: hidden; + min-width: 100px; + + iframe { + width: 100%; + height: 100%; + @include o-position-absolute($top: 0); + margin: 0 auto; + margin-left: -50%; + } + &.padding-small iframe { + padding: 4px; + } + &.padding-medium iframe { + padding: 8px; + } + &.padding-large iframe { + padding: 16px; + } + &.padding-xl iframe { + padding: 32px; + } + + .media_iframe_video_size { + padding-bottom: 66.5%; + position: relative; + width: 100%; + height: 0; + } + + .css_editable_mode_display { + @include o-position-absolute(0,0,0,0); + width: 100%; + height: 100%; + display: none; + z-index: 2; + } +} + +html[data-browser^="msie"] div.media_iframe_video iframe { + margin-left: 0; +} + +// Fields +address { + .fa.fa-mobile-phone { + margin: 0 3px 0 2px; + } + .fa.fa-file-text-o { + margin-right: 1px; + } +} + +span[data-oe-type="monetary"] { + white-space: nowrap; +} + +// Menus +// TODO should not be here but used by web_studio so must stay here for now +ul.oe_menu_editor { + .oe_menu_placeholder { + outline: 1px dashed #4183C4; + } + ul { + list-style: none; + } + li div { + cursor: move; + } +} + +// Generate all spacings for all sizes +@mixin o-spacing-all($factor: 1) { + // Generate vertical margin/padding classes used by the editor + @for $i from 0 through (256 / 8) { + @include o-vspacing($i * 8, $factor); + } + @include o-vspacing(4, $factor); + + // 92px vertical margin is kept for compatibility + @include o-vmargins(92, $factor); + + // Some horizontal margin classes defined for convenience + // (and compatibility) + @include o-hmargins(0, $factor); + @include o-hmargins(4, $factor); + @include o-hmargins(8, $factor); + @include o-hmargins(16, $factor); + @include o-hmargins(32, $factor); + @include o-hmargins(64, $factor); +} + +// Generate all spacings for one size, scalled by a given factor +// (0 <= factor <= 1) +@mixin o-vspacing($name, $factor: 1) { + @include o-vmargins($name, $factor); + @include o-vpaddings($name, $factor); +} +@mixin o-vmargins($name, $factor: 1) { + @include o-vmargins-define($name, $factor * $name); +} +@mixin o-vpaddings($name, $factor: 1) { + @include o-vpaddings-define($name, $factor * $name); +} +@mixin o-hspacing($name, $factor: 1) { + @include o-hmargins($name, $factor); + @include o-hpaddings($name, $factor); +} +@mixin o-hmargins($name, $factor: 1) { + @include o-hmargins-define($name, $factor * $name); +} +@mixin o-hpaddings($name, $factor: 1) { + @include o-hpaddings-define($name, $factor * $name); +} + +// Generate all spacings for one size, given the name of the spacing and +// intended size +@mixin o-vmargins-define($name, $size: $name) { + .mt#{$name} { margin-top: $size * 1px !important; } + .mb#{$name} { margin-bottom: $size * 1px !important; } +} +@mixin o-vpaddings-define($name, $size: $name) { + .pt#{$name} { padding-top: $size * 1px !important; } + .pb#{$name} { padding-bottom: $size * 1px !important; } +} +@mixin o-hmargins-define($name, $size: $name) { + .ml#{$name} { margin-left: $size * 1px !important; } + .mr#{$name} { margin-right: $size * 1px !important; } +} +@mixin o-hpaddings-define($name, $size: $name) { + .pl#{$name} { padding-left: $size * 1px !important; } + .pr#{$name} { padding-right: $size * 1px !important; } +} + +// Generate all margins +@include o-spacing-all; + +// Underline +a.o_underline { + text-decoration: underline; + &:hover { + text-decoration: underline; + } +} + +// ACE EDITOR +.o_ace_view_editor { + background: $o-we-ace-color; + color: white; + display: flex; + flex-flow: column nowrap; + opacity: 0.97; + + .o_ace_view_editor_title { + flex: 0 0 auto; + display: flex; + align-items: center; + padding: $grid-gutter-width/4; + + >.o_ace_type_switcher>button::after { + @include o-caret-down; + margin-left: 4px; + } + + >* { + flex: 0 0 auto; + margin: 0 $grid-gutter-width/4; + + &.o_include_option { + display: flex; + align-items: center; + font-size: 11px; + + >.custom-control { + margin-right: $grid-gutter-width/4; + } + } + + &.o_res_list { + flex: 1 1 auto; + min-width: 60px; + } + } + } + + #ace-view-id { + flex: 0 0 auto; + padding: $grid-gutter-width/4 $grid-gutter-width/2; + background-color: lighten($o-we-ace-color, 10%); + + .o_ace_editor_resource_info { + color: #ebecee; + } + } + + #ace-view-editor { + @mixin ace-line-error-mixin { + content: ""; + z-index: 1000; + display: block; + background-color: theme-color('danger'); + opacity: 0.5; + pointer-events: none; + } + + height: 70%; // in case flex is not supported + flex: 1 1 auto; + + .ace_gutter { + cursor: ew-resize; + + .ace_gutter-cell.o_error { + position: relative; + + &::after { + @include o-position-absolute(-100%, 0, -100%, 0); + @include ace-line-error-mixin; + } + } + } + + .ace_resize_bar { + @include o-position-absolute($right: 0); + width: 25px; + height: 100%; + cursor: ew-resize; + } + + .ace_scroller.o_error::after { + @include o-position-absolute(0, auto, 0, 0); + width: 3px; + @include ace-line-error-mixin; + } + } +} + +.ace_editor > .ace_gutter { + display: block !important; // display even with aria-hidden +} + +.o_ace_select2_dropdown { + width: auto !important; + padding-top: 4px; + font-family: monospace !important; + + >.select2-results { + max-height: none; + max-height: 70vh; + + .select2-result-label { + padding-top: 1px; + padding-bottom: 2px; + + >.o_ace_select2_result { + padding: 0; + font-size: 12px; + white-space: nowrap; + } + } + } +} + +.o_nocontent_help { + @include o-nocontent-empty; + + .o_empty_folder_image:before { + @extend %o-nocontent-empty-document; + } +} + +.o_we_search_prompt { + position: relative; + min-height: 250px; + width: 100%; + display: flex; + align-items: center; + justify-content: center; + + & > h2 { + max-width: 500px; + text-align: center; + } + + &::before { + content: ""; + @include o-position-absolute($top: 0, $right: 50px); + width: 100px; + height: 150px; + opacity: .5; + background-image: url('/web_editor/static/src/img/curved_arrow.svg'); + background-size: 100%; + background-repeat: no-repeat; + } +} + +@include media-breakpoint-down(sm) { + odoo-wysiwyg-container { + .panel-heading.note-toolbar { + overflow-x: auto; + } + .btn-group { + position: static; + } + } + // modal select media + .o_technical_modal.o_web_editor_dialog { + // see template 'web_editor.FieldTextHtml.fullscreen' + z-index: 2001; + + > .o_select_media_dialog { + max-width: inherit !important; + z-index: 2001; + + .modal-dialog, .model-content { + height: 100%; + } + + .modal-body { + .nav .nav-item.search { + width: 100%; + + .btn-group { + display: flex; + justify-content: space-around; + padding: 5px; + } + } + + // center pictogram + .font-icons-icons { + text-align: center; + } + + // fix search image + .form-control.o_we_search { + height: inherit; + } + + .form-inline { + .btn-group { + width: 100%; + + .btn.btn-primary:not(.dropdown-toggle) { + width: 90%; + } + } + + > .input-group.ml-2 { + margin-left: 0 !important; + + > .input-group-append { + width: 100%; + + > .btn { + width: 100%; + } + + > .ml-2 { + margin-left: 0 !important; + } + } + } + } + + // attachment cells + .o_we_existing_attachments > .row { + flex-direction: column; + + > .o_existing_attachment_cell { + flex: initial; + max-width: 100%; + + > .o_existing_attachment_remove { + opacity: inherit; + top: 10px; + } + } + } + + // select media dialog unsplash error + #editor-media-image .unsplash_img_container .unsplash_error .mx-auto { + width: 100%; + + .form-group { + input.w-100 { + min-width: 100px; + } + } + } + } + } + } +} + +// BS4 blockquote has no style anymore, except bloquote