From 78b810b44500820570e8c00b1e10704cd1eefe89 Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Tue, 26 Nov 2019 08:51:23 +0100
Subject: [PATCH] :art: (pricing)

---
 src/components/PricingTable.vue | 26 ++++++++++++++++++++++----
 src/styles/framework.scss       |  2 --
 src/styles/variables.scss       |  2 ++
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/components/PricingTable.vue b/src/components/PricingTable.vue
index 6753ce9..a855c2b 100644
--- a/src/components/PricingTable.vue
+++ b/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>
\ No newline at end of file
diff --git a/src/styles/framework.scss b/src/styles/framework.scss
index a23cc6c..09b4779 100644
--- a/src/styles/framework.scss
+++ b/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';
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index 0b06438..3cc35cf 100644
--- a/src/styles/variables.scss
+++ b/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';