@clayui/css 3.147.0 → 3.149.1

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

@@ -6,6 +6,10 @@ $cadmin-c-slideout-tbar-stacked-min-width: 40px !default;
 
 $cadmin-c-slideout-tbar-stacked-min-width-mobile: 40px !default;
 
+$cadmin-c-slideout-fluid-sidebar-width-md: '50vw' !default;
+
+$cadmin-c-slideout-fluid-sidebar-width: '33vw' !default;
+
 // C Slideout Transitions
 
 $cadmin-c-slideout-transition-in: () !default;
@@ -81,6 +85,16 @@ $cadmin-c-slideout-push-end: map-deep-merge(
 
 // C Slideout Base
 
+$cadmin-c-slideout-sm-down: () !default;
+$cadmin-c-slideout-sm-down: map-deep-merge(
+	(
+		sidebar: (
+			width: $cadmin-c-slideout-sidebar-width-mobile,
+		),
+	),
+	$cadmin-c-slideout-sm-down
+);
+
 $cadmin-c-slideout: () !default;
 $cadmin-c-slideout: map-deep-merge(
 	(
@@ -102,6 +116,16 @@ $cadmin-c-slideout: map-deep-merge(
 			sidebar-footer: (
 				border-top-width: 1px,
 			),
+			'@supports (position: sticky)': (
+				'@media (max-height: 700px)': (
+					'.sidebar-header.sticky-top': (
+						position: static,
+					),
+					'.sidebar-footer.sticky-bottom': (
+						position: static,
+					),
+				),
+			),
 		),
 		sidebar-c-slideout-show: (
 			display: flex,
@@ -128,22 +152,76 @@ $cadmin-c-slideout: map-deep-merge(
 		tbar-stacked-c-slideout-transition: (
 			display: block,
 		),
+		media-breakpoint-down: (
+			sm: $cadmin-c-slideout-sm-down,
+		),
 	),
 	$cadmin-c-slideout
 );
 
-$cadmin-c-slideout-sm-down: () !default;
-$cadmin-c-slideout-sm-down: map-deep-merge(
+$cadmin-c-slideout-fluid: () !default;
+$cadmin-c-slideout-fluid: map-deep-merge(
 	(
+		'&.c-slideout-push-start': (
+			padding-left: $cadmin-c-slideout-fluid-sidebar-width,
+		),
+		'&.c-slideout-push-end': (
+			padding-right: $cadmin-c-slideout-fluid-sidebar-width,
+		),
 		sidebar: (
-			width: $cadmin-c-slideout-sidebar-width-mobile,
+			max-width: $cadmin-c-slideout-fluid-sidebar-width,
+			width: $cadmin-c-slideout-fluid-sidebar-width,
+		),
+		media-breakpoint-down: (
+			md: (
+				'&.c-slideout-push-start': (
+					padding-left: $cadmin-c-slideout-fluid-sidebar-width-md,
+				),
+				'&.c-slideout-push-end': (
+					padding-right: $cadmin-c-slideout-fluid-sidebar-width-md,
+				),
+				sidebar: (
+					max-width: $cadmin-c-slideout-fluid-sidebar-width-md,
+					width: $cadmin-c-slideout-fluid-sidebar-width-md,
+				),
+			),
+			sm: (
+				'&.c-slideout-push-start': (
+					padding-left: 0,
+				),
+				'&.c-slideout-push-end': (
+					padding-right: 0,
+				),
+				sidebar: (
+					max-width: none,
+					width: 100vw,
+				),
+			),
 		),
 	),
-	$cadmin-c-slideout-sm-down
+	$cadmin-c-slideout-fluid
 );
 
 // C Slideout Start
 
+$cadmin-c-slideout-start-sm-down: () !default;
+$cadmin-c-slideout-start-sm-down: map-deep-merge(
+	(
+		c-slideout-tbar-shown-sidebar: (
+			left: math-sign($cadmin-c-slideout-sidebar-width-mobile),
+		),
+		sidebar: (
+			left: #{math-sign($cadmin-c-slideout-sidebar-width-mobile) +
+				math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile)},
+			width: $cadmin-c-slideout-sidebar-width-mobile,
+		),
+		tbar-stacked: (
+			left: math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile),
+		),
+	),
+	$cadmin-c-slideout-start-sm-down
+);
+
 $cadmin-c-slideout-start: () !default;
 $cadmin-c-slideout-start: map-deep-merge(
 	(
@@ -167,30 +245,32 @@ $cadmin-c-slideout-start: map-deep-merge(
 		tbar-stacked-c-slideout-show: (
 			left: 0,
 		),
+		media-breakpoint-down: (
+			sm: $cadmin-c-slideout-start-sm-down,
+		),
 	),
 	$cadmin-c-slideout-start
 );
 
-$cadmin-c-slideout-start-sm-down: () !default;
-$cadmin-c-slideout-start-sm-down: map-deep-merge(
+// C Slideout End
+
+$cadmin-c-slideout-end-sm-down: () !default;
+$cadmin-c-slideout-end-sm-down: map-deep-merge(
 	(
 		c-slideout-tbar-shown-sidebar: (
-			left: math-sign($cadmin-c-slideout-sidebar-width-mobile),
+			right: math-sign($cadmin-c-slideout-sidebar-width-mobile),
 		),
 		sidebar: (
-			left: #{math-sign($cadmin-c-slideout-sidebar-width-mobile) +
+			right: #{math-sign($cadmin-c-slideout-sidebar-width-mobile) +
 				math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile)},
-			width: $cadmin-c-slideout-sidebar-width-mobile,
 		),
 		tbar-stacked: (
-			left: math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile),
+			right: math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile),
 		),
 	),
