@clayui/css 3.137.0 → 3.139.0

package/src/scss/cadmin/variables/_forms.scss

@@ -631,6 +631,24 @@ $cadmin-form-text: map-merge(
 		font-weight: $cadmin-form-text-font-weight,
 		margin-top: $cadmin-form-text-margin-top,
 		word-wrap: break-word,
+		blockquote: (
+			font-style: italic,
+			font-weight: $cadmin-font-weight-normal,
+			margin-bottom: 0,
+			margin-top: 12px,
+			padding-left: 12px,
+			position: relative,
+			before: (
+				background-color: $cadmin-secondary-l1,
+				bottom: 0,
+				content: '',
+				display: block,
+				left: 0,
+				position: absolute,
+				top: 0,
+				width: 2px,
+			),
+		),
 	),
 	$cadmin-form-text
 );
@@ -678,7 +696,7 @@ $cadmin-form-feedback-invalid-color: $cadmin-danger !default;
 
 $cadmin-input-danger-bg: $cadmin-danger-l2 !default;
 $cadmin-input-danger-border-color: $cadmin-danger-l1 !default;
-$cadmin-input-danger-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$cadmin-input-danger-box-shadow: null !default;
 $cadmin-input-danger-color: $cadmin-input-color !default;
 
 $cadmin-input-danger-focus-bg: null !default;
@@ -699,6 +717,12 @@ $cadmin-input-danger: map-deep-merge(
 			box-shadow: $cadmin-input-danger-focus-box-shadow,
 			color: $cadmin-input-danger-focus-color,
 		),
+		focus-within: (
+			background-color: $cadmin-input-danger-bg,
+			border-color: $cadmin-input-danger-border-color,
+			box-shadow: $cadmin-input-danger-box-shadow,
+			color: $cadmin-input-danger-color,
+		),
 	),
 	$cadmin-input-danger
 );
@@ -848,7 +872,7 @@ $cadmin-has-error: map-deep-merge(
 
 $cadmin-input-warning-bg: $cadmin-warning-l2 !default;
 $cadmin-input-warning-border-color: $cadmin-warning-l1 !default;
-$cadmin-input-warning-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$cadmin-input-warning-box-shadow: null !default;
 $cadmin-input-warning-color: $cadmin-input-color !default;
 
 $cadmin-input-warning-focus-bg: null !default;
@@ -869,6 +893,12 @@ $cadmin-input-warning: map-deep-merge(
 			box-shadow: $cadmin-input-warning-focus-box-shadow,
 			color: $cadmin-input-warning-focus-color,
 		),
+		focus-within: (
+			background-color: $cadmin-input-warning-bg,
+			border-color: $cadmin-input-warning-border-color,
+			box-shadow: $cadmin-input-warning-box-shadow,
+			color: $cadmin-input-warning-color,
+		),
 	),
 	$cadmin-input-warning
 );
@@ -1018,7 +1048,7 @@ $cadmin-has-warning: map-deep-merge(
 
 $cadmin-input-success-bg: $cadmin-success-l2 !default;
 $cadmin-input-success-border-color: $cadmin-success-l1 !default;
-$cadmin-input-success-box-shadow: 0 0 rgba(0, 0, 0, 0) !default;
+$cadmin-input-success-box-shadow: null !default;
 $cadmin-input-success-color: $cadmin-input-color !default;
 
 $cadmin-input-success-focus-bg: null !default;
@@ -1039,6 +1069,12 @@ $cadmin-input-success: map-deep-merge(
 			box-shadow: $cadmin-input-success-focus-box-shadow,
 			color: $cadmin-input-success-focus-color,
 		),
+		focus-within: (
+			background-color: $cadmin-input-success-bg,
+			border-color: $cadmin-input-success-border-color,
+			box-shadow: $cadmin-input-success-box-shadow,
+			color: $cadmin-input-success-color,
+		),
 	),
 	$cadmin-input-success
 );

