From 6e4ce70642422491e255ccfb25cb40b2087c5653 Mon Sep 17 00:00:00 2001 From: nael Date: Mon, 17 Jun 2019 17:17:51 +0200 Subject: [PATCH] wip #2830 @5 --- public/_modules/selected-product/index.html | 50 ++++++++++++++++++--- public/_modules/selected-product/style.styl | 47 +++++++++++++------ 2 files changed, 77 insertions(+), 20 deletions(-) diff --git a/public/_modules/selected-product/index.html b/public/_modules/selected-product/index.html index e52f77a..a7da087 100644 --- a/public/_modules/selected-product/index.html +++ b/public/_modules/selected-product/index.html @@ -12,16 +12,54 @@ -
+
-
+
-
-

Capteur de force

-

Modèle 1220

+
+

Capteur de force

+

Modèle 1220

+ +
+
+ Quantité + + + +
+
+

Supprimer

+
+
+
+
+ +
+
+

Capteur de force

+

Modèle 1220

+ +
+
+ Quantité + + + +
+
+

Supprimer

+
+
+
+
+ +
+
+

Capteur de force

+

Modèle 1220

Quantité @@ -30,7 +68,7 @@
-

Supprimer

+

Supprimer

diff --git a/public/_modules/selected-product/style.styl b/public/_modules/selected-product/style.styl index 43cd35a..b7bd1e0 100644 --- 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 + -- 2.39.5