@clayui/css 3.42.0 → 3.44.2

package/src/scss/components/_navs.scss

@@ -1,10 +1,5 @@
 .nav {
-	display: flex;
-	flex-wrap: wrap;
-	font-size: $nav-font-size;
-	list-style: none;
-	margin-bottom: 0;
-	padding-left: 0;
+	@include clay-css($nav);
 }
 
 // Nav Link
@@ -23,17 +18,18 @@
 	@include clay-button-variant($nav-btn);
 
 	&.btn-link {
-		margin-left: 0;
-		margin-right: 0;
+		@include clay-button-variant(map-get($nav-btn, btn-link));
 	}
 }
 
-// Nav Item Monospaced
+// Nav Btn Monospaced
 
 .nav-btn-monospaced {
 	@include clay-button-variant($nav-btn-monospaced);
 }
 
+// Nav Link Monospaced
+
 .nav-link-monospaced {
 	@include clay-link($nav-link-monospaced);
 }
@@ -41,7 +37,7 @@
 // Nav Item
 
 .nav-item {
-	word-wrap: break-word;
+	@include clay-css($nav-item);
 }
 
 .nav-item[class*='col-'] {
@@ -50,12 +46,36 @@
 	text-align: center;
 }
 
-.nav-text-truncate {
-	display: inline-block;
-	margin-bottom: -6px;
-	max-width: 100%;
+// Nav Divider
+
+.nav-divider {
+	@include clay-css($nav-divider);
 
-	@include text-truncate;
+	&::before {
+		@include clay-css(map-get($nav-divider, 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 {
+	@include clay-css($nav-text-truncate);
 }
 
 .dropdown-toggle .nav-text-truncate {
@@ -64,73 +84,32 @@
 
 // Nav Form
 
-.nav-form {
-	padding-bottom: $nav-stacked-nav-form-padding-bottom;
-	padding-left: $nav-stacked-nav-form-padding-left;
-	padding-right: $nav-stacked-nav-form-padding-right;
-	padding-top: $nav-stacked-nav-form-padding-top;
-}
-
 .nav .nav-form {
-	padding-bottom: $nav-form-padding-bottom;
-	padding-left: $nav-form-padding-left;
-	padding-right: $nav-form-padding-right;
-	padding-top: $nav-form-padding-top;
+	@include clay-css(map-get($nav, nav-form));
 }
 
-// Nav Justified
+// Nav Fill
 
 .nav-fill {
-	.nav-item {
-		flex: 1 1 auto;
-		text-align: center;
-	}
+	@include clay-nav-variant($nav-fill);
 }
 
-.nav-justified {
-	.nav-item {
-		flex-basis: 0;
-		flex-grow: 1;
-		text-align: center;
-	}
+// Nav Justified
 
-	button.nav-link {
-		text-align: center;
-		width: 100%;
-	}
+.nav-justified {
+	@include clay-nav-variant($nav-justified);
 }
 
 // Nav Stacked
 
 .nav-stacked {
-	display: block;
-
-	.nav-form {
-		padding-bottom: $nav-stacked-nav-form-padding-bottom;
-		padding-left: $nav-stacked-nav-form-padding-left;
-		padding-right: $nav-stacked-nav-form-padding-right;
-		padding-top: $nav-stacked-nav-form-padding-top;
-	}
+	@include clay-nav-variant($nav-stacked);
 }
 
 // Nav Unstyled
 
 .nav-unstyled {
-	flex-wrap: nowrap;
-
-	.nav-btn {
-		margin: 0 4px;
-		padding: 0 4px;
-	}
-
-	.nav-link {
-		line-height: $nav-item-monospaced-size;
-		padding: 0 4px;
-	}
-
-	.nav-link-monospaced {
-		margin: 0 4px;
-	}
+	@include clay-nav-variant($nav-unstyled);
 }
 
 // Nav Nested
@@ -154,20 +133,7 @@
 // Nav Tabs
 
 .nav-tabs {
-	border-bottom: $nav-tabs-border-width solid $nav-tabs-border-color;
-	font-size: $nav-tabs-font-size;
-
-	.nav-item {
-		margin-bottom: math-sign($nav-tabs-border-width);
-	}
-
-	.nav-link {
-		@include clay-link($nav-tabs-link);
-	}
-
-	.nav-item.show .nav-link {
-		@include clay-link($nav-tabs-link-show);
-	}
+	@include clay-nav-variant($nav-tabs);
 
 	.dropdown-menu {
 		@include border-top-radius(0);
@@ -248,54 +214,5 @@
 }
 
 .nav-underline {
-	font-size: $nav-underline-font-size;
-
-	.nav-link {
-		@include clay-link($nav-underline-link);
-	}
-
-	.nav-item.show .nav-link {
-		@include clay-link($nav-underline-link-show);
-	}
-
-	.nav-link::after {
-		bottom: $nav-underline-link-highlight-bottom;
-		content: $nav-underline-link-highlight-content;
-		display: block;
-		height: $nav-underline-link-highlight-height;
-		position: absolute;
-		left: $nav-underline-link-highlight-left;
-		right: $nav-underline-link-highlight-right;
-		top: $nav-underline-link-highlight-top;
-		width: auto;
-	}
-
-	.nav-item .nav-link.active:after {
-		background-color: $nav-underline-link-active-highlight;
-	}
-
-	.nav-link.active,
-	.nav-item.show .nav-link {
-		&:after {
-			@if not(
-				$nav-underline-link-active-content ==
-					$nav-underline-link-highlight-content
-			)
-			{
-				content: $nav-underline-link-active-content;
-			}
-
-			@if not(
-				$nav-underline-link-active-highlight-height ==
-					$nav-underline-link-highlight-height
-			)
-			{
-				height: $nav-underline-link-active-highlight-height;
-			}
-		}
-	}
-
-	.nav-item .nav-link.disabled:after {
-		background-color: $nav-underline-link-disabled-highlight;
-	}
+	@include clay-nav-variant($nav-underline);
 }

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

@@ -204,6 +204,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>',

package/src/scss/mixins/_buttons.scss

@@ -635,25 +635,19 @@
 				}
 
 				.inline-item {
-					@include clay-css(setter(map-get($hover, inline-item), ()));
+					@include clay-css(map-get($hover, inline-item));
 				}
 
 				.inline-item-before {
-					@include clay-css(
-						setter(map-get($hover, inline-item-before), ())
-					);
+					@include clay-css(map-get($hover, inline-item-before));
 				}
 
 				.inline-item-middle {
-					@include clay-css(
-						setter(map-get($hover, inline-item-middle), ())
-					);
+					@include clay-css(map-get($hover, inline-item-middle));
 				}
 
 				.inline-item-after {
-					@include clay-css(
-						setter(map-get($hover, inline-item-after), ())
-					);
+					@include clay-css(map-get($hover, inline-item-after));
 				}
 			}
 
@@ -670,25 +664,19 @@
 				}
 
 				.inline-item {
-					@include clay-css(setter(map-get($focus, inline-item), ()));
+					@include clay-css(map-get($focus, inline-item));
 				}
 
 				.inline-item-before {
-					@include clay-css(
-						setter(map-get($focus, inline-item-before), ())
-					);
+					@include clay-css(map-get($focus, inline-item-before));
 				}
 
 				.inline-item-middle {
-					@include clay-css(
-						setter(map-get($focus, inline-item-middle), ())
-					);
+					@include clay-css(map-get($focus, inline-item-middle));
 				}
 
 				.inline-item-after {
-					@include clay-css(
-						setter(map-get($focus, inline-item-after), ())
-					);
+					@include clay-css(map-get($focus, inline-item-after));
 				}
 			}
 
@@ -720,27 +708,19 @@
 				}
 
 				.inline-item {
-					@include clay-css(
-						setter(map-get($active, inline-item), ())
-					);
+					@include clay-css(map-get($active, inline-item));
 				}
 
 				.inline-item-before {
-					@include clay-css(
-						setter(map-get($active, inline-item-before), ())
-					);
+					@include clay-css(map-get($active, inline-item-before));
 				}
 
 				.inline-item-middle {
-					@include clay-css(
-						setter(map-get($active, inline-item-middle), ())
-					);
+					@include clay-css(map-get($active, inline-item-middle));
 				}
 
 				.inline-item-after {
-					@include clay-css(
-						setter(map-get($active, inline-item-after), ())
-					);
+					@include clay-css(map-get($active, inline-item-after));
 				}
 			}
 
@@ -756,26 +736,24 @@
 				}
 
 				.inline-item {
-					@include clay-css(
-						setter(map-get($active-class, inline-item), ())
-					);
+					@include clay-css(map-get($active-class, inline-item));
 				}
 
 				.inline-item-before {
 					@include clay-css(
-						setter(map-get($active-class, inline-item-before), ())
+						map-get($active-class, inline-item-before)
 					);
 				}
 
 				.inline-item-middle {
 					@include clay-css(
-						setter(map-get($active-class, inline-item-middle), ())
+						map-get($active-class, inline-item-middle)
 					);
 				}
 
 				.inline-item-after {
 					@include clay-css(
-						setter(map-get($active-class, inline-item-after), ())
+						map-get($active-class, inline-item-after)
 					);
 				}
 			}
