@clayui/css 3.41.0 → 3.44.1

package/src/scss/cadmin/components/_tooltip.scss

@@ -1,56 +1,9 @@
 .tooltip {
-	display: block;
-	font-family: $cadmin-font-family-base;
-	font-size: $cadmin-tooltip-font-size;
-	font-style: normal;
-	font-weight: $cadmin-font-weight-normal;
-	letter-spacing: normal;
-	line-break: auto;
-	line-height: $cadmin-line-height-base;
-	margin: $cadmin-tooltip-margin;
-	opacity: 0;
-	position: absolute;
-	text-align: left;
-	text-align: start;
-	text-decoration: none;
-	text-shadow: none;
-	text-transform: none;
-	white-space: normal;
-	word-break: normal;
-	word-spacing: normal;
-	word-wrap: break-word;
-	z-index: $cadmin-zindex-tooltip;
-
-	&.show {
-		opacity: $cadmin-tooltip-opacity;
-	}
-
-	.arrow {
-		display: block;
-		height: $cadmin-tooltip-arrow-height;
-		position: absolute;
-		width: $cadmin-tooltip-arrow-width;
-
-		&::before {
-			border-color: transparent;
-			border-style: solid;
-			content: '';
-			position: absolute;
-		}
-	}
+	@include clay-tooltip-variant($cadmin-tooltip);
 }
 
 .tooltip-inner {
-	background-color: $cadmin-tooltip-bg;
-
-	@include border-radius($cadmin-tooltip-border-radius);
-	@include box-shadow($cadmin-tooltip-box-shadow);
-
-	color: $cadmin-tooltip-color;
-	max-width: $cadmin-tooltip-max-width;
-	padding: $cadmin-tooltip-padding-y $cadmin-tooltip-padding-x;
-	text-align: center;
-	white-space: pre-line;
+	@include clay-css($cadmin-tooltip-inner);
 }
 
 .tooltip-arrow {
@@ -146,76 +99,20 @@
 	@extend %bs-tooltip-left !optional;
 }
 
-// Tooltip Positions
+// Bottom
 
 .clay-tooltip-bottom,
-.clay-tooltip-top {
-	.arrow {
-		left: 50%;
-		margin-left: math-sign($cadmin-tooltip-arrow-width * 0.5);
-	}
-}
-
 .clay-tooltip-bottom-left,
