Skip to content

Commit 1760de3

Browse files
authored
chore: replaced @import by @use (#2522)
1 parent 1fff3ee commit 1760de3

20 files changed

+121
-116
lines changed

static/scss/_about-us.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use 'breakpoints' as *;
1+
@use 'breakpoints';
22

33
.about-us-container {
44
background-color: var(--blue-ecume-950-100);
@@ -19,7 +19,7 @@
1919
height: 100%;
2020
}
2121

22-
@media screen and (min-width: $viewport-lg) {
22+
@media screen and (min-width: breakpoints.$viewport-lg) {
2323
grid-template-columns: repeat(3, 1fr);
2424
column-gap: 24px;
2525
}
@@ -45,11 +45,11 @@
4545
row-gap: 16px;
4646
justify-content: center;
4747

48-
@media screen and (min-width: $viewport-md) {
48+
@media screen and (min-width: breakpoints.$viewport-md) {
4949
grid-template-columns: repeat(3, minmax(192px, 1fr));
5050
}
5151

52-
@media screen and (min-width: $viewport-xl) {
52+
@media screen and (min-width: breakpoints.$viewport-xl) {
5353
grid-template-columns: repeat(5, minmax(192px, 1fr));
5454
}
5555

@@ -70,7 +70,7 @@
7070
padding-top: 0;
7171
}
7272

73-
@media screen and (max-width: $viewport-sm) {
73+
@media screen and (max-width: breakpoints.$viewport-sm) {
7474
grid-template-columns: repeat(auto-fit, 100%);
7575
column-gap: 24px;
7676

@@ -89,7 +89,7 @@
8989
width: 92px;
9090
}
9191

92-
@media screen and (max-width: $viewport-sm) {
92+
@media screen and (max-width: breakpoints.$viewport-sm) {
9393
img {
9494
height: 138px;
9595
width: 138px;

static/scss/_account-erps.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use 'breakpoints' as *;
1+
@use 'breakpoints';
22

33
.account-erps {
44
.fr-tabs__panel {
@@ -7,7 +7,7 @@
77

88
.fr-card__footer {
99
.fr-btns-group {
10-
@media screen and (min-width: $viewport-lg) {
10+
@media screen and (min-width: breakpoints.$viewport-lg) {
1111
justify-self: flex-end;
1212
}
1313
}

static/scss/_challenge.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use 'breakpoints' as *;
1+
@use 'breakpoints';
22

33
.challenge-container {
44
background-color: var(--info-950-100);
@@ -24,7 +24,7 @@
2424
flex: 1;
2525
}
2626

27-
@media screen and (max-width: $viewport-md) {
27+
@media screen and (max-width: breakpoints.$viewport-md) {
2828
flex-direction: column;
2929
}
3030
}
@@ -36,11 +36,11 @@
3636
justify-content: center;
3737
padding: 0;
3838

39-
@media screen and (max-width: $viewport-md) {
39+
@media screen and (max-width: breakpoints.$viewport-md) {
4040
grid-template-columns: repeat(2, auto);
4141
}
4242

43-
@media screen and (max-width: $viewport-sm) {
43+
@media screen and (max-width: breakpoints.$viewport-sm) {
4444
grid-template-columns: repeat(1, auto);
4545
}
4646

@@ -56,11 +56,11 @@
5656
width: 180px;
5757
word-break: break-all;
5858

59-
@media screen and (max-width: $viewport-md) {
59+
@media screen and (max-width: breakpoints.$viewport-md) {
6060
width: 240px;
6161
}
6262

63-
@media screen and (max-width: $viewport-sm) {
63+
@media screen and (max-width: breakpoints.$viewport-sm) {
6464
width: 100%;
6565
}
6666
}
@@ -84,13 +84,13 @@
8484
.fr-callout {
8585
min-width: 790px;
8686

87-
@media screen and (max-width: $viewport-md) {
87+
@media screen and (max-width: breakpoints.$viewport-md) {
8888
min-width: initial;
8989
width: 100%;
9090
}
9191
}
9292

93-
@media screen and (max-width: $viewport-md) {
93+
@media screen and (max-width: breakpoints.$viewport-md) {
9494
min-width: auto;
9595
width: 100%;
9696
}

static/scss/_challenges.scss

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use 'breakpoints' as *;
1+
@use 'breakpoints';
22

33
.challenges-container {
44
--base-padding: 48px;
@@ -21,7 +21,7 @@
2121
padding: var(--base-padding);
2222
gap: 24px;
2323

24-
@media screen and (max-width: $viewport-md) {
24+
@media screen and (max-width: breakpoints.$viewport-md) {
2525
padding: var(--padding-md-breakpoint);
2626
}
2727
}
@@ -75,7 +75,7 @@
7575
top: 0;
7676
}
7777

78-
@media screen and (max-width: $viewport-md) {
78+
@media screen and (max-width: breakpoints.$viewport-md) {
7979
flex-direction: column;
8080
gap: 32px;
8181
padding: var(--padding-md-breakpoint);
@@ -94,7 +94,7 @@
9494
.challenges-list-section {
9595
padding: var(--base-padding);
9696

97-
@media screen and (max-width: $viewport-md) {
97+
@media screen and (max-width: breakpoints.$viewport-md) {
9898
padding: var(--padding-md-breakpoint);
9999
}
100100
}
@@ -107,11 +107,11 @@
107107
padding: 0;
108108
gap: 16px;
109109

110-
@media screen and (max-width: $viewport-xl) {
110+
@media screen and (max-width: breakpoints.$viewport-xl) {
111111
grid-template-columns: repeat(2, 1fr);
112112
}
113113

114-
@media screen and (max-width: $viewport-lg) {
114+
@media screen and (max-width: breakpoints.$viewport-lg) {
115115
grid-template-columns: repeat(1, 1fr);
116116
}
117117

static/scss/_contact-form-page.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@use 'breakpoints' as *;
1+
@use 'breakpoints';
22

33
.contact-container {
4-
@media (min-width: $viewport-xl) {
4+
@media (min-width: breakpoints.$viewport-xl) {
55
position: relative;
66
background-image: url(/static/img/contact/contact-background.png);
77
background-repeat: no-repeat;

static/scss/_erp-details.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use 'breakpoints' as *;
1+
@use 'breakpoints';
22

33
.erp-details-container {
44
display: flex;
@@ -19,7 +19,7 @@
1919
width: 100%;
2020
}
2121

22-
@media (min-width: $viewport-md) {
22+
@media (min-width: breakpoints.$viewport-md) {
2323
flex-direction: row;
2424
}
2525
}

static/scss/_header.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use 'breakpoints' as *;
1+
@use 'breakpoints';
22

33
.fr-header {
44
.fr-responsive-img {
@@ -10,7 +10,7 @@
1010

1111
span {
1212
display: none;
13-
@media (min-width: $viewport-lg) {
13+
@media (min-width: breakpoints.$viewport-lg) {
1414
display: block;
1515
position: absolute;
1616
left: 0px;

static/scss/_home.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use 'breakpoints' as *;
1+
@use 'breakpoints';
22

33
.home-container {
44
.main-info-container {
@@ -32,7 +32,7 @@
3232
flex: 1;
3333
}
3434

35-
@media screen and (max-width: $viewport-lg) {
35+
@media screen and (max-width: breakpoints.$viewport-lg) {
3636
padding: 32px 0;
3737

3838
.fr-container {
@@ -102,13 +102,13 @@
102102
bottom: -30px;
103103
}
104104

105-
@media screen and (max-width: $viewport-lg) {
105+
@media screen and (max-width: breakpoints.$viewport-lg) {
106106
img:last-child {
107107
display: none;
108108
}
109109
}
110110

111-
@media screen and (max-width: $viewport-md) {
111+
@media screen and (max-width: breakpoints.$viewport-md) {
112112
img:nth-child(2) {
113113
position: absolute;
114114
right: -30px;
@@ -148,7 +148,7 @@
148148
flex-direction: row;
149149
}
150150

151-
@media screen and (max-width: $viewport-lg) {
151+
@media screen and (max-width: breakpoints.$viewport-lg) {
152152
padding: 32px 0;
153153

154154
h1 {
@@ -233,7 +233,7 @@
233233
right: 0;
234234
}
235235

236-
@media screen and (max-width: $viewport-lg) {
236+
@media screen and (max-width: breakpoints.$viewport-lg) {
237237
padding: 32px 0;
238238

239239
&__pin-wrapper-1,
@@ -270,7 +270,7 @@
270270
}
271271
}
272272

273-
@media screen and (max-width: $viewport-lg) {
273+
@media screen and (max-width: breakpoints.$viewport-lg) {
274274
.fr-container {
275275
gap: 24px;
276276
}

static/scss/_login-form-page.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
@use 'breakpoints' as *;
1+
@use 'breakpoints';
22

33
.login-container {
4-
@media (min-width: $viewport-xl) {
4+
@media (min-width: breakpoints.$viewport-xl) {
55
.fr-alert {
66
max-width: 540px;
77
}

static/scss/_main-search.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use 'breakpoints' as *;
1+
@use 'breakpoints';
22

33
:root {
44
--main-filters-width: 350px;
@@ -36,7 +36,7 @@
3636
--tabs-height: auto !important;
3737
}
3838

39-
@media (min-width: $viewport-lg) {
39+
@media (min-width: breakpoints.$viewport-lg) {
4040
.fr-tabs__list {
4141
display: none !important;
4242
}
@@ -56,7 +56,7 @@
5656
}
5757

5858
// Little hack/workaround to have all panels visible on dekstop res
59-
@media screen and (min-width: $viewport-lg) {
59+
@media screen and (min-width: breakpoints.$viewport-lg) {
6060
.fr-tabs__panel {
6161
visibility: visible;
6262
transform: translate(0);
@@ -71,7 +71,7 @@
7171
flex: 0 0 calc(100% - var(--main-filters-width) - var(--search-list-width));
7272
margin-left: auto;
7373

74-
@media screen and (max-width: $viewport-lg) {
74+
@media screen and (max-width: breakpoints.$viewport-lg) {
7575
width: 100%;
7676
max-width: 100%;
7777
flex: 1;
@@ -95,7 +95,7 @@
9595
height: calc(100% - 12px);
9696
padding: 16px !important;
9797

98-
@media screen and (max-width: $viewport-lg) {
98+
@media screen and (max-width: breakpoints.$viewport-lg) {
9999
position: relative;
100100
left: 0;
101101
top: 0;
@@ -126,7 +126,7 @@
126126
padding-bottom: 0 !important;
127127
}
128128

129-
@media screen and (max-width: $viewport-lg) {
129+
@media screen and (max-width: breakpoints.$viewport-lg) {
130130
position: relative;
131131
left: 0;
132132
top: 0;
@@ -166,7 +166,7 @@ div.equipments > span:not(.hidden, .section-text) {
166166
padding: 0;
167167
}
168168

169-
@media (min-width: $viewport-md) {
169+
@media (min-width: breakpoints.$viewport-md) {
170170
div.equipments .section-text {
171171
width: 110px;
172172
text-align: left;

0 commit comments

Comments
 (0)