@clayui/css 3.50.0 → 3.53.0

package/src/scss/mixins/_nav-nested.scss

@@ -20,11 +20,11 @@
 	@for $i from (1) through $nest-level {
 		#{$nav-class} > li {
 			> a {
-				padding-left: $indent * ($i + 1);
+				padding-left: calc(#{$indent} * #{$i + 1});
 			}
 
 			> .nav-equal-height-heading {
-				padding-left: $indent * $i;
+				padding-left: calc(#{$indent} * #{$i});
 			}
 		}
 

package/src/scss/mixins/_navbar.scss

@@ -10,6 +10,16 @@
 		$cadmin-grid-breakpoints
 	);
 
+	$_line-height-base: if(
+		variable-exists(line-height-base),
+		$line-height-base,
+		if(
+			variable-exists(cadmin-line-height-base),
+			$cadmin-line-height-base,
+			1.5
+		)
+	);
+
 	$scaling-navbar: setter(map-get($map, scaling-navbar), false);
 	$container-padding-x: map-get($map, container-padding-x);
 	$container-padding-x-mobile: setter(
@@ -18,17 +28,21 @@
 	);
 
 	$height: setter(map-get($map, height), 3.5rem);
-	$border-bottom-width: setter(map-get($map, border-bottom-width), 0);
-	$border-left-width: setter(map-get($map, border-left-width), 0);
-	$border-right-width: setter(map-get($map, border-right-width), 0);
-	$border-top-width: setter(map-get($map, border-top-width), 0);
+	$border-bottom-width: setter(map-get($map, border-bottom-width), 0px);
+	$border-left-width: setter(map-get($map, border-left-width), 0px);
+	$border-right-width: setter(map-get($map, border-right-width), 0px);
+	$border-top-width: setter(map-get($map, border-top-width), 0px);
 	$box-shadow: map-get($map, box-shadow);
 	$font-size: setter(
 		map-get($map, font-size),
 		if(
 			variable-exists(font-size-base),
 			$font-size-base,
-			$cadmin-font-size-base
+			if(
+				variable-exists(cadmin-font-size-base),
+				$cadmin-font-size-base,
+				1rem
+			)
 		)
 	);
 	$min-height: map-get($map, min-height);
@@ -37,7 +51,11 @@
 		if(
 			variable-exists(navbar-padding-x),
 			$navbar-padding-x,
-			$cadmin-navbar-padding-x
+			if(
+				variable-exists(cadmin-navbar-padding-x),
+				$cadmin-navbar-padding-x,
+				null
+			)
 		)
 	);
 	$padding-y: setter(
@@ -45,18 +63,29 @@
 		if(
 			variable-exists(navbar-padding-y),
 			$navbar-padding-y,
-			$cadmin-navbar-padding-y
+			if(
+				variable-exists(cadmin-navbar-padding-y),
+				$cadmin-navbar-padding-y,
+				null
+			)
 		)
 	);
+	$padding-y: if($padding-y == 0 or $padding-y == null, 0px, $padding-y);
 	$link-height: setter(
 		map-get($map, link-height),
-		$height - $border-bottom-width - $border-top-width - ($padding-y * 2)
+		'#{$height} - #{$border-bottom-width} - #{$border-top-width} - #{$padding-y} * 2'
 	);
+
 	$link-margin-x: map-get($map, link-margin-x);
 	$link-margin-y: setter(
 		map-get($map, link-margin-y),
-		(($height - $border-bottom-width - $border-top-width) - $link-height) *
-			0.5
+		calc(
+			(
+					(
+							#{$height} - #{$border-bottom-width} - #{$border-top-width}
+						) - #{$link-height}
+				) * 0.5
+		)
 	);
 	$link-padding-x: setter(
 		map-get($map, link-padding-x),
@@ -69,17 +98,10 @@
 	$link-padding-y: setter(
 		map-get($map, link-padding-y),
 		(
-			(
-					$link-height -
-						(
-							$font-size *
-								if(
-									variable-exists(line-height-base),
-									$line-height-base,
-									$cadmin-line-height-base
-								)
-						)
-				) * 0.5
+			calc(
+				(#{$link-height} - (#{$font-size} * #{$_line-height-base})) *
+					0.5
+			)
 		)
 	);
 	$btn-font-size: setter(map-get($map, btn-font-size), $font-size);
@@ -88,19 +110,20 @@
 	$btn-margin-x: setter(map-get($map, btn-margin-x), $link-padding-x);
 	$btn-margin-y: setter(
 		map-get($map, btn-margin-y),
-		(
-				$height - $border-bottom-width - $border-top-width -
-					($padding-y * 2) -
-					if(
-						$btn-monospaced-size,
-						$btn-monospaced-size,
-						if(
-							variable-exists(nav-item-monospaced-size),
-							$nav-item-monospaced-size,
-							$cadmin-nav-item-monospaced-size
-						)
-					)
-			) * 0.5
+		calc(
+			(
+					#{$height} - #{$border-bottom-width} - #{$border-top-width} -
+						#{$padding-y} * 2 - #{if(
+							$btn-monospaced-size,
+							$btn-monospaced-size,
+							if(
+								variable-exists(nav-item-monospaced-size),
+								$nav-item-monospaced-size,
+								$cadmin-nav-item-monospaced-size
+							)
+						)}
+				) * 0.5
+		)
 	);
 	$btn-padding-x: setter(map-get($map, btn-padding-x), $link-padding-x);
 	$btn-padding-y: setter(map-get($map, btn-padding-y), $link-padding-y);
