publik-base-theme/static/includes/_carrousel.scss

/* $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 */
/* horizontal options: left | middle | right */
/* Default: middle (eq to "middle middle"); */
$carrousel-text-position: middle !default;

/* $carrousel-navigation: visible or none */
$carrousel-navigation: visible !default;

/* $carrousel-navigation-bullet-color: color of active slide bullet */
$carrousel-navigation-bullet-color: $button-color !default;

/* $carrousel-navigation-bullet-size: height/width of slide bullets */
$carrousel-navigation-bullet-size: 12px !default;

/* $carrousel-navigation-bullet-border: border of slide bullets */
$carrousel-navigation-bullet-border: 1px solid white !default;


/* $carrousel-arrows: visible or none */
$carrousel-arrows: visible !default;

div.carrousel-content {
	position: relative;
	height: $carrousel-height;
	overflow: hidden;
	input {
		visibility: hidden;
	}
	input + div {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
		pointer-events: none;
		transition: opacity ease 0.5s;
		div.carrousel-item {
			position: relative;
			display: flex;
			background-position: center center;
			width: 100%;
			height: 100%;
			background-size: cover;
			padding: 10px;
			@if ($carrousel-item-mask-color and $carrousel-item-mask-color != transparent) {
			&::after {
				content: "";
				display: block;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				position: absolute;
				background: $carrousel-item-mask-color;
			}
			}
			div.carrousel-item-content {
				@if $carrousel-navigation == "visible" {
					margin-bottom: 1.5rem;
				}
				> a {
					display: block;
					color: inherit;
				}
				@if $carrousel-text-position == "middle" {
					> a {
						padding: 1rem;
						margin-left: 6rem;
						margin-right: 6rem;
						@media screen and (max-width: $nav-mobile-limit) {
							margin-left: 2rem;
							margin-right: 2rem;
						}
					}
					p {
						margin-left: auto;
						margin-right: auto;
					}
				}
				z-index: 100;
				line-height: 110%;
				p {
					max-width: 25em;
				}
			}
			color: white;
			font-size: 120%;
		}
	}

	input:checked + div {
		opacity: 1;
		pointer-events: auto;
	}

	div.carrousel-nav {
		position: absolute;
		@if $carrousel-navigation == "visible" {
			display: block;
		} @else {
			display: none;
		}
		bottom: 10px;
		text-align: center;
		width: 100%;
		height: 20px;
		z-index: 100;
		label {
			display: inline-block;
			margin: 0 10px;
			width: $carrousel-navigation-bullet-size;
			height: $carrousel-navigation-bullet-size;
			border: $carrousel-navigation-bullet-border;
			border-radius: 50%;
			cursor: pointer;
			transition: background-color 0.25s;
		}
	}
	a.carrousel-previous,
	a.carrousel-next {
		@if $carrousel-arrows == visible {
			display: block;
		} @else {
			display: none;
		}
		position: absolute;
		text-decoration: none;
		top: calc(50% - 3rem);
		color: white;
		height: 6rem;
		line-height: 6rem;
		width: 6rem;
		cursor: pointer;
		z-index: 1000;
		text-align: center;
		&::after {
			font-family: FontAwesome;
			font-size: 24px;
		}
		&.carrousel-previous {
			left: 0.7em;
			&::after {
				content: "\f053";  // chevron-left;
			}
		}
		&.carrousel-next {
			right: 0.7em;
			&::after {
				content: "\f054";  // chevron-right;
			}
		}
		@media screen and (max-width: $nav-mobile-limit) {
			display: none;
		}
	}

	@for $i from 1 through 10 {
		.carrousel-radio-#{$i}:checked ~ .carrousel-nav label.carrousel-label-#{$i} {
			background-color: $carrousel-navigation-bullet-color;
		}
	}
}

// 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;
	}
}