@clayui/css 3.70.1 → 3.74.0

package/src/scss/cadmin/variables/_custom-forms.scss

@@ -24,7 +24,7 @@ $cadmin-custom-control-indicator-active-border-color: $cadmin-custom-control-ind
 $cadmin-custom-control-indicator-active-color: $cadmin-component-active-color !default;
 
 $cadmin-custom-control-indicator-disabled-bg: $cadmin-input-disabled-bg !default;
-$cadmin-custom-control-indicator-disabled-border-color: $cadmin-input-disabled-border-color !default;
+$cadmin-custom-control-indicator-disabled-border-color: $cadmin-secondary-l3 !default;
 $cadmin-custom-control-indicator-disabled-cursor: $cadmin-disabled-cursor !default;
 
 // Custom Control Indicator Checked
@@ -263,6 +263,20 @@ $cadmin-custom-control-input: map-deep-merge(
 			cursor: $cadmin-custom-control-indicator-disabled-cursor,
 			custom-control-label: $cadmin-custom-control-label-disabled,
 		),
+		readonly: (
+			custom-control-label: (
+				color: $cadmin-gray-900,
+				before: (
+					background-color: $cadmin-gray-200,
+					border-color: $cadmin-secondary-l3,
+				),
+			),
+			disabled: (
+				custom-control-label: (
+					color: $cadmin-custom-control-label-disabled-color,
+				),
+			),
+		),
 		checked: (
 			custom-control-label: (
 				before: (
@@ -327,7 +341,7 @@ $cadmin-custom-checkbox-indicator-indeterminate-border-color: $cadmin-custom-che
 
 $cadmin-custom-control-indicator-indeterminate-border-color: $cadmin-custom-control-indicator-checked-active-bg !default;
 
-$cadmin-custom-checkbox-indicator-indeterminate-box-shadow: none !default;
+$cadmin-custom-checkbox-indicator-indeterminate-box-shadow: null !default;
 $cadmin-custom-checkbox-indicator-indeterminate-color: $cadmin-custom-control-indicator-checked-color !default;
 
 $cadmin-custom-checkbox-indicator-icon-indeterminate: clay-icon(
@@ -365,6 +379,28 @@ $cadmin-custom-checkbox: map-deep-merge(
 						),
 					),
 				),
+				readonly: (
+					custom-control-label: (
+						before: (
+							background-color: $cadmin-white,
+							border-color: $cadmin-secondary-l2,
+						),
+						after: (
+							background-image:
+								clay-icon(check-small, $cadmin-secondary),
+						),
+					),
+					disabled: (
+						custom-control-label: (
+							before: (
+								opacity: 0.4,
+							),
+							after: (
+								opacity: 0.4,
+							),
+						),
+					),
+				),
 			),
 			indeterminate: (
 				custom-control-label: (
@@ -395,6 +431,27 @@ $cadmin-custom-checkbox: map-deep-merge(
 						),
 					),
 				),
+				readonly: (
+					custom-control-label: (
+						before: (
+							background-color: $cadmin-white,
+							border-color: $cadmin-secondary-l2,
+						),
+						after: (
+							background-image: clay-icon(hr, $cadmin-secondary),
+						),
+					),
+					disabled: (
+						custom-control-label: (
+							before: (
+								opacity: 0.4,
+							),
+							after: (
+								opacity: 0.4,
+							),
+						),
+					),
+				),
 			),
 		),
 	),

package/src/scss/components/_tables.scss

