@clayui/css 3.40.1 → 3.44.0

package/src/scss/variables/_forms.scss

@@ -504,19 +504,70 @@ $form-check-inline-margin-x: 0.75rem !default;
 
 $form-check-inline-input-margin-x: auto !default;
 
-// Form Feedback
+// .form-feedback-group
+
+$form-feedback-group: () !default;
+$form-feedback-group: map-merge(
+	(
+		width: 100%,
+		word-wrap: break-word,
+	),
+	$form-feedback-group
+);
+
+// .form-text
 
 $form-text-color: $gray-600 !default;
 $form-text-font-size: 0.875rem !default; // 14px
 $form-text-font-weight: null !default;
 $form-text-margin-top: 0.25rem !default;
 
+$form-text: () !default;
+$form-text: map-merge(
+	(
+		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,
+	),
+	$form-text
+);
+
+// .form-feedback-item
+
 $form-feedback-font-size: $small-font-size !default;
 $form-feedback-font-weight: null !default;
 $form-feedback-margin-top: 0.25rem !default;
 
+$form-feedback-item: () !default;
+$form-feedback-item: map-merge(
+	(
+		font-size: $form-feedback-font-size,
+		font-weight: $form-feedback-font-weight,
+		margin-top: $form-feedback-margin-top,
+		word-wrap: break-word,
+	),
+	$form-feedback-item
+);
+
+// .form-feedback-indicator
+
 $form-feedback-indicator-margin-x: 0.125rem !default;
 
+$form-feedback-indicator: () !default;
+$form-feedback-indicator: map-deep-merge(
+	(
+		margin-left: $form-feedback-indicator-margin-x,
+		margin-right: $form-feedback-indicator-margin-x,
+		first-child: (
+			margin-left: 0,
+		),
+	),
+	$form-feedback-indicator
+);
+
 $form-feedback-valid-color: $success !default;
 
 $form-feedback-warning-color: $warning !default;
@@ -630,6 +681,87 @@ $input-danger-select-multiple: map-deep-merge(
 	$input-danger-select-multiple
 );
 
+// .has-error
+
+$has-error: () !default;
+$has-error: map-deep-merge(
+	(
+		label: (
+			color: $input-danger-label-color,
+		),
+		custom-control-label: (
+			color: $input-danger-checkbox-label-color,
+		),
+		form-control:
+			map-deep-merge(
+				(
+					readonly: $input-danger-readonly,
+				),
+				$input-danger
+			),
+		form-feedback-item: (
+			color: $form-feedback-invalid-color,
+		),
+		select: (
+			form-control:
+				map-deep-merge(
+					(
+						multiple: $input-danger-select-multiple,
+						size: $input-danger-select-size,
+					),
+					$input-danger-select
+				),
+		),
+		input-group-item: (
+			focus: (
+				box-shadow:
+					setter(
+						$input-danger-focus-box-shadow,
+						$input-danger-box-shadow
+					),
+				input-group-inset: (
+					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-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: (
+				input-group-inset-item: (
+					background-color: $input-danger-bg,
+					border-color: $input-danger-border-color,
+					box-shadow: $input-danger-box-shadow,
+				),
+				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
+							),
+					),
+				),
+			),
+		),
+	),
+	$has-error
+);
+
 // .has-warning .form-control
 
 $input-warning-bg: null !default;
@@ -702,6 +834,87 @@ $input-warning-select-multiple: map-deep-merge(
 	$input-warning-select-multiple
 );
 
