[MERGE] *: Migrate Bootstrap to version 5.1.3

Migrate Bootstrap to version 5.1.3

some highlights of BS5 changes:
- Browser support: Internet Explorer is definitely gone (Goodbye! We won't miss you) ; not a huge change on the backend as we didn't supported it anymore anyway.
- Bootstrap's Javascript components doesn't use jQuery anymore! A compatibility layer is present but with some quirks, so avoid to use it if possible ; less jQuery is less overhead!
- The color contrast system in BS5 relies directly on WCAG 2.0 contrast algorithm (https://www.w3.org/TR/WCAG20-TECHS/G18.html). Some visual elements (like texts/buttons/...) may have a slightly different contrast than before.
- Background color classes ('bg-') only set the background color and don't change the foreground (aka. text) color anymore. We backported the '.text-bg-' from Bootstrap 5.2 to restore the previous behavior ; or use separate background ('.bg-') and foreground ('.text-') depending on your usecase.
- Media Breakpoint's usage has changed
- More and more CSS utility classes are introduced: use them in your templates instead of adding more custom CSS rules.
- Bootstrap still provides a quite powerful grid system, but please use it as intended by the framework (I'm looking at you '.col' without its parent '.row'). Also while keeping the same API, it was internally changed ; the main issue that you can encounter is that columns no longer apply 'position: relative', which could be solved by adding the '.position-relative' class when needed.
- BS5 doesn't allow to use multiple components on the same element (ie. adding a tooltip on a dropdown). It generates this kind of error: "Bootstrap doesn't allow more than one instance per element.
- Badge usage has changed a bit: '.badge' still exist but is now extended using utility classes (text and background colors, border-radius for pills) instead of specific '.badge-*' classes.
- '.input-group-{append,prepend}' are gone! You can now just add buttons and '.input-group-text' as direct children of the '.input-group'.
- Popover/alert components' close button use the new class '.btn-close'.
- Dropdown: the '.show' class is not added anymore to the parent group of dropdown ; some CSS selectors may still need some love.
- All data attributes of BS5 are now prefixed by 'bs-' (ie. 'data-toggle' is now 'data-bs-toggle').

Bootstrap documentation
https://getbootstrap.com/docs/5.1/migration

Task ID: 2766483

closes odoo/design-themes#580

Related: odoo/enterprise#29195
Related: odoo/odoo#95450
Signed-off-by: Christophe Monniez (moc) <moc@odoo.com>
This commit is contained in:
Odoo's Mergebot
2022-07-07 13:29:21 +02:00
committed by GitHub
58 changed files with 197 additions and 197 deletions
@@ -6,7 +6,7 @@ $s-banner-parallax-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
width: 100%;
text-align: center;
bottom: -30px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
top: 100px;
}
}
@@ -14,7 +14,7 @@ $s-banner-parallax-text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
vertical-align: bottom;
}
@mixin s-banner-parallax-height-hook {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
height: 100vh !important;
}
}
@@ -2,7 +2,7 @@ $s-features-carousel-border-width: 0;
@mixin s-features-carousel-inner-hook {
.carousel-inner .row {
margin: 0 70px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
margin: 0;
}
}
@@ -7,7 +7,7 @@ $s-banner-3-carousel-height: 100vh;
text-align: center;
width: 100%;
padding-top: 60vh;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
padding-top: 25vh;
}
}
@@ -25,7 +25,7 @@ $s-banner-3-h2-size: 30px;
transform: none;
font-size: 18px;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
width: 100%;
margin-top: 0;
}
@@ -26,7 +26,7 @@ $s-banner-3-h2-size: 30px;
margin-top: 0;
}
h1 {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
font-size: 40px !important;
margin-top: 0;
}
+4 -4
View File
@@ -83,7 +83,7 @@
</xpath>
<xpath expr="//p[2]" position="replace">
<p>Journalists, directors, developers, etc. working effectively in their fields of excellence.</p>
<div class="s_hr text-left p0 pb32" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start p0 pb32" data-snippet="s_hr" data-name="Separator">
<hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
</div>
</xpath>
@@ -109,7 +109,7 @@
</xpath>
<xpath expr="//p[2]" position="replace">
<p>All students benefit from individualised support.</p>
<div class="s_hr text-left p0 pb32" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start p0 pb32" data-snippet="s_hr" data-name="Separator">
<hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
</div>
</xpath>
@@ -191,7 +191,7 @@
</xpath>
<!-- Slide #2 - blockquote -->
<xpath expr="(//blockquote)[2]" position="attributes">
<attribute name="class" add="w-75 mx-auto" remove="w-50 mr-auto" separator=" "/>
<attribute name="class" add="w-75 mx-auto" remove="w-50 me-auto" separator=" "/>
</xpath>
<xpath expr="(//blockquote)[2]//i" position="attributes">
<attribute name="class" add="bg-o-color-1" remove="bg-o-color-2" separator=" "/>
@@ -210,7 +210,7 @@
</xpath>
<!-- Slide #3 - blockquote -->
<xpath expr="(//blockquote)[3]" position="attributes">
<attribute name="class" add="w-75 mx-auto" remove="w-50 ml-auto" separator=" "/>
<attribute name="class" add="w-75 mx-auto" remove="w-50 ms-auto" separator=" "/>
</xpath>
<xpath expr="(//blockquote)[3]//i" position="attributes">
<attribute name="class" add="bg-o-color-1" remove="bg-o-color-2" separator=" "/>
@@ -13,7 +13,7 @@
<attribute name="style">background-image: none;</attribute>
</xpath>
<xpath expr="//blockquote[1]" position="attributes">
<attribute name="class" add="mx-auto" remove="mr-auto" separator=" "/>
<attribute name="class" add="mx-auto" remove="me-auto" separator=" "/>
</xpath>
<xpath expr="//p[1]" position="replace" mode="inner">
Cosy and friendly, good atmosphere and super food. Especially the spiced fruit crumble.
@@ -24,7 +24,7 @@
<attribute name="style">background-image: none;</attribute>
</xpath>
<xpath expr="(//blockquote)[2]" position="attributes">
<attribute name="class" add="mx-auto" remove="mr-auto" separator=" "/>
<attribute name="class" add="mx-auto" remove="me-auto" separator=" "/>
</xpath>
<xpath expr="(//p)[2]" position="replace" mode="inner">
This place is perfect for groups or a casual date night.
@@ -35,7 +35,7 @@
<attribute name="style">background-image: none;</attribute>
</xpath>
<xpath expr="(//blockquote)[3]" position="attributes">
<attribute name="class" add="mx-auto" remove="ml-auto" separator=" "/>
<attribute name="class" add="mx-auto" remove="ms-auto" separator=" "/>
</xpath>
<xpath expr="(//p)[3]" position="replace" mode="inner">
A truly exquisite dining experience. I highly recommend the Mustard Sauce, out of this world.
@@ -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%;
}
@@ -17,12 +17,12 @@
> .row {
min-height: 150px;
height: auto;
border-left: 3px solid gray('200');
border-left: 3px solid map-get($grays, '200');
> .menublock {
margin: 0 0 0 20px;
padding: 0 20px 0 0;
border-bottom: 1px solid gray('200');
border-bottom: 1px solid map-get($grays, '200');
float: left;
h4 {
font-weight: bold;
@@ -4,7 +4,7 @@
padding: 30px 0;
border-radius: $s-discount-box-border-radius;
position: relative;
box-shadow: 0px 0px 5px 0px rgba(gray('700'), 0.5);
box-shadow: 0px 0px 5px 0px rgba(map-get($grays, '700'), 0.5);
word-wrap: break-word;
&:before {
@@ -63,7 +63,7 @@
#wrapwrap .s_discount_descr {
text-align: center;
font-size: 13px;
color: gray('800');
color: map-get($grays, '800');
margin-top: 10px;
padding: 20px 25px;
@include s-discount-descr-hook;
@@ -92,7 +92,7 @@
border-radius: 4px;
margin-top: 10px;
background: #f0f0f0;
color: gray('800');
color: map-get($grays, '800');
.code {
padding: 10px 15px;
}
@@ -42,13 +42,13 @@
text-align: center;
> li {
float: left;
color: gray('800');
color: map-get($grays, '800');
font-size: 11px;
font-weight: 300;
&:hover {
color: gray('800');
background-color: gray('200');
color: map-get($grays, '800');
background-color: map-get($grays, '200');
}
> a {
@@ -87,7 +87,7 @@
> a {
display: block;
width: 100%;
color: gray('800');
color: map-get($grays, '800');
text-decoration: none;
}
}
@@ -174,7 +174,7 @@
width: 40px;
> ul {
height: 100%;
border-left: 1px solid lighten(gray('200'), 10%);
border-left: 1px solid lighten(map-get($grays, '200'), 10%);
> li {
width: 100%;
height: 33.333%;
@@ -22,8 +22,8 @@
background-color: o-color('epsilon');
}
> .row > div {
border-right: 1px solid gray('200');
border-bottom: 1px solid gray('200');
border-right: 1px solid map-get($grays, '200');
border-bottom: 1px solid map-get($grays, '200');
text-align: left;
h4 {
text-align: center;
@@ -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;
}
@@ -40,17 +40,17 @@
border-bottom: {
width: $s-features-carousel-border-width;
style: $s-features-carousel-border-style;
color: if(s-features-carousel-border-color != null, $s-features-carousel-border-color, gray('600'));
color: if(s-features-carousel-border-color != null, $s-features-carousel-border-color, map-get($grays, '600'));
}
text-align: center;
padding-bottom: 30px;
}
.carousel-indicators {
border-top: 1px dotted gray('600');
border-top: 1px dotted map-get($grays, '600');
padding-top: 32px;
visibility: $s-features-carousel-indicators-visible;
li {
border: 1px solid gray('200');
border: 1px solid map-get($grays, '200');
}
}
.carousel-indicators .active {
@@ -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;
}
@@ -8,10 +8,10 @@
font-size: 20px;
}
.menu-container > .s_full_menu_content {
border-left: 3px solid gray('200');
border-left: 3px solid map-get($grays, '200');
.row {
.s_full_menu_content_description {
border-bottom: 1px solid gray('200');
border-bottom: 1px solid map-get($grays, '200');
padding-bottom: 15px;
line-height: 1;
span {
@@ -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;
}
@@ -1,6 +1,6 @@
#wrapwrap .s_pricing strong {
font-weight: 700;
color: gray('800');
color: map-get($grays, '800');
}
#wrapwrap .s_pricing_footer {
@@ -8,7 +8,7 @@
}
#wrapwrap .s_pricing_box {
box-shadow: 0px 2px 5px 0px rgba(black, 0.1);
border: 1px solid lighten(gray('200'), 10%);
border: 1px solid lighten(map-get($grays, '200'), 10%);
}
#wrapwrap .s_pricing_header {
@@ -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) {
@@ -1,18 +1,18 @@
#wrapwrap .s_profile_box {
min-height: 450px;
color: gray('800');
color: map-get($grays, '800');
@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
text-align: center;
}
h2 {
color: gray('800');
color: map-get($grays, '800');
}
span.tags
{
background: gray('700');
background: map-get($grays, '700');
border-radius: 2px;
color: white;
padding: 2px 4px;
@@ -21,14 +21,14 @@
}
#wrapwrap .s_profile_box_divider {
border-top: 1px solid lighten(gray('600'), 15%);
border-top: 1px solid lighten(map-get($grays, '600'), 15%);
}
#wrapwrap .s_profile_box_emphasis:hover {
transition: all 0.3s ease-in-out;
background-color: lighten(gray('200'), 10%);
background-color: lighten(map-get($grays, '200'), 10%);
}
#wrapwrap .s_profile .card p, #wrapwrap .s_profile .card h2 {
color: gray('800');
color: map-get($grays, '800');
}
@@ -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 {
@@ -10,8 +10,8 @@
}
}
.black { @include bg-compatibility-mixin($black, gray('600')); }
.darkgray { @include bg-compatibility-mixin(gray('800'), $white); }
.gray { @include bg-compatibility-mixin(gray('700'), $white); }
.lightgray { @include bg-compatibility-mixin(gray('200'), gray('700')); }
.white { @include bg-compatibility-mixin($white, gray('700')); }
.black { @include bg-compatibility-mixin($black, map-get($grays, '600')); }
.darkgray { @include bg-compatibility-mixin(map-get($grays, '800'), $white); }
.gray { @include bg-compatibility-mixin(map-get($grays, '700'), $white); }
.lightgray { @include bg-compatibility-mixin(map-get($grays, '200'), map-get($grays, '700')); }
.white { @include bg-compatibility-mixin($white, map-get($grays, '700')); }
@@ -3,23 +3,23 @@
// To allow a smooth transition, old classes alias are created here.
// Define new theme variables in case the user changes its theme
$gray-light-light: gray('200');
$gray-light-dark: gray('600');
$gray-dark-light: gray('700');
$gray-dark-dark: gray('900');
$gray-darkest: gray('900');
$gray-light-light: map-get($grays, '200');
$gray-light-dark: map-get($grays, '600');
$gray-dark-light: map-get($grays, '700');
$gray-dark-dark: map-get($grays, '900');
$gray-darkest: map-get($grays, '900');
body .color-black { color: $black; }
body .color-white { color: $white; }
body .color-gray-lighter { color: gray('200'); }
body .color-gray-lighter { color: map-get($grays, '200'); }
body .color-gray-light-light { color: $gray-light-light; }
body .color-gray-light { color: gray('600'); }
body .color-gray-light { color: map-get($grays, '600'); }
body .color-gray-light-dark { color: $gray-light-dark; }
body .color-gray { color: gray('700'); }
body .color-gray { color: map-get($grays, '700'); }
body .color-gray-dark-light { color: $gray-dark-light; }
body .color-gray-dark { color: gray('900'); }
body .color-gray-dark { color: map-get($grays, '900'); }
body .color-gray-dark-dark { color: $gray-dark-dark; }
body .color-gray-darker { color: gray('900'); }
body .color-gray-darker { color: map-get($grays, '900'); }
body .color-gray-darkest { color: $gray-darkest; }
body .color-alpha { color: o-color('alpha'); }
body .color-beta { color: o-color('beta'); }
@@ -4,7 +4,7 @@
li {
width: 12px;
height: 12px;
border-color: gray('900');
border-color: map-get($grays, '900');
margin: 0;
&:hover {
border-color: o-color('alpha');
@@ -15,7 +15,7 @@
margin: 0;
}
}
@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
bottom: $bottom-sm;
}
}
@@ -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;
@@ -317,7 +317,7 @@
#wrapwrap .s_separator_shade hr {
height: 2px;
border-top: 0;
background: gray('700');
background: map-get($grays, '700');
border-radius: 5px;
}
@@ -399,7 +399,7 @@
font-weight: 300;
}
.row > div > img {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
max-height: 100px;
}
}
@@ -411,7 +411,7 @@
color: white;
padding-top: 32px;
p {
color: gray('800');
color: map-get($grays, '800');
font-size: 16px;
}
}
@@ -436,7 +436,7 @@
&.quotecarousel {
padding: 0;
}
@include blockquote-layout(#fff, gray('900'));
@include blockquote-layout(#fff, map-get($grays, '900'));
.carousel-indicators {
@include carousel-indicators(5px, -5px);
}
@@ -602,7 +602,7 @@
position: absolute;
content: " ";
width: 3px;
background-color: gray('200');
background-color: map-get($grays, '200');
left: 50%;
margin-left: -1.5px;
}
@@ -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;
}
@@ -787,17 +787,17 @@
#wrapwrap .s_timeline_title {
margin-top: 0;
color: gray('800');
color: map-get($grays, '800');
}
#wrapwrap .s_timeline_info {
margin-top: 0;
color: gray('700');
color: map-get($grays, '700');
}
#wrapwrap .s_timeline_date {
margin-top: 0;
color: gray('800');
color: map-get($grays, '800');
}
$s-timeline-company-color: o-color('alpha') !default;
@@ -808,20 +808,20 @@ $s-timeline-company-color: o-color('alpha') !default;
}
#wrapwrap .s_timeline_heading {
color: gray('800');
color: map-get($grays, '800');
}
#wrapwrap .s_timeline_body > p,
#wrapwrap .s_timeline_body > ul {
margin-bottom: 0;
color: gray('800');
color: map-get($grays, '800');
}
#wrapwrap .s_timeline_body > p + p {
margin-top: 5px;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
#wrapwrap ul.timeline:before {
display: none;
}
@@ -855,7 +855,7 @@ $s-timeline-company-color: o-color('alpha') !default;
top: 10px;
bottom: 10px;
left: 50%;
background-color: gray('700');
background-color: map-get($grays, '700');
}
li {
@@ -875,7 +875,7 @@ $s-timeline-company-color: o-color('alpha') !default;
.timeline-content-double {
position: relative;
width: 50%;
color: gray('900');
color: map-get($grays, '900');
&:after {
content: '';
position: absolute;
@@ -883,8 +883,8 @@ $s-timeline-company-color: o-color('alpha') !default;
right: 30px;
display: inline-block;
border-top: 5px solid rgba(0, 0, 0, 0);
border-left: 5px solid gray('900');
border-right: 0 solid gray('900');
border-left: 5px solid map-get($grays, '900');
border-right: 0 solid map-get($grays, '900');
border-bottom: 5px solid rgba(0, 0, 0, 0);
}
@@ -922,7 +922,7 @@ $s-timeline-company-color: o-color('alpha') !default;
line-height: 30px;
margin-left: -40px;
background-color: #fff;
color: gray('900');
color: map-get($grays, '900');
font-weight: 700;
text-align: center;
z-index: $zindex-navbar;
@@ -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{
@@ -967,7 +967,7 @@ $s-timeline-company-color: o-color('alpha') !default;
}
li {
border-bottom: 1px solid gray('200');
border-bottom: 1px solid map-get($grays, '200');
&:last-child{
border-bottom: 0;
}
@@ -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;
}
@@ -1177,16 +1177,16 @@ $s-timeline-company-color: o-color('alpha') !default;
}
#wrapwrap .s_references_2 {
@include blockquote-layout(gray('200'), gray('900'));
@include blockquote-layout(map-get($grays, '200'), map-get($grays, '900'));
.carousel-indicators {
@include carousel-indicators(-15px, -10px);
}
}
#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) {
background-color: if($s-medias-list-bg-color-main != null, $s-medias-list-bg-color-main, map-get($grays, '200'));
.d-flex {
@include media-breakpoint-down(lg) {
height: auto !important;
}
> .row {
@@ -1200,7 +1200,7 @@ $s-timeline-company-color: o-color('alpha') !default;
}
.media-options {
height: 100%;
background-color: gray('200');
background-color: map-get($grays, '200');
> .row {
margin: 0;
[class*="col-"]{
+33 -33
View File
@@ -83,16 +83,16 @@
@mixin carousel-control($position, $fa-position, $fa-padding) {
opacity: 1;
text-shadow: none;
color: gray('900');
color: map-get($grays, '900');
font-size: inherit;
width: 5%;
.fa {
top: 50%;
background-color: #fff;
&:hover {
color: theme-color('primary');
color: map-get($theme-colors, '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);
}
}
@@ -252,24 +252,24 @@
// designed... should we keep this ?
@each $color, $alias in ('success': 'epsilon', 'info': 'gamma', 'warning': 'delta') {
&.btn-#{$color} {
@include button-variant(theme-color($alias), theme-color($alias));
@include button-variant(map-get($theme-colors, $alias), map-get($theme-colors, $alias));
}
&.btn-outline-#{$color} {
@include button-outline-variant(theme-color($alias));
@include button-outline-variant(map-get($theme-colors, $alias));
}
}
&.btn-danger {
@include button-variant(gray('black'), gray('black'));
@include button-variant(map-get($grays, 'black'), map-get($grays, 'black'));
}
&.btn-outline-danger {
@include button-outline-variant(gray('black'), gray('black'));
@include button-outline-variant(map-get($grays, 'black'), map-get($grays, 'black'));
}
}
}
}
@mixin o-theme-cfa-header-responsive-sizes() {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
h1 {
font-size: 30px;
}
@@ -288,7 +288,7 @@
border-right-width: 0px;
border-radius: 0px;
@if $with-color {
color: gray('700');
color: map-get($grays, '700');
}
&:focus {
@@ -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 {
@@ -396,13 +396,13 @@
}
@mixin o-theme-cfa-ecommerce-classes(
$nav-link-color: o-color('epsilon'), $nav-link-hover-color: o-color('beta'), $nav-link-hover-bg-color: gray('800'),
$nav-link-color: o-color('epsilon'), $nav-link-hover-color: o-color('beta'), $nav-link-hover-bg-color: map-get($grays, '800'),
$nav-link-active-bg-color: rgba(0, 0, 0, 0), $nav-link-active-color: o-color('epsilon'),
$js-attributes-padding: 0px 15px 15px 15px, $js-attributes-strong-color: o-color('gamma'), $js-attributes-label-color: gray('700'),
$js-attributes-padding: 0px 15px 15px 15px, $js-attributes-strong-color: o-color('gamma'), $js-attributes-label-color: map-get($grays, '700'),
$h6-padding-y: 10px, $h6-font-size: 13px, $h6-text-align: left, $h6-border-top: 0, $h6-border-bottom: 0, $h6-color: o-color('delta'),
$price-font-size: 12px, $product-price-padding: 0, $product-price-align: left, $btn-secondary-padding: 5px 10px,
$right-column-border-bottom: 1px solid gray('700'), $right-column-color: gray('700'), $right-column-font-weight: bold,
$add-cart-bg-color: gray('700'), $add-cart-color: white, $add-cart-width: auto, $price-h4: 25px) {
$right-column-border-bottom: 1px solid map-get($grays, '700'), $right-column-color: map-get($grays, '700'), $right-column-font-weight: bold,
$add-cart-bg-color: map-get($grays, '700'), $add-cart-color: white, $add-cart-width: auto, $price-h4: 25px) {
.breadcrumb {
padding-top: 20px;
@@ -435,10 +435,10 @@
}
.oe_product {
.btn.btn-danger {
@include button-variant(theme-color('danger'), theme-color('danger'));
@include button-variant(map-get($theme-colors, 'danger'), map-get($theme-colors, 'danger'));
}
.text-danger {
color: theme-color('danger') !important;
color: map-get($theme-colors, 'danger') !important;
}
.o_wsale_product_information {
padding: 0px 15px;
@@ -563,7 +563,7 @@
}
.oe_cart {
.btn {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
padding: 10px;
}
}
@@ -571,7 +571,7 @@
background-color: rgba(0, 0, 0, 0);
}
strong {
color: gray('700');
color: map-get($grays, '700');
}
#cart_products img {
max-width: 100px;
@@ -594,7 +594,7 @@
font-size: 18px;
}
#right_column {
color: gray('700');
color: map-get($grays, '700');
a {
color: red;
}
@@ -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;
@@ -701,10 +701,10 @@
@mixin o-theme-chd-bg-gradient-classes() {
.bg_gradient_primary_down {
background-image: linear-gradient( rgba(theme-color('primary'), 0), rgba(theme-color('primary'), 1) ),;
background-image: linear-gradient( rgba(map-get($theme-colors, 'primary'), 0), rgba(map-get($theme-colors, 'primary'), 1) ),;
}
.bg_gradient_primary_up {
background-image: linear-gradient( rgba(theme-color('primary'), 1), rgba(theme-color('primary'), 0) ),;
background-image: linear-gradient( rgba(map-get($theme-colors, 'primary'), 1), rgba(map-get($theme-colors, 'primary'), 0) ),;
}
.bg_gradient_white_down_thumb {
background-image: linear-gradient( rgba(#ccc, 1), rgba(white, 0.5) ),;
@@ -923,7 +923,7 @@
&:before {
content: "";
width: 1px;
background-color: gray('200');
background-color: map-get($grays, '200');
height: 100%;
@include o-position-absolute(0, auto, 0, -10%);
}
@@ -968,7 +968,7 @@
label.css_attribute_color {
opacity: 0.8;
cursor: pointer;
border: 1px solid gray('600');
border: 1px solid map-get($grays, '600');
box-shadow: inset 0 0 0 2px #fff;
border-radius: 2px;
@@ -1126,8 +1126,8 @@
.input-group .form-control {
height: auto;
padding: $padding;
color: gray('900');
@include border-left-radius(20px);
color: map-get($grays, '900');
@include border-start-radius(20px);
+ .input-group-append button {
padding: 6px 20px;
@@ -1138,10 +1138,10 @@
// Ask a question - Button
.btn-group .btn {
padding: 6px 12px;
@include border-right-radius(0);
@include border-end-radius(0);
&.dropdown-toggle {
@include border-left-radius(0);
@include border-right-radius(20px);
@include border-start-radius(0);
@include border-end-radius(20px);
}
}
// Ask a question - Editor icons
+3 -3
View File
@@ -18,13 +18,13 @@
<attribute name="class" remove="col-lg-3" separator=" "/>
</xpath>
<xpath expr="(//h6)[1]" position="attributes">
<attribute name="class" add="m-0 pl-3" separator=" "/>
<attribute name="class" add="m-0 ps-3" separator=" "/>
</xpath>
<xpath expr="(//h6)[2]" position="attributes">
<attribute name="class" add="m-0 pl-3" separator=" "/>
<attribute name="class" add="m-0 ps-3" separator=" "/>
</xpath>
<xpath expr="(//h6)[3]" position="attributes">
<attribute name="class" add="m-0 pl-3" separator=" "/>
<attribute name="class" add="m-0 ps-3" separator=" "/>
</xpath>
</template>
+7 -7
View File
@@ -48,7 +48,7 @@
</xpath>
<xpath expr="//h2" position="replace">
<h3>Unique experiences to drive engagement</h3>
<div class="s_hr text-left pt16 pb0" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start pt16 pb0" data-snippet="s_hr" data-name="Separator">
<hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0) !important;"/>
</div>
</xpath>
@@ -57,7 +57,7 @@
</xpath>
<xpath expr="//p[2]" position="replace">
<p>We have one goal in mind, the user satisfaction.</p>
<div class="s_hr text-left p0 pb32" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start p0 pb32" data-snippet="s_hr" data-name="Separator">
<hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
</div>
</xpath>
@@ -81,12 +81,12 @@
<attribute name="class" add="col-lg-4 offset-lg-1" remove="col-lg-6" separator=" "/>
</xpath>
<xpath expr="//h2" position="after">
<div class="s_hr text-left pt16 pb0" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start pt16 pb0" data-snippet="s_hr" data-name="Separator">
<hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: rgba(0, 0, 0, 0) !important;"/>
</div>
</xpath>
<xpath expr="//p[2]" position="after">
<div class="s_hr text-left p0 pb32" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start p0 pb32" data-snippet="s_hr" data-name="Separator">
<hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
</div>
</xpath>
@@ -169,7 +169,7 @@
<template id="s_three_columns" inherit_id="website.s_three_columns" name="Graphene s_three_columns">
<xpath expr="//div[hasclass('row')]/div//h3[1]" position="replace">
<h5>Powerful API</h5>
<div class="s_hr text-left pt8 pb16" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start pt8 pb16" data-snippet="s_hr" data-name="Separator">
<hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
</div>
</xpath>
@@ -178,7 +178,7 @@
</xpath>
<xpath expr="//div[hasclass('row')]/div[2]//h3[1]" position="replace">
<h5>Mobile Experience</h5>
<div class="s_hr text-left pt8 pb16" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start pt8 pb16" data-snippet="s_hr" data-name="Separator">
<hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
</div>
</xpath>
@@ -187,7 +187,7 @@
</xpath>
<xpath expr="//div[hasclass('row')]/div[3]//h3[1]" position="replace">
<h5>Support Team</h5>
<div class="s_hr text-left pt8 pb16" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start pt8 pb16" data-snippet="s_hr" data-name="Separator">
<hr class="w-100 mx-auto" style="border-top-width: 1px; border-top-style: solid; border-top-color: var(--o-color-3) !important;"/>
</div>
</xpath>
@@ -1,7 +1,7 @@
@mixin s-features-carousel-inner-hook {
.carousel-inner .row {
margin: 0 70px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
margin: 0;
}
}
@@ -7,7 +7,7 @@ $s-discount-amount-size: 70px;
color: o-color('alpha');
}
@mixin s-discount-box-hook {
color: gray('700');
color: map-get($grays, '700');
.s_discount_open-code {
color: o-color('gamma');
+2 -2
View File
@@ -23,8 +23,8 @@
Activities
</xpath>
<xpath expr="//h2" position="after">
<div class="s_hr text-left pb32 pt8" data-snippet="s_hr" data-name="Separator">
<hr class="w-50 mr-auto" style="border-top: 4px dotted var(--o-color-2) !important;"/>
<div class="s_hr text-start pb32 pt8" data-snippet="s_hr" data-name="Separator">
<hr class="w-50 me-auto" style="border-top: 4px dotted var(--o-color-2) !important;"/>
</div>
</xpath>
<xpath expr="//p" position="replace" mode="inner">
@@ -15,7 +15,7 @@
<attribute name="class" add="pt128 pb128" remove="pt80 pb80" separator=" "/>
</xpath>
<xpath expr="(//blockquote)[2]" position="attributes">
<attribute name="class" add="mx-auto" remove="mr-auto" separator=" "/>
<attribute name="class" add="mx-auto" remove="me-auto" separator=" "/>
</xpath>
<xpath expr="(//i)[2]" position="attributes">
<attribute name="class" add="rounded-circle" remove="rounded" separator=" "/>
@@ -26,7 +26,7 @@
<attribute name="class" add="pt128 pb128" remove="pt80 pb80" separator=" "/>
</xpath>
<xpath expr="(//blockquote)[3]" position="attributes">
<attribute name="class" add="mx-auto" remove="ml-auto" separator=" "/>
<attribute name="class" add="mx-auto" remove="ms-auto" separator=" "/>
</xpath>
<xpath expr="(//i)[3]" position="attributes">
<attribute name="class" add="rounded-circle" remove="rounded" separator=" "/>
+2 -2
View File
@@ -20,8 +20,8 @@
<!-- Separator -->
<xpath expr="//h2" position="after">
<div class="s_hr text-left pb32 pt8" data-snippet="s_hr" data-name="Separator">
<hr class="w-50 mr-auto" style="border-top: 4px dotted var(--o-color-1) !important;"/>
<div class="s_hr text-start pb32 pt8" data-snippet="s_hr" data-name="Separator">
<hr class="w-50 me-auto" style="border-top: 4px dotted var(--o-color-1) !important;"/>
</div>
</xpath>
@@ -33,7 +33,7 @@
</xpath>
<!-- Column n°1 - Add separator -->
<xpath expr="//h3" position="after">
<div class="s_hr text-left pb32 pt8" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start pb32 pt8" data-snippet="s_hr" data-name="Separator">
<hr class="w-25 mx-auto" style="border-top: 5px dotted var(--o-color-2) !important;"/>
</div>
</xpath>
@@ -65,7 +65,7 @@
</xpath>
<!-- Column n°2 - Add separator -->
<xpath expr="(//h3)[2]" position="after">
<div class="s_hr text-left pb32 pt8" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start pb32 pt8" data-snippet="s_hr" data-name="Separator">
<hr class="w-25 mx-auto" style="border-top: 5px dotted var(--o-color-1) !important;"/>
</div>
</xpath>
@@ -97,7 +97,7 @@
</xpath>
<!-- Column n°3 - Add separator -->
<xpath expr="(//h3)[3]" position="after">
<div class="s_hr text-left pb32 pt8" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start pb32 pt8" data-snippet="s_hr" data-name="Separator">
<hr class="w-25 mx-auto" style="border-top: 5px dotted var(--o-color-2) !important;"/>
</div>
</xpath>
@@ -26,7 +26,7 @@ $s-banner-parallax-h1-size: 50px;
bottom: -85vh;
left: -2px;
opacity: 0.8;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
display: none;
}
}
@@ -41,13 +41,13 @@ $s-banner-parallax-h1-size: 50px;
bottom: -85vh;
right: -2px;
opacity: 0.8;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
display: none;
}
}
};
@mixin s-banner-parallax-height-hook {
@include media-breakpoint-down(md) {
@include media-breakpoint-down(lg) {
height: 100vh !important;
}
};
@@ -3,11 +3,11 @@ $s-features-carousel-indicators-visible: visible;
@mixin s-features-carousel-inner-hook {
.carousel-inner .row {
margin: 40px 70px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
margin: 0;
}
}
}
@mixin s-features-carousel-mask-hook {
border: 1px solid gray('200');
border: 1px solid map-get($grays, '200');
}
@@ -23,12 +23,12 @@ $s-big-icon-circle-icon-size: 150px;
@mixin s-big-icon-circle-height-hook {
height: 100vh;
padding-top: 0;
@include media-breakpoint-down(lg) {
@include media-breakpoint-down(xl) {
height: 100%;
}
.row {
height: 100vh;
@include media-breakpoint-down(lg) {
@include media-breakpoint-down(xl) {
height: 100%;
}
}
@@ -40,7 +40,7 @@ $s-big-icon-circle-icon-size: 150px;
@mixin s-big-icon-circle-fa-hook {
height: 100px;
line-height: 70px;
@include media-breakpoint-down(lg) {
@include media-breakpoint-down(xl) {
height: 80px;
}
}
@@ -29,7 +29,7 @@
</xpath>
<!-- Add secondary button -->
<xpath expr="//a[hasclass('btn')]" position="before">
<a href="#" class="btn btn-secondary btn-lg mr-2 mb-2">Our services</a>
<a href="#" class="btn btn-secondary btn-lg me-2 mb-2">Our services</a>
</xpath>
</template>
@@ -15,7 +15,7 @@ $s-banner-parallax-h1-size: 50px;
padding: 0;
}
@mixin s-banner-parallax-height-hook {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
height: 100vh !important;
}
}
@@ -3,11 +3,11 @@ $s-big-icon-circle-icon-size: 150px;
$s-big-icon-circle-text-color: $-gray-700;
@mixin s-big-icon-circle-height-hook {
padding-top: 0;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
height: 100%;
}
.row {
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
height: 100%;
}
}
@@ -18,7 +18,7 @@ $s-big-icon-circle-text-color: $-gray-700;
@mixin s-big-icon-circle-fa-hook {
height: 150px;
line-height: 70px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
height: 80px;
}
}
@@ -3,11 +3,11 @@ $s-features-carousel-indicators-visible: visible;
@mixin s-features-carousel-inner-hook {
.carousel-inner .row {
margin: 40px 70px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
margin: 0;
}
}
}
@mixin s-features-carousel-mask-hook {
border: 1px solid gray('200');
border: 1px solid map-get($grays, '200');
}
@@ -20,7 +20,7 @@ $s-banner-3-h2-size: 25px;
img {
display: none;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
top: 100px;
width: 100%;
}
@@ -1,7 +1,7 @@
.s_numbers {
.s_number {
font-size: 75px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
font-size: 60px;
}
}
+1 -1
View File
@@ -14,7 +14,7 @@
<xpath expr="//*[hasclass('s_hr')][1]" position="replace"/>
<!-- Slide #03 -->
<xpath expr="//*[hasclass('carousel-item')][3]" position="replace"/>
<xpath expr="//*[@data-slide-to='2']" position="replace"/>
<xpath expr="//*[@data-bs-slide-to='2']" position="replace"/>
</template>
</odoo>
@@ -1,7 +1,7 @@
@mixin s-features-carousel-inner-hook {
.carousel-inner .row {
margin: 0 70px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
margin: 0;
}
}
@@ -3,7 +3,7 @@ $s-banner-3-padding: 0px;
@mixin s-banner-3-col-center-hook {
margin-left: 16.6667%;
text-align: center;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
margin-left: 0px;
}
}
@@ -24,7 +24,7 @@ $s-banner-3-h2-size: 30px;
transform: none;
font-size: 18px;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
width: 100%;
margin-top: 0;
}
@@ -20,7 +20,7 @@
</xpath>
<!-- Carousel item #2 - blockquote -->
<xpath expr="//div[hasclass('carousel-item')][2]//blockquote" position="attributes">
<attribute name="class" add="mx-auto" remove="mr-auto" separator=" "/>
<attribute name="class" add="mx-auto" remove="me-auto" separator=" "/>
</xpath>
<!-- Carousel item #3 - filter -->
<xpath expr="//div[hasclass('carousel-item')][3]//div[hasclass('container')]" position="before">
@@ -32,7 +32,7 @@
</xpath>
<!-- Carousel item #3 - blockquote -->
<xpath expr="//div[hasclass('carousel-item')][3]//blockquote" position="attributes">
<attribute name="class" add="mx-auto" remove="ml-auto" separator=" "/>
<attribute name="class" add="mx-auto" remove="ms-auto" separator=" "/>
</xpath>
</template>
@@ -18,7 +18,7 @@ $s-banner-3-h2-size: 30px;
margin-top: 100px;
background-color: white;
border: 15px solid rgba(255, 255, 255, .5);
@include media-breakpoint-down(lg) {
@include media-breakpoint-down(xl) {
text-align: left !important;
width: auto;
margin-top: 0;
@@ -34,7 +34,7 @@ $s-banner-3-h2-size: 30px;
border: 15px solid white;
border-left-width: 50px;
border-right-width: 50px;
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
border-width: 10px;
}
}
@@ -32,7 +32,7 @@
</xpath>
<!-- Center the blockquote -->
<xpath expr="(//blockquote)[2]" position="attributes">
<attribute name="class" add="mx-auto" remove="mr-auto" separator=" "/>
<attribute name="class" add="mx-auto" remove="me-auto" separator=" "/>
</xpath>
<!-- Quote 3 -->
@@ -46,7 +46,7 @@
</xpath>
<!-- Center the blockquote -->
<xpath expr="(//blockquote)[3]" position="attributes">
<attribute name="class" add="mx-auto" remove="ml-auto" separator=" "/>
<attribute name="class" add="mx-auto" remove="ms-auto" separator=" "/>
</xpath>
</template>
+1 -1
View File
@@ -99,7 +99,7 @@
<p>&#160;</p>
<h5>Scalable and Modular</h5>
<p>Whether you start small or are already a large company, our solution adapts to your needs and grows with you.</p>
<div class="s_hr text-left pb16 pt8" data-snippet="s_hr" data-name="Separator">
<div class="s_hr text-start pb16 pt8" data-snippet="s_hr" data-name="Separator">
<hr class="w-100 mx-auto" style="border-top-style: solid; border-top-color: rgb(233, 236, 239) !important; border-top-width: 3px !important;"/>
</div>
</xpath>
@@ -8,7 +8,7 @@
</xpath>
<!-- Column #1 -->
<xpath expr="//h3" position="before">
<span class="text-600 font-weight-bold">$295,000</span>
<span class="text-600 fw-bold">$295,000</span>
</xpath>
<xpath expr="//h3" position="replace" mode="inner">
House On The Hill
@@ -22,7 +22,7 @@
<!-- Column 2 -->
<xpath expr="(//h3)[2]" position="before">
<span class="text-600 font-weight-bold">$1,295,000,000</span>
<span class="text-600 fw-bold">$1,295,000,000</span>
</xpath>
<xpath expr="(//h3)[2]" position="replace" mode="inner">
Moutain View
@@ -36,7 +36,7 @@
<!-- Column 3 -->
<xpath expr="(//h3)[3]" position="before">
<span class="text-600 font-weight-bold">$455,000</span>
<span class="text-600 fw-bold">$455,000</span>
</xpath>
<xpath expr="(//h3)[3]" position="replace" mode="inner">
Paradise Residence
@@ -116,11 +116,11 @@
// Comparisons
.s_comparisons {
.list-group-item.active, .list-group-item.active:focus, .list-group-item.active:hover {
background-color: theme-color('primary');
border-color: theme-color('primary');
background-color: map-get($theme-colors, 'primary');
border-color: map-get($theme-colors, 'primary');
}
.panel-body h2 small {
color: gray('900');
color: map-get($grays, '900');
}
}
@@ -24,7 +24,7 @@ $s-banner-3-h2-size: 30px;
transform: none;
font-size: 18px;
}
@include media-breakpoint-down(sm) {
@include media-breakpoint-down(md) {
width: 100%;
margin-top: 0;
}
+1 -1
View File
@@ -26,7 +26,7 @@
</xpath>
<!-- Scroll Down Button -->
<xpath expr="//*[hasclass('container')]" position="after">
<a class="o_scroll_button rounded-circle align-items-center justify-content-center mx-auto mb-5 text-white o_not_editable" href="#" contenteditable="false" title="" style="background-color: rgba(25, 41, 37, 0.55) !important;" data-original-title="Scroll down to next section">
<a class="o_scroll_button rounded-circle align-items-center justify-content-center mx-auto mb-5 text-white o_not_editable" href="#" contenteditable="false" title="" style="background-color: rgba(25, 41, 37, 0.55) !important;" data-bs-original-title="Scroll down to next section">
<i class="fa fa-chevron-down fa-1x"></i>
</a>
</xpath>
@@ -11,7 +11,7 @@
<div class="o_we_bg_filter" style="background-color: rgba(25, 41, 37, 0.55) !important;"/>
</xpath>
<xpath expr="//blockquote[hasclass('s_blockquote')]" position="attributes">
<attribute name="class" add="mr-auto" remove="mx-auto" separator=" "/>
<attribute name="class" add="me-auto" remove="mx-auto" separator=" "/>
</xpath>
<xpath expr="(//i[hasclass('s_blockquote_icon')])" position="attributes">
<attribute name="style" add="background-color: rgba(255, 0, 0, 0) !important;" separator="; "></attribute>