@clayui/css 3.137.0 → 3.139.0

package/src/scss/mixins/_stickers.scss

@@ -221,6 +221,453 @@
 				@include clay-css($base);
 			}
 
+			$_hover: map-get($map, hover);
+
+			@if ($_hover) {
+				&:hover {
+					@include clay-css($_hover);
+
+					$_before: map-get($_hover, before);
+
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
+
+					$_after: map-get($_hover, after);
+
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
+
+					$_inline-item: map-get($_hover, inline-item);
+
+					@if ($_inline-item) {
+						.inline-item {
+							@include clay-css($_inline-item);
+						}
+					}
+
+					$_inline-item-before: map-get($_hover, inline-item-before);
+
+					@if ($_inline-item-before) {
+						.inline-item-before {
+							@include clay-css($_inline-item-before);
+						}
+					}
+
+					$_inline-item-middle: map-get($_hover, inline-item-middle);
+
+					@if ($_inline-item-middle) {
+						.inline-item-middle {
+							@include clay-css($_inline-item-middle);
+						}
+					}
+
+					$_inline-item-after: map-get($_hover, inline-item-after);
+
+					@if ($_inline-item-after) {
+						.inline-item-after {
+							@include clay-css($_inline-item-after);
+						}
+					}
+				}
+			}
+
+			$_focus: map-get($map, focus);
+
+			@if ($_focus) {
+				@at-root {
+					&.focus,
+					#{$focus-visible-selector},
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
+						@include clay-css($_focus);
+
+						$_before: map-get($_focus, before);
+
+						@if ($_before) {
+							&::before {
+								@include clay-css($_before);
+							}
+						}
+
+						$_after: map-get($_focus, after);
+
+						@if ($_after) {
+							&::after {
+								@include clay-css($_after);
+							}
+						}
+
+						$_hover: map-get($_focus, hover);
+
+						@if ($_hover) {
+							&:hover {
+								@include clay-css($_hover);
+
+								$_before: map-get($_hover, before);
+
+								@if ($_before) {
+									&::before {
+										@include clay-css($_before);
+									}
+								}
+
+								$_after: map-get($_hover, after);
+
+								@if ($_after) {
+									&::after {
+										@include clay-css($_after);
+									}
+								}
+							}
+						}
+
+						$_inline-item: map-get($_focus, inline-item);
+
+						@if ($_inline-item) {
+							.inline-item {
+								@include clay-css($_inline-item);
+							}
+						}
+
+						$_inline-item-before: map-get(
+							$_focus,
+							inline-item-before
+						);
+
+						@if ($_inline-item-before) {
+							.inline-item-before {
+								@include clay-css($_inline-item-before);
+							}
+						}
+
+						$_inline-item-middle: map-get(
+							$_focus,
+							inline-item-middle
+						);
+
+						@if ($_inline-item-middle) {
+							.inline-item-middle {
+								@include clay-css($_inline-item-middle);
+							}
+						}
+
+						$_inline-item-after: map-get(
+							$_focus,
+							inline-item-after
+						);
+
+						@if ($_inline-item-after) {
+							.inline-item-after {
+								@include clay-css($_inline-item-after);
+							}
+						}
+					}
+				}
+			}
+
+			$_active: map-get($map, active);
+
+			@if ($_active) {
+				&:active {
+					@include clay-css($_active);
+
+					$_before: map-get($_active, before);
+
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
+
+					$_after: map-get($_active, after);
+
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
+
+					$_focus: map-get($_active, focus);
+
+					@if ($_focus) {
+						@at-root {
+							#{$focus-visible-selector},
+							#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
+								@include clay-css($_focus);
+
+								$_before: map-get($_focus, before);
+
+								@if ($_before) {
+									&::before {
+										@include clay-css($_before);
+									}
+								}
+
+								$_after: map-get($_focus, after);
+
+								@if ($_after) {
+									&::after {
+										@include clay-css($_after);
+									}
+								}
+							}
+						}
+					}
+
+					$_inline-item: map-get($_active, inline-item);
+
+					@if ($_inline-item) {
+						.inline-item {
+							@include clay-css($_inline-item);
+						}
+					}
+
+					$_inline-item-before: map-get($_active, inline-item-before);
+
+					@if ($_inline-item-before) {
+						.inline-item-before {
+							@include clay-css($_inline-item-before);
+						}
+					}
+
+					$_inline-item-middle: map-get($_active, inline-item-middle);
+
+					@if ($_inline-item-middle) {
+						.inline-item-middle {
+							@include clay-css($_inline-item-middle);
+						}
+					}
+
+					$_inline-item-after: map-get($_active, inline-item-after);
+
+					@if ($_inline-item-after) {
+						.inline-item-after {
+							@include clay-css($_inline-item-after);
+						}
+					}
+				}
+			}
+
+			$_active-class: map-get($map, active-class);
+
+			@if ($_active-class) {
+				&.active {
+					@include clay-css($_active-class);
+
+					$_before: map-get($_active-class, before);
+
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
+
+					$_after: map-get($_active-class, after);
+
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
+
+					$_focus: map-get($_active-class, focus);
+
+					@if ($_focus) {
+						@at-root {
+							#{$focus-visible-selector},
+							#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
+								@include clay-css($_focus);
+							}
+						}
+					}
+
+					$_inline-item: map-get($_active-class, inline-item);
+
+					@if ($_inline-item) {
+						.inline-item {
+							@include clay-css($_inline-item);
+						}
+					}
+
+					$_inline-item-before: map-get(
+						$_active-class,
+						inline-item-before
+					);
+
+					@if ($_inline-item-before) {
+						.inline-item-before {
+							@include clay-css($_inline-item-before);
+						}
+					}
+
+					$_inline-item-middle: map-get(
+						$_active-class,
+						inline-item-middle
+					);
+
+					@if ($_inline-item-middle) {
+						.inline-item-middle {
+							@include clay-css($_inline-item-middle);
+						}
+					}
+
+					$_inline-item-after: map-get(
+						$_active-class,
+						inline-item-after
+					);
+
+					@if ($_inline-item-after) {
+						.inline-item-after {
+							@include clay-css($_inline-item-after);
+						}
+					}
+				}
+			}
+
+			$_disabled: map-get($map, disabled);
+
+			@if ($_disabled) {
+				&:disabled,
+				&.disabled {
+					@include clay-css($_disabled);
+
+					$_before: map-get($_disabled, before);
+
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
+
+					$_after: map-get($_disabled, after);
+
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
+
+					$_focus: map-get($_disabled, focus);
+
+					@if ($_focus) {
+						@at-root {
+							#{$focus-visible-selector},
+							#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
+								@include clay-css($_focus);
+
+								$_before: map-get($_focus, before);
+
+								@if ($_before) {
+									&::before {
+										@include clay-css($_before);
+									}
+								}
+
+								$_after: map-get($_focus, after);
+
+								@if ($_after) {
+									&::after {
+										@include clay-css($_after);
+									}
+								}
+							}
+						}
+					}
+
+					$_active: map-get($_disabled, active);
+
+					@if ($_active) {
+						&:active {
+							@include clay-css($_active);
+
+							$_before: map-get($_active, before);
+
+							@if ($_before) {
+								&::before {
+									@include clay-css($_before);
+								}
+							}
+
+							$_after: map-get($_active, after);
+
+							@if ($_after) {
+								&::after {
+									@include clay-css($_after);
+								}
+							}
+						}
+					}
+
+					$_inline-item: map-get($_disabled, inline-item);
+
+					@if ($_inline-item) {
+						.inline-item {
+							@include clay-css($_inline-item);
+						}
+					}
+
+					$_inline-item-before: map-get(
+						$_disabled,
+						inline-item-before
+					);
+
+					@if ($_inline-item-before) {
+						.inline-item-before {
+							@include clay-css($_inline-item-before);
+						}
+					}
+
+					$_inline-item-middle: map-get(
+						$_disabled,
+						inline-item-middle
+					);
+
+					@if ($_inline-item-middle) {
+						.inline-item-middle {
+							@include clay-css($_inline-item-middle);
+						}
+					}
+
+					$_inline-item-after: map-get($_disabled, inline-item-after);
+
+					@if ($_inline-item-after) {
+						.inline-item-after {
+							@include clay-css($_inline-item-after);
+						}
+					}
+				}
+			}
+
+			$_show: map-get($map, show);
+
+			@if ($_show) {
+				&[aria-expanded='true'],
+				&.show {
+					@include clay-css($_show);
+
+					$_before: map-get($_show, before);
+
+					@if ($_before) {
+						&::before {
+							@include clay-css($_before);
+						}
+					}
+
+					$_after: map-get($_show, after);
+
+					@if ($_after) {
+						&::after {
+							@include clay-css($_after);
+						}
+					}
+				}
+			}
+
 			@if (length($inline-item) != 0) {
 				> .inline-item {
 					@include clay-css($inline-item);

package/src/scss/variables/_forms.scss

@@ -695,6 +695,24 @@ $form-text: map-merge(
 		font-weight: $form-text-font-weight,
 		margin-top: $form-text-margin-top,
 		word-wrap: break-word,
+		blockquote: (
+			font-style: italic,
+			font-weight: $font-weight-normal,
+			margin-bottom: 0,
+			margin-top: 0.75rem,
+			padding-left: 0.75rem,
+			position: relative,
+			before: (
+				background-color: $secondary-l1,
+				bottom: 0,
+				content: '',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+				width: 0.125rem,
+			),
+		),
 	),
 	$form-text
 );
@@ -799,6 +817,12 @@ $input-danger: map-deep-merge(
 			box-shadow: $input-danger-focus-box-shadow,
 			color: $input-danger-focus-color,
 		),
+		focus-within: (
+			background-color: $input-danger-bg,
+			border-color: $input-danger-border-color,
+			box-shadow: $input-danger-box-shadow,
+			color: $input-danger-color,
+		),
 	),
 	$input-danger
 );
