@clayui/css 3.38.0 → 3.41.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.
@@ -596,13 +653,13 @@ textarea.form-control-sm,
 	.form-row {
 		display: flex;
 		flex-wrap: wrap;
-		margin-left: math-sign($form-grid-gutter-width / 2);
-		margin-right: math-sign($form-grid-gutter-width / 2);
+		margin-left: math-sign($form-grid-gutter-width * 0.5);
+		margin-right: math-sign($form-grid-gutter-width * 0.5);
 
 		> .col,
 		> [class*='col-'] {
-			padding-left: $form-grid-gutter-width / 2;
-			padding-right: $form-grid-gutter-width / 2;
+			padding-left: $form-grid-gutter-width * 0.5;
+			padding-right: $form-grid-gutter-width * 0.5;
 		}
 	}
 
@@ -737,7 +794,7 @@ textarea.form-control-sm,
 	> .form-group-item:not(:last-child) {
 		@include media-breakpoint-up(sm) {
 			margin-bottom: 0;
-			margin-right: $grid-gutter-width / 2;
+			margin-right: $grid-gutter-width * 0.5;
 		}
 	}
 

package/src/scss/components/_grid.scss

@@ -4,8 +4,8 @@
 	.container {
 		margin-left: auto;
 		margin-right: auto;
-		padding-left: $grid-gutter-width / 2;
-		padding-right: $grid-gutter-width / 2;
+		padding-left: $grid-gutter-width * 0.5;
+		padding-right: $grid-gutter-width * 0.5;
 		width: 100%;
 
 		@each $breakpoint, $container-max-width in $container-max-widths {
@@ -20,8 +20,8 @@
 	%container-fluid {
 		margin-left: auto;
 		margin-right: auto;
-		padding-left: $grid-gutter-width / 2;
-		padding-right: $grid-gutter-width / 2;
+		padding-left: $grid-gutter-width * 0.5;
+		padding-right: $grid-gutter-width * 0.5;
 		width: 100%;
 	}
 
@@ -61,8 +61,8 @@
 	.row {
 		display: flex;
 		flex-wrap: wrap;
-		margin-left: math-sign($grid-gutter-width / 2);
-		margin-right: math-sign($grid-gutter-width / 2);
+		margin-left: math-sign($grid-gutter-width * 0.5);
+		margin-right: math-sign($grid-gutter-width * 0.5);
 	}
 
 	// Remove the negative margin from default .row, then the horizontal padding
@@ -84,8 +84,8 @@
 
 @if $enable-grid-classes {
 	%grid-column {
-		padding-left: $grid-gutter-width / 2;
-		padding-right: $grid-gutter-width / 2;
+		padding-left: $grid-gutter-width * 0.5;
+		padding-right: $grid-gutter-width * 0.5;
 		position: relative;
 		width: 100%;
 	}
@@ -118,8 +118,8 @@
 			@for $i from 1 through $grid-row-columns {
 				.row-cols#{$infix}-#{$i} {
 					& > * {
-						flex: 0 0 100% / $i;
-						max-width: 100% / $i;
+						flex: 0 0 calc(100% / #{$i});
+						max-width: calc(100% / #{$i});
 					}
 				}
 			}
@@ -132,13 +132,13 @@
 
 			@for $i from 1 through $grid-columns {
 				.col#{$infix}-#{$i} {
-					flex: 0 0 percentage($i / $grid-columns);
+					flex: 0 0 calc(#{$i} / #{$grid-columns} * 100%);
 
 					// Add a `max-width` to ensure content within each column does not blow out
 					// the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
 					// do not appear to require this.
 
-					max-width: percentage($i / $grid-columns);
+					max-width: calc(#{$i} / #{$grid-columns} * 100%);
 				}
 			}
 
@@ -162,9 +162,7 @@
 
 				@if not($infix == '' and $i == 0) {
 					.offset#{$infix}-#{$i} {
-						$num: $i / $grid-columns;
-
-						margin-left: if($num == 0, 0, percentage($num));
+						margin-left: calc(#{$i} / #{$grid-columns} * 100%);
 					}
 				}
 			}
@@ -211,8 +209,8 @@
 
 		.container &,
 		.container-fluid & {
-			margin-left: -($grid-gutter-width / 2);
-			margin-right: -($grid-gutter-width / 2);
+			margin-left: math-sign($grid-gutter-width * 0.5);
+			margin-right: math-sign($grid-gutter-width * 0.5);
 		}
 	}
 

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/_images.scss

@@ -34,7 +34,7 @@
 
 .figure-img {
 	line-height: 1;
-	margin-bottom: $spacer / 2;
+	margin-bottom: $spacer * 0.5;
 }
 
 .figure-caption {

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/_jumbotron.scss

@@ -6,7 +6,7 @@
 
 		color: $jumbotron-color;
 		margin-bottom: $jumbotron-padding;
-		padding: $jumbotron-padding ($jumbotron-padding / 2);
+		padding: $jumbotron-padding ($jumbotron-padding * 0.5);
 
 		@include media-breakpoint-up(sm) {
 			padding: ($jumbotron-padding * 2) $jumbotron-padding;