@clayui/css 3.73.0 → 3.75.0

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

@@ -562,11 +562,13 @@
 
 	'minus-circle': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M256.4 0c-340.8 0-342.8 512 0 512 338.8 0 342.8-512 0-512zm128.3 304H128.1c-64.2 0-63.2-96 0-96h256.6c64.1 0 66.1 96 0 96z" fill="#{$color}"/></svg>',
 
-	'mobile-device-rules': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline mobile-device-rules-phone" d="M192 0H64C28.8 0 0 28.8 0 64v320.159c0 35.2 28.8 64 64 64h128c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm-63 416.159c-8.836 0-16-7.164-16-16s7.163-16 16-16 16 7.163 16 16-7.163 16-16 16zm63-96v30.804H64V64h128v256.159z" fill="#{$color}"/><circle class="lexicon-icon-outline mobile-device-rules-bullet-1" cx="320" cy="96" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline mobile-device-rules-bullet-3" cx="320" cy="352" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline mobile-device-rules-bullet-2" cx="320" cy="224" r="32" fill="#{$color}"/><path class="lexicon-icon-outline mobile-device-rules-item-1" d="M416 128h64c17.673 0 32-14.327 32-32s-14.327-32-32-32h-64c-17.673 0-32 14.327-32 32s14.327 32 32 32z" fill="#{$color}"/><path class="lexicon-icon-outline mobile-device-rules-item-2" d="M480 192h-64c-17.673 0-32 14.327-32 32s14.327 32 32 32h64c17.673 0 32-14.327 32-32s-14.327-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline mobile-device-rules-item-3" d="M480 320h-64c-17.673 0-32 14.327-32 32s14.327 32 32 32h64c17.673 0 32-14.327 32-32s-14.327-32-32-32z" fill="#{$color}"/></svg>',
+	'mobile-device-rules': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M256 96H64v320h192V96ZM64 32C28.654 32 0 60.654 0 96v320c0 35.346 28.654 64 64 64h192c35.346 0 64-28.654 64-64V96c0-35.346-28.654-64-64-64H64Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M112 352c0-8.837 7.163-16 16-16h64c8.837 0 16 7.163 16 16s-7.163 16-16 16h-64c-8.837 0-16-7.163-16-16Z" fill="#{$color}"/><rect class="lexicon-icon-outline" x="352" y="96" width="160" height="64" rx="32" fill="#{$color}"/><rect class="lexicon-icon-outline" x="352" y="224" width="160" height="64" rx="32" fill="#{$color}"/><rect class="lexicon-icon-outline" x="352" y="352" width="160" height="64" rx="32" fill="#{$color}"/></svg>',
 
-	'mobile-landscape': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M0 128v256c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64H64C28.8 64 0 92.8 0 128zm480 110v32c0 22-32 20-32 0v-32c0-22 32-21 32 0zm-96-109.3c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160.7c0-17.7 14.3-32 32-32h288z" fill="#{$color}"/></svg>',
+	'mobile-devices': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-mobile-devices-tablet" d="M192 0h256c35.312 0 64 28.7 64 64v384c0 35.301-28.688 64-64 64H288v-96h160V64H192v32h-64V64c0-35.3 28.688-64 64-64Z" fill="#{$color}"/><path class="lexicon-icon-outline lx-mobile-devices-phone" fill-rule="evenodd" clip-rule="evenodd" d="M256 160c0-17.699-14.312-32-32-32H32c-17.688 0-32 14.301-32 32v320c0 17.699 14.313 32 32 32h192c17.688 0 32-14.301 32-32V160ZM64 448V192h128v256H64Z" fill="#{$color}"/></svg>',
 
-	'mobile-portrait': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M384 0H128C92.8 0 64 28.8 64 64v384c0 35.2 28.8 64 64 64h256c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zM274 480h-32c-22 0-20-32 0-32h32c22 0 21 32 0 32zm109.3-96c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h191.3c17.7 0 32 14.3 32 32v288z" fill="#{$color}"/></svg>',
+	'mobile-landscape': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M448 384V128H64v256h384Zm64-256c0-35.346-28.654-64-64-64H64C28.654 64 0 92.654 0 128v256c0 35.346 28.654 64 64 64h384c35.346 0 64-28.654 64-64V128Z" fill="#{$color}"/><rect class="lexicon-icon-outline" x="192" y="288" width="128" height="32" rx="16" fill="#{$color}"/></svg>',
+
+	'mobile-portrait': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M384 64H128v384h256V64ZM128 0C92.654 0 64 28.654 64 64v384c0 35.346 28.654 64 64 64h256c35.346 0 64-28.654 64-64V64c0-35.346-28.654-64-64-64H128Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M192 368c0-8.837 7.163-16 16-16h96c8.837 0 16 7.163 16 16s-7.163 16-16 16h-96c-8.837 0-16-7.163-16-16Z" fill="#{$color}"/></svg>',
 
 	'moon': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M186.5 81.4c0-25.4 3.8-49.8 10.7-72.9C84.3 34.3 0 135.2 0 256c0 140.3 113.7 254 254 254 114.9 0 212-76.3 243.3-181.1-18.3 4.2-37.3 6.5-56.8 6.5-140.2 0-254-113.8-254-254z" fill="#{$color}"/></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/_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