@clayui/css 3.39.0 → 3.42.0

package/src/scss/components/_form-validation.scss

@@ -25,33 +25,23 @@
 // Form Feedback
 
 .form-feedback-group {
-	width: 100%;
-	word-wrap: break-word;
+	@include clay-css($form-feedback-group);
 }
 
 .form-feedback-item {
-	font-size: $form-feedback-font-size;
-	font-weight: $form-feedback-font-weight;
-	margin-top: $form-feedback-margin-top;
-	word-wrap: break-word;
+	@include clay-css($form-feedback-item);
 }
 
 .form-feedback-indicator {
-	margin-left: $form-feedback-indicator-margin-x;
-	margin-right: $form-feedback-indicator-margin-x;
+	@include clay-css($form-feedback-indicator);
 
 	&:first-child {
-		margin-left: 0;
+		@include clay-css(map-get($form-feedback-indicator, first-child));
 	}
 }
 
 .form-text {
-	color: $form-text-color;
-	display: block;
-	font-size: $form-text-font-size;
-	font-weight: $form-text-font-weight;
-	margin-top: $form-text-margin-top;
-	word-wrap: break-word;
+	@include clay-css($form-text);
 }
 
 @if ($enable-bs4-deprecated) {
@@ -89,232 +79,13 @@
 // Non HTML5 Form Validator
 
 .has-error {
-	label {
-		color: $input-danger-label-color;
-	}
-
-	.custom-control-label,
-	.form-check-label {
-		color: $input-danger-checkbox-label-color;
-	}
-
-	.form-control {
-		@include clay-form-control-variant($input-danger);
-	}
-
-	.form-control[readonly] {
-		@include clay-form-control-variant($input-danger-readonly);
-	}
-
-	.form-feedback-item {
-		color: $form-feedback-invalid-color;
-	}
-
-	select.form-control {
-		@include clay-select-variant($input-danger-select);
-
-		&[size] {
-			@include clay-select-variant($input-danger-select-size);
-		}
-
-		&[multiple] {
-			@include clay-select-variant($input-danger-select-multiple);
-		}
-	}
-
-	.input-group-item {
-		&.focus {
-			box-shadow: setter(
-				$input-danger-focus-box-shadow,
-				$input-danger-box-shadow
-			);
-
-			.form-control,
-			.input-group-inset-item {
-				background-color: setter(
-					$input-danger-focus-bg,
-					$input-danger-bg
-				);
-				border-color: setter(
-					$input-danger-focus-border-color,
-					$input-danger-border-color
-				);
-			}
-		}
-
-		.input-group-inset:focus {
-			box-shadow: none;
-
-			~ .input-group-inset-item {
-				background-color: setter(
-					$input-danger-focus-bg,
-					$input-danger-bg
-				);
-				border-color: setter(
-					$input-danger-focus-border-color,
-					$input-danger-border-color
-				);
-			}
-		}
-	}
-
-	.input-group .input-group-inset-item {
-		background-color: $input-danger-bg;
-		border-color: $input-danger-border-color;
-		box-shadow: $input-danger-box-shadow;
-	}
+	@include clay-form-validation-variant($has-error);
 }
 
 .has-warning {
-	label {
-		color: $input-warning-label-color;
-	}
-
-	.custom-control-label,
-	.form-check-label {
-		color: $input-warning-checkbox-label-color;
-	}
-
-	.form-control {
-		@include clay-form-control-variant($input-warning);
-	}
-
-	.form-control[readonly] {
-		@include clay-form-control-variant($input-warning-readonly);
-	}
-
-	.form-feedback-item {
-		color: $form-feedback-warning-color;
-	}
-
-	select.form-control {
-		@include clay-select-variant($input-warning-select);
-
-		&[size] {
-			@include clay-select-variant($input-warning-select-size);
-		}
-
-		&[multiple] {
-			@include clay-select-variant($input-warning-select-multiple);
-		}
-	}
-
-	.input-group-item {
-		&.focus {
-			box-shadow: setter(
-				$input-warning-focus-box-shadow,
-				$input-warning-box-shadow
-			);
-
-			.form-control,
-			.input-group-inset-item {
-				background-color: setter(
-					$input-warning-focus-bg,
-					$input-warning-bg
-				);
-				border-color: setter(
-					$input-warning-focus-border-color,
-					$input-warning-border-color
-				);
-			}
-		}
-
-		.input-group-inset:focus {
-			box-shadow: none;
-
-			~ .input-group-inset-item {
-				background-color: setter(
-					$input-warning-focus-bg,
-					$input-warning-bg
-				);
-				border-color: setter(
-					$input-warning-focus-border-color,
-					$input-warning-border-color
-				);
-			}
-		}
-	}
-
-	.input-group .input-group-inset-item {
-		background-color: $input-warning-bg;
-		border-color: $input-warning-border-color;
-		box-shadow: $input-warning-box-shadow;
-	}
+	@include clay-form-validation-variant($has-warning);
 }
 
 .has-success {
-	label {
-		color: $input-success-label-color;
-	}
-
-	.custom-control-label,
-	.form-check-label {
-		color: $input-success-checkbox-label-color;
-	}
-
-	.form-control {
-		@include clay-form-control-variant($input-success);
-	}
-
-	.form-control[readonly] {
-		@include clay-form-control-variant($input-success-readonly);
-	}
-
-	.form-feedback-item {
-		color: $form-feedback-valid-color;
-	}
-
-	select.form-control {
-		@include clay-select-variant($input-success-select);
-
-		&[size] {
-			@include clay-select-variant($input-success-select-size);
-		}
-
-		&[multiple] {
-			@include clay-select-variant($input-success-select-multiple);
-		}
-	}
-
-	.input-group-item {
-		&.focus {
-			box-shadow: setter(
-				$input-success-focus-box-shadow,
-				$input-success-box-shadow
-			);
-
-			.form-control,
-			.input-group-inset-item {
-				background-color: setter(
-					$input-success-focus-bg,
-					$input-success-bg
-				);
-				border-color: setter(
-					$input-success-focus-border-color,
-					$input-success-border-color
-				);
-			}
-		}
-
-		.input-group-inset:focus {
-			box-shadow: none;
-
-			~ .input-group-inset-item {
-				background-color: setter(
-					$input-success-focus-bg,
-					$input-success-bg
-				);
-				border-color: setter(
-					$input-success-focus-border-color,
-					$input-success-border-color
-				);
-			}
-		}
-	}
-
-	.input-group .input-group-inset-item {
-		background-color: $input-success-bg;
-		border-color: $input-success-border-color;
-		box-shadow: $input-success-box-shadow;
-	}
+	@include clay-form-validation-variant($has-success);
 }

package/src/scss/components/_forms.scss

@@ -18,10 +18,6 @@
 	}
 }
 
