@clayui/css 3.159.0 → 3.161.0

package/src/scss/cadmin/variables/_modals.scss

@@ -6,14 +6,16 @@ $cadmin-modal-backdrop: map-deep-merge(
 	(
 		background-color: $cadmin-modal-backdrop-bg,
 		height: 100vh,
-		left: 0,
+		left: 0px,
 		position: fixed,
-		top: 0,
+		top: 0px,
 		width: 100vw,
 		z-index: $cadmin-zindex-modal-backdrop,
+
 		'&.fade': (
 			opacity: 0,
 		),
+
 		'&.show': (
 			opacity: $cadmin-modal-backdrop-opacity,
 		),
@@ -44,6 +46,7 @@ $cadmin-modal-content-inner-border-radius: calc(
 ) !default;
 
 $cadmin-modal-content-box-shadow-xs: 0 0 3px 1px rgba(0, 0, 0, 0.2) !default;
+
 $cadmin-modal-content-box-shadow-sm-up: 0 8px 16px rgba($cadmin-black, 0.5) !default;
 
 $cadmin-modal-content: () !default;
@@ -86,11 +89,12 @@ $cadmin-modal-header: () !default;
 $cadmin-modal-header: map-deep-merge(
 	(
 		breakpoint-down: sm,
+
 		align-items: center,
 		background-color: $cadmin-modal-header-bg,
 		border-color: $cadmin-modal-header-border-color,
 		border-style: solid,
-		border-width: 0 0 $cadmin-modal-header-border-width 0,
+		border-width: 0px 0px $cadmin-modal-header-border-width 0px,
 		border-top-radius:
 			clay-enable-rounded($cadmin-modal-content-inner-border-radius),
 		color: $cadmin-modal-header-color,
@@ -99,12 +103,14 @@ $cadmin-modal-header: map-deep-merge(
 		height: $cadmin-modal-header-height,
 		justify-content: space-between,
 		padding: $cadmin-modal-header-padding,
-		padding-bottom: 0,
-		padding-top: 0,
+		padding-bottom: 0px,
+		padding-top: 0px,
+
 		'.modal-title': (
-			margin-bottom: 0,
-			margin-top: 0,
+			margin-bottom: 0px,
+			margin-top: 0px,
 		),
+
 		mobile: (
 			height: $cadmin-modal-header-height-mobile,
 		),
@@ -128,22 +134,25 @@ $cadmin-modal-body: map-deep-merge(
 		color: $cadmin-modal-body-color,
 		flex-grow: 1,
 		flex-shrink: 1,
-		margin-top: math-sign($cadmin-modal-content-border-width),
+		margin-top: calc(#{$cadmin-modal-content-border-width} * -1),
 		overflow: auto,
 		overflow-wrap: break-word,
 		padding: $cadmin-modal-inner-padding,
 		position: relative,
+
 		'.aspect-ratio': (
-			margin-left: math-sign($cadmin-modal-inner-padding),
-			margin-right: math-sign($cadmin-modal-inner-padding),
-			top: math-sign($cadmin-modal-inner-padding),
+			margin-left: calc(#{$cadmin-modal-inner-padding} * -1),
+			margin-right: calc(#{$cadmin-modal-inner-padding} * -1),
+			top: calc(#{$cadmin-modal-inner-padding} * -1),
 		),
+
 		'> .close': (
 			position: absolute,
 			right: 1rem,
 			top: 1rem,
 			z-index: 1,
 		),
+
 		'&.inline-scroller': (
 			max-height: none,
 			-webkit-overflow-scrolling: touch,
@@ -190,7 +199,7 @@ $cadmin-modal-item-group: map-deep-merge(
 $cadmin-modal-item-group-first-child: () !default;
 $cadmin-modal-item-group-first-child: map-deep-merge(
 	(
-		padding-left: 0,
+		padding-left: 0px,
 	),
 	$cadmin-modal-item-group-first-child
 );
@@ -198,7 +207,7 @@ $cadmin-modal-item-group-first-child: map-deep-merge(
 $cadmin-modal-item-group-last-child: () !default;
 $cadmin-modal-item-group-last-child: map-deep-merge(
 	(
-		padding-right: 0,
+		padding-right: 0px,
 	),
 	$cadmin-modal-item-group-last-child
 );
@@ -206,8 +215,8 @@ $cadmin-modal-item-group-last-child: map-deep-merge(
 $cadmin-modal-item-group-only-child: () !default;
 $cadmin-modal-item-group-only-child: map-deep-merge(
 	(
-		padding-left: 0,
-		padding-right: 0,
+		padding-left: 0px,
+		padding-right: 0px,
 	),
 	$cadmin-modal-item-group-only-child
 );
@@ -220,9 +229,9 @@ $cadmin-modal-item: map-deep-merge(
 		flex-grow: 1,
 		flex-shrink: 1,
 		max-width: 100%,
-		min-height: 0,
+		min-height: 0px,
 		min-width: 50px,
-		padding: 0,
+		padding: 0px,
 		position: relative,
 		word-wrap: break-word,
 	),
@@ -243,6 +252,7 @@ $cadmin-modal-title-font-size: 20px !default; // 20px
 $cadmin-modal-title-font-weight: $cadmin-font-weight-bold !default;
 $cadmin-modal-title-line-height: $cadmin-headings-line-height !default;
 $cadmin-modal-title-text-align: null !default;
+
 $cadmin-modal-title-font-size-mobile: null !default;
 
 $cadmin-modal-title-indicator-font-size: 14px !default;
@@ -281,24 +291,30 @@ $cadmin-modal-full-screen-spacer-y: $cadmin-modal-full-screen-spacer-x !default;
 
 // Modal Width
 
-$cadmin-modal-xl: 1140px !default;
-$cadmin-modal-lg: 896px !default;
-$cadmin-modal-md: 600px !default;
 $cadmin-modal-sm: 320px !default;
 
+$cadmin-modal-md: 600px !default;
+
+$cadmin-modal-lg: 896px !default;
+
+$cadmin-modal-xl: 1140px !default;
+
 // Modal Height
 
 $cadmin-modal-height-sm: 250px !default;
+
 $cadmin-modal-height-md: 450px !default;
+
 $cadmin-modal-height-lg: 650px !default;
+
 $cadmin-modal-height-xl: 800px !default;
 
 $cadmin-modal-height-full-modal-content: () !default;
 $cadmin-modal-height-full-modal-content: map-merge(
 	(
-		position: absolute,
 		bottom: $cadmin-modal-dialog-margin,
 		left: $cadmin-modal-dialog-margin,
+		position: absolute,
 		right: $cadmin-modal-dialog-margin,
 		top: $cadmin-modal-dialog-margin,
 	),
@@ -323,23 +339,28 @@ $cadmin-modal: map-deep-merge(
 	(
 		display: none,
 		height: 100%,
-		left: 0,
+		left: 0px,
 		outline: 0,
 		overflow: hidden,
 		position: fixed,
-		top: 0,
+		top: 0px,
 		width: 100%,
 		z-index: $cadmin-zindex-modal,
+
 		close: (
 			'&:first-child': (
-				margin-left: math-sign($cadmin-modal-close-spacer-x),
+				margin-left: calc(#{$cadmin-modal-close-spacer-x} * -1),
 			),
+
 			'&:last-child': (
-				margin-right: math-sign($cadmin-modal-close-spacer-x),
+				margin-right: calc(#{$cadmin-modal-close-spacer-x} * -1),
 			),
 		),
+
 		modal-header: $cadmin-modal-header,
+
 		modal-body: $cadmin-modal-body,
+
 		modal-footer: (
 			align-items: center,
 			background-color: $cadmin-modal-footer-bg,
@@ -360,10 +381,12 @@ $cadmin-modal: map-deep-merge(
 			padding-left: $cadmin-modal-footer-padding-x,
 			padding-right: $cadmin-modal-footer-padding-x,
 			padding-top: $cadmin-modal-footer-padding-y,
+
 			'> *': (
-				margin: 0 calc(#{$cadmin-modal-footer-margin-between} * 0.5),
+				margin: 0px calc(#{$cadmin-modal-footer-margin-between} * 0.5),
 			),
 		),
+
 		modal-title: (
 			flex-grow: 1,
 			font-size: $cadmin-modal-title-font-size,
@@ -375,10 +398,12 @@ $cadmin-modal: map-deep-merge(
 			text-align: $cadmin-modal-title-text-align,
 			text-overflow: ellipsis,
 			white-space: nowrap,
+
 			'[tabindex="-1"]': (
 				outline: 0,
 			),
 		),
+
 		modal-title-indicator: (
 			display: inline-block,
 			font-size: $cadmin-modal-title-indicator-font-size,
@@ -386,24 +411,30 @@ $cadmin-modal: map-deep-merge(
 			margin-top: -0.2em,
 			vertical-align: middle,
 		),
+
 		media-breakpoint-down: (
 			sm: (
 				close: (
 					margin-right: -8px,
 				),
+
 				modal-header: (
 					height: 48px,
 					padding: 8px 16px,
 				),
+
 				modal-title: (
 					font-size: 18px,
 				),
+
 				modal-body: (
 					padding: 8px 16px,
 				),
+
 				modal-body-iframe: (
 					padding: 0px,
 				),
+
 				modal-footer: (
 					padding: 8px,
 				),
@@ -424,12 +455,15 @@ $cadmin-modal-success: map-deep-merge(
 			color: $cadmin-success,
 			close: (
 				color: $cadmin-success,
+
 				hover: (
 					color: inherit,
 				),
+
 				focus: (
 					color: inherit,
 				),
+
 				disabled: (
 					color: inherit,
 				),
@@ -448,14 +482,18 @@ $cadmin-modal-info: map-deep-merge(
 			background-color: $cadmin-info-l2,
 			border-color: $cadmin-info-l1,
 			color: $cadmin-info,
+
 			close: (
 				color: $cadmin-info,
+
 				hover: (
 					color: inherit,
 				),
+
 				focus: (
 					color: inherit,
 				),
+
 				disabled: (
 					color: inherit,
 				),
@@ -474,14 +512,18 @@ $cadmin-modal-warning: map-deep-merge(
 			background-color: $cadmin-warning-l2,
 			border-color: $cadmin-warning-l1,
 			color: $cadmin-warning,
+
 			close: (
 				color: $cadmin-warning,
+
 				hover: (
 					color: inherit,
 				),
+
 				focus: (
 					color: inherit,
 				),
+
 				disabled: (
 					color: inherit,
 				),
@@ -500,14 +542,18 @@ $cadmin-modal-danger: map-deep-merge(
 			background-color: $cadmin-danger-l2,
 			border-color: $cadmin-danger-l1,
 			color: $cadmin-danger,
+
 			close: (
 				color: $cadmin-danger,
+
 				hover: (
 					color: inherit,
 				),
+
 				focus: (
 					color: inherit,
 				),
+
 				disabled: (
 					color: inherit,
 				),
@@ -521,8 +567,11 @@ $cadmin-modal-palette: () !default;
 $cadmin-modal-palette: map-deep-merge(
 	(
 		success: $cadmin-modal-success,
+
 		info: $cadmin-modal-info,
+
 		warning: $cadmin-modal-warning,
+
 		danger: $cadmin-modal-danger,
 	),
 	$cadmin-modal-palette

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

@@ -1,20 +1,20 @@
 $cadmin-multi-step-nav-margin-bottom: 15px !default;
 $cadmin-multi-step-nav-padding-x: 15px !default;
-$cadmin-multi-step-nav-padding-y: 0 !default;
+$cadmin-multi-step-nav-padding-y: 0px !default;
 
 $cadmin-multi-step-icon-bg: $cadmin-gray-200 !default;
 $cadmin-multi-step-icon-border-color: null !default;
+$cadmin-multi-step-icon-border-radius: 100px !default;
 $cadmin-multi-step-icon-border-style: null !default;
-$cadmin-multi-step-icon-border-width: 0 !default;
+$cadmin-multi-step-icon-border-width: 0px !default;
 $cadmin-multi-step-icon-color: $cadmin-gray-600 !default;
 $cadmin-multi-step-icon-cursor: $cadmin-link-cursor !default;
-$cadmin-multi-step-icon-border-radius: 100px !default;
 $cadmin-multi-step-icon-font-size: 14px !default;
 $cadmin-multi-step-icon-font-weight: $cadmin-font-weight-semi-bold !default;
-$cadmin-multi-step-icon-padding-bottom: 0 !default;
-$cadmin-multi-step-icon-padding-left: 0 !default;
-$cadmin-multi-step-icon-padding-right: 0 !default;
-$cadmin-multi-step-icon-padding-top: 0 !default;
+$cadmin-multi-step-icon-padding-bottom: 0px !default;
+$cadmin-multi-step-icon-padding-left: 0px !default;
+$cadmin-multi-step-icon-padding-right: 0px !default;
+$cadmin-multi-step-icon-padding-top: 0px !default;
 $cadmin-multi-step-icon-size: 32px !default;
 $cadmin-multi-step-icon-transition: box-shadow 0.15s ease-in-out !default;
 
@@ -30,12 +30,15 @@ $cadmin-multi-step-icon-focus-text-decoration: $cadmin-multi-step-icon-hover-tex
 
 $cadmin-multi-step-divider-bg: $cadmin-gray-200 !default;
 $cadmin-multi-step-divider-height: 4px !default;
-$cadmin-multi-step-divider-spacer-x: 0 !default;
-$cadmin-multi-step-divider-top: ($cadmin-multi-step-divider-height * 0.5) +
-	($cadmin-multi-step-icon-size * 0.5) !default;
+$cadmin-multi-step-divider-spacer-x: 0px !default;
+$cadmin-multi-step-divider-top: calc(
+	#{$cadmin-multi-step-divider-height} * 0.5 + #{$cadmin-multi-step-icon-size} *
+		0.5
+) !default;
 
-$cadmin-multi-step-indicator-width: $cadmin-multi-step-icon-size +
-	($cadmin-multi-step-divider-spacer-x * 2) !default;
+$cadmin-multi-step-indicator-width: calc(
+	#{$cadmin-multi-step-icon-size} + #{$cadmin-multi-step-divider-spacer-x} * 2
+) !default;
 
 $cadmin-multi-step-indicator-label-color: $cadmin-gray-600 !default;
 $cadmin-multi-step-indicator-label-font-size: 14px !default;
@@ -81,26 +84,31 @@ $cadmin-multi-step-title-center: map-deep-merge(
 
 $cadmin-multi-step-item-margin-bottom: 10px !default;
 $cadmin-multi-step-item-width: 75px !default;
+
 $cadmin-multi-step-item-fixed-width: 150px !default;
 
 $cadmin-multi-step-nav-center: () !default;
 $cadmin-multi-step-nav-center: map-deep-merge(
 	(
-		padding: 0,
+		padding: 0px,
 		text-align: center,
+
 		multi-step-item: (
 			flex-grow: 1,
 			width: $cadmin-multi-step-item-width,
 		),
+
 		multi-step-divider: (
 			left: 50%,
 			margin-left: 1rem,
 			width: calc(100% - #{$cadmin-multi-step-icon-size}),
 		),
+
 		multi-step-indicator: (
 			left: 50%,
 			transform: translateX(-50%),
 		),
+
 		multi-step-title: (
 			margin-left: 12.5%,
 			max-width: 75%,
@@ -119,11 +127,13 @@ $cadmin-multi-step-item-error: map-deep-merge(
 			background-image: clay-icon(times, $cadmin-white),
 			color: $cadmin-white,
 			text-indent: -100px,
+
 			data-multi-step-icon: (
 				before: (
 					content: none,
 				),
 			),
+
 			lexicon-icon: (
 				display: none,
 			),
@@ -133,6 +143,7 @@ $cadmin-multi-step-item-error: map-deep-merge(
 );
 
 $cadmin-multi-step-icon-complete-color: $cadmin-white !default;
+
 $cadmin-multi-step-icon-complete-bg: $cadmin-gray-600 !default;
 $cadmin-multi-step-icon-complete-bg-image: clay-icon(
 	check,
@@ -140,7 +151,9 @@ $cadmin-multi-step-icon-complete-bg-image: clay-icon(
 ) !default;
 $cadmin-multi-step-icon-complete-bg-position: center !default;
 $cadmin-multi-step-icon-complete-bg-size: $cadmin-multi-step-icon-font-size !default;
+
 $cadmin-multi-step-divider-complete-bg: $cadmin-multi-step-icon-complete-bg !default;
+
 $cadmin-multi-step-dropdown-indicator-complete-icon: clay-icon(
 	check,
 	$cadmin-dropdown-link-active-color
@@ -148,22 +161,29 @@ $cadmin-multi-step-dropdown-indicator-complete-icon: clay-icon(
 $cadmin-multi-step-dropdown-indicator-complete-width: 14px !default;
 
 $cadmin-multi-step-icon-active-color: $cadmin-component-active-color !default;
+
 $cadmin-multi-step-icon-active-bg: $cadmin-component-active-bg !default;
 $cadmin-multi-step-icon-active-bg-image: null !default;
 $cadmin-multi-step-icon-active-bg-position: center !default;
 $cadmin-multi-step-icon-active-bg-size: $cadmin-multi-step-icon-font-size !default;
+
 $cadmin-multi-step-divider-active-bg: $cadmin-multi-step-divider-bg !default;
 
+$cadmin-multi-step-icon-disabled-color: $cadmin-gray-500 !default;
+
 $cadmin-multi-step-icon-disabled-bg: $cadmin-multi-step-icon-bg !default;
 $cadmin-multi-step-icon-disabled-bg-image: null !default;
 $cadmin-multi-step-icon-disabled-bg-position: null !default;
 $cadmin-multi-step-icon-disabled-bg-size: null !default;
-$cadmin-multi-step-icon-disabled-color: $cadmin-gray-500 !default;
 $cadmin-multi-step-icon-disabled-cursor: $cadmin-disabled-cursor !default;
 $cadmin-multi-step-icon-disabled-opacity: 1 !default;
+
 $cadmin-multi-step-icon-disabled-focus-box-shadow: none !default;
+
 $cadmin-multi-step-divider-disabled-bg: $cadmin-multi-step-icon-disabled-bg !default;
+
 $cadmin-multi-step-title-disabled-color: $cadmin-multi-step-icon-disabled-color !default;
+
 $cadmin-multi-step-indicator-label-disabled-color: $cadmin-multi-step-title-disabled-color !default;
 
 $cadmin-multi-step-title-disabled: () !default;

package/src/scss/cadmin/variables/_navbar.scss

@@ -3,13 +3,13 @@ $cadmin-enable-scaling-navbar: $cadmin-enable-scaling-components !default;
 $cadmin-navbar-border-radius: null !default;
 $cadmin-navbar-font-size: 14px !default; // 14px
 $cadmin-navbar-padding-x: $cadmin-spacer !default;
-$cadmin-navbar-padding-y: $cadmin-spacer * 0.5 !default;
+$cadmin-navbar-padding-y: calc(#{$cadmin-spacer} * 0.5) !default;
 
 $cadmin-navbar-nav-link-padding-x: 8px !default;
 
 $cadmin-navbar-title-font-size: 20px !default; // 20px
 $cadmin-navbar-title-font-weight: $cadmin-font-weight-semi-bold !default;
-$cadmin-navbar-title-margin-bottom: 0 !default;
+$cadmin-navbar-title-margin-bottom: 0px !default;
 $cadmin-navbar-title-text-transform: null !default;
 
 $cadmin-navbar-text-truncate-spacer-right: 25px !default; // 25px
@@ -34,13 +34,17 @@ $cadmin-navbar-brand-font-size: $cadmin-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
 
-$cadmin-nav-link-height: $cadmin-font-size-base * $cadmin-line-height-base +
-	$cadmin-nav-link-padding-y * 2 !default;
-$cadmin-navbar-brand-height: $cadmin-navbar-brand-font-size *
-	$cadmin-line-height-base !default;
-$cadmin-navbar-brand-padding-y: (
-		$cadmin-nav-link-height - $cadmin-navbar-brand-height
-	) * 0.5 !default;
+$cadmin-nav-link-height: calc(
+	#{$cadmin-font-size-base} * #{$cadmin-line-height-base} + #{$cadmin-nav-link-padding-y} *
+		2
+) !default;
+
+$cadmin-navbar-brand-height: calc(
+	#{$cadmin-navbar-brand-font-size} * #{$cadmin-line-height-base}
+) !default;
+$cadmin-navbar-brand-padding-y: calc(
+	(#{$cadmin-nav-link-height} - #{$cadmin-navbar-brand-height}) * 0.5
+) !default;
 
 // Navbar Toggler
 
@@ -63,16 +67,17 @@ $cadmin-navbar-underline: map-deep-merge(
 		navbar-toggler-link: (
 			after: (
 				background-color: $cadmin-navbar-underline-active-bg,
-				bottom: math-sign($cadmin-navbar-padding-y),
+				bottom: calc(#{$cadmin-navbar-padding-y} * -1),
 				content: '',
 				display: block,
 				height: 0.25rem,
-				left: 0,
+				left: 0px,
 				position: absolute,
-				right: 0,
+				right: 0px,
 				width: auto,
 			),
 		),
+
 		media-breakpoint-up: (
 			md: (
 				navbar-expand-md: (
@@ -84,13 +89,15 @@ $cadmin-navbar-underline: map-deep-merge(
 										background-color:
 											$cadmin-navbar-underline-active-bg,
 										bottom:
-											math-sign($cadmin-navbar-padding-y),
+											calc(
+												#{$cadmin-navbar-padding-y} * -1
+											),
 										content: '',
 										display: block,
 										height: 0.25rem,
-										left: 0,
+										left: 0px,
 										position: absolute,
-										right: 0,
+										right: 0px,
 										width: auto,
 									),
 								),