Skip to content

Commit 6d77b8d

Browse files
gilgerokgilgerok
committed
Optimización SASS: uso de extends, mixin, for, maps y map-get
1 parent 3b1a80a commit 6d77b8d

File tree

14 files changed

+150
-124
lines changed

14 files changed

+150
-124
lines changed

‎assets/css/style.css‎

Lines changed: 35 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ h2 {
5353
font-size: 1.8em; }
5454

5555
h3 {
56-
font-size: 1.6em;
57-
color: #037F8C; }
56+
color: #037F8C;
57+
font-size: 1.6em; }
5858

5959
h4,
6060
h5,
@@ -97,30 +97,31 @@ article {
9797

9898
.overlay {
9999
position: absolute;
100+
top: 0;
101+
left: 0;
100102
width: 100%;
101103
height: 100%;
102-
left: 0px;
103-
top: 0px;
104104
background-color: rgba(0, 0, 0, 0.3); }
105105

106-
.zindex-5 {
107-
z-index: 500; }
106+
.zindex-1, .overlay {
107+
z-index: 100; }
108108

109-
.zindex-4 {
110-
z-index: 400; }
109+
.zindex-2 {
110+
z-index: 200; }
111111

112112
.zindex-3 {
113113
z-index: 300; }
114114

115-
.zindex-2 {
116-
z-index: 200; }
115+
.zindex-4 {
116+
z-index: 400; }
117117

118-
.zindex-1 {
119-
z-index: 100; }
118+
.zindex-5, .sticky-top {
119+
z-index: 500; }
120120

121121
.sticky-top {
122122
position: sticky;
123-
top: 0; }
123+
top: 0;
124+
left: 0; }
124125

