Commit 4f50bef3c614f8dd57391b16c66d4945fb1967bb

Authored by Benjamin Rodriguez
1 parent 2de8f4b465
Exists in develop

agrego iconos nuevos y dejo pantalla forma-pago como la de opcion-pedido

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-15"> 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-85"> 12 <div class="h-100">
13 <div class="row mt-5 mx-3 h-auto border border-primary rounded-sm"> 13 <div class="h-10"></div>
14 <div class="row mt-5 mx-3 h-auto">
14 <div class="col-12 px-0 py-2 align-self-center"> 15 <div class="col-12 px-0 py-2 align-self-center">
15 <div class="px-3 text-center"> 16 <div class="px-3 text-center">
16 <p class="h6 text-truncate">SELECCIONA UNA FORMA DE PAGO</p> 17 <p class="h4 text-truncate">SELECCIONA UNA FORMA DE PAGO</p>
17 </div> 18 </div>
18 </div> 19 </div>
19 </div> 20 </div>
20 <!-- OPCION PAGO ELECTRONICO --> 21 <!-- OPCION PAGO ELECTRONICO -->
21 <div class="row mt-5 h-auto justify-content-center mx-0 reduce-card-1"> 22 <div class="row mt-5 h-auto justify-content-center mx-0">
22 <div class="col-auto px-0 h-auto align-self-start"> 23 <div class="col-5 px-0 h-auto align-self-start reduce-card-1">
23 <div 24 <div class="row justify-content-between">
24 class="btn-effect col-auto align-self-center px-0 bg-white" 25 <div class="col-12">
25 (click)="medioPago(9)"> 26 <div
26 <div class="row mx-0 bg-primary badge-pill"> 27 class="btn-effect col-auto align-self-center px-0 bg-white"
27 <div class="col-auto p-0"> 28 (click)="medioPago(9)">
28 <img 29 <div class="row mx-0 bg-primary badge-pill heigth-80">
29 draggable="false" 30 <div class="col-2 p-0">
30 ondragstart="return false;" 31 <img
31 (contextmenu)="false" 32 draggable="false"
32 class="p-1 icon-50" 33 ondragstart="return false;"
33 src="assets/img/icono-plato.svg"> 34 (contextmenu)="false"
34 </div> 35 class="pt-3 pl-2 icon-50"
35 <div class="col-auto align-self-center text-white">Pago electrónico</div> 36 src="assets/img/icono-pago-electronico.svg">
36 <div class="col-auto align-self-center p-0"> 37 </div>
37 <img 38 <div class="col-8 align-self-center text-center text-white h4">Pago electrónico</div>
38 draggable="false" 39 <div class="col-1 align-self-center p-0">
39 ondragstart="return false;" 40 <img
40 (contextmenu)="false" 41 draggable="false"
41 class="p-1 icon-30" 42 ondragstart="return false;"
42 src="assets/img/ir.svg"> 43 (contextmenu)="false"
44 class="p-1 icon-50"
45 src="assets/img/ir.svg">
46 </div>
47 </div>
43 </div> 48 </div>
44 </div> 49 </div>
45 </div> 50 </div>
46 </div> 51 </div>
47 </div> 52 </div>
48 <!-- OPCION PAGO CON TARJETA --> 53 <!-- OPCION PAGO CON TARJETA -->
49 <div class="row mt-5 h-auto justify-content-center mx-0 reduce-card-2"> 54 <div class="row mt-5 h-auto justify-content-center mx-0">
50 <div class="col-auto px-0 h-auto align-self-start"> 55 <div class="col-5 px-0 h-auto align-self-start reduce-card-1">
51 <div 56 <div class="row justify-content-between">
52 class="btn-effect col-auto align-self-center px-0 bg-white" 57 <div class="col-12">
53 (click)="medioPago(4)"> 58 <div
54 <div class="row mx-0 bg-primary badge-pill"> 59 class="btn-effect col-auto align-self-center px-0 bg-white"
55 <div class="col-auto p-0"> 60 (click)="medioPago(4)">
56 <img 61 <div class="row mx-0 bg-primary badge-pill heigth-80">
57 draggable="false" 62 <div class="col-2 p-0">
58 ondragstart="return false;" 63 <img
59 (contextmenu)="false" 64 draggable="false"
60 class="p-1 icon-50" 65 ondragstart="return false;"
61 src="assets/img/icono-take-away.svg"> 66 (contextmenu)="false"
62 </div> 67 class="pt-4 pl-2 icon-50"
63 <div class="col-auto align-self-center text-white">Pago con tarjeta</div> 68 src="assets/img/icono-pago-tarjeta.svg">
64 <div class="col-auto align-self-center p-0"> 69 </div>
65 <img 70 <div class="col-8 align-self-center text-center text-white h4">Pago con tarjeta</div>
66 draggable="false" 71 <div class="col-2 align-self-center p-0">
67 ondragstart="return false;" 72 <img
68 (contextmenu)="false" 73 draggable="false"
69 class="p-1 icon-30" 74 ondragstart="return false;"
70 src="assets/img/ir.svg"> 75 (contextmenu)="false"
76 class="p-1 icon-50"
77 src="assets/img/ir.svg">
78 </div>
79 </div>
71 </div> 80 </div>
72 </div> 81 </div>
73 </div> 82 </div>
74 </div> 83 </div>
75 </div> 84 </div>
76 </div> 85 </div>
77 </div> 86 </div>
78 87
src/app/modules/opcion-pedido/opcion-pedido.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 41.6666666667%;
6 max-width: 41.6666666667%; 6 max-width: 41.6666666667%;
7 left: 10%; 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 41.6666666667%;
16 max-width: 41.6666666667%; 16 max-width: 41.6666666667%;
17 right: 10%; 17 right: 10%;
18 margin-right: 0 !important; 18 margin-right: 0 !important;
19 } 19 }
20
21 .heigth-80 {
22 height: 80px;
23 }
24 20
src/app/shared/footer/footer.component.html
1 <div class="row w-90 mx-auto h-100 justify-content-between bg-white"> 1 <div class="row w-90 mx-auto h-100 justify-content-between bg-white">
2 <div class="col-auto align-self-center px-0 bg-white"> 2 <div class="col-auto align-self-center px-0 bg-white">
3 <div class="btn-effect row mx-0 bg-light" (click)="reducirPantalla()"> 3 <div class="btn-effect row mx-0 bg-light" (click)="reducirPantalla()">
4 <div class="col-auto align-self-center text-primary">ADAPTAR PANTALLA</div> 4 <div class="col-auto align-self-center text-primary">ADAPTAR PANTALLA</div>
5 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 5 <div class="col-auto p-0 bg-primary d-none d-sm-block">
6 <img 6 <img
7 draggable="false" 7 draggable="false"
8 ondragstart="return false;" 8 ondragstart="return false;"
9 (contextmenu)="false" 9 (contextmenu)="false"
10 class="p-2 icon-60" 10 class="p-2 icon-60"
11 src="assets/img/iconos-accesibilidad.svg"> 11 src="assets/img/icono-silla-de-ruedas.svg">
12 </div> 12 </div>
13 </div> 13 </div>
14 </div> 14 </div>
15 <div 15 <div
16 class="btn-effect col-auto align-self-center px-0 bg-white" 16 class="btn-effect col-auto align-self-center px-0 bg-white"
17 (click)="goBack()"> 17 (click)="goBack()">
18 <div class="row mx-0 bg-light"> 18 <div class="row mx-0 bg-light">
19 <div class="col-auto align-self-center text-primary">VOLVER</div> 19 <div class="col-auto align-self-center text-primary">VOLVER</div>
20 <div class="col-auto p-0 bg-primary d-none d-sm-block"> 20 <div class="col-auto p-0 bg-primary d-none d-sm-block">
21 <img 21 <img
22 draggable="false" 22 draggable="false"
23 ondragstart="return false;" 23 ondragstart="return false;"
24 (contextmenu)="false" 24 (contextmenu)="false"
25 class="p-2 icon-40" 25 class="p-2 icon-40"
26 src="assets/img/icono-volver.svg"> 26 src="assets/img/icono-volver.svg">
27 </div> 27 </div>
28 </div> 28 </div>
29 </div> 29 </div>
30 </div> 30 </div>
31 31
src/assets/img/icono-pago-electronico.svg
File was created 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <!-- Creator: CorelDRAW X7 -->
4 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="29.7016mm" height="29.6264mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
5 viewBox="0 0 677 675"
6 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <defs>
8 <style type="text/css">
9 <![CDATA[
10 .fil0 {fill:#F4B223}
11 ]]>
12 </style>
13 </defs>
14 <g id="Capa_x0020_1">
15 <metadata id="CorelCorpID_0Corel-Layer"/>
16 <path class="fil0" d="M0 656c9,11 6,19 32,19 16,0 34,3 44,-7 11,-12 -7,-8 32,-19 12,-4 30,-10 41,-12 7,-4 27,-9 36,-11 12,-4 26,-7 38,-11 27,-9 36,-27 51,-45 27,-35 56,-73 83,-108 5,-5 7,-9 11,-14l32 -41c18,-23 35,-36 12,-61 -8,-7 -13,-19 -32,-16 -11,2 -20,14 -27,20 -2,1 -5,3 -7,5l-25 23c-4,4 -14,14 -19,16 -14,-6 -25,-32 -31,-51 -11,-34 -10,-31 -3,-66 3,-11 6,-22 8,-34 2,-7 11,-29 -5,-27 -8,1 -9,16 -12,29 -12,55 -20,53 -5,100 7,21 16,41 28,55 3,4 18,16 28,10 6,-4 14,-13 21,-19 5,-3 6,-6 11,-9l32 -29c4,-3 6,-9 14,-7 1,1 18,16 18,23 0,6 -38,52 -44,59l-71 92c-5,8 -12,16 -18,24 -24,31 -29,46 -64,57 -21,7 -42,13 -63,19 -21,6 -42,14 -63,19 0,-30 0,-61 0,-91 0,-19 -3,-71 4,-85l127 -254 30 -36c6,-8 13,-17 20,-25 4,-5 19,-21 16,-28 -8,-11 -14,-2 -19,4l-59 75c-7,9 -115,227 -122,241 -9,-9 -10,-12 -28,-12 -11,0 -29,-2 -38,3 -19,9 -13,42 -13,66 0,24 1,146 -1,159zm520 -97c15,-25 6,-34 0,-49 33,1 73,0 107,0 24,1 15,-13 11,-15 -4,-3 -222,-1 -263,-1 -13,0 -28,-4 -25,11 3,9 34,5 49,5 18,0 36,0 54,0 -11,26 -11,23 0,50 -16,0 -115,1 -124,-2 -7,-3 -10,-10 -17,-8 -10,2 -9,17 15,24 12,4 269,2 304,2 15,0 23,-3 33,-12 12,-12 12,-26 12,-46l0 -409c0,-48 12,-109 -45,-109l-255 0c-36,0 -64,-4 -76,26 -6,15 -3,81 -3,101 0,68 0,136 0,204 0,8 0,18 0,26 0,8 6,15 14,8 5,-4 3,-38 3,-48 0,-34 0,-68 0,-102l0 -153c0,-50 10,-45 57,-45l255 0c42,0 33,25 33,68l0 410c0,11 2,42 -2,49 -5,14 -17,16 -35,16 -17,0 -34,0 -51,0 -15,0 -37,1 -51,-1zm-503 -101l0 179c0,23 -3,21 32,21 21,0 18,-2 18,-22l0 -178c0,-17 -8,-13 -24,-13 -17,0 -26,-4 -26,13zm494 -280l0 54c0,19 5,15 42,15 49,0 41,12 41,-69 0,-17 -8,-13 -41,-13 -34,0 -42,-5 -42,13zm-51 67c3,-11 2,-27 2,-40 0,-47 7,-40 -43,-40 -47,0 -40,-7 -40,42 0,8 -2,34 3,38 5,4 72,3 78,0zm-116 -163l287 1c16,0 16,-17 0,-17l-287 0c-8,0 -14,0 -14,8 0,8 6,8 14,8zm183 148l50 1 0 -50 -49 0 -1 49zm-131 0l49 0 0 -49 -49 0 0 49zm2 83l47 0c0,15 0,31 0,46 0,7 -1,16 5,19 9,4 12,-4 12,-12 0,-14 0,-27 0,-41 0,-34 10,-29 -71,-29 -7,0 -13,4 -11,12 2,7 10,5 18,5zm80 -33c0,23 -3,36 15,31 3,-8 2,-18 2,-29 0,-16 0,-19 -16,-19l-75 0c-9,0 -26,-3 -24,10 1,10 19,7 28,7 21,0 51,-2 70,0zm33 82l-16 0c0,-19 3,-39 -15,-31 -3,9 -2,17 -2,27 0,10 -2,19 9,21 6,1 20,0 27,0 13,0 14,-4 14,-16l0 -51c0,-8 0,-15 -9,-16 -9,0 -8,9 -8,17 0,17 0,33 0,49zm-29 149c-12,2 -22,14 -20,29 2,12 15,22 30,19 31,-7 21,-54 -10,-48zm96 -168c21,10 16,-17 16,-41 0,-10 4,-37 -8,-38 -14,-2 -9,24 -9,34 0,13 -1,35 1,45zm-98 -98c13,5 15,-1 15,-14l0 -51c0,-8 -1,-18 -12,-15 -7,2 -5,15 -5,24 0,15 -2,44 2,56zm-33 -210c-6,20 13,15 30,15 9,0 43,1 48,-3 5,-5 2,-13 -5,-14 -5,-1 -19,0 -25,0 -10,0 -42,-1 -48,2zm66 244c10,2 21,0 31,1 0,11 -1,22 2,31 13,5 15,-1 15,-14 -1,-38 5,-34 -34,-34 -13,0 -19,3 -14,16zm48 83c0,-7 0,-18 0,-24 -1,-7 -8,-12 -14,-7 -4,4 -4,41 -1,45 4,4 41,4 45,1 6,-6 1,-14 -5,-15 -5,-1 -19,0 -25,0z"/>
17 </g>
18 </svg>
19
src/assets/img/icono-pago-tarjeta.svg
File was created 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <!-- Creator: CorelDRAW X7 -->
4 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="40.8317mm" height="28.4598mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
5 viewBox="0 0 6182 4309"
6 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <defs>
8 <style type="text/css">
9 <![CDATA[
10 .fil0 {fill:#F4B223}
11 ]]>
12 </style>
13 </defs>
14 <g id="Capa_x0020_1">
15 <metadata id="CorelCorpID_0Corel-Layer"/>
16 <path class="fil0" d="M255 1396l1430 0 0 -1141c0,-141 115,-255 255,-255l3987 0c141,0 255,114 255,255 0,801 0,1602 0,2403 0,140 -115,254 -255,254l-1431 0 0 1141c0,141 -114,256 -254,256l-3987 0c-140,0 -255,-115 -255,-256 0,-801 0,-1601 0,-2402 0,-140 114,-255 255,-255zm1551 0l2436 0c140,0 254,115 254,255l0 1141 1431 0c74,0 135,-61 135,-134l0 -1737 -4256 0 0 475zm4256 -595l0 -209 -4256 0 0 209 4256 0zm0 -329l0 -217c0,-74 -61,-135 -135,-135l-3987 0c-74,0 -134,61 -134,135l0 217 4256 0zm-5942 1395l4256 0 0 -216c0,-74 -61,-134 -134,-134l-3987 0c-74,0 -135,60 -135,134l0 216zm4256 451l-4256 0 0 1735c0,74 61,135 135,135l3987 0c73,0 134,-61 134,-135l0 -1735zm0 -330l-4256 0 0 209 4256 0 0 -209z"/>
17 <path class="fil0" d="M595 2984l919 0 0 361 -982 0 0 -361 63 0zm794 125l-731 0 0 111 731 0 0 -111z"/>
18 <polygon class="fil0" points="514,3843 2095,3843 2095,3963 514,3963 "/>
19 </g>
20 </svg>
21
src/assets/img/icono-silla-de-ruedas.svg
File was created 1 <?xml version="1.0" encoding="UTF-8"?>
2 <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
3 <!-- Creator: CorelDRAW X7 -->
4 <svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="19.7986mm" height="18.7181mm" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
5 viewBox="0 0 176 166"
6 xmlns:xlink="http://www.w3.org/1999/xlink">
7 <defs>
8 <style type="text/css">
9 <![CDATA[
10 .fil0 {fill:#CFD1D2}
11 ]]>
12 </style>
13 </defs>
14 <g id="Capa_x0020_1">
15 <metadata id="CorelCorpID_0Corel-Layer"/>
16 <path class="fil0" d="M119 148c0,4 3,8 7,8 5,0 8,-4 8,-8 0,-4 -3,-8 -8,-8 -4,0 -7,4 -7,8l0 0zm10 0c0,2 -1,3 -3,3 -1,0 -2,-1 -2,-3 0,-1 1,-2 2,-2 2,0 3,1 3,2l0 0zm0 0z"/>
17 <path class="fil0" d="M49 78c-21,0 -39,18 -39,39 0,22 18,39 39,39 21,0 39,-17 39,-39 0,-21 -18,-39 -39,-39l0 0zm0 73c-19,0 -34,-15 -34,-34 0,-18 15,-34 34,-34 18,0 33,16 33,34 0,19 -15,34 -33,34l0 0zm0 0z"/>
18 <path class="fil0" d="M49 107c-6,0 -10,4 -10,10 0,6 4,10 10,10 6,0 10,-4 10,-10 0,-6 -4,-10 -10,-10l0 0zm0 15c-3,0 -5,-2 -5,-5 0,-3 2,-5 5,-5 3,0 5,2 5,5 0,3 -2,5 -5,5l0 0zm0 0z"/>
19 <path class="fil0" d="M173 135l-20 0 -6 -31c-2,-6 -7,-10 -13,-10l-5 0 0 -39c0,-7 -6,-13 -13,-13l-8 0c-1,-6 -6,-10 -13,-10l-38 0 0 -19c0,-7 -6,-13 -13,-13l-36 0c-2,0 -5,1 -6,3 -2,1 -2,3 -2,6 1,4 4,7 8,7l33 0 0 53c-23,3 -41,24 -41,48 0,27 22,49 49,49 27,0 49,-22 49,-49 0,-6 -1,-12 -4,-18l30 0 0 16 -18 0c-2,0 -3,1 -3,2 0,2 1,3 3,3l18 0 0 10c-9,2 -16,9 -16,18 0,10 8,18 18,18 10,0 18,-8 18,-18 0,-9 -6,-16 -15,-18l0 -31 5 0c4,0 7,3 8,6l6 33c0,0 0,0 0,0l2 11c0,1 1,2 3,2l20 0c2,0 3,-1 3,-3l0 -10c0,-2 -1,-3 -3,-3l0 0zm-34 13c0,7 -6,13 -13,13 -7,0 -13,-6 -13,-13 0,-7 6,-13 13,-13 7,0 13,6 13,13l0 0zm-44 -111c4,0 7,2 8,5l-46 0 0 -5 38 0zm-87 -27c-1,0 -3,-1 -3,-2 0,-1 0,-1 1,-2 0,0 1,-1 2,-1l33 0 0 5 -33 0zm38 -4c3,1 6,4 6,7l0 55c-1,0 -2,0 -3,0 -1,0 -2,0 -3,0l0 -62 0 0zm3 155c-24,0 -44,-20 -44,-44 0,-24 20,-44 44,-44 24,0 44,20 44,44 0,24 -20,44 -44,44l0 0zm43 -67c-7,-13 -20,-23 -35,-25l0 -6 49 0c1,0 2,-1 2,-3 0,-1 -1,-2 -2,-2l-49 0 0 -11 59 0c4,0 8,4 8,8l0 3 -8 0c-1,0 -3,1 -3,2 0,2 2,3 3,3l8 0 0 31 -32 0zm79 52l-16 0 -1 -6 17 0 0 6zm0 0z"/>
20 </g>
21 </svg>
22
src/scss/height-width.scss
1 @for $i from 1 through 100 { 1 @for $i from 1 through 100 {
2 $heightValue: 1% * $i; 2 $heightValue: 1% * $i;
3 .h-#{$i} { 3 .h-#{$i} {
4 height: $heightValue; 4 height: $heightValue;
5 } 5 }
6 @media (min-width: 576px) { 6 @media (min-width: 576px) {
7 .h-sm-#{$i} { 7 .h-sm-#{$i} {
8 height: $heightValue !important; 8 height: $heightValue !important;
9 } 9 }
10 } 10 }
11 @media (min-width: 768px) { 11 @media (min-width: 768px) {
12 .h-md-#{$i} { 12 .h-md-#{$i} {
13 height: $heightValue !important; 13 height: $heightValue !important;
14 } 14 }
15 } 15 }
16 @media (min-width: 992px) { 16 @media (min-width: 992px) {
17 .h-lg-#{$i} { 17 .h-lg-#{$i} {
18 height: $heightValue !important; 18 height: $heightValue !important;
19 } 19 }
20 } 20 }
21 @media (min-width: 1200px) { 21 @media (min-width: 1200px) {
22 .h-xl-#{$i} { 22 .h-xl-#{$i} {
23 height: $heightValue !important; 23 height: $heightValue !important;
24 } 24 }
25 } 25 }
26 } 26 }
27 27
28 @for $i from 1 through 100 { 28 @for $i from 1 through 100 {
29 $widthValue: 1% * $i; 29 $widthValue: 1% * $i;
30 .w-#{$i} { 30 .w-#{$i} {
31 width: $widthValue !important; 31 width: $widthValue !important;
32 } 32 }
33 } 33 }
34 34
35 .min-h-60 { 35 .min-h-60 {
36 min-height: 60px; 36 min-height: 60px;
37 } 37 }
38 38
39 .max-h-80 { 39 .max-h-80 {
40 max-height: 80%; 40 max-height: 80%;
41 } 41 }
42
43 .heigth-80 {
44 height: 80px;
45 }
42 46