@clayui/css 3.38.0 → 3.41.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;
-}
-
-.toggle-switch-text-right {
-	display: inline-flex;
-	line-height: $toggle-switch-bar-height;
-	margin-left: 8px;
-}
+	$breakpoint-down: setter(
+		map-get($toggle-switch-text-left, breakpoint-down),
+		sm
+	);
 
-@include clay-scale-component {
-	.toggle-switch-bar {
-		.toggle-switch-handle {
-			min-width: $toggle-switch-bar-width-mobile;
-		}
+	@include clay-css($toggle-switch-text-left);
 
-		.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 {
+	@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 {
+	@include clay-toggle-switch-variant($simple-toggle-switch-reverse);
+}

package/src/scss/components/_tooltip.scss

@@ -69,7 +69,7 @@
 
 		&::before {
 			border-top-color: $tooltip-arrow-color;
-			border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+			border-width: $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
 			top: 0;
 		}
 	}
@@ -85,8 +85,8 @@
 
 		&::before {
 			border-right-color: $tooltip-arrow-color;
-			border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height
-				($tooltip-arrow-width / 2) 0;
+			border-width: ($tooltip-arrow-width * 0.5) $tooltip-arrow-height
+				($tooltip-arrow-width * 0.5) 0;
 			right: 0;
 		}
 	}
@@ -100,7 +100,7 @@
 
 		&::before {
 			border-bottom-color: $tooltip-arrow-color;
-			border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+			border-width: 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
 			bottom: 0;
 		}
 	}
@@ -116,8 +116,8 @@
 
 		&::before {
 			border-left-color: $tooltip-arrow-color;
-			border-width: ($tooltip-arrow-width / 2) 0
-				($tooltip-arrow-width / 2) $tooltip-arrow-height;
+			border-width: ($tooltip-arrow-width * 0.5) 0
+				($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
 			left: 0;
 		}
 	}
@@ -149,7 +149,7 @@
 .clay-tooltip-top {
 	.arrow {
 		left: 50%;
-		margin-left: -($tooltip-arrow-width / 2);
+		margin-left: math-sign($tooltip-arrow-width * 0.5);
 	}
 }
 
@@ -170,7 +170,7 @@
 .clay-tooltip-left,
 .clay-tooltip-right {
 	.arrow {
-		margin-top: -($tooltip-arrow-width / 2);
+		margin-top: math-sign($tooltip-arrow-width * 0.5);
 		top: 50%;
 	}
 }
@@ -201,7 +201,7 @@
 
 		&::before {
 			border-bottom-color: $tooltip-arrow-color;
-			border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+			border-width: 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
 			bottom: 0;
 		}
 	}
@@ -228,8 +228,8 @@
 
 		&::before {
 			border-left-color: $tooltip-arrow-color;
-			border-width: ($tooltip-arrow-width / 2) 0
-				($tooltip-arrow-width / 2) $tooltip-arrow-height;
+			border-width: ($tooltip-arrow-width * 0.5) 0
+				($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
 			left: 0;
 		}
 	}
@@ -256,8 +256,8 @@
 
 		&::before {
 			border-right-color: $tooltip-arrow-color;
-			border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height
-				($tooltip-arrow-width / 2) 0;
+			border-width: ($tooltip-arrow-width * 0.5) $tooltip-arrow-height
+				($tooltip-arrow-width * 0.5) 0;
 			right: 0;
 		}
 	}
@@ -282,7 +282,7 @@
 
 		&::before {
 			border-top-color: $tooltip-arrow-color;
-			border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+			border-width: $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
 			top: 0;
 		}
 	}

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/components/_utilities-functional-important.scss

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

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

@@ -2,10 +2,30 @@
 /// @group globals
 ////
 
+@import '_polyfills.scss';
+
 @import '_color-functions.scss';
 @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[()]
@@ -125,7 +145,7 @@
 		$str1: '#{$str1}#{$offset} + ';
 	}
 
-	$str2: '(((#{$font-size} * #{$line-height}) - 1em) / 2)';
+	$str2: '(((#{$font-size} * #{$line-height}) - 1em) * 0.5)';
 
 	@return (calc(#{$str1}#{$str2}));
 }
@@ -140,10 +160,10 @@
 @function clay-px-to-rem($number, $add-unit: false, $base: 16) {
 	@if type-of($number) == 'number' {
 		@if unit($number) == 'px' {
-			$number: $number / 1px;
-			$number: $number / $base;
+			$number: clay-div($number, 1px);
+			$number: clay-div($number, $base);
 		} @else if unitless($number) {
-			$number: $number / $base;
+			$number: clay-div($number, $base);
 		} @else {
 			@debug 'Unable to convert: #{$number} should be a `px` value.';
 		}
@@ -467,7 +487,7 @@
 	$g: clay-green($color);
 	$b: clay-blue($color);
 
-	$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+	$yiq: (($r * 299) + ($g * 587) + ($b * 114)) * 0.001;
 
 	$dark: setter(
 		$dark,
@@ -739,7 +759,7 @@
 	$index: 0;
 	$slice: 2000;
 
-	$loops: ceil(str-length($svg) / $slice);
+	$loops: ceil(clay-div(str-length($svg), $slice));
 
 	@for $i from 1 through $loops {
 		$chunk: str-slice($svg, $index, $index + $slice - 1);