@clayui/css 3.162.0 → 3.164.0

package/src/scss/atlas/variables/_cards.scss

@@ -1,6 +1,12 @@
-$card-border-radius: $border-radius !default;
-$card-border-width: 0px !default;
-$card-box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6) !default;
+$card-border-color: $secondary-l2 !default;
+$card-border-radius: $border-radius-xl !default;
+$card-border-width: $border-width !default;
+$card-box-shadow: c-unset !default;
+$card-transition:
+	$component-transition,
+	transform 0.15s ease-in-out !default;
+
+$card-hover-box-shadow: 0 0.25rem 0.75rem -0.25rem unquote('rgb(from #{$black} r g b / 0.25)') !default;
 
 $card-body-padding-bottom: 1rem !default;
 $card-body-padding-left: 1rem !default;
@@ -18,7 +24,14 @@ $card: map-deep-merge(
 	(
 		border-radius: clay-enable-rounded($card-border-radius),
 		border-width: $card-border-width,
-		box-shadow: clay-enable-shadows($card-box-shadow),
+		outline-color: transparent,
+		outline-style: solid,
+		outline-width: $card-border-width,
+		transition: $card-transition,
+
+		hover: (
+			box-shadow: clay-enable-shadows($card-hover-box-shadow),
+		),
 	),
 	$card
 );
@@ -82,43 +95,116 @@ $card-link: map-deep-merge(
 
 $checkbox-left-card-padding: 50px !default;
 
-$form-check-card-checked-box-shadow: 0 0 0 2px
-	clay-lighten($component-active-bg, 22.94) !default;
+// .form-check-card
+
+$form-check-card-checked-box-shadow: c-unset !default;
+
+$form-check-card: () !default;
+$form-check-card: map-deep-merge(
+	(
+		transition: $card-transition,
+
+		hover: (
+			card: (
+				border-color: $primary-l1,
+				outline-color: $primary-l1,
+			),
+		),
+
+		active: (
+			card: (
+				border-color: $primary,
+				outline-color: $primary,
+			),
+		),
+
+		checked: (
+			card: (
+				border-color: $primary,
+				outline-color: $primary,
+			),
+		),
+
+		disabled: (
+			transform: none,
+
+			card: (
+				box-shadow: none,
+				border-color: $card-border-color,
+				outline-color: transparent,
+			),
+		),
+	),
+	$form-check-card
+);
 
 // Card Interactive
 
 $card-interactive: () !default;
 $card-interactive: map-deep-merge(
 	(
+		outline: c-unset,
+		transition: c-unset,
+
 		hover: (
-			background-color: #f7f8f9,
+			background-color: $gray-100,
 		),
 
 		focus: (
-			border-color: null,
-			box-shadow: $component-focus-box-shadow,
+			border-color: $primary-l1,
+			box-shadow: none,
+			outline-color: $primary-l1,
+			outline-offset: 0,
+			outline-style: solid,
+			outline-width: $card-border-width,
 		),
 
 		active: (
-			background-color: #f1f2f5,
+			background-color: $gray-200,
 		),
 	),
 	$card-interactive
 );
 
+$card-interactive-primary-hover-box-shadow: unquote(
+	'#{$card-hover-box-shadow}, 0px -2.5rem 0px -2.25rem #{$primary} inset'
+) !default;
+
+$card-interactive-primary: () !default;
+$card-interactive-primary: map-deep-merge(
+	(
+		hover: (
+			box-shadow: $card-interactive-primary-hover-box-shadow,
+		),
+
+		focus: (
+			box-shadow: $card-interactive-primary-hover-box-shadow,
+		),
+
+		active: (
+			box-shadow: $card-interactive-primary-hover-box-shadow,
+		),
+
+		after-highlight: c-unset,
+	),
+	$card-interactive-primary
+);
+
 // Card Interactive Secondary
 
 $card-interactive-secondary: () !default;
 $card-interactive-secondary: map-deep-merge(
 	(
 		hover: (
-			border-color: transparent,
-			box-shadow: 0 0 0 2px $primary-l0,
+			background-color: $white,
+			border-color: c-unset,
+			box-shadow: c-unset,
+			color: $gray-900,
+			transform: translateY(-0.25rem),
 		),
 
-		focus: (
-			border-color: transparent,
-			box-shadow: 0 0 0 2px $primary-l0,
+		active: (
+			background-color: $white,
 		),
 	),
 	$card-interactive-secondary
@@ -129,6 +215,12 @@ $card-interactive-secondary: map-deep-merge(
 $card-type-asset: () !default;
 $card-type-asset: map-deep-merge(
 	(
+		transition: $card-transition,
+
+		hover: (
+			transform: translateY(-0.25rem),
+		),
+
 		aspect-ratio: (
 			border-color: $gray-300,
 		),
@@ -136,10 +228,26 @@ $card-type-asset: map-deep-merge(
 		card-body: (
 			padding-top: 0.75rem,
 		),
+
+		disabled: (
+			transform: none,
+		),
 	),
 	$card-type-asset
 );
 
+// Template Card
+
+$template-card: () !default;
+$template-card: map-deep-merge(
+	(
+		hover: (
+			transform: translateY(-0.25rem),
+		),
+	),
+	$template-card
+);
+
 $image-card: () !default;
 $image-card: map-deep-merge(
 	(
@@ -187,12 +295,3 @@ $card-type-template-aspect-ratio-item: map-deep-merge(
 	),
 	$card-type-template-aspect-ratio-item
 );
-
-$card-type-template: () !default;
-$card-type-template: map-deep-merge(
-	(
-		border-width: 1px,
-		box-shadow: none,
-	),
-	$card-type-template
-);

package/src/scss/atlas/variables/_custom-forms.scss

@@ -101,11 +101,6 @@ $custom-control-label: map-deep-merge(
 			border-width: $custom-control-indicator-border-width,
 			box-shadow:
 				clay-enable-shadows($custom-control-indicator-box-shadow),
-			top: 0.25rem,
-		),
-
-		after: (
-			top: $custom-control-indicator-position-top,
 		),
 	),
 	$custom-control-label

package/src/scss/atlas/variables/_globals.scss

@@ -386,6 +386,7 @@ $border-width: 0.0625rem !default;
 $border-radius: 0.25rem !default; // 4px
 $border-radius-lg: 0.375rem !default; // 6px
 $border-radius-sm: 0.1875rem !default; // 3px
+$border-radius-xl: 1rem !default; // 16px
 
 $rounded-0-border-radius: 0px !default;
 $rounded-border-radius: $border-radius !default;
@@ -706,7 +707,7 @@ $hr-border-color: rgba($black, 0.1) !default;
 $hr-border-width: $border-width !default;
 $hr-margin-y: $spacer !default;
 
-$mark-bg: #ffe399 !default;
+$mark-bg: $yellow-l3 !default;
 
 $dt-font-weight: $font-weight-bold !default;