nouns-builder/apps/web/src/modules/explore/SearchInput.css.ts at 50c61f6d02e41d2911ca5f2faf81ba590248a868 · BuilderOSS/nouns-builder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
import { vars } from '@buildeross/zord'
import { style } from '@vanilla-extract/css'

export const searchInputWrapper = style({
  position: 'relative',
  width: '100%',
  marginBottom: 8,
})

export const searchInputStyle = style({
  height: 64,
  width: '100%',
  backgroundColor: vars.color.background2,
  borderRadius: '12px',
  fontSize: 16,
  paddingLeft: 16,
  paddingRight: 80, // Space for search icon
  boxSizing: 'border-box',
  border: `2px solid ${vars.color.background1}`,
  color: vars.color.text1,
  selectors: {
    '&:focus': {
      outline: 'none',
      backgroundColor: vars.color.background1,
      borderColor: vars.color.border,
    },
    '&:focus-visible': {
      outline: `2px solid ${vars.color.focusRing}`,
      outlineOffset: '2px',
    },
    '&::placeholder': {
      color: vars.color.text3,
    },
  },
})

export const searchInputWithClear = style({
  paddingRight: 110, // Space for both clear and search icons
})

export const searchIconStyle = style({
  position: 'absolute',
  right: 16,
  top: '50%',
  transform: 'translateY(-50%)',
  cursor: 'pointer',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: 24,
  height: 24,
  background: 'none',
  border: 'none',
  padding: 0,
  selectors: {
    '&:hover': {
      opacity: 0.7,
    },
  },
})

export const clearIconStyle = style({
  position: 'absolute',
  right: 50, // Position left of search icon
  top: '50%',
  transform: 'translateY(-50%)',
  cursor: 'pointer',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: 20,
  height: 20,
  background: 'none',
  border: 'none',
  padding: 0,
  selectors: {
    '&:hover': {
      opacity: 0.7,
    },
  },
})

export const helperTextStyle = style({
  position: 'absolute',
  top: '100%',
  left: 16,
  marginTop: 4,
  fontSize: 14,
  color: vars.color.text3,
  transition: 'opacity 0.2s ease-in-out',
  pointerEvents: 'none',
  whiteSpace: 'nowrap',
  selectors: {
    '&.visible': {
      opacity: 1,
    },
    '&.hidden': {
      opacity: 0,
    },
  },
})