Skip to content

Commit e7654bf

Browse files
johanibjohanib
committed
Fix sass deprecation warnings
The remaining ones are from `compass-mixins`
1 parent decfe98 commit e7654bf

31 files changed

Lines changed: 2010 additions & 1955 deletions

‎.github/workflows/test-integration.yml‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,9 @@ jobs:
1818

1919
- name: Composer install
2020
run: composer install
21+
22+
- name: Yarn install
23+
run: yarn install --frozen-lockfile
2124

2225
- name: Run QA tests
2326
run: composer check-ci

‎assets/scss/application.scss‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
1-
@import "../../node_modules/compass-mixins";
2-
@include global-reset ;
1+
@use "sass:meta";
2+
@use "../../node_modules/compass-mixins/lib/compass";
3+
@use "../../node_modules/compass-mixins/lib/compass/reset/utilities";
34

4-
$fa-font-path: "../../fonts";
5-
@import "fonts/font-awesome";
6-
@import "fonts/roboto";
5+
@include utilities.global-reset ;
76

8-
@import "vars";
9-
@import "utilities/reset";
7+
@include meta.load-css("fonts/font-awesome", $with: ("fa-font-path": "../../fonts"));
8+
@include meta.load-css("fonts/roboto");
109

11-
@import "base/base";
12-
@import "base/mixins";
13-
@import "utilities/media_queries";
14-
@import "components/header";
15-
@import "components/button";
16-
@import "components/form";
17-
@import "components/alerts";
18-
@import "components/icon_legend";
19-
@import "components/table";
20-
@import "components/navigation";
21-
@import "components/footer";
22-
@import "pages/base";
10+
@include meta.load-css("vars");
11+
@include meta.load-css("utilities/reset");
12+
13+
@include meta.load-css("base/base");
14+
@include meta.load-css("base/mixins");
15+
@include meta.load-css("utilities/media_queries");
16+
@include meta.load-css("components/header");
17+
@include meta.load-css("components/button");
18+
@include meta.load-css("components/form");
19+
@include meta.load-css("components/alerts");
20+
@include meta.load-css("components/icon_legend");
21+
@include meta.load-css("components/table");
22+
@include meta.load-css("components/navigation");
23+
@include meta.load-css("components/footer");
24+
@include meta.load-css("pages/base");

‎assets/scss/base/base.scss‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
1+
@use "../vars";
2+
13
body {
24
font-family: "Roboto", Sans-serif;
35
font-weight: 400;
46
font-size: 14px;
57
line-height: 20px;
6-
color: $dark-grey;
8+
color: vars.$dark-grey;
79
-webkit-font-smoothing: antialiased;
8-
background-color: $background;
10+
background-color: vars.$background;
911

1012
}
1113

@@ -18,11 +20,11 @@ a {
1820
}
1921

2022
::-webkit-input-placeholder {
21-
color: $blue;
23+
color: vars.$blue;
2224
}
2325

2426
::-moz-placeholder {
25-
color: $blue;
27+
color: vars.$blue;
2628
opacity: 1;
2729
}
2830

‎assets/scss/base/mixins.scss‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,40 @@
1+
@use "sass:color";
2+
@use "../vars";
3+
@use "../utilities/media_queries";
4+
15
@mixin card {
26
background-color: white;
3-
border-bottom-left-radius: $br;
4-
border-bottom-right-radius: $br;
7+
border-bottom-left-radius: vars.$br;
8+
border-bottom-right-radius: vars.$br;
59
padding: 0 15px;
6-
border-top: 2px solid $blue;
10+
border-top: 2px solid vars.$blue;
711
box-shadow: 0 0 4px 0 rgba(0,0,0,0.05);
812
}
913

1014
@mixin page {
11-
max-width: $medium;
15+
max-width: vars.$medium;
1216
margin: 0 auto 15px auto;
1317
padding: 0 15px;
1418
}
1519

