@clayui/css 3.44.2 → 3.45.0

package/src/scss/cadmin/components/_treeview.scss

@@ -2,61 +2,45 @@
 	@include clay-css($cadmin-treeview);
 
 	.btn {
-		$btn: setter(map-get($cadmin-treeview, btn), ());
-
-		@include clay-button-variant($btn);
+		@include clay-button-variant(map-get($cadmin-treeview, btn));
 	}
 
 	.btn-monospaced {
-		$btn-monospaced: setter(map-get($cadmin-treeview, btn-monospaced), ());
-
-		@include clay-button-variant($btn-monospaced);
+		@include clay-button-variant(map-get($cadmin-treeview, btn-monospaced));
 	}
 
 	.custom-control {
-		$custom-control: setter(map-get($cadmin-treeview, custom-control), ());
-
-		@include clay-css($custom-control);
+		@include clay-css(map-get($cadmin-treeview, custom-control));
 	}
 
 	.component-expander {
-		$component-expander: setter(
-			map-get($cadmin-treeview, component-expander),
-			()
+		@include clay-button-variant(
+			map-get($cadmin-treeview, component-expander)
 		);
 
-		@include clay-button-variant($component-expander);
-
 		.lexicon-icon:not(.component-expanded-d-none) {
 			display: none;
 		}
 	}
 
 	.component-action {
-		$component-action: setter(
-			map-get($cadmin-treeview, component-action),
-			()
+		@include clay-button-variant(
+			map-get($cadmin-treeview, component-action)
 		);
-
-		@include clay-button-variant($component-action);
 	}
 
 	.component-icon {
-		$component-icon: setter(map-get($cadmin-treeview, component-icon), ());
-
-		@include clay-css($component-icon);
+		@include clay-css(map-get($cadmin-treeview, component-icon));
 
 		.lexicon-icon {
-			$lexicon-icon: setter(map-get($component-icon, lexicon-icon), ());
-
-			@include clay-css($lexicon-icon);
+			@include clay-css(
+				map-deep-get($cadmin-treeview, component-icon, lexicon-icon)
+			);
 		}
 	}
 
 	.component-text {
-		$component-text: setter(map-get($cadmin-treeview, component-text), ());
-
-		@include clay-css($component-text);
+		@include clay-css(map-get($cadmin-treeview, component-text));
 	}
 
 	&.show-component-expander-on-hover {
@@ -64,124 +48,107 @@
 
 		&:hover,
 		&.hover {
-			$hover: setter(
+			@include clay-css(
 				map-get(
 					$cadmin-treeview-show-component-expander-on-hover,
 					hover
-				),
-				()
+				)
 			);
 
-			@include clay-css($hover);
-
 			.component-expander {
-				$component-expander: setter(
-					map-get($hover, component-expander),
-					()
+				@include clay-css(
+					map-deep-get(
+						$cadmin-treeview-show-component-expander-on-hover,
+						hover,
+						component-expander
+					)
 				);
-
-				@include clay-css($component-expander);
 			}
 		}
 
 		.treeview-link {
-			$treeview-link: setter(
+			@include clay-css(
 				map-get(
 					$cadmin-treeview-show-component-expander-on-hover,
 					treeview-link
-				),
-				()
+				)
 			);
 
-			@include clay-css($treeview-link);
-
 			&:focus,
 			&.focus {
-				$focus: setter(map-get($treeview-link, focus), ());
-
-				@include clay-css($focus);
+				@include clay-css(
+					map-deep-get(
+						$cadmin-treeview-show-component-expander-on-hover,
+						treeview-link,
+						focus
+					)
+				);
 
 				.component-expander {
-					$component-expander: setter(
-						map-get($focus, component-expander)
+					@include clay-css(
+						map-deep-get(
+							$cadmin-treeview-show-component-expander-on-hover,
+							treeview-link,
+							focus,
+							component-expander
+						)
 					);
-
-					@include clay-css($component-expander);
 				}
 			}
 		}
 
 		.component-expander {
-			$component-expander: setter(
+			@include clay-css(
 				map-get(
 					$cadmin-treeview-show-component-expander-on-hover,
 					component-expander
-				),
-				()
+				)
 			);
-
-			@include clay-css($component-expander);
 		}
 	}
 }
 
 .treeview-group {
-	$group: setter(map-get($cadmin-treeview, treeview-group), ());
-
-	@include clay-css($group);
+	@include clay-css(map-get($cadmin-treeview, treeview-group));
 }
 
 .treeview-item {
-	$item: setter(map-get($cadmin-treeview, treeview-item), ());
-
-	@include clay-css($item);
+	@include clay-css(map-get($cadmin-treeview, treeview-item));
 
 	&:last-child {
-		$last-child: setter(map-get($item, last-child), ());
-
-		@include clay-css($last-child);
-	}
-
-	&.disabled {
-		cursor: $cadmin-disabled-cursor;
-		opacity: 0.4;
-
-		.treeview-dropping {
-			&-bottom,
-			&-middle,
-			&-top {
-				border-color: transparent;
-				background-color: transparent;
-			}
-		}
+		@include clay-css(
+			map-deep-get($cadmin-treeview, treeview-item, last-child)
+		);
 	}
 }
 
 .treeview-link {
-	$link: setter(map-get($cadmin-treeview, link), ());
-
-	@include clay-link($link);
-
-	&.treeview-dropping {
-		$dropping: setter(map-get($link, dropping), ());
-
-		&-bottom {
-			$dropping-bottom: setter(map-get($dropping, bottom), ());
-
-			@include clay-css($dropping-bottom);
-		}
-
-		&-middle {
-			$dropping-middle: setter(map-get($dropping, middle), ());
-
-			@include clay-css($dropping-middle);
-		}
+	@include clay-link(map-get($cadmin-treeview, treeview-link));
+
+	&.treeview-dropping-bottom {
+		@include clay-link(
+			map-deep-get(
+				$cadmin-treeview,
+				treeview-link,
+				treeview-dropping-bottom
+			)
+		);
+	}
 
-		&-top {
-			$dropping-top: setter(map-get($dropping, top), ());
+	&.treeview-dropping-middle {
+		@include clay-link(
+			map-deep-get(
+				$cadmin-treeview,
+				treeview-link,
+				treeview-dropping-middle
+			)
+		);
+	}
 
-			@include clay-css($dropping-top);
-		}
+	&.treeview-dropping-top {
+		@include clay-link(
+			map-deep-get($cadmin-treeview, treeview-link, treeview-dropping-top)
+		);
 	}
 
 	&.hover,
@@ -211,25 +178,38 @@
 	@include clay-css($cadmin-treeview-nested-margins);
 
 	.treeview-group {
-		$group: setter(
-			map-get($cadmin-treeview-nested-margins, treeview-group),
-			()
+		@include clay-css(
+			map-get($cadmin-treeview-nested-margins, treeview-group)
 		);
 
-		@include clay-css($group);
-
 		.treeview-item {
-			$item: setter(map-get($group, treeview-item), ());
-
-			@include clay-css($item);
+			@include clay-css(
+				map-deep-get(
+					$cadmin-treeview-nested-margins,
+					treeview-group,
+					treeview-item
+				)
+			);
 		}
 	}
 }
 
-.treeview-dragging {
-	$dragging: setter(map-get($cadmin-treeview, treeview-dragging), ());
+.treeview-item-dragging {
+	@include clay-css(map-get($cadmin-treeview, treeview-item-dragging));
+
+	.treeview-link {
+		@include clay-link(
+			map-deep-get(
+				$cadmin-treeview,
+				treeview-item-dragging,
+				treeview-link
+			)
+		);
+	}
+}
 
-	@include clay-css($dragging);
+.treeview-dragging {
+	@include clay-css(map-get($cadmin-treeview, treeview-dragging));
 }
 
 // Treeview Variants
@@ -238,90 +218,65 @@
 	@include clay-css($cadmin-treeview-light);
 
 	.btn {
-		$btn: setter(map-get($cadmin-treeview-light, btn), ());
-
-		@include clay-button-variant($btn);
+		@include clay-button-variant(map-get($cadmin-treeview-light, btn));
 	}
 
 	.btn-monospaced {
-		$btn-monospaced: setter(
-			map-get($cadmin-treeview-light, btn-monospaced),
-			()
+		@include clay-button-variant(
+			map-get($cadmin-treeview-light, btn-monospaced)
 		);
-
-		@include clay-button-variant($btn-monospaced);
 	}
 
 	.component-expander {
-		$component-expander: setter(
-			map-get($cadmin-treeview-light, component-expander),
-			()
+		@include clay-button-variant(
+			map-get($cadmin-treeview-light, component-expander)
 		);
 
-		@include clay-button-variant($component-expander);
-
 		&.btn-secondary {
-			$btn-secondary: setter(
-				map-get($component-expander, btn-secondary),
-				()
+			@include clay-button-variant(
+				map-deep-get(
+					$cadmin-treeview-light,
+					component-expander,
+					btn-secondary
+				)
 			);
-
-			@include clay-button-variant($btn-secondary);
 		}
 	}
 
 	.custom-control {
-		$custom-control: setter(
-			map-get($cadmin-treeview-light, custom-control),
-			()
-		);
-
-		@include clay-css($custom-control);
+		@include clay-css(map-get($cadmin-treeview-light, custom-control));
 	}
 
 	.treeview-group {
-		$group: setter(map-get($cadmin-treeview-light, treeview-group), ());
-
-		@include clay-css($group);
+		@include clay-css(map-get($cadmin-treeview-light, treeview-group));
 	}
 
 	.treeview-item {
-		$item: setter(map-get($cadmin-treeview-light, treeview-item), ());
-
-		@include clay-css($item);
+		@include clay-css(map-get($cadmin-treeview-light, treeview-item));
 
 		&:last-child {
-			$last-child: setter(map-get($item, last-child), ());
-
-			@include clay-css($last-child);
+			@include clay-css(
+				map-deep-get($cadmin-treeview-light, treeview-item, last-child)
+			);
 		}
 	}
 
 	.treeview-link {
-		$link: setter(map-get($cadmin-treeview-light, link), ());
-
-		@include clay-link($link);
+		@include clay-link(map-get($cadmin-treeview-light, treeview-link));
 	}
 
 	.component-action {
-		$component-action: setter(
-			map-get($cadmin-treeview-light, component-action),
-			()
+		@include clay-button-variant(
+			map-get($cadmin-treeview-light, component-action)
 		);
-
-		@include clay-button-variant($component-action);
 	}
 
 	.component-icon {
-		$component: setter(map-get($cadmin-treeview-light, component), ());
-
-		@include clay-css($component);
+		@include clay-css(map-get($cadmin-treeview-light, component));
 	}
 
 	.component-text {
-		$component: setter(map-get($cadmin-treeview-light, component), ());
-
-		@include clay-css($component);
+		@include clay-css(map-get($cadmin-treeview-light, component));
 	}
 }
 
@@ -329,95 +284,64 @@
 	@include clay-css($cadmin-treeview-dark);
 
 	.btn {
-		$btn: setter(map-get($cadmin-treeview-dark, btn), ());
-
-		@include clay-button-variant($btn);
+		@include clay-button-variant(map-get($cadmin-treeview-dark, btn));
 	}
 
 	.btn-monospaced {
-		$btn-monospaced: setter(
-			map-get($cadmin-treeview-dark, btn-monospaced),
-			()
+		@include clay-button-variant(
+			map-get($cadmin-treeview-dark, btn-monospaced)
 		);
-
-		@include clay-button-variant($btn-monospaced);
 	}
 
 	.component-expander {
-		$component-expander: setter(
-			map-get($cadmin-treeview-dark, component-expander),
-			()
+		@include clay-button-variant(
+			map-get($cadmin-treeview-dark, component-expander)
 		);
 
-		@include clay-button-variant($component-expander);
-
 		&.btn-secondary {
-			$btn-secondary: setter(
-				map-get($component-expander, btn-secondary),
-				()
+			@include clay-button-variant(
+				map-deep-get(
+					$cadmin-treeview-dark,
+					component-expander,
+					btn-secondary
+				)
 			);
-
-			@include clay-button-variant($btn-secondary);
 		}
 	}
 
 	.custom-control {
-		$custom-control: setter(
-			map-get($cadmin-treeview-dark, custom-control),
-			()
-		);
-
-		@include clay-css($custom-control);
+		@include clay-css(map-get($cadmin-treeview-dark, custom-control));
 	}
 
 	.treeview-group {
-		$group: setter(map-get($cadmin-treeview-dark, treeview-group), ());
-
-		@include clay-css($group);
+		@include clay-css(map-get($cadmin-treeview-dark, treeview-group));
 	}
 
 	.treeview-item {
-		$item: setter(map-get($cadmin-treeview-dark, treeview-item), ());
-
-		@include clay-css($item);
+		@include clay-css(map-get($cadmin-treeview-dark, treeview-item));
 
 		&:last-child {
-			$last-child: setter(map-get($item, last-child), ());
-
-			@include clay-css($last-child);
+			@include clay-css(
+				map-deep-get($cadmin-treeview-dark, treeview-item, last-child)
+			);
 		}
 	}
 
 	.treeview-link {
-		$link: setter(map-get($cadmin-treeview-dark, link), ());
-
-		@include clay-link($link);
+		@include clay-link(map-get($cadmin-treeview-dark, treeview-link));
 	}
 
 	.component-action {
-		$component-action: setter(
-			map-get($cadmin-treeview-dark, component-action),
-			()
+		@include clay-button-variant(
+			map-get($cadmin-treeview-dark, component-action)
 		);
-
-		@include clay-button-variant($component-action);
 	}
 
 	.component-icon {
-		$component-icon: setter(
-			map-get($cadmin-treeview-dark, component-icon),
-			()
-		);
-
-		@include clay-css($component-icon);
+		@include clay-css(map-get($cadmin-treeview-dark, component-icon));
 	}
 
 	.component-text {
-		$component-text: setter(
-			map-get($cadmin-treeview-dark, component-text),
-			()
-		);
-
-		@include clay-css($component-text);
+		@include clay-css(map-get($cadmin-treeview-dark, component-text));
 	}
 }

package/src/scss/cadmin/variables/_custom-forms.scss

@@ -136,6 +136,7 @@ $cadmin-custom-control-label: map-deep-merge(
 			top: $cadmin-custom-control-indicator-position-top,
 			transition: clay-enable-transitions($cadmin-custom-forms-transition),
 			width: $cadmin-custom-control-indicator-size,
+			z-index: 0,
 		),
 		after: (
 			background: no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size},
@@ -146,6 +147,7 @@ $cadmin-custom-control-label: map-deep-merge(
 			position: absolute,
 			top: $cadmin-custom-control-indicator-position-top,
 			width: $cadmin-custom-control-indicator-size,
+			z-index: 0,
 		),
 	),
 	$cadmin-custom-control-label
@@ -216,6 +218,7 @@ $cadmin-custom-control: map-deep-merge(
 			display: inline,
 			font-size: $cadmin-font-size-base,
 			margin-bottom: 0,
+			position: static,
 		),
 	),
 	$cadmin-custom-control

package/src/scss/cadmin/variables/_forms.scss

@@ -319,10 +319,11 @@ $cadmin-form-control-label-size: map-deep-merge(
 	(
 		border-width: 1px,
 		font-size: map-get($cadmin-label-lg, font-size),
-		height: 24px,
+		height: auto,
 		margin-bottom: 5px,
 		margin-right: 10px,
 		margin-top: 5px,
+		min-height: 24px,
 		padding-x: map-get($cadmin-label-lg, padding-x),
 		padding-y: map-get($cadmin-label-lg, padding-y),
 		text-transform: none,
@@ -340,7 +341,7 @@ $cadmin-form-control-label-size: map-deep-merge(
 $cadmin-form-control-tag-group-padding-y: (
 		$cadmin-input-height - $cadmin-input-border-bottom-width -
 			$cadmin-input-border-top-width -
-			map-get($cadmin-form-control-label-size, height) -
+			map-get($cadmin-form-control-label-size, min-height) -
 			(map-get($cadmin-form-control-label-size, margin-bottom)) -
 			(map-get($cadmin-form-control-label-size, margin-top))
 	) * 0.5 !default;

package/src/scss/cadmin/variables/_treeview.scss

@@ -42,7 +42,16 @@ $cadmin-treeview: map-merge(
 		treeview-item: (
 			word-wrap: break-word,
 		),
-		link: (
+		treeview-item-dragging: (
+			cursor: $cadmin-disabled-cursor,
+			opacity: 0.4,
+			treeview-link: (
+				background-color: transparent,
+				border-color: transparent,
+				box-shadow: none,
+			),
+		),
+		treeview-link: (
 			cursor: pointer,
 			display: block,
 			border-color: transparent,
@@ -54,19 +63,15 @@ $cadmin-treeview: map-merge(
 			padding: 0,
 			position: relative,
 			user-select: none,
-			dropping: (
-				bottom: (
-					border-bottom-width: 2px,
-					border-bottom-color: $cadmin-primary-l1,
-				),
-				middle: (
-					background-color: $cadmin-primary-l3,
-					border-color: $cadmin-primary-l1,
-				),
-				top: (
-					border-top-color: $cadmin-primary-l1,
-					border-top-width: 2px,
-				),
+			treeview-dropping-bottom: (
+				box-shadow: 0 2px 0 0 $cadmin-primary-l1,
+			),
+			treeview-dropping-middle: (
+				background-color: $cadmin-primary-l3,
+				border-color: $cadmin-primary-l1,
+			),
+			treeview-dropping-top: (
+				box-shadow: 0 -2px 0 0 $cadmin-primary-l1,
 			),
 			hover: (
 				text-decoration: none,
@@ -159,7 +164,7 @@ $cadmin-treeview-light: map-deep-merge(
 				background-color: $cadmin-white,
 			),
 		),
-		link: (
+		treeview-link: (
 			color: $cadmin-gray-600,
 			hover: (
 				background-color: $cadmin-gray-100,
@@ -191,7 +196,7 @@ $cadmin-treeview-dark: map-deep-merge(
 				color: $cadmin-primary-l1,
 			),
 		),
-		link: (
+		treeview-link: (
 			color: $cadmin-secondary-l1,
 			hover: (
 				background-color: rgba($cadmin-white, 0.04),

package/src/scss/components/_forms.scss

@@ -118,7 +118,7 @@ fieldset[disabled] label {
 	}
 
 	.label {
-		@include clay-label-size($form-control-label-size);
+		@include clay-label-variant($form-control-label-size);
 	}
 }
 

package/src/scss/components/_links.scss

@@ -65,3 +65,15 @@ button.link-outline {
 .component-action {
 	@include clay-link($component-action);
 }
+
+.component-text {
+	@include clay-css($component-text);
+}
+
+.component-icon {
+	@include clay-css($component-icon);
+
+	.lexicon-icon {
+		@include clay-css(map-get($component-icon, lexicon-icon));
+	}
+}