@clayui/css 3.108.0 → 3.110.0

package/src/scss/cadmin/variables/_modals.scss

@@ -58,7 +58,7 @@ $cadmin-modal-content: map-deep-merge(
 		color: $cadmin-modal-content-color,
 		display: flex,
 		flex-direction: column,
-		max-height: calc(100vh - #{$cadmin-modal-dialog-margin-y-sm-up} * 2),
+		max-height: calc(100vh - #{$cadmin-modal-dialog-margin} * 2),
 		outline: 0,
 		overflow: hidden,
 		pointer-events: auto,
@@ -382,6 +382,9 @@ $cadmin-modal: map-deep-merge(
 				modal-body: (
 					padding: 8px 16px,
 				),
+				modal-body-iframe: (
+					padding: 0px,
+				),
 				modal-footer: (
 					padding: 8px,
 				),

package/src/scss/cadmin/variables/_tables.scss

@@ -360,6 +360,9 @@ $cadmin-c-table: map-deep-merge(
 				color: $cadmin-table-disabled-color,
 			),
 		),
+		table-sort: (
+			color: $cadmin-gray-900,
+		),
 		autofit-col: (
 			justify-content: center,
 			padding-left: nth($cadmin-table-cell-padding, 2),

package/src/scss/cadmin/variables/_toggle-switch.scss

@@ -2,7 +2,8 @@ $cadmin-toggle-switch-cursor: $cadmin-link-cursor !default;
 $cadmin-toggle-switch-font-weight: $cadmin-input-label-font-weight !default;
 $cadmin-toggle-switch-transition: background-color 100ms ease-in,
 	border-color 100ms ease-in, box-shadow 150ms ease-in-out,
-	color 100ms ease-in, left 100ms ease-in, right 100ms ease-in !default;
+	color 100ms ease-in, left 100ms ease-in, opacity 100ms ease-in,
+	right 100ms ease-in !default;
 
 // must all be same units--start
 $cadmin-toggle-switch-bar-padding: 4px !default; // space between button and bar, can be negative value
@@ -469,3 +470,69 @@ $cadmin-simple-toggle-switch-reverse: map-deep-merge(
 	),
 	$cadmin-simple-toggle-switch-reverse
 );
+
+// .toggle-switch-sm
+
+$cadmin-toggle-switch-sizes: () !default;
+$cadmin-toggle-switch-sizes: map-deep-merge(
+	(
+		toggle-switch-sm: (
+			simple-toggle-switch: (
+				toggle-switch-label: (
+					max-width: calc(100% - 38px),
+				),
+			),
+			toggle-switch-check: (
+				height: 16px,
+				width: 30px,
+				toggle-switch-bar: (
+					height: 16px,
+					line-height: 16px,
+					before: (
+						width: 30px,
+					),
+					after: (
+						bottom: 0,
+						height: 12px,
+						left: 2px,
+						top: 2px,
+						width: 12px,
+					),
+					toggle-switch-handle: (
+						min-width: 30px,
+						max-width: 30px,
+						after: (
+							margin-left: 38px,
+						),
+					),
+					toggle-switch-icon: (
+						font-size: 8px,
+						height: 16px,
+						left: 0,
+						line-height: 16px,
+						top: 0px,
+						width: 16px,
+					),
+					toggle-switch-icon-off: (
+						left: 13px,
+					),
+				),
+				checked: (
+					toggle-switch-bar: (
+						after: (
+							left: 16px,
+						),
+						button-icon: (
+							left: 14px,
+						),
+					),
+				),
+			),
+			toggle-switch-label: (
+				font-size: 12px,
+				max-width: calc(100% - 38px),
+			),
+		),
+	),
+	$cadmin-toggle-switch-sizes
+);

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

@@ -99,6 +99,7 @@ caption {
 tr.table-focus {
 	@include clay-css($c-tr-table-focus);
 
+	th,
 	td {
 		$_td: setter(map-get($c-tr-table-focus, td), ());
 
@@ -527,6 +528,12 @@ td.table-focus {
 	}
 }
 
+// .table-sort
+
+.table-sort {
+	@include clay-table-variant($c-table-sort);
+}
+
 // Show Quick Action
 
 .show-quick-actions-on-hover {

package/src/scss/components/_toggle-switch.scss

@@ -69,3 +69,35 @@
 .simple-toggle-switch-reverse.simple-toggle-switch {
 	@include clay-toggle-switch-variant($simple-toggle-switch-reverse);
 }
+
+// Toggle Switch Sizes
+
+@each $size, $value in $toggle-switch-sizes {
+	@if not clay-is-map-unset($value) {
+		$selector: if(
+			starts-with($size, 'toggle-switch-'),
+			clay-str-replace($size, 'toggle-switch-', '.toggle-switch-'),
+			$size
+		);
+
+		@if (starts-with($size, '%') or map-get($value, extend)) {
+			#{$selector} {
+				@include clay-toggle-switch-variant($value);
+			}
+		} @else if (starts-with($size, 'toggle-switch-')) {
+			$placeholder: '%clay-#{$size}';
+
+			#{$placeholder} {
+				@include clay-toggle-switch-variant($value);
+			}
+
+			#{$selector} {
+				@extend #{$placeholder} !optional;
+			}
+		} @else {
+			#{$selector} {
+				@include clay-toggle-switch-variant($value);
+			}
+		}
+	}
+}

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

@@ -112,9 +112,9 @@
 
 	'book': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M480 352V32c0-16.6-14.3-32-32-32H128C75 0 32 46.3 32 96v352s0 64 80.2 63.7l351.8.3c21.6-1.3 20.9-30.7 0-31.9l-352-.1c-64.1-.1-63.9-96.1.2-96H448c17.7-.1 32-15.4 32-32zm-64-32H128V64h288v256z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M111.8 416c-20.1.3-22.2 31 0 32H432c23.1-1.6 19.4-31.7 0-32H111.8z" fill="#{$color}"/></svg>',
 
-	'bookmarks-full': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="0" width="12" height="17"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="m8 12.658 3.54 2.987c.977.825 2.46.143 2.46-1.145V2c0-1.119-.895-2-2-2H4C2.895 0 2 .881 2 2v12.5a1.491 1.491 0 0 0 2.46 1.145L8 12.658Z" fill="#{$color}"/></mask><g mask="url(#a)"><path class="lexicon-icon-outline" fill="#{$color}" d="M0 0h16v16H0z"/></g></svg>',
+	'bookmarks-full': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="m256.001 405.055 113.271 95.586c31.264 26.382 78.729 4.57 78.729-36.641V64c0-35.793-28.654-64-64-64h-256C92.655 0 64 28.207 64 64v400c0 41.211 47.466 63.023 78.73 36.641l113.271-95.586Z" fill="#{$color}"/></svg>',
 
-	'bookmarks': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><mask id="a" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="2" y="0" width="12" height="17"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M7.355 10.566a1 1 0 0 1 1.29 0L12 13.397V2H4v11.397l3.355-2.831ZM8 12.658l3.54 2.987c.977.825 2.46.143 2.46-1.145V2c0-1.119-.895-2-2-2H4C2.895 0 2 .881 2 2v12.5a1.491 1.491 0 0 0 2.46 1.145L8 12.658Z" fill="#{$color}"/></mask><g mask="url(#a)"><path class="lexicon-icon-outline" fill="#{$color}" d="M0 0h16v16H0z"/></g></svg>',
+	'bookmarks': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M235.363 338.109c11.92-10.059 29.355-10.059 41.275 0l107.363 90.599V64h-256v364.708l107.362-90.599Zm20.638 66.946 113.271 95.586c31.264 26.382 78.729 4.57 78.729-36.641V64c0-35.793-28.654-64-64-64h-256C92.655 0 64 28.207 64 64v400c0 41.211 47.466 63.023 78.73 36.641l113.271-95.586Z" fill="#{$color}"/></svg>',
 
 	'books': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline books-1-spine-top" d="M96.1 32h-64C14.4 32 .1 46.3.1 64v32h128V64c0-17.7-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline books-1-spine-bottom" d="M.1 448c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32v-32H.1v32z" fill="#{$color}"/><path class="lexicon-icon-outline books-1-spine" fill="#{$color}" d="M.1 128h128v256H.1z"/><path class="lexicon-icon-outline books-2-spine-top" d="M256.1 32h-64c-17.7 0-32 14.3-32 32v32h128V64c0-17.7-14.3-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline books-2-spine-bottom" d="M160.1 448c0 17.7 14.3 32 32 32h64c17.7 0 32-14.3 32-32v-32h-128v32z" fill="#{$color}"/><path class="lexicon-icon-outline books-2-spine" fill="#{$color}" d="M160.1 128h128v256h-128z"/><path class="lexicon-icon-outline books-3-spine-top" d="m359.2 35.2-31 8.1c-17.1 4.5-27.4 21.9-22.9 39l8.1 31 92.9-24.2-8.1-31c-4.5-17.1-21.9-27.4-39-22.9z" fill="#{$color}"/><path class="lexicon-icon-outline books-3-spine" fill="#{$color}" d="m321.422 144.212 92.909-24.172 64.46 247.756-92.908 24.173z"/><path class="lexicon-icon-outline books-3-spine-bottom" d="M402 453.9c4.5 17.1 21.9 27.4 39 22.9l31-8.1c17.1-4.5 27.4-21.9 22.9-39l-8.1-31-92.9 24.2 8.1 31z" fill="#{$color}"/></svg>',
 
@@ -912,6 +912,8 @@
 
 	'vertical-scroll': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M333.1 365.1c-8.9 0-17.9 3.4-24.7 10.2L288 395.8V116.2l20.4 20.4c13.6 13.6 35.7 13.6 49.3 0 13.6-13.6 13.6-35.7 0-49.3l-77.1-77.1C274.1 3.7 265.3 0 256 0s-18.1 3.7-24.7 10.2l-77.1 77.1c-13.6 13.6-13.6 35.7 0 49.3 6.8 6.8 15.7 10.2 24.7 10.2 8.9 0 17.9-3.4 24.7-10.2l20.4-20.4v279.5l-20.4-20.4c-13.6-13.6-35.7-13.6-49.3 0-13.6 13.6-13.6 35.7 0 49.3l77.1 77.1c.8.8 1.7 1.6 2.5 2.3 5.7 5.5 13.5 8.9 22.1 8.9 8.6 0 16.4-3.4 22.1-8.9.9-.7 1.7-1.5 2.5-2.3l77.1-77.1c13.6-13.6 13.6-35.7 0-49.3-6.7-6.8-15.7-10.2-24.6-10.2z" fill="#{$color}"/></svg>',
 
+	'video-streaming': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M423.616 115.2c11.2-7.264 14.464-22.336 6.048-32.672a223.999 223.999 0 0 0-347.296-.032c-8.448 10.336-5.152 25.408 6.016 32.64 11.2 7.296 26.048 3.968 34.784-6.112A175.675 175.675 0 0 1 256.016 48.3a175.679 175.679 0 0 1 132.848 60.724c8.736 10.112 23.552 13.44 34.752 6.176Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M351.008 138.24c5.888 6.496 4.064 16.512-3.136 21.536-7.232 5.056-17.056 3.2-23.232-3.104a96.167 96.167 0 0 0-70.315-28.801 96.163 96.163 0 0 0-69.269 31.233c-5.952 6.496-15.712 8.704-23.104 3.936-7.36-4.8-9.536-14.72-3.872-21.44a128.006 128.006 0 0 1 95.693-45.571 128 128 0 0 1 97.235 42.179v.032Z" fill="#{$color}"/><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M64 192h160a31.996 31.996 0 0 1 9.373-22.627 31.996 31.996 0 0 1 45.254 0A31.996 31.996 0 0 1 288 192h160c35.328 0 64 28.704 64 64v192c0 35.296-28.672 64-64 64H64c-35.328 0-64-28.704-64-64V256c0-35.296 28.672-64 64-64Zm272 160-128-80v160l128-80Z" fill="#{$color}"/></svg>',
+
 	'video': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M448 0H64C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zM192 352V160l160 96-160 96z" fill="#{$color}"/></svg>',
 
 	'view': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M5.1 273.3c127.1 192 374.7 188.6 501.6-.1 7-10.4 7-24.5.1-34.9-128.2-192.5-374.4-187-501.5.2-7 10.3-7.1 24.3-.2 34.8zm58.6-17.5c120.8-137.8 266.3-139.6 384.5 0-118.2 137.7-264.3 135.9-384.5 0zm220.2-91.4c-91.6-26-160.9 74.5-102.8 151.5 57.4 75.2 195.5 24.2 166.5-87.9-46.2 76.3-138.9-18.5-63.7-63.6z" 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/mixins/_tables.scss

@@ -71,6 +71,10 @@
 
 					@include clay-css($_thead-table-cell);
 
+					&:hover {
+						@include clay-css(map-get($_thead-table-cell, hover));
+					}
+
 					&:first-child {
 						@include clay-css(
 							map-get($_thead-table-cell, table-column-start)
@@ -82,6 +86,12 @@
 							map-get($_thead-table-cell, table-column-end)
 						);
 					}
+
+					.component-action {
+						@include clay-css(
+							map-get($_thead-table-cell, component-action)
+						);
+					}
 				}
 
 				th {

package/src/scss/mixins/_toggle-switch.scss

@@ -1051,6 +1051,13 @@
 
 		@include clay-css($map);
 
+		.simple-toggle-switch,
+		&.simple-toggle-switch {
+			@include clay-toggle-switch-variant(
+				map-get($map, simple-toggle-switch)
+			);
+		}
+
 		.toggle-switch-check-bar {
 			@include clay-css(map-get($map, toggle-switch-check-bar));
 

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

@@ -57,7 +57,7 @@ $modal-content: map-deep-merge(
 		color: $modal-content-color,
 		display: flex,
 		flex-direction: column,
-		max-height: calc(100vh - #{$modal-dialog-margin-y-sm-up} * 2),
+		max-height: calc(100vh - #{$modal-dialog-margin} * 2),
 		outline: 0,
 		overflow: hidden,
 		pointer-events: auto,
@@ -381,6 +381,9 @@ $modal: map-deep-merge(
 				modal-body: (
 					padding: 0.5rem 1rem,
 				),
+				modal-body-iframe: (
+					padding: 0,
+				),
 				modal-footer: (
 					padding: 0.5rem,
 				),