@clayui/css 3.45.0 → 3.48.0

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/_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/_globals.scss

@@ -435,26 +435,135 @@ $cadmin-font-weight-bolder: 900 !default;
 $cadmin-font-weight-base: $cadmin-font-weight-normal !default;
 $cadmin-line-height-base: 1.5 !default;
 
-$cadmin-h1-font-size: 26px !default; // 26px
-$cadmin-h2-font-size: 22px !default; // 22px
-$cadmin-h3-font-size: 19px !default; // 19px
-$cadmin-h4-font-size: 16px !default; // 16px
-$cadmin-h5-font-size: 14px !default; // 14px
-$cadmin-h6-font-size: 13px !default; // 13px
+// h1, .h1
 
+$cadmin-h1-font-size: 26px !default; // 26px
 $cadmin-h1-font-size-mobile: null !default;
+
+$cadmin-h1: () !default;
+$cadmin-h1: map-deep-merge(
+	(
+		font-size: $cadmin-h1-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $cadmin-h1-font-size-mobile,
+			),
+		),
+	),
+	$cadmin-h1
+);
+
+// h2, .h2
+
+$cadmin-h2-font-size: 22px !default; // 22px
 $cadmin-h2-font-size-mobile: null !default;
+
+$cadmin-h2: () !default;
+$cadmin-h2: map-deep-merge(
+	(
+		font-size: $cadmin-h2-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $cadmin-h2-font-size-mobile,
+			),
+		),
+	),
+	$cadmin-h2
+);
+
+// h3, .h3
+
+$cadmin-h3-font-size: 19px !default; // 19px
 $cadmin-h3-font-size-mobile: null !default;
+
+$cadmin-h3: () !default;
+$cadmin-h3: map-deep-merge(
+	(
+		font-size: $cadmin-h3-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $cadmin-h3-font-size-mobile,
+			),
+		),
+	),
+	$cadmin-h3
+);
+
+// h4, .h4
+
+$cadmin-h4-font-size: 16px !default; // 16px
 $cadmin-h4-font-size-mobile: null !default;
+
+$cadmin-h4: () !default;
+$cadmin-h4: map-deep-merge(
+	(
+		font-size: $cadmin-h4-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $cadmin-h4-font-size-mobile,
+			),
+		),
+	),
+	$cadmin-h4
+);
+
+// h5, .h5
+
+$cadmin-h5-font-size: 14px !default; // 14px
 $cadmin-h5-font-size-mobile: null !default;
+
+$cadmin-h5: () !default;
+$cadmin-h5: map-deep-merge(
+	(
+		font-size: $cadmin-h5-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $cadmin-h5-font-size-mobile,
+			),
+		),
+	),
+	$cadmin-h5
+);
+
+// h6, .h6
+
+$cadmin-h6-font-size: 13px !default; // 13px
 $cadmin-h6-font-size-mobile: null !default;
 
+$cadmin-h6: () !default;
+$cadmin-h6: map-deep-merge(
+	(
+		font-size: $cadmin-h6-font-size,
+		media-breakpoint-down: (
+			sm: (
+				font-size: $cadmin-h6-font-size-mobile,
+			),
+		),
+	),
+	$cadmin-h6
+);
+
+// Headings h1-h6
+
 $cadmin-headings-margin-bottom: $cadmin-spacer * 0.5 !default;
 $cadmin-headings-font-family: null !default;
 $cadmin-headings-font-weight: $cadmin-font-weight-bold !default;
 $cadmin-headings-line-height: 1.2 !default;
 $cadmin-headings-color: null !default;
 
+$cadmin-headings: () !default;
+$cadmin-headings: map-deep-merge(
+	(
+		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,
+	),
+	$cadmin-headings
+);
+
 // This is similar to the html and body tag allows you to isolate all styles inside it.
 
 $cadmin: () !default;
@@ -590,16 +699,69 @@ $cadmin-emphasized-link-hover-darken-percentage: 15% !default;
 
 $cadmin-paragraph-margin-bottom: 16px !default;
 
-$cadmin-display1-size: 96px !default;
-$cadmin-display2-size: 88px !default;
-$cadmin-display3-size: 72px !default;
-$cadmin-display4-size: 56px !default;
+// Display
+
+$cadmin-display-line-height: $cadmin-headings-line-height !default;
+
+// .display-1
 
+$cadmin-display1-size: 96px !default;
 $cadmin-display1-weight: 300 !default;
