@clayui/css 3.55.0 → 3.56.0

package/src/scss/variables/_alerts.scss

@@ -410,8 +410,16 @@ $alert-autofit-row: map-deep-merge(
 
 // Alert Color Levels
 
+/// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
+
 $alert-bg-level: -10 !default;
+
+/// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
+
 $alert-border-level: -9 !default;
+
+/// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
+
 $alert-color-level: 6 !default;
 
 // Alert Feedback

package/src/scss/variables/_breadcrumbs.scss

@@ -1,3 +1,5 @@
+// .breadcrumb
+
 $breadcrumb-bg: $gray-200 !default;
 $breadcrumb-border-radius: $border-radius !default;
 $breadcrumb-font-size: null !default;
@@ -7,6 +9,36 @@ $breadcrumb-padding-x: 1rem !default;
 $breadcrumb-padding-y: 0.75rem !default;
 $breadcrumb-text-transform: null !default;
 
+$breadcrumb: () !default;
+$breadcrumb: map-merge(
+	(
+		background-color: $breadcrumb-bg,
+		border-radius: clay-enable-rounded($breadcrumb-border-radius),
+		display: flex,
+		flex-wrap: wrap,
+		font-size: $breadcrumb-font-size,
+		list-style: none,
+		margin-bottom: $breadcrumb-margin-bottom,
+		padding: $breadcrumb-padding-y $breadcrumb-padding-x,
+	),
+	$breadcrumb
+);
+
+// .breadcrumb-item + .breadcrumb-item::before
+
+$breadcrumb-divider: quote('/') !default;
+
+$breadcrumb-divider-color: $gray-600 !default;
+$breadcrumb-divider-font-family: null !default;
+$breadcrumb-divider-font-weight: null !default;
+
+$breadcrumb-divider-svg-icon: clay-icon(
+	angle-right,
+	$breadcrumb-divider-color
+) !default;
+$breadcrumb-divider-svg-icon-height: 0.75em !default;
+$breadcrumb-divider-svg-icon-width: $breadcrumb-divider-svg-icon-height !default;
+
 // Breadcrumb Item
 
 $breadcrumb-item-padding: 0.5rem !default;
@@ -14,6 +46,50 @@ $breadcrumb-item-padding: 0.5rem !default;
 $breadcrumb-active-color: $gray-600 !default;
 $breadcrumb-active-font-weight: null !default;
 
+$breadcrumb-item: () !default;
+$breadcrumb-item: map-merge(
+	(
+		font-size: $breadcrumb-font-size,
+		font-weight: $breadcrumb-font-weight,
+		margin-right: 0.5em,
+		position: relative,
+		active: (
+			color: $breadcrumb-active-color,
+			font-weight: $breadcrumb-active-font-weight,
+		),
+		breadcrumb-item: (
+			padding-left: 1em,
+			before: (
+				color: $breadcrumb-divider-color,
+				display: block,
+				float: left,
+				background-image: $breadcrumb-divider-svg-icon,
+				background-repeat: no-repeat,
+				background-size: 100%,
+				content: '',
+				height: $breadcrumb-divider-svg-icon-height,
+				left: 0,
+				margin-top:
+					calc(#{math-sign($breadcrumb-divider-svg-icon-height)} / 2),
+				padding: 0,
+				position: absolute,
+				top: 50%,
+				width: $breadcrumb-divider-svg-icon-width,
+			),
+		),
+		dropdown-toggle: (
+			text-decoration: none,
+			hover: (
+				text-decoration: none,
+			),
+			focus: (
+				text-decoration: none,
+			),
+		),
+	),
+	$breadcrumb-item
+);
+
 // Breadcrumb Text Truncate
 
 $breadcrumb-text-truncate-icon-spacer-x: 0.875rem !default;
@@ -22,6 +98,20 @@ $breadcrumb-text-truncate-max-width: 18.75rem -
 $breadcrumb-text-truncate-max-width-mobile: 9.375rem -
 	$breadcrumb-text-truncate-icon-spacer-x !default;
 
+$breadcrumb-text-truncate: () !default;
+$breadcrumb-text-truncate: map-merge(
+	(
+		display: inline-block,
+		max-width: $breadcrumb-text-truncate-max-width,
+		overflow: hidden,
+		text-decoration: inherit,
+		text-overflow: ellipsis,
+		vertical-align: bottom,
+		white-space: nowrap,
+	),
+	$breadcrumb-text-truncate
+);
+
 // Breadcrumb Link
 
 $breadcrumb-link-color: $link-color !default;
@@ -48,18 +138,3 @@ $breadcrumb-link: map-deep-merge(
 	),
 	$breadcrumb-link
 );
-
-// Breadcrumb Divider
-
-$breadcrumb-divider: quote('/') !default;
-
-$breadcrumb-divider-color: $gray-600 !default;
-$breadcrumb-divider-font-family: null !default;
-$breadcrumb-divider-font-weight: null !default;
-
-$breadcrumb-divider-svg-icon: clay-icon(
-	angle-right,
-	$breadcrumb-divider-color
-) !default;
-$breadcrumb-divider-svg-icon-height: 0.75em !default;
-$breadcrumb-divider-svg-icon-width: $breadcrumb-divider-svg-icon-height !default;

package/src/scss/variables/_range.scss

@@ -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: 0px,
-		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/_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

@@ -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