@clayui/css 3.53.0 → 3.56.0

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,
@@ -55,55 +55,119 @@ $clay-range-input: map-deep-merge(
 		position: relative,
 		vertical-align: middle,
 		width: 100%,
-		thumb-appearance: none,
-		thumb-bg: $white,
-		thumb-border-radius: 100px,
-		thumb-border-width: 0,
-		thumb-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3),
-		thumb-height: 1.5rem,
-		thumb-width: 1.5rem,
-		track-appearance: none,
-		track-bg: $gray-300,
-		track-border-radius: 100px,
-		track-height: 0.25rem,
-		track-position: absolute,
-		track-top: 50%,
-		track-width: 100%,
-		progress-bg: $primary,
-		progress-border-radius: 100px 0 0 100px,
-		progress-position: absolute,
-		progress-top: 50%,
-		progress-width: 50%,
-		tooltip-padding: 0.25rem 0.5rem,
-		tooltip-spacer-y: 0.25rem,
-		tooltip-transition: opacity 0.15s linear,
-		tooltip-visibility: hidden,
-		tooltip-white-space: nowrap,
-		tooltip-arrow-size: 0.375rem,
-		form-control-appearance: none,
-		form-control-bg: transparent,
-		form-control-height: $input-height,
-		form-control-position: relative,
-		form-control-z-index: $zindex-clay-range-input-form-control,
-		data-label-font-size: 0.875rem,
-		data-label-font-weight: $font-weight-semi-bold,
-		data-label-line-height: 1,
-		data-label-margin-top: 2.5rem,
-		data-label-position: absolute,
-		data-label-spacer: 1rem,
-		data-label-text-align: center,
-		data-label-top: 0,
-		data-label-width: 1.5rem,
-		data-label-before-content: unquote("'\\FEFF' attr(data-label-min)"),
-		data-label-after-content: unquote("'\\FEFF' attr(data-label-max)"),
-		data-label-after-right: 0,
-		hover-cursor: $link-cursor,
-		focus-outline: 0,
-		focus-thumb-box-shadow: $component-focus-box-shadow,
-		disabled-color: $clay-range-disabled-color,
-		disabled-cursor: $disabled-cursor,
-		disabled-progress-bg: $primary-l2,
-		disabled-track-bg: $gray-200,
+		clay-range-thumb: (
+			background-color: $white,
+			border-radius: 100px,
+			border-width: 0px,
+			box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3),
+			height: 1.5rem,
+			margin-top: -0.75rem,
+			position: absolute,
+			right: -0.75rem,
+			top: 50%,
+			visibility: hidden,
+			width: 1.5rem,
+		),
+		clay-range-track: (
+			appearance: none,
+			background-color: $gray-300,
+			border-radius: 100px,
+			height: 0.25rem,
+			margin-top: -0.125rem,
+			position: absolute,
+			top: 50%,
+			width: 100%,
+		),
+		clay-range-progress: (
+			background-color: $primary,
+			border-radius: 100px 0 0 100px,
+			position: absolute,
+			top: 50%,
+			width: 50%,
+		),
+		tooltip: (
+			margin-left: 0.8125rem,
+			transition: opacity 0.15s linear,
+			visibility: hidden,
+			white-space: nowrap,
+		),
+		tooltip-inner: (
+			padding: 0.25rem 0.5rem,
+		),
+		tooltip-arrow: (
+			height: 0.375rem,
+			width: 0.375rem,
+		),
+		clay-tooltip-bottom: (
+			margin-top: 0.25rem,
+			padding-top: 0.1875rem,
+			top: 100%,
+			transform: translateX(-50%),
+			tooltip-arrow: (
+				margin-left: -0.25rem,
+			),
+		),
+		clay-tooltip-top: (
+			bottom: 100%,
+			margin-bottom: 0.25rem,
+			padding-bottom: 0.1875rem,
+			transform: translateX(-50%),
+			tooltip-arrow: (
+				margin-left: -0.25rem,
+			),
+		),
+		form-control-range: (
+			appearance: none,
+			background-color: transparent,
+			height: $input-height,
+			margin: 0,
+			padding: 0,
+			position: relative,
+			z-index: $zindex-clay-range-input-form-control,
+			hover: (
+				cursor: $link-cursor,
+			),
+			focus: (
+				outline: 0,
+				clay-range-thumb: (
+					box-shadow: $component-focus-box-shadow,
+				),
+			),
+			disabled: (
+				color: $clay-range-disabled-color,
+				cursor: $disabled-cursor,
+				clay-range-track: (
+					background-color: $gray-200,
+				),
+				clay-range-progress: (
+					background-color: $primary-l2,
+				),
+			),
+		),
+		data-label-min-max: (
+			margin-bottom: 1rem,
+		),
+		before-after: (
+			font-size: 0.875rem,
+			font-weight: $font-weight-semi-bold,
+			line-height: 1,
+			margin-top: 2.5rem,
+			position: absolute,
+			text-align: center,
+			top: 0,
+			width: 1.5rem,
+		),
+		data-label-min: (
+			before: (
+				content: unquote("'\\FEFF' attr(data-label-min)"),
+			),
+		),
+		data-label-max: (
+			after: (
+				content: unquote("'\\FEFF' attr(data-label-max)"),
+				right: 0,
+			),
+		),
 	),
 	$clay-range-input
 );

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,
 	),

