@clayui/css 3.45.0 → 3.46.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/_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/_type.scss

@@ -12,65 +12,51 @@ h6,
 .h4,
 .h5,
 .h6 {
-	color: $headings-color;
-	font-family: $headings-font-family;
-	font-weight: $headings-font-weight;
-	line-height: $headings-line-height;
-	margin-bottom: $headings-margin-bottom;
+	@include clay-css($headings);
+
+	@include clay-generate-media-breakpoints($headings);
 }
 
 h1,
 .h1 {
-	font-size: $h1-font-size;
+	@include clay-css($h1);
 
-	@include clay-scale-component {
-		font-size: $h1-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h1);
 }
 
 h2,
 .h2 {
-	font-size: $h2-font-size;
+	@include clay-css($h2);
 
-	@include clay-scale-component {
-		font-size: $h2-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h2);
 }
 
 h3,
 .h3 {
-	font-size: $h3-font-size;
+	@include clay-css($h3);
 
-	@include clay-scale-component {
-		font-size: $h3-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h3);
 }
 
 h4,
 .h4 {
-	font-size: $h4-font-size;
+	@include clay-css($h4);
 
-	@include clay-scale-component {
-		font-size: $h4-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h4);
 }
 
 h5,
 .h5 {
-	font-size: $h5-font-size;
+	@include clay-css($h5);
 
-	@include clay-scale-component {
-		font-size: $h5-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h5);
 }
 
 h6,
 .h6 {
-	font-size: $h6-font-size;
+	@include clay-css($h6);
 
-	@include clay-scale-component {
-		font-size: $h6-font-size-mobile;
-	}
+	@include clay-generate-media-breakpoints($h6);
 }
 
 .lead {
@@ -81,27 +67,27 @@ h6,
 // Type display classes
 
 .display-1 {
-	font-size: $display1-size;
-	font-weight: $display1-weight;
-	line-height: $display-line-height;
+	@include clay-css($display-1);
+
+	@include clay-generate-media-breakpoints($display-1);
 }
 
 .display-2 {
-	font-size: $display2-size;
-	font-weight: $display2-weight;
-	line-height: $display-line-height;
+	@include clay-css($display-2);
+
+	@include clay-generate-media-breakpoints($display-2);
 }
 
 .display-3 {
-	font-size: $display3-size;
-	font-weight: $display3-weight;
-	line-height: $display-line-height;
+	@include clay-css($display-3);
+
+	@include clay-generate-media-breakpoints($display-3);
 }
 
 .display-4 {
-	font-size: $display4-size;
-	font-weight: $display4-weight;
-	line-height: $display-line-height;
+	@include clay-css($display-4);
+
+	@include clay-generate-media-breakpoints($display-4);
 }
 
 // Horizontal rules

package/src/scss/components/_utilities-functional-important.scss

@@ -619,12 +619,6 @@
 	}
 }
 
