Skip to content

Commit 0e4a0fe

Browse files
philwarehamphilwareham
committed
Some CSS optimsations
1 parent 64f38e8 commit 0e4a0fe

17 files changed

+105
-59
lines changed

‎src/assets/sass/designpatterns.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,14 @@ $colors: (
4343
"text-demoted": var(--clr-text-demoted),
4444
"grad-from": var(--clr-grad-from),
4545
"grad-to": var(--clr-grad-to),
46-
"brdr-x-light": var(--clr-brdr-x-light),
47-
"brdr-light": var(--clr-brdr-light),
46+
"brdr-x-lite": var(--clr-brdr-x-lite),
47+
"brdr-lite": var(--clr-brdr-lite),
4848
"brdr": var(--clr-brdr),
4949
"brdr-dark": var(--clr-brdr-dark),
5050
"brdr-x-dark": var(--clr-brdr-x-dark),
5151
"a": var(--clr-a),
5252
"a-interact": var(--clr-a-interact),
53-
"a-focus": var(--clr-a-focus),
53+
"focus": var(--clr-focus),
5454
"nav-hover": var(--clr-nav-hover),
5555
"nav-hover-selected": var(--clr-nav-hover-selected),
5656
"nav-active": var(--clr-nav-active),

‎src/assets/sass/modules/_blog.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
}
7878

7979
a:focus {
80-
border-color: var(--clr-a-focus);
80+
border-color: var(--clr-focus);
8181
outline: 2px solid transparent; // Allows for repainting in high contrast modes.
8282
background-color: var(--clr-hilite-enforced);
8383
}
@@ -106,7 +106,7 @@
106106
}
107107

108108
a:focus {
109-
border-color: var(--clr-a-focus);
109+
border-color: var(--clr-focus);
110110
background-color: var(--clr-hilite-enforced);
111111
}
112112
}

‎src/assets/sass/modules/_buttons.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ button,
7272
}
7373

7474
&:focus {
75-
border-color: var(--clr-a-focus);
75+
border-color: var(--clr-focus);
7676
outline: 2px solid transparent; // Allows for repainting in high contrast modes.
7777
}
7878
}
@@ -102,7 +102,7 @@ button,
102102
}
103103

104104
&:focus {
105-
border-color: var(--clr-a-focus);
105+
border-color: var(--clr-focus);
106106
}
107107
}
108108

‎src/assets/sass/modules/_cards.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
flex: 1 0 0%;
3030
flex-direction: column;
3131
margin: 0.5em 0 1.5em;
32-
border: 1px solid var(--clr-brdr-light);
32+
border: 1px solid var(--clr-brdr-lite);
3333
word-wrap: break-word;
3434

3535
.alert-pill {
@@ -69,10 +69,10 @@
6969
}
7070

7171
.card-header {
72-
border-bottom: 1px solid var(--clr-brdr-light);
72+
border-bottom: 1px solid var(--clr-brdr-lite);
7373
}
7474

7575
.card-footer {
76-
border-top: 1px solid var(--clr-brdr-light);
76+
border-top: 1px solid var(--clr-brdr-lite);
7777
}
7878