package/src/scss/variables/_sidebar.scss

@@ -10,6 +10,7 @@ $sidebar-header-component-title: map-deep-merge(
 	(
 		font-size: 1.5rem,
 		font-weight: $font-weight-semi-bold,
+		overflow-wrap: break-word,
 		href: (
 			color: $gray-900,
 		),
@@ -25,6 +26,7 @@ $sidebar-header-component-subtitle: map-deep-merge(
 		font-size: 1.125rem,
 		font-weight: $font-weight-semi-bold,
 		margin-bottom: 0,
+		overflow-wrap: break-word,
 	),
 	$sidebar-header-component-subtitle
 );

package/src/scss/variables/_tables.scss

@@ -68,8 +68,8 @@ $table-cell-expand-smallest-width: 10% !default;
 // TH
 
 $table-head-bg: $white !default;
-$table-head-border-bottom-width: 2 * $table-border-width !default;
-$table-head-border-top-width: 0 !default;
+$table-head-border-bottom-width: calc(2 * #{$table-border-width}) !default;
+$table-head-border-top-width: 0px !default;
 $table-head-color: $gray-700 !default;
 $table-head-font-size: null !default;
 $table-head-font-weight: null !default;
@@ -97,8 +97,8 @@ $c-table-tbody: () !default;
 // TD
 
 $table-data-border-bottom-width: $table-border-width !default;
-$table-data-border-left-width: 0 !default;
-$table-data-border-right-width: 0 !default;
+$table-data-border-left-width: 0px !default;
+$table-data-border-right-width: 0px !default;
 $table-data-border-top-width: $table-border-width !default;
 
 $table-data-border-color: $table-border-color !default;
@@ -234,7 +234,12 @@ $table-dark-accent-bg: rgba($white, 0.05) !default;
 
 $table-bordered-border-width: $table-border-width !default;
 
+/// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
+
 $table-bg-level: -9 !default;
+
+/// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
+
 $table-border-level: -6 !default;
 
 // Table List

package/src/scss/variables/_tbar.scss

@@ -44,8 +44,8 @@ $tbar-stacked: map-deep-merge(
 		),
 		btn-monospaced: (
 			border-color: transparent,
-			border-radius: 0,
-			border-width: 0,
+			border-radius: 0px,
+			border-width: 0px,
 			color: inherit,
 			height: 2.5rem,
 			margin-bottom: 0,
@@ -58,12 +58,12 @@ $tbar-stacked: map-deep-merge(
 			position: relative,
 			width: 2.5rem,
 			focus: (
-				box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0 0 0 0.25rem
-					$white,
+				box-shadow: #{inset 0 0 0 0.125rem $primary-l1,
+				inset 0 0 0 0.25rem $white},
 			),
 			active-focus: (
-				box-shadow: inset 0 0 0 0.125rem $primary-l1#{','} inset 0 0 0 0.25rem
-					$white,
+				box-shadow: #{inset 0 0 0 0.125rem $primary-l1,
+				inset 0 0 0 0.25rem $white},
 			),
 		),
 	),
