@clayui/css 3.39.0 → 3.42.0

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

@@ -1,386 +1,71 @@
-// Simple Toggle Switch
-
-.simple-toggle-switch {
-	&.toggle-switch {
-		align-items: center;
-		display: inline-flex;
-	}
-
-	.toggle-switch-check + .toggle-switch-label {
-		margin-right: $simple-toggle-switch-label-spacer-x;
-	}
-
-	.toggle-switch-label + .toggle-switch-check-bar {
-		margin-left: $simple-toggle-switch-label-spacer-x;
-	}
-
-	.toggle-switch-label {
-		line-height: $simple-toggle-switch-label-line-height;
-		margin-bottom: 0;
-		max-width: calc(
-			100% - #{clay-data-label-text-position(
-					$toggle-switch-bar-width,
-					$toggle-switch-bar-padding
-				)}
-		);
-
-		@include clay-scale-component {
-			max-width: calc(
-				100% - #{clay-data-label-text-position(
-						$toggle-switch-bar-width-mobile,
-						$toggle-switch-bar-padding-mobile
-					)}
-			);
-		}
-	}
-}
-
-.simple-toggle-switch-reverse {
-	.toggle-switch-label {
-		margin-right: $simple-toggle-switch-label-spacer-x;
-	}
-
-	.toggle-switch-check-bar {
-		order: 5;
-
-		.toggle-switch-bar {
-			order: 0;
-		}
-	}
-
-	.toggle-switch-bar {
-		order: 5;
-	}
-}
-
 // Toggle Switch
 
-label.toggle-switch {
-	cursor: $toggle-switch-cursor;
-
-	&.disabled {
-		cursor: $toggle-switch-disabled-cursor;
-	}
-}
-
 .toggle-switch {
-	display: inline-block;
-	font-weight: $toggle-switch-font-weight;
-	max-width: 100%;
-	position: relative;
-
-	&.disabled {
-		.toggle-switch-label {
-			color: $toggle-switch-label-disabled-color;
-			cursor: $toggle-switch-disabled-cursor;
-		}
-
-		.toggle-switch-text {
-			color: $toggle-switch-text-disabled-color;
-		}
-	}
+	@include clay-toggle-switch-variant($toggle-switch);
 }
 
 .toggle-switch-check-bar {
-	display: inline-flex;
-	position: relative;
+	@include clay-css($toggle-switch-check-bar);
 }
 
 .toggle-switch-bar {
-	.toggle-switch-handle {
-		display: block;
-		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;
-	}
+	@include clay-toggle-switch-bar-variant($toggle-switch-bar);
 }
 
 .toggle-switch-check {
-	bottom: 0;
-	font-size: 62.5%;
-	height: $toggle-switch-bar-height;
-	opacity: 0;
-	position: absolute;
-	width: $toggle-switch-bar-width;
-	z-index: 2;
-
-	@include clay-scale-component {
-		height: $toggle-switch-bar-height-mobile;
-		width: $toggle-switch-bar-width-mobile;
-	}
-
-	&:empty ~ .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;
-
-		-ms-user-select: none;
-		user-select: none;
-
-		&:after {
-			background-color: $toggle-switch-button-bg;
-			border-color: $toggle-switch-button-border-color;
-
-			@include border-radius($toggle-switch-button-border-radius);
-
-			border-style: solid;
-			border-width: $toggle-switch-button-border-width;
-			bottom: $toggle-switch-bar-padding;
-			content: '';
-			display: block;
-			height: $toggle-switch-button-width;
-			left: $toggle-switch-bar-padding;
-			position: absolute;
-			top: $toggle-switch-bar-padding;
-			transition: $toggle-switch-transition;
-			width: $toggle-switch-button-width;
-		}
-
-		&:before {
-			background-color: $toggle-switch-bar-bg;
-			border-color: $toggle-switch-bar-border-color;
-
-			@include border-radius($toggle-switch-bar-border-radius);
-
-			border-style: solid;
-			border-width: $toggle-switch-bar-border-width;
-			bottom: 0;
-			content: ' ';
-			display: block;
-			left: 0;
-			position: absolute;
-			top: 0;
-			transition: $toggle-switch-transition;
-			width: $toggle-switch-bar-width;
-		}
-
-		.toggle-switch-handle {
-			&:after {
-				content: attr(data-label-off);
-				margin-left: clay-data-label-text-position(
-					$toggle-switch-bar-width,
-					$toggle-switch-bar-padding
-				);
-				transition: $toggle-switch-transition;
-				white-space: nowrap;
-			}
-
-			&:before {
-				transition: $toggle-switch-transition;
-			}
-		}
-
-		.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;
-			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;
-		}
-
-		.button-icon {
-			color: $toggle-switch-button-icon-color;
-		}
-
-		.button-icon-on {
-			opacity: 0;
-		}
-	}
-
-	&:checked ~ .toggle-switch-bar {
-		&:after {
-			background-color: $toggle-switch-button-on-bg;
-			border-color: $toggle-switch-button-on-border-color;
-
-			@include border-radius($toggle-switch-button-on-border-radius);
-
-			border-style: solid;
-			border-width: $toggle-switch-button-border-width;
-			left: $toggle-switch-bar-width - $toggle-switch-bar-padding -
-				$toggle-switch-button-width;
-		}
-
-		&:before {
-			background-color: $toggle-switch-bar-on-bg;
-			border-color: $toggle-switch-bar-on-border-color;
-
-			@include border-radius($toggle-switch-bar-border-radius);
-
-			border-style: solid;
-			border-width: $toggle-switch-bar-border-width;
-		}
-
-		.toggle-switch-handle:after {
-			content: attr(data-label-on);
-		}
-
-		.toggle-switch-icon {
-			color: $toggle-switch-bar-on-icon-color;
-		}
-
-		.button-icon {
-			color: $toggle-switch-button-on-icon-color;
-			left: $toggle-switch-bar-width - $toggle-switch-bar-padding -
-				$toggle-switch-button-width;
-		}
-
-		.button-icon-on,
-		.toggle-switch-icon-on {
-			opacity: 1;
-		}
-
-		.button-icon-off,
-		.toggle-switch-icon-off {
-			opacity: 0;
-		}
-	}
-
-	&:disabled,
-	&.disabled {
-		~ .toggle-switch-bar {
-			cursor: $toggle-switch-disabled-cursor;
-			opacity: $toggle-switch-disabled-opacity;
-		}
-	}
-
-	&:focus ~ .toggle-switch-bar:before {
-		box-shadow: $toggle-switch-bar-focus-box-shadow;
-	}
+	@include clay-toggle-switch-check-variant($toggle-switch-check);
 }
 
 .toggle-switch-label {
-	display: block;
-	margin-bottom: 2px;
+	@include clay-css($toggle-switch-label);
 }
 
 .toggle-switch-text {
-	display: block;
-	font-size: $toggle-switch-text-font-size;
+	@include clay-css($toggle-switch-text);
 }
 
 .toggle-switch-text-left {
-	display: inline-flex;
-	line-height: $toggle-switch-bar-height;
-	margin-right: 8px;
-}
+	$breakpoint-down: setter(
+		map-get($toggle-switch-text-left, breakpoint-down),
+		sm
+	);
 