+// .has-warning
+
+$has-warning: () !default;
+$has-warning: map-deep-merge(
+	(
+		label: (
+			color: $input-warning-label-color,
+		),
+		custom-control-label: (
+			color: $input-warning-checkbox-label-color,
+		),
+		form-control:
+			map-deep-merge(
+				(
+					readonly: $input-warning-readonly,
+				),
+				$input-warning
+			),
+		form-feedback-item: (
+			color: $form-feedback-warning-color,
+		),
+		select: (
+			form-control:
+				map-deep-merge(
+					(
+						multiple: $input-warning-select-multiple,
+						size: $input-warning-select-size,
+					),
+					$input-warning-select
+				),
+		),
+		input-group-item: (
+			focus: (
+				box-shadow:
+					setter(
+						$input-warning-focus-box-shadow,
+						$input-warning-box-shadow
+					),
+				input-group-inset: (
+					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-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: (
+				input-group-inset-item: (
+					background-color: $input-warning-bg,
+					border-color: $input-warning-border-color,
+					box-shadow: $input-warning-box-shadow,
+				),
+				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
+							),
+					),
+				),
+			),
+		),
+	),
+	$has-warning
+);
+
 // .has-success .form-control
 
 $input-success-bg: null !default;
@@ -774,6 +987,87 @@ $input-success-select-multiple: map-deep-merge(
 	$input-success-select-multiple
 );
 
+// .has-success
+
+$has-success: () !default;
+$has-success: map-deep-merge(
+	(
+		label: (
+			color: $input-success-label-color,
+		),
+		custom-control-label: (
+			color: $input-success-checkbox-label-color,
+		),
+		form-control:
+			map-deep-merge(
+				(
+					readonly: $input-success-readonly,
+				),
+				$input-success
+			),
+		form-feedback-item: (
+			color: $form-feedback-valid-color,
+		),
+		select: (
+			form-control:
+				map-deep-merge(
+					(
+						multiple: $input-success-select-multiple,
+						size: $input-success-select-size,
+					),
+					$input-success-select
+				),
+		),
+		input-group-item: (
+			focus: (
+				box-shadow:
+					setter(
+						$input-success-focus-box-shadow,
+						$input-success-box-shadow
+					),
+				input-group-inset: (
+					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-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: (
+				input-group-inset-item: (
+					background-color: $input-success-bg,
+					border-color: $input-success-border-color,
+					box-shadow: $input-success-box-shadow,
+				),
+				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
+							),
+					),
+				),
+			),
+		),
+	),
+	$has-success
+);
+
 // Select Element
 
 $input-select-bg: null !default;
