Skip to content

Commit 5676f1f

Browse files
jriefjrief
committed
fix styles for refactored menubar
1 parent a6513ae commit 5676f1f

File tree

6 files changed

+398
-124
lines changed

6 files changed

+398
-124
lines changed

‎client/scss/_colors.scss‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,9 @@ $progress-indicator-border: 3px solid var(--header-bg, #888);
1515

1616
$delete-button-fg-color: var(--delete-button-fg-color, #fff);
1717
$delete-button-bg-color: var(--delete-button-bg-color, #ed5712);
18+
19+
$error-color: var(--error-color, #c00000);
20+
21+
$font-size-root: null !default;
22+
$enable-smooth-scroll: true !default;
23+
$prefix: null !default;

‎client/scss/_dropdown.scss‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
@import "colors";
2+
3+
@mixin dropdown {
4+
[aria-haspopup="listbox"]:has(>[role~="listbox"]) {
5+
position: relative;
6+
display: flex;
7+
8+
&.with-caret::after {
9+
content: " ";
10+
align-self: center;
11+
border: 5px solid transparent;
12+
border-top-color: $body-fg-color;
13+
margin-top: 5px;
14+
}
15+
}
16+
17+
[role~="listbox"] {
18+
position: absolute;
19+
z-index: 1;
20+
background-color: $body-bg-color;
21+
top: 100%;
22+
margin-inline: auto;
23+
border: 1px solid $border-color;
24+
border-radius: 4px;
25+
box-shadow: 0 0 8px $border-color;
26+
display: flex;
27+
flex-direction: column;
28+
width: max-content;
29+
padding-top: 3px;
30+
padding-bottom: 3px;
31+
padding-inline-start: 3px;
32+
padding-inline-end: 3px;
33+
34+
li {
35+
list-style: none;
36+
}
37+
38+
[role~="option"] {
39+
padding: 0 2rem 0 0.5rem;
40+
width: auto;
41+
cursor: pointer;
42+
display: flex;
43+
align-items: center;
44+
line-height: 32px;
45+
font-size: 16px;
46+
47+
&[aria-selected="true"] {
48+
background-color: $selected-row-color;
49+
50+
&::after {
51+
content: "✔";
52+
position: absolute;
53+
right: 10px;
54+
}
55+
}
56+
57+
&[aria-disabled="true"] {
58+
opacity: 0.5;
59+
cursor: not-allowed;
60+
}
61+
62+
&:hover:not(.disabled) {
63+
background-color: $selected-bg-color;
64+
}
65+
}
66+
}
67+
[aria-haspopup="listbox"][aria-expanded="false"] {
68+
>[role~="listbox"], +[role~="listbox"] {
69+
display: none;
70+
}
71+
}
72+
}

‎client/scss/_labels.scss‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
@import "colors";
2+
3+
@mixin labels {
4+
.select-labels-container {
5+
flex-grow: 1;
6+
margin-right: 1rem;
7+
box-sizing: border-box;
8+
9+
.select-labels-field {
10+
display: flex;
11+
position: relative;
12+
border: 1px solid $border-color;
13+
border-radius: 4px;
14+
height: 1rem;
15+
padding: 6px 4px;
16+
margin-top: 0;
17+
color: $body-fg-color;
18+
background-color: $body-bg-color;
19+
20+
.caret {
21+
position: absolute;
22+
align-self: center;
23+
right: 0.5rem;
24+
border: 5px solid transparent;
25+
border-top-color: $body-fg-color;
26+
margin-top: 5px;
27+
cursor: pointer;
28+
}
29+
}
30+
31+
.select-labels-value {
32+
border: 1px solid lightgrey;
33+
border-radius: 2px;
34+
box-sizing: border-box;
35+
display: inline-flex;
36+
align-self: center;
37+
line-height: 16px;
38+
margin-right: 6px;
39+
padding: 0.125rem 0.25rem;
40+
}
41+
42+
.deselect-label {
43+
cursor: pointer;
44+
margin-left: 0.25rem;
45+
padding-left: 0.25rem;
46+
border-left: 1px solid $border-color;
47+
&:hover {
48+
font-weight: bold;
49+
}
50+
}
51+
52+
.select-labels-option {
53+
&:hover {
54+
background-color: $selected-row-color;
55+
}
56+
}
57+
58+
span.select-labels-dot {
59+
align-self: center;
60+
width: 12px;
61+
height: 12px;
62+
display: inline-block;
63+
border-radius: 50%;
64+
margin-left: 0.25rem;
65+
margin-right: 0.5rem;
66+
}
67+
68+
//.select-labels__value-container {
69+
// align-items: center;
70+
// display: flex;
71+
// flex: 1 1 0;
72+
// flex-wrap: wrap;
73+
// position: relative;
74+
// overflow: hidden;
75+
// padding: 2px 8px;
76+
// box-sizing: border-box;
77+
//}
78+
//
79+
//.select-labels__indicators {
80+
// align-items: center;
81+
// align-self: stretch;
82+
// display: flex;
83+
// flex-shrink: 0;
84+
// box-sizing: border-box;
85+
//}
86+
//
87+
//.select-labels__indicator-separator {
88+
// align-self: stretch;
89+
// width: 1px;
90+
// background-color: rgb(204, 204, 204);
91+
// margin-bottom: 8px;
92+
// margin-top: 8px;
93+
// box-sizing: border-box;
94+
//}
95+
//
96+
//.select-labels__indicator {
97+
// display: flex;
98+
// transition: color 150ms;
99+
// color: rgb(204, 204, 204);
100+
// padding: 8px;
101+
// box-sizing: border-box;
102+
//}
103+
//
104+
//.select-labels__control {
105+
// align-items: center;
106+
// cursor: default;
107+
// display: flex;
108+
// flex-wrap: wrap;
109+
// justify-content: space-between;
110+
// position: relative;
111+
// transition: 100ms;
112+
// background-color: rgb(255, 255, 255);
113+
// border-color: rgb(204, 204, 204);
114+
// border-radius: 0.25rem;
115+
// border-style: solid;
116+
// border-width: 1px;
117+
// box-sizing: border-box;
118+
// outline: 0 !important;
119+
//}
120+
//
121+
//.select-labels__multi-value__remove {
122+
// align-items: center;
123+
// display: flex;
124+
// border-radius: 2px;
125+
// padding-left: 4px;
126+
// padding-right: 4px;
127+
// box-sizing: border-box;
128+
//}
129+
//
130+
//.select-labels__menu {
131+
// top: 100%;
132+
// // bottom: 100%;
133+
// position: absolute;
134+
// width: calc(100% - 0.5rem);
135+
// z-index: 1;
136+
// background-color: rgb(255, 255, 255);
137+
// border-radius: 0.25rem;
138+
// box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 11px;
139+
// margin: 0.25rem;
140+
// box-sizing: border-box;
141+
//}
142+
//
143+
//.select-labels__menu-list {
144+
// max-height: 300px;
145+
// overflow-y: auto;
146+
// position: relative;
147+
// padding-bottom: 0.25rem;
148+
// padding-top: 0.25rem;
149+
// box-sizing: border-box;
150+
//}
151+
}
152+
}

0 commit comments

Comments
 (0)