[REF] *: BS5: adapt changes in media query mixin

> Media query mixins parameters have changed for a more logical approach

> media-breakpoint-down() uses the breakpoint itself instead of the next
> breakpoint (e.g., media-breakpoint-down(lg) instead of
> media-breakpoint-down(md) targets viewports smaller than lg).
> Similarly, the second parameter in media-breakpoint-between() also
> uses the breakpoint itself instead of the next breakpoint (e.g.,
> media-between(sm, lg) instead of media-breakpoint-between(sm, md)
> targets viewports between sm and lg).

https://getbootstrap.com/docs/5.1/migration/#sass

Task ID: 2766483

Part-of: odoo/design-themes#580
This commit is contained in:
Romeo Fragomeli
2022-07-04 07:53:56 +00:00
parent 5b04bc356b
commit ac63e031c0
33 changed files with 69 additions and 69 deletions
@@ -37,7 +37,7 @@
transition: opacity 100ms;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
height: auto;
min-height: 200px;
@@ -3,7 +3,7 @@ $s-banner-parallax-text-color: o-color('alpha') !default;
#wrapwrap .s_banner_parallax {
margin-bottom: 0px !important;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
background-position: $s-banner-parallax-bg-position;
}
@include s-banner-parallax-height-hook;
@@ -19,7 +19,7 @@ $s-banner-parallax-text-color: o-color('alpha') !default;
color: $s-banner-parallax-text-color;
@include s-banner-parallax-hero-bg-hook;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
text-align: center;
padding-left: 15px;
}
@@ -15,7 +15,7 @@
padding-top: $grid-gutter-width/2;
padding-bottom: $grid-gutter-width/2;
@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
width: 100%;
}
}
@@ -12,7 +12,7 @@
[class*="col-lg-"] {
padding: 64px 20px;
}
@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
[class*="col-lg-"] {
flex: 1 1 100%;
}
@@ -34,7 +34,7 @@
overflow: hidden;
overflow-y: scroll;
padding-top: 40px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
overflow: visible;
height: auto;
}
@@ -61,7 +61,7 @@
opacity: 1;
cursor: pointer;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
[class*="col-lg-"] > p {
padding: 0 30px;
}
@@ -1,7 +1,7 @@
.s_images_carousel {
height: 400px;
&.carousel {
@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
height: auto !important;
}
.carousel-inner,
@@ -7,7 +7,7 @@
height: 150px;
position: relative;
padding: 0;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
height: 100px;
}
@media only screen and (max-width : 360px) { // FIXME
@@ -25,7 +25,7 @@
h2 {
line-height: 150px;
margin-top: 0;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
line-height: 100px;
line-height: 100px;
}
@@ -66,7 +66,7 @@
color: o-color('alpha');
text-align: center;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
padding-top: 20px;
text-align: center;
}
@@ -79,7 +79,7 @@
font-size: 85px;
text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86);
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
font-size: 65px;
}
@media screen and (max-width: 360px) {
@@ -2,7 +2,7 @@
min-height: 450px;
color: gray('800');
@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
text-align: center;
}
@@ -2,7 +2,7 @@
> div > .row > div {
border-left-width: 1px;
border-left-style: solid;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
border-bottom-width: 1px;
border-bottom-style: solid;
border-left-width: 0;
@@ -27,7 +27,7 @@
padding: 10px;
text-align: center;
min-height: 230px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
min-height: 50px;
}
@@ -56,14 +56,14 @@
height: 25px;
text-align: right;
width: 100%;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
display: none;
}
}
.progress-content {
padding: 10px 25px;
min-height: 230px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
min-height: 50px;
}
h1 {