@clayui/css 3.38.0 → 3.41.0

package/src/scss/cadmin/components/_stickers.scss

@@ -1,44 +1,5 @@
 .sticker {
-	align-items: center;
-	border-color: $cadmin-sticker-border-color;
-
-	@include border-radius($cadmin-sticker-border-radius);
-
-	border-style: $cadmin-sticker-border-style;
-	border-width: $cadmin-sticker-border-width;
-	color: $cadmin-sticker-color;
-
-	@include clay-monospace($cadmin-sticker-size);
-
-	display: inline-flex;
-	font-size: $cadmin-sticker-font-size;
-	font-weight: $cadmin-sticker-font-weight;
-	justify-content: center;
-	position: relative;
-	text-align: center;
-	vertical-align: middle;
-
-	> .inline-item {
-		font-size: $cadmin-sticker-inline-item-font-size;
-		justify-content: center;
-	}
-
-	> .inline-item .lexicon-icon,
-	.lexicon-icon {
-		margin-top: 0;
-	}
-
-	&.rounded .sticker-overlay {
-		border-radius: $cadmin-rounded-border-radius;
-	}
-
-	&.rounded-circle .sticker-overlay {
-		border-radius: $cadmin-rounded-circle-border-radius;
-	}
-
-	&.rounded-0 .sticker-overlay {
-		border-radius: 0;
-	}
+	@include clay-sticker-variant($cadmin-sticker);
 }
 
 .sticker-img {
@@ -47,70 +8,55 @@
 }
 
 .sticker-overlay {
-	align-items: center;
-
-	@include border-radius($cadmin-sticker-border-radius);
-
-	bottom: 0;
-	display: flex;
-	justify-content: center;
-	left: 0;
-	overflow: hidden;
-	position: absolute;
-	right: 0;
-	top: 0;
+	@include clay-css($cadmin-sticker-overlay);
 }
 
 // Sticker Positions
 
 .sticker-bottom-left {
-	bottom: $cadmin-sticker-inside-offset;
-	left: $cadmin-sticker-inside-offset;
-	position: absolute;
-	right: auto;
-	top: auto;
+	@include clay-css($cadmin-sticker-bottom-left);
 }
 
 .sticker-bottom-right {
-	bottom: $cadmin-sticker-inside-offset;
-	left: auto;
-	position: absolute;
-	right: $cadmin-sticker-inside-offset;
-	top: auto;
+	@include clay-css($cadmin-sticker-bottom-right);
 }
 
 .sticker-top-left {
-	left: $cadmin-sticker-inside-offset;
-	position: absolute;
-	top: $cadmin-sticker-inside-offset;
+	@include clay-css($cadmin-sticker-top-left);
 }
 
 .sticker-top-right {
-	left: auto;
-	position: absolute;
-	right: $cadmin-sticker-inside-offset;
-	top: $cadmin-sticker-inside-offset;
+	@include clay-css($cadmin-sticker-top-right);
 }
 
 .sticker-outside {
-	left: $cadmin-sticker-outside-offset;
-	top: $cadmin-sticker-outside-offset;
+	@include clay-css($cadmin-sticker-outside);
 
 	&.sticker-bottom-left {
-		bottom: $cadmin-sticker-outside-offset;
-		top: auto;
+		$bottom-left: setter(
+			map-get($cadmin-sticker-outside, sticker-bottom-left),
+			()
+		);
+
+		@include clay-css($bottom-left);
 	}
 
 	&.sticker-bottom-right {
-		bottom: $cadmin-sticker-outside-offset;
-		left: auto;
-		right: $cadmin-sticker-outside-offset;
-		top: auto;
+		$bottom-right: setter(
+			map-get($cadmin-sticker-outside, sticker-bottom-right),
+			()
+		);
+
+		@include clay-css($bottom-right);
 	}
 
 	&.sticker-top-right {
-		left: auto;
-		right: $cadmin-sticker-outside-offset;
+		$top-right: setter(
+			map-get($cadmin-sticker-outside, sticker-top-right),
+			()
+		);
+
+		@include clay-css($top-right);
 	}
 }
 
@@ -122,31 +68,30 @@
 
 // Sticker Sizes
 
-.sticker-sm {
-	@include clay-sticker-size($cadmin-sticker-sm);
-}
-
-.sticker-lg {
-	@include clay-sticker-size($cadmin-sticker-lg);
-}
+@each $cadmin-selector, $cadmin-value in $cadmin-sticker-sizes {
+	%#{$cadmin-selector} {
+		@include clay-sticker-variant($cadmin-value);
+	}
 
-.sticker-xl {
-	@include clay-sticker-size($cadmin-sticker-xl);
+	.#{$cadmin-selector} {
+		@extend %#{$cadmin-selector} !optional;
+	}
 }
 
 // Sticker Variants
 
 @each $cadmin-color, $cadmin-value in $cadmin-sticker-palette {
+	%sticker-#{$cadmin-color} {
+		@include clay-sticker-variant($cadmin-value);
+	}
+
 	.sticker-#{$cadmin-color} {
