pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[IMP] website, web_editor: relayout theme options

Browse Source 
This commit reorganizes the theme options to make them easier to find.
It also adds the following options:
- 'Font size' for each of the six headings
- 'Font (family)' for each of the six headings
- 'Margins' (top & bottom) for paragraph & the 6 headings
- 'Line Height' for paragraph & the 6 headings
- Harmonize buttons options with the custom button ones

task-3140991

Part-of: odoo/odoo#111621
This commit is contained in:
Benoit Socias
2023-07-17 10:40:31 +02:00
parent 1b72b93a9a
commit 388e4bb2bf
10 changed files with 319 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/web/static/src/scss/bootstrap_review_frontend.scss
Vendored
+6
View File
@@ -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;
}
}
}
}
addons/web_editor/static/src/js/editor/snippets.options.js
+12 -7
View File
@@ -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');
}
}
},
addons/web_editor/static/src/scss/wysiwyg_snippets.scss
+3
View File
@@ -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;
addons/website/static/src/js/editor/snippets.editor.js
+8 -3
View File
@@ -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")],
],
/**
addons/website/static/src/js/editor/snippets.options.js
+13
View File
@@ -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);
},
/**
addons/website/static/src/scss/bootstrap_overridden.scss
Vendored
+45 -7
View File
@@ -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'),
));
}
}
addons/website/static/src/scss/primary_variables.scss
+16
View File
@@ -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',
);
addons/website/static/src/scss/secondary_variables.scss
+5
View File
@@ -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;
addons/website/static/src/scss/website.scss
+97
View File
@@ -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;
addons/website/views/snippets/snippets.xml
+114 -46
View File
@@ -1519,10 +1519,10 @@
<we-collapse class="o_we_theme_presets_collapse" string="Color Presets">
</we-collapse>
</div>
<div data-js="OptionsTab" data-selector="theme-options" data-no-check="true">
<we-checkbox string="Show Header"
data-customize-website-views="website.option_layout_hide_header|"
data-reload="/"/>
<div data-js="OptionsTab" data-selector="website-settings" data-no-check="true">
<we-row string="Theme">
<we-button data-switch-theme="" data-no-preview="true" class="o_we_bg_brand_primary">Switch Theme</we-button>
</we-row>
<we-select string="Page Layout" data-variable="layout">
<we-button data-customize-website-variable="'full'" data-name="layout_full_opt">Full</we-button>
<we-button data-customize-website-variable="'boxed'">Boxed</we-button>
@@ -1545,29 +1545,94 @@
<we-imagepicker data-name="body_bg_image_opt"
data-customize-body-bg=""/>
</we-row>
</div>
<div data-js="OptionsTab" data-selector="theme-paragraph" data-no-check="true">
<we-input string="Font size"
data-customize-website-variable="null"
data-variable="font-size-base"
data-unit="px"
data-save-unit="rem"/>
<we-fontfamilypicker string="Font family" data-variable="font"/>
<!-- "× ": \u00D7\u2000 -->
<we-input string="Line height"
data-customize-website-variable="null"
data-variable="body-line-height"
data-fake-unit="× "
data-unit="rem"
data-save-unit="rem"/>
<we-row string="Margins">
<we-input title="Top" data-customize-website-variable="" data-variable="paragraph-margin-top" data-unit="px" data-save-unit="px"/>
<we-input title="Bottom" data-customize-website-variable="" data-variable="paragraph-margin-bottom" data-unit="px" data-save-unit="px"/>
</we-row>
</div>
<div data-js="OptionsTab" data-selector="theme-headings" data-no-check="true">
<t t-set="heading_label">Heading</t>
<we-collapse>
<we-fontfamilypicker string="Font family" data-variable="font"/>
<we-fontfamilypicker string="Headings" class="o_we_sublevel_1" data-variable="headings-font"/>
<we-fontfamilypicker string="Buttons" class="o_we_sublevel_1" data-variable="buttons-font"/>
<we-input string="Font size"
data-customize-website-variable="null"
data-variable="h1-font-size"
data-unit="px"
data-save-unit="rem"/>
<t t-foreach="[2, 3, 4, 5, 6]" t-as="depth">
<we-input t-attf-string="#{heading_label} #{depth}" class="o_we_sublevel_1"
data-customize-website-variable="null"
t-attf-data-variable="h#{depth}-font-size"
data-unit="px"
data-save-unit="rem"/>
</t>
</we-collapse>
<!-- Buttons & Links -->
<we-title>Buttons</we-title>
<we-select string="Primary Style" data-variable="btn-primary-outline" class="">
<we-button data-customize-website-variable="false">Fill</we-button>
<we-button data-customize-website-variable="true">Outline</we-button>
</we-select>
<we-select string="Secondary Style" data-variable="btn-secondary-outline">
<we-button data-customize-website-variable="false">Fill</we-button>
<we-button data-customize-website-variable="true">Outline</we-button>
</we-select>
<we-collapse>
<we-row string="Paddings">
<we-fontfamilypicker string="Font family" data-variable="headings-font"/>
<t t-foreach="[2, 3, 4, 5, 6]" t-as="depth">
<we-fontfamilypicker t-attf-string="#{heading_label} #{depth}" class="o_we_sublevel_1"
t-attf-data-variable="h#{depth}-font"/>
</t>
</we-collapse>
<we-collapse>
<!-- "× ": \u00D7\u2000 -->
<we-input string="Line height"
data-customize-website-variable="null"
data-variable="headings-line-height"
data-fake-unit="× "/>
<t t-foreach="[2, 3, 4, 5, 6]" t-as="depth">
<we-input t-attf-string="#{heading_label} #{depth}" class="o_we_sublevel_1"
data-customize-website-variable="null"
t-attf-data-variable="h#{depth}-line-height"
data-fake-unit="× "/>
</t>
</we-collapse>
<we-collapse>
<we-row string="Margins">
<we-input title="Top" data-customize-website-variable="" data-variable="headings-margin-top" data-unit="px" data-save-unit="px"/>
<we-input title="Bottom" data-customize-website-variable="" data-variable="headings-margin-bottom" data-unit="px" data-save-unit="px"/>
</we-row>
<t t-foreach="[2, 3, 4, 5, 6]" t-as="depth">
<we-row t-attf-string="#{heading_label} #{depth}" class="o_we_sublevel_1">
<we-input title="Top" data-customize-website-variable="" t-attf-data-variable="h#{depth}-margin-top" data-unit="px" data-save-unit="px"/>
<we-input title="Bottom" data-customize-website-variable="" t-attf-data-variable="h#{depth}-margin-bottom" data-unit="px" data-save-unit="px"/>
</we-row>
</t>
</we-collapse>
</div>
<div data-js="OptionsTab" data-selector="theme-button" data-no-check="true">
<we-select string="Primary Style" data-button="primary" data-no-preview="true">
<we-button data-customize-button-style="fill">Fill</we-button>
<we-button data-customize-button-style="outline" data-name="btn_primary_outline_opt">Outline</we-button>
<we-button data-customize-button-style="flat">Flat</we-button>
</we-select>
<we-input string="Border Width" class="o_we_sublevel_1" data-customize-website-variable=""
data-variable="btn-primary-outline-border-width" data-dependencies="btn_primary_outline_opt"
data-unit="px" data-save-unit="rem"/>
<we-select string="Secondary Style" data-button="secondary" data-no-preview="true">
<we-button data-customize-button-style="fill">Fill</we-button>
<we-button data-customize-button-style="outline" data-name="btn_secondary_outline_opt">Outline</we-button>
<we-button data-customize-button-style="flat">Flat</we-button>
</we-select>
<we-input string="Border Width" class="o_we_sublevel_1" data-customize-website-variable=""
data-variable="btn-secondary-outline-border-width" data-dependencies="btn_secondary_outline_opt"
data-unit="px" data-save-unit="rem"/>
<we-collapse>
<we-row string="Padding">
<we-input title="Y" data-customize-website-variable="" data-variable="btn-padding-y" data-unit="px" data-save-unit="rem"/>
<we-input title="X" data-customize-website-variable="" data-variable="btn-padding-x" data-unit="px" data-save-unit="rem"/>
</we-row>
@@ -1585,24 +1650,24 @@
<we-input string="Small" class="o_we_sublevel_1" data-customize-website-variable="" data-variable="btn-font-size-sm" data-unit="px" data-save-unit="rem"/>
<we-input string="Large" class="o_we_sublevel_1" data-customize-website-variable="" data-variable="btn-font-size-lg" data-unit="px" data-save-unit="rem"/>
</we-collapse>
<we-input string="Border Width" data-customize-website-variable="" data-variable="btn-border-width" data-unit="px" data-save-unit="rem"/>>
<we-collapse>
<we-input string="Border Radius" data-customize-website-variable="" data-variable="btn-border-radius" data-unit="px" data-save-unit="rem"/>
<we-input string="Round Corners" data-customize-website-variable="" data-variable="btn-border-radius" data-unit="px" data-save-unit="rem"/>
<we-input string="Small" class="o_we_sublevel_1" data-customize-website-variable="" data-variable="btn-border-radius-sm" data-unit="px" data-save-unit="rem"/>
<we-input string="Large" class="o_we_sublevel_1" data-customize-website-variable="" data-variable="btn-border-radius-lg" data-unit="px" data-save-unit="rem"/>
</we-collapse>
<we-checkbox string="Ripple Effect"
data-customize-website-assets="website.ripple_effect_scss, website.ripple_effect_js"
data-customize-website-variable="false|true"
data-variable="btn-ripple"/>
<we-select string="Link Style" data-variable="link-underline">
<we-button data-customize-website-variable="'never'">Normal</we-button>
<we-button data-customize-website-variable="'hover'">Underline On Hover</we-button>
<we-button data-customize-website-variable="'always'">Always Underlined</we-button>
<we-select string="On Click Effect" data-variable="btn-ripple">
<we-button data-customize-website-variable="false">None</we-button>
<we-button data-customize-website-variable="true" data-customize-website-assets="website.ripple_effect_scss, website.ripple_effect_js">Ripple</we-button>
</we-select>
<!-- Inputs -->
<we-title>Inputs</we-title>
</div>
<div data-js="OptionsTab" data-selector="theme-link" data-no-check="true">
<we-select string="Link Style" data-variable="link-underline">
<we-button data-customize-website-variable="'never'">No Underline</we-button>
<we-button data-customize-website-variable="'hover'">Underline On Hover</we-button>
<we-button data-customize-website-variable="'always'">Always Underline</we-button>
</we-select>
</div>
<div data-js="OptionsTab" data-selector="theme-input" data-no-check="true">
<we-collapse>
<we-row string="Paddings">
<we-input title="Y" data-customize-website-variable="" data-variable="input-padding-y" data-unit="px" data-save-unit="rem"/>
@@ -1622,13 +1687,28 @@
<we-input string="Small" class="o_we_sublevel_1" data-customize-website-variable="" data-variable="input-font-size-sm" data-unit="px" data-save-unit="rem"/>
<we-input string="Large" class="o_we_sublevel_1" data-customize-website-variable="" data-variable="input-font-size-lg" data-unit="px" data-save-unit="rem"/>
</we-collapse>
<we-input string="Border Width" data-customize-website-variable="" data-variable="input-border-width" data-unit="px" data-save-unit="rem"/>
<we-collapse>
<we-input string="Border Width" data-customize-website-variable="" data-variable="input-border-width" data-unit="px" data-save-unit="rem"/>
<we-input string="Small" class="o_we_sublevel_1" data-customize-website-variable="" data-variable="input-border-width-sm" data-unit="px" data-save-unit="rem"/>
<we-input string="Large" class="o_we_sublevel_1" data-customize-website-variable="" data-variable="input-border-width-lg" data-unit="px" data-save-unit="rem"/>
</we-collapse>
<we-collapse>
<we-input string="Border Radius" data-customize-website-variable="" data-variable="input-border-radius" data-unit="px" data-save-unit="rem"/>
<we-input string="Small" class="o_we_sublevel_1" data-customize-website-variable="" data-variable="input-border-radius-sm" data-unit="px" data-save-unit="rem"/>
<we-input string="Large" class="o_we_sublevel_1" data-customize-website-variable="" data-variable="input-border-radius-lg" data-unit="px" data-save-unit="rem"/>
</we-collapse>
</div>
<div data-js="OptionsTab" data-selector="theme-advanced" data-no-check="true">
<we-checkbox string="Show Header"
data-customize-website-views="website.option_layout_hide_header|"
data-reload="/"/>
<we-row string="Code Injection" title="Enter code that will be added into every page of your site">
<we-button data-no-preview="true" data-open-custom-code-dialog="head">&amp;lt;head&amp;gt;</we-button>
<we-button data-no-preview="true" data-open-custom-code-dialog="footer">&amp;lt;/body&amp;gt;</we-button>
</we-row>
<we-row string="Google Map">
<we-button data-configure-api-key="" data-no-preview="true">Custom Key</we-button>
</we-row>
<we-row string="Status Colors">
<we-colorpicker title="Success" data-customize-website-color="" data-color-type="theme" data-color="success" data-selected-tab="custom-colors"/>
<we-colorpicker title="Info" data-customize-website-color="" data-color-type="theme" data-color="info" data-selected-tab="custom-colors"/>
@@ -1648,18 +1728,6 @@
<we-range string="Saturation" class="o_we_sublevel_1" data-customize-gray="" data-param="gray-extra-saturation" data-step="0.1"/>
</we-collapse>
</div>
<div data-js="OptionsTab" data-selector="website-settings" data-no-check="true">
<we-row string="Theme">
<we-button data-switch-theme="" data-no-preview="true">Switch Theme</we-button>
</we-row>
<we-row string="Code Injection" title="Enter code that will be added into every page of your site">
<we-button data-no-preview="true" data-open-custom-code-dialog="head">&amp;lt;head&amp;gt;</we-button>
<we-button data-no-preview="true" data-open-custom-code-dialog="footer">&amp;lt;/body&amp;gt;</we-button>
</we-row>
<we-row string="Google Map">
<we-button data-configure-api-key="" data-no-preview="true">Custom Key</we-button>
</we-row>
</div>
<!-- Info page ('/website/info') -->
<div data-selector="main:has(.o_website_info)" data-page-options="true" groups="website.group_website_designer" data-no-check="true" string="Info Page">
<we-checkbox string="Odoo Information"