mod-build 4.0.21 → 4.0.22-beta.1

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

@@ -0,0 +1,106 @@
+$swiper-margin-top: 0 !default;
+$swiper-padding-top: 0 !default;
+
+$swiper-controls-padding: 50px 15px !default;
+$swiper-controls-padding-mobile: 30px 15px !default;
+$swiper-navigation-color: $color-charcoal2 !default;
+$swiper-pagination-margin: 0 10px !default;
+$swiper-pagination-bottom-alignment: 0 !default;
+$swiper-pagination-bullet-bg: 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-bg: transparent !default;
+$swiper-pagination-bullet-active-bg: $swiper-navigation-color !default;
+$swiper-pagination-bullet-active-border: none !default;
+
+$swiper-scrollbar-bg-color: $color-ivory5 !default;
+$swiper-scrollbar-drag-color: $color-blue5 !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-mobile;
+
+		i.icon {
+			color: $swiper-navigation-color;
+			cursor: pointer;
+		}
+
+		.swiper-pagination {
+			margin: $swiper-pagination-margin;
+			position: relative;
+
+			&-bullet {
+				background-color: $swiper-pagination-bullet-bg;
+				border: $swiper-pagination-bullet-border;
+				height: $swiper-pagination-bullet-height;
+				opacity: 1;
+				transition: all .15s ease-in-out;
+				width: $swiper-pagination-bullet-width;
+
+				&:active, &:focus {
+					outline: 0;
+				}
+
+				&-active {
+					background-color: $swiper-pagination-bullet-active-bg;
+					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-bg-color;
+		height: $swiper-scrollbar-height;
+
+		&-drag {
+			background-color: $swiper-scrollbar-drag-color;
+			height: 100%;
+			width: 100%;
+		}
+	}
+}
+
+@include breakpoint-sm {
+	.swiper .swiper-controls {
+		padding: $swiper-controls-padding;
+	}
+}
+
+@include breakpoint-lg {
+	.swiper {
+		&-controls {
+			.swiper-pagination {
+				&-bullet {
+					&:hover {
+						background-color: $swiper-pagination-bullet-hover-bg;
+					}
+				}
+			}
+		}
+	}
+}

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

@@ -0,0 +1,22 @@
+<div id="{{ this.carousel.carouselOptions.swiperId }}" class="swiper{{#if this.carousel.carouselOptions.additionalSwiperClass }} {{ this.carousel.carouselOptions.additionalSwiperClass }}{{/if}}">
+	<ul class="swiper-wrapper"{{#if this.carousel.carouselOptions.swiperWrapperId}} id="{{this.carousel.carouselOptions.swiperWrapperId}}"{{/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>