Commit 7bfa9873ff62e6c5277297888cb0584bbd53b990

Authored by =
1 parent be933bc66b
Exists in master

Cambio estilo

src/app/sidebar/sidebar.component.html
1   -<div class="col-2 col-md-2 offset-10 w-100 h-100 bg-dark text-white">
2   - <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">
3 2  
4   - <h4 class="border-bottom border-white"> Mi compra </h4>
  3 + <h4 class="border-bottom border-white"> Mi compra </h4>
5 4  
6   - <div class="card mt-2 bg-primary">
7   - <img src="../../assets/descarga.jpg" class="card-img-top" alt="...">
8   - <div class="card-body row m-0 p-0 px-1 py-1 shadow rounded">
9   - <div class="col-8 p-0 text-left my-auto">
10   - <p class="m-0 card-description">Galleta oreo x 199 gs Chocolate</p>
11   - <p class="m-0 card-description"><small>COD: 1234567</small></p>
12   - </div>
13   - <div class="col-4 p-1 text-center my-auto">
14   - {{90 | currency}}
15   - </div>
  5 + <div class="card mt-2 bg-primary">
  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">
  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>
  10 + <p class="m-0 card-description"><small>COD: 1234567</small></p>
  11 + </div>
  12 + <div class="col-4 p-1 text-center my-auto">
  13 + {{90 | currency}}
16 14 </div>
17   - <div class="row m-0 p-0">
18   - <div class="col p-1 pb-1 mt-2">
19   - <button type="button" class="btn btn-light btn-sm float-left my-auto">X</button>
20   - <button type="button" class="btn btn-light btn-sm my-auto">X</button>
21   - <div class="btn-group-sm btn-group float-right my-auto" role="group" aria-label="Basic example">
22   - <button type="button" class="btn btn-light btn-sm mb-2">+</button>
23   - <label for="" class="border border.white px-1">12</label>
24   - <button type="button" class="btn btn-light btn-sm mb-2">-</button>
25   - </div>
  15 + </div>
  16 + <div class="row m-0 p-0">
  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>
  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">
  21 + <button type="button" class="btn btn-light btn-sm mb-2">+</button>
  22 + <label for="" class="border border.white px-1">12</label>
  23 + <button type="button" class="btn btn-light btn-sm mb-2">-</button>
26 24 </div>
27 25 </div>
28 26 </div>
  27 + </div>
29 28  
30   - <div class="card mt-auto" style="background: linear-gradient(0deg, rgba(40,112,175,1),rgb(252, 252, 252))">
31   - <div class="card-body row">
32   - <div class="col">
33   - <h4 class="border-bottom border-secondary text-secondary">(1) item</h4>
34   - <h3 class="text-secondary">Total</h3>
35   - <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3>
36   - </div>
37   - <div class="col p-0">
38   - <button type="button" class="btn btn-light shadow"><strong>Finalizar y pagar</strong></button>
39   - </div>
40   - <div class="col">
41   - <button type="button" class="btn btn-light shadow btn-sm">Cancelar</button>
42   - </div>
  29 + <div class="card mt-auto blue-gradient">
  30 + <div class="card-body row">
  31 + <div class="col">
  32 + <h4 class="border-bottom border-secondary text-secondary">(1) item</h4>
  33 + <h3 class="text-secondary">Total</h3>
  34 + <h3 class="text-dark"><strong>{{5000 | currency}}</strong></h3>
  35 + </div>
  36 + <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 btn-sm">Cancelar</button>
43 39 </div>
44 40 </div>
45 41 </div>
46   -</div>
47 42 \ No newline at end of file
  43 + </div>
48 44 \ No newline at end of file
... ... @@ -9,3 +9,6 @@ body {
9 9 filter: blur(8px);
10 10 -webkit-filter: blur(8px);
11 11 }
  12 +.blue-gradient{
  13 + background: linear-gradient(0deg, rgba(40,112,175,1),rgb(252, 252, 252));
  14 +}