From 4c19d6c90145a5acb6270557168b2aae57456279 Mon Sep 17 00:00:00 2001
From: Thomas JUND <tjund@entrouvert.com>
Date: Thu, 25 Feb 2021 12:49:51 +0100
Subject: [PATCH] scss: introduce $carrousel-item-mask-color (#51440)

---
 help/fr/misc-scss.page          | 5 +++++
 static/includes/_carrousel.scss | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/help/fr/misc-scss.page b/help/fr/misc-scss.page
index 4488bd76..8af5b824 100644
--- a/help/fr/misc-scss.page
+++ b/help/fr/misc-scss.page
@@ -850,6 +850,11 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
   élément à l'autre sont affichées. (visible ou none)</p></td>
   <td><p><var>visible</var></p></td>
  </tr>
+ <tr>
+  <td><p><code>$carrousel-item-mask-color</code></p></td>
+  <td><p>Couleur du masque qui se superpose à l'image de la diapositive</p></td>
+  <td><p><var>rgba(0, 0, 0, 0.3)</var></p></td>
+ </tr>
 </table>
 
 </section>
diff --git a/static/includes/_carrousel.scss b/static/includes/_carrousel.scss
index 4738062f..ae2258f1 100644
--- a/static/includes/_carrousel.scss
+++ b/static/includes/_carrousel.scss
@@ -1,5 +1,6 @@
 /* $carrousel-height: height of carrousel image */
 $carrousel-height: 20rem !default;
+$carrousel-item-mask-color: rgba(0, 0, 0, 0.3) !default;
 
 /* $carrousel-text-position: [vertical option] [horizontal option] */
 /* vertical options: top | middle | bottom */
@@ -47,6 +48,7 @@ div.carrousel-content {
 			height: 100%;
 			background-size: cover;
 			padding: 10px;
+			@if ($carrousel-item-mask-color and $carrousel-item-mask-color != transparent) {
 			&::after {
 				content: "";
 				display: block;
@@ -55,8 +57,8 @@ div.carrousel-content {
 				width: 100%;
 				height: 100%;
 				position: absolute;
-				background: black;
-				opacity: 0.3;
+				background: $carrousel-item-mask-color;
+			}
 			}
 			div.carrousel-item-content {
 				@if $carrousel-navigation == "visible" {