@clayui/css 3.38.0 → 3.41.0

package/src/scss/mixins/_forms.scss

@@ -532,18 +532,62 @@
 /// A mixin to create Select Form Control variants. You can base your variant off Bootstrap's `select.form-control` selector or create your own base class (e.g., `<select class="form-control my-custom-form-control"></select>` or `<select class="my-custom-form-control"></select>`).
 /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
 /// @example
-/// See Mixin `clay-css` for available keys to pass into the base selector
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// select.form-control
+/// 	hover: (
+/// 		// select.form-control:hover
+/// 		option: (
+/// 			// select.form-control:hover > option
+/// 			checked: (
+/// 				// select.form-control:hover > option:checked
+/// 			),
+/// 		),
+/// 	),
+/// 	focus: (
+/// 		// select.form-control:focus,
+/// 		// select.form-control.focus
+/// 		option: (
+/// 			// select.form-control:focus > option,
+/// 			// select.form-control.focus > option
+/// 			checked: (
+/// 				// select.form-control:focus > option:checked,
+/// 				// select.form-control.focus > option:checked
+/// 			),
+/// 		),
+/// 	),
+/// 	disabled: (
+/// 		// select.form-control:disabled,
+/// 		// select.form-control.disabled
+/// 		option: (
+/// 			// select.form-control:disabled > option,
+/// 			// select.form-control.disabled > option
+/// 			checked: (
+/// 				// select.form-control:disabled > option:checked,
+/// 				// select.form-control.disabled > option:checked
+/// 			),
+/// 		),
+/// 	),
+/// 	option: (
+/// 		// select.form-control option
+/// 		checked: (
+/// 			// select.form-control option:checked
+/// 		),
+/// 	),
+/// 	firefox-only: (
+/// 		// Same selectors as above scoped only for firefox browsers
+/// 	),
+/// )
+/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
 /// hover-bg: {Color | String | Null}, // deprecated after 3.7.0
 /// hover-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
 /// hover-box-shadow: {String | List | Null}, // deprecated after 3.7.0
 /// hover-color: {Color | String | Null}, // deprecated after 3.7.0
-/// hover: {Map | Null}, // See Mixin `clay-css` for available keys
 /// focus-bg: {Color | String | Null}, // deprecated after 3.7.0
 /// focus-bg-image: {String | List | Null}, // deprecated after 3.7.0
 /// focus-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
 /// focus-box-shadow: {String | List | Null}, // deprecated after 3.7.0
 /// focus-color: {Color | String | Null}, // deprecated after 3.7.0
-/// focus: {Map | Null}, // See Mixin `clay-css` for available keys
 /// disabled-bg: {Color | String | Null}, // deprecated after 3.7.0
 /// disabled-bg-image: {String | List | Null}, // deprecated after 3.7.0
 /// disabled-border-color: {Color | String | List | Null}, // deprecated after 3.7.0
@@ -551,7 +595,6 @@
 /// disabled-color: {Color | String | Null}, // deprecated after 3.7.0
 /// disabled-cursor: {String | Null}, // deprecated after 3.7.0
 /// disabled-opacity: {Number | String | Null}, // deprecated after 3.7.0
-/// disabled: {Map | Null}, // See Mixin `clay-css` for available keys
 /// @todo
 /// - Add @example
 /// - Add @link to documentation
@@ -702,11 +745,27 @@
 
 		&:hover {
 			@include clay-css($hover);
+
+			> option {
+				@include clay-css(map-get($hover, option));
+
+				&:checked {
+					@include clay-css(map-deep-get($hover, option, checked));
+				}
+			}
 		}
 
 		&:focus,
 		&.focus {
 			@include clay-css($focus);
+
+			> option {
+				@include clay-css(map-get($focus, option));
+
+				&:checked {
+					@include clay-css(map-deep-get($focus, option, checked));
+				}
+			}
 		}
 
 		&:disabled,
