@clayui/css 3.158.0 → 3.160.0

package/src/scss/atlas/variables/_menubar.scss

@@ -12,72 +12,85 @@ $menubar-vertical-transparent-md: map-deep-merge(
 			background-color 0.15s ease-in-out,
 			border-color 0.15s ease-in-out,
 			box-shadow 0.15s ease-in-out},
+
 			before: (
-				border-radius: $border-radius 0 0 $border-radius,
-				bottom: 0,
+				border-radius: $border-radius 0rem 0rem $border-radius,
+				bottom: 0rem,
 				content: '',
 				display: block,
-				left: 0,
+				left: 0rem,
 				position: absolute,
-				top: 0,
+				top: 0rem,
 			),
+
 			hover: (
 				background-color: rgba($gray-900, 0.04),
 				color: $gray-900,
 				font-weight: $font-weight-semi-bold,
-				letter-spacing: 0,
+				letter-spacing: 0px,
+
 				before: (
 					background: $secondary-l0,
 					width: 0.1875rem,
 				),
 			),
+
 			focus: (
 				background-color: c-unset,
 				color: $gray-900,
 				outline: 0,
+
 				after: (
 					border-radius: $border-radius,
-					bottom: 0,
+					bottom: 0rem,
 					box-shadow: $component-focus-box-shadow,
 					content: '',
 					display: block,
-					left: 0,
+					left: 0rem,
 					pointer-events: none,
 					position: absolute,
-					right: 0,
-					top: 0,
+					right: 0rem,
+					top: 0rem,
 				),
 			),
+
 			active-class: (
 				background-color: rgba($primary, 0.06),
 				color: $gray-900,
 				font-weight: $font-weight-semi-bold,
-				letter-spacing: 0,
+				letter-spacing: 0rem,
+
 				before: (
 					background-color: $primary-l0,
 					width: 0.25rem,
 				),
 			),
+
 			disabled: (
 				background-color: transparent,
 				box-shadow: none,
 				font-weight: $font-weight-normal,
 				letter-spacing: 0.02rem,
+
 				before: (
 					content: none,
 				),
+
 				after: (
 					content: none,
 				),
 			),
