CardDeck: Fix hardcoded max of 3 cards (#5067)

Megabit · Oct 14, 2023 · 325265f · 325265f
1 parent 5990a0a
commit 325265f
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 5 deletions.
diff --git a/Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs b/Source/Blazorise.Bootstrap5/Bootstrap5ClassProvider.cs
@@ -590,7 +590,7 @@ public override string DropdownDirection( Direction direction )
 
     #region Card
 
-    public override string CardDeck() => "card-deck row row-cols-1 row-cols-md-3";
+    public override string CardDeck() => "card-deck";
 
     public override string CardGroup() => "card-group";
 

diff --git a/Source/Blazorise.Bootstrap5/Styles/_card.scss b/Source/Blazorise.Bootstrap5/Styles/_card.scss
@@ -1,3 +1,21 @@
-.card-deck .card{
-    height:100%;
-}
+.card-deck {
+    .card {
+        height: 100%;
+        margin-bottom: $card-deck-margin;
+    }
+
+    @include media-breakpoint-up(sm) {
+        display: flex;
+        flex-flow: row wrap;
+        margin-right: -$card-deck-margin;
+        margin-left: -$card-deck-margin;
+
+        .card {
+            // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
+            flex: 1 0 0%;
+            margin-right: $card-deck-margin;
+            margin-bottom: 0; // Override the default
+            margin-left: $card-deck-margin;
+        }
+    }
+}
diff --git a/Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.css b/Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.css
@@ -144,6 +144,21 @@ input[type=button].btn-block {
 
 .card-deck .card {
   height: 100%;
+  margin-bottom: 0.75rem;
+}
+@media (min-width: 576px) {
+  .card-deck {
+    display: flex;
+    flex-flow: row wrap;
+    margin-right: -0.75rem;
+    margin-left: -0.75rem;
+  }
+  .card-deck .card {
+    flex: 1 0 0%;
+    margin-right: 0.75rem;
+    margin-bottom: 0;
+    margin-left: 0.75rem;
+  }
 }
 
 .table-fixed-header .table thead tr th.dropdown-table-fixed-header-visible {

diff --git a/Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.min.css b/Source/Blazorise.Bootstrap5/wwwroot/blazorise.bootstrap5.min.css