UNPKG

4.39 kBCSSView Raw
1.select-madu {
2 vertical-align: middle;
3 cursor: pointer;
4 border-color: rgba(173, 173, 173, 0.4);
5 border-radius: 5px;
6}
7.select-madu.disabled {
8 pointer-events: none;
9 background: rgba(173, 173, 173, 0.1);
10 color: #777;
11}
12.select-madu-inner {
13 padding: 9px 12px;
14 padding-right: 32px;
15 color: inherit;
16}
17.select-madu-inner-tag {
18 background: rgba(173, 173, 173, 0.2);
19 display: inline-block;
20 border-radius: 3px;
21 word-break: break-all;
22 border: 1px solid rgba(173, 173, 173, 0.4);
23 margin: 0 3px;
24 padding: 0 0 0 5px;
25 cursor: default;
26}
27.select-madu-inner-tag span {
28 vertical-align: middle;
29}
30.select-madu-inner-tag button.select-madu-icon {
31 padding: 5px 2px;
32 border: 0;
33 border-left: 1px solid rgba(173, 173, 173, 0.4);
34 display: inline-block;
35 outline: 0;
36 cursor: pointer;
37 background: transparent;
38}
39.select-madu-inner-tag button.select-madu-icon:hover {
40 background: rgba(173, 173, 173, 0.3);
41}
42.select-madu-inner-tag button.select-madu-icon:focus {
43 background: rgba(173, 173, 173, 0.4);
44}
45.select-madu-inner input[type=search].select-madu-input {
46 min-height: 18px;
47 line-height: inherit;
48}
49.select-madu-inner input[type=search].select-madu-input::-webkit-search-decoration, .select-madu-inner input[type=search].select-madu-input::-webkit-search-cancel-button, .select-madu-inner input[type=search].select-madu-input::-webkit-search-results-button, .select-madu-inner input[type=search].select-madu-input::-webkit-search-results-decoration {
50 -webkit-appearance: none;
51}
52.select-madu-arrow {
53 position: absolute;
54 top: 0;
55 right: 0;
56 bottom: 0;
57 padding: 11px;
58 line-height: 0;
59}
60.select-madu-arrow .select-madu-spinner {
61 width: 18px;
62 height: 18px;
63 position: relative;
64 transform: translateY(-50%);
65 top: 50%;
66}
67.select-madu-arrow .select-madu-spinner .spinner-border {
68 color: rgba(173, 173, 173, 0.8);
69 position: relative;
70 display: inline-block;
71 width: calc(100% - 5px);
72 height: calc(100% - 5px);
73 vertical-align: text-bottom;
74 border: 0.15em solid currentColor;
75 border-right-color: transparent;
76 border-radius: 50%;
77 -webkit-animation: select-madu-spinner-border 0.75s linear infinite;
78 animation: select-madu-spinner-border 0.75s linear infinite;
79}
80.select-madu-arrow.loading {
81 padding: 9px;
82}
83.select-madu-icon {
84 display: inline-block;
85 vertical-align: middle;
86}
87.select-madu-icon > svg {
88 stroke: currentColor;
89 fill: none;
90 stroke-width: 2;
91 stroke-linecap: round;
92 stroke-linejoin: round;
93}
94.select-madu-arrow .select-madu-icon {
95 transform: translateY(-50%);
96 top: 50%;
97 position: relative;
98 line-height: 0px;
99}
100.select-madu.open .select-madu-arrow .select-madu-icon {
101 transform: translateY(-50%) rotate(180deg);
102 -webkit-transform: translateY(-50%) rotate(180deg);
103}
104.select-madu.animate .select-madu-arrow .select-madu-icon {
105 transition: all 0.15s ease-in-out;
106 -webkit-transition: all 0.15s ease-in-out;
107}
108.select-madu.placeholder .select-madu-inner {
109 color: #979797;
110}
111.select-madu.multiple:not(.placeholder) .select-madu-inner {
112 padding: 5px 4px;
113 height: auto;
114}
115.select-madu:focus, .select-madu.focus {
116 outline: 0;
117 border-color: #339dff;
118}
119.select-madu.open.search .select-madu-inner {
120 cursor: text;
121}
122.select-madu-dropdown .select-madu-options {
123 border-color: rgba(173, 173, 173, 0.4);
124 border-radius: 5px;
125}
126.select-madu-dropdown .select-madu-options ul li {
127 padding: 9px 12px;
128}
129.select-madu-dropdown .select-madu-options ul li.o {
130 cursor: pointer;
131}
132.select-madu-dropdown .select-madu-options ul li.o.selected {
133 background: rgba(173, 173, 173, 0.2);
134 color: inherit;
135}
136.select-madu-dropdown .select-madu-options ul li.o:hover,
137.select-madu-dropdown .select-madu-options ul li.o.hovered {
138 background: #339dff;
139 color: #fff;
140}
141.select-madu-dropdown .select-madu-options ul li.o-h {
142 padding: 0;
143}
144.select-madu-dropdown .select-madu-options ul li.o-h strong {
145 padding: 9px 12px;
146}
147.select-madu-dropdown .select-madu-options ul ul + li.o-h {
148 margin-top: 5px;
149}
150.select-madu-dropdown .select-madu-options ul > ul li {
151 padding: 9px 18px;
152}
153.select-madu-dropdown .select-madu-options ul li.disabled {
154 pointer-events: none;
155 background: rgba(173, 173, 173, 0.1);
156 color: #777;
157}
158.select-madu-dropdown .select-madu-options .select-madu-sub-text {
159 color: #979797;
160}
161
162@keyframes select-madu-spinner-border {
163 to {
164 transform: rotate(360deg);
165 }
166}