@clayui/css 3.158.0 → 3.160.0

package/src/scss/variables/_toggle-switch.scss

@@ -14,14 +14,17 @@ $toggle-switch-transition:
 	right 100ms ease-in !default;
 
 // must all be same units--start
-$toggle-switch-bar-padding: 0 !default; // space between button and bar, can be negative value
+$toggle-switch-bar-padding: 0px !default; // space between button and bar, can be negative value
 $toggle-switch-button-width: 25px !default;
-$toggle-switch-bar-height: ($toggle-switch-bar-padding * 2) +
-	$toggle-switch-button-width !default;
+
+$toggle-switch-bar-height: calc(
+	(#{$toggle-switch-bar-padding} * 2) + #{$toggle-switch-button-width}
+) !default;
 $toggle-switch-bar-width: 50px !default; // width of switch bar
 
 $toggle-switch-bar-padding-mobile: $toggle-switch-bar-padding !default;
 $toggle-switch-button-width-mobile: $toggle-switch-button-width !default;
+
 $toggle-switch-bar-height-mobile: $toggle-switch-bar-height !default;
 $toggle-switch-bar-width-mobile: $toggle-switch-bar-width !default;
 // must all be same units--end
@@ -30,17 +33,22 @@ $toggle-switch-bar-bg: $gray-200 !default;
 $toggle-switch-bar-border-color: $gray-400 !default;
 $toggle-switch-bar-border-radius: 3px !default;
 $toggle-switch-bar-border-width: 1px !default;
-$toggle-switch-bar-focus-box-shadow: $component-focus-box-shadow !default;
 $toggle-switch-bar-font-size: 0.75rem !default; // 12px
+
+$toggle-switch-bar-focus-box-shadow: $component-focus-box-shadow !default;
+
 $toggle-switch-bar-font-size-mobile: $toggle-switch-bar-font-size !default;
+
 $toggle-switch-bar-icon-color: $gray-700 !default;
 
 $toggle-switch-button-bg: $white !default;
 $toggle-switch-button-border-color: $gray-400 !default;
-$toggle-switch-button-border-radius: 3px 0 0 3px !default;
+$toggle-switch-button-border-radius: 3px 0px 0px 3px !default;
 $toggle-switch-button-border-width: 1px !default;
 $toggle-switch-button-font-size: $toggle-switch-bar-font-size !default;
+
 $toggle-switch-button-font-size-mobile: $toggle-switch-button-font-size !default; // null
+
 $toggle-switch-button-icon-color: $gray-700 !default;
 
 // See https://issues.liferay.com/browse/LPS-147457.
@@ -53,11 +61,13 @@ $toggle-switch-handle-after-content: unquote(
 
 $toggle-switch-bar-on-bg: $component-active-bg !default;
 $toggle-switch-bar-on-border-color: $toggle-switch-bar-on-bg !default;
+
 $toggle-switch-bar-on-icon-color: $component-active-color !default;
 
 $toggle-switch-button-on-bg: $white !default;
 $toggle-switch-button-on-border-color: $toggle-switch-bar-on-bg !default;
-$toggle-switch-button-on-border-radius: 0 3px 3px 0 !default;
+$toggle-switch-button-on-border-radius: 0px 3px 3px 0px !default;
+
 $toggle-switch-button-on-icon-color: $toggle-switch-bar-on-bg !default;
 
 // See https://issues.liferay.com/browse/LPS-147457.
@@ -100,12 +110,15 @@ $toggle-switch: map-deep-merge(
 		font-weight: $toggle-switch-font-weight,
 		max-width: 100%,
 		position: relative,
+
 		disabled: (
 			cursor: $toggle-switch-disabled-cursor,
+
 			toggle-switch-label: (
 				color: $toggle-switch-label-disabled-color,
 				cursor: $toggle-switch-disabled-cursor,
 			),
+
 			toggle-switch-text: (
 				color: $toggle-switch-text-disabled-color,
 			),
@@ -135,12 +148,15 @@ $toggle-switch-bar: map-deep-merge(
 			min-width: $toggle-switch-bar-width,
 			text-transform: uppercase,
 		),
+
 		toggle-switch-icon: (
 			font-size: $toggle-switch-bar-font-size,
+
 			lexicon-icon: (
 				margin-top: -0.2em,
 			),
 		),
+
 		button-icon: (
 			font-size: $toggle-switch-button-font-size,
 		),
@@ -154,21 +170,23 @@ $toggle-switch-check: () !default;
 $toggle-switch-check: map-deep-merge(
 	(
 		breakpoint-down: sm,
-		bottom: 0,
+		bottom: 0rem,
 		font-size: 62.5%,
 		height: $toggle-switch-bar-height,
 		opacity: 0,
 		position: absolute,
 		width: $toggle-switch-bar-width,
 		z-index: 2,
+
 		toggle-switch-bar: (
 			display: inline-flex,
 			font-size: $toggle-switch-bar-font-size,
 			height: $toggle-switch-bar-height,
 			line-height: $toggle-switch-bar-height,
 			position: relative,
-			text-indent: 0,
+			text-indent: 0rem,
 			user-select: none,
+
 			before: (
 				background-color: $toggle-switch-bar-bg,
 				border-color: $toggle-switch-bar-border-color,
@@ -176,15 +194,16 @@ $toggle-switch-check: map-deep-merge(
 					clay-enable-rounded($toggle-switch-bar-border-radius),
 				border-style: solid,
 				border-width: $toggle-switch-bar-border-width,
-				bottom: 0,
+				bottom: 0rem,
 				content: ' ',
 				display: block,
-				left: 0,
+				left: 0rem,
 				position: absolute,
-				top: 0,
+				top: 0rem,
 				transition: $toggle-switch-transition,
 				width: $toggle-switch-bar-width,
 			),
+
 			after: (
 				background-color: $toggle-switch-button-bg,
 				border-color: $toggle-switch-button-border-color,
@@ -202,11 +221,13 @@ $toggle-switch-check: map-deep-merge(
 				transition: $toggle-switch-transition,
 				width: $toggle-switch-button-width,
 			),
+
 			toggle-switch-handle: (
 				before: (
 					transition:
 						clay-enable-transitions($toggle-switch-transition),
 				),
+
 				after: (
 					content: $toggle-switch-handle-after-content,
 					margin-left:
@@ -218,33 +239,42 @@ $toggle-switch-check: map-deep-merge(
 					white-space: nowrap,
 				),
 			),
+
 			toggle-switch-icon: (
 				color: $toggle-switch-bar-icon-color,
 				left: $toggle-switch-bar-padding,
 				line-height: $toggle-switch-button-width,
 				position: absolute,
 				text-align: center,
-				text-indent: 0,
+				text-indent: 0rem,
 				top: $toggle-switch-bar-padding,
 				transition: $toggle-switch-transition,
 				width: $toggle-switch-button-width,
 				z-index: 1,
 			),
+
 			toggle-switch-icon-on: (
 				left: $toggle-switch-bar-padding,
 				opacity: 0,
 			),
+
 			toggle-switch-icon-off: (
-				left: $toggle-switch-bar-width - $toggle-switch-bar-padding -
-					$toggle-switch-button-width,
+				left:
+					calc(
+						#{$toggle-switch-bar-width} - #{$toggle-switch-bar-padding} -
+							#{$toggle-switch-button-width}
+					),
 			),
+
 			button-icon: (
 				color: $toggle-switch-button-icon-color,
 			),
+
 			button-icon-on: (
 				opacity: 0,
 			),
 		),
+
 		focus: (
 			toggle-switch-bar: (
 				before: (
@@ -252,12 +282,14 @@ $toggle-switch-check: map-deep-merge(
 				),
 			),
 		),
+
 		disabled: (
 			toggle-switch-bar: (
 				cursor: $toggle-switch-disabled-cursor,
 				opacity: $toggle-switch-disabled-opacity,
 			),
 		),
+
 		checked: (
 			toggle-switch-bar: (
 				before: (
@@ -268,6 +300,7 @@ $toggle-switch-check: map-deep-merge(
 					border-style: solid,
 					border-width: $toggle-switch-bar-border-width,
 				),
+
 				after: (
 					background-color: $toggle-switch-button-on-bg,
 					border-color: $toggle-switch-button-on-border-color,
@@ -277,46 +310,63 @@ $toggle-switch-check: map-deep-merge(
 						),
 					border-style: solid,
 					border-width: $toggle-switch-button-border-width,
-					left: $toggle-switch-bar-width - $toggle-switch-bar-padding -
-						$toggle-switch-button-width,
+					left:
+						calc(
+							#{$toggle-switch-bar-width} - #{$toggle-switch-bar-padding} -
+								#{$toggle-switch-button-width}
+						),
 				),
+
 				toggle-switch-handle: (
 					after: (
 						content: $toggle-switch-handle-on-after-content,
 					),
 				),
+
 				toggle-switch-icon: (
 					color: $toggle-switch-bar-on-icon-color,
 				),
+
 				toggle-switch-icon-on: (
 					opacity: 1,
 				),
+
 				toggle-switch-icon-off: (
 					opacity: 0,
 				),
+
 				button-icon: (
 					color: $toggle-switch-button-on-icon-color,
-					left: $toggle-switch-bar-width - $toggle-switch-bar-padding -
-						$toggle-switch-button-width,
+					left:
+						calc(
+							#{$toggle-switch-bar-width} - #{$toggle-switch-bar-padding} -
+								#{$toggle-switch-button-width}
+						),
 				),
+
 				button-icon-on: (
 					opacity: 1,
 				),
+
 				button-icon-off: (
 					opacity: 0,
 				),
 			),
 		),
+
 		mobile: (
 			height: $toggle-switch-bar-height-mobile,
 			width: $toggle-switch-bar-width-mobile,
+
 			toggle-switch-bar: (
 				height: $toggle-switch-bar-height-mobile,
 				line-height: $toggle-switch-bar-height-mobile,
-				text-indent: 0,
+				text-indent: 0rem,
+
 				before: (
 					width: $toggle-switch-bar-width-mobile,
 				),
+
 				after: (
 					bottom: $toggle-switch-bar-padding-mobile,
 					height: $toggle-switch-button-width-mobile,
@@ -324,8 +374,10 @@ $toggle-switch-check: map-deep-merge(
 					top: $toggle-switch-bar-padding-mobile,
 					width: $toggle-switch-button-width-mobile,
 				),
+
 				toggle-switch-handle: (
 					min-width: $toggle-switch-bar-width-mobile,
+
 					after: (
 						margin-left:
 							clay-data-label-text-position(
@@ -334,6 +386,7 @@ $toggle-switch-check: map-deep-merge(
 							),
 					),
 				),
+
 				toggle-switch-icon: (
 					font-size: $toggle-switch-bar-font-size-mobile,
 					left: $toggle-switch-bar-padding-mobile,
@@ -341,25 +394,34 @@ $toggle-switch-check: map-deep-merge(
 					top: $toggle-switch-bar-padding-mobile,
 					width: $toggle-switch-button-width-mobile,
 				),
+
 				toggle-switch-icon-on: (
 					left: $toggle-switch-bar-padding-mobile,
 				),
+
 				toggle-switch-icon-off: (
-					left: $toggle-switch-bar-width-mobile -
-						$toggle-switch-bar-padding-mobile -
-						$toggle-switch-button-width-mobile,
+					left:
+						calc(
+							#{$toggle-switch-bar-width-mobile} - #{$toggle-switch-bar-padding-mobile} -
+								#{$toggle-switch-button-width-mobile}
+						),
 				),
+
 				button-icon: (
 					font-size: $toggle-switch-button-font-size-mobile,
 				),
 			),
+
 			checked: (
 				toggle-switch-bar: (
 					after: (
-						left: $toggle-switch-bar-width-mobile -
-							$toggle-switch-bar-padding-mobile -
-							$toggle-switch-button-width-mobile,
+						left:
+							calc(
+								#{$toggle-switch-bar-width-mobile} - #{$toggle-switch-bar-padding-mobile} -
+									#{$toggle-switch-button-width-mobile}
+							),
 					),
+
 					toggle-switch-handle: (
 						after: (
 							margin-left:
@@ -369,10 +431,13 @@ $toggle-switch-check: map-deep-merge(
 								),
 						),
 					),
+
 					button-icon: (
-						left: $toggle-switch-bar-width-mobile -
-							$toggle-switch-bar-padding-mobile -
-							$toggle-switch-button-width-mobile,
+						left:
+							calc(
+								#{$toggle-switch-bar-width-mobile} - #{$toggle-switch-bar-padding-mobile} -
+									#{$toggle-switch-button-width-mobile}
+							),
 					),
 				),
 			),
@@ -412,6 +477,7 @@ $toggle-switch-text-left: map-merge(
 		display: inline-flex,
 		line-height: $toggle-switch-bar-height,
 		margin-right: 8px,
+
 		mobile: (
 			line-height: $toggle-switch-bar-height-mobile,
 		),
@@ -428,6 +494,7 @@ $toggle-switch-text-right: map-deep-merge(
 		display: inline-flex,
 		line-height: $toggle-switch-bar-height,
 		margin-left: 8px,
+
 		mobile: (
 			line-height: $toggle-switch-bar-height-mobile,
 		),
@@ -444,11 +511,13 @@ $simple-toggle-switch: () !default;
 $simple-toggle-switch: map-deep-merge(
 	(
 		breakpoint-down: sm,
+
 		align-items: center,
 		display: inline-flex,
+
 		toggle-switch-label: (
 			line-height: $simple-toggle-switch-label-line-height,
-			margin-bottom: 0,
+			margin-bottom: 0rem,
 			max-width:
 				calc(
 					100% - #{clay-data-label-text-position(
@@ -457,6 +526,7 @@ $simple-toggle-switch: map-deep-merge(
 						)}
 				),
 		),
+
 		mobile: (
 			toggle-switch-label: (
 				max-width:
@@ -478,14 +548,17 @@ $simple-toggle-switch-reverse: () !default;
 $simple-toggle-switch-reverse: map-deep-merge(
 	(
 		breakpoint-down: sm,
+
 		toggle-switch-check-bar: (
 			order: 5,
 		),
+
 		toggle-switch-check: (
 			toggle-switch-bar: (
 				order: 5,
 			),
 		),
+
 		toggle-switch-label: (
 			margin-right: $simple-toggle-switch-label-spacer-x,
 		),
@@ -504,47 +577,58 @@ $toggle-switch-sizes: map-deep-merge(
 					max-width: calc(100% - 34px),
 				),
 			),
+
 			toggle-switch-check: (
 				height: 16px,
 				width: 30px,
+
 				toggle-switch-bar: (
 					height: 16px,
 					line-height: 16px,
+
 					before: (
 						width: 30px,
 					),
+
 					after: (
 						height: 16px,
 						width: 16px,
 					),
+
 					toggle-switch-handle: (
 						min-width: 30px,
+
 						after: (
 							margin-left: 34px,
 						),
 					),
+
 					toggle-switch-icon: (
 						font-size: 0.6875rem,
 						height: 16px,
-						left: 0,
+						left: 0rem,
 						line-height: 16px,
 						width: 16px,
 					),
+
 					toggle-switch-icon-off: (
 						left: 14px,
 					),
 				),
+
 				checked: (
 					toggle-switch-bar: (
 						after: (
 							left: 14px,
 						),
+
 						button-icon: (
 							left: 14px,
 						),
 					),
 				),
 			),
+
 			toggle-switch-label: (
 				font-size: 0.75rem,
 				max-width: calc(100% - 38px),

package/src/scss/variables/_tooltip.scss

@@ -3,7 +3,7 @@ $tooltip-border-radius: $border-radius !default;
 $tooltip-box-shadow: null !default;
 $tooltip-color: $white !default;
 $tooltip-font-size: $font-size-sm !default;
-$tooltip-margin: 0 !default;
+$tooltip-margin: 0rem !default;
 $tooltip-max-width: 200px !default;
 $tooltip-opacity: 0.9 !default;
 $tooltip-padding-x: 0.5rem !default;
@@ -46,14 +46,17 @@ $tooltip: map-deep-merge(
 		word-spacing: normal,
 		word-wrap: break-word,
 		z-index: $zindex-tooltip,
+
 		show: (
 			opacity: $tooltip-opacity,
 		),
+
 		arrow: (
 			display: block,
 			height: $tooltip-arrow-height,
 			position: absolute,
 			width: $tooltip-arrow-width,
+
 			before: (
 				border-color: transparent,
 				border-style: solid,
@@ -88,25 +91,25 @@ $clay-tooltip-bottom: () !default;
 $clay-tooltip-bottom: map-deep-merge(
 	(
 		padding-top: $tooltip-arrow-height,
+
 		arrow: (
 			left: 50%,
-			margin-left: math-sign($tooltip-arrow-width * 0.5),
-			top: 0,
+			margin-left: calc(#{$tooltip-arrow-width} * -0.5),
+			top: 0rem,
+
 			before: (
 				border-bottom-color: $tooltip-arrow-color,
-				border-width: 0
-					(
-						$tooltip-arrow-width * 0.5,
-					)
+				border-width: 0rem calc(#{$tooltip-arrow-width} * 0.5)
 					$tooltip-arrow-height,
-				bottom: 0,
+				bottom: 0rem,
 			),
 		),
+
 		tooltip-arrow: (
 			border-bottom-color: transparent,
 			border-right-color: transparent,
 			left: 50%,
-			top: 0,
+			top: 0rem,
 		),
 	),
 	$clay-tooltip-bottom
@@ -119,7 +122,7 @@ $clay-tooltip-bottom-left: map-deep-merge(
 	(
 		arrow: (
 			left: $tooltip-arrow-offset,
-			margin-left: 0,
+			margin-left: 0rem,
 		),
 	),
 	$clay-tooltip-bottom-left
@@ -132,7 +135,7 @@ $clay-tooltip-bottom-right: map-deep-merge(
 	(
 		arrow: (
 			left: auto,
-			margin-left: 0,
+			margin-left: 0rem,
 			right: $tooltip-arrow-offset,
 		),
 	),
@@ -145,29 +148,26 @@ $clay-tooltip-left: () !default;
 $clay-tooltip-left: map-deep-merge(
 	(
 		padding-right: $tooltip-arrow-height,
+
 		arrow: (
 			height: $tooltip-arrow-width,
-			margin-top: math-sign($tooltip-arrow-width * 0.5),
-			right: 0,
+			margin-top: calc(#{$tooltip-arrow-width} * -0.5),
+			right: 0rem,
 			top: 50%,
 			width: $tooltip-arrow-height,
+
 			before: (
 				border-left-color: $tooltip-arrow-color,
-				border-width: (
-					$tooltip-arrow-width * 0.5,
-				)
-				0
-				(
-					$tooltip-arrow-width * 0.5,
-				)
-				$tooltip-arrow-height,
-				left: 0,
+				border-width: calc(#{$tooltip-arrow-width} * 0.5) 0
+					calc(#{$tooltip-arrow-width} * 0.5) $tooltip-arrow-height,
+				left: 0rem,
 			),
 		),
+
 		tooltip-arrow: (
 			border-bottom-color: transparent,
 			border-left-color: transparent,
-			right: 0,
+			right: 0rem,
 			top: 50%,
 		),
 	),
@@ -181,7 +181,7 @@ $clay-tooltip-left-bottom: map-deep-merge(
 	(
 		arrow: (
 			bottom: $tooltip-arrow-offset,
-			margin-top: 0,
+			margin-top: 0rem,
 			top: auto,
 		),
 	),
@@ -194,7 +194,7 @@ $clay-tooltip-left-top: () !default;
 $clay-tooltip-left-top: map-deep-merge(
 	(
 		arrow: (
-			margin-top: 0,
+			margin-top: 0rem,
 			top: $tooltip-arrow-offset,
 		),
 	),
@@ -207,29 +207,27 @@ $clay-tooltip-right: () !default;
 $clay-tooltip-right: map-deep-merge(
 	(
 		padding-left: $tooltip-arrow-height,
+
 		arrow: (
 			height: $tooltip-arrow-width,
-			left: 0,
-			margin-top: math-sign($tooltip-arrow-width * 0.5),
+			left: 0rem,
+			margin-top: calc(#{$tooltip-arrow-width} * -0.5),
 			width: $tooltip-arrow-height,
 			top: 50%,
+
 			before: (
 				border-right-color: $tooltip-arrow-color,
-				border-width: (
-					$tooltip-arrow-width * 0.5,
-				)
-				$tooltip-arrow-height
-				(
-					$tooltip-arrow-width * 0.5,
-				)
-				0,
-				right: 0,
+				border-width: calc(#{$tooltip-arrow-width} * 0.5)
+					$tooltip-arrow-height calc(#{$tooltip-arrow-width} * 0.5)
+					0rem,
+				right: 0rem,
 			),
 		),
+
 		tooltip-arrow: (
 			border-right-color: transparent,
 			border-top-color: transparent,
-			left: 0,
+			left: 0rem,
 			top: 50%,
 		),
 	),
@@ -243,7 +241,7 @@ $clay-tooltip-right-bottom: map-deep-merge(
 	(
 		arrow: (
 			bottom: $tooltip-arrow-offset,
-			margin-top: 0,
+			margin-top: 0rem,
 			top: auto,
 		),
 	),
@@ -256,7 +254,7 @@ $clay-tooltip-right-top: () !default;
 $clay-tooltip-right-top: map-deep-merge(
 	(
 		arrow: (
-			margin-top: 0,
+			margin-top: 0rem,
 			top: $tooltip-arrow-offset,
 		),
 	),
@@ -269,24 +267,23 @@ $clay-tooltip-top: () !default;
 $clay-tooltip-top: map-deep-merge(
 	(
 		padding-bottom: $tooltip-arrow-height,
+
 		arrow: (
-			bottom: 0,
+			bottom: 0rem,
 			left: 50%,
-			margin-left: math-sign($tooltip-arrow-width * 0.5),
+			margin-left: calc(#{$tooltip-arrow-width} * -0.5),
 			before: (
 				border-top-color: $tooltip-arrow-color,
 				border-width: $tooltip-arrow-height
-					(
-						$tooltip-arrow-width * 0.5,
-					)
-					0,
-				top: 0,
+					calc(#{$tooltip-arrow-width} * 0.5) 0rem,
+				top: 0rem,
 			),
 		),
+
 		tooltip-arrow: (
 			border-left-color: transparent,
 			border-top-color: transparent,
-			bottom: 0,
+			bottom: 0rem,
 			left: 50%,
 		),
 	),
@@ -300,7 +297,7 @@ $clay-tooltip-top-left: map-deep-merge(
 	(
 		arrow: (
 			left: $tooltip-arrow-offset,
-			margin-left: 0,
+			margin-left: 0rem,
 		),
 	),
 	$clay-tooltip-top-left
@@ -313,7 +310,7 @@ $clay-tooltip-top-right: map-deep-merge(
 	(
 		arrow: (
 			left: auto,
-			margin-left: 0,
+			margin-left: 0rem,
 			right: $tooltip-arrow-offset,
 		),
 	),