Skip to content

Commit 3bc2c64

Browse files
SergeyMosinSergeyMosin
committedMar 17, 2025
update node/build dependencies + fix sass deprecations
·
v2.4.1v2.4.0
1 parent 8a4f151 commit 3bc2c64

8 files changed

+12709
-8089
lines changed
 

‎package-lock.json

+12,576
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+46-46
Original file line numberDiff line numberDiff line change
@@ -12,57 +12,57 @@
1212
"profile": "webpack --config webpack.prod.js --profile --json > stats.json"
1313
},
1414
"dependencies": {
15-
"@nextcloud/axios": "^2.5.1",
16-
"@nextcloud/dialogs": "^5.3.8",
17-
"@nextcloud/l10n": "^3.1.0",
18-
"@nextcloud/logger": "^3.0.2",
19-
"@nextcloud/router": "^3.0.1",
20-
"@nextcloud/vue": "^8.20.0",
21-
"vue": "^2.7.16",
22-
"vue-material-design-icons": "^5.3.1",
23-
"vue-slider-component": "^3.2.24",
24-
"vue2-datepicker": "^3.11.1",
25-
"linkifyjs": "^4.1.3",
26-
"pinia": "^2.2.6"
15+
"@nextcloud/axios": "~2.5.1",
16+
"@nextcloud/dialogs": "~5.3.8",
17+
"@nextcloud/l10n": "~3.2.0",
18+
"@nextcloud/logger": "~3.0.2",
19+
"@nextcloud/router": "~3.0.1",
20+
"@nextcloud/vue": "~8.23.1",
21+
"vue": "~2.7.16",
22+
"vue-material-design-icons": "~5.3.1",
23+
"vue-slider-component": "3.2.24",
24+
"vue2-datepicker": "3.11.1",
25+
"linkifyjs": "~4.2.0",
26+
"pinia": "~2.3.1"
2727
},
2828
"engines": {
2929
"node": ">=10.0.0"
3030
},
3131
"devDependencies": {
32-
"@babel/core": "^7.23.5",
33-
"@babel/plugin-proposal-class-properties": "^7.18.6",
34-
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
35-
"@babel/plugin-transform-modules-commonjs": "^7.23.3",
36-
"@babel/plugin-transform-shorthand-properties": "^7.23.3",
37-
"@babel/plugin-proposal-object-rest-spread": "^7.20.7",
38-
"@babel/eslint-parser": "^7.23.3",
39-
"@nextcloud/babel-config": "^1.0.0",
40-
"@nextcloud/browserslist-config": "^3.0.0",
41-
"@vue/compiler-sfc": "^3.3.11",
42-
"@vue/test-utils": "^1.2.0",
43-
"assert": "^2.0.0",
44-
"babel-core": "^6.26.3",
45-
"babel-jest": "^27.5.1",
46-
"babel-loader": "^8.2.3",
47-
"buffer": "^6.0.3",
48-
"copy-webpack-plugin": "^11.0.0",
49-
"css-loader": "^5.2.6",
50-
"eslint": "^8.9.0",
51-
"file-loader": "^6.2.0",
52-
"process": "^0.11.10",
53-
"regenerator-runtime": "^0.13.9",
54-
"sass": "^1.63.6",
55-
"sass-loader": "^13.3.2",
56-
"terser-webpack-plugin": "^5.3.9",
57-
"util": "^0.12.5",
58-
"uuid": "^9.0.0",
59-
"vue-jest": "^3.0.7",
60-
"vue-loader": "^15.10.0",
61-
"vue-style-loader": "^4.1.3",
62-
"vue-template-compiler": "^2.6.14",
63-
"webpack": "^5.89.0",
64-
"webpack-cli": "^5.1.4",
65-
"webpack-merge": "^5.9.0"
32+
"@babel/core": "~7.26.10",
33+
"@babel/plugin-proposal-class-properties": "~7.18.6",
34+
"@babel/plugin-syntax-dynamic-import": "~7.8.3",
35+
"@babel/plugin-transform-modules-commonjs": "~7.26.3",
36+
"@babel/plugin-transform-shorthand-properties": "~7.25.9",
37+
"@babel/plugin-proposal-object-rest-spread": "~7.20.7",
38+
"@babel/eslint-parser": "~7.26.10",
39+
"@nextcloud/babel-config": "~1.2.0",
40+
"@nextcloud/browserslist-config": "~3.0.1",
41+
"@vue/compiler-sfc": "~3.5.13",
42+
"@vue/test-utils": "~1.3.6",
43+
"assert": "~2.1.0",
44+
"babel-core": "~6.26.3",
45+
"babel-jest": "~28.1.3",
46+
"babel-loader": "~8.4.1",
47+
"buffer": "~6.0.3",
48+
"copy-webpack-plugin": "~12.0.2",
49+
"css-loader": "~5.2.7",
50+
"eslint": "~8.57.1",
51+
"file-loader": "~6.2.0",
52+
"process": "0.11.10",
53+
"regenerator-runtime": "~0.13.11",
54+
"sass": "~1.85.1",
55+
"sass-loader": "~14.2.1",
56+
"terser-webpack-plugin": "~5.3.14",
57+
"util": "~0.12.5",
58+
"uuid": "~11.1.0",
59+
"vue-jest": "~3.0.7",
60+
"vue-loader": "~15.11.1",
61+
"vue-style-loader": "~4.1.3",
62+
"vue-template-compiler": "~2.7.16",
63+
"webpack": "~5.98.0",
64+
"webpack-cli": "~5.1.4",
65+
"webpack-merge": "~5.10.0"
6666
},
6767
"browserslist": [
6868
"extends @nextcloud/browserslist-config"

‎pnpm-lock.yaml

-7,964
This file was deleted.

‎scss/_form-xl-screen.scss

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
/*X-Large screens*/
2-
@media screen and (min-width: 1880px){
3-
.srgdev-ncfp-wrap {
4-
font-size: 22px
2+
@mixin xl-screen {
3+
@media screen and (min-width: 1880px) {
4+
.srgdev-ncfp-wrap {
5+
font-size: 22px
6+
}
57
}
68
}

‎scss/_svariables.scss

+17-13
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,18 @@
1919
* along with this program. If not, see <http://www.gnu.org/licenses/>.
2020
*
2121
*/
22+
@use "sass:color";
2223

2324
// SCSS darken/lighten function override
2425
@function nc-darken($color, $value) {
25-
@return darken($color, $value);
26+
//@return darken($color, $value);
27+
@return color.adjust($color, $blackness: $value);
2628
}
2729

2830
@function nc-lighten($color, $value) {
29-
@return lighten($color, $value);
31+
//@return lighten($color, $value);
32+
@return color.adjust($color, $lightness: $value);
33+
3034
}
3135

3236
// SCSS variables
@@ -44,27 +48,27 @@ $color-placeholder-light: nc-darken($color-main-background, 10%) !default;
4448
$color-placeholder-dark: nc-darken($color-main-background, 20%) !default;
4549

4650
$color-primary: #0082c9 !default;
47-
$color-primary-hover: mix($color-primary, $color-main-background, 80%) !default;
51+
$color-primary-hover: color.mix($color-primary, $color-main-background, 80%) !default;
4852

49-
$color-primary-light: mix($color-primary, $color-main-background, 10%) !default;
53+
$color-primary-light: color.mix($color-primary, $color-main-background, 10%) !default;
5054
$color-primary-light-text: $color-primary !default;
51-
$color-primary-light-hover: mix($color-primary-light, $color-main-text, 95%) !default;
55+
$color-primary-light-hover: color.mix($color-primary-light, $color-main-text, 95%) !default;
5256

5357
$color-primary-text: #ffffff !default;
5458
// do not use nc-darken/lighten in case of overriding because
5559
// primary-text is independent of color-main-text
56-
$color-primary-text-dark: darken($color-primary-text, 7%) !default;
60+
$color-primary-text-dark: color.adjust($color-primary-text, $blackness: 7%) !default;
5761
$color-primary-element: $color-primary !default;
58-
$color-primary-element-hover: mix($color-primary-element, $color-main-background, 80%) !default;
59-
$color-primary-element-light: lighten($color-primary-element, 15%) !default;
60-
$color-primary-element-lighter: mix($color-primary-element, $color-main-background, 15%) !default;
62+
$color-primary-element-hover: color.mix($color-primary-element, $color-main-background, 80%) !default;
63+
$color-primary-element-light: color.adjust($color-primary-element,$lightness: 15%) !default;
64+
$color-primary-element-lighter: color.mix($color-primary-element, $color-main-background, 15%) !default;
6165

6266
$color-error: #e9322d;
63-
$color-error-hover: mix($color-error, $color-main-background, 80%) !default;
67+
$color-error-hover: color.mix($color-error, $color-main-background, 80%) !default;
6468
$color-warning: #eca700;
65-
$color-warning-hover: mix($color-warning, $color-main-background, 80%) !default;
69+
$color-warning-hover: color.mix($color-warning, $color-main-background, 80%) !default;
6670
$color-success: #46ba61;
67-
$color-success-hover: mix($color-success, $color-main-background, 80%) !default;
71+
$color-success-hover: color.mix($color-success, $color-main-background, 80%) !default;
6872
// used for svg
6973
$color-white: #fff;
7074
$color-black: #000;
@@ -85,7 +89,7 @@ $image-favicon: url('../img/logo/logo.svg?v=1') !default;
8589
$color-loading-light: #ccc !default;
8690
$color-loading-dark: #444 !default;
8791

88-
$color-box-shadow: transparentize(nc-darken($color-main-background, 70%), 0.5) !default;
92+
$color-box-shadow: color.adjust(nc-darken($color-main-background, 70%), $alpha: -0.5) !default;
8993

9094
// light border like file table or app-content list
9195
$color-border: nc-darken($color-main-background, 7%) !default;

‎scss/form.scss

+47-46
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
1-
@import "_svariables.scss";
1+
@use "_svariables.scss";
2+
@use "_form-xl-screen.scss" as *;
23

34
body {
4-
background-color: $color-main-background;
5+
background-color: svariables.$color-main-background;
56
background-color: var(--color-main-background);
67
--border-radius-large: 4px;
78
background-image: none;
@@ -34,7 +35,7 @@ body {
3435
display: inline-block;
3536
margin: 2em 1em 1em;
3637
padding: 1.5em;
37-
border: 1px solid $color-border;
38+
border: 1px solid svariables.$color-border;
3839
border: 1px solid var(--color-border);
3940
text-align: left;
4041
vertical-align: top;
@@ -47,7 +48,7 @@ body {
4748
}
4849

4950
.srgdev-ncfp-form-addr {
50-
color: $color-text-lighter;
51+
color: svariables.$color-text-lighter;
5152
color: var(--color-text-lighter);
5253

5354
margin-bottom: .75em;
@@ -57,7 +58,7 @@ body {
5758
.srgdev-ncfp-form-header {
5859
font-weight: bold;
5960
padding: 0 0 .35em;
60-
border-bottom: 1px solid $color-border;
61+
border-bottom: 1px solid svariables.$color-border;
6162
border-bottom: 1px solid var(--color-border-dark);
6263
margin-top: 0;
6364
font-size: 115%;
@@ -99,7 +100,7 @@ body {
99100
max-height: 16em;
100101
}
101102

102-
$color-placeholder: $color-text-maxcontrast;
103+
$color-placeholder: svariables.$color-text-maxcontrast;
103104
$color-placeholder-var: var(--color-text-maxcontrast);
104105
.srgdev-ncfp-form-input::-webkit-input-placeholder,
105106
.srgdev-ncfp-form-textarea::-webkit-input-placeholder {
@@ -140,20 +141,20 @@ $color-placeholder-var: var(--color-text-maxcontrast);
140141
}
141142

142143
.srgdev-ncfp-form-select:invalid {
143-
border-color: $color-border-dark;
144+
border-color: svariables.$color-border-dark;
144145
border-color: var(--color-border-dark);
145146
color: $color-placeholder !important;
146147
color: $color-placeholder-var;
147148
}
148149

149150
.srgdev-ncfp-form-textarea[data-more]:invalid:hover,
150151
.srgdev-ncfp-form-select:invalid:hover {
151-
border-color: $color-primary-element !important;
152+
border-color: svariables.$color-primary-element !important;
152153
border-color: var(--color-primary-element) !important;
153154
}
154155

155156
.srgdev-ncfp-form-option {
156-
color: $color-main-text;
157+
color: svariables.$color-main-text;
157158
color: var(--color-main-text);
158159
}
159160

@@ -177,7 +178,7 @@ $color-placeholder-var: var(--color-text-maxcontrast);
177178
}
178179

179180
.srgdev-ncfp-chb-cont a {
180-
color: $color-primary;
181+
color: svariables.$color-primary;
181182
color: var(--color-primary);
182183
}
183184

@@ -186,7 +187,7 @@ $color-placeholder-var: var(--color-text-maxcontrast);
186187
}
187188

188189
.checkbox[err] + label:before {
189-
border-color: $color-error !important;
190+
border-color: svariables.$color-error !important;
190191
border-color: var(--color-error) !important;
191192
}
192193

@@ -229,8 +230,8 @@ $color-placeholder-var: var(--color-text-maxcontrast);
229230
height: 1em;
230231
//margin: 8px;
231232
border-radius: 50%;
232-
border: .25em solid $color-primary-text;
233-
border-color: $color-primary-text transparent $color-primary-text transparent;
233+
border: .25em solid svariables.$color-primary-text;
234+
border-color: svariables.$color-primary-text transparent svariables.$color-primary-text transparent;
234235
border: .25em solid var(--color-primary-text);
235236
border-color: var(--color-primary-text) transparent var(--color-primary-text) transparent;
236237
animation: lds-dual-ring 1.2s linear infinite;
@@ -249,7 +250,7 @@ $color-placeholder-var: var(--color-text-maxcontrast);
249250
#srgdev-ncfp_sel-dummy {
250251
cursor: pointer;
251252
background: var(--icon-triangle-s-dark, var(--icon-triangle-s-000)) no-repeat right 4px center;
252-
background-color: $color-main-background;
253+
background-color: svariables.$color-main-background;
253254
background-color: var(--color-main-background);
254255
}
255256

@@ -273,9 +274,9 @@ input.srgdev-ncfp-form-input:invalid,
273274
top: -6.4em;
274275
position: absolute;
275276
//padding-right: ;
276-
box-shadow: 0 0 6px -2px $color-box-shadow;
277+
box-shadow: 0 0 6px -2px svariables.$color-box-shadow;
277278
box-shadow: 0 0 6px -2px var(--color-box-shadow);
278-
border: thin solid $color-border;
279+
border: thin solid svariables.$color-border;
279280
border: thin solid var(--color-border);
280281
overflow: hidden;
281282

@@ -286,7 +287,7 @@ input.srgdev-ncfp-form-input:invalid,
286287
}
287288

288289
.srgdev-dpu-bkr-cls {
289-
background: $color-main-background;
290+
background: svariables.$color-main-background;
290291
background-color: var(--color-main-background);
291292
}
292293

@@ -302,7 +303,7 @@ input.srgdev-ncfp-form-input:invalid,
302303
font-size: 125%;
303304
position: relative;
304305
font-weight: bold;
305-
border-bottom: 1px solid $color-border;
306+
border-bottom: 1px solid svariables.$color-border;
306307
border-bottom: 1px solid var(--color-border);
307308
}
308309

@@ -320,7 +321,7 @@ input.srgdev-ncfp-form-input:invalid,
320321

321322
#srgdev-dpu_main-hdr-icon:hover,
322323
#srgdev-dpu_main-hdr-icon:focus-visible {
323-
background-color: $color-primary;
324+
background-color: svariables.$color-primary;
324325
background-color: var(--color-primary);
325326
background-image: var(--icon-close-white, var(--icon-close-fff));
326327
}
@@ -345,13 +346,13 @@ input.srgdev-ncfp-form-input:invalid,
345346

346347
#srgdev-dpu_bf-next:hover,
347348
#srgdev-dpu_bf-back:hover {
348-
color: $color-primary;
349+
color: svariables.$color-primary;
349350
color: var(--color-primary);
350351
}
351352

352353
#srgdev-dpu_bf-next[disabled],
353354
#srgdev-dpu_bf-back[disabled] {
354-
color: $color-text-lighter;
355+
color: svariables.$color-text-lighter;
355356
color: var(--color-text-lighter);
356357
opacity: .5;
357358
}
@@ -380,7 +381,7 @@ input.srgdev-ncfp-form-input:invalid,
380381
position: relative;
381382
text-align: center;
382383
white-space: nowrap;
383-
transition: left $animation-slow;
384+
transition: left svariables.$animation-slow;
384385
}
385386

