@clayui/css 3.74.0 → 3.76.0

package/src/scss/mixins/_utilities.scss

@@ -123,45 +123,47 @@
 /// autofit-col-padding-top: {Number | String | Null}, // deprecated after 3.9.0
 
 @mixin clay-autofit-row($map) {
-	$enabled: setter(map-get($map, enabled), true);
-
-	$autofit-col: setter(map-get($map, autofit-col), ());
-	$autofit-col: map-merge(
-		$autofit-col,
-		(
-			padding:
-				setter(
-					map-get($map, autofit-col-padding),
-					map-get($autofit-col, padding)
-				),
-			padding-bottom:
-				setter(
-					map-get($map, autofit-col-padding-bottom),
-					map-get($autofit-col, padding-bottom)
-				),
-			padding-left:
-				setter(
-					map-get($map, autofit-col-padding-left),
-					map-get($autofit-col, padding-left)
-				),
-			padding-right:
-				setter(
-					map-get($map, autofit-col-padding-right),
-					map-get($autofit-col, padding-right)
-				),
-			padding-top:
-				setter(
-					map-get($map, autofit-col-padding-top),
-					map-get($autofit-col, padding-top)
-				),
-		)
-	);
-
-	@if ($enabled) {
-		@include clay-css($map);
-
-		> .autofit-col {
-			@include clay-css($autofit-col);
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		$autofit-col: setter(map-get($map, autofit-col), ());
+		$autofit-col: map-merge(
+			$autofit-col,
+			(
+				padding:
+					setter(
+						map-get($map, autofit-col-padding),
+						map-get($autofit-col, padding)
+					),
+				padding-bottom:
+					setter(
+						map-get($map, autofit-col-padding-bottom),
+						map-get($autofit-col, padding-bottom)
+					),
+				padding-left:
+					setter(
+						map-get($map, autofit-col-padding-left),
+						map-get($autofit-col, padding-left)
+					),
+				padding-right:
+					setter(
+						map-get($map, autofit-col-padding-right),
+						map-get($autofit-col, padding-right)
+					),
+				padding-top:
+					setter(
+						map-get($map, autofit-col-padding-top),
+						map-get($autofit-col, padding-top)
+					),
+			)
+		);
+
+		@if ($enabled) {
+			@include clay-css($map);
+
+			> .autofit-col {
+				@include clay-css($autofit-col);
+			}
 		}
 	}
 }

package/src/scss/variables/_alerts.scss

@@ -14,13 +14,36 @@ $alert-padding-y: 0.75rem !default;
 $alert-btn: () !default;
 $alert-btn: map-deep-merge(
 	(
-		border-radius: $btn-border-radius-sm,
-		font-size: $btn-font-size-sm,
-		line-height: $btn-line-height-sm,
-		padding-bottom: $btn-padding-y-sm,
-		padding-left: $btn-padding-x-sm,
-		padding-right: $btn-padding-x-sm,
-		padding-top: $btn-padding-y-sm,
+		border-radius:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, border-radius),
+				$border-radius-sm
+			),
+		font-size:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, font-size),
+				$font-size-sm
+			),
+		line-height:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, line-height),
+				$line-height-sm
+			),
+		padding-bottom:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, padding-bottom),
+				0.25rem
+			),
+		padding-left:
+			if(variable-exists(btn-sm), map-get($btn-sm, padding-left), 0.5rem),
+		padding-right:
+			if(variable-exists(btn-sm), map-get($btn-sm, padding-right), 0.5rem),
+		padding-top:
+			if(variable-exists(btn-sm), map-get($btn-sm, padding-top), 0.25rem),
 	),
 	$alert-btn
 );

package/src/scss/variables/_badges.scss

@@ -11,7 +11,7 @@ $badge-font-size: 75% !default;
 $badge-font-weight: $font-weight-bold !default;
 $badge-padding-x: 0.4em !default;
 $badge-padding-y: 0.25em !default;
-$badge-transition: $btn-transition !default;
+$badge-transition: $component-transition !default;
 
 $badge-spacer-x: 0.25rem !default; // 4px
 $badge-spacer-y: 0.125rem !default; // 2px

package/src/scss/variables/_buttons.scss

@@ -9,8 +9,7 @@ $btn-font-weight: $font-weight-normal !default;
 $btn-line-height: $input-btn-line-height !default;
 $btn-padding-x: $input-btn-padding-x !default;
 $btn-padding-y: $input-btn-padding-y !default;
-$btn-transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
-	border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+$btn-transition: $component-transition !default;
 $btn-white-space: null !default;
 
 $btn-font-size-mobile: null !default;
@@ -23,7 +22,7 @@ $btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
 $btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125) !default;
 
 $btn-disabled-cursor: $disabled-cursor !default;
