[ADD] more components and fix some styles

src/App.vue

@@ -24,21 +24,21 @@
 </script>
 
 <style lang="sass">
-    $cart-container-width: 350px
-    $products-container-width: calc(100% - #{$cart-container-width})
-
     .pos
         width: 100%
         height: 100%
+        padding: 10px
         display: flex
         background: #fff
 
         .products-container
-            width: $products-container-width
+            width: calc(100% - 350px)
             height: 100%
-            padding: 15px
+            padding-right: 5px
              
         .cart-container
-            width: $cart-container-width
+            width: 350px
             height: 100%
+            border-left: 1px solid #d3d3d3
+            padding-left: 10px
 </style>

src/components/Cart.vue

@@ -1,15 +1,30 @@
 <template lang="pug">
     .cart
-        h3 Cart Place
+        <cart-total />
+        <cart-list />
+        <cart-options />
 </template>
 
 <script>
+    import CartTotal from '@/components/CartTotal'
+    import CartList from '@/components/CartList'
+    import CartOptions from '@/components/CartOptions'
+
     export default {
+        components: {
+            'cart-total': CartTotal,
+            'cart-list': CartList,
+            'cart-options': CartOptions
+        }
     
     }
 </script>
 
 <style lang="sass">
-
+    .cart
+        width: 100%
+        height: 100%
+        display: flex
+        flex-direction: column
 </style>
 

src/components/CartItem.vue

@@ -9,5 +9,9 @@
 </script>
 
 <style lang="sass">
-    
+    .cart-item
+        width: 100%
+        height: 65px
+        margin-top: 5px
+        border: 1px solid #d3d3d3
 </style>

src/components/CartList.vue

@@ -0,0 +1,27 @@
+<template lang="pug">
+    .cart-list
+        <cart-item />
+        <cart-item />
+        <cart-item />
+        <cart-item />
+        <cart-item />
+</template>
+
+<script>
+    import CartItem from '@/components/CartItem'
+
+    export default {
+        components: {
+            'cart-item': CartItem
+        }
+    }
+</script>
+
+
+<style lang="sass">
+    .cart-list
+        width: 100%
+        height: calc(100% - 100px)
+        overflow-y: auto
+</style>
+

src/components/CartOptions.vue

@@ -0,0 +1,25 @@
+<template lang="pug">
+    .cart-options
+        button.cart-next Continuar
+</template>
+
+<style lang="sass">
+    .cart-options
+        width: 100%
+        height: 50px
+
+        .cart-next
+            width: 100%
+            height: inherit
+            border: none
+            border-radius: 0
+            background: #4caf50
+            color: #fff
+            font:
+                size: 12pt
+                weight: bold
+            &:hover
+                background: #388e3c
+
+</style>
+

src/components/CartTotal.vue

@@ -0,0 +1,20 @@
+<template lang="pug">
+    .cart-total
+        h2
+            small.cart-total-currency Gs
+            | 
+            | 0
+</template>
+
+
+<style lang="sass">
+    .cart-total
+        width: 100%
+        height: 50px
+
+        h2
+            width: 100%
+            height: inherit
+            margin: 0
+            font-size: 30pt
+</style>

src/components/ProductsGrid.vue

@@ -1,20 +1,19 @@
 <template lang="pug">
     .products-grid
-        .grid-wrapper
-            <product-card />
-            <product-card />
-            <product-card />
-            <product-card />
-            <product-card />
-            <product-card />
-            <product-card />
-            <product-card />
-            <product-card />
-            <product-card />
-            <product-card />
-            <product-card />
-            <product-card />
-            <product-card />
+        <product-card />
+        <product-card />
+        <product-card />
+        <product-card />
+        <product-card />
+        <product-card />
+        <product-card />
+        <product-card />
+        <product-card />
+        <product-card />
+        <product-card />
+        <product-card />
+        <product-card />
+        <product-card />
 </template>
 
 <script>
@@ -30,7 +29,6 @@
 <style lang="sass">
     .products-grid
         width: 100%
-        height: 100%
         padding-top: 15px
         overflow-y: auto
 </style>

src/components/ProductsSearcher.vue

@@ -12,9 +12,15 @@
 <style lang="sass">
     .products-searcher
         width: 100%
-        height: 35px;
+        height: 35px
 
         input
             width: inherit
             height: inherit
+            text-align: center
+            border-radius: 0
+            font: 
+                size: 11pt
+                style: normal
+                weight: bold
 </style>