@clayui/css 3.54.0 → 3.55.0

package/src/scss/variables/_buttons.scss

@@ -1,6 +1,7 @@
 $btn-border-width: $input-btn-border-width !default;
 $btn-border-radius: $border-radius !default;
-$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default;
+$btn-box-shadow: #{inset 0 1px 0 rgba($white, 0.15),
+	0 1px 1px rgba($black, 0.075)} !default;
 $btn-cursor: $link-cursor !default;
 $btn-font-family: $input-btn-font-family !default;
 $btn-font-size: $input-btn-font-size !default;
@@ -38,7 +39,7 @@ $btn: map-deep-merge(
 		border-style: solid,
 		border-width: $btn-border-width,
 		border-radius: clay-enable-rounded($btn-border-radius),
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: $body-color,
 		cursor: $btn-cursor,
 		display: inline-block,
@@ -72,13 +73,13 @@ $btn: map-deep-merge(
 			outline: 0,
 		),
 		active: (
-			box-shadow: clay-enable-shadows([$btn-active-box-shadow]),
+			box-shadow: clay-enable-shadows($btn-active-box-shadow),
 			focus: (
-				box-shadow: clay-enable-shadows([$btn-focus-box-shadow]),
+				box-shadow: clay-enable-shadows($btn-focus-box-shadow),
 			),
 		),
 		active-class: (
-			box-shadow: clay-enable-shadows([$btn-active-box-shadow]),
+			box-shadow: clay-enable-shadows($btn-active-box-shadow),
 		),
 		disabled: (
 			cursor: $btn-disabled-cursor,
@@ -352,7 +353,7 @@ $btn-primary: map-deep-merge(
 		background-color: $primary,
 		background-image: clay-enable-gradients($primary),
 		border-color: $primary,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($primary),
 		hover: (
 			background-color: clay-darken($primary, 7.5%),
@@ -366,10 +367,11 @@ $btn-primary: map-deep-merge(
 			border-color: clay-darken($primary, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($primary), $primary, 15%), 0.5),
+					#{$btn-box-shadow,
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($primary), $primary, 15%), 0.5)},
 					0 0 0 $btn-focus-width
 						rgba(clay-mix(color-yiq($primary), $primary, 15%), 0.5)
-						]
 				),
 			color: color-yiq(clay-darken($primary, 7.5%)),
 		),
@@ -381,13 +383,17 @@ $btn-primary: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($primary), $primary, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(
+								clay-mix(color-yiq($primary), $primary, 15%),
+								0.5
+							)},
 						0 0 0 $btn-focus-width
 							rgba(
 								clay-mix(color-yiq($primary), $primary, 15%),
 								0.5
 							)
-							]
 					),
 			),
 		),
@@ -408,7 +414,7 @@ $btn-secondary: map-deep-merge(
 		background-color: $secondary,
 		background-image: clay-enable-gradients($secondary),
 		border-color: $secondary,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($secondary),
 		hover: (
 			background-color: clay-darken($secondary, 7.5%),
@@ -424,13 +430,17 @@ $btn-secondary: map-deep-merge(
 			border-color: clay-darken($secondary, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($secondary), $secondary, 15%), 0.5),
+					#{$btn-box-shadow,
 					0 0 0 $btn-focus-width
 						rgba(
 							clay-mix(color-yiq($secondary), $secondary, 15%),
 							0.5
-						),
-					]
+						)},
+					0 0 0 $btn-focus-width
+						rgba(
+							clay-mix(color-yiq($secondary), $secondary, 15%),
+							0.5
+						)
 				),
 			color: color-yiq(clay-darken($secondary, 7.5%)),
 		),
@@ -442,7 +452,16 @@ $btn-secondary: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($secondary), $secondary, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(
+								clay-mix(
+									color-yiq($secondary),
+									$secondary,
+									15%
+								),
+								0.5
+							)},
 						0 0 0 $btn-focus-width
 							rgba(
 								clay-mix(
@@ -452,7 +471,6 @@ $btn-secondary: map-deep-merge(
 								),
 								0.5
 							)
-							]
 					),
 			),
 		),
