effective_form_inputs 0.3.1 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +88 -3
- data/app/assets/javascripts/effective_form_inputs.js +1 -0
- data/app/assets/javascripts/effective_select/initialize.js.coffee +12 -0
- data/app/assets/javascripts/effective_select/input.js +2 -0
- data/app/assets/javascripts/effective_select/select2.js +5403 -0
- data/app/assets/stylesheets/effective_form_inputs.scss +1 -0
- data/app/assets/stylesheets/effective_select/bootstrap-theme.css +564 -0
- data/app/assets/stylesheets/effective_select/input.scss +3 -0
- data/app/assets/stylesheets/effective_select/overrides.scss +3 -0
- data/app/assets/stylesheets/effective_select/select2.css +431 -0
- data/app/models/effective/form_builder_inputs.rb +7 -0
- data/app/models/inputs/effective_select/input.rb +30 -0
- data/app/models/inputs/effective_select_input.rb +24 -0
- data/app/views/effective/style_guide/_form_default.html.haml +2 -1
- data/lib/effective_form_inputs/engine.rb +4 -2
- data/lib/effective_form_inputs/version.rb +1 -1
- data/lib/effective_form_inputs.rb +1 -1
- metadata +25 -2
|
@@ -0,0 +1,564 @@
|
|
|
1
|
+
/*! Select2 Bootstrap Theme v0.1.0-beta.3 | MIT License | github.com/fk/select2-bootstrap-theme */
|
|
2
|
+
.select2-container--bootstrap {
|
|
3
|
+
display: block;
|
|
4
|
+
/*------------------------------------*\
|
|
5
|
+
#COMMON STYLES
|
|
6
|
+
\*------------------------------------*/
|
|
7
|
+
/**
|
|
8
|
+
* Search field in the Select2 dropdown.
|
|
9
|
+
*/
|
|
10
|
+
/**
|
|
11
|
+
* No outline for all search fields - in the dropdown
|
|
12
|
+
* and inline in multi Select2s.
|
|
13
|
+
*/
|
|
14
|
+
/**
|
|
15
|
+
* Adjust Select2's choices hover and selected styles to match
|
|
16
|
+
* Bootstrap 3's default dropdown styles.
|
|
17
|
+
*
|
|
18
|
+
* @see http://getbootstrap.com/components/#dropdowns
|
|
19
|
+
*/
|
|
20
|
+
/**
|
|
21
|
+
* Address disabled Select2 styles.
|
|
22
|
+
*
|
|
23
|
+
* @see https://select2.github.io/examples.html#disabled
|
|
24
|
+
* @see http://getbootstrap.com/css/#forms-control-disabled
|
|
25
|
+
*/
|
|
26
|
+
/*------------------------------------*\
|
|
27
|
+
#DROPDOWN
|
|
28
|
+
\*------------------------------------*/
|
|
29
|
+
/**
|
|
30
|
+
* Dropdown border color and box-shadow.
|
|
31
|
+
*/
|
|
32
|
+
/**
|
|
33
|
+
* Limit the dropdown height.
|
|
34
|
+
*/
|
|
35
|
+
/*------------------------------------*\
|
|
36
|
+
#SINGLE SELECT2
|
|
37
|
+
\*------------------------------------*/
|
|
38
|
+
/*------------------------------------*\
|
|
39
|
+
#MULTIPLE SELECT2
|
|
40
|
+
\*------------------------------------*/
|
|
41
|
+
/**
|
|
42
|
+
* Address Bootstrap control sizing classes
|
|
43
|
+
*
|
|
44
|
+
* 1. Reset Bootstrap defaults.
|
|
45
|
+
* 2. Adjust the dropdown arrow button icon position.
|
|
46
|
+
*
|
|
47
|
+
* @see http://getbootstrap.com/css/#forms-control-sizes
|
|
48
|
+
*/
|
|
49
|
+
/* 1 */
|
|
50
|
+
/*------------------------------------*\
|
|
51
|
+
#RTL SUPPORT
|
|
52
|
+
\*------------------------------------*/
|
|
53
|
+
}
|
|
54
|
+
.select2-container--bootstrap .select2-selection {
|
|
55
|
+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
56
|
+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
57
|
+
background-color: #fff;
|
|
58
|
+
border: 1px solid #ccc;
|
|
59
|
+
border-radius: 4px;
|
|
60
|
+
color: #555555;
|
|
61
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
62
|
+
font-size: 14px;
|
|
63
|
+
outline: 0;
|
|
64
|
+
}
|
|
65
|
+
.select2-container--bootstrap .select2-search--dropdown .select2-search__field {
|
|
66
|
+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
67
|
+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
|
|
68
|
+
background-color: #fff;
|
|
69
|
+
border: 1px solid #ccc;
|
|
70
|
+
border-radius: 4px;
|
|
71
|
+
color: #555555;
|
|
72
|
+
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
|
73
|
+
font-size: 14px;
|
|
74
|
+
}
|
|
75
|
+
.select2-container--bootstrap .select2-search__field {
|
|
76
|
+
outline: 0;
|
|
77
|
+
/* Firefox 18- */
|
|
78
|
+
/**
|
|
79
|
+
* Firefox 19+
|
|
80
|
+
*
|
|
81
|
+
* @see http://stackoverflow.com/questions/24236240/color-for-styled-placeholder-text-is-muted-in-firefox
|
|
82
|
+
*/
|
|
83
|
+
}
|
|
84
|
+
.select2-container--bootstrap .select2-search__field::-webkit-input-placeholder {
|
|
85
|
+
color: #999;
|
|
86
|
+
}
|
|
87
|
+
.select2-container--bootstrap .select2-search__field:-moz-placeholder {
|
|
88
|
+
color: #999;
|
|
89
|
+
}
|
|
90
|
+
.select2-container--bootstrap .select2-search__field::-moz-placeholder {
|
|
91
|
+
color: #999;
|
|
92
|
+
opacity: 1;
|
|
93
|
+
}
|
|
94
|
+
.select2-container--bootstrap .select2-search__field:-ms-input-placeholder {
|
|
95
|
+
color: #999;
|
|
96
|
+
}
|
|
97
|
+
.select2-container--bootstrap .select2-results__option {
|
|
98
|
+
/**
|
|
99
|
+
* Disabled results.
|
|
100
|
+
*
|
|
101
|
+
* @see https://select2.github.io/examples.html#disabled-results
|
|
102
|
+
*/
|
|
103
|
+
/**
|
|
104
|
+
* Hover state.
|
|
105
|
+
*/
|
|
106
|
+
/**
|
|
107
|
+
* Selected state.
|
|
108
|
+
*/
|
|
109
|
+
}
|
|
110
|
+
.select2-container--bootstrap .select2-results__option[role=group] {
|
|
111
|
+
padding: 0;
|
|
112
|
+
}
|
|
113
|
+
.select2-container--bootstrap .select2-results__option[aria-disabled=true] {
|
|
114
|
+
color: #777777;
|
|
115
|
+
cursor: not-allowed;
|
|
116
|
+
}
|
|
117
|
+
.select2-container--bootstrap .select2-results__option[aria-selected=true] {
|
|
118
|
+
background-color: #f5f5f5;
|
|
119
|
+
color: #262626;
|
|
120
|
+
}
|
|
121
|
+
.select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
|
|
122
|
+
background-color: #337ab7;
|
|
123
|
+
color: #fff;
|
|
124
|
+
}
|
|
125
|
+
.select2-container--bootstrap .select2-results__option .select2-results__option {
|
|
126
|
+
padding: 6px 12px;
|
|
127
|
+
}
|
|
128
|
+
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__group {
|
|
129
|
+
padding-left: 0;
|
|
130
|
+
}
|
|
131
|
+
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option {
|
|
132
|
+
margin-left: -12px;
|
|
133
|
+
padding-left: 24px;
|
|
134
|
+
}
|
|
135
|
+
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
|
136
|
+
margin-left: -24px;
|
|
137
|
+
padding-left: 36px;
|
|
138
|
+
}
|
|
139
|
+
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
|
140
|
+
margin-left: -36px;
|
|
141
|
+
padding-left: 48px;
|
|
142
|
+
}
|
|
143
|
+
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
|
144
|
+
margin-left: -48px;
|
|
145
|
+
padding-left: 60px;
|
|
146
|
+
}
|
|
147
|
+
.select2-container--bootstrap .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
|
|
148
|
+
margin-left: -60px;
|
|
149
|
+
padding-left: 72px;
|
|
150
|
+
}
|
|
151
|
+
.select2-container--bootstrap .select2-results__group {
|
|
152
|
+
color: #777777;
|
|
153
|
+
display: block;
|
|
154
|
+
padding: 6px 12px;
|
|
155
|
+
font-size: 12px;
|
|
156
|
+
line-height: 1.428571429;
|
|
157
|
+
white-space: nowrap;
|
|
158
|
+
}
|
|
159
|
+
.select2-container--bootstrap.select2-container--open {
|
|
160
|
+
/**
|
|
161
|
+
* Handle border radii of the container when the dropdown is showing.
|
|
162
|
+
*/
|
|
163
|
+
}
|
|
164
|
+
.select2-container--bootstrap.select2-container--open .select2-selection {
|
|
165
|
+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
|
166
|
+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
|
|
167
|
+
-webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
|
|
168
|
+
-o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
|
|
169
|
+
transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
|
|
170
|
+
border-color: #66afe9;
|
|
171
|
+
/**
|
|
172
|
+
* Make the dropdown arrow point up while the dropdown is visible.
|
|
173
|
+
*/
|
|
174
|
+
}
|
|
175
|
+
.select2-container--bootstrap.select2-container--open .select2-selection .select2-selection__arrow b {
|
|
176
|
+
border-color: transparent transparent #999 transparent;
|
|
177
|
+
border-width: 0 4px 4px 4px;
|
|
178
|
+
}
|
|
179
|
+
.select2-container--bootstrap.select2-container--open.select2-container--below .select2-selection {
|
|
180
|
+
border-bottom-right-radius: 0;
|
|
181
|
+
border-bottom-left-radius: 0;
|
|
182
|
+
border-bottom-color: transparent;
|
|
183
|
+
}
|
|
184
|
+
.select2-container--bootstrap.select2-container--open.select2-container--above .select2-selection {
|
|
185
|
+
border-top-right-radius: 0;
|
|
186
|
+
border-top-left-radius: 0;
|
|
187
|
+
border-top-color: transparent;
|
|
188
|
+
}
|
|
189
|
+
.select2-container--bootstrap.select2-container--disabled .select2-selection,
|
|
190
|
+
.select2-container--bootstrap.select2-container--disabled .select2-search__field {
|
|
191
|
+
cursor: not-allowed;
|
|
192
|
+
}
|
|
193
|
+
.select2-container--bootstrap.select2-container--disabled .select2-selection,
|
|
194
|
+
.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice {
|
|
195
|
+
background-color: #eeeeee;
|
|
196
|
+
}
|
|
197
|
+
.select2-container--bootstrap.select2-container--disabled .select2-selection__clear,
|
|
198
|
+
.select2-container--bootstrap.select2-container--disabled .select2-selection--multiple .select2-selection__choice__remove {
|
|
199
|
+
display: none;
|
|
200
|
+
}
|
|
201
|
+
.select2-container--bootstrap .select2-dropdown {
|
|
202
|
+
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
|
203
|
+
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
|
204
|
+
border-color: #66afe9;
|
|
205
|
+
overflow-x: hidden;
|
|
206
|
+
margin-top: -1px;
|
|
207
|
+
}
|
|
208
|
+
.select2-container--bootstrap .select2-dropdown--above {
|
|
209
|
+
margin-top: 1px;
|
|
210
|
+
}
|
|
211
|
+
.select2-container--bootstrap .select2-results > .select2-results__options {
|
|
212
|
+
max-height: 200px;
|
|
213
|
+
overflow-y: auto;
|
|
214
|
+
}
|
|
215
|
+
.select2-container--bootstrap .select2-selection--single {
|
|
216
|
+
height: 34px;
|
|
217
|
+
line-height: 1.428571429;
|
|
218
|
+
padding: 6px 24px 6px 12px;
|
|
219
|
+
/**
|
|
220
|
+
* Clear the selection.
|
|
221
|
+
*/
|
|
222
|
+
/**
|
|
223
|
+
* Adjust the single Select2's dropdown arrow button appearance.
|
|
224
|
+
*/
|
|
225
|
+
}
|
|
226
|
+
.select2-container--bootstrap .select2-selection--single .select2-selection__clear {
|
|
227
|
+
color: #999;
|
|
228
|
+
cursor: pointer;
|
|
229
|
+
float: right;
|
|
230
|
+
font-weight: bold;
|
|
231
|
+
margin-right: 10px;
|
|
232
|
+
}
|
|
233
|
+
.select2-container--bootstrap .select2-selection--single .select2-selection__clear:hover {
|
|
234
|
+
color: #333;
|
|
235
|
+
}
|
|
236
|
+
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
|
|
237
|
+
position: absolute;
|
|
238
|
+
bottom: 0;
|
|
239
|
+
right: 12px;
|
|
240
|
+
top: 0;
|
|
241
|
+
width: 4px;
|
|
242
|
+
}
|
|
243
|
+
.select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
|
|
244
|
+
border-color: #999 transparent transparent transparent;
|
|
245
|
+
border-style: solid;
|
|
246
|
+
border-width: 4px 4px 0 4px;
|
|
247
|
+
height: 0;
|
|
248
|
+
left: 0;
|
|
249
|
+
margin-left: -4px;
|
|
250
|
+
margin-top: -2px;
|
|
251
|
+
position: absolute;
|
|
252
|
+
top: 50%;
|
|
253
|
+
width: 0;
|
|
254
|
+
}
|
|
255
|
+
.select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
|
|
256
|
+
color: #555555;
|
|
257
|
+
padding: 0;
|
|
258
|
+
}
|
|
259
|
+
.select2-container--bootstrap .select2-selection--single .select2-selection__placeholder {
|
|
260
|
+
color: #999;
|
|
261
|
+
}
|
|
262
|
+
.select2-container--bootstrap .select2-selection--multiple {
|
|
263
|
+
min-height: 34px;
|
|
264
|
+
/**
|
|
265
|
+
* Make Multi Select2's choices match Bootstrap 3's default button styles.
|
|
266
|
+
*/
|
|
267
|
+
/**
|
|
268
|
+
* Minus 2px borders.
|
|
269
|
+
*/
|
|
270
|
+
}
|
|
271
|
+
.select2-container--bootstrap .select2-selection--multiple .select2-selection__rendered {
|
|
272
|
+
box-sizing: border-box;
|
|
273
|
+
display: block;
|
|
274
|
+
line-height: 1.428571429;
|
|
275
|
+
list-style: none;
|
|
276
|
+
margin: 0;
|
|
277
|
+
overflow: hidden;
|
|
278
|
+
padding: 0;
|
|
279
|
+
width: 100%;
|
|
280
|
+
text-overflow: ellipsis;
|
|
281
|
+
white-space: nowrap;
|
|
282
|
+
}
|
|
283
|
+
.select2-container--bootstrap .select2-selection--multiple .select2-selection__placeholder {
|
|
284
|
+
color: #999;
|
|
285
|
+
float: left;
|
|
286
|
+
margin-top: 5px;
|
|
287
|
+
}
|
|
288
|
+
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
|
|
289
|
+
color: #555555;
|
|
290
|
+
background: #fff;
|
|
291
|
+
border: 1px solid #ccc;
|
|
292
|
+
border-radius: 4px;
|
|
293
|
+
cursor: default;
|
|
294
|
+
float: left;
|
|
295
|
+
margin: 5px 0 0 6px;
|
|
296
|
+
padding: 0 6px;
|
|
297
|
+
}
|
|
298
|
+
.select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
|
|
299
|
+
background: transparent;
|
|
300
|
+
padding: 0 12px;
|
|
301
|
+
height: 32px;
|
|
302
|
+
line-height: 1.428571429;
|
|
303
|
+
margin-top: 0;
|
|
304
|
+
min-width: 5em;
|
|
305
|
+
}
|
|
306
|
+
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove {
|
|
307
|
+
color: #999;
|
|
308
|
+
cursor: pointer;
|
|
309
|
+
display: inline-block;
|
|
310
|
+
font-weight: bold;
|
|
311
|
+
margin-right: 3px;
|
|
312
|
+
}
|
|
313
|
+
.select2-container--bootstrap .select2-selection--multiple .select2-selection__choice__remove:hover {
|
|
314
|
+
color: #333;
|
|
315
|
+
}
|
|
316
|
+
.select2-container--bootstrap.input-sm, .select2-container--bootstrap.input-lg {
|
|
317
|
+
border-radius: 0;
|
|
318
|
+
font-size: 12px;
|
|
319
|
+
height: auto;
|
|
320
|
+
line-height: 1;
|
|
321
|
+
padding: 0;
|
|
322
|
+
}
|
|
323
|
+
.select2-container--bootstrap.input-sm .select2-selection--single, .input-group-sm .select2-container--bootstrap .select2-selection--single, .form-group-sm .select2-container--bootstrap .select2-selection--single {
|
|
324
|
+
border-radius: 3px;
|
|
325
|
+
font-size: 12px;
|
|
326
|
+
height: 30px;
|
|
327
|
+
line-height: 1.5;
|
|
328
|
+
padding: 5px 22px 5px 10px;
|
|
329
|
+
/* 2 */
|
|
330
|
+
}
|
|
331
|
+
.select2-container--bootstrap.input-sm .select2-selection--single .select2-selection__arrow b, .input-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b, .form-group-sm .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
|
|
332
|
+
margin-left: -5px;
|
|
333
|
+
}
|
|
334
|
+
.select2-container--bootstrap.input-sm .select2-selection--multiple, .input-group-sm .select2-container--bootstrap .select2-selection--multiple, .form-group-sm .select2-container--bootstrap .select2-selection--multiple {
|
|
335
|
+
min-height: 30px;
|
|
336
|
+
}
|
|
337
|
+
.select2-container--bootstrap.input-sm .select2-selection--multiple .select2-selection__choice, .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
|
|
338
|
+
font-size: 12px;
|
|
339
|
+
line-height: 1.5;
|
|
340
|
+
margin: 4px 0 0 5px;
|
|
341
|
+
padding: 0 5px;
|
|
342
|
+
}
|
|
343
|
+
.select2-container--bootstrap.input-sm .select2-selection--multiple .select2-search--inline .select2-search__field, .input-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, .form-group-sm .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
|
|
344
|
+
padding: 0 10px;
|
|
345
|
+
font-size: 12px;
|
|
346
|
+
height: 28px;
|
|
347
|
+
line-height: 1.5;
|
|
348
|
+
}
|
|
349
|
+
.select2-container--bootstrap.input-lg .select2-selection--single, .input-group-lg .select2-container--bootstrap .select2-selection--single, .form-group-lg .select2-container--bootstrap .select2-selection--single {
|
|
350
|
+
border-radius: 6px;
|
|
351
|
+
font-size: 18px;
|
|
352
|
+
height: 46px;
|
|
353
|
+
line-height: 1.3333333;
|
|
354
|
+
padding: 10px 31px 10px 16px;
|
|
355
|
+
/* 1 */
|
|
356
|
+
}
|
|
357
|
+
.select2-container--bootstrap.input-lg .select2-selection--single .select2-selection__arrow, .input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow, .form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow {
|
|
358
|
+
width: 5px;
|
|
359
|
+
}
|
|
360
|
+
.select2-container--bootstrap.input-lg .select2-selection--single .select2-selection__arrow b, .input-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b, .form-group-lg .select2-container--bootstrap .select2-selection--single .select2-selection__arrow b {
|
|
361
|
+
border-width: 5px 5px 0 5px;
|
|
362
|
+
margin-left: -5px;
|
|
363
|
+
margin-left: -10px;
|
|
364
|
+
margin-top: -2.5px;
|
|
365
|
+
}
|
|
366
|
+
.select2-container--bootstrap.input-lg .select2-selection--multiple, .input-group-lg .select2-container--bootstrap .select2-selection--multiple, .form-group-lg .select2-container--bootstrap .select2-selection--multiple {
|
|
367
|
+
min-height: 46px;
|
|
368
|
+
}
|
|
369
|
+
.select2-container--bootstrap.input-lg .select2-selection--multiple .select2-selection__choice, .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice, .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-selection__choice {
|
|
370
|
+
font-size: 18px;
|
|
371
|
+
line-height: 1.3333333;
|
|
372
|
+
border-radius: 4px;
|
|
373
|
+
margin: 9px 0 0 8px;
|
|
374
|
+
padding: 0 10px;
|
|
375
|
+
}
|
|
376
|
+
.select2-container--bootstrap.input-lg .select2-selection--multiple .select2-search--inline .select2-search__field, .input-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field, .form-group-lg .select2-container--bootstrap .select2-selection--multiple .select2-search--inline .select2-search__field {
|
|
377
|
+
padding: 0 16px;
|
|
378
|
+
font-size: 18px;
|
|
379
|
+
height: 44px;
|
|
380
|
+
line-height: 1.3333333;
|
|
381
|
+
}
|
|
382
|
+
.select2-container--bootstrap.input-lg.select2-container--open .select2-selection--single {
|
|
383
|
+
/**
|
|
384
|
+
* Make the dropdown arrow point up while the dropdown is visible.
|
|
385
|
+
*/
|
|
386
|
+
}
|
|
387
|
+
.select2-container--bootstrap.input-lg.select2-container--open .select2-selection--single .select2-selection__arrow b {
|
|
388
|
+
border-color: transparent transparent #999 transparent;
|
|
389
|
+
border-width: 0 5px 5px 5px;
|
|
390
|
+
}
|
|
391
|
+
.input-group-lg .select2-container--bootstrap.select2-container--open .select2-selection--single {
|
|
392
|
+
/**
|
|
393
|
+
* Make the dropdown arrow point up while the dropdown is visible.
|
|
394
|
+
*/
|
|
395
|
+
}
|
|
396
|
+
.input-group-lg .select2-container--bootstrap.select2-container--open .select2-selection--single .select2-selection__arrow b {
|
|
397
|
+
border-color: transparent transparent #999 transparent;
|
|
398
|
+
border-width: 0 5px 5px 5px;
|
|
399
|
+
}
|
|
400
|
+
.select2-container--bootstrap[dir="rtl"] {
|
|
401
|
+
/**
|
|
402
|
+
* Single Select2
|
|
403
|
+
*
|
|
404
|
+
* 1. Makes sure that .select2-selection__placeholder is positioned
|
|
405
|
+
* correctly.
|
|
406
|
+
*/
|
|
407
|
+
/**
|
|
408
|
+
* Multiple Select2
|
|
409
|
+
*/
|
|
410
|
+
}
|
|
411
|
+
.select2-container--bootstrap[dir="rtl"] .select2-selection--single {
|
|
412
|
+
padding-left: 24px;
|
|
413
|
+
padding-right: 12px;
|
|
414
|
+
}
|
|
415
|
+
.select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__rendered {
|
|
416
|
+
padding-right: 0;
|
|
417
|
+
padding-left: 0;
|
|
418
|
+
text-align: right;
|
|
419
|
+
/* 1 */
|
|
420
|
+
}
|
|
421
|
+
.select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__clear {
|
|
422
|
+
float: left;
|
|
423
|
+
}
|
|
424
|
+
.select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__arrow {
|
|
425
|
+
left: 12px;
|
|
426
|
+
right: auto;
|
|
427
|
+
}
|
|
428
|
+
.select2-container--bootstrap[dir="rtl"] .select2-selection--single .select2-selection__arrow b {
|
|
429
|
+
margin-left: 0;
|
|
430
|
+
}
|
|
431
|
+
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice,
|
|
432
|
+
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder {
|
|
433
|
+
float: right;
|
|
434
|
+
}
|
|
435
|
+
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
|
|
436
|
+
margin-left: 0;
|
|
437
|
+
margin-right: 6px;
|
|
438
|
+
}
|
|
439
|
+
.select2-container--bootstrap[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
|
|
440
|
+
margin-left: 2px;
|
|
441
|
+
margin-right: auto;
|
|
442
|
+
}
|
|
443
|
+
|
|
444
|
+
/*------------------------------------*\
|
|
445
|
+
#ADDITIONAL GOODIES
|
|
446
|
+
\*------------------------------------*/
|
|
447
|
+
/**
|
|
448
|
+
* Address Bootstrap's validation states
|
|
449
|
+
*
|
|
450
|
+
* If a Select2 widget parent has one of Bootstrap's validation state modifier
|
|
451
|
+
* classes, adjust Select2's border colors and focus states accordingly.
|
|
452
|
+
* You may apply said classes to the Select2 dropdown (body > .select2-container)
|
|
453
|
+
* via JavaScript match Bootstraps' to make its styles match.
|
|
454
|
+
*
|
|
455
|
+
* @see http://getbootstrap.com/css/#forms-control-validation
|
|
456
|
+
*/
|
|
457
|
+
.has-warning .select2-dropdown,
|
|
458
|
+
.has-warning .select2-selection {
|
|
459
|
+
border-color: #8a6d3b;
|
|
460
|
+
}
|
|
461
|
+
.has-warning .select2-container--open .select2-selection {
|
|
462
|
+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
|
|
463
|
+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #c0a16b;
|
|
464
|
+
border-color: #66512c;
|
|
465
|
+
}
|
|
466
|
+
.has-warning.select2-drop-active {
|
|
467
|
+
border-color: #66512c;
|
|
468
|
+
}
|
|
469
|
+
.has-warning.select2-drop-active.select2-drop.select2-drop-above {
|
|
470
|
+
border-top-color: #66512c;
|
|
471
|
+
}
|
|
472
|
+
|
|
473
|
+
.has-error .select2-dropdown,
|
|
474
|
+
.has-error .select2-selection {
|
|
475
|
+
border-color: #a94442;
|
|
476
|
+
}
|
|
477
|
+
.has-error .select2-container--open .select2-selection {
|
|
478
|
+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
|
479
|
+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
|
|
480
|
+
border-color: #843534;
|
|
481
|
+
}
|
|
482
|
+
.has-error.select2-drop-active {
|
|
483
|
+
border-color: #843534;
|
|
484
|
+
}
|
|
485
|
+
.has-error.select2-drop-active.select2-drop.select2-drop-above {
|
|
486
|
+
border-top-color: #843534;
|
|
487
|
+
}
|
|
488
|
+
|
|
489
|
+
.has-success .select2-dropdown,
|
|
490
|
+
.has-success .select2-selection {
|
|
491
|
+
border-color: #3c763d;
|
|
492
|
+
}
|
|
493
|
+
.has-success .select2-container--open .select2-selection {
|
|
494
|
+
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
|
|
495
|
+
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #67b168;
|
|
496
|
+
border-color: #2b542c;
|
|
497
|
+
}
|
|
498
|
+
.has-success.select2-drop-active {
|
|
499
|
+
border-color: #2b542c;
|
|
500
|
+
}
|
|
501
|
+
.has-success.select2-drop-active.select2-drop.select2-drop-above {
|
|
502
|
+
border-top-color: #2b542c;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
/**
|
|
506
|
+
* Select2 widgets in Bootstrap Input Groups
|
|
507
|
+
*
|
|
508
|
+
* When Select2 widgets are combined with other elements using Bootstraps
|
|
509
|
+
* "Input Group" component, we don't want specific edges of the Select2
|
|
510
|
+
* container to have a border-radius.
|
|
511
|
+
*
|
|
512
|
+
* Use .select2-bootstrap-prepend and .select2-bootstrap-append on
|
|
513
|
+
* a Bootstrap 3 .input-group to let the contained Select2 widget know which
|
|
514
|
+
* edges should not be rounded as they are directly followed by another element.
|
|
515
|
+
*
|
|
516
|
+
* @see http://getbootstrap.com/components/#input-groups
|
|
517
|
+
*/
|
|
518
|
+
/**
|
|
519
|
+
* Mimick Bootstraps .input-group .form-control styles.
|
|
520
|
+
*
|
|
521
|
+
* @see https://github.com/twbs/bootstrap/blob/master/less/input-groups.less
|
|
522
|
+
*/
|
|
523
|
+
.input-group .select2-container--bootstrap {
|
|
524
|
+
display: table;
|
|
525
|
+
table-layout: fixed;
|
|
526
|
+
position: relative;
|
|
527
|
+
z-index: 2;
|
|
528
|
+
float: left;
|
|
529
|
+
width: 100%;
|
|
530
|
+
margin-bottom: 0;
|
|
531
|
+
}
|
|
532
|
+
|
|
533
|
+
.input-group.select2-bootstrap-prepend .select2-container--bootstrap .select2-selection {
|
|
534
|
+
border-bottom-left-radius: 0;
|
|
535
|
+
border-top-left-radius: 0;
|
|
536
|
+
}
|
|
537
|
+
|
|
538
|
+
.input-group.select2-bootstrap-append .select2-container--bootstrap .select2-selection {
|
|
539
|
+
border-bottom-right-radius: 0;
|
|
540
|
+
border-top-right-radius: 0;
|
|
541
|
+
}
|
|
542
|
+
|
|
543
|
+
/**
|
|
544
|
+
* Adjust alignment of Bootstrap buttons in Bootstrap Input Groups to address
|
|
545
|
+
* Multi Select2's height which - depending on how many elements have been selected -
|
|
546
|
+
* may grown higher than their initial size.
|
|
547
|
+
*
|
|
548
|
+
* @see http://getbootstrap.com/components/#input-groups
|
|
549
|
+
*/
|
|
550
|
+
.select2-bootstrap-append .select2-container--bootstrap,
|
|
551
|
+
.select2-bootstrap-append .input-group-btn,
|
|
552
|
+
.select2-bootstrap-append .input-group-btn .btn,
|
|
553
|
+
.select2-bootstrap-prepend .select2-container--bootstrap,
|
|
554
|
+
.select2-bootstrap-prepend .input-group-btn,
|
|
555
|
+
.select2-bootstrap-prepend .input-group-btn .btn {
|
|
556
|
+
vertical-align: top;
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
/**
|
|
560
|
+
* Temporary fix for https://github.com/fk/select2-bootstrap-theme/issues/9
|
|
561
|
+
*/
|
|
562
|
+
.form-control.select2-hidden-accessible {
|
|
563
|
+
position: absolute !important;
|
|
564
|
+
}
|