386387
.srgdev-dpu-date-cont {
@@ -392,20 +393,20 @@ input.srgdev-ncfp-form-input:invalid,
392393
}
393394

394395
.srgdev-dpu-dc-empty {
395-
color: $color-text-lighter;
396+
color: svariables.$color-text-lighter;
396397
color: var(--color-text-lighter);
397398
opacity: .8;
398399
}
399400

400401
.srgdev-dpu-date-cont:hover {
401-
color: $color-primary;
402+
color: svariables.$color-primary;
402403
color: var(--color-primary);
403404
}
404405

405406
.srgdev-dpu-date-cont[data-active] {
406-
background: $color-primary;
407+
background: svariables.$color-primary;
407408
background: var(--color-primary);
408-
color: $color-primary-text;
409+
color: svariables.$color-primary-text;
409410
color: var(--color-primary-text);
410411
}
411412

@@ -454,7 +455,7 @@ input.srgdev-ncfp-form-input:invalid,
454455
}
455456

456457
#srgdev-dpu_main-time {
457-
border-top: 1px solid $color-border;
458+
border-top: 1px solid svariables.$color-border;
458459
border-top: 1px solid var(--color-border);
459460
height: 20em;
460461
display: flex;
@@ -469,7 +470,7 @@ input.srgdev-ncfp-form-input:invalid,
469470
padding-top: 2.5em;
470471
line-height: 1.6;
471472
height: 12.75em;
472-
color: $color-text-lighter;
473+
color: svariables.$color-text-lighter;
473474
color: var(--color-text-lighter);
474475
}
475476

