@clayui/css 3.54.0 → 3.57.0

package/src/scss/cadmin/variables/_range.scss

@@ -54,57 +54,116 @@ $cadmin-clay-range-input: map-deep-merge(
 		position: relative,
 		vertical-align: middle,
 		width: 100%,
-		thumb-appearance: none,
-		thumb-bg: $cadmin-white,
-		thumb-border-radius: 100px,
-		thumb-border-width: 0,
-		thumb-box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3),
-		thumb-height: 24px,
-		thumb-width: 24px,
-		track-appearance: none,
-		track-bg: $cadmin-gray-200,
-		track-border-radius: 100px,
-		track-height: 4px,
-		track-position: absolute,
-		track-top: 50%,
-		track-width: 100%,
-		progress-bg: $cadmin-primary,
-		progress-border-radius: 100px 0 0 100px,
-		progress-position: absolute,
-		progress-top: 50%,
-		progress-width: 50%,
-		tooltip-padding: 8px 12px,
-		tooltip-spacer-y: 4px,
-		tooltip-transition: opacity 0.15s linear,
-		tooltip-visibility: hidden,
-		tooltip-white-space: nowrap,
-		tooltip-arrow-size: 6px,
-		form-control-appearance: none,
-		form-control-bg: transparent,
-		form-control-height: $cadmin-input-height,
-		form-control-position: relative,
-		form-control-z-index: $cadmin-zindex-clay-range-input-form-control,
-		data-label-font-size: 14px,
-		data-label-font-weight: $cadmin-font-weight-semi-bold,
-		data-label-line-height: 1,
-		data-label-margin-top: 40px,
-		data-label-position: absolute,
-		data-label-spacer: 16px,
-		data-label-text-align: center,
-		data-label-top: 0,
-		data-label-width: 24px,
-		data-label-before-content: attr(data-label-min),
-		data-label-after-content: attr(data-label-max),
-		data-label-after-right: 0,
-		hover-cursor: $cadmin-link-cursor,
-		hover-thumb-bg: $cadmin-primary-l3,
-		focus-outline: 0,
-		focus-thumb-box-shadow: $cadmin-component-focus-inset-box-shadow,
-		disabled-color: $cadmin-clay-range-disabled-color,
-		disabled-cursor: $cadmin-disabled-cursor,
-		disabled-thumb-bg: $cadmin-gray-100,
-		disabled-progress-bg: $cadmin-primary-l2,
-		disabled-track-bg: $cadmin-gray-200,
+		clay-range-thumb: (
+			background-color: $cadmin-white,
+			border-radius: 100px,
+			border-width: 0,
+			box-shadow: 0 1px 5px -1px rgba(0, 0, 0, 0.3),
+			height: 24px,
+			width: 24px,
+		),
+		clay-range-track: (
+			background-color: $cadmin-gray-200,
+			border-radius: 100px,
+			height: 4px,
+			position: absolute,
+			top: 50%,
+			width: 100%,
+		),
+		clay-range-progress: (
+			background-color: $cadmin-primary,
+			border-radius: 100px 0 0 100px,
+			position: absolute,
+			top: 50%,
+			width: 50%,
+		),
+		tooltip: (
+			margin-left: 13px,
+			transition: opacity 0.15s linear,
+			visibility: hidden,
+			white-space: nowrap,
+		),
+		tooltip-inner: (
+			padding: 8px 12px,
+		),
+		tooltip-arrow: (
+			height: 6px,
+			width: 6px,
+		),
+		clay-tooltip-bottom: (
+			margin-top: 4px,
+			padding-top: 3px,
+			top: 100%,
+			transform: translateX(-50%),
+			tooltip-arrow: (
+				margin-left: -4px,
+			),
+		),
+		clay-tooltip-top: (
+			bottom: 100%,
+			margin-bottom: 4px,
+			padding-bottom: 3px,
+			transform: translateX(-50%),
+			tooltip-arrow: (
+				margin-left: -4px,
+			),
+		),
+		form-control-range: (
+			appearance: none,
+			background-color: transparent,
+			height: $cadmin-input-height,
+			position: relative,
+			z-index: $cadmin-zindex-clay-range-input-form-control,
+			hover: (
+				cursor: $cadmin-link-cursor,
+				clay-range-thumb: (
+					background-color: $cadmin-primary-l3,
+				),
+			),
+			focus: (
+				outline: 0,
+				clay-range-thumb: (
+					box-shadow: $cadmin-component-focus-inset-box-shadow,
+				),
+			),
+			disabled: (
+				color: $cadmin-clay-range-disabled-color,
+				cursor: $cadmin-disabled-cursor,
+				clay-range-thumb: (
+					background-color: $cadmin-gray-100,
+				),
+				clay-range-progress: (
+					background-color: $cadmin-primary-l2,
+				),
+				clay-range-track: (
+					background-color: $cadmin-gray-200,
+				),
+			),
+		),
+		data-label-min-max: (
+			margin-bottom: 16px,
+		),
+		before-after: (
+			font-size: 14px,
+			font-weight: $cadmin-font-weight-semi-bold,
+			line-height: 1,
+			margin-top: 40px,
+			position: absolute,
+			text-align: center,
+			top: 0,
+			width: 24px,
+		),
+		data-label-min: (
+			before: (
+				content: unquote("'\\FEFF' attr(data-label-min)"),
+			),
+		),
+		data-label-max: (
+			after: (
+				content: unquote("'\\FEFF' attr(data-label-max)"),
+				right: 0,
+			),
+		),
 	),
 	$cadmin-clay-range-input
 );

