@clayui/css 3.39.0 → 3.42.0

package/src/scss/variables/_labels.scss

@@ -303,13 +303,15 @@ $label-primary: map-deep-merge(
 		background-color: $label-primary-bg,
 		border-color: $label-primary-border-color,
 		color: $label-primary-color,
-		hover: (
-			background-color: $label-primary-hover-bg,
-			border-color: $label-primary-hover-border-color,
-			color: $label-primary-hover-color,
-		),
-		focus: (
-			color: $label-primary-hover-color,
+		href: (
+			hover: (
+				background-color: $label-primary-hover-bg,
+				border-color: $label-primary-hover-border-color,
+				color: $label-primary-hover-color,
+			),
+			focus: (
+				color: $label-primary-hover-color,
+			),
 		),
 		link: (
 			color: $label-primary-link-color,
@@ -373,13 +375,15 @@ $label-secondary: map-deep-merge(
 		background-color: $label-secondary-bg,
 		border-color: $label-secondary-border-color,
 		color: $label-secondary-color,
-		hover: (
-			background-color: $label-secondary-hover-bg,
-			border-color: $label-secondary-hover-border-color,
-			color: $label-secondary-hover-color,
-		),
-		focus: (
-			color: $label-secondary-hover-color,
+		href: (
+			hover: (
+				background-color: $label-secondary-hover-bg,
+				border-color: $label-secondary-hover-border-color,
+				color: $label-secondary-hover-color,
+			),
+			focus: (
+				color: $label-secondary-hover-color,
+			),
 		),
 		link: (
 			color: $label-secondary-link-color,
@@ -443,13 +447,15 @@ $label-success: map-deep-merge(
 		background-color: $label-success-bg,
 		border-color: $label-success-border-color,
 		color: $label-success-color,
-		hover: (
-			background-color: $label-success-hover-bg,
-			border-color: $label-success-hover-border-color,
-			color: $label-success-hover-color,
-		),
-		focus: (
-			color: $label-success-hover-color,
+		href: (
+			hover: (
+				background-color: $label-success-hover-bg,
+				border-color: $label-success-hover-border-color,
+				color: $label-success-hover-color,
+			),
+			focus: (
+				color: $label-success-hover-color,
+			),
 		),
 		link: (
 			color: $label-success-link-color,
@@ -513,13 +519,15 @@ $label-info: map-deep-merge(
 		background-color: $label-info-bg,
 		border-color: $label-info-border-color,
 		color: $label-info-color,
-		hover: (
-			background-color: $label-info-hover-bg,
-			border-color: $label-info-hover-border-color,
-			color: $label-info-hover-color,
-		),
-		focus: (
-			color: $label-info-hover-color,
+		href: (
+			hover: (
+				background-color: $label-info-hover-bg,
+				border-color: $label-info-hover-border-color,
+				color: $label-info-hover-color,
+			),
+			focus: (
+				color: $label-info-hover-color,
+			),
 		),
 		link: (
 			color: $label-info-link-color,
@@ -583,13 +591,15 @@ $label-warning: map-deep-merge(
 		background-color: $label-warning-bg,
 		border-color: $label-warning-border-color,
 		color: $label-warning-color,
-		hover: (
-			background-color: $label-warning-hover-bg,
-			border-color: $label-warning-hover-border-color,
-			color: $label-warning-hover-color,
-		),
-		focus: (
-			color: $label-warning-hover-color,
+		href: (
+			hover: (
+				background-color: $label-warning-hover-bg,
+				border-color: $label-warning-hover-border-color,
+				color: $label-warning-hover-color,
+			),
+			focus: (
+				color: $label-warning-hover-color,
+			),
 		),
 		link: (
 			color: $label-warning-link-color,
@@ -653,13 +663,15 @@ $label-danger: map-deep-merge(
 		background-color: $label-danger-bg,
 		border-color: $label-danger-border-color,
 		color: $label-danger-color,
-		hover: (
-			background-color: $label-danger-hover-bg,
-			border-color: $label-danger-hover-border-color,
-			color: $label-danger-hover-color,
-		),
-		focus: (
-			color: $label-danger-hover-color,
+		href: (
+			hover: (
+				background-color: $label-danger-hover-bg,
+				border-color: $label-danger-hover-border-color,
+				color: $label-danger-hover-color,
+			),
+			focus: (
+				color: $label-danger-hover-color,
+			),
 		),
 		link: (
 			color: $label-danger-link-color,
@@ -723,13 +735,15 @@ $label-light: map-deep-merge(
 		background-color: $label-light-bg,
 		border-color: $label-light-border-color,
 		color: $label-light-color,
-		hover: (
-			background-color: $label-light-hover-bg,
-			border-color: $label-light-hover-border-color,
-			color: $label-light-hover-color,
-		),
-		focus: (
-			color: $label-light-hover-color,
+		href: (
+			hover: (
+				background-color: $label-light-hover-bg,
+				border-color: $label-light-hover-border-color,
+				color: $label-light-hover-color,
+			),
+			focus: (
+				color: $label-light-hover-color,
+			),
 		),
 		link: (
 			color: $label-light-link-color,
@@ -793,13 +807,15 @@ $label-dark: map-deep-merge(
 		background-color: $label-dark-bg,
 		border-color: $label-dark-border-color,
 		color: $label-dark-color,
-		hover: (
-			background-color: $label-dark-hover-bg,
-			border-color: $label-dark-hover-border-color,
-			color: $label-dark-hover-color,
-		),
-		focus: (
-			color: $label-dark-hover-color,
+		href: (
+			hover: (
+				background-color: $label-dark-hover-bg,
+				border-color: $label-dark-hover-border-color,
+				color: $label-dark-hover-color,
+			),
+			focus: (
+				color: $label-dark-hover-color,
+			),
 		),
 		link: (
 			color: $label-dark-link-color,
@@ -820,10 +836,12 @@ $label-inverse-primary: map-deep-merge(
 		background-color: $primary,
 		border-color: $primary,
 		color: color-yiq($primary),
-		hover: (
-			background-color: clay-darken($primary, 10%),
-			border-color: clay-darken($primary, 10%),
-			color: color-yiq(clay-darken($primary, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($primary, 10%),
+				border-color: clay-darken($primary, 10%),
+				color: color-yiq(clay-darken($primary, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -845,10 +863,12 @@ $label-inverse-secondary: map-deep-merge(
 		background-color: $secondary,
 		border-color: $secondary,
 		color: color-yiq($secondary),
-		hover: (
-			background-color: clay-darken($secondary, 10%),
-			border-color: clay-darken($secondary, 10%),
-			color: color-yiq(clay-darken($secondary, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($secondary, 10%),
+				border-color: clay-darken($secondary, 10%),
+				color: color-yiq(clay-darken($secondary, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -870,10 +890,12 @@ $label-inverse-success: map-deep-merge(
 		background-color: $success,
 		border-color: $success,
 		color: color-yiq($success),
-		hover: (
-			background-color: clay-darken($success, 10%),
-			border-color: clay-darken($success, 10%),
-			color: color-yiq(clay-darken($success, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($success, 10%),
+				border-color: clay-darken($success, 10%),
+				color: color-yiq(clay-darken($success, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -895,10 +917,12 @@ $label-inverse-info: map-deep-merge(
 		background-color: $info,
 		border-color: $info,
 		color: color-yiq($info),
-		hover: (
-			background-color: clay-darken($info, 10%),
-			border-color: clay-darken($info, 10%),
-			color: color-yiq(clay-darken($info, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($info, 10%),
+				border-color: clay-darken($info, 10%),
+				color: color-yiq(clay-darken($info, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -920,10 +944,12 @@ $label-inverse-warning: map-deep-merge(
 		background-color: $warning,
 		border-color: $warning,
 		color: color-yiq($warning),
-		hover: (
-			background-color: clay-darken($warning, 10%),
-			border-color: clay-darken($warning, 10%),
-			color: color-yiq(clay-darken($warning, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($warning, 10%),
+				border-color: clay-darken($warning, 10%),
+				color: color-yiq(clay-darken($warning, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -945,10 +971,12 @@ $label-inverse-danger: map-deep-merge(
 		background-color: $danger,
 		border-color: $danger,
 		color: color-yiq($danger),
-		hover: (
-			background-color: clay-darken($danger, 10%),
-			border-color: clay-darken($danger, 10%),
-			color: color-yiq(clay-darken($danger, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($danger, 10%),
+				border-color: clay-darken($danger, 10%),
+				color: color-yiq(clay-darken($danger, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -970,10 +998,12 @@ $label-inverse-light: map-deep-merge(
 		background-color: $light,
 		border-color: $light,
 		color: color-yiq($light),
-		hover: (
-			background-color: clay-darken($light, 10%),
-			border-color: clay-darken($light, 10%),
-			color: color-yiq(clay-darken($light, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($light, 10%),
+				border-color: clay-darken($light, 10%),
+				color: color-yiq(clay-darken($light, 10%)),
+			),
 		),
 		link: (
 			hover: (
@@ -995,10 +1025,12 @@ $label-inverse-dark: map-deep-merge(
 		background-color: $dark,
 		border-color: $dark,
 		color: color-yiq($dark),
-		hover: (
-			background-color: clay-darken($dark, 10%),
-			border-color: clay-darken($dark, 10%),
-			color: color-yiq(clay-darken($dark, 10%)),
+		href: (
+			hover: (
+				background-color: clay-darken($dark, 10%),
+				border-color: clay-darken($dark, 10%),
+				color: color-yiq(clay-darken($dark, 10%)),
+			),
 		),
 		link: (
 			hover: (

package/src/scss/variables/_links.scss

@@ -94,8 +94,10 @@ $link-outline: map-deep-merge(
 		hover: (
 			text-decoration: none,
 		),
-		disabled-active: (
-			pointer-events: none,
+		disabled: (
+			active: (
+				pointer-events: none,
+			),
 		),
 		lexicon-icon: (
 			margin-top: 0,
@@ -115,16 +117,16 @@ $link-outline-primary: map-deep-merge(
 		),
 		btn-focus-box-shadow: 0 0 0 $btn-focus-width rgba($primary, 0.5),
 		btn-focus-outline: 0,
+		active: (
+			background-color: $primary,
+			color: $white,
+		),
 		disabled: (
 			background-color: transparent,
 			color: $primary,
 			cursor: $btn-disabled-cursor,
 			opacity: $btn-disabled-opacity,
 		),
-		active: (
-			background-color: $primary,
-			color: $white,
-		),
 	),
 	$link-outline-primary
 );
@@ -140,16 +142,16 @@ $link-outline-secondary: map-deep-merge(
 		),
 		btn-focus-box-shadow: 0 0 0 $btn-focus-width rgba($secondary, 0.5),
 		btn-focus-outline: 0,
+		active: (
+			background-color: $secondary,
+			color: $white,
+		),
 		disabled: (
 			background-color: transparent,
 			color: $secondary,
 			cursor: $btn-disabled-cursor,
 			opacity: $btn-disabled-opacity,
 		),
-		active: (
-			background-color: $secondary,
-			color: $white,
-		),
 	),
 	$link-outline-secondary
 );
@@ -273,9 +275,9 @@ $component-action: map-deep-merge(
 			color: $secondary,
 			cursor: $disabled-cursor,
 			opacity: $btn-disabled-opacity,
-		),
-		disabled-active: (
-			pointer-events: none,
+			active: (
+				pointer-events: none,
+			),
 		),
 		lexicon-icon: (
 			margin-top: 0,

package/src/scss/variables/_management-bar.scss

@@ -1,4 +1,13 @@
 $management-bar-base: () !default;
+$management-bar-base: map-deep-merge(
+	(
+		border-color: transparent,
+		border-style: solid,
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
+	),
+	$management-bar-base
+);
 
 $management-bar-size: () !default;
 $management-bar-size: map-deep-merge(
@@ -29,12 +38,24 @@ $management-bar-size: map-deep-merge(
 $management-bar-light: () !default;
 $management-bar-light: map-deep-merge(
 	(
-		bg: $light,
-		link-color: $navbar-light-color,
-		link-hover-color: $navbar-light-hover-color,
-		link-active-color: $navbar-light-active-color,
-		link-disabled-color: $navbar-light-disabled-color,
-		link-disabled-opacity: 1,
+		background-color: $light,
+		navbar-nav: (
+			nav-link: (
+				color: $navbar-light-color,
+				hover: (
+					color: $navbar-light-hover-color,
+				),
+				active: (
+					color: $navbar-light-active-color,
+				),
+				disabled: (
+					color: $navbar-light-disabled-color,
+					opacity: 1,
+				),
+			),
+		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$management-bar-light
 );
@@ -42,14 +63,26 @@ $management-bar-light: map-deep-merge(
 $management-bar-primary: () !default;
 $management-bar-primary: map-deep-merge(
 	(
-		bg: $primary-l3,
+		background-color: $primary-l3,
 		border-color: $primary,
 		color: $navbar-light-color,
-		link-color: $navbar-light-color,
-		link-hover-color: $navbar-light-hover-color,
-		link-active-color: $navbar-light-active-color,
-		link-disabled-color: $navbar-light-disabled-color,
-		link-disabled-opacity: 1,
+		navbar-nav: (
+			nav-link: (
+				color: $navbar-light-color,
+				hover: (
+					color: $navbar-light-hover-color,
+				),
+				active: (
+					color: $navbar-light-active-color,
+				),
+				disabled: (
+					disabled-color: $navbar-light-disabled-color,
+					disabled-opacity: 1,
+				),
+			),
+		),
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
 	),
 	$management-bar-primary
 );

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

@@ -17,16 +17,59 @@ $navigation-bar-size: map-deep-merge(
 );
 
 $navigation-bar-base: () !default;
+$navigation-bar-base: map-deep-merge(
+	(
+		border-color: transparent,
+		border-style: solid,
+		media-breakpoint-down: (),
+		media-breakpoint-up: (),
+	),
+	$navigation-bar-base
+);
 
 $navigation-bar-light: () !default;
 $navigation-bar-light: map-deep-merge(
 	(
-		bg: $light,
-		link-color: $navbar-light-color,
-		link-hover-color: $navbar-light-hover-color,
-		link-active-color: $navbar-light-active-color,
-		link-disabled-color: $navbar-light-disabled-color,
-		link-disabled-opacity: 1,
+		background-color: $light,
+		navbar-nav: (
+			nav-link: (
+				color: $navbar-light-color,
+				hover: (
+					color: $navbar-light-hover-color,
+				),
+				active: (
+					color: $navbar-light-active-color,
+				),
+				disabled: (
+					color: $navbar-light-disabled-color,
+					opacity: 1,
+				),
+			),
+		),
+		media-breakpoint-down: (
+			sm: (
+				navbar-expand-md: (
+					navbar-collapse: (
+						navbar-nav: (
+							dropdown-item: (
+								color: $navbar-light-color,
+								hover: (
+									color: $navbar-light-hover-color,
+								),
+								active: (
+									color: $navbar-light-active-color,
+								),
+								disabled: (
+									color: $navbar-light-disabled-color,
+									opacity: 1,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		media-breakpoint-up: (),
 	),
 	$navigation-bar-light
 );
@@ -34,15 +77,53 @@ $navigation-bar-light: map-deep-merge(
 $navigation-bar-secondary: () !default;
 $navigation-bar-secondary: map-deep-merge(
 	(
-		bg: $secondary,
+		background-color: $secondary,
 		color: $white,
-		link-color: rgba(255, 255, 255, 0.65),
-		link-hover-color: rgba(255, 255, 255, 0.9),
-		link-active-color: rgba(255, 255, 255, 0.9),
-		link-disabled-color: rgba(255, 255, 255, 0.25),
-		link-disabled-opacity: 1,
-		brand-color: rgba(255, 255, 255, 0.9),
-		brand-hover-color: rgba(255, 255, 255, 0.9),
+		navbar-nav: (
+			nav-link: (
+				color: rgba(255, 255, 255, 0.65),
+				hover: (
+					color: rgba(255, 255, 255, 0.9),
+				),
+				active: (
+					color: rgba(255, 255, 255, 0.9),
+				),
+				disabled: (
+					color: rgba(255, 255, 255, 0.25),
+					opacity: 1,
+				),
+			),
+		),
+		navbar-brand: (
+			color: rgba(255, 255, 255, 0.9),
+			hover: (
+				color: rgba(255, 255, 255, 0.9),
+			),
+		),
+		media-breakpoint-down: (
+			sm: (
+				navbar-expand-md: (
+					navbar-collapse: (
+						navbar-nav: (
+							dropdown-item: (
+								color: rgba(255, 255, 255, 0.65),
+								hover: (
+									color: rgba(255, 255, 255, 0.9),
+								),
+								active: (
+									color: rgba(255, 255, 255, 0.9),
+								),
+								disabled: (
+									color: rgba(255, 255, 255, 0.25),
+									opacity: 1,
+								),
+							),
+						),
+					),
+				),
+			),
+		),
+		media-breakpoint-up: (),
 	),
 	$navigation-bar-secondary
 );

package/src/scss/variables/_navs.scss

@@ -20,11 +20,15 @@ $nav-link: map-deep-merge(
 		),
 		focus: (
 			text-decoration: none,
+			z-index: 1,
+		),
+		disabled: (
+			color: $nav-link-disabled-color,
+			cursor: $nav-link-disabled-cursor,
+			active: (
+				pointer-events: none,
+			),
 		),
-		focus-z-index: 1,
-		disabled-color: $nav-link-disabled-color,
-		disabled-cursor: $nav-link-disabled-cursor,
-		disabled-active-pointer-events: none,
 	),
 	$nav-link
 );
@@ -76,15 +80,21 @@ $nav-btn: map-deep-merge(
 		position: relative,
 		text-align: center,
 		width: auto,
-		focus-z-index: 1,
-		disabled-opacity: 1,
+		focus: (
+			z-index: 1,
+		),
+		disabled: (
+			opacity: 1,
+		),
 		c-inner: (
 			margin-bottom: 0,
 			margin-left: math-sign($nav-btn-padding-x),
 			margin-right: math-sign($nav-btn-padding-x),
 			margin-top: math-sign($btn-border-width),
 		),
-		lexicon-icon-margin-top: 0,
+		lexicon-icon: (
+			margin-top: 0,
+		),
 	),
 	$nav-btn
 );
@@ -111,7 +121,9 @@ $nav-link-monospaced: map-deep-merge(
 		margin: $nav-btn-margin-y $nav-btn-margin-x,
 		min-width: $nav-item-monospaced-size,
 		padding: 0,
-		lexicon-icon-margin-top: 0,
+		lexicon-icon: (
+			margin-top: 0,
+		),
 	),
 	$nav-link-monospaced
 );
@@ -198,7 +210,7 @@ $nav-tabs-link-show-border-color: $nav-tabs-link-active-border-color !default;
 $nav-tabs-link-show: () !default;
 $nav-tabs-link-show: map-deep-merge(
 	(
-		bg: $nav-tabs-link-show-bg,
+		background-color: $nav-tabs-link-show-bg,
 		border-color: $nav-tabs-link-show-border-color,
 		color: $nav-tabs-link-show-color,
 	),
@@ -249,10 +261,18 @@ $nav-underline-link: map-deep-merge(
 		padding-left: $nav-underline-link-padding-x,
 		padding-right: $nav-underline-link-padding-x,
 		padding-top: $nav-underline-link-padding-y,
-		hover-color: $nav-underline-link-hover-color,
-		focus-color: $nav-underline-link-hover-color,
-		active-class-color: $nav-underline-link-active-color,
-		disabled-color: $nav-underline-link-disabled-color,
+		hover: (
+			color: $nav-underline-link-hover-color,
+		),
+		focus: (
+			color: $nav-underline-link-hover-color,
+		),
+		active-class: (
+			color: $nav-underline-link-active-color,
+		),
+		disabled: (
+			color: $nav-underline-link-disabled-color,
+		),
 	),
 	$nav-underline-link
 );