formstrap 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (180) hide show
  1. checksums.yaml +7 -0
  2. data/.DS_Store +0 -0
  3. data/.gitignore +33 -0
  4. data/CHANGELOG.md +1 -0
  5. data/CODE_OF_CONDUCT.md +84 -0
  6. data/Gemfile +28 -0
  7. data/LICENSE.txt +21 -0
  8. data/README.md +118 -0
  9. data/Rakefile +10 -0
  10. data/app/assets/config/headmin_manifest.js +2 -0
  11. data/app/assets/images/avatar.jpg +0 -0
  12. data/app/assets/images/document.docx +0 -0
  13. data/app/assets/images/document.pdf +0 -0
  14. data/app/assets/images/image.jpg +0 -0
  15. data/app/assets/images/spreadsheet.xls +0 -0
  16. data/app/assets/images/video.mp4 +0 -0
  17. data/app/assets/javascripts/formstrap/config/i18n.js +11 -0
  18. data/app/assets/javascripts/formstrap/controllers/autocomplete_controller.js +318 -0
  19. data/app/assets/javascripts/formstrap/controllers/date_range_controller.js +38 -0
  20. data/app/assets/javascripts/formstrap/controllers/dropzone_controller.js +31 -0
  21. data/app/assets/javascripts/formstrap/controllers/file_preview_controller.js +244 -0
  22. data/app/assets/javascripts/formstrap/controllers/flatpickr_controller.js +35 -0
  23. data/app/assets/javascripts/formstrap/controllers/infinite_scroller_controller.js +28 -0
  24. data/app/assets/javascripts/formstrap/controllers/media_controller.js +252 -0
  25. data/app/assets/javascripts/formstrap/controllers/media_modal_controller.js +147 -0
  26. data/app/assets/javascripts/formstrap/controllers/redactorx_controller.js +40 -0
  27. data/app/assets/javascripts/formstrap/controllers/repeater_controller.js +148 -0
  28. data/app/assets/javascripts/formstrap/controllers/select_controller.js +49 -0
  29. data/app/assets/javascripts/formstrap/controllers/textarea_controller.js +48 -0
  30. data/app/assets/javascripts/formstrap/index.js +32 -0
  31. data/app/assets/javascripts/formstrap.js +11515 -0
  32. data/app/assets/stylesheets/formstrap/forms/autocomplete.scss +27 -0
  33. data/app/assets/stylesheets/formstrap/forms/file.scss +83 -0
  34. data/app/assets/stylesheets/formstrap/forms/media.scss +10 -0
  35. data/app/assets/stylesheets/formstrap/forms/repeater.scss +62 -0
  36. data/app/assets/stylesheets/formstrap/forms/search.scss +12 -0
  37. data/app/assets/stylesheets/formstrap/forms.scss +12 -0
  38. data/app/assets/stylesheets/formstrap/general.scss +18 -0
  39. data/app/assets/stylesheets/formstrap/media/index.scss +9 -0
  40. data/app/assets/stylesheets/formstrap/media.scss +1 -0
  41. data/app/assets/stylesheets/formstrap/utilities/buttons.scss +27 -0
  42. data/app/assets/stylesheets/formstrap/utilities/dropzone.scss +72 -0
  43. data/app/assets/stylesheets/formstrap/utilities.scss +2 -0
  44. data/app/assets/stylesheets/formstrap/vendor/flatpickr.css +903 -0
  45. data/app/assets/stylesheets/formstrap/vendor/tom-select-bootstrap.scss +535 -0
  46. data/app/assets/stylesheets/formstrap.css +1559 -0
  47. data/app/assets/stylesheets/formstrap.scss +11 -0
  48. data/app/controllers/concerns/formstrap/pagination.rb +27 -0
  49. data/app/controllers/formstrap/media_controller.rb +68 -0
  50. data/app/controllers/formstrap_controller.rb +2 -0
  51. data/app/models/concerns/formstrap/autocompletable.rb +36 -0
  52. data/app/models/concerns/formstrap/hintable.rb +22 -0
  53. data/app/models/concerns/formstrap/input_groupable.rb +21 -0
  54. data/app/models/concerns/formstrap/labelable.rb +31 -0
  55. data/app/models/concerns/formstrap/listable.rb +26 -0
  56. data/app/models/concerns/formstrap/placeholderable.rb +11 -0
  57. data/app/models/concerns/formstrap/validatable.rb +38 -0
  58. data/app/models/concerns/formstrap/wrappable.rb +19 -0
  59. data/app/models/formstrap/.DS_Store +0 -0
  60. data/app/models/formstrap/association_view.rb +100 -0
  61. data/app/models/formstrap/blocks_view.rb +43 -0
  62. data/app/models/formstrap/checkbox_view.rb +50 -0
  63. data/app/models/formstrap/color_view.rb +45 -0
  64. data/app/models/formstrap/date_range_view.rb +23 -0
  65. data/app/models/formstrap/date_view.rb +43 -0
  66. data/app/models/formstrap/datetime_range_view.rb +23 -0
  67. data/app/models/formstrap/datetime_view.rb +43 -0
  68. data/app/models/formstrap/email_view.rb +46 -0
  69. data/app/models/formstrap/file_view.rb +106 -0
  70. data/app/models/formstrap/flatpickr_range_view.rb +89 -0
  71. data/app/models/formstrap/flatpickr_view.rb +27 -0
  72. data/app/models/formstrap/hidden_view.rb +8 -0
  73. data/app/models/formstrap/hint_view.rb +4 -0
  74. data/app/models/formstrap/input_group_view.rb +17 -0
  75. data/app/models/formstrap/label_view.rb +22 -0
  76. data/app/models/formstrap/media_item_view.rb +41 -0
  77. data/app/models/formstrap/media_view.rb +143 -0
  78. data/app/models/formstrap/number_view.rb +47 -0
  79. data/app/models/formstrap/password_view.rb +42 -0
  80. data/app/models/formstrap/redactorx_view.rb +57 -0
  81. data/app/models/formstrap/search_view.rb +46 -0
  82. data/app/models/formstrap/select_view.rb +61 -0
  83. data/app/models/formstrap/switch_view.rb +21 -0
  84. data/app/models/formstrap/text_view.rb +46 -0
  85. data/app/models/formstrap/textarea_view.rb +47 -0
  86. data/app/models/formstrap/url_view.rb +46 -0
  87. data/app/models/formstrap/wrapper_view.rb +17 -0
  88. data/app/models/formstrap/wysiwyg_view.rb +15 -0
  89. data/app/models/view_model.rb +62 -0
  90. data/app/views/formstrap/_association.html.erb +30 -0
  91. data/app/views/formstrap/_autocomplete.html.erb +11 -0
  92. data/app/views/formstrap/_blocks.html.erb +45 -0
  93. data/app/views/formstrap/_checkbox.html.erb +34 -0
  94. data/app/views/formstrap/_color.html.erb +32 -0
  95. data/app/views/formstrap/_datalist.html.erb +3 -0
  96. data/app/views/formstrap/_date.html.erb +41 -0
  97. data/app/views/formstrap/_date_range.html.erb +40 -0
  98. data/app/views/formstrap/_datetime.html.erb +41 -0
  99. data/app/views/formstrap/_datetime_range.html.erb +40 -0
  100. data/app/views/formstrap/_email.html.erb +43 -0
  101. data/app/views/formstrap/_errors.html.erb +19 -0
  102. data/app/views/formstrap/_file.html.erb +94 -0
  103. data/app/views/formstrap/_flatpickr.html.erb +33 -0
  104. data/app/views/formstrap/_flatpickr_range.html.erb +40 -0
  105. data/app/views/formstrap/_hidden.html.erb +23 -0
  106. data/app/views/formstrap/_hint.html.erb +21 -0
  107. data/app/views/formstrap/_input_group.html.erb +21 -0
  108. data/app/views/formstrap/_label.html.erb +22 -0
  109. data/app/views/formstrap/_media.html.erb +60 -0
  110. data/app/views/formstrap/_number.html.erb +41 -0
  111. data/app/views/formstrap/_password.html.erb +39 -0
  112. data/app/views/formstrap/_redactorx.html.erb +31 -0
  113. data/app/views/formstrap/_repeater.html.erb +128 -0
  114. data/app/views/formstrap/_search.html.erb +43 -0
  115. data/app/views/formstrap/_select.html.erb +43 -0
  116. data/app/views/formstrap/_switch.html.erb +29 -0
  117. data/app/views/formstrap/_text.html.erb +42 -0
  118. data/app/views/formstrap/_textarea.html.erb +39 -0
  119. data/app/views/formstrap/_to_ary.html.erb +0 -0
  120. data/app/views/formstrap/_url.html.erb +43 -0
  121. data/app/views/formstrap/_validation.html.erb +18 -0
  122. data/app/views/formstrap/_wrapper.html.erb +8 -0
  123. data/app/views/formstrap/_wysiwyg.html.erb +28 -0
  124. data/app/views/formstrap/autocomplete/_item.html.erb +3 -0
  125. data/app/views/formstrap/autocomplete/_list.html.erb +3 -0
  126. data/app/views/formstrap/blocks/_modal.html.erb +20 -0
  127. data/app/views/formstrap/fields/_base.html.erb +25 -0
  128. data/app/views/formstrap/fields/_file.html.erb +17 -0
  129. data/app/views/formstrap/fields/_files.html.erb +17 -0
  130. data/app/views/formstrap/fields/_group.html.erb +52 -0
  131. data/app/views/formstrap/fields/_list.html.erb +31 -0
  132. data/app/views/formstrap/fields/_text.html.erb +17 -0
  133. data/app/views/formstrap/media/_item.html.erb +38 -0
  134. data/app/views/formstrap/media/_media_item_modal.html.erb +77 -0
  135. data/app/views/formstrap/media/_modal.html.erb +40 -0
  136. data/app/views/formstrap/media/_thumbnail.html.erb +20 -0
  137. data/app/views/formstrap/media/_validation.html.erb +10 -0
  138. data/app/views/formstrap/media/create.turbo_stream.erb +5 -0
  139. data/app/views/formstrap/media/index.html.erb +3 -0
  140. data/app/views/formstrap/media/index.turbo_stream.erb +11 -0
  141. data/app/views/formstrap/media/show.html.erb +9 -0
  142. data/app/views/formstrap/media/thumbnail.html.erb +3 -0
  143. data/app/views/formstrap/media/update.turbo_stream.erb +3 -0
  144. data/app/views/formstrap/pagination/_infinite.html.erb +7 -0
  145. data/app/views/formstrap/repeater/_row.html.erb +53 -0
  146. data/app/views/formstrap/shared/_notifications.html.erb +20 -0
  147. data/app/views/formstrap/shared/_popup.html.erb +32 -0
  148. data/app/views/formstrap/shared/_thumbnail.html.erb +35 -0
  149. data/bin/console +14 -0
  150. data/bin/setup +8 -0
  151. data/config/importmap.rb +2 -0
  152. data/config/locales/activerecord/en.yml +12 -0
  153. data/config/locales/activerecord/nl.yml +13 -0
  154. data/config/locales/defaults/en.yml +215 -0
  155. data/config/locales/defaults/nl.yml +213 -0
  156. data/config/locales/devise/en.yml +65 -0
  157. data/config/locales/devise/nl.yml +85 -0
  158. data/config/locales/en.yml +6 -0
  159. data/config/locales/formstrap/forms/en.yml +39 -0
  160. data/config/locales/formstrap/forms/nl.yml +39 -0
  161. data/config/locales/formstrap/media/en.yml +24 -0
  162. data/config/locales/formstrap/media/nl.yml +24 -0
  163. data/config/locales/formstrap/thumbnail/en.yml +4 -0
  164. data/config/locales/formstrap/thumbnail/nl.yml +4 -0
  165. data/config/locales/nl.yml +6 -0
  166. data/config/routes.rb +11 -0
  167. data/esbuild-css.js +25 -0
  168. data/esbuild-js.js +11 -0
  169. data/formstrap.gemspec +37 -0
  170. data/formstrap.iml +34 -0
  171. data/lib/formstrap/engine.rb +27 -0
  172. data/lib/formstrap/form_builder.rb +177 -0
  173. data/lib/formstrap/form_helper.rb +19 -0
  174. data/lib/formstrap/version.rb +3 -0
  175. data/lib/formstrap.rb +6 -0
  176. data/package.json +54 -0
  177. data/src/js/formstrap.js +1 -0
  178. data/src/scss/formstrap.scss +1 -0
  179. data/yarn.lock +1998 -0
  180. metadata +224 -0
