@clayui/css 3.44.2 → 3.47.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/_custom-forms.scss

@@ -108,12 +108,16 @@ label.custom-control-label {
 .custom-control-label::before {
 	$before: setter(map-get($cadmin-custom-control-label, before), ());
 
+	@extend %cadmin-pseudo-reset !optional;
+
 	@include clay-css($before);
 }
 
 .custom-control-label::after {
 	$after: setter(map-get($cadmin-custom-control-label, after), ());
 
+	@extend %cadmin-pseudo-reset !optional;
+
 	@include clay-css($after);
 }
 

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

@@ -125,7 +125,7 @@ fieldset[disabled] label {
 	}
 
 	.label {
-		@include clay-label-size($cadmin-form-control-label-size);
+		@include clay-label-variant($cadmin-form-control-label-size);
 	}
 }
 

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 {
@@ -74,11 +66,6 @@ button.link-outline {
 	@include clay-css($cadmin-component-icon);
 
 	.lexicon-icon {
-		$lexicon-icon: setter(
-			map-get($cadmin-component-icon, lexicon-icon),
-			()
-		);
-
-		@include clay-css($lexicon-icon);
+		@include clay-css(map-get($cadmin-component-icon, lexicon-icon));
 	}
 }

package/src/scss/cadmin/components/_navs.scss

@@ -6,6 +6,14 @@
 
 .nav-link {
 	@include clay-link($cadmin-nav-link);
+
+	&::before {
+		@extend %cadmin-pseudo-reset !optional;
+	}
+
+	&::after {
+		@extend %cadmin-pseudo-reset !optional;
+	}
 }
 
 .nav-link.btn-unstyled {