@clayui/css 3.158.0 → 3.160.0

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

@@ -33,11 +33,13 @@ $progress-group-addon: map-deep-merge(
 		margin-right: $progress-group-addon-spacer-x,
 		min-width: 2rem,
 		text-align: center,
+
 		first-child: (
-			padding-left: 0,
+			padding-left: 0rem,
 		),
+
 		last-child: (
-			padding-right: 0,
+			padding-right: 0rem,
 		),
 	),
 	$progress-group-addon
@@ -69,30 +71,37 @@ $progress-palette: map-deep-merge(
 			progress-bar: (
 				background-color: $progress-bar-success-bg,
 			),
+
 			progress-group-feedback: (
 				color: $progress-group-feedback-success-color,
 			),
 		),
+
 		info: (
 			progress-bar: (
 				background-color: $progress-bar-info-bg,
 			),
+
 			progress-group-feedback: (
 				color: $progress-group-feedback-info-color,
 			),
 		),
+
 		warning: (
 			progress-bar: (
 				background-color: $progress-bar-warning-bg,
 			),
+
 			progress-group-feedback: (
 				color: $progress-group-feedback-warning-color,
 			),
 		),
+
 		danger: (
 			progress-bar: (
 				background-color: $progress-bar-danger-bg,
 			),
+
 			progress-group-feedback: (
 				color: $progress-group-feedback-danger-color,
 			),

package/src/scss/variables/_range.scss

@@ -26,10 +26,10 @@ $clay-range-input-group-text: map-merge(
 		font-size: 0.875rem,
 		font-weight: $font-weight-semi-bold,
 		min-width: 1.5rem,
-		padding-bottom: 0,
-		padding-left: 0,
-		padding-right: 0,
-		padding-top: 0,
+		padding-bottom: 0rem,
+		padding-left: 0rem,
+		padding-right: 0rem,
+		padding-top: 0rem,
 	),
 	$clay-range-input-group-text
 );
