1
|
.multi-select-container {
|
2
|
display: inline-block;
|
3
|
position: relative;
|
4
|
}
|
5
|
|
6
|
.multi-select-menu {
|
7
|
position: absolute;
|
8
|
left: 0;
|
9
|
top: 0.8em;
|
10
|
z-index: 1;
|
11
|
float: left;
|
12
|
min-width: 100%;
|
13
|
background: #fff;
|
14
|
margin: 1em 0;
|
15
|
border: 1px solid #aaa;
|
16
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
17
|
display: none;
|
18
|
}
|
19
|
|
20
|
.multi-select-menuitem {
|
21
|
display: block;
|
22
|
font-size: 0.875em;
|
23
|
padding: 0.6em 1em 0.6em 30px;
|
24
|
white-space: nowrap;
|
25
|
}
|
26
|
|
27
|
.multi-select-menuitem--titled:before {
|
28
|
display: block;
|
29
|
font-weight: bold;
|
30
|
content: attr(data-group-title);
|
31
|
margin: 0 0 0.25em -20px;
|
32
|
}
|
33
|
|
34
|
.multi-select-menuitem--titledsr:before {
|
35
|
display: block;
|
36
|
font-weight: bold;
|
37
|
content: attr(data-group-title);
|
38
|
border: 0;
|
39
|
clip: rect(0 0 0 0);
|
40
|
height: 1px;
|
41
|
margin: -1px;
|
42
|
overflow: hidden;
|
43
|
padding: 0;
|
44
|
position: absolute;
|
45
|
width: 1px;
|
46
|
}
|
47
|
|
48
|
.multi-select-menuitem + .multi-select-menuitem {
|
49
|
padding-top: 0;
|
50
|
}
|
51
|
|
52
|
.multi-select-presets {
|
53
|
border-bottom: 1px solid #ddd;
|
54
|
}
|
55
|
|
56
|
.multi-select-menuitem input {
|
57
|
position: absolute;
|
58
|
margin-top: 0.25em;
|
59
|
margin-left: -20px;
|
60
|
}
|
61
|
|
62
|
.multi-select-button {
|
63
|
display: inline-block;
|
64
|
font-size: 0.875em;
|
65
|
padding: 0.2em 0.6em;
|
66
|
max-width: 16em;
|
67
|
white-space: nowrap;
|
68
|
overflow: hidden;
|
69
|
text-overflow: ellipsis;
|
70
|
vertical-align: -0.5em;
|
71
|
background-color: #fff;
|
72
|
border: 1px solid #aaa;
|
73
|
border-radius: 4px;
|
74
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
|
75
|
cursor: default;
|
76
|
}
|
77
|
|
78
|
.multi-select-button:after {
|
79
|
content: "";
|
80
|
display: inline-block;
|
81
|
width: 0;
|
82
|
height: 0;
|
83
|
border-style: solid;
|
84
|
border-width: 0.4em 0.4em 0 0.4em;
|
85
|
border-color: #999 transparent transparent transparent;
|
86
|
margin-left: 0.4em;
|
87
|
vertical-align: 0.1em;
|
88
|
}
|
89
|
|
90
|
.multi-select-container--open .multi-select-menu {
|
91
|
display: block;
|
92
|
}
|
93
|
|
94
|
.multi-select-container--open .multi-select-button:after {
|
95
|
border-width: 0 0.4em 0.4em 0.4em;
|
96
|
border-color: transparent transparent #999 transparent;
|
97
|
}
|
98
|
|
99
|
.multi-select-container--positioned .multi-select-menu {
|
100
|
/* Avoid border/padding on menu messing with JavaScript width calculation */
|
101
|
box-sizing: border-box;
|
102
|
}
|
103
|
|
104
|
.multi-select-container--positioned .multi-select-menu label {
|
105
|
/* Allow labels to line wrap when menu is artificially narrowed */
|
106
|
white-space: normal;
|
107
|
}
|