@clayui/css 3.42.0 → 3.44.2

package/src/scss/components/_cards.scss

@@ -567,75 +567,18 @@
 // Checkbox and Radio Cards
 
 .form-check-card {
-	margin-bottom: $card-margin-bottom;
-	margin-top: 0;
-	padding-left: 0;
-
-	.card {
-		margin-bottom: 0;
-	}
-
-	.custom-control {
-		display: inline;
-		margin-right: 0;
-		position: static;
-
-		> label {
-			font-weight: $font-weight-normal;
-			padding-left: 0;
-		}
-	}
-
-	.custom-control-input {
-		z-index: 2;
-	}
+	@include clay-form-check-card-variant($form-check-card);
 
-	.custom-control-label {
-		position: absolute;
-		z-index: 1;
-
-		&::before,
-		&::after {
-			top: 0;
-		}
-	}
-
-	.form-check-input {
-		margin-left: 0;
-		margin-top: 0;
-		position: absolute;
-		z-index: 1;
-	}
-
-	.form-check-label {
-		color: $body-color;
-		display: inline;
-		font-weight: $font-weight-normal;
-		padding-left: 0;
-		position: static;
-	}
-
-	&.active .card,
-	.custom-control-input:checked ~ .card,
 	.form-check-input:checked ~ .card {
-		box-shadow: $form-check-card-checked-box-shadow;
-	}
-}
-
-.form-check-card {
-	&:hover {
-		.card {
-			box-shadow: $form-check-card-checked-box-shadow;
-		}
-	}
-}
-
-.custom-control-input,
-.form-check-input {
-	&:hover {
-		~ .card {
-			box-shadow: $form-check-card-checked-box-shadow;
-		}
+		@include clay-card-variant(
+			map-deep-get(
+				$form-check-card,
+				custom-control,
+				custom-control-input,
+				checked,
+				card
+			)
+		);
 	}
 }
 
@@ -660,70 +603,27 @@
 }
 
 .form-check-bottom-left {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		bottom: $checkbox-position;
-		left: $checkbox-position;
-		top: auto;
-		transform: none;
-	}
+	@include clay-form-check-card-variant($form-check-bottom-left);
 }
 
 .form-check-bottom-right {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		bottom: $checkbox-position;
-		left: auto;
-		right: $checkbox-position;
-		top: auto;
-		transform: none;
-	}
+	@include clay-form-check-card-variant($form-check-bottom-right);
 }
 
 .form-check-middle-left {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		left: $checkbox-position;
-		margin-top: 0;
-		top: 50%;
-		transform: translateY(-50%);
-	}
+	@include clay-form-check-card-variant($form-check-middle-left);
 }
 
 .form-check-middle-right {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		left: auto;
-		margin-top: 0;
-		right: $checkbox-position;
-		top: 50%;
-		transform: translateY(-50%);
-	}
+	@include clay-form-check-card-variant($form-check-middle-right);
 }
 
 .form-check-top-left {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		left: $checkbox-position;
-		top: $checkbox-position;
-		transform: none;
-	}
+	@include clay-form-check-card-variant($form-check-top-left);
 }
 
 .form-check-top-right {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		left: auto;
-		right: $checkbox-position;
-		top: $checkbox-position;
-		transform: none;
-	}
+	@include clay-form-check-card-variant($form-check-top-right);
 }
 
 // Card Page

package/src/scss/components/_dropdowns.scss

@@ -424,6 +424,10 @@
 
 // Dropdown Menu Width
 
+.dropdown-menu-width-shrink {
+	@include clay-dropdown-menu-variant($dropdown-menu-width-shrink);
+}
+
 .dropdown-menu-width-full {
 	@include clay-css($dropdown-menu-width-full);
 }

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

@@ -121,117 +121,27 @@
 // Input Group
 
 .input-group {
-	align-items: stretch;
-	display: flex;
-	flex-wrap: wrap;
-	position: relative;
-	width: 100%;
-
-	.btn-unstyled {
-		color: inherit;
-	}
+	@include clay-input-group-variant($input-group);
 }
 
 // Input Group Item
 
 .input-group-item {
-	display: flex;
-	flex-grow: 1;
-	flex-wrap: wrap;
-	margin-left: $input-group-item-margin-left;
-	width: 1%;
-	word-wrap: break-word;
-
-	&:first-child {
-		margin-left: 0;
-	}
-
-	> .btn {
-		align-self: flex-start;
-	}
-
-	> .dropdown {
-		display: flex;
-		flex-wrap: wrap;
-		word-wrap: break-word;
-		width: 100%;
-	}
+	@include clay-input-group-item-variant($input-group-item);
 }
 
 .input-group-item-shrink {
-	flex-grow: 0;
-	width: auto;
+	@include clay-input-group-item-variant($input-group-item-shrink);
 }
 
 // Input Group Text
 
 .input-group-text {
-	align-items: center;
-	background-color: $input-group-addon-bg;
-	border-color: $input-group-addon-border-color;
-	border-style: solid;
-
-	border-bottom-width: $input-border-bottom-width;
-	border-left-width: $input-border-left-width;
-	border-right-width: $input-border-right-width;
-	border-top-width: $input-border-top-width;
-
-	@include border-radius($input-border-radius);
-
-	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;
-
-	// Allow use of <label> elements by overriding our default margin-bottom
-
-	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;
-
-	@include clay-scale-component {
-		height: $input-height-mobile;
-	}
-
-	label {
-		color: $input-group-addon-color;
-	}
-
-	// Nuke default margins from checkboxes and radios to vertically center within.
-
-	input[type='radio'],
-	input[type='checkbox'] {
-		margin-top: 0;
-	}
-
-	.custom-control,
-	.form-check {
-		margin-bottom: 0;
-	}
-
-	.lexicon-icon {
-		margin-top: 0;
-	}
+	@include clay-input-group-text-variant($input-group-text);
 }
 
 .input-group-text-secondary {
-	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;
-	}
+	@include clay-input-group-text-variant($input-group-text-secondary);
 }
 
 // Input Group Stacked
