@configura/web-ui 1.1.1-alpha.0 → 1.1.1

package/dist/scss/_configurator.scss

@@ -1,67 +1,67 @@
-/**
- * Web UI Configurator
- */
-
-@use "mixins";
-
-@mixin classes($fontSize, $textColor, $headerUnderlineColor) {
-	.cfgConfigurator {
-		@include mixins.cfgRootStyles;
-		@include mixins.cfgDefaultFont;
-		font-size: $fontSize;
-		color: $textColor;
-		min-width: 0;
-	}
-
-	.cfgConfiguratorHeader {
-		border-bottom: 0.1em solid $headerUnderlineColor;
-		padding: 1.7em 1.7em 1.9em;
-		position: relative;
-
-		&__actions {
-			margin-top: 1em;
-		}
-	}
-
-	.cfgConfiguratorTree {
-		padding-top: 1em;
-	}
-
-	.cfgCanvasWrapper {
-		@include mixins.cfgRootStyles;
-		position: relative;
-		height: 50rem;
-		user-select: none;
-
-		& canvas {
-			outline: none;
-		}
-	}
-
-	.cfgConfiguratorWrapper {
-		@include mixins.cfgRootStyles;
-		color: $textColor;
-		height: 100%;
-		width: 100%;
-	}
-
-	@media screen and (orientation: landscape) {
-		.cfgConfiguratorWrapper {
-			display: flex;
-			flex-direction: row;
-
-			& > .cfgConfigurator {
-				flex: 0 1 40%;
-				height: 100%;
-			}
-
-			& .cfgCanvasWrapper {
-				flex: 0 1 60%;
-				height: 85vh;
-				overflow: hidden;
-				position: sticky;
-				top: 0;
-			}
-		}
-	}
-}
+/**
+ * Web UI Configurator
+ */
+
+@use "mixins";
+
+@mixin classes($fontSize, $textColor, $headerUnderlineColor) {
+	.cfgConfigurator {
+		@include mixins.cfgRootStyles;
+		@include mixins.cfgDefaultFont;
+		font-size: $fontSize;
+		color: $textColor;
+		min-width: 0;
+	}
+
+	.cfgConfiguratorHeader {
+		border-bottom: 0.1em solid $headerUnderlineColor;
+		padding: 1.7em 1.7em 1.9em;
+		position: relative;
+
+		&__actions {
+			margin-top: 1em;
+		}
+	}
+
+	.cfgConfiguratorTree {
+		padding-top: 1em;
+	}
+
+	.cfgCanvasWrapper {
+		@include mixins.cfgRootStyles;
+		position: relative;
+		height: 50rem;
+		user-select: none;
+
+		& canvas {
+			outline: none;
+		}
+	}
+
+	.cfgConfiguratorWrapper {
+		@include mixins.cfgRootStyles;
+		color: $textColor;
+		height: 100%;
+		width: 100%;
+	}
+
+	@media screen and (orientation: landscape) {
+		.cfgConfiguratorWrapper {
+			display: flex;
+			flex-direction: row;
+
+			& > .cfgConfigurator {
+				flex: 0 1 40%;
+				height: 100%;
+			}
+
+			& .cfgCanvasWrapper {
+				flex: 0 1 60%;
+				height: 85vh;
+				overflow: hidden;
+				position: sticky;
+				top: 0;
+			}
+		}
+	}
+}

package/dist/scss/_expandable.scss