-	$cadmin-c-slideout-start-sm-down
+	$cadmin-c-slideout-end-sm-down
 );
 
-// C Slideout End
-
 $cadmin-c-slideout-end: () !default;
 $cadmin-c-slideout-end: map-deep-merge(
 	(
@@ -217,25 +297,11 @@ $cadmin-c-slideout-end: map-deep-merge(
 			left: 0,
 			right: auto,
 		),
-	),
-	$cadmin-c-slideout-end
-);
-
-$cadmin-c-slideout-end-sm-down: () !default;
-$cadmin-c-slideout-end-sm-down: map-deep-merge(
-	(
-		c-slideout-tbar-shown-sidebar: (
-			right: math-sign($cadmin-c-slideout-sidebar-width-mobile),
-		),
-		sidebar: (
-			right: #{math-sign($cadmin-c-slideout-sidebar-width-mobile) +
-				math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile)},
-		),
-		tbar-stacked: (
-			right: math-sign($cadmin-c-slideout-tbar-stacked-min-width-mobile),
+		media-breakpoint-down: (
+			sm: $cadmin-c-slideout-end-sm-down,
 		),
 	),
-	$cadmin-c-slideout-end-sm-down
+	$cadmin-c-slideout-end
 );
 
 $cadmin-c-slideout-height-full: () !default;

package/src/scss/cadmin/variables/_utilities.scss

@@ -1,5 +1,16 @@
 $cadmin-bg-checkered-fg: $cadmin-gray-300 !default;
 
+$cadmin-c-focus-trap: () !default;
+$cadmin-c-focus-trap: map-merge(
+	(
+		background: inherit,
+		color: inherit,
+		display: contents,
+		font: inherit,
+	),
+	$cadmin-c-focus-trap
+);
+
 // .inline-scroller
 
 $cadmin-inline-scroller-max-height: 125px !default;

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

@@ -60,6 +60,10 @@
 	}
 }
 
