scss: introduce $carrousel-item-mask-color (#51440)
This commit is contained in:
parent
c68ab04941
commit
4c19d6c901
|
@ -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>
|
élément à l'autre sont affichées. (visible ou none)</p></td>
|
||||||
<td><p><var>visible</var></p></td>
|
<td><p><var>visible</var></p></td>
|
||||||
</tr>
|
</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>
|
</table>
|
||||||
|
|
||||||
</section>
|
</section>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
/* $carrousel-height: height of carrousel image */
|
/* $carrousel-height: height of carrousel image */
|
||||||
$carrousel-height: 20rem !default;
|
$carrousel-height: 20rem !default;
|
||||||
|
$carrousel-item-mask-color: rgba(0, 0, 0, 0.3) !default;
|
||||||
|
|
||||||
/* $carrousel-text-position: [vertical option] [horizontal option] */
|
/* $carrousel-text-position: [vertical option] [horizontal option] */
|
||||||
/* vertical options: top | middle | bottom */
|
/* vertical options: top | middle | bottom */
|
||||||
|
@ -47,6 +48,7 @@ div.carrousel-content {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
@if ($carrousel-item-mask-color and $carrousel-item-mask-color != transparent) {
|
||||||
&::after {
|
&::after {
|
||||||
content: "";
|
content: "";
|
||||||
display: block;
|
display: block;
|
||||||
|
@ -55,8 +57,8 @@ div.carrousel-content {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
background: black;
|
background: $carrousel-item-mask-color;
|
||||||
opacity: 0.3;
|
}
|
||||||
}
|
}
|
||||||
div.carrousel-item-content {
|
div.carrousel-item-content {
|
||||||
@if $carrousel-navigation == "visible" {
|
@if $carrousel-navigation == "visible" {
|
||||||
|
|
Loading…
Reference in New Issue