@clayui/css 3.44.2 → 3.47.0

package/src/scss/components/_cards.scss

@@ -1,112 +1,50 @@
 .card,
 .card-horizontal {
-	background-color: $card-bg;
-	border-color: $card-border-color;
-	border-style: $card-border-style;
-	border-width: $card-border-width;
-
-	@include border-radius($card-border-radius);
-	@include box-shadow($card-box-shadow);
-
-	display: block;
-	height: $card-height;
-	margin-bottom: $card-margin-bottom;
-
-	// See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
-
-	min-width: 0;
-	position: relative;
-	word-wrap: break-word;
+	@include clay-card-variant($card);
 
 	.autofit-col {
 		&:first-child {
-			@include border-left-radius($card-inner-border-radius);
+			border-bottom-left-radius: clay-enable-rounded(
+				$card-inner-border-radius
+			);
+			border-top-left-radius: clay-enable-rounded(
+				$card-inner-border-radius
+			);
 		}
 
 		&:last-child {
-			@include border-right-radius($card-inner-border-radius);
+			border-bottom-right-radius: clay-enable-rounded(
+				$card-inner-border-radius
+			);
+			border-top-right-radius: clay-enable-rounded(
+				$card-inner-border-radius
+			);
 		}
 	}
 
-	.aspect-ratio {
-		.label {
-			@include clay-css($card-aspect-ratio-label);
-		}
-	}
-
-	.aspect-ratio-item-top-left {
-		@include clay-css($card-aspect-ratio-item-top-left);
-	}
-
-	.aspect-ratio-item-top-center {
-		@include clay-css($card-aspect-ratio-item-top-center);
-	}
-
-	.aspect-ratio-item-top-right {
-		@include clay-css($card-aspect-ratio-item-top-right);
-	}
-
-	.aspect-ratio-item-right-middle {
-		@include clay-css($card-aspect-ratio-item-right-middle);
-	}
-
-	.aspect-ratio-item-bottom-right {
-		@include clay-css($card-aspect-ratio-item-bottom-right);
-	}
-
-	.aspect-ratio-item-bottom-center {
-		@include clay-css($card-aspect-ratio-item-bottom-center);
-	}
-
-	.aspect-ratio-item-bottom-left {
-		@include clay-css($card-aspect-ratio-item-bottom-left);
-	}
-
-	> hr {
-		margin-left: 0;
-		margin-right: 0;
-	}
-
 	> .list-group:first-child {
 		.list-group-item:first-child {
-			@include border-top-radius($card-border-radius);
+			border-top-left-radius: clay-enable-rounded($card-border-radius);
+			border-top-right-radius: clay-enable-rounded($card-border-radius);
 		}
 	}
 
 	> .list-group:last-child {
 		.list-group-item:last-child {
-			@include border-bottom-radius($card-border-radius);
+			border-bottom-left-radius: clay-enable-rounded($card-border-radius);
+			border-bottom-right-radius: clay-enable-rounded(
+				$card-border-radius
+			);
 		}
 	}
 }
 
 .card-body {
-	color: $card-color;
-
-	// Enable `flex-grow: 1` for decks and groups so that card blocks take up
-	// as much space as possible, ensuring footers are aligned to the bottom.
-
-	flex: 1 1 auto;
-
-	// Workaround for the image size bug in IE
-	// See: https://github.com/twbs/bootstrap/pull/28855
-
-	min-height: 1px;
-
-	padding-bottom: $card-body-padding-bottom;
-	padding-left: $card-body-padding-left;
-	padding-right: $card-body-padding-right;
-	padding-top: $card-body-padding-top;
+	@include clay-css($card-body);
 }
 
 .card-section-header {
-	color: $card-section-header-color;
-	font-size: $card-section-header-font-size;
-	font-weight: $card-section-header-font-weight;
-	line-height: $card-section-header-line-height;
-	margin-bottom: $card-section-header-margin-bottom;
-	padding: $card-section-header-padding;
-	text-transform: $card-section-header-text-transform;
+	@include clay-css($card-section-header);
 }
 
 // Card Title
@@ -115,24 +53,16 @@
 	@include clay-text-typography($card-title);
 }
 