+.form-help-text {
+	@include clay-css($form-help-text);
+}
+
 @if ($enable-bs4-deprecated) {
 	.was-validated .form-control:valid,
 	.was-validated .form-control.is-valid {

package/src/scss/components/_forms.scss

@@ -33,10 +33,26 @@ label {
 		@include clay-css(map-get($input-label, for));
 	}
 
+	$_form-feedback-group: map-get($input-label, '+ .form-feedback-group');
+
+	@if ($_form-feedback-group) {
+		+ .form-feedback-group {
+			@include clay-css($_form-feedback-group);
+		}
+	}
+
 	+ .form-text {
 		@include clay-css(map-get($input-label, form-text));
 	}
 
+	$_form-help-text: map-get($input-label, form-help-text);
+
+	@if ($_form-help-text) {
+		.form-help-text {
+			@include clay-css($_form-help-text);
+		}
+	}
+
 	.reference-mark {
 		@include clay-css(map-get($input-label, reference-mark));
 	}

package/src/scss/components/_pagination.scss

@@ -56,12 +56,14 @@
 	@include clay-css($pagination-results);
 }
 
-// Pagination Sizes
+/// @deprecated Pagination Sizes as of v3.146.0
 
-.pagination-sm {
-	@include clay-pagination-variant($pagination-sm);
-}
+@if ($enable-pagination-sizes) {
+	.pagination-sm {
+		@include clay-pagination-variant($pagination-sm);
+	}
 
-.pagination-lg {
-	@include clay-pagination-variant($pagination-lg);
+	.pagination-lg {
+		@include clay-pagination-variant($pagination-lg);
+	}
 }

package/src/scss/components/_slideout.scss

@@ -28,26 +28,18 @@
 
 .c-slideout {
 	@include clay-slideout-variant($c-slideout);
+}
 
-	@include media-breakpoint-down(sm) {
-		@include clay-slideout-variant($c-slideout-sm-down);
-	}
+.c-slideout-fluid {
+	@include clay-slideout-variant($c-slideout-fluid);
 }
 
 .c-slideout-start {
 	@include clay-slideout-variant($c-slideout-start);
-
-	@include media-breakpoint-down(sm) {
-		@include clay-slideout-variant($c-slideout-start-sm-down);
-	}
 }
 
 .c-slideout-end {
 	@include clay-slideout-variant($c-slideout-end);
-
-	@include media-breakpoint-down(sm) {
-		@include clay-slideout-variant($c-slideout-end-sm-down);
-	}
 }
 
 .c-slideout-height-full {

package/src/scss/components/_utilities.scss

@@ -19,6 +19,10 @@
 	}
 }
 
+.c-focus-trap {
+	@include clay-map-to-css($c-focus-trap);
+}
+
 // Autofit Row
 
 %autofit-row {

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

@@ -362,6 +362,10 @@
 			str-length($var) - 1
 		);
 
+		@if (is-css-var($fallback-value)) {
+			$fallback-value: clay-get-fallback($fallback-value);
+		}
+
 		$units: 'px'
 			'cm'
 			'mm'
@@ -379,7 +383,7 @@
 			'vmax';
 
 		@each $unit in $units {
-			@if (str-index($fallback-value, $unit)) {
+			@if (str-index('#{$fallback-value}', $unit)) {
 				@return to-number($fallback-value);
 			}
 		}

package/src/scss/mixins/_globals.scss

@@ -451,6 +451,14 @@
 							}
 						}
 					}
+				} @else if (starts-with($selector, '@supports ')) {
+					@supports #{clay-str-replace(
+							'#{$selector}',
+							'@supports ',
+							''
+						)} {
+						@include clay-map-to-css($value);
+					}
 				} @else {
 					#{$selector} {
 						@include clay-map-to-css($value);

package/src/scss/mixins/_sidebar.scss

@@ -112,6 +112,12 @@
 			)
 		);
 
+		@each $key, $value in $base {
+			@if (type-of($value) != 'map') {
+				$map: map-remove($map, $key);
+			}
+		}
+
 		$panel: map-merge(
 			setter(map-get($map, sidebar-panel), ()),
 			setter(map-get($map, panel), ())
@@ -128,40 +134,57 @@
 			)
 		);
 
+		$map: map-remove($map, sidebar-panel, panel);
+
 		$header: map-merge(
 			setter(map-get($map, sidebar-header), ()),
 			setter(map-get($map, header), ())
 		);
 
+		$map: map-remove($map, sidebar-header, header);
+
 		$header-component-title: map-merge(
 			setter(map-get($header, component-title), ()),
 			setter(map-get($map, component-header-title), ())
 		);
 
+		$map: map-remove($map, component-title, component-header-title);
+
 		$header-component-subtitle: map-merge(
 			setter(map-get($header, component-subtitle), ()),
 			setter(map-get($map, component-header-subtitle), ())
 		);
 
+		$map: map-remove($map, component-subtitle, component-header-subtitle);
+
 		$body: map-merge(
 			setter(map-get($map, sidebar-body), ()),
 			setter(map-get($map, body), ())
 		);
 
+		$map: map-remove($map, sidebar-body, body);
+
 		$footer: map-merge(
 			setter(map-get($map, sidebar-footer), ()),
 			setter(map-get($map, footer), ())
 		);
 
+		$map: map-remove($map, sidebar-footer, footer);
+
 		$dt: map-merge(
 			setter(map-get($map, sidebar-dt), ()),
 			setter(map-get($map, dt), ())
 		);
+
+		$map: map-remove($map, sidebar-dt, dt);
+
 		$dd: map-merge(
 			setter(map-get($map, sidebar-dd), ()),
 			setter(map-get($map, dd), ())
 		);
 
+		$map: map-remove($map, sidebar-dd, dd);
+
 		$nav-nested: setter(map-get($map, nav-nested), ());
 
 		$nav-nested-nav-link: map-merge(
@@ -169,8 +192,12 @@
 			setter(map-get($map, nav-nested-link), ())
 		);
 
