@clayui/css 3.97.0 → 3.99.0

package/src/scss/mixins/_globals.scss

@@ -241,6 +241,18 @@
 
 		$enabled: setter(map-get($map, enabled), true);
 
+		$_prefers-reduced-motion-media-query: if(
+			variable-exists(enable-prefers-reduced-motion-media-query),
+			$enable-prefers-reduced-motion-media-query,
+			if(
+				variable-exists(
+					cadmin-enable-prefers-reduced-motion-media-query
+				),
+				$cadmin-enable-prefers-reduced-motion-media-query,
+				true
+			)
+		);
+
 		@if ($enabled) {
 			@each $key, $value in $map {
 				@if ($value == clay-unset or $value == c-unset) {
@@ -264,19 +276,20 @@
 					animation: $value;
 
 					@if ($value != 'none' and $value != null) {
+						@if ($_prefers-reduced-motion-media-query) {
+							@media (prefers-reduced-motion: reduce) {
+								animation: none;
+							}
+						}
+
 						@at-root {
 							$selector: '.c-prefers-reduced-motion &';
 
 							@if (variable-exists(cadmin-selector)) {
-								$selector: clay-insert-after(
-									'.cadmin ',
+								$selector: clay-insert-before(
+									'.cadmin',
 									'.c-prefers-reduced-motion '
 								);
-								$selector: clay-insert-after(
-									'.cadmin.',
-									'c-prefers-reduced-motion.',
-									$selector
-								);
 							}
 
 							#{$selector} {
@@ -300,15 +313,10 @@
 							$selector: '.c-prefers-expanded-text &';
 
 							@if (variable-exists(cadmin-selector)) {
-								$selector: clay-insert-after(
-									'.cadmin ',
+								$selector: clay-insert-before(
+									'.cadmin',
 									'.c-prefers-expanded-text '
 								);
-								$selector: clay-insert-after(
-									'.cadmin.',
-									'c-prefers-expanded-text.',
-									$selector
-								);
 							}
 
 							#{$selector} {
@@ -320,23 +328,20 @@
 					transition: $value;
 
 					@if ($value != 'none' and $value != null) {
-						@media (prefers-reduced-motion: reduce) {
-							transition: none;
+						@if ($_prefers-reduced-motion-media-query) {
+							@media (prefers-reduced-motion: reduce) {
+								transition: none;
+							}
 						}
 
 						@at-root {
 							$selector: '.c-prefers-reduced-motion &';
 
 							@if (variable-exists(cadmin-selector)) {
-								$selector: clay-insert-after(
-									'.cadmin ',
+								$selector: clay-insert-before(
+									'.cadmin',
 									'.c-prefers-reduced-motion '
 								);
-								$selector: clay-insert-after(
-									'.cadmin.',
-									'c-prefers-reduced-motion.',
-									$selector
-								);
 							}
 
 							#{$selector} {

package/src/scss/mixins/_transition.scss

@@ -37,15 +37,10 @@
 			$selector: '.c-prefers-reduced-motion &';
 
 			@if (variable-exists(cadmin-selector)) {
-				$selector: clay-insert-after(
-					'.cadmin ',
+				$selector: clay-insert-before(
+					'.cadmin',
 					'.c-prefers-reduced-motion '
 				);
-				$selector: clay-insert-after(
-					'.cadmin.',
-					'c-prefers-reduced-motion.',
-					$selector
-				);
 			}
 
 			#{$selector} {

package/src/scss/variables/_dropdowns.scss

@@ -969,6 +969,55 @@ $dropdown-menu-palette: map-deep-merge(
 					padding-right: 1.5rem,
 				),
 			),
+			dropdown-item-scroll: (
+				font-size: 1rem,
+				height: 2rem,
+				padding: 0,
+				position: absolute,
+				text-align: center,
+				z-index: 1,
+				hover: (
+					background-color: $dropdown-link-hover-bg,
+					background-image: none,
+					color: $dropdown-link-hover-color,
+				),
+				focus: (
+					background-color: $dropdown-link-hover-bg,
+					background-image: none,
+					color: $dropdown-link-hover-color,
+				),
+				active: (
+					background-color: $dropdown-link-active-bg,
+					background-image: none,
+					color: $dropdown-link-active-color,
+				),
+				disabled: (
+					background-color: transparent,
+					background-image: none,
+					color: $dropdown-link-disabled-color,
+					cursor: $dropdown-item-disabled-cursor,
+				),
+			),
+			dropdown-item-scroll-up: (
+				background-image: (
+					linear-gradient(
+						to bottom,
+						rgba(255, 255, 255, 1) 84%,
+						rgba(255, 255, 255, 0) 100%
+					),
+				),
+				top: $dropdown-padding-y,
+			),
+			dropdown-item-scroll-down: (
+				background-image: (
+					linear-gradient(
+						to top,
+						rgba(255, 255, 255, 1) 84%,
+						rgba(255, 255, 255, 0) 100%
+					),
+				),
+				bottom: $dropdown-padding-y,
+			),
 			dropdown-divider: (
 				margin: 0.3125rem 0,
 			),
@@ -985,6 +1034,11 @@ $dropdown-menu-palette: map-deep-merge(
 				),
 			),
 		),
+		'.dropdown-menu-select.dropdown-menu-height-lg': (
+			inline-scroller: (
+				max-height: 432px,
+			),
+		),
 	),
 	$dropdown-menu-palette
 );

package/src/scss/variables/_utilities.scss

@@ -194,6 +194,66 @@ $c-gap: map-merge(
 $bg-theme-colors: () !default;
 $bg-theme-colors: map-deep-merge(
 	(
+		'blue': (
+			background-color: $blue !important,
+			hover: (
+				background-color: clay-darken($blue, 10%) !important,
+			),
+		),
+		'indigo': (
+			background-color: $indigo !important,
+			hover: (
+				background-color: clay-darken($indigo, 10%) !important,
+			),
+		),
+		'purple': (
+			background-color: $purple !important,
+			hover: (
+				background-color: clay-darken($purple, 10%) !important,
+			),
+		),
+		'pink': (
+			background-color: $pink !important,
+			hover: (
+				background-color: clay-darken($pink, 10%) !important,
+			),
+		),
+		'red': (
+			background-color: $red !important,
+			hover: (
+				background-color: clay-darken($red, 10%) !important,
+			),
+		),
+		'orange': (
+			background-color: $orange !important,
+			hover: (
+				background-color: clay-darken($orange, 10%) !important,
+			),
+		),
+		'yellow': (
+			background-color: $yellow !important,
+			hover: (
+				background-color: clay-darken($yellow, 10%) !important,
+			),
+		),
+		'green': (
+			background-color: $green !important,
+			hover: (
+				background-color: clay-darken($green, 10%) !important,
+			),
+		),
+		'teal': (
+			background-color: $teal !important,
+			hover: (
+				background-color: clay-darken($teal, 10%) !important,
+			),
+		),
+		'cyan': (
+			background-color: $cyan !important,
+			hover: (
+				background-color: clay-darken($cyan, 10%) !important,
+			),
+		),
 		'primary': (
 			background-color: $primary !important,
 			hover: (
@@ -415,6 +475,101 @@ $font-sizes: map-deep-merge(
 $text-theme-colors: () !default;
 $text-theme-colors: map-deep-merge(
 	(
+		'blue': (
+			color: $blue !important,
+			hover: (
+				color:
+					clay-darken($blue, $emphasized-link-hover-darken-percentage)
+					!important,
+			),
+		),
+		'indigo': (
+			color: $indigo !important,
+			hover: (
+				color:
+					clay-darken(
+						$indigo,
+						$emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'purple': (
+			color: $purple !important,
+			hover: (
+				color:
+					clay-darken(
+						$purple,
+						$emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'pink': (
+			color: $pink !important,
+			hover: (
+				color:
+					clay-darken($pink, $emphasized-link-hover-darken-percentage)
+					!important,
+			),
+		),
+		'red': (
+			color: $red !important,
+			hover: (
+				color:
+					clay-darken($red, $emphasized-link-hover-darken-percentage)
+					!important,
+			),
+		),
+		'orange': (
+			color: $orange !important,
+			hover: (
+				color:
+					clay-darken(
+						$orange,
+						$emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'yellow': (
+			color: $yellow !important,
+			hover: (
+				color:
+					clay-darken(
+						$yellow,
+						$emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'green': (
+			color: $green !important,
+			hover: (
+				color:
+					clay-darken(
+						$green,
+						$emphasized-link-hover-darken-percentage
+					)
+					!important,
+			),
+		),
+		'teal': (
+			color: $teal !important,
+			hover: (
+				color:
+					clay-darken($teal, $emphasized-link-hover-darken-percentage)
+					!important,
+			),
+		),
+		'cyan': (
+			color: $cyan !important,
+			hover: (
+				color:
+					clay-darken($cyan, $emphasized-link-hover-darken-percentage)
+					!important,
+			),
+		),
 		'primary': (
 			color: $primary !important,
 			hover: (