@clayui/css 3.90.0 → 3.91.0

package/src/scss/cadmin/variables/_navs.scss

@@ -305,7 +305,7 @@ $cadmin-nav-tabs-font-size: 14px !default; // 14px
 
 // Nav Tabs Link
 
-$cadmin-nav-tabs-border-color: transparent !default;
+$cadmin-nav-tabs-border-color: $cadmin-gray-400 !default;
 $cadmin-nav-tabs-border-width: $cadmin-border-width !default;
 $cadmin-nav-tabs-border-radius: $cadmin-border-radius $cadmin-border-radius 0 0 !default;
 
@@ -316,14 +316,13 @@ $cadmin-nav-tabs-link-padding-y: 4.5px !default; // 4.5px
 $cadmin-nav-tabs-link-hover-border-color: transparent !default;
 
 $cadmin-nav-tabs-link-active-bg: $cadmin-white !default;
-$cadmin-nav-tabs-link-active-border-color: transparent transparent
+$cadmin-nav-tabs-link-active-border-color: $cadmin-gray-400 $cadmin-gray-400
 	$cadmin-body-bg !default;
 $cadmin-nav-tabs-link-active-color: $cadmin-gray-900 !default;
 
 $cadmin-nav-tabs-link-show-color: $cadmin-nav-tabs-link-active-color !default;
-$cadmin-nav-tabs-link-show-bg: transparent !default;
-$cadmin-nav-tabs-link-show-border-color: transparent transparent
-	$cadmin-nav-tabs-border-color transparent !default;
+$cadmin-nav-tabs-link-show-bg: $cadmin-white !default;
+$cadmin-nav-tabs-link-show-border-color: $cadmin-nav-tabs-link-active-border-color !default;
 
 // .nav-tabs .nav-link[aria-expanded="true"]
 