package/src/scss/cadmin/variables/_modals.scss

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

package/src/scss/cadmin/variables/_sidebar.scss

@@ -1,14 +1,14 @@
-$cadmin-sidebar-padding-bottom: 16px !default; // 16px
-$cadmin-sidebar-padding-left: 16px !default; // 16px
-$cadmin-sidebar-padding-right: 16px !default; // 16px
-$cadmin-sidebar-padding-top: 16px !default; // 16px
+$cadmin-sidebar-padding-bottom: 16px !default;
+$cadmin-sidebar-padding-left: 24px !default;
+$cadmin-sidebar-padding-right: 24px !default;
+$cadmin-sidebar-padding-top: 16px !default;
 
 // Sidebar Header Title
 
 $cadmin-sidebar-header-component-title: () !default;
 $cadmin-sidebar-header-component-title: map-deep-merge(
 	(
-		font-size: 20px,
+		font-size: 16px,
 		href: (
 			color: $cadmin-gray-900,
 		),
@@ -21,7 +21,7 @@ $cadmin-sidebar-header-component-title: map-deep-merge(
 $cadmin-sidebar-header-component-subtitle: () !default;
 $cadmin-sidebar-header-component-subtitle: map-deep-merge(
 	(
-		font-size: 12px,
+		font-size: 14px,
 		font-weight: $cadmin-font-weight-normal,
 		margin-bottom: 0,
 	),
@@ -86,10 +86,19 @@ $cadmin-sidebar: map-deep-merge(
 		sidebar-header: (
 			padding-bottom: $cadmin-sidebar-padding-bottom,
 			padding-left: $cadmin-sidebar-padding-left,
-			padding-right: $cadmin-sidebar-padding-right,
+			padding-right: 16px,
 			padding-top: $cadmin-sidebar-padding-top,
 			component-title: $cadmin-sidebar-header-component-title,
 			component-subtitle: $cadmin-sidebar-header-component-subtitle,
+			autofit-row: (
+				margin-left: -4px,
+				margin-right: -4px,
+				width: auto,
+				autofit-col: (
+					padding-left: 4px,
+					padding-right: 4px,
+				),
+			),
 		),
 		sidebar-footer: (
 			padding-bottom: $cadmin-sidebar-padding-bottom,
@@ -200,6 +209,14 @@ $cadmin-sidebar-light: map-deep-merge(
 		border-left-width: 0,
 		box-shadow: -4px 0 8px -4px rgba(0, 0, 0, 0.1),
 		color: $cadmin-gray-900,
+		sidebar-header: (
+			background-color: inherit,
+			border: 0px solid $cadmin-gray-300,
+		),
+		sidebar-footer: (
+			background-color: inherit,
+			border: 0px solid $cadmin-gray-300,
+		),
 		sidenav-start: (
 			box-shadow: 4px 0 8px -4px rgba(0, 0, 0, 0.1),
 		),
@@ -293,6 +310,18 @@ $cadmin-sidebar-dark: map-deep-merge(
 	$cadmin-sidebar-dark
 );
 
+$cadmin-sidebar-c-slideout-start: () !default;
+$cadmin-sidebar-c-slideout-start: map-deep-merge(
+	(
+		'.sidebar-light': (
+			box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
+		),
+	),
+	$cadmin-sidebar-c-slideout-start
+);
+
+$cadmin-sidebar-c-slideout-end: () !default;
+
 $cadmin-sidebar-palette: () !default;
 $cadmin-sidebar-palette: map-deep-merge(
 	(

package/src/scss/cadmin/variables/_slideout.scss

@@ -44,10 +44,24 @@ $cadmin-c-slideout-fixed: map-merge(
 	$cadmin-c-slideout-fixed
 );
 
+$cadmin-c-slideout-container: () !default;
+$cadmin-c-slideout-container: map-deep-merge(
+	(
+		min-height: 480px,
+		position: relative,
+	),
+	$cadmin-c-slideout-container
+);
+
 $cadmin-c-slideout-push-start: () !default;
 $cadmin-c-slideout-push-start: map-deep-merge(
 	(
 		padding-left: $cadmin-c-slideout-sidebar-width,
+		media-breakpoint-down: (
+			md: (
+				padding-left: 0,
+			),
+		),
 	),
 	$cadmin-c-slideout-push-start
 );
@@ -56,6 +70,11 @@ $cadmin-c-slideout-push-end: () !default;
 $cadmin-c-slideout-push-end: map-deep-merge(
 	(
 		padding-right: $cadmin-c-slideout-sidebar-width,
+		media-breakpoint-down: (
+			md: (
+				padding-right: 0,
+			),
+		),
 	),
 	$cadmin-c-slideout-push-end
 );
@@ -74,12 +93,18 @@ $cadmin-c-slideout: map-deep-merge(
 		sidebar: (
 			display: none,
 			flex-shrink: 0,
-			overflow: visible,
 			position: relative,
 			width: $cadmin-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/cadmin/variables/_stickers.scss

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

package/src/scss/components/_form-validation.scss

@@ -42,6 +42,22 @@
 
 .form-text {
 	@include clay-css($form-text);
+
+	$_blockquote: map-get($form-text, blockquote);
+
+	@if ($_blockquote) {
+		&.blockquote {
+			@include clay-css($_blockquote);
+
+			$_before: map-get($_blockquote, before);
+
+			@if ($_before) {
+				&::before {
+					@include clay-css($_before);
+				}
+			}
+		}
+	}
 }
 
 @if ($enable-bs4-deprecated) {

package/src/scss/components/_sidebar.scss

@@ -30,6 +30,30 @@
 			map-get($sidebar-header, component-subtitle)
 		);
 	}
+
+	$_autofit-row: map-get($sidebar-header, autofit-row);
+
+	@if ($_autofit-row) {
+		.autofit-row {
+			@include clay-css($_autofit-row);
+
+			$_autofit-col: map-get($_autofit-row, autofit-col);
+
+			@if ($_autofit-col) {
+				> .autofit-col {
+					@include clay-css($_autofit-col);
+				}
+			}
+
+			$_autofit-col-expand: map-get($_autofit-row, autofit-col-expand);
+
+			@if ($_autofit-col-expand) {
+				> .autofit-col-expand {
+					@include clay-css($_autofit-col-expand);
+				}
+			}
+		}
+	}
 }
 
 .sidebar-footer {
@@ -119,3 +143,11 @@
 		}
 	}
 }
+
+.c-slideout-start {
+	@include clay-map-to-css($sidebar-c-slideout-start);
+}
+
+.c-slideout-end {
+	@include clay-map-to-css($sidebar-c-slideout-end);
+}

package/src/scss/components/_slideout.scss

@@ -14,6 +14,10 @@
 	@include clay-css($c-slideout-absolute);
 }
 
+.c-slideout-container {
+	@include clay-map-to-css($c-slideout-container);
+}
+
 .c-slideout-push-start {
 	@include clay-css($c-slideout-push-start);
 }

package/src/scss/components/_utilities-functional-important.scss

@@ -445,6 +445,14 @@
 	z-index: $zindex-fixed;
 }
 
+.sticky-bottom {
+	@supports (position: sticky) {
+		bottom: 0;
+		position: sticky;
+		z-index: $zindex-sticky;
+	}
+}
+
 .sticky-top {
 	@supports (position: sticky) {
 		position: sticky;

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

@@ -206,7 +206,7 @@
 
 	'columns': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-body columns-bg-left" fill="none" d="M0 46.9V465c0 25.9 21.1 47 46.9 47h130.8c25.8 0 46.9-21.1 46.9-46.9V46.9c0-25.8-21.1-46.9-46.9-46.9H46.9C21.1 0 0 21.1 0 46.9z"/><path class="lexicon-icon-body columns-bg-right" fill="none" d="M287.3 46.9V465c0 25.8 21.1 46.9 46.9 46.9H465c25.8 0 46.9-21.1 46.9-46.9V46.9C512 21.1 490.9 0 465.1 0H334.3c-25.9 0-47 21.1-47 46.9z"/><path class="lexicon-icon-outline columns-border-left" d="M0 46.9V465c0 25.9 21.1 47 46.9 47h130.8c25.8 0 46.9-21.1 46.9-46.9V46.9c0-25.8-21.1-46.9-46.9-46.9H46.9C21.1 0 0 21.1 0 46.9zM160.7 64v384h-96V64h96z" fill="#{$color}"/><path class="lexicon-icon-outline columns-border-right" d="M287.3 46.9V465c0 25.8 21.1 46.9 46.9 46.9H465c25.8 0 46.9-21.1 46.9-46.9V46.9C512 21.1 490.9 0 465.1 0H334.3c-25.9 0-47 21.1-47 46.9zM448 64v384h-96V64h96z" fill="#{$color}"/></svg>',
 
-	'comments': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-body" fill="none" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h50.7l-41 41c-12.5 12.5-12.5 32.8 0 45.3 6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4l86.3-86.3H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64z"/><path class="lexicon-icon-outline comments-border" d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h50.7l-41 41c-12.5 12.5-12.5 32.8 0 45.3 6.2 6.2 14.4 9.4 22.6 9.4s16.4-3.1 22.6-9.4l86.3-86.3H448c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm0 352H64V64h384v288z" fill="#{$color}"/><path class="lexicon-icon-outline comments-line-top" d="M384 128H128c-17.7 0-32 14.3-32 32s14.3 32 32 32h256c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline comments-line-bottom" d="M288 224H128c-17.7 0-32 14.3-32 32s14.3 32 32 32h160c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="#{$color}"/></svg>',
+	'comments': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14 .002H2c-1.103 0-2 .897-2 2v9c0 1.103.897 2 2 2h1.584l-1.28 1.282a1.002 1.002 0 0 0 .705 1.709.986.986 0 0 0 .707-.294l2.696-2.697H14c1.103 0 2-.897 2-2v-9c0-1.103-.897-2-2-2Zm0 11H2v-9h12v9Z"/><path d="M12 3.502H4a.999.999 0 1 0 0 2h8a.999.999 0 1 0 0-2Zm-3.857 3.5H3.857c-.474 0-.857.447-.857 1 0 .553.383 1 .857 1h4.286c.474 0 .857-.447.857-1 0-.553-.383-1-.857-1Z"/></svg>',
 
 	'community': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M0 256.6c0 337.1 512 344.1 512 0 0-342.1-512-342.1-512 0zm60.6 106.5c7.3-61.8 67.3-106.5 109.3-106.9C296.2 255.1 307 403.8 305 474.8 199.3 505.3 90 429.4 60.6 363.1zM128 176c0-63.7 95.8-63.9 95.8 0 0 65.3-95.8 63.3-95.8 0zm276 85.4c32.7-50.7-8.3-101.4-52.4-101-57 .6-82.8 66.9-47.1 102.2-10.9 1.9-18.7 7.7-19 7.4-22.4-25-54.7-35.6-54.5-35.8 52.6-46.2 19.2-137.8-55.1-138.3-66.4-.5-110.6 81.1-54 139.4-63 26.3-81.3 83.5-81.8 81C4.7 149.3 134.3 31.9 256 31.9c123.5 0 258.3 112.6 211.3 299.2-21.4-46.3-50-63.7-63.3-69.7z" fill="#{$color}"/></svg>',
 
@@ -616,7 +616,7 @@
 
 	'message': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline message-speech-balloon-outline" d="M480 31.9H32c-19.2 0-32 12.8-32 32v320c0 19.2 12.8 32 32 32h64v32c0 25.6 32 44.8 54.4 22.4l54.4-54.4H480c19.2 0 32-12.8 32-32v-320c0-19.2-12.8-32-32-32zm-32 320H64v-256h384v256z" fill="#{$color}"/><path class="lexicon-icon-outline message-speech-balloon-content1" d="M336 159.9H144c-22.4 0-22.4 32 0 32h192c19.2 0 22.4-32 0-32z" fill="#{$color}"/><path class="lexicon-icon-outline message-speech-balloon-content2" d="M272 255.9H144c-22.4 0-22.4 32 0 32h128c19.2 0 22.4-32 0-32z" fill="#{$color}"/></svg>',
 
-	'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>',
+	'minus-circle': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M8 .002a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm-3.5 6.5a1.5 1.5 0 0 0 0 3h7a1.5 1.5 0 0 0 0-3h-7Z" 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>',
 
@@ -762,7 +762,7 @@
 
 	'repository': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M448 384c35.3 0 64-28.7 64-64V160c0-35.3-28.7-64-64-64h-96L241.1 12.8C230 4.5 216.5 0 202.7 0H64C28.7 0 0 28.7 0 64v256c0 35.3 28.7 64 64 64h160v64H32c-42 0-42 64 0 64h448c43 0 42-64 0-64H288v-64h160z" fill="#{$color}"/></svg>',
 
-	'reset': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M256 0C179.5 0 110.9 33.5 64 86.7V64c0-44.5-64-43-64 0v96c0 18.5 15 32 32 32h96c41.5 0 43.5-64 0-64h-15.1c35.2-39.3 86.2-64 143.1-64 251 0 253 384 0 384-95.1 0-174.1-69.2-189.3-160H2c15.7 126.3 123.5 224 254 224 337 0 342-512 0-512z" fill="#{$color}"/></svg>',
+	'reset': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M8 .002a7.973 7.973 0 0 0-6 2.71v-.71c0-.55-.45-1-1-1s-1 .45-1 1v3a1.005 1.005 0 0 0 1 1h3c.55 0 1-.45 1-1s-.45-1-1-1h-.472a6.002 6.002 0 0 1 10.472 4 6 6 0 0 1-11.916 1H.063A8 8 0 1 0 8 .002Z"/></svg>',
 
 	'restore': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline restore-hands" d="M180.7 347.3c3.1 3.1 7.2 4.7 11.3 4.7s8.2-1.6 11.3-4.7l48-48c6.3 3 13.3 4.7 20.7 4.7 26.5 0 48-21.5 48-48 0-20.9-13.4-38.7-32-45.3V112c0-8.8-7.2-16-16-16s-16 7.2-16 16v98.7c-18.6 6.6-32 24.4-32 45.3 0 7.4 1.7 14.4 4.7 20.7l-48 48c-6.3 6.2-6.3 16.4 0 22.6z" fill="#{$color}"/><path class="lexicon-icon-outline restore-border" d="M256 0C179.5 0 110.9 33.5 64 86.7V64c0-17.6-14.4-32-32-32S0 46.4 0 64v96c0 9.9 4.6 18.8 11.7 24.7 5.5 4.6 12.6 7.3 20.3 7.3h96c17.6 0 32-14.4 32-32s-14.4-32-32-32h-15.1c35.2-39.3 86.2-64 143.1-64 106 0 192 86 192 192s-86 192-192 192c-95.1 0-174.1-69.2-189.3-160H2c15.7 126.3 123.5 224 254 224 141.4 0 256-114.6 256-256S397.4 0 256 0z" fill="#{$color}"/></svg>',
 
@@ -828,7 +828,7 @@
 
 	'sites': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-body lx-sites-bg" fill="none" d="M437 75C388.7 26.6 324.4 0 256 0S123.3 26.6 75 75C26.6 123.3 0 187.6 0 256s26.6 132.7 75 181c48.4 48.4 112.6 75 181 75s132.7-26.6 181-75c48.4-48.4 75-112.6 75-181s-26.6-132.7-75-181z"/><path class="lexicon-icon-outline lx-sites-border" d="M437 75C388.7 26.6 324.4 0 256 0S123.3 26.6 75 75C26.6 123.3 0 187.6 0 256s26.6 132.7 75 181c48.4 48.4 112.6 75 181 75s132.7-26.6 181-75c48.4-48.4 75-112.6 75-181s-26.6-132.7-75-181zM256 448c-105.9 0-192-86.1-192-192S150.1 64 256 64s192 86.1 192 192-86.1 192-192 192z" fill="#{$color}"/><path class="lexicon-icon-outline lx-sites-hands" d="m128 384 192-64 64-192-192 64-64 192zm126.9-160c17.7 0 32 14.3 32 32s-14.3 32-32 32-32-14.3-32-32 14.3-32 32-32z" fill="#{$color}"/></svg>',
 
-	'slash': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m5.5 14.503 5-13"/></svg>',
+	'slash': '<svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M10.859.569a1 1 0 0 0-1.292.574l-5 13a1 1 0 0 0 1.866.718l5-13A1 1 0 0 0 10.86.57Z" fill="#{$color}"/></svg>',
 
 	'slideshow': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-slideshow-border" d="M64 480h384c32 0 64-32 64-64V96c0-32-32-64-64-64H64C32 32 0 64 0 96v320c0 32 32 64 64 64zm0-384h384v320H64" fill="#{$color}"/><circle class="lexicon-icon-outline lx-slideshow-dot-1" cx="160" cy="320" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline lx-slideshow-dot-2" cx="256" cy="320" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline lx-slideshow-dot-3" cx="352" cy="320" r="32" fill="#{$color}"/></svg>',
 

package/src/scss/mixins/_globals.scss

@@ -398,6 +398,13 @@
 					#{$key}: #{$value};
 				}
 			}
+
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+			$_media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints($map);
+			}
 		}
 	}
 }

package/src/scss/mixins/_grid.scss

@@ -229,6 +229,8 @@
 						@include clay-modal-variant($breakpoint-up);
 					} @else if ($mixin == 'clay-select-variant') {
 						@include clay-select-variant($breakpoint-up);
+					} @else if ($mixin == 'clay-slideout-variant') {
+						@include clay-slideout-variant($breakpoint-up);
 					}
 				}
 			}
