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 }