-fieldset {
-	word-wrap: break-word;
-}
-
 label {
 	@include clay-css($input-label);
 
@@ -551,6 +547,67 @@ textarea.form-control-sm,
 	height: $input-textarea-height-sm;
 }
 
+// Fieldset
+
+.form-fieldset {
+	@include clay-css($form-fieldset);
+
+	&[disabled] {
+		@include clay-css(setter(map-get($form-fieldset, disabled), ()));
+
+		label {
+			@include clay-css(
+				setter(map-deep-get($form-fieldset, disabled, label), ())
+			);
+
+			.form-control {
+				@include clay-css(
+					setter(
+						map-deep-get(
+							$form-fieldset,
+							disabled,
+							label,
+							form-control
+						),
+						()
+					)
+				);
+			}
+		}
+
+		.form-control-label-text {
+			@include clay-css(
+				setter(
+					map-deep-get(
+						$form-fieldset,
+						disabled,
+						form-control-label-text
+					),
+					()
+				)
+			);
+		}
+
+		.form-legend {
+			@include clay-css(
+				setter(map-deep-get($form-fieldset, disabled, form-legend), ())
+			);
+		}
+
+		.form-control {
+			@include clay-css(
+				setter(map-deep-get($form-fieldset, disabled, form-control), ())
+			);
+		}
+	}
+}
+
+// Legend
+
+.form-legend {
+	@include clay-css($form-legend);
+}
+
 // Form groups
 // Designed to help with the organization and spacing of vertical forms. For
 // horizontal forms, use the predefined grid classes.