@@ -715,11 +774,367 @@
 
 			> option {
 				@include clay-css($disabled-option);
+
+				&:checked {
+					@include clay-css(map-get($disabled-option, checked));
+				}
 			}
 		}
 
 		option {
 			@include clay-css($option);
+
+			&:checked {
+				@include clay-css(map-get($option, checked));
+			}
+		}
+
+		@if (map-get($map, firefox-only)) {
+			@-moz-document url-prefix() {
+				@include clay-css(map-get($map, firefox-only));
+
+				&:hover {
+					@include clay-css(map-deep-get($map, firefox-only, hover));
+
+					> option {
+						@include clay-css(
+							map-deep-get($map, firefox-only, hover, option)
+						);
+
+						&:checked {
+							@include clay-css(
+								map-deep-get(
+									$map,
+									firefox-only,
+									hover,
+									option,
+									checked
+								)
+							);
+						}
+					}
+				}
+
+				&:focus,
+				&.focus {
+					@include clay-css(map-deep-get($map, firefox-only, focus));
+
+					> option {
+						@include clay-css(
+							map-deep-get($map, firefox-only, focus, option)
+						);
+
+						&:checked {
+							@include clay-css(
+								map-deep-get(
+									$map,
+									firefox-only,
+									focus,
+									option,
+									checked
+								)
+							);
+						}
+					}
+				}
+
+				&:disabled,
+				&.disabled {
+					@include clay-css(
+						map-deep-get($map, firefox-only, disabled)
+					);
+
+					> option {
+						@include clay-css(
+							map-deep-get($map, firefox-only, disabled, option)
+						);
+
+						&:checked {
+							@include clay-css(
+								map-deep-get(
+									$map,
+									firefox-only,
+									disabled,
+									option,
+									checked
+								)
+							);
+						}
+					}
+				}
+
+				option {
+					@include clay-css(map-deep-get($map, firefox-only, option));
+
+					&:checked {
+						@include clay-css(
+							map-deep-get($map, firefox-only, option, checked)
+						);
+					}
+				}
+			}
+		}
+	}
+}
+
+/// A mixin to create Form Validation variants (e.g., `.has-error`).
+/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
+/// @example
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	label: (
+/// 		// .has-error label
+/// 	),
+/// 	custom-control-label: (
+/// 		// .has-error .custom-control-label, .has-error .form-check-label
+/// 	),
+/// 	form-control: (
+/// 		// .has-error .form-control
+/// 		readonly: (
+/// 			// .has-error .form-control[readonly]
+/// 		),
+/// 	),
+/// 	form-feedback-group: (
+/// 		// .has-error .form-feedback-group
+/// 	),
+/// 	form-feedback-item: (
+/// 		// .has-error .form-feedback-item
+/// 	),
+/// 	form-feedback-indicator: (
+/// 		// .has-error .form-feedback-indicator
+/// 	),
+/// 	form-feedback-text: (
+/// 		// .has-error .form-feedback-text
+/// 	),
+/// 	select: (
+/// 		// N/A
+/// 		form-control: (
+/// 			// .has-error select.form-control
+/// 			multiple: (
+/// 				// .has-error select.form-control[multiple]
+/// 			),
+/// 			size: (
+/// 				// .has-error select.form-control[size]
+/// 			),
+/// 		),
+/// 	),
+/// 	input-group-item: (
+/// 		// .has-error .input-group-item
+/// 		hover: (
+/// 			// .has-error .input-group-item:hover
+/// 			input-group-inset: (
+/// 				// .has-error .input-group-item:hover .input-group-inset
+/// 				input-group-inset-item: (
+/// 					// .has-error .input-group-item:hover .input-group-inset ~ .input-group-inset-item
+/// 				),
+/// 			),
+/// 		),
+/// 		focus: (
+/// 			// .has-error .input-group-item.focus
+/// 			input-group-inset: (
+/// 				// .has-error .input-group-item.focus .input-group-inset
+/// 				input-group-inset-item: (
+/// 					// .has-error .input-group-item.focus .input-group-inset ~ .input-group-inset-item
+/// 				),
+/// 			),
+/// 		),
+/// 		input-group-inset: (
+/// 			// .has-error .input-group-inset
+/// 			input-group-inset-item: (
+/// 				// .has-error .input-group-inset ~ .input-group-inset-item
+/// 			),
+/// 			hover: (
+/// 				// .has-error .input-group-inset:hover
+/// 				input-group-inset-item: (
+/// 					// .has-error .input-group-inset:hover ~ .input-group-inset-item
+/// 				),
+/// 			),
+/// 			focus: (
+/// 				// .has-error .input-group-inset:focus
+/// 				input-group-inset-item: (
+/// 					// .has-error .input-group-inset:focus ~ .input-group-inset-item
+/// 				),
+/// 			),
+/// 		),
+/// 	),
+/// )
+
+@mixin clay-form-validation-variant($map) {
+	$enabled: setter(map-get($map, enabled), true);
+
+	@if ($enabled) {
+		@include clay-css($map);
+
+		label {
+			@include clay-css(map-get($map, label));
+		}
+
+		.custom-control-label,
+		.form-check-label {
+			@include clay-css(map-get($map, custom-control-label));
+		}
+
+		.form-control {
+			@include clay-form-control-variant(map-get($map, form-control));
+		}
+
+		.form-control[readonly] {
+			@include clay-form-control-variant(
+				map-deep-get($map, form-control, readonly)
+			);
+		}
+
+		.form-feedback-group {
+			@include clay-css(map-get($map, form-feedback-group));
+		}
+
+		.form-feedback-item {
+			@include clay-css(map-get($map, form-feedback-item));
+		}
+
+		.form-feedback-indicator {
+			@include clay-css(map-get($map, form-feedback-indicator));
+		}
+
+		.form-feedback-text {
+			@include clay-css(map-get($map, form-feedback-text));
+		}
+
+		select.form-control {
+			@include clay-select-variant(
+				map-deep-get($map, select, form-control)
+			);
+
+			&[size] {
+				@include clay-select-variant(
+					map-deep-get($map, select, form-control, size)
+				);
+			}
+
+			&[multiple] {
+				@include clay-select-variant(
+					map-deep-get($map, select, form-control, multiple)
+				);
+			}
+		}
+
+		.input-group-item {
+			@include clay-css(map-get($map, input-group-item));
+
+			&:hover {
+				.input-group-inset {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							input-group-item,
+							hover,
+							input-group-inset
+						)
+					);
+
+					~ .input-group-inset-item {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								input-group-item,
+								hover,
+								input-group-inset,
+								input-group-inset-item
+							)
+						);
+					}
+				}
+			}
+
+			&.focus {
+				@include clay-css(map-deep-get($map, input-group-item, focus));
+
+				.input-group-inset {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							input-group-item,
+							focus,
+							input-group-inset
+						)
+					);
+
+					~ .input-group-inset-item {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								input-group-item,
+								focus,
+								input-group-inset,
+								input-group-inset-item
+							)
+						);
+					}
+				}
+			}
+
+			.input-group-inset {
+				@include clay-css(
+					map-deep-get($map, input-group-item, input-group-inset)
+				);
+
+				~ .input-group-inset-item {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							input-group-item,
+							input-group-inset,
+							input-group-inset-item
+						)
+					);
+				}
+
+				&:hover {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							input-group-item,
+							input-group-inset,
+							hover
+						)
+					);
+
+					~ .input-group-inset-item {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								input-group-item,
+								input-group-inset,
+								hover,
+								input-group-inset-item
+							)
+						);
+					}
+				}
+
+				&:focus {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							input-group-item,
+							input-group-inset,
+							focus
+						)
+					);
+
+					~ .input-group-inset-item {
+						@include clay-css(
+							map-deep-get(
+								$map,
+								input-group-item,
+								input-group-inset,
+								focus,
+								input-group-inset-item
+							)
+						);
+					}
+				}
+			}
 		}
 	}
 }
