@obosbbl/grunnmuren-react 2.0.0-canary.52 → 2.0.0-canary.54
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.mjs +4 -3
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1088,20 +1088,21 @@ const cardVariants = cva({
|
|
|
1088
1088
|
// **** Content ****
|
|
1089
1089
|
'[&_[data-slot="content"]]:flex [&_[data-slot="content"]]:flex-col [&_[data-slot="content"]]:gap-y-4',
|
|
1090
1090
|
// **** Media ****
|
|
1091
|
+
'[&_[data-slot="media"]_*]:pointer-events-none',
|
|
1091
1092
|
'[&_[data-slot="media"]]:overflow-hidden',
|
|
1092
1093
|
'[&_[data-slot="media"]]:relative',
|
|
1093
1094
|
// Position media at the edges of the card (because of these negative margins the media-element must be a wrapper around the actual image or other media content)
|
|
1094
1095
|
'[&_[data-slot="media"]]:mx-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))] [&_[data-slot="media"]]:mt-[calc(theme(space.3)*-1-theme(borderWidth.DEFAULT))]',
|
|
1095
1096
|
// Sets the aspect ratio of the media content (width: 100% is necessary to make aspect ratio work on images in FF)
|
|
1096
|
-
'[&_[data-slot="media"]>*:not([data-slot="badge"])]:aspect-[3/2] [&_[data-slot="media"]
|
|
1097
|
+
'[&_[data-slot="media"]>*:not([data-slot="badge"])]:aspect-[3/2] [&_[data-slot="media"]>img]:w-full [&_[data-slot="media"]>img]:object-cover',
|
|
1097
1098
|
// Prepare zoom animation for hover effects. The hover effect can also be enabled by classes on the parent component, so it is always prepared here.
|
|
1098
1099
|
'[&_[data-slot="media"]>*]:duration-300 [&_[data-slot="media"]>*]:ease-in-out [&_[data-slot="media"]>*]:motion-safe:transition-transform',
|
|
1099
1100
|
// **** Card link ****
|
|
1100
1101
|
// **** Hover ****
|
|
1101
1102
|
// Enables the zoom hover effect on media (note that we can't use group-hover/card here, because there might be other clickable elements in the card aside from the heading)
|
|
1102
|
-
'[&:has([data-slot="card-link"]_a:hover)_[data-slot="media"]
|
|
1103
|
+
'[&:has([data-slot="card-link"]_a:hover)_[data-slot="media"]>img]:scale-110',
|
|
1103
1104
|
// **** Card link in Heading ****
|
|
1104
|
-
'[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]
|
|
1105
|
+
'[&:has([data-slot="heading"]_[data-slot="card-link"]:hover)_[data-slot="media"]>img]:scale-110',
|
|
1105
1106
|
// Border (bottom/top) is set to transparent to make sure the bottom underline is not visible when the card is hovered
|
|
1106
1107
|
// Border top is set to even out the border bottom used for the underline
|
|
1107
1108
|
'[&_[data-slot="heading"]_[data-slot="card-link"]]:no-underline',
|