1
+ /*!
2
+ * Multiple select dropdown with filter jQuery plugin.
3
+ * Copyright (C) 2020 Andrew Wagner github.com/andreww1011
4
+ *
5
+ * This library is free software; you can redistribute it and/or
6
+ * modify it under the terms of the GNU Lesser General Public
7
+ * License as published by the Free Software Foundation; either
8
+ * version 2.1 of the License, or (at your option) any later version.
9
+ *
10
+ * This library is distributed in the hope that it will be useful,
11
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
12
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
13
+ * Lesser General Public License for more details.
14
+ *
15
+ * You should have received a copy of the GNU Lesser General Public
16
+ * License along with this library; if not, write to the Free Software
17
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301
18
+ * USA
19
+ */
20
+ : root {
21
+ --fms-badge-text-color : white;
22
+ --fms-badge-color : var (--primary )
23
+ }
24
+
25
+ .filter-multi-select .dropup , .filter-multi-select .dropdown {
26
+ position : relative;
27
+ }
28
+
29
+ .filter-multi-select .dropdown-toggle ::after {
30
+ all : unset;
31
+ }
32
+
33
+ .filter-multi-select .dropdown-toggle : empty ::after {
34
+ all : unset;
35
+ }
36
+
37
+ .filter-multi-select > .dropdown-toggle ::before {
38
+ display : inline-block;
39
+ margin-right : 0.255em ;
40
+ vertical-align : middle;
41
+ content : "" ;
42
+ border-top : 0.3em solid;
43
+ border-right : 0.3em solid transparent;
44
+ border-bottom : 0 ;
45
+ border-left : 0.3em solid transparent;
46
+ }
47
+
48
+ .filter-multi-select > .dropdown-toggle : empty ::before {
49
+ margin-right : 0.255em ;
50
+ }
51
+
52
+ .filter-multi-select > .viewbar {
53
+ white-space : normal;
54
+ font-size : 0.875rem ;
55
+ font-weight : 400 ;
56
+ height : auto;
57
+ cursor : pointer;
58
+ }
59
+
60
+ .filter-multi-select > .viewbar > .selected-items > .item {
61
+ margin : .125rem .25rem .125rem 0 ;
62
+ padding : 0px 0px 0px .5em ;
63
+ display : inline-flex;
64
+ height : 1.875em ;
65
+ color : var (--fms-badge-text-color );
66
+ background-color : var (--fms-badge-color );
67
+ border-radius : 1.1em ;
68
+ align-items : center;
69
+ vertical-align : baseline;
70
+ }
71
+
72
+ .filter-multi-select > .viewbar > .selected-items > .item > button {
73
+ background-color : transparent;
74
+ color : var (--fms-badge-text-color );
75
+ border : 0 ;
76
+ font-weight : 900 ;
77
+ cursor : pointer;
78
+ }
79
+
80
+ .filter-multi-select > .viewbar > .selected-items > .item > button : hover {
81
+ filter : contrast (50% );
82
+ }
83
+
84
+ .filter-multi-select > .viewbar > .selected-items > .item .disabled {
85
+ display : inline-flex;
86
+ padding : 0px .5em 0px .5em ;
87
+ filter : grayscale (80% ) brightness (150% );
88
+ }
89
+
90
+ .filter-multi-select > .viewbar > .selected-items > .item .disabled > button {
91
+ display : none;
92
+ }
93
+
94
+ .filter-multi-select > .dropdown-menu {
95
+ position : absolute;
96
+ top : 100% ;
97
+ left : 0% ;
98
+ z-index : 1000 ;
99
+ display : none;
100
+ float : left;
101
+ max-height : 50vh ;
102
+ min-width : 10rem ;
103
+ overflow-y : auto;
104
+ padding : 0.5rem 0 ;
105
+ margin : 0.125rem 0 0 ;
106
+ font-size : 0.875rem ;
107
+ text-align : left;
108
+ list-style : none;
109
+ background-color : # FFFFFF ;
110
+ background-clip : padding-box;
111
+ border : 1px solid rgba (0 , 0 , 0 , 0.15 );
112
+ border-radius : 0.25rem ;
113
+ }
114
+
115
+ .filter-multi-select > .dropdown-menu .show {
116
+ display : block;
117
+ }
118
+
119
+ .filter-multi-select > .dropdown-menu > .filter > input {
120
+ font-size : 0.875rem ;
121
+ }
122
+
123
+ .filter-multi-select > .dropdown-menu > .filter > button {
124
+ position : absolute;
125
+ border : 0 ;
126
+ background-color : transparent;
127
+ font-weight : 900 ;
128
+ color : # ccc ;
129
+ right : 2rem ;
130
+ top : 1rem ;
131
+ }
132
+
133
+ .filter-multi-select > .dropdown-menu > .filter > button : hover {
134
+ color : # aaa ;
135
+ }
136
+
137
+ .filter-multi-select .dropdown-item {
138
+ display : block;
139
+ width : 100% ;
140
+ padding : 0.25rem 1.5rem ;
141
+ clear : both;
142
+ font-weight : 400 ;
143
+ color : # 212529 ;
144
+ text-align : inherit;
145
+ white-space : nowrap;
146
+ background-color : transparent;
147
+ border : 0 ;
148
+ }
149
+
150
+ .filter-multi-select .dropdown-item .disabled , .filter-multi-select .dropdown-item : disabled {
151
+ color : # 6c757d ;
152
+ pointer-events : none;
153
+ background-color : transparent;
154
+ }
155
+
156
+ .filter-multi-select .dropdown-item : hover , .filter-multi-select .dropdown-item : focus {
157
+ background-color : inherit;
158
+ }
159
+
160
+ .filter-multi-select .dropdown-item .active , .filter-multi-select .dropdown-item : active {
161
+ color : inherit;
162
+ }
163
+
164
+ .filter-multi-select .dropdown-item .custom-control-input {
165
+ position : absolute;
166
+ z-index : -1 ;
167
+ opacity : 0 ;
168
+ }
169
+
170
+ .filter-multi-select .dropdown-item .custom-control-label {
171
+ position : relative;
172
+ margin-bottom : 0 ;
173
+ vertical-align : top;
174
+ display : inline-block;
175
+ }
176
+
177
+ .filter-multi-select .dropdown-item .custom-control-label ::before {
178
+ border-radius : 0.25rem ;
179
+ transition : background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
180
+ position : absolute;
181
+ top : 0.15625rem ;
182
+ left : -1.5rem ;
183
+ display : block;
184
+ width : 1rem ;
185
+ height : 1rem ;
186
+ pointer-events : none;
187
+ content : "" ;
188
+ background-color : # FFFFFF ;
189
+ border : # adb5bd solid 1px
190
+ }
191
+
192
+ .filter-multi-select .dropdown-item .custom-control-label ::after {
193
+ position : absolute;
194
+ top : 0.15625rem ;
195
+ left : -1.5rem ;
196
+ display : block;
197
+ width : 1rem ;
198
+ height : 1rem ;
199
+ content : "" ;
200
+ background : no-repeat 50% / 50% 50% ;
201
+ }
202
+
203
+ .filter-multi-select .dropdown-item .custom-checkbox : checked ~ .custom-control-label ::before ,
204
+ .filter-multi-select .dropdown-item .custom-checkbox : indeterminate ~ .custom-control-label ::before {
205
+ border-color : var (--fms-badge-color );
206
+ background-color : var (--fms-badge-color );
207
+ }
208
+
209
+ .filter-multi-select .dropdown-item .custom-checkbox : checked : disabled ~ .custom-control-label ::before ,
210
+ .filter-multi-select .dropdown-item .custom-checkbox : indeterminate : disabled ~ .custom-control-label ::before {
211
+ border-color : var (--fms-badge-color );
212
+ background-color : var (--fms-badge-color );
213
+ filter : grayscale (80% ) brightness (150% );
214
+ }
215
+
216
+ .filter-multi-select .dropdown-item .custom-checkbox : checked ~ .custom-control-label ::after {
217
+ background-image : url ("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23FFFFFF' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e" );
218
+ }
219
+
220
+ .filter-multi-select .dropdown-item .custom-checkbox : indeterminate ~ .custom-control-label ::after {
221
+ background-image : url ("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='%23FFFFFF' d='M0 2h4'/%3e%3c/svg%3e" );
222
+ }
0 commit comments