@clayui/css 3.53.0 → 3.56.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/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

@@ -228,6 +228,8 @@
 
 	'devices': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline devices1" d="M224 128H32c-17.7 0-32 14.3-32 32v320c0 17.7 14.3 32 32 32h192c17.7 0 32-14.3 32-32V160c0-17.7-14.3-32-32-32zM64 416V192h128v224H64z" fill="#{$color}"/><path class="lexicon-icon-outline devices2" d="M448 0H192c-35.3 0-64 28.7-64 64v32h64V64h256v384H288v64h160c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z" fill="#{$color}"/></svg>',
 
+	'diagonal-line': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline diagonal-line" d="M108.821 402.901c-18.746-18.745-18.746-49.137 0-67.882l226.274-226.274c18.745-18.746 49.137-18.746 67.882 0 18.745 18.745 18.745 49.137 0 67.882L176.703 402.901c-18.745 18.745-49.137 18.745-67.882 0Z" fill="#{$color}"/></svg>',
+
 	'diagram': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline diagram-connector" d="M256 368v-32c0-22.4 32-22.4 32 0v32c0 22.4-32 22.4-32 0zM304 448h-32c-22.4 0-22.4-32 0-32h32c22.4 0 22.4 32 0 32zM256 272v-64c0-22.4 32-22.4 32 0v64c0 22.4-32 22.4-32 0zM256 144v-32c0-22.4 32-22.4 32 0v32c0 22.4-32 22.4-32 0zM272 32h32c22.4 0 22.4 32 0 32h-32c-22.4 0-22.4-32 0-32z" fill="#{$color}"/><path class="lexicon-icon-outline diagram-partbox1" d="M208 224h-16v-64c0-19.2-12.8-32-32-32H32c-19.2 0-32 12.8-32 32v192c0 19.2 12.8 32 32 32h128c19.2 0 32-12.8 32-32v-96h16c19.2 0 22.4-32 0-32zm-80 96H64V192h64v128z" fill="#{$color}"/><path class="lexicon-icon-outline diagram-partbox2" d="M480 384h-64c-19.2 0-32 12.8-32 32h-16c-22.4 0-22.4 32 0 32h16v32c0 19.2 12.8 32 32 32h64c19.2 0 32-12.8 32-32v-64c0-19.2-12.8-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline diagram-partbox3" d="M480 0h-64c-19.2 0-32 12.8-32 32h-16c-22.4 0-22.4 32 0 32h16v32c0 19.2 12.8 32 32 32h64c19.2 0 32-12.8 32-32V32c0-19.2-12.8-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline diagram-partbox4" d="M480 192h-64c-19.2 0-32 12.8-32 32h-16c-22.4 0-22.4 32 0 32h16v32c0 19.2 12.8 32 32 32h64c19.2 0 32-12.8 32-32v-64c0-19.2-12.8-32-32-32z" fill="#{$color}"/></svg>',
 
 	'diamond': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M210.81 493.53C162.6 445.66 69.12 346.88 18.7 301.35c-17.9-16.16-30.95-57.26 0-90.54l192-192.28c33.39-30.68 72.58-17.94 90.62.11l192.11 192.17c31.74 34.16 16.43 73.37.11 90.65L301.32 493.53c-16.22 17.01-59.05 31.24-90.51 0z" fill="#{$color}"/></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));
 				}