From 76f714dca8957233ba3bbca73f340fa21244f5f2 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 28 Jun 2018 17:54:40 +0200 Subject: [REF] web, web_editor, *: review theme color extensions * survey, website_slides Before this commit, the web_editor app created bg and text classes its own way for theming (alpha, beta, grays, ...). Now the system is far more automatic by extending BS4 color maps. --- .../src/scss/web_editor.common.bootstrap.scss | 28 +++++++++++++++ .../static/src/scss/web_editor.common.scss | 42 +++------------------- .../static/src/scss/web_editor.variables.scss | 18 ---------- 3 files changed, 33 insertions(+), 55 deletions(-) create mode 100644 addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss (limited to 'addons/web_editor/static/src') diff --git a/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss b/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss new file mode 100644 index 00000000000..b7ad30b1bc4 --- /dev/null +++ b/addons/web_editor/static/src/scss/web_editor.common.bootstrap.scss @@ -0,0 +1,28 @@ + +// Automatically extend bootstrap to create theme background/text/button classes +$theme-colors: () !default; +$theme-colors: map-merge(( + 'alpha': $color-alpha, + 'beta': $color-beta, + 'gamma': $color-gamma, + 'delta': $color-delta, + 'epsilon': $color-epsilon, +), $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 add black +// and white ones too as they were also not added by BS4... +$grays: () !default; +$grays: map-merge(( + 'black-25': $color-black-25, + 'black-50': $color-black-50, + 'black-75': $color-black-75, + 'white-25': $color-white-25, + 'white-50': $color-white-50, + 'white-75': $color-white-75, + + // Note: those two needs to be redefined before bootstrap, otherwise they + // do not exist yet + 'black': $black, + 'white': $white, +), $grays); diff --git a/addons/web_editor/static/src/scss/web_editor.common.scss b/addons/web_editor/static/src/scss/web_editor.common.scss index 31ae70b766c..11fa94cd010 100644 --- a/addons/web_editor/static/src/scss/web_editor.common.scss +++ b/addons/web_editor/static/src/scss/web_editor.common.scss @@ -229,40 +229,8 @@ a.o_underline { } } -// Create classes for theme colors... -@include o-create-color-classes(alpha, $color-alpha); -@include o-create-color-classes(beta, $color-beta); -@include o-create-color-classes(gamma, $color-gamma); -@include o-create-color-classes(delta, $color-delta); -@include o-create-color-classes(epsilon, $color-epsilon); - -// ... and button classes -@include o-create-color-btn-classes(alpha, $color-alpha); -@include o-create-color-btn-classes(beta, $color-beta); -@include o-create-color-btn-classes(gamma, $color-gamma); -@include o-create-color-btn-classes(delta, $color-delta); -@include o-create-color-btn-classes(epsilon, $color-epsilon); - -// Create classes for UI colors // FIXME -@include o-create-color-classes(primary, theme-color('primary')); -// @include o-create-color-classes(success, $state-success-bg, $content-color: $state-success-text); -// @include o-create-color-classes(info, $state-info-bg, $content-color: $state-info-text); -// @include o-create-color-classes(warning, $state-warning-bg, $content-color: $state-warning-text); -// @include o-create-color-classes(danger, $state-danger-bg, $content-color: $state-danger-text); - -// Create classes for greyscale colors -@include o-create-color-classes('black', $black); -@include o-create-color-classes('gray-darker', gray('900')); // FIXME -@include o-create-color-classes('gray-dark', gray('900')); -@include o-create-color-classes('gray', gray('700')); -@include o-create-color-classes('gray-light', gray('600')); -@include o-create-color-classes('gray-lighter', gray('200')); -@include o-create-color-classes('white', $white); - -// Create classes for greyscale transparent colours -@include o-create-color-classes('black-25', $color-black-25); -@include o-create-color-classes('black-50', $color-black-50); -@include o-create-color-classes('black-75', $color-black-75); -@include o-create-color-classes('white-25', $color-white-25); -@include o-create-color-classes('white-50', $color-white-50); -@include o-create-color-classes('white-75', $color-white-75); +// Extend bootstrap to create background and text utilities for gray colors too +@each $color, $value in $grays { + @include bg-variant(".bg-#{$color}", $value); + @include text-emphasis-variant(".text-#{$color}", $value); +} diff --git a/addons/web_editor/static/src/scss/web_editor.variables.scss b/addons/web_editor/static/src/scss/web_editor.variables.scss index 552e4dfe262..203b27fc886 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -234,24 +234,6 @@ $color-white-25: rgba(white, 0.25) !default; $color-white-50: rgba(white, 0.5) !default; $color-white-75: rgba(white, 0.75) !default; -@mixin o-create-color-classes($name, $color, $complementary: o-get-most-contrast($color, $body-color, #FFF), $content-color: $color) { - .bg-#{$name} { - background-color: $color; - color: $complementary; - .text-muted { - color: rgba($complementary, 0.4); - } - } - body .text-#{$name} { // body to make the rules more important that bg-* ones - color: $content-color; - } -} -@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $body-color, #FFF), $border-color: darken($color, 5%)) { - .btn-#{$name} { - @include button-variant($complementary, $color, $border-color); - } -} - // Translations $o-we-content-to-translate-color: rgb(255, 255, 90) !default; $o-we-translated-content-color: rgb(120, 215, 110) !default; -- cgit v1.2.3