+
+$cadmin-display-1: () !default;
+$cadmin-display-1: map-deep-merge(
+	(
+		font-size: $cadmin-display1-size,
+		font-weight: $cadmin-display1-weight,
+		line-height: $cadmin-display-line-height,
+	),
+	$cadmin-display-1
+);
+
+// .display-2
+
+$cadmin-display2-size: 88px !default;
 $cadmin-display2-weight: 300 !default;
+
+$cadmin-display-2: () !default;
+$cadmin-display-2: map-deep-merge(
+	(
+		font-size: $cadmin-display2-size,
+		font-weight: $cadmin-display2-weight,
+		line-height: $cadmin-display-line-height,
+	),
+	$cadmin-display-2
+);
+
+// .display-3
+
+$cadmin-display3-size: 72px !default;
 $cadmin-display3-weight: 300 !default;
+
+$cadmin-display-3: () !default;
+$cadmin-display-3: map-deep-merge(
+	(
+		font-size: $cadmin-display3-size,
+		font-weight: $cadmin-display3-weight,
+		line-height: $cadmin-display-line-height,
+	),
+	$cadmin-display-3
+);
+
+// .display-4
+
+$cadmin-display4-size: 56px !default;
 $cadmin-display4-weight: 300 !default;
-$cadmin-display-line-height: $cadmin-headings-line-height !default;
+
+$cadmin-display-4: () !default;
+$cadmin-display-4: map-deep-merge(
+	(
+		font-size: $cadmin-display4-size,
+		font-weight: $cadmin-display4-weight,
+		line-height: $cadmin-display-line-height,
+	),
+	$cadmin-display-4
+);
 
 $cadmin-lead-font-size: $cadmin-font-size-base * 1.25 !default;
 $cadmin-lead-font-weight: 300 !default;

package/src/scss/cadmin/variables/_links.scss

@@ -252,6 +252,13 @@ $cadmin-component-title-link: map-deep-merge(
 	$cadmin-component-title-link
 );
 
+$cadmin-component-title: map-deep-merge(
+	$cadmin-component-title,
+	(
+		href: $cadmin-component-title-link,
+	)
+);
+
 // Component Subtitle
 
 $cadmin-component-subtitle: () !default;
@@ -283,6 +290,13 @@ $cadmin-component-subtitle-link: map-deep-merge(
 	$cadmin-component-subtitle-link
 );
 
+$cadmin-component-subtitle: map-deep-merge(
+	$cadmin-component-subtitle,
+	(
+		href: $cadmin-component-subtitle-link,
+	)
+);
+
 // Component Action
 
 $cadmin-component-action: () !default;

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

@@ -73,9 +73,13 @@ $cadmin-list-group-title-link: map-deep-merge(
 		display: inline-block,
 		transition: box-shadow 0.15s ease-in-out,
 		max-width: 100%,
-		hover-color: $cadmin-gray-900,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$cadmin-list-group-title-link
 );
@@ -89,7 +93,7 @@ $cadmin-list-group-title: map-deep-merge(
 		line-height: 1.45,
 		margin-bottom: 0,
 		margin-top: $cadmin-list-group-item-flex-list-group-title-offset-top,
-		clay-link: $cadmin-list-group-title-link,
+		href: $cadmin-list-group-title-link,
 	),
 	$cadmin-list-group-title
 );
@@ -106,9 +110,13 @@ $cadmin-list-group-subtitle-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $cadmin-gray-900,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$cadmin-list-group-subtitle-link
 );
@@ -118,7 +126,7 @@ $cadmin-list-group-subtitle: map-deep-merge(
 	(
 		color: $cadmin-gray-600,
 		margin-bottom: 0,
-		clay-link: $cadmin-list-group-subtitle-link,
+		href: $cadmin-list-group-subtitle-link,
 	),
 	$cadmin-list-group-subtitle
 );
@@ -133,9 +141,13 @@ $cadmin-list-group-text-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $cadmin-gray-900,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$cadmin-list-group-text-link
 );
@@ -146,7 +158,7 @@ $cadmin-list-group-text: map-deep-merge(
 		color: $cadmin-gray-900,
 		line-height: 1.45,
 		margin-bottom: 0,
-		clay-link: $cadmin-list-group-text-link,
+		href: $cadmin-list-group-text-link,
 	),
 	$cadmin-list-group-text
 );
@@ -163,9 +175,13 @@ $cadmin-list-group-subtext-link: map-deep-merge(
 		display: inline-block,
 		max-width: 100%,
 		transition: box-shadow 0.15s ease-in-out,
-		hover-color: $cadmin-gray-900,
-		focus-box-shadow: $cadmin-component-focus-box-shadow,
-		focus-outline: 0,
+		hover: (
+			color: $cadmin-gray-900,
+		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+		),
 	),
 	$cadmin-list-group-subtext-link
 );
