Marcelo Puebla / autoservicio-axion

Download as
Browse Code ยป

Commit af0069dd57c269a8878fdba83723663ab9872254

Authored by Marcelo Puebla
1 parent 22a4aaade6
Exists in develop

Arreglo en pantalla de formas de pago y en footer

Showing 7 changed files with 49 additions and 7 deletions   Show diff stats
src/app/modules/admin/admin.component.html
Diff comments   View file @ af0069d
1 1 <router-outlet></router-outlet>
2   -<div class="h-8 bg-dark"></div>
3 2 \ No newline at end of file
  3 +<div class="h-8">
  4 + <app-footer></app-footer>
  5 +</div>
src/app/modules/footer/footer.component.html
Diff comments   View file @ af0069d
1   -<p>footer works!</p>
  1 +<div class="row mx-0 h-100 justify-content-around bg-white">
  2 + <div class="col-auto align-self-center px-0 bg-white">
  3 + <div class="btn-effect row mx-0 bg-light rounded-left">
  4 + <div class="col-auto align-self-center text-primary">ESTAMOS PARA AYUDARTE</div>
  5 + <div class="col-auto p-0 bg-primary rounded-right">
  6 + <img class="p-2 img-button-accesibilidad" src="assets/img/iconos-accesibilidad.svg">
  7 + </div>
  8 + </div>
  9 + </div>
  10 + <div class="btn-effect col-auto align-self-center px-0 bg-white">
  11 + <div class="row mx-0 bg-light rounded-left">
  12 + <div class="col-auto align-self-center text-primary">VOLVER</div>
  13 + <div class="col-auto p-0 bg-primary rounded-right">
  14 + <img class="p-2 img-button-volver" src="assets/img/icono-volver.svg">
  15 + </div>
  16 + </div>
  17 + </div>
  18 +</div>
src/app/modules/footer/footer.component.scss
Diff comments   View file @ af0069d
... ... @@ -0,0 +1,7 @@
  1 +.img-button-accesibilidad {
  2 + width: 60px;
  3 +}
  4 +
  5 +.img-button-volver {
  6 + width: 40px;
  7 +}
src/app/modules/formas-pago/formas-pago.component.html
Diff comments   View file @ af0069d
... ... @@ -7,18 +7,18 @@
7 7 <div class="h-85">
8 8 <div class="row h-50 mx-0 justify-content-center text-center">
9 9 <div class="col-7 pt-5 pb-3 h-auto align-self-center border border-secondary rounded">
10   - <img class="img-in-top px-4 bg-white" src="assets/img/logo-spot.svg">
  10 + <img class="img-in-top px-4 bg-white" src="assets/img/icono-tarjetas.svg">
11 11 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
12 12 <p class="h2 mb-3 text-secondary">
13 13 tarjetas y
14 14 <img class="w-15" src="assets/img/icono-mercado-pago.svg">
15 15 </p>
16   - <button class="btn btn-sm btn-secondary badge-pill">CONTINUAR</button>
  16 + <div class="d-inline-block py-1 btn-effect bg-secondary badge-pill text-white">CONTINUAR</div>
17 17 </div>
18 18 </div>
19 19 <div class="row h-50 mx-0 justify-content-center text-center">
20 20 <div class="col-7 p-5 h-auto align-self-start border border-secondary rounded">
21   - <img class="img-in-top px-4 bg-white" src="assets/img/logo-spot.svg">
  21 + <img class="img-in-top px-4 bg-white" src="assets/img/icono-efectivo.svg">
22 22 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
23 23 <p class="h2 m-0 text-primary">te esperamos en la caja</p>
24 24 </div>
src/app/modules/formas-pago/formas-pago.component.scss
Diff comments   View file @ af0069d
... ... @@ -5,5 +5,4 @@
5 5 height: 70px;
6 6 -webkit-transform: translateX(-50%);
7 7 transform: translateX(-50%);
8   - border-radius: 50%;
9 8 }
src/scss/styles-bootstrap.scss
Diff comments   View file @ af0069d
... ... @@ -5,11 +5,13 @@
5 5 $primary: #aa006b;
6 6 $secondary: #00acd8;
7 7 $info: #f4b223;
  8 +$light: #e6e7e9;
8 9  
9 10 $theme-colors: (
10 11 primary: $primary,
11 12 secondary: $secondary,
12   - info: $info
  13 + info: $info,
  14 + light: $light
13 15 );
14 16  
15 17 @import "node_modules/bootstrap/scss/bootstrap";
... ... @@ -21,6 +21,17 @@ body {
21 21 user-select: none;
22 22 }
23 23  
  24 +.btn-effect {
  25 + transition: all 0.3s;
  26 + &:hover {
  27 + cursor: pointer;
  28 + opacity: 0.8;
  29 + }
  30 + &:active {
  31 + transform: scale(1.02);
  32 + }
  33 +}
  34 +
24 35 .cursor-pointer {
25 36 cursor: pointer;
26 37 }
... ... @@ -32,3 +43,7 @@ p {
32 43 .rounded {
33 44 border-radius: 1.5rem !important;
34 45 }
  46 +
  47 +.rounded-sm {
  48 + border-radius: 0.5rem !important;
  49 +}