@clayui/css 3.44.0 → 3.46.0

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/_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/_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;

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

@@ -473,6 +473,7 @@ $cadmin-nav-underline-link: map-deep-merge(
 		active-class: (
 			color: $cadmin-nav-underline-link-active-color,
 			after: (
+				background-color: $cadmin-nav-underline-link-active-highlight,
 				content: $cadmin-nav-underline-link-active-content,
 				height: $cadmin-nav-underline-link-active-highlight-height,
 			),

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

@@ -42,7 +42,16 @@ $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: (
 			cursor: pointer,
 			display: block,
 			border-color: transparent,
@@ -54,19 +63,15 @@ $cadmin-treeview: map-merge(
 			padding: 0,
 			position: relative,
 			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,
@@ -159,7 +164,7 @@ $cadmin-treeview-light: map-deep-merge(
 				background-color: $cadmin-white,
 			),
 		),
-		link: (
+		treeview-link: (
 			color: $cadmin-gray-600,
 			hover: (
 				background-color: $cadmin-gray-100,
@@ -191,7 +196,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),

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

package/src/scss/components/_forms.scss

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

package/src/scss/components/_links.scss

@@ -65,3 +65,15 @@ button.link-outline {
 .component-action {
 	@include clay-link($component-action);
 }
+
+.component-text {
+	@include clay-css($component-text);
+}
+
+.component-icon {
+	@include clay-css($component-icon);
+
+	.lexicon-icon {
+		@include clay-css(map-get($component-icon, lexicon-icon));
+	}
+}