-$btn-disabled-opacity: 0.65 !default;
+$btn-disabled-opacity: $component-disabled-opacity !default;
 
 $btn-inline-item-font-size: null !default;
 

package/src/scss/variables/_cards.scss

@@ -679,7 +679,7 @@ $card-interactive: map-deep-merge(
 	(
 		cursor: $link-cursor,
 		outline: 0,
-		transition: $btn-transition,
+		transition: $component-transition,
 		hover: (
 			background-color: $gray-100,
 			text-decoration: none,

package/src/scss/variables/_clay-color.scss

@@ -93,7 +93,7 @@ $clay-color-dropdown-menu-component-action: map-deep-merge(
 	(
 		hover-bg: transparent,
 		hover-color: $black,
-		focus-box-shadow: $btn-focus-box-shadow,
+		focus-box-shadow: $component-focus-box-shadow,
 		focus-color: $black,
 	),
 	$clay-color-dropdown-menu-component-action
@@ -170,7 +170,7 @@ $clay-color-pointer: map-deep-merge(
 		position: absolute,
 		transition: box-shadow 0.15s ease-in-out,
 		width: 0.875rem,
-		focus-box-shadow: $btn-focus-box-shadow,
+		focus-box-shadow: $component-focus-box-shadow,
 		focus-outline: 0,
 	),
 	$clay-color-pointer

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

@@ -30,13 +30,13 @@ $date-picker-nav-btn: () !default;
 $date-picker-nav-btn: map-deep-merge(
 	(
 		color: $gray-600,
-		transition: $btn-transition,
+		transition: $component-transition,
 		hover-bg: $gray-200,
 		focus-box-shadow: $input-btn-focus-box-shadow,
 		disabled-bg: transparent,
 		disabled-box-shadow: none,
 		disabled-color: $gray-600,
-		disabled-opacity: $btn-disabled-opacity,
+		disabled-opacity: $component-disabled-opacity,
 	),
 	$date-picker-nav-btn
 );
@@ -184,7 +184,7 @@ $date-picker-calendar-item: map-deep-merge(
 		padding-left: 0,
 		padding-right: 0,
 		padding-top: 0,
-		transition: $btn-transition,
+		transition: $component-transition,
 		user-select: none,
 		vertical-align: middle,
 		white-space: nowrap,
@@ -207,7 +207,7 @@ $date-picker-date: map-deep-merge(
 		active-color: $component-active-color,
 		disabled-bg: transparent,
 		disabled-box-shadow: none,
-		disabled-opacity: $btn-disabled-opacity,
+		disabled-opacity: $component-disabled-opacity,
 	),
 	$date-picker-date
 );

package/src/scss/variables/_dropdowns.scss

@@ -840,7 +840,11 @@ $dropdown-action-toggle-disabled-cursor: $disabled-cursor !default;
 
 $dropdown-action-toggle-disabled-opacity: 0.65 !default;
 
-$dropdown-action-toggle-size: $btn-monospaced-size-sm !default;
+$dropdown-action-toggle-size: if(
+	variable-exists(btn-monospaced-size-sm),
+	$btn-monospaced-size-sm,
+	1.9375rem
+) !default;
 
 $dropdown-action: () !default;
 $dropdown-action: map-deep-merge(
@@ -852,7 +856,7 @@ $dropdown-action: map-deep-merge(
 			align-items: center,
 			border-radius:
 				clay-enable-rounded($dropdown-action-toggle-border-radius),
-			cursor: $btn-cursor,
+			cursor: $link-cursor,
 			display: flex,
 			font-size: inherit,
 			font-weight: inherit,

package/src/scss/variables/_forms.scss

@@ -497,8 +497,10 @@ $form-control-tag-group-btn: map-deep-merge(
 		margin-bottom: $form-control-inset-margin-y,
 		margin-top: $form-control-inset-margin-y,
 		padding-bottom: 0,
-		padding-left: $btn-padding-x-sm,
-		padding-right: $btn-padding-x-sm,
+		padding-left:
+			if(variable-exists(btn-padding-x-sm), $btn-padding-x-sm, 0.5rem),
+		padding-right:
+			if(variable-exists(btn-padding-x-sm), $btn-padding-x-sm, 0.5rem),
 		padding-top: 0,
 	),
 	$form-control-tag-group-btn
@@ -1531,24 +1533,77 @@ $input-group-lg-item-btn: () !default; // .input-group-lg .input-group-item
 $input-group-lg-item-btn: map-deep-merge(
 	(
 		breakpoint-down: null,
-		font-size: $btn-font-size-lg,
-		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),
+		font-size:
+			if(
+				variable-exists(btn-lg),
+				map-get($btn-lg, font-size),
+				$font-size-lg
+			),
+		line-height:
+			if(
+				variable-exists(btn-lg),
+				map-get($btn-lg, line-height),
+				$line-height-lg
+			),
+		padding-bottom:
+			if(
+				variable-exists(btn-lg),
+				map-get($btn-lg, padding-bottom),
+				0.375rem
+			),
+		padding-left:
+			if(variable-exists(btn-lg), map-get($btn-lg, padding-left), 1rem),
+		padding-right:
+			if(variable-exists(btn-lg), map-get($btn-lg, padding-right), 1rem),
+		padding-top:
+			if(variable-exists(btn-lg), map-get($btn-lg, padding-top), 0.375rem),
 		inline-item: (
-			font-size: $btn-inline-item-font-size-lg,
+			font-size:
+				if(
+					variable-exists(btn-lg),
+					map-deep-get($btn-lg, inline-item, font-size),
+					null
+				),
 		),
 		btn-section: (
-			font-size: $btn-section-font-size-lg,
+			font-size:
+				if(
+					variable-exists(btn-lg),
+					map-deep-get($btn-lg, btn-section, font-size),
+					0.8125rem
+				),
 		),
 		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,
+			font-size:
+				if(
+					variable-exists(btn-lg),
+					map-deep-get($btn-lg, mobile, font-size),
+					null
+				),
+			padding-bottom:
+				if(
+					variable-exists(btn-lg),
+					map-deep-get($btn-lg, mobile, padding-bottom),
+					null
+				),
+			padding-left:
+				if(
+					variable-exists(btn-lg),
+					map-deep-get($btn-lg, mobile, padding-left),
+					null
+				),
+			padding-right:
+				if(
+					variable-exists(btn-lg),
+					map-deep-get($btn-lg, mobile, padding-right),
+					null
+				),
+			padding-top:
+				if(
+					variable-exists(btn-lg),
+					map-deep-get($btn-lg, mobile, padding-top),
+					null
+				),
 		),
 	),
 	$input-group-lg-item-btn
@@ -1558,16 +1613,56 @@ $input-group-lg-item-btn-monospaced: () !default;
 $input-group-lg-item-btn-monospaced: map-deep-merge(
 	(
 		breakpoint-down: null,
-		height: $btn-monospaced-size-lg,
+		height:
+			if(
+				variable-exists(btn-monospaced-lg),
+				map-get($btn-monospaced-lg, height),
+				3rem
+			),
 		line-height: 1,
-		padding-bottom: $btn-monospaced-padding-y-lg,
-		padding-left: $btn-monospaced-padding-x-lg,
-		padding-right: $btn-monospaced-padding-x-lg,
-		padding-top: $btn-monospaced-padding-y-lg,
-		width: $btn-monospaced-size-lg,
+		padding-bottom:
+			if(
+				variable-exists(btn-monospaced-lg),
+				map-get($btn-monospaced-lg, padding-bottom),
+				null
+			),
+		padding-left:
+			if(
+				variable-exists(btn-monospaced-lg),
+				map-get($btn-monospaced-lg, padding-left),
+				null
+			),
+		padding-right:
+			if(
+				variable-exists(btn-monospaced-lg),
+				map-get($btn-monospaced-lg, padding-right),
+				null
+			),
+		padding-top:
+			if(
+				variable-exists(btn-monospaced-lg),
+				map-get($btn-monospaced-lg, padding-top),
+				null
+			),
+		width:
+			if(
+				variable-exists(btn-monospaced-lg),
+				map-get($btn-monospaced-lg, width),
+				3rem
+			),
 		mobile: (
-			height: $btn-monospaced-size-lg-mobile,
-			width: $btn-monospaced-size-lg-mobile,
+			height:
+				if(
+					variable-exists(btn-monospaced-lg),
+					map-deep-get($btn-monospaced-lg, mobile, height),
+					null
+				),
+			width:
+				if(
+					variable-exists(btn-monospaced-lg),
+					map-deep-get($btn-monospaced-lg, mobile, width),
+					null
+				),
 		),
 	),
 	$input-group-lg-item-btn-monospaced
@@ -1683,24 +1778,77 @@ $input-group-addon-padding-y-sm: null !default;
 $input-group-sm-item-btn: () !default;
 $input-group-sm-item-btn: map-deep-merge(
 	(
-		font-size: $btn-font-size-sm,
-		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),
+		font-size:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, font-size),
+				$font-size-sm
+			),
+		line-height:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, line-height),
+				$line-height-sm
+			),
+		padding-bottom:
+			if(
+				variable-exists(btn-sm),
+				map-get($btn-sm, padding-bottom),
+				0.25rem
+			),
+		padding-left:
+			if(variable-exists(btn-sm), map-get($btn-sm, padding-left), 0.5rem),
+		padding-right:
+			if(variable-exists(btn-sm), map-get($btn-sm, padding-right), 0.5rem),
+		padding-top:
+			if(variable-exists(btn-sm), map-get($btn-sm, padding-top), 0.25rem),
 		inline-item: (
-			font-size: $btn-inline-item-font-size-sm,
+			font-size:
+				if(
+					variable-exists(btn-sm),
+					map-deep-get($btn-sm, inline-item, font-size),
+					null
+				),
 		),
 		btn-section: (
-			font-size: $btn-section-font-size-sm,
+			font-size:
+				if(
+					variable-exists(btn-sm),
+					map-deep-get($btn-sm, btn-section, font-size),
+					0.5625rem
+				),
 		),
 		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,
+			font-size:
+				if(
+					variable-exists(btn-sm),
+					map-deep-get($btn-sm, mobile, font-size),
+					null
+				),
+			padding-bottom:
+				if(
+					variable-exists(btn-sm),
+					map-deep-get($btn-sm, mobile, padding-bottom),
+					null
+				),
+			padding-left:
+				if(
+					variable-exists(btn-sm),
+					map-deep-get($btn-sm, mobile, padding-left),
+					null
+				),
+			padding-right:
+				if(
+					variable-exists(btn-sm),
+					map-deep-get($btn-sm, mobile, padding-right),
+					null
+				),
+			padding-top:
+				if(
+					variable-exists(btn-sm),
+					map-deep-get($btn-sm, mobile, padding-top),
+					null
+				),
 		),
 	),
 	$input-group-sm-item-btn
@@ -1709,16 +1857,56 @@ $input-group-sm-item-btn: map-deep-merge(
 $input-group-sm-item-btn-monospaced: () !default;
 $input-group-sm-item-btn-monospaced: map-deep-merge(
 	(
-		height: $btn-monospaced-size-sm,
+		height:
+			if(
+				variable-exists(btn-monospaced-sm),
+				map-get($btn-monospaced-sm, height),
+				1.9375rem
+			),
 		line-height: 1,
-		padding-bottom: $btn-monospaced-padding-y-sm,
-		padding-left: $btn-monospaced-padding-x-sm,
-		padding-right: $btn-monospaced-padding-x-sm,
-		padding-top: $btn-monospaced-padding-y-sm,
-		width: $btn-monospaced-size-sm,
+		padding-bottom:
+			if(
+				variable-exists(btn-monospaced-sm),
+				map-get($btn-monospaced-sm, padding-bottom),
+				null
+			),
+		padding-left:
+			if(
+				variable-exists(btn-monospaced-sm),
+				map-get($btn-monospaced-sm, padding-left),
+				null
+			),
+		padding-right:
+			if(
+				variable-exists(btn-monospaced-sm),
+				map-get($btn-monospaced-sm, padding-right),
+				null
+			),
+		padding-top:
+			if(
+				variable-exists(btn-monospaced-sm),
+				map-get($btn-monospaced-sm, padding-top),
+				null
+			),
+		width:
+			if(
+				variable-exists(btn-monospaced-sm),
+				map-get($btn-monospaced-sm, width),
+				1.9375rem
+			),
 		mobile: (
-			height: $btn-monospaced-size-sm-mobile,
-			width: $btn-monospaced-size-sm-mobile,
+			height:
+				if(
+					variable-exists(btn-monospaced-sm),
+					map-deep-get($btn-monospaced-sm, mobile, height),
+					null
+				),
+			width:
+				if(
+					variable-exists(btn-monospaced-sm),
+					map-deep-get($btn-monospaced-sm, mobile, width),
+					null
+				),
 		),
 	),
 	$input-group-sm-item-btn-monospaced

package/src/scss/variables/_globals.scss

@@ -258,12 +258,18 @@ $embed-responsive-aspect-ratios: join(
 	$embed-responsive-aspect-ratios
 );
 
+$component-transition: color 0.15s ease-in-out,
+	background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+	box-shadow 0.15s ease-in-out !default;
+
 $component-focus-box-shadow: 0 0 0 0.2rem rgba($primary, 0.25) !default;
 $component-focus-inset-box-shadow: inset 0 0 0 0.2rem rgba($primary, 0.25) !default;
 
 $component-active-color: $white !default;
 $component-active-bg: $primary !default;
 
+$component-disabled-opacity: 0.65 !default;
+
 // Cursors
 
 $link-cursor: pointer !default;

package/src/scss/variables/_labels.scss

@@ -142,7 +142,7 @@ $label-close: map-deep-merge(
 			opacity: 1,
 		),
 		disabled: (
-			opacity: $btn-disabled-opacity,
+			opacity: $component-disabled-opacity,
 		),
 	),
 	$label-close