diff options
Diffstat (limited to 'addons/website/static/src/scss/website.wysiwyg.scss')
| -rw-r--r-- | addons/website/static/src/scss/website.wysiwyg.scss | 235 |
1 files changed, 235 insertions, 0 deletions
diff --git a/addons/website/static/src/scss/website.wysiwyg.scss b/addons/website/static/src/scss/website.wysiwyg.scss new file mode 100644 index 00000000..32c86a63 --- /dev/null +++ b/addons/website/static/src/scss/website.wysiwyg.scss @@ -0,0 +1,235 @@ + +@each $font-name, $font-config in $o-theme-font-configs { + $url: map-get($font-config, 'url'); + @if $url { + @import url("https://fonts.googleapis.com/css?family=#{unquote($url)}&display=swap"); + } +} + +:root { + // Override css variables to influence the default style of the editor + // without duplicating the css. + @include print-variable('o-we-toolbar-height', $o-navbar-height); + + // Need info about the color of each color palette + @for $index from 1 through length($o-color-palettes) - 1 { // Not the user one + @each $name, $color in nth($o-color-palettes, $index) { + @include print-variable('o-palette-#{$index}-#{$name}', $color); + } + } +} + +// EDITOR TOP BAR AND POPOVER +.o_we_website_top_actions { + @include o-position-absolute($top: 0, $right: 0); + z-index: ($zindex-fixed + $zindex-modal-backdrop) / 2 + 2; // $o-we-zindex + display: flex; + justify-content: flex-end; + width: $o-we-sidebar-width; + height: $o-we-sidebar-top-height; + background-color: $o-we-sidebar-tabs-bg; + + .btn-group, .btn { + height: 100%; + } + + .btn { + border: none; + border-radius: 0; + padding: 0.375rem 0.75rem; + font-size: $o-we-font-size; + font-family: $o-we-font-family; + font-weight: 400; + line-height: 1; + + &.btn-primary { + @include button-variant($o-brand-primary, $o-brand-primary); + } + &.btn-secondary { + @include button-variant($o-we-sidebar-tabs-bg, $o-we-sidebar-tabs-bg); + } + &:focus, &:active, &:focus:active { + outline: none; + box-shadow: none; + } + } + + .dropdown-menu { + left: auto; + right: 0; + } +} + +#oe_snippets { + top: $o-we-sidebar-top-height; +} + +.note-statusbar { + display: none; +} + +// TRANSLATIONS +.oe_translate_examples li { + margin: 10px; + padding: 4px; +} + +html[lang] > body.editor_enable [data-oe-translation-state] { + background: rgba($o-we-content-to-translate-color, 0.5) !important; + + &[data-oe-translation-state="translated"] { + background: rgba($o-we-translated-content-color, 0.5) !important; + } + + &.o_dirty { + background: rgba($o-we-translated-content-color, 0.25) !important; + } +} + +// SNIPPET PANEL +$i: 1; +@each $font-name, $font-config in $o-theme-font-configs { + we-toggler.o_we_option_font_#{$i}, we-button.o_we_option_font_#{$i} > div { + font-family: o-safe-get($font-config, 'family', $font-family-base); + + &::before { + content: $font-name; + } + } + $i: $i + 1; +} +.o_we_add_google_font_btn { + border-top: 1px solid currentColor !important; +} + +#oe_snippets > .o_we_customize_panel { + .o_we_user_value_widget.o_palette_color_preview_button { + > div { + display: flex; + flex: 1 1 auto; + align-items: stretch; + } + .o_palette_color_preview { + flex: 1 0 0; + margin: 1px 0; + transition: flex 150ms ease 0s; + } + &:not(:hover) .o_palette_color_preview { + &:nth-child(4), &:nth-child(5) { + flex: 0 0 0; + } + } + } + + we-select.o_scroll_effects_selector we-button { + padding-top: $o-we-item-spacing; + padding-bottom: $o-we-item-spacing; + + img { + max-height: 80px; + width: auto; + margin-right: $o-we-item-spacing; + margin-left: $o-we-item-spacing * .5; + } + } + + //---------------------------------------------------------------------- + // 'Options' Tab Specific Components + //---------------------------------------------------------------------- + + // Theme Colors Editor + .o_we_theme_colors_selector { + + > we-title { + display: none + } + .o_we_so_color_palette.o_we_user_value_widget { + + + .o_we_so_color_palette { + margin-left: 10px; + } + .o_we_color_preview { + width: $o-we-sidebar-content-field-colorpicker-size-large; + height: $o-we-sidebar-content-field-colorpicker-size-large; + } + } + > div, we-select.o_we_theme_colors_select, we-toggler { + display: flex; + } + > div { + align-items: stretch; + width: 100%; + } + we-select.o_we_theme_colors_select { + justify-content: flex-end; + margin-left: auto; + + > div, we-toggler { + height: 100%; + } + } + we-toggler { + align-items: center; + padding: 0 0.4rem; + font-size: 1.5em; + + &:after { + content: none; + } + } + } + + // Palettes Dropdown + .o_palette_color_preview_button > div { + min-height: 24px; + } + + // CC Edition + .o_we_cc_preview_wrapper { + // Use box-shadow rather than border-bottom in order to + // avoid misalignments in the 'Options' tab. + border: 1px solid; + border-color: rgba($o-we-item-standup-color-light, .2) $o-we-sidebar-content-field-dropdown-border-color transparent; + box-shadow: 0 1px 0 $o-we-item-standup-color-dark; + + + .o_we_collapse_toggler { + height: 35px; // FIXME hardcoded... + } + } +} + +// SNIPPET OPTIONS +.o_we_border_preview { + display: inline-block; + width: 999px; + max-width: 100%; + margin-bottom: 2px; + border-width: 4px; + border-bottom: none !important; +} + +.pac-container { // google map autosuggestion + z-index: $zindex-modal-backdrop; // > $o-we-zindex + width: $o-we-sidebar-width !important; + font-size: $o-we-sidebar-font-size; + margin-left: -$o-we-sidebar-width/2; + border-top: none; + background-color: $o-we-sidebar-content-field-dropdown-bg; + box-shadow: $o-we-sidebar-content-field-dropdown-shadow; + &:after { + display: none; + } + .pac-item { + border-top: $o-we-sidebar-content-field-border-width solid lighten($o-we-sidebar-content-field-dropdown-border-color, 15%); + border-radius: $o-we-sidebar-content-field-border-radius; + background-color: $o-we-sidebar-content-field-clickable-bg; + color: $o-we-sidebar-content-field-clickable-color; + &:hover { + background-color: $o-we-sidebar-content-field-dropdown-item-bg-hover; + cursor: pointer; + } + } + .pac-item-query { + color: $o-we-sidebar-content-field-clickable-color; + } +} |