@clayui/css 3.65.1 → 3.69.0

package/src/scss/cadmin/variables/_dropdowns.scss

@@ -73,8 +73,8 @@ $cadmin-dropdown-menu: map-deep-merge(
 
 // .dropdown-item
 
-$cadmin-dropdown-item-padding-x: 20px !default; // 20px
-$cadmin-dropdown-item-padding-y: 8px !default; // 8px
+$cadmin-dropdown-item-padding-x: 16px !default;
+$cadmin-dropdown-item-padding-y: 8px !default;
 
 $cadmin-dropdown-item-disabled-cursor: $cadmin-disabled-cursor !default;
 
@@ -163,20 +163,20 @@ $cadmin-dropdown-item-base: map-deep-merge(
 			line-height: $cadmin-dropdown-font-size * $cadmin-line-height-base,
 		),
 		'&.autofit-row': (
-			padding-left: 1rem,
-			padding-right: 1rem,
+			padding-left: calc(#{$cadmin-dropdown-item-padding-x} - 4px),
+			padding-right: calc(#{$cadmin-dropdown-item-padding-x} - 4px),
 			autofit-col: (
-				padding-left: 0.25rem,
-				padding-right: 0.25rem,
+				padding-left: 4px,
+				padding-right: 4px,
 			),
 		),
 		autofit-row: (
-			margin-left: 0.25rem,
-			margin-right: 0.25rem,
+			margin-left: -4px,
+			margin-right: -4px,
 			width: auto,
 			autofit-col: (
-				padding-left: 0.25rem,
-				padding-right: 0.25rem,
+				padding-left: 4px,
+				padding-right: 4px,
 			),
 		),
 	),

package/src/scss/cadmin/variables/_forms.scss

@@ -118,12 +118,15 @@ $cadmin-input-plaintext-color: $cadmin-body-color !default;
 
 // Deprecated
 
-$cadmin-input-height-border: $cadmin-input-border-bottom-width +
-	$cadmin-input-border-top-width !default;
+$cadmin-input-height-border: calc(
+	#{$cadmin-input-border-bottom-width} + #{$cadmin-input-border-top-width}
+) !default;
 
 // Deprecated
 
-$cadmin-input-height-inner: $cadmin-input-height - $cadmin-input-height-border !default;
+$cadmin-input-height-inner: calc(
+	#{$cadmin-input-height} - #{$cadmin-input-border-bottom-width} - #{$cadmin-input-border-top-width}
+) !default;
 
 // Deprecated
 
@@ -194,6 +197,7 @@ $cadmin-input-label: map-deep-merge(
 		font-weight: $cadmin-input-label-font-weight,
 		margin-bottom: $cadmin-input-label-margin-bottom,
 		max-width: 100%,
+		position: static,
 		word-wrap: break-word,
 		mobile: (
 			font-size: $cadmin-input-label-font-size-mobile,

package/src/scss/cadmin/variables/_menubar.scss

@@ -98,7 +98,7 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 				color: rgba($cadmin-black, 0.3),
 			),
 			show: (
-				background-color: $cadmin-c-unset,
+				background-color: c-unset,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
@@ -124,9 +124,9 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 				color: $cadmin-gray-600,
 			),
 			show: (
-				background-color: $cadmin-c-unset,
-				color: $cadmin-c-unset,
-				font-weight: $cadmin-c-unset,
+				background-color: c-unset,
+				color: c-unset,
+				font-weight: c-unset,
 			),
 		),
 		collapse-mobile: (
@@ -311,7 +311,7 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 				color: rgba($cadmin-black, 0.3),
 			),
 			show: (
-				background-color: $cadmin-c-unset,
+				background-color: c-unset,
 				color: $cadmin-gray-900,
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
@@ -337,9 +337,9 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 				color: $cadmin-gray-600,
 			),
 			show: (
-				background-color: $cadmin-c-unset,
-				color: $cadmin-c-unset,
-				font-weight: $cadmin-c-unset,
+				background-color: c-unset,
+				color: c-unset,
+				font-weight: c-unset,
 			),
 		),
 		collapse-mobile: (

package/src/scss/cadmin/variables/_modals.scss

@@ -19,8 +19,9 @@ $cadmin-modal-content-border-color: transparent !default;
 $cadmin-modal-content-border-width: $cadmin-border-width !default;
 
 $cadmin-modal-content-border-radius: $cadmin-border-radius-lg !default;
-$cadmin-modal-content-inner-border-radius: $cadmin-modal-content-border-radius -
-	$cadmin-modal-content-border-width !default;
+$cadmin-modal-content-inner-border-radius: calc(
+	#{$cadmin-modal-content-border-radius} - #{$cadmin-modal-content-border-width}
+) !default;
 
 $cadmin-modal-content-box-shadow-xs: 0 0 3px 1px rgba(0, 0, 0, 0.2) !default;
 $cadmin-modal-content-box-shadow-sm-up: 0 8px 16px rgba($cadmin-black, 0.5) !default;

package/src/scss/cadmin/variables/_popovers.scss

@@ -3,8 +3,9 @@ $cadmin-popover-border-color: transparent !default;
 $cadmin-popover-border-width: $cadmin-border-width !default;
 
 $cadmin-popover-border-radius: $cadmin-border-radius !default; // 4px
-$cadmin-popover-inner-border-radius: $cadmin-popover-border-radius -
-	$cadmin-popover-border-width !default;
+$cadmin-popover-inner-border-radius: calc(
+	#{$cadmin-popover-border-radius} - #{$cadmin-popover-border-width}
+) !default;
 
 $cadmin-popover-box-shadow: 0 1px 15px -2px rgba(0, 0, 0, 0.2) !default;
 $cadmin-popover-font-size: $cadmin-font-size-sm !default;

package/src/scss/components/_alerts.scss

@@ -21,13 +21,11 @@
 	@include clay-css($alert-indicator);
 
 	.lexicon-icon {
-		@include clay-css(setter(map-get($alert-indicator, lexicon-icon), ()));
+		@include clay-css(map-get($alert-indicator, lexicon-icon));
 	}
 
 	+ .lead {
-		$lead: setter(map-get($alert-indicator, lead), ());
-
-		@include clay-css($lead);
+		@include clay-css(map-get($alert-indicator, lead));
 	}
 }
 
@@ -75,9 +73,7 @@
 	@include clay-css($alert-notifications-absolute);
 
 	@include clay-scale-component(null, $breakpoint-down) {
-		$mobile: setter(map-get($alert-notifications-absolute, mobile), ());
-
-		@include clay-css($mobile);
+		@include clay-css(map-get($alert-notifications-absolute, mobile));
 	}
 }
 