@@ -479,7 +480,7 @@ input.srgdev-ncfp-form-input:invalid,
479480
box-sizing: border-box;
480481
font-size: 120%;
481482
font-weight: bold;
482-
color: $color-main-text;
483+
color: svariables.$color-main-text;
483484
color: var(--color-main-text);
484485
flex: 0;
485486
}
@@ -497,7 +498,7 @@ input.srgdev-ncfp-form-input:invalid,
497498
.srgdev-dpu-time-unit {
498499
text-align: center;
499500
cursor: pointer;
500-
border: 1px solid $color-border;
501+
border: 1px solid svariables.$color-border;
501502
border: 1px solid var(--color-border);
502503
padding: .2em 0;
503504
}
@@ -507,7 +508,7 @@ $tz-cont-height: 2.5em;
507508
position: relative;
508509
display: block;
509510
overflow: hidden;
510-
border-top: 1px solid $color-border;
511+
border-top: 1px solid svariables.$color-border;
511512
border-top: 1px solid var(--color-border);
512513
margin-top: .25em;
513514
cursor: pointer;
@@ -546,13 +547,13 @@ $tz-cont-height: 2.5em;
546547
white-space: nowrap;
547548
padding: 0 2em 0 .375em;
548549
position: relative;
549-
color: ($color-text-lighter);
550+
color: svariables.$color-text-lighter;
550551
color: var(--color-text-lighter);
551552
vertical-align: middle;
552553
}
553554

