@clayui/css 3.159.0 → 3.161.0

package/src/scss/atlas/variables/_breadcrumbs.scss

@@ -1,6 +1,6 @@
 $breadcrumb-bg: transparent !default;
 $breadcrumb-font-size: 0.875rem !default; // 14px
-$breadcrumb-margin-bottom: 0 !default;
+$breadcrumb-margin-bottom: 0rem !default;
 $breadcrumb-padding-x: 0.125rem !default; // 2px
 $breadcrumb-padding-y: 0.59375rem !default;
 
@@ -12,6 +12,7 @@ $breadcrumb-link: map-deep-merge(
 	(
 		border-radius: 1px,
 		transition: box-shadow 0.15s ease-in-out,
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,

package/src/scss/atlas/variables/_cards.scss

@@ -71,6 +71,7 @@ $card-link: map-deep-merge(
 	(
 		color: $gray-600,
 		font-size: 0.875rem,
+
 		hover: (
 			color: $gray-600,
 			text-decoration: underline,
@@ -92,10 +93,12 @@ $card-interactive: map-deep-merge(
 		hover: (
 			background-color: #f7f8f9,
 		),
+
 		focus: (
 			border-color: null,
 			box-shadow: $component-focus-box-shadow,
 		),
+
 		active: (
 			background-color: #f1f2f5,
 		),
@@ -112,6 +115,7 @@ $card-interactive-secondary: map-deep-merge(
 			border-color: transparent,
 			box-shadow: 0 0 0 2px $primary-l0,
 		),
+
 		focus: (
 			border-color: transparent,
 			box-shadow: 0 0 0 2px $primary-l0,
@@ -128,6 +132,7 @@ $card-type-asset: map-deep-merge(
 		aspect-ratio: (
 			border-color: $gray-300,
 		),
+
 		card-body: (
 			padding-top: 0.75rem,
 		),

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

@@ -6,15 +6,19 @@ $clay-color-dropdown-menu-close: map-deep-merge(
 		color: $gray-600,
 		font-size: 1rem,
 		opacity: 1,
+
 		hover: (
 			background-color: rgba($gray-900, 0.03),
 		),
+
 		focus: (
 			background-color: rgba($gray-900, 0.03),
 		),
+
 		active: (
 			background-color: rgba($gray-900, 0.06),
 		),
+
 		disabled: (
 			background-color: transparent,
 		),
@@ -31,6 +35,7 @@ $clay-color-dropdown-menu-component-action: map-deep-merge(
 			background-color: null,
 			color: null,
 		),
+
 		focus: (
 			box-shadow: null,
 			color: null,

package/src/scss/atlas/variables/_custom-forms.scss

@@ -3,12 +3,12 @@ $custom-control-indicator-border-color: $gray-600 !default;
 $custom-control-indicator-border-style: solid !default;
 $custom-control-indicator-border-width: 0.0625rem !default; // 1px
 $custom-control-indicator-box-shadow: none !default;
-$custom-control-indicator-position-top: 0 !default;
+$custom-control-indicator-position-top: 0rem !default;
 
 $custom-control-indicator-focus-border-color: $custom-control-indicator-border-color !default;
 $custom-control-indicator-focus-box-shadow: $component-focus-box-shadow !default;
 
-$custom-control-indicator-active-bg: $white !default;
+$custom-control-indicator-active-bg: $custom-control-indicator-bg !default;
 $custom-control-indicator-active-border-color: $custom-control-indicator-border-color !default;
 $custom-control-indicator-active-box-shadow: c-unset !default;
 
@@ -28,11 +28,13 @@ $custom-control-indicator-checked-color: $component-active-color !default;
 // @deprecated as of v2.2.1 use `$custom-control-indicator-checked-active-bg` instead
 
 $custom-control-indicator-active-checked-bg: $component-active-bg !default;
+
 $custom-control-indicator-checked-active-bg: $custom-control-indicator-active-checked-bg !default;
 
 // @deprecated as of v2.2.1 use `$custom-control-indicator-checked-active-border-color` instead
 
 $custom-control-indicator-active-checked-border-color: $custom-control-indicator-checked-active-bg !default;
+
 $custom-control-indicator-checked-active-border-color: $custom-control-indicator-active-checked-border-color !default;
 
 // @deprecated as of v2.2.1 use `$custom-control-indicator-checked-disabled-bg` instead
@@ -41,11 +43,13 @@ $custom-control-indicator-disabled-checked-bg: clay-lighten(
 	$component-active-bg,
 	32.94
 ) !default;
+
 $custom-control-indicator-checked-disabled-bg: $custom-control-indicator-disabled-checked-bg !default;
 
 // @deprecated as of v2.2.1 use `$custom-control-indicator-checked-disabled-border-color` instead
 
 $custom-control-indicator-disabled-checked-border-color: $custom-control-indicator-disabled-checked-bg !default;
+
 $custom-control-indicator-checked-disabled-border-color: $custom-control-indicator-disabled-checked-border-color !default;
 
 // Custom Control Indicator Indeterminate
@@ -89,6 +93,7 @@ $custom-control-label: map-deep-merge(
 	(
 		font-size: $custom-control-description-font-size,
 		font-weight: $custom-control-description-font-weight,
+
 		before: (
 			background-color: $custom-control-indicator-bg,
 			border-color: $custom-control-indicator-border-color,
@@ -98,6 +103,7 @@ $custom-control-label: map-deep-merge(
 				clay-enable-shadows($custom-control-indicator-box-shadow),
 			top: 0.25rem,
 		),
+
 		after: (
 			top: $custom-control-indicator-position-top,
 		),
@@ -109,6 +115,7 @@ $custom-control-label-disabled: () !default;
 $custom-control-label-disabled: map-deep-merge(
 	(
 		color: $custom-control-label-disabled-color,
+
 		before: (
 			background-color: $custom-control-indicator-disabled-bg,
 			border-color: $custom-control-indicator-disabled-border-color,
@@ -147,11 +154,13 @@ $custom-control-input: map-deep-merge(
 				before: (
 					border-color: $custom-control-indicator-focus-border-color,
 				),
+
 				after: (
 					box-shadow: $custom-control-indicator-focus-box-shadow,
 				),
 			),
 		),
+
 		active: (
 			custom-control-label: (
 				before: (
@@ -161,23 +170,28 @@ $custom-control-input: map-deep-merge(
 				),
 			),
 		),
+
 		disabled: (
 			custom-control-label: $custom-control-label-disabled,
 		),
+
 		readonly: (
 			custom-control-label: (
 				color: $gray-900,
+
 				before: (
 					background-color: $gray-200,
 					border-color: $secondary-l3,
 				),
 			),
+
 			disabled: (
 				custom-control-label: (
 					color: $custom-control-label-disabled-color,
 				),
 			),
 		),
+
 		checked: (
 			custom-control-label: (
 				before: (
@@ -186,6 +200,7 @@ $custom-control-input: map-deep-merge(
 					color: $custom-control-indicator-checked-color,
 				),
 			),
+
 			active: (
 				custom-control-label: (
 					before: (
@@ -205,7 +220,7 @@ $custom-control-input: map-deep-merge(
 
 $custom-checkbox-indicator-icon-checked: clay-icon(
 	check-small,
-	$white
+	$custom-control-indicator-checked-color
 ) !default;
 $custom-checkbox-indicator-icon-checked-bg-size: 1rem !default;
 $custom-checkbox-indicator-icon-indeterminate-bg-size: 1rem !default;
@@ -233,6 +248,7 @@ $custom-checkbox: map-deep-merge(
 						),
 				),
 			),
+
 			checked: (
 				custom-control-label: (
 					before: (),
@@ -243,6 +259,7 @@ $custom-checkbox: map-deep-merge(
 							$custom-checkbox-indicator-icon-checked-bg-size,
 					),
 				),
+
 				disabled: (
 					custom-control-label: (
 						before: (
@@ -253,21 +270,25 @@ $custom-checkbox: map-deep-merge(
 						),
 					),
 				),
+
 				readonly: (
 					custom-control-label: (
 						before: (
-							background-color: $white,
+							background-color: $custom-control-indicator-bg,
 							border-color: $secondary-l2,
 						),
+
 						after: (
 							background-image: clay-icon(check-small, $secondary),
 						),
 					),
+
 					disabled: (
 						custom-control-label: (
 							before: (
 								opacity: 0.4,
 							),
+
 							after: (
 								opacity: 0.4,
 							),
@@ -275,6 +296,7 @@ $custom-checkbox: map-deep-merge(
 					),
 				),
 			),
+
 			indeterminate: (
 				custom-control-label: (
 					before: (
@@ -285,6 +307,7 @@ $custom-checkbox: map-deep-merge(
 						box-shadow:
 							$custom-checkbox-indicator-indeterminate-box-shadow,
 					),
+
 					after: (
 						background-image:
 							$custom-checkbox-indicator-icon-indeterminate,
@@ -292,6 +315,7 @@ $custom-checkbox: map-deep-merge(
 							$custom-checkbox-indicator-icon-indeterminate-bg-size,
 					),
 				),
+
 				disabled: (
 					custom-control-label: (
 						before: (
@@ -302,21 +326,25 @@ $custom-checkbox: map-deep-merge(
 						),
 					),
 				),
+
 				readonly: (
 					custom-control-label: (
 						before: (
-							background-color: $white,
+							background-color: $custom-control-indicator-bg,
 							border-color: $secondary-l2,
 						),
+
 						after: (
 							background-image: clay-icon(hr, $secondary),
 						),
 					),
+
 					disabled: (
 						custom-control-label: (
 							before: (
 								opacity: 0.4,
 							),
+
 							after: (
 								opacity: 0.4,
 							),
@@ -339,6 +367,7 @@ $custom-radio-indicator-disabled-border-color: $custom-control-indicator-disable
 // @deprecated as of v2.2.1 use `$custom-radio-indicator-checked-disabled-border-color` instead
 
 $custom-radio-indicator-disabled-checked-border-color: $custom-control-indicator-disabled-checked-border-color !default;
+
 $custom-radio-indicator-checked-disabled-border-color: $custom-radio-indicator-disabled-checked-border-color !default;
 
 $custom-radio: () !default;
@@ -353,6 +382,7 @@ $custom-radio: map-deep-merge(
 					),
 				),
 			),
+
 			checked: (
 				custom-control-label: (
 					after: (
@@ -361,6 +391,7 @@ $custom-radio: map-deep-merge(
 							$custom-radio-indicator-icon-checked-bg-size,
 					),
 				),
+
 				disabled: (
 					custom-control-label: (
 						before: (

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

@@ -16,13 +16,16 @@ $date-picker-nav-btn: map-deep-merge(
 		hover: (
 			color: $gray-900,
 		),
+
 		focus: (
 			background-color: $gray-200,
 			color: $gray-900,
 		),
+
 		active: (
 			background-color: $gray-200,
 		),
+
 		disabled: (
 			color: $gray-500,
 			opacity: null,
@@ -40,17 +43,20 @@ $date-picker-nav-select: map-deep-merge(
 		font-size: $font-size-sm,
 		font-weight: $font-weight-semi-bold,
 		height: if(variable-exists(input-height-sm), $input-height-sm, 2rem),
-		padding-bottom: 0,
+		padding-bottom: 0rem,
 		padding-left: 0.5rem,
-		padding-top: 0,
+		padding-top: 0rem,
+
 		hover: (
 			background-color: $gray-200,
 			color: $gray-900,
 		),
+
 		focus: (
 			background-color: $gray-200,
 			color: $gray-900,
 		),
+
 		disabled: (
 			background-color: transparent,
 			color:
@@ -72,10 +78,12 @@ $date-picker-date: map-deep-merge(
 		hover: (
 			color: $gray-900,
 		),
+
 		focus: (
 			background-color: $gray-200,
 			color: $gray-900,
 		),
+
 		disabled: (
 			color: $gray-500,
 			opacity: null,
@@ -89,9 +97,11 @@ $date-picker-previous-month-date: map-deep-merge(
 	(
 		color: $gray-500,
 		opacity: null,
+
 		focus: (
 			opacity: null,
 		),
+
 		active: (
 			background-color: $primary-l2,
 			color: $secondary,
@@ -105,9 +115,11 @@ $date-picker-next-month-date: map-deep-merge(
 	(
 		color: $gray-500,
 		opacity: null,
+
 		focus: (
 			opacity: null,
 		),
+
 		active: (
 			background-color: $primary-l2,
 		),

package/src/scss/atlas/variables/_dropdowns.scss

@@ -43,11 +43,11 @@ $dropdown-menu: map-deep-merge(
 		border-width: $dropdown-border-width,
 		box-shadow: clay-enable-shadows($dropdown-box-shadow),
 		font-size: $dropdown-font-size,
-		margin: $dropdown-spacer 0 0,
+		margin: $dropdown-spacer 0rem 0rem,
 		max-width: $dropdown-max-width,
 		min-height: $dropdown-min-height,
 		min-width: $dropdown-min-width,
-		padding: $dropdown-padding-y 0,
+		padding: $dropdown-padding-y 0rem,
 	),
 	$dropdown-menu
 );
@@ -95,19 +95,23 @@ $dropdown-item-base: () !default;
 $dropdown-item-base: map-deep-merge(
 	(
 		font-size: inherit,
+
 		focus: (
 			box-shadow: $component-focus-inset-box-shadow,
 			outline: 0,
 			text-decoration: none,
 		),
+
 		active-class: (
 			c-kbd-inline: (
 				color: $dropdown-link-active-color,
 			),
 		),
+
 		disabled: (
 			box-shadow: none,
 		),
+
 		c-kbd-inline: (
 			color: $gray-500,
 		),
@@ -232,9 +236,11 @@ $dropdown-section: map-deep-merge(
 		padding: 0.375rem $dropdown-item-padding-x,
 		custom-control-label: $dropdown-section-custom-control-label,
 		custom-control-label-text: $dropdown-section-custom-control-label-text,
+
 		active: (
 			custom-control-label: $dropdown-section-active-custom-control-label,
 		),
+
 		custom-control-outside: (
 			label: (
 				padding-left: 1.75rem,
@@ -283,6 +289,7 @@ $dropdown-action: map-deep-merge(
 			height: $dropdown-action-toggle-size,
 			line-height: $dropdown-action-toggle-size,
 			width: $dropdown-action-toggle-size,
+
 			disabled: (
 				opacity: $dropdown-action-toggle-disabled-opacity,
 			),

package/src/scss/atlas/variables/_forms.scss

@@ -27,9 +27,9 @@ $input-focus-box-shadow: $component-focus-box-shadow !default;
 
 // Input Disabled (.form-control:disabled)
 
-$input-disabled-color: $gray-500 !default;
 $input-disabled-bg: $input-bg !default;
 $input-disabled-border-color: $input-bg !default;
+$input-disabled-color: $gray-500 !default;
 
 // .form-control:disabled::placeholder
 
@@ -52,21 +52,26 @@ $input: map-deep-merge(
 		padding-left: $input-padding-x,
 		padding-right: $input-padding-x,
 		padding-top: $input-padding-y,
+
 		mobile: (
 			font-size: $input-font-size-mobile,
 		),
+
 		placeholder: (
 			color: $input-placeholder-color,
 		),
+
 		focus: (
 			background-color: $input-focus-bg,
 			border-color: $input-focus-border-color,
 			box-shadow: $input-focus-box-shadow,
 		),
+
 		disabled: (
 			background-color: $input-disabled-bg,
 			border-color: $input-disabled-border-color,
 			color: $input-disabled-color,
+
 			placeholder: (
 				color: $input-placeholder-disabled-color,
 			),
@@ -126,6 +131,7 @@ $input-label: map-deep-merge(
 		font-size: $input-label-font-size,
 		font-weight: $input-label-font-weight,
 		margin-bottom: $input-label-margin-bottom,
+
 		disabled: (
 			color: $input-label-disabled-color,
 		),
@@ -146,6 +152,7 @@ $input-readonly: map-deep-merge(
 	(
 		background-color: $input-readonly-bg,
 		border-color: $input-border-color,
+
 		focus: (
 			border-color: $input-focus-border-color,
 			box-shadow: none,
@@ -195,7 +202,7 @@ $form-text-font-weight: $font-weight-semi-bold !default;
 $form-feedback-font-size: 0.875rem !default; // 14px
 $form-feedback-font-weight: $font-weight-semi-bold !default;
 
-$form-feedback-indicator-margin-x: 0 !default;
+$form-feedback-indicator-margin-x: 0rem !default;
 
 // .has-error .form-control
 
@@ -213,6 +220,7 @@ $input-danger: map-deep-merge(
 		border-color: $input-danger-border-color,
 		box-shadow: $input-danger-box-shadow,
 		color: $input-danger-color,
+
 		focus: (
 			box-shadow: $input-danger-focus-box-shadow,
 		),
@@ -272,6 +280,7 @@ $input-warning: map-deep-merge(
 		border-color: $input-warning-border-color,
 		box-shadow: $input-warning-box-shadow,
 		color: $input-warning-color,
+
 		focus: (
 			box-shadow: $input-warning-focus-box-shadow,
 		),
@@ -331,6 +340,7 @@ $input-success: map-deep-merge(
 		border-color: $input-success-border-color,
 		box-shadow: $input-success-box-shadow,
 		color: $input-success-color,
+
 		focus: (
 			box-shadow: $input-success-focus-box-shadow,
 		),
@@ -361,6 +371,7 @@ $input-success-checkbox-label-color: $success !default;
 // .has-success select.form-control
 
 $input-success-select-icon-color: $input-success-border-color !default;
+
 $input-success-select-icon: clay-icon(
 	caret-double-l,
 	$input-success-select-icon-color
@@ -381,18 +392,21 @@ $input-select-bg-size: 1.5em 1.5em !default;
 $input-select-padding-right: 2em !default;
 
 $input-select-icon-color: $gray-600 !default;
+
 $input-select-icon: clay-icon(
 	caret-double-l,
 	$input-select-icon-color
 ) !default;
 
 $input-select-icon-focus-color: $input-select-icon-color !default;
+
 $input-select-icon-focus: clay-icon(
 	caret-double-l,
 	$input-select-icon-focus-color
 ) !default;
 
 $input-select-icon-disabled-color: $gray-500 !default;
+
 $input-select-icon-disabled: clay-icon(
 	caret-double-l,
 	$input-select-icon-disabled-color
@@ -407,18 +421,22 @@ $form-control-select-palette: map-deep-merge(
 			background-color: $white,
 			border-color: $secondary-l0,
 			color: $gray-600,
+
 			hover: (
 				color: $gray-600,
 			),
+
 			focus: (
 				background-image: clay-icon(caret-double-l, $gray-900),
 				color: $gray-900,
 			),
+
 			disabled: (
 				background-color: $white,
 				color: $gray-600,
 				opacity: $component-disabled-opacity,
 			),
+
 			show: (
 				background-color: $gray-200,
 				background-image: clay-icon(caret-double-l, $gray-900),
@@ -446,6 +464,7 @@ $input-select-size: map-deep-merge(
 				),
 			),
 		),
+
 		disabled: (
 			option: (
 				hover: (
@@ -453,15 +472,18 @@ $input-select-size: map-deep-merge(
 				),
 			),
 		),
+
 		option: (
 			padding: 0.4375rem 0.5rem,
 			hover: (
 				background-image: linear-gradient(#{$gray-300}, #{$gray-300}),
 			),
+
 			checked: (
 				background-image: linear-gradient(#{$light-d2}, #{$light-d2}),
 			),
 		),
+
 		firefox-only: (
 			focus: (
 				option: (
@@ -500,6 +522,7 @@ $form-control-label-size: map-deep-merge(
 		padding-right: 0.5rem,
 		padding-top: 0.3125rem,
 		text-transform: none,
+
 		label-item: (
 			margin-bottom: -0.0625rem,
 			margin-top: -0.0625rem,
@@ -514,8 +537,9 @@ $form-control-inset-margin-y: 0.3125rem !default;
 
 // Form Group
 
-$form-group-item-label-spacer: ($input-label-font-size * $line-height-base) +
-	$input-label-margin-bottom !default;
+$form-group-item-label-spacer: calc(
+	(#{$input-label-font-size} * #{$line-height-base}) + #{$input-label-margin-bottom}
+) !default;
 
 // Input Groups
 
@@ -535,25 +559,31 @@ $input-group-item: map-deep-merge(
 				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,
+			margin-left: 0rem,
 		),
+
 		btn: (
 			align-self: flex-start,
 		),
+
 		dropdown: (
 			display: flex,
 			flex-wrap: wrap,