[REF] *: BS4, adapt media queries

media queries that target a specific screen size handled by bootstrap
have now a more convenient way to be defined:

```
@​media (min-width: $screen-sm-min) { ... }
->
@​include media-breakpoint-up(sm) { ... }
```

```
@​media (max-width: $screen-sm-max) { ... }
->
@​include media-breakpoint-down(sm) { ... }
```

```
@​media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) { ... }
->
@​include media-breakpoint-only(sm) { ... }
```

```
@​media (min-width: $screen-sm-min) and (max-width: $screen-md-max) { ... }
->
@​include media-breakpoint-between(sm, md) { ... }
```

Also, bootstrap has changed the values for its default screen sizes:

------------------
     | BS3 | BS4 |
------------------
0    | XS  | XS  | -> Portrait Mobile
576  | /   | SM  | -> Landscape Mobile
768  | SM  | MD  | -> Portrait Tablet
992  | MD  | LG  | -> Landscape Tablet / Small Desktop
1200 | LG  | XL  | -> Desktop
------------------

While it is possible to configure BS variables to behave as BS3, we took
the decision to keep the BS4 variables untouched. BS4 system seems
indeed better and having the purest bootstrap possible is better for
Odoo to be used as a framework.

14 files changed, 48 insertions, 38 deletions

diff --git a/addons/web/static/src/scss/base_settings.scss b/addons/web/static/src/scss/base_settings.scss
index 2ebad35337a..011b0617efa 100644
--- a/addons/web/static/src/scss/base_settings.scss
+++ b/addons/web/static/src/scss/base_settings.scss
@@ -2,7 +2,7 @@
 @mixin o-base-settings-horizontal-padding($padding-base: $padding-small-vertical) {
     padding: $padding-base $o-horizontal-padding;
 
-    @media (min-width: $screen-lg-min) {
+    @include media-breakpoint-up(xl) {
         padding-left: $o-horizontal-padding*2;;
     }
 }
@@ -18,7 +18,7 @@
 .o_base_settings {
     height: 100%;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         flex-flow: column nowrap;
     }
 
@@ -31,7 +31,7 @@
 
             .title, .o_setting_search {
                 flex: 1 0 auto;
-                width: $screen-xs-min*0.5;
+                width: map-get($o-extra-grid-breakpoints, vsm) / 2;
             }
 
             .o_setting_search {
@@ -75,7 +75,7 @@
 
         overflow: auto;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             flex-flow: column nowrap;
         }
 
@@ -87,7 +87,7 @@
             overflow: auto;
             padding-top: $o-horizontal-padding*0.5;
 
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 flex: 0 0 $o-base-settings-mobile-tabs-height;
                 display: inline-flex;
                 position: relative;
@@ -119,7 +119,7 @@
                 }
 
                 // Mobile Tabs
-                @media (max-width: $screen-xs-max) {
+                @include media-breakpoint-down(sm) {
                     display: block;
                     @include o-position-absolute($left:100%);
                     @include size(auto, $o-base-settings-mobile-tabs-height);
@@ -190,7 +190,7 @@
                 }
 
                 .o_settings_container {
-                    max-width: $screen-md-min; // Provide a maximum container size to ensure readability
+                    max-width: map-get($grid-breakpoints, lg); // Provide a maximum container size to ensure readability
                     @include o-base-settings-horizontal-padding(0);
                 }
             }
diff --git a/addons/web/static/src/scss/control_panel.scss b/addons/web/static/src/scss/control_panel.scss
index 345009ac3e9..54a8eb4ef76 100644
--- a/addons/web/static/src/scss/control_panel.scss
+++ b/addons/web/static/src/scss/control_panel.scss
@@ -93,7 +93,7 @@
 
         > .o_cp_switch_buttons > .btn:first-child {
             margin-left: $o-horizontal-padding;
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 margin-left: $o-horizontal-padding - 6;
             }
         }
diff --git a/addons/web/static/src/scss/dropdown.scss b/addons/web/static/src/scss/dropdown.scss
index 7db8b2fcb3c..9a60d78d9d3 100644
--- a/addons/web/static/src/scss/dropdown.scss
+++ b/addons/web/static/src/scss/dropdown.scss
@@ -66,7 +66,7 @@
             @extend %dropdown-li-a-padding;
             color: $o-main-text-color;
 
-            @media (max-width: $screen-sm-max) {
+            @include media-breakpoint-down(md) {
                 color: white;
                 text-decoration: underline;
             }
diff --git a/addons/web/static/src/scss/fields.scss b/addons/web/static/src/scss/fields.scss
index 52417cfad9f..080bf33760f 100644
--- a/addons/web/static/src/scss/fields.scss
+++ b/addons/web/static/src/scss/fields.scss
@@ -253,7 +253,7 @@
     }
     // Radio buttons
     &.o_field_radio {
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             display: inline-block;
         }
         .o_radio_input {
@@ -365,7 +365,7 @@
                 cursor: pointer;
             }
         }
