@clayui/css 3.40.1 → 3.44.0

package/src/scss/components/_input-groups.scss

@@ -121,117 +121,27 @@
 // Input Group
 
 .input-group {
-	align-items: stretch;
-	display: flex;
-	flex-wrap: wrap;
-	position: relative;
-	width: 100%;
-
-	.btn-unstyled {
-		color: inherit;
-	}
+	@include clay-input-group-variant($input-group);
 }
 
 // Input Group Item
 
 .input-group-item {
-	display: flex;
-	flex-grow: 1;
-	flex-wrap: wrap;
-	margin-left: $input-group-item-margin-left;
-	width: 1%;
-	word-wrap: break-word;
-
-	&:first-child {
-		margin-left: 0;
-	}
-
-	> .btn {
-		align-self: flex-start;
-	}
-
-	> .dropdown {
-		display: flex;
-		flex-wrap: wrap;
-		word-wrap: break-word;
-		width: 100%;
-	}
+	@include clay-input-group-item-variant($input-group-item);
 }
 
 .input-group-item-shrink {
-	flex-grow: 0;
-	width: auto;
+	@include clay-input-group-item-variant($input-group-item-shrink);
 }
 
 // Input Group Text
 
 .input-group-text {
-	align-items: center;
-	background-color: $input-group-addon-bg;
-	border-color: $input-group-addon-border-color;
-	border-style: solid;
-
-	border-bottom-width: $input-border-bottom-width;
-	border-left-width: $input-border-left-width;
-	border-right-width: $input-border-right-width;
-	border-top-width: $input-border-top-width;
-
-	@include border-radius($input-border-radius);
-
-	color: $input-group-addon-color;
-	display: flex;
-	font-size: $input-font-size;
-	font-weight: $input-group-addon-font-weight;
-	height: $input-height;
-	justify-content: center;
-	line-height: $input-line-height;
-
-	// Allow use of <label> elements by overriding our default margin-bottom
-
-	margin-bottom: 0;
-	min-width: $input-group-addon-min-width;
-	padding-bottom: $input-group-addon-padding-y;
-	padding-left: $input-group-addon-padding-x;
-	padding-right: $input-group-addon-padding-x;
-	padding-top: $input-group-addon-padding-y;
-	text-align: center;
-	white-space: nowrap;
-
-	@include clay-scale-component {
-		height: $input-height-mobile;
-	}
-
-	label {
-		color: $input-group-addon-color;
-	}
-
-	// Nuke default margins from checkboxes and radios to vertically center within.
-
-	input[type='radio'],
-	input[type='checkbox'] {
-		margin-top: 0;
-	}
-
-	.custom-control,
-	.form-check {
-		margin-bottom: 0;
-	}
-
-	.lexicon-icon {
-		margin-top: 0;
-	}
+	@include clay-input-group-text-variant($input-group-text);
 }
 
 .input-group-text-secondary {
-	background-color: $input-group-secondary-addon-bg;
-	border-color: $input-group-secondary-addon-border-color;
-	border-width: $input-group-secondary-addon-border-width;
-	color: $input-group-secondary-addon-color;
-	z-index: 2;
-
-	label {
-		color: $input-group-secondary-addon-color;
-	}
+	@include clay-input-group-text-variant($input-group-text-secondary);
 }
 
 // Input Group Stacked
