Skip to content

Commit a9108c6

Browse files
dcoadcoa
committed
refactor: replace scss for css variables
1 parent eb0f79a commit a9108c6

File tree

7 files changed

+103
-108
lines changed

7 files changed

+103
-108
lines changed

‎src/index.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,2 @@
1-
@import "~@edx/brand/paragon/fonts";
2-
@import "~@edx/brand/paragon/variables";
3-
@import "~@openedx/paragon/scss/core/core";
4-
@import "~@edx/brand/paragon/overrides";
5-
1+
@use "@openedx/paragon/styles/css/core/custom-media-breakpoints" as paragonCustomMediaBreakpoints;
62
@import "sass/style";

‎src/sass/_base_component.scss‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,19 @@
22
.layout {
33
display: flex;
44

5-
@include media-breakpoint-down('lg') {
5+
@media (--pgn-size-breakpoint-max-width-lg) {
66
flex-direction: column;
77
justify-content: center;
88
align-items: center;
99
}
1010

11-
@include media-breakpoint-up('xl') {
11+
@media (--pgn-size-breakpoint-min-width-xl) {
1212
justify-content: space-between;
1313
}
1414
}
1515

1616
.content {
17-
@include media-breakpoint-up('xl') {
17+
@media (--pgn-size-breakpoint-min-width-xl) {
1818
display: flex;
1919
justify-content: center;
2020
width: 50vw;
@@ -47,7 +47,7 @@
4747
font-weight: 700;
4848
line-height: 1;
4949

50-
@include media-breakpoint-down('xl') {
50+
@media (--pgn-size-breakpoint-max-width-xl) {
5151
font-size: 3.75rem;
5252
}
5353

@@ -60,7 +60,7 @@
6060
margin-bottom: 0.5rem;
6161
font-weight: 700;
6262

63-
@include media-breakpoint-down('xl') {
63+
@media (-pgn-size-breakpoint-max-width-xl) {
6464
font-size: 1.375rem;
6565
line-height: 1.75rem;
6666
}
@@ -72,7 +72,7 @@
7272
}
7373

7474
.large-screen-left-container {
75-
@include media-breakpoint-down('xl') {
75+
@media (-pgn-size-breakpoint-max-width-xl) {
7676
flex: 0 0 25%;
7777
max-width: 25%;
7878
}
@@ -87,89 +87,89 @@
8787
height: 0.25rem;
8888
background-image: linear-gradient(
8989
102.02deg,
90-
$brand-700,
91-
$brand-700 20%,
92-
$brand 20%,
90+
var(--pgn-color-brand-700),
91+
var(--pgn-color-brand-700) 20%,
92+
var(--pgn-color-brand-base) 20%,
9393
);
9494
background-repeat: no-repeat;
9595
}
9696

97-
@include media-breakpoint-only('md') {
97+
@media (--pgn-size-breakpoint-min-width-md) and (--pgn-size-breakpoint-max-width-md) {
9898
.medium-screen-top-stripe {
9999
display: flex;
100100
height: 0.5rem;
101101
background-image: linear-gradient(
102102
102.02deg,
103-
$brand-700,
104-
$brand-700 10%,
105-
$brand 10%,
106-
$brand 90%,
107-
$primary-700 90%,
108-
$primary-700 100%,
103+
var(--pgn-color-brand-700),
104+
var(--pgn-color-brand-700) 10%,
105+
var(--pgn-color-brand-base) 10%,
106+
var(--pgn-color-brand-base) 90%,
107+
var(--pgn-color-primary-700) 90%,
108+
var(--pgn-color-primary-700) 100%,
109109
);
110110
background-repeat: no-repeat;
111111
}
112112
}
113113

114-
@include media-breakpoint-only('lg') {
114+
@media (--pgn-size-breakpoint-min-width-lg) and (--pgn-size-breakpoint-max-width-lg){
115115
.medium-screen-top-stripe {
116116
display: flex;
117117
height: 0.5rem;
118118
background-image: linear-gradient(
119119
102.02deg,
120-
$brand-700 10%,
121-
$brand 10%,
122-
$brand 65%,
123-
$primary-700 65%,
124-
$primary-700 75%,
125-
$accent-a 75%,
126-
$accent-a 75%
120+
var(--pgn-color-brand-700) 10%,
121+
var(--pgn-color-brand-base) 10%,
122+
var(--pgn-color-brand-base) 65%,
123+
var(--pgn-color-primary-700) 65%,
124+
var(--pgn-color-primary-700) 75%,
125+
var(--pgn-color-accent-a) 75%,
126+
var(--pgn-color-accent-a) 75%
127127
);
128128
background-repeat: no-repeat;
129129
}
130130
}
131131

132132
.extra-large-screen-top-stripe { display: none; }
133133

134-
@include media-breakpoint-up('xl') {
134+
@media (--pgn-size-breakpoint-min-width-xl) {
135135
.extra-large-screen-top-stripe {
136136
display: flex;
137137
height: 0.5rem;
138138
background-image: linear-gradient(
139139
102.02deg,
140-
$brand-700 10%,
141-
$brand 10%,
142-
$brand 45%,
143-
$primary-700 45%,
144-
$primary-700 55%,
145-
$accent-a 55%,
146-
$accent-a 75%,
147-
$info-200 75%,
140+
var(--pgn-color-brand-700) 10%,
141+
var(--pgn-color-brand-base) 10%,
142+
var(--pgn-color-brand-base) 45%,
143+
var(--pgn-color-primary-700) 45%,
144+
var(--pgn-color-primary-700) 55%,
145+
var(--pgn-color-accent-a) 55%,
146+
var(--pgn-color-accent-a) 75%,
147+
var(--pgn-color-info-200) 75%,
148148
);
149149
background-repeat: no-repeat;
150150
}
151151
}
152152

153153
.large-screen-svg-light,
154154
.large-screen-svg-primary {
155-
fill: $light-200;
155+
fill: var(--pgn-color-light-200);
156156
overflow: hidden;
157157
position: absolute;
158158
}
159159

160160
.large-screen-svg-primary {
161-
fill: $primary-400;
161+
fill: var(--pgn-color-primary-400);
162162
}
163163

164164
.medium-screen-svg-light,
165165
.medium-screen-svg-primary {
166-
fill: $light-200;
166+
fill: var(--pgn-color-light-200);
167167
overflow: inherit;
168168
position: absolute;
169169
}
170170

171171
.medium-screen-svg-primary {
172-
fill: $primary-400;
172+
fill: var(--pgn-color-primary-400);
173173
}
174174

175175
[dir=rtl]{
@@ -184,20 +184,20 @@
184184
.small-yellow-line {
185185
width: 80px;
186186
height: 0;
187-
border: 2px solid $accent-b;
187+
border: 2px solid var(--pgn-color-accent-b);
188188
transform: rotate(102.02deg);
189189
}
190190

191191
.medium-yellow-line {
192192
width: 120px;
193193
height: 0;
194-
border: 3px solid $accent-b;
194+
border: 3px solid var(--pgn-color-accent-b);
195195
transform: rotate(102.02deg);
196196
}
197197

198198
.large-yellow-line {
199199
width: 240px;
200200
height: 0;
201-
border: 3px solid $accent-b;
201+
border: 3px solid var(--pgn-color-accent-b);
202202
transform: rotate(102.02deg);
203203
}

‎src/sass/_progressive_profiling_page.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
margin-bottom: 0.5rem;
1212
font-weight: 700;
1313

14-
@include media-breakpoint-down('md') {
14+
@media (--pgn-size-breakpoint-max-width-md) {
1515
line-height: 1.5rem;
1616
font-size: 1.125rem;
1717
}

‎src/sass/_recommendations_card_base.scss‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -64,52 +64,52 @@ $header-height: 104px;
6464
}
6565

6666
&.light {
67-
background-color: $white;
67+
background-color: var(--pgn-color-white);
6868

6969
.title {
70-
color: $black;
70+
color: var(--pgn-color-black);
7171
}
7272

7373
.subtitle {
74-
color: $gray-700;
74+
color: var(--pgn-color-gray-700);
7575
}
7676

7777
.badge {
78-
background-color: $light-500;
79-
color: $black;
78+
background-color: var(--pgn-color-light-500);
79+
color: var(--pgn-color-black);
8080
}
8181

8282
.footer-content {
83-
color: $gray-700;
83+
color: var(--pgn-color-gray-700);
8484
}
8585
}
8686

8787
&.dark {
88-
background-color: $primary-500;
88+
background-color: var(--pgn-color-primary-500);
8989

9090
.pgn__card-header-title-md {
91-
color: $white;
91+
color: var(--pgn-color-white);
9292
}
9393

9494
.pgn__card-header-subtitle-md {
95-
color: $light-200;
95+
color: var(--pgn-color-light-200);
9696
}
9797

9898
.title {
99-
color: $white;
99+
color: var(--pgn-color-white);
100100
}
101101

102102
.subtitle {
103-
color: $light-200;
103+
color: var(--pgn-color-light-200);
104104
}
105105

106106
.badge {
107-
background-color: $dark-200;
108-
color: $white;
107+
background-color: var(--pgn-color-dark-200);
108+
color: var(--pgn-color-white);
109109
}
110110

111111
.footer-content {
112-
color: $light-200;
112+
color: var(--pgn-color-light-200);
113113
}
114114
}
115115
}

‎src/sass/_recommendations_page.scss‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@ $card-gap: 24px;
33
.recommendations-container__card-list {
44
gap: $card-gap $card-gap;
55

6-
@include media-breakpoint-down(sm) {
6+
@media (-pgn-size-breakpoint-max-width-sm) {
77
margin-bottom: 0 !important;
88
}
99

1010
.recommendation-card {
1111
flex: 0 1 100%;
1212
cursor: pointer;
1313

14-
@include media-breakpoint-up(sm) {
14+
@media (--pgn-size-breakpoint-min-width-sm) {
1515
flex: 0 1 calc(50% - #{$card-gap - 12});
1616
}
1717

18-
@include media-breakpoint-up(md) {
18+
@media (--pgn-size-breakpoint-min-width-md) {
1919
flex: 0 1 calc(33.333% - #{$card-gap - 8});
2020
}
2121

22-
@include media-breakpoint-up(lg) {
22+
@media (--pgn-size-breakpoint-min-width-lg) {
2323
flex: 0 1 calc(25% - #{$card-gap - 6});
2424
}
2525
}

‎src/sass/_registration.scss‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,21 @@
2323
}
2424

2525
.alert-link {
26-
color: $primary !important;
26+
color: var(--pgn-color-primary-base) !important;
2727

2828
&:hover {
2929
text-decoration: underline;
30-
color: $info-700 !important;
30+
color: var(--pgn-color-info-700) !important;
3131
}
3232
}
3333
}
3434

3535
.email-suggestion-alert-warning {
36-
color: $info-500 !important;
36+
color: var(--pgn-color-info-500) !important;
3737

3838
&:hover {
3939
text-decoration: underline;
40-
color: $info-700 !important;
40+
color: var(--pgn-color-info-700) !important;
4141
}
4242
}
4343

@@ -56,7 +56,7 @@
5656
line-height: 24px;
5757
font-size: 12px;
5858
font-weight: normal;
59-
color: $primary-700;
59+
color: var(--pgn-color-primary-700);
6060
}
6161

6262
.username-suggestion--label {
@@ -99,7 +99,7 @@
9999
}
100100
}
101101

102-
@media (max-width: map-get($grid-breakpoints, "sm")) {
102+
@media (--pgn-size-breakpoint-max-width-sm) {
103103
.username-scroll-suggested--form-field {
104104
width: 15rem;
105105
}

0 commit comments

Comments
 (0)