+		$map: map-remove($map, nav-link, nav-nested, nav-nested-link);
+
 		$sidebar-list-group: setter(map-get($map, sidebar-list-group), ());
 
+		$map: map-remove($map, sidebar-list-group);
+
 		$sidebar-list-group-item: setter(
 			map-get($sidebar-list-group, list-group-item),
 			()
@@ -199,36 +226,63 @@
 			)
 		);
 
+		$map: map-remove(
+			$map,
+			list-group-item,
+			sidebar-list-group-item-bg,
+			sidebar-list-group-item-border-color
+		);
+
 		$sidebar-list-group-title: map-merge(
 			setter(map-get($sidebar-list-group, list-group-title), ()),
 			setter(map-get($map, sidebar-list-group-title), ())
 		);
 
+		$map: map-remove($map, list-group-title, sidebar-list-group-title);
+
 		$sidebar-list-group-subtitle: map-merge(
 			setter(map-get($sidebar-list-group, list-group-subtitle), ()),
 			setter(map-get($map, sidebar-list-group-subtitle), ())
 		);
 
+		$map: map-remove(
+			$map,
+			list-group-subtitle,
+			sidebar-list-group-subtitle
+		);
+
 		$sidebar-list-group-text: map-merge(
 			setter(map-get($sidebar-list-group, list-group-text), ()),
 			setter(map-get($map, sidebar-list-group-text), ())
 		);
 
+		$map: map-remove($map, list-group-text, sidebar-list-group-text);
+
 		$sidebar-list-group-subtext: map-merge(
 			setter(map-get($sidebar-list-group, list-group-subtext), ()),
 			setter(map-get($map, sidebar-list-group-subtext), ())
 		);
 
+		$map: map-remove($map, list-group-subtext, sidebar-list-group-subtext);
+
 		$sidebar-list-group-sticker: map-deep-merge(
 			map-get($sidebar-list-group, sticker),
 			map-get($map, sidebar-list-group-sticker)
 		);
 
+		$map: map-remove($map, sticker, sidebar-list-group-sticker);
+
 		$sidebar-list-group-sticker-secondary: map-deep-merge(
 			map-get($sidebar-list-group, sticker-secondary),
 			map-get($map, sidebar-list-group-sticker-secondary)
 		);
 
