@clayui/css 3.44.2 → 3.47.0

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/_forms.scss

@@ -310,10 +310,11 @@ $form-control-label-size: () !default;
 $form-control-label-size: map-deep-merge(
 	(
 		border-width: 0.0625rem,
-		height: 1.25rem,
+		height: auto,
 		margin-bottom: 0.25rem,
 		margin-right: 0.5rem,
 		margin-top: 0.25rem,
+		min-height: 1.25rem,
 	),
 	$form-control-label-size
 );
@@ -322,7 +323,7 @@ $form-control-label-size: map-deep-merge(
 
 $form-control-tag-group-padding-y: (
 		$input-height - $input-border-bottom-width - $input-border-top-width -
-			map-get($form-control-label-size, height) -
+			map-get($form-control-label-size, min-height) -
 			(map-get($form-control-label-size, margin-bottom)) -
 			(map-get($form-control-label-size, margin-top))
 	) * 0.5 !default;

package/src/scss/variables/_globals.scss

@@ -368,26 +368,134 @@ $font-weight-base: $font-weight-normal !default;
 
 $line-height-base: 1.5 !default;
 
-$h1-font-size: $font-size-base * 2.5 !default;
-$h2-font-size: $font-size-base * 2 !default;
-$h3-font-size: $font-size-base * 1.75 !default;
-$h4-font-size: $font-size-base * 1.5 !default;
-$h5-font-size: $font-size-base * 1.25 !default;
-$h6-font-size: $font-size-base !default;
+// h1, .h1
 
+$h1-font-size: $font-size-base * 2.5 !default;
 $h1-font-size-mobile: null !default;
+
+$h1: () !default;
+$h1: map-deep-merge(
+	(
+		font-size: $h1-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $h1-font-size-mobile,
+			),
+		),
+	),
+	$h1
+);
+
+// h2, .h2
+
+$h2-font-size: $font-size-base * 2 !default;
 $h2-font-size-mobile: null !default;
+
+$h2: () !default;
+$h2: map-deep-merge(
+	(
+		font-size: $h2-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $h2-font-size-mobile,
+			),
+		),
+	),
+	$h2
+);
+
+// h3, .h3
+
+$h3-font-size: $font-size-base * 1.75 !default;
 $h3-font-size-mobile: null !default;
+
+$h3: () !default;
+$h3: map-deep-merge(
+	(
+		font-size: $h3-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $h3-font-size-mobile,
+			),
+		),
+	),
+	$h3
+);
+
+// h4, .h4
+
+$h4-font-size: $font-size-base * 1.5 !default;
 $h4-font-size-mobile: null !default;
+
+$h4: () !default;
+$h4: map-deep-merge(
+	(
+		font-size: $h4-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $h4-font-size-mobile,
+			),
+		),
+	),
+	$h4
+);
+
+// h5, .h5
+
+$h5-font-size: $font-size-base * 1.25 !default;
 $h5-font-size-mobile: null !default;
+
+$h5: () !default;
+$h5: map-deep-merge(
+	(
+		font-size: $h5-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $h5-font-size-mobile,
+			),
+		),
+	),
+	$h5
+);
+
+// h6, .h6
+
+$h6-font-size: $font-size-base !default;
 $h6-font-size-mobile: null !default;
 
+$h6: () !default;
+$h6: map-deep-merge(
+	(
+		font-size: $h6-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $h6-font-size-mobile,
+			),
+		),
+	),
+	$h6
+);
+
+// Headings h1-h6
+
 $headings-margin-bottom: $spacer * 0.5 !default;
 $headings-font-family: null !default;
 $headings-font-weight: 500 !default;
 $headings-line-height: 1.2 !default;
 $headings-color: null !default;
 
+$headings: () !default;
+$headings: map-deep-merge(
+	(
+		color: $headings-color,
+		font-family: $headings-font-family,
+		font-weight: $headings-font-weight,
+		line-height: $headings-line-height,
+		margin-bottom: $headings-margin-bottom,
+	),
+	$headings
+);
+
 // Body
 
 $body-bg: $white !default;
@@ -454,16 +562,69 @@ $emphasized-link-hover-darken-percentage: 15% !default;
 
 $paragraph-margin-bottom: 1rem !default;
 
-$display1-size: 6rem !default;
-$display2-size: 5.5rem !default;
-$display3-size: 4.5rem !default;
-$display4-size: 3.5rem !default;
+// Display
+
+$display-line-height: $headings-line-height !default;
+
+// .display-1
 
+$display1-size: 6rem !default;
 $display1-weight: 300 !default;
+
+$display-1: () !default;
+$display-1: map-deep-merge(
+	(
+		font-size: $display1-size,
+		font-weight: $display1-weight,
+		line-height: $display-line-height,
+	),
+	$display-1
+);
+
+// .display-2
+
+$display2-size: 5.5rem !default;
 $display2-weight: 300 !default;
+
+$display-2: () !default;
+$display-2: map-deep-merge(
+	(
+		font-size: $display2-size,
+		font-weight: $display2-weight,
+		line-height: $display-line-height,
+	),
+	$display-2
+);
+
+// .display-3
+
+$display3-size: 4.5rem !default;
 $display3-weight: 300 !default;
+
+$display-3: () !default;
+$display-3: map-deep-merge(
+	(
+		font-size: $display3-size,
+		font-weight: $display3-weight,
+		line-height: $display-line-height,
+	),
+	$display-3
+);
+
+// .display-4
+
+$display4-size: 3.5rem !default;
 $display4-weight: 300 !default;
-$display-line-height: $headings-line-height !default;
+
+$display-4: () !default;
+$display-4: map-deep-merge(
+	(
+		font-size: $display4-size,
+		font-weight: $display4-weight,
+		line-height: $display-line-height,
+	),
+	$display-4
+);
 
 $lead-font-size: $font-size-base * 1.25 !default;
 $lead-font-weight: 300 !default;

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(
@@ -285,3 +299,24 @@ $component-action: map-deep-merge(
 	),
 	$component-action
 );
+
+// .component-text
+
+$component-text: () !default;
+
+// .component-icon
+
+$component-icon: () !default;
+$component-icon: map-deep-merge(
+	(
+		align-items: center,
+		display: inline-flex,
+		height: 32px,
+		justify-content: center,
+		width: 32px,
+		lexicon-icon: (
+			margin-top: 0,
+		),
+	),
+	$component-icon
+);

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(

package/src/scss/variables/_tables.scss

@@ -177,6 +177,13 @@ $table-title-link: map-deep-merge(
 	$table-title-link
 );
 
+$table-title: map-deep-merge(
+	$table-title,
+	(
+		href: $table-title-link,
+	)
+);
+
 // Table Link
 
 $table-link: () !default;
@@ -386,6 +393,13 @@ $table-list-title-link: map-deep-merge(
 	$table-list-title-link
 );
 
+$table-list-title: map-deep-merge(
+	$table-list-title,
+	(
+		href: $table-list-title-link,
+	)
+);
+
 // Table List Link
 
 $table-list-link: () !default;