@@ -243,83 +153,7 @@
 // Input Group Sizes
 
 %clay-input-group-lg {
-	> .input-group-item {
-		> .btn {
-			@include clay-button-size($input-group-lg-item-btn);
-		}
-
-		> .btn-monospaced {
-			@include clay-button-size($input-group-lg-item-btn-monospaced);
-		}
-
-		> .form-control,
-		> .form-file .btn {
-			@include border-radius($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;
-
-			@include clay-scale-component {
-				height: $input-height-lg-mobile;
-			}
-		}
-
-		> textarea.form-control,
-		> .form-control-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;
-
-			@include clay-scale-component {
-				height: $input-height-lg-mobile;
-			}
-		}
-
-		> .input-group-text {
-			@include border-radius($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 {
-				@include clay-button-size($input-group-lg-inset-item-btn);
-			}
-
-			> .btn-monospaced {
-				@include clay-button-variant(
-					$input-group-lg-inset-item-btn-monospaced
-				);
-			}
-
-			> .form-file {
-				height: 75%;
-
-				.btn {
-					@include clay-button-size(
-						$input-group-lg-inset-item-form-file-btn
-					);
-				}
-			}
-		}
-	}
+	@include clay-input-group-variant($input-group-lg);
 }
 
 .input-group-lg {
@@ -327,83 +161,7 @@
 }
 
 %clay-input-group-sm {
-	> .input-group-item {
-		> .btn {
-			@include clay-button-size($input-group-sm-item-btn);
-		}
-
-		> .btn-monospaced {
-			@include clay-button-size($input-group-sm-item-btn-monospaced);
-		}
-
-		> .form-control,
-		> .form-file .btn {
-			@include border-radius($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;
-
-			@include clay-scale-component {
-				height: $input-height-sm-mobile;
-			}
-		}
-
-		> .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;
-
-			@include clay-scale-component {
-				height: $input-height-sm-mobile;
-			}
-		}
-
-		> textarea.form-control,
-		> .form-control-textarea {
-			height: $input-textarea-height-sm;
-		}
-
-		> .input-group-text {
-			@include border-radius($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 {
-				@include clay-button-size($input-group-sm-inset-item-btn);
-			}
-
-			> .btn-monospaced {
-				@include clay-button-variant(
-					$input-group-sm-inset-item-btn-monospaced
-				);
-			}
-
-			> .form-file {
-				height: 75%;
-
-				.btn {
-					@include clay-button-size(
-						$input-group-sm-inset-item-form-file-btn
-					);
-				}
-			}
-		}
-	}
+	@include clay-input-group-variant($input-group-sm);
 
 	&.clay-color {
 		> .input-group-item > .input-group-text {
@@ -432,72 +190,18 @@
 
 // Input Group Inset
 
-.input-group-item.focus {
-	@include border-radius($input-border-radius);
-
-	box-shadow: $input-focus-box-shadow;
-
-	.form-control,
-	.form-control[readonly] ~ .input-group-inset-item,
-	.input-group-inset-item {
-		background-color: $input-focus-bg;
-		border-color: $input-focus-border-color;
-	}
-}
-
-.input-group-item.input-group-prepend.focus {
-	@include border-right-radius(0);
-
-	z-index: 1;
-}
-
-.input-group-item.input-group-append.focus {
-	@include border-left-radius(0);
-}
-
 .input-group-inset {
-	flex-grow: 1;
-	order: 5;
-	width: 1%;
-
-	&[readonly] {
-		&: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-item {
-			background-color: $input-readonly-bg;
-			border-color: $input-readonly-border-color;
-			color: $input-readonly-color;
-			cursor: $input-readonly-cursor;
-		}
-	}
-
-	&: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;
-		}
-	}
+	@include clay-form-control-variant($input-group-inset);
 
 	~ .form-feedback-group {
 		order: 13;
 	}
 }
 
+.input-group-inset[readonly] {
+	@include clay-form-control-variant($input-group-inset-readonly);
+}
+
 .input-group {
 	.input-group-inset-item {
 		align-items: center;