mirror of
https://github.com/bringout/oca-ocb-web.git
synced 2026-04-21 07:52:09 +02:00
replace stale web_editor with html_editor and html_builder for 19.0
web_editor was removed in Odoo 19.0 and replaced by html_editor
and html_builder. The old web_editor was incorrectly included in
the 19.0 vanilla import.
🤖 assisted by claude
This commit is contained in:
Ernad Husremovic
parent
4b94f0abc5
commit
f866779561
1513 changed files with 396049 additions and 358525 deletions
|
|
@ -0,0 +1,581 @@
|
|||
///
|
||||
/// This files regroups the variables and mixins which are specific to the builder.
|
||||
///
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// HTML Builder Variables
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
$o-we-colors: (
|
||||
"primary": $o-we-color-primary,
|
||||
"global": $o-we-color-global,
|
||||
"accent": $o-we-color-accent,
|
||||
|
||||
"info": $o-we-color-info,
|
||||
"success": $o-we-color-success,
|
||||
"danger": $o-we-color-danger,
|
||||
"warning": $o-we-color-warning,
|
||||
) !default;
|
||||
|
||||
// Needed to be changed to be high enough to not overflow when a user
|
||||
// has a page with a lot of content (10000px was proven to be too small)
|
||||
$o-we-handles-offset-to-hide: 100000px !default;
|
||||
$o-we-handles-btn-size: 14px !default;
|
||||
$o-we-handles-accent-color: $o-we-color-accent !default;
|
||||
$o-we-handles-accent-color-preview: $o-enterprise-color !default;
|
||||
$o-we-handle-edge-size: $o-we-handles-btn-size !default;
|
||||
$o-we-handle-border-width: 2px !default;
|
||||
$o-we-handle-inside-line-width: 3px !default;
|
||||
|
||||
$o-we-dropzone-size: 30px !default; // $grid-gutter-width (todo: allow to use the variable)
|
||||
$o-we-dropzone-border-width: 2px !default;
|
||||
$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default;
|
||||
$o-we-dropzone-accent-color: $o-we-color-accent !default;
|
||||
$o-we-dropzone-bg-color: rgba($o-we-dropzone-accent-color, .5) !default;
|
||||
|
||||
$o-we-toolbar-height: 40px !default;
|
||||
$o-we-toolbar-color-accent: #018597 !default;
|
||||
|
||||
$o-we-item-standup-color-light: $o-we-fg-lighter;
|
||||
$o-we-item-standup-color-dark: $o-we-bg-darkest;
|
||||
$o-we-item-standup-top: inset 0 1px 0;
|
||||
$o-we-item-standup-bottom: inset 0 -1px 0;
|
||||
|
||||
$o-we-dropdown-spacing: $o-we-item-spacing !default;
|
||||
$o-we-dropdown-bg: $o-we-bg-darker !default;
|
||||
$o-we-dropdown-border-width: 1px !default;
|
||||
$o-we-dropdown-border-color: $o-we-bg-darkest !default;
|
||||
$o-we-dropdown-shadow: 0 2px 8px 0 rgba(black, 0.5) !default;
|
||||
$o-we-dropdown-item-height: 34px !default;
|
||||
$o-we-dropdown-item-spacing: 1px !default;
|
||||
$o-we-dropdown-item-bg: $o-we-bg-lightest !default;
|
||||
$o-we-dropdown-item-bg-hover: $o-we-bg-light !default;
|
||||
$o-we-dropdown-item-color: $o-we-fg-dark !default;
|
||||
$o-we-dropdown-item-hover-color: $o-we-fg-light !default;
|
||||
$o-we-dropdown-item-active-bg: mix($o-we-dropdown-item-bg, $o-we-dropdown-item-bg-hover) !default;
|
||||
$o-we-dropdown-item-active-color: $o-we-fg-lighter !default;
|
||||
$o-we-dropdown-caret-spacing: 2px !default;
|
||||
|
||||
$o-we-sidebar-bg: $o-we-bg !default;
|
||||
$o-we-sidebar-color: $o-we-color !default;
|
||||
$o-we-sidebar-font-size: 12px !default;
|
||||
$o-we-sidebar-border-width: $o-we-border-width !default;
|
||||
$o-we-sidebar-border-color: $o-we-border-color !default;
|
||||
|
||||
// This sidebar width cannot be increased at the moment, it is at the maximum
|
||||
// value it can have, given our current specs, which is 1920px / 150% - 992px.
|
||||
// - 1920px: the usual size of user screens, supposedly the browser one if the
|
||||
// OS task bar is not anchored to the right/left.
|
||||
// - 150%: this is actually the recommended Windows zoom (virtually decreasing
|
||||
// the amount of available pixels to fit our UI).
|
||||
// - 992px: the current minimum width the screen must have for our websites to
|
||||
// be in "desktop" mode (below, columns break over multiple lines).
|
||||
//
|
||||
// If the sidebar is 1px larger, entering edit mode on such Full HD + 150% zoom
|
||||
// will display the website in "mobile" mode (note it is the same with browser
|
||||
// zoom or OS zoom).
|
||||
//
|
||||
// Notice that 1920px / 150% = 1280px which gives the minimum size of the screen
|
||||
// that will display the website in "desktop" mode in the editor if no zoom is
|
||||
// used, which seems like an acceptable value.
|
||||
//
|
||||
// Note: reducing the sidebar width even further to support more devices or
|
||||
// more zoom / OS task bar configuration would be problematic as the sidebar
|
||||
// would become too small. It is currently kinda at both its maximum and minimum
|
||||
// authorized value.
|
||||
//
|
||||
// We tried solutions to virtually "de-zoom" the website iframe to display the
|
||||
// website in "desktop" mode no matter what but this did not give great results.
|
||||
// On problematic devices, the user still has the possibility to de-zoom its
|
||||
// browser by himself.
|
||||
$o-we-sidebar-width: 288px !default; // This includes $o-we-sidebar-border-width
|
||||
|
||||
$o-we-sidebar-top-height: 46px !default;
|
||||
|
||||
$o-we-sidebar-tabs-size-ratio: 1 !default;
|
||||
$o-we-sidebar-tabs-height: 3rem;
|
||||
$o-we-sidebar-tabs-bg: $o-we-bg-darker !default;
|
||||
$o-we-sidebar-tabs-color: $o-we-sidebar-color !default;
|
||||
$o-we-sidebar-tabs-disabled-color: $o-we-fg-darker !default;
|
||||
$o-we-sidebar-tabs-active-border-width: 2px !default;
|
||||
$o-we-sidebar-tabs-active-border-color: $o-we-color-accent !default;
|
||||
$o-we-sidebar-tabs-active-background-color: rgba($o-we-color-accent, .15) !default;
|
||||
$o-we-sidebar-tabs-active-color: $o-we-fg-lighter !default;
|
||||
|
||||
$o-we-sidebar-blocks-content-bg: $o-we-bg-dark !default;
|
||||
$o-we-sidebar-blocks-content-spacing: 10px !default;
|
||||
$o-we-sidebar-blocks-content-snippet-spacing: 2px !default;
|
||||
$o-we-sidebar-blocks-content-snippet-bg: $o-we-bg-lighter !default;
|
||||
|
||||
$o-we-sidebar-content-highlight-bar-width: 2px !default;
|
||||
$o-we-sidebar-content-highlight-bar-color: $o-we-color-accent !default;
|
||||
|
||||
$o-we-sidebar-content-gutter-item-indent: 5px !default;
|
||||
$o-we-sidebar-content-padding-base: 10px !default;
|
||||
$o-we-sidebar-content-indent: $o-we-sidebar-content-gutter-item-indent + $o-we-sidebar-content-padding-base !default;
|
||||
$o-we-sidebar-content-backdrop-bg: rgba(black, 0.2) !default;
|
||||
$o-we-sidebar-content-available-room: $o-we-sidebar-width - $o-we-sidebar-content-padding-base - $o-we-sidebar-content-indent !default;
|
||||
|
||||
$o-we-sidebar-content-main-title-height: 32px !default;
|
||||
$o-we-sidebar-content-main-title-color: $o-we-fg-lighter !default;
|
||||
$o-we-sidebar-content-main-title-font-size: 13px !default;
|
||||
|
||||
$o-we-sidebar-content-block-spacing: 10px !default;
|
||||
|
||||
$o-we-sidebar-content-fold-block-bg: $o-we-bg-lighter !default;
|
||||
|
||||
$o-we-sidebar-content-field-spacing: $o-we-item-spacing !default;
|
||||
$o-we-sidebar-content-field-color: $o-we-fg-darker !default;
|
||||
$o-we-sidebar-content-field-control-item-color: $o-we-fg-darker !default;
|
||||
$o-we-sidebar-content-field-control-item-size: 1em !default;
|
||||
$o-we-sidebar-content-field-control-item-spacing: 0.5em !default;
|
||||
$o-we-sidebar-content-field-label-spacing: 6px !default;
|
||||
|
||||
$o-we-sidebar-content-field-label-width: $o-we-sidebar-content-available-room * .4 !default;
|
||||
$o-we-sidebar-content-field-multi-spacing: $o-we-sidebar-content-field-label-spacing * .5 !default;
|
||||
$o-we-sidebar-content-field-height: 22px !default;
|
||||
|
||||
$o-we-sidebar-content-field-border-width: $o-we-item-border-width !default;
|
||||
$o-we-sidebar-content-field-border-color:$o-we-item-border-color !default;
|
||||
$o-we-sidebar-content-field-border-radius: $o-we-item-border-radius !default;
|
||||
$o-we-sidebar-content-field-disabled-color: $o-we-sidebar-content-field-control-item-color !default;
|
||||
$o-we-sidebar-content-field-clickable-bg: $o-we-item-clickable-bg !default;
|
||||
$o-we-sidebar-content-field-clickable-color: $o-we-item-clickable-color !default;
|
||||
$o-we-sidebar-content-field-clickable-spacing: $o-we-sidebar-content-field-label-spacing !default;
|
||||
$o-we-sidebar-content-field-pressed-bg: $o-we-item-pressed-bg !default;
|
||||
$o-we-sidebar-content-field-pressed-color: $o-we-item-pressed-color !default;
|
||||
|
||||
$o-we-sidebar-content-field-dropdown-spacing: $o-we-dropdown-spacing !default;
|
||||
$o-we-sidebar-content-field-dropdown-bg: $o-we-dropdown-bg !default;
|
||||
$o-we-sidebar-content-field-dropdown-border-width: $o-we-dropdown-border-width !default;
|
||||
$o-we-sidebar-content-field-dropdown-border-color: $o-we-dropdown-border-color !default;
|
||||
$o-we-sidebar-content-field-dropdown-shadow: $o-we-dropdown-shadow !default;
|
||||
$o-we-sidebar-content-field-dropdown-item-height: $o-we-dropdown-item-height !default;
|
||||
$o-we-sidebar-content-field-dropdown-item-spacing: $o-we-dropdown-item-spacing !default;
|
||||
$o-we-sidebar-content-field-dropdown-item-bg: $o-we-dropdown-item-bg !default;
|
||||
$o-we-sidebar-content-field-dropdown-item-bg-hover: $o-we-dropdown-item-bg-hover !default;
|
||||
$o-we-sidebar-content-field-dropdown-item-color: $o-we-dropdown-item-color !default;
|
||||
$o-we-sidebar-content-field-dropdown-item-hover-color: $o-we-dropdown-item-hover-color !default;
|
||||
$o-we-sidebar-content-field-dropdown-item-active-bg: $o-we-dropdown-item-active-bg !default;
|
||||
$o-we-sidebar-content-field-dropdown-item-active-color: $o-we-dropdown-item-active-color !default;
|
||||
$o-we-sidebar-content-field-dropdown-grid-item-height: 60px !default;
|
||||
$o-we-sidebar-content-field-dropdown-grid-item-width: 80px !default;
|
||||
|
||||
$o-we-sidebar-content-field-colorpicker-size: 20px !default;
|
||||
$o-we-sidebar-content-field-colorpicker-size-large: 26px !default;
|
||||
$o-we-sidebar-content-field-colorpicker-shadow: inset 0 0 0 1px rgba(white, 0.5) !default;
|
||||
$o-we-sidebar-content-field-colorpicker-dropdown-bg: $o-we-bg-lighter !default;
|
||||
$o-we-sidebar-content-field-colorpicker-dropdown-color: $o-we-fg-light !default;
|
||||
$o-we-sidebar-content-field-colorpicker-dropdown-active-color: $o-we-fg-lighter !default;
|
||||
$o-we-sidebar-content-field-colorpicker-cc-width: 208px !default;
|
||||
$o-we-sidebar-content-field-colorpicker-cc-height: 26px !default;
|
||||
|
||||
$o-we-sidebar-content-field-input-max-width: 60px !default;
|
||||
$o-we-sidebar-content-field-input-bg: $o-we-bg-light !default;
|
||||
$o-we-sidebar-content-field-input-font-family: $o-we-font-family !default;
|
||||
$o-we-sidebar-content-field-input-unit-font-size: 11px !default;
|
||||
$o-we-sidebar-content-field-input-border-color: $o-we-color-accent !default;
|
||||
|
||||
$o-we-sidebar-content-field-button-group-button-spacing: $o-we-sidebar-content-field-clickable-spacing;
|
||||
|
||||
$o-we-sidebar-content-field-progress-height: 4px !default;
|
||||
$o-we-sidebar-content-field-progress-control-height: 10px !default;
|
||||
$o-we-sidebar-content-field-progress-color: $o-we-fg-darker !default;
|
||||
$o-we-sidebar-content-field-progress-active-color: $o-we-color-accent !default;
|
||||
|
||||
$o-we-sidebar-content-field-toggle-width: 20px !default;
|
||||
$o-we-sidebar-content-field-toggle-height: 12px !default;
|
||||
$o-we-sidebar-content-field-toggle-bg: $o-we-fg-darker !default;
|
||||
$o-we-sidebar-content-field-toggle-active-bg: $o-we-color-accent !default;
|
||||
$o-we-sidebar-content-field-toggle-control-width: 11px !default;
|
||||
$o-we-sidebar-content-field-toggle-control-height: $o-we-sidebar-content-field-toggle-height - 2px !default;
|
||||
$o-we-sidebar-content-field-toggle-control-bg: $o-we-fg-lighter !default;
|
||||
|
||||
// Apply colors according to the given identifier. Can either be a preset
|
||||
// number, a color name or a css color.
|
||||
@mixin o-apply-colors($identifier, $with-extras: true, $background: $body-bg) {
|
||||
$-related-color: o-related-color($identifier, $max-recursions: 10);
|
||||
@if type-of($-related-color) == 'number' {
|
||||
// This is a preset to be applied, just extend it. This should probably
|
||||
// be avoided and use the class in XML if possible.
|
||||
@extend .o_cc;
|
||||
@extend .o_cc#{$-related-color};
|
||||
} @else {
|
||||
@include o-bg-color(o-color($-related-color), $with-extras: $with-extras, $background: $background, $important: false);
|
||||
}
|
||||
}
|
||||
|
||||
@function o-make-palette($-primary, $-secondary: null, $-overrides-map: null) {
|
||||
$-o-color-2: $-secondary or increase-contrast(desaturate(mix(complement($-primary), #FFFFFF, 80%), 20%), $-primary);
|
||||
|
||||
$-palette: (
|
||||
'o-color-1': $-primary,
|
||||
'o-color-2': $-o-color-2,
|
||||
'o-color-3': change-color(#F5F0F0, $hue: hue($-primary), $saturation: min(saturation($-primary), saturation(#F5F0F0))),
|
||||
'o-color-4': #FFFFFF,
|
||||
'o-color-5': change-color(#2e1414, $hue: hue($-primary), $saturation: min(saturation($-primary), saturation(#2e1414))),
|
||||
);
|
||||
|
||||
// Check if primary/dark contrast is enough. If not adapt cc4 & cc5 schemes accordingly
|
||||
@if not (has-enough-contrast(map-get($-palette, 'o-color-5'), map-get($-palette, 'o-color-1'), 300)) {
|
||||
@each $-cc in (4, 5) {
|
||||
$-palette: map-merge($-palette, (
|
||||
'o-cc#{$-cc}-btn-primary': 'o-color-4',
|
||||
'o-cc#{$-cc}-btn-secondary': 'o-color-2',
|
||||
'o-cc#{$-cc}-text': 'o-color-3',
|
||||
'o-cc#{$-cc}-link': 'o-color-4'
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
@if $-overrides-map {
|
||||
$-palette: map-merge($-palette, $-overrides-map);
|
||||
}
|
||||
|
||||
@return $-palette;
|
||||
}
|
||||
|
||||
// ------------------------------------------------------------------
|
||||
// Shapes
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
$o_shape_connection_size_tiny: 2rem !default;
|
||||
$o_shape_connection_size_regular: 4rem !default;
|
||||
$o_shape_connection_size_big: 15rem !default;
|
||||
$o_shape_angular_size_regular: 15rem !default;
|
||||
$o_shape_wavy_size_regular: 15rem !default;
|
||||
$o_shape_pattern_size_tiny: o-to-rem(200px) !default;
|
||||
$o_shape_pattern_size_regular: o-to-rem(800px) !default;
|
||||
|
||||
.o_we_shape {
|
||||
--ShapeConnections--size-tiny: #{$o_shape_connection_size_tiny};
|
||||
--ShapeConnections--size-regular: #{$o_shape_connection_size_regular};
|
||||
--ShapeConnections--size-big: #{$o_shape_connection_size_big};
|
||||
--ShapeAngular--size-regular: #{$o_shape_angular_size_regular};
|
||||
--ShapeWavy--size-regular: #{$o_shape_wavy_size_regular};
|
||||
--ShapePattern--size-tiny: #{$o_shape_pattern_size_tiny};
|
||||
--ShapePattern--size-regular: #{$o_shape_pattern_size_regular};
|
||||
}
|
||||
|
||||
.o_we_shape_btn_content .o_we_shape {
|
||||
--ShapeConnections--size-tiny: 25%;
|
||||
--ShapeConnections--size-regular: 50%;
|
||||
--ShapeConnections--size-big: 75%;
|
||||
--ShapeAngular--size-regular: 50%;
|
||||
--ShapePattern--size-regular: 100%;
|
||||
--ShapePattern--size-tiny: 50%;
|
||||
--ShapeWavy--size-regular: 100%;
|
||||
}
|
||||
|
||||
// Regroups bg shapes available in the Web editor
|
||||
// format: (shape_filename: ('position': X, 'size': Y, 'colors': (1, [3], ...)), ...))
|
||||
$o-bg-shapes-current: (
|
||||
'Airy/01_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Airy/02_001': ('position': top, 'size': 100% 100%, 'colors': (5)),
|
||||
'Airy/06_001': ('position': left bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Airy/07_001': ('position': top, 'size': 100% auto, 'colors': (5)),
|
||||
'Airy/08_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Airy/09_001': ('position': top, 'size': 100% auto, 'colors': (5)),
|
||||
'Airy/10_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Airy/11_001': ('position': top, 'size': 100% auto, 'colors': (5)),
|
||||
'Airy/12_002': ('position': top, 'size': 100% auto, 'colors': (5, 3)),
|
||||
'Airy/13_002': ('position': bottom, 'size': 100% auto, 'colors': (5, 3)),
|
||||
'Airy/14_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Airy/15': ('position': 150% center, 'size': 85% auto, 'colors': (5)),
|
||||
'Airy/16': ('position': center right, 'size': 50% 100%, 'colors': (5)),
|
||||
'Airy/17': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Angular/01': ('position': right bottom, 'size': auto 75%, 'colors': (5)),
|
||||
'Angular/02': ('position': left bottom, 'size': auto 75%, 'colors': (5)),
|
||||
'Angular/03': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Angular/04': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Angular/05': ('position': bottom, 'size': 100% var(--ShapeAngular--size-regular), 'colors': (5)),
|
||||
'Angular/06': ('position': bottom, 'size': 100% var(--ShapeAngular--size-regular), 'colors': (1, 3, 5)),
|
||||
'Angular/07': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Angular/08': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Angular/09': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Blobs/01_001': ('position': top, 'size': 100% auto, 'colors': (2)),
|
||||
'Blobs/02': ('position': bottom, 'size': 100% auto, 'colors': (1, 2)),
|
||||
'Blobs/03': ('position': top, 'size': 100% auto, 'colors': (2)),
|
||||
'Blobs/04_001': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Blobs/05_001': ('position': bottom, 'size': 100% auto, 'colors': (1)),
|
||||
'Blobs/06_001': ('position': top, 'size': 100% auto, 'colors': (1)),
|
||||
'Blobs/10_002': ('position': right, 'size': 100% 100%, 'colors': (5)),
|
||||
'Blobs/13': ('position': bottom, 'size': 100% 100%, 'colors': (1,5)),
|
||||
'Blobs/14': ('position': bottom, 'size': 100% auto, 'colors': (1,5)),
|
||||
'Blobs/15': ('position': top, 'size': 100% auto, 'colors': (1,5)),
|
||||
'Blobs/16': ('position': top, 'size': 100% 100%, 'colors': (5)),
|
||||
'Blobs/17': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Blobs/18': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Blocks/01_001': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5)),
|
||||
'Blocks/02_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5)),
|
||||
'Blocks/04': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3, 5)),
|
||||
'Blurry/01': ('position': center, 'size': 100% 100%, 'colors': (1)),
|
||||
'Blurry/02': ('position': center, 'size': 100% 100%, 'colors': (1)),
|
||||
'Blurry/03': ('position': bottom, 'size': 100% auto, 'colors': (1,2,3,4)),
|
||||
'Blurry/04': ('position': top, 'size': 100% auto, 'colors': (1,2,3)),
|
||||
'Blurry/05': ('position': center, 'size': 100% 100%, 'colors': (1,2,4)),
|
||||
'Blurry/06': ('position': center, 'size': 100% 100%, 'colors': (1,4)),
|
||||
'Bold/01_001': ('position': top, 'size': 100% auto, 'colors': (5)),
|
||||
'Bold/13': ('position': bottom, 'size': 100% 50%, 'colors': (5)),
|
||||
'Bold/14': ('position': center, 'size': 100%, 'colors': (1, 5)),
|
||||
'Bold/15': ('position': top, 'size': 100% 50%, 'colors': (5)),
|
||||
'Bold/16': ('position': center, 'size': 100%, 'colors': (5)),
|
||||
'Bold/17': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Bold/18': ('position': top, 'size': 100% 50%, 'colors': (5)),
|
||||
'Bold/19': ('position': left top, 'size': 100% 12rem, 'colors': (5)),
|
||||
'Bold/20': ('position': center, 'size': 100%, 'colors': (1, 5)),
|
||||
'Bold/21': ('position': right bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Bold/22': ('position': right top, 'size': 100% auto, 'colors': (5)),
|
||||
'Bold/23': ('position': center, 'size': 100%, 'colors': (5)),
|
||||
'Connections/01': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/02': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/03': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/04': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/05': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/06': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/07': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/08': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/09': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/10': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/11': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/12': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/13': ('position': bottom, 'size': 100%, 'colors': (5)),
|
||||
'Connections/14': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/15': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/16': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/17': ('position': bottom, 'size': var(--ShapeConnections--size-tiny), 'colors': (5), 'repeat-x': true),
|
||||
'Connections/18': ('position': bottom, 'size': var(--ShapeConnections--size-tiny), 'colors': (5), 'repeat-x': true),
|
||||
'Connections/19': ('position': bottom, 'size': 100% var(--ShapeConnections--size-regular), 'colors': (5)),
|
||||
'Connections/20': ('position': bottom, 'size': 100% var(--ShapeConnections--size-big), 'colors': (5)),
|
||||
'Containers/01': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Containers/02': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Containers/03': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Containers/04': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Containers/05': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Containers/06': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Floats/01': ('position': center right, 'size': auto 100%, 'colors': (1, 2, 3, 4, 5)),
|
||||
'Floats/02': ('position': center, 'size': 100%, 'colors': (1, 2, 3, 5)),
|
||||
'Floats/03': ('position': center, 'size': 100%, 'colors': (1, 2, 3, 5)),
|
||||
'Floats/04': ('position': center, 'size': 100%, 'colors': (1, 2, 4, 5)),
|
||||
'Floats/05': ('position': center, 'size': 100%, 'colors': (1, 2, 3, 5)),
|
||||
'Floats/06': ('position': center, 'size': auto 100%, 'colors': (1, 2, 3, 5)),
|
||||
'Floats/07': ('position': right bottom, 'size': auto 100%, 'colors': (1, 2, 3, 5)),
|
||||
'Floats/08': ('position': top left, 'size': auto 100%, 'colors': (1, 2, 3, 5)),
|
||||
'Floats/09': ('position': center right, 'size': auto 100%, 'colors': (1, 2, 3)),
|
||||
'Floats/10': ('position': center, 'size': 100% auto, 'colors': (1, 2, 3, 5)),
|
||||
'Floats/11': ('position': center, 'size': 100% 100%, 'colors': (1, 3)),
|
||||
'Floats/12': ('position': top, 'size': 100% auto, 'colors': (1, 2, 3, 5), 'repeat-y': true),
|
||||
'Floats/13': ('position': center, 'size': auto 100%, 'colors': (1, 2, 5)),
|
||||
'Floats/14': ('position': center, 'size': 100%, 'colors': (1, 2, 3, 5), 'repeat-y': true),
|
||||
'Grids/01': ('position': bottom, 'size': 100% 50%, 'colors': (5)),
|
||||
'Grids/02': ('position': right center, 'size': 50% 100%, 'colors': (5)),
|
||||
'Grids/03': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Grids/04': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Grids/05': ('position': center, 'size': auto 100%, 'colors': (5)),
|
||||
'Grids/06': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Grids/07': ('position': right center, 'size': auto 100%, 'colors': (5)),
|
||||
'Grids/08': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Patterns/01': ('position': top, 'size': var(--ShapePattern--size-regular) auto, 'colors': (5), 'repeat-y': true, 'repeat-x': true),
|
||||
'Patterns/02': ('position': top, 'size': var(--ShapePattern--size-regular) auto, 'colors': (5), 'repeat-y': true, 'repeat-x': true),
|
||||
'Patterns/03': ('position': top, 'size': var(--ShapePattern--size-regular) auto, 'colors': (5), 'repeat-y': true, 'repeat-x': true),
|
||||
'Patterns/04': ('position': center, 'size': var(--ShapePattern--size-tiny) auto, 'colors': (5), 'repeat-y': true, 'repeat-x': true),
|
||||
'Patterns/05': ('position': center, 'size': var(--ShapePattern--size-regular) auto, 'colors': (5), 'repeat-y': true, 'repeat-x': true),
|
||||
'Rainy/01_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 5)),
|
||||
'Rainy/02_001': ('position': top, 'size': 100% auto, 'colors': (1, 4, 5)),
|
||||
'Rainy/06': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3)),
|
||||
'Rainy/07': ('position': top, 'size': 100% auto, 'colors': (1, 2, 3)),
|
||||
'Rainy/08_001': ('position': top, 'size': 100% auto, 'colors': (1, 4)),
|
||||
'Rainy/09_001': ('position': top, 'size': 100% auto, 'colors': (1)),
|
||||
'Rainy/10': ('position': center, 'size': 100% auto, 'colors': (1, 3)),
|
||||
'Wavy/03': ('position': top, 'size': 100% auto, 'colors': (1, 2)),
|
||||
'Wavy/04': ('position': bottom, 'size': 100% auto, 'colors': (1, 5)),
|
||||
'Wavy/08_001': ('position': top, 'size': 100% auto, 'colors': (5)),
|
||||
'Wavy/09_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Wavy/10': ('position': center, 'size': 100% auto, 'colors': (1, 2)),
|
||||
'Wavy/11_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Wavy/18': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Wavy/22_001': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Wavy/24': ('position': center, 'size': 100% auto, 'colors': (1, 2)),
|
||||
'Wavy/26': ('position': bottom right, 'size': auto 100%, 'colors': (1, 2)),
|
||||
'Wavy/27': ('position': center, 'size': 100% auto, 'colors': (1, 2)),
|
||||
'Wavy/29': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Wavy/30': ('position': bottom, 'size': 100% var(--ShapeWavy--size-regular), 'colors': (1, 3, 5)),
|
||||
'Wavy/31': ('position': bottom, 'size': 100% var(--ShapeWavy--size-regular), 'colors': (1, 3, 5)),
|
||||
'Zigs/01_001': ('position': bottom, 'size': 100% auto, 'colors': (2)),
|
||||
);
|
||||
|
||||
// TODO: Ensures that discontinued shapes are not imported into new databases
|
||||
// Regroups old bg shapes kept for compatibility
|
||||
// format: (shape_filename: ('position': X, 'size': Y, 'colors': (1, [3], ...)), ...))
|
||||
$o-bg-shapes-discontinued: (
|
||||
'Airy/01': ('position': bottom, 'size': 100% auto, 'colors': (1)),
|
||||
'Airy/02': ('position': top, 'size': 100% auto, 'colors': (1)),
|
||||
'Airy/03': ('position': top, 'size': 100% auto, 'colors': (5)),
|
||||
'Airy/03_001': ('position': top, 'size': 100% auto, 'colors': (5)),
|
||||
'Airy/04': ('position': center, 'size': 100% 100%, 'colors': (1)),
|
||||
'Airy/04_001': ('position': center, 'size': 100% 100%, 'colors': (1)),
|
||||
'Airy/05': ('position': center, 'size': 100% 100%, 'colors': (1)),
|
||||
'Airy/05_001': ('position': center, 'size': 100% 100%, 'colors': (1)),
|
||||
'Airy/06': ('position': bottom, 'size': 100% auto, 'colors': (2)),
|
||||
'Airy/07': ('position': top, 'size': 100% auto, 'colors': (2)),
|
||||
'Airy/08': ('position': bottom, 'size': 100% auto, 'colors': (1)),
|
||||
'Airy/09': ('position': top, 'size': 100% auto, 'colors': (1)),
|
||||
'Airy/10': ('position': bottom, 'size': 100% auto, 'colors': (5)),
|
||||
'Airy/11': ('position': top, 'size': 100% auto, 'colors': (5)),
|
||||
'Airy/12': ('position': top, 'size': 100% auto, 'colors': (1, 3)),
|
||||
'Airy/12_001': ('position': top, 'size': 100% auto, 'colors': (1, 3)),
|
||||
'Airy/13': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)),
|
||||
'Airy/13_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)),
|
||||
'Airy/14': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)),
|
||||
'Blobs/01': ('position': top, 'size': 100% auto, 'colors': (2)),
|
||||
'Blobs/04': ('position': center, 'size': 100% auto, 'colors': (5)),
|
||||
'Blobs/05': ('position': bottom, 'size': 100% auto, 'colors': (1)),
|
||||
'Blobs/06': ('position': top, 'size': 100% auto, 'colors': (1)),
|
||||
'Blobs/07': ('position': top, 'size': 100% auto, 'colors': (5)),
|
||||
'Blobs/08': ('position': right, 'size': 100% auto, 'colors': (1)),
|
||||
'Blobs/09': ('position': bottom, 'size': 100% auto, 'colors': (3)),
|
||||
'Blobs/10': ('position': top, 'size': 100% auto, 'colors': (1, 5)),
|
||||
'Blobs/10_001': ('position': top, 'size': 100% auto, 'colors': (1)),
|
||||
'Blobs/11': ('position': center, 'size': 100% auto, 'colors': (1)),
|
||||
'Blobs/12': ('position': bottom, 'size': 100% auto, 'colors': (1)),
|
||||
'Blocks/01': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5)),
|
||||
'Blocks/02': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5)),
|
||||
'Blocks/03': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)),
|
||||
'Bold/01': ('position': top, 'size': 100% auto, 'colors': (2)),
|
||||
'Bold/02': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3)),
|
||||
'Bold/03': ('position': bottom, 'size': 100% auto, 'colors': (1, 3, 5)),
|
||||
'Bold/04': ('position': top, 'size': 100% auto, 'colors': (2, 3)),
|
||||
'Bold/05': ('position': center, 'size': 100% auto, 'colors': (5)),
|
||||
'Bold/05_001': ('position': center, 'size': 100% auto, 'colors': (3)),
|
||||
'Bold/06': ('position': center, 'size': 100% auto, 'colors': (5)),
|
||||
'Bold/06_001': ('position': center, 'size': 100% auto, 'colors': (3)),
|
||||
'Bold/07': ('position': bottom, 'size': 100% auto, 'colors': (1, 2)),
|
||||
'Bold/07_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 2)),
|
||||
'Bold/08': ('position': top, 'size': 100% auto, 'colors': (1)),
|
||||
'Bold/09': ('position': bottom, 'size': 100% auto, 'colors': (2, 3)),
|
||||
'Bold/10': ('position': top, 'size': 100% auto, 'colors': (1, 3, 4, 5)),
|
||||
'Bold/10_001': ('position': top, 'size': 100% auto, 'colors': (1, 4, 5)),
|
||||
'Bold/11': ('position': bottom, 'size': 100% auto, 'colors': (1, 2, 3)),
|
||||
'Bold/11_001': ('position': bottom, 'size': 100% auto, 'colors': (1, 2)),
|
||||
'Bold/12': ('position': center, 'size': 100% auto, 'colors': (1, 2, 5)),
|
||||
'Bold/12_001': ('position': center, 'size': 100% auto, 'colors': (1, 2, 5)),
|
||||
'Origins/01': ('position': bottom, 'size': 100% auto, 'colors': (2, 5)),
|
||||
'Origins/02': ('position': bottom, 'size': 100% auto, 'colors': (3)),
|
||||
'Origins/02_001': ('position': bottom, 'size': 100% auto, 'colors': (4, 5)),
|
||||
'Origins/03': ('position': top, 'size': 100% auto, 'colors': (3)),
|
||||
'Origins/04': ('position': bottom, 'size': 100% auto, 'colors': (3)),
|
||||
'Origins/04_001': ('position': top, 'size': 100% 100%, 'colors': (3)),
|
||||
'Origins/05': ('position': top, 'size': 100% auto, 'colors': (3)),
|
||||
'Origins/06': ('position': center, 'size': 100% auto, 'colors': (3)),
|
||||
'Origins/06_001': ('position': center, 'size': 100% auto, 'colors': (3, 4)),
|
||||
'Origins/07': ('position': center, 'size': 100% 100%, 'colors': (3)),
|
||||
'Origins/07_001': ('position': center, 'size': 100% 100%, 'colors': (3, 5)),
|
||||
'Origins/07_002': ('position': center, 'size': 100% 100%, 'colors': (3, 4, 5)),
|
||||
'Origins/08': ('position': bottom, 'size': 100% auto, 'colors': (3)),
|
||||
'Origins/09': ('position': top, 'size': 100% auto, 'colors': (1, 5)),
|
||||
'Origins/09_001': ('position': top, 'size': 100% auto, 'colors': (3)),
|
||||
'Origins/10': ('position': bottom, 'size': 100% auto, 'colors': (2, 5)),
|
||||
'Origins/11': ('position': top, 'size': 100% auto, 'colors': (3, 5)),
|
||||
'Origins/11_001': ('position': top, 'size': 100% auto, 'colors': (3, 4)),
|
||||
'Origins/12': ('position': top, 'size': 100% auto, 'colors': (3, 5)),
|
||||
'Origins/13': ('position': center, 'size': 100% auto, 'colors': (3, 5)),
|
||||
'Origins/14': ('position': bottom, 'size': 100% auto, 'colors': (4)),
|
||||
'Origins/14_001': ('position': bottom, 'size': 100% auto, 'colors': (3, 4)),
|
||||
'Origins/15': ('position': top, 'size': 100% auto, 'colors': (4)),
|
||||
'Origins/16': ('position': center, 'size': 100% 100%, 'colors': (3)),
|
||||
'Origins/17': ('position': center, 'size': 100% 100%, 'colors': (3)),
|
||||
'Origins/18': ('position': center, 'size': 100% 100%, 'colors': (1)),
|
||||
'Origins/19': ('position': center, 'size': 100% 100%, 'colors': (5)),
|
||||
'Rainy/01': ('position': bottom, 'size': 100% auto, 'colors': (1, 5)),
|
||||
'Rainy/02': ('position': top, 'size': 100% auto, 'colors': (1, 4, 5)),
|
||||
'Rainy/03': ('position': top, 'size': 100% auto, 'colors': (2, 4, 5), 'repeat-y': true),
|
||||
'Rainy/03_001': ('position': top, 'size': 100% auto, 'colors': (2, 5), 'repeat-y': true),
|
||||
'Rainy/04': ('position': top, 'size': 100% auto, 'colors': (1, 5)),
|
||||
'Rainy/05': ('position': top, 'size': 100% auto, 'colors': (1, 5)),
|
||||
'Rainy/05_001': ('position': top, 'size': 100% auto, 'colors': (1)),
|
||||
'Rainy/08': ('position': top, 'size': 100% auto, 'colors': (1, 4)),
|
||||
'Rainy/09': ('position': top, 'size': 100% auto, 'colors': (1)),
|
||||
'Wavy/01': ('position': bottom, 'size': 100% auto, 'colors': (4)),
|
||||
'Wavy/01_001': ('position': bottom, 'size': 100% auto, 'colors': (3)),
|
||||
'Wavy/02': ('position': top, 'size': 100% auto, 'colors': (4)),
|
||||
'Wavy/02_001': ('position': top, 'size': 100% auto, 'colors': (3)),
|
||||
'Wavy/05': ('position': top, 'size': 100% auto, 'colors': (1, 5)),
|
||||
'Wavy/06': ('position': top, 'size': 100% auto, 'colors': (1, 3, 4, 5)),
|
||||
'Wavy/06_001': ('position': top, 'size': 100% auto, 'colors': (1, 3, 5)),
|
||||
'Wavy/07': ('position': top, 'size': 100% auto, 'colors': (3)),
|
||||
'Wavy/08': ('position': top, 'size': 100% auto, 'colors': (2)),
|
||||
'Wavy/09': ('position': bottom, 'size': 100% auto, 'colors': (1, 5)),
|
||||
'Wavy/11': ('position': bottom, 'size': 100% auto, 'colors': (1, 4)),
|
||||
'Wavy/12': ('position': top, 'size': 100% auto, 'colors': (1)),
|
||||
'Wavy/12_001': ('position': bottom, 'size': 100% auto, 'colors': (1)),
|
||||
'Wavy/13': ('position': bottom, 'size': 100% auto, 'colors': (4)),
|
||||
'Wavy/13_001': ('position': bottom, 'size': 100% auto, 'colors': (1)),
|
||||
'Wavy/14': ('position': bottom, 'size': 100% auto, 'colors': (1, 3)),
|
||||
'Wavy/15': ('position': top, 'size': 100% auto, 'colors': (1)),
|
||||
'Wavy/16': ('position': bottom, 'size': 100% auto, 'colors': (1)),
|
||||
'Wavy/17': ('position': top, 'size': 100% auto, 'colors': (1)),
|
||||
'Wavy/19': ('position': top, 'size': 100% auto, 'colors': (5)),
|
||||
'Wavy/20': ('position': bottom, 'size': 100% auto, 'colors': (2)),
|
||||
'Wavy/21': ('position': top, 'size': 100% auto, 'colors': (2)),
|
||||
'Wavy/22': ('position': bottom, 'size': 100% auto, 'colors': (3)),
|
||||
'Wavy/23': ('position': top, 'size': 100% auto, 'colors': (3)),
|
||||
'Wavy/25': ('position': top, 'size': 100% auto, 'colors': (1, 2)),
|
||||
'Wavy/28': ('position': center, 'size': 100% 100%, 'colors': (1, 3)),
|
||||
'Zigs/01': ('position': bottom, 'size': 100% auto, 'colors': (2)),
|
||||
'Zigs/02': ('position': bottom, 'size': 100% auto, 'colors': (2)),
|
||||
'Zigs/02_001': ('position': bottom, 'size': 100% auto, 'colors': (2)),
|
||||
'Zigs/03': ('position': top, 'size': 100% auto, 'colors': (1), 'repeat-y': true),
|
||||
'Zigs/04': ('position': bottom, 'size': 100% auto, 'colors': (1)),
|
||||
'Zigs/05': ('position': bottom, 'size': 100% auto, 'colors': (3)),
|
||||
'Zigs/06': ('position': bottom, 'size': 30px 100%, 'colors': (4, 5), 'repeat-x': true),
|
||||
);
|
||||
|
||||
// Combines current and old bg shapes in a single map
|
||||
// format: (module_name: (shape_filename: ('position': X, 'size': Y, 'colors': (1, [3], ...)), ...))
|
||||
$o-bg-shapes: (
|
||||
'web_editor': (map-merge($o-bg-shapes-current, $o-bg-shapes-discontinued)),
|
||||
'html_builder': (map-merge($o-bg-shapes-current, $o-bg-shapes-discontinued)),
|
||||
);
|
||||
|
||||
@function change-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) {
|
||||
$-module-shapes: map-get($shapes, $module);
|
||||
$-modified-module-shapes: map-merge($-module-shapes, (
|
||||
$shape-name: map-merge(map-get($-module-shapes, $shape-name), ('color-to-cc-bg-map': $mapping)),
|
||||
));
|
||||
@return map-merge($shapes, (
|
||||
$module: $-modified-module-shapes,
|
||||
));
|
||||
}
|
||||
|
||||
@function add-extra-shape-colors-mapping($module, $shape-name, $mapping-name, $mapping, $shapes: $o-bg-shapes) {
|
||||
$-module-shapes: map-get($shapes, $module);
|
||||
$-shape-data: map-get($-module-shapes, $shape-name);
|
||||
$-extra-mappings: map-get($-shape-data, 'extra-mappings') or ();
|
||||
$-modified-module-shapes: map-merge($-module-shapes, (
|
||||
$shape-name: map-merge($-shape-data, ('extra-mappings': map-merge($-extra-mappings, ($mapping-name: $mapping)))),
|
||||
));
|
||||
@return map-merge($shapes, (
|
||||
$module: $-modified-module-shapes,
|
||||
));
|
||||
}
|
||||
|
||||
@function add-header-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) {
|
||||
@return add-extra-shape-colors-mapping($module, $shape-name, 'header', $mapping, $shapes);
|
||||
}
|
||||
|
||||
@function add-footer-shape-colors-mapping($module, $shape-name, $mapping, $shapes: $o-bg-shapes) {
|
||||
@return add-extra-shape-colors-mapping($module, $shape-name, 'footer', $mapping, $shapes);
|
||||
}
|
||||
|
||||
%o-hb-input-base {
|
||||
border: $o-we-sidebar-content-field-border-width solid $o-we-sidebar-content-field-border-color;
|
||||
border-radius: $o-we-sidebar-content-field-border-radius;
|
||||
background-color: var(--o-hb-field-input-bg, #{$o-we-sidebar-content-field-input-bg});
|
||||
padding: 0.15rem $o-we-sidebar-content-field-clickable-spacing;
|
||||
color: inherit;
|
||||
|
||||
&:focus, &:focus-within {
|
||||
border-color: var(--o-hb-input-active-border, #{$o-we-sidebar-content-field-input-border-color});
|
||||
color: var(--o-hb-row-color-active, #{$o-we-fg-lighter});
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue