@clayui/css 3.109.0 → 3.111.0

package/src/scss/components/_panels.scss

@@ -1,26 +1,11 @@
 .panel {
-	background-color: $panel-bg;
-	border-color: $panel-border-color;
-	border-style: $panel-border-style;
-	border-width: $panel-border-width;
-
-	@include border-radius($panel-border-radius);
-
-	margin-bottom: $panel-margin-bottom;
-	word-wrap: break-word;
+	@include clay-css($panel);
 }
 
 .panel-header {
-	border-bottom: $panel-header-border-bottom-width solid transparent;
-
-	@include border-top-radius($panel-header-offset-border-radius);
+	$_header: setter(map-get($panel, panel-header), ());
 
-	display: block;
-	font-size: $panel-header-font-size;
-	line-height: $panel-header-line-height;
-	padding: $panel-header-padding-y $panel-header-padding-x;
-	position: relative;
-	width: 100%;
+	@include clay-css($_header);
 
 	@if ($enable-c-inner) {
 		.c-inner {
@@ -31,12 +16,11 @@
 	}
 
 	&.collapsed {
-		@include border-bottom-radius($panel-header-offset-border-radius);
+		@include clay-css(map-get($_header, collapsed));
 	}
 
 	&.collapse-icon {
-		padding-left: $panel-header-collapse-icon-padding-left;
-		padding-right: $panel-header-collapse-icon-padding-right;
+		@include clay-css(map-get($_header, collapse-icon));
 
 		@if ($enable-c-inner) {
 			.c-inner {
@@ -50,6 +34,20 @@
 		}
 	}
 
+	&.collapse-icon-middle {
+		$_collapse-icon-middle: setter(
+			map-get($panel, collapse-icon-middle),
+			()
+		);
+
+		@include clay-css($_collapse-icon-middle);
+
+		.collapse-icon-closed,
+		.collapse-icon-open {
+			@include clay-css(map-get($_collapse-icon-middle, collapse-icon));
+		}
+	}
+
 	.collapse-icon-closed,
 	.collapse-icon-open {
 		bottom: $panel-header-collapse-icon-bottom;
@@ -61,10 +59,14 @@
 }
 
 .panel-header-link {
-	@include clay-link($panel-header-link);
+	$_header-link: setter(map-get($panel, panel-header), ());
+
+	@include clay-link(map-get($_header-link, link));
 
 	&.panel-header.collapsed {
-		@include clay-link($panel-header-collapsed-link);
+		$_header-collapsed: setter(map-get($_header-link, collapsed), ());
+
+		@include clay-link(map-get($_header-collapsed, link));
 	}
 
 	.collapse-icon {
@@ -82,25 +84,21 @@
 }
 
 .panel-body {
-	padding: $panel-body-padding-y $panel-header-padding-x;
+	@include clay-css(map-get($panel, panel-body));
 }
 
 .panel-footer {
-	@include border-bottom-radius($panel-footer-offset-border-radius);
-
-	border-top: $panel-footer-border-top-width solid transparent;
-	padding: $panel-footer-padding-y $panel-footer-padding-x;
+	@include clay-css(map-get($panel, panel-footer));
 }
 
 .panel-title {
-	font-size: $panel-title-font-size;
-	font-weight: $panel-title-font-weight;
-	text-transform: $panel-title-text-transform;
+	$_title: setter(map-get($panel, panel-title), ());
+
+	@include clay-css($_title);
 
 	small,
 	.small {
-		font-size: $panel-title-small-font-size;
-		margin-left: $panel-title-small-margin-left;
+		@include clay-css(map-get($_title, small));
 	}
 }
 
@@ -335,6 +333,28 @@
 
 // Panel Variants
 
+@each $color, $value in $panel-palette {
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			if(starts-with($color, 'panel'), str-insert($color, '.', 1), $color)
+		);
+
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-panel-variant($value);
+			}
+		} @else {
+			#{$selector} {
+				@include clay-panel-variant($value);
+			}
+		}
+	}
+}
+
 .panel-secondary {
 	@include clay-panel-variant($panel-secondary);
 }
@@ -344,3 +364,27 @@
 .panel-unstyled {
 	@include clay-panel-variant($panel-unstyled);
 }
+
+// Panel Sizes
+
+@each $color, $value in $panel-sizes {
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($color, '.') or
+				starts-with($color, '#') or
+				starts-with($color, '%'),
+			$color,
+			if(starts-with($color, 'panel'), str-insert($color, '.', 1), $color)
+		);
+
+		@if (starts-with($color, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-panel-variant($value);
+			}
+		} @else {
+			#{$selector} {
+				@include clay-panel-variant($value);
+			}
+		}
+	}
+}