@@ -78,20 +78,28 @@ caption {
 // Table Row Backgrounds
 
 @each $color, $value in $table-row-theme-colors {
-	.table-#{$color} {
-		$table-row: setter($value, ());
+	.table {
+		.table-#{$color} {
+			$table-row: setter($value, ());
 
-		&,
-		> th,
-		> td {
-			@include clay-css($table-row);
-		}
+			&,
+			> th,
+			> td {
+				@include clay-css($table-row);
 
-		th,
-		td,
-		thead th,
-		tbody + tbody {
-			border-color: map-get($table-row, border-color);
+				.table-title {
+					@include clay-text-typography(
+						map-get($table-row, table-title)
+					);
+				}
+			}
+
+			th,
+			td,
+			thead th,
+			tbody + tbody {
+				border-color: map-get($table-row, border-color);
+			}
 		}
 	}
 

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

@@ -300,7 +300,7 @@
 /// @param {String} $var - The CSS Custom Property to evaluate.
 
 @function clay-get-fallback($var) {
-	@if (is-css-var($var)) {
+	@if (is-css-var($var) and str-index($var, ',')) {
 		$fallback-value: str-slice(
 			$var,
 			str-index($var, ',') + 2,

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

@@ -350,8 +350,14 @@
 
 	'en-us': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80h480v32H16z"/><path fill="#FFF" d="M16 112h480v32H16z"/><path fill="#E03232" d="M16 144h480v32H16z"/><path fill="#FFF" d="M16 176h480v32H16z"/><path fill="#E03232" d="M16 208h480v32H16z"/><path fill="#FFF" d="M16 240h480v32H16z"/><path fill="#E03232" d="M16 272h480v32H16z"/><path fill="#FFF" d="M16 304h480v32H16z"/><path fill="#E03232" d="M16 336h480v32H16z"/><path fill="#FFF" d="M16 368h480v32H16z"/><path fill="#E03232" d="M16 400h480v32H16z"/><path fill="#66A1CC" d="M16 80h256v192H16z"/><path fill="#0035A0" d="M16 80h256v192H16z"/></svg>',
 
+	'es-ar': '<svg width="512" height="384" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M512 0H0v384h512V0Z" fill="#C0CFD8"/><path d="M496 16.3H16v112h480v-112ZM496 256H16v112h480V256Z" fill="#5FC8FF"/><path d="M496 128H16v128h480V128Z" fill="#fff"/><circle cx="256" cy="192" r="64" fill="#FFD76E"/></svg>',
+
+	'es-co': '<svg width="512" height="384" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M512 0H0v384h512V0Z" fill="#C0CFD8"/><path d="M496 16H16v160h480V16Z" fill="#FFDB3E"/><path d="M496 272H16v96h480v-96Z" fill="#E03232"/><path d="M496 176H16v96h480v-96Z" fill="#2E5AAC"/></svg>',
+
 	'es-es': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80.3h480v112H16zM16 320h480v112H16z"/><path fill="#FCD638" d="M16 192h480v128H16z"/></svg>',
 
+	'es-mx': '<svg width="512" height="384" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M512 0H0v384h512V0Z" fill="#C0CFD8"/><path d="M176 16H16v352h160V16Z" fill="#6FB247"/><path d="M496 16H336v352h160V16Z" fill="#E03232"/><path d="M336 16H176v352h160V16Z" fill="#fff"/><circle cx="256" cy="192" r="64" fill="#FF9A3B"/></svg>',
+
 	'et-ee': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#448FDC" d="M16 80.3h480v112H16z"/><path fill="#FFF" d="M16 320h480v112H16z"/><path d="M16 192h480v128H16z"/></svg>',
 
 	'eu-es': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#0094CE" d="M16 80.3h480v112H16z"/><path fill="#FFF" d="M16 320h480v112H16z"/><path fill="#4C4C4E" d="M16 192h480v128H16z"/><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80h480v352H16z"/><path fill="#75BD4A" d="M256 295.7 441.9 432H496v-39.7L310.1 256 496 119.7V80h-54.1L256 216.3 70.1 80H16v39.7L201.9 256 16 392.3V432h54.1z"/><path fill="#FFF" d="M496 224H288V80h-64v144H16v64h208v144h64V288h208z"/></svg>',

package/src/scss/mixins/_custom-forms.scss

@@ -244,6 +244,114 @@
 				}
 			}
 
+			&[readonly] {
+				@include clay-css(map-deep-get($map, readonly));
+
+				~ .custom-control-label {
+					@include clay-css(
+						map-deep-get($map, readonly, custom-control-label)
+					);
+				}
+
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							readonly,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							readonly,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, readonly, card)
+					);
+				}
+			}
+
+			&[readonly][disabled] {
+				@include clay-css(map-deep-get($map, readonly, disabled));
+
+				~ .custom-control-label {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							readonly,
+							disabled,
+							custom-control-label
+						)
+					);
+				}
+
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							readonly,
+							disabled,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							readonly,
+							disabled,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, readonly, disabled, card)
+					);
+				}
+			}
+
+			&:checked {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get($map, checked, custom-control-label, after)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, checked, card)
+					);
+				}
+			}
+
 			&:checked:hover {
 				~ .custom-control-label::before {
 					@include clay-css(
@@ -373,6 +481,72 @@
 				}
 			}
 
+			&:checked[readonly] {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							readonly,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							readonly,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, checked, readonly, card)
+					);
+				}
+			}
+
+			&:checked[readonly][disabled] {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							readonly,
+							disabled,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							checked,
+							readonly,
+							disabled,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, checked, readonly, disabled, card)
+					);
+				}
+			}
+
 			&:indeterminate {
 				~ .custom-control-label::before {
 					@include clay-css(
@@ -531,6 +705,78 @@
 					);
 				}
 			}