@@ -243,83 +153,7 @@
 // Input Group Sizes
 
 %clay-input-group-lg {
-	> .input-group-item {
-		> .btn {
-			@include clay-button-size($input-group-lg-item-btn);
-		}
-
-		> .btn-monospaced {
-			@include clay-button-size($input-group-lg-item-btn-monospaced);
-		}
-
-		> .form-control,
-		> .form-file .btn {
-			@include border-radius($input-border-radius-lg);
-
-			font-size: $input-font-size-lg;
-			height: $input-height-lg;
-			line-height: $input-line-height-lg;
-			padding-bottom: $input-padding-y-lg;
-			padding-left: $input-padding-x-lg;
-			padding-right: $input-padding-x-lg;
-			padding-top: $input-padding-y-lg;
-
-			@include clay-scale-component {
-				height: $input-height-lg-mobile;
-			}
-		}
-
-		> textarea.form-control,
-		> .form-control-textarea {
-			height: $input-textarea-height-lg;
-		}
-
-		> .form-control-plaintext {
-			font-size: $input-font-size-lg;
-			height: $input-height-lg;
-			line-height: $input-line-height-lg;
-			padding-bottom: $input-padding-y-lg;
-			padding-top: $input-padding-y-lg;
-
-			@include clay-scale-component {
-				height: $input-height-lg-mobile;
-			}
-		}
-
-		> .input-group-text {
-			@include border-radius($input-border-radius-lg);
-
-			font-size: $input-font-size-lg;
-			height: $input-height-lg;
-			min-width: $input-group-addon-min-width-lg;
-			padding-bottom: $input-group-addon-padding-y-lg;
-			padding-left: $input-group-addon-padding-x-lg;
-			padding-right: $input-group-addon-padding-x-lg;
-			padding-top: $input-group-addon-padding-y-lg;
-		}
-
-		> .input-group-inset-item {
-			> .btn {
-				@include clay-button-size($input-group-lg-inset-item-btn);
-			}
-
-			> .btn-monospaced {
-				@include clay-button-variant(
-					$input-group-lg-inset-item-btn-monospaced
-				);
-			}
-
-			> .form-file {
-				height: 75%;
-
-				.btn {
-					@include clay-button-size(
-						$input-group-lg-inset-item-form-file-btn
-					);
-				}
-			}
-		}
-	}
+	@include clay-input-group-variant($input-group-lg);
 }
 
 .input-group-lg {
@@ -327,83 +161,7 @@
 }
 
 %clay-input-group-sm {
-	> .input-group-item {
-		> .btn {
-			@include clay-button-size($input-group-sm-item-btn);
-		}
-
-		> .btn-monospaced {
-			@include clay-button-size($input-group-sm-item-btn-monospaced);
-		}
-
-		> .form-control,
-		> .form-file .btn {
-			@include border-radius($input-border-radius-sm);
-
-			font-size: $input-font-size-sm;
-			height: $input-height-sm;
-			line-height: $input-line-height-sm;
-			padding-bottom: $input-padding-y-sm;
-			padding-left: $input-padding-x-sm;
-			padding-right: $input-padding-x-sm;
-			padding-top: $input-padding-y-sm;
-
-			@include clay-scale-component {
-				height: $input-height-sm-mobile;
-			}
-		}
-
-		> .form-control-plaintext {
-			font-size: $input-font-size-sm;
-			height: $input-height-sm;
-			line-height: $input-line-height-sm;
-			padding-bottom: $input-padding-y-sm;
-			padding-top: $input-padding-y-sm;
-
-			@include clay-scale-component {
-				height: $input-height-sm-mobile;
-			}
-		}
-
-		> textarea.form-control,
-		> .form-control-textarea {
-			height: $input-textarea-height-sm;
-		}
-
-		> .input-group-text {
-			@include border-radius($input-border-radius-sm);
-
-			font-size: $input-font-size-sm;
-			height: $input-height-sm;
-			min-width: $input-group-addon-min-width-sm;
-			padding-bottom: $input-group-addon-padding-y-sm;
-			padding-left: $input-group-addon-padding-x-sm;
-			padding-right: $input-group-addon-padding-x-sm;
-			padding-top: $input-group-addon-padding-y-sm;
-		}
-
-		> .input-group-inset-item {
-			> .btn {
-				@include clay-button-size($input-group-sm-inset-item-btn);
-			}
-
-			> .btn-monospaced {
-				@include clay-button-variant(
-					$input-group-sm-inset-item-btn-monospaced
-				);
-			}
-
-			> .form-file {
-				height: 75%;
-
-				.btn {
-					@include clay-button-size(
-						$input-group-sm-inset-item-form-file-btn
-					);
-				}
-			}
-		}
-	}
+	@include clay-input-group-variant($input-group-sm);
 
 	&.clay-color {
 		> .input-group-item > .input-group-text {
@@ -432,72 +190,18 @@
 
 // Input Group Inset
 
-.input-group-item.focus {
-	@include border-radius($input-border-radius);
-
-	box-shadow: $input-focus-box-shadow;
-
-	.form-control,
-	.form-control[readonly] ~ .input-group-inset-item,
-	.input-group-inset-item {
-		background-color: $input-focus-bg;
-		border-color: $input-focus-border-color;
-	}
-}
-
-.input-group-item.input-group-prepend.focus {
-	@include border-right-radius(0);
-
-	z-index: 1;
-}
-
-.input-group-item.input-group-append.focus {
-	@include border-left-radius(0);
-}
-
 .input-group-inset {
-	flex-grow: 1;
-	order: 5;
-	width: 1%;
-
-	&[readonly] {
-		&:focus {
-			~ .input-group-inset-item {
-				background-color: $input-readonly-focus-bg;
-				border-color: $input-readonly-focus-border-color;
-				color: $input-readonly-focus-color;
-			}
-		}
-
-		~ .input-group-inset-item {
-			background-color: $input-readonly-bg;
-			border-color: $input-readonly-border-color;
-			color: $input-readonly-color;
-			cursor: $input-readonly-cursor;
-		}
-	}
-
-	&:focus {
-		box-shadow: none;
-
-		~ .input-group-inset-item {
-			background-color: $input-focus-bg;
-			border-color: $input-focus-border-color;
-		}
-	}
-
-	&:disabled {
-		~ .input-group-inset-item {
-			background-color: $input-disabled-bg;
-			border-color: $input-disabled-border-color;
-		}
-	}
+	@include clay-form-control-variant($input-group-inset);
 
 	~ .form-feedback-group {
 		order: 13;
 	}
 }
 
+.input-group-inset[readonly] {
+	@include clay-form-control-variant($input-group-inset-readonly);
+}
+
 .input-group {
 	.input-group-inset-item {
 		align-items: center;

package/src/scss/components/_multi-step-nav.scss

@@ -10,8 +10,9 @@
 
 .multi-step-indicator-label-bottom {
 	.multi-step-item {
-		padding-bottom: $multi-step-indicator-label-font-size *
-			$line-height-base;
+		padding-bottom: calc(
+			#{$multi-step-indicator-label-font-size} * #{$line-height-base}
+		);
 	}
 
 	.multi-step-indicator-label {
@@ -21,17 +22,19 @@
 
 .multi-step-indicator-label-top {
 	.multi-step-item {
-		padding-top: $multi-step-indicator-label-font-size * $line-height-base;
+		padding-top: calc(
+			#{$multi-step-indicator-label-font-size} * #{$line-height-base}
+		);
 	}
 
 	.multi-step-indicator-label {
-		bottom: $multi-step-icon-size + $multi-step-divider-height;
+		bottom: calc(#{$multi-step-icon-size} + #{$multi-step-divider-height});
 	}
 }
 
 .multi-step-title-center {
 	.multi-step-title {
-		margin-left: $multi-step-icon-size * 0.5;
+		margin-left: calc(#{$multi-step-icon-size} * 0.5);
 		max-width: $multi-step-title-max-width;
 		overflow: hidden;
 		position: relative;
@@ -337,9 +340,10 @@
 		.multi-step-item {
 			margin-bottom: 0;
 			min-width: $multi-step-icon-size;
-			padding-top: $multi-step-title-font-size +
-				$multi-step-title-margin-bottom +
-				($multi-step-divider-height * 0.5);
+			padding-top: calc(
+				#{$multi-step-title-font-size} + #{$multi-step-title-margin-bottom} +
+					(#{$multi-step-divider-height} * 0.5)
+			);
 		}
 
 		.multi-step-title {

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