From 770aec399c4e6e29cfc5854318cbda19a605315d Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Wed, 27 Jun 2018 17:55:08 +0200 Subject: [REF] *: get rid of vendor prefixes BS4 do not provide vendor prefixes scss mixins anymore as it is meant to be used with the 'autoprefixer' library. As we only support the last version of every major browsers in Odoo, we took the decision to not use the library as it was also complex to integrate in Odoo. We decided to do the library's work by hand if it ever become necessary. --- addons/web_editor/static/src/scss/web_editor.variables.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'addons/web_editor/static/src/scss/web_editor.variables.scss') 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 2d36b3e9756..196af3ff0ad 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -49,7 +49,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; padding: $padding; border-top: 1px solid black; border-bottom: 1px solid white; - @include o-linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker); + background-image: linear-gradient(-150deg, $o-we-color-dark, $o-we-color-darker); color: $color-text; } @@ -119,7 +119,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; } select.form-control { - @include o-appearance(none); + appearance: none; background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIHhtbG5zPSdodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZycgeG1 sbnM6eGxpbms9J2h0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsnIHdpZHRoPScyNCcgaGVpZ2 h0PScyNCcgdmlld0JveD0nMCAwIDI0IDI0Jz48cGF0aCBpZD0nc3ZnXzEnIGQ9J203LjQwNiw3L jgyOGw0LjU5NCw0LjU5NGw0LjU5NCwtNC41OTRsMC40MDYsMS40MDZsLTUsNC43NjZsLTUsLTQu NzY2bDAuNDA2LC0xLjQwNnonIGZpbGw9JyM4ODgnLz48L3N2Zz4='); background-position: 100% 65%; background-repeat: no-repeat; @@ -215,7 +215,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; background-color: $o-we-color-paper; border: 1px solid darken($o-we-color-paper,5%); border-radius: 0; - @include box-shadow(none); + box-shadow: none; } } -- cgit v1.2.3 From c59380bac5bbd47bc7dcd92b38049af29a62c3d1 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Mon, 16 Jul 2018 16:48:59 +0200 Subject: [REF] *: BS4, rename btn-default to btn-secondary BS4 "btn-default" class was replaced with "btn-secondary", which makes more sense. --- addons/web_editor/static/src/scss/web_editor.variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'addons/web_editor/static/src/scss/web_editor.variables.scss') 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 196af3ff0ad..0e65ea99afa 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -177,7 +177,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; &.btn-primary { @include button-variant(white, $o-brand-optional, darken($o-brand-optional,5%)); } - &.btn-default { + &.btn-secondary { @include button-variant($o-we-color-normal, white, $o-we-color-text-light); } &.btn-link { -- cgit v1.2.3 From 3467a90c0060de76d8f55e93aec5ba0b7d690cb5 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 15 Mar 2018 13:55:32 +0100 Subject: [REF] *: BS4, the $text-color variable was renamed to $body-color --- addons/web_editor/static/src/scss/web_editor.variables.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'addons/web_editor/static/src/scss/web_editor.variables.scss') 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 0e65ea99afa..469c66d66cb 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -238,7 +238,7 @@ $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, $text-color, #FFF), $content-color: $color) { +@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; @@ -250,7 +250,7 @@ $color-white-75: rgba(white, 0.75) !default; color: $content-color; } } -@mixin o-create-color-btn-classes($name, $color, $complementary: o-get-most-contrast($color, $text-color, #FFF), $border-color: darken($color, 5%)) { +@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); } -- cgit v1.2.3 From d8c217a67d9f5b371dd43b9cff8f04aa008c27b8 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Wed, 25 Apr 2018 11:28:17 +0200 Subject: [REF] *: BS4, review color system Odoo used to declare two main colors: primary and optional (which are purple and turquoise in enterprise). Those were respectively assigned to the 'primary' bootstrap variable and the 'btn-primary' bootstrap variable. BS4, however, does not allow to have a different primary color for buttons. Instead, the 'primary' color is used for all 'primary' related components and utility classes, same as for all other colors. So, if we want to keep our enterprise buttons green, our 'optional' colors had to become our 'primary' color. The old odoo primary is then renamed to the 'odoo' color. The palette of grays is now larger by default and is numbered from 100 to 900 alongside the $black and $white variables. The equivalence for older variables and the way we used them is: $gray-darker -> gray 900 (unused before) $gray-dark -> gray 900 $gray -> gray 700 $gray-light -> gray 600 $gray-lighter-darker -> gray 400 (the old variable was created by us) $gray-lighter-dark -> gray 300 (the old variable was created by us) $gray-lighter -> gray 200 Fortunately, the 'lighter' variations we created fit well in the default BS4 system ! Unfortunately, our $gray-lighter which carried the same function as $gray-200 (see above) is very close to the new default $gray-100 and quite distant from the new $gray-200. This will be handled in the next commit. --- .../static/src/scss/web_editor.variables.scss | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'addons/web_editor/static/src/scss/web_editor.variables.scss') 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 469c66d66cb..37a24e1b79c 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -27,7 +27,7 @@ $o-we-md-ease: cubic-bezier(0.19, 1, 0.22, 1) !default; // Editor $o-we-dropzone-size: 40px !default; $o-we-dropzone-border-width: 2px !default; -$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-primary !default; +$o-we-dropzone-border: $o-we-dropzone-border-width dashed $o-brand-odoo !default; $o-we-handle-edge-size: 1px !default; $o-we-handle-border-width: 1px !default; @@ -86,7 +86,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @mixin o-w-preserve-links { a:not(.o_btn_preview) { - color: $o-brand-optional; + color: $o-brand-primary; &:focus, &:active, &:focus:active { outline: none!important; @@ -114,7 +114,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; .has-error { .form-control { - border-color: $state-danger-text; + // border-color: $state-danger-text; // FIXME } } @@ -144,14 +144,14 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @mixin o-w-preserve-tabs { .nav-tabs { - border-bottom: 1px solid $gray-lighter; + border-bottom: 1px solid gray('200'); > li { > a { line-height: 1.42857143; color: $o-we-color-light; &:hover { - border-color: $gray-lighter; + border-color: gray('200'); } } @@ -159,7 +159,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; &, &:hover, &:focus { color: $o-we-color-normal; background-color: $o-we-color-paper; - border-color: $gray-lighter; + border-color: gray('200'); border-bottom-color: transparent; } } @@ -175,13 +175,13 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @include button-size(6px, 12px, 14px, 1.42857143, 0); &.btn-primary { - @include button-variant(white, $o-brand-optional, darken($o-brand-optional,5%)); + @include button-variant(white, $o-brand-primary, darken($o-brand-primary,5%)); } &.btn-secondary { @include button-variant($o-we-color-normal, white, $o-we-color-text-light); } &.btn-link { - @include button-variant($o-brand-optional, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + @include button-variant($o-brand-primary, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); } &.btn-success { @include button-variant(white, $o-we-color-success, darken($o-we-color-success, 5%)); @@ -222,8 +222,6 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; // Edition colors // Colors -$gray-white: #fff !default; - $color-alpha: #1cc1a9 !default; $color-beta: #875A7B !default; $color-gamma: #BA3C3D !default; -- cgit v1.2.3 From 59237ea81988bdcd0cc746422a7c94bf2eadaaa2 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Thu, 15 Mar 2018 14:25:57 +0100 Subject: [REF] *: BS4, review panel and well structure Panels and wells were dropped and replaced by the "Card" component. --- addons/web_editor/static/src/scss/web_editor.variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'addons/web_editor/static/src/scss/web_editor.variables.scss') 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 37a24e1b79c..b5472208bff 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -209,7 +209,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; } @mixin o-w-preserve-wells { - .well { + .card { padding: 19px; margin-bottom: 20px; background-color: $o-we-color-paper; -- cgit v1.2.3 From 582933ac016c31cb7c4c00882e61ad2c4d93e333 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 29 May 2018 14:07:45 +0200 Subject: [REF] *: BS4, replace 'btn-xs' by 'btn-sm' In a previous commit, we removed the use of the 'btn-sm' classes as we used it everywhere for default-size buttons instead of customizing the size of those default-size buttons directly. This commit proves it was even more necessary as the 'btn-xs' class does not exist anymore in BS4 and we so can use the 'btn-sm' class instead. --- addons/web_editor/static/src/scss/web_editor.variables.scss | 3 --- 1 file changed, 3 deletions(-) (limited to 'addons/web_editor/static/src/scss/web_editor.variables.scss') 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 b5472208bff..585950ff81b 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -202,9 +202,6 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; &.btn-sm { @include button-size(5px, 10px, 12px, 1.5, 0); } - &.btn-xs { - @include button-size(1px, 5px, 12px, 1.5, 0); - } } } -- cgit v1.2.3 From d9801c1abe06b4c20702c0e94c56eea6a3ed8327 Mon Sep 17 00:00:00 2001 From: qsm-odoo Date: Tue, 29 May 2018 16:05:22 +0200 Subject: [REF] web_editor, *: BS4, restore preservation mixins and adapt modals * web, website --- .../static/src/scss/web_editor.variables.scss | 45 +++++++++++----------- 1 file changed, 23 insertions(+), 22 deletions(-) (limited to 'addons/web_editor/static/src/scss/web_editor.variables.scss') 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 585950ff81b..552e4dfe262 100644 --- a/addons/web_editor/static/src/scss/web_editor.variables.scss +++ b/addons/web_editor/static/src/scss/web_editor.variables.scss @@ -62,12 +62,12 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; } -// ============ Preservetion mixins =============== +// ============ Preservation mixins =============== // Used to preserve web_editor and website UI from themes customizations @mixin o-w-preserve-base { font-family: $o-we-font-family; - line-height: 1.42857143; + line-height: 1.5; color: $o-we-color-divider; .text-muted { @@ -78,7 +78,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @mixin o-w-preserve-headings { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: $o-we-font-family; - line-height: 1.42857143; + line-height: 1.5; color: $o-we-color-dark; font-weight: bold; } @@ -93,7 +93,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; } } - .label { + .badge { &:hover a, a { color: #fff; } @@ -105,16 +105,16 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; height: 34px; padding: 6px 12px; font-size: 14px; - line-height: 1.42857143; + line-height: 1.5; border: 1px solid $o-we-color-text-light; color: #555; background-color: #fff; border-radius: 0; } - .has-error { - .form-control { - // border-color: $state-danger-text; // FIXME + .was-validated { + .form-control:invalid { + border-color: $danger; } } @@ -148,7 +148,7 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; > li { > a { - line-height: 1.42857143; + line-height: 1.5; color: $o-we-color-light; &:hover { border-color: gray('200'); @@ -169,48 +169,49 @@ $o-we-switch-inactive-color: $o-we-color-paper !default; @mixin o-w-preserve-btn { .btn:not(.o_btn_preview) { - border-width: 1px; border-radius: 0; font-weight: normal; - @include button-size(6px, 12px, 14px, 1.42857143, 0); + @include button-size(.375rem, .75rem, 1rem, 1.5, 0); &.btn-primary { - @include button-variant(white, $o-brand-primary, darken($o-brand-primary,5%)); + @include button-variant($o-brand-primary, $o-brand-primary); } &.btn-secondary { - @include button-variant($o-we-color-normal, white, $o-we-color-text-light); + @include button-variant($o-we-color-paper, $o-we-color-paper); + color: $o-brand-primary; } &.btn-link { - @include button-variant($o-brand-primary, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)); + @include button-variant($o-we-color-paper, $o-we-color-paper); + color: $o-brand-primary; } &.btn-success { - @include button-variant(white, $o-we-color-success, darken($o-we-color-success, 5%)); + @include button-variant($o-we-color-success, $o-we-color-success); } &.btn-info { - @include button-variant(white, $o-we-color-info, darken($o-we-color-info, 5%)); + @include button-variant($o-we-color-info, $o-we-color-info); } &.btn-warning { - @include button-variant(white, $o-we-color-warning, darken($o-we-color-warning, 5%)); + @include button-variant($o-we-color-warning, $o-we-color-warning); } &.btn-danger { - @include button-variant(white, $o-we-color-danger, darken($o-we-color-danger, 5%)); + @include button-variant($o-we-color-danger, $o-we-color-danger); } &.btn-lg { - @include button-size(10px, 16px, 18px, 1.3333333, 0); + @include button-size(.5rem, 1rem, 1.25rem, 1.5, 0); } &.btn-sm { - @include button-size(5px, 10px, 12px, 1.5, 0); + @include button-size(.25rem, .5rem, .875rem, 1.5, 0); } } } -@mixin o-w-preserve-wells { +@mixin o-w-preserve-cards { .card { padding: 19px; margin-bottom: 20px; background-color: $o-we-color-paper; - border: 1px solid darken($o-we-color-paper,5%); + border: 1px solid darken($o-we-color-paper, 5%); border-radius: 0; box-shadow: none; } -- cgit v1.2.3 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. --- .../static/src/scss/web_editor.variables.scss | 18 ------------------ 1 file changed, 18 deletions(-) (limited to 'addons/web_editor/static/src/scss/web_editor.variables.scss') 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