package/src/scss/components/_icons.scss

@@ -1,22 +1,17 @@
 .lexicon-icon {
-	display: inline-block;
-	fill: currentColor;
-	height: $lexicon-icon-size;
-	margin-top: -3px;
-	vertical-align: middle;
-	width: $lexicon-icon-size;
+	@include clay-css(setter($lexicon-icon, ()));
 }
 
 .lexicon-icon-sm {
-	font-size: $lexicon-icon-sm-font-size;
+	@include clay-css(setter($lexicon-icon-sm, ()));
 }
 
 .lexicon-icon-lg {
-	font-size: $lexicon-icon-lg-font-size;
+	@include clay-css(setter($lexicon-icon-lg, ()));
 }
 
 .lexicon-icon-xl {
-	font-size: $lexicon-icon-xl-font-size;
+	@include clay-css(setter($lexicon-icon-xl, ()));
 }
 
 .order-arrow-down-active {

package/src/scss/components/_input-groups.scss

@@ -99,19 +99,8 @@
 	> .input-group-text + .btn {
 		margin-left: math-sign($input-border-width);
 	}
-}
-
-// Input Group
-
-.input-group {
-	align-items: stretch;
-	display: flex;
-	flex-wrap: wrap;
-	position: relative;
-	width: 100%;
 
 	.btn {
-		position: relative;
 		z-index: 1;
 
 		&:hover {
@@ -119,10 +108,24 @@
 		}
 	}
 
-	.btn:focus,
-	.form-control:focus {
-		z-index: $zindex-input-group-focus;
+	.btn,
+	.form-control {
+		position: relative;
+
+		&:focus {
+			z-index: $zindex-input-group-focus;
+		}
 	}
+}
+
+// Input Group
+
+.input-group {
+	align-items: stretch;
+	display: flex;
+	flex-wrap: wrap;
+	position: relative;
+	width: 100%;
 
 	.btn-unstyled {
 		color: inherit;

package/src/scss/components/_multi-step-nav.scss

@@ -10,8 +10,9 @@
 
 .multi-step-indicator-label-bottom {
 	.multi-step-item {
-		padding-bottom: $multi-step-indicator-label-font-size *
-			$line-height-base;
+		padding-bottom: calc(
+			#{$multi-step-indicator-label-font-size} * #{$line-height-base}
+		);
 	}
 
 	.multi-step-indicator-label {
@@ -21,17 +22,19 @@
 
 .multi-step-indicator-label-top {
 	.multi-step-item {
-		padding-top: $multi-step-indicator-label-font-size * $line-height-base;
+		padding-top: calc(
+			#{$multi-step-indicator-label-font-size} * #{$line-height-base}
+		);
 	}
 
 	.multi-step-indicator-label {
-		bottom: $multi-step-icon-size + $multi-step-divider-height;
+		bottom: calc(#{$multi-step-icon-size} + #{$multi-step-divider-height});
 	}
 }
 
 .multi-step-title-center {
 	.multi-step-title {
-		margin-left: $multi-step-icon-size * 0.5;
+		margin-left: calc(#{$multi-step-icon-size} * 0.5);
 		max-width: $multi-step-title-max-width;
 		overflow: hidden;
 		position: relative;
@@ -337,9 +340,10 @@
 		.multi-step-item {
 			margin-bottom: 0;
 			min-width: $multi-step-icon-size;
-			padding-top: $multi-step-title-font-size +
-				$multi-step-title-margin-bottom +
-				($multi-step-divider-height * 0.5);
+			padding-top: calc(
+				#{$multi-step-title-font-size} + #{$multi-step-title-margin-bottom} +
+					(#{$multi-step-divider-height} * 0.5)
+			);
 		}
 
 		.multi-step-title {