Commit 99da490b5bdbd94758edddd8364ce3bfa84427de

Authored by Luis Suarez
1 parent 001d1450d6
Exists in develop

ajustar botones forma de pago

src/app/modules/forma-pago/forma-pago.component.html
1 <div class="h-92 bg-white fade-in-left"> 1 <div class="h-92 bg-white fade-in-left">
2 <div class="row mx-0 h-20"> 2 <div class="row mx-0 h-20">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img 4 <img
5 draggable="false" 5 draggable="false"
6 ondragstart="return false;" 6 ondragstart="return false;"
7 (contextmenu)="false" 7 (contextmenu)="false"
8 class="d-block mx-auto h-100" 8 class="d-block mx-auto h-100"
9 src="assets/img/logo-spot.svg"> 9 src="assets/img/logo-spot.svg">
10 </div> 10 </div>
11 </div> 11 </div>
12 <div class="h-100"> 12 <div class="h-100">
13 <div class="h-10"></div> 13 <div class="h-10"></div>
14 <div class="row mt-5 mx-3 h-auto"> 14 <div class="row mt-5 mx-3 h-auto">
15 <div class="col-12 px-0 py-2 align-self-center"> 15 <div class="col-12 px-0 py-2 align-self-center">
16 <div class="px-3 text-center"> 16 <div class="px-3 text-center">
17 <p class="h4 text-truncate">SELECCIONA UNA FORMA DE PAGO</p> 17 <p class="h4 text-truncate">SELECCIONA UNA FORMA DE PAGO</p>
18 </div> 18 </div>
19 </div> 19 </div>
20 </div> 20 </div>
21 <!-- OPCION PAGO ELECTRONICO --> 21 <!-- OPCION PAGO ELECTRONICO -->
22 <div class="row mt-5 h-auto justify-content-center mx-0"> 22 <div class="row mt-5 h-auto justify-content-center mx-0">
23 <div class="col-5 px-0 h-auto align-self-start reduce-card-1"> 23 <div class="col-5 px-0 h-auto align-self-start reduce-card-1">
24 <div class="row justify-content-between"> 24 <div class="row justify-content-between">
25 <div class="col-12"> 25 <div class="col-12">
26 <div 26 <div
27 class="btn-effect col-auto align-self-center px-0 bg-white" 27 class="btn-effect col-auto align-self-center px-0 bg-white"
28 (click)="medioPago(9)"> 28 (click)="medioPago(9)">
29 <div class="row mx-0 bg-primary badge-pill heigth-80"> 29 <div class="row mx-0 bg-primary badge-pill heigth-80">
30 <div class="col-2 p-0"> 30 <div class="col-2 p-0">
31 <img 31 <img
32 draggable="false" 32 draggable="false"
33 ondragstart="return false;" 33 ondragstart="return false;"
34 (contextmenu)="false" 34 (contextmenu)="false"
35 class="pt-3 pl-2 icon-50" 35 class="pt-3 pl-2 icon-50"
36 src="assets/img/icono-pago-electronico.svg"> 36 src="assets/img/icono-pago-electronico.svg">
37 </div> 37 </div>
38 <div class="col-8 align-self-center text-center text-white h4">Pago electrónico</div> 38 <div class="col-8 align-self-center text-center text-white h4">Pago electrónico</div>
39 <div class="col-1 align-self-center p-0"> 39 <div class="col-1 align-self-center p-0">
40 <img 40 <img
41 draggable="false" 41 draggable="false"
42 ondragstart="return false;" 42 ondragstart="return false;"
43 (contextmenu)="false" 43 (contextmenu)="false"
44 class="p-1 icon-50" 44 class="p-1 icon-50"
45 src="assets/img/ir.svg"> 45 src="assets/img/ir.svg">
46 </div> 46 </div>
47 </div> 47 </div>
48 </div> 48 </div>
49 </div> 49 </div>
50 </div> 50 </div>
51 </div> 51 </div>
52 </div> 52 </div>
53 <!-- OPCION PAGO CON TARJETA --> 53 <!-- OPCION PAGO CON TARJETA -->
54 <div class="row mt-5 h-auto justify-content-center mx-0"> 54 <div class="row mt-5 h-auto justify-content-center mx-0">
55 <div class="col-5 px-0 h-auto align-self-start reduce-card-1"> 55 <div class="col-5 px-0 h-auto align-self-start reduce-card-2">
56 <div class="row justify-content-between"> 56 <div class="row justify-content-between">
57 <div class="col-12"> 57 <div class="col-12">
58 <div 58 <div
59 class="btn-effect col-auto align-self-center px-0 bg-white" 59 class="btn-effect col-auto align-self-center px-0 bg-white"
60 (click)="medioPago(4)"> 60 (click)="medioPago(4)">
61 <div class="row mx-0 bg-primary badge-pill heigth-80"> 61 <div class="row mx-0 bg-primary badge-pill heigth-80">
62 <div class="col-2 p-0"> 62 <div class="col-2 p-0">
63 <img 63 <img
64 draggable="false" 64 draggable="false"
65 ondragstart="return false;" 65 ondragstart="return false;"
66 (contextmenu)="false" 66 (contextmenu)="false"
67 class="pt-4 pl-2 icon-50" 67 class="pt-4 pl-2 icon-50"
68 src="assets/img/icono-pago-tarjeta.svg"> 68 src="assets/img/icono-pago-tarjeta.svg">
69 </div> 69 </div>
70 <div class="col-8 align-self-center text-center text-white h4">Pago con tarjeta</div> 70 <div class="col-8 align-self-center text-center text-white h4">Pago con tarjeta</div>
71 <div class="col-2 align-self-center p-0"> 71 <div class="col-2 align-self-center p-0">
72 <img 72 <img
73 draggable="false" 73 draggable="false"
74 ondragstart="return false;" 74 ondragstart="return false;"
75 (contextmenu)="false" 75 (contextmenu)="false"
76 class="p-1 icon-50" 76 class="p-1 icon-50"
77 src="assets/img/ir.svg"> 77 src="assets/img/ir.svg">
78 </div> 78 </div>
79 </div> 79 </div>
80 </div> 80 </div>
81 </div> 81 </div>
82 </div> 82 </div>
83 </div> 83 </div>
84 </div> 84 </div>
85 </div> 85 </div>
86 </div> 86 </div>
87 87
src/app/modules/forma-pago/forma-pago.component.scss
1 .reduce-card-1.media-pantalla { 1 .reduce-card-1.media-pantalla {
2 position: absolute; 2 position: absolute;
3 bottom: 150px; 3 bottom: 150px;
4 -webkit-box-flex: 0; 4 -webkit-box-flex: 0;
5 flex: 0 0 41.6666666667%; 5 flex: 0 0 35%;
6 max-width: 41.6666666667%; 6 max-width: 35%;
7 left: 20%; 7 left: 10%;
8 margin-left: 0 !important; 8 margin-left: 0 !important;
9 } 9 }
10 10
11 .reduce-card-2.media-pantalla { 11 .reduce-card-2.media-pantalla {
12 position: absolute; 12 position: absolute;
13 bottom: 150px; 13 bottom: 150px;
14 -webkit-box-flex: 0; 14 -webkit-box-flex: 0;
15 flex: 0 0 41.6666666667%; 15 flex: 0 0 35%;
16 max-width: 41.6666666667%; 16 max-width: 35%;
17 right: 20%; 17 right: 10%;
18 margin-right: 0 !important; 18 margin-right: 0 !important;
19 } 19 }
20 20