-.toggle-switch-text-right {
-	display: inline-flex;
-	line-height: $toggle-switch-bar-height;
-	margin-left: 8px;
-}
+	@include clay-css($toggle-switch-text-left);
 
-@include clay-scale-component {
-	.toggle-switch-bar {
-		.toggle-switch-handle {
-			min-width: $toggle-switch-bar-width-mobile;
-		}
-
-		.toggle-switch-icon {
-			font-size: $toggle-switch-bar-font-size-mobile;
-		}
-
-		.button-icon {
-			font-size: $toggle-switch-button-font-size-mobile;
-		}
+	@include media-breakpoint-down($breakpoint-down) {
+		@include clay-css(map-get($toggle-switch-text-left, mobile));
 	}
+}
 
-	.toggle-switch-check {
-		&:empty ~ .toggle-switch-bar {
-			height: $toggle-switch-bar-height-mobile;
-			line-height: $toggle-switch-bar-height-mobile;
-			text-indent: 0;
-
-			&:after {
-				bottom: $toggle-switch-bar-padding-mobile;
-				height: $toggle-switch-button-width-mobile;
-				left: $toggle-switch-bar-padding-mobile;
-				top: $toggle-switch-bar-padding-mobile;
-				width: $toggle-switch-button-width-mobile;
-			}
-
-			&:before {
-				width: $toggle-switch-bar-width-mobile;
-			}
-
-			.toggle-switch-handle:after {
-				margin-left: clay-data-label-text-position(
-					$toggle-switch-bar-width-mobile,
-					$toggle-switch-bar-padding-mobile
-				);
-			}
+.toggle-switch-text-right {
+	$breakpoint-down: setter(
+		map-get($toggle-switch-text-right, breakpoint-down),
+		sm
+	);
 
-			.toggle-switch-icon {
-				left: $toggle-switch-bar-padding-mobile;
-				line-height: $toggle-switch-button-width-mobile;
-				top: $toggle-switch-bar-padding-mobile;
-				width: $toggle-switch-button-width-mobile;
-			}
+	@include clay-css($toggle-switch-text-right);
 
-			.toggle-switch-icon-on {
-				left: $toggle-switch-bar-padding-mobile;
-			}
+	@include media-breakpoint-down($breakpoint-down) {
+		@include clay-css(map-get($toggle-switch-text-right, mobile));
+	}
+}
 
-			.toggle-switch-icon-off {
-				left: $toggle-switch-bar-width-mobile -
-					$toggle-switch-bar-padding-mobile -
-					$toggle-switch-button-width-mobile;
-			}
-		}
+// Simple Toggle Switch
 
-		&:checked ~ .toggle-switch-bar {
-			&:after {
-				left: $toggle-switch-bar-width-mobile -
-					$toggle-switch-bar-padding-mobile -
-					$toggle-switch-button-width-mobile;
-			}
+.simple-toggle-switch.toggle-switch {
+	@include clay-toggle-switch-variant($simple-toggle-switch);
 
-			.toggle-switch-handle:after {
-				margin-left: clay-data-label-text-position(
-					$toggle-switch-bar-width-mobile,
-					$toggle-switch-bar-padding-mobile
-				);
-			}
+	// deprecated
 
-			.button-icon {
-				left: $toggle-switch-bar-width-mobile -
-					$toggle-switch-bar-padding-mobile -
-					$toggle-switch-button-width-mobile;
-			}
-		}
+	.toggle-switch-check + .toggle-switch-label {
+		margin-right: $simple-toggle-switch-label-spacer-x;
 	}
 
-	.toggle-switch-text-left,
-	.toggle-switch-text-right {
-		line-height: $toggle-switch-bar-height-mobile;
+	.toggle-switch-label + .toggle-switch-check-bar {
+		margin-left: $simple-toggle-switch-label-spacer-x;
 	}
 }
+
+.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/components/_type.scss

@@ -202,7 +202,7 @@ strong {
 	@include clay-css($c-kbd-group);
 
 	> .c-kbd {
-		font-size: inherit;
+		@include clay-css(setter(map-get($c-kbd-group, c-kbd), ()));
 	}
 }
 
@@ -265,6 +265,10 @@ strong {
 
 .c-kbd-group-sm {
 	@include clay-css($c-kbd-group-sm);
+
+	> .c-kbd {
+		@include clay-css(setter(map-get($c-kbd-group-sm, c-kbd), ()));
+	}
 }
 
 .c-kbd-sm,
@@ -280,6 +284,10 @@ strong {
 
 .c-kbd-group-lg {
 	@include clay-css($c-kbd-group-lg);
+
+	> .c-kbd {
+		@include clay-css(setter(map-get($c-kbd-group-lg, c-kbd), ()));
+	}
 }
 
 .c-kbd-lg,

package/src/scss/functions/_global-functions.scss

@@ -8,6 +8,24 @@
 @import '_lx-icons-generated.scss';
 @import '_type-conversion-functions.scss';
 
+/// A helper function that calculates text-indent of data-label-on and data-label-off in a `.toggle-switch`.
+/// @param {Number} $toggle-switch-width - Width of switch bar
+/// @param {Number} $toggle-switch-padding - Space between button and bar
+/// @param {Number} $label-spacer-x[8px] - Space between toggle-switch-bar and data-label
+
+@function clay-data-label-text-position(
+	$toggle-switch-width,
+	$toggle-switch-padding,
+	$label-spacer-x: 8px
+) {
+	@if ($toggle-switch-padding < 0) {
+		$toggle-switch-width: $toggle-switch-width +
+			abs($toggle-switch-padding);
+	}
+
+	@return $toggle-switch-width + $label-spacer-x;
+}
+
 /// A function that returns a new map with all the keys and values including nested keys and values from both `$map1` and `$map2`. If both `$map1` and `$map2` have the same key, `$map2`’s value takes precedence.
 /// @param {Map, Null} $map1[()]
 /// @param {Map, Null} $map2[()]