-// Text
-
-.text-monospace {
-	font-family: $font-family-monospace !important;
-}
-
 // Text Alignment
 
 .text-justify {
@@ -681,34 +675,60 @@
 
 // Font Weight and Italics
 
-.font-weight-light {
-	font-weight: $font-weight-light !important;
+.font-weight-lighter,
+.text-weight-lighter {
+	font-weight: $font-weight-lighter !important;
 }
 
-.font-weight-lighter {
-	font-weight: $font-weight-lighter !important;
+.font-weight-light,
+.text-weight-light {
+	font-weight: $font-weight-light !important;
 }
 
-.font-weight-normal {
+.font-weight-normal,
+.text-weight-normal {
 	font-weight: $font-weight-normal !important;
 }
 
-.font-weight-semi-bold {
+.font-weight-semi-bold,
+.text-weight-semi-bold {
 	font-weight: $font-weight-semi-bold !important;
 }
 
-.font-weight-bold {
+.font-weight-bold,
+.text-weight-bold {
 	font-weight: $font-weight-bold !important;
 }
 
-.font-weight-bolder {
+.font-weight-bolder,
+.text-weight-bolder {
 	font-weight: $font-weight-bolder !important;
 }
 
-.font-italic {
+.font-italic,
+.text-italic {
 	font-style: italic !important;
 }
 
+.font-monospace,
+.text-monospace {
+	font-family: $font-family-monospace !important;
+}
+
+// Font Sizes
+
+@each $selector, $value in $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/functions/_lx-icons-generated.scss

@@ -296,6 +296,8 @@
 
 	'expand': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M64 128v-25.4l88 88c25.5 25.5 64.5-12.8 38.6-38.6l-88-88H128c42.6 0 42.6-64 0-64H32C16.4 0 0 14.4 0 32v96c0 42.7 64 42.6 64 0zm384 0v-25.4l-88 88c-25.5 25.5-64.5-12.8-38.6-38.6l88-88H384c-42.6 0-42.6-64 0-64h96c15.6 0 32 14.4 32 32v96c0 42.7-64 42.6-64 0zM64 384v25.4l88-88c25.5-25.5 64.5 12.8 38.6 38.6l-88 88H128c42.6 0 42.6 64 0 64H32c-15.6 0-32-14.4-32-32v-96c0-42.7 64-42.6 64 0zm384 0v25.4l-88-88c-25.5-25.5-64.5 12.8-38.6 38.6l88 88H384c-42.6 0-42.6 64 0 64h96c15.6 0 32-14.4 32-32v-96c0-42.7-64-42.6-64 0z" fill="#{$color}"/></svg>',
 
+	'export': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline export-base" d="M448 256.3v191.8H64V256.3c0-41.6-64-41.6-64 0v191.8C0 483.2 28.8 512 64 512h384c35.2 0 64-28.8 64-63.9V256.3c0-44.8-64-41.6-64 0z" fill="#{$color}"/><path class="lexicon-icon-outline export-dash" d="M320 384.1H192c-41.6 0-41.6-63.9 0-63.9h128c41.6 0 44.8 63.9 0 63.9z" fill="#{$color}"/><path class="lexicon-icon-outline export-arrow-up" d="m233.6 10.1-64 63.9c-28.8 28.8 12.8 67.1 38.4 44.8l16-16v121.5c0 41.6 64 41.6 64 0V102.8l16 16c28.8 22.4 64-19.2 38.4-44.8l-64-63.9c-6.4-6.4-25.6-19.1-44.8 0z" fill="#{$color}"/></svg>',
+
 	'fieldset': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-fieldset-bracket-start" d="M128 64c0-17.7-14.3-32-32-32H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h32c17.7 0 32-14.3 32-32s-14.3-32-32-32H64V96h32c17.7 0 32-14.3 32-32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-bracket-end" d="M512 416c0 35.3-28.7 64-64 64h-32c-17.7 0-32-14.3-32-32s14.3-32 32-32h32V96h-32c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c35.3 0 64 28.7 64 64v320z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-line-1-dot" d="M128 224c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-line-1-line" d="M224 160h160c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-line-2-dot" d="M384 288H224c-17.7 0-32 14.3-32 32s14.3 32 32 32h160c17.7 0 32-14.3 32-32s-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline lx-fieldset-line-2-line" d="M128 352c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32z" fill="#{$color}"/></svg>',
 
 	'file-script': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline file-script-border" d="M320 64v64c0 17.7 14.3 32 32 32h64v288H96V64h224zm5.5-64H96C60.7 0 32 28.7 32 64v384c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V154.5c0-33.5-18-44.5-63.5-90S360 0 325.5 0z" fill="#{$color}"/><path class="lexicon-icon-outline file-script-forward-slash" d="m212.2 409.2 69.1-187.5c7.7-20.7 37.7-7.7 30.1 10.9l-69.1 187.5C234 440 205 428 212.2 409.2z" fill="#{$color}"/><path class="lexicon-icon-outline file-script-angle-bracket-open" d="m160 320 35.9-35.9-22.6-22.6-35.9 35.9c-12.5 12.5-12.5 32.8 0 45.3l35.9 35.9 22.6-22.6-35.9-36z" fill="#{$color}"/><path class="lexicon-icon-outline file-script-angle-bracket-close" d="M355.9 320 320 284.1l22.6-22.6 35.9 35.9c12.5 12.5 12.5 32.8 0 45.3l-35.9 35.9-22.6-22.7 35.9-35.9z" fill="#{$color}"/></svg>',

package/src/scss/mixins/_buttons.scss

@@ -844,6 +844,10 @@
 
 			.inline-item {
 				@include clay-css($inline-item);
+
+				.lexicon-icon {
+					@include clay-css(map-get($inline-item, lexicon-icon));
+				}
 			}
 
 			.inline-item-before {

package/src/scss/mixins/_grid.scss

@@ -176,6 +176,35 @@
 	}
 }
 
+/// A mixin that generates media-breakpoint-{up|down} styles from a Sass map.
+/// @param {Map} $map - A map of `key: value` pairs that is passed to the `clay-css` mixin
+
+@mixin clay-generate-media-breakpoints($map) {
+	@if (map-get($map, media-breakpoint-up)) {
+		$media-breakpoint-up: map-get($map, media-breakpoint-up);
+
+		@each $breakpoint in map-keys($media-breakpoint-up) {
+			$breakpoint-up: map-get($map, $breakpoint);
+
+			@include media-breakpoint-up($breakpoint) {
+				@include clay-css($breakpoint-up);
+			}
+		}
+	}
+
+	@if (map-get($map, media-breakpoint-down)) {
+		$media-breakpoint-down: map-get($map, media-breakpoint-down);
+
+		@each $breakpoint in map-keys($map) {
+			$breakpoint-down: map-get($map, $breakpoint);
+
+			@include media-breakpoint-down($breakpoint) {
+				@include clay-css($breakpoint-down);
+			}
+		}
+	}
+}
+
 /// A Bootstrap 4 mixin that generates the correct number of grid classes given any value of `$grid-columns`. This mixin is deprecated. This has been inlined into `components/_grid.scss`.
 /// @deprecated
 /// @param {Number} $columns[$grid-columns]

package/src/scss/variables/_aspect-ratio.scss

@@ -0,0 +1,26 @@
+$aspect-ratio-sizes: () !default;
+$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,
+		),
+	),
+	$aspect-ratio-sizes
+);

package/src/scss/variables/_buttons.scss

@@ -92,6 +92,9 @@ $btn: map-deep-merge(
 		),
 		inline-item: (
 			font-size: $btn-inline-item-font-size,
+			lexicon-icon: (
+				margin-top: 0,
+			),
 		),
 		btn-section: (
 			display: block,
@@ -226,6 +229,9 @@ $btn-monospaced: map-deep-merge(
 			height: $btn-monospaced-size-mobile,
 			width: $btn-monospaced-size-mobile,
 		),
+		lexicon-icon: (
+			margin-top: 0,
+		),
 		c-inner: (
 			align-items: center,
 			display: flex,