@clayui/css 3.84.0 → 3.86.0

package/src/scss/mixins/_forms.scss

@@ -874,12 +874,16 @@
 				@include clay-css($hover);
 
 				> option {
-					@include clay-css(map-get($hover, option));
+					$hover-option: setter(map-get($hover, option), ());
+
+					@include clay-css($hover-option);
+
+					&:hover {
+						@include clay-css(map-get($hover-option, hover));
+					}
 
 					&:checked {
-						@include clay-css(
-							map-deep-get($hover, option, checked)
-						);
+						@include clay-css(map-get($hover-option, checked));
 					}
 				}
 			}
@@ -889,12 +893,16 @@
 				@include clay-css($focus);
 
 				> option {
-					@include clay-css(map-get($focus, option));
+					$focus-option: setter(map-get($focus, option), ());
+
+					@include clay-css($focus-option);
+
+					&:hover {
+						@include clay-css(map-get($focus-option, hover));
+					}
 
 					&:checked {
-						@include clay-css(
-							map-deep-get($focus, option, checked)
-						);
+						@include clay-css(map-get($focus-option, checked));
 					}
 				}
 			}
@@ -954,6 +962,10 @@
 				> option {
 					@include clay-css($disabled-option);
 
+					&:hover {
+						@include clay-css(map-get($disabled-option, hover));
+					}
+
 					&:checked {
 						@include clay-css(map-get($disabled-option, checked));
 					}
@@ -965,6 +977,10 @@
 
 				@include clay-css($option);
 
+				&:hover {
+					@include clay-css(map-get($option, hover));
+				}
+
 				&:checked {
 					@include clay-css(map-get($option, checked));
 				}
@@ -972,28 +988,33 @@
 
 			@if (map-get($map, firefox-only)) {
 				@-moz-document url-prefix() {
-					@include clay-css(map-get($map, firefox-only));
+					$ff-only: setter(map-get($map, firefox-only), ());
+
+					@include clay-css($ff-only);
 
 					&:hover,
 					&.hover {
-						@include clay-css(
-							map-deep-get($map, firefox-only, hover)
-						);
+						$ff-only-hover: setter(map-get($ff-only, hover), ());
+
+						@include clay-css($ff-only-hover);
 
 						> option {
-							@include clay-css(
-								map-deep-get($map, firefox-only, hover, option)
+							$ff-only-hover-option: setter(
+								map-get($ff-only-hover, option),
+								()
 							);
 
+							@include clay-css($ff-only-hover-option);
+
+							&:hover {
+								@include clay-css(
+									map-get($ff-only-hover-option, hover)
+								);
+							}
+
 							&:checked {
 								@include clay-css(
-									map-deep-get(
-										$map,
-										firefox-only,
-										hover,
-										option,
-										checked
-									)
+									map-get($ff-only-hover-option, checked)
 								);
 							}
 						}
@@ -1001,24 +1022,27 @@
 
 					&:focus,
 					&.focus {
-						@include clay-css(
-							map-deep-get($map, firefox-only, focus)
-						);
+						$ff-only-focus: setter(map-get($ff-only, focus), ());
+
+						@include clay-css($ff-only-focus);
 
 						> option {
-							@include clay-css(
-								map-deep-get($map, firefox-only, focus, option)
+							$ff-only-focus-option: setter(
+								map-get($ff-only-focus, option),
+								()
 							);
 
+							@include clay-css($ff-only-focus-option);
+
+							&:hover {
+								@include clay-css(
+									map-get($ff-only-focus-option, hover)
+								);
+							}
+
 							&:checked {
 								@include clay-css(
-									map-deep-get(
-										$map,
-										firefox-only,
-										focus,
-										option,
-										checked
-									)
+									map-get($ff-only-focus-option, checked)
 								);
 							}
 						}
@@ -1026,47 +1050,47 @@
 
 					&:disabled,
 					&.disabled {
-						@include clay-css(
-							map-deep-get($map, firefox-only, disabled)
+						$ff-only-disabled: setter(
+							map-get($ff-only, disabled),
+							()
 						);
 
+						@include clay-css($ff-only-disabled);
+
 						> option {
-							@include clay-css(
-								map-deep-get(
-									$map,
-									firefox-only,
-									disabled,
-									option
-								)
+							$ff-only-disabled-option: setter(
+								map-get($ff-only-disabled, option),
+								()
 							);
 
+							@include clay-css($ff-only-disabled-option);
+
+							&:hover {
+								@include clay-css(
+									map-get($ff-only-disabled-option, hover)
+								);
+							}
+
 							&:checked {
 								@include clay-css(
-									map-deep-get(
-										$map,
-										firefox-only,
-										disabled,
-										option,
-										checked
-									)
+									map-get($ff-only-disabled-option, checked)
 								);
 							}
 						}
 					}
 
 					option {
-						@include clay-css(
-							map-deep-get($map, firefox-only, option)
-						);
+						$ff-only-option: setter(map-get($ff-only, option), ());
+
+						@include clay-css($ff-only-option);
+
+						&:hover {
+							@include clay-css(map-get($ff-only-option, hover));
+						}
 
 						&:checked {
 							@include clay-css(
-								map-deep-get(
-									$map,
-									firefox-only,
-									option,
-									checked
-								)
+								map-get($ff-only-option, checked)
 							);
 						}
 					}

package/src/scss/mixins/_links.scss

@@ -628,7 +628,8 @@
 				}
 			}
 
-			&:hover {
+			&:hover,
+			&.hover {
 				@include clay-css($hover);
 
 				&::before {
@@ -846,6 +847,22 @@
 			.lexicon-icon {
 				@include clay-css($lexicon-icon);
 			}
+
+			$c-link-variants: map-get($map, c-link-variants);
+
+			@if ($c-link-variants) {
+				@each $key, $value in $c-link-variants {
+					$selector: if(
+						starts-with($key, '.') or starts-with($key, '#'),
+						$key,
+						str-insert($key, '.', 1)
+					);
+
+					&#{$selector} {
+						@include clay-link($value);
+					}
+				}
+			}
 		}
 	}
 }

package/src/scss/variables/_empty-state.scss

@@ -3,9 +3,7 @@ $c-empty-state: () !default;
 $c-empty-state-animation: () !default;
 $c-empty-state-animation: map-deep-merge(
 	(
-		align-items: center,
-		display: flex,
-		flex-direction: column,
+		display: block,
 		margin: 5rem auto 1.5rem,
 		max-width: 340px,
 		text-align: center,
@@ -16,7 +14,7 @@ $c-empty-state-animation: map-deep-merge(
 $c-empty-state-image: () !default;
 $c-empty-state-image: map-deep-merge(
 	(
-		margin-bottom: -0.5rem,
+		margin: 0 auto 2rem,
 		max-width: 250px,
 		width: 100%,
 		word-wrap: break-word,

package/src/scss/variables/_globals.scss

@@ -579,10 +579,21 @@ $link: map-deep-merge(
 	(
 		color: $link-color,
 		text-decoration: $link-decoration,
+		text-underline-offset: 0.23em,
 		hover: (
 			color: $link-hover-color,
 			text-decoration: $link-hover-decoration,
 		),
+		inline-item-before: (
+			margin-right: 0.25rem,
+		),
+		inline-item-middle: (
+			margin-left: 0.25rem,
+			margin-right: 0.25rem,
+		),
+		inline-item-after: (
+			margin-left: 0.25rem,
+		),
 	),
 	$link
 );

package/src/scss/variables/_links.scss

@@ -2,7 +2,40 @@
 /// @group Links
 ////
 
-$single-link-font-weight: $font-weight-semi-bold !default;
+$c-link: () !default;
+$c-link: map-deep-merge(
+	(
+		text-decoration: none,
+		transition: clay-enable-transitions(box-shadow 0.15s ease-in-out),
+		hover: (
+			text-decoration: none,
+		),
+		focus: (
+			border-radius: 1px,
+			box-shadow: $component-focus-box-shadow,
+			outline: 0,
+		),
+		c-link-variants: (
+			text-secondary: (
+				color: $gray-900 !important,
+				hover: (
+					color: $black !important,
+				),
+				focus: (
+					color: $black !important,
+				),
+			),
+			text-tertiary: (
+				color: $gray-900 !important,
+				hover: (
+					color: $black !important,
+					text-decoration: underline,
+				),
+			),
+		),
+	),
+	$c-link
+);
 
 $component-link: () !default;
 $component-link: map-deep-merge(
@@ -37,6 +70,8 @@ $link-secondary: map-deep-merge(
 	$link-secondary
 );
 
+$single-link-font-weight: $font-weight-semi-bold !default;
+
 // Link Outline
 
 /// @deprecated as of v3.4.0 use the Sass map `$link-outline` instead

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

@@ -22,6 +22,12 @@ $navigation-bar-base: map-deep-merge(
 	(
 		border-color: transparent,
 		border-style: solid,
+		navbar-nav: (
+			nav-link: (
+				border-width: 0,
+				font-size: inherit,
+			),
+		),
 		media-breakpoint-down: (),
 		media-breakpoint-up: (),
 	),

package/src/scss/variables/_pagination.scss

@@ -57,7 +57,7 @@ $pagination-link-border-radius: 0px !default;
 
 /// @deprecated as of v2 use the Sass map `$pagination-link` instead
 
-$pagination-link-cursor: null !default;
+$pagination-link-cursor: pointer !default;
 
 /// @deprecated as of v2 use the Sass map `$pagination-link` instead
 

package/src/scss/variables/_utilities.scss

@@ -512,3 +512,16 @@ $text-theme-colors: map-deep-merge(
 	),
 	$text-theme-colors
 );
+
+$text-decorations: () !default;
+$text-decorations: map-deep-merge(
+	(
+		'.text-none, .text-decoration-none': (
+			text-decoration: none !important,
+		),
+		'.text-underline, .text-decoration-underline': (
+			text-decoration: underline !important,
+		),
+	),
+	$text-decorations
+);