1
2
3.#{$select-ns}-dropdown {
4 position: absolute;
5 top: 100%;
6 left: 0;
7 width: 100%;
8 z-index: 10;
9
10 border: $select-dropdown-border;
11 background: $select-color-dropdown;
12 margin: 0.25rem 0 0 0;
13 border-top: 0 none;
14 box-sizing: border-box;
15 box-shadow: 0 1px 3px rgba(0,0,0,0.1);
16 border-radius: 0 0 $select-border-radius $select-border-radius;
17
18
19 [data-selectable] {
20 cursor: pointer;
21 overflow: hidden;
22 .highlight {
23 background: $select-color-highlight;
24 border-radius: 1px;
25 }
26 }
27
28 .option,
29 .optgroup-header,
30 .no-results,
31 .create {
32 padding: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
33 }
34
35 .option, [data-disabled], [data-disabled] [data-selectable].option {
36 cursor: inherit;
37 opacity: 0.5;
38 }
39
40 [data-selectable].option {
41 opacity: 1;
42 cursor: pointer;
43 }
44
45 .optgroup:first-child .optgroup-header {
46 border-top: 0 none;
47 }
48
49 .optgroup-header {
50 color: $select-color-optgroup-text;
51 background: $select-color-optgroup;
52 cursor: default;
53 }
54
55 .create:hover,
56 .option:hover,
57 .active {
58 background-color: $select-color-dropdown-item-active;
59 color: $select-color-dropdown-item-active-text;
60 &.create {
61 color: $select-color-dropdown-item-create-active-text;
62 }
63 }
64
65 .create {
66 color: $select-color-dropdown-item-create-text;
67 }
68
69 .spinner{
70 display: inline-block;
71 width: $select-spinner-size;
72 height: $select-spinner-size;
73 margin: $select-padding-dropdown-item-y $select-padding-dropdown-item-x;
74
75
76 &:after {
77 content: " ";
78 display: block;
79 width: $select-spinner-size * .8;
80 height: $select-spinner-size * .8;
81 margin: $select-spinner-size * .1;
82 border-radius: 50%;
83 border: $select-spinner-border-size solid $select-spinner-border-color;
84 border-color: $select-spinner-border-color transparent $select-spinner-border-color transparent;
85 animation: lds-dual-ring 1.2s linear infinite;
86 }
87 @keyframes lds-dual-ring {
88 0% {
89 transform: rotate(0deg);
90 }
91 100% {
92 transform: rotate(360deg);
93 }
94 }
95 }
96}
97
98.#{$select-ns}-dropdown-content {
99 overflow-y: auto;
100 overflow-x: hidden;
101 max-height: $select-max-height-dropdown;
102 overflow-scrolling: touch;
103 scroll-behavior: smooth;
104}