Skip to content

Commit cb13f31

Browse files
parloughparlough
authored
Account for sass import deprecation (#8161)
1 parent 9f6be3e commit cb13f31

File tree

11 files changed

+104
-82
lines changed

11 files changed

+104
-82
lines changed

‎pkg/web_css/lib/src/_base.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@
55
/******************************************************
66
site base
77
******************************************************/
8+
9+
@use 'variables';
10+
811
* {
912
box-sizing: border-box;
1013
}
@@ -113,7 +116,7 @@ main {
113116
/* Useful for synchronizing the alignment of different page blocks. */
114117
.container,
115118
.-wide-header-detail-page .detail-container {
116-
max-width: $site-max-width;
119+
max-width: variables.$site-max-width;
117120
/* The top and bottom margins are left on default to allow `main` to set it. */
118121
margin-left: auto;
119122
margin-right: auto;
@@ -219,7 +222,7 @@ pre {
219222
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.05);
220223

221224
white-space: nowrap;
222-
transition: opacity $copy-feedback-transition-opacity-delay;
225+
transition: opacity variables.$copy-feedback-transition-opacity-delay;
223226

224227
&.visible {
225228
display: block;

‎pkg/web_css/lib/src/_detail_page.scss‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
for details. All rights reserved. Use of this source code is governed by a
33
BSD-style license that can be found in the LICENSE file. */
44

5+
@use 'variables';
6+
57
$info-box-width: 190px;
68
$info-box-margin: 120px;
79
$info-box-tablet-margin: 40px;
@@ -19,7 +21,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
1921

2022
.detail-header {
2123
// On desktop this will make the wide header block to be centered.
22-
@media (min-width: $device-desktop-min-width) {
24+
@media (min-width: variables.$device-desktop-min-width) {
2325
display: flex;
2426
}
2527
}
@@ -34,7 +36,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
3436
}
3537

3638
.detail-info-box {
37-
@media (max-width: $device-mobile-max-width) {
39+
@media (max-width: variables.$device-mobile-max-width) {
3840
display: none;
3941
}
4042
}
@@ -51,7 +53,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
5153
top: 0px;
5254
right: 0px;
5355

54-
@media (min-width: $device-desktop-min-width) {
56+
@media (min-width: variables.$device-desktop-min-width) {
5557
width: $info-box-width + 10px;
5658
}
5759

@@ -60,15 +62,15 @@ $detail-tabs-tablet-width: calc(100% - 240px);
6062
}
6163

6264
.ff-banner-desktop {
63-
@media (min-width: $device-desktop-min-width) {
65+
@media (min-width: variables.$device-desktop-min-width) {
6466
display: inline-block;
6567
width: 75px;
6668
height: 109px;
6769
}
6870
}
6971

7072
.ff-banner-mobile {
71-
@media (max-width: $device-mobile-max-width) {
73+
@media (max-width: variables.$device-mobile-max-width) {
7274
display: inline-block;
7375
width: 47px;
7476
height: 58px;
@@ -84,7 +86,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
8486
margin: 0;
8587
font-size: 24px;
8688

87-
@media (min-width: $device-desktop-min-width) {
89+
@media (min-width: variables.$device-desktop-min-width) {
8890
font-size: 36px;
8991
}
9092
}
@@ -102,7 +104,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
102104
display: none;
103105
margin-top: 16px;
104106

105-
@media (max-width: $device-mobile-max-width) {
107+
@media (max-width: variables.$device-mobile-max-width) {
106108
display: block;
107109
}
108110

@@ -139,7 +141,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
139141
max-width: 200px;
140142
max-height: 200px;
141143

142-
@media (max-width: $device-mobile-max-width) {
144+
@media (max-width: variables.$device-mobile-max-width) {
143145
max-width: 100px;
144146
max-height: 100px;
145147
}
@@ -153,7 +155,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
153155
display: flex;
154156
align-items: center;
155157

156-
@media (min-width: $device-desktop-min-width) {
158+
@media (min-width: variables.$device-desktop-min-width) {
157159
display: inline-flex;
158160
margin-right: 16px;
159161
}
@@ -234,7 +236,6 @@ $detail-tabs-tablet-width: calc(100% - 240px);
234236
filter: brightness(50%);
235237
}
236238

237-
238239
.weekly-downloads-sparkline {
239240
display: flex;
240241
height: 105px;
@@ -284,7 +285,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
284285
stroke-width: 2;
285286
}
286287

287-
@media (min-width: $device-desktop-min-width) {
288+
@media (min-width: variables.$device-desktop-min-width) {
288289
.detail-body {
289290

290291
>.detail-tabs {
@@ -296,7 +297,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
296297
margin-left: $info-box-margin;
297298
width: $info-box-width;
298299

299-
@media (max-width: $device-tablet-max-width) {
300+
@media (max-width: variables.$device-tablet-max-width) {
300301
margin-left: $info-box-tablet-margin;
301302
}
302303
}
@@ -308,7 +309,7 @@ $detail-tabs-tablet-width: calc(100% - 240px);
308309
display: inline-block;
309310
width: $detail-tabs-width;
310311

311-
@media (max-width: $device-tablet-max-width) {
312+
@media (max-width: variables.$device-tablet-max-width) {
312313
width: $detail-tabs-tablet-width;
313314
}
314315
}

‎pkg/web_css/lib/src/_home.scss‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
home page
77
******************************************************/
88

9+
@use 'variables';
10+
911
.home-banner {
1012
text-align: center;
1113
padding: 30px 20px 0px 20px;
@@ -16,7 +18,7 @@
1618
max-height: 70px;
1719
margin-bottom: 28px;
1820

19-
@media (max-width: $device-mobile-max-width) {
21+
@media (max-width: variables.$device-mobile-max-width) {
2022
max-width: 188px;
2123
max-height: 40px;
2224
margin-bottom: 22px;
@@ -115,7 +117,7 @@
115117
background: var(--pub-neutral-hover-bgColor);
116118
box-shadow: 0px 4px 9px 0px var(--pub-home_card_hover-box_shadow-color);
117119

118-
@media (min-width: $device-desktop-min-width) {
120+
@media (min-width: variables.$device-desktop-min-width) {
119121
.mini-list-item-body {
120122
&:before {
121123
background: linear-gradient(transparent 90%, var(--pub-neutral-hover-bgColor));
@@ -166,7 +168,7 @@
166168
text-align: right;
167169
padding-right: 8px;
168170

169-
@media (min-width: $device-desktop-min-width) {
171+
@media (min-width: variables.$device-desktop-min-width) {
170172
margin-right: 16px;
171173
}
172174
}
@@ -177,7 +179,7 @@
177179
text-transform: uppercase;
178180
}
179181

180-
@media (min-width: $device-desktop-min-width) {
182+
@media (min-width: variables.$device-desktop-min-width) {
181183
.mini-list {
182184
display: flex;
183185
flex-wrap: wrap;
@@ -215,7 +217,7 @@
215217
}
216218
}
217219

218-
@media (min-width: $device-desktop-min-width) {
220+
@media (min-width: variables.$device-desktop-min-width) {
219221
&.home-block-ff,
220222
&.home-block-pow {
221223
.home-block-content {
@@ -282,7 +284,7 @@
282284
padding: 4px;
283285
margin: -3px -3px 10px -3px;
284286

285-
@media (min-width: $device-desktop-min-width) {
287+
@media (min-width: variables.$device-desktop-min-width) {
286288
display: flex;
287289
}
288290

@@ -302,7 +304,7 @@
302304
.pow-video-thumbnail {
303305
height: auto;
304306
width: 100%;
305-
@media (min-width: $device-desktop-min-width) {
307+
@media (min-width: variables.$device-desktop-min-width) {
306308
max-width: 260px;
307309
max-height: 195px;
308310
}

‎pkg/web_css/lib/src/_list.scss‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
for details. All rights reserved. Use of this source code is governed by a
33
BSD-style license that can be found in the LICENSE file. */
44

5+
@use 'variables';
6+
57
.listing-info {
68
display: flex;
79
padding: 16px 0px 20px 0px;
@@ -29,7 +31,7 @@
2931
text-transform: uppercase;
3032
white-space: nowrap;
3133

32-
@media (max-width: $device-mobile-max-width) {
34+
@media (max-width: variables.$device-mobile-max-width) {
3335
display: none;
3436
}
3537
}
@@ -60,7 +62,7 @@
6062
position: absolute;
6163
right: 0px;
6264
white-space: nowrap;
63-
z-index: $z-index-nav-mask;
65+
z-index: variables.$z-index-nav-mask;
6466

6567
.sort-control-option {
6668
display: block;
@@ -92,7 +94,7 @@
9294

9395
&:hover {
9496
.sort-control-popup {
95-
@media (min-width: $device-desktop-min-width) {
97+
@media (min-width: variables.$device-desktop-min-width) {
9698
display: block;
9799
}
98100
}
@@ -303,7 +305,7 @@
303305
padding: 0;
304306
margin: 8px 0;
305307

306-
@media (min-width: $device-desktop-min-width) {
308+
@media (min-width: variables.$device-desktop-min-width) {
307309
padding: 4px 8px;
308310
margin-left: -8px;
309311
}
@@ -376,7 +378,7 @@
376378
.search-form-container {
377379
display: flex;
378380

379-
@media (max-width: $device-mobile-max-width) {
381+
@media (max-width: variables.$device-mobile-max-width) {
380382
display: block;
381383

382384
.search-form {
@@ -395,7 +397,7 @@
395397
flex-shrink: 0;
396398
flex-basis: 200px;
397399

398-
@media (min-width: $device-desktop-min-width) {
400+
@media (min-width: variables.$device-desktop-min-width) {
399401
margin-right: 40px;
400402
}
401403
}

‎pkg/web_css/lib/src/_pkg.scss‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
for details. All rights reserved. Use of this source code is governed by a
33
BSD-style license that can be found in the LICENSE file. */
44

5+
@use 'variables';
6+
57
.package-badge {
68
display: inline-block;
79
background: var(--pub-neutral-bgColor);
@@ -57,7 +59,7 @@
5759
&.badge {
5860
width: 100px;
5961

60-
@media (max-width: $device-mobile-max-width) {
62+
@media (max-width: variables.$device-mobile-max-width) {
6163
display: none;
6264
}
6365
}
@@ -97,7 +99,7 @@
9799
display: none;
98100
}
99101

100-
@media (max-width: $device-mobile-max-width) {
102+
@media (max-width: variables.$device-mobile-max-width) {
101103
&.sdk > span.label,
102104
&.uploaded > span.label {
103105
display: none;
@@ -144,7 +146,7 @@
144146
justify-content: space-evenly;
145147
padding: 20px 0 30px 0;
146148

147-
@media (min-width: $device-desktop-min-width) {
149+
@media (min-width: variables.$device-desktop-min-width) {
148150
padding: 40px 0 50px 0;
149151
}
150152

@@ -158,7 +160,7 @@
158160
font-size: 32px;
159161
line-height: 1;
160162

161-
@media (min-width: $device-desktop-min-width) {
163+
@media (min-width: variables.$device-desktop-min-width) {
162164
font-size: 64px;
163165
}
164166
}
@@ -249,7 +251,7 @@
249251

250252
.markdown-body {
251253
table {
252-
@media (min-width: $device-desktop-min-width) {
254+
@media (min-width: variables.$device-desktop-min-width) {
253255
// Normally markdown-tables do use 100% width, but for
254256
// an unknown layout rule this is not doing it.
255257
// Forcing table to take the maximum available width,
@@ -311,7 +313,7 @@
311313

312314
opacity: 1;
313315
display: none;
314-
transition: opacity $copy-feedback-transition-opacity-delay;
316+
transition: opacity variables.$copy-feedback-transition-opacity-delay;
315317

316318
>.code {
317319
font-family: var(--pub-code-text-font_family);
@@ -340,7 +342,7 @@
340342
// to keep everything visible at the same time.
341343
font-size: 50%;
342344

343-
@media (min-width: $device-desktop-min-width) {
345+
@media (min-width: variables.$device-desktop-min-width) {
344346
// On larger screens the above setting seems to be too small. The
345347
// vertical width scaling will roughly make the 80-character lines
346348
// fit the available width of the container.

0 commit comments

Comments
 (0)