Skip to content

Commit f83ea43

Browse files
JoelCDLJoelCDL
committed
Replace component sass variables with css custom variables
1 parent eb2c4b0 commit f83ea43

5 files changed

Lines changed: 28 additions & 31 deletions

File tree

‎scss/_header.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// ***** Global Header Component ***** //
22

3-
$header-logo-height: 50px;
4-
53
.c-header {
4+
--header-logo-height: 50px;
5+
66
display: grid;
77
position: relative;
88
grid-template:
@@ -39,7 +39,7 @@ $header-logo-height: 50px;
3939

4040
img {
4141
display: block;
42-
height: $header-logo-height;
42+
height: var(--header-logo-height);
4343

4444
@media (--min-width2) {
4545
height: 4.4rem;
@@ -66,7 +66,7 @@ $header-logo-height: 50px;
6666
grid-area: header-search;
6767
align-items: flex-start;
6868
width: 100%;
69-
height: $header-logo-height;
69+
height: var(--header-logo-height);
7070
padding-left: var(--space1);
7171
transform: translateX(100%);
7272
transition: transform 0.5s;

‎scss/_slideshow.scss‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,15 @@
11
// ***** Slideshow Component ***** //
22

3-
@mixin slideshow-caption-bg {
4-
background-color: rgb(var(--color-medium-blue) / 90%);
5-
}
6-
7-
$slideshow-caption-width: 20rem;
8-
93
.c-slideshow {
4+
--slideshow-caption-bg: rgb(var(--color-medium-blue) / 90%);
5+
--slideshow-caption-width: 20rem;
6+
107
display: grid;
118
position: relative;
129
grid-template-rows: 1fr auto;
1310

1411
@media (--min-width1) {
15-
grid-template-columns: $slideshow-caption-width auto;
12+
grid-template-columns: var(--slideshow-caption-width) auto;
1613
}
1714

1815
// show single random fixed image if display: grid and display: contents css not supported:
@@ -32,14 +29,14 @@ $slideshow-caption-width: 20rem;
3229
}
3330

3431
.c-slideshow__controls {
35-
@include slideshow-caption-bg;
3632
display: flex;
3733
z-index: 1;
3834
grid-column: 1;
3935
grid-row: 2;
4036
align-items: center;
4137
justify-content: space-evenly;
4238
border-top: 1px solid rgb(var(--color-white));
39+
background-color: var(--slideshow-caption-bg);
4340

4441
@media (--min-width1) {
4542
margin: 0 var(--space2) var(--space2) var(--space2);
@@ -109,13 +106,13 @@ $slideshow-caption-width: 20rem;
109106
}
110107

111108
.c-slideshow__slide figcaption {
112-
@include slideshow-caption-bg;
113109
display: flex; // allows 'read more' link to align to bottom
114110
z-index: -1;
115111
grid-column: 1;
116112
grid-row: 1;
117113
flex-direction: column;
118114
padding: var(--space2);
115+
background-color: var(--slideshow-caption-bg);
119116
color: rgb(var(--color-white));
120117

121118
@media (--min-width1) {
@@ -180,7 +177,7 @@ $slideshow-caption-width: 20rem;
180177
right: 0;
181178
bottom: 0;
182179
max-width: 50%;
183-
margin-left: $slideshow-caption-width;
180+
margin-left: var(--slideshow-caption-width);
184181
padding: var(--space2);
185182
background-color: rgb(var(--color-black) / 60%);
186183
font-size: 1em;

‎scss/_timeline.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
// ***** Timeline Component ***** //
22

33
.c-timeline {
4-
$year-item-space: .6rem;
5-
$year-section-space: .3rem;
4+
--year-item-space: .6rem;
5+
--year-section-space: .3rem;
66

77
// Remove WordPress auto-generated break tags:
88
br {
@@ -17,22 +17,22 @@
1717
display: flex;
1818

1919
strong {
20-
margin-top: $year-item-space + $year-section-space;
20+
margin-top: var(--year-item-space) + var(--year-section-space);
2121
font-weight: 600;
2222
}
2323

2424
}
2525

2626
> ul > li > ul {
2727
margin-left: var(--space2);
28-
padding-top: $year-section-space;
29-
padding-bottom: $year-section-space;
28+
padding-top: var(--year-section-space);
29+
padding-bottom: var(--year-section-space);
3030
border-left: 3px solid rgb(var(--color-blue));
3131
}
3232

3333
> ul > li > ul > li {
34-
margin-top: $year-item-space;
35-
margin-bottom: $year-item-space;
34+
margin-top: var(--year-item-space);
35+
margin-bottom: var(--year-item-space);
3636
margin-left: var(--space2);
3737
}
3838

‎scss/_utilities.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,12 +35,12 @@ $test3: #080 solid 1px; // green
3535
// Bleed component to left/right of viewport by equalling <body> left/right padding:
3636

3737
%u-page-bleed {
38-
margin-right: (-var(--space1));
39-
margin-left: (-var(--space1));
38+
margin-right: calc(var(--space1) * -1);
39+
margin-left: calc(var(--space1) * -1);
4040

4141
@media (--min-width2) {
42-
margin-right: (-var(--space2));
43-
margin-left: (-var(--space2));
42+
margin-right: calc(var(--space2) * -1);
43+
margin-left: calc(var(--space2) * -1);
4444
}
4545

4646
}

‎scss/_yearlist.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
// ***** Year List Component ***** //
22

3-
$yearlist-border-size: 1px;
4-
53
.c-yearlist {
4+
--yearlist-border-size: 1px;
5+
66
@include u-reset-list-styles;
77
display: flex;
88
flex-wrap: wrap;
99
margin-bottom: var(--space2);
10-
padding-top: $yearlist-border-size;
10+
padding-top: var(--yearlist-border-size);
1111

1212
li {
13-
margin-top: -($yearlist-border-size);
14-
margin-left: -($yearlist-border-size);
15-
border: $yearlist-border-size solid rgb(var(--color-blue));
13+
margin-top: calc(var(--yearlist-border-size) * -1);
14+
margin-left: calc(var(--yearlist-border-size) * -1);
15+
border: var(--yearlist-border-size) solid rgb(var(--color-blue));
1616
}
1717

1818
a {

0 commit comments

Comments
 (0)