Ticket #3988 - Artifices: Credits bundles mixed up in a list.

modules/boonex/credits/template/bundles.html

@@ -1,17 +1,17 @@
 <div class="__sp__-bundles">
-    <div class="__sp__-bundles-cnt bx-def-margin-sec-neg">
+    <div class="__sp__-bundles-cnt relative flex flex-wrap items-stretch justify-center -m-2">
         <bx_repeat:bundles>
-            <div class="__sp__-bundle-wrp bx-def-padding-sec bx-def-box-sizing">
-                <div class="__sp__-bundle bx-def-box bx-def-color-bg-box bx-def-border bx-def-round-corners">
-                    <div class="__sp__-bundle-cnt bx-def-padding bx-def-box-sizing bx-def-font-align-center">
-                        <div class="__sp__-b-title bx-def-font-h3">__title__</div>
-                        <div class="__sp__-b-amount bx-def-margin-top">
-                            <div class="__sp__-ba-value bx-def-font-h1"><b>__amount__</b></div>
+            <div class="__sp__-bundle-wrp w-full md:w-1/3 p-2 box-border">
+                <div class="__sp__-bundle bx-def-box bx-def-box-round-corners bx-def-color-bg-box w-full h-full">
+                    <div class="__sp__-bundle-cnt flex flex-col items-center justify-center w-full h-full p-4 box-border text-center">
+                        <div class="__sp__-b-title text-2xl uppercase">__title__</div>
+                        <div class="__sp__-b-amount flex-grow mt-4">
+                            <div class="__sp__-ba-value text-3xl font-semibold"><b>__amount__</b></div>
                             <bx_if:show_bonus>
                                 <div class="__sp__-ba-bonus"><i class="sys-icon plus"></i> <b>__bonus__</b> <bx_text:_bx_credits_txt_for_free /></div>
                             </bx_if:show_bonus>
                         </div>
-                        <div class="__sp__-b-price bx-def-margin-top">
+                        <div class="__sp__-b-price flex justify-center mt-4">
                             <div class="bx-credits-bp-currency">__currency_sign__</div>
                             <div class="bx-credits-bp-value">__price__</div>
                         </div>

modules/boonex/credits/template/css/main.css

@@ -3,79 +3,12 @@
 }
 
 /*--- Bundles ---*/
-.bx-credits-bundles,
-.bx-credits-bundles-cnt {
-    position: relative;
-}
-
-.bx-credits-bundles-cnt {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-wrap: wrap;
-    flex-wrap: wrap;
-    -webkit-align-items: stretch;
-    align-items: stretch;
-    -webkit-justify-content: center;
-    justify-content: center;
-}
-
-.bx-credits-bundle-wrp {
-    position: relative;
-    -webkit-flex: 0 1 33%; 
-    flex:  0 1 33%;
-
-    width: 33%;
-}
-
-.bx-media-phone .bx-credits-bundle-wrp {
-    -webkit-flex-basis: 100%;
-    flex-basis: 100%;
-
-    width: 100%;
-}
-
-.bx-credits-bundle {
-    position: relative;
-    width: 100%;
-    height: 100%;
-}
-
-.bx-credits-bundle-cnt {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-    -webkit-align-items: center;
-    align-items: center;
-
-    width: 100%;
-    height: 100%;
-}
 .bx-credits-bundle-cnt > div {
     -webkit-flex: 0 1 auto; 
     flex: 0 1 auto;
 
     width: 100%;
 }
-.bx-credits-bundle-cnt > div.bx-credits-b-amount {
-    -webkit-flex-grow: 1;
-    flex-grow: 1;
-}
-
-.bx-credits-b-title {
-    text-transform: uppercase;
-}
-
-.bx-credits-b-price {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-align-items: flex-start;
-    align-items: flex-start;
-    -webkit-justify-content: center;
-    justify-content: center;
-
-    width: 100%;
-}
 
 .bx-credits-bp-currency {
     margin-top: 0.5rem;
@@ -94,5 +27,4 @@
 .bx-credits-b-buy .bx-btn {
     float: none;
     display: inline-block;
-    max-width: 80%;
 }