554555
.srgdev-dpu-tz-picker-wrapper:hover .srgdev-dpu-tz-name {
555-
color: ($color-main-text);
556+
color: svariables.$color-main-text;
556557
color: var(--color-main-text);
557558
}
558559

@@ -573,14 +574,14 @@ $tz-cont-height: 2.5em;
573574
text-decoration: underline;
574575
text-decoration-thickness: 2px;
575576
text-decoration-color: var(--color-primary);
576-
color: $color-main-text;
577+
color: svariables.$color-main-text;
577578
color: var(--color-main-text);
578579
}
579580

580581
.srgdev-dpu-appt-title {
581582
cursor: inherit;
582583
font-weight: normal;
583-
color: $color-main-text;
584+
color: svariables.$color-main-text;
584585
color: var(--color-main-text);
585586
}
586587

@@ -636,9 +637,9 @@ $tz-cont-height: 2.5em;
636637
.srgdev-dpu-time-unit:focus-visible,
637638
.srgdev-dpu-time-unit2:focus-visible,
638639
.srgdev-dpu-time-unit_tn:focus-visible {
639-
color: $color-primary;
640+
color: svariables.$color-primary;
640641
color: var(--color-primary);
641-
border-color: $color-border-dark;
642+
border-color: svariables.$color-border-dark;
642643
border-color: var(--color-border-dark);
643644
font-weight: bold;
644645
}
@@ -661,7 +662,7 @@ $tz-cont-height: 2.5em;
661662
}
662663

