diff --git a/addons/web/static/src/scss/bootstrap_review_frontend.scss b/addons/web/static/src/scss/bootstrap_review_frontend.scss index 977df6b5f8b..1cc2f4bb969 100644 --- a/addons/web/static/src/scss/bootstrap_review_frontend.scss +++ b/addons/web/static/src/scss/bootstrap_review_frontend.scss @@ -42,13 +42,19 @@ $o-btn-border-colors: () !default; @include button-outline-variant($-border-color); } } +$o-btn-flat-defaults: () !default; $o-btn-outline-defaults: () !default; +$o-btn-outline-border-width-defaults: () !default; @each $color, $value in $theme-colors { .btn-#{$color} { @if index($o-btn-outline-defaults, $color) { @extend .btn-outline-#{$color}; + border-width: map-get($o-btn-outline-border-width-defaults, $color); } @else { @extend .btn-fill-#{$color}; + @if index($o-btn-flat-defaults, $color) { + @extend .btn.flat; + } } } } diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js index e197b2d0f93..ce690129a6a 100644 --- a/addons/web_editor/static/src/js/editor/snippets.options.js +++ b/addons/web_editor/static/src/js/editor/snippets.options.js @@ -1228,15 +1228,20 @@ const InputUserValueWidget = UnitUserValueWidget.extend({ this.inputEl.setAttribute('type', 'text'); this.inputEl.setAttribute('autocomplete', 'chrome-off'); this.inputEl.setAttribute('placeholder', this.el.getAttribute('placeholder') || ''); - this.inputEl.classList.toggle('text-start', !unit && !step); - this.inputEl.classList.toggle('text-end', !!unit || !!step); + const useNumberAlignment = !!step || !!unit || !!this.el.dataset.fakeUnit || !!this.el.dataset.hideUnit; + this.inputEl.classList.toggle('text-start', !useNumberAlignment); + this.inputEl.classList.toggle('text-end', useNumberAlignment); this.containerEl.appendChild(this.inputEl); - var unitEl = document.createElement('span'); - unitEl.textContent = unit; - this.containerEl.appendChild(unitEl); - if (unit.length > 3) { - this.el.classList.add('o_we_large'); + const showUnit = (!!unit || !!this.el.dataset.fakeUnit) && !this.el.dataset.hideUnit; + if (showUnit) { + var unitEl = document.createElement('span'); + const unitText = this.el.dataset.fakeUnit || unit; + unitEl.textContent = unitText; + this.containerEl.appendChild(unitEl); + if (unitText.length > 3) { + this.el.classList.add('o_we_large'); + } } }, diff --git a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss index ede0b3ad368..b69cb638540 100644 --- a/addons/web_editor/static/src/scss/wysiwyg_snippets.scss +++ b/addons/web_editor/static/src/scss/wysiwyg_snippets.scss @@ -1892,6 +1892,9 @@ border-width: 4px; border-bottom: none !important; } +we-select.o_we_border_preview_aligned_select { + width: $o-we-sidebar-content-field-input-max-width; +} #oe_snippets .colorpicker { $-wb-txt: $o-we-sidebar-content-field-colorpicker-dropdown-color; diff --git a/addons/website/static/src/js/editor/snippets.editor.js b/addons/website/static/src/js/editor/snippets.editor.js index c0d8a22a726..f0a98eb061a 100644 --- a/addons/website/static/src/js/editor/snippets.editor.js +++ b/addons/website/static/src/js/editor/snippets.editor.js @@ -25,9 +25,14 @@ const wSnippetMenu = weSnippetEditor.SnippetsMenu.extend({ THEME: 'theme', }), optionsTabStructure: [ - ['theme-colors', _lt("Theme Colors")], - ['theme-options', _lt("Theme Options")], - ['website-settings', _lt("Website Settings")], + ['theme-colors', _lt("Colors")], + ['website-settings', _lt("Website")], + ['theme-paragraph', _lt("Paragraph")], + ['theme-headings', _lt("Headings")], + ['theme-button', _lt("Button")], + ['theme-link', _lt("Link")], + ['theme-input', _lt("Input Fields")], + ['theme-advanced', _lt("Advanced")], ], /** diff --git a/addons/website/static/src/js/editor/snippets.options.js b/addons/website/static/src/js/editor/snippets.options.js index 98d00337e0a..3d521db97e7 100644 --- a/addons/website/static/src/js/editor/snippets.options.js +++ b/addons/website/static/src/js/editor/snippets.options.js @@ -1427,6 +1427,14 @@ options.registry.OptionsTab = options.Class.extend({ action: 'website.theme_install_kanban_action', }); }, + /** + * @see this.selectClass for parameters + */ + async customizeButtonStyle(previewMode, widgetValue, params) { + // TODO improve: customize two variables at the same time... + await this.customizeWebsiteVariable(previewMode, widgetValue === 'outline', {variable: `btn-${params.button}-outline`}); + await this.customizeWebsiteVariable(previewMode, widgetValue === 'flat', {variable: `btn-${params.button}-flat`}); + }, //-------------------------------------------------------------------------- // Private @@ -1508,6 +1516,11 @@ options.registry.OptionsTab = options.Class.extend({ // See updateUI override return this.grayParams[params.param]; } + if (methodName === 'customizeButtonStyle') { + const isOutline = weUtils.getCSSVariableValue(`btn-${params.button}-outline`); + const isFlat = weUtils.getCSSVariableValue(`btn-${params.button}-flat`); + return isFlat === "'True'" ? 'flat' : isOutline === "'True'" ? 'outline' : 'fill'; + } return this._super(...arguments); }, /** diff --git a/addons/website/static/src/scss/bootstrap_overridden.scss b/addons/website/static/src/scss/bootstrap_overridden.scss index 3ea2844a3f4..00f8a607fca 100644 --- a/addons/website/static/src/scss/bootstrap_overridden.scss +++ b/addons/website/static/src/scss/bootstrap_overridden.scss @@ -92,15 +92,46 @@ $component-active-color: if($component-active-bg, color-contrast($component-acti $font-family-sans-serif: $o-theme-font !default; $font-size-base: o-website-value('font-size-base') !default; +// The top paragraph margin is a custom variable. +$paragraph-margin-top: o-website-value('paragraph-margin-top') !default; +$paragraph-margin-bottom: o-website-value('paragraph-margin-bottom') !default; -$h1-font-size: $font-size-base * $o-theme-h1-font-size-multiplier !default; -$h2-font-size: $font-size-base * $o-theme-h2-font-size-multiplier !default; -$h3-font-size: $font-size-base * $o-theme-h3-font-size-multiplier !default; -$h4-font-size: $font-size-base * $o-theme-h4-font-size-multiplier !default; -$h5-font-size: $font-size-base * $o-theme-h5-font-size-multiplier !default; -$h6-font-size: $font-size-base * $o-theme-h6-font-size-multiplier !default; +$h1-font-size: o-website-value('h1-font-size') or $font-size-base * $o-theme-h1-font-size-multiplier !default; +$h2-font-size: o-website-value('h2-font-size') or $font-size-base * $o-theme-h2-font-size-multiplier !default; +$h3-font-size: o-website-value('h3-font-size') or $font-size-base * $o-theme-h3-font-size-multiplier !default; +$h4-font-size: o-website-value('h4-font-size') or $font-size-base * $o-theme-h4-font-size-multiplier !default; +$h5-font-size: o-website-value('h5-font-size') or $font-size-base * $o-theme-h5-font-size-multiplier !default; +$h6-font-size: o-website-value('h6-font-size') or $font-size-base * $o-theme-h6-font-size-multiplier !default; +// H2~H6 font families are custom variables. $headings-font-family: $o-theme-headings-font !default; +$h2-font-family: $o-theme-h2-font !default; +$h3-font-family: $o-theme-h3-font !default; +$h4-font-family: $o-theme-h4-font !default; +$h5-font-family: $o-theme-h5-font !default; +$h6-font-family: $o-theme-h6-font !default; +// H2~H6 line heights are custom variables. +$headings-line-height: o-website-value('headings-line-height') !default; +$h2-line-height: o-website-value('h2-line-height') or $headings-line-height !default; +$h3-line-height: o-website-value('h3-line-height') or $headings-line-height !default; +$h4-line-height: o-website-value('h4-line-height') or $headings-line-height !default; +$h5-line-height: o-website-value('h5-line-height') or $headings-line-height !default; +$h6-line-height: o-website-value('h6-line-height') or $headings-line-height !default; +// H1~H6 top margins are custom variables. +$headings-margin-top: o-website-value('headings-margin-top') or 0 !default; +$h2-margin-top: o-website-value('h2-margin-top') or $headings-margin-top !default; +$h3-margin-top: o-website-value('h3-margin-top') or $headings-margin-top !default; +$h4-margin-top: o-website-value('h4-margin-top') or $headings-margin-top !default; +$h5-margin-top: o-website-value('h5-margin-top') or $headings-margin-top !default; +$h6-margin-top: o-website-value('h6-margin-top') or $headings-margin-top !default; +// H2~H6 bottom margins are custom variables. +$headings-margin-bottom: o-website-value('headings-margin-bottom') !default; +$h2-margin-bottom: o-website-value('h2-margin-bottom') or $headings-margin-bottom !default; +$h3-margin-bottom: o-website-value('h3-margin-bottom') or $headings-margin-bottom !default; +$h4-margin-bottom: o-website-value('h4-margin-bottom') or $headings-margin-bottom !default; +$h5-margin-bottom: o-website-value('h5-margin-bottom') or $headings-margin-bottom !default; +$h6-margin-bottom: o-website-value('h6-margin-bottom') or $headings-margin-bottom !default; + $headings-color: o-color('o-cc1-headings') !default; $lead-font-size: 1.125rem !default; @@ -175,10 +206,17 @@ $blockquote-margin-y: 0 !default; // Bootstrap Review +$o-btn-flat-defaults: () !default; $o-btn-outline-defaults: () !default; +$o-btn-outline-border-width-defaults: () !default; @each $color in ('primary', 'secondary') { - @if o-website-value('btn-#{$color}-outline') { + @if o-website-value('btn-#{$color}-flat') { + $o-btn-flat-defaults: append($o-btn-flat-defaults, $color); + } @else if o-website-value('btn-#{$color}-outline') { $o-btn-outline-defaults: append($o-btn-outline-defaults, $color); + $o-btn-outline-border-width-defaults: map-merge($o-btn-outline-border-width-defaults, ( + $color: o-website-value('btn-#{$color}-outline-border-width'), + )); } } diff --git a/addons/website/static/src/scss/primary_variables.scss b/addons/website/static/src/scss/primary_variables.scss index e2b8d593917..510d29203dd 100644 --- a/addons/website/static/src/scss/primary_variables.scss +++ b/addons/website/static/src/scss/primary_variables.scss @@ -1954,6 +1954,13 @@ $o-selected-color-palettes-names: ( $o-base-website-values-palette: ( 'font-size-base': 1rem, // Need a set value as the value is used in bootstrap_overridden files + 'body-line-height': 1.5rem, + 'headings-line-height': 1.2, + 'paragraph-margin-top': 0, + 'paragraph-margin-bottom': 16px, + 'headings-margin-top': 0, + 'headings-margin-bottom': 0.5rem, + 'google-fonts': null, 'google-local-fonts': null, @@ -1965,6 +1972,10 @@ $o-base-website-values-palette: ( 'btn-primary-outline': false, 'btn-secondary-outline': false, + 'btn-primary-flat': false, + 'btn-secondary-flat': false, + 'btn-primary-outline-border-width': 1px, + 'btn-secondary-outline-border-width': 1px, 'link-underline': 'hover', // 'never' / 'hover' / 'always' 'btn-ripple': false, @@ -2028,6 +2039,11 @@ $o-base-website-values-palette: ( $o-font-aliases-to-keys: ( 'base': 'font', 'headings': 'headings-font', + 'h2': 'h2-font', + 'h3': 'h3-font', + 'h4': 'h4-font', + 'h5': 'h5-font', + 'h6': 'h6-font', 'navbar': 'navbar-font', 'buttons': 'buttons-font', ); diff --git a/addons/website/static/src/scss/secondary_variables.scss b/addons/website/static/src/scss/secondary_variables.scss index c43f5e60382..26607b339ce 100644 --- a/addons/website/static/src/scss/secondary_variables.scss +++ b/addons/website/static/src/scss/secondary_variables.scss @@ -269,5 +269,10 @@ $o-theme-font: o-get-font-info('base') !default; // one in $o-base-theme-font-configs. This ensures a misconfiguration also does. $o-theme-font: $o-theme-font or o-add-unicode-support-font($o-system-fonts); $o-theme-headings-font: o-get-font-info('headings') or $o-theme-font !default; +$o-theme-h2-font: o-get-font-info('h2') or $o-theme-headings-font !default; +$o-theme-h3-font: o-get-font-info('h3') or $o-theme-headings-font !default; +$o-theme-h4-font: o-get-font-info('h4') or $o-theme-headings-font !default; +$o-theme-h5-font: o-get-font-info('h5') or $o-theme-headings-font !default; +$o-theme-h6-font: o-get-font-info('h6') or $o-theme-headings-font !default; $o-theme-navbar-font: o-get-font-info('navbar') or $o-theme-font !default; $o-theme-buttons-font: o-get-font-info('buttons') or $o-theme-font !default; diff --git a/addons/website/static/src/scss/website.scss b/addons/website/static/src/scss/website.scss index a4b25122a6b..2cd38dea48b 100644 --- a/addons/website/static/src/scss/website.scss +++ b/addons/website/static/src/scss/website.scss @@ -72,6 +72,41 @@ $-seen-urls: (); $i: $i + 1; } + @include print-variable('paragraph-margin-top', $paragraph-margin-top); + @include print-variable('paragraph-margin-bottom', $paragraph-margin-bottom); + @include print-variable('h2-line-height', $h2-line-height); + @include print-variable('h3-line-height', $h3-line-height); + @include print-variable('h4-line-height', $h4-line-height); + @include print-variable('h5-line-height', $h5-line-height); + @include print-variable('h6-line-height', $h6-line-height); + @include print-variable('h1-font-size', $h1-font-size); + @include print-variable('h2-font-size', $h2-font-size); + @include print-variable('h3-font-size', $h3-font-size); + @include print-variable('h4-font-size', $h4-font-size); + @include print-variable('h5-font-size', $h5-font-size); + @include print-variable('h6-font-size', $h6-font-size); + // We cannot rely on $o-theme-hx-font because they contain the list of + // fallback fonts (unicode...). + $-headings-or-main-font: o-website-value('headings-font') or o-website-value('font'); + @include print-variable('h2-font', o-website-value('h2-font') or $-headings-or-main-font); + @include print-variable('h3-font', o-website-value('h3-font') or $-headings-or-main-font); + @include print-variable('h4-font', o-website-value('h4-font') or $-headings-or-main-font); + @include print-variable('h5-font', o-website-value('h5-font') or $-headings-or-main-font); + @include print-variable('h6-font', o-website-value('h6-font') or $-headings-or-main-font); + @include print-variable('headings-line-height', $headings-line-height); + @include print-variable('headings-margin-top', $headings-margin-top); + @include print-variable('headings-margin-bottom', $headings-margin-bottom); + @include print-variable('h2-margin-top', $h2-margin-top); + @include print-variable('h3-margin-top', $h3-margin-top); + @include print-variable('h4-margin-top', $h4-margin-top); + @include print-variable('h5-margin-top', $h5-margin-top); + @include print-variable('h6-margin-top', $h6-margin-top); + @include print-variable('h2-margin-bottom', $h2-margin-bottom); + @include print-variable('h3-margin-bottom', $h3-margin-bottom); + @include print-variable('h4-margin-bottom', $h4-margin-bottom); + @include print-variable('h5-margin-bottom', $h5-margin-bottom); + @include print-variable('h6-margin-bottom', $h6-margin-bottom); + @include print-variable('btn-padding-y', $btn-padding-y); @include print-variable('btn-padding-x', $btn-padding-x); @include print-variable('btn-font-size', $btn-font-size); @@ -314,6 +349,63 @@ h5, h6 { h6 { color: map-get($colors, 'o-cc1-h6'); } + +$heading-font-families: () !default; +$heading-font-families: map-merge(( + "h2": $h2-font-family, + "h3": $h3-font-family, + "h4": $h4-font-family, + "h5": $h5-font-family, + "h6": $h6-font-family, +), $heading-font-families); +$heading-line-heights: () !default; +$heading-line-heights: map-merge(( + "h2": $h2-line-height, + "h3": $h3-line-height, + "h4": $h4-line-height, + "h5": $h5-line-height, + "h6": $h6-line-height, +), $heading-line-heights); +$heading-margin-tops: () !default; +$heading-margin-tops: map-merge(( + "h2": $h2-margin-top, + "h3": $h3-margin-top, + "h4": $h4-margin-top, + "h5": $h5-margin-top, + "h6": $h6-margin-top, +), $heading-margin-tops); +$heading-margin-bottoms: () !default; +$heading-margin-bottoms: map-merge(( + "h2": $h2-margin-bottom, + "h3": $h3-margin-bottom, + "h4": $h4-margin-bottom, + "h5": $h5-margin-bottom, + "h6": $h6-margin-bottom, +), $heading-margin-bottoms); + +h1, h2, h3, h4, h5, h6 { + line-height: $headings-line-height; + margin-top: $headings-margin-top; + margin-bottom: $headings-margin-bottom; +} +@for $index from 2 through 6 { + h#{$index} { + $hn: 'h#{$index}'; + @if ($headings-font-family != map-get($heading-font-families, $hn)) { + font-family: map-get($heading-font-families, $hn); + } + @if ($headings-line-height != map-get($heading-line-heights, $hn)) { + line-height: map-get($heading-line-heights, $hn); + } + @if ($headings-margin-top != map-get($heading-margin-tops, $hn)) { + margin-top: map-get($heading-margin-tops, $hn); + } + @if ($headings-margin-bottom != map-get($heading-margin-bottoms, $hn)) { + margin-bottom: map-get($heading-margin-bottoms, $hn); + } + } +} + .btn { @if ($o-theme-buttons-font != $o-theme-font) { font-family: $o-theme-buttons-font; @@ -321,6 +413,10 @@ h6 { } // Texts +p { + margin-top: $paragraph-margin-top; +} + font[style*='background']:not(.text-gradient), font[class*='bg-'] { padding: 2px 6px 4px; @@ -396,6 +492,7 @@ font[class*='bg-'] { } } + // Background Images .oe_img_bg { background-size: cover; diff --git a/addons/website/views/snippets/snippets.xml b/addons/website/views/snippets/snippets.xml index 78af05a43af..034a29baf1a 100644 --- a/addons/website/views/snippets/snippets.xml +++ b/addons/website/views/snippets/snippets.xml @@ -1519,10 +1519,10 @@ -
- +
+ + Switch Theme + Full Boxed @@ -1545,29 +1545,94 @@ +
+
+ + + + + + + +
+
+ Heading - - - + + + + - - - Buttons - - Fill - Outline - - - Fill - Outline - - + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + Fill + Outline + Flat + + + + Fill + Outline + Flat + + + + @@ -1585,24 +1650,24 @@ - > - + - - - Normal - Underline On Hover - Always Underlined + + None + Ripple - - - Inputs +
+
+ + No Underline + Underline On Hover + Always Underline + +
+
@@ -1622,13 +1687,28 @@ - + + + + + - +
+
+ + + <head> + </body> + + + Custom Key + @@ -1648,18 +1728,6 @@
-
- - Switch Theme - - - <head> - </body> - - - Custom Key - -