@@ -901,7 +1195,24 @@ $input-select-multiple: map-deep-merge(
 $form-group-item-label-max-width: 12.5rem !default; // 200px
 $form-group-item-label-spacer: 2rem !default; // 32px
 
-// Input Group
+// .input-group
+
+$input-group: () !default;
+$input-group: map-deep-merge(
+	(
+		align-items: stretch,
+		display: flex,
+		flex-wrap: wrap,
+		position: relative,
+		width: 100%,
+		btn-unstyled: (
+			color: inherit,
+		),
+	),
+	$input-group
+);
+
+// .input-group-text
 
 $input-group-addon-bg: $gray-200 !default;
 $input-group-addon-border-color: $input-border-color !default;
@@ -911,17 +1222,140 @@ $input-group-addon-min-width: 2.375rem !default; // 38px
 $input-group-addon-padding-x: $input-padding-x !default;
 $input-group-addon-padding-y: $input-padding-y !default;
 
-// Input Group Secondary
+$input-group-text: () !default;
+$input-group-text: map-deep-merge(
+	(
+		align-items: center,
+		background-color: $input-group-addon-bg,
+		border-bottom-width: $input-border-bottom-width,
+		border-color: $input-group-addon-border-color,
+		border-left-width: $input-border-left-width,
+		border-radius: clay-enable-rounded($input-border-radius),
+		border-right-width: $input-border-right-width,
+		border-style: solid,
+		border-top-width: $input-border-top-width,
+		color: $input-group-addon-color,
+		display: flex,
+		font-size: $input-font-size,
+		font-weight: $input-group-addon-font-weight,
+		height: $input-height,
+		justify-content: center,
+		line-height: $input-line-height,
+		margin-bottom: 0,
+		min-width: $input-group-addon-min-width,
+		padding-bottom: $input-group-addon-padding-y,
+		padding-left: $input-group-addon-padding-x,
+		padding-right: $input-group-addon-padding-x,
+		padding-top: $input-group-addon-padding-y,
+		text-align: center,
+		white-space: nowrap,
+		label: (
+			color: $input-group-addon-color,
+		),
+		custom-control: (
+			margin-bottom: 0,
+		),
+		form-check: (
+			margin-bottom: 0,
+			input: (
+				margin-top: 0,
+			),
+		),
+		lexicon-icon: (
+			margin-top: 0,
+		),
+		media-breakpoint-down: (
+			sm: (
+				height: $input-height-mobile,
+			),
+		),
+	),
+	$input-group-text
+);
+
+// .input-group-text-secondary
 
 $input-group-secondary-addon-bg: $secondary !default;
 $input-group-secondary-addon-border-color: $secondary !default;
 $input-group-secondary-addon-border-width: 0.0625rem !default; // 1px
 $input-group-secondary-addon-color: $white !default;
 
-// Input Group Item
+$input-group-text-secondary: () !default;
+$input-group-text-secondary: map-deep-merge(
+	(
+		background-color: $input-group-secondary-addon-bg,
+		border-color: $input-group-secondary-addon-border-color,
+		border-width: $input-group-secondary-addon-border-width,
+		color: $input-group-secondary-addon-color,
+		z-index: 2,
+		label: (
+			color: $input-group-secondary-addon-color,
+		),
+	),
+	$input-group-text-secondary
+);
+
+// .input-group-item
 
 $input-group-item-margin-left: 0.5rem !default;
 
+$input-group-item: () !default;
+$input-group-item: map-deep-merge(
+	(
+		display: flex,
+		flex-grow: 1,
+		flex-wrap: wrap,
+		margin-left: $input-group-item-margin-left,
+		width: 1%,
+		word-wrap: break-word,
+		focus: (
+			border-radius: clay-enable-rounded($input-border-radius),
+			box-shadow: $input-focus-box-shadow,
+			input-group-prepend: (
+				border-bottom-right-radius: clay-enable-rounded(0),
+				border-top-right-radius: clay-enable-rounded(0),
+				z-index: 1,
+			),
+			input-group-append: (
+				border-bottom-left-radius: clay-enable-rounded(0),
+				border-top-left-radius: clay-enable-rounded(0),
+			),
+			form-control: (
+				background-color: $input-focus-bg,
+				border-color: $input-focus-border-color,
+			),
+			input-group-inset-item: (
+				background-color: $input-focus-bg,
+				border-color: $input-focus-border-color,
+			),
+		),
+		first-child: (
+			margin-left: 0,
+		),
+		btn: (
+			align-self: flex-start,
+		),
+		dropdown: (
+			display: flex,
+			flex-wrap: wrap,
+			word-wrap: break-word,
+			width: 100%,
+		),
+	),
+	$input-group-item
+);
+
+// .input-group-item-shrink
+
+$input-group-item-shrink: () !default;
+$input-group-item-shrink: map-deep-merge(
+	(
+		flex-grow: 0,
+		width: auto,
+	),
+	$input-group-item-shrink
+);
+
 // Input Group Inset
 
 $input-group-inset-item-color: $input-group-addon-color !default;
@@ -976,7 +1410,7 @@ $input-group-inset-form-file-btn: map-deep-merge(
 	$input-group-inset-form-file-btn
 );
 
-// Input Group Lg
+// .input-group-lg
 
 $input-group-addon-min-width-lg: 3rem !default; // 48px
 $input-group-addon-padding-x-lg: $input-padding-x-lg !default;
@@ -987,13 +1421,24 @@ $input-group-lg-item-btn: map-deep-merge(
 	(
 		breakpoint-down: null,
 		font-size: $btn-font-size-lg,
-		inline-item-font-size: $btn-inline-item-font-size-lg,
-		section-font-size: $btn-section-font-size-lg,
-		font-size-mobile: $btn-font-size-lg-mobile,
-		padding-bottom-mobile: $btn-padding-y-lg-mobile,
-		padding-left-mobile: $btn-padding-x-lg-mobile,
-		padding-right-mobile: $btn-padding-x-lg-mobile,
-		padding-top-mobile: $btn-padding-y-lg-mobile,
+		line-height: map-get($btn-lg, line-height),
+		padding-bottom: map-get($btn-lg, padding-bottom),
+		padding-left: map-get($btn-lg, padding-left),
+		padding-right: map-get($btn-lg, padding-right),
+		padding-top: map-get($btn-lg, padding-top),
+		inline-item: (
+			font-size: $btn-inline-item-font-size-lg,
+		),
+		btn-section: (
+			font-size: $btn-section-font-size-lg,
+		),
+		mobile: (
+			font-size: $btn-font-size-lg-mobile,
+			padding-bottom: $btn-padding-y-lg-mobile,
+			padding-left: $btn-padding-x-lg-mobile,
+			padding-right: $btn-padding-x-lg-mobile,
+			padding-top: $btn-padding-y-lg-mobile,
+		),
 	),
 	$input-group-lg-item-btn
 );
@@ -1009,8 +1454,10 @@ $input-group-lg-item-btn-monospaced: map-deep-merge(
 		padding-right: $btn-monospaced-padding-x-lg,
 		padding-top: $btn-monospaced-padding-y-lg,
 		width: $btn-monospaced-size-lg,
-		height-mobile: $btn-monospaced-size-lg-mobile,
-		width-mobile: $btn-monospaced-size-lg-mobile,
+		mobile: (
+			height: $btn-monospaced-size-lg-mobile,
+			width: $btn-monospaced-size-lg-mobile,
+		),
 	),
 	$input-group-lg-item-btn-monospaced
 );
