@clayui/css 3.43.0 → 3.45.0

package/src/scss/components/_cards.scss

@@ -567,75 +567,18 @@
 // Checkbox and Radio Cards
 
 .form-check-card {
-	margin-bottom: $card-margin-bottom;
-	margin-top: 0;
-	padding-left: 0;
-
-	.card {
-		margin-bottom: 0;
-	}
-
-	.custom-control {
-		display: inline;
-		margin-right: 0;
-		position: static;
-
-		> label {
-			font-weight: $font-weight-normal;
-			padding-left: 0;
-		}
-	}
-
-	.custom-control-input {
-		z-index: 2;
-	}
+	@include clay-form-check-card-variant($form-check-card);
 
-	.custom-control-label {
-		position: absolute;
-		z-index: 1;
-
-		&::before,
-		&::after {
-			top: 0;
-		}
-	}
-
-	.form-check-input {
-		margin-left: 0;
-		margin-top: 0;
-		position: absolute;
-		z-index: 1;
-	}
-
-	.form-check-label {
-		color: $body-color;
-		display: inline;
-		font-weight: $font-weight-normal;
-		padding-left: 0;
-		position: static;
-	}
-
-	&.active .card,
-	.custom-control-input:checked ~ .card,
 	.form-check-input:checked ~ .card {
-		box-shadow: $form-check-card-checked-box-shadow;
-	}
-}
-
-.form-check-card {
-	&:hover {
-		.card {
-			box-shadow: $form-check-card-checked-box-shadow;
-		}
-	}
-}
-
-.custom-control-input,
-.form-check-input {
-	&:hover {
-		~ .card {
-			box-shadow: $form-check-card-checked-box-shadow;
-		}
+		@include clay-card-variant(
+			map-deep-get(
+				$form-check-card,
+				custom-control,
+				custom-control-input,
+				checked,
+				card
+			)
+		);
 	}
 }
 
@@ -660,70 +603,27 @@
 }
 
 .form-check-bottom-left {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		bottom: $checkbox-position;
-		left: $checkbox-position;
-		top: auto;
-		transform: none;
-	}
+	@include clay-form-check-card-variant($form-check-bottom-left);
 }
 
 .form-check-bottom-right {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		bottom: $checkbox-position;
-		left: auto;
-		right: $checkbox-position;
-		top: auto;
-		transform: none;
-	}
+	@include clay-form-check-card-variant($form-check-bottom-right);
 }
 
 .form-check-middle-left {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		left: $checkbox-position;
-		margin-top: 0;
-		top: 50%;
-		transform: translateY(-50%);
-	}
+	@include clay-form-check-card-variant($form-check-middle-left);
 }
 
 .form-check-middle-right {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		left: auto;
-		margin-top: 0;
-		right: $checkbox-position;
-		top: 50%;
-		transform: translateY(-50%);
-	}
+	@include clay-form-check-card-variant($form-check-middle-right);
 }
 
 .form-check-top-left {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		left: $checkbox-position;
-		top: $checkbox-position;
-		transform: none;
-	}
+	@include clay-form-check-card-variant($form-check-top-left);
 }
 
 .form-check-top-right {
-	.custom-control-input,
-	.custom-control-label,
-	.form-check-input {
-		left: auto;
-		right: $checkbox-position;
-		top: $checkbox-position;
-		transform: none;
-	}
+	@include clay-form-check-card-variant($form-check-top-right);
 }
 
 // Card Page

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));
+	}
+}

package/src/scss/components/_navs.scss

@@ -55,11 +55,23 @@
 		@include clay-css(map-get($nav-divider, before));
 	}
 
-	&::before {
+	&::after {
 		@include clay-css(map-get($nav-divider, after));
 	}
 }
 