@@ -1,37 +1,37 @@
-@use "mixins";
-
-@mixin classes {
-	.cfgExpandableHeadingRow {
-		@include mixins.cfgRootStyles;
-		@include mixins.noButtonLook;
-		align-items: stretch;
-		display: flex;
-		height: 3.9em;
-		outline: 0;
-		position: relative;
-		width: 100%;
-
-		&--expandable {
-			cursor: pointer;
-		}
-
-		&__title {
-			align-items: center;
-			display: flex;
-			flex: 1 1 auto;
-			font-size: 1.5em;
-			font-weight: 500;
-			justify-content: flex-start;
-		}
-
-		&__icon {
-			align-items: center;
-			display: flex;
-			flex: 0 0 5em;
-			justify-content: center;
-			padding: 0 1.5em;
-		}
-
-		@content;
-	}
-}
+@use "mixins";
+
+@mixin classes {
+	.cfgExpandableHeadingRow {
+		@include mixins.cfgRootStyles;
+		@include mixins.noButtonLook;
+		align-items: stretch;
+		display: flex;
+		height: 3.9em;
+		outline: 0;
+		position: relative;
+		width: 100%;
+
+		&--expandable {
+			cursor: pointer;
+		}
+
+		&__title {
+			align-items: center;
+			display: flex;
+			flex: 1 1 auto;
+			font-size: 1.5em;
+			font-weight: 500;
+			justify-content: flex-start;
+		}
+
+		&__icon {
+			align-items: center;
+			display: flex;
+			flex: 0 0 5em;
+			justify-content: center;
+			padding: 0 1.5em;
+		}
+
+		@content;
+	}
+}

package/dist/scss/_feature-item.scss

