mod-build 4.0.21 → 4.0.22-beta.2

package/src/accessible-components/carousel/_carousel.scss

@@ -0,0 +1,112 @@
+$swiper-margin-top: 0 !default;
+$swiper-padding-top: 0 !default;
+
+$swiper-controls-padding: 30px 15px !default;
+$swiper-controls-padding-desktop: 50px 15px !default;
+$swiper-navigation-color: $color-charcoal4 !default;
+$swiper-navigation-hover-color: darken($swiper-navigation-color, 10%) !default;
+$swiper-pagination-margin: 0 10px !default;
+$swiper-pagination-bottom-alignment: 0 !default;
+$swiper-pagination-bullet-background-color: transparent !default;
+$swiper-pagination-bullet-border: 1px solid $swiper-navigation-color !default;
+$swiper-pagination-bullet-margin: 0 8px !default;
+$swiper-pagination-bullet-height: 8px !default;
+$swiper-pagination-bullet-width: 8px !default;
+$swiper-pagination-bullet-hover-background-color: darken($swiper-navigation-color, 10%) !default;
+$swiper-pagination-bullet-hover-border: 0 !default;
+$swiper-pagination-bullet-active-background-color: $swiper-navigation-color !default;
+$swiper-pagination-bullet-active-border: 0 !default;
+
+$swiper-scrollbar-background-color: $color-charcoal1 !default;
+$swiper-scrollbar-drag-color: $color-charcoal4 !default;
+$swiper-scrollbar-height: 4px !default;
+
+.swiper {
+	margin-top: $swiper-margin-top;
+	overflow: hidden;
+	padding-top: $swiper-padding-top;
+
+	.swiper-wrapper{
+		display: flex;
+	}
+
+	.swiper-controls {
+		align-items: center;
+		display: flex;
+		justify-content: center;
+		padding: $swiper-controls-padding;
+
+		i.icon {
+			color: $swiper-navigation-color;
+			cursor: pointer;
+			transition: $base-transition;
+
+			&:not(.swiper-button-disabled) {
+				&:active,
+				&:focus,
+				&:hover {
+					color: $swiper-navigation-hover-color;
+				}
+			}
+		}
+
+		.swiper-pagination {
+			margin: $swiper-pagination-margin;
+			position: relative;
+
+			.swiper-pagination-bullet {
+				background-color: $swiper-pagination-bullet-background-color;
+				border: $swiper-pagination-bullet-border;
+				height: $swiper-pagination-bullet-height;
+				opacity: 1;
+				transition: $base-transition;
+				width: $swiper-pagination-bullet-width;
+
+				&:active,
+				&:focus,
+				&:hover {
+					background-color: $swiper-pagination-bullet-hover-background-color;
+					border: $swiper-pagination-bullet-hover-border;
+					outline: 0;
+				}
+
+				&-active {
+					background-color: $swiper-pagination-bullet-active-background-color;
+					border: $swiper-pagination-bullet-active-border;
+				}
+			}
+
+			&.swiper-pagination-horizontal {
+				bottom: $swiper-pagination-bottom-alignment;
+				width: auto;
+
+				.swiper-pagination-bullet {
+					margin: $swiper-pagination-bullet-margin;
+				}
+			}
+		}
+	}
+
+	&-scrollbar {
+		background: $swiper-scrollbar-background-color;
+		height: $swiper-scrollbar-height;
+
+		&-drag {
+			background-color: $swiper-scrollbar-drag-color;
+			height: 100%;
+			width: 100%;
+		}
+	}
+
+	&--reviews {
+		padding-top: 50px !important;
+	}
+}
+
+@include breakpoint-md {
+	.swiper {
+		.swiper-controls {
+			padding: $swiper-controls-padding-desktop;
+		}
+	}
+}

package/src/accessible-components/carousel/carousel.html

@@ -0,0 +1,25 @@
+<div class="swiper{{#xif 'this.carousel.carouselOptions.attributes && this.carousel.carouselOptions.attributes.class'}} {{this.carousel.carouselOptions.attributes.class}}{{/xif}}" {{{addAttributes this.carousel.carouselOptions 'class'}}}>
+	{{#if this.carousel.carouselOptions.attributes.aria.describedby}}
+		<p class="visually-hidden" id="{{this.carousel.carouselOptions.attributes.aria.describedby}}">{{{this.carousel.carouselOptions.description}}}</p>
+	{{/if}}
+	<ul class="swiper-wrapper"{{#if this.carousel.carouselOptions.wrapper}} {{{addAttributes this.carousel.carouselOptions.wrapper 'class'}}}{{/if}}>
+		{{#if this.carousel.template}}
+			{{fileInclude this.carousel.template
+				items = this.carousel.items
+				classModifier = this.carousel.classModifier
+				carouselOptions = this.carousel.carouselOptions
+			}}
+		{{/if}}
+	</ul>
+
+	{{#xif "this.carousel.carouselOptions.hasNavigation === true || this.carousel.carouselOptions.hasPagination === true" }}
+	<div class="swiper-controls">
+		{{#if this.carousel.carouselOptions.previousSlideIcon }}{{{ this.carousel.carouselOptions.previousSlideIcon }}}{{/if}}
+		{{#if this.carousel.carouselOptions.hasPagination }}<div class="swiper-pagination"></div>{{/if}}
+		{{#if this.carousel.carouselOptions.nextSlideIcon }}{{{ this.carousel.carouselOptions.nextSlideIcon }}}{{/if}}
+	</div>
+	{{/xif}}
+	{{#if this.carousel.carouselOptions.hasScrollbar }}
+	<div class="swiper-scrollbar"></div>
+	{{/if}}
+</div>