@clayui/css 3.74.0 → 3.76.0

package/src/scss/cadmin/variables/_globals.scss

@@ -309,6 +309,10 @@ $cadmin-embed-responsive-aspect-ratios: join(
 	$cadmin-embed-responsive-aspect-ratios
 );
 
+$cadmin-component-transition: color 0.15s ease-in-out,
+	background-color 0.15s ease-in-out, border-color 0.15s ease-in-out,
+	box-shadow 0.15s ease-in-out !default;
+
 $cadmin-component-focus-box-shadow: #{0 0 0 2px $cadmin-white,
 	0 0 0 4px $cadmin-primary-l1} !default;
 $cadmin-component-focus-inset-box-shadow: #{inset 0 0 0 2px $cadmin-primary-l1,
@@ -317,6 +321,8 @@ $cadmin-component-focus-inset-box-shadow: #{inset 0 0 0 2px $cadmin-primary-l1,
 $cadmin-component-active-bg: $cadmin-primary !default;
 $cadmin-component-active-color: $cadmin-white !default;
 
+$cadmin-component-disabled-opacity: 0.4 !default;
+
 // Cursors
 
 $cadmin-link-cursor: pointer !default;

package/src/scss/cadmin/variables/_labels.scss

@@ -72,7 +72,7 @@ $cadmin-label: map-deep-merge(
 				text-decoration: $cadmin-label-anchor-hover-text-decoration,
 			),
 			focus: (
-				box-shadow: $cadmin-btn-focus-box-shadow,
+				box-shadow: $cadmin-component-focus-box-shadow,
 				text-decoration: $cadmin-label-anchor-hover-text-decoration,
 			),
 		),
@@ -145,7 +145,7 @@ $cadmin-label-close: map-deep-merge(
 		),
 		disabled: (
 			color: inherit,
-			opacity: $cadmin-btn-disabled-opacity,
+			opacity: $cadmin-component-disabled-opacity,
 		),
 	),
 	$cadmin-label-close

package/src/scss/cadmin/variables/_links.scss

@@ -86,7 +86,7 @@ $cadmin-link-outline-padding-y: $cadmin-btn-padding-y-sm !default;
 
 // @deprecated as of v3.4.0 use the Sass map `$cadmin-link-outline` instead
 
