@clayui/css 3.44.2 → 3.47.0

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

package/src/scss/cadmin/components/_utilities-functional-important.scss

@@ -656,12 +656,6 @@
 	}
 }
 
-// Text
-
-.text-monospace {
-	font-family: $cadmin-font-family-monospace !important;
-}
-
 // Text Alignment
 
 .text-justify {
@@ -721,34 +715,60 @@
 
 // Font Weight and Italics
 
-.font-weight-light {
-	font-weight: $cadmin-font-weight-light !important;
+.font-weight-lighter,
+.text-weight-lighter {
+	font-weight: $cadmin-font-weight-lighter !important;
 }
 
-.font-weight-lighter {
-	font-weight: $cadmin-font-weight-lighter !important;
+.font-weight-light,
+.text-weight-light {
+	font-weight: $cadmin-font-weight-light !important;
 }
 
-.font-weight-normal {
+.font-weight-normal,
+.text-weight-normal {
 	font-weight: $cadmin-font-weight-normal !important;
 }
 
-.font-weight-semi-bold {
+.font-weight-semi-bold,
+.text-weight-semi-bold {
 	font-weight: $cadmin-font-weight-semi-bold !important;
 }
 
-.font-weight-bold {
+.font-weight-bold,
+.text-weight-bold {
 	font-weight: $cadmin-font-weight-bold !important;
 }
 
-.font-weight-bolder {
+.font-weight-bolder,
+.text-weight-bolder {
 	font-weight: $cadmin-font-weight-bolder !important;
 }
 
-.font-italic {
+.font-italic,
+.text-italic {
 	font-style: italic !important;
 }
 
+.font-monospace,
+.text-monospace {
+	font-family: $cadmin-font-family-monospace !important;
+}
+
+// Font Sizes
+
+@each $selector, $value in $cadmin-font-sizes {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	#{$selector} {
+		@include clay-css($value);
+	}
+}
+
 // Contextual Colors
 
 .text-white {

package/src/scss/cadmin/variables/_aspect-ratio.scss

@@ -0,0 +1,26 @@
+$cadmin-aspect-ratio-sizes: () !default;
+$cadmin-aspect-ratio-sizes: map-deep-merge(
+	(
+		aspect-ratio-3-to-2: (
+			height: 2,
+			width: 3,
+		),
+		aspect-ratio-4-to-3: (
+			height: 3,
+			width: 4,
+		),
+		aspect-ratio-8-to-3: (
+			height: 3,
+			width: 8,
+		),
+		aspect-ratio-8-to-5: (
+			height: 5,
+			width: 8,
+		),
+		aspect-ratio-16-to-9: (
+			height: 9,
+			width: 16,
+		),
+	),
+	$cadmin-aspect-ratio-sizes
+);

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/_custom-forms.scss

@@ -136,6 +136,7 @@ $cadmin-custom-control-label: map-deep-merge(
 			top: $cadmin-custom-control-indicator-position-top,
 			transition: clay-enable-transitions($cadmin-custom-forms-transition),
 			width: $cadmin-custom-control-indicator-size,
+			z-index: 0,
 		),
 		after: (
 			background: no-repeat 50% / #{$cadmin-custom-control-indicator-bg-size},
@@ -146,6 +147,7 @@ $cadmin-custom-control-label: map-deep-merge(
 			position: absolute,
 			top: $cadmin-custom-control-indicator-position-top,
 			width: $cadmin-custom-control-indicator-size,
+			z-index: 0,
 		),
 	),
 	$cadmin-custom-control-label
@@ -216,6 +218,7 @@ $cadmin-custom-control: map-deep-merge(
 			display: inline,
 			font-size: $cadmin-font-size-base,
 			margin-bottom: 0,
+			position: static,
 		),
 	),
 	$cadmin-custom-control

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

@@ -319,10 +319,11 @@ $cadmin-form-control-label-size: map-deep-merge(
 	(
 		border-width: 1px,
 		font-size: map-get($cadmin-label-lg, font-size),
-		height: 24px,
+		height: auto,
 		margin-bottom: 5px,
 		margin-right: 10px,
 		margin-top: 5px,
+		min-height: 24px,
 		padding-x: map-get($cadmin-label-lg, padding-x),
 		padding-y: map-get($cadmin-label-lg, padding-y),
 		text-transform: none,
@@ -340,7 +341,7 @@ $cadmin-form-control-label-size: map-deep-merge(
 $cadmin-form-control-tag-group-padding-y: (
 		$cadmin-input-height - $cadmin-input-border-bottom-width -
 			$cadmin-input-border-top-width -
-			map-get($cadmin-form-control-label-size, height) -
+			map-get($cadmin-form-control-label-size, min-height) -
 			(map-get($cadmin-form-control-label-size, margin-bottom)) -
 			(map-get($cadmin-form-control-label-size, margin-top))
 	) * 0.5 !default;