/ src / components / Passport / select.module.scss
select.module.scss
 1  $primary-color: #012060;
 2  /* reset */
 3  .myButtonReset {
 4    all: unset;
 5  }
 6  
 7  .CardRoot {
 8    text-align: center;
 9    width: 80%;
10    margin: 0;
11    padding: 20px;
12    border: 1px solid #ddd;
13    border-radius: 5px;
14    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
15    background-color: #fff;
16    margin-top: 20px;
17  }
18  
19  .SelectTrigger {
20    padding: 20px;
21    font-size: 13px;
22    height: 35px;
23    background-color: white;
24    color: black;
25    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
26  
27    &:hover {
28      background-color: #ddd;
29    }
30  
31    &:focus {
32      box-shadow: 0 0 0 2px black;
33    }
34  }
35  
36  .SelectContent {
37    overflow: hidden;
38    background-color: white;
39    border-radius: 6px;
40    box-shadow:
41      0px 10px 38px -10px rgba(22, 23, 24, 0.35),
42      0px 10px 20px -15px rgba(22, 23, 24, 0.2);
43  }
44  
45  .SelectViewport {
46    padding: 5px;
47  }
48  
49  .SelectItem {
50    font-size: 13px;
51    border-radius: 3px;
52    height: 25px;
53    padding: 0 5px;
54    position: relative;
55    user-select: none;
56    background-color: white;
57    color: black;
58  
59    &[data-disabled] {
60      color: gray;
61      pointer-events: none;
62    }
63  
64    &[data-highlighted] {
65      background-color: #ddd;
66    }
67  }
68  
69  .SelectItemIndicator {
70    position: absolute;
71    left: 0;
72    width: 5px;
73    height: 100%;
74    background-color: $primary-color;
75  }
76  
77  .SelectScrollButton {
78    display: none;
79  }