@@ -263,6 +265,10 @@
 						@include clay-modal-variant($breakpoint-down);
 					} @else if ($mixin == 'clay-select-variant') {
 						@include clay-select-variant($breakpoint-down);
+					} @else if ($mixin == 'clay-slideout-variant') {
+						@include clay-slideout-variant($breakpoint-down);
+					} @else {
+						@error "The mixin, `#{$mixin}`, is not defined in clay-generate-media-breakpoints.";
 					}
 				}
 			}

package/src/scss/mixins/_sidebar.scss

@@ -490,6 +490,8 @@
 					@include clay-map-to-css($_input-group);
 				}
 			}
+
+			@include clay-map-to-css($map);
 		}
 	}
 }

package/src/scss/mixins/_slideout.scss

@@ -56,15 +56,7 @@
 
 			@if ($_sidebar) {
 				.sidebar {
-					@include clay-css($_sidebar);
-				}
-			}
-
-			$_sidebar-body: map-get($map, sidebar-body);
-
-			@if ($_sidebar-body) {
-				.sidebar-body {
-					@include clay-css($_sidebar-body);
+					@include clay-sidebar-variant($_sidebar);
 				}
 			}
 
@@ -154,6 +146,16 @@
 					}
 				}
 			}
+
+			$_media-breakpoint-down: map-get($map, media-breakpoint-down);
+			$_media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+			@if ($_media-breakpoint-down) or ($_media-breakpoint-up) {
+				@include clay-generate-media-breakpoints(
+					$map,
+					'clay-slideout-variant'
+				);
+			}
 		}
 	}
 }