+		$map: map-remove(
+			$map,
+			sticker-secondary,
+			sidebar-list-group-sticker-secondary
+		);
+
 		@if ($enabled) {
 			@if (length($base) != 0) {
 				@include clay-css($base);
@@ -236,6 +290,7 @@
 
 			@at-root {
 				$_sidenav-start: map-get($map, sidenav-start);
+				$map: map-remove($map, sidenav-start);
 
 				@if ($_sidenav-start) {
 					#{clay-insert-before(clay-parent(&), '.sidenav-start ')},
@@ -255,6 +310,7 @@
 				}
 
 				$_sidenav-end: map-get($map, sidenav-right);
+				$map: map-remove($map, sidenav-right);
 
 				@if ($_sidenav-end) {
 					#{clay-insert-before(clay-parent(&), '.sidenav-end ')},
@@ -275,6 +331,7 @@
 			}
 
 			$_focus: map-get($map, focus);
+			$map: map-remove($map, focus);
 
 			@if ($_focus) {
 				@at-root {
@@ -287,6 +344,7 @@
 			}
 
 			$_component-link: map-get($map, component-link);
+			$map: map-remove($map, component-link);
 
 			@if ($_component-link) {
 				.component-link {
@@ -295,6 +353,7 @@
 			}
 
 			$_close: map-get($map, close);
+			$map: map-remove($map, close);
 
 			@if ($_close) {
 				.close {
@@ -427,6 +486,7 @@
 			}
 
 			$_panel-unstyled: map-get($map, panel-unstyled);
+			$map: map-remove($map, panel-unstyled);
 
 			@if ($_panel-unstyled) {
 				.panel-unstyled {
@@ -435,6 +495,7 @@
 			}
 
 			$_component-navigation-bar: map-get($map, component-navigation-bar);
+			$map: map-remove($map, component-navigation-bar);
 
 			@if ($_component-navigation-bar) {
 				.component-navigation-bar {
@@ -443,6 +504,7 @@
 			}
 
 			$_panel-group: map-get($map, panel-group);
+			$map: map-remove($map, panel-group);
 
 			@if ($_panel-group) {
 				.panel-group {
@@ -451,6 +513,7 @@
 			}
 
 			$_btn: map-get($map, btn);
+			$map: map-remove($map, btn);
 
 			@if ($_btn) {
 				.btn {
@@ -459,6 +522,7 @@
 			}
 
 			$_form-control: map-get($map, form-control);
+			$map: map-remove($map, form-control);
 
 			@if ($_form-control) {
 				.form-control {
@@ -467,6 +531,7 @@
 			}
 
 			$_form-control-select: map-get($map, form-control-select);
+			$map: map-remove($map, form-control-select);
 
 			@if ($_form-control-select) {
 				select.form-control,
@@ -476,6 +541,7 @@
 			}
 
 			$_form-control-tag-group: map-get($map, form-control-tag-group);
+			$map: map-remove($map, form-control-tag-group);
 
 			@if ($_form-control-tag-group) {
 				.form-control-tag-group {
@@ -484,6 +550,7 @@
 			}
 
 			$_input-group: map-get($map, input-group);
+			$map: map-remove($map, input-group);
 
 			@if ($_input-group) {
 				.input-group {

package/src/scss/mixins/_slideout.scss

@@ -25,6 +25,22 @@
 				@include clay-css($map);
 			}
 
+			$_c-slideout-push-start: map-get($map, '&.c-slideout-push-start');
+
+			@if ($_c-slideout-push-start) {
+				&.c-slideout-push-start {
+					@include clay-css($_c-slideout-push-start);
+				}
+			}
+
+			$_c-slideout-push-end: map-get($map, '&.c-slideout-push-end');
+
+			@if ($_c-slideout-push-end) {
+				&.c-slideout-push-end {
+					@include clay-css($_c-slideout-push-end);
+				}
+			}
+
 			$_c-slideout-shown: map-get($map, c-slideout-shown);
 
 			@if ($_c-slideout-shown) {

package/src/scss/variables/_drilldown.scss

@@ -14,7 +14,6 @@ $drilldown-inner: map-merge(
 	(
 		display: flex,
 		flex-grow: 1,
-		overflow: hidden,
 		transition: $drilldown-inner-transition,
 	),
 	$drilldown-inner
@@ -59,6 +58,7 @@ $drilldown-dropdown-menu-drilldown-inner: () !default;
 $drilldown-dropdown-menu-drilldown-inner: map-merge(
 	(
 		min-height: 266px,
+		overflow: hidden,
 	),
 	$drilldown-dropdown-menu-drilldown-inner
 );

package/src/scss/variables/_forms.scss

@@ -296,10 +296,21 @@ $input-label: map-deep-merge(
 		for: (
 			cursor: $input-label-for-cursor,
 		),
+		'+ .form-feedback-group': (
+			margin-bottom: 0.75rem,
+		),
 		form-text: (
 			margin-bottom: $input-label-margin-bottom,
 			margin-top: 0,
 		),
+		form-help-text: (
+			color: $secondary-l0,
+			display: inline,
+			font-size: 0.875rem,
+			font-weight: $font-weight-normal,
+			margin-left: 0.5rem,
+			margin-top: 0,
+		),
 		reference-mark: (
 			color: $input-label-reference-mark-color,
 			font-size: $input-label-reference-mark-font-size,
@@ -717,6 +728,17 @@ $form-text: map-merge(
 	$form-text
 );
 
+$form-help-text: () !default;
+$form-help-text: map-deep-merge(
+	(
+		color: $secondary,
+		display: block,
+		font-size: 0.875rem,
+		margin-top: 0.25rem,
+	),
+	$form-help-text
+);
+
 // .form-feedback-item
 
 $form-feedback-font-size: $small-font-size !default;

package/src/scss/variables/_globals.scss

@@ -40,17 +40,18 @@ $scaling-breakpoint-down: sm !default;
 $enable-clay-color-functions-process-fallback: false !default;
 
 $enable-caret: false !default;
-$enable-rounded: true !default;
-$enable-shadows: false !default;
+$enable-deprecation-messages: true !default;
 $enable-gradients: false !default;
-$enable-transitions: true !default;
-$enable-prefers-reduced-motion-media-query: true !default;
 $enable-grid-classes: true !default;
+$enable-pagination-sizes: false !default;
 $enable-pointer-cursor-for-buttons: true !default;
+$enable-prefers-reduced-motion-media-query: true !default;
 $enable-print-styles: true !default;
 $enable-responsive-font-sizes: false !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-transitions: true !default;
 $enable-validation-icons: false !default;
-$enable-deprecation-messages: true !default;
 
 // Deprecated, no longer affects any compiled CSS