@clayui/css 3.40.1 → 3.44.0

package/src/scss/atlas/variables/_navigation-bar.scss

@@ -15,10 +15,20 @@ $navigation-bar-size: map-deep-merge(
 $navigation-bar-base: () !default;
 $navigation-bar-base: map-deep-merge(
 	(
-		link-border-radius: 0,
-		link-outline: 0,
-		link-focus-box-shadow: $btn-focus-box-shadow,
-		link-disabled-box-shadow: none,
+		navbar-nav: (
+			nav-link: (
+				border-radius: 0,
+				outline: 0,
+				focus: (
+					box-shadow: $btn-focus-box-shadow,
+				),
+				disabled: (
+					box-shadow: none,
+				),
+			),
+		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$navigation-bar-base
 );
@@ -26,13 +36,50 @@ $navigation-bar-base: map-deep-merge(
 $navigation-bar-light: () !default;
 $navigation-bar-light: map-deep-merge(
 	(
-		bg: $white,
+		background-color: $white,
 		border-color: $gray-200,
-		link-font-weight: $font-weight-semi-bold,
-		link-hover-color: $gray-900,
-		link-focus-color: $gray-900,
-		link-disabled-color: $gray-600,
-		link-disabled-opacity: $btn-disabled-opacity,
+		navbar-nav: (
+			nav-link: (
+				font-weight: $font-weight-semi-bold,
+				hover: (
+					color: $gray-900,
+				),
+				focus: (
+					color: $gray-900,
+				),
+				disabled: (
+					color: $gray-600,
+					opacity: $btn-disabled-opacity,
+				),
+			),
+		),
+		media-breakpoint-down: (
+			sm: (
+				navbar-expand-md: (
+					navbar-collapse: (
+						navbar-nav: (
+							dropdown-item: (
+								color: $navbar-light-color,
+								font-weight: $font-weight-semi-bold,
+								hover: (
+									color: $gray-900,
+								),
+								focus: (
+									color: $gray-900,
+								),
+								active: (
+									color: $gray-900,
+								),
+								disabled: (
+									color: $gray-600,
+									opacity: $btn-disabled-opacity,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
 	),
 	$navigation-bar-light
 );
@@ -40,14 +87,53 @@ $navigation-bar-light: map-deep-merge(
 $navigation-bar-secondary: () !default;
 $navigation-bar-secondary: map-deep-merge(
 	(
-		bg: $secondary-d1,
-		link-color: $secondary-l2,
-		link-font-weight: $font-weight-semi-bold,
-		link-hover-color: $white,
-		link-focus-color: $white,
-		link-active-color: $white,
-		link-disabled-color: $gray-400,
-		link-disabled-opacity: $btn-disabled-opacity,
+		background-color: $secondary-d1,
+		navbar-nav: (
+			nav-link: (
+				color: $secondary-l2,
+				font-weight: $font-weight-semi-bold,
+				hover: (
+					color: $white,
+				),
+				focus: (
+					color: $white,
+				),
+				active: (
+					color: $white,
+				),
+				disabled: (
+					color: $gray-400,
+					opacity: $btn-disabled-opacity,
+				),
+			),
+		),
+		media-breakpoint-down: (
+			sm: (
+				navbar-expand-md: (
+					navbar-collapse: (
+						navbar-nav: (
+							dropdown-item: (
+								color: $secondary-l2,
+								font-weight: $font-weight-semi-bold,
+								hover: (
+									color: $white,
+								),
+								focus: (
+									color: $white,
+								),
+								active: (
+									color: $white,
+								),
+								disabled: (
+									color: $gray-400,
+									opacity: $btn-disabled-opacity,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
 	),
 	$navigation-bar-secondary
 );

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/_form-validation.scss

@@ -1,264 +1,37 @@
 // Form Feedback
 
 .form-feedback-group {
-	width: 100%;
-	word-wrap: break-word;
+	@include clay-css($cadmin-form-feedback-group);
 }
 
 .form-feedback-item {
-	font-size: $cadmin-form-feedback-font-size;
-	font-weight: $cadmin-form-feedback-font-weight;
-	margin-top: $cadmin-form-feedback-margin-top;
-	word-wrap: break-word;
+	@include clay-css($cadmin-form-feedback-item);
 }
 
 .form-feedback-indicator {
-	margin-left: $cadmin-form-feedback-indicator-margin-x;
-	margin-right: $cadmin-form-feedback-indicator-margin-x;
+	@include clay-css($cadmin-form-feedback-indicator);
 
 	&:first-child {
-		margin-left: 0;
+		@include clay-css(
+			map-get($cadmin-form-feedback-indicator, first-child)
+		);
 	}
 }
 
 .form-text {
-	color: $cadmin-form-text-color;
-	display: block;
-	font-size: $cadmin-form-text-font-size;
-	font-weight: $cadmin-form-text-font-weight;
-	margin-top: $cadmin-form-text-margin-top;
-	word-wrap: break-word;
+	@include clay-css($cadmin-form-text);
 }
 
 // Non HTML5 Form Validator
 
 .has-error {
-	label {
-		color: $cadmin-input-danger-label-color;
-	}
-
-	.custom-control-label,
-	.form-check-label {
-		color: $cadmin-input-danger-checkbox-label-color;
-	}
-
-	.form-control {
-		@include clay-form-control-variant($cadmin-input-danger);
-	}
-
-	.form-control[readonly] {
-		@include clay-form-control-variant($cadmin-input-danger-readonly);
-	}
-
-	.form-feedback-item {
-		color: $cadmin-form-feedback-invalid-color;
-	}
-
-	select.form-control {
-		@include clay-select-variant($cadmin-input-danger-select);
-
-		&[size] {
-			@include clay-select-variant($cadmin-input-danger-select-size);
-		}
-
-		&[multiple] {
-			@include clay-select-variant($cadmin-input-danger-select-multiple);
-		}
-	}
-
-	.input-group-item {
-		&.focus {
-			box-shadow: setter(
-				$cadmin-input-danger-focus-box-shadow,
-				$cadmin-input-danger-box-shadow
-			);
-
-			.form-control,
-			.input-group-inset-item {
-				background-color: setter(
-					$cadmin-input-danger-focus-bg,
-					$cadmin-input-danger-bg
-				);
-				border-color: setter(
-					$cadmin-input-danger-focus-border-color,
-					$cadmin-input-danger-border-color
-				);
-			}
-		}
-
-		.input-group-inset:focus {
-			box-shadow: none;
-
-			~ .input-group-inset-item {
-				background-color: setter(
-					$cadmin-input-danger-focus-bg,
-					$cadmin-input-danger-bg
-				);
-				border-color: setter(
-					$cadmin-input-danger-focus-border-color,
-					$cadmin-input-danger-border-color
-				);
-			}
-		}
-	}
-
-	.input-group .input-group-inset-item {
-		background-color: $cadmin-input-danger-bg;
-		border-color: $cadmin-input-danger-border-color;
-		box-shadow: $cadmin-input-danger-box-shadow;
-	}
+	@include clay-form-validation-variant($cadmin-has-error);
 }
 
 .has-warning {
-	label {
-		color: $cadmin-input-warning-label-color;
-	}
-
-	.custom-control-label,
-	.form-check-label {
-		color: $cadmin-input-warning-checkbox-label-color;
-	}
-
-	.form-control {
-		@include clay-form-control-variant($cadmin-input-warning);
-	}
-
-	.form-control[readonly] {
-		@include clay-form-control-variant($cadmin-input-warning-readonly);
-	}
-
-	.form-feedback-item {
-		color: $cadmin-form-feedback-warning-color;
-	}
-
-	select.form-control {
-		@include clay-select-variant($cadmin-input-warning-select);
-
-		&[size] {
-			@include clay-select-variant($cadmin-input-warning-select-size);
-		}
-
-		&[multiple] {
-			@include clay-select-variant($cadmin-input-warning-select-multiple);
-		}
-	}
-
-	.input-group-item {
-		&.focus {
-			box-shadow: setter(
-				$cadmin-input-warning-focus-box-shadow,
-				$cadmin-input-warning-box-shadow
-			);
-
-			.form-control,
-			.input-group-inset-item {
-				background-color: setter(
-					$cadmin-input-warning-focus-bg,
-					$cadmin-input-warning-bg
-				);
-				border-color: setter(
-					$cadmin-input-warning-focus-border-color,
-					$cadmin-input-warning-border-color
-				);
-			}
-		}
-
-		.input-group-inset:focus {
-			box-shadow: none;
-
-			~ .input-group-inset-item {
-				background-color: setter(
-					$cadmin-input-warning-focus-bg,
-					$cadmin-input-warning-bg
-				);
-				border-color: setter(
-					$cadmin-input-warning-focus-border-color,
-					$cadmin-input-warning-border-color
-				);
-			}
-		}
-	}
-
-	.input-group .input-group-inset-item {
-		background-color: $cadmin-input-warning-bg;
-		border-color: $cadmin-input-warning-border-color;
-		box-shadow: $cadmin-input-warning-box-shadow;
-	}
+	@include clay-form-validation-variant($cadmin-has-warning);
 }
 
 .has-success {
-	label {
-		color: $cadmin-input-success-label-color;
-	}
-
-	.custom-control-label,
-	.form-check-label {
-		color: $cadmin-input-success-checkbox-label-color;
-	}
-
-	.form-control {
-		@include clay-form-control-variant($cadmin-input-success);
-	}
-
-	.form-control[readonly] {
-		@include clay-form-control-variant($cadmin-input-success-readonly);
-	}
-
-	.form-feedback-item {
-		color: $cadmin-form-feedback-valid-color;
-	}
-
-	select.form-control {
-		@include clay-select-variant($cadmin-input-success-select);
-
-		&[size] {
-			@include clay-select-variant($cadmin-input-success-select-size);
-		}
-
-		&[multiple] {
-			@include clay-select-variant($cadmin-input-success-select-multiple);
-		}
-	}
-
-	.input-group-item {
-		&.focus {
-			box-shadow: setter(
-				$cadmin-input-success-focus-box-shadow,
-				$cadmin-input-success-box-shadow
-			);
-
-			.form-control,
-			.input-group-inset-item {
-				background-color: setter(
-					$cadmin-input-success-focus-bg,
-					$cadmin-input-success-bg
-				);
-				border-color: setter(
-					$cadmin-input-success-focus-border-color,
-					$cadmin-input-success-border-color
-				);
-			}
-		}
-
-		.input-group-inset:focus {
-			box-shadow: none;
-
-			~ .input-group-inset-item {
-				background-color: setter(
-					$cadmin-input-success-focus-bg,
-					$cadmin-input-success-bg
-				);
-				border-color: setter(
-					$cadmin-input-success-focus-border-color,
-					$cadmin-input-success-border-color
-				);
-			}
-		}
-	}
-
-	.input-group .input-group-inset-item {
-		background-color: $cadmin-input-success-bg;
-		border-color: $cadmin-input-success-border-color;
-		box-shadow: $cadmin-input-success-box-shadow;
-	}
+	@include clay-form-validation-variant($cadmin-has-success);
 }