+
 			show: (
 				background-color: c-unset,
 				box-shadow: c-unset,
 				color: $gray-900,
 				font-weight: $font-weight-semi-bold,
+
 				before: (
 					background-color: transparent,
 				),
+
 				hover: (
 					before: (
 						background-color: $secondary-l0,
@@ -86,43 +99,54 @@ $menubar-vertical-transparent-md: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				background-color: $white,
+
 				nav-link: (
-					margin-bottom: 0,
+					margin-bottom: 0rem,
+
 					before: (
 						content: none,
 					),
+
 					hover: (
 						background-color: rgba($gray-900, 0.04),
 						box-shadow: none,
 					),
+
 					focus: (
 						background-color: transparent,
+
 						after: (
 							box-shadow: $component-focus-inset-box-shadow,
 						),
 					),
+
 					active: (
 						background-color: c-unset,
 						color: c-unset,
 					),
+
 					active-class: (
 						background-color: rgba($primary, 0.06),
 						box-shadow: none,
 						color: c-unset,
 					),
 				),
+
 				menubar-toggler: (
 					color: $gray-600,
 					font-size: 0.875rem,
 					font-weight: $font-weight-semi-bold,
 					transition: box-shadow 0.15s ease-in-out,
+
 					focus: (
 						box-shadow: $component-focus-box-shadow,
 						outline: 0,
 					),
+
 					disabled: (
 						box-shadow: clay-enable-shadows(none),
 					),
@@ -146,71 +170,84 @@ $menubar-vertical-transparent-lg: map-deep-merge(
 			background-color 0.15s ease-in-out,
 			border-color 0.15s ease-in-out,
 			box-shadow 0.15s ease-in-out},
+
 			before: (
-				border-radius: $border-radius 0 0 $border-radius,
-				bottom: 0,
+				border-radius: $border-radius 0rem 0rem $border-radius,
+				bottom: 0rem,
 				content: '',
 				display: block,
-				left: 0,
+				left: 0rem,
 				position: absolute,
-				top: 0,
+				top: 0rem,
 			),
+
 			hover: (
 				background-color: rgba($gray-900, 0.04),
 				color: $gray-900,
 				font-weight: $font-weight-semi-bold,
-				letter-spacing: 0,
+				letter-spacing: 0rem,
+
 				before: (
 					background: $secondary-l0,
 					width: 0.1875rem,
 				),
 			),
+
 			focus: (
 				background-color: c-unset,
 				color: $gray-900,
 				outline: 0,
+
 				after: (
 					border-radius: $border-radius,
-					bottom: 0,
+					bottom: 0rem,
 					box-shadow: $component-focus-box-shadow,
 					content: '',
 					display: block,
-					left: 0,
+					left: 0rem,
 					position: absolute,
-					right: 0,
-					top: 0,
+					right: 0rem,
+					top: 0rem,
 				),
 			),
+
 			active-class: (
 				background-color: rgba($primary, 0.06),
 				color: $gray-900,
 				font-weight: $font-weight-semi-bold,
-				letter-spacing: 0,
+				letter-spacing: 0rem,
+
 				before: (
 					background-color: $primary-l0,
 					width: 0.25rem,
 				),
 			),
+
 			disabled: (
 				background-color: transparent,
 				box-shadow: none,
 				font-weight: $font-weight-normal,
 				letter-spacing: 0.02rem,
+
 				before: (
 					content: none,
 				),
+
 				after: (
 					content: none,
 				),
 			),
+
 			show: (
 				background-color: c-unset,
 				box-shadow: c-unset,
 				color: $gray-900,
 				font-weight: $font-weight-semi-bold,
+
 				before: (
 					background-color: transparent,
 				),
+
 				hover: (
 					before: (
 						background-color: $secondary-l0,
@@ -219,44 +256,55 @@ $menubar-vertical-transparent-lg: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-down: (
 			md: (
 				background-color: $white,
+
 				nav-link: (
-					margin-bottom: 0,
+					margin-bottom: 0rem,
+
 					before: (
 						content: none,
 					),
+
 					hover: (
 						background-color: rgba($gray-900, 0.04),
 						box-shadow: none,
 					),
+
 					focus: (
 						background-color: transparent,
+
 						after: (
 							box-shadow: $component-focus-inset-box-shadow,
 						),
 					),
+
 					active: (
 						background-color: c-unset,
 						color: c-unset,
 					),
+
 					active-class: (
 						background-color: rgba($primary, 0.06),
 						box-shadow: none,
 						color: $gray-900,
 					),
 				),
+
 				menubar-toggler: (
 					color: $gray-600,
 					font-size: 0.875rem,
 					font-weight: $font-weight-semi-bold,
 					transition: box-shadow 0.15s ease-in-out,
+
 					focus: (
 						box-shadow:
 							clay-enable-shadows($component-focus-box-shadow),
 						outline: 0,
 					),
+
 					disabled: (
 						box-shadow: clay-enable-shadows(none),
 					),

package/src/scss/atlas/variables/_modals.scss

@@ -38,14 +38,18 @@ $modal-success: map-deep-merge(
 			background-color: $success-l2,
 			border-color: $success-l1,
 			color: $success,
+
 			close: (
 				color: $success,
+
 				hover: (
 					color: inherit,
 				),
+
 				focus: (
 					color: inherit,
 				),
+
 				disabled: (
 					color: inherit,
 				),
@@ -64,14 +68,18 @@ $modal-info: map-deep-merge(
 			background-color: $info-l2,
 			border-color: $info-l1,
 			color: $info,
+
 			close: (
 				color: $info,
+
 				hover: (
 					color: inherit,
 				),
+
 				focus: (
 					color: inherit,
 				),
+
 				disabled: (
 					color: inherit,
 				),
@@ -90,14 +98,18 @@ $modal-warning: map-deep-merge(
 			background-color: $warning-l2,
 			border-color: $warning-l1,
 			color: $warning,
+
 			close: (
 				color: $warning,
+
 				hover: (
 					color: inherit,
 				),
+
 				focus: (
 					color: inherit,
 				),
+
 				disabled: (
 					color: inherit,
 				),
@@ -116,14 +128,18 @@ $modal-danger: map-deep-merge(
 			background-color: $danger-l2,
 			border-color: $danger-l1,
 			color: $danger,
+
 			close: (
 				color: $danger,
+
 				hover: (
 					color: inherit,
 				),
+
 				focus: (
 					color: inherit,
 				),
+
 				disabled: (
 					color: inherit,
 				),

package/src/scss/atlas/variables/_navbar.scss

@@ -13,6 +13,7 @@ $navbar-underline: map-deep-merge(
 				height: 0.125rem,
 			),
 		),
+
 		media-breakpoint-up: (
 			md: (
 				navbar-expand-md: (
@@ -39,13 +40,19 @@ $navbar-underline: map-deep-merge(
 // Navbar Light
 
 $navbar-light-color: $gray-600 !default;
+
 $navbar-light-hover-color: $navbar-light-color !default;
+
 $navbar-light-active-color: $gray-900 !default;
+
 $navbar-light-disabled-color: $nav-link-disabled-color !default;
 
 // Navbar Dark
 
 $navbar-dark-color: $white !default;
+
 $navbar-dark-hover-color: $navbar-dark-color !default;
+
 $navbar-dark-active-color: $navbar-dark-color !default;
+
 $navbar-dark-disabled-color: $nav-link-disabled-color !default;

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

@@ -4,10 +4,12 @@ $navigation-bar-size: map-deep-merge(
 		border-bottom-width: 0.0625rem,
 		collapse-dropdown-item-padding-y-mobile: 0.8125rem,
 		link-height-mobile: 2rem,
+
 		active-border-offset-bottom: -0.53125rem,
+
 		toggler-link-height: 2rem,
 		toggler-link-margin-y: 0.46875rem,
-		toggler-link-padding-y: 0,
+		toggler-link-padding-y: 0rem,
 	),
 	$navigation-bar-size
 );
@@ -19,14 +21,17 @@ $navigation-bar-base: map-deep-merge(
 			nav-link: (
 				border-radius: clay-enable-rounded($border-radius),
 				outline: 0,
+
 				focus: (
 					box-shadow: $component-focus-box-shadow,
 				),
+
 				disabled: (
 					box-shadow: none,
 				),
 			),
 		),
+
 		media-breakpoint-down: (),
 		media-breakpoint-up: (),
 	),
@@ -38,21 +43,26 @@ $navigation-bar-light: map-deep-merge(
 	(
 		background-color: $white,
 		border-color: $gray-200,
+
 		navbar-nav: (
 			nav-link: (
 				font-weight: $font-weight-semi-bold,
+
 				hover: (
 					color: $gray-900,
 				),
+
 				focus: (
 					color: $gray-900,
 				),
+
 				disabled: (
 					color: $gray-600,
 					opacity: $component-disabled-opacity,
 				),
 			),
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				navbar-expand-md: (
@@ -60,15 +70,19 @@ $navigation-bar-light: map-deep-merge(
 						navbar-nav: (
 							dropdown-item: (
 								font-weight: $font-weight-semi-bold,
+
 								hover: (
 									color: $gray-900,
 								),
+
 								focus: (
 									color: $gray-900,
 								),
+
 								active: (
 									color: $gray-900,
 								),
+
 								disabled: (
 									color: $gray-600,
 									opacity: $component-disabled-opacity,
@@ -87,25 +101,31 @@ $navigation-bar-secondary: () !default;
 $navigation-bar-secondary: map-deep-merge(
 	(
 		background-color: $secondary-d1,
+
 		navbar-nav: (
 			nav-link: (
 				color: $secondary-l2,
 				font-weight: $font-weight-semi-bold,
+
 				hover: (
 					color: $white,
 				),
+
 				focus: (
 					color: $white,
 				),
+
 				active: (
 					color: $white,
 				),
+
 				disabled: (
 					color: $gray-400,
 					opacity: $component-disabled-opacity,
 				),
 			),
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				navbar-expand-md: (
@@ -114,15 +134,19 @@ $navigation-bar-secondary: map-deep-merge(
 							dropdown-item: (
 								color: $secondary-l2,
 								font-weight: $font-weight-semi-bold,
+
 								hover: (
 									color: $white,
 								),
+
 								focus: (
 									color: $white,
 								),
+
 								active: (
 									color: $white,
 								),
+
 								disabled: (
 									color: $gray-400,
 									opacity: $component-disabled-opacity,

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

@@ -49,21 +49,24 @@ $nav-tabs-link-active-bg: $white !default;
 $nav-tabs-link-active-border-color: $gray-400 $gray-400 $nav-tabs-link-active-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: $white !default;
 $nav-tabs-link-show-border-color: $gray-400 !default;
+$nav-tabs-link-show-color: $nav-tabs-link-active-color !default;
 
 $nav-tabs-link: () !default;
 $nav-tabs-link: map-deep-merge(
 	(
 		font-weight: $font-weight-semi-bold,
 		transition: box-shadow 0.15s ease-in-out,
+
 		focus: (
 			box-shadow: $component-focus-box-shadow,
 			outline: 0,
 		),
+
 		disabled: (
 			box-shadow: none,
+
 			active: (
 				box-shadow: none,
 			),
@@ -75,7 +78,7 @@ $nav-tabs-link: map-deep-merge(
 // Nav Tabs Tab Pane
 
 $nav-tabs-tab-pane-bg: $white !default;
-$nav-tabs-tab-pane-border-radius: 0 0 4px 4px !default;
+$nav-tabs-tab-pane-border-radius: 0px 0px 4px 4px !default;
 $nav-tabs-tab-pane-padding: 2rem !default;
 
 // .nav-tabs