@clayui/css 3.46.0 → 3.47.0

package/src/scss/cadmin/variables/_cards.scss

@@ -19,11 +19,34 @@ $cadmin-card-spacer-y: 12px !default;
 $cadmin-card-cap-bg: rgba($cadmin-black, 0.03) !default;
 $cadmin-card-cap-color: null !default;
 
+// .card-body
+
 $cadmin-card-body-padding-bottom: 16px !default;
 $cadmin-card-body-padding-left: 16px !default;
 $cadmin-card-body-padding-right: 16px !default;
 $cadmin-card-body-padding-top: 16px !default;
 
+// `flex` 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.
+// `min-height` workaround for the image size bug in IE
+// See: https://github.com/twbs/bootstrap/pull/28855
+
+$cadmin-card-body: () !default;
+$cadmin-card-body: map-deep-merge(
+	(
+		color: $cadmin-card-color,
+		flex: 1 1 auto,
+		min-height: 1px,
+		padding-bottom: $cadmin-card-body-padding-bottom,
+		padding-left: $cadmin-card-body-padding-left,
+		padding-right: $cadmin-card-body-padding-right,
+		padding-top: $cadmin-card-body-padding-top,
+	),
+	$cadmin-card-body
+);
+
+// .card-section-header
+
 $cadmin-card-section-header-color: $cadmin-gray-600 !default;
 $cadmin-card-section-header-font-size: 12px !default;
 $cadmin-card-section-header-font-weight: $cadmin-font-weight-semi-bold !default;
@@ -32,6 +55,22 @@ $cadmin-card-section-header-margin-bottom: 24px !default;
 $cadmin-card-section-header-padding: 0 ($cadmin-grid-gutter-width * 0.5) !default;
 $cadmin-card-section-header-text-transform: uppercase !default;
 
+$cadmin-card-section-header: () !default;
+$cadmin-card-section-header: map-deep-merge(
+	(
+		color: $cadmin-card-section-header-color,
+		font-size: $cadmin-card-section-header-font-size,
+		font-weight: $cadmin-card-section-header-font-weight,
+		line-height: $cadmin-card-section-header-line-height,
+		margin-bottom: $cadmin-card-section-header-margin-bottom,
+		padding: $cadmin-card-section-header-padding,
+		text-transform: $cadmin-card-section-header-text-transform,
+	),
+	$cadmin-card-section-header
+);
+
+// .card-img-overlay
+
 $cadmin-card-img-overlay-padding: 20px !default;
 
 // Card Aspect Ratio
@@ -108,6 +147,47 @@ $cadmin-card-aspect-ratio-item-bottom-left: map-deep-merge(
 	$cadmin-card-aspect-ratio-item-bottom-left
 );
 
+// .card
+
+// `min-width`, see https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+
+$card: () !default;
+$card: map-deep-merge(
+	(
+		background-color: $cadmin-card-bg,
+		border-color: $cadmin-card-border-color,
+		border-radius: clay-enable-rounded($cadmin-card-border-radius),
+		border-style: $cadmin-card-border-style,
+		border-width: $cadmin-card-border-width,
+		box-shadow: clay-enable-shadows($cadmin-card-box-shadow),
+		display: block,
+		height: $cadmin-card-height,
+		margin-bottom: $cadmin-card-margin-bottom,
+		min-width: 0,
+		position: relative,
+		word-wrap: break-word,
+		aspect-ratio: (
+			label: $cadmin-card-aspect-ratio-label,
+		),
+		aspect-ratio-item-top-left: $cadmin-card-aspect-ratio-item-top-left,
+		aspect-ratio-item-top-center: $cadmin-card-aspect-ratio-item-top-center,
+		aspect-ratio-item-top-right: $cadmin-card-aspect-ratio-item-top-right,
+		aspect-ratio-item-right-middle:
+			$cadmin-card-aspect-ratio-item-right-middle,
+		aspect-ratio-item-bottom-right:
+			$cadmin-card-aspect-ratio-item-bottom-right,
+		aspect-ratio-item-bottom-center:
+			$cadmin-card-aspect-ratio-item-bottom-center,
+		aspect-ratio-item-bottom-left:
+			$cadmin-card-aspect-ratio-item-bottom-left,
+		hr: (
+			margin-left: 0,
+			margin-right: 0,
+		),
+	),
+	$card
+);
+
 // Card Title
 
 $cadmin-card-title: () !default;
@@ -133,6 +213,13 @@ $cadmin-card-title-link: map-deep-merge(
 	$cadmin-card-title-link
 );
 
+$cadmin-card-title: map-deep-merge(
+	$cadmin-card-title,
+	(
+		href: $cadmin-card-title-link,
+	)
+);
+
 // Card Subtitle
 
 $cadmin-card-subtitle: () !default;
