Skip to content

Commit 1506614

Browse files
ignatiusmbignatiusmb
authored
chore: use css nesting (#223)
1 parent 2fba75f commit 1506614

File tree

12 files changed

+236
-200
lines changed

12 files changed

+236
-200
lines changed

‎workspace/extension/src/lib/components/Button.svelte‎

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -26,58 +26,58 @@
2626
border-radius: 0.2rem;
2727
outline: none;
2828
29-
background-color: transparent;
29+
background: transparent;
3030
color: rgb(12, 12, 13);
3131
line-height: 0;
32-
}
33-
button.active {
34-
color: rgb(0, 96, 223);
35-
}
36-
button:hover {
37-
background: rgb(237, 237, 240);
38-
}
3932
40-
button:active:hover {
41-
color: inherit;
42-
}
33+
&:active {
34+
color: rgba(12, 12, 13, 0.8);
35+
}
4336
44-
button:active {
45-
color: rgba(12, 12, 13, 0.8);
46-
}
37+
&:hover {
38+
background: rgb(237, 237, 240);
4739
48-
button:disabled {
49-
color: rgba(12, 12, 13, 0.2);
50-
}
40+
&:active {
41+
color: inherit;
42+
}
43+
}
5144
52-
:global(.dark) button {
53-
color: rgba(249, 249, 250, 0.7);
54-
}
45+
&:disabled {
46+
cursor: default;
47+
background: transparent;
48+
color: rgba(12, 12, 13, 0.2);
49+
}
5550
56-
:global(.dark) button.active {
57-
color: rgb(117, 186, 255);
58-
}
51+
&.active {
52+
color: rgb(0, 96, 223);
53+
}
5954
60-
:global(.dark) button:hover {
61-
background-color: rgb(37, 37, 38);
55+
& :global(svg) {
56+
width: 1.25rem;
57+
height: 1.25rem;
58+
fill: currentColor;
59+
}
6260
}
6361
64-
:global(.dark) button:active {
65-
color: rgba(249, 249, 250, 0.8);
66-
}
62+
:global(.dark) button {
63+
color: rgba(249, 249, 250, 0.7);
6764
68-
:global(.dark) button:disabled {
69-
color: rgba(249, 249, 250, 0.2);
70-
}
65+
&:active {
66+
color: rgba(249, 249, 250, 0.8);
67+
}
7168
72-
:global(.dark) button:disabled,
73-
button:disabled {
74-
background-color: transparent;
75-
cursor: default;
76-
}
69+
&:hover {
70+
background-color: rgb(37, 37, 38);
71+
}
72+
73+
&:disabled {
74+
cursor: default;
75+
background: transparent;
76+
color: rgba(249, 249, 250, 0.2);
77+
}
7778
78-
button :global(svg) {
79-
width: 1.25rem;
80-
height: 1.25rem;
81-
fill: currentColor;
79+
&.active {
80+
color: rgb(117, 186, 255);
81+
}
8282
}
8383
</style>

‎workspace/extension/src/lib/components/Resizable.svelte‎

Lines changed: 50 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -30,54 +30,64 @@
3030
position: relative;
3131
display: grid;
3232
color: rgb(57, 63, 76);
33-
}
34-
aside.x {
35-
grid-template-columns: auto 1fr;
36-
}
37-
aside.y {
38-
grid-template-rows: auto 1fr;
33+
34+
&.x {
35+
grid-template-columns: auto 1fr;
36+
}
37+
&.y {
38+
grid-template-rows: auto 1fr;
39+
}
3940
}
4041
4142
.resize {
4243
top: 0;
4344
left: 0;
4445
width: 0.25rem;
4546
background: rgb(224, 224, 226);
46-
}
47-
.resize:hover {
48-
background: rgb(177, 177, 179);
49-
}
50-
.resize.x {
51-
cursor: ew-resize;
52-
bottom: 0;
53-
width: 0.2rem;
54-
}
55-
.resize.y {
56-
cursor: ns-resize;
57-
right: 0;
58-
height: 0.2rem;
59-
}
60-
.resize + div {
61-
display: grid;
62-
gap: 0.625rem;
63-
align-content: flex-start;
64-
padding-top: 1rem;
65-
}
66-
.resize.x + div {
67-
overflow-x: hidden;
68-
}
69-
.resize.y + div {
70-
overflow-y: hidden;
71-
}
7247
73-
:global(.dark) aside {
74-
background: rgb(36, 36, 36);
75-
color: rgb(177, 177, 179);
76-
}
77-
:global(.dark) .resize {
78-
background: rgb(60, 60, 61);
48+
&:hover {
49+
background: rgb(177, 177, 179);
50+
}
51+
52+
&.x {
53+
cursor: ew-resize;
54+
bottom: 0;
55+
width: 0.2rem;
56+
57+
& + div {
58+
overflow-x: hidden;
59+
}
60+
}
61+
&.y {
62+
cursor: ns-resize;
63+
right: 0;
64+
height: 0.2rem;
65+
66+
& + div {
67+
overflow-y: hidden;
68+
}
69+
}
70+
71+
& + div {
72+
display: grid;
73+
gap: 0.625rem;
74+
align-content: flex-start;
75+
padding-top: 1rem;
76+
}
7977
}
80-
:global(.dark) .resize:hover {
81-
background: rgb(107, 107, 108);
78+
79+
:global(.dark) {
80+
aside {
81+
background: rgb(36, 36, 36);
82+
color: rgb(177, 177, 179);
83+
}
84+
85+
.resize {
86+
background: rgb(60, 60, 61);
87+
88+
&:hover {
89+
background: rgb(107, 107, 108);
90+
}
91+
}
8292
}
8393
</style>

‎workspace/extension/src/lib/nodes/Ellipsis.svelte‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@
1818
background: var(--background);
1919
color: var(--color);
2020
font-size: 0.5rem;
21-
}
22-
button:hover {
23-
background: rgba(255, 255, 255, 0.1);
21+
22+
&:hover {
23+
background: rgba(255, 255, 255, 0.1);
24+
}
2425
}
2526
</style>

