@clayui/css 3.60.2 → 3.62.1

package/src/scss/mixins/_navbar.scss

@@ -4,10 +4,27 @@
 
 @mixin clay-navbar-size($map) {
 	$enabled: setter(map-get($map, enabled), true);
+
+	$enable-c-inner: if(
+		variable-exists(enable-c-inner),
+		$enable-c-inner,
+		if(variable-exists(cadmin-enable-c-inner), $cadmin-enable-c-inner, true)
+	);
+
 	$breakpoints: if(
 		variable-exists(grid-breakpoints),
 		$grid-breakpoints,
-		$cadmin-grid-breakpoints
+		if(
+			variable-exists(cadmin-grid-breakpoints),
+			$cadmin-grid-breakpoints,
+			(
+				xs: 0,
+				sm: 576px,
+				md: 768px,
+				lg: 992px,
+				xl: 1280px,
+			)
+		)
 	);
 
 	$_line-height-base: if(
@@ -92,7 +109,11 @@
 		if(
 			variable-exists(navbar-nav-link-padding-x),
 			$navbar-nav-link-padding-x,
-			$cadmin-navbar-nav-link-padding-x
+			if(
+				variable-exists(cadmin-navbar-nav-link-padding-x),
+				$cadmin-navbar-nav-link-padding-x,
+				null
+			)
 		)
 	);
 	$link-padding-y: setter(
@@ -119,7 +140,13 @@
 							if(
 								variable-exists(nav-item-monospaced-size),
 								$nav-item-monospaced-size,
-								$cadmin-nav-item-monospaced-size
+								if(
+									variable-exists(
+										cadmin-nav-item-monospaced-size
+									),
+									$cadmin-nav-item-monospaced-size,
+									2rem
+								)
 							)
 						)}
 				) * 0.5
@@ -133,7 +160,11 @@
 		if(
 			variable-exists(navbar-brand-font-size),
 			$navbar-brand-font-size,
-			$cadmin-navbar-brand-font-size
+			if(
+				variable-exists(cadmin-navbar-brand-font-size),
+				$cadmin-navbar-brand-font-size,
+				1rem
+			)
 		)
 	);
 	$brand-max-width: map-get($map, brand-max-width);
@@ -220,7 +251,13 @@
 							if(
 								variable-exists(nav-item-monospaced-size),
 								$nav-item-monospaced-size,
-								$cadmin-nav-item-monospaced-size
+								if(
+									variable-exists(
+										cadmin-nav-item-monospaced-size
+									),
+									$cadmin-nav-item-monospaced-size,
+									2rem
+								)
 							)
 						)}
 				) * 0.5
@@ -240,7 +277,11 @@
 		if(
 			variable-exists(font-size-lg-mobile),
 			$font-size-lg-mobile,
-			$cadmin-font-size-lg-mobile
+			if(
+				variable-exists(cadmin-font-size-lg-mobile),
+				$cadmin-font-size-lg-mobile,
+				null
+			)
 		)
 	);
 	$brand-margin-right-mobile: setter(
@@ -276,7 +317,11 @@
 		if(
 			variable-exists(navbar-toggler-font-size),
 			$navbar-toggler-font-size,
-			$cadmin-navbar-toggler-font-size
+			if(
+				variable-exists(cadmin-navbar-toggler-font-size),
+				$cadmin-navbar-toggler-font-size,
+				null
+			)
 		)
 	);
 	$toggler-height: setter(
@@ -293,7 +338,11 @@
 		if(
 			variable-exists(navbar-toggler-padding-x),
 			$navbar-toggler-padding-x,
-			$cadmin-navbar-toggler-padding-x
+			if(
+				variable-exists(cadmin-navbar-toggler-padding-x),
+				$cadmin-navbar-toggler-padding-x,
+				null
+			)
 		)
 	);
 	$toggler-padding-y: setter(
@@ -301,7 +350,11 @@
 		if(
 			variable-exists(navbar-toggler-padding-y),
 			$navbar-toggler-padding-y,
-			$cadmin-navbar-toggler-padding-y
+			if(
+				variable-exists(cadmin-navbar-toggler-padding-y),
+				$cadmin-navbar-toggler-padding-y,
+				null
+			)
 		)
 	);
 
