@configura/web-ui 2.2.0-alpha.1 → 2.2.0-alpha.2

package/dist/scss/_mixins.scss

@@ -1,56 +1,56 @@
-@mixin noButtonLook {
-	appearance: none;
-	font-family: inherit;
-	font-size: inherit;
-	color: inherit;
-	background: none;
-	border: none;
-	padding: 0;
-}
-
-@mixin focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor) {
-	box-shadow: 0 0 0 0.075em $focusOutlineInnerColor, 0 0 0 0.2em $focusOutlineOuterColor;
-}
-
-@mixin borderBox {
-	box-sizing: border-box;
-	&:before,
-	&:after {
-		box-sizing: inherit;
-	}
-}
-
-@mixin cfgRootStyles {
-	@include borderBox;
-
-	* {
-		@include borderBox;
-	}
-}
-
-@mixin cfgDefaultFont {
-	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
-		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-}
-
-@mixin cfgCheckAndRadio($color) {
-	align-items: center;
-	border: 0.2em solid $color;
-	display: flex;
-	flex: 0 0 auto;
-	height: 2.2em;
-	justify-content: center;
-	pointer-events: none;
-	user-select: none;
-	width: 2.2em;
-}
-
-@mixin cfgCheckbox($color) {
-	@include cfgCheckAndRadio($color);
-	border-radius: 0.3em;
-}
-
-@mixin cfgRadio($color) {
-	@include cfgCheckAndRadio($color);
-	border-radius: 50%;
-}
+@mixin noButtonLook {
+	appearance: none;
+	font-family: inherit;
+	font-size: inherit;
+	color: inherit;
+	background: none;
+	border: none;
+	padding: 0;
+}
+
+@mixin focusOutline($focusOutlineInnerColor, $focusOutlineOuterColor) {
+	box-shadow: 0 0 0 0.075em $focusOutlineInnerColor, 0 0 0 0.2em $focusOutlineOuterColor;
+}
+
+@mixin borderBox {
+	box-sizing: border-box;
+	&:before,
+	&:after {
+		box-sizing: inherit;
+	}
+}
+
+@mixin cfgRootStyles {
+	@include borderBox;
+
+	* {
+		@include borderBox;
+	}
+}
+
+@mixin cfgDefaultFont {
+	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif,
+		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+@mixin cfgCheckAndRadio($color) {
+	align-items: center;
+	border: 0.2em solid $color;
+	display: flex;
+	flex: 0 0 auto;
+	height: 2.2em;
+	justify-content: center;
+	pointer-events: none;
+	user-select: none;
+	width: 2.2em;
+}
+
+@mixin cfgCheckbox($color) {
+	@include cfgCheckAndRadio($color);
+	border-radius: 0.3em;
+}
+
+@mixin cfgRadio($color) {
+	@include cfgCheckAndRadio($color);
+	border-radius: 50%;
+}

package/dist/scss/_option-tree.scss

@@ -1,29 +1,29 @@
-/**
- * Web UI Option tree
- */
-
-@use "mixins";
-
-@mixin classes {
-	.cfgOptionTree {
-		@include mixins.cfgRootStyles;
-
-		list-style: none;
-		margin: 0;
-		padding: 0;
-
-		&--topLevel {
-			padding-left: 1.7em;
-		}
-
-		&--indent {
-			margin-left: 3.2em;
-		}
-
-		&--compThumb {
-			margin-left: 4.2em;
-		}
-
-		@content;
-	}
-}
+/**
+ * Web UI Option tree
+ */
+
+@use "mixins";
+
+@mixin classes {
+	.cfgOptionTree {
+		@include mixins.cfgRootStyles;
+
+		list-style: none;
+		margin: 0;
+		padding: 0;
+
+		&--topLevel {
+			padding-left: 1.7em;
+		}
+
+		&--indent {
+			margin-left: 3.2em;
+		}
+
+		&--compThumb {
+			margin-left: 4.2em;
+		}
+
+		@content;
+	}
+}

package/dist/scss/_product-information.scss

@@ -1,63 +1,63 @@
-/**
- * Web UI Product information
- */
-
-@use "sass:math";
-@use "mixins";
-
-@mixin classes($textColor) {
-	.cfgProductInfo {
-		@include mixins.cfgRootStyles;
-
-		color: $textColor;
-
-		display: flex;
-		flex-direction: column;
-
-		&__top {
-			display: flex;
-			flex-direction: column;
-			flex: 1 1 auto;
-			min-width: 0;
-			overflow: hidden;
-
-			&--description {
-				display: flex;
-				justify-content: space-between;
-			}
-		}
-
-		&__bottom {
-			display: flex;
-			flex-direction: row;
-			flex: 1 0 auto;
-			align-items: center;
-			justify-content: flex-end;
-			max-width: 0.333333333;
-			min-width: 0;
-		}
-
-		&__name,
-		&__price {
-			display: block;
-			font-size: 1.6em;
-			font-weight: 600;
-			line-height: 1.33;
-			margin: 0;
-		}
-
-		&__number {
-			font-size: 1.3em;
-			font-weight: 400;
-			line-height: 1.38;
-			margin: 0;
-		}
-
-		&__taskbar {
-			display: flex;
-			gap: 5px;
-		}
-
-		@content;
-	}
-}
+/**
+ * Web UI Product information
+ */
+
+@use "sass:math";
+@use "mixins";
+
+@mixin classes($textColor) {
+	.cfgProductInfo {
+		@include mixins.cfgRootStyles;
+
+		color: $textColor;
+
+		display: flex;
+		flex-direction: column;
+
+		&__top {
+			display: flex;
+			flex-direction: column;
+			flex: 1 1 auto;
+			min-width: 0;
+			overflow: hidden;
+
+			&--description {
+				display: flex;
+				justify-content: space-between;
+			}
+		}
+
+		&__bottom {
+			display: flex;
+			flex-direction: row;
+			flex: 1 0 auto;
+			align-items: center;
+			justify-content: flex-end;
+			max-width: 0.333333333;
+			min-width: 0;
+		}
+
+		&__name,
+		&__price {
+			display: block;
+			font-size: 1.6em;
+			font-weight: 600;
+			line-height: 1.33;
+			margin: 0;
+		}
+
+		&__number {
+			font-size: 1.3em;
+			font-weight: 400;
+			line-height: 1.38;
+			margin: 0;
+		}
+
+		&__taskbar {
+			display: flex;
+			gap: 5px;
+		}
+
+		@content;
+	}
+}

package/dist/scss/_range-view.scss

@@ -1,39 +1,39 @@
-@mixin classes($errorColor) {
-	.cfgRangeView {
-		&__inputs {
-			display: flex;
-			align-items: center;
-		}
-
-		&__number-input {
-			font-size: 1.5em;
-			flex-grow: 1;
-			text-align: right;
-		}
-
-		&__unit-label {
-			font-size: 1.5em;
-			margin-left: 0.3em;
-		}
-
-		&__slider-input.cfgSlider {
-			margin-left: 1em;
-			flex-grow: 3;
-		}
-
-		&__error {
-			display: flex;
-			align-items: center;
-
-			margin-top: 1em;
-			font-size: 1.5em;
-			color: $errorColor;
-
-			.cfgErrorIcon {
-				padding-right: 0.25em;
-				width: 1.25em;
-				height: 1em;
-			}
-		}
-	}
-}
+@mixin classes($errorColor) {
+	.cfgRangeView {
+		&__inputs {
+			display: flex;
+			align-items: center;
+		}
+
+		&__number-input {
+			font-size: 1.5em;
+			flex-grow: 1;
+			text-align: right;
+		}
+
+		&__unit-label {
+			font-size: 1.5em;
+			margin-left: 0.3em;
+		}
+
+		&__slider-input.cfgSlider {
+			margin-left: 1em;
+			flex-grow: 3;
+		}
+
+		&__error {
+			display: flex;
+			align-items: center;
+
+			margin-top: 1em;
+			font-size: 1.5em;
+			color: $errorColor;
+
+			.cfgErrorIcon {
+				padding-right: 0.25em;
+				width: 1.25em;
+				height: 1em;
+			}
+		}
+	}
+}

package/dist/scss/_slider.scss

@@ -1,70 +1,70 @@
-@use "mixins";
-
-// The origins of this SCSS file is here:
-// https://css-tricks.com/sliding-nightmare-understanding-range-input/
-
-$trackHeight: 0.2em !default;
-$thumbDiameter: 2.8em !default;
-
-@mixin track($trackColor) {
-	box-sizing: border-box;
-	border: none;
-	height: $trackHeight;
-	background: $trackColor;
-}
-
-@mixin thumb($thumbColor, $thumbShadowColor) {
-	box-sizing: border-box;
-	border: none;
-	width: $thumbDiameter;
-	height: $thumbDiameter;
-	border-radius: 50%;
-	background: $thumbColor;
-	box-shadow: 0 0.15em 0.45em 0.05em $thumbShadowColor;
-}
-
-@mixin classes($trackColor, $thumbColor, $thumbShadowColor) {
-	.cfgSlider {
-		@include mixins.cfgRootStyles;
-
-		&,
-		&::-webkit-slider-thumb {
-			-webkit-appearance: none;
-		}
-
-		flex: 1;
-		margin: 0;
-		padding: 0;
-		min-height: $thumbDiameter;
-		background: transparent;
-		font: inherit;
-
-		&::-webkit-slider-runnable-track {
-			@include track($trackColor);
-		}
-		&::-moz-range-track {
-			@include track($trackColor);
-		}
-		&::-ms-track {
-			@include track($trackColor);
-		}
-
-		&::-webkit-slider-thumb {
-			margin-top: 0.5 * ($trackHeight - $thumbDiameter);
-			@include thumb($thumbColor, $thumbShadowColor);
-		}
-		&::-moz-range-thumb {
-			@include thumb($thumbColor, $thumbShadowColor);
-		}
-		&::-ms-thumb {
-			margin-top: 0;
-			@include thumb($thumbColor, $thumbShadowColor);
-		}
-
-		&::-ms-tooltip {
-			display: none;
-		}
-
-		@content;
-	}
-}
+@use "mixins";
+
+// The origins of this SCSS file is here:
+// https://css-tricks.com/sliding-nightmare-understanding-range-input/
+
+$trackHeight: 0.2em !default;
+$thumbDiameter: 2.8em !default;
+
+@mixin track($trackColor) {
+	box-sizing: border-box;
+	border: none;
+	height: $trackHeight;
+	background: $trackColor;
+}
+
+@mixin thumb($thumbColor, $thumbShadowColor) {
+	box-sizing: border-box;
+	border: none;
+	width: $thumbDiameter;
+	height: $thumbDiameter;
+	border-radius: 50%;
+	background: $thumbColor;
+	box-shadow: 0 0.15em 0.45em 0.05em $thumbShadowColor;
+}
+
+@mixin classes($trackColor, $thumbColor, $thumbShadowColor) {
+	.cfgSlider {
+		@include mixins.cfgRootStyles;
+
+		&,
+		&::-webkit-slider-thumb {
+			-webkit-appearance: none;
+		}
+
+		flex: 1;
+		margin: 0;
+		padding: 0;
+		min-height: $thumbDiameter;
+		background: transparent;
+		font: inherit;
+
+		&::-webkit-slider-runnable-track {
+			@include track($trackColor);
+		}
+		&::-moz-range-track {
+			@include track($trackColor);
+		}
+		&::-ms-track {
+			@include track($trackColor);
+		}
+
+		&::-webkit-slider-thumb {
+			margin-top: 0.5 * ($trackHeight - $thumbDiameter);
+			@include thumb($thumbColor, $thumbShadowColor);
+		}
+		&::-moz-range-thumb {
+			@include thumb($thumbColor, $thumbShadowColor);
+		}
+		&::-ms-thumb {
+			margin-top: 0;
+			@include thumb($thumbColor, $thumbShadowColor);
+		}
+
+		&::-ms-tooltip {
+			display: none;
+		}
+
+		@content;
+	}
+}

package/dist/scss/_tasks.scss

@@ -1,72 +1,72 @@
-@use "mixins";
-
-@mixin classes($borderColor, $linkColor) {
-	$preview-size: 4.8em;
-	$line-width: 0.1em;
-	$icon-size: 2em;
-
-	.cfgTaskList {
-		ul {
-			list-style-type: none;
-			padding: 0;
-			margin: 1em 0 0 0;
-			border-bottom: 0.1em solid $borderColor;
-		}
-
-		&__item {
-			padding: 0 1.5em 0 1.7em;
-			margin-bottom: 1em;
-			display: flex;
-			align-items: center;
-		}
-
-		&__preview {
-			border: 0.1em solid $borderColor;
-			border-radius: 10%;
-			width: $preview-size;
-			height: $preview-size;
-			flex-shrink: 0;
-
-			img {
-				object-fit: cover;
-				position: relative;
-				left: 0.1 * $preview-size - $line-width;
-				top: 0.1 * $preview-size - $line-width;
-				width: 0.8 * $preview-size;
-				height: 0.8 * $preview-size;
-			}
-		}
-
-		&__icon {
-			flex-shrink: 0;
-			width: $icon-size + 2em;
-			height: $icon-size;
-			padding-left: 1em;
-			padding-right: 1em;
-
-			.cfgLoadingSizer {
-				font-size: 0.75em;
-			}
-		}
-
-		&__status {
-			flex-grow: 1;
-			font-size: 1.5em;
-		}
-
-		&__abort {
-			@include mixins.noButtonLook;
-			cursor: pointer;
-			width: $icon-size;
-			height: $icon-size;
-			flex-shrink: 0;
-		}
-
-		&__restart {
-			@include mixins.noButtonLook;
-			cursor: pointer;
-			text-decoration: underline;
-			color: $linkColor;
-		}
-	}
-}
+@use "mixins";
+
+@mixin classes($borderColor, $linkColor) {
+	$preview-size: 4.8em;
+	$line-width: 0.1em;
+	$icon-size: 2em;
+
+	.cfgTaskList {
+		ul {
+			list-style-type: none;
+			padding: 0;
+			margin: 1em 0 0 0;
+			border-bottom: 0.1em solid $borderColor;
+		}
+
+		&__item {
+			padding: 0 1.5em 0 1.7em;
+			margin-bottom: 1em;
+			display: flex;
+			align-items: center;
+		}
+
+		&__preview {
+			border: 0.1em solid $borderColor;
+			border-radius: 10%;
+			width: $preview-size;
+			height: $preview-size;
+			flex-shrink: 0;
+
+			img {
+				object-fit: cover;
+				position: relative;
+				left: 0.1 * $preview-size - $line-width;
+				top: 0.1 * $preview-size - $line-width;
+				width: 0.8 * $preview-size;
+				height: 0.8 * $preview-size;
+			}
+		}
+
+		&__icon {
+			flex-shrink: 0;
+			width: $icon-size + 2em;
+			height: $icon-size;
+			padding-left: 1em;
+			padding-right: 1em;
+
+			.cfgLoadingSizer {
+				font-size: 0.75em;
+			}
+		}
+
+		&__status {
+			flex-grow: 1;
+			font-size: 1.5em;
+		}
+
+		&__abort {
+			@include mixins.noButtonLook;
+			cursor: pointer;
+			width: $icon-size;
+			height: $icon-size;
+			flex-shrink: 0;
+		}
+
+		&__restart {
+			@include mixins.noButtonLook;
+			cursor: pointer;
+			text-decoration: underline;
+			color: $linkColor;
+		}
+	}
+}