Luis Suarez / autoservicio-axion

Download as
Browse Code »

Commit e464d4ebcd6bf1786fa73f1c841b3f25479228aa

Authored by Marcelo Puebla
2 parents 879d5e46ae 086c124c6f
Exists in develop

Merge branch 'develop' into 'develop' 

Develop

See merge request !58
Showing 2 changed files   Show diff stats
src/app/modules/cancelar-compra/cancelar-compra.component.html
Diff comments   View file @ e464d4e
1 <div class="row justify-content-center mt-2 h-15"> 1 <div class="row justify-content-center mt-2 h-15">
2 <img class="h-100 w-auto my-auto" src="../../../assets/img/logo-spot.svg"> 2 <img class="h-100 w-auto my-auto" src="../../../assets/img/logo-spot.svg">
3 </div> 3 </div>
4 <div class="row mx-auto h-70"> 4 <div class="row mx-auto h-70">
5 <div class="col-12 align-self-center"> 5 <div class="col-12 align-self-center">
6 <div class="row mt-5 mx-0 justify-content-around"> 6 <div class="row mt-5 mx-0 justify-content-around">
7 <div class="col-12 col-sm-8 col-md-6 col-lg-3"> 7 <div class="col-12 col-sm-8 col-md-6 col-lg-4">
8 <div class="p-3 bg-white text-center shadow-lg rounded"> 8 <div class="p-3 bg-white text-center shadow-lg rounded">
9 <p class="mt-4 h4">NECESITA</p> 9 <p class="mt-4 h4">NECESITA</p>
10 <p class="font-weight-bold text-secondary my-4 h2">más tiempo</p> 10 <p class="font-weight-bold text-secondary my-4 h2">más tiempo</p>
11 <p class="mb-4 h4">PARA SU PEDIDO?</p> 11 <p class="mb-4 h4">PARA SU PEDIDO?</p>
12 </div> 12 </div>
13 </div> 13 </div>
14 </div> 14 </div>
15 <!-- BUTTONS --> 15 <!-- BUTTONS -->
16 <div class="row mx-0 mt-5 justify-content-center"> 16 <div class="row mx-0 mt-5 justify-content-center">
17 <div class="col-auto px-0 align-self-start"> 17 <div class="col-auto px-0 align-self-start">
18 <div 18 <div
19 class="row mx-0 py-1 btn-effect bg-primary badge-pill" 19 class="row mx-0 py-1 btn-effect bg-primary badge-pill"
20 (click)="volverPreviousPage()"> 20 (click)="volverPreviousPage()">
21 <div class="col-auto align-self-center text-white">continuar compra</div> 21 <div class="col-auto align-self-center text-white">continuar compra</div>
22 <div class="col-auto align-self-center p-0"> 22 <div class="col-auto align-self-center p-0">
23 <img 23 <img
24 draggable="false" 24 draggable="false"
25 ondragstart="return false;" 25 ondragstart="return false;"
26 (contextmenu)="false" 26 (contextmenu)="false"
27 class="p-1 icon-30" 27 class="p-1 icon-30"
28 src="assets/img/ir.svg"> 28 src="assets/img/ir.svg">
29 </div> 29 </div>
30 </div> 30 </div>
31 </div> 31 </div>
32 </div> 32 </div>
33 <div class="row mx-0 mt-4 justify-content-center"> 33 <div class="row mx-0 mt-4 justify-content-center">
34 <div class="col-auto px-0 align-self-start"> 34 <div class="col-auto px-0 align-self-start">
35 <div 35 <div
36 class="row mx-0 py-1 btn-effect bg-grey badge-pill" 36 class="row mx-0 py-1 btn-effect bg-grey badge-pill"
37 (click)="limpiarCarritoYvolver()"> 37 (click)="limpiarCarritoYvolver()">
38 <div class="col-auto align-self-center">cancelar compra</div> 38 <div class="col-auto align-self-center">cancelar compra</div>
39 <div class="col-auto align-self-center p-0"> 39 <div class="col-auto 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-30" 44 class="p-1 icon-30"
45 src="assets/img/icono-cancelar-color.svg"> 45 src="assets/img/icono-cancelar-color.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 52
src/scss/typography.scss
Diff comments   View file @ e464d4e
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 $font-size-base: 1rem; 5 $font-size-base: 1rem;
6 $font-size-display-base: null;
6 $type-scales: ( 7 $type-scales: (
7 minor-second: 1.067, 8 minor-second: 1.067,
8 major-second: 1.125, 9 major-second: 1.125,
9 minor-third: 1.2, 10 minor-third: 1.2,
10 major-third: 1.25, 11 major-third: 1.25,
11 perfect-fourth: 1.333, 12 perfect-fourth: 1.333,
12 augmented-fourth: 1.414, 13 augmented-fourth: 1.414,
13 perfect-fifth: 1.5, 14 perfect-fifth: 1.5,
14 golden-ratio: 1.618 15 golden-ratio: 1.618
15 ); 16 );
16 17
17 $heading-type-scale-base: minor-third; 18 $heading-type-scale-base: minor-third;
18 $display-type-scale-base: minor-third; 19 $display-type-scale-base: minor-third;
19 @function check-type-scale-value($scale) { 20 @function check-type-scale-value($scale) {
20 @if map-has-key($type-scales, $scale) { 21 @if map-has-key($type-scales, $scale) {
21 @return map-get($type-scales, $scale); 22 @return map-get($type-scales, $scale);
22 } @else if type-of($scale) == number and unitless($scale) { 23 } @else if type-of($scale) == number and unitless($scale) {
23 @return $scale; 24 @return $scale;
24 } @else { 25 } @else {
25 @error "Sorry, `#{$scale}` is not a unitless number value or a pre-defined key in the $type-scales map."; 26 @error "Sorry, `#{$scale}` is not a unitless number value or a pre-defined key in the $type-scales map.";
26 } 27 }
27 } 28 }
28 @mixin create-heading-type-scale($scale) { 29 @mixin create-heading-type-scale($scale) {
29 $the-heading-type-scale: check-type-scale-value($scale); 30 $the-heading-type-scale: check-type-scale-value($scale);
30 $font-size-h6: $font-size-base; 31 $font-size-h6: $font-size-base;
31 $font-size-h5: $font-size-h6 * $the-heading-type-scale; 32 $font-size-h5: $font-size-h6 * $the-heading-type-scale;
32 $font-size-h4: $font-size-h5 * $the-heading-type-scale; 33 $font-size-h4: $font-size-h5 * $the-heading-type-scale;
33 $font-size-h3: $font-size-h4 * $the-heading-type-scale; 34 $font-size-h3: $font-size-h4 * $the-heading-type-scale;
34 $font-size-h2: $font-size-h3 * $the-heading-type-scale; 35 $font-size-h2: $font-size-h3 * $the-heading-type-scale;
35 $font-size-h1: $font-size-h2 * $the-heading-type-scale; 36 $font-size-h1: $font-size-h2 * $the-heading-type-scale;
36 $font-size-display-base: $font-size-h1 !global; 37 $font-size-display-base: $font-size-h1 !global;
37 38
38 h1, 39 h1,
39 .h1 { 40 .h1 {
40 font-size: $font-size-h1; 41 font-size: $font-size-h1;
41 } 42 }
42 h2, 43 h2,
43 .h2 { 44 .h2 {
44 font-size: $font-size-h2; 45 font-size: $font-size-h2;
45 } 46 }
46 h3, 47 h3,
47 .h3 { 48 .h3 {
48 font-size: $font-size-h3; 49 font-size: $font-size-h3;
49 } 50 }
50 h4, 51 h4,
51 .h4 { 52 .h4 {
52 font-size: $font-size-h4; 53 font-size: $font-size-h4;
53 } 54 }
54 h5, 55 h5,
55 .h5 { 56 .h5 {
56 font-size: $font-size-h5; 57 font-size: $font-size-h5;
57 } 58 }
58 h6, 59 h6,
59 .h6 { 60 .h6 {
60 font-size: $font-size-h6; 61 font-size: $font-size-h6;
61 } 62 }
62 } 63 }
63 64
64 @mixin create-display-type-scale($scale) { 65 @mixin create-display-type-scale($scale) {
65 $the-display-type-scale: check-type-scale-value($scale); 66 $the-display-type-scale: check-type-scale-value($scale);
66 $font-size-display-4: $font-size-display-base + $font-size-base; 67 $font-size-display-4: $font-size-display-base + $font-size-base;
67 $font-size-display-3: $font-size-display-4 * $the-display-type-scale; 68 $font-size-display-3: $font-size-display-4 * $the-display-type-scale;
68 $font-size-display-2: $font-size-display-3 * $the-display-type-scale; 69 $font-size-display-2: $font-size-display-3 * $the-display-type-scale;
69 $font-size-display-1: $font-size-display-2 * $the-display-type-scale; 70 $font-size-display-1: $font-size-display-2 * $the-display-type-scale;
70 71
71 .display-4 { 72 .display-4 {
72 font-size: $font-size-display-4; 73 font-size: $font-size-display-4;
73 } 74 }
74 .display-3 { 75 .display-3 {
75 font-size: $font-size-display-3; 76 font-size: $font-size-display-3;
76 } 77 }
77 .display-2 { 78 .display-2 {
78 font-size: $font-size-display-2; 79 font-size: $font-size-display-2;
79 } 80 }
80 .display-1 { 81 .display-1 {
81 font-size: $font-size-display-1; 82 font-size: $font-size-display-1;
82 } 83 }
83 } 84 }
84 85
85 html { 86 html {
86 font-size: 14px; 87 font-size: 14px;
87 @media (min-width: 768px) { 88 @media (min-width: 768px) {
88 font-size: 16px; 89 font-size: 16px;
89 } 90 }
90 @media (min-width: 992px) { 91 @media (min-width: 992px) {
91 font-size: 18px; 92 font-size: 18px;
92 } 93 }
93 } 94 }
94 95
95 @include create-heading-type-scale($heading-type-scale-base); 96 @include create-heading-type-scale($heading-type-scale-base);
96 @include create-display-type-scale($display-type-scale-base); 97 @include create-display-type-scale($display-type-scale-base);
97 @media (min-width: 768px) { 98 @media (min-width: 768px) {
98 @include create-heading-type-scale(minor-third); 99 @include create-heading-type-scale(minor-third);
99 } 100 }
100 101
101 @import "node_modules/bootstrap/scss/bootstrap"; 102 @import "node_modules/bootstrap/scss/bootstrap";
102 103