diff options
| author | qsm-odoo <qsm@odoo.com> | 2018-12-21 10:37:10 +0000 |
|---|---|---|
| committer | qsm-odoo <qsm@odoo.com> | 2018-12-26 17:25:23 +0000 |
| commit | 52ec536cef2ec84af0b36746f19a8cdf9f23fe2a (patch) | |
| tree | 003b9e782fa078866d56f71a926338a65379e080 /addons/web_editor/static | |
| parent | ec48392e39e551d9784f0431aa818f280edf9ce3 (diff) | |
[REF] *: make stronger bootstrap assets
* portal, theme_bootswatch, web, web_editor, website
With less2sass and bs3tobs4 tasks, the assets structure was reviewed to
handle the specificities of both framework and to prepare for our next
odoo tasks. In particular, the assets_helpers and bootstrap overrides
were basically split into 4 parts: utils, primary variables, secondary
variables and bootstrap variables.
(see https://github.com/odoo/odoo/commit/6e4db7d13a926845bf82f5b035afede42d6d5a89)
Using the !default system for the bootstrap variables parts seems now
a good improvement. This is part of what this commit does: adding the
default flag for all bootstrap variables overrides and inverting the
order of the files in the _assets_backend_helpers and
_assets_frontend_helpers templates. This allows to avoid code like this:
portal:
```
$body-bg: white;
```
website:
```
@if $var != null {
$body-bg: $var;
}
```
This code makes the body white with portal or equal to $var with website
if $var has a value. The same behavior in the new file order is achieved
with:
website:
```
$body-bg: $var !default;
```
portal:
```
$body-bg: white !default;
```
This order is now also followed for the _assets_secondary_variables
templates (there are only a few).
This commit also make better assets hierarchy by making website inherit
from portal assets (instead of web) and portal inherit from web_editor
assets (instead of web) (thus relying on strong dependencies instead of
installation order which is not always right for migrated databases).
closes odoo/odoo#29757
Diffstat (limited to 'addons/web_editor/static')
| -rw-r--r-- | addons/web_editor/static/src/scss/bootstrap_overridden.scss | 24 | ||||
| -rw-r--r-- | addons/web_editor/static/src/scss/secondary_variables.scss | 37 |
2 files changed, 41 insertions, 20 deletions
diff --git a/addons/web_editor/static/src/scss/bootstrap_overridden.scss b/addons/web_editor/static/src/scss/bootstrap_overridden.scss index 5c64d275d56..0bfc53c5091 100644 --- a/addons/web_editor/static/src/scss/bootstrap_overridden.scss +++ b/addons/web_editor/static/src/scss/bootstrap_overridden.scss @@ -2,29 +2,14 @@ $-is-backend: variable-exists('primary'); // Use auto threshold for yiq colors -$yiq-contrasted-threshold: false; +$yiq-contrasted-threshold: false !default; // Automatically update bootstrap colors map (unused by BS itself) -$-palette: nth($o-color-palettes, $o-color-palette-number); $colors: () !default; -$colors: map-merge($-palette, $colors); +$colors: map-merge($o-color-palette, $colors); // Automatically extend bootstrap to create theme background/text/button classes -$-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number); -$-main-color: map-get($-palette, 'alpha'); -$-main-color-lightness: lightness($-main-color); -$-palette: map-merge(( - // alpha and beta colors 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($-palette, 'beta'), - - // 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($-palette)); +$-palette: $o-theme-color-palette; @if $-is-backend { $-palette: map-remove($-palette, 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'light', 'dark'); } @@ -34,8 +19,7 @@ $theme-colors: map-merge($-palette, $theme-colors); // Extend grays with transparent ones (for some reason, BS4 create black-50 and // white-50 but does not allow overridding that with variables), also use the // theme gray palette (which is supposed to at least declare white and black). -$-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number); -$-palette: map-merge($o-transparent-grays, $-palette); +$-palette: $o-gray-color-palette; @if $-is-backend { $-palette: map-remove($-palette, '100', '200', '300', '400', '500', '600', '700', '800', '900'); } 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 00000000000..e1e4e62ca66 --- /dev/null +++ b/addons/web_editor/static/src/scss/secondary_variables.scss @@ -0,0 +1,37 @@ + +//------------------------------------------------------------------------------ +// Colors +//------------------------------------------------------------------------------ + +// Colors +$o-color-palette: nth($o-color-palettes, $o-color-palette-number) !default; +@function palette-color($key) { + @return map-get($o-color-palette, $key); +} + +// Theme colors +$o-theme-color-palette: nth($o-theme-color-palettes, $o-theme-color-palette-number) !default; +$-main-color: map-get($o-theme-color-palette, 'alpha'); +$-main-color-lightness: lightness($-main-color); +$o-theme-color-palette: map-merge(( + // alpha and beta colors 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-theme-color-palette, 'beta'), + + // 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)); +@function palette-theme-color($key) { + @return map-get($o-theme-color-palette, $key); +} + +// Gray colors +$o-gray-color-palette: nth($o-gray-color-palettes, $o-gray-color-palette-number) !default; +$o-gray-color-palette: map-merge($o-transparent-grays, $o-gray-color-palette); +@function palette-gray($key) { + @return map-get($o-gray-color-palette, $key); +} |
