[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.

1 files changed, 3 insertions, 3 deletions

diff --git a/odoo/addons/base/static/src/scss/onboarding.scss b/odoo/addons/base/static/src/scss/onboarding.scss
index c152e86b31d..5665b518ed4 100644
--- a/odoo/addons/base/static/src/scss/onboarding.scss
+++ b/odoo/addons/base/static/src/scss/onboarding.scss
@@ -54,7 +54,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
         flex-flow: row nowrap;
         justify-content: initial;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
            flex-flow: column nowrap;
 
             .o_onboarding_folded_title {
@@ -71,7 +71,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
         position: relative;
         opacity: 0.6;
 
-        @media (max-width: $screen-xs-max) {
+        @include media-breakpoint-down(sm) {
             text-align: left;
             margin-bottom: 16px;
             align-items: baseline;
@@ -229,7 +229,7 @@ $o-onboarding-violet-ui-2: #FBEEC8;
             .o_onboarding_folded_title {
                 padding: 6px 10px 6px 0;
 
-                @media (min-width: $screen-sm-min) {
+                @include media-breakpoint-up(md) {
                     border-right: 1px solid $gray-lighter-dark;
                 }
             }