‎workspace/extension/src/lib/nodes/Node.svelte‎

Lines changed: 45 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -93,48 +93,56 @@
9393
align-items: center;
9494
line-height: 1.5;
9595
font-size: 0.75rem;
96-
}
97-
ul {
98-
width: 100%;
99-
position: relative;
100-
}
10196
102-
li :global(div) {
103-
width: 100%;
104-
display: flex;
105-
flex-wrap: wrap;
106-
padding-left: calc(var(--indent) + 6px);
107-
}
108-
li[data-hovered] > :global(div) {
109-
background: #f0f9fe;
110-
}
111-
li[data-current] > ul::before {
112-
content: '';
113-
z-index: 1;
114-
width: 0.125rem;
115-
position: absolute;
116-
top: 0.2rem;
117-
bottom: 0.15rem;
118-
left: calc(var(--indent) - 0.75rem);
119-
background: #e0e0e2;
120-
}
97+
ul {
98+
width: 100%;
99+
position: relative;
100+
}
121101
122-
li[data-current] > :global(div:first-child),
123-
li[data-current][data-hovered] > :global(div) {
124-
background: rgba(0, 116, 232, 0.2);
125-
}
126-
li[data-current] > :global(div:first-child:after) {
127-
content: '== $n';
128-
margin-left: 0.5rem;
129-
}
102+
&[data-hovered] > :global(div) {
103+
background: #f0f9fe;
104+
}
105+
106+
&[data-current] {
107+
& > ul::before {
108+
content: '';
109+
z-index: 1;
110+
width: 0.125rem;
111+
position: absolute;
112+
top: 0.2rem;
113+
bottom: 0.15rem;
114+
left: calc(var(--indent) - 0.75rem);
115+
background: #e0e0e2;
116+
}
117+
118+
& > :global(div:first-child),
119+
&[data-hovered] > :global(div) {
120+
background: rgb(0, 116, 232);
121+
}
122+
123+
& > :global(div:first-child:after) {
124+
content: '== $n';
125+
margin-left: 0.5rem;
126+
}
127+
}
130128
131-
:global(.dark) li[data-hovered] > :global(div) {
132-
background: rgb(53, 59, 72);
129+
& :global(div) {
130+
width: 100%;
131+
display: flex;
132+
flex-wrap: wrap;
133+
padding-left: calc(var(--indent) + 6px);
134+
}
133135
}
134136
135-
:global(.dark) li[data-current] > :global(div:first-child),
136-
:global(.dark) li[data-current][data-hovered] > :global(div) {
137-
background: rgb(32, 78, 138);
137+
:global(.dark) {
138+
li[data-hovered] > :global(div) {
139+
background: rgb(53, 59, 72);
140+
}
141+
142+
li[data-current] > :global(div:first-child),
143+
li[data-current][data-hovered] > :global(div) {
144+
background: rgb(32, 78, 138);
145+
}
138146
}
139147
140148
/* flash animation for updates */

‎workspace/extension/src/lib/panel/Editable.svelte‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -72,32 +72,34 @@
7272
{/if}
7373

7474
<style>
75-
span,
7675
input {
7776
flex-grow: 1;
78-
}
79-
80-
input {
8177
padding: 0.15rem 0.375rem;
8278
border: none;
8379
border-radius: inherit;
8480
font-size: inherit;
8581
}
8682
87-
span:not(.readonly) {
88-
cursor: pointer;
89-
}
90-
span.string {
91-
color: rgb(221, 0, 169);
92-
}
93-
span.number {
94-
color: rgb(5, 139, 0);
95-
}
96-
span.null {
97-
color: rgb(115, 115, 115);
83+
span {
84+
flex-grow: 1;
85+
86+
&:not(.readonly) {
87+
cursor: pointer;
88+
}
89+
&.string {
90+
color: rgb(221, 0, 169);
91+
}
92+
&.number {
93+
color: rgb(5, 139, 0);
94+
}
95+
&.null {
96+
color: rgb(115, 115, 115);
97+
}
9898
}
9999
100-
:global(.dark) span.string {
101-
color: rgb(255, 125, 233);
100+
:global(.dark) {
101+
span.string {
102+
color: rgb(255, 125, 233);
103+
}
102104
}
103105
</style>

‎workspace/extension/src/lib/panel/PropertyList.svelte‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -115,12 +115,13 @@
115115
align-items: center;
116116
padding: 0.25rem;
117117
border-radius: 0.25rem;
118-
}
119-
li[data-tooltip] {
120-
background: rgba(179, 0, 0, 0.8);
121-
}
122-
li:hover {
123-
background: rgba(135, 135, 137, 0.075);
118+
119+
&:hover {
120+
background: rgba(135, 135, 137, 0.075);
121+
}
122+
&[data-tooltip] {
123+
background: rgba(179, 0, 0, 0.8);
124+
}
124125
}
125126
126127
.function,
@@ -129,9 +130,11 @@
129130
color: rgb(0, 116, 232);
130131
}
131132
132-
:global(.dark) .function,
133-
:global(.dark) .symbol,
134-
:global(.dark) .object {
135-
color: rgb(117, 191, 255);
133+
:global(.dark) {
134+
.function,
135+
.symbol,
136+
.object {
137+
color: rgb(117, 191, 255);
138+
}
136139
}
137140
</style>

0 commit comments

Comments
 (0)