@@ -87,9 +83,7 @@
 	@include clay-css($alert-notifications-fixed);
 
 	@include clay-scale-component(null, $breakpoint-down) {
-		$mobile: setter(map-get($alert-notifications-fixed, mobile), ());
-
-		@include clay-css($mobile);
+		@include clay-css(map-get($alert-notifications-fixed, mobile));
 	}
 }
 
@@ -170,12 +164,7 @@
 	@include clay-css($alert-inline);
 
 	&.alert-dismissible {
-		$alert-dismissible: setter(
-			map-get($alert-inline, alert-dismissible),
-			()
-		);
-
-		@include clay-css($alert-dismissible);
+		@include clay-css(map-get($alert-inline, alert-dismissible));
 
 		&.alert-fluid {
 			$alert-dismissible-alert-fluid: setter(
@@ -195,21 +184,17 @@
 				@include clay-css($container-fluid);
 
 				> .alert-autofit-row {
-					$alert-autofit-row: setter(
-						map-get($container-fluid, alert-autofit-row),
-						map-get($alert-inline, alert-autofit-row),
-						()
+					@include clay-css(
+						setter(
+							map-get($container-fluid, alert-autofit-row),
+							map-get($alert-inline, alert-autofit-row)
+						)
 					);
 
-					@include clay-css($alert-autofit-row);
-
 					.btn-group {
-						$btn-group: setter(
-							map-get($alert-autofit-row, btn-group),
-							()
+						@include clay-css(
+							map-get($alert-autofit-row, btn-group)
 						);
-
-						@include clay-css($btn-group);
 					}
 				}
 			}
@@ -225,16 +210,12 @@
 		@include clay-css($alert-autofit-row);
 
 		.btn-group {
-			$btn-group: setter(map-get($alert-autofit-row, btn-group), ());
-
-			@include clay-css($btn-group);
+			@include clay-css(map-get($alert-autofit-row, btn-group));
 		}
 	}
 
 	.close {
-		$close: setter(map-get($alert-inline, close), ());
-
-		@include clay-close($close);
+		@include clay-close(map-get($alert-inline, close));
 	}
 }
 
@@ -252,22 +233,16 @@
 		@include clay-css($alert-autofit-row);
 
 		> .autofit-col {
-			$autofit-col: setter(map-get($alert-autofit-row, autofit-col), ());
-
-			@include clay-css($autofit-col);
+			@include clay-css(map-get($alert-autofit-row, autofit-col));
 		}
 
 		.btn-group {
-			$btn-group: setter(map-get($alert-autofit-row, btn-group), ());
-
-			@include clay-css($btn-group);
+			@include clay-css(map-get($alert-autofit-row, btn-group));
 		}
 	}
 
 	.close {
-		$close: setter(map-get($alert-autofit-stacked, close), ());
-
-		@include clay-close($close);
+		@include clay-close(map-get($alert-autofit-stacked, close));
 	}
 }
 