@@ -1033,6 +1480,89 @@ $input-group-lg-inset-item-form-file-btn: map-deep-merge(
 	$input-group-lg-inset-item-form-file-btn
 );
 
+$input-group-lg: () !default;
+$input-group-lg: map-deep-merge(
+	(
+		input-group-item: (
+			btn: $input-group-lg-item-btn,
+			btn-monospaced: $input-group-lg-item-btn-monospaced,
+			form-control: (
+				border-radius: clay-enable-rounded($input-border-radius-lg),
+				font-size: $input-font-size-lg,
+				height: auto,
+				line-height: $input-line-height-lg,
+				min-height: $input-height-lg,
+				padding-bottom: $input-padding-y-lg,
+				padding-left: $input-padding-x-lg,
+				padding-right: $input-padding-x-lg,
+				padding-top: $input-padding-y-lg,
+			),
+			form-control-inset: (
+				margin-bottom: 0,
+				margin-top: 0,
+			),
+			form-file: (
+				btn: (
+					border-radius: clay-enable-rounded($input-border-radius-lg),
+					font-size: $input-font-size-lg,
+					height: $input-height-lg,
+					line-height: $input-line-height-lg,
+					padding-bottom: $input-padding-y-lg,
+					padding-left: $input-padding-x-lg,
+					padding-right: $input-padding-x-lg,
+					padding-top: $input-padding-y-lg,
+				),
+			),
+			textarea: (
+				height: $input-textarea-height-lg,
+			),
+			form-control-plaintext: (
+				font-size: $input-font-size-lg,
+				height: $input-height-lg,
+				line-height: $input-line-height-lg,
+				padding-bottom: $input-padding-y-lg,
+				padding-top: $input-padding-y-lg,
+			),
+			input-group-text: (
+				border-radius: clay-enable-rounded($input-border-radius-lg),
+				font-size: $input-font-size-lg,
+				height: $input-height-lg,
+				min-width: $input-group-addon-min-width-lg,
+				padding-bottom: $input-group-addon-padding-y-lg,
+				padding-left: $input-group-addon-padding-x-lg,
+				padding-right: $input-group-addon-padding-x-lg,
+				padding-top: $input-group-addon-padding-y-lg,
+			),
+			input-group-inset-item: (
+				btn: $input-group-lg-inset-item-btn,
+				btn-monospaced: $input-group-lg-inset-item-btn-monospaced,
+				form-file: (
+					height: 75%,
+					btn: $input-group-lg-inset-item-form-file-btn,
+				),
+			),
+		),
+		media-breakpoint-down: (
+			sm: (
+				input-group-item: (
+					form-control: (
+						height: $input-height-lg-mobile,
+					),
+					form-file: (
+						btn: (
+							height: $input-height-lg-mobile,
+						),
+					),
+					form-control-plaintext: (
+						height: $input-height-lg-mobile,
+					),
+				),
+			),
+		),
+	),
+	$input-group-lg
+);
+
 // Input Group Sm
 
 $input-group-addon-min-width-sm: 1.9375rem !default; // 31px
