[FIX] some components styles

src/App.vue

@@ -1,18 +1,22 @@
 <template lang="pug">
     .pos
-        <product-searcher />
-        <products-grid /> 
-        <cart />
+        .products-container
+            <products-searcher />
+            <products-grid />
+        .cart-container
+            <cart />
 </template>
 
 <script>
-    import ProductSearcher from '@/components/ProductSearcher'
+    import ProductsSearcher from '@/components/ProductsSearcher'
     import ProductsGrid from '@/components/ProductsGrid'
     import Cart from '@/components/Cart'
 
+    console.log(this)
+
     export default {
         components: {
-            'product-searcher': ProductSearcher,
+            'products-searcher': ProductsSearcher,
             'products-grid': ProductsGrid,
             'cart': Cart
         }
@@ -20,9 +24,21 @@
 </script>
 
 <style lang="sass">
+    $cart-container-width: 350px
+    $products-container-width: calc(100% - #{$cart-container-width})
+
     .pos
         width: 100%
-        heigth: 100%
+        height: 100%
         display: flex
         background: #fff
+
+        .products-container
+            width: $products-container-width
+            height: 100%
+            padding: 15px
+             
+        .cart-container
+            width: $cart-container-width
+            height: 100%
 </style>

src/components/Cart.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
     .cart
-        h2 Cart Place
+        h3 Cart Place
 </template>
 
 <script>

src/components/ProductCard.vue

@@ -9,7 +9,11 @@
 </script>
 
 <style lang="sass">
-
+    .product-card
+        width: 130px
+        height: 160px
+        border: 1px solid #d3d3d3
+        display: inline-block
 </style>
 
 

src/components/ProductsGrid.vue

@@ -1,14 +1,36 @@
 <template lang="pug">
     .products-grid
-        h2 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 />
 </template>
 
 <script>
+    import ProductCard from '@/components/ProductCard'
+
     export default {
-    
+        components: {
+            'product-card': ProductCard
+        }
     }
 </script>
 
 <style lang="sass">
-
+    .products-grid
+        width: 100%
+        height: 100%
+        padding-top: 15px
+        overflow-y: auto
 </style>

src/components/ProductSearcher.vue → src/components/ProductsSearcher.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-    .pos-searcher
+    .products-searcher
         input(type="text" placeholder="Buscar un producto")
 </template>
 
@@ -10,5 +10,11 @@
 </script>
 
 <style lang="sass">
-  
+    .products-searcher
+        width: 100%
+        height: 35px;
+
+        input
+            width: inherit
+            height: inherit
 </style>