+.nav-divider-end {
+	@include clay-css($nav-divider-end);
+
+	&::before {
+		@include clay-css(map-get($nav-divider-end, before));
+	}
+
+	&::after {
+		@include clay-css(map-get($nav-divider-end, after));
+	}
+}
+
 // Nav Text Truncate
 
 .nav-text-truncate {

package/src/scss/components/_treeview.scss

@@ -0,0 +1,310 @@
+.treeview {
+	@include clay-css($treeview);
+
+	.btn {
+		@include clay-button-variant(map-get($treeview, btn));
+	}
+
+	.btn-monospaced {
+		@include clay-button-variant(map-get($treeview, btn-monospaced));
+	}
+
+	.custom-control {
+		@include clay-css(map-get($treeview, custom-control));
+	}
+
+	.component-expander {
+		@include clay-button-variant(map-get($treeview, component-expander));
+
+		.lexicon-icon:not(.component-expanded-d-none) {
+			display: none;
+		}
+	}
+
+	.component-action {
+		@include clay-button-variant(map-get($treeview, component-action));
+	}
+
+	.component-icon {
+		@include clay-css(map-get($treeview, component-icon));
+
+		.lexicon-icon {
+			@include clay-css(
+				map-deep-get($treeview, component-icon, lexicon-icon)
+			);
+		}
+	}
+
+	.component-text {
+		@include clay-css(map-get($treeview, component-text));
+	}
+
+	&.show-component-expander-on-hover {
+		@include clay-css($treeview-show-component-expander-on-hover);
+
+		&:hover,
+		&.hover {
+			@include clay-css(
+				map-get($treeview-show-component-expander-on-hover, hover)
+			);
+
+			.component-expander {
+				@include clay-css(
+					map-deep-get(
+						$treeview-show-component-expander-on-hover,
+						hover,
+						component-expander
+					)
+				);
+			}
+		}
+
+		.treeview-link {
+			@include clay-css(
+				map-get(
+					$treeview-show-component-expander-on-hover,
+					treeview-link
+				)
+			);
+
+			&:focus,
+			&.focus {
+				@include clay-css(
+					map-deep-get(
+						$treeview-show-component-expander-on-hover,
+						treeview-link,
+						focus
+					)
+				);
+
+				.component-expander {
+					@include clay-css(
+						map-deep-get(
+							$treeview-show-component-expander-on-hover,
+							treeview-link,
+							focus,
+							component-expander
+						)
+					);
+				}
+			}
+		}
+
+		.component-expander {
+			@include clay-css(
+				map-get(
+					$treeview-show-component-expander-on-hover,
+					component-expander
+				)
+			);
+		}
+	}
+}
+
+.treeview-group {
+	@include clay-css(map-get($treeview, treeview-group));
+}
+
+.treeview-item {
+	@include clay-css(map-get($treeview, treeview-item));
+
+	&:last-child {
+		@include clay-css(map-deep-get($treeview, treeview-item, last-child));
+	}
+}
+
+.treeview-link {
+	@include clay-link(map-get($treeview, treeview-link));
+
+	&.treeview-dropping-bottom {
+		@include clay-link(
+			map-deep-get($treeview, treeview-link, treeview-dropping-bottom)
+		);
+	}
+
+	&.treeview-dropping-middle {
+		@include clay-link(
+			map-deep-get($treeview, treeview-link, treeview-dropping-middle)
+		);
+	}
+
+	&.treeview-dropping-top {
+		@include clay-link(
+			map-deep-get($treeview, treeview-link, treeview-dropping-top)
+		);
+	}
+
+	&.hover,
+	&:hover,
+	&.focus,
+	&:focus {
+		.component-action {
+			display: block;
+		}
+	}
+
+	&.show,
+	&[aria-expanded='true'] {
+		.component-expander {
+			.component-expanded-d-none {
+				display: none;
+			}
+
+			.lexicon-icon:not(.component-expanded-d-none) {
+				display: inline-block;
+			}
+		}
+	}
+}
+
+.treeview-nested-margins {
+	@include clay-css($treeview-nested-margins);
+
+	.treeview-group {
+		@include clay-css(map-get($treeview-nested-margins, treeview-group));
+
+		.treeview-item {
+			@include clay-css(
+				map-deep-get(
+					$treeview-nested-margins,
+					treeview-group,
+					treeview-item
+				)
+			);
+		}
+	}
+}
+
+.treeview-item-dragging {
+	@include clay-css(map-get($treeview, treeview-item-dragging));
+
+	.treeview-link {
+		@include clay-link(
+			map-deep-get($treeview, treeview-item-dragging, treeview-link)
+		);
+	}
+}
+
+.treeview-dragging {
+	@include clay-css(map-get($treeview, treeview-dragging));
+}
+
+// Treeview Variants
+
+.treeview-light {
+	@include clay-css($treeview-light);
+
+	.btn {
+		@include clay-button-variant(map-get($treeview-light, btn));
+	}
+
+	.btn-monospaced {
+		@include clay-button-variant(map-get($treeview-light, btn-monospaced));
+	}
+
+	.component-expander {
+		@include clay-button-variant(
+			map-get($treeview-light, component-expander)
+		);
+
+		&.btn-secondary {
+			@include clay-button-variant(
+				map-deep-get($treeview-light, component-expander, btn-secondary)
+			);
+		}
+	}
+
+	.custom-control {
+		@include clay-css(map-get($treeview-light, custom-control));
+	}
+
+	.treeview-group {
+		@include clay-css(map-get($treeview-light, treeview-group));
+	}
+
+	.treeview-item {
+		@include clay-css(map-get($treeview-light, treeview-item));
+
+		&:last-child {
+			@include clay-css(
+				map-deep-get($treeview-light, treeview-item, last-child)
+			);
+		}
+	}
+
+	.treeview-link {
+		@include clay-link(map-get($treeview-light, treeview-link));
+	}
+
+	.component-action {
+		@include clay-button-variant(
+			map-get($treeview-light, component-action)
+		);
+	}
+
+	.component-icon {
+		@include clay-css(map-get($treeview-light, component));
+	}
+
+	.component-text {
+		@include clay-css(map-get($treeview-light, component));
+	}
+}
+
+.treeview-dark {
+	@include clay-css($treeview-dark);
+
+	.btn {
+		@include clay-button-variant(map-get($treeview-dark, btn));
+	}
+
+	.btn-monospaced {
+		@include clay-button-variant(map-get($treeview-dark, btn-monospaced));
+	}
+
+	.component-expander {
+		@include clay-button-variant(
+			map-get($treeview-dark, component-expander)
+		);
+
+		&.btn-secondary {
+			@include clay-button-variant(
+				map-deep-get($treeview-dark, component-expander, btn-secondary)
+			);
+		}
+	}
+
+	.custom-control {
+		@include clay-css(map-get($treeview-dark, custom-control));
+	}
+
+	.treeview-group {
+		@include clay-css(map-get($treeview-dark, treeview-group));
+	}
+
+	.treeview-item {
+		@include clay-css(map-get($treeview-dark, treeview-item));
+
+		&:last-child {
+			@include clay-css(
+				map-deep-get($treeview-dark, treeview-item, last-child)
+			);
+		}
+	}
+
+	.treeview-link {
+		@include clay-link(map-get($treeview-dark, treeview-link));
+	}
+
+	.component-action {
+		@include clay-button-variant(map-get($treeview-dark, component-action));
+	}
+
+	.component-icon {
+		@include clay-css(map-get($treeview-dark, component-icon));
+	}
+
+	.component-text {
+		@include clay-css(map-get($treeview-dark, component-text));
+	}
+}

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

@@ -194,6 +194,8 @@
 
 	'copy': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-body" d="M412 128h-60V68c0-37.4-30.6-68-68-68H100C62.6 0 32 30.6 32 68v248c0 37.4 30.6 68 68 68h60v60c0 37.4 30.6 68 68 68h184c37.4 0 68-30.6 68-68V196c0-37.4-30.6-68-68-68z" fill="none"/><path class="lexicon-icon-outline" d="M412 128h-60V68c0-37.4-30.6-68-68-68H100C62.6 0 32 30.6 32 68v248c0 37.4 30.6 68 68 68h60v60c0 37.4 30.6 68 68 68h184c37.4 0 68-30.6 68-68V196c0-37.4-30.6-68-68-68zm-252 68v124H96V64h192v64h-60c-37.4 0-68 30.6-68 68zm256 252H224V192h192v256z" fill="#{$color}"/></svg>',
 
+	'corner-radius': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline corner-radius-bottom-right" d="M448 384c0 35.3-28.7 64-64 64h-64v64h64c70.7 0 128-57.3 128-128v-64h-64v64z" fill="#{$color}"/><path class="lexicon-icon-outline corner-radius-top-right" d="M384 0h-64v64h64c35.3 0 64 28.7 64 64v64h64v-64C512 57.3 454.7 0 384 0z" fill="#{$color}"/><path class="lexicon-icon-outline corner-radius-top-left" d="M64 128c0-35.3 28.7-64 64-64h64V0h-64C57.3 0 0 57.3 0 128v64h64v-64z" fill="#{$color}"/><path class="lexicon-icon-outline corner-radius-bottom-left" d="M64 384v-64H0v64c0 70.7 57.3 128 128 128h64v-64h-64c-35.3 0-64-28.7-64-64z" fill="#{$color}"/></svg>',
+
 	'credit-card': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-credit-card-border" d="M448 32.1 64 32C32 32 0 64.1 0 96v320.1c0 32 32 64 64 64h384c32 0 64-32 64-64V96c0-31.9-32-63.9-64-63.9zm0 384H64v-224h384v224zm0-288H64V96h384v32.1z" fill="#{$color}"/><path class="lexicon-icon-outline lx-credit-card-text" d="M304 288.1h64c62.7 0 63.3 96 0 96h-64c-63.3 0-64.3-96 0-96z" fill="#{$color}"/></svg>',
 
 	'cursor': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M468.3 273.8 110.6 5.9c-20.2-15.1-48.7.8-46.5 25.9l40.4 453.6c2.4 27 37.2 36.4 52.8 14.2l106.5-151c5.1-7.2 13.2-11.8 22-12.3l166.7-10c27.2-1.7 37.5-36.2 15.8-52.5z" fill="#{$color}"/></svg>',
@@ -204,6 +206,8 @@
 
 	'cut': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M335.4 208.2c-16.7-16.6-32.8-32.8-48-47.9 35.1-35.1 68.9-69 96.2-96.3H480c-24.1 24.1-82.4 82.2-144.6 144.2zm-48 47.9c78 77.9 161.9 161.6 192.1 191.9h-95.6c-39.6-39.6-93.2-93.1-144.3-144.1-10.4 10.4-20.4 20.3-29.8 29.8 9 14.6 14.3 31.9 14.3 50.3 0 53-43 96-96 96s-96-43-96-96 43-96 96-96c9.7 0 19 1.4 27.9 4.1 11.2-11.3 23.3-23.3 35.9-35.9L155.7 220c-8.7 2.6-18 4-27.5 4-53 0-96-43-96-96s43-96 96-96 96 43 96 96c0 18.5-5.3 35.8-14.4 50.5 9.5 9.5 19.5 19.4 29.9 29.8l.2-.2c15.1 15.1 31.3 31.2 47.9 47.8-.3.1-.4.2-.4.2zM128 160c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm32 224c0-17.7-14.3-32-32-32s-32 14.3-32 32 14.3 32 32 32 32-14.3 32-32z" fill="#{$color}"/></svg>',
 
+	'date-time': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline date-time-calendar-border" d="M162.9 384.8H64V128.2h320v35c23 3.9 44.6 11.8 64 23.1v-58c0-35.4-28.7-64.1-64-64.1V32c0-42.6-64-42.7-64 0v32.1h-64V32c0-42.8-64-42.6-64 0v32.1h-64V32c0-42.3-64-42.8-64 0v32.1c-35.3 0-64 28.7-64 64.1v256.6c0 35.4 28.7 64.1 64 64.1h121.9c-11.3-19.5-19.2-41.1-23-64.1z" fill="#{$color}"/><path class="lexicon-icon-outline date-time-clock-border" d="M448 352.7c0 128.3-192 128.3-192 0 0-128.2 192-128.3 192 0zm-256 0c0 210.9 320 213.9 320 0 0-214.9-320-210.1-320 0z" fill="#{$color}"/><path class="lexicon-icon-outline date-time-clock-hands" d="M400 352.7h-48v-48.1c0-21.1-32-21-32 0v80.2h80c21.3 0 21.2-32.1 0-32.1z" fill="#{$color}"/><ellipse class="lexicon-icon-outline date-time-date" cx="128" cy="192.3" rx="32" ry="32.1" fill="#{$color}"/></svg>',
+
 	'date': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="date-border lexicon-icon-outline" d="M512 160.1c0-35-28.7-64-63.7-64h-.3V32c0-44-64-41-64 0v64h-96V32c0-40-64-44-64 0v64h-96V32c0-45-64-40-64 0v64h-.3C28.7 96 0 125 0 160v288.1c0 35 29 64 64 64h352l96-96v-256zM384 448.2v-64h64l-64 64zm64-128.1H320v128H64v-288h384v160z" fill="#{$color}"/><path class="date-1 lexicon-icon-outline" fill="#{$color}" d="M256 416h32V192h-32v32h-32v32h32z"/><path class="date-3 lexicon-icon-outline" fill="#{$color}" d="M96 192h64v32H96zM160 224h32v63h-32zM98.3 288H160v32H98.3zM160 416v-32H96v32zM160 320h32v63h-32z"/></svg>',
 
 	'decimal': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline decimal-hundreths" d="M397.1 129.3c-74 0-82.9 84.1-82.9 125.6s10.4 127.9 82.9 127.9c73.5 0 82.9-86.4 82.9-127.9 0-41.3-9.4-125.6-82.9-125.6zm0 34.5c19.4-.4 29.3 15.8 34.7 34.9l-75 75c-1.6-42.5-1.2-110.7 40.3-109.9zm0 184.4c-18.9-.8-28.8-16.7-34.2-35.3l74.6-74.6c-.5 42.2.8 109.9-40.4 109.9z" fill="#{$color}"/><path class="lexicon-icon-outline decimal-tenths" d="M199.2 129.3c-74 0-82.9 84.1-82.9 125.6s10.4 127.9 82.9 127.9c73.5 0 82.9-86.4 82.9-127.9 0-41.3-9.4-125.6-82.9-125.6zm0 34.5c19.4-.4 29.3 15.8 34.7 34.9l-75 75c-1.5-42.5-1.2-110.7 40.3-109.9zm0 184.4c-18.9-.8-28.8-16.7-34.2-35.3l74.6-74.6c-.5 42.2.9 109.9-40.4 109.9z" fill="#{$color}"/><circle class="lexicon-icon-outline decimal-decimal-point" cx="64" cy="348.8" r="32" fill="#{$color}"/></svg>',
@@ -410,6 +414,10 @@
 
 	'folder': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M448 128h-96L241.1 44.8C230 36.5 216.5 32 202.7 32H64C28.7 32 0 60.7 0 96v320c0 35.3 28.7 64 64 64h384c35.3 0 64-28.7 64-64V192c0-35.3-28.7-64-64-64z" fill="#{$color}"/></svg>',
 
+	'font-family': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline font-family-capital-a" d="M264.4 375.1 175.6 126c-15.3-40.4-69.5-39.4-84.8 0l-89 249.2c-11.7 34.4 38.6 53.1 52.1 17.8l20.5-62.7h117.4l20.5 62.6c14.1 36.5 63.6 15.4 52.1-17.8zM88.6 286.7l43.9-134.4h1.1l43.9 134.4H88.6z" fill="#{$color}"/><path class="lexicon-icon-outline font-family-lowercase-a" d="M316.1 229.9c-8.5 34.1 46.5 36.9 49.9 12.4 5.8-37.3 100.5-52.5 90.3 25.1C176.5 251 345 517.6 456.4 374c-6.9 47.6 55.6 44.7 55.6 11.2V247c.1-96.9-170.5-108.8-195.9-17.1zm43.5 110.7c.8-33.3 32-39.8 96.9-36.1 5.5 88-96.9 82.2-96.9 36.1z" fill="#{$color}"/></svg>',
+
+	'font-size': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline font-size-ns-resize" d="M455.4 348.5 441 362.9V151l14.4 13.6c33.9 29.2 75.9-17.1 46.9-46.2l-62.9-61.1c-12.9-12.5-33.7-12.5-46.6 0L330 118.5c-29.9 31.6 13.6 73.9 46.9 45l14.4-14.4V361l-14.4-13.6c-30.7-27.9-77.4 12.7-46.9 46.2l62.9 61.1c12.9 12.5 33.7 12.5 46.6 0l62.9-61.1c29.3-30.6-14.8-75.2-47-45.1z" fill="#{$color}"/><path class="lexicon-icon-outline font-size-lowercase-a" d="M14.8 183.6C4.9 223.4 69 226.7 73 198.1c6.8-43.5 117.2-61.3 105.4 29.3-326.5-19.2-129.9 291.8 0 124.3-8 55.5 64.9 52.2 64.9 13.1V203.6c.1-113.1-198.9-127-228.5-20zm50.7 129.1c.9-38.9 37.3-46.4 113-42.1 6.5 102.7-113 95.9-113 42.1z" fill="#{$color}"/></svg>',
+
 	'form-extensions': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-form-extensions-border-1" fill="#{$color}" d="M256 0h64v64h-64z"/><circle class="lexicon-icon-outline lx-form-extensions-circle-1" transform="rotate(-11.976 127.97 159.967)" cx="128" cy="160" fill="#{$color}" r="32"/><path class="lexicon-icon-outline lx-form-extensions-rectangle-1" d="M224 192h160c17.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-form-extensions-rectangle-2" d="M384 224H224c-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}"/><circle class="lexicon-icon-outline lx-form-extensions-circle-2" transform="rotate(-61.894 128.006 255.995)" cx="128" cy="256" fill="#{$color}" r="32"/><path class="lexicon-icon-outline lx-form-extensions-rectangle-3" d="M416 354c0-17.7-14.3-32-32-32H224c-17.7 0-32 14.3-32 32s14.3 32 32 32h160c17.7 0 32-14.3 32-32z" fill="#{$color}"/><circle class="lexicon-icon-outline lx-form-extensions-circle-3" cx="128" cy="354" r="32" fill="#{$color}"/><path class="lexicon-icon-outline lx-form-extensions-border-2" fill="#{$color}" d="M448 192h64v128h-64z"/><path class="lexicon-icon-outline lx-form-extensions-border-3" fill="#{$color}" d="M256 448h64v64h-64z"/><path class="lexicon-icon-outline lx-form-extensions-border-4" d="M64 64h128V0H64C28.7 0 0 28.7 0 64v384c0 35.3 28.7 64 64 64h128v-64H64V64z" fill="#{$color}"/><path class="lexicon-icon-outline lx-form-extensions-border-5" d="M448 448h-64v64h64c35.3 0 64-28.7 64-64v-64h-64v64z" fill="#{$color}"/><path class="lexicon-icon-outline lx-form-extensions-border-6" d="M448 0h-64v64h64v64h64V64c0-35.3-28.7-64-64-64z" fill="#{$color}"/></svg>',
 
 	'format': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="format-roller lexicon-icon-outline" d="M416 192H192c-35.3 0-64-28.7-64-64V64c0-35.3 28.7-64 64-64h224c35.3 0 64 28.7 64 64v64c0 35.3-28.7 64-64 64z" fill="#{$color}"/><path class="format-handle lexicon-icon-outline" d="M320 320v-64c0-17.7-14.3-32-32-32H96V96c0-43-64-43-64 0v160c0 17.7 14.3 32 32 32h192v32c-17.7 0-32 14.3-32 32v160h128V352c0-17.7-14.3-32-32-32z" fill="#{$color}"/></svg>',
@@ -666,6 +674,8 @@
 
 	'separator': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline separator-content-2" d="M416 448H96c-17.7 0-32-14.3-32-32v-32c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32z" fill="#{$color}"/><path class="lexicon-icon-outline separator-divider" d="M464 272H48c-21.2 0-20.5-32 0-32h416c20.8 0 21.8 32 0 32z" fill="#{$color}"/><path class="lexicon-icon-outline separator-content-1" d="M416 160H96c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h320c17.7 0 32 14.3 32 32v32c0 17.7-14.3 32-32 32z" fill="#{$color}"/></svg>',
 
+	'shadow': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M453.4 51.3C361.2-33.7 187.7-18 136.6 136 14.2 172.8-55.8 335.2 56.4 455.4c126.2 118 290.4 32 319.5-79.9 150.5-52.9 175.9-229 77.5-324.2zM192.3 191.6c0-168.8 256-168.3 256 0 0 170.7-256 168.5-256 0z" fill="#{$color}"/></svg>',
+
 	'share-alt': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M397.255 402.745a63.725 63.725 0 0 0-20.334-13.702C369.01 385.697 360.625 384 352 384s-17.01 1.697-24.921 5.043a64.4 64.4 0 0 0-7.587 3.822L215.135 288.508a64.019 64.019 0 0 0 3.822-7.587c3.346-7.911 5.042-16.296 5.042-24.922s-1.696-17.011-5.042-24.922a64.17 64.17 0 0 0-3.822-7.587l104.357-104.357a64.094 64.094 0 0 0 7.587 3.822c7.911 3.346 16.296 5.043 24.921 5.043s17.01-1.697 24.921-5.043c7.625-3.225 14.466-7.835 20.334-13.703s10.478-12.709 13.702-20.334C414.303 81.007 416 72.622 416 63.996s-1.697-17.011-5.043-24.922c-3.225-7.625-7.835-14.466-13.702-20.334S384.546 8.263 376.921 5.037C369.01 1.691 360.625-.006 352-.006s-17.01 1.696-24.921 5.043c-7.625 3.225-14.466 7.835-20.334 13.703s-10.478 12.709-13.702 20.334C289.697 46.985 288 55.37 288 63.996s1.697 17.011 5.043 24.922a64.324 64.324 0 0 0 3.822 7.587L192.508 200.862a63.943 63.943 0 0 0-7.587-3.822c-7.911-3.346-16.296-5.042-24.922-5.042s-17.011 1.696-24.922 5.042c-7.625 3.225-14.466 7.835-20.334 13.702s-10.478 12.709-13.703 20.334c-3.346 7.911-5.043 16.296-5.043 24.922s1.697 17.011 5.043 24.922c3.225 7.625 7.835 14.466 13.703 20.334s12.709 10.478 20.334 13.702c7.911 3.346 16.296 5.043 24.922 5.043s17.011-1.697 24.922-5.043a64.324 64.324 0 0 0 7.587-3.822l104.357 104.357a64.094 64.094 0 0 0-3.822 7.587c-3.346 7.911-5.043 16.296-5.043 24.921s1.697 17.01 5.043 24.921c3.225 7.625 7.835 14.466 13.702 20.334s12.709 10.478 20.334 13.702c7.911 3.346 16.296 5.042 24.921 5.042s17.01-1.697 24.921-5.043c7.625-3.225 14.466-7.835 20.334-13.702s10.478-12.709 13.702-20.334c3.346-7.911 5.043-16.296 5.043-24.921s-1.697-17.01-5.043-24.921a63.743 63.743 0 0 0-13.702-20.333zM352 32c17.673 0 32 14.327 32 32s-14.327 32-32 32-32-14.327-32-32 14.327-32 32-32zM160 288c-17.673 0-32-14.327-32-32s14.327-32 32-32 32 14.327 32 32-14.327 32-32 32zm192 192c-17.673 0-32-14.327-32-32s14.327-32 32-32 32 14.327 32 32-14.327 32-32 32z" fill="#{$color}"/></svg>',
 
 	'share': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="m326.2 323.3-107.6-53.8c2.7-5.9 2.4-19.9 0-27.1l107.6-53.8c77.2 69.3 185.8 13 185.8-78.9C512 49.2 462.8 0 402.3 0S287 51.3 293.4 123.3l-107.6 53.8C113.3 108 0 161.7 0 256c0 100.3 118.3 143.7 185.8 78.9l107.6 53.8C285 460.7 341.8 512 402.3 512S512 462.8 512 402.3c0-88-105.7-150.3-185.8-79zm112.7-213.6c0 49-73.1 47.6-73.1 0-.1-49.4 73.1-47.7 73.1 0zM73.1 256c0-49 73.1-49 73.1 0 .1 47.3-73.1 49-73.1 0zm292.6 146.3c0-48.6 73.1-49 73.1 0 .1 48.7-73.1 47.4-73.1 0z" fill="#{$color}"/></svg>',