@@ -473,7 +491,7 @@ $btn-success: map-deep-merge(
 		background-color: $success,
 		background-image: clay-enable-gradients($success),
 		border-color: $success,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($success),
 		hover: (
 			background-color: clay-darken($success, 7.5%),
@@ -487,10 +505,11 @@ $btn-success: map-deep-merge(
 			border-color: clay-darken($success, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($success), $success, 15%), 0.5),
+					#{$btn-box-shadow,
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($success), $success, 15%), 0.5)},
 					0 0 0 $btn-focus-width
 						rgba(clay-mix(color-yiq($success), $success, 15%), 0.5)
-						]
 				),
 			color: color-yiq(clay-darken($success, 7.5%)),
 		),
@@ -502,13 +521,17 @@ $btn-success: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($success), $success, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(
+								clay-mix(color-yiq($success), $success, 15%),
+								0.5
+							)},
 						0 0 0 $btn-focus-width
 							rgba(
 								clay-mix(color-yiq($success), $success, 15%),
 								0.5
 							)
-							]
 					),
 			),
 		),
@@ -529,7 +552,7 @@ $btn-info: map-deep-merge(
 		background-color: $info,
 		background-image: clay-enable-gradients($info),
 		border-color: $info,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($info),
 		hover: (
 			background-color: clay-darken($info, 7.5%),
@@ -543,9 +566,11 @@ $btn-info: map-deep-merge(
 			border-color: clay-darken($info, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($info), $info, 15%), 0.5),
+					#{$btn-box-shadow,
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($info), $info, 15%), 0.5)},
 					0 0 0 $btn-focus-width
-						rgba(clay-mix(color-yiq($info), $info, 15%), 0.5) ]
+						rgba(clay-mix(color-yiq($info), $info, 15%), 0.5)
 				),
 			color: color-yiq(clay-darken($info, 7.5%)),
 		),
@@ -557,9 +582,11 @@ $btn-info: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($info), $info, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(clay-mix(color-yiq($info), $info, 15%), 0.5)},
 						0 0 0 $btn-focus-width
-							rgba(clay-mix(color-yiq($info), $info, 15%), 0.5) ]
+							rgba(clay-mix(color-yiq($info), $info, 15%), 0.5)
 					),
 			),
 		),
@@ -580,7 +607,7 @@ $btn-warning: map-deep-merge(
 		background-color: $warning,
 		background-image: clay-enable-gradients($warning),
 		border-color: $warning,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($warning),
 		hover: (
 			background-color: clay-darken($warning, 7.5%),
@@ -594,10 +621,11 @@ $btn-warning: map-deep-merge(
 			border-color: clay-darken($warning, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($warning), $warning, 15%), 0.5),
+					#{$btn-box-shadow,
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($warning), $warning, 15%), 0.5)},
 					0 0 0 $btn-focus-width
 						rgba(clay-mix(color-yiq($warning), $warning, 15%), 0.5)
-						]
 				),
 			color: color-yiq(clay-darken($warning, 7.5%)),
 		),
@@ -609,13 +637,17 @@ $btn-warning: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($warning), $warning, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(
+								clay-mix(color-yiq($warning), $warning, 15%),
+								0.5
+							)},
 						0 0 0 $btn-focus-width
 							rgba(
 								clay-mix(color-yiq($warning), $warning, 15%),
 								0.5
 							)
-							]
 					),
 			),
 		),
@@ -635,7 +667,7 @@ $btn-danger: map-deep-merge(
 		background-color: $danger,
 		background-image: clay-enable-gradients($danger),
 		border-color: $danger,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($danger),
 		hover: (
 			background-color: clay-darken($danger, 7.5%),
@@ -649,9 +681,11 @@ $btn-danger: map-deep-merge(
 			border-color: clay-darken($danger, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($danger), $danger, 15%), 0.5),
+					#{$btn-box-shadow,
 					0 0 0 $btn-focus-width
-						rgba(clay-mix(color-yiq($danger), $danger, 15%), 0.5) ]
+						rgba(clay-mix(color-yiq($danger), $danger, 15%), 0.5)},
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($danger), $danger, 15%), 0.5)
 				),
 			color: color-yiq(clay-darken($danger, 7.5%)),
 		),
@@ -663,13 +697,17 @@ $btn-danger: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($danger), $danger, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(
+								clay-mix(color-yiq($danger), $danger, 15%),
+								0.5
+							)},
 						0 0 0 $btn-focus-width
 							rgba(
 								clay-mix(color-yiq($danger), $danger, 15%),
 								0.5
 							)
-							]
 					),
 			),
 		),
