Skip to content

Commit 4af82b9

Browse files
committed
fix SCSS syntax to be compatible with SASS-3
1 parent 137caea commit 4af82b9

File tree

8 files changed

+84
-82
lines changed

8 files changed

+84
-82
lines changed

client/scss/_dropdown.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "colors";
1+
@use "colors";
22

33
@mixin dropdown {
44
[aria-haspopup="listbox"]:has(>[role~="listbox"]) {
@@ -9,20 +9,20 @@
99
content: " ";
1010
align-self: center;
1111
border: 5px solid transparent;
12-
border-top-color: $body-fg-color;
12+
border-top-color: colors.$body-fg-color;
1313
margin-top: 5px;
1414
}
1515
}
1616

1717
[role~="listbox"] {
1818
position: absolute;
1919
z-index: 1;
20-
background-color: $body-bg-color;
20+
background-color: colors.$body-bg-color;
2121
top: 100%;
2222
margin-inline: auto;
23-
border: 1px solid $border-color;
23+
border: 1px solid colors.$border-color;
2424
border-radius: 4px;
25-
box-shadow: 0 0 8px $border-color;
25+
box-shadow: 0 0 8px colors.$border-color;
2626
display: flex;
2727
flex-direction: column;
2828
width: max-content;
@@ -45,7 +45,7 @@
4545
font-size: 16px;
4646

4747
&[aria-selected="true"] {
48-
background-color: $selected-row-color;
48+
background-color: colors.$selected-row-color;
4949

5050
&::after {
5151
content: "";
@@ -60,7 +60,7 @@
6060
}
6161

6262
&:hover:not(.disabled) {
63-
background-color: $selected-bg-color;
63+
background-color: colors.$selected-bg-color;
6464
}
6565

6666
svg {

client/scss/_labels.scss

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "colors";
1+
@use "colors";
22

33
@mixin labels {
44
.select-labels-container {
@@ -9,11 +9,11 @@
99
.select-labels-field {
1010
display: flex;
1111
position: relative;
12-
border: 1px solid $border-color;
12+
border: 1px solid colors.$border-color;
1313
border-radius: 4px;
1414
height: 28px;
15-
color: $body-fg-color;
16-
background-color: $body-bg-color;
15+
color: colors.$body-fg-color;
16+
background-color: colors.$body-bg-color;
1717

1818
.toggle-dropdown {
1919
position: absolute;
@@ -29,7 +29,7 @@
2929
content: " ";
3030
align-self: center;
3131
border: 5px solid transparent;
32-
border-top-color: $body-fg-color;
32+
border-top-color: colors.$body-fg-color;
3333
margin-top: 5px;
3434
}
3535
}
@@ -50,15 +50,15 @@
5050
cursor: pointer;
5151
margin-left: 0.25rem;
5252
padding-left: 0.25rem;
53-
border-left: 1px solid $border-color;
53+
border-left: 1px solid colors.$border-color;
5454
&:hover {
5555
font-weight: bold;
5656
}
5757
}
5858

5959
.select-labels-option {
6060
&:hover {
61-
background-color: $selected-row-color;
61+
background-color: colors.$selected-row-color;
6262
}
6363
}
6464

client/scss/_menubar.scss

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import "colors";
1+
@use "colors";
22

33
@mixin menubar {
44
[role="menubar"] {
@@ -22,11 +22,11 @@
2222
}
2323

2424
&:not(.search-field):hover {
25-
background-color: $selected-bg-color;
25+
background-color: colors.$selected-bg-color;
2626
}
2727

2828
&[aria-selected="true"] {
29-
background-color: $selected-row-color;
29+
background-color: colors.$selected-row-color;
3030
}
3131

3232
&[aria-disabled="true"] {
@@ -50,7 +50,7 @@
5050
display: block;
5151
margin: 0;
5252
padding: 2px 8px;
53-
border: 1px solid $border-color;
53+
border: 1px solid colors.$border-color;
5454
border-right: none;
5555
border-top-left-radius: 5px;
5656
border-bottom-left-radius: 5px;
@@ -62,17 +62,17 @@
6262
& + div {
6363
position: relative;
6464
display: flex;
65-
border: 1px solid $border-color;
65+
border: 1px solid colors.$border-color;
6666
border-left: none;
6767
border-top-right-radius: 5px;
6868
border-bottom-right-radius: 5px;
6969
padding: 0 5px 0 10px;
7070

7171
span {
72-
color: $body-fg-color;
72+
color: colors.$body-fg-color;
7373

7474
&:hover {
75-
background-color: $selected-bg-color;
75+
background-color: colors.$selected-bg-color;
7676
}
7777
}
7878

@@ -91,14 +91,14 @@
9191
}
9292

9393
&:not(:has(> input:placeholder-shown)) {
94-
background-color: $selected-row-color;
94+
background-color: colors.$selected-row-color;
9595
> input {
96-
background-color: $selected-row-color;
96+
background-color: colors.$selected-row-color;
9797
}
9898
}
9999

100100
&:has(> input:focus-visible) {
101-
box-shadow: $focus-visible-box-shadow;
101+
box-shadow: colors.$focus-visible-box-shadow;
102102
}
103103
}
104104

@@ -131,7 +131,7 @@
131131
}
132132

133133
&:has(input:checked) {
134-
background-color: $selected-row-color;
134+
background-color: colors.$selected-row-color;
135135
}
136136
}
137137

@@ -157,7 +157,7 @@
157157
right: -250px;
158158

159159
svg {
160-
color: $body-fg-color;
160+
color: colors.$body-fg-color;
161161
}
162162

163163
svg + span {

client/scss/_progress.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
@import "colors";
1+
@use "colors";
22

33
@mixin progress-overlay {
44
position: absolute;
55
inset: 0;
66
z-index: 1;
7-
background-color: rgb(from $progress-bg-color r g b / 75%);
7+
background-color: rgb(from colors.$progress-bg-color r g b / 75%);
88
display: flex;
99
flex-direction: column;
1010
justify-content: center;
@@ -13,8 +13,8 @@
1313
.progress-indicator {
1414
width: calc(100% - 100px);
1515
max-width: 500px;
16-
background-color: $progress-indicator-color;
17-
border: $progress-indicator-border;
16+
background-color: colors.$progress-indicator-color;
17+
border: colors.$progress-indicator-border;
1818
padding: 20px;
1919

2020
p {

client/scss/_tooltip.scss

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
@import "colors";
1+
@use "colors";
22

33
.django-finder-tooltip {
4-
background-color: $body-fg-color;
4+
background-color: colors.$body-fg-color;
55
opacity: 0.9;
6-
color: $body-bg-color;
6+
color: colors.$body-bg-color;
77
padding: 0.25rem 0.5rem;
88
border-radius: 0.25rem;
99
box-sizing: border-box;

0 commit comments

Comments
 (0)