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 <router-outlet></router-outlet> 1 <router-outlet></router-outlet>
2 <div class="h-8 bg-dark"></div>
2 <div class="h-8">
3 <app-footer></app-footer>
4 </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>
2 19
src/app/modules/footer/footer.component.scss
Diff comments   View file @ af0069d
1 .img-button-accesibilidad {
2 width: 60px;
3 }
4
5 .img-button-volver {
6 width: 40px;
7 }
8
src/app/modules/formas-pago/formas-pago.component.html
Diff comments   View file @ af0069d
1 <div class="h-92 bg-white"> 1 <div class="h-92 bg-white">
2 <div class="row mx-0 h-15"> 2 <div class="row mx-0 h-15">
3 <div class="col-12 px-0 h-80 my-auto"> 3 <div class="col-12 px-0 h-80 my-auto">
4 <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg"> 4 <img class="d-block mx-auto h-100" src="assets/img/logo-spot.svg">
5 </div> 5 </div>
6 </div> 6 </div>
7 <div class="h-85"> 7 <div class="h-85">
8 <div class="row h-50 mx-0 justify-content-center text-center"> 8 <div class="row h-50 mx-0 justify-content-center text-center">
9 <div class="col-7 pt-5 pb-3 h-auto align-self-center border border-secondary rounded"> 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 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p> 11 <p class="h6 m-0">ESTA TERMINAL OPERA CON</p>
12 <p class="h2 mb-3 text-secondary"> 12 <p class="h2 mb-3 text-secondary">
13 tarjetas y 13 tarjetas y
14 <img class="w-15" src="assets/img/icono-mercado-pago.svg"> 14 <img class="w-15" src="assets/img/icono-mercado-pago.svg">
15 </p> 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 </div> 17 </div>
18 </div> 18 </div>
19 <div class="row h-50 mx-0 justify-content-center text-center"> 19 <div class="row h-50 mx-0 justify-content-center text-center">
20 <div class="col-7 p-5 h-auto align-self-start border border-secondary rounded"> 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 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p> 22 <p class="h6 m-0">SI PREFERIS PAGAR EN EFECTIVO</p>
23 <p class="h2 m-0 text-primary">te esperamos en la caja</p> 23 <p class="h2 m-0 text-primary">te esperamos en la caja</p>
24 </div> 24 </div>
25 </div> 25 </div>
26 </div> 26 </div>
27 </div> 27 </div>
28 28
src/app/modules/formas-pago/formas-pago.component.scss
Diff comments   View file @ af0069d
1 .img-in-top { 1 .img-in-top {
2 position: absolute; 2 position: absolute;
3 top: -35px; 3 top: -35px;
4 left: 50%; 4 left: 50%;
5 height: 70px; 5 height: 70px;
6 -webkit-transform: translateX(-50%); 6 -webkit-transform: translateX(-50%);
7 transform: translateX(-50%); 7 transform: translateX(-50%);
8 border-radius: 50%;
9 } 8 }
10 9
src/scss/styles-bootstrap.scss
Diff comments   View file @ af0069d
1 @import "node_modules/bootstrap/scss/functions"; 1 @import "node_modules/bootstrap/scss/functions";
2 @import "node_modules/bootstrap/scss/variables"; 2 @import "node_modules/bootstrap/scss/variables";
3 @import "node_modules/bootstrap/scss/mixins"; 3 @import "node_modules/bootstrap/scss/mixins";
4 4
5 $primary: #aa006b; 5 $primary: #aa006b;
6 $secondary: #00acd8; 6 $secondary: #00acd8;
7 $info: #f4b223; 7 $info: #f4b223;
8 $light: #e6e7e9;
8 9
9 $theme-colors: ( 10 $theme-colors: (
10 primary: $primary, 11 primary: $primary,
11 secondary: $secondary, 12 secondary: $secondary,
12 info: $info 13 info: $info,
14 light: $light
13 ); 15 );
14 16
15 @import "node_modules/bootstrap/scss/bootstrap"; 17 @import "node_modules/bootstrap/scss/bootstrap";
16 18
1 @import "scss/styles-bootstrap.scss"; 1 @import "scss/styles-bootstrap.scss";
2 @import "scss/height-width.scss"; 2 @import "scss/height-width.scss";
3 @import "scss/animations.scss"; 3 @import "scss/animations.scss";
4 @import "node_modules/bootstrap/scss/_variables.scss"; 4 @import "node_modules/bootstrap/scss/_variables.scss";
5 5
6 @font-face { 6 @font-face {
7 font-family: "Gotham"; 7 font-family: "Gotham";
8 font-style: normal; 8 font-style: normal;
9 font-weight: normal; 9 font-weight: normal;
10 src: url("assets/fonts/gotham-medium.woff") format("woff"); 10 src: url("assets/fonts/gotham-medium.woff") format("woff");
11 } 11 }
12 12
13 html, 13 html,
14 body { 14 body {
15 min-height: 100vh; 15 min-height: 100vh;
16 max-height: 100vh; 16 max-height: 100vh;
17 height: 100vh; 17 height: 100vh;
18 background-color: #fcf2e3; 18 background-color: #fcf2e3;
19 font-family: "Gotham"; 19 font-family: "Gotham";
20 overflow: hidden; 20 overflow: hidden;
21 user-select: none; 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 .cursor-pointer { 35 .cursor-pointer {
25 cursor: pointer; 36 cursor: pointer;
26 } 37 }
27 38
28 p { 39 p {
29 margin: 0 !important; 40 margin: 0 !important;
30 } 41 }
31 42
32 .rounded { 43 .rounded {
33 border-radius: 1.5rem !important; 44 border-radius: 1.5rem !important;
34 } 45 }
46
47 .rounded-sm {
48 border-radius: 0.5rem !important;
49 }
35 50