-        @media (max-width: $screen-xs-min) {
+        @include media-breakpoint-down(xs, $o-extra-grid-breakpoints) {
             .o_form_image_controls{
                 position: initial;
                 opacity: 1;
diff --git a/addons/web/static/src/scss/form_view.scss b/addons/web/static/src/scss/form_view.scss
index 02079d09178..0f38d7f7305 100644
--- a/addons/web/static/src/scss/form_view.scss
+++ b/addons/web/static/src/scss/form_view.scss
@@ -16,7 +16,7 @@
     }
     .oe_inline {
         width: auto!important;
-        @media (min-width: $screen-xs-min) {
+        @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
             &.o_inner_group {
                 width: 1px!important;
             }
@@ -31,7 +31,7 @@
         float: right!important;
     }
 
-    @media (min-width: $screen-xs-min) {
+    @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
         .o_row {
             &, &.o_field_widget { // Some field may want to use o_row as root and these rules must prevalue
                 display: flex;
@@ -103,7 +103,7 @@
             max-width: $container-sm - (2 * $o-horizontal-padding);
         }
 
-        @media (min-width: $screen-xs-min) {
+        @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
             .o_row {
                 > .o_field_widget, > div {
                     flex: 1 1 auto;
@@ -425,7 +425,7 @@
     // Text field with oe_inline class
     .o_field_text.oe_inline {
         width: 100%!important;
-        @media (min-width: $screen-xs-min) {
+        @include media-breakpoint-up(vsm, $o-extra-grid-breakpoints) {
             width: 45%!important;
         }
     }
diff --git a/addons/web/static/src/scss/kanban_dashboard.scss b/addons/web/static/src/scss/kanban_dashboard.scss
index 9a1bbd2b98c..0bf1a5cdc52 100644
--- a/addons/web/static/src/scss/kanban_dashboard.scss
+++ b/addons/web/static/src/scss/kanban_dashboard.scss
@@ -10,7 +10,7 @@
         justify-content: space-between;
         padding: $o-kanban-dashboard-vpadding $o-kanban-dashboard-hpadding;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             margin-bottom: 10px;
         }
 
diff --git a/addons/web/static/src/scss/kanban_view.scss b/addons/web/static/src/scss/kanban_view.scss
index 1a610cd72c2..b377a93a0eb 100644
--- a/addons/web/static/src/scss/kanban_view.scss
+++ b/addons/web/static/src/scss/kanban_view.scss
@@ -5,7 +5,7 @@
     align-content: stretch;
     overflow-x: visible;
 
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         padding: 0px!important;
         overflow-x: auto;
     }
@@ -15,7 +15,7 @@
         border: 1px solid $gray-lighter-dark;
         background-color: white;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             padding: $o-kanban-inside-vgutter $o-kanban-inside-hgutter-mobile;
         }
         &:focus, &:focus-within {
@@ -142,7 +142,7 @@
         .o_dropdown_kanban {
             @include o-position-absolute($o-kanban-inside-vgutter, $o-kanban-inside-hgutter);
             visibility: hidden;
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 visibility: visible;
             }
 
@@ -207,7 +207,7 @@
 
             > button, > a {
                 @include o-position-absolute($right: $o-kanban-record-margin, $bottom: $o-kanban-record-margin);
-                @media (max-width: $screen-xs-max) {
+                @include media-breakpoint-down(sm) {
                     right: $o-kanban-inside-hgutter-mobile;
                 }
             }
@@ -258,7 +258,7 @@
 
             + div {
                 padding-left: $o-kanban-image-width + $o-kanban-inside-hgutter;
-                @media (max-width: $screen-xs-max) {
+                @include media-breakpoint-down(sm) {
                     padding-left:  $o-kanban-image-width + $o-kanban-inside-hgutter-mobile;
                 }
             }
@@ -484,7 +484,7 @@
             width: $o-kanban-default-record-width;
             margin: ($o-kanban-record-margin * 0.5) $o-kanban-record-margin;
 
-            @media (max-width: $screen-xs-max) {
+            @include media-breakpoint-down(sm) {
                 margin: 0 0 -1px 0;
                 flex: 1 0 100%;
             }
diff --git a/addons/web/static/src/scss/kanban_view_mobile.scss b/addons/web/static/src/scss/kanban_view_mobile.scss
index c73c47e14db..cf54d545a5a 100644
--- a/addons/web/static/src/scss/kanban_view_mobile.scss
+++ b/addons/web/static/src/scss/kanban_view_mobile.scss
@@ -1,4 +1,4 @@
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     .o_kanban_view.o_kanban_grouped {
         display: block;
         position: relative;
diff --git a/addons/web/static/src/scss/modal.scss b/addons/web/static/src/scss/modal.scss
index 5881a54a7a8..5dc3c1eb7d0 100644
--- a/addons/web/static/src/scss/modal.scss
+++ b/addons/web/static/src/scss/modal.scss
@@ -31,7 +31,7 @@
     }
 
 
-    @media (min-width: $screen-sm-min) {
+    @include media-breakpoint-up(md) {
         .modal-dialog {
             height: 100%;
             padding: 30px 0;
diff --git a/addons/web/static/src/scss/navbar.scss b/addons/web/static/src/scss/navbar.scss
index c2ba099cf95..9a3f3d9a718 100644
--- a/addons/web/static/src/scss/navbar.scss
+++ b/addons/web/static/src/scss/navbar.scss
@@ -38,7 +38,7 @@
         font-weight: 500;
         line-height: $o-navbar-height;
 
-        @media (max-width: $screen-sm-max) {
+        @include media-breakpoint-down(md) {
             float: none;
             margin: 0;
             border-bottom: 1px solid $o-navbar-inverse-link-hover-bg;
@@ -151,7 +151,7 @@
         }
     }
 
-    @media (max-width: $screen-sm-max) {
+    @include media-breakpoint-down(md) {
         transition: height 200ms linear 0s;
 
         position: relative;
@@ -211,7 +211,7 @@
     }
 }
 
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(md) {
     body.o_mobile_menu_opened {
         overflow: hidden;
         height: 100%;
@@ -224,7 +224,7 @@
     }
 }
 
-@media (max-width: $screen-sm-max) {
+@include media-breakpoint-down(md) {
      .o_switch_company_menu > .dropdown-menu {
          padding-top: 0px;
          li.bg-info {
diff --git a/addons/web/static/src/scss/primary_variables.scss b/addons/web/static/src/scss/primary_variables.scss
index b394aeafe26..c8fd2f05338 100644
--- a/addons/web/static/src/scss/primary_variables.scss
+++ b/addons/web/static/src/scss/primary_variables.scss
@@ -36,8 +36,21 @@ $o-tooltip-text-color: #777777;
 $o-tooltip-title-text-color: #4c4c4c;
 
 // Layout
-$screen-xs-min: 475px;
-$screen-xl-min: 1534px;
+//
+// Extension of BS4. This is not redefining the BS4 variable directly as we only
+// need the extra ones for media queries (not creating new breakpoint classes).
+// Note: default BS4 values are hardcoded here while it should be possible to
+// merge with the default BS variable (but we would have to take care of
+// ordering & cie).
+$o-extra-grid-breakpoints: (
+    xs: 0,
+    vsm: 475px,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1534px,
+);
 
 $o-form-group-cols: 12;
 $o-form-spacing-unit: 5px;
diff --git a/addons/web/static/src/scss/rainbow.scss b/addons/web/static/src/scss/rainbow.scss
index 9e654c71bcc..fa666fca246 100644
--- a/addons/web/static/src/scss/rainbow.scss
+++ b/addons/web/static/src/scss/rainbow.scss
@@ -10,7 +10,7 @@
     z-index: $zindex-modal;
     padding: 50px;
     margin: -5% auto 0 (-$reward-size / 2);
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         margin: -5% auto 0 (-$reward-size-mobile / 2);
     }
     background-image: -webkit-radial-gradient(#EDEFF4 30%, transparent 70%, transparent);
@@ -20,7 +20,7 @@
     animation: reward-fading ($reward-base-time * 0.5) ease-in-out 0s 1 normal forwards;
     @include o-position-absolute(20%, auto, auto, 50%);
     @include size($reward-size, $reward-size);
-    @media (max-width: $screen-xs-max) {
+    @include media-breakpoint-down(sm) {
         @include size($reward-size-mobile, $reward-size-mobile);
     }
 
@@ -75,7 +75,7 @@
     .o_reward_stars {
         display: block;
         @include size($reward-size * 0.75, $reward-size / 2);
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             @include size($reward-size-mobile * 0.75, $reward-size-mobile / 2);
         }
         @include o-position-absolute(18%, 7%);
diff --git a/addons/web/static/src/scss/secondary_variables.scss b/addons/web/static/src/scss/secondary_variables.scss
index 8ab2d5bc322..72417929152 100644
--- a/addons/web/static/src/scss/secondary_variables.scss
+++ b/addons/web/static/src/scss/secondary_variables.scss
@@ -15,9 +15,6 @@ $o-list-group-header-color: lighten($o-brand-lightsecondary, 10%);
 $o-colors: $o-color-gray-light, #F06050, #F4A460, #F7CD1F, #6CC1ED, #814968,
               #EB7E7F, #2C8397, #475577, #D6145F, #30C381, #9365B8;
 
-$screen-xxs-max: ($screen-xs-min - 1);
-$screen-lg-max: ($screen-xl-min - 1);
-
 $o-sheet-cancel-hpadding: $o-horizontal-padding;
 $o-sheet-cancel-bpadding: $o-horizontal-padding;
 
diff --git a/addons/web/static/src/scss/web_calendar.scss b/addons/web/static/src/scss/web_calendar.scss
index e38a25b5e58..f659ee7c466 100644
--- a/addons/web/static/src/scss/web_calendar.scss
+++ b/addons/web/static/src/scss/web_calendar.scss
@@ -199,12 +199,12 @@
 }
 
 // Mobile rules
-@media only screen and (max-width: 768px) {
+@include media-breakpoint-down(sm) {
     .o_calendar_container {
         padding: 0;
     }
 }
-@media (max-width: $screen-xs-max) {
+@include media-breakpoint-down(sm) {
     .o_control_panel {
         .o_calendar_button_today {
             float: right;