@@ -0,0 +1,535 @@
1
+ /**
2
+ * Tom Select bootstrap 5
3
+ */
4
+ /**
5
+ * tom-select.css (v2.0.0)
6
+ * Copyright (c) contributors
7
+ *
8
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
9
+ * file except in compliance with the License. You may obtain a copy of the License at:
10
+ * http://www.apache.org/licenses/LICENSE-2.0
11
+ *
12
+ * Unless required by applicable law or agreed to in writing, software distributed under
13
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
14
+ * ANY KIND, either express or implied. See the License for the specific language
15
+ * governing permissions and limitations under the License.
16
+ *
17
+ */
18
+ .ts-wrapper.plugin-drag_drop.multi > .ts-control > div.ui-sortable-placeholder {
19
+ visibility: visible !important;
20
+ background: #f2f2f2 !important;
21
+ background: rgba(0, 0, 0, 0.06) !important;
22
+ border: 0 none !important;
23
+ box-shadow: inset 0 0 12px 4px #fff;
24
+ }
25
+ .ts-wrapper.plugin-drag_drop .ui-sortable-placeholder::after {
26
+ content: "!";
27
+ visibility: hidden;
28
+ }
29
+ .ts-wrapper.plugin-drag_drop .ui-sortable-helper {
30
+ box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
31
+ }
32
+
33
+ .plugin-checkbox_options .option input {
34
+ margin-right: 0.5rem;
35
+ }
36
+
37
+ .plugin-clear_button .ts-control {
38
+ padding-right: calc(1em + (3 * 5px)) !important;
39
+ }
40
+ .plugin-clear_button .clear-button {
41
+ opacity: 0;
42
+ position: absolute;
43
+ top: 0.375rem;
44
+ right: calc(0.75rem - 5px);
45
+ margin-right: 0 !important;
46
+ background: transparent !important;
47
+ transition: opacity 0.5s;
48
+ cursor: pointer;
49
+ }
50
+ .plugin-clear_button.single .clear-button {
51
+ right: calc(0.75rem - 5px + 2rem);
52
+ }
53
+ .plugin-clear_button.focus.has-items .clear-button, .plugin-clear_button:hover.has-items .clear-button {
54
+ opacity: 1;
55
+ }
56
+
57
+ .ts-wrapper .dropdown-header {
58
+ position: relative;
59
+ padding: 6px 0.75rem;
60
+ border-bottom: 1px solid #d0d0d0;
61
+ background: #f8f8f8;
62
+ border-radius: 0.25rem 0.25rem 0 0;
63
+ }
64
+ .ts-wrapper .dropdown-header-close {
65
+ position: absolute;
66
+ right: 0.75rem;
67
+ top: 50%;
68
+ color: #343a40;
69
+ opacity: 0.4;
70
+ margin-top: -12px;
71
+ line-height: 20px;
72
+ font-size: 20px !important;
73
+ }
74
+ .ts-wrapper .dropdown-header-close:hover {
75
+ color: black;
76
+ }
77
+
78
+ .plugin-dropdown_input.focus.dropdown-active .ts-control {
79
+ box-shadow: none;
80
+ border: 1px solid #ced4da;
81
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075);
82
+ }
83
+ .plugin-dropdown_input .dropdown-input {
84
+ border: 1px solid #d0d0d0;
85
+ border-width: 0 0 1px 0;
86
+ display: block;
87
+ padding: 0.375rem 0.75rem;
88
+ box-shadow: none;
89
+ width: 100%;
90
+ background: transparent;
91
+ }
92
+ .plugin-dropdown_input.focus ~ .ts-dropdown .dropdown-input {
93
+ border-color: #86b7fe;
94
+ outline: 0;
95
+ box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
96
+ }
97
+
98
+ .ts-wrapper.plugin-input_autogrow.has-items .ts-control > input {
99
+ min-width: 0;
100
+ }
101
+ .ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input {
102
+ flex: none;
103
+ min-width: 4px;
104
+ }
105
+ .ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-webkit-input-placeholder {
106
+ color: transparent;
107
+ }
108
+ .ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::-ms-input-placeholder {
109
+ color: transparent;
110
+ }
111
+ .ts-wrapper.plugin-input_autogrow.has-items.focus .ts-control > input::placeholder {
112
+ color: transparent;
113
+ }
114
+
115
+ .ts-dropdown.plugin-optgroup_columns .ts-dropdown-content {
116
+ display: flex;
117
+ }
118
+ .ts-dropdown.plugin-optgroup_columns .optgroup {
119
+ border-right: 1px solid #f2f2f2;
120
+ border-top: 0 none;
121
+ flex-grow: 1;
122
+ flex-basis: 0;
123
+ min-width: 0;
124
+ }
125
+ .ts-dropdown.plugin-optgroup_columns .optgroup:last-child {
126
+ border-right: 0 none;
127
+ }
128
+ .ts-dropdown.plugin-optgroup_columns .optgroup:before {
129
+ display: none;
130
+ }
131
+ .ts-dropdown.plugin-optgroup_columns .optgroup-header {
132
+ border-top: 0 none;
133
+ }
134
+
135
+ .ts-wrapper.plugin-remove_button .item {
136
+ display: inline-flex;
137
+ align-items: center;
138
+ padding-right: 0 !important;
139
+ }
140
+ .ts-wrapper.plugin-remove_button .item .remove {
141
+ color: inherit;
142
+ text-decoration: none;
143
+ vertical-align: middle;
144
+ display: inline-block;
145
+ padding: 0 5px;
146
+ border-left: 1px solid #dee2e6;
147
+ border-radius: 0 2px 2px 0;
148
+ box-sizing: border-box;
149
+ margin-left: 5px;
150
+ }
151
+ .ts-wrapper.plugin-remove_button .item .remove:hover {
152
+ background: rgba(0, 0, 0, 0.05);
153
+ }
154
+ .ts-wrapper.plugin-remove_button .item.active .remove {
155
+ border-left-color: rgba(0, 0, 0, 0);
156
+ }
157
+ .ts-wrapper.plugin-remove_button.disabled .item .remove:hover {
158
+ background: none;
159
+ }
160
+ .ts-wrapper.plugin-remove_button.disabled .item .remove {
161
+ border-left-color: white;
162
+ }
163
+ .ts-wrapper.plugin-remove_button .remove-single {
164
+ position: absolute;
165
+ right: 0;
166
+ top: 0;
167
+ font-size: 23px;
168
+ }
169
+
170
+ .ts-wrapper {
171
+ position: relative;
172
+ }
173
+
174
+ .ts-dropdown,
175
+ .ts-control,
176
+ .ts-control input {
177
+ color: #343a40;
178
+ font-family: inherit;
179
+ font-size: inherit;
180
+ line-height: 1.5;
181
+ font-smoothing: inherit;
182
+ }
183
+
184
+ .ts-control,
185
+ .ts-wrapper.single.input-active .ts-control {
186
+ background: #fff;
187
+ cursor: text;
188
+ }
189
+
190
+ .ts-control {
191
+ border: 1px solid #ced4da;
192
+ padding: 0.375rem 0.75rem;
193
+ width: 100%;
194
+ overflow: hidden;
195
+ position: relative;
196
+ z-index: 1;
197
+ box-sizing: border-box;
198
+ box-shadow: none;
199
+ border-radius: 0.25rem;
200
+ display: flex;
201
+ flex-wrap: wrap;
202
+ }
203
+ .ts-wrapper.multi.has-items .ts-control {
204
+ padding: calc( 0.375rem - 1px - 0px) 0.75rem calc( 0.375rem - 1px - 3px - 0px);
205
+ }
206
+ .full .ts-control {
207
+ background-color: #fff;
208
+ }
209
+ .disabled .ts-control, .disabled .ts-control * {
210
+ cursor: default !important;
211
+ }
212
+ .focus .ts-control {
213
+ box-shadow: none;
214
+ }
215
+ .ts-control > * {
216
+ vertical-align: baseline;
217
+ display: inline-block;
218
+ }
219
+ .ts-wrapper.multi .ts-control > div {
220
+ cursor: pointer;
221
+ margin: 0 3px 3px 0;
222
+ padding: 1px 5px;
223
+ background: #efefef;
224
+ color: #343a40;
225
+ border: 0px solid #dee2e6;
226
+ }
227
+ .ts-wrapper.multi .ts-control > div.active {
228
+ background: #0d6efd;
229
+ color: #fff;
230
+ border: 0px solid rgba(0, 0, 0, 0);
231
+ }
232
+ .ts-wrapper.multi.disabled .ts-control > div, .ts-wrapper.multi.disabled .ts-control > div.active {
233
+ color: #878787;
234
+ background: white;
235
+ border: 0px solid white;
236
+ }
237
+ .ts-control > input {
238
+ flex: 1 1 auto;
239
+ min-width: 7rem;
240
+ display: inline-block !important;
241
+ padding: 0 !important;
242
+ min-height: 0 !important;
243
+ max-height: none !important;
244
+ max-width: 100% !important;
245
+ margin: 0 !important;
246
+ text-indent: 0 !important;
247
+ border: 0 none !important;
248
+ background: none !important;
249
+ line-height: inherit !important;
250
+ -webkit-user-select: auto !important;
251
+ -moz-user-select: auto !important;
252
+ -ms-user-select: auto !important;
253
+ user-select: auto !important;
254
+ box-shadow: none !important;
255
+ }
256
+ .ts-control > input::-ms-clear {
257
+ display: none;
258
+ }
259
+ .ts-control > input:focus {
260
+ outline: none !important;
261
+ }
262
+ .has-items .ts-control > input {
263
+ margin: 0 4px !important;
264
+ }
265
+ .ts-control.rtl {
266
+ text-align: right;
267
+ }
268
+ .ts-control.rtl.single .ts-control:after {
269
+ left: calc(0.75rem + 5px);
270
+ right: auto;
271
+ }
272
+ .ts-control.rtl .ts-control > input {
273
+ margin: 0 4px 0 -2px !important;
274
+ }
275
+ .disabled .ts-control {
276
+ opacity: 0.5;
277
+ background-color: #e9ecef;
278
+ }
279
+ .input-hidden .ts-control > input {
280
+ opacity: 0;
281
+ position: absolute;
282
+ left: -10000px;
283
+ }
284
+
285
+ .ts-dropdown {
286
+ position: absolute;
287
+ top: 100%;
288
+ left: 0;
289
+ width: 100%;
290
+ z-index: 10;
291
+ border: 1px solid #d0d0d0;
292
+ background: #fff;
293
+ margin: 0.25rem 0 0 0;
294
+ border-top: 0 none;
295
+ box-sizing: border-box;
296
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
297
+ border-radius: 0 0 0.25rem 0.25rem;
298
+ }
299
+ .ts-dropdown [data-selectable] {
300
+ cursor: pointer;
301
+ overflow: hidden;
302
+ }
303
+ .ts-dropdown [data-selectable] .highlight {
304
+ background: rgba(255, 237, 40, 0.4);
305
+ border-radius: 1px;
306
+ }
307
+ .ts-dropdown .option,
308
+ .ts-dropdown .optgroup-header,
309
+ .ts-dropdown .no-results,
310
+ .ts-dropdown .create {
311
+ padding: 3px 0.75rem;
312
+ }
313
+ .ts-dropdown .option, .ts-dropdown [data-disabled], .ts-dropdown [data-disabled] [data-selectable].option {
314
+ cursor: inherit;
315
+ opacity: 0.5;
316
+ }
317
+ .ts-dropdown [data-selectable].option {
318
+ opacity: 1;
319
+ cursor: pointer;
320
+ }
321
+ .ts-dropdown .optgroup:first-child .optgroup-header {
322
+ border-top: 0 none;
323
+ }
324
+ .ts-dropdown .optgroup-header {
325
+ color: #6c757d;
326
+ background: #fff;
327
+ cursor: default;
328
+ }
329
+ .ts-dropdown .create:hover,
330
+ .ts-dropdown .option:hover,
331
+ .ts-dropdown .active {
332
+ background-color: #e9ecef;
333
+ color: #1e2125;
334
+ }
335
+ .ts-dropdown .create:hover.create,
336
+ .ts-dropdown .option:hover.create,
337
+ .ts-dropdown .active.create {
338
+ color: #1e2125;
339
+ }
340
+ .ts-dropdown .create {
341
+ color: rgba(52, 58, 64, 0.5);
342
+ }
343
+ .ts-dropdown .spinner {
344
+ display: inline-block;
345
+ width: 30px;
346
+ height: 30px;
347
+ margin: 3px 0.75rem;
348
+ }
349
+ .ts-dropdown .spinner:after {
350
+ content: " ";
351
+ display: block;
352
+ width: 24px;
353
+ height: 24px;
354
+ margin: 3px;
355
+ border-radius: 50%;
356
+ border: 5px solid #d0d0d0;
357
+ border-color: #d0d0d0 transparent #d0d0d0 transparent;
358
+ animation: lds-dual-ring 1.2s linear infinite;
359
+ }
360
+ @keyframes lds-dual-ring {
361
+ 0% {
362
+ transform: rotate(0deg);
363
+ }
364
+ 100% {
365
+ transform: rotate(360deg);
366
+ }
367
+ }
368
+
369
+ .ts-dropdown-content {
370
+ overflow-y: auto;
371
+ overflow-x: hidden;
372
+ max-height: 200px;
373
+ overflow-scrolling: touch;
374
+ scroll-behavior: smooth;
375
+ }
376
+
377
+ .ts-hidden-accessible {
378
+ border: 0 !important;
379
+ clip: rect(0 0 0 0) !important;
380
+ -webkit-clip-path: inset(50%) !important;
381
+ clip-path: inset(50%) !important;
382
+ height: 1px !important;
383
+ overflow: hidden !important;
384
+ padding: 0 !important;
385
+ position: absolute !important;
386
+ width: 1px !important;
387
+ white-space: nowrap !important;
388
+ }
389
+
390
+ .ts-wrapper.form-control,
391
+ .ts-wrapper.form-select {
392
+ padding: 0 !important;
393
+ }
394
+
395
+ .ts-dropdown,
396
+ .ts-dropdown.form-control,
397
+ .ts-dropdown.form-select {
398
+ height: auto;
399
+ padding: 0;
400
+ z-index: 1000;
401
+ background: #fff;
402
+ border: 1px solid rgba(0, 0, 0, 0.15);
403
+ border-radius: 0.25rem;
404
+ box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
405
+ }
406
+
407
+ .ts-dropdown .optgroup-header {
408
+ font-size: 0.875rem;
409
+ line-height: 1.5;
410
+ }
411
+ .ts-dropdown .optgroup:first-child:before {
412
+ display: none;
413
+ }
414
+ .ts-dropdown .optgroup:before {
415
+ content: " ";
416
+ display: block;
417
+ height: 0;
418
+ margin: 0.5rem 0;
419
+ overflow: hidden;
420
+ border-top: 1px solid rgba(0, 0, 0, 0.15);
421
+ margin-left: -0.75rem;
422
+ margin-right: -0.75rem;
423
+ }
424
+ .ts-dropdown .create {
425
+ padding-left: 0.75rem;
426
+ }
427
+
428
+ .ts-dropdown-content {
429
+ padding: 5px 0;
430
+ }
431
+
432
+ .ts-control {
433
+ min-height: calc(1.5em + 0.75rem + 2px);
434
+ transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
435
+ display: flex;
436
+ align-items: center;
437
+ }
438
+ @media (prefers-reduced-motion: reduce) {
439
+ .ts-control {
440
+ transition: none;
441
+ }
442
+ }
443
+ .ts-control.dropdown -active {
444
+ border-radius: 0.25rem;
445
+ }
446
+ .focus .ts-control {
447
+ border-color: #86b7fe;
448
+ outline: 0;
449
+ box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
450
+ }
451
+ .ts-control .item {
452
+ display: flex;
453
+ align-items: center;
454
+ }
455
+
456
+ .is-invalid .ts-control,
457
+ .was-validated .invalid .ts-control {
458
+ border-color: #dc3545;
459
+ }
460
+ .focus .is-invalid .ts-control,
461
+ .focus .was-validated .invalid .ts-control {
462
+ border-color: #bd2130;
463
+ box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
464
+ }
465
+
466
+ .is-valid .ts-control {
467
+ border-color: #198754;
468
+ }
469
+ .focus .is-valid .ts-control {
470
+ border-color: #198754;
471
+ box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
472
+ }
473
+
474
+ .input-group-sm > .ts-wrapper .ts-control, .ts-wrapper.form-select-sm .ts-control, .ts-wrapper.form-control-sm .ts-control {
475
+ min-height: calc(1.5em + 0.5rem + 2px);
476
+ padding: 0 0.75rem;
477
+ border-radius: 0.2rem;
478
+ font-size: 0.875rem;
479
+ }
480
+ .input-group-sm > .ts-wrapper.has-items .ts-control, .ts-wrapper.form-select-sm.has-items .ts-control, .ts-wrapper.form-control-sm.has-items .ts-control {
481
+ min-height: calc(1.5em + 0.5rem + 2px) !important;
482
+ font-size: 0.875rem;
483
+ padding-bottom: 0;
484
+ }
485
+ .input-group-sm > .ts-wrapper.multi.has-items .ts-control, .ts-wrapper.form-select-sm.multi.has-items .ts-control, .ts-wrapper.form-control-sm.multi.has-items .ts-control {
486
+ padding-top: calc((calc(1.5em + 0.5rem + 2px) - (1.5 * 0.875rem) - 4px) / 2) !important;
487
+ }
488
+ .ts-wrapper.multi.has-items .ts-control {
489
+ padding-left: calc(0.75rem - 5px);
490
+ padding-right: calc(0.75rem - 5px);
491
+ }
492
+ .ts-wrapper.multi .ts-control > div {
493
+ border-radius: calc(0.25rem - 1px);
494
+ }
495
+ .input-group-lg > .ts-wrapper > .ts-control, .ts-wrapper.form-control-lg .ts-control, .ts-wrapper.form-select-lg .ts-control {
496
+ min-height: calc(1.5em + 1rem + 2px);
497
+ border-radius: 0.3rem;
498
+ font-size: 1.25rem;
499
+ }
500
+
501
+ .ts-wrapper:not(.form-select) {
502
+ padding: 0;
503
+ border: none;
504
+ height: auto;
505
+ box-shadow: none;
506
+ background: none;
507
+ }
508
+ .ts-wrapper:not(.form-select).single .ts-control {
509
+ background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
510
+ background-repeat: no-repeat;
511
+ background-position: right 0.75rem center;
512
+ background-size: 16px 12px;
513
+ padding-right: 2rem;
514
+ }
515
+
516
+ .ts-wrapper.form-select {
517
+ padding: 0;
518
+ height: auto;
519
+ }
520
+ .ts-wrapper.form-select .ts-control, .ts-wrapper.form-select.single.input-active .ts-control {
521
+ border: none !important;
522
+ background: transparent !important;
523
+ }
524
+
525
+ .input-group > .ts-wrapper {
526
+ flex-grow: 1;
527
+ }
528
+ .input-group > .ts-wrapper:not(:nth-child(2)) > .ts-control {
529
+ border-top-left-radius: 0;
530
+ border-bottom-left-radius: 0;
531
+ }
532
+ .input-group > .ts-wrapper:not(:last-child) > .ts-control {
533
+ border-top-right-radius: 0;
534
+ border-bottom-right-radius: 0;
535
+ }