@clayui/css 3.159.0 → 3.161.0

package/src/scss/variables/_modals.scss

@@ -6,14 +6,16 @@ $modal-backdrop: map-deep-merge(
 	(
 		background-color: $modal-backdrop-bg,
 		height: 100vh,
-		left: 0,
+		left: 0rem,
 		position: fixed,
-		top: 0,
+		top: 0rem,
 		width: 100vw,
 		z-index: $zindex-modal-backdrop,
+
 		'&.fade': (
 			opacity: 0,
 		),
+
 		'&.show': (
 			opacity: $modal-backdrop-opacity,
 		),
@@ -36,14 +38,15 @@ $modal-transition: transform 0.3s ease-out !default;
 $modal-content-bg: $white !default;
 $modal-content-color: null !default;
 $modal-content-border-color: rgba($black, 0.2) !default;
+$modal-content-border-radius: $border-radius-lg !default;
 $modal-content-border-width: $border-width !default;
 
-$modal-content-border-radius: $border-radius-lg !default;
 $modal-content-inner-border-radius: calc(
 	#{$modal-content-border-radius} - #{$modal-content-border-width}
 ) !default;
 
 $modal-content-box-shadow-xs: 0 0.25rem 0.5rem rgba($black, 0.5) !default;
+
 $modal-content-box-shadow-sm-up: 0 0.5rem 1rem rgba($black, 0.5) !default;
 
 $modal-content: () !default;
@@ -85,26 +88,29 @@ $modal-header: () !default;
 $modal-header: map-deep-merge(
 	(
 		breakpoint-down: sm,
+
 		align-items: center,
 		background-color: $modal-header-bg,
 		border-color: $modal-header-border-color,
 		border-style: solid,
-		border-width: 0 0 $modal-header-border-width 0,
 		border-top-radius:
 			clay-enable-rounded($modal-content-inner-border-radius),
+		border-width: 0px 0px $modal-header-border-width 0px,
 		color: $modal-header-color,
 		display: flex,
 		flex-shrink: 0,
 		height: $modal-header-height,
 		justify-content: space-between,
 		padding: $modal-header-padding,
-		padding-bottom: 0,
-		padding-top: 0,
+		padding-bottom: 0rem,
+		padding-top: 0rem,
 		z-index: 1,
+
 		'.modal-title': (
-			margin-bottom: 0,
-			margin-top: 0,
+			margin-bottom: 0rem,
+			margin-top: 0rem,
 		),
+
 		mobile: (
 			height: $modal-header-height-mobile,
 		),
@@ -127,22 +133,25 @@ $modal-body: map-deep-merge(
 		color: $modal-body-color,
 		flex-grow: 1,
 		flex-shrink: 1,
-		margin-top: math-sign($modal-content-border-width),
+		margin-top: calc(#{$modal-content-border-width} * -1),
 		overflow: auto,
 		overflow-wrap: break-word,
 		padding: $modal-inner-padding,
 		position: relative,
+
 		'&.inline-scroller': (
 			max-height: none,
 			-webkit-overflow-scrolling: touch,
 			overflow: auto,
 			padding: $modal-inner-padding,
 		),
+
 		'.modal-banner-img': (
-			margin-left: math-sign($modal-inner-padding),
-			margin-right: math-sign($modal-inner-padding),
-			top: math-sign($modal-inner-padding),
+			margin-left: calc(#{$modal-inner-padding} * -1),
+			margin-right: calc(#{$modal-inner-padding} * -1),
+			top: calc(#{$modal-inner-padding} * -1),
 		),
+
 		'> .close': (
 			position: absolute,
 			right: 1rem,
@@ -160,7 +169,6 @@ $modal-footer-margin-between: 0.5rem !default;
 $modal-footer-bg: null !default;
 $modal-footer-border-color: $modal-header-border-color !default;
 $modal-footer-border-width: $modal-header-border-width !default;
-
 $modal-footer-box-shadow: null !default;
 $modal-footer-color: null !default;
 $modal-footer-height: null !default;
@@ -189,7 +197,7 @@ $modal-item-group: map-deep-merge(
 $modal-item-group-first-child: () !default;
 $modal-item-group-first-child: map-deep-merge(
 	(
-		padding-left: 0,
+		padding-left: 0rem,
 	),
 	$modal-item-group-first-child
 );
@@ -197,7 +205,7 @@ $modal-item-group-first-child: map-deep-merge(
 $modal-item-group-last-child: () !default;
 $modal-item-group-last-child: map-deep-merge(
 	(
-		padding-right: 0,
+		padding-right: 0rem,
 	),
 	$modal-item-group-last-child
 );
@@ -205,8 +213,8 @@ $modal-item-group-last-child: map-deep-merge(
 $modal-item-group-only-child: () !default;
 $modal-item-group-only-child: map-deep-merge(
 	(
-		padding-left: 0,
-		padding-right: 0,
+		padding-left: 0rem,
+		padding-right: 0rem,
 	),
 	$modal-item-group-only-child
 );
@@ -219,9 +227,9 @@ $modal-item: map-deep-merge(
 		flex-grow: 1,
 		flex-shrink: 1,
 		max-width: 100%,
-		min-height: 0,
+		min-height: 0rem,
 		min-width: 3.125rem,
-		padding: 0,
+		padding: 0rem,
 		position: relative,
 		word-wrap: break-word,
 	),
@@ -242,6 +250,7 @@ $modal-title-font-size: 1.25rem !default;
 $modal-title-font-weight: $font-weight-semi-bold !default;
 $modal-title-line-height: $headings-line-height !default;
 $modal-title-text-align: null !default;
+
 $modal-title-font-size-mobile: null !default;
 
 $modal-title-indicator-font-size: 0.875rem !default;
@@ -281,15 +290,21 @@ $modal-full-screen-spacer-y: $modal-full-screen-spacer-x !default;
 // Modal Width
 
 $modal-xl: 1140px !default;
+
 $modal-lg: 800px !default;
+
 $modal-md: 500px !default;
+
 $modal-sm: 300px !default;
 
 // Modal Height
 
 $modal-height-sm: 250px !default;
+
 $modal-height-md: 450px !default;
+
 $modal-height-lg: 650px !default;
+
 $modal-height-xl: 800px !default;
 
 $modal-height-full-modal-content: () !default;
@@ -322,23 +337,28 @@ $modal: map-deep-merge(
 	(
 		display: none,
 		height: 100%,
-		left: 0,
+		left: 0rem,
 		outline: 0,
 		overflow: hidden,
 		position: fixed,
-		top: 0,
+		top: 0rem,
 		width: 100%,
 		z-index: $zindex-modal,
+
 		close: (
 			'&:first-child': (
-				margin-left: math-sign($modal-close-spacer-x),
+				margin-left: calc(#{$modal-close-spacer-x} * -1),
 			),
+
 			'&:last-child': (
-				margin-right: math-sign($modal-close-spacer-x),
+				margin-right: calc(#{$modal-close-spacer-x} * -1),
 			),
 		),
+
 		modal-header: $modal-header,
+
 		modal-body: $modal-body,
+
 		modal-footer: (
 			align-items: center,
 			background-color: $modal-footer-bg,
@@ -359,10 +379,12 @@ $modal: map-deep-merge(
 			padding-left: $modal-footer-padding-x,
 			padding-right: $modal-footer-padding-x,
 			padding-top: $modal-footer-padding-y,
+
 			'> *': (
-				margin: 0 calc(#{$modal-footer-margin-between} * 0.5),
+				margin: 0rem calc(#{$modal-footer-margin-between} * 0.5),
 			),
 		),
+
 		modal-title: (
 			flex-grow: 1,
 			font-size: $modal-title-font-size,
@@ -374,10 +396,12 @@ $modal: map-deep-merge(
 			text-align: $modal-title-text-align,
 			text-overflow: ellipsis,
 			white-space: nowrap,
+
 			'[tabindex="-1"]': (
 				outline: 0,
 			),
 		),
+
 		modal-title-indicator: (
 			display: inline-block,
 			font-size: $modal-title-indicator-font-size,
@@ -385,24 +409,30 @@ $modal: map-deep-merge(
 			margin-top: -0.2em,
 			vertical-align: middle,
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				close: (
 					margin-right: -0.5rem,
 				),
+
 				modal-header: (
 					height: 3rem,
 					padding: 0.5rem 1rem,
 				),
+
 				modal-title: (
 					font-size: 1.125rem,
 				),
+
 				modal-body: (
 					padding: 0.5rem 1rem,
 				),
+
 				modal-body-iframe: (
-					padding: 0,
+					padding: 0rem,
 				),
+
 				modal-footer: (
 					padding: 0.5rem,
 				),
@@ -426,9 +456,11 @@ $modal-success: map-deep-merge(
 				hover: (
 					color: inherit,
 				),
+
 				focus: (
 					color: inherit,
 				),
+
 				disabled: (
 					color: inherit,
 				),
@@ -452,9 +484,11 @@ $modal-info: map-deep-merge(
 				hover: (
 					color: inherit,
 				),
+
 				focus: (
 					color: inherit,
 				),
+
 				disabled: (
 					color: inherit,
 				),
@@ -478,9 +512,11 @@ $modal-warning: map-deep-merge(
 				hover: (
 					color: inherit,
 				),
+
 				focus: (
 					color: inherit,
 				),
+
 				disabled: (
 					color: inherit,
 				),
@@ -504,9 +540,11 @@ $modal-danger: map-deep-merge(
 				hover: (
 					color: inherit,
 				),
+
 				focus: (
 					color: inherit,
 				),
+
 				disabled: (
 					color: inherit,
 				),
@@ -520,8 +558,11 @@ $modal-palette: () !default;
 $modal-palette: map-deep-merge(
 	(
 		success: $modal-success,
+
 		info: $modal-info,
+
 		warning: $modal-warning,
+
 		danger: $modal-danger,
 	),
 	$modal-palette

package/src/scss/variables/_multi-step-nav.scss

@@ -1,6 +1,6 @@
 $multi-step-nav-margin-bottom: 15px !default;
 $multi-step-nav-padding-x: 15px !default;
-$multi-step-nav-padding-y: 0 !default;
+$multi-step-nav-padding-y: 0px !default;
 
 $multi-step-icon-bg: $gray-200 !default;
 $multi-step-icon-border-color: null !default;
@@ -11,10 +11,10 @@ $multi-step-icon-cursor: $link-cursor !default;
 $multi-step-icon-border-radius: $border-radius !default;
 $multi-step-icon-font-size: $font-size-base !default;
 $multi-step-icon-font-weight: null !default;
-$multi-step-icon-padding-bottom: 0 !default;
-$multi-step-icon-padding-left: 0 !default;
-$multi-step-icon-padding-right: 0 !default;
-$multi-step-icon-padding-top: 0 !default;
+$multi-step-icon-padding-bottom: 0px !default;
+$multi-step-icon-padding-left: 0px !default;
+$multi-step-icon-padding-right: 0px !default;
+$multi-step-icon-padding-top: 0px !default;
 $multi-step-icon-size: 2rem !default;
 $multi-step-icon-transition: box-shadow 0.15s ease-in-out !default;
 
@@ -36,14 +36,16 @@ $data-multi-step-icon-before-content: unquote(
 
 $multi-step-divider-bg: $gray-200 !default;
 $multi-step-divider-height: 0.25rem !default;
-$multi-step-divider-spacer-x: 0 !default;
-$multi-step-divider-top: ($multi-step-divider-height * 0.5) +
-	($multi-step-icon-size * 0.5) !default;
+$multi-step-divider-spacer-x: 0rem !default;
+$multi-step-divider-top: calc(
+	#{$multi-step-divider-height} * 0.5 + #{$multi-step-icon-size} * 0.5
+) !default;
 
 // Multi Step Indicator
 
-$multi-step-indicator-width: $multi-step-icon-size +
-	($multi-step-divider-spacer-x * 2) !default;
+$multi-step-indicator-width: calc(
+	#{$multi-step-icon-size} + #{$multi-step-divider-spacer-x} * 2
+) !default;
 
 $multi-step-indicator-label-color: null !default;
 $multi-step-indicator-label-font-size: $font-size-base !default;
@@ -55,6 +57,7 @@ $multi-step-indicator: map-deep-merge(
 	(
 		position: relative,
 		width: $multi-step-indicator-width,
+
 		multi-step-indicator-label: (
 			color: $multi-step-indicator-label-color,
 			font-size: $multi-step-indicator-label-font-size,
@@ -99,21 +102,25 @@ $multi-step-item-fixed-width: 150px !default;
 $multi-step-nav-center: () !default;
 $multi-step-nav-center: map-deep-merge(
 	(
-		padding: 0,
+		padding: 0rem,
 		text-align: center,
+
 		multi-step-item: (
 			flex-grow: 1,
 			width: $multi-step-item-width,
 		),
+
 		multi-step-divider: (
 			left: 50%,
 			margin-left: 1rem,
 			width: calc(100% - #{$multi-step-icon-size}),
 		),
+
 		multi-step-indicator: (
 			left: 50%,
 			transform: translateX(-50%),
 		),
+
 		multi-step-title: (
 			margin-left: 12.5%,
 			max-width: 75%,
@@ -149,11 +156,13 @@ $multi-step-item-error: map-deep-merge(
 			background-color: $danger,
 			background-image: clay-icon(times, $white),
 			color: $white,
+
 			data-multi-step-icon: (
 				before: (
 					content: none,
 				),
 			),
+
 			lexicon-icon: (
 				display: none,
 			),
@@ -163,6 +172,7 @@ $multi-step-item-error: map-deep-merge(
 );
 
 $multi-step-icon-complete-color: $white !default;
+
 $multi-step-icon-complete-bg: $gray-600 !default;
 $multi-step-icon-complete-bg-image: clay-icon(
 	check,
@@ -170,7 +180,9 @@ $multi-step-icon-complete-bg-image: clay-icon(
 ) !default;
 $multi-step-icon-complete-bg-position: center !default;
 $multi-step-icon-complete-bg-size: $multi-step-icon-font-size !default;
+
 $multi-step-divider-complete-bg: $multi-step-icon-complete-bg !default;
+
 $multi-step-dropdown-indicator-complete-icon: clay-icon(
 	check,
 	if(
@@ -182,10 +194,12 @@ $multi-step-dropdown-indicator-complete-icon: clay-icon(
 $multi-step-dropdown-indicator-complete-width: 0.875rem !default;
 
 $multi-step-icon-active-color: $component-active-color !default;
+
 $multi-step-icon-active-bg: $component-active-bg !default;
 $multi-step-icon-active-bg-image: null !default;
 $multi-step-icon-active-bg-position: center !default;
 $multi-step-icon-active-bg-size: $multi-step-icon-font-size !default;
+
 $multi-step-divider-active-bg: $multi-step-divider-bg !default;
 
 $multi-step-icon-disabled-bg: $gray-100 !default;
@@ -195,9 +209,13 @@ $multi-step-icon-disabled-bg-size: null !default;
 $multi-step-icon-disabled-color: $gray-400 !default;
 $multi-step-icon-disabled-cursor: $disabled-cursor !default;
 $multi-step-icon-disabled-opacity: 1 !default;
+
 $multi-step-icon-disabled-focus-box-shadow: none !default;
+
 $multi-step-divider-disabled-bg: $multi-step-icon-disabled-bg !default;
+
 $multi-step-title-disabled-color: $multi-step-icon-disabled-color !default;
+
 $multi-step-indicator-label-disabled-color: $multi-step-title-disabled-color !default;
 
 $multi-step-title-disabled: () !default;

package/src/scss/variables/_navbar.scss

@@ -9,7 +9,7 @@ $navbar-nav-link-padding-x: 0.5rem !default;
 
 $navbar-title-font-size: 1.25rem !default; // 20px
 $navbar-title-font-weight: $font-weight-semi-bold !default;
-$navbar-title-margin-bottom: 0 !default;
+$navbar-title-margin-bottom: 0rem !default;
 $navbar-title-text-transform: null !default;
 
 $navbar-text-truncate-spacer-right: 1.5625rem !default; // 25px
@@ -36,7 +36,10 @@ $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
 // 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;
+$nav-link-height: calc(
+	#{$font-size-base} * #{$line-height-base} + #{$nav-link-padding-y} * 2
+) !default;
+
 $navbar-brand-height: calc(
 	#{$navbar-brand-font-size} * #{$line-height-base}
 ) !default;
@@ -62,16 +65,17 @@ $navbar-underline: map-deep-merge(
 		navbar-toggler-link: (
 			after: (
 				background-color: $navbar-underline-active-bg,
-				bottom: math-sign($navbar-padding-y),
+				bottom: calc(#{$navbar-padding-y} * -1),
 				content: '',
 				display: block,
 				height: 0.1875rem,
-				left: 0,
+				left: 0rem,
 				position: absolute,
-				right: 0,
+				right: 0rem,
 				width: auto,
 			),
 		),
+
 		media-breakpoint-up: (
 			md: (
 				navbar-expand-md: (
@@ -82,13 +86,13 @@ $navbar-underline: map-deep-merge(
 									after: (
 										background-color:
 											$navbar-underline-active-bg,
-										bottom: math-sign($navbar-padding-y),
+										bottom: calc(#{$navbar-padding-y} * -1),
 										content: '',
 										display: block,
 										height: 0.1875rem,
-										left: 0,
+										left: 0rem,
 										position: absolute,
-										right: 0,
+										right: 0rem,
 										width: auto,
 									),
 								),
@@ -117,6 +121,7 @@ $navbar-dark-brand-color: $navbar-dark-active-color !default;
 $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
 
 $navbar-dark-toggler-border-color: rgba($white, 0.1) !default;
+
 $navbar-dark-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-dark-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;
 
 // Navbar Light
@@ -134,4 +139,5 @@ $navbar-light-brand-color: $navbar-light-active-color !default;
 $navbar-light-brand-hover-color: $navbar-light-active-color !default;
 
 $navbar-light-toggler-border-color: rgba($black, 0.1) !default;
+
 $navbar-light-toggler-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'><path stroke='#{$navbar-light-color}' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>") !default;

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

@@ -2,16 +2,22 @@ $navigation-bar-size: () !default;
 $navigation-bar-size: map-deep-merge(
 	(
 		scaling-navbar: false,
+
 		border-bottom-width: 0.0625rem,
 		font-size:
 			if(variable-exists(navbar-font-size), $navbar-font-size, null),
 		height: 3rem,
-		padding-x: 0,
-		padding-y: 0,
+		padding-x: 0rem,
+		padding-y: 0rem,
+
 		link-padding-x: 1rem,
+
 		collapse-dropdown-item-padding-x-mobile: 1rem,
+
 		collapse-dropdown-item-padding-y-mobile: 0.71875rem,
-		nav-item-dropdown-margin-top: 0,
+
+		nav-item-dropdown-margin-top: 0rem,
+
 		active-border-bottom-width: 0.25rem,
 	),
 	$navigation-bar-size
@@ -22,12 +28,14 @@ $navigation-bar-base: map-deep-merge(
 	(
 		border-color: transparent,
 		border-style: solid,
+
 		navbar-nav: (
 			nav-link: (
-				border-width: 0,
+				border-width: 0rem,
 				font-size: inherit,
 			),
 		),
+
 		media-breakpoint-down: (),
 		media-breakpoint-up: (),
 	),
@@ -38,6 +46,7 @@ $navigation-bar-light: () !default;
 $navigation-bar-light: map-deep-merge(
 	(
 		background-color: $light,
+
 		navbar-nav: (
 			nav-link: (
 				color:
@@ -54,6 +63,7 @@ $navigation-bar-light: map-deep-merge(
 							rgba($black, 0.7)
 						),
 				),
+
 				active: (
 					color:
 						if(
@@ -62,6 +72,7 @@ $navigation-bar-light: map-deep-merge(
 							rgba($black, 0.9)
 						),
 				),
+
 				disabled: (
 					color:
 						if(
@@ -73,6 +84,7 @@ $navigation-bar-light: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				navbar-expand-md: (
@@ -95,6 +107,7 @@ $navigation-bar-light: map-deep-merge(
 											rgba($black, 0.7)
 										),
 								),
+
 								active: (
 									color:
 										if(
@@ -105,6 +118,7 @@ $navigation-bar-light: map-deep-merge(
 											rgba($black, 0.9)
 										),
 								),
+
 								disabled: (
 									color:
 										if(
@@ -122,6 +136,7 @@ $navigation-bar-light: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-up: (
 			md: (
 				navbar-expand-md: (
@@ -148,15 +163,18 @@ $navigation-bar-secondary: map-deep-merge(
 	(
 		background-color: $secondary,
 		color: $white,
+
 		navbar-nav: (
 			nav-link: (
 				color: rgba(255, 255, 255, 0.65),
 				hover: (
 					color: rgba(255, 255, 255, 0.9),
 				),
+
 				active: (
 					color: rgba(255, 255, 255, 0.9),
 				),
+
 				disabled: (
 					color: rgba(255, 255, 255, 0.25),
 					opacity: 1,
@@ -169,6 +187,7 @@ $navigation-bar-secondary: map-deep-merge(
 				color: rgba(255, 255, 255, 0.9),
 			),
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				navbar-expand-md: (
@@ -179,9 +198,11 @@ $navigation-bar-secondary: map-deep-merge(
 								hover: (
 									color: rgba(255, 255, 255, 0.9),
 								),
+
 								active: (
 									color: rgba(255, 255, 255, 0.9),
 								),
+
 								disabled: (
 									color: rgba(255, 255, 255, 0.25),
 									opacity: 1,
@@ -192,6 +213,7 @@ $navigation-bar-secondary: map-deep-merge(
 				),
 			),
 		),
+
 		media-breakpoint-up: (),
 	),
 	$navigation-bar-secondary