@clayui/css 3.46.0 → 3.47.0

package/src/scss/components/_links.scss

@@ -48,18 +48,10 @@ 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 {
@@ -67,7 +59,7 @@ button.link-outline {
 }
 
 .component-text {
-	@include clay-css($component-text);
+	@include clay-text-typography($component-text);
 }
 
 .component-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

@@ -139,7 +139,14 @@
 	&.focus,
 	&:focus {
 		.component-action {
-			display: block;
+			display: flex;
+		}
+	}
+
+	&:disabled,
+	&.disabled {
+		.component-action {
+			display: none;
 		}
 	}
 
@@ -234,6 +241,31 @@
 
 	.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 {
@@ -294,6 +326,31 @@
 
 	.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 {

package/src/scss/mixins/_cards.scss

@@ -5,33 +5,30 @@
 /// A mixin that styles a Card Section (e.g., `.card-header`, `.card-body`, `.card-footer` or `.card-row`). This mixin is used by `clay-card-variant`.
 /// @param {Map} $map - A map of key-value pairs. The keys are defined in the mixin. Example below:
 /// @example
-/// enabled: {Bool},  // Set to false to prevent mixin styles from being output. Default: true
-/// bg: {Color | String | Null},
-/// border-color: {Color | String | List | Null},
-/// border-radius: {Number | String | List | Null},
-/// border-style: {String | List | Null},
-/// border-width: {Number | String | List | Null},
-/// display: {String | Null},
-/// flex-basis: {Number | String | Null},
-/// flex-direction: {String | Null},
-/// flex-grow: {Number | String | Null},
-/// flex-shrink: {Number | String | Null},
-/// flex-wrap: {String | Null},
-/// margin-bottom: {Number | String | Null},
-/// margin-left: {Number | String | Null},
-/// margin-right: {Number | String | Null},
-/// margin-top: {Number | String | Null},
-/// padding-bottom: {Number | String | Null},
-/// padding-left: {Number | String | Null},
-/// padding-right: {Number | String | Null},
-/// padding-top: {Number | String | Null},
-/// text-align: {String | Null},
-/// width: {Number | String | Null},
+/// (
+/// 	enabled: {Bool}, // Set to false to prevent mixin styles from being output. Default: true
+/// 	// .card-section
+/// 	before: (
+/// 		// .card-section::before
+/// 	),
+/// 	after: (
+/// 		// .card-section::after
+/// 	),
+/// 	first-child: (
+/// 		// .card-section:first-child
+/// 	),
+/// 	last-child: (
+/// 		// .card-section:last-child
+/// 	),
+/// 	autofit-col: (
+/// 		// .card-section .autofit-col
+/// 	),
+///
+/// )
+/// -=-=-=-=-=- Deprecated -=-=-=-=-=-
+/// bg: {Color | String | Null}, // deprecated after 3.9.0
 /// autofit-col-padding-left: {Number | String | Null},
 /// autofit-col-padding-right: {Number | String | Null},
-/// @todo
-/// - Add @example
-/// - Add @link to documentation
 
 @mixin clay-card-section-variant($map) {
 	@if (type-of($map) == 'map') {
@@ -65,6 +62,22 @@
 		@if ($enabled) {
 			@include clay-css($base);
 
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
+			&:first-child {
+				@include clay-css(map-get($map, first-child));
+			}
+
+			&:last-child {
+				@include clay-css(map-get($map, last-child));
+			}
+
 			.autofit-col {
 				@include clay-css($autofit-col);
 			}
@@ -187,6 +200,15 @@
 /// 	aspect-ratio-item-bottom-left: (
 /// 		// .card .aspect-ratio-item-bottom-left
 /// 	),
+/// 	hr: (
+/// 		// .card > hr
+/// 		before: (
+/// 			// .card > hr::before
+/// 		),
+/// 		after: (
+/// 			// .card > hr::after
+/// 		),
+/// 	),
 /// 	sticker: (
 /// 		// .card .sticker
 /// 	),
@@ -844,6 +866,18 @@
 				@include clay-css(map-get($map, aspect-ratio-item-bottom-left));
 			}
 
+			> hr {
+				@include clay-css(map-get($map, hr));
+
+				&::before {
+					@include clay-css(map-deep-get($map, hr, before));
+				}
+
+				&::after {
+					@include clay-css(map-deep-get($map, hr, after));
+				}
+			}
+
 			.sticker {
 				@include clay-sticker-variant(
 					setter(map-get($map, sticker), ())

package/src/scss/mixins/_links.scss

@@ -870,10 +870,30 @@
 			$link: setter(map-get($map, link), ());
 			$link: map-merge($link, $clay-link);
 
+			$href: setter(map-get($map, href), ());
+			$href: map-deep-merge($href, $link);
+
 			@include clay-css($map);
 
-			a {
-				@include clay-link($link);
+			&::before {
+				@include clay-css(map-get($map, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($map, after));
+			}
+
+			&:first-child {
+				@include clay-css(map-get($map, first-child));
+			}
+
+			&:last-child {
+				@include clay-css(map-get($map, last-child));
+			}
+
+			&[href],
+			[href] {
+				@include clay-link($href);
 			}
 		}
 	}

package/src/scss/variables/_cards.scss

@@ -19,11 +19,35 @@ $card-spacer-y: 0.75rem !default;
 $card-cap-bg: rgba($black, 0.03) !default;
 $card-cap-color: null !default;
 
+// .card-body
+
 $card-body-padding-bottom: $card-spacer-x !default;
 $card-body-padding-left: $card-spacer-x !default;
 $card-body-padding-right: $card-spacer-x !default;
 $card-body-padding-top: $card-spacer-x !default;
 
+// 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
+
+$card-body: () !default;
+$card-body: map-deep-merge(
+	(
+		color: $card-color,
+		flex: 1 1 auto,
+		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,
+	),
+	$card-body
+);
+
+// .card-section-header
+
 $card-section-header-color: $gray-600 !default;
 $card-section-header-font-size: 0.75rem !default;
 $card-section-header-font-weight: $font-weight-semi-bold !default;
@@ -32,6 +56,20 @@ $card-section-header-margin-bottom: 1.5rem !default;
 $card-section-header-padding: 0 ($grid-gutter-width * 0.5) !default;
 $card-section-header-text-transform: uppercase !default;
 
+$card-section-header: () !default;
+$card-section-header: map-deep-merge(
+	(
+		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,
+	),
+	$card-section-header
+);
+
 /// @deprecated as of v3.x with no replacement
 
 $card-img-overlay-padding: 1.25rem !default;
@@ -130,7 +168,42 @@ $card-aspect-ratio-item-bottom-left: map-deep-merge(
 	$card-aspect-ratio-item-bottom-left
 );
 
-// Card Title
+// min-width, see https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
+
+$card: () !default;
+$card: map-deep-merge(
+	(
+		background-color: $card-bg,
+		border-color: $card-border-color,
+		border-radius: clay-enable-rounded($card-border-radius),
+		border-style: $card-border-style,
+		border-width: $card-border-width,
+		box-shadow: clay-enable-shadows($card-box-shadow),
+		display: block,
+		height: $card-height,
+		margin-bottom: $card-margin-bottom,
+		min-width: 0,
+		position: relative,
+		word-wrap: break-word,
+		aspect-ratio: (
+			label: $card-aspect-ratio-label,
+		),
+		aspect-ratio-item-top-left: $card-aspect-ratio-item-top-left,
+		aspect-ratio-item-top-center: $card-aspect-ratio-item-top-center,
+		aspect-ratio-item-top-right: $card-aspect-ratio-item-top-right,
+		aspect-ratio-item-right-middle: $card-aspect-ratio-item-right-middle,
+		aspect-ratio-item-bottom-right: $card-aspect-ratio-item-bottom-right,
+		aspect-ratio-item-bottom-center: $card-aspect-ratio-item-bottom-center,
+		aspect-ratio-item-bottom-left: $card-aspect-ratio-item-bottom-left,
+		hr: (
+			margin-left: 0,
+			margin-right: 0,
+		),
+	),
+	$card
+);
+
+// .card-title
 
 $card-title: () !default;
 $card-title: map-deep-merge(
@@ -151,7 +224,14 @@ $card-title-link: map-deep-merge(
 	$card-title-link
 );
 
-// Card Subtitle
+$card-title: map-deep-merge(
+	$card-title,
+	(
+		href: $card-title-link,
+	)
+);
+
+// .card-subtitle
 
 $card-subtitle: () !default;
 $card-subtitle: map-deep-merge(
@@ -176,7 +256,26 @@ $card-subtitle-link: map-deep-merge(
 	$card-subtitle-link
 );
 
-// Card Link
+$card-subtitle: map-deep-merge(
+	$card-subtitle,
+	(
+		href: $card-subtitle-link,
+	)
+);
+
+// .card-text
+
+$card-text: () !default;
+$card-text: map-deep-merge(
+	(
+		last-child: (
+			margin-bottom: 0,
+		),
+	),
+	$card-text
+);
+
+// .card-link
 
 $card-link: () !default;
 $card-link: map-deep-merge(
@@ -190,13 +289,68 @@ $card-link: map-deep-merge(
 	$card-link
 );
 
-// Card Divider
+// .card-divider
 
 $card-divider-bg: $card-border-color !default;
 $card-divider-height: 1px !default;
 $card-divider-spacer-x: null !default;
 $card-divider-spacer-y: 10px !default;
 
+$card-divider: () !default;
+$card-divider: map-merge(
+	(
+		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,
+	),
+	$card-divider
+);
+
+// .card-header
+
+// `margin-bottom`, removes the default margin-bottom of <hN> (h1 - h6)
+
+$card-header: () !default;
+$card-header: map-deep-merge(
+	(
+		background-color: $card-cap-bg,
+		border-bottom: $card-border-width solid $card-border-color,
+		color: $card-cap-color,
+		margin-bottom: 0,
+		padding: $card-spacer-y $card-spacer-x,
+		first-child: (
+			border-radius:
+				clay-enable-rounded(
+					$card-inner-border-radius $card-inner-border-radius 0 0
+				),
+		),
+	),
+	$card-header
+);
+
+// .card-footer
+
+$card-footer: () !default;
+$card-footer: map-deep-merge(
+	(
+		background-color: $card-cap-bg,
+		border-top: $card-border-width solid $card-border-color,
+		padding: $card-spacer-y $card-spacer-x,
+		last-child: (
+			border-radius:
+				clay-enable-rounded(
+					0 0 $card-inner-border-radius $card-inner-border-radius
+				),
+		),
+	),
+	$card-footer
+);
+
+// .card.rounded-*
+
 $card-rounded-inner-border-radius: calc(
 	#{$rounded-border-radius} - #{$card-border-width}
 ) !default;

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

@@ -73,3 +73,26 @@ $c-empty-state-footer: map-deep-merge(
 	),
 	$c-empty-state-footer
 );
+
+// .c-empty-state-sm
+
+$c-empty-state-sm: () !default;
+$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,
+		),
+	),
+	$c-empty-state-sm
+);

package/src/scss/variables/_links.scss

@@ -183,7 +183,7 @@ $link-monospaced: map-deep-merge(
 	$link-monospaced
 );
 
-// Component Title
+// .component-title
 
 $component-title: () !default;
 $component-title: map-deep-merge(
@@ -219,7 +219,14 @@ $component-title-link: map-deep-merge(
 	$component-title-link
 );
 
-// Component Subtitle
+$component-title: map-deep-merge(
+	$component-title,
+	(
+		href: $component-title-link,
+	)
+);
+
+// .component-subtitle
 
 $component-subtitle: () !default;
 $component-subtitle: map-deep-merge(
@@ -241,7 +248,14 @@ $component-subtitle-link: map-deep-merge(
 	$component-subtitle-link
 );
 
-// Component Action
+$component-subtitle: map-deep-merge(
+	$component-subtitle,
+	(
+		href: $component-subtitle-link,
+	)
+);
+
+// .component-action
 
 $component-action: () !default;
 $component-action: map-deep-merge(
@@ -286,8 +300,12 @@ $component-action: map-deep-merge(
 	$component-action
 );
 
+// .component-text
+
 $component-text: () !default;
 
+// .component-icon
+
 $component-icon: () !default;
 $component-icon: map-deep-merge(
 	(

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

@@ -47,6 +47,8 @@ $list-group-header-bg: $list-group-bg !default;
 $list-group-header-padding-x: $list-group-item-padding-x !default;
 $list-group-header-padding-y: $list-group-item-padding-y !default;
 
+// .list-group-header-title
+
 $list-group-header-title: () !default;
 $list-group-header-title: map-deep-merge(
 	(
@@ -58,14 +60,16 @@ $list-group-header-title: map-deep-merge(
 	$list-group-header-title
 );
 
-// List Group Title
+// .list-group-title
 
 $list-group-title-link: () !default;
 $list-group-title-link: map-deep-merge(
 	(
 		color: $gray-900,
 		max-width: 100%,
-		hover-color: clay-darken($gray-900, 15%),
+		hover: (
+			color: clay-darken($gray-900, 15%),
+		),
 	),
 	$list-group-title-link
 );
@@ -79,20 +83,22 @@ $list-group-title: map-deep-merge(
 		line-height: $line-height-base,
 		margin-bottom: 0,
 		margin-top: $list-group-item-flex-list-group-title-offset-top,
-		clay-link: $list-group-title-link
+		href: $list-group-title-link
 	),
 	$list-group-title
 );
 
 $list-group-title-active-color: $list-group-active-color !default;
 
-// List Group Subtitle
+// .list-group-subtitle
 
 $list-group-subtitle-link: () !default;
 $list-group-subtitle-link: map-deep-merge(
 	(
 		color: $gray-600,
-		hover-color: clay-darken($gray-600, 15%),
+		hover: (
+			color: clay-darken($gray-600, 15%),
+		),
 	),
 	$list-group-subtitle-link
 );
@@ -102,18 +108,20 @@ $list-group-subtitle: map-deep-merge(
 	(
 		color: $gray-600,
 		margin-bottom: 0,
-		clay-link: $list-group-subtitle-link,
+		href: $list-group-subtitle-link,
 	),
 	$list-group-subtitle
 );
 
-// List Group Text
+// .list-group-text
 
 $list-group-text-link: () !default;
 $list-group-text-link: map-deep-merge(
 	(
 		color: $gray-900,
-		hover-color: clay-darken($gray-900, 15%),
+		hover: (
+			color: clay-darken($gray-900, 15%),
+		),
 	),
 	$list-group-text-link
 );
@@ -123,20 +131,22 @@ $list-group-text: map-deep-merge(
 	(
 		color: $gray-900,
 		margin-bottom: 0,
-		clay-link: $list-group-text-link,
+		href: $list-group-text-link,
 	),
 	$list-group-text
 );
 
 $list-group-text-active-color: $list-group-active-color !default;
 
-// List Group Subtext
+// .list-group-subtext
 
 $list-group-subtext-link: () !default;
 $list-group-subtext-link: map-deep-merge(
 	(
 		color: $gray-600,
-		hover-color: clay-darken($gray-600, 15%),
+		hover: (
+			color: clay-darken($gray-600, 15%),
+		),
 	),
 	$list-group-subtext-link
 );
@@ -146,7 +156,7 @@ $list-group-subtext: map-deep-merge(
 	(
 		color: $gray-600,
 		margin-bottom: 0,
-		clay-link: $list-group-subtext-link,
+		href: $list-group-subtext-link,
 	),
 	$list-group-subtext
 );

package/src/scss/variables/_sidebar.scss

@@ -3,21 +3,21 @@ $sidebar-padding-left: 1rem !default; // 16px
 $sidebar-padding-right: 1rem !default; // 16px
 $sidebar-padding-top: 1rem !default; // 16px
 
-// Sidebar Header Title
+// .sidebar-header .component-title
 
 $sidebar-header-component-title: () !default;
 $sidebar-header-component-title: map-deep-merge(
 	(
 		font-size: 1.5rem,
 		font-weight: $font-weight-semi-bold,
-		clay-link: (
+		href: (
 			color: $gray-900,
 		),
 	),
 	$sidebar-header-component-title
 );
 
-// Sidebar Header Subtitle
+// .sidebar-header .component-subtitle
 
 $sidebar-header-component-subtitle: () !default;
 $sidebar-header-component-subtitle: map-deep-merge(