@configura/web-ui 2.1.0-alpha.1 → 2.1.0-alpha.3

package/dist/scss/_forms.scss

@@ -1,44 +1,44 @@
-@mixin classes($borderColor) {
-	.cfgInput,
-	.cfgFormSelect {
-		border: 0.1em solid $borderColor;
-		padding: 0.3em 0.4em;
-		border-radius: 0.3em;
-		color: inherit;
-	}
-
-	.cfgFormSelect {
-		select {
-			appearance: none;
-			padding: 0 1em 0 0;
-			margin: 0;
-			width: 100%;
-
-			background-color: transparent;
-			font-family: inherit;
-			font-size: inherit;
-			font-weight: inherit;
-			color: inherit;
-			cursor: inherit;
-			line-height: inherit;
-			outline: none;
-			border: none;
-		}
-
-		cursor: pointer;
-		position: relative;
-
-		&::after {
-			position: absolute;
-			right: 0.35em;
-			top: 50%;
-			margin-top: -0.55em;
-			content: "";
-			width: 1em;
-			height: 1em;
-			background-color: $borderColor;
-			clip-path: polygon(50% 80%, 90% 40%, 100% 50%, 50% 100%, 0 50%, 10% 40%);
-			justify-self: end;
-		}
-	}
-}
+@mixin classes($borderColor) {
+	.cfgInput,
+	.cfgFormSelect {
+		border: 0.1em solid $borderColor;
+		padding: 0.3em 0.4em;
+		border-radius: 0.3em;
+		color: inherit;
+	}
+
+	.cfgFormSelect {
+		select {
+			appearance: none;
+			padding: 0 1em 0 0;
+			margin: 0;
+			width: 100%;
+
+			background-color: transparent;
+			font-family: inherit;
+			font-size: inherit;
+			font-weight: inherit;
+			color: inherit;
+			cursor: inherit;
+			line-height: inherit;
+			outline: none;
+			border: none;
+		}
+
+		cursor: pointer;
+		position: relative;
+
+		&::after {
+			position: absolute;
+			right: 0.35em;
+			top: 50%;
+			margin-top: -0.55em;
+			content: "";
+			width: 1em;
+			height: 1em;
+			background-color: $borderColor;
+			clip-path: polygon(50% 80%, 90% 40%, 100% 50%, 50% 100%, 0 50%, 10% 40%);
+			justify-self: end;
+		}
+	}
+}

package/dist/scss/_hr.scss

@@ -1,16 +1,16 @@
-@use "mixins";
-
-@mixin styles($color) {
-	@include mixins.cfgRootStyles;
-	border: 0;
-	border-bottom: 0.1em solid $color;
-	padding: 0;
-	margin: 0;
-}
-
-@mixin classes($color) {
-	.cfgHr {
-		@include styles($color);
-		@content;
-	}
-}
+@use "mixins";
+
+@mixin styles($color) {
+	@include mixins.cfgRootStyles;
+	border: 0;
+	border-bottom: 0.1em solid $color;
+	padding: 0;
+	margin: 0;
+}
+
+@mixin classes($color) {
+	.cfgHr {
+		@include styles($color);
+		@content;
+	}
+}

package/dist/scss/_loading.scss

