@clayui/css 3.50.0 → 3.51.0

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/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/_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;

package/src/scss/variables/_navbar.scss

@@ -20,10 +20,15 @@ $navbar-text-truncate-max-width: 12.5rem !default; // 200px
 $navbar-brand-font-size: $font-size-lg !default;
 
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
-
-$nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
-$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default;
+// This is a string so we don't get nested calcs in `$navbar-brand-height` and `$navbar-brand-padding-y`
+
+$nav-link-height: '#{$font-size-base} * #{$line-height-base} + #{$nav-link-padding-y} * 2' !default;
+$navbar-brand-height: calc(
+	#{$navbar-brand-font-size} * #{$line-height-base}
+) !default;
+$navbar-brand-padding-y: calc(
+	(#{$nav-link-height} - #{$navbar-brand-height}) * 0.5
+) !default;
 
 // Navbar Toggler
 

package/src/scss/variables/_navs.scss

@@ -59,10 +59,12 @@ $nav-btn-margin-x: 0.25rem !default; // 4px
 
 /// @deprecated after v3.4.0 use the Sass map `$nav-btn` instead
 
-$nav-btn-margin-y: (
-		($line-height-base * $font-size-base) + ($nav-link-padding-y * 2) -
-			$nav-item-monospaced-size
-	) * 0.5 !default;
+$nav-btn-margin-y: calc(
+	(
+			(#{$line-height-base} * #{$font-size-base}) +
+				(#{$nav-link-padding-y} * 2) - #{$nav-item-monospaced-size}
+		) * 0.5
+) !default;
 
 /// @deprecated after v3.4.0 use the Sass map `$nav-btn` instead
 

package/src/scss/variables/_progress-bars.scss

@@ -1,7 +1,7 @@
 $progress-bg: $gray-200 !default;
 $progress-border-radius: $border-radius !default;
 $progress-box-shadow: inset 0 0.1rem 0.1rem rgba($black, 0.1) !default;
-$progress-font-size: $font-size-base * 0.75 !default;
+$progress-font-size: calc(#{$font-size-base} * 0.75) !default;
 $progress-height: 1rem !default;
 $progress-min-width: 6.25rem !default;
 
@@ -15,7 +15,7 @@ $progress-bar-transition: width 0.6s ease !default;
 
 $progress-border-radius-lg: $border-radius !default;
 $progress-font-size-lg: $font-size-lg !default;
-$progress-height-lg: $progress-height * 2 !default;
+$progress-height-lg: calc(#{$progress-height} * 2) !default;
 
 // Progress Group
 

package/src/scss/variables/_utilities.scss

@@ -23,7 +23,7 @@ $autofit-padded-no-gutters-sm: map-merge(
 // Close
 
 $close-color: $black !default;
-$close-font-size: $font-size-base * 1.5 !default;
+$close-font-size: calc(#{$font-size-base} * 1.5) !default;
 $close-font-weight: $font-weight-bold !default;
 $close-text-shadow: 0 1px 0 $white !default;
 
@@ -33,7 +33,7 @@ $close: map-deep-merge(
 		align-items: center,
 		appearance: none,
 		background-color: transparent,
-		border-radius: $btn-border-radius-sm,
+		border-radius: $border-radius-sm,
 		border-width: 0,
 		color: $close-color,
 		cursor: $link-cursor,
@@ -47,7 +47,10 @@ $close: map-deep-merge(
 		padding: 0,
 		text-align: center,
 		text-shadow: $close-text-shadow,
-		transition: $btn-transition,
+		transition: #{color 0.15s ease-in-out,
+		background-color 0.15s ease-in-out,
+		border-color 0.15s ease-in-out,
+		box-shadow 0.15s ease-in-out},
 		width: 2rem,
 		hover: (
 			color: $close-color,
@@ -55,6 +58,8 @@ $close: map-deep-merge(
 			text-decoration: none,
 		),
 		focus: (
+			box-shadow: $input-btn-focus-box-shadow,
+			outline: 0,
 			opacity: 0.75,
 		),
 		disabled: (
@@ -62,13 +67,13 @@ $close: map-deep-merge(
 			cursor: $disabled-cursor,
 			opacity: 0.25,
 			outline: 0,
+			active: (
+				pointer-events: none,
+			),
 		),
-		disabled-active: (
-			pointer-events: none,
+		lexicon-icon: (
+			margin-top: 0,
 		),
-		btn-focus-box-shadow: $input-btn-focus-box-shadow,
-		btn-focus-outline: 0,
-		lexicon-icon-margin-top: 0,
 	),
 	$close
 );
@@ -311,37 +316,37 @@ $font-sizes: () !default;
 $font-sizes: map-deep-merge(
 	(
 		text-1: (
-			font-size: 0.625rem,
+			font-size: map-get($font-scale, 1),
 		),
 		text-2: (
-			font-size: 0.75rem,
+			font-size: map-get($font-scale, 2),
 		),
 		text-3: (
-			font-size: 0.875rem,
+			font-size: map-get($font-scale, 3),
 		),
 		text-4: (
-			font-size: 1rem,
+			font-size: map-get($font-scale, 4),
 		),
 		text-5: (
-			font-size: 1.125rem,
+			font-size: map-get($font-scale, 5),
 		),
 		text-6: (
-			font-size: 1.25rem,
+			font-size: map-get($font-scale, 6),
 		),
 		text-7: (
-			font-size: 1.5rem,
+			font-size: map-get($font-scale, 7),
 		),
 		text-8: (
-			font-size: 1.75rem,
+			font-size: map-get($font-scale, 8),
 		),
 		text-9: (
-			font-size: 2rem,
+			font-size: map-get($font-scale, 9),
 		),
 		text-10: (
-			font-size: 2.25rem,
+			font-size: map-get($font-scale, 10),
 		),
 		text-11: (
-			font-size: 2.5rem,
+			font-size: map-get($font-scale, 11),
 		),
 	),
 	$font-sizes