@clayui/css 3.40.1 → 3.44.0

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

@@ -106,8 +106,8 @@
 // Makes .btn narrower
 
 .dropdown-toggle-split {
-	padding-left: $btn-padding-x * 0.75;
-	padding-right: $btn-padding-x * 0.75;
+	padding-left: calc(#{$btn-padding-x} * 0.75);
+	padding-right: calc(#{$btn-padding-x} * 0.75);
 
 	@if ($enable-caret) {
 		&::after,
@@ -123,13 +123,13 @@
 }
 
 .btn-sm + .dropdown-toggle-split {
-	padding-right: $btn-padding-x-sm * 0.75;
-	padding-left: $btn-padding-x-sm * 0.75;
+	padding-right: calc(#{$btn-padding-x-sm} * 0.75);
+	padding-left: calc(#{$btn-padding-x-sm} * 0.75);
 }
 
 .btn-lg + .dropdown-toggle-split {
-	padding-right: $btn-padding-x-lg * 0.75;
-	padding-left: $btn-padding-x-lg * 0.75;
+	padding-right: calc(#{$btn-padding-x-lg} * 0.75);
+	padding-left: calc(#{$btn-padding-x-lg} * 0.75);
 }
 
 // Button Group Vertical

package/src/scss/components/_buttons.scss

@@ -18,20 +18,26 @@ fieldset:disabled a.btn {
 
 // Button Sizes
 
-%clay-btn-lg {
-	@include clay-button-variant($btn-lg);
-}
-
-.btn-lg {
-	@extend %clay-btn-lg !optional;
-}
-
-%clay-btn-sm {
-	@include clay-button-variant($btn-sm);
-}
+@each $size, $value in $btn-sizes {
+	$placeholder: if(
+		starts-with($size, 'btn-'),
+		'%clay-#{$size}',
+		'%#{str-slice($size, 2)}'
+	);
+
+	$selector: if(
+		starts-with($size, 'btn-'),
+		clay-str-replace($size, 'btn-', '.btn-'),
+		$size
+	);
+
+	#{$placeholder} {
+		@include clay-button-variant($value);
+	}
 
-.btn-sm {
-	@extend %clay-btn-sm !optional;
+	#{$selector} {
+		@extend #{$placeholder} !optional;
+	}
 }
 
 // Button Block
@@ -67,65 +73,97 @@ input[type='button'] {
 
 // Button Monospaced
 
-.btn-monospaced {
-	@include clay-button-variant($btn-monospaced);
-
-	&.btn .lexicon-icon {
-		margin-top: 0;
+@each $size, $value in $btn-monospaced-sizes {
+	$placeholder: if(
+		starts-with($size, 'btn-monospaced'),
+		'%clay-#{$size}',
+		'%#{str-slice($size, 2)}'
+	);
+
+	$selector: if(
+		starts-with($size, 'btn-monospaced-'),
+		clay-str-replace($size, 'btn-monospaced', '.btn-monospaced.btn'),
+		if(
+			$size == 'btn-monospaced',
+			clay-str-replace($size, 'btn-monospaced', '.btn-monospaced'),
+			$size
+		)
+	);
+
+	#{$placeholder} {
+		@include clay-button-variant($value);
 	}
-}
 
-%clay-btn-monospaced-lg {
-	@include clay-button-variant($btn-monospaced-lg);
-}
-
-.btn-monospaced.btn-lg {
-	@extend %clay-btn-monospaced-lg !optional;
-}
-
-%clay-btn-monospaced-sm {
-	@include clay-button-variant($btn-monospaced-sm);
-}
-
-.btn-monospaced.btn-sm {
-	@extend %clay-btn-monospaced-sm !optional;
+	#{$selector} {
+		@extend #{$placeholder} !optional;
+	}
 }
 
 // Button Variants
 
 @each $color, $value in $btn-palette {
-	%btn-#{$color} {
+	$placeholder: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		'%#{str-slice($color, 2)}',
+		'%btn-#{$color}'
+	);
+
+	$placeholder-focus: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		'%#{str-slice($color, 2)}-focus',
+		'%btn-#{$color}-focus'
+	);
+
+	$selector: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		$color,
+		str-insert($color, '.btn-', 1)
+	);
+
+	#{$placeholder} {
 		@include clay-button-variant($value);
 	}
 
-	.btn-#{$color} {
-		@extend %btn-#{$color} !optional;
+	#{$selector} {
+		@extend #{$placeholder} !optional;
 	}
 
-	%btn-#{$color}-focus {
-		background-color: map-get($value, focus-bg);
-		border-color: map-get($value, focus-border-color);
-		box-shadow: map-get($value, focus-box-shadow);
-		color: map-get($value, focus-color);
+	#{$placeholder-focus} {
+		@include clay-button-variant(map-get($value, focus));
 	}
 }
 
 // Button Outline Variants
 
 @each $color, $value in $btn-outline-palette {
-	%btn-outline-#{$color} {
+	$placeholder: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		'%#{str-slice($color, 2)}',
+		'%btn-outline-#{$color}'
+	);
+
+	$placeholder-focus: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		'%#{str-slice($color, 2)}-focus',
+		'%btn-outline-#{$color}-focus'
+	);
+
+	$selector: if(
+		starts-with($color, '.') or starts-with($color, '#'),
+		$color,
+		str-insert($color, '.btn-outline-', 1)
+	);
+
+	#{$placeholder} {
 		@include clay-button-variant($value);
 	}
 
-	.btn-outline-#{$color} {
-		@extend %btn-outline-#{$color} !optional;
+	#{$selector} {
+		@extend #{$placeholder} !optional;
 	}
 
-	%btn-outline-#{$color}-focus {
-		background-color: map-get($value, focus-bg);
-		border-color: map-get($value, focus-border-color);
-		box-shadow: map-get($value, focus-box-shadow);
-		color: map-get($value, focus-color);
+	#{$placeholder-focus} {
+		@include clay-button-variant(map-get($value, focus));
 	}
 }
 

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/_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);
 }