663664
.srgdev-appt-err-a {
664-
color: $color-primary;
665+
color: svariables.$color-primary;
665666
color: var(--color-primary);
666667
text-decoration: underline;
667668
}
@@ -671,14 +672,14 @@ $tz-cont-height: 2.5em;
671672
margin: 1.25em auto;
672673
padding: 1em;
673674
width: 22em;
674-
border: 1px solid $color-border;
675+
border: 1px solid svariables.$color-border;
675676
border: 1px solid var(--color-border);
676677
}
677678

678679
.appt-dir-lnk:hover {
679-
border: 1px solid $color-border-dark;
680+
border: 1px solid svariables.$color-border-dark;
680681
border: 1px solid var(--color-border-dark);
681-
box-shadow: 1px 1px 3px $color-border-dark;
682+
box-shadow: 1px 1px 3px svariables.$color-border-dark;
682683
box-shadow: 1px 1px 3px var(--color-border-dark);
683684
}
684685

@@ -687,7 +688,7 @@ $tz-cont-height: 2.5em;
687688
font-size: 125%;
688689
margin: 0;
689690
line-height: 1.2;
690-
color: $color-main-text;
691+
color: svariables.$color-main-text;
691692
color: var(--color-main-text);
692693
}
693694

@@ -696,15 +697,15 @@ $tz-cont-height: 2.5em;
696697
font-size: 110%;
697698
margin: .2em 0;
698699
line-height: 1.4;
699-
color: $color-main-text;
700+
color: svariables.$color-main-text;
700701
color: var(--color-main-text);
701702
}
702703