-		background-color: map-get($cadmin-value, bg);
-		border-color: map-get($cadmin-value, border-color);
-		color: map-get($cadmin-value, color);
+		@extend %sticker-#{$cadmin-color} !optional;
 	}
 }
 
 // Sticker Circle
 
-.sticker-circle,
-.sticker-circle .sticker-overlay {
-	@include border-radius($cadmin-sticker-circle-border-radius);
+.sticker-circle {
+	@include clay-sticker-variant($cadmin-sticker-circle);
 }

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

@@ -70,7 +70,7 @@
 		&::before {
 			border-top-color: $cadmin-tooltip-arrow-color;
 			border-width: $cadmin-tooltip-arrow-height
-				($cadmin-tooltip-arrow-width / 2) 0;
+				($cadmin-tooltip-arrow-width * 0.5) 0;
 			top: 0;
 		}
 	}
@@ -86,8 +86,9 @@
 
 		&::before {
 			border-right-color: $cadmin-tooltip-arrow-color;
-			border-width: ($cadmin-tooltip-arrow-width / 2)
-				$cadmin-tooltip-arrow-height ($cadmin-tooltip-arrow-width / 2) 0;
+			border-width: ($cadmin-tooltip-arrow-width * 0.5)
+				$cadmin-tooltip-arrow-height ($cadmin-tooltip-arrow-width * 0.5)
+				0;
 			right: 0;
 		}
 	}
@@ -101,7 +102,7 @@
 
 		&::before {
 			border-bottom-color: $cadmin-tooltip-arrow-color;
-			border-width: 0 ($cadmin-tooltip-arrow-width / 2)
+			border-width: 0 ($cadmin-tooltip-arrow-width * 0.5)
 				$cadmin-tooltip-arrow-height;
 			bottom: 0;
 		}
@@ -118,8 +119,8 @@
 
 		&::before {
 			border-left-color: $cadmin-tooltip-arrow-color;
-			border-width: ($cadmin-tooltip-arrow-width / 2) 0
-				($cadmin-tooltip-arrow-width / 2) $cadmin-tooltip-arrow-height;
+			border-width: ($cadmin-tooltip-arrow-width * 0.5) 0
+				($cadmin-tooltip-arrow-width * 0.5) $cadmin-tooltip-arrow-height;
 			left: 0;
 		}
 	}
@@ -151,7 +152,7 @@
 .clay-tooltip-top {
 	.arrow {
 		left: 50%;
-		margin-left: -($cadmin-tooltip-arrow-width / 2);
+		margin-left: math-sign($cadmin-tooltip-arrow-width * 0.5);
 	}
 }
 
@@ -172,7 +173,7 @@
 .clay-tooltip-left,
 .clay-tooltip-right {
 	.arrow {
-		margin-top: -($cadmin-tooltip-arrow-width / 2);
+		margin-top: math-sign($cadmin-tooltip-arrow-width * 0.5);
 		top: 50%;
 	}
 }
@@ -203,7 +204,7 @@
 
 		&::before {
 			border-bottom-color: $cadmin-tooltip-arrow-color;
-			border-width: 0 ($cadmin-tooltip-arrow-width / 2)
+			border-width: 0 ($cadmin-tooltip-arrow-width * 0.5)
 				$cadmin-tooltip-arrow-height;
 			bottom: 0;
 		}
@@ -231,8 +232,8 @@
 
 		&::before {
 			border-left-color: $cadmin-tooltip-arrow-color;
-			border-width: ($cadmin-tooltip-arrow-width / 2) 0
-				($cadmin-tooltip-arrow-width / 2) $cadmin-tooltip-arrow-height;
+			border-width: ($cadmin-tooltip-arrow-width * 0.5) 0
+				($cadmin-tooltip-arrow-width * 0.5) $cadmin-tooltip-arrow-height;
 			left: 0;
 		}
 	}
@@ -259,8 +260,9 @@
 
 		&::before {
 			border-right-color: $cadmin-tooltip-arrow-color;
-			border-width: ($cadmin-tooltip-arrow-width / 2)
-				$cadmin-tooltip-arrow-height ($cadmin-tooltip-arrow-width / 2) 0;
+			border-width: ($cadmin-tooltip-arrow-width * 0.5)
+				$cadmin-tooltip-arrow-height ($cadmin-tooltip-arrow-width * 0.5)
+				0;
 			right: 0;
 		}
 	}
@@ -286,7 +288,7 @@
 		&::before {
 			border-top-color: $cadmin-tooltip-arrow-color;
 			border-width: $cadmin-tooltip-arrow-height
-				($cadmin-tooltip-arrow-width / 2) 0;
+				($cadmin-tooltip-arrow-width * 0.5) 0;
 			top: 0;
 		}
 	}