@clayui/css 3.40.1 → 3.44.0

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

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

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,