@@ -1043,13 +1573,24 @@ $input-group-sm-item-btn: () !default;
 $input-group-sm-item-btn: map-deep-merge(
 	(
 		font-size: $btn-font-size-sm,
-		inline-item-font-size: $btn-inline-item-font-size-sm,
-		section-font-size: $btn-section-font-size-sm,
-		font-size-mobile: $btn-font-size-sm-mobile,
-		padding-bottom-mobile: $btn-padding-y-sm-mobile,
-		padding-left-mobile: $btn-padding-x-sm-mobile,
-		padding-right-mobile: $btn-padding-x-sm-mobile,
-		padding-top-mobile: $btn-padding-y-sm-mobile,
+		line-height: map-get($btn-sm, line-height),
+		padding-bottom: map-get($btn-sm, padding-bottom),
+		padding-left: map-get($btn-sm, padding-left),
+		padding-right: map-get($btn-sm, padding-right),
+		padding-top: map-get($btn-sm, padding-top),
+		inline-item: (
+			font-size: $btn-inline-item-font-size-sm,
+		),
+		btn-section: (
+			font-size: $btn-section-font-size-sm,
+		),
+		mobile: (
+			font-size: $btn-font-size-sm-mobile,
+			padding-bottom: $btn-padding-y-sm-mobile,
+			padding-left: $btn-padding-x-sm-mobile,
+			padding-right: $btn-padding-x-sm-mobile,
+			padding-top: $btn-padding-y-sm-mobile,
+		),
 	),
 	$input-group-sm-item-btn
 );
@@ -1064,8 +1605,10 @@ $input-group-sm-item-btn-monospaced: map-deep-merge(
 		padding-right: $btn-monospaced-padding-x-sm,
 		padding-top: $btn-monospaced-padding-y-sm,
 		width: $btn-monospaced-size-sm,
-		height-mobile: $btn-monospaced-size-sm-mobile,
-		width-mobile: $btn-monospaced-size-sm-mobile,
+		mobile: (
+			height: $btn-monospaced-size-sm-mobile,
+			width: $btn-monospaced-size-sm-mobile,
+		),
 	),
 	$input-group-sm-item-btn-monospaced
 );
@@ -1106,6 +1649,140 @@ $input-group-sm-inset-item-form-file-btn: map-deep-merge(
 	$input-group-sm-inset-item-form-file-btn
 );
 