@@ -843,7 +1258,7 @@
 	$track-width: map-get($map, track-width);
 
 	@if ($track-height and $track-margin-top == null) {
-		$track-margin-top: math-sign($track-height / 2);
+		$track-margin-top: math-sign($track-height * 0.5);
 	}
 
 	$progress-bg: map-get($map, progress-bg);
@@ -859,7 +1274,7 @@
 	$progress-width: map-get($map, progress-width);
 
 	@if ($progress-height and $progress-margin-top == null) {
-		$progress-margin-top: math-sign($progress-height / 2);
+		$progress-margin-top: math-sign($progress-height * 0.5);
 	}
 
 	$tooltip-bg: map-get($map, tooltip-bg);
@@ -883,11 +1298,11 @@
 	$tooltip-arrow-size: map-get($map, tooltip-arrow-size);
 
 	@if ($tooltip-arrow-size != null) {
-		$tooltip-arrow-offset: $tooltip-arrow-size / 2;
+		$tooltip-arrow-offset: $tooltip-arrow-size * 0.5;
 	}
 
 	@if ($thumb-width and $tooltip-spacer-x == null) {
-		$tooltip-spacer-x: $thumb-width / 2;
+		$tooltip-spacer-x: $thumb-width * 0.5;
 	}
 
 	$form-control-appearance: map-get($map, form-control-appearance);
@@ -1017,9 +1432,9 @@
 		border-width: $thumb-border-width;
 		box-shadow: $thumb-box-shadow;
 		height: $thumb-height;
-		margin-top: math-sign($thumb-height / 2);
+		margin-top: math-sign($thumb-height * 0.5);
 		position: absolute;
-		right: math-sign($thumb-width / 2);
+		right: math-sign($thumb-width * 0.5);
 		top: 50%;
 		visibility: hidden;
 		width: $thumb-width;
@@ -1056,7 +1471,7 @@
 			border-width: $thumb-border-width;
 			box-shadow: $thumb-box-shadow;
 			height: $thumb-height;
-			margin-top: math-sign($thumb-height / 2);
+			margin-top: math-sign($thumb-height * 0.5);
 			position: relative;
 			top: 50%;
 			width: $thumb-width;
@@ -1123,7 +1538,7 @@
 			border-width: $thumb-border-width;
 			box-shadow: $thumb-box-shadow;
 			height: $thumb-height;
-			margin-top: math-sign($thumb-height / 2);
+			margin-top: math-sign($thumb-height * 0.5);
 			position: relative;
 			top: 50%;
 			width: $thumb-width;