feat: Card no longer has overflow: hidden. Instead, the figure will…

… adapt the card border radius, fix: saadeghi#1175
inorganik · Nov 1, 2022 · 9c98557 · 9c98557
1 parent 3a93a61
commit 9c98557
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 1 deletion.
diff --git a/src/components/styled/card.css b/src/components/styled/card.css
@@ -1,5 +1,19 @@
 .card {
   @apply rounded-box;
+  :where(figure:first-child) {
+    @apply overflow-hidden;
+    border-top-left-radius: inherit;
+    border-top-right-radius: inherit;
+    border-bottom-left-radius: unset;
+    border-bottom-right-radius: unset;
+  }
+  :where(figure:last-child) {
+    @apply overflow-hidden;
+    border-top-left-radius: unset;
+    border-top-right-radius: unset;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: inherit;
+  }
   &:focus-visible {
     outline: 2px solid currentColor;
     outline-offset: 2px;
@@ -30,4 +44,10 @@
   &.image-full > &-body {
     @apply z-20 text-neutral-content;
   }
+  &.image-full {
+    :where(figure) {
+      @apply overflow-hidden;
+      border-radius: inherit;
+    }
+  }
 }
diff --git a/src/components/unstyled/card.css b/src/components/unstyled/card.css
@@ -1,5 +1,5 @@
 .card {
-  @apply relative flex flex-col overflow-hidden;
+  @apply relative flex flex-col;
   &:focus {
     @apply outline-none;
   }

diff --git a/src/utilities/unstyled/card.css b/src/utilities/unstyled/card.css
@@ -1,6 +1,20 @@
 .card-side {
   align-items: stretch;
   flex-direction: row;
+  :where(figure:first-child) {
+    @apply overflow-hidden;
+    border-top-left-radius: inherit;
+    border-top-right-radius: unset;
+    border-bottom-left-radius: inherit;
+    border-bottom-right-radius: unset;
+  }
+  :where(figure:last-child) {
+    @apply overflow-hidden;
+    border-top-left-radius: unset;
+    border-top-right-radius: inherit;
+    border-bottom-left-radius: unset;
+    border-bottom-right-radius: inherit;
+  }
   & figure > * {
     max-width: unset;
   }