-$cadmin-link-outline-transition: $cadmin-btn-transition !default;
+$cadmin-link-outline-transition: $cadmin-component-transition !default;
 
 $cadmin-link-outline: () !default;
 $cadmin-link-outline: map-deep-merge(
@@ -111,7 +111,12 @@ $cadmin-link-outline: map-deep-merge(
 		hover: (
 			text-decoration: none,
 		),
+		focus: (
+			box-shadow: $cadmin-component-focus-box-shadow,
+			outline: 0,
+		),
 		disabled: (
+			box-shadow: none,
 			active: (
 				pointer-events: none,
 			),
@@ -134,9 +139,7 @@ $cadmin-link-outline-primary: map-deep-merge(
 		),
 		focus: (
 			background-color: $cadmin-primary-l3,
-			box-shadow: map-get($cadmin-btn-outline-primary, focus-box-shadow),
 			color: $cadmin-primary,
-			outline: 0,
 		),
 		active: (
 			background-color:
@@ -145,14 +148,10 @@ $cadmin-link-outline-primary: map-deep-merge(
 		),
 		disabled: (
 			background-color: transparent,
-			box-shadow: none,
 			color: $cadmin-primary,
-			cursor: $cadmin-btn-disabled-cursor,
-			opacity: $cadmin-btn-disabled-opacity,
+			cursor: $cadmin-disabled-cursor,
+			opacity: $cadmin-component-disabled-opacity,
 		),
-		btn-focus-box-shadow:
-			map-get($cadmin-btn-outline-primary, focus-box-shadow),
-		btn-focus-outline: 0,
 	),
 	$cadmin-link-outline-primary
 );
@@ -168,9 +167,7 @@ $cadmin-link-outline-secondary: map-deep-merge(
 		),
 		focus: (
 			background-color: rgba($cadmin-gray-900, 0.03),
-			box-shadow: map-get($cadmin-btn-outline-secondary, focus-box-shadow),
 			color: $cadmin-gray-900,
-			outline: 0,
 		),
 		active: (
 			background-color: rgba($cadmin-gray-900, 0.06),
@@ -178,14 +175,10 @@ $cadmin-link-outline-secondary: map-deep-merge(
 		),
 		disabled: (
 			background-color: transparent,
-			box-shadow: none,
 			color: $cadmin-secondary,
-			cursor: $cadmin-btn-disabled-cursor,
-			opacity: $cadmin-btn-disabled-opacity,
+			cursor: $cadmin-disabled-cursor,
+			opacity: $cadmin-component-disabled-opacity,
 		),
-		btn-focus-box-shadow:
-			map-get($cadmin-btn-outline-secondary, focus-box-shadow),
-		btn-focus-outline: 0,
 	),
 	$cadmin-link-outline-secondary
 );
@@ -314,7 +307,7 @@ $cadmin-component-action: map-deep-merge(
 		justify-content: center,
 		overflow: hidden,
 		padding: 0,
-		transition: $cadmin-btn-transition,
+		transition: $cadmin-component-transition,
 		vertical-align: middle,
 		width: map-get($cadmin-link-monospaced, width),
 		hover: (
@@ -323,7 +316,7 @@ $cadmin-component-action: map-deep-merge(
 		),
 		focus: (
 			background-color: rgba($cadmin-gray-900, 0.03),
-			box-shadow: map-get($cadmin-btn-secondary, focus-box-shadow),
+			box-shadow: $cadmin-component-focus-box-shadow,
 			color: $cadmin-gray-900,
 			outline: 0,
 		),
@@ -336,13 +329,11 @@ $cadmin-component-action: map-deep-merge(
 			box-shadow: none,
 			color: $cadmin-secondary,
 			cursor: $cadmin-disabled-cursor,
-			opacity: $cadmin-btn-disabled-opacity,
+			opacity: $cadmin-component-disabled-opacity,
 			active: (
 				pointer-events: none,
 			),
 		),
-		btn-focus-box-shadow: map-get($cadmin-btn-secondary, focus-box-shadow),
-		btn-focus-outline: 0,
 		lexicon-icon: (
 			margin-top: 0,
 		),

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

@@ -9,7 +9,7 @@ $cadmin-management-bar-base: map-deep-merge(
 				outline: 0,
 				transition: box-shadow 0.15s ease-in-out,
 				focus: (
-					box-shadow: $cadmin-btn-focus-box-shadow,
+					box-shadow: $cadmin-component-focus-box-shadow,
 				),
 				disabled: (
 					box-shadow: none,

package/src/scss/cadmin/variables/_multi-step-nav.scss

@@ -23,7 +23,7 @@ $cadmin-multi-step-icon-hover-color: $cadmin-multi-step-icon-color !default;
 $cadmin-multi-step-icon-hover-text-decoration: none !default;
 
 $cadmin-multi-step-icon-focus-bg: $cadmin-multi-step-icon-hover-bg !default;
-$cadmin-multi-step-icon-focus-box-shadow: $cadmin-btn-focus-box-shadow !default;
+$cadmin-multi-step-icon-focus-box-shadow: $cadmin-component-focus-box-shadow !default;
 $cadmin-multi-step-icon-focus-color: $cadmin-multi-step-icon-hover-color !default;
 $cadmin-multi-step-icon-focus-outline: 0 !default;
 $cadmin-multi-step-icon-focus-text-decoration: $cadmin-multi-step-icon-hover-text-decoration !default;

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

@@ -31,7 +31,7 @@ $cadmin-navigation-bar-base: map-deep-merge(
 				border-radius: 0,
 				outline: 0,
 				focus: (
-					box-shadow: $cadmin-btn-focus-box-shadow,
+					box-shadow: $cadmin-component-focus-box-shadow,
 				),
 				disabled: (
 					box-shadow: none,
@@ -64,7 +64,7 @@ $cadmin-navigation-bar-light: map-deep-merge(
 				),
 				disabled: (
 					color: $cadmin-gray-600,
-					opacity: $cadmin-btn-disabled-opacity,
+					opacity: $cadmin-component-disabled-opacity,
 				),
 			),
 		),
@@ -87,7 +87,7 @@ $cadmin-navigation-bar-light: map-deep-merge(
 								),
 								disabled: (
 									color: $cadmin-gray-600,
-									opacity: $cadmin-btn-disabled-opacity,
+									opacity: $cadmin-component-disabled-opacity,
 								),
 							),
 						),
@@ -120,7 +120,7 @@ $cadmin-navigation-bar-secondary: map-deep-merge(
 				),
 				disabled: (
 					color: $cadmin-gray-400,
-					opacity: $cadmin-btn-disabled-opacity,
+					opacity: $cadmin-component-disabled-opacity,
 				),
 			),
 		),
@@ -149,7 +149,7 @@ $cadmin-navigation-bar-secondary: map-deep-merge(
 								),
 								disabled: (
 									color: $cadmin-gray-400,
-									opacity: $cadmin-btn-disabled-opacity,
+									opacity: $cadmin-component-disabled-opacity,
 								),
 							),
 						),