+$input-group-sm: () !default;
+$input-group-sm: map-deep-merge(
+	(
+		input-group-item: (
+			btn: $input-group-sm-item-btn,
+			btn-monospaced: $input-group-sm-item-btn-monospaced,
+			form-control: (
+				border-radius: clay-enable-rounded($input-border-radius-sm),
+				font-size: $input-font-size-sm,
+				height: auto,
+				line-height: $input-line-height-sm,
+				min-height: $input-height-sm,
+				padding-bottom: 0,
+				padding-left: $input-padding-x-sm,
+				padding-right: $input-padding-x-sm,
+				padding-top: 0,
+				label: (
+					margin-bottom: 0.1875rem,
+					margin-top: 0.1875rem,
+				),
+			),
+			form-control-inset: (
+				margin-bottom: 0.125rem,
+				margin-top: 0.1875rem,
+			),
+			form-file: (
+				btn: (
+					border-radius: clay-enable-rounded($input-border-radius-sm),
+					font-size: $input-font-size-sm,
+					height: $input-height-sm,
+					line-height: $input-line-height-sm,
+					padding-bottom: $input-padding-y-sm,
+					padding-left: $input-padding-x-sm,
+					padding-right: $input-padding-x-sm,
+					padding-top: $input-padding-y-sm,
+				),
+			),
+			form-control-plaintext: (
+				font-size: $input-font-size-sm,
+				height: $input-height-sm,
+				line-height: $input-line-height-sm,
+				padding-bottom: $input-padding-y-sm,
+				padding-top: $input-padding-y-sm,
+			),
+			textarea: (
+				height: $input-textarea-height-sm,
+			),
+			input-group-text: (
+				border-radius: clay-enable-rounded($input-border-radius-sm),
+				font-size: $input-font-size-sm,
+				height: $input-height-sm,
+				min-width: $input-group-addon-min-width-sm,
+				padding-bottom: $input-group-addon-padding-y-sm,
+				padding-left: $input-group-addon-padding-x-sm,
+				padding-right: $input-group-addon-padding-x-sm,
+				padding-top: $input-group-addon-padding-y-sm,
+			),
+			input-group-inset-item: (
+				btn: $input-group-sm-inset-item-btn,
+				btn-monospaced: $input-group-sm-inset-item-btn-monospaced,
+				form-file: (
+					height: 75%,
+					btn: $input-group-sm-inset-item-form-file-btn,
+				),
+			),
+		),
+		media-breakpoint-down: (
+			sm: (
+				input-group-item: (
+					form-control: (
+						height: $input-height-sm-mobile,
+					),
+					form-file: (
+						btn: (
+							height: $input-height-sm-mobile,
+						),
+					),
+					form-control-plaintext: (
+						height: $input-height-sm-mobile,
+					),
+				),
+			),
+		),
+	),
+	$input-group-sm
+);
+
+// .input-group-inset
+
+$input-group-inset: () !default;
+$input-group-inset: map-deep-merge(
+	(
+		flex-grow: 1,
+		order: 5,
+		width: 1%,
+		focus: (
+			box-shadow: none,
+			input-group-inset-item: (
+				background-color: $input-focus-bg,
+				border-color: $input-focus-border-color,
+			),
+		),
+		disabled: (
+			input-group-inset-item: (
+				background-color: $input-disabled-bg,
+				border-color: $input-disabled-border-color,
+			),
+		),
+	),
+	$input-group-inset
+);
+
+// .input-group-inset[readonly]
+
+$input-group-inset-readonly: () !default;
+$input-group-inset-readonly: map-deep-merge(
+	(
+		input-group-inset-item: (
+			background-color: $input-readonly-bg,
+			border-color: $input-readonly-border-color,
+			color: $input-readonly-color,
+			cursor: $input-readonly-cursor,
+		),
+		focus: (
+			input-group-inset-item: (
+				background-color: $input-readonly-focus-bg,
+				border-color: $input-readonly-focus-border-color,
+				color: $input-readonly-focus-color,
+			),
+		),
+	),
+	$input-group-inset-readonly
+);
+
 // Input Group Stacked
 
 $input-group-stacked-sm-down: () !default;