pengyuthon/odoo_source
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[FIX] website: image gallery snippet arrow visibility

Browse Source 
This commit solves the visibility issue of an arrow in the image gallery
snippet. Before this commit, an arrow was not visible over the white
background.

In this PR[1], we adapted directional odoo icons by replacing font
awesome but there were some CSS directly targeting the `fa` class that
also should be replaced by the `oi` to target the `oi` class. So adding
the CSS selector `oi`.
- Keeping 'fa' too, as this still can be used by the already dropped
snippet.

[1]: https://github.com/odoo/odoo/commit/418413e4997a6b65eb7ad9e9ef8aba42805f1c0c

task-3339169

closes odoo/odoo#129939

X-original-commit: 59c7a371c9389135ff6fa9778e6f5adea9a97aea
Signed-off-by: Benjamin Vray (bvr) <bvr@odoo.com>
Signed-off-by: Divyesh Vyas (divy) <divy@odoo.com>
This commit is contained in:
divy-odoo
2023-07-28 06:45:11 +02:00
parent 03145907b8
commit 9a189c6eb0
1 changed files with 61 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
addons/website/static/src/snippets/s_image_gallery/001.scss
+61 -32
View File
@@ -141,47 +141,74 @@
}
&.s_image_gallery_indicators_arrows_boxed, &.s_image_gallery_indicators_arrows_rounded {
.carousel {
.carousel-control-prev .fa,
.carousel-control-next .fa {
text-shadow: none;
.carousel-control-prev,
.carousel-control-next {
// Directional icons replaced by oi but keeping fa here, it
// is still used by already dropped snippet
.fa, .oi {
text-shadow: none;
}
}
}
}
&.s_image_gallery_indicators_arrows_boxed {
.carousel {
.carousel-control-prev .fa:before {
content: "\f104";
padding-right: 2px;
.carousel-control-prev {
.fa:before {
content: "\f104";
}
.oi:before, .fa:before {
padding-right: 2px;
}
}
.carousel-control-next .fa:before {
content: "\f105";
padding-left: 2px;
.carousel-control-next {
.fa:before {
content: "\f105";
}
.oi:before, .fa:before {
padding-left: 2px;
}
}
.carousel-control-prev .fa:before,
.carousel-control-next .fa:before {
display: block;
width: 3rem;
height: 3rem;
line-height: 3rem;
color: black;
background: white;
font-size: 1.25rem;
border: 1px solid $gray-500;
.carousel-control-prev,
.carousel-control-next {
.fa:before, .oi:before {
display: block;
width: 3rem;
height: 3rem;
line-height: 3rem;
color: black;
background: white;
border: 1px solid $gray-500;
}
.fa:before {
font-size: 1.25rem;
}
.oi:before {
font-size: 0.75rem;
}
}
}
}
&.s_image_gallery_indicators_arrows_rounded {
.carousel {
.carousel-control-prev .fa:before { content: "\f060"; }
.carousel-control-next .fa:before { content: "\f061"; }
.carousel-control-prev .fa:before,
.carousel-control-next .fa:before {
color: black;
background: white;
font-size: 1.25rem;
border-radius: 50%;
padding: 1.25rem;
border: 1px solid $gray-500;
.carousel-control-prev {
.fa:before { content: "\f060"; }
.oi:before { content: "\e842"; }
}
.carousel-control-next {
.fa:before { content: "\f061"; }
.oi:before { content: "\e843"; }
}
.carousel-control-prev,
.carousel-control-next {
.fa:before, .oi:before {
color: black;
background: white;
font-size: 1.25rem;
border-radius: 50%;
padding: 1.25rem;
border: 1px solid $gray-500;
}
}
}
}
@@ -270,9 +297,11 @@
align-items: center;
height: 100%;
}
.carousel-control-next .fa,
.carousel-control-prev .fa {
text-shadow: 0px 0px 3px $gray-800;
.carousel-control-next,
.carousel-control-prev {
.fa, .oi {
text-shadow: 0px 0px 3px $gray-800;
}
}
}
}