[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
@@ -6,7 +6,7 @@ $s-banner-parallax-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
width: 100%; width: 100%;
text-align: center; text-align: center;
bottom: -30px; bottom: -30px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
top: 100px; top: 100px;
} }
} }
@@ -14,7 +14,7 @@ $s-banner-parallax-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
vertical-align: bottom; vertical-align: bottom;
} }
@mixin s-banner-parallax-height-hook { @mixin s-banner-parallax-height-hook {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
height: 100vh !important; height: 100vh !important;
} }
} }
@@ -2,7 +2,7 @@ $s-features-carousel-border-width: 0;
@mixin s-features-carousel-inner-hook { @mixin s-features-carousel-inner-hook {
.carousel-inner .row { .carousel-inner .row {
margin: 0 70px; margin: 0 70px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
margin: 0; margin: 0;
} }
} }
@@ -7,7 +7,7 @@ $s-banner-3-carousel-height: 100vh;
text-align: center; text-align: center;
width: 100%; width: 100%;
padding-top: 60vh; padding-top: 60vh;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
padding-top: 25vh; padding-top: 25vh;
} }
} }
@@ -25,7 +25,7 @@ $s-banner-3-h2-size: 30px;
transform: none; transform: none;
font-size: 18px; font-size: 18px;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
width: 100%; width: 100%;
margin-top: 0; margin-top: 0;
} }
@@ -26,7 +26,7 @@ $s-banner-3-h2-size: 30px;
margin-top: 0; margin-top: 0;
} }
h1 { h1 {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
font-size: 40px !important; font-size: 40px !important;
margin-top: 0; margin-top: 0;
} }
@@ -37,7 +37,7 @@
transition: opacity 100ms; transition: opacity 100ms;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
height: auto; height: auto;
min-height: 200px; min-height: 200px;
@@ -3,7 +3,7 @@ $s-banner-parallax-text-color: o-color('alpha') !default;
#wrapwrap .s_banner_parallax { #wrapwrap .s_banner_parallax {
margin-bottom: 0px !important; margin-bottom: 0px !important;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
background-position: $s-banner-parallax-bg-position; background-position: $s-banner-parallax-bg-position;
} }
@include s-banner-parallax-height-hook; @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; color: $s-banner-parallax-text-color;
@include s-banner-parallax-hero-bg-hook; @include s-banner-parallax-hero-bg-hook;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
text-align: center; text-align: center;
padding-left: 15px; padding-left: 15px;
} }
@@ -15,7 +15,7 @@
padding-top: $grid-gutter-width/2; padding-top: $grid-gutter-width/2;
padding-bottom: $grid-gutter-width/2; padding-bottom: $grid-gutter-width/2;
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
width: 100%; width: 100%;
} }
} }
@@ -12,7 +12,7 @@
[class*="col-lg-"] { [class*="col-lg-"] {
padding: 64px 20px; padding: 64px 20px;
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
[class*="col-lg-"] { [class*="col-lg-"] {
flex: 1 1 100%; flex: 1 1 100%;
} }
@@ -34,7 +34,7 @@
overflow: hidden; overflow: hidden;
overflow-y: scroll; overflow-y: scroll;
padding-top: 40px; padding-top: 40px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
overflow: visible; overflow: visible;
height: auto; height: auto;
} }
@@ -61,7 +61,7 @@
opacity: 1; opacity: 1;
cursor: pointer; cursor: pointer;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
[class*="col-lg-"] > p { [class*="col-lg-"] > p {
padding: 0 30px; padding: 0 30px;
} }
@@ -1,7 +1,7 @@
.s_images_carousel { .s_images_carousel {
height: 400px; height: 400px;
&.carousel { &.carousel {
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
height: auto !important; height: auto !important;
} }
.carousel-inner, .carousel-inner,
@@ -7,7 +7,7 @@
height: 150px; height: 150px;
position: relative; position: relative;
padding: 0; padding: 0;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
height: 100px; height: 100px;
} }
@media only screen and (max-width : 360px) { // FIXME @media only screen and (max-width : 360px) { // FIXME
@@ -25,7 +25,7 @@
h2 { h2 {
line-height: 150px; line-height: 150px;
margin-top: 0; margin-top: 0;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
line-height: 100px; line-height: 100px;
line-height: 100px; line-height: 100px;
} }
@@ -66,7 +66,7 @@
color: o-color('alpha'); color: o-color('alpha');
text-align: center; text-align: center;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
padding-top: 20px; padding-top: 20px;
text-align: center; text-align: center;
} }
@@ -79,7 +79,7 @@
font-size: 85px; font-size: 85px;
text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86); text-shadow: 1px 1px 11px rgba(0, 0, 0, 0.86);
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
font-size: 65px; font-size: 65px;
} }
@media screen and (max-width: 360px) { @media screen and (max-width: 360px) {
@@ -2,7 +2,7 @@
min-height: 450px; min-height: 450px;
color: gray('800'); color: gray('800');
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
text-align: center; text-align: center;
} }
@@ -2,7 +2,7 @@
> div > .row > div { > div > .row > div {
border-left-width: 1px; border-left-width: 1px;
border-left-style: solid; border-left-style: solid;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
border-bottom-width: 1px; border-bottom-width: 1px;
border-bottom-style: solid; border-bottom-style: solid;
border-left-width: 0; border-left-width: 0;
@@ -27,7 +27,7 @@
padding: 10px; padding: 10px;
text-align: center; text-align: center;
min-height: 230px; min-height: 230px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
min-height: 50px; min-height: 50px;
} }
@@ -56,14 +56,14 @@
height: 25px; height: 25px;
text-align: right; text-align: right;
width: 100%; width: 100%;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
display: none; display: none;
} }
} }
.progress-content { .progress-content {
padding: 10px 25px; padding: 10px 25px;
min-height: 230px; min-height: 230px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
min-height: 50px; min-height: 50px;
} }
h1 { h1 {
@@ -15,7 +15,7 @@
margin: 0; margin: 0;
} }
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
bottom: $bottom-sm; bottom: $bottom-sm;
} }
} }
@@ -17,7 +17,7 @@
img { img {
max-height: 80px; max-height: 80px;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
[class*="col-lg-"] { [class*="col-lg-"] {
padding-bottom: 15px; padding-bottom: 15px;
} }
@@ -110,7 +110,7 @@
@include s-banner-3-col-center-hook; @include s-banner-3-col-center-hook;
padding-left: $s-banner-3-padding; padding-left: $s-banner-3-padding;
color: $s-banner-3-hero-bg-color; color: $s-banner-3-hero-bg-color;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
top: 0px; top: 0px;
text-align: center; text-align: center;
padding-left: 0px; padding-left: 0px;
@@ -399,7 +399,7 @@
font-weight: 300; font-weight: 300;
} }
.row > div > img { .row > div > img {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
max-height: 100px; max-height: 100px;
} }
} }
@@ -637,7 +637,7 @@
float: left; float: left;
padding: 0 44px 0 0; padding: 0 44px 0 0;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
width: 100%; width: 100%;
padding: 0; padding: 0;
} }
@@ -663,7 +663,7 @@
border-right: 0 solid #ccc; border-right: 0 solid #ccc;
border-bottom: 15px solid rgba(0, 0, 0, 0); border-bottom: 15px solid rgba(0, 0, 0, 0);
content: " "; content: " ";
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
display: none; display: none;
} }
} }
@@ -678,7 +678,7 @@
border-right: 0 solid $s-timeline-color; border-right: 0 solid $s-timeline-color;
border-bottom: 14px solid rgba(0, 0, 0, 0); border-bottom: 14px solid rgba(0, 0, 0, 0);
content: " "; content: " ";
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
display: none; display: none;
} }
} }
@@ -703,7 +703,7 @@
border-bottom-right-radius: 50%; border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%; border-bottom-left-radius: 50%;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
display: none; display: none;
} }
} }
@@ -712,7 +712,7 @@
float: right; float: right;
padding: 0 0 0 44px; padding: 0 0 0 44px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
padding: 0; padding: 0;
margin-top: 20px; margin-top: 20px;
} }
@@ -740,7 +740,7 @@
float: right; float: right;
padding: 0 0 0 44px; padding: 0 0 0 44px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
padding: 0; padding: 0;
} }
@@ -821,7 +821,7 @@ $s-timeline-company-color: o-color('alpha') !default;
margin-top: 5px; margin-top: 5px;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
#wrapwrap ul.timeline:before { #wrapwrap ul.timeline:before {
display: none; display: none;
} }
@@ -959,7 +959,7 @@ $s-timeline-company-color: o-color('alpha') !default;
} }
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
#wrapwrap .s_timeline_icons ul.timeline { #wrapwrap .s_timeline_icons ul.timeline {
text-align: center; text-align: center;
&:before{ &:before{
@@ -1119,7 +1119,7 @@ $s-timeline-company-color: o-color('alpha') !default;
height: 100%; height: 100%;
> div { > div {
height: 100%; height: 100%;
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
height: auto !important; height: auto !important;
} }
} }
@@ -1128,7 +1128,7 @@ $s-timeline-company-color: o-color('alpha') !default;
.carousel-inner { .carousel-inner {
width: 80%; width: 80%;
margin: 0 10%; margin: 0 10%;
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
width: 100%; width: 100%;
margin: 0; margin: 0;
} }
@@ -1168,7 +1168,7 @@ $s-timeline-company-color: o-color('alpha') !default;
@include carousel-control(15px, 0, 2px); @include carousel-control(15px, 0, 2px);
.fa { .fa {
margin-top: -21px; margin-top: -21px;
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
top: 65px; top: 65px;
margin-top: 0; margin-top: 0;
} }
@@ -1186,7 +1186,7 @@ $s-timeline-company-color: o-color('alpha') !default;
#wrapwrap .s_medias_list { #wrapwrap .s_medias_list {
background-color: if($s-medias-list-bg-color-main != null, $s-medias-list-bg-color-main, gray('200')); background-color: if($s-medias-list-bg-color-main != null, $s-medias-list-bg-color-main, gray('200'));
.media { .media {
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
height: auto !important; height: auto !important;
} }
> .row { > .row {
+9 -9
View File
@@ -92,7 +92,7 @@
&:hover { &:hover {
color: theme-color('primary'); color: theme-color('primary');
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
top: auto; top: auto;
bottom: 0; bottom: 0;
} }
@@ -145,16 +145,16 @@
//------------------------------------------------------------------------------ //------------------------------------------------------------------------------
@mixin o-theme-responsive-spacing-classes($lg, $md, $sm, $xs) { @mixin o-theme-responsive-spacing-classes($lg, $md, $sm, $xs) {
@include media-breakpoint-down(lg) { @include media-breakpoint-down(xl) {
@include o-spacing-all($lg); @include o-spacing-all($lg);
} }
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
@include o-spacing-all($md); @include o-spacing-all($md);
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
@include o-spacing-all($sm); @include o-spacing-all($sm);
} }
@include media-breakpoint-down(xs) { @include media-breakpoint-down(sm) {
@include o-spacing-all($xs); @include o-spacing-all($xs);
} }
} }
@@ -269,7 +269,7 @@
} }
@mixin o-theme-cfa-header-responsive-sizes() { @mixin o-theme-cfa-header-responsive-sizes() {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
h1 { h1 {
font-size: 30px; font-size: 30px;
} }
@@ -346,7 +346,7 @@
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
display: $display; display: $display;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
padding: $media-padding; padding: $media-padding;
} }
.divider { .divider {
@@ -563,7 +563,7 @@
} }
.oe_cart { .oe_cart {
.btn { .btn {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
padding: 10px; padding: 10px;
} }
} }
@@ -617,7 +617,7 @@
} }
.wizard { .wizard {
box-shadow: none; box-shadow: none;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
padding-right: 0px; padding-right: 0px;
li { li {
padding-left: 7px; padding-left: 7px;
@@ -1,7 +1,7 @@
@mixin s-features-carousel-inner-hook { @mixin s-features-carousel-inner-hook {
.carousel-inner .row { .carousel-inner .row {
margin: 0 70px; margin: 0 70px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
margin: 0; margin: 0;
} }
} }
@@ -26,7 +26,7 @@ $s-banner-parallax-h1-size: 50px;
bottom: -85vh; bottom: -85vh;
left: -2px; left: -2px;
opacity: 0.8; opacity: 0.8;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
display: none; display: none;
} }
} }
@@ -41,13 +41,13 @@ $s-banner-parallax-h1-size: 50px;
bottom: -85vh; bottom: -85vh;
right: -2px; right: -2px;
opacity: 0.8; opacity: 0.8;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
display: none; display: none;
} }
} }
}; };
@mixin s-banner-parallax-height-hook { @mixin s-banner-parallax-height-hook {
@include media-breakpoint-down(md) { @include media-breakpoint-down(lg) {
height: 100vh !important; height: 100vh !important;
} }
}; };
@@ -3,7 +3,7 @@ $s-features-carousel-indicators-visible: visible;
@mixin s-features-carousel-inner-hook { @mixin s-features-carousel-inner-hook {
.carousel-inner .row { .carousel-inner .row {
margin: 40px 70px; margin: 40px 70px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
margin: 0; margin: 0;
} }
} }
@@ -23,12 +23,12 @@ $s-big-icon-circle-icon-size: 150px;
@mixin s-big-icon-circle-height-hook { @mixin s-big-icon-circle-height-hook {
height: 100vh; height: 100vh;
padding-top: 0; padding-top: 0;
@include media-breakpoint-down(lg) { @include media-breakpoint-down(xl) {
height: 100%; height: 100%;
} }
.row { .row {
height: 100vh; height: 100vh;
@include media-breakpoint-down(lg) { @include media-breakpoint-down(xl) {
height: 100%; height: 100%;
} }
} }
@@ -40,7 +40,7 @@ $s-big-icon-circle-icon-size: 150px;
@mixin s-big-icon-circle-fa-hook { @mixin s-big-icon-circle-fa-hook {
height: 100px; height: 100px;
line-height: 70px; line-height: 70px;
@include media-breakpoint-down(lg) { @include media-breakpoint-down(xl) {
height: 80px; height: 80px;
} }
} }
@@ -15,7 +15,7 @@ $s-banner-parallax-h1-size: 50px;
padding: 0; padding: 0;
} }
@mixin s-banner-parallax-height-hook { @mixin s-banner-parallax-height-hook {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
height: 100vh !important; height: 100vh !important;
} }
} }
@@ -3,11 +3,11 @@ $s-big-icon-circle-icon-size: 150px;
$s-big-icon-circle-text-color: $-gray-700; $s-big-icon-circle-text-color: $-gray-700;
@mixin s-big-icon-circle-height-hook { @mixin s-big-icon-circle-height-hook {
padding-top: 0; padding-top: 0;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
height: 100%; height: 100%;
} }
.row { .row {
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
height: 100%; height: 100%;
} }
} }
@@ -18,7 +18,7 @@ $s-big-icon-circle-text-color: $-gray-700;
@mixin s-big-icon-circle-fa-hook { @mixin s-big-icon-circle-fa-hook {
height: 150px; height: 150px;
line-height: 70px; line-height: 70px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
height: 80px; height: 80px;
} }
} }
@@ -3,7 +3,7 @@ $s-features-carousel-indicators-visible: visible;
@mixin s-features-carousel-inner-hook { @mixin s-features-carousel-inner-hook {
.carousel-inner .row { .carousel-inner .row {
margin: 40px 70px; margin: 40px 70px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
margin: 0; margin: 0;
} }
} }
@@ -20,7 +20,7 @@ $s-banner-3-h2-size: 25px;
img { img {
display: none; display: none;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
top: 100px; top: 100px;
width: 100%; width: 100%;
} }
@@ -1,7 +1,7 @@
.s_numbers { .s_numbers {
.s_number { .s_number {
font-size: 75px; font-size: 75px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
font-size: 60px; font-size: 60px;
} }
} }
@@ -1,7 +1,7 @@
@mixin s-features-carousel-inner-hook { @mixin s-features-carousel-inner-hook {
.carousel-inner .row { .carousel-inner .row {
margin: 0 70px; margin: 0 70px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
margin: 0; margin: 0;
} }
} }
@@ -3,7 +3,7 @@ $s-banner-3-padding: 0px;
@mixin s-banner-3-col-center-hook { @mixin s-banner-3-col-center-hook {
margin-left: 16.6667%; margin-left: 16.6667%;
text-align: center; text-align: center;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
margin-left: 0px; margin-left: 0px;
} }
} }
@@ -24,7 +24,7 @@ $s-banner-3-h2-size: 30px;
transform: none; transform: none;
font-size: 18px; font-size: 18px;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
width: 100%; width: 100%;
margin-top: 0; margin-top: 0;
} }
@@ -18,7 +18,7 @@ $s-banner-3-h2-size: 30px;
margin-top: 100px; margin-top: 100px;
background-color: white; background-color: white;
border: 15px solid rgba(255, 255, 255, .5); border: 15px solid rgba(255, 255, 255, .5);
@include media-breakpoint-down(lg) { @include media-breakpoint-down(xl) {
text-align: left !important; text-align: left !important;
width: auto; width: auto;
margin-top: 0; margin-top: 0;
@@ -34,7 +34,7 @@ $s-banner-3-h2-size: 30px;
border: 15px solid white; border: 15px solid white;
border-left-width: 50px; border-left-width: 50px;
border-right-width: 50px; border-right-width: 50px;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
border-width: 10px; border-width: 10px;
} }
} }
@@ -24,7 +24,7 @@ $s-banner-3-h2-size: 30px;
transform: none; transform: none;
font-size: 18px; font-size: 18px;
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(md) {
width: 100%; width: 100%;
margin-top: 0; margin-top: 0;
} }