@clayui/css 3.41.0 → 3.44.1

package/src/scss/components/_tooltip.scss

@@ -1,56 +1,9 @@
 .tooltip {
-	display: block;
-	font-family: $font-family-base;
-	font-size: $tooltip-font-size;
-	font-style: normal;
-	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-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: $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;
-			content: '';
-			position: absolute;
-		}
-	}
+	@include clay-tooltip-variant($tooltip);
 }
 
 .tooltip-inner {
-	background-color: $tooltip-bg;
-
-	@include border-radius($tooltip-border-radius);
-	@include box-shadow($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;
+	@include clay-css($tooltip-inner);
 }
 
 .tooltip-arrow {
@@ -143,75 +96,20 @@
 	@extend %bs-tooltip-left !optional;
 }
 
-// Tooltip Positions
+// Bottom
 
 .clay-tooltip-bottom,
-.clay-tooltip-top {
-	.arrow {
-		left: 50%;
-		margin-left: math-sign($tooltip-arrow-width * 0.5);
-	}
-}
-
 .clay-tooltip-bottom-left,
-.clay-tooltip-top-left {
-	.arrow {
-		left: $tooltip-arrow-offset;
-	}
-}
-
-.clay-tooltip-bottom-right,
-.clay-tooltip-top-right {
-	.arrow {
-		right: $tooltip-arrow-offset;
-	}
-}
-
-.clay-tooltip-left,
-.clay-tooltip-right {
-	.arrow {
-		margin-top: math-sign($tooltip-arrow-width * 0.5);
-		top: 50%;
-	}
-}
-
-.clay-tooltip-left-bottom,
-.clay-tooltip-right-bottom {
-	.arrow {
-		bottom: $tooltip-arrow-offset;
-	}
+.clay-tooltip-bottom-right {
+	@include clay-tooltip-variant($clay-tooltip-bottom);
 }
 
-.clay-tooltip-left-top,
-.clay-tooltip-right-top {
-	.arrow {
-		top: $tooltip-arrow-offset;
-	}
+.clay-tooltip-bottom-left {
+	@include clay-tooltip-variant($clay-tooltip-bottom-left);
 }
 
-// Bottom
-
-.clay-tooltip-bottom,
-.clay-tooltip-bottom-left,
 .clay-tooltip-bottom-right {
-	padding-top: $tooltip-arrow-height;
-
-	.arrow {
-		top: 0;
-
-		&::before {
-			border-bottom-color: $tooltip-arrow-color;
-			border-width: 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
-			bottom: 0;
-		}
-	}
-
-	.tooltip-arrow {
-		border-bottom-color: transparent;
-		border-right-color: transparent;
-		left: 50%;
-		top: 0;
-	}
+	@include clay-tooltip-variant($clay-tooltip-bottom-right);
 }
 
 // Left
@@ -219,27 +117,15 @@
 .clay-tooltip-left,
 .clay-tooltip-left-bottom,
 .clay-tooltip-left-top {
-	padding-right: $tooltip-arrow-height;
-
-	.arrow {
-		height: $tooltip-arrow-width;
-		right: 0;
-		width: $tooltip-arrow-height;
+	@include clay-tooltip-variant($clay-tooltip-left);
+}
 
-		&::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;
-		}
-	}
+.clay-tooltip-left-bottom {
+	@include clay-tooltip-variant($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($clay-tooltip-left-top);
 }
 
 // Right
@@ -247,27 +133,15 @@
 .clay-tooltip-right,
 .clay-tooltip-right-bottom,
 .clay-tooltip-right-top {
-	padding-left: $tooltip-arrow-height;
-
-	.arrow {
-		height: $tooltip-arrow-width;
-		left: 0;
-		width: $tooltip-arrow-height;
+	@include clay-tooltip-variant($clay-tooltip-right);
+}
 
-		&::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;
-		}
-	}
+.clay-tooltip-right-bottom {
+	@include clay-tooltip-variant($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($clay-tooltip-right-top);
 }
 
 // Top
@@ -275,22 +149,13 @@
 .clay-tooltip-top,
 .clay-tooltip-top-left,
 .clay-tooltip-top-right {
-	padding-bottom: $tooltip-arrow-height;
-
-	.arrow {
-		bottom: 0;
+	@include clay-tooltip-variant($clay-tooltip-top);
+}
 
-		&::before {
-			border-top-color: $tooltip-arrow-color;
-			border-width: $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
-			top: 0;
-		}
-	}
+.clay-tooltip-top-left {
+	@include clay-tooltip-variant($clay-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($clay-tooltip-top-right);
 }

package/src/scss/functions/_lx-icons-generated.scss

@@ -204,6 +204,8 @@
 
 	'cut': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M335.4 208.2c-16.7-16.6-32.8-32.8-48-47.9 35.1-35.1 68.9-69 96.2-96.3H480c-24.1 24.1-82.4 82.2-144.6 144.2zm-48 47.9c78 77.9 161.9 161.6 192.1 191.9h-95.6c-39.6-39.6-93.2-93.1-144.3-144.1-10.4 10.4-20.4 20.3-29.8 29.8 9 14.6 14.3 31.9 14.3 50.3 0 53-43 96-96 96s-96-43-96-96 43-96 96-96c9.7 0 19 1.4 27.9 4.1 11.2-11.3 23.3-23.3 35.9-35.9L155.7 220c-8.7 2.6-18 4-27.5 4-53 0-96-43-96-96s43-96 96-96 96 43 96 96c0 18.5-5.3 35.8-14.4 50.5 9.5 9.5 19.5 19.4 29.9 29.8l.2-.2c15.1 15.1 31.3 31.2 47.9 47.8-.3.1-.4.2-.4.2zM128 160c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z" fill="#{$color}"/></svg>',
 
+	'date-time': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline date-time-calendar-border" d="M162.9 384.8H64V128.2h320v35c23 3.9 44.6 11.8 64 23.1v-58c0-35.4-28.7-64.1-64-64.1V32c0-42.6-64-42.7-64 0v32.1h-64V32c0-42.8-64-42.6-64 0v32.1h-64V32c0-42.3-64-42.8-64 0v32.1c-35.3 0-64 28.7-64 64.1v256.6c0 35.4 28.7 64.1 64 64.1h121.9c-11.3-19.5-19.2-41.1-23-64.1z" fill="#{$color}"/><path class="lexicon-icon-outline date-time-clock-border" d="M448 352.7c0 128.3-192 128.3-192 0 0-128.2 192-128.3 192 0zm-256 0c0 210.9 320 213.9 320 0 0-214.9-320-210.1-320 0z" fill="#{$color}"/><path class="lexicon-icon-outline date-time-clock-hands" d="M400 352.7h-48v-48.1c0-21.1-32-21-32 0v80.2h80c21.3 0 21.2-32.1 0-32.1z" fill="#{$color}"/><ellipse class="lexicon-icon-outline date-time-date" cx="128" cy="192.3" rx="32" ry="32.1" fill="#{$color}"/></svg>',
+
 	'date': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="date-border lexicon-icon-outline" d="M512 160.1c0-35-28.7-64-63.7-64h-.3V32c0-44-64-41-64 0v64h-96V32c0-40-64-44-64 0v64h-96V32c0-45-64-40-64 0v64h-.3C28.7 96 0 125 0 160v288.1c0 35 29 64 64 64h352l96-96v-256zM384 448.2v-64h64l-64 64zm64-128.1H320v128H64v-288h384v160z" fill="#{$color}"/><path class="date-1 lexicon-icon-outline" fill="#{$color}" d="M256 416h32V192h-32v32h-32v32h32z"/><path class="date-3 lexicon-icon-outline" fill="#{$color}" d="M96 192h64v32H96zM160 224h32v63h-32zM98.3 288H160v32H98.3zM160 416v-32H96v32zM160 320h32v63h-32z"/></svg>',
 
 	'decimal': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline decimal-hundreths" d="M397.1 129.3c-74 0-82.9 84.1-82.9 125.6s10.4 127.9 82.9 127.9c73.5 0 82.9-86.4 82.9-127.9 0-41.3-9.4-125.6-82.9-125.6zm0 34.5c19.4-.4 29.3 15.8 34.7 34.9l-75 75c-1.6-42.5-1.2-110.7 40.3-109.9zm0 184.4c-18.9-.8-28.8-16.7-34.2-35.3l74.6-74.6c-.5 42.2.8 109.9-40.4 109.9z" fill="#{$color}"/><path class="lexicon-icon-outline decimal-tenths" d="M199.2 129.3c-74 0-82.9 84.1-82.9 125.6s10.4 127.9 82.9 127.9c73.5 0 82.9-86.4 82.9-127.9 0-41.3-9.4-125.6-82.9-125.6zm0 34.5c19.4-.4 29.3 15.8 34.7 34.9l-75 75c-1.5-42.5-1.2-110.7 40.3-109.9zm0 184.4c-18.9-.8-28.8-16.7-34.2-35.3l74.6-74.6c-.5 42.2.9 109.9-40.4 109.9z" fill="#{$color}"/><circle class="lexicon-icon-outline decimal-decimal-point" cx="64" cy="348.8" r="32" fill="#{$color}"/></svg>',
@@ -300,7 +302,7 @@
 
 	'file-xsl': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline file-xsl-border1" d="M96 192V64h224v64c0 19.2 12.8 32 32 32h64v32h64v-38.4c0-32-19.2-44.8-64-89.6S358.4 0 326.4 0H96C60.8 0 32 28.8 32 64v128h64z" fill="#{$color}"/><path class="lexicon-icon-outline file-xsl-border2" d="M32 448c0 35.2 28.8 64 64 64h320c35.2 0 64-28.8 64-64H32z" fill="#{$color}"/><path class="lexicon-icon-outline file-xsl-x" d="m80 326.4-44.8-83.2H80l26.2 52.1 24.9-52.1h41.6L128 326.4l48 89.6h-44.8l-28.8-64-28.8 64H32l48-89.6z" fill="#{$color}"/><path class="lexicon-icon-outline file-xsl-s" d="m198.4 393.6 22.4-25.6c12.8 12.8 64 28.8 67.2 0 3.2-22.4-83.2-19.2-83.2-76.8 0-48 73.6-73.6 115.2-28.8L304 288c-25.6-19.2-60.8-16-60.8 3.2 0 25.6 86.4 16 86.4 76.8 0 57.6-70.4 73.6-131.2 25.6z" fill="#{$color}"/><path class="lexicon-icon-outline file-xsl-l" d="M374.4 243.2h38.4V384H480v32H374.4V243.2z" fill="#{$color}"/></svg>',
 
-	'filter': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline filter-border" d="M448.1 89.9V156L256 316.1 63.9 156V89.9h384.2m32.1-64H31.8c-17.7 0-32 14.3-32 32V186L192 346.1v108.3c0 18.6 18.5 40.8 46.3 28.6l64-32c10.8-5.4 17.7-16.5 17.7-28.6v-76.3L512.2 186V57.9c0-17.7-14.3-32-32-32z" fill="#{$color}"/></svg>',
+	'filter': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline filter-body" d="M448 160H63.9c-42.5 0-42.5-64 0-64H448c42.7 0 42.7 64 0 64zm-64 64H128c-42.7 0-42.7 64 0 64h256c42.7 0 42.7-64 0-64zm-64 128H192c-42.7 0-42.7 64 0 64h128c42.7 0 42.7-64 0-64z" fill="#{$color}"/></svg>',
 
 	'flag-empty': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M384 32H128c0-42.4-64-42.9-64 0v448c0 42.6 64 42.7 64 0V288h256c18.2 0 32-13.8 32-32V64c0-18.2-13.8-32-32-32zm-32 192H128V96h224v128z" fill="#{$color}"/></svg>',