@clayui/css 3.89.0 → 3.91.0

package/src/scss/atlas/variables/_navs.scss

@@ -35,7 +35,7 @@ $nav-nested-spacer-x: 1rem !default; // 16px
 
 // Nav Tabs
 
-$nav-tabs-border-color: transparent !default;
+$nav-tabs-border-color: $gray-400 !default;
 $nav-tabs-font-size: 0.875rem !default; // 14px
 
 // Nav Tabs Link
@@ -46,13 +46,12 @@ $nav-tabs-link-padding-y: 0.28125rem !default; // 4.5px
 $nav-tabs-link-hover-border-color: transparent !default;
 
 $nav-tabs-link-active-bg: $white !default;
-$nav-tabs-link-active-border-color: transparent transparent $body-bg !default;
+$nav-tabs-link-active-border-color: $gray-400 $gray-400 $body-bg !default;
 $nav-tabs-link-active-color: $gray-900 !default;
 
 $nav-tabs-link-show-color: $nav-tabs-link-active-color !default;
-$nav-tabs-link-show-bg: transparent !default;
-$nav-tabs-link-show-border-color: transparent transparent $nav-tabs-border-color
-	transparent !default;
+$nav-tabs-link-show-bg: $white !default;
+$nav-tabs-link-show-border-color: $gray-400 !default;
 
 $nav-tabs-link: () !default;
 $nav-tabs-link: map-deep-merge(
@@ -73,44 +72,24 @@ $nav-tabs-link: map-deep-merge(
 	$nav-tabs-link
 );
 
+// .nav-tabs
+
+$nav-tabs: () !default;
+$nav-tabs: map-deep-merge(
+	(
+		background-color: $gray-100,
+		border-color: $gray-400,
+		border-style: solid,
+		border-width: 0.0625rem 0,
+		padding-left: 1.5rem,
+		padding-right: 1.5rem,
+		padding-top: 0.4375rem,
+	),
+	$nav-tabs
+);
+
 // Nav Tabs Tab Pane
 
 $nav-tabs-tab-pane-bg: $white !default;
 $nav-tabs-tab-pane-border-radius: 4px !default;
 $nav-tabs-tab-pane-padding: 2rem !default;
-
-// Nav Underline Link Highlight
-
-$nav-underline-link-highlight-left: 0 !default;
-$nav-underline-link-highlight-right: 0 !default;
-
-$nav-underline-link-active-highlight: $primary-l0 !default;
-$nav-underline-link-active-highlight-height: 0.125rem !default; // 2px
-
-// Nav Underline
-
-$nav-underline-link-color: $gray-600 !default;
-
-$nav-underline-link-active-color: $gray-900 !default;
-
-$nav-underline-link-disabled-color: $nav-link-disabled-color !default;
-
-$nav-underline-link: () !default;
-$nav-underline-link: map-deep-merge(
-	(
-		border-radius: 1px,
-		font-weight: $font-weight-semi-bold,
-		line-height: 1,
-		padding-bottom: 0.5625rem,
-		padding-top: 0.5625rem,
-		transition: box-shadow 0.15s ease-in-out,
-		focus: (
-			box-shadow: $component-focus-box-shadow,
-			outline: 0,
-		),
-		disabled: (
-			box-shadow: none,
-		),
-	),
-	$nav-underline-link
-);

package/src/scss/cadmin/_variables.scss

@@ -5,6 +5,7 @@
 @import 'variables/_images';
 
 @import 'variables/_buttons';
+@import 'variables/_resizer';
 
 @import 'variables/_alerts';
 @import 'variables/_badges';

package/src/scss/cadmin/components/_navbar.scss

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

package/src/scss/cadmin/components/_navs.scss

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

package/src/scss/cadmin/components/_resizer.scss

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

package/src/scss/cadmin/variables/_menubar.scss

@@ -4,54 +4,58 @@ $cadmin-menubar-vertical-expand-md: () !default;
 $cadmin-menubar-vertical-expand-md: map-deep-merge(
 	(
 		max-width: 250px,
-		mobile: (
-			align-items: center,
-			display: flex,
-			flex-wrap: wrap,
-			justify-content: space-between,
-			margin-bottom: 24px,
-			margin-left: math-sign($cadmin-grid-gutter-width * 0.5),
-			margin-right: math-sign($cadmin-grid-gutter-width * 0.5),
-		),
-		collapse: (
+		menubar-collapse: (
 			display: block,
 		),
-		collapse-mobile: (
-			border-color: transparent,
-			border-style: solid,
-			border-width: 1px,
-			display: none,
-			left: -1px,
-			position: absolute,
-			right: -1px,
-			top: 100%,
-			z-index: $cadmin-zindex-menubar-vertical-expand-md-collapse-mobile,
-		),
-		collapse-nav-mobile: (
-			margin-bottom: 8px,
-			margin-top: 8px,
-		),
-		nav-nested-mobile: (
-			margin-bottom: 8px,
-			margin-top: 8px,
-		),
-		nav-nested-margins-item-mobile: (
-			margin-left: 0,
-		),
-		toggler-mobile: (
-			align-items: center,
-			border-color: transparent,
-			border-style: solid,
-			border-width: 1px,
-			display: flex,
-			height: 32px,
-			padding-left: 8px,
-			padding-right: 8px,
-			c-inner: (
+		media-breakpoint-down: (
+			sm: (
+				align-items: center,
+				display: flex,
+				flex-wrap: wrap,
+				justify-content: space-between,
+				margin-bottom: 24px,
+				margin-left: math-sign($cadmin-grid-gutter-width * 0.5),
+				margin-right: math-sign($cadmin-grid-gutter-width * 0.5),
 				max-width: none,
-			),
-			lexicon-icon: (
-				margin-top: 0,
+				menubar-collapse: (
+					border-color: transparent,
+					border-style: solid,
+					border-width: 1px,
+					display: none,
+					left: -1px,
+					position: absolute,
+					right: -1px,
+					top: 100%,
+					z-index:
+						$cadmin-zindex-menubar-vertical-expand-md-collapse-mobile,
+				),
+				nav-nested: (
+					margin-bottom: 8px,
+					margin-top: 8px,
+				),
+				nav-nested-margins: (
+					margin-bottom: 8px,
+					margin-top: 8px,
+				),
+				nav-nested-margins-item: (
+					margin-left: 0,
+				),
+				menubar-toggler: (
+					align-items: center,
+					border-color: transparent,
+					border-style: solid,
+					border-width: 1px,
+					display: flex,
+					height: 32px,
+					padding-left: 8px,
+					padding-right: 8px,
+					c-inner: (
+						max-width: none,
+					),
+					lexicon-icon: (
+						margin-top: 0,
+					),
+				),
 			),
 		),
 	),
@@ -61,11 +65,7 @@ $cadmin-menubar-vertical-expand-md: map-deep-merge(
 $cadmin-menubar-vertical-transparent-md: () !default;
 $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 	(
-		breakpoint-up: md,
-		mobile: (
-			background-color: $cadmin-white,
-		),
-		link: (
+		nav-link: (
 			border-radius: 6px,
 			transition: #{color 0.15s ease-in-out,
 			background-color 0.15s ease-in-out,
@@ -103,50 +103,58 @@ $cadmin-menubar-vertical-transparent-md: map-deep-merge(
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
 		),
-		link-mobile: (
-			border-radius: clay-enable-rounded(0),
-			color: $cadmin-gray-900,
-			hover: (
-				background-color: rgba($cadmin-primary, 0.04),
-				color: $cadmin-gray-900,
-			),
-			focus: (
-				background-color: rgba($cadmin-primary, 0.04),
-			),
-			active-class: (
-				background-color: rgba($cadmin-primary, 0.06),
-				color: $cadmin-gray-900,
-				font-weight: $cadmin-font-weight-semi-bold,
-			),
-			disabled: (
-				background-color: transparent,
-				color: $cadmin-gray-600,
-			),
-			show: (
-				background-color: c-unset,
-				color: c-unset,
-				font-weight: c-unset,
-			),
-		),
-		collapse-mobile: (
-			background-color: $cadmin-white,
-			border-color: $cadmin-gray-300,
-			border-radius: clay-enable-rounded($cadmin-border-radius),
-			box-shadow: clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
-		),
-		toggler-mobile: (
-			color: $cadmin-gray-900,
-			font-size: 14px,
-			font-weight: $cadmin-font-weight-semi-bold,
-			text-decoration: none,
-			transition: box-shadow 0.15s ease-in-out,
-			focus: (
-				box-shadow:
-					clay-enable-shadows($cadmin-component-focus-box-shadow),
-				outline: 0,
-			),
-			disabled: (
-				box-shadow: clay-enable-shadows(none),
+		media-breakpoint-down: (
+			sm: (
+				background-color: $cadmin-white,
+				nav-link: (
+					border-radius: clay-enable-rounded(0),
+					color: $cadmin-gray-900,
+					hover: (
+						background-color: rgba($cadmin-primary, 0.04),
+						color: $cadmin-gray-900,
+					),
+					focus: (
+						background-color: rgba($cadmin-primary, 0.04),
+					),
+					active-class: (
+						background-color: rgba($cadmin-primary, 0.06),
+						color: $cadmin-gray-900,
+						font-weight: $cadmin-font-weight-semi-bold,
+					),
+					disabled: (
+						background-color: transparent,
+						color: $cadmin-gray-600,
+					),
+					show: (
+						background-color: c-unset,
+						color: c-unset,
+						font-weight: c-unset,
+					),
+				),
+				menubar-collapse: (
+					background-color: $cadmin-white,
+					border-color: $cadmin-gray-300,
+					border-radius: clay-enable-rounded($cadmin-border-radius),
+					box-shadow:
+						clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
+				),
+				menubar-toggler: (
+					color: $cadmin-gray-900,
+					font-size: 14px,
+					font-weight: $cadmin-font-weight-semi-bold,
+					text-decoration: none,
+					transition: box-shadow 0.15s ease-in-out,
+					focus: (
+						box-shadow:
+							clay-enable-shadows(
+								$cadmin-component-focus-box-shadow
+							),
+						outline: 0,
+					),
+					disabled: (
+						box-shadow: clay-enable-shadows(none),
+					),
+				),
 			),
 		),
 	),
@@ -214,56 +222,59 @@ $cadmin-menubar-vertical-decorated-md-nav-link-after-active: map-deep-merge(
 $cadmin-menubar-vertical-expand-lg: () !default;
 $cadmin-menubar-vertical-expand-lg: map-deep-merge(
 	(
-		breakpoint-up: lg,
 		max-width: 250px,
-		mobile: (
-			align-items: center,
-			display: flex,
-			flex-wrap: wrap,
-			justify-content: space-between,
-			margin-bottom: 24px,
-			margin-left: math-sign($cadmin-grid-gutter-width * 0.5),
-			margin-right: math-sign($cadmin-grid-gutter-width * 0.5),
-		),
-		collapse: (
+		menubar-collapse: (
 			display: block,
 		),
-		collapse-mobile: (
-			border-color: transparent,
-			border-style: solid,
-			border-width: 1px,
-			display: none,
-			left: -1px,
-			position: absolute,
-			right: -1px,
-			top: 100%,
-			z-index: $cadmin-zindex-menubar-vertical-expand-md-collapse-mobile,
-		),
-		collapse-nav-mobile: (
-			margin-bottom: 8px,
-			margin-top: 8px,
-		),
-		nav-nested-mobile: (
-			margin-bottom: 8px,
-			margin-top: 8px,
-		),
-		nav-nested-margins-item-mobile: (
-			margin-left: 0,
-		),
-		toggler-mobile: (
-			align-items: center,
-			border-color: transparent,
-			border-style: solid,
-			border-width: 1px,
-			display: flex,
-			height: 32px,
-			padding-left: 8px,
-			padding-right: 8px,
-			c-inner: (
+		media-breakpoint-down: (
+			md: (
+				align-items: center,
+				display: flex,
+				flex-wrap: wrap,
+				justify-content: space-between,
+				margin-bottom: 24px,
+				margin-left: math-sign($cadmin-grid-gutter-width * 0.5),
+				margin-right: math-sign($cadmin-grid-gutter-width * 0.5),
 				max-width: none,
-			),
-			lexicon-icon: (
-				margin-top: 0,
+				menubar-collapse: (
+					border-color: transparent,
+					border-style: solid,
+					border-width: 1px,
+					display: none,
+					left: -1px,
+					position: absolute,
+					right: -1px,
+					top: 100%,
+					z-index:
+						$cadmin-zindex-menubar-vertical-expand-md-collapse-mobile,
+				),
+				nav-nested: (
+					margin-bottom: 8px,
+					margin-top: 8px,
+				),
+				nav-nested-margins: (
+					margin-bottom: 8px,
+					margin-top: 8px,
+				),
+				nav-nested-margins-item: (
+					margin-left: 0,
+				),
+				menubar-toggler: (
+					align-items: center,
+					border-color: transparent,
+					border-style: solid,
+					border-width: 1px,
+					display: flex,
+					height: 32px,
+					padding-left: 8px,
+					padding-right: 8px,
+					c-inner: (
+						max-width: none,
+					),
+					lexicon-icon: (
+						margin-top: 0,
+					),
+				),
 			),
 		),
 	),
@@ -273,11 +284,7 @@ $cadmin-menubar-vertical-expand-lg: map-deep-merge(
 $cadmin-menubar-vertical-transparent-lg: () !default;
 $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 	(
-		breakpoint-up: lg,
-		mobile: (
-			background-color: $cadmin-white,
-		),
-		link: (
+		nav-link: (
 			border-radius: 6px,
 			transition: #{color 0.15s ease-in-out,
 			background-color 0.15s ease-in-out,
@@ -315,50 +322,58 @@ $cadmin-menubar-vertical-transparent-lg: map-deep-merge(
 				font-weight: $cadmin-font-weight-semi-bold,
 			),
 		),
-		link-mobile: (
-			border-radius: clay-enable-rounded(0),
-			color: $cadmin-gray-900,
-			hover: (
-				background-color: rgba($cadmin-primary, 0.04),
-				color: $cadmin-gray-900,
-			),
-			focus: (
-				background-color: rgba($cadmin-primary, 0.04),
-			),
-			active-class: (
-				background-color: rgba($cadmin-primary, 0.06),
-				color: $cadmin-gray-900,
-				font-weight: $cadmin-font-weight-semi-bold,
-			),
-			disabled: (
-				background-color: transparent,
-				color: $cadmin-gray-600,
-			),
-			show: (
-				background-color: c-unset,
-				color: c-unset,
-				font-weight: c-unset,
-			),
-		),
-		collapse-mobile: (
-			background-color: $cadmin-white,
-			border-color: $cadmin-gray-300,
-			border-radius: clay-enable-rounded($cadmin-border-radius),
-			box-shadow: clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
-		),
-		toggler-mobile: (
-			color: $cadmin-gray-900,
-			font-size: 14px,
-			font-weight: $cadmin-font-weight-semi-bold,
-			text-decoration: none,
-			transition: box-shadow 0.15s ease-in-out,
-			focus: (
-				box-shadow:
-					clay-enable-shadows($cadmin-component-focus-box-shadow),
-				outline: 0,
-			),
-			disabled: (
-				box-shadow: clay-enable-shadows(none),
+		media-breakpoint-down: (
+			md: (
+				background-color: $cadmin-white,
+				nav-link: (
+					border-radius: clay-enable-rounded(0),
+					color: $cadmin-gray-900,
+					hover: (
+						background-color: rgba($cadmin-primary, 0.04),
+						color: $cadmin-gray-900,
+					),
+					focus: (
+						background-color: rgba($cadmin-primary, 0.04),
+					),
+					active-class: (
+						background-color: rgba($cadmin-primary, 0.06),
+						color: $cadmin-gray-900,
+						font-weight: $cadmin-font-weight-semi-bold,
+					),
+					disabled: (
+						background-color: transparent,
+						color: $cadmin-gray-600,
+					),
+					show: (
+						background-color: c-unset,
+						color: c-unset,
+						font-weight: c-unset,
+					),
+				),
+				menubar-collapse: (
+					background-color: $cadmin-white,
+					border-color: $cadmin-gray-300,
+					border-radius: clay-enable-rounded($cadmin-border-radius),
+					box-shadow:
+						clay-enable-shadows(0 1px 5px -1px rgba(0, 0, 0, 0.3)),
+				),
+				menubar-toggler: (
+					color: $cadmin-gray-900,
+					font-size: 14px,
+					font-weight: $cadmin-font-weight-semi-bold,
+					text-decoration: none,
+					transition: box-shadow 0.15s ease-in-out,
+					focus: (
+						box-shadow:
+							clay-enable-shadows(
+								$cadmin-component-focus-box-shadow
+							),
+						outline: 0,
+					),
+					disabled: (
+						box-shadow: clay-enable-shadows(none),
+					),
+				),
 			),
 		),
 	),

package/src/scss/cadmin/variables/_navbar.scss

@@ -44,6 +44,53 @@ $cadmin-navbar-underline-active-bg: clay-lighten(
 	22.94
 ) !default;
 
+$cadmin-navbar-underline: () !default;
+$cadmin-navbar-underline: map-deep-merge(
+	(
+		navbar-toggler-link: (
+			after: (
+				background-color: $cadmin-navbar-underline-active-bg,
+				bottom: math-sign($cadmin-navbar-padding-y),
+				content: '',
+				display: block,
+				height: 0.25rem,
+				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:
+											$cadmin-navbar-underline-active-bg,
+										bottom:
+											math-sign($cadmin-navbar-padding-y),
+										content: '',
+										display: block,
+										height: 0.25rem,
+										left: 0,
+										position: absolute,
+										right: 0,
+										width: auto,
+									),
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+	),
+	$cadmin-navbar-underline
+);
+
 // Navbar Dark
 
 $cadmin-navbar-dark-color: $cadmin-white !default;

package/src/scss/cadmin/variables/_navigation-bar.scss

@@ -30,7 +30,7 @@ $cadmin-navigation-bar-base: map-deep-merge(
 		border-style: solid,
 		navbar-nav: (
 			nav-link: (
-				border-radius: 0,
+				border-radius: clay-enable-rounded($cadmin-border-radius),
 				border-width: 0,
 				outline: 0,
 				font-size: inherit,