NextERP/design-themes
2
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
> 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
Download Patch File Download Diff File Expand all files Collapse all files
theme_common/static/src/scss/compatibility-saas-11.4-variables.scss
+1 -1
View File
@@ -15,7 +15,7 @@
margin: 0;
}
}
@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
bottom: $bottom-sm;
}
}
theme_common/static/src/scss/compatibility-saas-11.4.scss
+15 -15
View File
@@ -17,7 +17,7 @@
img {
max-height: 80px;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
[class*="col-lg-"] {
padding-bottom: 15px;
}
@@ -110,7 +110,7 @@
@include s-banner-3-col-center-hook;
padding-left: $s-banner-3-padding;
color: $s-banner-3-hero-bg-color;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
top: 0px;
text-align: center;
padding-left: 0px;
@@ -399,7 +399,7 @@
font-weight: 300;
}
.row > div > img {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
max-height: 100px;
}
}
@@ -637,7 +637,7 @@
float: left;
padding: 0 44px 0 0;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
width: 100%;
padding: 0;
}
@@ -663,7 +663,7 @@
border-right: 0 solid #ccc;
border-bottom: 15px solid rgba(0, 0, 0, 0);
content: " ";
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
display: none;
}
}
@@ -678,7 +678,7 @@
border-right: 0 solid $s-timeline-color;
border-bottom: 14px solid rgba(0, 0, 0, 0);
content: " ";
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
display: none;
}
}
@@ -703,7 +703,7 @@
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
display: none;
}
}
@@ -712,7 +712,7 @@
float: right;
padding: 0 0 0 44px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
padding: 0;
margin-top: 20px;
}
@@ -740,7 +740,7 @@
float: right;
padding: 0 0 0 44px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
padding: 0;
}
@@ -821,7 +821,7 @@ $s-timeline-company-color: o-color('alpha') !default;
margin-top: 5px;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
#wrapwrap ul.timeline:before {
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 {
text-align: center;
&:before{
@@ -1119,7 +1119,7 @@ $s-timeline-company-color: o-color('alpha') !default;
height: 100%;
> div {
height: 100%;
@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
height: auto !important;
}
}
@@ -1128,7 +1128,7 @@ $s-timeline-company-color: o-color('alpha') !default;
.carousel-inner {
width: 80%;
margin: 0 10%;
@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
width: 100%;
margin: 0;
}
@@ -1168,7 +1168,7 @@ $s-timeline-company-color: o-color('alpha') !default;
@include carousel-control(15px, 0, 2px);
.fa {
margin-top: -21px;
@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
top: 65px;
margin-top: 0;
}
@@ -1186,7 +1186,7 @@ $s-timeline-company-color: o-color('alpha') !default;
#wrapwrap .s_medias_list {
background-color: if($s-medias-list-bg-color-main != null, $s-medias-list-bg-color-main, gray('200'));
.media {
@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
height: auto !important;
}
> .row {
theme_common/static/src/scss/mixins.scss
+9 -9
View File
@@ -92,7 +92,7 @@
&:hover {
color: theme-color('primary');
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
top: auto;
bottom: 0;
}
@@ -145,16 +145,16 @@
//------------------------------------------------------------------------------
@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 media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
@include o-spacing-all($md);
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
@include o-spacing-all($sm);
}
@include media-breakpoint-down(xs) {
@include media-breakpoint-down(sm) {
@include o-spacing-all($xs);
}
}
@@ -269,7 +269,7 @@
}
@mixin o-theme-cfa-header-responsive-sizes() {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
h1 {
font-size: 30px;
}
@@ -346,7 +346,7 @@
@include media-breakpoint-up(md) {
display: $display;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
padding: $media-padding;
}
.divider {
@@ -563,7 +563,7 @@
}
.oe_cart {
.btn {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
padding: 10px;
}
}
@@ -617,7 +617,7 @@
}
.wizard {
box-shadow: none;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
padding-right: 0px;
li {
padding-left: 7px;