mod-build 4.0.18 → 4.0.19-beta.2

package/src/shared-components/radio-button/_radio-button.scss

@@ -1,554 +0,0 @@
-$primary-color: #6EB7C2 !default;
-$qs-primary-color: #FE8501 !default;
-
-$radio-button-wrapper-margin: 0 0 10px !default;
-$radio-button-bg-color: $color-white !default;
-$radio-button-border-color: $color-charcoal1 !default;
-$radio-button-border-radius: 4px !default;
-$radio-button-border-width: 1px !default;
-$radio-button-text-color: $color-charcoal5 !default;
-$radio-button-checked-bg-color: $color-white !default;
-$radio-button-checked-border-color: $color-charcoal1 !default;
-$radio-button-checked-border-width: 1px !default;
-$radio-button-checked-box-shadow: none !default;
-$radio-button-checked-font-weight: normal !default;
-$radio-button-checked-text-color: $radio-button-text-color !default;
-$radio-button-hover-bg-color: $color-white !default;
-$radio-button-hover-border-color: $color-charcoal1 !default;
-$radio-button-hover-border-width: 1px !default;
-$radio-button-hover-text-color: $radio-button-text-color !default;
-$radio-button-font-size: 16px !default;
-$radio-button-font-weight: 400 !default;
-$radio-button-line-height: 1.19 !default;
-$radio-button-margin: 0 0 10px !default;
-$radio-button-min-height: 48px !default;
-$radio-button-padding: 15px 16px 15px 40px !default;
-$radio-button-error-color: $color-red5 !default;
-
-$radio-button-select-background-color: $color-white !default;
-$radio-button-select-border: 1px solid $color-charcoal1 !default;
-$radio-button-select-box-shadow: inset 0 1px 3px 0 rgba($color-black, .1) !default;
-$radio-button-select-checked-background-color: $primary-color !default;
-$radio-button-select-checked-border-color: $radio-button-select-checked-background-color !default;
-$radio-button-select-checked-box-shadow: inset 0 1px 3px 0 rgba($color-black, .1) !default;
-$radio-button-select-size: 20px !default;
-$radio-button-select-top-position: 16px !default;
-$radio-button-select-left-position: 13px !default;
-$radio-button-select-inner-color: $color-white !default;
-$radio-button-select-inner-size: 10px !default;
-$radio-button-select-inner-top-position: 4px !default;
-$radio-button-select-inner-left-position: $radio-button-select-inner-top-position !default;
-
-$radio-border-transition: border-color .15s ease-in-out !default;
-
-$radio-checkmark-bg-color: $color-white !default;
-$radio-checkmark-border-color: rgba($color-black, .1) !default;
-$radio-checkmark-border-width: 2px !default;
-$radio-checkmark-border-radius: 3px !default;
-$radio-checkmark-checked-bg-color: $color-white !default;
-$radio-checkmark-checked-border-color: $primary-color !default;
-$radio-checkmark-checked-text-color: $radio-button-checked-text-color !default;
-$radio-checkmark-content: '\e920' !default;
-$radio-checkmark-font-family: modicons-fill !default;
-$radio-checkmark-margin: 0 0 15px !default;
-$radio-checkmark-padding: 15px 40px !default;
-$radio-checkmark-icon-color: $radio-checkmark-checked-border-color !default;
-
-$radio-group-border-color: $radio-button-border-color !default;
-$radio-group-border-width: 1px !default;
-$radio-group-border-radius: 3px !default;
-$radio-group-box-shadow: 0 2px 4px 0 rgba($color-black, .1) !default;
-$radio-group-tile-font-size: 14px !default;
-$radio-group-tile-height: 70px !default;
-$radio-group-tile-text-color: #8A8A8A !default;
-$radio-group-tile-checked-bg: $primary-color !default;
-$radio-group-tile-checked-border: 1px solid #58929B !default;
-$radio-group-tile-checked-box-shadow: inset 0 0 5px 0 rgba($color-black, .25) !default;
-$radio-group-tile-checked-font-weight: 700 !default;
-$radio-group-tile-checked-text-color: $color-white !default;
-$radio-group-tile-hover-bg: $color-ivory2 !default;
-$radio-group-tile-hover-text-color: $color-charcoal5 !default;
-
-$radio-icon-checked-border-color: $primary-color !default;
-$radio-icon-border-radius: $radio-button-border-radius !default;
-$radio-icon-checked-border-width: 3px !default;
-$radio-icon-height: 135px !default;
-$radio-icon-margin: 0 3px 10px 0 !default;
-$radio-icon-margin-mobile: 0 3px 5px 0 !default;
-$radio-icon-width: 32% !default;
-
-$radio-bg-checked-border-color: $primary-color !default;
-$radio-bg-border-radius: 5px !default;
-$radio-bg-default-bg-color: $color-charcoal2 !default;
-$radio-bg-height: 77px !default;
-$radio-bg-margin: 5px 4px 13px !default;
-$radio-bg-margin-mobile: 5px 4px !default;
-$radio-bg-width: calc(31% - 5px) !default;
-
-$radio-qs-bg-color: $color-white !default;
-$radio-qs-border-color: $qs-primary-color !default;
-$radio-qs-border-width: 1px !default;
-$radio-qs-border-radius: 3px !default;
-$radio-qs-text-color: $qs-primary-color !default;
-$radio-qs-checked-bg-color: $qs-primary-color !default;
-$radio-qs-checked-border-color: $qs-primary-color !default;
-$radio-qs-checked-text-color: $color-white !default;
-$radio-qs-hover-bg-color: $qs-primary-color !default;
-$radio-qs-hover-border-color: $qs-primary-color !default;
-$radio-qs-hover-text-color: $color-white !default;
-$radio-qs-font-size: 18px !default;
-$radio-qs-font-size-mobile: 14px !default;
-$radio-qs-line-height: 1.3 !default;
-$radio-qs-margin: 0 0 15px !default;
-$radio-qs-min-height: 67px !default;
-$radio-qs-min-height-mobile: 57px !default;
-$radio-qs-padding: 5px 40px !default;
-
-.radio {
-	margin: $radio-button-wrapper-margin;
-	overflow: hidden;
-
-	&__button {
-		font-size: $radio-button-font-size;
-		margin: $radio-button-margin;
-		min-height: $radio-button-min-height;
-
-		label {
-			font-weight: $radio-button-font-weight;
-			line-height: $radio-button-line-height;
-			padding: $radio-button-padding;
-			position: relative;
-
-			input[type=radio]{
-
-				+ span {
-					background-color: $radio-button-select-background-color;
-					border: $radio-button-select-border;
-					border-radius: 50%;
-					box-shadow: $radio-button-select-box-shadow;
-					display: block;
-					height: $radio-button-select-size;
-					left: $radio-button-select-left-position;
-					position: absolute;
-					top: $radio-button-select-top-position;
-					width: $radio-button-select-size;
-				}
-
-				&:checked + span { // sass-lint:disable-line
-					background-color: $radio-button-select-checked-background-color;
-					border-color: $radio-button-select-checked-border-color;
-					box-shadow: $radio-button-select-checked-box-shadow;
-
-					&:empty {
-						transition: all .15s ease-in-out;
-					}
-
-					&:after {
-						background: $radio-button-select-inner-color;
-						height: $radio-button-select-inner-size;
-						left: $radio-button-select-inner-left-position;
-						top: $radio-button-select-inner-top-position;
-						width: $radio-button-select-inner-size;
-					}
-
-					+ span {
-						color: $radio-button-checked-text-color;
-						font-weight: $radio-button-checked-font-weight;
-
-						&::before {
-							background-color: $radio-button-checked-bg-color;
-							border: $radio-button-checked-border-width solid $radio-button-checked-border-color;
-							box-shadow: $radio-button-checked-box-shadow;
-						}
-					}
-				}
-			}
-
-			&:hover {
-				input:not(:checked) + span + .radio__button-text { // sass-lint:disable-line
-					color: $radio-button-hover-text-color;
-					&::before {
-						background-color: $radio-button-hover-bg-color;
-						border: $radio-button-hover-border-width solid $radio-button-hover-border-color;
-					}
-				}
-			}
-		}
-
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
-
-	&__button-text {
-		color: $radio-button-text-color;
-		transition: all .15s ease;
-
-		&::before {
-			background-color: $radio-button-bg-color;
-			border: $radio-button-border-width solid $radio-button-border-color;
-			border-radius: $radio-button-border-radius;
-			content: '';
-			height: 100%;
-			left: 0;
-			position: absolute;
-			top: 0;
-			transition: all .15s ease;
-			width: 100%;
-			z-index: -1;
-		}
-	}
-
-	&__custom-select {
-		&:empty {
-			display: none;
-		}
-	}
-
-	&--checkmark,
-	&--group,
-	&--icon,
-	&--backgroundImage,
-	&--qsRadio {
-		.radio__button label input[type=radio] { // sass-lint:disable-line
-			+ span {
-				background: none;
-				border: 0;
-				border-radius: 0;
-				box-shadow: none;
-				display: block;
-				height: auto;
-				left: 0;
-				position: unset;
-				text-align: center;
-				top: unset;
-				width: auto;
-			}
-
-			&:checked {
-				+ span {
-					background: none;
-					border: 0;
-				}
-			}
-		}
-	}
-
-	&--checkmark {
-		.radio__button {
-			border: 0;
-			margin: $radio-checkmark-margin;
-
-			label {
-				padding: $radio-checkmark-padding;
-				position: relative;
-
-				input[type=radio] {
-					+ span {
-						&::before {
-							background-color: transparent;
-							border: 0;
-							border-radius: 0;
-							box-shadow: none;
-							color: $radio-checkmark-icon-color;
-							content: $radio-checkmark-content;
-							font-family: $radio-checkmark-font-family !important;
-							font-size: 16px;
-							font-style: normal;
-							font-variant: normal;
-							font-weight: 400;
-							height: auto;
-							left: auto;
-							line-height: 16px;
-							opacity: 0;
-							right: 15px;
-							text-transform: none;
-							top: 50%;
-							transform: translateY(-50%);
-							transition: opacity ease .15s;
-							width: auto;
-							z-index: 1;
-						}
-
-						&::after {
-							background-color: $radio-checkmark-bg-color;
-							border: $radio-checkmark-border-width solid $radio-checkmark-border-color;
-							border-radius: $radio-checkmark-border-radius;
-							height: 100%;
-							left: 0;
-							opacity: 1;
-							position: absolute;
-							top: 0;
-							transition: $radio-border-transition;
-							width: 100%;
-							z-index: -1;
-						}
-					}
-
-					&:checked {
-						+ span {
-							color: $radio-checkmark-checked-text-color;
-
-							&::before {
-								opacity: 1;
-							}
-
-							&::after {
-								background-color: $radio-checkmark-checked-bg-color;
-								border-color: $radio-checkmark-checked-border-color;
-							}
-						}
-					}
-
-					&:hover {
-						+ span {
-							color: $radio-button-hover-text-color;
-
-							&::after {
-								background-color: $radio-button-hover-bg-color;
-								border-color: $radio-button-hover-border-color;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-
-	&--backgroundImage,
-	&--group,
-	&--icon {
-		overflow: hidden;
-		user-select: none;
-
-		.radio__button {
-			border-radius: $radio-icon-border-radius;
-			display: inline-flex;
-			flex-direction: column;
-			justify-content: center;
-			margin: $radio-icon-margin;
-			position: relative;
-			text-align: center;
-			vertical-align: top;
-			width: $radio-icon-width;
-
-			label {
-				cursor: pointer;
-				line-height: 1;
-				margin-bottom: 0;
-				padding: 0;
-				width: 100%;
-
-				input[type=radio] {
-
-					+ span {
-						&::before,
-						&::after {
-							display: none;
-						}
-					}
-				}
-			}
-
-			&-text {
-				&::before {
-					display: none;
-				}
-			}
-		}
-	}
-
-	&--group {
-		border: $radio-group-border-width solid $radio-group-border-color;
-		border-radius: $radio-group-border-radius;
-		box-shadow: $radio-group-box-shadow;
-		display: flex;
-
-		.radio__button {
-			border: 0;
-			border-radius: 0;
-			height: $radio-group-tile-height;
-			margin: 0;
-			width: 100%;
-
-			label {
-				height: 100%;
-				min-height: 0;
-
-				input[type=radio] {
-					+ span {
-						align-items: center;
-						color: $radio-group-tile-text-color;
-						display: flex;
-						font-size: $radio-group-tile-font-size;
-						font-weight: normal;
-						height: 100%;
-						justify-content: center;
-						transition: all .15s linear;
-					}
-
-					&:checked {
-						+ span {
-							background-color: $radio-group-tile-checked-bg;
-							border: $radio-group-tile-checked-border;
-							box-shadow: $radio-group-tile-checked-box-shadow;
-							color: $radio-group-tile-checked-text-color;
-							font-weight: $radio-group-tile-checked-font-weight;
-						}
-					}
-				}
-
-				&:hover {
-					input[type=radio]:not(:checked) + span { // sass-lint:disable-line
-						background-color: $radio-group-tile-hover-bg;
-						color: $radio-group-tile-hover-text-color;
-					}
-				}
-			}
-
-			~ .radio__button {
-				border-left: $radio-group-border-width solid $radio-group-border-color;
-			}
-		}
-	}
-
-	&--icon {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-
-		.radio__button {
-			border: 0;
-			height: $radio-icon-height;
-			line-height: 12px;
-			position: relative;
-
-			label {
-				display: inline-flex;
-				flex-direction: column;
-				height: 100%;
-				justify-content: center;
-
-				input[type=radio]:checked + .tile .tile__text::before { // sass-lint:disable-line
-					border: $radio-icon-checked-border-width solid $radio-icon-checked-border-color;
-				}
-			}
-		}
-	}
-
-	&--backgroundImage {
-		padding: 0 1px;
-
-		.radio__button {
-			background-color: $radio-bg-default-bg-color;
-			border-radius: $radio-bg-border-radius;
-			height: $radio-bg-height;
-			margin: $radio-bg-margin;
-			width: $radio-bg-width;
-
-			input:checked {
-				+ .tile .tile__background-image {
-					&::before {
-						border-color: $radio-bg-checked-border-color;
-					}
-				}
-			}
-
-			label {
-				align-items: center;
-				display: flex;
-				height: 100%;
-				justify-content: center;
-			}
-		}
-	}
-
-	&--qsRadio {
-		.radio__button {
-			border: 0;
-			font-size: $radio-qs-font-size;
-			margin: $radio-qs-margin;
-			min-height: $radio-qs-min-height;
-
-			label {
-				align-items: center;
-				display: flex;
-				justify-content: center;
-				min-height: inherit;
-				padding: $radio-qs-padding;
-				position: relative;
-
-				input[type=radio] {
-					+ span {
-						color: $radio-qs-text-color;
-						line-height: $radio-qs-line-height;
-
-						&::before {
-							background-color: $radio-qs-bg-color;
-							border: $radio-qs-border-width solid $radio-qs-border-color;
-							border-radius: $radio-qs-border-radius;
-							height: 100%;
-							left: 0;
-							opacity: 1;
-							position: absolute;
-							top: 0;
-							transition: all .15s ease-in-out;
-							width: 100%;
-							z-index: -1;
-						}
-
-						&::after {
-							display: none;
-						}
-					}
-
-					&:checked {
-						+ span {
-							color: $radio-qs-checked-text-color;
-							&::before {
-								background-color: $radio-qs-checked-bg-color;
-								border-color: $radio-qs-checked-border-color;
-							}
-						}
-					}
-
-					&:hover {
-						+ span {
-							color: $radio-qs-hover-text-color;
-							&::before {
-								background-color: $radio-qs-hover-bg-color;
-								border-color: $radio-qs-hover-border-color;
-							}
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-.has-error, .has-error label:hover { // sass-lint:disable-line
-	input:not(:checked) + span + .radio__button-text { // sass-lint:disable-line
-		color: $radio-button-error-color;
-
-		&::before {
-			border-color: $radio-button-error-color;
-		}
-	}
-}
-
-@include breakpoint-phone {
-	.radio {
-		&--backgroundImage {
-			.radio__button {
-				margin: $radio-bg-margin-mobile;
-			}
-		}
-		&--qsRadio {
-			.radio__button {
-				font-size: $radio-qs-font-size-mobile;
-				min-height: $radio-qs-min-height-mobile;
-			}
-		}
-	}
-}

package/src/shared-components/radio-button/radio-button.html

@@ -1,25 +0,0 @@
-<div class="radio{{#if this.field.radioOptionType}} radio--{{this.field.radioOptionType}}{{/if}}">
-	{{#each this.field.options}}
-		<div class="radio__button{{#if this.class}} {{this.class}}{{/if}}"{{#if this.includeDataInputFor}} data-input-for="{{this.value}}"{{/if}}>
-			<label for="{{#if this.id}}{{this.id}}{{/if}}{{#unless this.id}}{{../this.field.name}}-{{x 'this.text.replace(/[^a-zA-Z ]/g, "").replace(/\s+/g, "-").toLowerCase();'}}{{/unless}}">
-				<input id="{{#if this.id}}{{this.id}}{{/if}}{{#unless this.id}}{{../this.field.name}}-{{x 'this.text.replace(/[^a-zA-Z ]/g, "").replace(/\s+/g, "-").toLowerCase();'}}{{/unless}}" type="radio" name="{{../this.field.name}}" value="{{this.value}}" {{#unless ../this.field.isOptional}}data-required="nonempty"{{/unless}} {{#if this.checked}}checked="checked"{{/if}}{{#if this.extraAttributes}}{{#each this.extraAttributes}} {{{this.attributeName}}}="{{{this.attributeValue}}}"{{/each}}{{/if}}{{#if this.localSvgSpriteIconUrl}} data-icon="{{this.localSvgSpriteIconUrl}}"{{/if}}{{#if this.includeDataName}} data-name="{{this.text}}"{{/if}}{{#if this.projectscope}} data-projectscope="{{this.projectscope}}"{{/if}} />
-				{{#unless ../this.field.radioOptionType}}
-					<span class="radio__button-select"></span>
-				{{/unless}}
-				{{#xif "this.backgroundImageUrl || this.imageIconUrl || this.svgSpriteIconUrl || this.localSVGPath || this.localSvgSpriteIconUrl || this.localImageIconUrl"}}
-					{{fileInclude 'src/shared-components/tile/tile.html'
-						field = this
-					}}
-				{{else}}
-					{{#if this.stylizedFontGraphic}}
-						<span class="radio__button-stylized-font">{{{this.stylizedFontGraphic}}}</span>
-					{{/if}}
-					<span class="radio__button-text">{{{this.text}}}</span>
-					{{#if ../this.field.radioOptionType}}
-						<span class="radio__custom-select"></span>
-					{{/if}}
-				{{/xif}}
-			</label>
-		</div>
-	{{/each}}
-</div>

package/src/shared-components/reviews/_reviews.scss

@@ -1,79 +0,0 @@
-$reviews-card-background: #FFF !default;
-$reviews-card-border: 1px solid $color-charcoal1 !default;
-$reviews-card-border-radius: 6px !default;
-$reviews-card-box-shadow: 0 8px 16px 0 rgba(#000, .1) !default;
-$reviews-card-min-height: 270px !default;
-$reviews-card-min-height-tablet: 335px !default;
-$reviews-card-min-height-desktop: 290px !default;
-$reviews-card-padding: 50px 25px 30px !default;
-$reviews-card-text-align: center !default;
-
-$reviews-avatar-border-radius: 100px !default;
-$reviews-avatar-height: 73px !default;
-$reviews-avatar-top-position: -40px !default;
-$reviews-avatar-width: $reviews-avatar-height !default;
-
-$reviews-review-font-size: 16px !default;
-$reviews-review-font-style: italic !default;
-$reviews-review-margin: 15px 0 !default;
-$reviews-review-text-align: left !default;
-
-$reviews-author-bottom-position: 25px !default;
-
-
-.reviews-card {
-	background: $reviews-card-background;
-	border: $reviews-card-border;
-	border-radius: $reviews-card-border-radius;
-	box-shadow: $reviews-card-box-shadow;
-	min-height: $reviews-card-min-height;
-	padding: $reviews-card-padding;
-	position: relative;
-	text-align: $reviews-card-text-align;
-
-	&__avatar {
-		border-radius: $reviews-avatar-border-radius;
-		height: $reviews-avatar-height;
-		left: 50%;
-		position: absolute;
-		top: $reviews-avatar-top-position;
-		transform: translate(-50%);
-		width: $reviews-avatar-width;
-
-		img {
-			border-radius: $reviews-avatar-border-radius;
-			height: 100%;
-			width: 100%;
-		}
-	}
-
-	&__review {
-		font-size: $reviews-review-font-size;
-		font-style: $reviews-review-font-style;
-		margin: $reviews-review-margin;
-		text-align: $reviews-review-text-align;
-	}
-
-	&__author {
-		bottom: $reviews-author-bottom-position;
-		left: 50%;
-		position: absolute;
-		transform: translate(-50%);
-
-		b {
-			display: block;
-		}
-	}
-}
-
-@include breakpoint-sm {
-	.reviews-card {
-		min-height: $reviews-card-min-height-tablet;
-	}
-}
-
-@include breakpoint-md {
-	.reviews-card {
-		min-height: $reviews-card-min-height-desktop;
-	}
-}

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

@@ -1,27 +0,0 @@
-{{#each this.items}}
-<li class="swiper-slide reviews-card {{#if ../this.classModifier}}{{../this.classModifier}}{{/if}}">
-	{{#if this.avatar}}
-		<picture class="reviews-card__avatar">
-			<source data-srcset="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/images/avatars/people/{{this.avatar}}.webp" type="image/webp">
-			<img data-src="https://{{x 'process.env.NODE_ENV'}}/quote/resources/assets/images/avatars/people/{{this.avatar}}.jpg" class="swiper-lazy">
-		</picture>
-	{{/if}}
-	<div class="swiper-lazy-preloader"></div>
-	<span class="star-rating star-rating--sm">
-		<span class="star-rating__stars star-rating__stars--{{this.starRating}}"></span>
-	</span>
-	{{#if this.excludeQuotes}}
-		<div class="reviews-card__review">{{{this.reviewText}}}</div>
-	{{else}}
-		<div class="reviews-card__review">"{{{this.reviewText}}}"</div>
-	{{/if}}
-	<div class="reviews-card__author">
-		<b>{{this.authorName}}</b>
-		{{#if this.useGeoLocation}}
-			<span class="user-location">{{this.location}}</span>
-		{{else}}
-			{{this.location}}
-		{{/if}}
-	</div>
-</li>
-{{/each}}