@clayui/css 3.41.0 → 3.44.1

package/src/scss/atlas/variables/_navs.scss

@@ -1,5 +1,7 @@
 $nav-font-size: 0.875rem !default;
 
+// .nav-link
+
 $nav-link-disabled-color: $gray-500 !default;
 
 $nav-link-padding-x: 1rem !default; // 16px
@@ -15,6 +17,8 @@ $nav-link: map-deep-merge(
 	$nav-link
 );
 
+// .nav-link.btn-unstyled
+
 $nav-link-btn-unstyled: () !default;
 $nav-link-btn-unstyled: map-deep-merge(
 	(
@@ -45,6 +49,11 @@ $nav-tabs-link-active-bg: $white !default;
 $nav-tabs-link-active-border-color: transparent transparent $body-bg !default;
 $nav-tabs-link-active-color: $gray-900 !default;
 
+$nav-tabs-link-show-color: $nav-tabs-link-active-color !default;
+$nav-tabs-link-show-bg: transparent !default;
+$nav-tabs-link-show-border-color: transparent transparent $nav-tabs-border-color
+	transparent !default;
+
 $nav-tabs-link: () !default;
 $nav-tabs-link: map-deep-merge(
 	(
@@ -56,24 +65,28 @@ $nav-tabs-link: map-deep-merge(
 		),
 		disabled: (
 			box-shadow: none,
+			active: (
+				box-shadow: none,
+			),
 		),
 	),
 	$nav-tabs-link
 );
 
-// Nav Tabs Link Show
-
-$nav-tabs-link-show-color: $nav-tabs-link-active-color !default;
-$nav-tabs-link-show-bg: transparent !default;
-$nav-tabs-link-show-border-color: transparent transparent $nav-tabs-border-color
-	transparent !default;
-
 // Nav Tabs Tab Pane
 
 $nav-tabs-tab-pane-bg: $white !default;
 $nav-tabs-tab-pane-border-radius: 4px !default;
 $nav-tabs-tab-pane-padding: 2rem !default;
 
+// Nav Underline Link Highlight
+
+$nav-underline-link-highlight-left: 0 !default;
+$nav-underline-link-highlight-right: 0 !default;
+
+$nav-underline-link-active-highlight: $primary-l1 !default;
+$nav-underline-link-active-highlight-height: 0.125rem !default; // 2px
+
 // Nav Underline
 
 $nav-underline-link-color: $gray-600 !default;
@@ -101,11 +114,3 @@ $nav-underline-link: map-deep-merge(
 	),
 	$nav-underline-link
 );
-
-// Nav Underline Link Highlight
-
-$nav-underline-link-highlight-left: 0 !default;
-$nav-underline-link-highlight-right: 0 !default;
-
-$nav-underline-link-active-highlight: $primary-l1 !default;
-$nav-underline-link-active-highlight-height: 0.125rem !default; // 2px

package/src/scss/atlas/variables/_pagination.scss

@@ -33,6 +33,8 @@ $pagination-hover-bg: rgba(0, 0, 0, 0.02) !default;
 $pagination-hover-border-color: transparent !default;
 $pagination-hover-color: $gray-900 !default;
 
+$pagination-focus-box-shadow: $component-focus-box-shadow !default;
+
 $pagination-active-bg: rgba(0, 0, 0, 0.04) !default;
 $pagination-active-border-color: transparent !default;
 $pagination-active-color: $pagination-hover-color !default;

package/src/scss/atlas/variables/_sidebar.scss

@@ -73,7 +73,7 @@ $sidebar-light: map-deep-merge(
 $sidebar-light-navigation-bar: () !default;
 $sidebar-light-navigation-bar: map-deep-merge(
 	(
-		bg: $white,
+		background-color: $white,
 		border-color: $secondary-l2,
 	),
 	$sidebar-light-navigation-bar

package/src/scss/cadmin/components/_dropdowns.scss

@@ -410,6 +410,10 @@
 
 // Dropdown Menu Width
 
+.dropdown-menu-width-shrink {
+	@include clay-dropdown-menu-variant($cadmin-dropdown-menu-width-shrink);
+}
+
 .dropdown-menu-width-full {
 	@include clay-css($cadmin-dropdown-menu-width-full);
 }

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

@@ -69,117 +69,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($cadmin-input-group);
 }
 
 // Input Group Item
 
 .input-group-item {
-	display: flex;
-	flex-grow: 1;
-	flex-wrap: wrap;
-	margin-left: $cadmin-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($cadmin-input-group-item);
 }
 
 .input-group-item-shrink {
-	flex-grow: 0;
-	width: auto;
+	@include clay-input-group-item-variant($cadmin-input-group-item-shrink);
 }
 
 // Input Group Text
 
 .input-group-text {
-	align-items: center;
-	background-color: $cadmin-input-group-addon-bg;
-	border-color: $cadmin-input-group-addon-border-color;
-	border-style: solid;
-
-	border-bottom-width: $cadmin-input-border-bottom-width;
-	border-left-width: $cadmin-input-border-left-width;
-	border-right-width: $cadmin-input-border-right-width;
-	border-top-width: $cadmin-input-border-top-width;
-
-	@include border-radius($cadmin-input-border-radius);
-
-	color: $cadmin-input-group-addon-color;
-	display: flex;
-	font-size: $cadmin-input-font-size;
-	font-weight: $cadmin-input-group-addon-font-weight;
-	height: $cadmin-input-height;
-	justify-content: center;
-	line-height: $cadmin-input-line-height;
-
-	// Allow use of <label> elements by overriding our default margin-bottom
-
-	margin-bottom: 0;
-	min-width: $cadmin-input-group-addon-min-width;
-	padding-bottom: $cadmin-input-group-addon-padding-y;
-	padding-left: $cadmin-input-group-addon-padding-x;
-	padding-right: $cadmin-input-group-addon-padding-x;
-	padding-top: $cadmin-input-group-addon-padding-y;
-	text-align: center;
-	white-space: nowrap;
-
-	@include clay-scale-component {
-		height: $cadmin-input-height-mobile;
-	}
-
-	label {
-		color: $cadmin-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($cadmin-input-group-text);
 }
 
 .input-group-text-secondary {
-	background-color: $cadmin-input-group-secondary-addon-bg;
-	border-color: $cadmin-input-group-secondary-addon-border-color;
-	border-width: $cadmin-input-group-secondary-addon-border-width;
-	color: $cadmin-input-group-secondary-addon-color;
-	z-index: 2;
-
-	label {
-		color: $cadmin-input-group-secondary-addon-color;
-	}
+	@include clay-input-group-text-variant($cadmin-input-group-text-secondary);
 }
 
 // Input Group Stacked
@@ -191,85 +101,7 @@
 // Input Group Sizes
 
 %clay-input-group-lg {
-	> .input-group-item {
-		> .btn {
-			@include clay-button-size($cadmin-input-group-lg-item-btn);
-		}
-
-		> .btn-monospaced {
-			@include clay-button-size(
-				$cadmin-input-group-lg-item-btn-monospaced
-			);
-		}
-
-		> .form-control,
-		> .form-file .btn {
-			@include border-radius($cadmin-input-border-radius-lg);
-
-			font-size: $cadmin-input-font-size-lg;
-			height: $cadmin-input-height-lg;
-			line-height: $cadmin-input-line-height-lg;
-			padding-bottom: $cadmin-input-padding-y-lg;
-			padding-left: $cadmin-input-padding-x-lg;
-			padding-right: $cadmin-input-padding-x-lg;
-			padding-top: $cadmin-input-padding-y-lg;
-
-			@include clay-scale-component {
-				height: $cadmin-input-height-lg-mobile;
-			}
-		}
-
-		> textarea.form-control,
-		> .form-control-textarea {
-			height: $cadmin-input-textarea-height-lg;
-		}
-
-		> .form-control-plaintext {
-			font-size: $cadmin-input-font-size-lg;
-			height: $cadmin-input-height-lg;
-			line-height: $cadmin-input-line-height-lg;
-			padding-bottom: $cadmin-input-padding-y-lg;
-			padding-top: $cadmin-input-padding-y-lg;
-
-			@include clay-scale-component {
-				height: $cadmin-input-height-lg-mobile;
-			}
-		}
-
-		> .input-group-text {
-			@include border-radius($cadmin-input-border-radius-lg);
-
-			font-size: $cadmin-input-font-size-lg;
-			height: $cadmin-input-height-lg;
-			min-width: $cadmin-input-group-addon-min-width-lg;
-			padding-bottom: $cadmin-input-group-addon-padding-y-lg;
-			padding-left: $cadmin-input-group-addon-padding-x-lg;
-			padding-right: $cadmin-input-group-addon-padding-x-lg;
-			padding-top: $cadmin-input-group-addon-padding-y-lg;
-		}
-	}
-
-	> .input-group-inset-item {
-		> .btn {
-			@include clay-button-size($cadmin-input-group-lg-inset-item-btn);
-		}
-
-		> .btn-monospaced {
-			@include clay-button-variant(
-				$cadmin-input-group-lg-inset-item-btn-monospaced
-			);
-		}
-
-		> .form-file {
-			height: 75%;
-
-			.btn {
-				@include clay-button-size(
-					$cadmin-input-group-lg-inset-item-form-file-btn
-				);
-			}
-		}
-	}
+	@include clay-input-group-variant($cadmin-input-group-lg);
 }
 
 .input-group-lg {
@@ -277,85 +109,7 @@
 }
 
 %clay-input-group-sm {
-	> .input-group-item {
-		> .btn {
-			@include clay-button-size($cadmin-input-group-sm-item-btn);
-		}
-
-		> .btn-monospaced {
-			@include clay-button-size(
-				$cadmin-input-group-sm-item-btn-monospaced
-			);
-		}
-
-		> .form-control,
-		> .form-file .btn {
-			@include border-radius($cadmin-input-border-radius-sm);
-
-			font-size: $cadmin-input-font-size-sm;
-			height: $cadmin-input-height-sm;
-			line-height: $cadmin-input-line-height-sm;
-			padding-bottom: $cadmin-input-padding-y-sm;
-			padding-left: $cadmin-input-padding-x-sm;
-			padding-right: $cadmin-input-padding-x-sm;
-			padding-top: $cadmin-input-padding-y-sm;
-
-			@include clay-scale-component {
-				height: $cadmin-input-height-sm-mobile;
-			}
-		}
-
-		> .form-control-plaintext {
-			font-size: $cadmin-input-font-size-sm;
-			height: $cadmin-input-height-sm;
-			line-height: $cadmin-input-line-height-sm;
-			padding-bottom: $cadmin-input-padding-y-sm;
-			padding-top: $cadmin-input-padding-y-sm;
-
-			@include clay-scale-component {
-				height: $cadmin-input-height-sm-mobile;
-			}
-		}
-
-		> textarea.form-control,
-		> .form-control-textarea {
-			height: $cadmin-input-textarea-height-sm;
-		}
-
-		> .input-group-text {
-			@include border-radius($cadmin-input-border-radius-sm);
-
-			font-size: $cadmin-input-font-size-sm;
-			height: $cadmin-input-height-sm;
-			min-width: $cadmin-input-group-addon-min-width-sm;
-			padding-bottom: $cadmin-input-group-addon-padding-y-sm;
-			padding-left: $cadmin-input-group-addon-padding-x-sm;
-			padding-right: $cadmin-input-group-addon-padding-x-sm;
-			padding-top: $cadmin-input-group-addon-padding-y-sm;
-		}
-	}
-
-	> .input-group-inset-item {
-		> .btn {
-			@include clay-button-size($cadmin-input-group-sm-inset-item-btn);
-		}
-
-		> .btn-monospaced {
-			@include clay-button-variant(
-				$cadmin-input-group-sm-inset-item-btn-monospaced
-			);
-		}
-
-		> .form-file {
-			height: 75%;
-
-			.btn {
-				@include clay-button-size(
-					$cadmin-input-group-sm-inset-item-form-file-btn
-				);
-			}
-		}
-	}
+	@include clay-input-group-variant($cadmin-input-group-sm);
 
 	&.clay-color {
 		> .input-group-item > .input-group-text {
@@ -384,72 +138,18 @@
 
 // Input Group Inset
 
-.input-group-item.focus {
-	@include border-radius($cadmin-input-border-radius);
-
-	box-shadow: $cadmin-input-focus-box-shadow;
-
-	.form-control,
-	.form-control[readonly] ~ .input-group-inset-item,
-	.input-group-inset-item {
-		background-color: $cadmin-input-focus-bg;
-		border-color: $cadmin-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: $cadmin-input-readonly-focus-bg;
-				border-color: $cadmin-input-readonly-focus-border-color;
-				color: $cadmin-input-readonly-focus-color;
-			}
-		}
-
-		~ .input-group-inset-item {
-			background-color: $cadmin-input-readonly-bg;
-			border-color: $cadmin-input-readonly-border-color;
-			color: $cadmin-input-readonly-color;
-			cursor: $cadmin-input-readonly-cursor;
-		}
-	}
-
-	&:focus {
-		box-shadow: none;
-
-		~ .input-group-inset-item {
-			background-color: $cadmin-input-focus-bg;
-			border-color: $cadmin-input-focus-border-color;
-		}
-	}
-
-	&:disabled {
-		~ .input-group-inset-item {
-			background-color: $cadmin-input-disabled-bg;
-			border-color: $cadmin-input-disabled-border-color;
-		}
-	}
+	@include clay-form-control-variant($cadmin-input-group-inset);
 
 	~ .form-feedback-group {
 		order: 13;
 	}
 }
 
+.input-group-inset[readonly] {
+	@include clay-form-control-variant($cadmin-input-group-inset-readonly);
+}
+
 .input-group {
 	.input-group-inset-item {
 		align-items: center;

package/src/scss/cadmin/components/_navs.scss

@@ -1,10 +1,5 @@
 .nav {
-	display: flex;
-	flex-wrap: wrap;
-	font-size: $cadmin-nav-font-size;
-	list-style: none;
-	margin-bottom: 0;
-	padding-left: 0;
+	@include clay-css($cadmin-nav);
 }
 
 // Nav Link
@@ -23,8 +18,7 @@
 	@include clay-button-variant($cadmin-nav-btn);
 
 	&.btn-link {
-		margin-left: 0;
-		margin-right: 0;
+		@include clay-button-variant(map-get($cadmin-nav-btn, btn-link));
 	}
 }
 
@@ -41,7 +35,7 @@
 // Nav Item
 
 .nav-item {
-	word-wrap: break-word;
+	@include clay-css($cadmin-nav-item);
 }
 
 .nav-item[class*='col-'] {
@@ -50,12 +44,34 @@
 	text-align: center;
 }
 
-.nav-text-truncate {
-	display: inline-block;
-	margin-bottom: -6px;
-	max-width: 100%;
+// .nav-divider
 
-	@include text-truncate;
+.nav-divider {
+	@include clay-css($cadmin-nav-divider);
+
+	&::before {
+		@include clay-css(map-get($cadmin-nav-divider, before));
+	}
+
+	&::after {
+		@include clay-css(map-get($cadmin-nav-divider, after));
+	}
+}
+
+.nav-divider-end {
+	@include clay-css($cadmin-nav-divider-end);
+
+	&::before {
+		@include clay-css(map-get($cadmin-nav-divider-end, before));
+	}
+
+	&::after {
+		@include clay-css(map-get($cadmin-nav-divider-end, after));
+	}
+}
+
+.nav-text-truncate {
+	@include clay-css($cadmin-nav-text-truncate);
 }
 
 .dropdown-toggle .nav-text-truncate {
@@ -64,18 +80,8 @@
 
 // Nav Form
 
-.nav-form {
-	padding-bottom: $cadmin-nav-stacked-nav-form-padding-bottom;
-	padding-left: $cadmin-nav-stacked-nav-form-padding-left;
-	padding-right: $cadmin-nav-stacked-nav-form-padding-right;
-	padding-top: $cadmin-nav-stacked-nav-form-padding-top;
-}
-
 .nav .nav-form {
-	padding-bottom: $cadmin-nav-form-padding-bottom;
-	padding-left: $cadmin-nav-form-padding-left;
-	padding-right: $cadmin-nav-form-padding-right;
-	padding-top: $cadmin-nav-form-padding-top;
+	@include clay-css($cadmin-nav-form);
 }
 
 // Nav Justified
@@ -103,34 +109,13 @@
 // Nav Stacked
 
 .nav-stacked {
-	display: block;
-
-	.nav-form {
-		padding-bottom: $cadmin-nav-stacked-nav-form-padding-bottom;
-		padding-left: $cadmin-nav-stacked-nav-form-padding-left;
-		padding-right: $cadmin-nav-stacked-nav-form-padding-right;
-		padding-top: $cadmin-nav-stacked-nav-form-padding-top;
-	}
+	@include clay-nav-variant($cadmin-nav-stacked);
 }
 
 // Nav Unstyled
 
 .nav-unstyled {
-	flex-wrap: nowrap;
-
-	.nav-btn {
-		margin: 0 4px;
-		padding: 0 4px;
-	}
-
-	.nav-link {
-		line-height: $cadmin-nav-item-monospaced-size;
-		padding: 0 4px;
-	}
-
-	.nav-link-monospaced {
-		margin: 0 4px;
-	}
+	@include clay-nav-variant($cadmin-nav-unstyled);
 }
 
 // Nav Nested
@@ -154,21 +139,7 @@
 // Nav Tabs
 
 .nav-tabs {
-	border-bottom: $cadmin-nav-tabs-border-width solid
-		$cadmin-nav-tabs-border-color;
-	font-size: $cadmin-nav-tabs-font-size;
-
-	.nav-item {
-		margin-bottom: math-sign($cadmin-nav-tabs-border-width);
-	}
-
-	.nav-link {
-		@include clay-link($cadmin-nav-tabs-link);
-	}
-
-	.nav-item.show .nav-link {
-		@include clay-link($cadmin-nav-tabs-link-show);
-	}
+	@include clay-nav-variant($cadmin-nav-tabs);
 
 	.dropdown-menu {
 		@include border-top-radius(0);
@@ -236,54 +207,5 @@
 }
 
 .nav-underline {
-	font-size: $cadmin-nav-underline-font-size;
-
-	.nav-link {
-		@include clay-link($cadmin-nav-underline-link);
-	}
-
-	.nav-item.show .nav-link {
-		@include clay-link($cadmin-nav-underline-link-show);
-	}
-
-	.nav-link::after {
-		bottom: $cadmin-nav-underline-link-highlight-bottom;
-		content: $cadmin-nav-underline-link-highlight-content;
-		display: block;
-		height: $cadmin-nav-underline-link-highlight-height;
-		position: absolute;
-		left: $cadmin-nav-underline-link-highlight-left;
-		right: $cadmin-nav-underline-link-highlight-right;
-		top: $cadmin-nav-underline-link-highlight-top;
-		width: auto;
-	}
-
-	.nav-item .nav-link.active:after {
-		background-color: $cadmin-nav-underline-link-active-highlight;
-	}
-
-	.nav-link.active,
-	.nav-item.show .nav-link {
-		&:after {
-			@if not(
-				$cadmin-nav-underline-link-active-content ==
-					$cadmin-nav-underline-link-highlight-content
-			)
-			{
-				content: $cadmin-nav-underline-link-active-content;
-			}
-
-			@if not(
-				$cadmin-nav-underline-link-active-highlight-height ==
-					$cadmin-nav-underline-link-highlight-height
-			)
-			{
-				height: $cadmin-nav-underline-link-active-highlight-height;
-			}
-		}
-	}
-
-	.nav-item .nav-link.disabled:after {
-		background-color: $cadmin-nav-underline-link-disabled-highlight;
-	}
+	@include clay-nav-variant($cadmin-nav-underline);
 }