703704
.appt-dir-lnk_p {
704705
position: relative;
705706
margin: .5em 0 0;
706707
padding-top: .5em;
707-
color: $color-text-light;
708+
color: svariables.$color-text-light;
708709
color: var(--color-text-light);
709710
}
710711

@@ -716,7 +717,7 @@ $tz-cont-height: 2.5em;
716717
height: 0;
717718
left: 20%;
718719
top: 0;
719-
border-bottom: 1px solid $color-border;
720+
border-bottom: 1px solid svariables.$color-border;
720721
border-bottom: 1px solid var(--color-border);
721722
}
722723

@@ -733,4 +734,4 @@ $tz-cont-height: 2.5em;
733734
}
734735
}
735736

736-
@import "_form-xl-screen.scss";
737+
@include xl-screen;

‎scss/style.scss

+15-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
@use "_icons.css";
2-
@import "_svariables.scss";
3-
@import "_variables.scss";
2+
@use "_svariables.scss";
3+
@use "_variables.scss";
44

55
.srgdev-icon-override {
66
background-repeat: no-repeat;
@@ -179,8 +179,8 @@ $appt_grid_ml: 6em;
179179
left: 2px;
180180
right: 2px;
181181
border: 1px solid var(--color-main-background);
182-
color: $color-primary-text;
183-
background: $color-primary;
182+
color: svariables.$color-primary-text;
183+
background: svariables.$color-primary;
184184
overflow: hidden;
185185
cursor: grab;
186186
border-radius: 4px;
@@ -538,7 +538,7 @@ $srgdev-prog-height: 3px;
538538
}
539539

