Commit 7d40163fa61e19084547a19e4ac362a33273832c
Exists in
master
and in
1 other branch
Merge branch 'master' of git.focasoftware.com:angular/autoservicio
Showing
2 changed files
Show diff stats
src/app/sidebar/sidebar.component.html
1 | <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center"> | 1 | <div class="d-flex align-items-center flex-column h-100 bg-dark pt-2 text-center"> |
2 | 2 | ||
3 | <h4 class="border-bottom border-white"> Mi compra </h4> | 3 | <h4 class="border-bottom border-white"> Mi compra </h4> |
4 | 4 | <div class="overflow-auto mb-2"> | |
5 | <div class="card mt-2 bg-primary"> | 5 | <div class="card my-2 bg-primary border-0"> |
6 | <img src="../../assets/descarga.jpg" class="card-img-top" alt="..."> | 6 | <img src="../../assets/descarga.jpg" class="card-img-top" alt="..."> |
7 | <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded"> | 7 | <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded"> |
8 | <div class="col-8 p-0 text-left my-auto"> | 8 | <div class="col-8 p-0 text-left my-auto"> |
9 | <p class="m-0 card-description">Galleta oreo x 199 gs Chocolate</p> | 9 | <p class="m-0 card-description">Galleta oreo x 199 gs Chocolate</p> |
10 | <p class="m-0 card-description"><small>COD: 1234567</small></p> | 10 | <p class="m-0 card-description"><small>COD: 1234567</small></p> |
11 | </div> | 11 | </div> |
12 | <div class="col-4 p-1 text-center my-auto"> | 12 | <div class="col-4 p-1 text-center my-auto"> |
13 | {{90 | currency}} | 13 | {{90 | currency}} |
14 | </div> | ||
14 | </div> | 15 | </div> |
15 | </div> | 16 | <div class="row m-0 p-0"> |
16 | <div class="row m-0 p-0"> | 17 | <div class="col p-1 pb-1 mt-2"> |
17 | <div class="col p-1 pb-1 mt-2"> | 18 | <button type="button" class="btn btn-light btn-sm float-left my-auto">X</button> |
18 | <button type="button" class="btn btn-light btn-sm float-left my-auto">X</button> | 19 | <button type="button" class="btn btn-light btn-sm my-auto">X</button> |
19 | <button type="button" class="btn btn-light btn-sm my-auto">X</button> | 20 | <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example"> |
20 | <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example"> | 21 | <button type="button" class="btn btn-light btn-sm mb-2">+</button> |
21 | <button type="button" class="btn btn-light btn-sm mb-2">+</button> | 22 | <label for="" class="border border.white px-1">12</label> |
22 | <label for="" class="border border.white px-1">12</label> | 23 | <button type="button" class="btn btn-light btn-sm mb-2">-</button> |
23 | <button type="button" class="btn btn-light btn-sm mb-2">-</button> | 24 | </div> |
24 | </div> | 25 | </div> |
25 | </div> | 26 | </div> |
26 | </div> | 27 | </div> |
27 | </div> | 28 | </div> |
28 | 29 | ||
29 | <div class="card mt-auto blue-gradient"> | 30 | <div class="card mt-auto blue-gradient border-0"> |
30 | <div class="card-body row"> | 31 | <div class="card-body row"> |
31 | <div class="col"> | 32 | <div class="col"> |
32 | <h4 class="border-bottom border-secondary text-secondary">(1) item</h4> | 33 | <h4 class="border-bottom border-secondary text-secondary">(1) item</h4> |
33 | <h3 class="text-secondary">Total</h3> | 34 | <h3 class="text-secondary">Total</h3> |
34 | <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3> | 35 | <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3> |
35 | </div> | 36 | </div> |
36 | <div class="col 12 p-0"> | 37 | <div class="col 12 p-0"> |
37 | <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button> | 38 | <button type="button" class="btn btn-light shadow mb-2"><strong>Finalizar y pagar</strong></button> |
38 | <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button> | 39 | <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button> |
39 | </div> | 40 | </div> |
40 | </div> | 41 | </div> |
41 | </div> |
src/styles.scss
1 | .blur { | 1 | .blur { |
2 | filter: blur(10px); | 2 | filter: blur(10px); |
3 | -webkit-filter: blur(10px); | 3 | -webkit-filter: blur(10px); |
4 | } | 4 | } |
5 | 5 | ||
6 | .disable-user-select { | 6 | .disable-user-select { |
7 | -webkit-user-select: none; | 7 | -webkit-user-select: none; |
8 | -moz-user-select: none; | 8 | -moz-user-select: none; |
9 | -ms-user-select: none; | 9 | -ms-user-select: none; |
10 | user-select: none; | 10 | user-select: none; |
11 | } | 11 | } |
12 | .blue-gradient{ | 12 | .blue-gradient{ |
13 | background: linear-gradient(0deg, rgba(40,112,175,1),rgb(252, 252, 252)); | 13 | background: linear-gradient(0deg, rgb(20,56,68),rgb(252, 252, 252)); |
14 | } | 14 | } |
15 | 15 |