@@ -825,27 +803,19 @@
 				}
 
 				.inline-item {
-					@include clay-css(
-						setter(map-get($disabled, inline-item), ())
-					);
+					@include clay-css(map-get($disabled, inline-item));
 				}
 
 				.inline-item-before {
-					@include clay-css(
-						setter(map-get($disabled, inline-item-before), ())
-					);
+					@include clay-css(map-get($disabled, inline-item-before));
 				}
 
 				.inline-item-middle {
-					@include clay-css(
-						setter(map-get($disabled, inline-item-middle), ())
-					);
+					@include clay-css(map-get($disabled, inline-item-middle));
 				}
 
 				.inline-item-after {
-					@include clay-css(
-						setter(map-get($disabled, inline-item-after), ())
-					);
+					@include clay-css(map-get($disabled, inline-item-after));
 				}
 			}
 
@@ -877,32 +847,25 @@
 			}
 
 			.inline-item-before {
-				@include clay-css(
-					setter(map-get($map, inline-item-before), ())
-				);
+				@include clay-css(map-get($map, inline-item-before));
 			}
 
 			.inline-item-middle {
-				@include clay-css(
-					setter(map-get($map, inline-item-middle), ())
-				);
+				@include clay-css(map-get($map, inline-item-middle));
 
 				+ .inline-item-middle {
 					@include clay-css(
-						setter(
-							map-deep-get(
-								$map,
-								inline-item-middle,
-								inline-item-middle
-							),
-							()
+						map-deep-get(
+							$map,
+							inline-item-middle,
+							inline-item-middle
 						)
 					);
 				}
 			}
 
 			.inline-item-after {
-				@include clay-css(setter(map-get($map, inline-item-after), ()));
+				@include clay-css(map-get($map, inline-item-after));
 			}
 
 			.btn-section {