@clayui/css 3.161.0 → 3.162.0

package/src/scss/atlas-custom-properties/variables/_tooltip.scss

@@ -1,332 +1,321 @@
-@if ($enable-atlas-custom-properties) {
-	$tooltip-bg: var(--tooltip-background-color, $dark-d2);
-	$tooltip-border-radius: var(--tooltip-border-radius, $border-radius);
-	$tooltip-box-shadow: var(
-		--tooltip-box-shadow,
-		0 1px 4px 0px rgba(0, 0, 0, 0.4)
-	);
-	$tooltip-color: var(--tooltip-color, $white);
-	$tooltip-font-size: var(--tooltip-font-size, 14px);
-	$tooltip-margin: var(--tooltip-margin, 0);
-	$tooltip-max-width: var(--tooltip-max-width, 230px);
-	$tooltip-opacity: var(--tooltip-opacity, 1);
-	$tooltip-padding-x: var(--tooltip-padding-x, 12px);
-	$tooltip-padding-y: var(--tooltip-padding-y, 12px);
-
-	$tooltip-arrow-color: var(--tooltip-arrow-color, $tooltip-bg);
-	$tooltip-arrow-height: var(--tooltip-arrow-height, 6.4px);
-	$tooltip-arrow-offset: var(--tooltip-arrow-offset, 8px);
-	$tooltip-arrow-width: var(--tooltip-arrow-width, 12.8px);
-
-	$form-feedback-tooltip-border-radius: $tooltip-border-radius;
-	$form-feedback-tooltip-font-size: $tooltip-font-size;
-	$form-feedback-tooltip-line-height: $line-height-base;
-	$form-feedback-tooltip-opacity: $tooltip-opacity;
-	$form-feedback-tooltip-padding-x: $tooltip-padding-x;
-	$form-feedback-tooltip-padding-y: $tooltip-padding-y;
-
-	// .tooltip
-
-	$tooltip: ();
-	$tooltip: map-deep-merge(
-		(
+$tooltip-bg: var(--tooltip-background-color, $dark-d2) !default;
+$tooltip-border-radius: var(--tooltip-border-radius, $border-radius) !default;
+$tooltip-box-shadow: var(
+	--tooltip-box-shadow,
+	0 1px 4px 0px rgba(0, 0, 0, 0.4)
+) !default;
+$tooltip-color: var(--tooltip-color, $white) !default;
+$tooltip-font-size: var(--tooltip-font-size, 14px) !default;
+$tooltip-margin: var(--tooltip-margin, 0) !default;
+$tooltip-max-width: var(--tooltip-max-width, 230px) !default;
+$tooltip-opacity: var(--tooltip-opacity, 1) !default;
+$tooltip-padding-x: var(--tooltip-padding-x, 12px) !default;
+$tooltip-padding-y: var(--tooltip-padding-y, 12px) !default;
+
+$tooltip-arrow-color: var(--tooltip-arrow-color, $tooltip-bg) !default;
+$tooltip-arrow-height: var(--tooltip-arrow-height, 6.4px) !default;
+$tooltip-arrow-offset: var(--tooltip-arrow-offset, 8px) !default;
+$tooltip-arrow-width: var(--tooltip-arrow-width, 12.8px) !default;
+
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+$form-feedback-tooltip-font-size: $tooltip-font-size !default;
+$form-feedback-tooltip-line-height: $line-height-base !default;
+$form-feedback-tooltip-opacity: $tooltip-opacity !default;
+$form-feedback-tooltip-padding-x: $tooltip-padding-x !default;
+$form-feedback-tooltip-padding-y: $tooltip-padding-y !default;
+
+// .tooltip
+
+$tooltip: () !default;
+$tooltip: map-deep-merge(
+	(
+		display: block,
+		font-family: $font-family-base,
+		font-size: $tooltip-font-size,
+		font-style: normal,
+		font-weight: var(--tooltip-font-weight, $font-weight-normal),
+		letter-spacing: normal,
+		line-break: auto,
+		line-height: $line-height-base,
+		margin: $tooltip-margin,
+		opacity: 0,
+		position: absolute,
+		text-align: left,
+		text-decoration: none,
+		text-shadow: none,
+		text-transform: none,
+		white-space: normal,
+		word-break: normal,
+		word-spacing: normal,
+		word-wrap: break-word,
+		z-index: $zindex-tooltip,
+
+		show: (
+			opacity: $tooltip-opacity,
+		),
+
+		arrow: (
 			display: block,
-			font-family: $font-family-base,
-			font-size: $tooltip-font-size,
-			font-style: normal,
-			font-weight: var(--tooltip-font-weight, $font-weight-normal),
-			letter-spacing: normal,
-			line-break: auto,
-			line-height: $line-height-base,
-			margin: $tooltip-margin,
-			opacity: 0,
+			height: $tooltip-arrow-height,
 			position: absolute,
-			text-align: left,
-			text-decoration: none,
-			text-shadow: none,
-			text-transform: none,
-			white-space: normal,
-			word-break: normal,
-			word-spacing: normal,
-			word-wrap: break-word,
-			z-index: $zindex-tooltip,
-
-			show: (
-				opacity: $tooltip-opacity,
-			),
+			width: $tooltip-arrow-width,
 
-			arrow: (
-				display: block,
-				height: $tooltip-arrow-height,
+			before: (
+				border-color: transparent,
+				border-style: solid,
+				content: '',
 				position: absolute,
-				width: $tooltip-arrow-width,
-
-				before: (
-					border-color: transparent,
-					border-style: solid,
-					content: '',
-					position: absolute,
-				),
 			),
 		),
-		$tooltip
-	);
-
-	// .tooltip-inner
-
-	$tooltip-inner: ();
-	$tooltip-inner: map-merge(
-		(
-			background-color: $tooltip-bg,
-			border-radius: clay-enable-rounded($tooltip-border-radius),
-			box-shadow: clay-enable-shadows($tooltip-box-shadow),
-			color: $tooltip-color,
-			max-width: $tooltip-max-width,
-			padding: $tooltip-padding-y $tooltip-padding-x,
-			text-align: center,
-			white-space: pre-line,
-		),
-		$tooltip-inner
-	);
-
-	// .clay-tooltip-bottom, .clay-tooltip-bottom-left, .clay-tooltip-bottom-right
-
-	$clay-tooltip-bottom: ();
-	$clay-tooltip-bottom: map-deep-merge(
-		(
-			padding-top: $tooltip-arrow-height,
-
-			arrow: (
-				left: 50%,
-				margin-left: calc(#{$tooltip-arrow-width} * -0.5),
-				top: 0rem,
-
-				before: (
-					border-bottom-color: $tooltip-arrow-color,
-					border-width:
-						0rem
-						calc(#{$tooltip-arrow-width} * 0.5)
-						$tooltip-arrow-height,
-					bottom: 0rem,
-				),
-			),
-
-			tooltip-arrow: (
-				border-bottom-color: transparent,
-				border-right-color: transparent,
-				left: 50%,
-				top: 0rem,
+	),
+	$tooltip
+);
+
+// .tooltip-inner
+
+$tooltip-inner: () !default;
+$tooltip-inner: map-merge(
+	(
+		background-color: $tooltip-bg,
+		border-radius: clay-enable-rounded($tooltip-border-radius),
+		box-shadow: clay-enable-shadows($tooltip-box-shadow),
+		color: $tooltip-color,
+		max-width: $tooltip-max-width,
+		padding: $tooltip-padding-y $tooltip-padding-x,
+		text-align: center,
+		white-space: pre-line,
+	),
+	$tooltip-inner
+);
+
+// .clay-tooltip-bottom, .clay-tooltip-bottom-left, .clay-tooltip-bottom-right
+
+$clay-tooltip-bottom: () !default;
+$clay-tooltip-bottom: map-deep-merge(
+	(
+		padding-top: $tooltip-arrow-height,
+
+		arrow: (
+			left: 50%,
+			margin-left: calc(#{$tooltip-arrow-width} * -0.5),
+			top: 0rem,
+
+			before: (
+				border-bottom-color: $tooltip-arrow-color,
+				border-width: 0rem calc(#{$tooltip-arrow-width} * 0.5)
+					$tooltip-arrow-height,
+				bottom: 0rem,
 			),
 		),
-		$clay-tooltip-bottom
-	);
-
-	// .clay-tooltip-bottom-left
 
-	$clay-tooltip-bottom-left: ();
-	$clay-tooltip-bottom-left: map-deep-merge(
-		(
-			arrow: (
-				left: $tooltip-arrow-offset,
-				margin-left: 0rem,
-			),
+		tooltip-arrow: (
+			border-bottom-color: transparent,
+			border-right-color: transparent,
+			left: 50%,
+			top: 0rem,
 		),
-		$clay-tooltip-bottom-left
-	);
-
-	// .clay-tooltip-bottom-right
-
-	$clay-tooltip-bottom-right: ();
-	$clay-tooltip-bottom-right: map-deep-merge(
-		(
-			arrow: (
-				left: auto,
-				margin-left: 0rem,
-				right: $tooltip-arrow-offset,
-			),
+	),
+	$clay-tooltip-bottom
+);
+
+// .clay-tooltip-bottom-left
+
+$clay-tooltip-bottom-left: () !default;
+$clay-tooltip-bottom-left: map-deep-merge(
+	(
+		arrow: (
+			left: $tooltip-arrow-offset,
+			margin-left: 0rem,
 		),
-		$clay-tooltip-bottom-right
-	);
-
-	// .clay-tooltip-left, .clay-tooltip-left-bottom, .clay-tooltip-left-top
-
-	$clay-tooltip-left: ();
-	$clay-tooltip-left: map-deep-merge(
-		(
-			padding-right: $tooltip-arrow-height,
-
-			arrow: (
-				height: $tooltip-arrow-width,
-				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:
-						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: 0rem,
-				top: 50%,
-			),
+	),
+	$clay-tooltip-bottom-left
+);
+
+// .clay-tooltip-bottom-right
+
+$clay-tooltip-bottom-right: () !default;
+$clay-tooltip-bottom-right: map-deep-merge(
+	(
+		arrow: (
+			left: auto,
+			margin-left: 0rem,
+			right: $tooltip-arrow-offset,
 		),
-		$clay-tooltip-left
-	);
-
-	// .clay-tooltip-left-bottom
-
-	$clay-tooltip-left-bottom: ();
-	$clay-tooltip-left-bottom: map-deep-merge(
-		(
-			arrow: (
-				bottom: $tooltip-arrow-offset,
-				margin-top: 0rem,
-				top: auto,
+	),
+	$clay-tooltip-bottom-right
+);
+
+// .clay-tooltip-left, .clay-tooltip-left-bottom, .clay-tooltip-left-top
+
+$clay-tooltip-left: () !default;
+$clay-tooltip-left: map-deep-merge(
+	(
+		padding-right: $tooltip-arrow-height,
+
+		arrow: (
+			height: $tooltip-arrow-width,
+			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: calc(#{$tooltip-arrow-width} * 0.5) 0
+					calc(#{$tooltip-arrow-width} * 0.5) $tooltip-arrow-height,
+				left: 0rem,
 			),
 		),
-		$clay-tooltip-left-bottom
-	);
-
-	// .clay-tooltip-left-top
 
-	$clay-tooltip-left-top: ();
-	$clay-tooltip-left-top: map-deep-merge(
-		(
-			arrow: (
-				margin-top: 0rem,
-				top: $tooltip-arrow-offset,
-			),
+		tooltip-arrow: (
+			border-bottom-color: transparent,
+			border-left-color: transparent,
+			right: 0rem,
+			top: 50%,
 		),
-		$clay-tooltip-left-top
-	);
-
-	// .clay-tooltip-right, .clay-tooltip-right-bottom, .clay-tooltip-right-top
-
-	$clay-tooltip-right: ();
-	$clay-tooltip-right: map-deep-merge(
-		(
-			padding-left: $tooltip-arrow-height,
-
-			arrow: (
-				height: $tooltip-arrow-width,
-				left: 0rem,
-				margin-top: calc(#{$tooltip-arrow-width} * -0.5),
-				top: 50%,
-				width: $tooltip-arrow-height,
-
-				before: (
-					border-right-color: $tooltip-arrow-color,
-					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: 0rem,
-				top: 50%,
-			),
+	),
+	$clay-tooltip-left
+);
+
+// .clay-tooltip-left-bottom
+
+$clay-tooltip-left-bottom: () !default;
+$clay-tooltip-left-bottom: map-deep-merge(
+	(
+		arrow: (
+			bottom: $tooltip-arrow-offset,
+			margin-top: 0rem,
+			top: auto,
 		),
-		$clay-tooltip-right
-	);
-
-	// .clay-tooltip-right-bottom
-
-	$clay-tooltip-right-bottom: ();
-	$clay-tooltip-right-bottom: map-deep-merge(
-		(
-			arrow: (
-				bottom: $tooltip-arrow-offset,
-				margin-top: 0rem,
-				top: auto,
-			),
+	),
+	$clay-tooltip-left-bottom
+);
+
+// .clay-tooltip-left-top
+
+$clay-tooltip-left-top: () !default;
+$clay-tooltip-left-top: map-deep-merge(
+	(
+		arrow: (
+			margin-top: 0rem,
+			top: $tooltip-arrow-offset,
 		),
-		$clay-tooltip-right-bottom
-	);
-
-	// .clay-tooltip-right-top
-
-	$clay-tooltip-right-top: ();
-	$clay-tooltip-right-top: map-deep-merge(
-		(
-			arrow: (
-				margin-top: 0rem,
-				top: $tooltip-arrow-offset,
+	),
+	$clay-tooltip-left-top
+);
+
+// .clay-tooltip-right, .clay-tooltip-right-bottom, .clay-tooltip-right-top
+
+$clay-tooltip-right: () !default;
+$clay-tooltip-right: map-deep-merge(
+	(
+		padding-left: $tooltip-arrow-height,
+
+		arrow: (
+			height: $tooltip-arrow-width,
+			left: 0rem,
+			margin-top: calc(#{$tooltip-arrow-width} * -0.5),
+			top: 50%,
+			width: $tooltip-arrow-height,
+
+			before: (
+				border-right-color: $tooltip-arrow-color,
+				border-width: calc(#{$tooltip-arrow-width} * 0.5)
+					$tooltip-arrow-height calc(#{$tooltip-arrow-width} * 0.5)
+					0rem,
+				right: 0rem,
 			),
 		),
-		$clay-tooltip-right-top
-	);
-
-	// .clay-tooltip-top, .clay-tooltip-top-left, .clay-tooltip-top-right
 
-	$clay-tooltip-top: ();
-	$clay-tooltip-top: map-deep-merge(
-		(
-			padding-bottom: $tooltip-arrow-height,
-
-			arrow: (
-				bottom: 0rem,
-				left: 50%,
-				margin-left: calc(#{$tooltip-arrow-width} * -0.5),
-				before: (
-					border-top-color: $tooltip-arrow-color,
-					border-width:
-						$tooltip-arrow-height
-						calc(#{$tooltip-arrow-width} * 0.5)
-						0rem,
-					top: 0rem,
-				),
-			),
-
-			tooltip-arrow: (
-				border-left-color: transparent,
-				border-top-color: transparent,
-				bottom: 0rem,
-				left: 50%,
+		tooltip-arrow: (
+			border-right-color: transparent,
+			border-top-color: transparent,
+			left: 0rem,
+			top: 50%,
+		),
+	),
+	$clay-tooltip-right
+);
+
+// .clay-tooltip-right-bottom
+
+$clay-tooltip-right-bottom: () !default;
+$clay-tooltip-right-bottom: map-deep-merge(
+	(
+		arrow: (
+			bottom: $tooltip-arrow-offset,
+			margin-top: 0rem,
+			top: auto,
+		),
+	),
+	$clay-tooltip-right-bottom
+);
+
+// .clay-tooltip-right-top
+
+$clay-tooltip-right-top: () !default;
+$clay-tooltip-right-top: map-deep-merge(
+	(
+		arrow: (
+			margin-top: 0rem,
+			top: $tooltip-arrow-offset,
+		),
+	),
+	$clay-tooltip-right-top
+);
+
+// .clay-tooltip-top, .clay-tooltip-top-left, .clay-tooltip-top-right
+
+$clay-tooltip-top: () !default;
+$clay-tooltip-top: map-deep-merge(
+	(
+		padding-bottom: $tooltip-arrow-height,
+
+		arrow: (
+			bottom: 0rem,
+			left: 50%,
+			margin-left: calc(#{$tooltip-arrow-width} * -0.5),
+			before: (
+				border-top-color: $tooltip-arrow-color,
+				border-width: $tooltip-arrow-height
+					calc(#{$tooltip-arrow-width} * 0.5) 0rem,
+				top: 0rem,
 			),
 		),
-		$clay-tooltip-top
-	);
-
-	// .clay-tooltip-top-left
 
-	$clay-tooltip-top-left: ();
-	$clay-tooltip-top-left: map-deep-merge(
-		(
-			arrow: (
-				left: $tooltip-arrow-offset,
-				margin-left: 0rem,
-			),
+		tooltip-arrow: (
+			border-left-color: transparent,
+			border-top-color: transparent,
+			bottom: 0rem,
+			left: 50%,
 		),
-		$clay-tooltip-top-left
-	);
-
-	// .clay-tooltip-top-right
-
-	$clay-tooltip-top-right: ();
-	$clay-tooltip-top-right: map-deep-merge(
-		(
-			arrow: (
-				left: auto,
-				margin-left: 0rem,
-				right: $tooltip-arrow-offset,
-			),
+	),
+	$clay-tooltip-top
+);
+
+// .clay-tooltip-top-left
+
+$clay-tooltip-top-left: () !default;
+$clay-tooltip-top-left: map-deep-merge(
+	(
+		arrow: (
+			left: $tooltip-arrow-offset,
+			margin-left: 0rem,
+		),
+	),
+	$clay-tooltip-top-left
+);
+
+// .clay-tooltip-top-right
+
+$clay-tooltip-top-right: () !default;
+$clay-tooltip-top-right: map-deep-merge(
+	(
+		arrow: (
+			left: auto,
+			margin-left: 0rem,
+			right: $tooltip-arrow-offset,
 		),
-		$clay-tooltip-top-right
-	);
-}
+	),
+	$clay-tooltip-top-right
+);