Skip to content

Commit 6b268b9

Browse files
jriefjrief
committed
refactor styling into separate imports and directory
1 parent 288703d commit 6b268b9

File tree

6 files changed

+336
-272
lines changed

6 files changed

+336
-272
lines changed

‎client/scss/_colors.scss‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
$trash-background: repeating-linear-gradient(45deg, var(--body-bg), var(--body-bg) 10px, var(--darkened-bg) 10px, var(--darkened-bg) 20px);
2+
$follow-folder-border: 2px dashed var(--border-color);
3+
$copied-inode-border: 2px dashed rgb(48, 164, 0);
4+
$focus-visible-box-shadow: rgb(50, 150, 250) 0 0 5px;
5+
$active-rectangle: var(--accent, rgb(210, 210, 112));
6+
$body-fg-color: var(--body-fg, #000);
7+
$body-bg-color: var(--body-bg, #fff);
8+
$border-color: var(--border-color, #808080);
9+
$selected-bg-color: var(--selected-bg, #f0f0f0);
10+
$selected-row-color: var(--selected-row, #ffffcc);
11+
12+
$progress-bg-color: var(--body-fg, #fff);
13+
$progress-indicator-color: var(--breadcrumbs-fg, #c8c8c8);
14+
$progress-indicator-border: 3px solid var(--header-bg, #888);

‎client/scss/_menubar.scss‎

Lines changed: 215 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
@import "colors";
2+
3+
@mixin menubar {
4+
menu {
5+
list-style: none;
6+
box-sizing: border-box;
7+
display: flex;
8+
flex-wrap: wrap;
9+
margin: 0 14px;
10+
padding: 0;
11+
12+
li {
13+
display: list-item;
14+
list-style: none;
15+
padding: 0;
16+
17+
&:not(:empty) {
18+
cursor: pointer;
19+
border-radius: 4px;
20+
width: 32px;
21+
height: 32px;
22+
}
23+
24+
&:hover:not(.disabled):not(.search-field) {
25+
background-color: $selected-bg-color;
26+
}
27+
28+
&.active {
29+
background-color: $selected-row-color;
30+
}
31+
32+
&.disabled {
33+
opacity: 0.5;
34+
cursor: not-allowed;
35+
}
36+
37+
&.erase svg {
38+
color: var(--delete-button-bg);
39+
}
40+
41+
&.search-field {
42+
display: inline-flex;
43+
width: calc(100% - 400px);
44+
max-width: 400px;
45+
46+
> input {
47+
width: calc(100% - 48px);
48+
min-width: 100px;
49+
height: 100%;
50+
display: block;
51+
color: $body-fg-color;
52+
background-color: $body-bg-color;
53+
margin: 0;
54+
padding: 2px 8px;
55+
border: 1px solid $border-color;
56+
border-right: none;
57+
border-top-left-radius: 5px;
58+
border-bottom-left-radius: 5px;
59+
60+
&:focus-visible {
61+
outline: none;
62+
}
63+
64+
& + div {
65+
border: 1px solid $border-color;
66+
border-left: none;
67+
border-top-right-radius: 5px;
68+
border-bottom-right-radius: 5px;
69+
padding: 0 5px 0 10px;
70+
display: flex;
71+
72+
span {
73+
color: $body-fg-color;
74+
75+
&:hover {
76+
background-color: $selected-bg-color;
77+
}
78+
}
79+
80+
.search-icon {
81+
svg {
82+
transform: scale(0.8);
83+
}
84+
}
85+
86+
//.search-realm {
87+
// [role="combobox"] {
88+
// li:nth-child(2) {
89+
// padding-bottom: 4px;
90+
// border-bottom: 1px solid $border-color;
91+
// margin-bottom: 4px;
92+
// }
93+
// }
94+
//}
95+
}
96+
}
97+
98+
&:has(> input:focus-visible) {
99+
box-shadow: $focus-visible-box-shadow;
100+
}
101+
}
102+
103+
&[aria-haspopup="true"]:has(>[role="combobox"]) {
104+
width: auto;
105+
106+
&.with-caret {
107+
padding-right: 0.25rem;
108+
}
109+
}
110+
111+
&.filter-by-label {
112+
ul {
113+
li:not(:has(span.label-dot)) {
114+
justify-content: center;
115+
padding-bottom: 4px;
116+
border-bottom: 1px solid $border-color;
117+
margin-bottom: 4px;
118+
}
119+
120+
li span.label-dot {
121+
width: 12px;
122+
height: 12px;
123+
display: inline-block;
124+
border-radius: 50%;
125+
margin-left: 0.5rem;
126+
margin-right: 0.5rem;
127+
}
128+
}
129+
}
130+
131+
&.extra-menu [role="combobox"] {
132+
right: 0;
133+
margin-inline-end: inherit;
134+
135+
//> li:nth-child(5):not(:last-child) {
136+
// padding-bottom: 4px;
137+
// border-bottom: 1px solid $border-color;
138+
// margin-bottom: 4px;
139+
//}
140+
}
141+
142+
svg {
143+
display: inline-block;
144+
width: 30px;
145+
height: 30px;
146+
margin: 1px;
147+
}
148+
}
149+
150+
hr {
151+
margin: 0.25rem;
152+
}
153+
154+
[aria-haspopup="true"]:has([role="combobox"]) {
155+
position: relative;
156+
display: flex;
157+
158+
&.with-caret::after {
159+
content: " ";
160+
align-self: center;
161+
border: 5px solid transparent;
162+
border-top-color: $body-fg-color;
163+
margin-top: 10px;
164+
}
165+
}
166+
167+
[role="combobox"] {
168+
position: absolute;
169+
z-index: 1;
170+
background-color: $body-bg-color;
171+
top: 100%;
172+
left: -250px;
173+
right: -250px;
174+
margin-inline: auto;
175+
border: 1px solid $border-color;
176+
border-radius: 4px;
177+
box-shadow: 0 0 8px $border-color;
178+
display: flex;
179+
flex-direction: column;
180+
width: max-content;
181+
padding-top: 3px;
182+
padding-bottom: 3px;
183+
padding-inline-start: 3px;
184+
padding-inline-end: 3px;
185+
186+
&[aria-expanded="false"] {
187+
display: none;
188+
}
189+
190+
li {
191+
padding: 0 2rem 0 0.5rem;
192+
width: auto;
193+
cursor: pointer;
194+
display: flex;
195+
align-items: center;
196+
line-height: 32px;
197+
font-size: 16px;
198+
199+
&.active::after {
200+
content: "✔";
201+
position: absolute;
202+
right: 10px;
203+
}
204+
}
205+
206+
svg {
207+
color: $body-fg-color;
208+
}
209+
210+
svg + span {
211+
margin-left: 0.5rem;
212+
}
213+
}
214+
}
215+
}

‎client/scss/_progress.scss‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@import "colors";
2+
3+
@mixin progress-overlay {
4+
position: absolute;
5+
inset: 0;
6+
z-index: 1;
7+
background-color: rgb(from $progress-bg-color r g b / 75%);
8+
display: flex;
9+
flex-direction: column;
10+
justify-content: center;
11+
align-items: center;
12+
13+
.progress-indicator {
14+
width: calc(100% - 100px);
15+
max-width: 500px;
16+
background-color: $progress-indicator-color;
17+
border: $progress-indicator-border;
18+
padding: 20px;
19+
20+
p {
21+
font-weight: bold;
22+
font-size: 20px;
23+
}
24+
25+
.progress-bar {
26+
padding: 0;
27+
28+
li {
29+
display: flex;
30+
justify-content: space-between;
31+
span {
32+
text-overflow: ellipsis;
33+
}
34+
progress {
35+
width: 50%;
36+
}
37+
}
38+
}
39+
}
40+
}

0 commit comments

Comments
 (0)