package/src/scss/components/_print.scss

@@ -62,8 +62,12 @@
 		// We don't set margin here because it breaks `size` in Chrome. We also
 		// don't use `!important` on `size` as it breaks in Chrome.
 
-		@page {
-			size: $print-page-size;
+		@at-root {
+			@media print {
+				@page {
+					size: $print-page-size;
+				}
+			}
 		}
 
 		body {

package/src/scss/functions/_lx-icons-generated.scss

@@ -512,6 +512,8 @@
 
 	'hr': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M384 288H128c-42.7 0-42.7-64 0-64h256c42.7 0 42.7 64 0 64z" fill="#{$color}"/></svg>',
 
+	'icon-rule-builder': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill-rule="evenodd" clip-rule="evenodd" d="M287.954 94.965a30.445 30.445 0 0 0-4.844 6.301H182.548V55.629c0-16.803-13.621-30.424-30.424-30.424h-121.7C13.623 25.205 0 38.826 0 55.629v121.699c0 16.803 13.622 30.425 30.425 30.425h121.699c16.803 0 30.424-13.622 30.424-30.425v-45.637h68.574c-5.37 9.138-8.449 19.784-8.449 31.149v197.036c0 25.205-20.432 45.638-45.637 45.638h-14.488c-.422 0-.84.017-1.253.05-7.222-43.193-44.777-76.112-90.02-76.112C40.864 329.452 0 370.317 0 420.726S40.865 512 91.274 512c45.244 0 82.8-32.919 90.021-76.113.413.034.831.051 1.253.051h14.488c42.008 0 76.062-34.054 76.062-76.062V162.84c0-10.801 5.497-20.318 13.847-25.905.326.358.662.711 1.009 1.057l86.054 86.054c11.881 11.882 31.145 11.882 43.027 0l86.054-86.054c11.881-11.881 11.881-31.145 0-43.027L417.035 8.911c-11.882-11.881-31.146-11.881-43.027 0l-86.054 86.054ZM60.849 146.903h60.85V86.054h-60.85v60.849Zm30.425 304.248c-16.803 0-30.425-13.622-30.425-30.425s13.622-30.425 30.425-30.425 30.425 13.622 30.425 30.425-13.622 30.425-30.425 30.425Zm261.22-334.672 43.027 43.027 43.027-43.027-43.027-43.027-43.027 43.027Z"/></svg>',
+
 	'import-export': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline import-export-arrow-up" d="M254.5 81.1 182.9 9.5C176.8 3.4 168.6 0 160 0c-8.6 0-16.8 3.4-22.9 9.5L65.5 81.1c-12.7 12.7-12.7 33.2 0 45.8 6.3 6.3 14.6 9.5 22.9 9.5s16.6-3.2 22.9-9.5l16.7-16.7V481c0 17.7 14.3 32 32 32s32-14.3 32-32V110.2l16.7 16.7c12.7 12.7 33.2 12.7 45.8 0 12.7-12.7 12.7-33.2 0-45.8z" fill="#{$color}"/><path class="lexicon-icon-outline import-export-arrow-down" d="M446.5 385.1c-6.3-6.3-14.6-9.5-22.9-9.5s-16.6 3.2-22.9 9.5L384 401.8V31c0-17.7-14.3-32-32-32s-32 14.3-32 32v370.8l-16.7-16.7c-12.7-12.7-33.2-12.7-45.8 0-12.7 12.7-12.7 33.2 0 45.8l71.6 71.6c6.1 6.1 14.3 9.5 22.9 9.5s16.8-3.4 22.9-9.5l71.6-71.6c12.7-12.7 12.7-33.2 0-45.8z" fill="#{$color}"/></svg>',
 
 	'import-list': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-import-list-bar" d="M448 256.002v192H64v-192c0-42.4-64-41.4-64 0v192c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64v-192c0-42.7-64-42.2-64 0ZM352 64H160c-43.5 0-43-64 0-64h192c43 0 43.5 64 0 64Z" fill="#{$color}"/><path class="lexicon-icon-outline lx-import-list-arrow-down" d="M352.001 96h-192c-42 0-43 64 0 64h64.2l.1 121.4-16.6-16.6c-27.3-23.8-65.2 18-38.6 44.8l64.3 65.2c6.1 6.1 25.5 17.2 45.5 0l64.3-65.2c27.1-29.4-14.1-67.2-38.6-44.8l-16.6 16.6-.2-121.4h64.2c42.5 0 42.5-64 0-64Z" fill="#{$color}"/></svg>',

package/src/scss/mixins/_panels.scss

@@ -327,6 +327,14 @@
 					@include clay-link($header-link);
 				}
 
+				&.collapse-icon {
+					$_panel-header: setter(map-get($map, panel-header), ());
+
+					@include clay-css(
+						map-get($_panel-header, '&.collapse-icon')
+					);
+				}
+
 				&:not(.collapse-icon-middle) {
 					.collapse-icon-closed,
 					.collapse-icon-open {
@@ -334,6 +342,22 @@
 					}
 				}
 
+				&.collapse-icon-middle {
+					$_collapse-icon-middle: setter(
+						map-get($map, collapse-icon-middle),
+						()
+					);
+
+					@include clay-css($_collapse-icon-middle);
+
+					.collapse-icon-closed,
+					.collapse-icon-open {
+						@include clay-css(
+							map-get($_collapse-icon-middle, collapse-icon)
+						);
+					}
+				}
+
 				.panel-group & {
 					+ .panel-collapse > .panel-body {
 						border-color: map-get($base, border-color);

package/src/scss/variables/_dropdowns.scss

@@ -946,27 +946,27 @@ $dropdown-menu-palette: map-deep-merge(
 			dropdown-header: (
 				padding-bottom: 0.375rem,
 				padding-left: 1.75rem,
-				padding-right: 1.75rem,
+				padding-right: 0.5rem,
 				padding-top: 0.3125rem,
 			),
 			dropdown-subheader: (
 				padding-bottom: 0.4375rem,
 				padding-left: 1.75rem,
-				padding-right: 1.75rem,
+				padding-right: 0.5rem,
 				padding-top: 0.4375rem,
 			),
 			dropdown-section: (
 				padding-left: 1.75rem,
-				padding-right: 1.75rem,
+				padding-right: 0.5rem,
 			),
 			dropdown-item: (
 				padding-bottom: 0.375rem,
 				padding-left: 1.75rem,
-				padding-right: 1.75rem,
+				padding-right: 0.5rem,
 				padding-top: 0.3125rem,
 				'&.autofit-row': (
 					padding-left: 1.5rem,
-					padding-right: 1.5rem,
+					padding-right: 0.5rem,
 				),
 			),
 			dropdown-item-scroll: (

package/src/scss/variables/_navs.scss

@@ -372,7 +372,7 @@ $nav-tabs-link-padding-y: null !default;
 
 $nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
 
-$nav-tabs-link-active-bg: $body-bg !default;
+$nav-tabs-link-active-bg: $white !default;
 $nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
 $nav-tabs-link-active-color: $gray-700 !default;
 

package/src/scss/variables/_panels.scss

@@ -94,6 +94,71 @@ $panel-title-text-transform: null !default;
 $panel-title-small-font-size: null !default;
 $panel-title-small-margin-left: null !default;
 
+$panel: () !default;
+$panel: map-deep-merge(
+	(
+		background-color: $panel-bg,
+		border-color: $panel-border-color,
+		border-radius: clay-enable-rounded($panel-border-radius),
+		border-style: $panel-border-style,
+		border-width: $panel-border-width,
+		box-shadow: clay-enable-shadows($panel-box-shadow),
+		margin-bottom: $panel-margin-bottom,
+		word-wrap: break-word,
+		collapse-icon-middle: (
+			collapse-icon: (
+				font-size: inherit,
+			),
+		),
+		panel-header: (
+			border-bottom: $panel-header-border-bottom-width solid transparent,
+			border-top-left-radius:
+				clay-enable-rounded($panel-header-offset-border-radius),
+			border-top-right-radius:
+				clay-enable-rounded($panel-header-offset-border-radius),
+			display: block,
+			font-size: $panel-header-font-size,
+			line-height: $panel-header-line-height,
+			padding: $panel-header-padding-y $panel-header-padding-x,
+			position: relative,
+			width: 100%,
+			collapsed: (
+				border-bottom-left-radius:
+					clay-enable-rounded($panel-header-offset-border-radius),
+				border-bottom-right-radius:
+					clay-enable-rounded($panel-header-offset-border-radius),
+				link: $panel-header-collapsed-link,
+			),
+			collapse-icon: (
+				padding-left: $panel-header-collapse-icon-padding-left,
+				padding-right: $panel-header-collapse-icon-padding-right,
+			),
+			link: $panel-header-link,
+		),
+		panel-body: (
+			padding: $panel-body-padding-y $panel-body-padding-x,
+		),
+		panel-footer: (
+			border-bottom-left-radius:
+				clay-enable-rounded($panel-footer-offset-border-radius),
+			border-bottom-right-radius:
+				clay-enable-rounded($panel-footer-offset-border-radius),
+			border-top: $panel-footer-border-top-width solid transparent,
+			padding: $panel-footer-padding-y $panel-footer-padding-x,
+		),
+		panel-title: (
+			font-size: $panel-title-font-size,
+			font-weight: $panel-title-font-weight,
+			text-transform: $panel-title-text-transform,
+			small: (
+				font-size: $panel-title-small-font-size,
+				margin-left: $panel-title-small-margin-left,
+			),
+		),
+	),
+	$panel
+);
+
 // Panel Group
 
 $panel-group-panel-margin-bottom: math-sign(
@@ -212,3 +277,133 @@ $panel-unstyled: map-deep-merge(
 	),
 	$panel-unstyled
 );
+
+$panel-palette: () !default;
+$panel-palette: map-deep-merge(
+	(
+		panel-block: (
+			border-color: $gray-400,
+			collapse-icon: (
+				font-size: inherit,
+				top: 1.3125rem,
+			),
+			panel-header: (
+				font-size: 1.25rem,
+				line-height: 1.25,
+				padding: 1.15625rem 1.25rem,
+				'&.collapse-icon': (
+					padding-right: 3rem,
+				),
+			),
+			panel-title: (
+				font-size: inherit,
+				text-transform: none,
+			),
+			panel-body: (
+				padding: 0 1.25rem 1.25rem,
+			),
+			panel-footer: (
+				padding: 0 1.25rem 1.25rem,
+			),
+		),
+		panel-default: (
+			border-width: 0px,
+			panel-header: (
+				border-radius: clay-enable-rounded(0),
+				color: $gray-600,
+				font-size: 0.875rem,
+				line-height: 1.125rem,
+				padding-bottom: 0.40625rem,
+				padding-left: 0,
+				padding-right: 0,
+				padding-top: 0.40625rem,
+				text-transform: uppercase,
+				'&.collapse-icon': (
+					padding-right: 1.75rem,
+				),
+				link: (
+					border-bottom: 1px solid $gray-400,
+				),
+			),
+			collapse-icon: (
+				font-size: inherit,
+				right: 0,
+				top: 0.5rem,
+			),
+			collapse-icon-middle: (
+				collapse-icon: (
+					right: 0,
+				),
+			),
+			panel-body: (
+				padding: 1.25rem 0,
+			),
+			panel-title: (
+				font-size: inherit,
+			),
+			panel-footer: (
+				padding: 1.25rem 0,
+			),
+		),
+	),
+	$panel-palette
+);
+
+// Panel Sizes
+
+$panel-sizes: () !default;
+$panel-sizes: map-deep-merge(
+	(
+		'.panel-lg.panel-block': (
+			collapse-icon: (
+				top: 1.75rem,
+			),
+			panel-header: (
+				font-size: 1.5rem,
+				padding: 1.5rem 1.5rem,
+				'&.collapse-icon': (
+					padding-right: calc(1.5rem * 3),
+				),
+			),
+			panel-body: (
+				padding: 0 1.5rem 1.5rem,
+			),
+			panel-footer: (
+				padding: 0 1.5rem 1.5rem,
+			),
+		),
+		'.panel-sm.panel-block': (
+			collapse-icon: (
+				top: 0.9375rem,
+			),
+			panel-header: (
+				font-size: 1rem,
+				padding: 0.8125rem 1rem,
+				'&.collapse-icon': (
+					padding-right: calc(1rem * 3),
+				),
+			),
+			panel-body: (
+				padding: 0 1rem 1rem,
+			),
+			panel-footer: (
+				padding: 0 1rem 1rem,
+			),
+		),
+		'.panel-sm.panel-default': (
+			collapse-icon: (
+				top: 0.375rem,
+			),
+			panel-header: (
+				font-size: 0.75rem,
+				line-height: 1,
+				padding-bottom: 0.34375rem,
+				padding-top: 0.34375rem,
+				'&.collapse-icon': (
+					padding-right: 1.75rem,
+				),
+			),
+		),
+	),
+	$panel-sizes
+);