@clayui/css 3.41.0 → 3.42.0

package/src/scss/components/_popovers.scss

@@ -1,49 +1,5 @@
 .popover {
-	background-clip: padding-box;
-	background-color: $popover-bg;
-	border: $popover-border-width solid $popover-border-color;
-
-	@include border-radius($popover-border-radius);
-	@include box-shadow($popover-box-shadow);
-
-	display: block;
-	font-family: $font-family-base;
-	font-size: $popover-font-size;
-	font-style: normal;
-	font-weight: $font-weight-normal;
-	left: 0;
-	letter-spacing: normal;
-	line-break: auto;
-	line-height: $line-height-base;
-	max-width: $popover-max-width;
-	position: absolute;
-	text-align: left;
-	text-decoration: none;
-	text-shadow: none;
-	text-transform: none;
-	top: 0;
-	white-space: normal;
-	word-break: normal;
-	word-spacing: normal;
-	word-wrap: break-word;
-	z-index: $zindex-popover;
-
-	.arrow {
-		display: block;
-		height: $popover-arrow-height;
-		margin: 0 $popover-border-radius;
-		position: absolute;
-		width: $popover-arrow-width;
-
-		&::before,
-		&::after {
-			border-color: transparent;
-			border-style: solid;
-			content: '';
-			display: block;
-			position: absolute;
-		}
-	}
+	@include clay-popover-variant($popover);
 }
 
 %bs-popover-bottom {
@@ -179,43 +135,24 @@
 	@extend %bs-popover-top !optional;
 }
 
-.popover {
-	.inline-scroller {
-		max-height: $popover-inline-scroller-max-height;
-	}
-}
-
-.popover-header {
-	color: $popover-header-color;
-	background-color: $popover-header-bg;
-	border-bottom: $popover-border-width solid
-		clay-darken($popover-header-bg, 5%);
-	@include border-top-radius($popover-inner-border-radius);
-}
-
 .popover-header {
-	border-color: $popover-header-border-color;
+	@include clay-css($popover-header);
 
-	@include border-top-radius($popover-offset-border-width);
+	&::before {
+		@include clay-css(map-get($popover-header, before));
+	}
 
-	font-size: $popover-header-font-size;
-	font-weight: $popover-header-font-weight;
-	margin-bottom: $popover-header-margin-y;
-	margin-left: $popover-header-margin-x;
-	margin-right: $popover-header-margin-x;
-	margin-top: $popover-header-margin-y;
-	padding: $popover-header-padding-y $popover-header-padding-x;
+	&::after {
+		@include clay-css(map-get($popover-header, after));
+	}
 
 	&:empty {
-		display: none;
+		@include clay-css(map-get($popover-header, empty));
 	}
 }
 
 .popover-body {
-	@include border-bottom-radius($popover-offset-border-width);
-
-	color: $popover-body-color;
-	padding: $popover-body-padding-y $popover-body-padding-x;
+	@include clay-css($popover-body);
 }
 
 // Top