1620
@mixin tool-tip {
17-
box-shadow: 1px 2px 6px 1px $lighter-grey;
21+
box-shadow: 1px 2px 6px 1px vars.$lighter-grey;
1822
padding: 10px !important;
1923
font-size: 14px !important;
2024
pointer-events: auto !important;
21-
color: $dark-grey !important;
25+
color: vars.$dark-grey !important;
2226
background-color: white !important;
2327
&.show {
2428
opacity: 1 !important;
2529
}
2630
max-width: 390px;
27-
@include phone {
31+
@include media_queries.phone {
2832
max-width: 200px;
2933
}
3034
}
3135

3236
@mixin info-icon {
33-
color: $blue;
37+
color: vars.$blue;
3438
margin-left: 5px;
3539
font-size: 16px;
3640
font-weight: bold;
@@ -43,8 +47,8 @@
4347
}
4448

4549
div.Select-control {
46-
border-radius: $br;
47-
border: 1px solid $lighter-grey;
50+
border-radius: vars.$br;
51+
border: 1px solid vars.$lighter-grey;
4852
margin-top: 5px;
4953
display: table;
5054
border-spacing: 0;
@@ -56,7 +60,7 @@
5660

5761
span.Select-arrow-zone {
5862
padding: 0 12px;
59-
background-color: $light-grey;
63+
background-color: vars.$light-grey;
6064
}
6165

6266
span.select-option {
@@ -86,7 +90,7 @@
8690
box-shadow: 0 0 0 0 white;
8791
}
8892
70% {
89-
box-shadow: 0 0 10px 8px lighten($blue, 15%);
93+
box-shadow: 0 0 10px 8px color.adjust(vars.$blue, $lightness: 15%);
9094
}
9195
100% {
9296
box-shadow: 0 0 0 0 white;

‎assets/scss/components/alerts.scss‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,27 @@
1+
@use "sass:color";
2+
@use "../vars";
3+
14
div.alert {
25

36
border: 1px solid transparent;
47
padding: .75rem 1.25rem;
58
margin: 0.75rem 0;
69
border-radius: .25rem;
710

8-
background-color: $light-grey;
11+
background-color: vars.$light-grey;
912

1013
&.alert-info,
1114
&.info {
12-
background-color: darken($green, 15%);
15+
background-color: color.adjust(vars.$green, $lightness: -15%);
1316
}
1417
&.alert-warning,
1518
&.warning {
16-
background-color: $orange;
19+
background-color: vars.$orange;
1720
}
1821
&.alert-error,
1922
&.error {
20-
background-color: $red;
21-
color: $light-grey;
23+
background-color: vars.$red;
24+
color: vars.$light-grey;
2225
}
2326

2427
i.fa {

‎assets/scss/components/button.scss‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,20 @@
1+
@use "../vars";
2+
@use "../base/mixins";
3+
14
.button {
25
display: inline-block;
36
padding: 10px 15px;
47
text-transform: uppercase;
58
background-color: white;
6-
color: $blue;
7-
border: 1px solid $lighter-grey;
8-
border-radius: $br;
9+
color: vars.$blue;
10+
border: 1px solid vars.$lighter-grey;
11+
border-radius: vars.$br;
912
font-size: larger;
1013
font-weight: bold;
1114
text-align: center;
1215
cursor: pointer;
1316

14-
@include no-text-decoration;
17+
@include mixins.no-text-decoration;
1518

1619
&:not(:last-child) {
1720
margin-right: 15px;
@@ -23,27 +26,27 @@
2326

2427
i {
2528
margin-left: 10px;
26-
color: $medium-grey;
29+
color: vars.$medium-grey;
2730
}
2831

2932
&.blue {
30-
background-color: $blue;
33+
background-color: vars.$blue;
3134
color: white;
3235
border: none;
3336
&.error {
34-
background-color: $red;
37+
background-color: vars.$red;
3538
}
3639
i {
3740
color: white;
3841
}
3942
}
4043
&.grey {
41-
background-color: $lighter-grey;
44+
background-color: vars.$lighter-grey;
4245
color: white;
4346
border: none;
4447
}
4548
&.green {
46-
background-color: $green;
49+
background-color: vars.$green;
4750
color: white;
4851
border: none;
4952
border-top-left-radius: 0;

‎assets/scss/components/footer.scss‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
1+
@use "sass:color";
2+
@use "../vars";
3+
@use "../utilities/media_queries";
4+
@use "../base/mixins";
5+
16
div.footer {
27

38
padding: 15px;
49
border-top: 3px solid white;
510
margin-top: 25px;
611

712
div.footer-inner {
8-
@include page;
13+
@include mixins.page;
914

1015
display: flex;
1116
align-items: flex-end;
1217

1318
span {
14-
border-right: 1px solid $lighter-grey;
19+
border-right: 1px solid vars.$lighter-grey;
1520
&:first-child {
1621
margin-left: auto;
1722
}
@@ -21,15 +26,15 @@ div.footer {
2126
}
2227

2328
a {
24-
color: darken($blue, 10%);
29+
color: color.adjust(vars.$blue, $lightness: -10%);
2530
&:visited, &:hover {
2631
text-decoration: none;
2732
}
2833
text-decoration: none;
2934
padding: 0 15px;
3035
}
3136

32-
@include phone {
37+
@include media_queries.phone {
3338
flex-direction: column;
3439
span {
3540
padding: 5px 0;

‎assets/scss/components/form.scss‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1+
@use "../vars";
2+
@use "../base/mixins";
3+
14
form {
25
.form-row {
36
position: relative;
47
}
58

69
.help-button {
710
i.fa {
8-
color: $blue;
11+
color: vars.$blue;
912
}
1013

1114
cursor: pointer;
@@ -15,7 +18,7 @@ form {
1518
top: 0;
1619

1720
.balloon {
18-
@include tool-tip;
21+
@include mixins.tool-tip;
1922

2023
display: none;
2124
font-weight: normal;

0 commit comments

Comments
 (0)