--- /dev/null
+<!doctype html>
+<html lang="en">
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport"
+ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+ <meta http-equiv="X-UA-Compatible" content="ie=edge">
+ <link rel="stylesheet" href="style.css">
+ <link rel="stylesheet" href="../../css/app.css">
+ <link href="https://fonts.googleapis.com/css?family=Barlow:500,600|Muli&display=swap" rel="stylesheet">
+ <title>pmi</title>
+</head>
+<body>
+
+<div id="news" class=" mt-5 flex ">
+
+ <div class="selected-wrapper p-12 flex-col">
+ <div class="selected-product flex">
+ <div class="img">
+ <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="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">Supprimer</p>
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
+</body>
+</html>
\ No newline at end of file
--- /dev/null
+$h3 = 24px
+$h2 = 36px
+$barlow = 'Barlow', sans-serif
+$muli = 'Muli', sans-serif
+$dark = #6B7287
+$lightgrey = #F7F8FC
+$darkblue = #152F4E
+$lightblue = #0EAADA
+$verylightgrey =#E7E9F3
+
+
+*
+ padding: 0
+ box-sizing: border-box !important
+ margin: 0
+ font-family: $muli
+
+.selected-wrapper
+ background $lightgrey
+
+.number
+ background: white
+ padding 12px 8px
+
+input[type="number"] {
+ -webkit-appearance: textfield;
+ -moz-appearance: textfield;
+ appearance: textfield;
+}
+
+input[type=number]::-webkit-inner-spin-button,
+input[type=number]::-webkit-outer-spin-button {
+ -webkit-appearance: none;
+}
+
+.number-input {
+ display: inline-flex;
+}
+
+.number-input,
+.number-input * {
+ box-sizing: border-box;
+}
+
+.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;
+ cursor: pointer;
+ margin: 0;
+ position: relative;
+}
+
+.number-input button:before,
+.number-input button:after {
+ display: inline-block;
+ position: absolute;
+ content: '';
+ width: 8px;
+ height: 2px;
+ background-color: $dark;
+ transform: translate(-50%, -50%);
+}
+.number-input button.plus:after {
+ transform: translate(-50%, -50%) rotate(90deg);
+}
+
+.number-input input[type=number] {
+ font-family: sans-serif;
+ max-width: 5rem;
+ padding: .5rem;
+ font-size: 2rem;
+ height: 3rem;
+ font-weight: bold;
+ text-align: center;
+}
\ No newline at end of file
projects / pmi.git / commitdiff