@@ -56,6 +56,7 @@ $clay-range-input: map-deep-merge(
 		position: relative,
 		vertical-align: middle,
 		width: 100%,
+
 		clay-range-thumb: (
 			background-color: $white,
 			border-radius: 100px,
@@ -68,15 +69,19 @@ $clay-range-input: map-deep-merge(
 			top: 50%,
 			width: 1.5rem,
 		),
+
 		ms-thumb: (
 			visibility: hidden,
 		),
+
 		moz-range-thumb: (
 			visibility: hidden,
 		),
+
 		webkit-slider-thumb: (
 			visibility: hidden,
 		),
+
 		clay-range-track: (
 			appearance: none,
 			background-color: $gray-300,
@@ -87,26 +92,31 @@ $clay-range-input: map-deep-merge(
 			top: 50%,
 			width: 100%,
 		),
+
 		clay-range-progress: (
 			background-color: $primary,
-			border-radius: 100px 0 0 100px,
+			border-radius: 100px 0px 0px 100px,
 			position: absolute,
 			top: 50%,
 			width: 50%,
 		),
+
 		tooltip: (
 			margin-left: 0.8125rem,
 			transition: opacity 0.15s linear,
 			visibility: hidden,
 			white-space: nowrap,
 		),
+
 		tooltip-inner: (
 			padding: 0.25rem 0.5rem,
 		),
+
 		tooltip-arrow: (
 			height: 0.375rem,
 			width: 0.375rem,
 		),
+
 		clay-tooltip-bottom: (
 			margin-top: 0.25rem,
 			padding-top: 0.1875rem,
@@ -116,6 +126,7 @@ $clay-range-input: map-deep-merge(
 				margin-left: -0.25rem,
 			),
 		),
+
 		clay-tooltip-top: (
 			bottom: 100%,
 			margin-bottom: 0.25rem,
@@ -125,37 +136,46 @@ $clay-range-input: map-deep-merge(
 				margin-left: -0.25rem,
 			),
 		),
+
 		form-control-range: (
 			appearance: none,
 			background-color: transparent,
 			height: if(variable-exists(input-height), $input-height, 2.375rem),
-			margin: 0,
-			padding: 0,
+			margin: 0rem,
+			padding: 0rem,
 			position: relative,
 			z-index: $zindex-clay-range-input-form-control,
+
 			hover: (
 				cursor: $link-cursor,
 			),
+
 			focus: (
 				outline: 0,
+
 				clay-range-thumb: (
 					box-shadow: $component-focus-box-shadow,
 				),
 			),
+
 			disabled: (
 				color: $clay-range-disabled-color,
 				cursor: $disabled-cursor,
+
 				clay-range-track: (
 					background-color: $gray-200,
 				),
+
 				clay-range-progress: (
 					background-color: $primary-l2,
 				),
 			),
 		),
+
 		data-label-min-max: (
 			margin-bottom: 1rem,
 		),
+
 		before-after: (
 			font-size: 0.875rem,
 			font-weight: $font-weight-semi-bold,
@@ -163,18 +183,20 @@ $clay-range-input: map-deep-merge(
 			margin-top: 2.5rem,
 			position: absolute,
 			text-align: center,
-			top: 0,
+			top: 0rem,
 			width: 1.5rem,
 		),
+
 		data-label-min: (
 			before: (
 				content: unquote("'\\FEFF' attr(data-label-min)"),
 			),
 		),
+
 		data-label-max: (
 			after: (
 				content: unquote("'\\FEFF' attr(data-label-max)"),
-				right: 0,
+				right: 0rem,
 			),
 		),
 	),
@@ -188,15 +210,19 @@ $clay-range-progress-none: map-deep-merge(
 			ms-thumb: (
 				visibility: visible,
 			),
+
 			moz-range-thumb: (
 				visibility: visible,
 			),
+
 			webkit-slider-thumb: (
 				visibility: visible,
 			),
+
 			clay-range-thumb: (
 				visibility: hidden,
 			),
+
 			clay-range-progress: (
 				visibility: hidden,
 			),

package/src/scss/variables/_reorder.scss

@@ -11,14 +11,15 @@ $clay-reorder: map-deep-merge(
 $clay-reorder-input-inset: () !default;
 $clay-reorder-input-inset: map-deep-merge(
 	(
-		margin-bottom: 0,
-		margin-top: 0,
+		margin-bottom: 0rem,
+		margin-top: 0rem,
 		overflow: auto,
 		padding-bottom:
 			if(variable-exists(input-padding-y), $input-padding-y, 0.375rem),
 		padding-top:
 			if(variable-exists(input-padding-y), $input-padding-y, 0.375rem),
 		width: 100%,
+
 		focus: (
 			background-color: transparent,
 			box-shadow: none,
@@ -30,11 +31,11 @@ $clay-reorder-input-inset: map-deep-merge(
 $clay-reorder-underlay: () !default;
 $clay-reorder-underlay: map-deep-merge(
 	(
-		bottom: 0,
-		left: 0,
+		bottom: 0rem,
+		left: 0rem,
 		position: absolute,
-		right: 0,
-		top: 0,
+		right: 0rem,
+		top: 0rem,
 		z-index: -1,
 	),
 	$clay-reorder-underlay

package/src/scss/variables/_resizer.scss

@@ -2,18 +2,20 @@ $c-horizontal-resizer: () !default;
 $c-horizontal-resizer: map-merge(
 	(
 		background-color: transparent,
-		bottom: 0,
+		bottom: 0rem,
 		cursor: ew-resize,
 		margin-right: -0.25rem,
 		position: absolute,
-		right: 0,
-		top: 0,
+		right: 0rem,
+		top: 0rem,
 		user-select: none,
 		width: 0.5rem,
 		z-index: 10,
+
 		hover: (
 			background-color: $primary-l0,
 		),
+
 		focus: (
 			background-color: $primary-l0,
 		),

package/src/scss/variables/_sheets.scss

@@ -4,11 +4,9 @@
 
 $sheet-bg: $body-bg !default;
 $sheet-border-color: $gray-300 !default;
+$sheet-border-radius: $border-radius !default;
 $sheet-border-style: solid !default;
 $sheet-border-width: 0.0625rem !default; // 1px
-
-$sheet-border-radius: $border-radius !default;
-
 $sheet-padding-bottom: 0.0625rem !default; // 1px
 $sheet-padding-left: 1.5rem !default; // 24px
 $sheet-padding-right: 1.5rem !default; // 24px
@@ -32,12 +30,12 @@ $sheet-plus-sheet: map-merge(
 $sheet-row: () !default;
 $sheet-row: map-merge(
 	(
-		margin-left: math-sign($sheet-padding-left),
-		margin-right: math-sign($sheet-padding-right),
+		margin-left: calc(#{$sheet-padding-left} * -1),
+		margin-right: calc(#{$sheet-padding-right} * -1),
 		media-breakpoint-down: (
 			sm: (
-				margin-left: math-sign($sheet-padding-left-mobile),
-				margin-right: math-sign($sheet-padding-right-mobile),
+				margin-left: calc(#{$sheet-padding-left-mobile} * -1),
+				margin-right: calc(#{$sheet-padding-right-mobile} * -1),
 			),
 		),
 	),
@@ -47,14 +45,17 @@ $sheet-row: map-merge(
 // Sheet Header
 
 $sheet-header-margin-bottom: 3rem !default; // 48px
+
 $sheet-header-margin-bottom-mobile: null !default;
 
 // Sheet Section
 
 $sheet-section-margin-bottom: 3rem !default; // 48px
+
 $sheet-section-margin-bottom-mobile: null !default;
 
 $sheet-panel-group-margin-bottom: 1.5rem !default; // 24px
+
 $sheet-panel-group-margin-bottom-mobile: null !default;
 
 // Sheet Footer
@@ -73,19 +74,23 @@ $sheet-footer-btn-block-sm-down: () !default;
 $sheet-footer-btn-block-sm-down: map-deep-merge(
 	(
 		breakpoint-down: sm,
+
 		mobile: (
 			display: block,
+
 			btn: (
 				display: block,
 				margin-bottom: 1rem,
 				width: 100%,
 			),
+
 			btn-group: (
 				display: block,
 			),
+
 			btn-group-item: (
 				display: block,
-				margin-right: 0,
+				margin-right: 0rem,
 			),
 		),
 	),
@@ -115,7 +120,7 @@ $sheet-title-margin-bottom-mobile: null !default;
 
 $sheet-subtitle-border-color: null !default;
 $sheet-subtitle-border-style: solid !default;
-$sheet-subtitle-border-width: 0 0 1px 0 !default;
+$sheet-subtitle-border-width: 0px 0px 1px 0px !default;
 $sheet-subtitle-color: null !default;
 $sheet-subtitle-font-size: 0.875rem !default; // 14px
 $sheet-subtitle-font-weight: $font-weight-semi-bold !default;
@@ -128,13 +133,14 @@ $sheet-subtitle-text-transform: uppercase !default;
 $sheet-subtitle-font-size-mobile: null !default;
 $sheet-subtitle-margin-bottom-mobile: null !default;
 
-$sheet-subtitle-heading-text-margin-bottom: 0 !default;
+$sheet-subtitle-heading-text-margin-bottom: 0rem !default;
 $sheet-subtitle-heading-text-margin-top: auto !default;
 
 // Sheet Subtitle as Panel Header
 
 $sheet-subtitle-link-color: $sheet-subtitle-color !default;
 $sheet-subtitle-link-text-decoration: null !default;
+
 $sheet-subtitle-link-hover-color: null !default;
 $sheet-subtitle-link-hover-text-decoration: none !default;
 
@@ -143,6 +149,7 @@ $sheet-subtitle-link: map-deep-merge(
 	(
 		color: $sheet-subtitle-link-color,
 		text-decoration: $sheet-subtitle-link-text-decoration,
+
 		hover: (
 			color: $sheet-subtitle-link-hover-color,
 			text-decoration: $sheet-subtitle-link-hover-text-decoration,
@@ -152,6 +159,7 @@ $sheet-subtitle-link: map-deep-merge(
 );
 
 $sheet-subtitle-collapse-icon-font-size: null !default;
+
 $sheet-subtitle-collapse-icon-bottom: null !default;
 $sheet-subtitle-collapse-icon-left: null !default;
 $sheet-subtitle-collapse-icon-right: null !default;
@@ -198,7 +206,7 @@ $sheet-multiple-form-sheet-header: map-merge(
 	(
 		border-color: $gray-300,
 		border-style: solid,
-		border-width: 0 0 1px,
+		border-width: 0px 0px 1px,
 		margin: -1.5rem -1.5rem 1.5rem,
 		padding: 1rem 1.5rem,
 	),
@@ -217,7 +225,7 @@ $sheet-multiple-form-sheet-header-mobile: map-merge(
 $sheet-multiple-form-sheet-title: () !default;
 $sheet-multiple-form-sheet-title: map-merge(
 	(
-		margin-bottom: 0,
+		margin-bottom: 0rem,
 	),
 	$sheet-multiple-form-sheet-title
 );
@@ -248,7 +256,7 @@ $sheet-dataset-content-sheet-header-mobile: map-merge(
 $sheet-dataset-content-sheet-title: () !default;
 $sheet-dataset-content-sheet-title: map-merge(
 	(
-		margin-bottom: 0,
+		margin-bottom: 0rem,
 	),
 	$sheet-dataset-content-sheet-title
 );