entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 10 Releases Wiki Activity

scss: refactor carrousel content positionning (#40717)

This commit is contained in:
Thomas Jund 2020-03-16 09:53:13 +01:00 committed by Serghei Mihai
parent d20d228363
commit 3bb1b3e2f0
2 changed files with 43 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
help/fr/misc-scss.page
View File

@ -794,9 +794,12 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
</tr>
<tr>
<td><p><code>$carrousel-text-position</code></p></td>
<td><p>Position du texte des différentes pages; les valeurs possibles sont
middle (milieu de page) et bottom-left (en bas à gauche).</p></td>
<td><p><var>middle</var></p></td>
<td><p>Position du texte des différentes pages; indiqué par 2 valeurs
séparées par un espace. La première indique le positionnement vertical
(<var>left</var>, <var>middle</var> ou <var>right</var>),
la seconde le positionnement horizontal (<var>top</var>, <var>middle</var>
ou <var>bottom</var>).</p></td>
<td><p>Exemple : <var>top right</var></p></td>
</tr>
<tr>
<td><p><code>$carrousel-navigation</code></p></td>

47
static/includes/_carrousel.scss
View File

@ -1,7 +1,10 @@
/* $carrousel-height: height of carrousel image */
$carrousel-height: 20rem !default;
/* $carrousel-text-position: position of text (middle, bottom-left) */
/* $carrousel-text-position: [vertical option] [horizontal option] */
/* vertical options: top | middle | bottom */
/* horizontal options: left | middle | right */
/* Default: middle (eq to "middle middle"); */
$carrousel-text-position: middle !default;
/* $carrousel-navigation: visible or none */
@ -37,8 +40,8 @@ div.carrousel-content {
pointer-events: none;
transition: opacity ease 0.5s;
div.carrousel-item {
display: table;
position: relative;
display: flex;
background-position: center center;
box-sizing: border-box;
width: 100%;
@ -57,12 +60,14 @@ div.carrousel-content {
opacity: 0.3;
}
div.carrousel-item-content {
@if $carrousel-navigation == "visible" {
margin-bottom: 1.5rem;
}
> a {
display: block;
color: inherit;
box-sizing: border-box;
}
position: relative;
@if $carrousel-text-position == "middle" {
> a {
padding: 1rem;
@ -73,16 +78,10 @@ div.carrousel-content {
margin-right: 2rem;
}
}
display: table-cell;
vertical-align: middle;
p {
margin-left: auto;
margin-right: auto;
}
} @else if $carrousel-text-position == "bottom-left" {
text-align: left;
position: absolute;
bottom: 1rem;
}
z-index: 100;
line-height: 110%;
@ -92,7 +91,6 @@ div.carrousel-content {
}
color: white;
font-size: 120%;
text-align: center;
}
}
@ -167,3 +165,32 @@ div.carrousel-content {
}
}
}
// Text position options
@if ($carrousel-text-position == middle) {
$carrousel-text-position: middle middle;
}
// vertical position
$carrousel-text-vertical-position: nth($carrousel-text-position, 1);
// horizontal position
$carrousel-text-horizontal-position: nth($carrousel-text-position, 2);
.carrousel-item {
@if $carrousel-text-vertical-position == top {
align-items: flex-start;
} @else if $carrousel-text-vertical-position == middle {
align-items: center;
} @else if $carrousel-text-vertical-position == bottom {
align-items: flex-end;
}
@if $carrousel-text-horizontal-position == left {
justify-content: flex-start;
text-align: left;
} @else if $carrousel-text-horizontal-position == middle {
justify-content: center;
text-align: center;
} @else if $carrousel-text-horizontal-position == right {
justify-content: flex-end;
text-align: right;
}
}