@@ -287,27 +262,21 @@
 		}
 
 		> .autofit-col {
-			$autofit-col: setter(map-get($alert-autofit-row, autofit-col), ());
-
 			@include media-breakpoint-down(sm) {
-				@include clay-css($autofit-col);
+				@include clay-css(map-get($alert-autofit-row, autofit-col));
 			}
 		}
 
 		.btn-group {
-			$btn-group: setter(map-get($alert-autofit-row, btn-group), ());
-
 			@include media-breakpoint-down(sm) {
-				@include clay-css($btn-group);
+				@include clay-css(map-get($alert-autofit-row, btn-group));
 			}
 		}
 	}
 
 	.close {
-		$close: setter(map-get($alert-autofit-stacked-sm-down, close), ());
-
 		@include media-breakpoint-down(sm) {
-			@include clay-css($close);
+			@include clay-css(map-get($alert-autofit-stacked-sm-down, close));
 		}
 	}
 }
@@ -328,27 +297,21 @@
 		}
 
 		> .autofit-col {
-			$autofit-col: setter(map-get($alert-autofit-row, autofit-col), ());
-
 			@include media-breakpoint-down(xs) {
-				@include clay-css($autofit-col);
+				@include clay-css(map-get($alert-autofit-row, autofit-col));
 			}
 		}
 
 		.btn-group {
-			$btn-group: setter(map-get($alert-autofit-row, btn-group), ());
-
 			@include media-breakpoint-down(xs) {
-				@include clay-css($btn-group);
+				@include clay-css(map-get($alert-autofit-row, btn-group));
 			}
 		}
 	}
 
 	.close {
-		$close: setter(map-get($alert-autofit-stacked-xs-down, close), ());
-
 		@include media-breakpoint-down(xs) {
-			@include clay-css($close);
+			@include clay-css(map-get($alert-autofit-stacked-xs-down, close));
 		}
 	}
 }
@@ -365,22 +328,12 @@
 
 		> .container,
 		> .container-fluid {
-			$container-fluid: setter(
-				map-get($alert-fluid, container-fluid),
-				()
-			);
-
-			@include clay-css($container-fluid);
+			@include clay-css(map-get($alert-fluid, container-fluid));
 		}
 	}
 
 	&.alert-feedback {
-		$alert-feedback: setter(
-			map-get($alert-indicator-start, alert-feedback),
-			()
-		);
-
-		@include clay-css($alert-feedback);
+		@include clay-css(map-get($alert-indicator-start, alert-feedback));
 	}
 
 	.alert-indicator {
@@ -392,9 +345,7 @@
 		@include clay-css($alert-indicator);
 
 		+ .lead {
-			$lead: setter(map-get($alert-indicator, lead), ());
-
-			@include clay-css($lead);
+			@include clay-css(map-get($alert-indicator, lead));
 		}
 	}
 
@@ -407,12 +358,9 @@
 		@include clay-css($alert-autofit-row);
 
 		.alert-indicator:only-child {
-			$alert-indicator-only-child: setter(
-				map-get($alert-autofit-row, alert-indicator-only-child),
-				()
+			@include clay-css(
+				map-get($alert-autofit-row, alert-indicator-only-child)
 			);
-
-			@include clay-css($alert-indicator-only-child);
 		}
 	}
 }

package/src/scss/components/_buttons.scss

@@ -8,11 +8,11 @@ fieldset:disabled a.btn {
 	@include clay-css($btn-disabled);
 
 	&:focus {
-		@include clay-css(setter(map-get($btn-disabled, focus), ()));
+		@include clay-css(map-get($btn-disabled, focus));
 	}
 
 	&:active {
-		@include clay-css(setter(map-get($btn-disabled, active), ()));
+		@include clay-css(map-get($btn-disabled, active));
 	}
 }
 