package/src/scss/cadmin/variables/_treeview.scss

@@ -8,7 +8,7 @@ $cadmin-treeview: map-merge(
 		margin-bottom: 0,
 		padding: 2px 0,
 		btn-monospaced: (
-			font-size: 14px,
+			font-size: inherit,
 			height: 24px,
 			width: 24px,
 			focus: (
@@ -86,8 +86,12 @@ $cadmin-treeview: map-merge(
 				cursor: $cadmin-disabled-cursor,
 			),
 		),
+		component-expander: (
+			font-size: 10px,
+		),
 		component-action: (
 			display: none,
+			font-size: 16px,
 			margin-left: 2px,
 			margin-right: 2px,
 			hover: (
@@ -102,11 +106,15 @@ $cadmin-treeview: map-merge(
 			),
 		),
 		component-icon: (
-			display: inline,
+			display: inline-block,
+			font-size: 16px,
 			height: auto,
-			margin-left: 4px,
-			margin-right: 4px,
+			margin: auto 4px,
+			vertical-align: middle,
 			width: auto,
+			lexicon-icon: (
+				display: block,
+			),
 		),
 		component-text: (
 			padding-bottom: 1.5px,

package/src/scss/components/_breadcrumbs.scss

@@ -1,81 +1,30 @@
 .breadcrumb {
-	background-color: $breadcrumb-bg;
-
-	@include border-radius($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;
+	@include clay-css($breadcrumb);
 }
 
 .breadcrumb-link {
 	@include clay-link($breadcrumb-link);
-
-	> .breadcrumb-text-truncate {
-		text-decoration: $breadcrumb-link-text-decoration;
-
-		&:hover,
-		&:focus {
-			text-decoration: $breadcrumb-link-hover-text-decoration;
-		}
-	}
 }
 
 .breadcrumb-item {
-	font-size: $breadcrumb-font-size;
-	font-weight: $breadcrumb-font-weight;
-
-	@if ($breadcrumb-divider-svg-icon) {
-		margin-right: 0.5em;
-		position: relative;
-	}
+	@include clay-css($breadcrumb-item);
 
 	&.active,
 	.active {
-		color: $breadcrumb-active-color;
-		font-weight: $breadcrumb-active-font-weight;
+		@include clay-css(map-get($breadcrumb-item, active));
 	}
 
 	> span {
-		text-transform: $breadcrumb-text-transform;
+		text-transform: inherit;
 	}
 
 	+ .breadcrumb-item {
-		padding-left: if(
-			$breadcrumb-divider-svg-icon,
-			1em,
-			$breadcrumb-item-padding
-		);
+		@include clay-css(map-get($breadcrumb-item, breadcrumb-item));
 
 		&::before {
-			color: $breadcrumb-divider-color;
-			display: block;
-			float: left;
-
-			@if ($breadcrumb-divider-svg-icon) {
-				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;
-			} @else {
-				content: escape-svg($breadcrumb-divider);
-				font-family: $breadcrumb-divider-font-family;
-				font-weight: $breadcrumb-divider-font-weight;
-				padding-left: 0.4em;
-				padding-right: 0.4em;
-			}
+			@include clay-css(
+				map-deep-get($breadcrumb-item, breadcrumb-item, before)
+			);
 		}
 	}
 
@@ -95,22 +44,14 @@
 	}
 
 	.dropdown-toggle {
-		text-decoration: none;
-
-		&:hover,
-		&:focus {
-			text-decoration: none;
-		}
+		@include clay-button-variant(
+			map-get($breadcrumb-item, dropdown-toggle)
+		);
 	}
 }
 
 .breadcrumb-text-truncate {
-	display: inline-block;
-	max-width: $breadcrumb-text-truncate-max-width;
-
-	@include text-truncate;
-
-	vertical-align: bottom;
+	@include clay-css($breadcrumb-text-truncate);
 
 	@include clay-scale-component {
 		max-width: $breadcrumb-text-truncate-max-width-mobile;

package/src/scss/components/_tables.scss

@@ -107,7 +107,7 @@ caption {
 	}
 
 	tbody + tbody {
-		border-top: (2 * $table-border-width) solid $table-border-color;
+		border-top: calc(2 * #{$table-border-width}) solid $table-border-color;
 	}
 
 	tfoot {
@@ -170,7 +170,7 @@ caption {
 	thead {
 		td,
 		th {
-			border-bottom-width: 2 * $table-border-width;
+			border-bottom-width: calc(2 * #{$table-border-width});
 
 			@if (
 				$table-head-border-top-width ==

package/src/scss/functions/_color-functions.scss

@@ -34,9 +34,14 @@
 /// An alias for the Sass `darken` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to darken
 /// @param {Number} $amount - A number between 0% and 100%
-
-@function clay-darken($color, $amount) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function clay-darken(
+	$color,
+	$amount,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -49,9 +54,14 @@
 /// An alias for the Sass `lighten` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to lighten
 /// @param {Number} $amount - A number between 0% and 100%
-
-@function clay-lighten($color, $amount) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function clay-lighten(
+	$color,
+	$amount,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -64,9 +74,14 @@
 /// An alias for the Sass `adjust-hue` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to adjust
 /// @param {Number} $degrees - A number between -360deg and 360deg
-
-@function clay-adjust-hue($color, $degrees) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function clay-adjust-hue(
+	$color,
+	$degrees,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -79,9 +94,14 @@
 /// An alias for the Sass `desaturate` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to desaturate
 /// @param {Number} $amount - A number between 0% and 100%
-
-@function clay-desaturate($color, $amount) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function clay-desaturate(
+	$color,
+	$amount,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -94,9 +114,14 @@
 /// An alias for the Sass `saturate` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to saturate
 /// @param {Number} $amount - A number between 0% and 100%
-
-@function clay-saturate($color, $amount) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function clay-saturate(
+	$color,
+	$amount,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -110,17 +135,23 @@
 /// @param {Color} $color1 - The first color to mix
 /// @param {Color} $color2 - The second color to mix
 /// @param {Number} $weight - A number between 0% and 100%
-
-@function clay-mix($color1, $color2, $weight: 50%) {
-	@if (is-css-var($color1) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function clay-mix(
+	$color1,
+	$color2,
+	$weight: 50%,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color1) and not $fallback) {
 		@return $color1;
 	}
 
-	@if (is-css-var($color2) and not clay-color-functions-process-fallback()) {
+	@if (is-css-var($color2) and not $fallback) {
 		@return $color2;
 	}
 
-	@if (is-css-var($weight) and not clay-color-functions-process-fallback()) {
+	@if (is-css-var($weight) and not $fallback) {
 		@return $weight;
 	}
 
@@ -133,9 +164,13 @@
 
 /// An alias for the Sass `blue` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to get the blue channel from
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
 
-@function clay-blue($color) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+@function clay-blue(
+	$color,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -146,9 +181,13 @@
 
 /// An alias for the Sass `green` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to get the green channel from
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
 
-@function clay-green($color) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+@function clay-green(
+	$color,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 
@@ -159,9 +198,10 @@
 
 /// An alias for the Sass `red` function. It converts CSS Custom Properties with a fallback value to the correct type in Sass.
 /// @param {Color} $color - The color to get the red channel from
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
 
-@function clay-red($color) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+@function clay-red($color, $fallback: clay-color-functions-process-fallback()) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 

package/src/scss/functions/_global-functions.scss

@@ -477,9 +477,16 @@
 /// @param {Color} $color - The color to convert
 /// @param {Color} $dark[$yiq-text-dark] - The color to return if `$color` >= `$yiq-contrasted-threshold`
 /// @param {Color} $light[$yiq-text-light] - The color to return if `$color` < `$yiq-contrasted-threshold`
-
-@function color-yiq($color, $dark: null, $light: null, $threshold: null) {
-	@if (is-css-var($color) and not clay-color-functions-process-fallback()) {
+/// @param {Bool} $fallback[$enable-clay-color-functions-process-fallback] - Force Sass to process the CSS Custom Property fallback colors
+
+@function color-yiq(
+	$color,
+	$dark: null,
+	$light: null,
+	$threshold: null,
+	$fallback: clay-color-functions-process-fallback()
+) {
+	@if (is-css-var($color) and not $fallback) {
 		@return $color;
 	}
 

package/src/scss/functions/_lx-icons-generated.scss

@@ -332,6 +332,8 @@
 
 	'ca-ad': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#0035A0" d="M16 80h160v352H16z"/><path fill="#E03232" d="M336 80h160v352H336z"/><path fill="#FCD638" d="M176 80h160v352H176z"/><path fill="#A97451" d="M208 206.5h96v96h-96z"/></svg>',
 
+	'ca-es-valencia': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M0 64h512v384H0V64Z" fill="#B0BEC9"/><path d="M16 80h480v352H16V80Z" fill="#FCD638"/><path d="M16 118.4h480v38.4H16v-38.4Zm0 78.4h480v38.4H16v-38.4Zm0 78.4h480v38.4H16v-38.4Zm0 78.4h480V392H16v-38.4Z" fill="#E03232"/><path d="M112 80H16v352h96V80Z" fill="#5887DD"/><path d="M144 80h-32v352h32V80Z" fill="#E03232"/></svg>',
+
 	'ca-es': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#FCD638" d="M16 80h480v39.1H16z"/><path fill="#E03232" d="M16 119.1h480v39.1H16z"/><path fill="#FCD638" d="M16 158.2h480v39.1H16z"/><path fill="#E03232" d="M16 197.3h480v39.1H16z"/><path fill="#FCD638" d="M16 236.4h480v39.1H16z"/><path fill="#E03232" d="M16 275.6h480v39.1H16z"/><path fill="#FCD638" d="M16 314.7h480v39.1H16z"/><path fill="#E03232" d="M16 353.8h480v39.1H16z"/><path fill="#FCD638" d="M16 392.9h480V432H16z"/></svg>',
 
 	'cs-cz': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#FFF" d="M16 80.6h480v176H16z"/><path fill="#E03232" d="M16 256h480v176H16z"/><path fill="#0035A0" d="m16 80 192 176L16 432z"/></svg>',

package/src/scss/mixins/_buttons.scss

@@ -735,6 +735,10 @@
 					@include clay-css($active-class-after);
 				}
 
+				&:focus {
+					@include clay-css(map-deep-get($map, active-class, focus));
+				}
+
 				.inline-item {
 					@include clay-css(map-get($active-class, inline-item));
 				}