@@ -136,7 +136,8 @@ $tbar-light: () !default;
 $tbar-light: map-deep-merge(
 	(
 		background-color: $white,
-		box-shadow: inset 1px 0 0 0 $gray-200#{','} inset -1px 0 0 0 $gray-200,
+		box-shadow: #{inset 1px 0 0 0 $gray-200,
+		inset -1px 0 0 0 $gray-200},
 		color: $secondary,
 		divider-before: (
 			background-color: $gray-200,
@@ -167,8 +168,8 @@ $tbar-dark-d1: () !default;
 $tbar-dark-d1: map-deep-merge(
 	(
 		background-color: $dark-d1,
-		box-shadow: inset 1px 0 0 0 rgba($white, 0.06) #{','} inset -1px 0 0 0
-			rgba($white, 0.06),
+		box-shadow: #{inset 1px 0 0 0 rgba($white, 0.06),
+		inset -1px 0 0 0 rgba($white, 0.06)},
 		color: $gray-500,
 		divider-before: (
 			background-color: rgba($white, 0.06),
@@ -209,8 +210,8 @@ $tbar-dark-l2: () !default;
 $tbar-dark-l2: map-deep-merge(
 	(
 		background-color: $dark-l2,
-		box-shadow: inset 1px 0 0 0 rgba($white, 0.06) #{','} inset -1px 0 0 0
-			rgba($white, 0.06),
+		box-shadow: #{inset 1px 0 0 0 rgba($white, 0.06),
+		inset -1px 0 0 0 rgba($white, 0.06)},
 		border-color: rgba($white, 0.06),
 		color: $gray-500,
 		divider-before: (
@@ -369,8 +370,8 @@ $subnav-tbar-primary: map-deep-merge(
 		padding-y: 0.625rem,
 		item-justify-content: flex-start,
 		item-padding-x: 0.25rem,
-		link-monospaced-border-radius: 0,
-		link-monospaced-border-width: 0,
+		link-monospaced-border-radius: 0px,
+		link-monospaced-border-width: 0px,
 		link-monospaced-margin-y: -0.625rem,
 		link-monospaced-size: 3rem,
 		component-link: $subnav-tbar-primary-component-link,

package/src/scss/variables/_time.scss

@@ -99,7 +99,7 @@ $clay-time-inner-spin-btn: map-deep-merge(
 	(
 		align-items: center,
 		border-radius: map-get($clay-time-inner-spin, border-radius),
-		border-width: 0,
+		border-width: 0px,
 		display: inline-flex,
 		font-size: 8px,
 		height: auto,

package/src/scss/variables/_type.scss

@@ -52,7 +52,7 @@ $c-kbd: map-deep-merge(
 $c-kbd-c-kbd: () !default;
 $c-kbd-c-kbd: map-merge(
 	(
-		border-width: 0,
+		border-width: 0px,
 		font-size: inherit,
 		font-weight: inherit,
 		height: auto,
@@ -74,7 +74,7 @@ $c-kbd-monospaced: map-deep-merge(
 $c-kbd-inline: () !default;
 $c-kbd-inline: map-deep-merge(
 	(
-		border-width: 0,
+		border-width: 0px,
 		font-weight: $font-weight-light,
 		height: auto,
 		line-height: inherit,

package/src/scss/variables/_utilities.scss

@@ -34,7 +34,7 @@ $close: map-deep-merge(
 		appearance: none,
 		background-color: transparent,
 		border-radius: $border-radius-sm,
-		border-width: 0,
+		border-width: 0px,
 		color: $close-color,
 		cursor: $link-cursor,
 		display: inline-flex,