src/components/shared/Select.module.scss


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

.select {
  height: 38px;
  line-height: 1.5;
  width: 100%;
  font-size: 0.95em;
  padding-left: 14px;
  appearance: none;
  background-color: var(--color-input-bg);
  color: var(--color-text);
  padding-right: 34px;
  border-radius: 8px;
  border: 1px solid transparent;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  background-image: url(data:image/svg+xml,%0A%20%20%20%20%3Csvg%20width%3D%228%22%20height%3D%2224%22%20viewBox%3D%220%200%208%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%207L7%2011H1L4%207Z%22%20fill%3D%22%23999999%22%20%2F%3E%0A%20%20%20%20%20%20%3Cpath%20d%3D%22M4%2017L1%2013L7%2013L4%2017Z%22%20fill%3D%22%23999999%22%20%2F%3E%0A%20%20%20%20%3C%2Fsvg%3E%0A%20%20);
  background-position: right 12px center;
  background-repeat: no-repeat;
  transition: all 0.2s ease;
}

.select:hover,
.select:focus {
  border-color: var(--color-focus-blue);
  outline: none !important;
  color: var(--color-text-highlight);
  transform: translateY(-1px);
}
.select:focus {
  transform: translateY(0);
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
}

.select option {
  background-color: var(--color-background);
}