@@ -1,98 +1,98 @@
-/**
- * Web UI Loading
- */
-
-@use "mixins";
-
-@mixin classes(
-	$textColor,
-	$spinnerColor1,
-	$spinnerColor2,
-	$overlayBackgroundColor,
-	$overlayingZIndex
-) {
-	.cfgCenteredLoading {
-		@include mixins.cfgRootStyles;
-		align-items: center;
-		display: flex;
-		flex-direction: column;
-		height: 100%;
-		justify-content: center;
-		width: 100%;
-	}
-
-	.cfgOverlayLoading {
-		@include mixins.cfgRootStyles;
-
-		align-items: center;
-		background-color: $overlayBackgroundColor;
-		bottom: 0;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		left: 0;
-		position: absolute;
-		right: 0;
-		top: 0;
-		z-index: $overlayingZIndex;
-
-		&--clickThrough {
-			background-color: transparent;
-			pointer-events: none;
-
-			.cfgLoadingWithText {
-				padding: 2em 2em 1.8em;
-				border-radius: 0.8em;
-				background-color: $overlayBackgroundColor;
-				opacity: 0.8;
-				border: 0.1em solid $spinnerColor2;
-			}
-		}
-
-		&--fullWindow {
-			position: fixed;
-			z-index: #{$overlayingZIndex + 1};
-		}
-	}
-
-	.cfgLoadingWithText {
-		@include mixins.cfgRootStyles;
-		@include mixins.cfgDefaultFont;
-
-		text-align: center;
-
-		&__text {
-			color: $textColor;
-			font-weight: 600;
-			margin-top: 0.5em;
-			font-size: 1.6em;
-		}
-	}
-
-	.cfgLoading {
-		@include mixins.cfgRootStyles;
-
-		animation: rotate 1.1s linear 0s infinite;
-		border-radius: 100%;
-		border: 0.5em solid $spinnerColor2;
-		border-bottom-color: $spinnerColor1;
-		display: inline-block;
-		height: 3em;
-		width: 3em;
-
-		&--small {
-			border-width: 0.4em;
-			height: 2em;
-			width: 2em;
-		}
-	}
-
-	@keyframes rotate {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-}
+/**
+ * Web UI Loading
+ */
+
+@use "mixins";
+
+@mixin classes(
+	$textColor,
+	$spinnerColor1,
+	$spinnerColor2,
+	$overlayBackgroundColor,
+	$overlayingZIndex
+) {
+	.cfgCenteredLoading {
+		@include mixins.cfgRootStyles;
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		height: 100%;
+		justify-content: center;
+		width: 100%;
+	}
+
+	.cfgOverlayLoading {
+		@include mixins.cfgRootStyles;
+
+		align-items: center;
+		background-color: $overlayBackgroundColor;
+		bottom: 0;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		left: 0;
+		position: absolute;
+		right: 0;
+		top: 0;
+		z-index: $overlayingZIndex;
+
+		&--clickThrough {
+			background-color: transparent;
+			pointer-events: none;
+
+			.cfgLoadingWithText {
+				padding: 2em 2em 1.8em;
+				border-radius: 0.8em;
+				background-color: $overlayBackgroundColor;
+				opacity: 0.8;
+				border: 0.1em solid $spinnerColor2;
+			}
+		}
+
+		&--fullWindow {
+			position: fixed;
+			z-index: #{$overlayingZIndex + 1};
+		}
+	}
+
+	.cfgLoadingWithText {
+		@include mixins.cfgRootStyles;
+		@include mixins.cfgDefaultFont;
+
+		text-align: center;
+
+		&__text {
+			color: $textColor;
+			font-weight: 600;
+			margin-top: 0.5em;
+			font-size: 1.6em;
+		}
+	}
+
+	.cfgLoading {
+		@include mixins.cfgRootStyles;
+
+		animation: rotate 1.1s linear 0s infinite;
+		border-radius: 100%;
+		border: 0.5em solid $spinnerColor2;
+		border-bottom-color: $spinnerColor1;
+		display: inline-block;
+		height: 3em;
+		width: 3em;
+
+		&--small {
+			border-width: 0.4em;
+			height: 2em;
+			width: 2em;
+		}
+	}
+
+	@keyframes rotate {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+}

package/dist/scss/_misc-file-and-note.scss

@@ -1,44 +1,44 @@
-@use "mixins";
-
-@mixin classes($grayTextColor, $linkColor) {
-	.cfgMiscFiles,
-	.cfgNotes {
-		list-style: none;
-		margin: 0;
-		padding: 0;
-	}
-
-	.cfgMiscFiles {
-		&__item {
-			display: flex;
-			align-items: center;
-			margin-top: 1em;
-			margin-bottom: 1em;
-		}
-
-		&__link {
-			display: block;
-
-			color: $linkColor;
-			font-size: 1.4em;
-			font-weight: 600;
-		}
-	}
-
-	.cfgNotes {
-		&__item:not(:last-child) {
-			margin-bottom: -0.5em;
-		}
-
-		&__body {
-			white-space: pre-wrap;
-			overflow: hidden;
-
-			color: $grayTextColor;
-			font-size: 1.5em;
-
-			margin-bottom: 1em;
-			margin-right: 3em;
-		}
-	}
-}
+@use "mixins";
+
+@mixin classes($grayTextColor, $linkColor) {
+	.cfgMiscFiles,
+	.cfgNotes {
+		list-style: none;
+		margin: 0;
+		padding: 0;
+	}
+
+	.cfgMiscFiles {
+		&__item {
+			display: flex;
+			align-items: center;
+			margin-top: 1em;
+			margin-bottom: 1em;
+		}
+
+		&__link {
+			display: block;
+
+			color: $linkColor;
+			font-size: 1.4em;
+			font-weight: 600;
+		}
+	}
+
+	.cfgNotes {
+		&__item:not(:last-child) {
+			margin-bottom: -0.5em;
+		}
+
+		&__body {
+			white-space: pre-wrap;
+			overflow: hidden;
+
+			color: $grayTextColor;
+			font-size: 1.5em;
+
+			margin-bottom: 1em;
+			margin-right: 3em;
+		}
+	}
+}

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,53 +1,53 @@
-/**
- * Web UI Product information
- */
-
-@use "sass:math";
-@use "mixins";
-
-@mixin classes($textColor) {
-	.cfgProductInfo {
-		@include mixins.cfgRootStyles;
-
-		color: $textColor;
-
-		display: flex;
-
-		&__left {
-			flex: 1 1 auto;
-			min-width: 0;
-			overflow: hidden;
-		}
-
-		&__right {
-			align-items: flex-end;
-			display: flex;
-			flex-direction: column;
-			flex: 1 0 auto;
-			margin-left: 1em;
-			max-width: 0.333333333;
-			min-width: 0;
-		}
-
-		&__name {
-			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;
-		}
-
-		@content;
-	}
-}
+/**
+ * Web UI Product information
+ */
+
+@use "sass:math";
+@use "mixins";
+
+@mixin classes($textColor) {
+	.cfgProductInfo {
+		@include mixins.cfgRootStyles;
+
+		color: $textColor;
+
+		display: flex;
+
+		&__left {
+			flex: 1 1 auto;
+			min-width: 0;
+			overflow: hidden;
+		}
+
+		&__right {
+			align-items: flex-end;
+			display: flex;
+			flex-direction: column;
+			flex: 1 0 auto;
+			margin-left: 1em;
+			max-width: 0.333333333;
+			min-width: 0;
+		}
+
+		&__name {
+			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;
+		}
+
+		@content;
+	}
+}