@clayui/css 3.44.2 → 3.47.0

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

@@ -42,7 +42,17 @@ $cadmin-treeview: map-merge(
 		treeview-item: (
 			word-wrap: break-word,
 		),
-		link: (
+		treeview-item-dragging: (
+			cursor: $cadmin-disabled-cursor,
+			opacity: 0.4,
+			treeview-link: (
+				background-color: transparent,
+				border-color: transparent,
+				box-shadow: none,
+			),
+		),
+		treeview-link: (
+			background-color: transparent,
 			cursor: pointer,
 			display: block,
 			border-color: transparent,
@@ -53,20 +63,17 @@ $cadmin-treeview: map-merge(
 			min-width: 100%,
 			padding: 0,
 			position: relative,
+			text-align: left,
 			user-select: none,
-			dropping: (
-				bottom: (
-					border-bottom-width: 2px,
-					border-bottom-color: $cadmin-primary-l1,
-				),
-				middle: (
-					background-color: $cadmin-primary-l3,
-					border-color: $cadmin-primary-l1,
-				),
-				top: (
-					border-top-color: $cadmin-primary-l1,
-					border-top-width: 2px,
-				),
+			treeview-dropping-bottom: (
+				box-shadow: 0 2px 0 0 $cadmin-primary-l1,
+			),
+			treeview-dropping-middle: (
+				background-color: $cadmin-primary-l3,
+				border-color: $cadmin-primary-l1,
+			),
+			treeview-dropping-top: (
+				box-shadow: 0 -2px 0 0 $cadmin-primary-l1,
 			),
 			hover: (
 				text-decoration: none,
@@ -75,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,
@@ -155,11 +165,15 @@ $cadmin-treeview-light: map-deep-merge(
 			hover: (
 				color: $cadmin-primary,
 			),
+			disabled: (
+				color: $cadmin-secondary,
+				opacity: 0.5,
+			),
 			btn-secondary: (
 				background-color: $cadmin-white,
 			),
 		),
-		link: (
+		treeview-link: (
 			color: $cadmin-gray-600,
 			hover: (
 				background-color: $cadmin-gray-100,
@@ -173,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,
@@ -191,7 +209,7 @@ $cadmin-treeview-dark: map-deep-merge(
 				color: $cadmin-primary-l1,
 			),
 		),
-		link: (
+		treeview-link: (
 			color: $cadmin-secondary-l1,
 			hover: (
 				background-color: rgba($cadmin-white, 0.04),
@@ -202,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,
@@ -211,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/components/_aspect-ratio.scss

@@ -158,44 +158,31 @@
 	@extend %aspect-ratio-item-center-middle;
 }
 
-// 3 to 2
-
-%aspect-ratio-3-to-2 {
-	@include clay-aspect-ratio(3, 2);
-}
-
-.aspect-ratio-3-to-2 {
-	@extend %aspect-ratio-3-to-2;
-}
-
-// 4 to 3
-
-%aspect-ratio-4-to-3 {
-	@include clay-aspect-ratio(4, 3);
-}
-
-.aspect-ratio-4-to-3 {
-	@extend %aspect-ratio-4-to-3;
-}
-
-// 8 to 5
-
-%aspect-ratio-8-to-5 {
-	@include clay-aspect-ratio(8, 5);
-}
-
-.aspect-ratio-8-to-5 {
-	@extend %aspect-ratio-8-to-5;
-}
-
-// 16 to 9
-
-%aspect-ratio-16-to-9 {
-	@include clay-aspect-ratio(16, 9);
-}
-
-.aspect-ratio-16-to-9 {
-	@extend %aspect-ratio-16-to-9;
+// aspect-ratio-#-to-#
+
+@each $selector, $value in $aspect-ratio-sizes {
+	$selector: if(
+		starts-with($selector, '.') or starts-with($selector, '#'),
+		$selector,
+		str-insert($selector, '.', 1)
+	);
+
+	$placeholder: str-insert(
+		str-slice($selector, 2, str-length($selector)),
+		'%',
+		1
+	);
+
+	#{$placeholder} {
+		@include clay-aspect-ratio(
+			map-get($value, width),
+			map-get($value, height)
+		);
+	}
+
+	#{$selector} {
+		@extend #{$placeholder} !optional;
+	}
 }
 
 // Bg Contain