@clayui/css 3.44.0 → 3.46.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/components/_type.scss

@@ -12,66 +12,51 @@ h6,
 .h4,
 .h5,
 .h6 {
-	color: $cadmin-headings-color;
-	font-family: $cadmin-headings-font-family;
-	font-weight: $cadmin-headings-font-weight;
-	line-height: $cadmin-headings-line-height;
-	margin-bottom: $cadmin-headings-margin-bottom;
-	margin-top: 0;
+	@include clay-css($cadmin-headings);
+
+	@include clay-generate-media-breakpoints($cadmin-headings);
 }
 
 h1,
 .h1 {
-	font-size: $cadmin-h1-font-size;
+	@include clay-css($cadmin-h1);
 
-	@include clay-scale-component {
-		font-size: $cadmin-h1-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($cadmin-h1);
 }
 
 h2,
 .h2 {
-	font-size: $cadmin-h2-font-size;
+	@include clay-css($cadmin-h2);
 
-	@include clay-scale-component {
-		font-size: $cadmin-h2-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($cadmin-h2);
 }
 
 h3,
 .h3 {
-	font-size: $cadmin-h3-font-size;
+	@include clay-css($cadmin-h3);
 
-	@include clay-scale-component {
-		font-size: $cadmin-h3-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($cadmin-h3);
 }
 
 h4,
 .h4 {
-	font-size: $cadmin-h4-font-size;
+	@include clay-css($cadmin-h4);
 
-	@include clay-scale-component {
-		font-size: $cadmin-h4-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($cadmin-h4);
 }
 
 h5,
 .h5 {
-	font-size: $cadmin-h5-font-size;
+	@include clay-css($cadmin-h5);
 
-	@include clay-scale-component {
-		font-size: $cadmin-h5-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($cadmin-h5);
 }
 
 h6,
 .h6 {
-	font-size: $cadmin-h6-font-size;
+	@include clay-css($cadmin-h6);
 
-	@include clay-scale-component {
-		font-size: $cadmin-h6-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($cadmin-h6);
 }
 
 .lead {
@@ -82,27 +67,27 @@ h6,
 // Type display classes
 
 .display-1 {
-	font-size: $cadmin-display1-size;
-	font-weight: $cadmin-display1-weight;
-	line-height: $cadmin-display-line-height;
+	@include clay-css($cadmin-display-1);
+
+	@include clay-generate-media-breakpoints($cadmin-display-1);
 }
 
 .display-2 {
-	font-size: $cadmin-display2-size;
-	font-weight: $cadmin-display2-weight;
-	line-height: $cadmin-display-line-height;
+	@include clay-css($cadmin-display-2);
+
+	@include clay-generate-media-breakpoints($cadmin-display-2);
 }
 
 .display-3 {
-	font-size: $cadmin-display3-size;
-	font-weight: $cadmin-display3-weight;
-	line-height: $cadmin-display-line-height;
+	@include clay-css($cadmin-display-3);
+
+	@include clay-generate-media-breakpoints($cadmin-display-3);
 }
 
 .display-4 {
-	font-size: $cadmin-display4-size;
-	font-weight: $cadmin-display4-weight;
-	line-height: $cadmin-display-line-height;
+	@include clay-css($cadmin-display-4);
+
+	@include clay-generate-media-breakpoints($cadmin-display-4);
 }
 
 // Horizontal rules