@@ -158,6 +245,13 @@ $cadmin-card-subtitle-link: map-deep-merge(
 	$cadmin-card-subtitle-link
 );
 
+$cadmin-card-subtitle: map-deep-merge(
+	$cadmin-card-subtitle,
+	(
+		href: $cadmin-card-subtitle-link,
+	)
+);
+
 // Card Link
 
 $cadmin-card-link: () !default;
@@ -173,13 +267,82 @@ $cadmin-card-link: map-deep-merge(
 	$cadmin-card-link
 );
 
-// Card Divider
+// .card-text
+
+$cadmin-card-text: () !default;
+$cadmin-card-text: map-deep-merge(
+	(
+		last-child: (
+			margin-bottom: 0,
+		),
+	),
+	$cadmin-card-text
+);
+
+// .card-divider
 
 $cadmin-card-divider-bg: $cadmin-card-border-color !default;
 $cadmin-card-divider-height: 1px !default;
 $cadmin-card-divider-spacer-x: null !default;
 $cadmin-card-divider-spacer-y: 10px !default;
 
+$cadmin-card-divider: () !default;
+$cadmin-card-divider: map-deep-merge(
+	(
+		background-color: $cadmin-card-divider-bg,
+		height: $cadmin-card-divider-height,
+		margin-bottom: $cadmin-card-divider-spacer-y,
+		margin-left: $cadmin-card-divider-spacer-x,
+		margin-right: $cadmin-card-divider-spacer-x,
+		margin-top: $cadmin-card-divider-spacer-y,
+	),
+	$cadmin-card-divider
+);
+
+// .card-header
+
+// `margin-bottom` removes the default margin-bottom of <hN> (h1 - h6)
+
+$cadmin-card-header: () !default;
+$cadmin-card-header: map-deep-merge(
+	(
+		background-color: $cadmin-card-cap-bg,
+		border-bottom: $cadmin-card-border-width solid $cadmin-card-border-color,
+		color: $cadmin-card-cap-color,
+		margin-bottom: 0,
+		padding: $cadmin-card-spacer-y $cadmin-card-spacer-x,
+		first-child: (
+			border-radius:
+				clay-enable-rounded(
+					$cadmin-card-inner-border-radius
+						$cadmin-card-inner-border-radius 0 0
+				),
+		),
+	),
+	$cadmin-card-header
+);
+
+// .card-footer
+
+$cadmin-card-footer: () !default;
+$cadmin-card-footer: map-deep-merge(
+	(
+		background-color: $cadmin-card-cap-bg,
+		border-top: $cadmin-card-border-width solid $cadmin-card-border-color,
+		padding: $cadmin-card-spacer-y $cadmin-card-spacer-x,
+		last-child: (
+			border-radius:
+				clay-enable-rounded(
+					0 0 $cadmin-card-inner-border-radius
+						$cadmin-card-inner-border-radius
+				),
+		),
+	),
+	$cadmin-card-footer
+);
+
+// .rounded-*
+
 $cadmin-card-rounded-inner-border-radius: calc(
 	#{$cadmin-rounded-border-radius} - #{$cadmin-card-border-width}
 ) !default;

package/src/scss/cadmin/variables/_empty-state.scss

@@ -73,3 +73,26 @@ $cadmin-c-empty-state-footer: map-deep-merge(
 	),
 	$cadmin-c-empty-state-footer
 );
+
+// .c-empty-state-sm
+
+$cadmin-c-empty-state-sm: () !default;
+$cadmin-c-empty-state-sm: map-deep-merge(
+	(
+		c-empty-state-animation: (
+			margin: 2.5rem auto 2rem,
+			max-width: 268px,
+		),
+		c-empty-state-image: (
+			max-width: 120px,
+		),
+		c-empty-state-title: (
+			font-size: 1rem,
+			line-height: 1.5,
+		),
+		c-empty-state-text: (
+			font-size: 0.875rem,
+		),
+	),
+	$cadmin-c-empty-state-sm
+);

package/src/scss/cadmin/variables/_links.scss

@@ -252,6 +252,13 @@ $cadmin-component-title-link: map-deep-merge(
 	$cadmin-component-title-link
 );
 
+$cadmin-component-title: map-deep-merge(
+	$cadmin-component-title,
+	(
+		href: $cadmin-component-title-link,
+	)
+);
+
 // Component Subtitle
 
 $cadmin-component-subtitle: () !default;
@@ -283,6 +290,13 @@ $cadmin-component-subtitle-link: map-deep-merge(
 	$cadmin-component-subtitle-link
 );
 
+$cadmin-component-subtitle: map-deep-merge(
+	$cadmin-component-subtitle,
+	(
+		href: $cadmin-component-subtitle-link,
+	)
+);
+
 // Component Action
 
 $cadmin-component-action: () !default;

package/src/scss/cadmin/variables/_list-group.scss