‎src/assets/sass/modules/_code-highlighting.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@ pre.line-numbers > code {
116116
top: 0;
117117
left: -3.8em;
118118
width: 3em; // Works for line-numbers below 1000 lines
119-
border-right: 1px solid var(--clr-brdr-light);
119+
border-right: 1px solid var(--clr-brdr-lite);
120120
font-size: 1em;
121121
letter-spacing: -1px;
122122
pointer-events: none;

‎src/assets/sass/modules/_disclosure.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@ summary {
1616
cursor: pointer;
1717

1818
&:focus {
19-
outline: 1px solid var(--clr-a-focus);
19+
outline: 1px solid var(--clr-focus);
2020
}
2121
}

‎src/assets/sass/modules/_embedded-content.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ img {
7979
*/
8080

8181
.img--bordered {
82-
border: 1px solid var(--clr-brdr-light);
82+
border: 1px solid var(--clr-brdr-lite);
8383
}
8484

8585
/**

‎src/assets/sass/modules/_forms.scss‎

Lines changed: 62 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -115,7 +115,7 @@ textarea {
115115
}
116116

117117
&:focus {
118-
border-color: var(--clr-a-focus);
118+
border-color: var(--clr-focus);
119119
outline: 2px solid transparent; // Allows for repainting in high contrast modes.
120120
}
121121
}
@@ -140,11 +140,11 @@ textarea {
140140
border-color: var(--clr-brdr-x-dark);
141141

142142
&:hover {
143-
border-color: var(--clr-brdr-x-light);
143+
border-color: var(--clr-brdr-x-lite);
144144
}
145145

146146
&:focus {
147-
border-color: var(--clr-a-focus);
147+
border-color: var(--clr-focus);
148148
}
149149
}
150150
}
@@ -184,7 +184,7 @@ textarea {
184184
}
185185

186186
&:focus {
187-
border-color: var(--clr-a-focus);
187+
border-color: var(--clr-focus);
188188
outline: 2px solid transparent; // Allows for repainting in high contrast modes.
189189
}
190190

@@ -197,7 +197,7 @@ textarea {
197197
[type="checkbox"],
198198
[type="radio"] {
199199
&:hover {
200-
border-color: var(--clr-brdr-x-light);
200+
border-color: var(--clr-brdr-x-lite);
201201
}
202202
}
203203
}
@@ -213,7 +213,7 @@ textarea {
213213
}
214214

215215
&:focus {
216-
background-color: var(--clr-a-focus);
216+
background-color: var(--clr-focus);
217217
}
218218
}
219219

@@ -233,7 +233,7 @@ textarea {
233233
}
234234

235235
&:focus {
236-
background-color: var(--clr-a-focus);
236+
background-color: var(--clr-focus);
237237
}
238238
}
239239

@@ -255,7 +255,7 @@ textarea {
255255
}
256256

257257
&:focus {
258-
border-color: var(--clr-a-focus);
258+
border-color: var(--clr-focus);
259259
}
260260
}
261261
}
@@ -268,27 +268,73 @@ textarea {
268268
}
269269

270270
&:focus {
271-
border-color: var(--clr-a-focus);
271+
border-color: var(--clr-focus);
272272
}
273273
}
274274
}
275275

276276
/**
277-
* Correct the cursor style of increment and decrement buttons in Safari.
277+
* Remove the inner padding in Chrome and Safari on macOS.
278278
*/
279279

280-
[type="number"]::-webkit-inner-spin-button,
281-
[type="number"]::-webkit-outer-spin-button {
280+
[type="search"]::-webkit-search-decoration {
281+
/* autoprefixer: off */
282+
appearance: none;
283+
}
284+
285+
[type="file"] {
286+
box-sizing: border-box;
282287
height: auto;
288+
min-height: 2em; // 32px / 16px
289+
padding: 0.25em 0.1875em; // 8px / 16px + 3px / 16px
290+
border: 1px solid var(--clr-brdr);
291+
background: var(--clr-bkgd-form);
292+
appearance: none;
293+
cursor: pointer;
294+
295+
&:hover {
296+
border-color: var(--clr-brdr-x-dark);
297+
}
298+
299+
&:focus {
300+
border-color: var(--clr-focus);
301+
outline: 2px solid transparent; // Allows for repainting in high contrast modes.
302+
}
283303
}
284304

285-
/**
286-
* Remove the inner padding in Chrome and Safari on macOS.
287-
*/
305+
@include setup.dark-mode {
306+
[type="file"] {
307+
border-color: var(--clr-brdr-x-dark);
288308

289-
[type="search"]::-webkit-search-decoration {
309+
&:hover {
310+
border-color: var(--clr-brdr-x-lite);
311+
}
312+
313+
&:focus {
314+
border-color: var(--clr-focus);
315+
}
316+
}
317+
}
318+
319+
[type="file"]::-webkit-file-upload-button {
320+
@include setup.gradient-linear(var(--clr-btn-grad-from), var(--clr-btn-grad-to));
321+
322+
padding: 0 0.25em;
323+
border: 0;
324+
border-radius: 0.25em;
325+
color: var(--clr-text-btn);
326+
font: inherit;
290327
/* autoprefixer: off */
291328
appearance: none;
329+
cursor: pointer;
330+
}
331+
332+
[type="file"]:hover::-webkit-file-upload-button {
333+
filter: brightness(1.05);
334+
}
335+
336+
[type="file"]:active::-webkit-file-upload-button {
337+
filter: brightness(0.95);
292338
}
293339

294340
/**

‎src/assets/sass/modules/_layout.scss‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -183,7 +183,7 @@ noscript {
183183
background-size: 32px 32px;
184184

185185
&:focus {
186-
border-color: var(--clr-a-focus);
186+
border-color: var(--clr-focus);
187187
}
188188
}
189189
}
@@ -520,7 +520,7 @@ main .layout-4col-3span {
520520
outline: 0;
521521

522522
img {
523-
border-color: var(--clr-a-focus);
523+
border-color: var(--clr-focus);
524524
box-shadow: 0 0.2em 0.5em hsla(216, 100%, 50%, 0.5);
525525
}
526526
}
@@ -564,7 +564,7 @@ main .layout-4col-3span {
564564
a:active,
565565
a:focus {
566566
img {
567-
border-color: var(--clr-a-focus);
567+
border-color: var(--clr-focus);
568568
box-shadow: 0 0.2em 0.5em hsla(312, 100%, 50%, 0.4);
569569
}
570570
}
@@ -640,11 +640,11 @@ main .layout-4col-3span {
640640
}
641641

642642
&:focus {
643-
border-color: var(--clr-a-focus);
643+
border-color: var(--clr-focus);
644644
outline: 2px solid transparent; // Allows for repainting in high contrast modes.
645645

646646
&::before {
647-
border-color: transparent var(--clr-a-focus);
647+
border-color: transparent var(--clr-focus);
648648
}
649649
}
650650
}

‎src/assets/sass/modules/_links.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ a {
2525
}
2626

2727
&:focus {
28-
outline: 1px solid var(--clr-a-focus);
28+
outline: 1px solid var(--clr-focus);
2929
}
3030
}
3131

@@ -90,7 +90,7 @@ h6 {
9090
outline: 0;
9191

9292
img {
93-
border-color: var(--clr-a-focus);
93+
border-color: var(--clr-focus);
9494
}
9595
}
9696
}

0 commit comments

Comments
 (0)