[REF] web_editor, *: BS4, restore preservation mixins and adapt modals

* web, website

1 files changed, 23 insertions, 22 deletions

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;
     }