-.clay-tooltip-top-left {
-	.arrow {
-		left: $cadmin-tooltip-arrow-offset;
-	}
-}
-
-.clay-tooltip-bottom-right,
-.clay-tooltip-top-right {
-	.arrow {
-		right: $cadmin-tooltip-arrow-offset;
-	}
-}
-
-.clay-tooltip-left,
-.clay-tooltip-right {
-	.arrow {
-		margin-top: math-sign($cadmin-tooltip-arrow-width * 0.5);
-		top: 50%;
-	}
-}
-
-.clay-tooltip-left-bottom,
-.clay-tooltip-right-bottom {
-	.arrow {
-		bottom: $cadmin-tooltip-arrow-offset;
-	}
+.clay-tooltip-bottom-right {
+	@include clay-tooltip-variant($cadmin-clay-tooltip-bottom);
 }
 
-.clay-tooltip-left-top,
-.clay-tooltip-right-top {
-	.arrow {
-		top: $cadmin-tooltip-arrow-offset;
-	}
+.clay-tooltip-bottom-left {
+	@include clay-tooltip-variant($cadmin-clay-tooltip-bottom-left);
 }
 
-// Bottom
-
-.clay-tooltip-bottom,
-.clay-tooltip-bottom-left,
 .clay-tooltip-bottom-right {
-	padding-top: $cadmin-tooltip-arrow-height;
-
-	.arrow {
-		top: 0;
-
-		&::before {
-			border-bottom-color: $cadmin-tooltip-arrow-color;
-			border-width: 0 ($cadmin-tooltip-arrow-width * 0.5)
-				$cadmin-tooltip-arrow-height;
-			bottom: 0;
-		}
-	}
-
-	.tooltip-arrow {
-		border-bottom-color: transparent;
-		border-right-color: transparent;
-		left: 50%;
-		top: 0;
-	}
+	@include clay-tooltip-variant($cadmin-clay-tooltip-bottom-right);
 }
 
 // Left
@@ -223,27 +120,15 @@
 .clay-tooltip-left,
 .clay-tooltip-left-bottom,
 .clay-tooltip-left-top {
-	padding-right: $cadmin-tooltip-arrow-height;
-
-	.arrow {
-		height: $cadmin-tooltip-arrow-width;
-		right: 0;
-		width: $cadmin-tooltip-arrow-height;
+	@include clay-tooltip-variant($cadmin-clay-tooltip-left);
+}
 
-		&::before {
-			border-left-color: $cadmin-tooltip-arrow-color;
-			border-width: ($cadmin-tooltip-arrow-width * 0.5) 0
-				($cadmin-tooltip-arrow-width * 0.5) $cadmin-tooltip-arrow-height;
-			left: 0;
-		}
-	}
+.clay-tooltip-left-bottom {
+	@include clay-tooltip-variant($cadmin-clay-tooltip-left-bottom);
+}
 
-	.tooltip-arrow {
-		border-bottom-color: transparent;
-		border-left-color: transparent;
-		right: 0;
-		top: 50%;
-	}
+.clay-tooltip-left-top {
+	@include clay-tooltip-variant($cadmin-clay-tooltip-left-top);
 }
 
 // Right
@@ -251,28 +136,15 @@
 .clay-tooltip-right,
 .clay-tooltip-right-bottom,
 .clay-tooltip-right-top {
-	padding-left: $cadmin-tooltip-arrow-height;
-
-	.arrow {
-		height: $cadmin-tooltip-arrow-width;
-		left: 0;
-		width: $cadmin-tooltip-arrow-height;
+	@include clay-tooltip-variant($cadmin-clay-tooltip-right);
+}
 
-		&::before {
-			border-right-color: $cadmin-tooltip-arrow-color;
-			border-width: ($cadmin-tooltip-arrow-width * 0.5)
-				$cadmin-tooltip-arrow-height ($cadmin-tooltip-arrow-width * 0.5)
-				0;
-			right: 0;
-		}
-	}
+.clay-tooltip-right-bottom {
+	@include clay-tooltip-variant($cadmin-clay-tooltip-right-bottom);
+}
 
-	.tooltip-arrow {
-		border-right-color: transparent;
-		border-top-color: transparent;
-		left: 0;
-		top: 50%;
-	}
+.clay-tooltip-right-top {
+	@include clay-tooltip-variant($cadmin-clay-tooltip-right-top);
 }
 
 // Top
@@ -280,23 +152,13 @@
 .clay-tooltip-top,
 .clay-tooltip-top-left,
 .clay-tooltip-top-right {
-	padding-bottom: $cadmin-tooltip-arrow-height;
-
-	.arrow {
-		bottom: 0;
+	@include clay-tooltip-variant($cadmin-tooltip-top);
+}
 
-		&::before {
-			border-top-color: $cadmin-tooltip-arrow-color;
-			border-width: $cadmin-tooltip-arrow-height
-				($cadmin-tooltip-arrow-width * 0.5) 0;
-			top: 0;
-		}
-	}
+.clay-tooltip-top-left {
+	@include clay-tooltip-variant($cadmin-tooltip-top-left);
+}
 
-	.tooltip-arrow {
-		border-left-color: transparent;
-		border-top-color: transparent;
-		bottom: 0;
-		left: 50%;
-	}
+.clay-tooltip-top-right {
+	@include clay-tooltip-variant($cadmin-tooltip-top-right);
 }

package/src/scss/cadmin/components/_utilities-functional-important.scss

@@ -246,9 +246,10 @@
 
 	.embed-responsive-#{$cadmin-embed-responsive-aspect-ratio-x}by#{$cadmin-embed-responsive-aspect-ratio-y} {
 		&::before {
-			padding-top: percentage(
-				$cadmin-embed-responsive-aspect-ratio-y /
-					$cadmin-embed-responsive-aspect-ratio-x
+			padding-top: calc(
+				#{$cadmin-embed-responsive-aspect-ratio-y} /
+					#{$cadmin-embed-responsive-aspect-ratio-x} *
+					100%
 			);
 		}
 	}

package/src/scss/cadmin/variables/_alerts.scss

@@ -149,6 +149,7 @@ $cadmin-alert: map-deep-merge(
 		margin-bottom: $cadmin-alert-margin-bottom,
 		padding: $cadmin-alert-padding-y $cadmin-alert-padding-x,
 		position: relative,
+		white-space: normal,
 		word-wrap: break-word,
 		alert-btn: $cadmin-alert-btn,
 		btn-group: $cadmin-alert-btn-group,
@@ -282,8 +283,8 @@ $cadmin-alert-fluid-dismissible-container: map-merge(
 		padding-left: $cadmin-alert-dismissible-padding-left,
 		padding-right:
 			calc(
-				#{$cadmin-alert-dismissible-padding-right} + #{$cadmin-grid-gutter-width /
-					2}
+				#{$cadmin-alert-dismissible-padding-right} + #{$cadmin-grid-gutter-width} *
+					0.5
 			),
 		padding-top: $cadmin-alert-dismissible-padding-top,
 		position: relative,

package/src/scss/cadmin/variables/_dropdowns.scss

@@ -118,7 +118,6 @@ $cadmin-dropdown-item-base: map-deep-merge(
 		position: relative,
 		text-align: inherit,
 		transition: none,
-		white-space: normal,
 		width: 100%,
 		word-wrap: break-word,
 		hover: (
@@ -163,6 +162,23 @@ $cadmin-dropdown-item-base: map-deep-merge(
 			color: $cadmin-gray-500,
 			line-height: $cadmin-dropdown-font-size * $cadmin-line-height-base,
 		),
+		'&.autofit-row': (
+			padding-left: 1rem,
+			padding-right: 1rem,
+			autofit-col: (
+				padding-left: 0.25rem,
+				padding-right: 0.25rem,
+			),
+		),
+		autofit-row: (
+			margin-left: 0.25rem,
+			margin-right: 0.25rem,
+			width: auto,
+			autofit-col: (
+				padding-left: 0.25rem,
+				padding-right: 0.25rem,
+			),
+		),
 	),
 	$cadmin-dropdown-item-base
 );
@@ -637,7 +653,18 @@ $cadmin-dropdown-full-wide-header-spacer-y: 20px !default;
 
 $cadmin-dropdown-wide-width: 500px !default;
 
-// Dropdown Menu Width
+// .dropdown-menu-width-shrink
+
+$cadmin-dropdown-menu-width-shrink: () !default;
+$cadmin-dropdown-menu-width-shrink: map-deep-merge(
+	(
+		min-width: 0,
+		white-space: nowrap,
+	),
+	$cadmin-dropdown-menu-width-shrink
+);
+
+// .dropdown-menu-width-full
 
 $cadmin-dropdown-menu-width-full: () !default;
 $cadmin-dropdown-menu-width-full: map-merge(
@@ -651,6 +678,8 @@ $cadmin-dropdown-menu-width-full: map-merge(
 	$cadmin-dropdown-menu-width-full
 );
 
+// .dropdown-menu-width-sm
+
 $cadmin-dropdown-menu-width-sm: () !default;
 $cadmin-dropdown-menu-width-sm: map-merge(
 	(