540540
.appt-stn-input-form {
541-
opacity: $opacity_normal;
541+
opacity: variables.$opacity_normal;
542542
display: flex;
543543

544544
.appt-stn-input-field {
@@ -574,15 +574,15 @@ $stn-txt-input-margin: 4px;
574574
cursor: pointer;
575575
white-space: nowrap;
576576

577-
opacity: $opacity_normal;
577+
opacity: variables.$opacity_normal;
578578
color: var(--color-main-text);
579579
border: 0;
580580
border-radius: 0; // otherwise Safari will cut the border-radius area
581581
background-color: transparent;
582582
box-shadow: none;
583583

584584
font-weight: normal;
585-
line-height: $clickable-area;
585+
line-height: variables.$clickable-area;
586586
}
587587

588588
.appt-stn-txt-form {
@@ -603,14 +603,14 @@ input.appt-stn-txt-submit {
603603
position: absolute;
604604
bottom: 1px;
605605
right: 1px;
606-
width: #{$clickable-area - $stn-txt-input-margin * 2};
607-
height: #{$clickable-area - $stn-txt-input-margin * 2};
606+
width: #{variables.$clickable-area - $stn-txt-input-margin * 2};
607+
height: #{variables.$clickable-area - $stn-txt-input-margin * 2};
608608
margin: 0;
609609
padding: 7px 6px;
610610

611611
cursor: pointer;
612612

613-
opacity: $opacity_full;
613+
opacity: variables.$opacity_full;
614614
color: var(--color-text-lighter);
615615
border: 0;
616616
border-radius: 50%;
@@ -626,10 +626,10 @@ input.appt-stn-txt-submit:active {
626626
textarea.appt-stn-txt-ta {
627627
flex: 1 1 auto;
628628

629-
min-height: #{$clickable-area * 2 - $stn-txt-input-margin * 7}; /* twice the element margin-y */
630-
max-height: #{$clickable-area * 3 - $stn-txt-input-margin * 2}; /* twice the element margin-y */
629+
min-height: #{variables.$clickable-area * 2 - $stn-txt-input-margin * 7}; /* twice the element margin-y */
630+
max-height: #{variables.$clickable-area * 3 - $stn-txt-input-margin * 2}; /* twice the element margin-y */
631631
// block width widening
632-
min-width: $clickable-area * 4;
632+
min-width: variables.$clickable-area * 4;
633633
width: 100%;
634634
margin: 0;
635635
color: var(--color-main-text);
@@ -835,7 +835,7 @@ textarea.appt-stn-txt-ta {
835835
.srgdev-appt-sb-main-spacer {
836836
height: 0;
837837
margin: .75em 0 .75em -4%;
838-
border-top: 1px solid $color-border-dark;
838+
border-top: 1px solid svariables.$color-border-dark;
839839
width: 104%;
840840

841841
}
@@ -1097,7 +1097,7 @@ input[type="checkbox"].ps-checkbox:disabled:not(:checked) + label:before {
10971097
/* END: Settings Elements */
10981098

10991099

1100-
@media only screen and (max-width: $breakpoint-mobile) {
1100+
@media only screen and (max-width: variables.$breakpoint-mobile) {
11011101
.srgdev-app-content {
11021102
max-width: 100%;
11031103
}

‎webpack.common.js

+3-2
Original file line numberDiff line numberDiff line change
@@ -47,8 +47,9 @@ module.exports = {
4747
options: this.mode === 'production' ? {
4848
sassOptions: {
4949
outputStyle: 'compressed',
50-
}
51-
} : {}
50+
},
51+
api: "modern",
52+
} : {api: "modern"}
5253
}
5354
]
5455
},

0 commit comments

Comments
 (0)
Please sign in to comment.