125126
.navbarAstor {
126127
background-color: #022859;
@@ -131,9 +132,17 @@ article {
131132
.navbarAstor .collapsing {
132133
margin-top: 1rem;
133134
padding-right: 1rem;
134-
background-color: #03658C; }
135-
136-
.header *, .header--home * {
135+
background-color: #022859; }
136+
.navbarAstor .nav-rosa {
137+
color: #FF7BAC !important;
138+
border-bottom: 3px solid #022859; }
139+
.navbarAstor .nav-rosa.active-rosa {
140+
font-weight: 900; }
141+
.navbarAstor .nav-rosa:hover {
142+
font-weight: 900;
143+
border-bottom: 3px solid #FF7BAC; }
144+
145+
.headerColor *, .header *, .header--home * {
137146
color: #FFFFFF; }
138147

139148
.header {
@@ -170,15 +179,15 @@ article {
170179
.footer .footer__widget li a {
171180
color: #FFFFFF;
172181
font-weight: 600; }
182+
.footer .footer__widget .footer__widget__lista, .footer .footer__widget .footer__widget__lista--redes {
183+
list-style: none;
184+
text-align: center;
185+
padding: 0; }
173186
.footer .footer__widget .footer__widget__lista--redes {
174187
list-style: none;
175188
display: flex;
176189
justify-content: center;
177190
column-gap: .8rem; }
178-
.footer .footer__widget .footer__widget__lista {
179-
list-style: none;
180-
text-align: center;
181-
padding: 0; }
182191
.footer .footer__widget .footer__widget__img {
183192
align-self: center; }
184193
.footer .footer__widget .footer__widget__img img {
@@ -202,7 +211,7 @@ article {
202211
.section__servicios h3 {
203212
margin: .9rem 0; }
204213

205-
.boton {
214+
.boton, .callToAction .callToAction__contacto__boton, .section__contacto .section__contacto__formulario input[type='submit'] {
206215
display: inline-block;
207216
width: fit-content;
208217
padding: .8rem 1rem;
@@ -212,10 +221,11 @@ article {
212221
text-transform: uppercase;
213222
font-size: .9rem;
214223
text-align: center; }
215-
.boton:hover {
224+
.boton:hover, .callToAction .callToAction__contacto__boton:hover, .section__contacto .section__contacto__formulario input:hover[type='submit'] {
216225
color: #FFFFFF;
217226
background-color: #FF7BAC;
218-
border-color: #FFFFFF; }
227+
border-color: #FFFFFF;
228+
cursor: pointer; }
219229

220230
.imgTrabajos:hover {
221231
transform: rotate(3deg) scale(0.98); }
@@ -257,19 +267,10 @@ article {
257267
border: none; }
258268
.section__contacto .section__contacto__formulario input[type='submit'] {
259269
background-color: #FF7BAC;
260-
color: #F4F4F4;
261-
font-weight: 600;
262-
text-transform: uppercase;
263-
font-size: .9rem;
264-
width: fit-content; }
270+
color: #F4F4F4; }
265271
.section__contacto .section__contacto__formulario input[type='submit']:hover {
266272
background-color: #e25d8e;
267-
color: #F4F4F4;
268-
font-weight: 600;
269-
text-transform: uppercase;
270-
font-size: .9rem;
271-
width: fit-content;
272-
cursor: pointer; }
273+
color: #F4F4F4; }
273274
.section__contacto .iframeMapa {
274275
height: 40rem; }
275276

‎assets/scss/_base.scss‎

Lines changed: 26 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -35,37 +35,37 @@ h3 {
3535
}
3636

3737
h1 {
38-
color: $azulOscuro;
39-
font-size: $h1;
38+
color: map-get($titulos, colorH1);
39+
font-size: map-get($titulos, fontH1);
4040
}
4141

4242
h2 {
43-
color: $azulVerdoso;
44-
font-size: $h2;
43+
color: map-get($titulos, colorH2);
44+
font-size: map-get($titulos, fontH2);
4545
}
4646

4747
h3 {
48-
font-size: $h3;
49-
color: $verdosoAzul;
48+
color: map-get($titulos, colorH3);
49+
font-size: map-get($titulos, fontH3);
5050
}
5151

5252
h4,
5353
h5,
5454
h6 {
5555
font-weight: 500;
56-
color: $negro;
56+
color: map-get($titulos, colorH46);
5757
}
5858

5959
h4 {
60-
font-size: $h4;
60+
font-size: map-get($titulos, fontH4);
6161
}
6262

6363
h5 {
64-
font-size: $h5;
64+
font-size: map-get($titulos, fontH5);
6565
}
6666

6767
h6 {
68-
font-size: $h6;
68+
font-size: map-get($titulos, fontH6);
6969
}
7070

7171
.destacado {
@@ -98,36 +98,31 @@ article {
9898
margin: 1.875rem 0px;
9999
}
100100

101-
.overlay {
102-
position: absolute;
101+
@mixin fullWidth {
103102
width: 100%;
104103
height: 100%;
105-
left: 0px;
106-
top: 0px;
107-
background-color: rgba($superNegro, .3);
108-
}
109-
110-
.zindex-5 {
111-
z-index: 500;
112104
}
113105

114-
.zindex-4 {
115-
z-index: 400;
106+
@mixin posicion($posicion,$top,$izq) {
107+
position: $posicion;
108+
top: $top;
109+
left: $izq;
116110
}
117111

118-
.zindex-3 {
119-
z-index: 300;
120-
}
121-
122-
.zindex-2 {
123-
z-index: 200;
112+
.overlay {
113+
@include posicion(absolute, 0, 0);
114+
@include fullWidth();
115+
@extend .zindex-1;
116+
background-color: rgba($superNegro, .3);
124117
}
125118

126-
.zindex-1 {
127-
z-index: 100;
119+
@for $i from 1 through 5 {
120+
.zindex-#{$i}{
121+
z-index: $i * 100;
122+
}
128123
}
129124

130125
.sticky-top {
131-
position: sticky;
132-
top: 0;
126+
@include posicion(sticky, 0, 0);
127+
@extend .zindex-5;
133128
}

‎assets/scss/_footer.scss‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,17 +12,18 @@
1212
font-weight: 600;
1313
}
1414
}
15+
.footer__widget__lista {
16+
list-style: none;
17+
text-align: center;
18+
padding: 0;
19+
}
1520
.footer__widget__lista--redes {
21+
@extend .footer__widget__lista;
1622
list-style: none;
1723
display: flex;
1824
justify-content: center;
1925
column-gap: .8rem;
2026
}
21-
.footer__widget__lista {
22-
list-style: none;
23-
text-align: center;
24-
padding: 0;
25-
}
2627
.footer__widget__img {
2728
align-self: center;
2829
img {

‎assets/scss/_generalesSitio.scss‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,6 @@
1010
margin: 1rem 0 1rem .5rem;
1111
}
1212

13-
1413
.section__servicios {
1514
h3 {
1615
margin: .9rem 0;
@@ -32,6 +31,7 @@
3231
color: $blanco;
3332
background-color: $rosa;
3433
border-color: $blanco;
34+
cursor: pointer;
3535
}
3636
}
3737

@@ -47,16 +47,21 @@
4747
background-color: $rosa;
4848
text-align: center;
4949
margin-bottom: 1rem;
50+
5051
.callToAction__contacto__titulo {
5152
color: $blanco;
5253
}
54+
5355
.callToAction__contacto__mensaje {
5456
color: $grisClaro;
5557
}
58+
5659
.callToAction__contacto__boton {
60+
@extend .boton;
5761
color: $rosa;
5862
background-color: $blanco;
5963
border-color: $blanco;
64+
6065
&:hover {
6166
color: #e25d8e;
6267
background-color: $grisClaro;

‎assets/scss/_header.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,11 @@
1-
.header, .header--home {
1+
.headerColor {
22
* {
33
color: $blanco;
44
}
55
}
66

77
.header {
8+
@extend .headerColor;
89
padding: 4rem 0;
910
background-color: $azulOscuro;
1011
text-align: left;
@@ -28,6 +29,7 @@
2829
}
2930

3031
.header--home {
32+
@extend .headerColor;
3133
position: relative;
3234
height: calc(100vh - 5rem);
3335
background-image: url(../images/presentacion.jpg);

‎assets/scss/_navbar.scss‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,18 @@
1212
.collapsing {
1313
margin-top: 1rem;
1414
padding-right: 1rem;
15-
background-color: $azulVerdoso;
15+
background-color: $azulOscuro;
16+
}
17+
18+
.nav-rosa {
19+
color: $rosa !important;
20+
border-bottom: 3px solid $azulOscuro;
21+
&.active-rosa{
22+
font-weight: 900;
23+
}
24+
&:hover {
25+
font-weight: 900;
26+
border-bottom: 3px solid $rosa;
27+
}
1628
}
1729
}

‎assets/scss/_pages.scss‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -24,21 +24,17 @@
2424
}
2525

2626
input[type='submit'] {
27+
@extend .boton;
2728
background-color: $rosa;
2829
color: $grisClaro;
29-
font-weight: 600;
30-
text-transform: uppercase;
31-
font-size: .9rem;
32-
width: fit-content;
30+
// font-weight: 600;
31+
// text-transform: uppercase;
32+
// font-size: .9rem;
33+
// width: fit-content;
3334

3435
&:hover {
3536
background-color: #e25d8e;
3637
color: $grisClaro;
37-
font-weight: 600;
38-
text-transform: uppercase;
39-
font-size: .9rem;
40-
width: fit-content;
41-
cursor: pointer;
4238
}
4339
}
4440
}

‎assets/scss/_variables.scss‎

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,18 @@ $h3: 1.6em;
1818
$h4: 1.4em;
1919
$h5: 1.3em;
2020
$h6: 1.2em;
21-
$p: 1em;
21+
$p: 1em;
22+
23+
// MAPAS
24+
$titulos: (
25+
colorH1: $azulOscuro,
26+
colorH2: $azulVerdoso,
27+
colorH3: $verdosoAzul,
28+
colorH46: $negro,
29+
fontH1: $h1,
30+
fontH2: $h2,
31+
fontH3: $h3,
32+
fontH4: $h4,
33+
fontH5: $h5,
34+
fontH6: $h6
35+
)

0 commit comments

Comments
 (0)