🎨 (pricing)

src/components/PricingTable.vue

@@ -3,7 +3,11 @@
     <div class="pricing-plan" :class="{ 'is-active': plan === 'free' }">
       <div class="plan-header">Gratuit</div>
       Parfait pour démarrer rapidement
-      <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">€</span>0</span>/mois</div>
+      <div class="plan-price">
+        <span class="plan-price-amount"
+          ><span class="plan-price-currency">€</span>0</span
+        >/mois
+      </div>
       <div class="plan-items">
         <div class="plan-item">jusqu'à 20 comptes</div>
         <div class="plan-item">jusqu'à 20 amis/compte</div>
@@ -18,14 +22,23 @@
       </div>
     </div>
 
-    <div class="pricing-plan is-success" :class="{ 'is-active': plan === 'premium' }">
+    <div
+      class="pricing-plan is-success"
+      :class="{ 'is-active': plan === 'premium' }"
+    >
       <div class="plan-header">Premium</div>
       Vaquant sans aucune limite !
-      <div class="plan-price"><span class="plan-price-amount"><span class="plan-price-currency">€</span>3</span>/mois</div>
+      <div class="plan-price">
+        <span class="plan-price-amount"
+          ><span class="plan-price-currency">€</span>3</span
+        >/mois
+      </div>
       <div class="plan-items">
         <div class="plan-item"><awe-icon icon="infinity" /> comptes</div>
         <div class="plan-item"><awe-icon icon="infinity" /> amis/compte</div>
-        <div class="plan-item"><awe-icon icon="infinity" /> dépenses/compte</div>
+        <div class="plan-item">
+          <awe-icon icon="infinity" /> dépenses/compte
+        </div>
         <div class="plan-item">150+ devises</div>
         <div class="plan-item">pièces jointes disponibles</div>
       </div>
@@ -58,3 +71,8 @@ export default class PrincingTable extends Vue {
   }
 }
 </script>
+
+<style lang="scss">
+@import '../styles/variables';
+@import '~bulma-pricingtable';
+</style>

src/styles/framework.scss

@@ -1,5 +1,4 @@
 @import './variables';
-@import '~bulma/sass/utilities/_all.sass';
 @import '~bulma/sass/base/_all.sass';
 @import '~bulma/sass/components/navbar.sass';
 @import '~bulma/sass/components/breadcrumb.sass';
@@ -15,4 +14,3 @@
 @import '~bulma/sass/form/_all.sass';
 @import '~bulma/sass/layout/_all.sass';
 @import '~bulma/sass/grid/columns.sass';
-@import '~bulma-pricingtable';

src/styles/variables.scss

@@ -4,3 +4,5 @@ $main: #2c3e50;
 $green: hsl(141, 63%, 44%);
 $red: hsl(348, 54%, 52%);
 $white: #fff;
+
+@import '~bulma/sass/utilities/_all.sass';