@@ -952,6 +976,12 @@ $input-warning: map-deep-merge(
 			box-shadow: $input-warning-focus-box-shadow,
 			color: $input-warning-focus-color,
 		),
+		focus-within: (
+			background-color: $input-warning-bg,
+			border-color: $input-warning-border-color,
+			box-shadow: $input-warning-box-shadow,
+			color: $input-warning-color,
+		),
 	),
 	$input-warning
 );
@@ -1105,6 +1135,12 @@ $input-success: map-deep-merge(
 			box-shadow: $input-success-focus-box-shadow,
 			color: $input-success-focus-color,
 		),
+		focus-within: (
+			background-color: $input-success-bg,
+			border-color: $input-success-border-color,
+			box-shadow: $input-success-box-shadow,
+			color: $input-success-color,
+		),
 	),
 	$input-success
 );

package/src/scss/variables/_modals.scss

@@ -143,7 +143,7 @@ $modal-body: map-deep-merge(
 			margin-right: math-sign($modal-inner-padding),
 			top: math-sign($modal-inner-padding),
 		),
-		'.close': (
+		'> .close': (
 			position: absolute,
 			right: 1rem,
 			top: 1rem,

package/src/scss/variables/_sidebar.scss

@@ -1,7 +1,7 @@
-$sidebar-padding-bottom: 1rem !default; // 16px
-$sidebar-padding-left: 1rem !default; // 16px
-$sidebar-padding-right: 1rem !default; // 16px
-$sidebar-padding-top: 1rem !default; // 16px
+$sidebar-padding-bottom: 1rem !default;
+$sidebar-padding-left: 1.5rem !default;
+$sidebar-padding-right: 1.5rem !default;
+$sidebar-padding-top: 1rem !default;
 
 // .sidebar-header .component-title
 
@@ -82,17 +82,22 @@ $sidebar: map-deep-merge(
 		height: 100%,
 		overflow: auto,
 		-webkit-overflow-scrolling: touch,
-		focus: (
-			box-shadow: $component-focus-inset-box-shadow,
-			outline: 0,
-		),
 		sidebar-header: (
 			padding-bottom: $sidebar-padding-bottom,
 			padding-left: $sidebar-padding-left,
-			padding-right: $sidebar-padding-right,
+			padding-right: 1rem,
 			padding-top: $sidebar-padding-top,
 			component-title: $sidebar-header-component-title,
 			component-subtitle: $sidebar-header-component-subtitle,
+			autofit-row: (
+				margin-left: -0.25rem,
+				margin-right: -0.25rem,
+				width: auto,
+				autofit-col: (
+					padding-left: 0.25rem,
+					padding-right: 0.25rem,
+				),
+			),
 		),
 		sidebar-footer: (
 			padding-bottom: $sidebar-padding-bottom,
@@ -220,6 +225,14 @@ $sidebar-light: map-deep-merge(
 		border-color: $gray-300,
 		border-left-width: 1px,
 		color: $gray-900,
+		sidebar-header: (
+			background-color: inherit,
+			border: 0px solid $gray-300,
+		),
+		sidebar-footer: (
+			background-color: inherit,
+			border: 0px solid $gray-300,
+		),
 		sidebar-dd: (
 			href: (
 				color: $gray-900,
@@ -297,6 +310,10 @@ $sidebar-dark: map-deep-merge(
 	$sidebar-dark
 );
 
+$sidebar-c-slideout-start: () !default;
+
+$sidebar-c-slideout-end: () !default;
+
 $sidebar-palette: () !default;
 $sidebar-palette: map-deep-merge(
 	(

package/src/scss/variables/_slideout.scss

@@ -44,10 +44,24 @@ $c-slideout-fixed: map-merge(
 	$c-slideout-fixed
 );
 
+$c-slideout-container: () !default;
+$c-slideout-container: map-deep-merge(
+	(
+		min-height: 480px,
+		position: relative,
+	),
+	$c-slideout-container
+);
+
 $c-slideout-push-start: () !default;
 $c-slideout-push-start: map-deep-merge(
 	(
 		padding-left: $c-slideout-sidebar-width,
+		media-breakpoint-down: (
+			md: (
+				padding-left: 0,
+			),
+		),
 	),
 	$c-slideout-push-start
 );
@@ -56,6 +70,11 @@ $c-slideout-push-end: () !default;
 $c-slideout-push-end: map-deep-merge(
 	(
 		padding-right: $c-slideout-sidebar-width,
+		media-breakpoint-down: (
+			md: (
+				padding-right: 0,
+			),
+		),
 	),
 	$c-slideout-push-end
 );
@@ -74,12 +93,18 @@ $c-slideout: map-deep-merge(
 		sidebar: (
 			display: none,
 			flex-shrink: 0,
-			overflow: visible,
 			position: relative,
 			width: $c-slideout-sidebar-width,
-		),
-		sidebar-body: (
-			flex-grow: 1,
+			sidebar-header: (
+				border-bottom-width: 1px,
+			),
+			sidebar-body: (
+				flex-grow: 1,
+				overflow: visible,
+			),
+			sidebar-footer: (
+				border-top-width: 1px,
+			),
 		),
 		sidebar-c-slideout-show: (
 			display: flex,

package/src/scss/variables/_stickers.scss

@@ -159,6 +159,12 @@ $sticker-xl: map-deep-merge(
 $sticker-sizes: () !default;
 $sticker-sizes: map-deep-merge(
 	(
+		sticker-xs: (
+			font-size: 0.5rem,
+			height: 1rem,
+			line-height: 1rem,
+			width: 1rem,
+		),
 		sticker-sm: $sticker-sm,
 		sticker-lg: $sticker-lg,
 		sticker-xl: $sticker-xl,