@@ -122,18 +145,13 @@
 	$brand-padding-y: setter(
 		map-get($map, brand-padding-y),
 		(
-			(
-					$height - $border-bottom-width - $border-top-width -
-						($padding-y * 2) -
-						(
-							$brand-font-size *
-								if(
-									variable-exists(line-height-base),
-									$line-height-base,
-									$cadmin-line-height-base
-								)
-						)
-				) * 0.5
+			calc(
+				(
+						#{$height} - #{$border-bottom-width} - #{$border-top-width} -
+							#{$padding-y} * 2 -
+							(#{$brand-font-size} * #{$_line-height-base})
+					) * 0.5
+			)
 		)
 	);
 	$title-font-size: map-get($map, title-font-size);
@@ -147,8 +165,7 @@
 	$min-height-mobile: map-get($map, min-height-mobile);
 	$link-height-mobile: setter(
 		map-get($map, link-height-mobile),
-		$height-mobile - $border-bottom-width - $border-top-width -
-			($padding-y * 2)
+		'#{$height-mobile} - #{$border-bottom-width} - #{$border-top-width} - #{$padding-y} * 2'
 	);
 	$link-margin-x-mobile: setter(
 		map-get($map, link-margin-x-mobile),
@@ -156,10 +173,13 @@
 	);
 	$link-margin-y-mobile: setter(
 		map-get($map, link-margin-y-mobile),
-		(
-				($height-mobile - $border-bottom-width - $border-top-width) -
-					$link-height-mobile
-			) * 0.5
+		calc(
+			(
+					(
+							#{$height-mobile} - #{$border-bottom-width} - #{$border-top-width}
+						) - #{$link-height-mobile}
+				) * 0.5
+		)
 	);
 	$link-padding-x-mobile: setter(
 		map-get($map, link-padding-x-mobile),
@@ -167,17 +187,11 @@
 	);
 	$link-padding-y-mobile: setter(
 		map-get($map, link-padding-y-mobile),
-		(
-				$link-height-mobile -
-					(
-						$font-size-mobile *
-							if(
-								variable-exists(line-height-base),
-								$line-height-base,
-								$cadmin-line-height-base
-							)
-					)
-			) * 0.5
+		calc(
+			(
+					#{$link-height-mobile} - (#{$font-size-mobile} * #{$_line-height-base})
+				) * 0.5
+		)
 	);
 	$btn-font-size-mobile: setter(
 		map-get($map, btn-font-size-mobile),
@@ -197,19 +211,20 @@
 	);
 	$btn-margin-y-mobile: setter(
 		map-get($map, btn-margin-y-mobile),
-		(
-				$height-mobile - $border-bottom-width - $border-top-width -
-					($padding-y * 2) -
-					if(
-						$btn-monospaced-size-mobile,
-						$btn-monospaced-size-mobile,
-						if(
-							variable-exists(nav-item-monospaced-size),
-							$nav-item-monospaced-size,
-							$cadmin-nav-item-monospaced-size
-						)
-					)
-			) * 0.5
+		calc(
+			(
+					#{$height-mobile} - #{$border-bottom-width} - #{$border-top-width} -
+						#{$padding-y} * 2 - #{if(
+							$btn-monospaced-size-mobile,
+							$btn-monospaced-size-mobile,
+							if(
+								variable-exists(nav-item-monospaced-size),
+								$nav-item-monospaced-size,
+								$cadmin-nav-item-monospaced-size
+							)
+						)}
+				) * 0.5
+		)
 	);
 	$btn-padding-x-mobile: setter(
 		map-get($map, btn-padding-x-mobile),
@@ -239,18 +254,12 @@
 	$brand-padding-y-mobile: setter(
 		map-get($map, brand-padding-y-mobile),
 		(
-			(
-					$height-mobile - $border-bottom-width - $border-top-width -
-						($padding-y * 2) -
-						(
-							$brand-font-size-mobile *
-								if(
-									variable-exists(line-height-base),
-									$line-height-base,
-									$cadmin-line-height-base
-								)
-						)
-				) * 0.5
+			calc(
+				(
+						#{$height-mobile} - #{$border-bottom-width} - #{$border-top-width} -
+							#{$padding-y} * 2 - #{$brand-font-size-mobile} * #{$_line-height-base}
+					) * 0.5
+			)
 		)
 	);
 	$collapse-dropdown-item-padding-x-mobile: map-get(
@@ -272,7 +281,7 @@
 	);
 	$toggler-height: setter(
 		map-get($map, toggler-height),
-		$height-mobile * 0.66667
+		calc(#{$height-mobile} * 0.66667)
 	);
 	$toggler-margin-x: setter(
 		map-get($map, toggler-margin-x),
@@ -303,11 +312,7 @@
 	$toggler-link-height: setter(map-get($map, toggler-link-height), auto);
 	$toggler-link-line-height: setter(
 		map-get($map, toggler-link-line-height),
-		if(
-			variable-exists(line-height-base),
-			$line-height-base,
-			$cadmin-line-height-base
-		)
+		$_line-height-base
 	);
 	$toggler-link-margin-x: setter(map-get($map, toggler-link-margin-x), 0);
 	$toggler-link-margin-y: map-get($map, toggler-link-margin-y);
@@ -317,11 +322,12 @@
 	);
 	$toggler-link-padding-y: setter(
 		map-get($map, toggler-link-padding-y),
-		(
-				$height-mobile - $border-bottom-width - $border-top-width -
-					($padding-y * 2) -
-					($toggler-link-font-size * $toggler-link-line-height)
-			) * 0.5
+		calc(
+			(
+					#{$height-mobile} - #{$border-bottom-width} - #{$border-top-width} -
+						#{$padding-y} * 2 - #{$toggler-link-font-size} * #{$toggler-link-line-height}
+				) * 0.5
+		)
 	);
 
 	$active-border-bottom-width: setter(
@@ -331,13 +337,16 @@
 	$active-border-offset-x: map-get($map, active-border-offset-x);
 	$active-border-offset-bottom: setter(
 		map-get($map, active-border-offset-bottom),
-		-$border-bottom-width - $padding-y - $link-margin-y
+		calc((#{$border-bottom-width} + #{$padding-y} + #{$link-margin-y}) * -1)
 	);
 	$active-border-offset-top: map-get($map, active-border-offset-top);
 
 	$active-border-offset-bottom-mobile: setter(
 		map-get($map, active-border-offset-bottom-mobile),
-		-$border-bottom-width - $padding-y - $link-margin-y-mobile
+		calc(
+			(#{$border-bottom-width} + #{$padding-y} + #{$link-margin-y-mobile}) *
+				-1
+		)
 	);
 
 	@if ($enabled) {
@@ -634,8 +643,10 @@
 							}
 
 							.navbar-form {
-								height: $height-mobile - $border-bottom-width -
-									$border-top-width;
+								height: calc(
+									#{$height-mobile} - #{$border-bottom-width} -
+										#{$border-top-width}
+								);
 								padding-bottom: $link-padding-y-mobile;
 								padding-left: $link-padding-x-mobile;
 								padding-right: $link-padding-x-mobile;
@@ -696,9 +707,11 @@
 
 						.navbar-form {
 							@if ($scaling-navbar) {
-								height: $height -
-									$border-bottom-width -
-									$border-top-width;
+								height: calc(
+									#{$height} -
+										#{$border-bottom-width} -
+										#{$border-top-width}
+								);
 								padding-left: $link-padding-x;
 								padding-right: $link-padding-x;
 
@@ -1250,7 +1263,8 @@
 								$map,
 								navbar-nav,
 								nav-link,
-								focus-color
+								focus,
+								color
 							)
 						),
 				),

package/src/scss/mixins/_popovers.scss

@@ -2,6 +2,52 @@
 /// @group popovers
 ////
 
+/// A mixin to help create `.popover-header` variants.
+/// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
+/// @example
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// .popover-header
+/// 	before: (
+/// 		// .popover-header::before
+/// 	),
+/// 	after: (
+/// 		// .popover-header::after
+/// 	),
+/// 	empty: (
+/// 		// .popover-header:empty
+/// 	),
+/// 	close: (
+/// 		// .popover-header .close
+/// 	),
+/// )
+
+@mixin clay-popover-header-variant($map) {
+	@if (type-of($map) == 'map') {
+		$enabled: setter(map-get($map, enabled), true);
+
+		@if ($enabled) {
+			@include clay-css($map);
+
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
+			&:empty {
+				@include clay-css(map-get($map, empty));
+			}
+
+			.close {
+				@include clay-close(map-get($map, close));
+			}
+		}
+	}
+}
+
 /// A mixin to help create `.popover` variants.
 /// @param {Map} $map - A map of `key: value` pairs. The keys and value types are listed below:
 /// @example
@@ -35,6 +81,9 @@
 /// 	inline-scroller: (
 /// 		// .popover .inline-scroller
 /// 	),
+/// 	close: (
+/// 		// .popover .close
+/// 	),
 /// )
 
 @mixin clay-popover-variant($map) {
@@ -57,25 +106,9 @@
 			}
 
 			.popover-header {
-				@include clay-css(map-get($map, popover-header));
-
-				&::before {
-					@include clay-css(
-						map-deep-get($map, popover-header, before)
-					);
-				}
-
-				&::after {
-					@include clay-css(
-						map-deep-get($map, popover-header, after)
-					);
-				}
-
-				&:empty {
-					@include clay-css(
-						map-deep-get($map, popover-header, empty)
-					);
-				}
+				@include clay-popover-header-variant(
+					map-get($map, popover-header)
+				);
 			}
 
 			.popover-body {
@@ -85,6 +118,10 @@
 			.inline-scroller {
 				@include clay-css(map-get($map, inline-scroller));
 			}
+
+			.close {
+				@include clay-close(map-get($map, close));
+			}
 		}
 	}
 }

package/src/scss/variables/_dropdowns.scss

@@ -199,7 +199,6 @@ $dropdown-item-base: map-deep-merge(
 		),
 		active-class: (
 			font-weight: $dropdown-link-active-font-weight,
-			pointer-events: none,
 		),
 		disabled: (
 			background-color: transparent,
@@ -215,7 +214,7 @@ $dropdown-item-base: map-deep-merge(
 			),
 		),
 		c-kbd-inline: (
-			line-height: $dropdown-font-size * $line-height-base,
+			line-height: calc(#{$dropdown-font-size} * #{$line-height-base}),
 		),
 		'&.autofit-row': (
 			padding-left: 1rem,

package/src/scss/variables/_forms.scss

@@ -142,6 +142,27 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
 $input-font-size-lg-mobile: null !default;
 $input-height-lg-mobile: null !default;
 
+$input-lg: () !default;
+$input-lg: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($input-border-radius-lg),
+		font-size: $input-font-size-lg,
+		height: $input-height-lg,
+		line-height: $input-line-height-lg,
+		padding-bottom: $input-padding-y-lg,
+		padding-left: $input-padding-x-lg,
+		padding-right: $input-padding-x-lg,
+		padding-top: $input-padding-y-lg,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $input-font-size-lg-mobile,
+				height: $input-height-lg-mobile,
+			),
+		),
+	),
+	$input-lg
+);
+
 // Input Sm (.form-control-sm)
 
 $input-border-radius-sm: $border-radius-sm !default;
@@ -154,6 +175,26 @@ $input-padding-y-sm: $input-btn-padding-y-sm !default;
 $input-font-size-sm-mobile: null !default;
 $input-height-sm-mobile: null !default;
 
+$input-sm: () !default;
+$input-sm: map-deep-merge(
+	(
+		border-radius: clay-enable-rounded($input-border-radius-sm),
+		font-size: $input-font-size-sm,
+		height: $input-height-sm,
+		line-height: $input-line-height-sm,
+		padding-bottom: $input-padding-y-sm,
+		padding-left: $input-padding-x-sm,
+		padding-right: $input-padding-x-sm,
+		padding-top: $input-padding-y-sm,
+		media-breakpoint-down: (
+			sm: (
+				height: $input-height-sm-mobile,
+			),
+		),
+	),
+	$input-sm
+);
+
 // Input Label (<label>)
 
 $input-label-color: null !default;
@@ -300,10 +341,43 @@ $input-plaintext-readonly: map-deep-merge(
 	$input-plaintext-readonly
 );
 
+// textarea.form-control, textarea.form-control-plaintext, .form-control.form-control-textarea
+
 $input-textarea-height: 150px !default;
+
+$input-textarea: () !default;
+$input-textarea: map-merge(
+	(
+		height: $input-textarea-height,
+		resize: vertical,
+	),
+	$input-textarea
+);
+
+// textarea.form-control-lg, .form-control-lg.form-control-textarea
+
 $input-textarea-height-lg: 190px !default;
+
+$input-textarea-lg: () !default;
+$input-textarea-lg: map-deep-merge(
+	(
+		height: $input-textarea-height-lg,
+	),
+	$input-textarea-lg
+);
+
+// textarea.form-control-sm, .form-control-sm.form-control-textarea
+
 $input-textarea-height-sm: 120px !default;
 
+$input-textarea-sm: () !default;
+$input-textarea-sm: map-deep-merge(
+	(
+		height: $input-textarea-height-sm,
+	),
+	$input-textarea-sm
+);
+
 // Form Control Label (Labels inside Form Control Tag Group)
 
 $form-control-label-size: () !default;

package/src/scss/variables/_globals.scss

@@ -350,9 +350,27 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
 
 $font-family-base: $font-family-sans-serif !default;
 
-$font-size-base: 1rem !default;
-$font-size-lg: $font-size-base * 1.25 !default;
-$font-size-sm: $font-size-base * 0.875 !default;
+$font-scale: () !default;
+$font-scale: map-merge(
+	(
+		1: 0.625rem,
+		2: 0.75rem,
+		3: 0.875rem,
+		4: 1rem,
+		5: 1.125rem,
+		6: 1.25rem,
+		7: 1.5rem,
+		8: 1.75rem,
+		9: 2rem,
+		10: 2.25rem,
+		11: 2.5rem,
+	),
+	$font-scale
+);
+
+$font-size-base: map-get($font-scale, 4) !default;
+$font-size-lg: map-get($font-scale, 6) !default;
+$font-size-sm: map-get($font-scale, 3) !default;
 
 $font-size-base-mobile: $font-size-base !default;
 $font-size-lg-mobile: $font-size-lg !default;
@@ -370,7 +388,7 @@ $line-height-base: 1.5 !default;
 
 // h1, .h1
 
-$h1-font-size: $font-size-base * 2.5 !default;
+$h1-font-size: calc(#{$font-size-base} * 2.5) !default;
 $h1-font-size-mobile: null !default;
 
 $h1: () !default;
@@ -388,7 +406,7 @@ $h1: map-deep-merge(
 
 // h2, .h2
 
-$h2-font-size: $font-size-base * 2 !default;
+$h2-font-size: calc(#{$font-size-base} * 2) !default;
 $h2-font-size-mobile: null !default;
 
 $h2: () !default;
@@ -406,7 +424,7 @@ $h2: map-deep-merge(
 
 // h3, .h3
 
-$h3-font-size: $font-size-base * 1.75 !default;
+$h3-font-size: calc(#{$font-size-base} * 1.75) !default;
 $h3-font-size-mobile: null !default;
 
 $h3: () !default;
@@ -424,7 +442,7 @@ $h3: map-deep-merge(
 
 // h4, .h4
 
-$h4-font-size: $font-size-base * 1.5 !default;
+$h4-font-size: calc(#{$font-size-base} * 1.5) !default;
 $h4-font-size-mobile: null !default;
 
 $h4: () !default;
@@ -442,7 +460,7 @@ $h4: map-deep-merge(
 
 // h5, .h5
 
-$h5-font-size: $font-size-base * 1.25 !default;
+$h5-font-size: calc(#{$font-size-base} * 1.25) !default;
 $h5-font-size-mobile: null !default;
 
 $h5: () !default;
@@ -626,7 +644,7 @@ $display-4: map-deep-merge(
 	$display-4
 );
 
-$lead-font-size: $font-size-base * 1.25 !default;
+$lead-font-size: calc(#{$font-size-base} * 1.25) !default;
 $lead-font-weight: 300 !default;
 
 $small-font-size: 80% !default;
@@ -635,7 +653,7 @@ $text-muted: $gray-600 !default;
 
 $blockquote-small-color: $gray-600 !default;
 $blockquote-small-font-size: $small-font-size !default;
-$blockquote-font-size: $font-size-base * 1.25 !default;
+$blockquote-font-size: calc(#{$font-size-base} * 1.25) !default;
 
 $hr-border-color: rgba($black, 0.1) !default;
 $hr-border-width: $border-width !default;