@clayui/css 3.45.0 → 3.48.0

package/src/scss/cadmin/components/_cards.scss

@@ -1,22 +1,6 @@
 .card,
 .card-horizontal {
-	background-color: $cadmin-card-bg;
-	border-color: $cadmin-card-border-color;
-	border-style: $cadmin-card-border-style;
-	border-width: $cadmin-card-border-width;
-
-	@include border-radius($cadmin-card-border-radius);
-	@include box-shadow($cadmin-card-box-shadow);
-
-	display: block;
-	height: $cadmin-card-height;
-	margin-bottom: $cadmin-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 {
@@ -28,45 +12,6 @@
 		}
 	}
 
-	.aspect-ratio {
-		.label {
-			@include clay-css($cadmin-card-aspect-ratio-label);
-		}
-	}
-
-	.aspect-ratio-item-top-left {
-		@include clay-css($cadmin-card-aspect-ratio-item-top-left);
-	}
-
-	.aspect-ratio-item-top-center {
-		@include clay-css($cadmin-card-aspect-ratio-item-top-center);
-	}
-
-	.aspect-ratio-item-top-right {
-		@include clay-css($cadmin-card-aspect-ratio-item-top-right);
-	}
-
-	.aspect-ratio-item-right-middle {
-		@include clay-css($cadmin-card-aspect-ratio-item-right-middle);
-	}
-
-	.aspect-ratio-item-bottom-right {
-		@include clay-css($cadmin-card-aspect-ratio-item-bottom-right);
-	}
-
-	.aspect-ratio-item-bottom-center {
-		@include clay-css($cadmin-card-aspect-ratio-item-bottom-center);
-	}
-
-	.aspect-ratio-item-bottom-left {
-		@include clay-css($cadmin-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($cadmin-card-border-radius);
@@ -81,32 +26,11 @@
 }
 
 .card-body {
-	color: $cadmin-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: $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;
+	@include clay-css($cadmin-card-body);
 }
 
 .card-section-header {
-	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;
+	@include clay-css($cadmin-card-section-header);
 }
 
 // Card Title
@@ -115,24 +39,16 @@
 	@include clay-text-typography($cadmin-card-title);
 }
 
-.card-title a {
-	@include clay-link($cadmin-card-title-link);
-}
-
 // Card Subtitle
 
 .card-subtitle {
 	@include clay-text-typography($cadmin-card-subtitle);
 }
 
-.card-subtitle a {
-	@include clay-link($cadmin-card-subtitle-link);
-}
-
 // Card Text
 
-.card-text:last-child {
-	margin-bottom: 0;
+.card-text {
+	@include clay-text-typography($cadmin-card-text);
 }
 
 // Card Link
@@ -149,33 +65,16 @@
 	}
 }
 
+// Card Divider
+
 .card-divider {
-	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;
+	@include clay-css($cadmin-card-divider);
 }
 
 // Card Header
 
 .card-header {
-	background-color: $cadmin-card-cap-bg;
-	border-bottom: $cadmin-card-border-width solid $cadmin-card-border-color;
-	color: $cadmin-card-cap-color;
-
-	// Removes the default margin-bottom of <hN> (h1 - h6)
-
-	margin-bottom: 0;
-	padding: $cadmin-card-spacer-y $cadmin-card-spacer-x;
-
-	&:first-child {
-		@include border-radius(
-			$cadmin-card-inner-border-radius $cadmin-card-inner-border-radius 0
-				0
-		);
-	}
+	@include clay-card-section-variant($cadmin-card-header);
 
 	+ .list-group {
 		.list-group-item:first-child {
@@ -187,16 +86,7 @@
 // Card Footer
 
 .card-footer {
-	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 {
-		@include border-radius(
-			0 0 $cadmin-card-inner-border-radius
-				$cadmin-card-inner-border-radius
-		);
-	}
+	@include clay-card-section-variant($cadmin-card-footer);
 }
 
 // Card Img

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

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

package/src/scss/cadmin/components/_links.scss

@@ -48,18 +48,10 @@ button.link-outline {
 
 .component-title {
 	@include clay-text-typography($cadmin-component-title);
-
-	a {
-		@include clay-link($cadmin-component-title-link);
-	}
 }
 
 .component-subtitle {
 	@include clay-text-typography($cadmin-component-subtitle);
-
-	a {
-		@include clay-link($cadmin-component-subtitle-link);
-	}
 }
 
 .component-action {

package/src/scss/cadmin/components/_treeview.scss

@@ -156,7 +156,14 @@
 	&.focus,
 	&:focus {
 		.component-action {
-			display: block;
+			display: flex;
+		}
+	}
+
+	&:disabled,
+	&.disabled {
+		.component-action {
+			display: none;
 		}
 	}
 
@@ -263,6 +270,31 @@
 
 	.treeview-link {
 		@include clay-link(map-get($cadmin-treeview-light, treeview-link));
+
+		&:disabled,
+		&.disabled {
+			.component-expander {
+				@include clay-css(
+					map-deep-get(
+						$cadmin-treeview-light,
+						treeview-link,
+						disabled,
+						component-expander
+					)
+				);
+			}
+
+			.component-action {
+				@include clay-css(
+					map-deep-get(
+						$cadmin-treeview-light,
+						treeview-link,
+						disabled,
+						component-action
+					)
+				);
+			}
+		}
 	}
 
 	.component-action {
@@ -329,6 +361,31 @@
 
 	.treeview-link {
 		@include clay-link(map-get($cadmin-treeview-dark, treeview-link));
+
+		&:disabled,
+		&.disabled {
+			.component-expander {
+				@include clay-css(
+					map-deep-get(
+						$cadmin-treeview-dark,
+						treeview-link,
+						disabled,
+						component-expander
+					)
+				);
+			}
+
+			.component-action {
+				@include clay-css(
+					map-deep-get(
+						$cadmin-treeview-dark,
+						treeview-link,
+						disabled,
+						component-action
+					)
+				);
+			}
+		}
 	}
 
 	.component-action {

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