@@ -354,7 +407,11 @@
 			if(
 				variable-exists(navbar-border-radius),
 				$navbar-border-radius,
-				$cadmin-navbar-border-radius
+				if(
+					variable-exists(cadmin-navbar-border-radius),
+					$cadmin-navbar-border-radius,
+					null
+				)
 			)
 		);
 
@@ -387,16 +444,7 @@
 			padding-right: $toggler-padding-x;
 			padding-top: $toggler-padding-y;
 
-			@if (
-				setter(
-					if(
-						variable-exists(enable-c-inner),
-						$enable-c-inner,
-						$cadmin-enable-c-inner
-					),
-					true
-				)
-			) {
+			@if ($enable-c-inner) {
 				.c-inner {
 					margin-bottom: math-sign($toggler-padding-y);
 					margin-left: math-sign($toggler-padding-x);
@@ -419,16 +467,7 @@
 			padding-right: $toggler-link-padding-x;
 			padding-top: $toggler-link-padding-y;
 
-			@if (
-				setter(
-					if(
-						variable-exists(enable-c-inner),
-						$enable-c-inner,
-						$cadmin-enable-c-inner
-					),
-					true
-				)
-			) {
+			@if ($enable-c-inner) {
 				.c-inner {
 					margin-bottom: math-sign($toggler-link-padding-y);
 					margin-left: math-sign($toggler-link-padding-x);
@@ -447,16 +486,7 @@
 			padding-right: $brand-padding-x-mobile;
 			padding-top: $brand-padding-y-mobile;
 
-			@if (
-				setter(
-					if(
-						variable-exists(enable-c-inner),
-						$enable-c-inner,
-						$cadmin-enable-c-inner
-					),
-					true
-				)
-			) {
+			@if ($enable-c-inner) {
 				.c-inner {
 					margin-bottom: math-sign($brand-padding-y-mobile);
 					margin-left: math-sign($brand-padding-x-mobile);
@@ -487,16 +517,7 @@
 				padding-top: $btn-padding-y-mobile;
 				min-width: $btn-monospaced-size-mobile;
 
-				@if (
-					setter(
-						if(
-							variable-exists(enable-c-inner),
-							$enable-c-inner,
-							$cadmin-enable-c-inner
-						),
-						true
-					)
-				) {
+				@if ($enable-c-inner) {
 					.c-inner {
 						margin-bottom: math-sign($btn-padding-y-mobile);
 						margin-left: math-sign($btn-padding-x-mobile);
@@ -510,16 +531,7 @@
 				font-size: $btn-monospaced-font-size-mobile;
 				padding: 0;
 
-				@if (
-					setter(
-						if(
-							variable-exists(enable-c-inner),
-							$enable-c-inner,
-							$cadmin-enable-c-inner
-						),
-						true
-					)
-				) {
+				@if ($enable-c-inner) {
 					.c-inner {
 						margin: 0;
 					}
@@ -545,16 +557,7 @@
 				padding-right: $link-padding-x-mobile;
 				padding-top: $link-padding-y-mobile;
 
-				@if (
-					setter(
-						if(
-							variable-exists(enable-c-inner),
-							$enable-c-inner,
-							$cadmin-enable-c-inner
-						),
-						true
-					)
-				) {
+				@if ($enable-c-inner) {
 					.c-inner {
 						margin-bottom: math-sign($link-padding-y-mobile);
 						margin-left: math-sign($link-padding-x-mobile);
@@ -572,16 +575,7 @@
 				margin-top: $btn-margin-y-mobile;
 				padding: 0;
 
-				@if (
-					setter(
-						if(
-							variable-exists(enable-c-inner),
-							$enable-c-inner,
-							$cadmin-enable-c-inner
-						),
-						true
-					)
-				) {
+				@if ($enable-c-inner) {
 					.c-inner {
 						margin: 0;
 					}
@@ -679,16 +673,7 @@
 								padding-right: $brand-padding-x;
 								padding-top: $brand-padding-y;
 
-								@if (
-									setter(
-										if(
-											variable-exists(enable-c-inner),
-											$enable-c-inner,
-											$cadmin-enable-c-inner
-										),
-										true
-									)
-								) {
+								@if ($enable-c-inner) {
 									.c-inner {
 										margin-bottom: math-sign(
 											$brand-padding-y
@@ -741,16 +726,7 @@
 								padding-top: $btn-padding-y;
 								min-width: $btn-monospaced-size;
 
-								@if (
-									setter(
-										if(
-											variable-exists(enable-c-inner),
-											$enable-c-inner,
-											$cadmin-enable-c-inner
-										),
-										true
-									)
-								) {
+								@if ($enable-c-inner) {
 									.c-inner {
 										margin-bottom: math-sign(
 											$btn-padding-y
@@ -768,16 +744,7 @@
 								font-size: $btn-monospaced-font-size;
 								padding: 0;
 
-								@if (
-									setter(
-										if(
-											variable-exists(enable-c-inner),
-											$enable-c-inner,
-											$cadmin-enable-c-inner
-										),
-										true
-									)
-								) {
+								@if ($enable-c-inner) {
 									.c-inner {
 										margin: 0;
 									}
@@ -807,16 +774,7 @@
 								padding-right: $link-padding-x;
 								padding-top: $link-padding-y;
 
-								@if (
-									setter(
-										if(
-											variable-exists(enable-c-inner),
-											$enable-c-inner,
-											$cadmin-enable-c-inner
-										),
-										true
-									)
-								) {
+								@if ($enable-c-inner) {
 									.c-inner {
 										margin-bottom: math-sign(
 											$link-padding-y
@@ -840,16 +798,7 @@
 								margin-top: $btn-margin-y;
 								padding: 0;
 
-								@if (
-									setter(
-										if(
-											variable-exists(enable-c-inner),
-											$enable-c-inner,
-											$cadmin-enable-c-inner
-										),
-										true
-									)
-								) {
+								@if ($enable-c-inner) {
 									.c-inner {
 										margin: 0;
 									}
@@ -880,7 +829,11 @@
 						if(
 							variable-exists(navbar-border-radius),
 							$navbar-border-radius,
-							$cadmin-navbar-border-radius
+							if(
+								variable-exists(cadmin-navbar-border-radius),
+								$cadmin-navbar-border-radius,
+								null
+							)
 						)
 					);
 
@@ -1160,7 +1113,17 @@
 		$breakpoints: if(
 			variable-exists(grid-breakpoints),
 			$grid-breakpoints,
-			$cadmin-grid-breakpoints
+			if(
+				variable-exists(cadmin-grid-breakpoints),
+				$cadmin-grid-breakpoints,
+				(
+					xs: 0,
+					sm: 576px,
+					md: 768px,
+					lg: 992px,
+					xl: 1280px,
+				)
+			)
 		);
 
 		$base: map-merge(

package/src/scss/mixins/_panels.scss

@@ -163,13 +163,14 @@
 		$header-c-inner: map-merge(
 			(
 				enabled:
-					setter(
+					if(
+						variable-exists(enable-c-inner),
+						$enable-c-inner,
 						if(
-							variable-exists(enable-c-inner),
-							$enable-c-inner,
-							$cadmin-enable-c-inner
-						),
-						true
+							variable-exists(cadmin-enable-c-inner),
+							$cadmin-enable-c-inner,
+							null
+						)
 					),
 				margin-bottom: math-sign(map-get($header, padding-bottom)),
 				margin-left: math-sign(map-get($header, padding-left)),

package/src/scss/mixins/_scale-component.scss

@@ -11,7 +11,11 @@
 		if(
 			variable-exists(scaling-breakpoint-down),
 			$scaling-breakpoint-down,
-			$cadmin-scaling-breakpoint-down
+			if(
+				variable-exists(cadmin-scaling-breakpoint-down),
+				$cadmin-scaling-breakpoint-down,
+				sm
+			)
 		)
 	);
 
@@ -20,7 +24,11 @@
 		if(
 			variable-exists(enable-scaling-components),
 			$enable-scaling-components,
-			$cadmin-enable-scaling-components
+			if(
+				variable-exists(cadmin-enable-scaling-components),
+				$cadmin-enable-scaling-components,
+				true
+			)
 		)
 	);
 

package/src/scss/mixins/_sidebar.scss

@@ -14,6 +14,12 @@
 /// 	close: (
 /// 		// .sidebar .close
 /// 	),
+/// 	sidenav-start: (
+/// 		// .sidenav-start .sidebar, .sidenav-left .sidebar
+/// 	),
+/// 	sidenav-end: (
+/// 		// .sidenav-end .sidebar, .sidenav-right .sidebar
+/// 	),
 /// 	sidebar-header: (
 /// 		// .sidebar .sidebar-header
 /// 		component-title: (
@@ -226,6 +232,18 @@
 		@if ($enabled) {
 			@include clay-css($base);
 
+			@at-root {
+				#{clay-insert-before(clay-parent(&), '.sidenav-start ')},
+				#{clay-insert-before(clay-parent(&), '.sidenav-left ')} {
+					@include clay-css(map-get($map, sidenav-start));
+				}
+
+				#{clay-insert-before(clay-parent(&), '.sidenav-end ')},
+				#{clay-insert-before(clay-parent(&), '.sidenav-right ')} {
+					@include clay-css(map-get($map, sidenav-right));
+				}
+			}
+
 			.component-link {
 				@include clay-text-typography(map-get($map, component-link));
 			}

package/src/scss/mixins/_tbar.scss

@@ -67,6 +67,12 @@
 /// - Add @link to documentation
 
 @mixin clay-tbar-variant($map) {
+	$enable-c-inner: if(
+		variable-exists(enable-c-inner),
+		$enable-c-inner,
+		if(variable-exists(cadmin-enable-c-inner), $cadmin-enable-c-inner, true)
+	);
+
 	$base: map-merge(
 		$map,
 		(
@@ -190,15 +196,7 @@
 	$btn-c-inner: setter(map-get($map, btn-c-inner), ());
 	$btn-c-inner: map-merge(
 		(
-			enabled:
-				setter(
-					if(
-						variable-exists(enable-c-inner),
-						$enable-c-inner,
-						$cadmin-enable-c-inner
-					),
-					true
-				),
+			enabled: $enable-c-inner,
 			margin-bottom: math-sign(map-get($btn, padding-bottom)),
 			margin-left: math-sign(map-get($btn, padding-left)),
 			margin-right: math-sign(map-get($btn, padding-right)),
@@ -269,15 +267,7 @@
 	$btn-monospaced-c-inner: setter(map-get($map, btn-monospaced-c-inner), ());
 	$btn-monospaced-c-inner: map-merge(
 		(
-			enabled:
-				setter(
-					if(
-						variable-exists(enable-c-inner),
-						$enable-c-inner,
-						$cadmin-enable-c-inner
-					),
-					true
-				),
+			enabled: $enable-c-inner,
 			margin: math-sign(map-get($btn-monospaced, padding)),
 		),
 		$btn-monospaced-c-inner
@@ -330,15 +320,7 @@
 	$link-c-inner: setter(map-get($map, link-c-inner), ());
 	$link-c-inner: map-merge(
 		(
-			enabled:
-				setter(
-					if(
-						variable-exists(enable-c-inner),
-						$enable-c-inner,
-						$cadmin-enable-c-inner
-					),
-					true
-				),
+			enabled: $enable-c-inner,
 			margin-bottom: math-sign(map-get($link, padding-bottom)),
 			margin-left: math-sign(map-get($link, padding-left)),
 			margin-right: math-sign(map-get($link, padding-right)),
@@ -410,15 +392,7 @@
 	);
 	$link-monospaced-c-inner: map-merge(
 		(
-			enabled:
-				setter(
-					if(
-						variable-exists(enable-c-inner),
-						$enable-c-inner,
-						$cadmin-enable-c-inner
-					),
-					true
-				),
+			enabled: $enable-c-inner,
 			margin: math-sign(map-get($link-monospaced, padding)),
 		),
 		$link-monospaced-c-inner

package/src/scss/mixins/_timelines.scss

@@ -5,25 +5,41 @@
 $card-border-width: if(
 	variable-exists(card-border-width),
 	$card-border-width,
-	$cadmin-card-border-width
+	if(
+		variable-exists(cadmin-card-border-width),
+		$cadmin-card-border-width,
+		0px
+	)
 );
 
 $timeline-inner-spacing: if(
 	variable-exists(timeline-inner-spacing),
 	$timeline-inner-spacing,
-	$cadmin-timeline-inner-spacing
+	if(
+		variable-exists(cadmin-timeline-inner-spacing),
+		$cadmin-timeline-inner-spacing,
+		0px
+	)
 );
 
 $timeline-border-width: if(
 	variable-exists(timeline-border-width),
 	$timeline-border-width,
-	$cadmin-timeline-border-width
+	if(
+		variable-exists(cadmin-timeline-border-width),
+		$cadmin-timeline-border-width,
+		1px
+	)
 );
 
 $timeline-border-modifier: if(
 	variable-exists(timeline-border-modifier),
 	$timeline-border-modifier,
-	$cadmin-timeline-border-modifier
+	if(
+		variable-exists(cadmin-timeline-border-modifier),
+		$cadmin-timeline-border-modifier,
+		0px
+	)
 );
 
 /// A mixin that places the `.timeline-item::before` element on the right side. This mixin is used in `.timeline-right`.

package/src/scss/variables/_forms.scss

@@ -525,6 +525,37 @@ $form-control-tag-group-component-action: map-deep-merge(
 	$form-control-tag-group-component-action
 );
 
+// .form-control-tag-group-sm.form-control
+
+$form-control-tag-group-sm: () !default;
+$form-control-tag-group-sm: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($input-border-radius-sm),
+		font-size: $input-font-size-sm,
+		height: auto,
+		line-height: $input-line-height-sm,
+		min-height: $input-height-sm,
+		padding-bottom: 0,
+		padding-left: 0.25rem,
+		padding-right: 0.25rem,
+		padding-top: 0,
+		inline-item: (
+			margin-bottom: 0,
+			margin-top: 0,
+		),
+		label: (
+			margin-bottom: 0.1875rem,
+			margin-right: 0.25rem,
+			margin-top: 0.1875rem,
+		),
+		form-control-inset: (
+			margin-bottom: 0.125rem,
+			margin-top: 0.1875rem,
+		),
+	),
+	$form-control-tag-group-sm
+);
+
 // Form Grid
 
 /// @deprecated as of v3.x with no replacement
@@ -1730,25 +1761,6 @@ $input-group-sm: map-deep-merge(
 		input-group-item: (
 			btn: $input-group-sm-item-btn,
 			btn-monospaced: $input-group-sm-item-btn-monospaced,
-			form-control: (
-				border-radius: clay-enable-rounded($input-border-radius-sm),
-				font-size: $input-font-size-sm,
-				height: auto,
-				line-height: $input-line-height-sm,
-				min-height: $input-height-sm,
-				padding-bottom: 0,
-				padding-left: $input-padding-x-sm,
-				padding-right: $input-padding-x-sm,
-				padding-top: 0,
-				label: (
-					margin-bottom: 0.1875rem,
-					margin-top: 0.1875rem,
-				),
-			),
-			form-control-inset: (
-				margin-bottom: 0.125rem,
-				margin-top: 0.1875rem,
-			),
 			form-file: (
 				btn: (
 					border-radius: clay-enable-rounded($input-border-radius-sm),

package/src/scss/variables/_globals.scss

@@ -189,28 +189,14 @@ $spacers: () !default;
 $spacers: map-deep-merge(
 	(
 		0: 0,
-		1: (
-			$spacer * 0.25,
-		),
-		2: (
-			$spacer * 0.5,
-		),
+		1: $spacer * 0.25,
+		2: $spacer * 0.5,
 		3: $spacer,
-		4: (
-			$spacer * 1.5,
-		),
-		5: (
-			$spacer * 3,
-		),
-		6: (
-			$spacer * 4.5,
-		),
-		7: (
-			$spacer * 6,
-		),
-		8: (
-			$spacer * 7.5,
-		),
+		4: $spacer * 1.5,
+		5: $spacer * 3,
+		6: $spacer * 4.5,
+		7: $spacer * 6,
+		8: $spacer * 7.5,
 	),
 	$spacers
 );

package/src/scss/variables/_type.scss

@@ -5,6 +5,20 @@ $strong-font-weight: null !default;
 $reference-mark-font-size: 0.75rem !default;
 $reference-mark-vertical-align: super !default;
 
+$reference-mark: () !default;
+$reference-mark: map-deep-merge(
+	(
+		display: inline-block,
+		font-size: $reference-mark-font-size,
+		position: relative,
+		vertical-align: $reference-mark-vertical-align,
+		lexicon-icon: (
+			vertical-align: $reference-mark-vertical-align,
+		),
+	),
+	$reference-mark
+);
+
 $mark-color: null !default;
 
 // C Kbd