@@ -690,7 +728,7 @@ $btn-light: map-deep-merge(
 		background-color: $light,
 		background-image: clay-enable-gradients($light),
 		border-color: $light,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($light),
 		hover: (
 			background-color: clay-darken($light, 7.5%),
@@ -704,9 +742,11 @@ $btn-light: map-deep-merge(
 			border-color: clay-darken($light, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($light), $light, 15%), 0.5),
+					#{$btn-box-shadow,
 					0 0 0 $btn-focus-width
-						rgba(clay-mix(color-yiq($light), $light, 15%), 0.5) ]
+						rgba(clay-mix(color-yiq($light), $light, 15%), 0.5)},
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($light), $light, 15%), 0.5)
 				),
 			color: color-yiq(clay-darken($light, 7.5%)),
 		),
@@ -718,10 +758,11 @@ $btn-light: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($light), $light, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(clay-mix(color-yiq($light), $light, 15%), 0.5)},
 						0 0 0 $btn-focus-width
 							rgba(clay-mix(color-yiq($light), $light, 15%), 0.5)
-							]
 					),
 			),
 		),
@@ -741,7 +782,7 @@ $btn-dark: map-deep-merge(
 		background-color: $dark,
 		background-image: clay-enable-gradients($dark),
 		border-color: $dark,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($dark),
 		hover: (
 			background-color: clay-darken($dark, 7.5%),
@@ -755,9 +796,11 @@ $btn-dark: map-deep-merge(
 			border-color: clay-darken($dark, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5),
+					#{$btn-box-shadow,
 					0 0 0 $btn-focus-width
-						rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5) ]
+						rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5)},
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5)
 				),
 			color: color-yiq(clay-darken($dark, 7.5%)),
 		),
@@ -769,9 +812,11 @@ $btn-dark: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5)},
 						0 0 0 $btn-focus-width
-							rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5) ]
+							rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5)
 					),
 			),
 		),
@@ -792,7 +837,7 @@ $btn-link: () !default;
 $btn-link: map-deep-merge(
 	(
 		border-radius: 1px,
-		box-shadow: clay-enable-shadows([none]),
+		box-shadow: clay-enable-shadows(none),
 		color: $link-color,
 		font-weight: $font-weight-normal,
 		text-decoration: $link-decoration,
@@ -804,9 +849,6 @@ $btn-link: map-deep-merge(
 			box-shadow: $btn-focus-box-shadow,
 			text-decoration: $link-decoration,
 		),
-		active: (
-			box-shadow: clay-enable-shadows([none]),
-		),
 		disabled: (
 			box-shadow: none,
 			color: $btn-link-disabled-color,
@@ -854,8 +896,9 @@ $btn-outline-primary: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($primary, 0.5),
-						$c-unset ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($primary, 0.5)},
+						$c-unset
 					),
 			),
 		),
@@ -887,8 +930,9 @@ $btn-outline-secondary: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($secondary, 0.5),
-						0 0 0 $btn-focus-width rgba($secondary, 0.5) ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($secondary, 0.5)},
+						0 0 0 $btn-focus-width rgba($secondary, 0.5)
 					),
 			),
 		),
@@ -920,8 +964,9 @@ $btn-outline-success: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($success, 0.5),
-						0 0 0 $btn-focus-width rgba($success, 0.5) ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($success, 0.5)},
+						0 0 0 $btn-focus-width rgba($success, 0.5)
 					),
 			),
 		),
@@ -953,8 +998,9 @@ $btn-outline-info: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($info, 0.5),
-						0 0 0 $btn-focus-width rgba($info, 0.5) ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($info, 0.5)},
+						0 0 0 $btn-focus-width rgba($info, 0.5)
 					),
 			),
 		),
@@ -986,8 +1032,9 @@ $btn-outline-warning: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($warning, 0.5),
-						0 0 0 $btn-focus-width rgba($warning, 0.5) ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($warning, 0.5)},
+						0 0 0 $btn-focus-width rgba($warning, 0.5)
 					),
 			),
 		),
@@ -1019,8 +1066,9 @@ $btn-outline-danger: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($danger, 0.5),
-						0 0 0 $btn-focus-width rgba($danger, 0.5) ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($danger, 0.5)},
+						0 0 0 $btn-focus-width rgba($danger, 0.5)
 					),
 			),
 		),