@@ -223,38 +160,15 @@
 .clay-popover-top,
 .clay-popover-top-left,
 .clay-popover-top-right {
-	margin-bottom: $popover-arrow-height;
-
-	.arrow {
-		bottom: calc(
-			(#{$popover-arrow-height} + #{$popover-border-width}) * -1
-		);
-		margin: 0;
-
-		&::after {
-			border-top-color: $popover-arrow-color;
-			border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
-			bottom: $popover-border-width;
-		}
-
-		&::before {
-			border-top-color: $popover-arrow-outer-color;
-			border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
-			bottom: 0;
-		}
-	}
-}
-
-.clay-popover-top .arrow::after {
-	border-top-color: $popover-top-arrow-color;
+	@include clay-popover-variant($clay-popover-top);
 }
 
-.clay-popover-top-left .arrow::after {
-	border-top-color: $popover-top-left-arrow-color;
+.clay-popover-top-left {
+	@include clay-popover-variant($clay-popover-top-left);
 }
 
-.clay-popover-top-right .arrow::after {
-	border-top-color: $popover-top-right-arrow-color;
+.clay-popover-top-right {
+	@include clay-popover-variant($clay-popover-top-right);
 }
 
 // Right
@@ -262,40 +176,15 @@
 .clay-popover-right,
 .clay-popover-right-bottom,
 .clay-popover-right-top {
-	margin-left: $popover-arrow-height;
-
-	.arrow {
-		height: $popover-arrow-width;
-		left: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
-		margin: 0;
-		width: $popover-arrow-height;
-
-		&::after {
-			border-right-color: $popover-arrow-color;
-			border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
-				($popover-arrow-width * 0.5) 0;
-			left: $popover-border-width;
-		}
-
-		&::before {
-			border-right-color: $popover-arrow-outer-color;
-			border-width: ($popover-arrow-width * 0.5) $popover-arrow-height
-				($popover-arrow-width * 0.5) 0;
-			left: 0;
-		}
-	}
+	@include clay-popover-variant($clay-popover-right);
 }
 
-.clay-popover-right .arrow::after {
-	border-right-color: $popover-right-arrow-color;
-}
-
-.clay-popover-right-bottom .arrow::after {
-	border-right-color: $popover-right-bottom-arrow-color;
+.clay-popover-right-bottom {
+	@include clay-popover-variant($clay-popover-right-bottom);
 }
 
-.clay-popover-right-top .arrow::after {
-	border-right-color: $popover-right-top-arrow-color;
+.clay-popover-right-top {
+	@include clay-popover-variant($clay-popover-right-top);
 }
 
 // Bottom
@@ -303,38 +192,15 @@
 .clay-popover-bottom,
 .clay-popover-bottom-left,
 .clay-popover-bottom-right {
-	margin-top: $popover-arrow-height;
-
-	.arrow {
-		margin: 0;
-		top: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
-
-		&:after {
-			border-bottom-color: $popover-arrow-color;
-			border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
-				($popover-arrow-width * 0.5);
-			top: $popover-border-width;
-		}
-
-		&:before {
-			border-bottom-color: $popover-arrow-outer-color;
-			border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
-				($popover-arrow-width * 0.5);
-			top: 0;
-		}
-	}
-}
-
-.clay-popover-bottom .arrow::after {
-	border-bottom-color: $popover-bottom-arrow-color;
+	@include clay-popover-variant($clay-popover-bottom);
 }
 
-.clay-popover-bottom-left .arrow::after {
-	border-bottom-color: $popover-bottom-left-arrow-color;
+.clay-popover-bottom-left {
+	@include clay-popover-variant($clay-popover-bottom-left);
 }
 
-.clay-popover-bottom-right .arrow::after {
-	border-bottom-color: $popover-bottom-right-arrow-color;
+.clay-popover-bottom-right {
+	@include clay-popover-variant($clay-popover-bottom-right);
 }
 
 // Left
@@ -342,86 +208,13 @@
 .clay-popover-left,
 .clay-popover-left-bottom,
 .clay-popover-left-top {
-	margin-right: $popover-arrow-height;
-
-	.arrow {
-		height: $popover-arrow-width;
-		margin: 0;
-		right: calc((#{$popover-arrow-height} + #{$popover-border-width}) * -1);
-		width: $popover-arrow-height;
-
-		&::after {
-			border-left-color: $popover-arrow-color;
-			border-width: ($popover-arrow-width * 0.5) 0
-				($popover-arrow-width * 0.5) $popover-arrow-height;
-			right: $popover-border-width;
-		}
-
-		&::before {
-			border-left-color: $popover-arrow-outer-color;
-			border-width: ($popover-arrow-width * 0.5) 0
-				($popover-arrow-width * 0.5) $popover-arrow-height;
-			right: 0;
-		}
-	}
+	@include clay-popover-variant($clay-popover-left);
 }
 
-.clay-popover-left .arrow::after {
-	border-left-color: $popover-left-arrow-color;
+.clay-popover-left-bottom {
+	@include clay-popover-variant($clay-popover-left-bottom);
 }
 
-.clay-popover-left-bottom .arrow::after {
-	border-left-color: $popover-left-bottom-arrow-color;
-}
-
-.clay-popover-left-top .arrow::after {
-	border-left-color: $popover-left-top-arrow-color;
-}
-
-// Bottom / Top
-
-.clay-popover-bottom,
-.clay-popover-top {
-	.arrow {
-		left: 50%;
-		margin-left: math-sign($popover-arrow-width * 0.5);
-	}
-}
-
-.clay-popover-bottom-left,
-.clay-popover-top-left {
-	.arrow {
-		left: $popover-arrow-offset;
-	}
-}
-
-.clay-popover-bottom-right,
-.clay-popover-top-right {
-	.arrow {
-		right: $popover-arrow-offset;
-	}
-}
-
-// Right / Left
-
-.clay-popover-left,
-.clay-popover-right {
-	.arrow {
-		margin-top: math-sign($popover-arrow-height * 0.5);
-		top: 50%;
-	}
-}
-
-.clay-popover-left-bottom,
-.clay-popover-right-bottom {
-	.arrow {
-		bottom: $popover-arrow-offset;
-	}
-}
-
-.clay-popover-left-top,
-.clay-popover-right-top {
-	.arrow {
-		top: $popover-arrow-offset;
-	}
+.clay-popover-left-top {
+	@include clay-popover-variant($clay-popover-left-top);
 }

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

@@ -52,7 +52,7 @@
 
 // Simple Toggle Switch
 
-.simple-toggle-switch {
+.simple-toggle-switch.toggle-switch {
 	@include clay-toggle-switch-variant($simple-toggle-switch);
 
 	// deprecated
@@ -66,6 +66,6 @@
 	}
 }
 
-.simple-toggle-switch-reverse {
+.simple-toggle-switch-reverse.simple-toggle-switch {
 	@include clay-toggle-switch-variant($simple-toggle-switch-reverse);
 }

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

@@ -300,7 +300,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>',