+
+			&:indeterminate[readonly] {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							readonly,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							readonly,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get($map, indeterminate, readonly, card)
+					);
+				}
+			}
+
+			&:indeterminate[readonly][disabled] {
+				~ .custom-control-label::before {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							readonly,
+							disabled,
+							custom-control-label,
+							before
+						)
+					);
+				}
+
+				~ .custom-control-label::after {
+					@include clay-css(
+						map-deep-get(
+							$map,
+							indeterminate,
+							readonly,
+							disabled,
+							custom-control-label,
+							after
+						)
+					);
+				}
+
+				~ .card {
+					@include clay-card-variant(
+						map-deep-get(
+							$map,
+							indeterminate,
+							readonly,
+							disabled,
+							card
+						)
+					);
+				}
+			}
 		}
 	}
 }

package/src/scss/variables/_buttons.scss

@@ -93,6 +93,8 @@ $btn: map-deep-merge(
 		),
 		inline-item: (
 			font-size: $btn-inline-item-font-size,
+			line-height: 1,
+			margin-top: -3px,
 			lexicon-icon: (
 				margin-top: 0,
 			),
@@ -194,6 +196,26 @@ $btn-sm: map-deep-merge(
 $btn-sizes: () !default;
 $btn-sizes: map-deep-merge(
 	(
+		btn-xs: (
+			font-size: 0.75rem,
+			padding-bottom: 0.125rem,
+			padding-left: 0.5rem,
+			padding-right: 0.5rem,
+			padding-top: 0.125rem,
+			inline-item: (
+				font-size: inherit,
+				margin-top: -3px,
+			),
+			inline-item-before: (
+				margin-right: 0.25rem,
+			),
+			inline-item-after: (
+				margin-left: 0.25rem,
+			),
+			btn-section: (
+				font-size: 0.375rem,
+			),
+		),
 		btn-lg: $btn-lg,
 		btn-sm: $btn-sm,
 	),
@@ -230,6 +252,9 @@ $btn-monospaced: map-deep-merge(
 			height: $btn-monospaced-size-mobile,
 			width: $btn-monospaced-size-mobile,
 		),
+		inline-item: (
+			margin-top: 0,
+		),
 		lexicon-icon: (
 			margin-top: 0,
 		),
@@ -301,6 +326,10 @@ $btn-monospaced-sm: map-deep-merge(
 $btn-monospaced-sizes: () !default;
 $btn-monospaced-sizes: map-deep-merge(
 	(
+		btn-monospaced-xs: (
+			height: 1.5rem,
+			width: 1.5rem,
+		),
 		btn-monospaced: $btn-monospaced,
 		btn-monospaced-lg: $btn-monospaced-lg,
 		btn-monospaced-sm: $btn-monospaced-sm,

package/src/scss/variables/_custom-forms.scss

@@ -287,6 +287,14 @@ $custom-control-input: map-deep-merge(
 					),
 				),
 			),
+			readonly: (
+				custom-control-label: (
+					before: (
+						background-color: $custom-control-indicator-bg,
+						border-color: $custom-control-indicator-border-color,
+					),
+				),
+			),
 		),
 	),
 	$custom-control-input
@@ -353,6 +361,19 @@ $custom-checkbox: map-deep-merge(
 						),
 					),
 				),
+				readonly: (
+					custom-control-label: (
+						before: (
+							background-color: $white,
+						),
+						after: (
+							background-image:
+								clay-svg-url(
+									"<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$gray-600}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>"
+								),
+						),
+					),
+				),
 			),
 			indeterminate: (
 				custom-control-label: (
@@ -385,6 +406,20 @@ $custom-checkbox: map-deep-merge(
 						),
 					),
 				),
+				readonly: (
+					custom-control-label: (
+						before: (
+							background-color: $custom-control-indicator-bg,
+							border-color: $custom-control-indicator-border-color,
+						),
+						after: (
+							background-image:
+								clay-svg-url(
+									"<svg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'><path stroke='#{$gray-800}' d='M0 2h4'/></svg>"
+								),
+						),
+					),
+				),
 			),
 		),
 	),

package/src/scss/variables/_tables.scss

@@ -938,6 +938,12 @@ $table-row-theme-colors: map-deep-merge(
 				background-color:
 					clay-darken(theme-color-level(dark, $table-bg-level), 5%),
 			),
+			table-title: (
+				color: $table-dark-color,
+				href: (
+					color: inherit,
+				),
+			),
 		),
 	),
 	$table-row-theme-colors