]> _ Git - pmi.git/commitdiff
projects / pmi.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 7dfb684)
wip #2830 @5
authornael <nael@cubedesigners.com>
Mon, 17 Jun 2019 15:17:51 +0000 (17:17 +0200)
committernael <nael@cubedesigners.com>
Mon, 17 Jun 2019 15:17:51 +0000 (17:17 +0200)
public/_modules/selected-product/index.html patch | blob | history
public/_modules/selected-product/style.styl patch | blob | history

diff --git a/public/_modules/selected-product/index.html b/public/_modules/selected-product/index.html
index e52f77acf8ce57d2381af48dfb626f24e8f34cb7..a7da087321090f95946042165c55895d1d330e61 100644 (file)
--- a/public/_modules/selected-product/index.html
+++ b/public/_modules/selected-product/index.html
@@ -12,16 +12,54 @@
 </head>
 <body>
 
-<div id="news" class=" mt-5 flex ">
+<div id="select-product" class=" mt-5 flex ">
 
     <div class="selected-wrapper p-12 flex-col">
         <div class="selected-product flex">
-            <div class="img">
+            <div class="img-product">
                 <img src="img/product.png" alt="">
             </div>
-            <div class="product-info flex-col ml-12">
-                <p >Capteur de force</p>
-                <p>Modèle 1220</p>
+            <div class="product-info flex-col ml-12 sm:ml-6">
+                <p class="product-txt" >Capteur de force</p>
+                <p class="product-txt">Modèle 1220</p>
+
+                <div class="flex number text-grey-dark">
+                    <div class="number-input flex items-center">
+                        Quantité
+                        <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>
+                        <input class="quantity" min="0" name="quantity" value="1" type="number">
+                        <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
+                    </div>
+                </div>
+                <p class="text-red mt-3">Supprimer</p>
+            </div>
+        </div>
+        <div class="selected-product mt-12 flex">
+            <div class="img-product">
+                <img src="img/product.png" alt="">
+            </div>
+            <div class="product-info flex-col ml-12 sm:ml-6">
+                <p class="product-txt" >Capteur de force</p>
+                <p class="product-txt">Modèle 1220</p>
+
+                <div class="flex number text-grey-dark">
+                    <div class="number-input flex items-center">
+                        Quantité
+                        <button onclick="this.parentNode.querySelector('input[type=number]').stepDown()" ></button>
+                        <input class="quantity" min="0" name="quantity" value="1" type="number">
+                        <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
+                    </div>
+                </div>
+                <p class="text-red mt-3">Supprimer</p>
+            </div>
+        </div>
+        <div class="selected-product mt-12 flex">
+            <div class="img-product">
+                <img src="img/product.png" alt="">
+            </div>
+            <div class="product-info flex-col ml-12 sm:ml-6">
+                <p class="product-txt" >Capteur de force</p>
+                <p class="product-txt">Modèle 1220</p>
                 <div class="flex number text-grey-dark">
                     <div class="number-input flex items-center">
                         Quantité
@@ -30,7 +68,7 @@
                         <button onclick="this.parentNode.querySelector('input[type=number]').stepUp()" class="plus"></button>
                     </div>
                 </div>
-                <p class="text-red">Supprimer</p>
+                <p class="text-red mt-3">Supprimer</p>
             </div>
         </div>
     </div>
diff --git a/public/_modules/selected-product/style.styl b/public/_modules/selected-product/style.styl
index 43cd35a0682e05dac424f396c3a543365a8311a3..b7bd1e0f31e93aba2f3213bc376f254bfc496f71 100644 (file)
--- a/public/_modules/selected-product/style.styl
+++ b/public/_modules/selected-product/style.styl
@@ -14,13 +14,23 @@ $verylightgrey =#E7E9F3
   box-sizing: border-box !important
   margin: 0
   font-family: $muli
+#select-product
+  margin-left: 10vw
+  margin-right: 10vw
 
 .selected-wrapper
   background $lightgrey
+  width: 44.2vw;
+  @media (max-width 1080px)
+    width 100%
+  @media (max-width 499px)
+    padding 5vw!important
+.img-product
+  img
+    width 100%
 
-.number
-  background: white
-  padding 12px 8px
+.product-txt
+  margin-bottom: 0.75rem!important
 
 input[type="number"] {
   -webkit-appearance: textfield;
@@ -35,6 +45,8 @@ input[type=number]::-webkit-outer-spin-button {
 
 .number-input {
   display: inline-flex;
+  padding 0px 12px
+  background white
 }
 
 .number-input,
@@ -42,19 +54,21 @@ input[type=number]::-webkit-outer-spin-button {
   box-sizing: border-box;
 }
 
-.number-input button {
+.number-input button
   outline:none;
   -webkit-appearance: none;
   background-color: transparent;
   border: none;
   align-items: center;
   justify-content: center;
-  width: 2.5rem;
-  height: 2.5rem;
+  width: 2rem;
+  height: 2rem;
   cursor: pointer;
   margin: 0;
   position: relative;
-}
+  @media (max-width : 499px)
+    width 1rem
+    height 1rem
 
 .number-input button:before,
 .number-input button:after {
@@ -62,7 +76,7 @@ input[type=number]::-webkit-outer-spin-button {
   position: absolute;
   content: '';
   width: 8px;
-  height: 2px;
+  height: 1px;
   background-color: $dark;
   transform: translate(-50%, -50%);
 }
@@ -70,12 +84,17 @@ input[type=number]::-webkit-outer-spin-button {
   transform: translate(-50%, -50%) rotate(90deg);
 }
 
-.number-input input[type=number] {
+.number-input input[type=number]
   font-family: sans-serif;
-  max-width: 5rem;
+  max-width: 3rem;
   padding: .5rem;
-  font-size: 2rem;
-  height: 3rem;
-  font-weight: bold;
+  height: 2.5rem;
   text-align: center;
-}
\ No newline at end of file
+  @media (max-width : 499px)
+    display block
+    max-width: 1rem;
+    padding: 0
+    height: 1rem
+    //margin-bottom: 0.25rem
+    line-height 0
+
Unnamed repository; edit this file 'description' to name the repository.