@@ -381,8 +380,13 @@ $cadmin-nav-tabs-link: map-deep-merge(
 $cadmin-nav-tabs: () !default;
 $cadmin-nav-tabs: map-deep-merge(
 	(
-		border-bottom: $cadmin-nav-tabs-border-width solid
-			$cadmin-nav-tabs-border-color,
+		background-color: $cadmin-gray-100,
+		border-color: $cadmin-gray-400,
+		border-style: solid,
+		border-width: 1px 0,
+		padding-left: 24px,
+		padding-right: 24px,
+		padding-top: 7px,
 		font-size: $cadmin-nav-tabs-font-size,
 		nav-item: (
 			margin-bottom: math-sign($cadmin-nav-tabs-border-width),
@@ -398,105 +402,6 @@ $cadmin-nav-tabs-tab-pane-bg: $cadmin-white !default;
 $cadmin-nav-tabs-tab-pane-border-radius: 4px !default;
 $cadmin-nav-tabs-tab-pane-padding: 32px !default;
 
-// Nav Underline Link Highlight
-
-$cadmin-nav-underline-link-highlight-content: null !default;
-$cadmin-nav-underline-link-highlight-height: null !default;
-$cadmin-nav-underline-link-highlight-bottom: 0 !default;
-$cadmin-nav-underline-link-highlight-left: 0 !default;
-$cadmin-nav-underline-link-highlight-right: 0 !default;
-$cadmin-nav-underline-link-highlight-top: null !default;
-
-$cadmin-nav-underline-link-active-highlight: $cadmin-primary-l0 !default;
-$cadmin-nav-underline-link-active-content: '' !default;
-$cadmin-nav-underline-link-active-highlight-height: 2px !default; // 2px
-
-$cadmin-nav-underline-link-disabled-highlight: null !default;
-
-// .nav-underline
-
-$cadmin-nav-underline-font-size: null !default;
-
-$cadmin-nav-underline-link-highlight-palette: null !default;
-
-$cadmin-nav-underline-link-color: $cadmin-gray-600 !default;
-$cadmin-nav-underline-link-padding-x: null !default;
-$cadmin-nav-underline-link-padding-y: null !default;
-
-$cadmin-nav-underline-link-hover-color: null !default;
-
-$cadmin-nav-underline-link-active-color: $cadmin-gray-900 !default;
-
-$cadmin-nav-underline-link-disabled-color: $cadmin-nav-link-disabled-color !default;
+// Nav Variants
 
-// .nav-underline .nav-link[aria-expanded='true']
-
-$cadmin-nav-underline-link-show: () !default;
-$cadmin-nav-underline-link-show: map-deep-merge(
-	(
-		color: $cadmin-nav-underline-link-active-color,
-	),
-	$cadmin-nav-underline-link-show
-);
-
-$cadmin-nav-underline-link: () !default;
-$cadmin-nav-underline-link: map-deep-merge(
-	(
-		border-radius: 1px,
-		color: $cadmin-nav-underline-link-color,
-		font-weight: $cadmin-font-weight-semi-bold,
-		line-height: 1,
-		padding-bottom: 9px,
-		padding-left: $cadmin-nav-underline-link-padding-x,
-		padding-right: $cadmin-nav-underline-link-padding-x,
-		padding-top: 9px,
-		transition: box-shadow 0.15s ease-in-out,
-		after: (
-			bottom: $cadmin-nav-underline-link-highlight-bottom,
-			content: $cadmin-nav-underline-link-highlight-content,
-			display: block,
-			height: $cadmin-nav-underline-link-highlight-height,
-			position: absolute,
-			left: $cadmin-nav-underline-link-highlight-left,
-			right: $cadmin-nav-underline-link-highlight-right,
-			top: $cadmin-nav-underline-link-highlight-top,
-			width: auto,
-		),
-		hover: (
-			color: $cadmin-nav-underline-link-hover-color,
-		),
-		focus: (
-			box-shadow: $cadmin-component-focus-box-shadow,
-			color: $cadmin-nav-underline-link-hover-color,
-			outline: 0,
-		),
-		active-class: (
-			color: $cadmin-nav-underline-link-active-color,
-			after: (
-				background-color: $cadmin-nav-underline-link-active-highlight,
-				content: $cadmin-nav-underline-link-active-content,
-				height: $cadmin-nav-underline-link-active-highlight-height,
-			),
-		),
-		show: $cadmin-nav-underline-link-show,
-		disabled: (
-			box-shadow: none,
-			color: $cadmin-nav-underline-link-disabled-color,
-			after: (
-				background-color: $cadmin-nav-underline-link-disabled-highlight,
-			),
-		),
-	),
-	$cadmin-nav-underline-link
-);
-
-// .nav-underline
-
-$cadmin-nav-underline: () !default;
-$cadmin-nav-underline: map-deep-merge(
-	(
-		font-size: $cadmin-nav-underline-font-size,
-		nav-link: $cadmin-nav-underline-link,
-	),
-	$cadmin-nav-underline
-);
+$cadmin-nav-palette: () !default;

package/src/scss/cadmin/variables/_resizer.scss

@@ -0,0 +1,21 @@
+$cadmin-c-horizontal-resizer: () !default;
+$cadmin-c-horizontal-resizer: map-merge(
+	(
+		background-color: transparent,
+		bottom: 0,
+		cursor: ew-resize,
+		margin-right: -0.25rem,
+		position: absolute,
+		right: 0,
+		top: 0,
+		width: 0.5rem,
+		z-index: 10,
+		hover: (
+			background-color: $cadmin-primary-l1,
+		),
+		focus: (
+			background-color: $cadmin-primary-l1,
+		),
+	),
+	$cadmin-c-horizontal-resizer
+);

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

@@ -64,6 +64,9 @@ $cadmin-c-slideout: map-deep-merge(
 		),
 		sidebar-c-slideout-transition: (
 			display: block,
+			c-horizontal-resizer: (
+				display: none,
+			),
 		),
 		tbar-stacked: (
 			display: none,
@@ -164,6 +167,10 @@ $cadmin-c-slideout-end: map-deep-merge(
 		tbar-stacked-c-slideout-show: (
 			right: 0,
 		),
+		c-horizontal-resizer: (
+			left: 0,
+			right: auto,
+		),
 	),
 	$cadmin-c-slideout-end
 );

package/src/scss/cadmin/variables/_treeview.scss

@@ -8,6 +8,7 @@ $cadmin-treeview: map-merge(
 		margin-bottom: 0,
 		padding: 2px 0,
 		btn: (
+			color: inherit,
 			font-size: 12px,
 			line-height: 1,
 			padding: 6px 8px,

package/src/scss/cadmin.scss

@@ -24,6 +24,7 @@ html#{$cadmin-selector} {
 
 		@import 'cadmin/components/_aspect-ratio';
 		@import 'cadmin/components/_buttons';
+		@import 'cadmin/components/_resizer';
 		@import 'cadmin/components/_transitions';
 
 		@import 'cadmin/components/_grid';

package/src/scss/components/_navbar.scss

@@ -575,44 +575,5 @@
 // Navbar Underline
 
 .navbar-underline {
-	.navbar-toggler-link {
-		&:after {
-			background-color: $navbar-underline-active-bg;
-			bottom: math-sign($navbar-padding-y);
-			content: '';
-			display: block;
-			height: $nav-underline-link-active-highlight-height;
-			left: 0;
-			position: absolute;
-			right: 0;
-			width: auto;
-		}
-	}
-}
-
-.navbar-underline.navbar-expand {
-	@each $breakpoint in map-keys($grid-breakpoints) {
-		$next: breakpoint-next($breakpoint, $grid-breakpoints);
-		$infix: breakpoint-infix($next, $grid-breakpoints);
-
-		// .navbar-expand, sm, md, lg, xl
-
-		&#{$infix} {
-			@include media-breakpoint-up($next) {
-				.navbar-nav .nav-link {
-					&.active:after {
-						background-color: $navbar-underline-active-bg;
-						bottom: math-sign($navbar-padding-y);
-						content: '';
-						display: block;
-						height: $nav-underline-link-active-highlight-height;
-						left: 0;
-						position: absolute;
-						right: 0;
-						width: auto;
-					}
-				}
-			}
-		}
-	}
+	@include clay-navbar-variant($navbar-underline);
 }

package/src/scss/components/_navs.scss

@@ -198,21 +198,16 @@
 	}
 }
 
-// Nav Underline
+// Nav Variants
 
-@each $value in $nav-underline-link-highlight-palette {
-	$index: index($nav-underline-link-highlight-palette, $value);
+@each $key, $value in $nav-palette {
+	$selector: if(
+		starts-with($key, '.') or starts-with($key, '#'),
+		$key,
+		str-insert($key, '.', 1)
+	);
 
-	.nav-underline .nav-item:nth-of-type(#{$index}n + 0) {
-		.nav-link::after {
-			background-color: nth(
-				$nav-underline-link-highlight-palette,
-				$index
-			);
-		}
+	#{$selector} {
+		@include clay-nav-variant($value);
 	}
 }
-
-.nav-underline {
-	@include clay-nav-variant($nav-underline);
-}

package/src/scss/components/_resizer.scss

@@ -0,0 +1,11 @@
+.c-horizontal-resizer {
+	@include clay-css($c-horizontal-resizer);
+
+	&:hover {
+		@include clay-css(map-get($c-horizontal-resizer, hover));
+	}
+
+	&:focus {
+		@include clay-css(map-get($c-horizontal-resizer, focus));
+	}
+}

package/src/scss/mixins/_slideout.scss

@@ -44,7 +44,21 @@
 			}
 
 			.sidebar.c-slideout-transition {
-				@include clay-css(map-get($map, sidebar-c-slideout-transition));
+				$_sidebar-c-slideout-transition: setter(
+					map-get($map, sidebar-c-slideout-transition),
+					()
+				);
+
+				@include clay-css($_sidebar-c-slideout-transition);
+
+				.c-horizontal-resizer {
+					@include clay-css(
+						map-get(
+							$_sidebar-c-slideout-transition,
+							c-horizontal-resizer
+						)
+					);
+				}
 			}
 
 			.tbar-stacked {
@@ -60,6 +74,23 @@
 					map-get($map, tbar-stacked-c-slideout-transition)
 				);
 			}
+
+			.c-horizontal-resizer {
+				$_c-horizontal-resizer: setter(
+					map-get($map, c-horizontal-resizer),
+					()
+				);
+
+				@include clay-css($_c-horizontal-resizer);
+
+				&:hover {
+					@include clay-css(map-get($_c-horizontal-resizer, hover));
+				}
+
+				&:focus {
+					@include clay-css(map-get($_c-horizontal-resizer, focus));
+				}
+			}
 		}
 	}
 }