@@ -119,7 +119,11 @@ input[type='button'] {
 			starts-with($color, '#') or
 			starts-with($color, '%'),
 		$color,
-		str-insert($color, '.btn-', 1)
+		if(
+			starts-with($color, 'btn-'),
+			str-insert($color, '.', 1),
+			str-insert($color, '.btn-', 1)
+		)
 	);
 
 	@if (starts-with($color, '%') or map-get($value, extend)) {
@@ -127,17 +131,9 @@ input[type='button'] {
 			@include clay-button-variant($value);
 		}
 	} @else {
-		$placeholder: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}',
-			'%btn-#{$color}'
-		);
+		$placeholder: '%#{str-slice($selector, 2)}';
 
-		$placeholder-focus: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}-focus',
-			'%btn-#{$color}-focus'
-		);
+		$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
 
 		#{$placeholder} {
 			@include clay-button-variant($value);
@@ -161,7 +157,11 @@ input[type='button'] {
 			starts-with($color, '#') or
 			starts-with($color, '%'),
 		$color,
-		str-insert($color, '.btn-outline-', 1)
+		if(
+			starts-with($color, 'btn-'),
+			str-insert($color, '.', 1),
+			str-insert($color, '.btn-outline-', 1)
+		)
 	);
 
 	@if (starts-with($color, '%') or map-get($value, extend)) {
@@ -169,17 +169,9 @@ input[type='button'] {
 			@include clay-button-variant($value);
 		}
 	} @else {
-		$placeholder: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}',
-			'%btn-outline-#{$color}'
-		);
+		$placeholder: '%#{str-slice($selector, 2)}';
 
-		$placeholder-focus: if(
-			starts-with($color, '.') or starts-with($color, '#'),
-			'%#{str-slice($color, 2)}-focus',
-			'%btn-outline-#{$color}-focus'
-		);
+		$placeholder-focus: '%#{str-slice($selector, 2)}-focus';
 
 		#{$placeholder} {
 			@include clay-button-variant($value);

package/src/scss/components/_custom-forms.scss

@@ -66,15 +66,11 @@
 	@include clay-css($custom-control);
 
 	&:only-child {
-		$only-child: setter(map-get($custom-control, only-child), ());
-
-		@include clay-css($only-child);
+		@include clay-css(map-get($custom-control, only-child));
 	}
 
 	label {
-		$label: setter(map-get($custom-control, label), ());
-
-		@include clay-css($label);
+		@include clay-css(map-get($custom-control, label));
 	}
 }
 
@@ -106,15 +102,11 @@ label.custom-control-label {
 // Custom Control Indicator
 
 .custom-control-label::before {
-	$before: setter(map-get($custom-control-label, before), ());
-
-	@include clay-css($before);
+	@include clay-css(map-get($custom-control-label, before));
 }
 
 .custom-control-label::after {
-	$after: setter(map-get($custom-control-label, after), ());
-
-	@include clay-css($after);
+	@include clay-css(map-get($custom-control-label, after));
 }
 
 .custom-control-input {

package/src/scss/components/_date-picker.scss

@@ -76,42 +76,25 @@
 	@include clay-css($date-picker-col);
 
 	&.c-selected {
-		$_c-selected: setter(map-get($date-picker-col, c-selected), ());
-
-		@include clay-css($_c-selected);
+		@include clay-css(map-get($date-picker-col, c-selected));
 
 		&:first-child {
-			$_c-selected-first-child: setter(
-				map-get($date-picker-col, c-selected-first-child),
-				()
+			@include clay-css(
+				map-get($date-picker-col, c-selected-first-child)
 			);
-
-			@include clay-css($_c-selected-first-child);
 		}
 
 		&:last-child {
-			$_c-selected-last-child: setter(
-				map-get($date-picker-col, c-selected-last-child),
-				()
-			);
-
-			@include clay-css($_c-selected-last-child);
+			@include clay-css(map-get($date-picker-col, c-selected-last-child));
 		}
 	}
 
 	&.c-selected-start {
-		$_c-selected-start: setter(
-			map-get($date-picker-col, c-selected-start),
-			()
-		);
-
-		@include clay-css($_c-selected-start);
+		@include clay-css(map-get($date-picker-col, c-selected-start));
 	}
 
 	&.c-selected-end {
-		$_c-selected-end: setter(map-get($date-picker-col, c-selected-end), ());
-
-		@include clay-css($_c-selected-end);
+		@include clay-css(map-get($date-picker-col, c-selected-end));
 	}
 }
 

package/src/scss/components/_dropdowns.scss

@@ -15,11 +15,11 @@
 	@include clay-css($dropdown-header);
 
 	@include media-breakpoint-down(map-get($dropdown-header, breakpoint-down)) {
-		@include clay-css(setter(map-get($dropdown-header, mobile), ()));
+		@include clay-css(map-get($dropdown-header, mobile));
 	}
 
 	&:first-child {
-		@include clay-css(setter(map-get($dropdown-header, first-child), ()));
+		@include clay-css(map-get($dropdown-header, first-child));
 	}
 }
 
@@ -27,9 +27,7 @@
 	@include clay-css($dropdown-subheader);
 
 	&:first-child {
-		@include clay-css(
-			setter(map-get($dropdown-subheader, first-child), ())
-		);
+		@include clay-css(map-get($dropdown-subheader, first-child));
 	}
 }
 
