@clayui/css 3.147.0 → 3.149.1

package/src/scss/variables/_navs.scss

@@ -402,6 +402,7 @@ $nav-tabs-link: map-deep-merge(
 		border-width: $nav-tabs-border-width,
 		border-radius: $nav-tabs-border-radius,
 		color: $nav-tabs-link-color,
+		font-size: inherit,
 		padding-bottom: $nav-tabs-link-padding-y,
 		padding-left: $nav-tabs-link-padding-x,
 		padding-right: $nav-tabs-link-padding-x,

package/src/scss/variables/_pagination.scss

@@ -401,6 +401,8 @@ $pagination-results: map-merge(
 	$pagination-results
 );
 
+/// @deprecated Pagination Sizes as of v3.146.0
+
 // .pagination-sm
 
 $pagination-font-size-sm: $font-size-sm !default;

package/src/scss/variables/_slideout.scss

@@ -6,6 +6,10 @@ $c-slideout-tbar-stacked-min-width: 40px !default;
 
 $c-slideout-tbar-stacked-min-width-mobile: 40px !default;
 
+$c-slideout-fluid-sidebar-width-md: '50vw' !default;
+
+$c-slideout-fluid-sidebar-width: '33vw' !default;
+
 // C Slideout Transitions
 
 $c-slideout-transition-in: () !default;
@@ -79,6 +83,16 @@ $c-slideout-push-end: map-deep-merge(
 	$c-slideout-push-end
 );
 
+$c-slideout-sm-down: () !default;
+$c-slideout-sm-down: map-deep-merge(
+	(
+		sidebar: (
+			width: $c-slideout-sidebar-width-mobile,
+		),
+	),
+	$c-slideout-sm-down
+);
+
 // C Slideout Base
 
 $c-slideout: () !default;
@@ -102,6 +116,16 @@ $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 @@ $c-slideout: map-deep-merge(
 		tbar-stacked-c-slideout-transition: (
 			display: flex,
 		),
+		media-breakpoint-down: (
+			sm: $c-slideout-sm-down,
+		),
 	),
 	$c-slideout
 );
 
-$c-slideout-sm-down: () !default;
-$c-slideout-sm-down: map-deep-merge(
+$c-slideout-fluid: () !default;
+$c-slideout-fluid: map-deep-merge(
 	(
+		'&.c-slideout-push-start': (
+			padding-left: $c-slideout-fluid-sidebar-width,
+		),
+		'&.c-slideout-push-end': (
+			padding-right: $c-slideout-fluid-sidebar-width,
+		),
 		sidebar: (
-			width: $c-slideout-sidebar-width-mobile,
+			max-width: $c-slideout-fluid-sidebar-width,
+			width: $c-slideout-fluid-sidebar-width,
+		),
+		media-breakpoint-down: (
+			md: (
+				'&.c-slideout-push-start': (
+					padding-left: $c-slideout-fluid-sidebar-width-md,
+				),
+				'&.c-slideout-push-end': (
+					padding-right: $c-slideout-fluid-sidebar-width-md,
+				),
+				sidebar: (
+					max-width: $c-slideout-fluid-sidebar-width-md,
+					width: $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,
+				),
+			),
 		),
 	),
-	$c-slideout-sm-down
+	$c-slideout-fluid
 );
 
 // C Slideout Start
 
+$c-slideout-start-sm-down: () !default;
+$c-slideout-start-sm-down: map-deep-merge(
+	(
+		c-slideout-tbar-shown-sidebar: (
+			left: math-sign($c-slideout-sidebar-width-mobile),
+		),
+		sidebar: (
+			left: #{math-sign($c-slideout-sidebar-width-mobile) +
+				math-sign($c-slideout-tbar-stacked-min-width-mobile)},
+			width: $c-slideout-sidebar-width-mobile,
+		),
+		tbar-stacked: (
+			left: math-sign($c-slideout-tbar-stacked-min-width-mobile),
+		),
+	),
+	$c-slideout-start-sm-down
+);
+
 $c-slideout-start: () !default;
 $c-slideout-start: map-deep-merge(
 	(
@@ -167,30 +245,32 @@ $c-slideout-start: map-deep-merge(
 		tbar-stacked-c-slideout-show: (
 			left: 0,
 		),
+		media-breakpoint-down: (
+			sm: $c-slideout-start-sm-down,
+		),
 	),
 	$c-slideout-start
 );
 
-$c-slideout-start-sm-down: () !default;
-$c-slideout-start-sm-down: map-deep-merge(
+// C Slideout End
+
+$c-slideout-end-sm-down: () !default;
+$c-slideout-end-sm-down: map-deep-merge(
 	(
 		c-slideout-tbar-shown-sidebar: (
-			left: math-sign($c-slideout-sidebar-width-mobile),
+			right: math-sign($c-slideout-sidebar-width-mobile),
 		),
 		sidebar: (
-			left: #{math-sign($c-slideout-sidebar-width-mobile) +
+			right: #{math-sign($c-slideout-sidebar-width-mobile) +
 				math-sign($c-slideout-tbar-stacked-min-width-mobile)},
-			width: $c-slideout-sidebar-width-mobile,
 		),
 		tbar-stacked: (
-			left: math-sign($c-slideout-tbar-stacked-min-width-mobile),
+			right: math-sign($c-slideout-tbar-stacked-min-width-mobile),
 		),
 	),
-	$c-slideout-start-sm-down
+	$c-slideout-end-sm-down
 );
 
-// C Slideout End
-
 $c-slideout-end: () !default;
 $c-slideout-end: map-deep-merge(
 	(
@@ -217,25 +297,11 @@ $c-slideout-end: map-deep-merge(
 			left: 0,
 			right: auto,
 		),
-	),
-	$c-slideout-end
-);
-
-$c-slideout-end-sm-down: () !default;
-$c-slideout-end-sm-down: map-deep-merge(
-	(
-		c-slideout-tbar-shown-sidebar: (
-			right: math-sign($c-slideout-sidebar-width-mobile),
-		),
-		sidebar: (
-			right: #{math-sign($c-slideout-sidebar-width-mobile) +
-				math-sign($c-slideout-tbar-stacked-min-width-mobile)},
-		),
-		tbar-stacked: (
-			right: math-sign($c-slideout-tbar-stacked-min-width-mobile),
+		media-breakpoint-down: (
+			sm: $c-slideout-end-sm-down,
 		),
 	),
-	$c-slideout-end-sm-down
+	$c-slideout-end
 );
 
 $c-slideout-height-full: () !default;

package/src/scss/variables/_utilities.scss

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