package/src/scss/variables/_navbar.scss

@@ -42,6 +42,52 @@ $navbar-toggler-padding-y: 0.25rem !default;
 
 $navbar-underline-active-bg: $component-active-bg !default;
 
+$navbar-underline: () !default;
+$navbar-underline: map-deep-merge(
+	(
+		navbar-toggler-link: (
+			after: (
+				background-color: $navbar-underline-active-bg,
+				bottom: math-sign($navbar-padding-y),
+				content: '',
+				display: block,
+				height: 0.1875rem,
+				left: 0,
+				position: absolute,
+				right: 0,
+				width: auto,
+			),
+		),
+		media-breakpoint-up: (
+			md: (
+				navbar-expand-md: (
+					navbar-underline: (
+						navbar-nav: (
+							nav-link: (
+								active-class: (
+									after: (
+										background-color:
+											$navbar-underline-active-bg,
+										bottom: math-sign($navbar-padding-y),
+										content: '',
+										display: block,
+										height: 0.1875rem,
+										left: 0,
+										position: absolute,
+										right: 0,
+										width: auto,
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+	),
+	$navbar-underline
+);
+
 // Navbar Dark
 
 $navbar-dark-color: rgba($white, 0.5) !default;

package/src/scss/variables/_navs.scss

@@ -456,102 +456,6 @@ $nav-pills-link-active-bg: $component-active-bg !default;
 
 $nav-pills-link-active-color: $component-active-color !default;
 
-// Nav Underline Link Highlight
+// Nav Variants
 
-$nav-underline-link-highlight-content: null !default;
-$nav-underline-link-highlight-height: null !default;
-$nav-underline-link-highlight-bottom: 0 !default;
-$nav-underline-link-highlight-left: $nav-link-padding-x * 0.5 !default;
-$nav-underline-link-highlight-right: $nav-link-padding-x * 0.5 !default;
-$nav-underline-link-highlight-top: null !default;
-
-$nav-underline-link-active-highlight: $primary-l0 !default;
-$nav-underline-link-active-content: '' !default;
-$nav-underline-link-active-highlight-height: 0.1875rem !default;
-
-$nav-underline-link-disabled-highlight: null !default;
-
-// .nav-underline
-
-$nav-underline-font-size: null !default;
-
-$nav-underline-link-highlight-palette: null !default;
-
-$nav-underline-link-color: null !default;
-$nav-underline-link-padding-x: null !default;
-$nav-underline-link-padding-y: null !default;
-
-$nav-underline-link-hover-color: null !default;
-
-$nav-underline-link-active-color: null !default;
-
-$nav-underline-link-disabled-color: null !default;
-
-// .nav-underline .nav-link[aria-expanded='true']
-
-$nav-underline-link-show: () !default;
-$nav-underline-link-show: map-deep-merge(
-	(
-		color: $nav-underline-link-active-color,
-		after: (
-			content: $nav-underline-link-active-content,
-			height: $nav-underline-link-active-highlight-height,
-		),
-	),
-	$nav-underline-link-show
-);
-
-$nav-underline-link: () !default;
-$nav-underline-link: map-deep-merge(
-	(
-		color: $nav-underline-link-color,
-		padding-bottom: $nav-underline-link-padding-y,
-		padding-left: $nav-underline-link-padding-x,
-		padding-right: $nav-underline-link-padding-x,
-		padding-top: $nav-underline-link-padding-y,
-		after: (
-			bottom: $nav-underline-link-highlight-bottom,
-			content: $nav-underline-link-highlight-content,
-			display: block,
-			height: $nav-underline-link-highlight-height,
-			position: absolute,
-			left: $nav-underline-link-highlight-left,
-			right: $nav-underline-link-highlight-right,
-			top: $nav-underline-link-highlight-top,
-			width: auto,
-		),
-		hover: (
-			color: $nav-underline-link-hover-color,
-		),
-		focus: (
-			color: $nav-underline-link-hover-color,
-		),
-		active-class: (
-			color: $nav-underline-link-active-color,
-			after: (
-				background-color: $nav-underline-link-active-highlight,
-				content: $nav-underline-link-active-content,
-				height: $nav-underline-link-active-highlight-height,
-			),
-		),
-		show: $nav-underline-link-show,
-		disabled: (
-			color: $nav-underline-link-disabled-color,
-			after: (
-				background-color: $nav-underline-link-disabled-highlight,
-			),
-		),
-	),
-	$nav-underline-link
-);
-
-// .nav-underline
-
-$nav-underline: () !default;
-$nav-underline: map-deep-merge(
-	(
-		font-size: $nav-underline-font-size,
-		nav-link: $nav-underline-link,
-	),
-	$nav-underline
-);
+$nav-palette: () !default;

package/src/scss/variables/_resizer.scss

@@ -0,0 +1,22 @@
+$c-horizontal-resizer: () !default;
+$c-horizontal-resizer: map-merge(
+	(
+		background-color: transparent,
+		bottom: 0,
+		cursor: ew-resize,
+		margin-right: -0.25rem,
+		position: absolute,
+		right: 0,
+		top: 0,
+		user-select: none,
+		width: 0.5rem,
+		z-index: 10,
+		hover: (
+			background-color: $primary-l1,
+		),
+		focus: (
+			background-color: $primary-l1,
+		),
+	),
+	$c-horizontal-resizer
+);

package/src/scss/variables/_slideout.scss

@@ -56,6 +56,7 @@ $c-slideout: map-deep-merge(
 		sidebar: (
 			display: none,
 			flex-shrink: 0,
+			overflow: visible,
 			position: relative,
 			width: $c-slideout-sidebar-width,
 		),
@@ -64,6 +65,9 @@ $c-slideout: map-deep-merge(
 		),
 		sidebar-c-slideout-transition: (
 			display: block,
+			c-horizontal-resizer: (
+				display: none,
+			),
 		),
 		tbar-stacked: (
 			display: none,
@@ -164,6 +168,10 @@ $c-slideout-end: map-deep-merge(
 		tbar-stacked-c-slideout-show: (
 			right: 0,
 		),
+		c-horizontal-resizer: (
+			left: 0,
+			right: auto,
+		),
 	),
 	$c-slideout-end
 );

package/src/scss/variables/_treeview.scss

@@ -8,6 +8,7 @@ $treeview: map-merge(
 		margin-bottom: 0,
 		padding: 2px 0,
 		btn: (
+			color: inherit,
 			font-size: 12px,
 			line-height: 1,
 			padding: 6px 8px,