Skip to content

Commit d980382

Browse files
KristjanESPERANTOKristjanESPERANTO
committed
refactor: implement native CSS nesting
Use native CSS nesting with & selector to improve code organization. All selectors are now nested under .MMM-OneCallWeather, making the structure more maintainable and visually clear.
1 parent e7bd85b commit d980382

1 file changed

Lines changed: 75 additions & 77 deletions

File tree

‎MMM-OneCallWeather.css‎

Lines changed: 75 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,13 @@
2121
Layout Containers
2222
========================================================================== */
2323

24-
.weather-layout-vertical {
24+
& .weather-layout-vertical {
2525
display: flex;
2626
flex-direction: column;
2727
gap: 1rem;
2828
}
2929

30-
.weather-layout-horizontal {
30+
& .weather-layout-horizontal {
3131
display: flex;
3232
flex-direction: row;
3333
gap: 1rem;
@@ -38,7 +38,7 @@
3838
Forecast Table
3939
========================================================================== */
4040

41-
.forecast-table td {
41+
& .forecast-table td {
4242
text-align: center;
4343
vertical-align: middle;
4444
}
@@ -47,54 +47,54 @@
4747
Layout & Structure
4848
========================================================================== */
4949

50-
table {
50+
& table {
5151
border-collapse: collapse;
5252
display: inline-table;
5353
}
5454

5555
/* Horizontal layout cell alignment */
56-
.horizontal-cell {
56+
& .horizontal-cell {
5757
text-align: left;
5858
}
5959

6060
/* Vertical layout row alignment */
61-
.vertical-row {
61+
& .vertical-row {
6262
text-align: center;
6363
}
6464

6565
/* Default layout: vertical columns */
66-
.default-column {
66+
& .default-column {
6767
text-align: center;
6868
vertical-align: top;
6969
}
7070

7171
/* Common centered elements */
72-
.day,
73-
.max-temp,
74-
.min-temp,
75-
.wind-speed {
72+
& .day,
73+
& .max-temp,
74+
& .min-temp,
75+
& .wind-speed {
7676
text-align: center;
7777
}
7878

7979
/* ==========================================================================
8080
Temperature Colors
8181
========================================================================== */
8282

83-
.colored > .max-temp,
84-
.max-temp.colored {
83+
& .colored > .max-temp,
84+
& .max-temp.colored {
8585
color: var(--color-temp-max);
8686
}
8787

88-
.colored > .min-temp,
89-
.min-temp.colored {
88+
& .colored > .min-temp,
89+
& .min-temp.colored {
9090
color: var(--color-temp-min);
9191
}
9292

9393
/* ==========================================================================
9494
Weather Icons
9595
========================================================================== */
9696

97-
.weathericon {
97+
& .weathericon {
9898
display: flex;
9999
align-items: center;
100100
justify-content: center;
@@ -103,12 +103,12 @@
103103
margin-inline: 20px;
104104
}
105105

106-
.weather-icon > span > img {
106+
& .weather-icon > span > img {
107107
min-width: 2rem;
108108
margin: 0 var(--gap-weather-icon);
109109
}
110110

111-
.forecast-icon {
111+
& .forecast-icon {
112112
height: auto;
113113
max-width: var(--icon-size-forecast);
114114
display: inline;
@@ -118,23 +118,23 @@
118118
Current Weather Display
119119
========================================================================== */
120120

121-
.large-weather-icon-container {
121+
& .large-weather-icon-container {
122122
display: flex;
123123
align-items: center;
124124
justify-content: center;
125125
gap: var(--gap-icon-temp);
126126
}
127127

128-
.large-weather-icon-container,
129-
.wind-container {
128+
& .large-weather-icon-container,
129+
& .wind-container {
130130
text-align: center;
131131
}
132132

133133
/* ==========================================================================
134134
Wind Badge
135135
========================================================================== */
136136

137-
.wind-badge {
137+
& .wind-badge {
138138
position: relative;
139139
display: inline-flex;
140140
align-items: center;
@@ -143,85 +143,83 @@
143143
height: var(--wind-badge-size-medium);
144144
min-width: var(--wind-badge-size-medium);
145145
flex-shrink: 0;
146+
147+
& .wind-value {
148+
position: absolute;
149+
top: 50%;
150+
left: 50%;
151+
transform: translate(-50%, -50%);
152+
font-weight: 900;
153+
font-size: 0.7em;
154+
z-index: 1;
155+
}
146156
}
147157

148158
/* Compass wrapper (fixed size container for rotated elements) */
149-
.wind-compass {
159+
& .wind-compass {
150160
position: relative;
151161
width: calc(var(--wind-compass-size) + 1.4em);
152162
height: calc(var(--wind-compass-size) + 1.4em);
153163
flex-shrink: 0;
154-
}
155164

156-
/* Compass circle */
157-
.wind-compass::before {
158-
content: "";
159-
position: absolute;
160-
top: 50%;
161-
left: 50%;
162-
transform: translate(-50%, -50%);
163-
width: var(--wind-compass-size);
164-
height: var(--wind-compass-size);
165-
border: 2px solid currentcolor;
166-
border-radius: 50%;
167-
opacity: var(--wind-compass-opacity);
168-
}
169-
170-
/* Direction arrow */
171-
.wind-compass::after {
172-
content: "";
173-
position: absolute;
174-
top: 0.2em;
175-
left: 50%;
176-
transform: translateX(-50%);
177-
width: 0;
178-
height: 0;
179-
border-left: 0.3em solid transparent;
180-
border-right: 0.3em solid transparent;
181-
border-bottom: 0.5em solid currentcolor;
182-
opacity: var(--wind-arrow-opacity);
183-
}
184-
185-
/* Wind speed value */
186-
.wind-badge .wind-value {
187-
position: absolute;
188-
top: 50%;
189-
left: 50%;
190-
transform: translate(-50%, -50%);
191-
font-weight: 900;
192-
font-size: 0.7em;
193-
z-index: 1;
165+
/* Compass circle */
166+
&::before {
167+
content: "";
168+
position: absolute;
169+
top: 50%;
170+
left: 50%;
171+
transform: translate(-50%, -50%);
172+
width: var(--wind-compass-size);
173+
height: var(--wind-compass-size);
174+
border: 2px solid currentcolor;
175+
border-radius: 50%;
176+
opacity: var(--wind-compass-opacity);
177+
}
178+
179+
/* Direction arrow */
180+
&::after {
181+
content: "";
182+
position: absolute;
183+
top: 0.2em;
184+
left: 50%;
185+
transform: translateX(-50%);
186+
width: 0;
187+
height: 0;
188+
border-left: 0.3em solid transparent;
189+
border-right: 0.3em solid transparent;
190+
border-bottom: 0.5em solid currentcolor;
191+
opacity: var(--wind-arrow-opacity);
192+
}
194193
}
195194

196195
/* ==========================================================================
197196
Responsive Wind Badge Sizes
198197
========================================================================== */
199198

200-
.small .wind-badge {
199+
& .small .wind-badge {
201200
width: var(--wind-badge-size-small);
202201
height: var(--wind-badge-size-small);
202+
203+
& .wind-value {
204+
font-size: 0.65em;
205+
}
203206
}
204207

205-
.medium .wind-badge {
208+
& .medium .wind-badge {
206209
width: var(--wind-badge-size-medium);
207210
height: var(--wind-badge-size-medium);
211+
212+
& .wind-value {
213+
font-size: 0.7em;
214+
}
208215
}
209216

210-
.large .wind-badge {
217+
& .large .wind-badge {
211218
width: var(--wind-badge-size-large);
212219
height: var(--wind-badge-size-large);
213-
}
214-
215-
/* Font size adjustments */
216-
.small .wind-badge .wind-value {
217-
font-size: 0.65em;
218-
}
219-
220-
.medium .wind-badge .wind-value {
221-
font-size: 0.7em;
222-
}
223220

224-
.large .wind-badge .wind-value {
225-
font-size: 0.75em;
221+
& .wind-value {
222+
font-size: 0.75em;
223+
}
226224
}
227225
}

0 commit comments

Comments
 (0)