@@ -1052,8 +1100,9 @@ $btn-outline-light: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($light, 0.5),
-						0 0 0 $btn-focus-width rgba($light, 0.5) ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($light, 0.5)},
+						0 0 0 $btn-focus-width rgba($light, 0.5)
 					),
 			),
 		),
@@ -1084,9 +1133,9 @@ $btn-outline-dark: map-deep-merge(
 			color: color-yiq($dark),
 			focus: (
 				box-shadow:
-					if(
-						$enable-shadows and $btn-active-box-shadow != none,
-						$btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($dark, 0.5),
+					clay-enable-shadows(
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($dark, 0.5)},
 						0 0 0 $btn-focus-width rgba($dark, 0.5)
 					),
 			),

package/src/scss/variables/_cards.scss

@@ -951,7 +951,7 @@ $card-type-template-after-highlight: () !default;
 $card-type-template-aspect-ratio: () !default;
 $card-type-template-aspect-ratio: map-deep-merge(
 	(
-		border-width: 0,
+		border-width: 0px,
 		color: $gray-600,
 		horizontal: 16,
 		text-align: center,

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

@@ -170,7 +170,7 @@ $date-picker-calendar-item: map-deep-merge(
 	(
 		align-items: center,
 		bg: transparent,
-		border-width: 0,
+		border-width: 0px,
 		disabled-cursor: $disabled-cursor,
 		display: inline-flex,
 		flex-shrink: 0,

package/src/scss/variables/_dropdowns.scss

@@ -165,8 +165,8 @@ $dropdown-item-base: () !default;
 $dropdown-item-base: map-deep-merge(
 	(
 		background-color: transparent,
-		border-radius: 0,
-		border-width: 0,
+		border-radius: 0px,
+		border-width: 0px,
 		clear: both,
 		color: $dropdown-link-color,
 		cursor: $link-cursor,
@@ -405,7 +405,7 @@ $dropdown-divider-bg: $gray-200 !default;
 
 /// @deprecated as of v3.x use map $dropdown-divider instead
 
-$dropdown-divider-margin-y: $spacer * 0.5 !default;
+$dropdown-divider-margin-y: 0.5rem !default;
 
 $dropdown-divider: () !default;
 $dropdown-divider: map-merge(
@@ -884,7 +884,7 @@ $dropdown-action: map-deep-merge(
 
 $dropdown-alert-font-size: null !default;
 $dropdown-alert-line-height: normal !default;
-$dropdown-alert-margin: $spacer * 0.5 !default;
+$dropdown-alert-margin: 0.5rem !default;
 $dropdown-alert-padding-x: $dropdown-header-padding-x !default;
 $dropdown-alert-padding-y: $dropdown-header-padding-y !default;
 

package/src/scss/variables/_forms.scss

@@ -409,7 +409,7 @@ $form-control-inset: () !default;
 $form-control-inset: map-deep-merge(
 	(
 		background-color: transparent,
-		border-width: 0,
+		border-width: 0px,
 		color: $input-color,
 		flex-grow: 1,
 		margin-bottom: $form-control-inset-margin-y,

package/src/scss/variables/_globals.scss

@@ -243,7 +243,7 @@ $border-radius-sm: 0.2rem !default;
 
 $rounded-border-radius: $border-radius !default;
 $rounded-circle-border-radius: 5000px !default;
-$rounded-0-border-radius: 0 !default;
+$rounded-0-border-radius: 0px !default;
 $rounded-pill: 50rem !default;
 
 $box-shadow-sm: 0 0.125rem 0.25rem rgba($black, 0.075) !default;
@@ -496,7 +496,7 @@ $h6: map-deep-merge(
 
 // Headings h1-h6
 
-$headings-margin-bottom: $spacer * 0.5 !default;
+$headings-margin-bottom: 0.5rem !default;
 $headings-font-family: null !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;

package/src/scss/variables/_links.scss

@@ -264,7 +264,7 @@ $component-action: map-deep-merge(
 		background-color: transparent,
 		border-color: transparent,
 		border-radius: $border-radius,
-		border-width: 0,
+		border-width: 0px,
 		color: $secondary,
 		display: inline-flex,
 		height: map-get($link-monospaced, height),

package/src/scss/variables/_list-group.scss

@@ -313,8 +313,8 @@ $list-group-notification-item-primary: map-deep-merge(
 	(
 		border-left-color: theme-color-level(primary, -9),
 		border-left-width: 0.5rem,
-		border-bottom-left-radius: 0,
-		border-top-left-radius: 0,
+		border-bottom-left-radius: 0px,
+		border-top-left-radius: 0px,
 		active-border-left-color: theme-color-level(primary, -9),
 	),
 	$list-group-notification-item-primary

package/src/scss/variables/_multi-step-nav.scss

@@ -5,7 +5,7 @@ $multi-step-nav-padding-y: 0 !default;
 $multi-step-icon-bg: $gray-200 !default;
 $multi-step-icon-border-color: null !default;
 $multi-step-icon-border-style: null !default;
-$multi-step-icon-border-width: 0 !default;
+$multi-step-icon-border-width: 0px !default;
 $multi-step-icon-color: rgba($black, 0.5) !default;
 $multi-step-icon-cursor: $link-cursor !default;
 $multi-step-icon-border-radius: $border-radius !default;

package/src/scss/variables/_navbar.scss

@@ -2,8 +2,8 @@ $enable-scaling-navbar: $enable-scaling-components !default;
 
 $navbar-border-radius: null !default;
 $navbar-font-size: null !default;
-$navbar-padding-x: $spacer !default;
-$navbar-padding-y: $spacer * 0.5 !default;
+$navbar-padding-x: 1rem !default;
+$navbar-padding-y: 0.5rem !default;
 
 $navbar-nav-link-padding-x: 0.5rem !default;
 

package/src/scss/variables/_navs.scss

@@ -157,7 +157,7 @@ $nav-item: map-deep-merge(
 // .nav-divider
 
 $nav-divider-color: $gray-600 !default;
-$nav-divider-margin-y: $spacer * 0.5 !default;
+$nav-divider-margin-y: 0.5rem !default;
 
 $nav-divider: () !default;
 $nav-divider: map-deep-merge(

package/src/scss/variables/_pagination.scss

@@ -53,7 +53,7 @@ $pagination-item: map-deep-merge(
 
 /// @deprecated as of v2 use the Sass map `$pagination-link` instead
 
-$pagination-link-border-radius: 0 !default;
+$pagination-link-border-radius: 0px !default;
 
 /// @deprecated as of v2 use the Sass map `$pagination-link` instead
 

package/src/scss/variables/_panels.scss

@@ -47,7 +47,8 @@ $panel-header-link: map-deep-merge(
 		color: inherit,
 		display: block,
 		text-decoration: $panel-header-link-text-decoration,
-		transition: border-color 0.1s ease#{','} border-radius 0.5s ease,
+		transition: #{border-color 0.1s ease,
+		border-radius 0.5s ease},
 		hover: (
 			color: inherit,
 			text-decoration: $panel-header-link-hover-text-decoration,
@@ -185,12 +186,12 @@ $panel-unstyled: () !default;
 $panel-unstyled: map-deep-merge(
 	(
 		background-color: transparent,
-		border-radius: 0,
-		border-width: 0,
+		border-radius: 0px,
+		border-width: 0px,
 		margin-bottom: 1.5rem,
 		header: (
 			border-color: $gray-500,
-			border-radius: 0,
+			border-radius: 0px,
 			border-style: solid,
 			border-width: 0 0 1px 0,
 			padding-left: 0,

package/src/scss/variables/_range.scss

@@ -20,7 +20,7 @@ $clay-range-input-group-text: () !default;
 $clay-range-input-group-text: map-deep-merge(
 	(
 		bg: transparent,
-		border-width: 0,
+		border-width: 0px,
 		color: $body-color,
 		font-size: 0.875rem,
 		font-weight: $font-weight-semi-bold,
@@ -58,7 +58,7 @@ $clay-range-input: map-deep-merge(
 		thumb-appearance: none,
 		thumb-bg: $white,
 		thumb-border-radius: 100px,
-		thumb-border-width: 0,
+		thumb-border-width: 0px,
 		thumb-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3),
 		thumb-height: 1.5rem,
 		thumb-width: 1.5rem,

package/src/scss/variables/_sheets.scss

@@ -212,7 +212,7 @@ $sheet-dataset-content: () !default;
 $sheet-dataset-content-sheet-header: () !default;
 $sheet-dataset-content-sheet-header: map-merge(
 	(
-		border-width: 0,
+		border-width: 0px,
 		margin: -1.5rem -1.5rem 1.5rem,
 		padding: 1rem 1.5rem,
 	),