@@ -62,41 +60,30 @@
 
 	.form-group + .form-group {
 		@include clay-css(
-			setter(map-deep-get($dropdown-section, form-group, form-group), ())
+			map-deep-get($dropdown-section, form-group, form-group)
 		);
 	}
 
 	.custom-control {
-		@include clay-css(
-			setter(map-get($dropdown-section, custom-control), ())
-		);
+		@include clay-css(map-get($dropdown-section, custom-control));
 	}
 
 	.custom-control-label {
-		@include clay-css(
-			setter(map-get($dropdown-section, custom-control-label), ())
-		);
+		@include clay-css(map-get($dropdown-section, custom-control-label));
 	}
 
 	.custom-control-label-text {
 		@include clay-css(
-			setter(map-get($dropdown-section, custom-control-label-text), ())
+			map-get($dropdown-section, custom-control-label-text)
 		);
 	}
 
 	&.active {
-		@include clay-css(setter(map-get($dropdown-section, active), ()));
+		@include clay-css(map-get($dropdown-section, active));
 
 		.custom-control-label {
 			@include clay-css(
-				setter(
-					map-deep-get(
-						$dropdown-section,
-						active,
-						custom-control-label
-					),
-					()
-				)
+				map-deep-get($dropdown-section, active, custom-control-label)
 			);
 		}
 	}
@@ -225,7 +212,7 @@
 
 	> .dropdown-toggle {
 		@include clay-button-variant(
-			setter(map-get($dropdown-action, dropdown-toggle), ())
+			map-get($dropdown-action, dropdown-toggle)
 		);
 	}
 }
@@ -251,17 +238,21 @@
 	.dropdown-subheader,
 	.dropdown-caption,
 	.dropdown-item {
-		padding-left: $dropdown-item-padding-x + $dropdown-item-indicator-size +
-			$dropdown-item-indicator-spacer-x;
+		padding-left: calc(
+			#{$dropdown-item-padding-x} + #{$dropdown-item-indicator-size} + #{$dropdown-item-indicator-spacer-x}
+		);
 	}
 
 	@if ($enable-c-inner) {
 		.dropdown-item {
 			.c-inner {
-				margin-left: math-sign(
-					$dropdown-item-padding-x +
-						$dropdown-item-indicator-size +
-						$dropdown-item-indicator-spacer-x
+				margin-left: calc(
+					(
+							#{$dropdown-item-padding-x} +
+								#{$dropdown-item-indicator-size} +
+								#{$dropdown-item-indicator-spacer-x}
+						) *
+						-1
 				);
 			}
 		}
@@ -292,15 +283,19 @@
 	}
 
 	.dropdown-item {
-		padding-right: $dropdown-item-padding-x + $dropdown-item-indicator-size +
-			$dropdown-item-indicator-spacer-x;
+		padding-right: calc(
+			#{$dropdown-item-padding-x} + #{$dropdown-item-indicator-size} + #{$dropdown-item-indicator-spacer-x}
+		);
 
 		@if ($enable-c-inner) {
 			.c-inner {
-				margin-right: math-sign(
-					$dropdown-item-padding-x +
-						$dropdown-item-indicator-size +
-						$dropdown-item-indicator-spacer-x
+				margin-right: calc(
+					(
+							#{$dropdown-item-padding-x} +
+								#{$dropdown-item-indicator-size} +
+								#{$dropdown-item-indicator-spacer-x}
+						) *
+						-1
 				);
 			}
 		}