@@ -73,9 +73,13 @@ $cadmin-list-group-title-link: map-deep-merge(
 		display: inline-block,
 		transition: box-shadow 0.15s ease-in-out,
 		max-width: 100%,
-		hover-color: $cadmin-gray-900,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$cadmin-list-group-title-link
 );
@@ -89,7 +93,7 @@ $cadmin-list-group-title: map-deep-merge(
 		line-height: 1.45,
 		margin-bottom: 0,
 		margin-top: $cadmin-list-group-item-flex-list-group-title-offset-top,
-		clay-link: $cadmin-list-group-title-link,
+		href: $cadmin-list-group-title-link,
 	),
 	$cadmin-list-group-title
 );
@@ -106,9 +110,13 @@ $cadmin-list-group-subtitle-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $cadmin-gray-900,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$cadmin-list-group-subtitle-link
 );
@@ -118,7 +126,7 @@ $cadmin-list-group-subtitle: map-deep-merge(
 	(
 		color: $cadmin-gray-600,
 		margin-bottom: 0,
-		clay-link: $cadmin-list-group-subtitle-link,
+		href: $cadmin-list-group-subtitle-link,
 	),
 	$cadmin-list-group-subtitle
 );
@@ -133,9 +141,13 @@ $cadmin-list-group-text-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $cadmin-gray-900,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$cadmin-list-group-text-link
 );
@@ -146,7 +158,7 @@ $cadmin-list-group-text: map-deep-merge(
 		color: $cadmin-gray-900,
 		line-height: 1.45,
 		margin-bottom: 0,
-		clay-link: $cadmin-list-group-text-link,
+		href: $cadmin-list-group-text-link,
 	),
 	$cadmin-list-group-text
 );
@@ -163,9 +175,13 @@ $cadmin-list-group-subtext-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $cadmin-gray-900,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$cadmin-list-group-subtext-link
 );
@@ -176,7 +192,7 @@ $cadmin-list-group-subtext: map-deep-merge(
 		color: $cadmin-gray-600,
 		line-height: 1.45,
 		margin-bottom: 0,
-		clay-link: $cadmin-list-group-subtext-link,
+		href: $cadmin-list-group-subtext-link,
 	),
 	$cadmin-list-group-subtext
 );

package/src/scss/cadmin/variables/_sidebar.scss

@@ -10,7 +10,7 @@ $cadmin-sidebar-header-component-title: map-deep-merge(
 	(
 		font-size: 20px,
 		font-weight: $cadmin-font-weight-semi-bold,
-		clay-link: (
+		href: (
 			color: $cadmin-gray-900,
 		),
 	),

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

@@ -52,6 +52,7 @@ $cadmin-treeview: map-merge(
 			),
 		),
 		treeview-link: (
+			background-color: transparent,
 			cursor: pointer,
 			display: block,
 			border-color: transparent,
@@ -62,6 +63,7 @@ $cadmin-treeview: map-merge(
 			min-width: 100%,
 			padding: 0,
 			position: relative,
+			text-align: left,
 			user-select: none,
 			treeview-dropping-bottom: (
 				box-shadow: 0 2px 0 0 $cadmin-primary-l1,
@@ -80,6 +82,9 @@ $cadmin-treeview: map-merge(
 				box-shadow: $cadmin-component-focus-inset-box-shadow,
 				outline: 0,
 			),
+			disabled: (
+				cursor: $cadmin-disabled-cursor,
+			),
 		),
 		component-action: (
 			display: none,
@@ -160,6 +165,10 @@ $cadmin-treeview-light: map-deep-merge(
 			hover: (
 				color: $cadmin-primary,
 			),
+			disabled: (
+				color: $cadmin-secondary,
+				opacity: 0.5,
+			),
 			btn-secondary: (
 				background-color: $cadmin-white,
 			),
@@ -178,6 +187,10 @@ $cadmin-treeview-light: map-deep-merge(
 				background-color: $cadmin-gray-200,
 				color: $cadmin-gray-900,
 			),
+			disabled: (
+				background-color: transparent,
+				color: rgba($cadmin-gray-600, 0.5),
+			),
 			show: (
 				background-color: null,
 				color: null,
@@ -207,7 +220,7 @@ $cadmin-treeview-dark: map-deep-merge(
 			),
 			disabled: (
 				background-color: transparent,
-				color: rgba($cadmin-secondary-l1, 0.04),
+				color: rgba($cadmin-secondary-l1, 0.5),
 			),
 			show: (
 				background-color: null,
@@ -216,6 +229,9 @@ $cadmin-treeview-dark: map-deep-merge(
 		),
 		component-action: (
 			color: $cadmin-secondary-l1,
+			disabled: (
+				color: $cadmin-secondary-l1,
+			),
 		),
 	),
 	$cadmin-treeview-dark

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));
+	}
+}