Skip to content

Commit 963e23f

Browse files
SimekSimek
authored
use native custom CSS styling for sort order select (#1922)
1 parent fcd6b1a commit 963e23f

5 files changed

Lines changed: 148 additions & 60 deletions

File tree

‎common/styleguide.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,7 @@ export const darkColors = {
6161
secondary: '#a2a7ab',
6262
warningLight: '#2f2704',
6363
warning: '#9a810c',
64+
primaryDark: '#2e9ab8',
6465
};
6566

6667
const baseTextStyles = {

‎components/Search.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ const Search = ({ query, total }: Props) => {
6767
</View>
6868
<TextInput
6969
ref={inputRef}
70+
id="search"
7071
onKeyPress={event => {
7172
if ('key' in event) {
7273
if (

‎components/Sort.tsx‎

Lines changed: 27 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -111,35 +111,32 @@ export const SortButton = ({ query: { order, direction, offset }, query }: SortB
111111
}>
112112
Toggle sort order
113113
</Tooltip>
114-
<P style={styles.title}>Sort: </P>
114+
<P style={styles.title}>Sort:</P>
115115
</View>
116116
<View style={styles.pickerContainer}>
117-
<P style={styles.title}>
118-
<Picker
119-
aria-label="Sort direction"
120-
selectedValue={sortValue}
121-
style={[
122-
styles.picker,
123-
{
124-
fontWeight: 600,
125-
backgroundColor: isDark ? darkColors.border : 'transparent',
126-
},
127-
]}
128-
onValueChange={value => {
129-
setPaginationOffset(null);
130-
setSortValue(value);
131-
}}>
132-
{sorts.map(sort => (
133-
<Picker.Item
134-
key={sort.param}
135-
value={sort.param}
136-
label={sort.label}
137-
color={isDark ? colors.white : colors.black}
138-
/>
139-
))}
140-
</Picker>
141-
<P style={styles.arrow}>›</P>
142-
</P>
117+
<Picker
118+
id="sort-order"
119+
aria-label="Sort order"
120+
selectedValue={sortValue}
121+
style={[
122+
styles.picker,
123+
{
124+
backgroundColor: isDark ? darkColors.border : 'transparent',
125+
},
126+
]}
127+
onValueChange={value => {
128+
setPaginationOffset(null);
129+
setSortValue(value);
130+
}}>
131+
{sorts.map(sort => (
132+
<Picker.Item
133+
key={sort.param}
134+
value={sort.param}
135+
label={sort.label}
136+
color={isDark ? colors.white : colors.black}
137+
/>
138+
))}
139+
</Picker>
143140
</View>
144141
</View>
145142
);
@@ -161,34 +158,23 @@ const styles = StyleSheet.create({
161158
color: colors.white,
162159
fontWeight: 400,
163160
marginLeft: 6,
161+
marginRight: 2,
164162
fontSize: 14,
165163
userSelect: 'none',
166164
},
167-
arrow: {
168-
color: colors.secondary,
169-
fontSize: 18,
170-
lineHeight: 18,
171-
userSelect: 'none',
172-
position: 'absolute',
173-
pointerEvents: 'none',
174-
right: 6,
175-
top: 0,
176-
transform: 'rotate(90deg)',
177-
},
178165
pickerContainer: {
179166
top: 1,
180-
left: -4,
181167
},
182168
picker: {
183169
color: colors.white,
184170
borderWidth: 0,
185-
borderRadius: 2,
171+
borderRadius: 4,
186172
position: 'relative',
187173
top: -1,
188174
fontSize: 14,
189-
paddingRight: 22,
190175
fontFamily: 'inherit',
191176
cursor: 'pointer',
177+
fontWeight: 600,
192178
},
193179
flippedIcon: {
194180
transform: 'scaleY(-1)',

‎pages/_app.tsx‎

Lines changed: 19 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -38,19 +38,25 @@ function App({ pageProps, Component }: AppProps) {
3838
content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=2,viewport-fit=cover"
3939
/>
4040
<style>
41-
{`html {
42-
background-color: ${context.isDark ? darkColors.veryDark : colors.gray7};
43-
}
44-
*:focus-visible {
45-
outline-color: ${colors.primaryDark};
46-
}
47-
.TooltipContent {
48-
background-color: ${darkColors.black};
49-
border: 1px solid ${context.isDark ? colors.gray7 : colors.gray6};
50-
}
51-
.TooltipContent svg {
52-
stroke: ${context.isDark ? colors.gray7 : colors.gray6};
53-
}`}
41+
{context.isDark
42+
? `
43+
:root {
44+
--outline: ${colors.primaryDark};
45+
--active: ${darkColors.primaryDark};
46+
--select-background: ${darkColors.dark};
47+
--select-border: ${colors.gray6};
48+
--tooltip-border: ${colors.gray7};
49+
}
50+
`
51+
: `
52+
:root {
53+
--outline: ${colors.primaryDark};
54+
--active: ${darkColors.primaryDark};
55+
--select-background: ${colors.gray6};
56+
--select-border: ${colors.gray5};
57+
--tooltip-border: ${colors.gray6};
58+
}
59+
`}
5460
</style>
5561
</Head>
5662
<Header />

‎styles/styles.css‎

Lines changed: 100 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525
*:focus-visible {
2626
outline-style: solid;
2727
outline-width: 2px;
28+
outline-color: var(--outline);
2829
border-radius: 3px;
2930
}
3031

@@ -35,12 +36,6 @@ html, body {
3536
-moz-osx-font-smoothing: grayscale;
3637
}
3738

38-
select {
39-
-webkit-appearance: none;
40-
appearance: none;
41-
outline-offset: 2px;
42-
}
43-
4439
input:focus-visible {
4540
border-radius: 6px;
4641
}
@@ -49,6 +44,99 @@ input:focus-visible {
4944
min-height: 100vh;
5045
}
5146

47+
/* SELECT */
48+
49+
select {
50+
display: flex;
51+
min-width: 140px;
52+
height: 24px;
53+
align-items: center;
54+
cursor: pointer;
55+
56+
@supports (font: -apple-system-body) {
57+
appearance: none;
58+
min-width: 136px;
59+
padding-left: 4px;
60+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
61+
background-repeat: no-repeat;
62+
background-size: 16px 16px;
63+
background-position: 95% 4px;
64+
}
65+
66+
@supports (appearance: base-select) {
67+
appearance: base-select;
68+
padding-inline: 4px;
69+
background-image: none;
70+
color: #fff;
71+
72+
&::picker-icon {
73+
content: "";
74+
width: 16px;
75+
height: 16px;
76+
margin-right: 2px;
77+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23fff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
78+
transition: rotate 0.2s ease-out;
79+
}
80+
81+
&:open::picker-icon {
82+
rotate: 180deg;
83+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%2361DAFB'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5' /%3E%3C/svg%3E%0A");
84+
}
85+
86+
&::picker(select) {
87+
appearance: base-select;
88+
padding: 2px;
89+
margin-top: 6px;
90+
border: 2px solid var(--select-border);
91+
background: var(--select-background);
92+
border-radius: 6px;
93+
font-weight: 400;
94+
opacity: 0;
95+
overflow: clip;
96+
transition: opacity 0.5s ease-out;
97+
box-shadow: hsl(206 22% 7% / 60%) 0 10px 32px -8px, hsl(206 22% 7% / 40%) 0 10px 18px -12px;
98+
}
99+
100+
&:open::picker(select) {
101+
opacity: 1;
102+
overflow: hidden;
103+
display: flex;
104+
flex-direction: column;
105+
gap: 2px;
106+
107+
@starting-style {
108+
opacity: 0;
109+
}
110+
}
111+
112+
option {
113+
display: flex;
114+
align-items: center;
115+
padding: 2px 8px;
116+
cursor: pointer;
117+
border-radius: 3px;
118+
transition: background 0.2s ease-out;
119+
color: #fff !important;
120+
121+
&:where(:hover, :focus, :active) {
122+
background: color-mix(in srgb, var(--select-border) 60%, transparent);
123+
}
124+
125+
&:checked {
126+
background: var(--active);
127+
}
128+
129+
&:checked:hover {
130+
background: color-mix(in srgb, var(--active) 60%, transparent);
131+
}
132+
133+
&::checkmark {
134+
display: none;
135+
}
136+
}
137+
}
138+
}
139+
52140
/* TOOLTIP */
53141

54142
.TooltipContent {
@@ -57,12 +145,18 @@ input:focus-visible {
57145
font-size: 13px;
58146
line-height: 1.5;
59147
color: #fff;
148+
background: #000;
149+
border: 1px solid var(--tooltip-border);
60150
box-shadow: hsl(206 22% 7% / 40%) 0 10px 32px -8px, hsl(206 22% 7% / 25%) 0 10px 18px -12px;
61151
user-select: none;
62152
animation-duration: 400ms;
63153
animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
64154
will-change: transform, opacity;
65155
max-width: 220px;
156+
157+
svg {
158+
stroke: var(--tooltip-border);
159+
}
66160
}
67161

68162
.TooltipContent[data-state='delayed-open'][data-side='top'] {

0 commit comments

Comments
 (0)