@clayui/css 3.50.0 → 3.53.0

package/src/scss/variables/_management-bar.scss

@@ -76,8 +76,8 @@ $management-bar-primary: map-deep-merge(
 					color: $navbar-light-active-color,
 				),
 				disabled: (
-					disabled-color: $navbar-light-disabled-color,
-					disabled-opacity: 1,
+					color: $navbar-light-disabled-color,
+					opacity: 1,
 				),
 			),
 		),

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/_popovers.scss

@@ -106,6 +106,27 @@ $popover: map-deep-merge(
 	$popover
 );
 
+// Popovers
+
+$popovers: () !default;
+$popovers: map-deep-merge(
+	(
+		popover: $popover,
+		popover-secondary: (
+			box-shadow: 0 8px 16px 0 rgba($primary, 0.16),
+			popover-header: (
+				background-color: transparent,
+				border-color: transparent,
+				padding-bottom: 0,
+			),
+			close: (
+				color: $gray-600,
+			),
+		),
+	),
+	$popovers
+);
+
 // .popover-header
 
 $popover-header: () !default;
@@ -134,6 +155,16 @@ $popover-header: map-deep-merge(
 	$popover-header
 );
 
+// Popover Headers
+
+$popover-headers: () !default;
+$popover-headers: map-deep-merge(
+	(
+		popover-header: $popover-header,
+	),
+	$popover-headers
+);
+
 // .popover-body
 
 $popover-body: () !default;
@@ -149,6 +180,28 @@ $popover-body: map-merge(
 	$popover-body
 );
 
+// Popover Bodies
+
+$popover-bodies: () !default;
+$popover-bodies: map-deep-merge(
+	(
+		popover-body: $popover-body,
+	),
+	$popover-bodies
+);
+
+// Popover Widths
+
+$popover-widths: () !default;
+$popover-widths: map-deep-merge(
+	(
+		popover-width-lg: (
+			max-width: 421px,
+		),
+	),
+	$popover-widths
+);
+
 // .clay-popover-top, .clay-popover-top-left, .clay-popover-top-right
 
 $clay-popover-top: () !default;

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