package/src/scss/cadmin/variables/_quick-action.scss

@@ -13,4 +13,4 @@ $cadmin-quick-action-item-min-width: 32px !default; // 32px
 $cadmin-quick-action-item-border-radius: $cadmin-border-radius !default;
 
 $cadmin-quick-action-item-disabled-cursor: $cadmin-disabled-cursor !default;
-$cadmin-quick-action-item-disabled-opacity: $cadmin-btn-disabled-opacity !default;
+$cadmin-quick-action-item-disabled-opacity: $cadmin-component-disabled-opacity !default;

package/src/scss/cadmin/variables/_tables.scss

@@ -249,7 +249,7 @@ $cadmin-table-action-link: map-deep-merge(
 		font-size: 16px,
 		height: 32px,
 		justify-content: center,
-		transition: $cadmin-btn-transition,
+		transition: $cadmin-component-transition,
 		vertical-align: middle,
 		width: 32px,
 		hover: (
@@ -687,7 +687,7 @@ $cadmin-table-list-action-link: map-deep-merge(
 		font-size: 16px,
 		height: 32px,
 		justify-content: center,
-		transition: $cadmin-btn-transition,
+		transition: $cadmin-component-transition,
 		vertical-align: middle,
 		width: 32px,
 		hover: (

package/src/scss/cadmin/variables/_utilities.scss

@@ -69,7 +69,7 @@ $cadmin-close: map-deep-merge(
 		padding: 0,
 		text-align: center,
 		text-shadow: $cadmin-close-text-shadow,
-		transition: $cadmin-btn-transition,
+		transition: $cadmin-component-transition,
 		width: 32px,
 		hover: (
 			color: $cadmin-close-color,
@@ -77,7 +77,7 @@ $cadmin-close: map-deep-merge(
 			text-decoration: none,
 		),
 		focus: (
-			box-shadow: $cadmin-btn-focus-box-shadow,
+			box-shadow: $cadmin-component-focus-box-shadow,
 			opacity: 1,
 			outline: 0,
 		),
@@ -85,13 +85,13 @@ $cadmin-close: map-deep-merge(
 			box-shadow: none,
 			color: $cadmin-gray-600,
 			cursor: $cadmin-disabled-cursor,
-			opacity: $cadmin-btn-disabled-opacity,
+			opacity: $cadmin-component-disabled-opacity,
 			outline: 0,
 		),
 		disabled-active: (
 			pointer-events: none,
 		),
-		btn-focus-box-shadow: $cadmin-btn-focus-box-shadow,
+		btn-focus-box-shadow: $cadmin-component-focus-box-shadow,
 		btn-focus-outline: 0,
 		lexicon-icon-margin-top: 0,
 	),

package/src/scss/components/_custom-forms.scss

@@ -47,7 +47,7 @@
 
 		+ .input-group {
 			border-radius: 1px;
-			box-shadow: 0 0 0 0.075rem #fff, $btn-focus-box-shadow;
+			box-shadow: $component-focus-box-shadow;
 		}
 	}
 

package/src/scss/components/_links.scss

@@ -17,7 +17,7 @@
 // Link Outline
 
 button.link-outline {
-	cursor: $btn-cursor;
+	cursor: $link-cursor;
 }
 
 .link-outline {

package/src/scss/functions/_global-functions.scss

@@ -26,7 +26,7 @@
 	@return $toggle-switch-width + $label-spacer-x;
 }
 
-/// A function that returns a new map with all the keys and values including nested keys and values from both `$map1` and `$map2`. If both `$map1` and `$map2` have the same key, `$map2`’s value takes precedence.
+/// A function that returns a new map with all the keys and values including nested keys and values from both `$map1` and `$map2`. If both `$map1` and `$map2` have the same key, `$map2`’s value takes precedence. The key value pair `merge: false,` will skip merging maps. This allows component properties to be reset to a blank state.
 /// @param {Map, Null} $map1[()]
 /// @param {Map, Null} $map2[()]
 
@@ -53,25 +53,29 @@
 
 	$newMap: $map1;
 
-	@each $key, $value in $map2 {
-		@if (type-of($value) == map) {
-			$newMap: map-merge(
-				$newMap,
-				(
-					$key: map-deep-merge(map-get($newMap, $key), $value),
-				)
-			);
-		} @else {
-			$newMap: map-merge(
-				$newMap,
-				(
-					$key: $value,
-				)
-			);
+	@if (map-get($map2, merge) != false) {
+		@each $key, $value in $map2 {
+			@if (type-of($value) == map) {
+				$newMap: map-merge(
+					$newMap,
+					(
+						$key: map-deep-merge(map-get($newMap, $key), $value),
+					)
+				);
+			} @else {
+				$newMap: map-merge(
+					$newMap,
+					(
+						$key: $value,
+					)
+				);
+			}
 		}
+
+		@return $newMap;
 	}
 
-	@return $newMap;
+	@return $map2;
 }
 
 /// A helper function for setting default values in variables inside mixins if no value is declared. If the value of a variable is `clay-unset`, `setter` returns a value of `null` which prevents Sass from outputting the CSS property. If all the values in the arglist `$vars...` is `null`, `setter` returns `null`.
@@ -791,14 +795,8 @@
 	$newMap: $map;
 
 	@each $key in $keys {
-		@if (type-of($newMap) == 'list' and length($newMap) == 0) or
-			(type-of($newMap) == 'null')
-		{
-			$newMap: map-new();
-		}
-
-		@if (type-of($newMap) != map) {
-			@error ('argument `$map: #{$map}` of `map-deep-get($map, $keys)` must be a map');
+		@if (type-of($newMap) != 'map') {
+			@return null;
 		}
 
 		$newMap: map-get($newMap, $key);

package/src/scss/functions/_lx-icons-generated.scss

@@ -562,11 +562,13 @@
 
 	'minus-circle': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M256.4 0c-340.8 0-342.8 512 0 512 338.8 0 342.8-512 0-512zm128.3 304H128.1c-64.2 0-63.2-96 0-96h256.6c64.1 0 66.1 96 0 96z" fill="#{$color}"/></svg>',
 
-	'mobile-device-rules': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline mobile-device-rules-phone" d="M192 0H64C28.8 0 0 28.8 0 64v320.159c0 35.2 28.8 64 64 64h128c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zm-63 416.159c-8.836 0-16-7.164-16-16s7.163-16 16-16 16 7.163 16 16-7.163 16-16 16zm63-96v30.804H64V64h128v256.159z" fill="#{$color}"/><circle class="lexicon-icon-outline mobile-device-rules-bullet-1" cx="320" cy="96" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline mobile-device-rules-bullet-3" cx="320" cy="352" r="32" fill="#{$color}"/><circle class="lexicon-icon-outline mobile-device-rules-bullet-2" cx="320" cy="224" r="32" fill="#{$color}"/><path class="lexicon-icon-outline mobile-device-rules-item-1" d="M416 128h64c17.673 0 32-14.327 32-32s-14.327-32-32-32h-64c-17.673 0-32 14.327-32 32s14.327 32 32 32z" fill="#{$color}"/><path class="lexicon-icon-outline mobile-device-rules-item-2" d="M480 192h-64c-17.673 0-32 14.327-32 32s14.327 32 32 32h64c17.673 0 32-14.327 32-32s-14.327-32-32-32z" fill="#{$color}"/><path class="lexicon-icon-outline mobile-device-rules-item-3" d="M480 320h-64c-17.673 0-32 14.327-32 32s14.327 32 32 32h64c17.673 0 32-14.327 32-32s-14.327-32-32-32z" fill="#{$color}"/></svg>',
+	'mobile-device-rules': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M256 96H64v320h192V96ZM64 32C28.654 32 0 60.654 0 96v320c0 35.346 28.654 64 64 64h192c35.346 0 64-28.654 64-64V96c0-35.346-28.654-64-64-64H64Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M112 352c0-8.837 7.163-16 16-16h64c8.837 0 16 7.163 16 16s-7.163 16-16 16h-64c-8.837 0-16-7.163-16-16Z" fill="#{$color}"/><rect class="lexicon-icon-outline" x="352" y="96" width="160" height="64" rx="32" fill="#{$color}"/><rect class="lexicon-icon-outline" x="352" y="224" width="160" height="64" rx="32" fill="#{$color}"/><rect class="lexicon-icon-outline" x="352" y="352" width="160" height="64" rx="32" fill="#{$color}"/></svg>',
 
-	'mobile-landscape': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M0 128v256c0 35.2 28.8 64 64 64h384c35.2 0 64-28.8 64-64V128c0-35.2-28.8-64-64-64H64C28.8 64 0 92.8 0 128zm480 110v32c0 22-32 20-32 0v-32c0-22 32-21 32 0zm-96-109.3c17.7 0 32 14.3 32 32V352c0 17.7-14.3 32-32 32H96c-17.7 0-32-14.3-32-32V160.7c0-17.7 14.3-32 32-32h288z" fill="#{$color}"/></svg>',
+	'mobile-devices': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline lx-mobile-devices-tablet" d="M192 0h256c35.312 0 64 28.7 64 64v384c0 35.301-28.688 64-64 64H288v-96h160V64H192v32h-64V64c0-35.3 28.688-64 64-64Z" fill="#{$color}"/><path class="lexicon-icon-outline lx-mobile-devices-phone" fill-rule="evenodd" clip-rule="evenodd" d="M256 160c0-17.699-14.312-32-32-32H32c-17.688 0-32 14.301-32 32v320c0 17.699 14.313 32 32 32h192c17.688 0 32-14.301 32-32V160ZM64 448V192h128v256H64Z" fill="#{$color}"/></svg>',
 
-	'mobile-portrait': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M384 0H128C92.8 0 64 28.8 64 64v384c0 35.2 28.8 64 64 64h256c35.2 0 64-28.8 64-64V64c0-35.2-28.8-64-64-64zM274 480h-32c-22 0-20-32 0-32h32c22 0 21 32 0 32zm109.3-96c0 17.7-14.3 32-32 32H160c-17.7 0-32-14.3-32-32V96c0-17.7 14.3-32 32-32h191.3c17.7 0 32 14.3 32 32v288z" fill="#{$color}"/></svg>',
+	'mobile-landscape': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M448 384V128H64v256h384Zm64-256c0-35.346-28.654-64-64-64H64C28.654 64 0 92.654 0 128v256c0 35.346 28.654 64 64 64h384c35.346 0 64-28.654 64-64V128Z" fill="#{$color}"/><rect class="lexicon-icon-outline" x="192" y="288" width="128" height="32" rx="16" fill="#{$color}"/></svg>',
+
+	'mobile-portrait': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" fill-rule="evenodd" clip-rule="evenodd" d="M384 64H128v384h256V64ZM128 0C92.654 0 64 28.654 64 64v384c0 35.346 28.654 64 64 64h256c35.346 0 64-28.654 64-64V64c0-35.346-28.654-64-64-64H128Z" fill="#{$color}"/><path class="lexicon-icon-outline" d="M192 368c0-8.837 7.163-16 16-16h96c8.837 0 16 7.163 16 16s-7.163 16-16 16h-96c-8.837 0-16-7.163-16-16Z" fill="#{$color}"/></svg>',
 
 	'moon': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M186.5 81.4c0-25.4 3.8-49.8 10.7-72.9C84.3 34.3 0 135.2 0 256c0 140.3 113.7 254 254 254 114.9 0 212-76.3 243.3-181.1-18.3 4.2-37.3 6.5-56.8 6.5-140.2 0-254-113.8-254-254z" fill="#{$color}"/></svg>',