Re arrange CSS

louismaximepiton · Feb 28, 2024 · c0770d8 · c0770d8
1 parent 64f0a30
commit c0770d8
Showing 1 changed file with 20 additions and 11 deletions.
diff --git a/scss/_card.scss b/scss/_card.scss
@@ -38,6 +38,14 @@
   @include border-radius(var(--#{$prefix}card-border-radius));
   @include box-shadow(var(--#{$prefix}card-box-shadow));
 
+  > :first-child {
+    @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+  }
+
+  > :last-child {
+    @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
+  }
+
   > hr {
     margin-right: 0;
     margin-left: 0;
@@ -56,14 +64,6 @@
     }
   }
 
-  > :first-child {
-    @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
-  }
-
-  > :last-child {
-    @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
-  }
-
   // Due to specificity of the above selector (`.card > .list-group`), we must
   // use a child selector here to prevent double borders.
   > .card-header + .list-group,
@@ -163,10 +163,15 @@
   width: 100%; // Required because we use flexbox and this inherently applies align-self: stretch
 }
 
-.card-img-top,
+// Todo in v6: Remove safely `.card-img-top` and `.card-img-bottom` since the border-radii are handled via `:first-child` and `:last-child`
+.card-img,
+.card-img-top {
+  @include border-top-radius(var(--#{$prefix}card-inner-border-radius));
+}
+
+.card-img,
 .card-img-bottom {
-  @include deprecate("`.card-img-top`", "v5.3.0", "v6.0.0", true);
-  @include deprecate("`.card-img-bottom`", "v5.3.0", "v6.0.0", true);
+  @include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
 }
 
 
@@ -201,11 +206,13 @@
         &:not(:last-child) {
           @include border-end-radius(0);
 
+          .card-img-top,
           > :first-child {
             // stylelint-disable-next-line property-disallowed-list
             border-top-right-radius: 0;
           }
 
+          .card-img-bottom,
           > :last-child {
             // stylelint-disable-next-line property-disallowed-list
             border-bottom-right-radius: 0;
@@ -215,11 +222,13 @@
         &:not(:first-child) {
           @include border-start-radius(0);
 
+          .card-img-top,
           > :first-child {
             // stylelint-disable-next-line property-disallowed-list
             border-top-left-radius: 0;
           }
 
+          .card-img-bottom,
           > :last-child {
             // stylelint-disable-next-line property-disallowed-list
             border-bottom-left-radius: 0;