@@ -1,124 +1,124 @@
-/**
- * Web UI Feature item
- */
-
-@use "mixins";
-
-@mixin classes(
-	$textColor,
-	$grayTextColor,
-	$checkButtonUncheckedColor,
-	$checkButtonCheckedColor,
-	$focusOutlineInnerColor,
-	$focusOutlineOuterColor
-) {
-	.cfgThumbnailImage {
-		border-radius: 0.7em;
-		display: inline-block;
-		height: 3em;
-		width: 3em;
-	}
-
-	.cfgThumbnailPlaceholder {
-		align-items: center;
-		display: flex;
-		flex: 0 0 4.2em;
-		justify-content: flex-start;
-	}
-
-	.cfgFeatureItem {
-		@include mixins.cfgRootStyles;
-
-		color: $textColor;
-
-		&__dropdown {
-			@include mixins.noButtonLook;
-			align-items: stretch;
-			display: flex;
-			height: 3.9em;
-			outline: 0;
-			position: relative;
-			width: 100%;
-			cursor: pointer;
-		}
-
-		&--optional {
-			margin-top: 1em;
-		}
-
-		&__hiddenInput {
-			left: -99999px;
-			opacity: 0;
-			position: absolute;
-			z-index: -1;
-		}
-
-		&__radio {
-			@include mixins.cfgRadio($checkButtonUncheckedColor);
-		}
-
-		&__checkbox {
-			@include mixins.cfgCheckbox($checkButtonUncheckedColor);
-		}
-
-		/* The &-syntax brings in the entire path, so the second part of this rule must be explicit */
-
-		&__hiddenInput:focus ~ .cfgFeatureItem__radio,
-		&__hiddenInput:focus ~ .cfgFeatureItem__checkbox {
-			@include mixins.focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor);
-		}
-
-		&__hiddenInput:checked ~ .cfgFeatureItem__radio {
-			@include mixins.cfgRadio($checkButtonCheckedColor);
-		}
-		&__hiddenInput:checked ~ .cfgFeatureItem__checkbox {
-			@include mixins.cfgCheckbox($checkButtonCheckedColor);
-		}
-	}
-
-	.cfgFeatureItemOptional__titleWrapper,
-	.cfgFeatureItemOption__titleWrapper {
-		flex: 1 1 auto;
-		margin-left: 1em;
-	}
-
-	.cfgFeatureItemOptional__title,
-	.cfgFeatureItemOption__title {
-		font-size: 1.5em;
-	}
-
-	.cfgFeatureItemOption__price {
-		font-weight: 600;
-		font-size: 0.75em;
-		color: $grayTextColor;
-	}
-
-	.cfgOptionTree--subLevel .cfgFeatureItem__hr {
-		display: none;
-	}
-
-	.cfgFeatureItemOption {
-		align-items: center;
-		display: flex;
-	}
-
-	.cfgFeatureItemOptional {
-		align-items: center;
-		display: flex;
-		justify-content: center;
-		margin-top: 0.5em;
-
-		&__header {
-			font-size: 1.2em;
-			font-weight: 600;
-			margin: 0 0 0.3em 0;
-			padding: 0;
-			text-transform: uppercase;
-		}
-	}
-
-	/* The last themathic break (hr) we move under the next thematic break so it appears as one */
-	.cfgAdditionalProduct .cfgFeatureItem:last-child .cfgFeatureItem__hr {
-		margin-bottom: -0.1em;
-	}
-}
+/**
+ * Web UI Feature item
+ */
+
+@use "mixins";
+
+@mixin classes(
+	$textColor,
+	$grayTextColor,
+	$checkButtonUncheckedColor,
+	$checkButtonCheckedColor,
+	$focusOutlineInnerColor,
+	$focusOutlineOuterColor
+) {
+	.cfgThumbnailImage {
+		border-radius: 0.7em;
+		display: inline-block;
+		height: 3em;
+		width: 3em;
+	}
+
+	.cfgThumbnailPlaceholder {
+		align-items: center;
+		display: flex;
+		flex: 0 0 4.2em;
+		justify-content: flex-start;
+	}
+
+	.cfgFeatureItem {
+		@include mixins.cfgRootStyles;
+
+		color: $textColor;
+
+		&__dropdown {
+			@include mixins.noButtonLook;
+			align-items: stretch;
+			display: flex;
+			height: 3.9em;
+			outline: 0;
+			position: relative;
+			width: 100%;
+			cursor: pointer;
+		}
+
+		&--optional {
+			margin-top: 1em;
+		}
+
+		&__hiddenInput {
+			left: -99999px;
+			opacity: 0;
+			position: absolute;
+			z-index: -1;
+		}
+
+		&__radio {
+			@include mixins.cfgRadio($checkButtonUncheckedColor);
+		}
+
+		&__checkbox {
+			@include mixins.cfgCheckbox($checkButtonUncheckedColor);
+		}
+
+		/* The &-syntax brings in the entire path, so the second part of this rule must be explicit */
+
+		&__hiddenInput:focus ~ .cfgFeatureItem__radio,
+		&__hiddenInput:focus ~ .cfgFeatureItem__checkbox {
+			@include mixins.focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor);
+		}
+
+		&__hiddenInput:checked ~ .cfgFeatureItem__radio {
+			@include mixins.cfgRadio($checkButtonCheckedColor);
+		}
+		&__hiddenInput:checked ~ .cfgFeatureItem__checkbox {
+			@include mixins.cfgCheckbox($checkButtonCheckedColor);
+		}
+	}
+
+	.cfgFeatureItemOptional__titleWrapper,
+	.cfgFeatureItemOption__titleWrapper {
+		flex: 1 1 auto;
+		margin-left: 1em;
+	}
+
+	.cfgFeatureItemOptional__title,
+	.cfgFeatureItemOption__title {
+		font-size: 1.5em;
+	}
+
+	.cfgFeatureItemOption__price {
+		font-weight: 600;
+		font-size: 0.75em;
+		color: $grayTextColor;
+	}
+
+	.cfgOptionTree--subLevel .cfgFeatureItem__hr {
+		display: none;
+	}
+
+	.cfgFeatureItemOption {
+		align-items: center;
+		display: flex;
+	}
+
+	.cfgFeatureItemOptional {
+		align-items: center;
+		display: flex;
+		justify-content: center;
+		margin-top: 0.5em;
+
+		&__header {
+			font-size: 1.2em;
+			font-weight: 600;
+			margin: 0 0 0.3em 0;
+			padding: 0;
+			text-transform: uppercase;
+		}
+	}
+
+	/* The last themathic break (hr) we move under the next thematic break so it appears as one */
+	.cfgAdditionalProduct .cfgFeatureItem:last-child .cfgFeatureItem__hr {
+		margin-bottom: -0.1em;
+	}
+}