@@ -176,7 +192,7 @@ $cadmin-list-group-subtext: map-deep-merge(
 		color: $cadmin-gray-600,
 		line-height: 1.45,
 		margin-bottom: 0,
-		clay-link: $cadmin-list-group-subtext-link,
+		href: $cadmin-list-group-subtext-link,
 	),
 	$cadmin-list-group-subtext
 );

package/src/scss/cadmin/variables/_sidebar.scss

@@ -10,7 +10,7 @@ $cadmin-sidebar-header-component-title: map-deep-merge(
 	(
 		font-size: 20px,
 		font-weight: $cadmin-font-weight-semi-bold,
-		clay-link: (
+		href: (
 			color: $cadmin-gray-900,
 		),
 	),

package/src/scss/cadmin/variables/_treeview.scss

@@ -52,6 +52,7 @@ $cadmin-treeview: map-merge(
 			),
 		),
 		treeview-link: (
+			background-color: transparent,
 			cursor: pointer,
 			display: block,
 			border-color: transparent,
@@ -62,6 +63,7 @@ $cadmin-treeview: map-merge(
 			min-width: 100%,
 			padding: 0,
 			position: relative,
+			text-align: left,
 			user-select: none,
 			treeview-dropping-bottom: (
 				box-shadow: 0 2px 0 0 $cadmin-primary-l1,
@@ -80,6 +82,9 @@ $cadmin-treeview: map-merge(
 				box-shadow: $cadmin-component-focus-inset-box-shadow,
 				outline: 0,
 			),
+			disabled: (
+				cursor: $cadmin-disabled-cursor,
+			),
 		),
 		component-action: (
 			display: none,
@@ -160,6 +165,10 @@ $cadmin-treeview-light: map-deep-merge(
 			hover: (
 				color: $cadmin-primary,
 			),
+			disabled: (
+				color: $cadmin-secondary,
+				opacity: 0.5,
+			),
 			btn-secondary: (
 				background-color: $cadmin-white,
 			),
@@ -178,6 +187,10 @@ $cadmin-treeview-light: map-deep-merge(
 				background-color: $cadmin-gray-200,
 				color: $cadmin-gray-900,
 			),
+			disabled: (
+				background-color: transparent,
+				color: rgba($cadmin-gray-600, 0.5),
+			),
 			show: (
 				background-color: null,
 				color: null,
@@ -207,7 +220,7 @@ $cadmin-treeview-dark: map-deep-merge(
 			),
 			disabled: (
 				background-color: transparent,
-				color: rgba($cadmin-secondary-l1, 0.04),
+				color: rgba($cadmin-secondary-l1, 0.5),
 			),
 			show: (
 				background-color: null,
@@ -216,6 +229,9 @@ $cadmin-treeview-dark: map-deep-merge(
 		),
 		component-action: (
 			color: $cadmin-secondary-l1,
+			disabled: (
+				color: $cadmin-secondary-l1,
+			),
 		),
 	),
 	$cadmin-treeview-dark

package/src/scss/cadmin/variables/_utilities.scss

@@ -141,3 +141,45 @@ $cadmin-overflows: auto, hidden !default;
 // Position
 
 $cadmin-positions: static, relative, absolute, fixed, sticky !default;
+
+// Font Sizes
+
+$cadmin-font-sizes: () !default;
+$cadmin-font-sizes: map-deep-merge(
+	(
+		text-1: (
+			font-size: 0.625rem,
+		),
+		text-2: (
+			font-size: 0.75rem,
+		),
+		text-3: (
+			font-size: 0.875rem,
+		),
+		text-4: (
+			font-size: 1rem,
+		),
+		text-5: (
+			font-size: 1.125rem,
+		),
+		text-6: (
+			font-size: 1.25rem,
+		),
+		text-7: (
+			font-size: 1.5rem,
+		),
+		text-8: (
+			font-size: 1.75rem,
+		),
+		text-9: (
+			font-size: 2rem,
+		),
+		text-10: (
+			font-size: 2.25rem,
+		),
+		text-11: (
+			font-size: 2.5rem,
+		),
+	),
+	$cadmin-font-sizes
+);

package/src/scss/cadmin.scss

@@ -1,3 +1,5 @@
+// INSERT @use rules
+
 @import '_license-text';
 
 // Don't forget easy to include variable overwrites