-.card-title a {
-	@include clay-link($card-title-link);
-}
-
 // Card Subtitle
 
 .card-subtitle {
 	@include clay-text-typography($card-subtitle);
 }
 
-.card-subtitle a {
-	@include clay-link($card-subtitle-link);
-}
-
 // Card Text
 
-.card-text:last-child {
-	margin-bottom: 0;
+.card-text {
+	@include clay-text-typography($card-text);
 }
 
 // Card Link
@@ -149,32 +79,16 @@
 	}
 }
 
+// Card Divider
+
 .card-divider {
-	background-color: $card-divider-bg;
-	height: $card-divider-height;
-	margin-bottom: $card-divider-spacer-y;
-	margin-left: $card-divider-spacer-x;
-	margin-right: $card-divider-spacer-x;
-	margin-top: $card-divider-spacer-y;
+	@include clay-css($card-divider);
 }
 
 // Card Header
 
 .card-header {
-	background-color: $card-cap-bg;
-	border-bottom: $card-border-width solid $card-border-color;
-	color: $card-cap-color;
-
-	// Removes the default margin-bottom of <hN> (h1 - h6)
-
-	margin-bottom: 0;
-	padding: $card-spacer-y $card-spacer-x;
-
-	&:first-child {
-		@include border-radius(
-			$card-inner-border-radius $card-inner-border-radius 0 0
-		);
-	}
+	@include clay-card-section-variant($card-header);
 
 	+ .list-group {
 		.list-group-item:first-child {
@@ -200,15 +114,7 @@
 // Card Footer
 
 .card-footer {
-	background-color: $card-cap-bg;
-	border-top: $card-border-width solid $card-border-color;
-	padding: $card-spacer-y $card-spacer-x;
-
-	&:last-child {
-		@include border-radius(
-			0 0 $card-inner-border-radius $card-inner-border-radius
-		);
-	}
+	@include clay-card-section-variant($card-footer);
 }
 
 @if ($enable-bs4-deprecated) {

package/src/scss/components/_empty-state.scss

@@ -2,6 +2,10 @@
 	@include clay-css($c-empty-state);
 }
 
+.c-empty-state-sm {
+	@include clay-css($c-empty-state-sm);
+}
+
 .c-empty-state-animation {
 	@include clay-css($c-empty-state-animation);
 }
@@ -33,3 +37,29 @@
 .c-empty-state-footer {
 	@include clay-css($c-empty-state-footer);
 }
+
+// C Empty State Small
+
+.c-empty-state-sm {
+	@include clay-css($c-empty-state-sm);
+
+	&.c-empty-state-animation {
+		@include clay-css(map-get($c-empty-state-sm, c-empty-state-animation));
+	}
+
+	.c-empty-state-image {
+		@include clay-css(map-get($c-empty-state-sm, c-empty-state-image));
+	}
+
+	.c-empty-state-title {
+		@include clay-css(map-get($c-empty-state-sm, c-empty-state-title));
+	}
+
+	.c-empty-state-text {
+		@include clay-css(map-get($c-empty-state-sm, c-empty-state-text));
+	}
+
+	.c-empty-state-footer {
+		@include clay-css(map-get($c-empty-state-sm, c-empty-state-footer));
+	}
+}

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

@@ -48,20 +48,24 @@ button.link-outline {
 
 .component-title {
 	@include clay-text-typography($component-title);
-
-	a {
-		@include clay-link($component-title-link);
-	}
 }
 
 .component-subtitle {
 	@include clay-text-typography($component-subtitle);
-
-	a {
-		@include clay-link($component-subtitle-link);
-	}
 }
 
 .component-action {
 	@include clay-link($component-action);
 }
+
+.component-text {
+	@include clay-text-typography($component-text);
+}
+
+.component-icon {
+	@include clay-css($component-icon);
+
+	.lexicon-icon {
+		@include clay-css(map-get($component-icon, lexicon-icon));
+	}
+}

package/src/scss/components/_tables.scss

@@ -362,10 +362,6 @@ caption {
 	@include clay-text-typography($table-title);
 }
 
-.table-title a {
-	@include clay-link($table-title-link);
-}
-
 // Table Link
 
 .table-link {
@@ -663,10 +659,6 @@ caption {
 	@include clay-text-typography($table-list-title);
 }
 
-.table-list-title a {
-	@include clay-link($table-list-title-link);
-}
-
 // Table List Link
 
 .table-list-link {

package/src/scss/components/_treeview.scss

@@ -0,0 +1,367 @@
+.treeview {
+	@include clay-css($treeview);
+
+	.btn {
+		@include clay-button-variant(map-get($treeview, btn));
+	}
+
+	.btn-monospaced {
+		@include clay-button-variant(map-get($treeview, btn-monospaced));
+	}
+
+	.custom-control {
+		@include clay-css(map-get($treeview, custom-control));
+	}
+
+	.component-expander {
+		@include clay-button-variant(map-get($treeview, component-expander));
+
+		.lexicon-icon:not(.component-expanded-d-none) {
+			display: none;
+		}
+	}
+
+	.component-action {
+		@include clay-button-variant(map-get($treeview, component-action));
+	}
+
+	.component-icon {
+		@include clay-css(map-get($treeview, component-icon));
+
+		.lexicon-icon {
+			@include clay-css(
+				map-deep-get($treeview, component-icon, lexicon-icon)
+			);
+		}
+	}
+
+	.component-text {
+		@include clay-css(map-get($treeview, component-text));
+	}
+
+	&.show-component-expander-on-hover {
+		@include clay-css($treeview-show-component-expander-on-hover);
+
+		&:hover,
+		&.hover {
+			@include clay-css(
+				map-get($treeview-show-component-expander-on-hover, hover)
+			);
+
+			.component-expander {
+				@include clay-css(
+					map-deep-get(
+						$treeview-show-component-expander-on-hover,
+						hover,
+						component-expander
+					)
+				);
+			}
+		}
+
+		.treeview-link {
+			@include clay-css(
+				map-get(
+					$treeview-show-component-expander-on-hover,
+					treeview-link
+				)
+			);
+
+			&:focus,
+			&.focus {
+				@include clay-css(
+					map-deep-get(
+						$treeview-show-component-expander-on-hover,
+						treeview-link,
+						focus
+					)
+				);
+
+				.component-expander {
+					@include clay-css(
+						map-deep-get(
+							$treeview-show-component-expander-on-hover,
+							treeview-link,
+							focus,
+							component-expander
+						)
+					);
+				}
+			}
+		}
+
+		.component-expander {
+			@include clay-css(
+				map-get(
+					$treeview-show-component-expander-on-hover,
+					component-expander
+				)
+			);
+		}
+	}
+}
+
+.treeview-group {
+	@include clay-css(map-get($treeview, treeview-group));
+}
+
+.treeview-item {
+	@include clay-css(map-get($treeview, treeview-item));
+
+	&:last-child {
+		@include clay-css(map-deep-get($treeview, treeview-item, last-child));
+	}
+}
+
+.treeview-link {
+	@include clay-link(map-get($treeview, treeview-link));
+
+	&.treeview-dropping-bottom {
+		@include clay-link(
+			map-deep-get($treeview, treeview-link, treeview-dropping-bottom)
+		);
+	}
+
+	&.treeview-dropping-middle {
+		@include clay-link(
+			map-deep-get($treeview, treeview-link, treeview-dropping-middle)
+		);
+	}
+
+	&.treeview-dropping-top {
+		@include clay-link(
+			map-deep-get($treeview, treeview-link, treeview-dropping-top)
+		);
+	}
+
+	&.hover,
+	&:hover,
+	&.focus,
+	&:focus {
+		.component-action {
+			display: flex;
+		}
+	}
+
+	&:disabled,
+	&.disabled {
+		.component-action {
+			display: none;
+		}
+	}
+
+	&.show,
+	&[aria-expanded='true'] {
+		.component-expander {
+			.component-expanded-d-none {
+				display: none;
+			}
+
+			.lexicon-icon:not(.component-expanded-d-none) {
+				display: inline-block;
+			}
+		}
+	}
+}
+
+.treeview-nested-margins {
+	@include clay-css($treeview-nested-margins);
+
+	.treeview-group {
+		@include clay-css(map-get($treeview-nested-margins, treeview-group));
+
+		.treeview-item {
+			@include clay-css(
+				map-deep-get(
+					$treeview-nested-margins,
+					treeview-group,
+					treeview-item
+				)
+			);
+		}
+	}
+}
+
+.treeview-item-dragging {
+	@include clay-css(map-get($treeview, treeview-item-dragging));
+
+	.treeview-link {
+		@include clay-link(
+			map-deep-get($treeview, treeview-item-dragging, treeview-link)
+		);
+	}
+}
+
+.treeview-dragging {
+	@include clay-css(map-get($treeview, treeview-dragging));
+}
+
+// Treeview Variants
+
+.treeview-light {
+	@include clay-css($treeview-light);
+
+	.btn {
+		@include clay-button-variant(map-get($treeview-light, btn));
+	}
+
+	.btn-monospaced {
+		@include clay-button-variant(map-get($treeview-light, btn-monospaced));
+	}
+
+	.component-expander {
+		@include clay-button-variant(
+			map-get($treeview-light, component-expander)
+		);
+
+		&.btn-secondary {
+			@include clay-button-variant(
+				map-deep-get($treeview-light, component-expander, btn-secondary)
+			);
+		}
+	}
+
+	.custom-control {
+		@include clay-css(map-get($treeview-light, custom-control));
+	}
+
+	.treeview-group {
+		@include clay-css(map-get($treeview-light, treeview-group));
+	}
+
+	.treeview-item {
+		@include clay-css(map-get($treeview-light, treeview-item));
+
+		&:last-child {
+			@include clay-css(
+				map-deep-get($treeview-light, treeview-item, last-child)
+			);
+		}
+	}
+
+	.treeview-link {
+		@include clay-link(map-get($treeview-light, treeview-link));
+
+		&:disabled,
+		&.disabled {
+			.component-expander {
+				@include clay-css(
+					map-deep-get(
+						$treeview-light,
+						treeview-link,
+						disabled,
+						component-expander
+					)
+				);
+			}
+
+			.component-action {
+				@include clay-css(
+					map-deep-get(
+						$treeview-light,
+						treeview-link,
+						disabled,
+						component-action
+					)
+				);
+			}
+		}
+	}
+
+	.component-action {
+		@include clay-button-variant(
+			map-get($treeview-light, component-action)
+		);
+	}
+
+	.component-icon {
+		@include clay-css(map-get($treeview-light, component));
+	}
+
+	.component-text {
+		@include clay-css(map-get($treeview-light, component));
+	}
+}
+
+.treeview-dark {
+	@include clay-css($treeview-dark);
+
+	.btn {
+		@include clay-button-variant(map-get($treeview-dark, btn));
+	}
+
+	.btn-monospaced {
+		@include clay-button-variant(map-get($treeview-dark, btn-monospaced));
+	}
+
+	.component-expander {
+		@include clay-button-variant(
+			map-get($treeview-dark, component-expander)
+		);
+
+		&.btn-secondary {
+			@include clay-button-variant(
+				map-deep-get($treeview-dark, component-expander, btn-secondary)
+			);
+		}
+	}
+
+	.custom-control {
+		@include clay-css(map-get($treeview-dark, custom-control));
+	}
+
+	.treeview-group {
+		@include clay-css(map-get($treeview-dark, treeview-group));
+	}
+
+	.treeview-item {
+		@include clay-css(map-get($treeview-dark, treeview-item));
+
+		&:last-child {
+			@include clay-css(
+				map-deep-get($treeview-dark, treeview-item, last-child)
+			);
+		}
+	}
+
+	.treeview-link {
+		@include clay-link(map-get($treeview-dark, treeview-link));
+
+		&:disabled,
+		&.disabled {
+			.component-expander {
+				@include clay-css(
+					map-deep-get(
+						$treeview-dark,
+						treeview-link,
+						disabled,
+						component-expander
+					)
+				);
+			}
+
+			.component-action {
+				@include clay-css(
+					map-deep-get(
+						$treeview-dark,
+						treeview-link,
+						disabled,
+						component-action
+					)
+				);
+			}
+		}
+	}
+
+	.component-action {
+		@include clay-button-variant(map-get($treeview-dark, component-action));
+	}
+
+	.component-icon {
+		@include clay-css(map-get($treeview-dark, component-icon));
+	}
+
+	.component-text {
+		@include clay-css(map-get($treeview-dark, component-text));
+	}
+}