administrate-field-jsonb 0.2.0 → 0.4.3

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
- SHA1:
3
- metadata.gz: d7434f7a732965280d6da5120b27bbdb159387f6
4
- data.tar.gz: 75a9f459a5f3f84c115986436ca8b8b84a14dc3a
2
+ SHA256:
3
+ metadata.gz: f703a76dfb850723387aae4abd317ab700c33928d6c71c47faebac742bc982c5
4
+ data.tar.gz: b0eac047c8cce5d6cf2fc0036c8ec90668afc0ee0d5e94e9214aeaa7c268fa20
5
5
  SHA512:
6
- metadata.gz: ae8a41eac399b3d9a60c4e852688ac481c8a78a79b7117e35e339dcc687f9aaca05a9c2ec9e514838a970b169d7397bc026442ea865c1127ebc6bc7d5a5d73b0
7
- data.tar.gz: 94e48d3d6dcf04e7b409cfe8381500f45c8525af0f37aa703df4567011d0916697a30c3ff27284b59e3dbd0459ae8180b48051e5180f86489f3f5cc671a14152
6
+ metadata.gz: 115a2817da9c0892ad8a5607d4dee80c793591ba7c57c4795c173c72d4b15848b22c49a7810c4490eda775bfd038569e3dbc73ccde4dd8f8ea8bc59423a99992
7
+ data.tar.gz: 7c0288ddd93dbbf58cb3d95b63d8468dddc261870e45b54be910b547e8d8156156609ac1f2968f2a4aebe9e120620982e868f23e7ce5b6c0ff107ba20a570267
data/README.md CHANGED
@@ -18,6 +18,15 @@ And then execute:
18
18
  bundle
19
19
  ```
20
20
 
21
+ If you are using asset pipeline, add the following lines to your `manifest.js`:
22
+
23
+ ```js
24
+ //= link administrate-field-jsonb/application.css
25
+ //= link administrate-field-jsonb/application.js
26
+ ```
27
+
28
+ The manifest file is at `app/assets/config` by default.
29
+
21
30
  ## Usage
22
31
 
23
32
  ```ruby
@@ -58,7 +67,18 @@ ATTRIBUTE_TYPES = {
58
67
  }.freeze
59
68
  ```
60
69
 
61
- NOTE: don't define `advanced_view` option if you want to display you JSON with the [jsoneditor](https://github.com/josdejong/jsoneditor).
70
+ NOTE: don't define `advanced_view` option if you want to display JSON with the [jsoneditor](https://github.com/josdejong/jsoneditor).
71
+
72
+ To customize what to display if you have an empty value, use `blank_sign` option, by default it's `-`.
73
+
74
+ ```ruby
75
+ ATTRIBUTE_TYPES = {
76
+ # ...
77
+ details: Field::JSONB.with_options(
78
+ blank_sign: 'oops, missed'
79
+ )
80
+ }.freeze
81
+ ```
62
82
 
63
83
  ## How it looks like
64
84
 
@@ -137,6 +157,6 @@ Copyright © 2015-2019 Codica. It is released under the [MIT License](https://op
137
157
 
138
158
  [![Codica logo](https://www.codica.com/assets/images/logo/logo.svg)](https://www.codica.com)
139
159
 
140
- Timebot is maintained and funded by Codica. The names and logos for Codica are trademarks of Codica.
160
+ Administrate::Field::Jsonb is maintained by Codica. The names and logos for Codica are trademarks of Codica.
141
161
 
142
162
  We love open source software! See [our other projects](https://github.com/codica2) or [hire us](https://www.codica.com/) to design, develop, and grow your product.
@@ -2,7 +2,7 @@ $LOAD_PATH.push File.expand_path('lib', __dir__)
2
2
 
3
3
  Gem::Specification.new do |gem|
4
4
  gem.name = 'administrate-field-jsonb'
5
- gem.version = '0.2.0'
5
+ gem.version = '0.4.3'
6
6
  gem.authors = ['Sergey Volkov', 'Codica']
7
7
  gem.email = ['sergvolkov.codica@gmail.com']
8
8
  gem.homepage = 'https://github.com/codica2/administrate-field-jsonb'
@@ -1,5 +1,5 @@
1
- $(function () {
2
- $(".administrate-field-jsonb-accordion").each(function () {
1
+ $(document).on(typeof Turbolinks === 'undefined' ? 'ready' : 'turbolinks:load', function() {
2
+ $(".administrate-field-jsonb-accordion").each(function() {
3
3
  $(this).click(function() {
4
4
  $(this).toggleClass("administrate-field-jsonb-active").next().toggle();
5
5
  });
@@ -1,6 +1,6 @@
1
- $(function () {
1
+ $(document).on(typeof Turbolinks === 'undefined' ? 'ready' : 'turbolinks:load', function() {
2
2
  let editor, updatedJson;
3
- $('.administrate-jsoneditor').each(function (index) {
3
+ $('.administrate-jsoneditor').each(function(index) {
4
4
 
5
5
  let $current = $(this).find("textarea");
6
6
 
@@ -14,7 +14,7 @@ $(function () {
14
14
 
15
15
  $current.val(JSON.stringify(updatedJson));
16
16
  },
17
- onError: function (err) {
17
+ onError: function(err) {
18
18
  alert(err.toString());
19
19
  },
20
20
  navigationBar: false,
@@ -1,4 +1,4 @@
1
- $(function () {
1
+ $(document).on(typeof Turbolinks === 'undefined' ? 'ready' : 'turbolinks:load', function() {
2
2
  let viewer;
3
3
  $('.administrate-jsoneditor-viewer').each(function (index) {
4
4
 
@@ -1,15 +1,32 @@
1
+ .administrate-field-jsonb-wrapper {
2
+ float: left;
3
+ width: 100%;
4
+ margin-top: 0;
5
+ border: 1px solid #ccc;
6
+ padding: 10px;
7
+ }
8
+
9
+ .administrate-field-jsonb-box {
10
+ margin-bottom: 0;
11
+ float: left;
12
+ width: 100%;
13
+ }
14
+
1
15
  .administrate-field-jsonb-accordion {
2
- --margin: calc(15% - .5rem);
16
+ width: 100%;
17
+ text-align: left;
18
+ padding: 5px 15px;
3
19
  background-color: #eee;
4
20
  color: #444;
5
21
  cursor: pointer;
6
- padding: 18px;
7
- width: calc(100% - var(--margin));
8
- text-align: left;
9
- border: none;
10
22
  outline: none;
11
23
  transition: 0.4s;
12
- margin-left: calc(var(--margin));
24
+ margin-bottom: 0;
25
+ margin-top: 15px;
26
+ }
27
+
28
+ .administrate-field-jsonb-accordion:first-child {
29
+ margin-top: 0;
13
30
  }
14
31
 
15
32
  .administrate-field-jsonb-active, .administrate-field-jsonb-accordion:hover {
@@ -17,10 +34,11 @@
17
34
  }
18
35
 
19
36
  .administrate-field-jsonb-panel {
20
- padding: 0 18px;
37
+ padding: 0 18px 15px;
21
38
  background-color: white;
22
39
  display: none;
23
40
  overflow: hidden;
41
+ border: 1px solid #ccc;
24
42
  }
25
43
 
26
44
  .administrate-field-jsonb-accordion:after {
@@ -1,5 +1,5 @@
1
1
  /*
2
2
  *= require_self
3
- *= require jsoneditor.min
3
+ *= require jsoneditor
4
4
  *= require_tree .
5
5
  */
@@ -1,7 +1,9 @@
1
+ <% label ||= nil %>
2
+
1
3
  <% data.each.with_index(1) do |d, index| %>
2
- <dt class='attribute-label administrate-field-jsonb-accordion'><%= "#{field.attribute.to_s.singularize.titleize} - #{index}" %></dt>
4
+ <dt class='attribute-label administrate-field-jsonb-accordion'><%= "#{label || field.attribute.to_s.singularize.titleize} - #{index}" %></dt>
3
5
  <dd class='administrate-field-jsonb-panel'>
4
- <dl>
6
+ <dl class='administrate-field-jsonb-box'>
5
7
  <%= render field.to_partial_path('hash'), field: field, structure: structure, data: d %>
6
8
  <dl>
7
9
  </dd>
@@ -2,8 +2,13 @@
2
2
  <% if sv.is_a?(Hash) %>
3
3
  <dt class='attribute-label administrate-field-jsonb-accordion'><%= sk.to_s.titleize %></dt>
4
4
  <dd class='administrate-field-jsonb-panel'>
5
- <dl>
6
- <%= render field.to_partial_path('hash'), field: field, structure: structure[sk], data: data[sk] %>
5
+ <dl class='administrate-field-jsonb-box'>
6
+ <% if data[sk].is_a?(Array) %>
7
+ <%= render field.to_partial_path('array'),
8
+ field: field, structure: structure[sk], data: data[sk], label: sk.to_s.singularize.titleize %>
9
+ <% else %>
10
+ <%= render field.to_partial_path('hash'), field: field, structure: structure[sk], data: data[sk] %>
11
+ <% end %>
7
12
  <dl>
8
13
  </dd>
9
14
  <% else %>
@@ -1,14 +1,13 @@
1
- <% if field.advanced_view? %>
2
- <% if field.array? %>
3
- <%= render field.to_partial_path('array'), field: field, structure: field.advanced_view, data: field.transform %>
4
- <% else %>
5
- <dt class='attribute-label administrate-field-jsonb-accordion'><%= field.attribute.to_s.titleize %></dt>
6
- <dd class='administrate-field-jsonb-panel'>
7
- <dl>
8
- <%= render field.to_partial_path('hash'), field: field, structure: field.advanced_view, data: field.transform %>
9
- <dl>
10
- </dd>
11
- <% end %>
1
+ <% if field.transform.blank? %>
2
+ <%= field.blank_sign %>
3
+ <% elsif field.advanced_view? %>
4
+ <dl class='administrate-field-jsonb-wrapper'>
5
+ <% if field.array? %>
6
+ <%= render field.to_partial_path('array'), field: field, structure: field.advanced_view, data: field.transform %>
7
+ <% else %>
8
+ <%= render field.to_partial_path('hash'), field: field, structure: field.advanced_view, data: field.transform %>
9
+ <% end %>
10
+ </dl>
12
11
  <% else %>
13
12
  <div class='administrate-jsoneditor-viewer'>
14
13
  <p><%= text_area_tag field.attribute, field.transform.to_json.html_safe.squish %></p>
Binary file
Binary file
Binary file
@@ -9,6 +9,7 @@ module Administrate
9
9
  class JSONB < Administrate::Field::Base
10
10
 
11
11
  def transform
12
+ return nil if data.blank?
12
13
  return data unless options[:transform].present? && options[:transform].is_a?(Array)
13
14
 
14
15
  result = data
@@ -34,6 +35,10 @@ module Administrate
34
35
  "/fields/jsonb/#{partial}"
35
36
  end
36
37
 
38
+ def blank_sign
39
+ options[:blank_sign] || '-'
40
+ end
41
+
37
42
  class Engine < ::Rails::Engine
38
43
 
39
44
  Administrate::Engine.add_javascript 'administrate-field-jsonb/application'
@@ -0,0 +1,2051 @@
1
+ @keyframes "fade-in" {
2
+ from {
3
+ opacity: 0;
4
+ }
5
+ to {
6
+ opacity: 1;
7
+ }
8
+ }
9
+ @keyframes "fadein" {
10
+ 0% {
11
+ opacity: 0;
12
+ }
13
+ 100% {
14
+ opacity: 1;
15
+ }
16
+ }
17
+ /*!
18
+ * Selectr 2.4.0
19
+ * https://github.com/Mobius1/Selectr
20
+ *
21
+ * Released under the MIT license
22
+ */
23
+ @-webkit-keyframes "spin" {
24
+ 0% {
25
+ -webkit-transform: rotate(0) translate3d(0,-50%,0);
26
+ transform: rotate(0) translate3d(0,-50%,0);
27
+ }
28
+ 100% {
29
+ -webkit-transform: rotate(360deg) translate3d(0,-50%,0);
30
+ transform: rotate(360deg) translate3d(0,-50%,0);
31
+ }
32
+ }
33
+ @keyframes "spin" {
34
+ 0% {
35
+ -webkit-transform: rotate(0) translate3d(0,-50%,0);
36
+ transform: rotate(0) translate3d(0,-50%,0);
37
+ }
38
+ 100% {
39
+ -webkit-transform: rotate(360deg) translate3d(0,-50%,0);
40
+ transform: rotate(360deg) translate3d(0,-50%,0);
41
+ }
42
+ }
43
+ .jsoneditor {
44
+ .search {
45
+ input {
46
+ height: auto;
47
+ border: inherit;
48
+ border: none;
49
+ box-shadow: none;
50
+ }
51
+ }
52
+ table {
53
+ border-collapse: collapse;
54
+ width: auto;
55
+ }
56
+ td {
57
+ padding: 0;
58
+ display: table-cell;
59
+ text-align: left;
60
+ vertical-align: inherit;
61
+ border-radius: inherit;
62
+ }
63
+ th {
64
+ padding: 0;
65
+ display: table-cell;
66
+ text-align: left;
67
+ vertical-align: inherit;
68
+ border-radius: inherit;
69
+ }
70
+ color: #1a1a1a;
71
+ border: thin solid #3883fa;
72
+ -moz-box-sizing: border-box;
73
+ -webkit-box-sizing: border-box;
74
+ box-sizing: border-box;
75
+ width: 100%;
76
+ height: 100%;
77
+ position: relative;
78
+ padding: 0;
79
+ line-height: 100%;
80
+ .jsoneditor-validation-errors-container {
81
+ max-height: 130px;
82
+ overflow-y: auto;
83
+ }
84
+ .jsoneditor-validation-errors {
85
+ width: 100%;
86
+ overflow: hidden;
87
+ }
88
+ .jsoneditor-additional-errors {
89
+ position: absolute;
90
+ margin: auto;
91
+ bottom: 31px;
92
+ left: calc(50% - 92px);
93
+ color: grey;
94
+ background-color: #ebebeb;
95
+ padding: 7px 15px;
96
+ border-radius: 8px;
97
+ }
98
+ .jsoneditor-additional-errors.visible {
99
+ visibility: visible;
100
+ opacity: 1;
101
+ transition: opacity 2s linear;
102
+ }
103
+ .jsoneditor-additional-errors.hidden {
104
+ visibility: hidden;
105
+ opacity: 0;
106
+ transition: visibility 0s 2s,opacity 2s linear;
107
+ }
108
+ .jsoneditor-text-errors {
109
+ width: 100%;
110
+ border-collapse: collapse;
111
+ border-top: 1px solid #ffc700;
112
+ td {
113
+ padding: 3px 6px;
114
+ vertical-align: middle;
115
+ pre {
116
+ margin: 0;
117
+ white-space: normal;
118
+ }
119
+ }
120
+ tr {
121
+ background-color: #ffffab;
122
+ }
123
+ tr.parse-error {
124
+ background-color: #ee2e2e70;
125
+ }
126
+ }
127
+ .autocomplete.dropdown {
128
+ position: absolute;
129
+ background: #fff;
130
+ box-shadow: 2px 2px 12px rgba(128,128,128,.3);
131
+ border: 1px solid #d3d3d3;
132
+ z-index: 100;
133
+ overflow-x: hidden;
134
+ overflow-y: auto;
135
+ cursor: default;
136
+ margin: 0;
137
+ padding: 5px;
138
+ text-align: left;
139
+ outline: 0;
140
+ font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;
141
+ font-size: 10pt;
142
+ .item {
143
+ color: #333;
144
+ }
145
+ .item.hover {
146
+ background-color: #ddd;
147
+ }
148
+ }
149
+ .autocomplete.hint {
150
+ color: #aaa;
151
+ top: 4px;
152
+ left: 4px;
153
+ }
154
+ }
155
+ div.jsoneditor-default {
156
+ border: 1px solid transparent;
157
+ min-height: 16px;
158
+ min-width: 32px;
159
+ padding: 2px;
160
+ margin: 1px;
161
+ word-wrap: break-word;
162
+ float: left;
163
+ color: grey;
164
+ padding-left: 10px;
165
+ }
166
+ div.jsoneditor-field {
167
+ border: 1px solid transparent;
168
+ min-height: 16px;
169
+ min-width: 32px;
170
+ padding: 2px;
171
+ margin: 1px;
172
+ word-wrap: break-word;
173
+ float: left;
174
+ font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;
175
+ font-size: 10pt;
176
+ color: #1a1a1a;
177
+ p {
178
+ margin: 0;
179
+ }
180
+ }
181
+ div.jsoneditor-readonly {
182
+ border: 1px solid transparent;
183
+ min-height: 16px;
184
+ min-width: 32px;
185
+ padding: 2px;
186
+ margin: 1px;
187
+ word-wrap: break-word;
188
+ float: left;
189
+ min-width: 16px;
190
+ color: grey;
191
+ }
192
+ div.jsoneditor-value {
193
+ border: 1px solid transparent;
194
+ min-height: 16px;
195
+ min-width: 32px;
196
+ padding: 2px;
197
+ margin: 1px;
198
+ word-wrap: break-word;
199
+ float: left;
200
+ word-break: break-word;
201
+ font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;
202
+ font-size: 10pt;
203
+ color: #1a1a1a;
204
+ p {
205
+ margin: 0;
206
+ }
207
+ }
208
+ div.jsoneditor-value.jsoneditor-empty {
209
+ &::after {
210
+ content: "value";
211
+ pointer-events: none;
212
+ color: #d3d3d3;
213
+ font-size: 8pt;
214
+ }
215
+ }
216
+ div.jsoneditor-value.jsoneditor-string {
217
+ color: #006000;
218
+ }
219
+ div.jsoneditor-value.jsoneditor-number {
220
+ color: #ee422e;
221
+ }
222
+ div.jsoneditor-value.jsoneditor-boolean {
223
+ color: #ff8c00;
224
+ }
225
+ div.jsoneditor-value.jsoneditor-null {
226
+ color: #004ed0;
227
+ }
228
+ div.jsoneditor-value.jsoneditor-invalid {
229
+ color: #000;
230
+ }
231
+ div.jsoneditor-empty {
232
+ border-color: #d3d3d3;
233
+ border-style: dashed;
234
+ border-radius: 2px;
235
+ }
236
+ div.jsoneditor-field.jsoneditor-empty {
237
+ &::after {
238
+ content: "field";
239
+ pointer-events: none;
240
+ color: #d3d3d3;
241
+ font-size: 8pt;
242
+ }
243
+ }
244
+ div.jsoneditor {
245
+ td {
246
+ vertical-align: top;
247
+ padding: 0;
248
+ margin: 0;
249
+ font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;
250
+ font-size: 10pt;
251
+ color: #1a1a1a;
252
+ }
253
+ td.jsoneditor-separator {
254
+ padding: 3px 0;
255
+ vertical-align: top;
256
+ color: grey;
257
+ }
258
+ td.jsoneditor-tree {
259
+ vertical-align: top;
260
+ }
261
+ div.jsoneditor-anchor {
262
+ cursor: pointer;
263
+ .picker_wrapper.popup.popup_bottom {
264
+ top: 28px;
265
+ left: -10px;
266
+ }
267
+ }
268
+ code.jsoneditor-preview {
269
+ background: 0 0;
270
+ }
271
+ th {
272
+ padding: 0;
273
+ margin: 0;
274
+ font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;
275
+ font-size: 10pt;
276
+ color: #1a1a1a;
277
+ }
278
+ tr {
279
+ padding: 0;
280
+ margin: 0;
281
+ }
282
+ textarea {
283
+ font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;
284
+ font-size: 10pt;
285
+ color: #1a1a1a;
286
+ }
287
+ }
288
+ div.jsoneditor.busy {
289
+ pre.jsoneditor-preview {
290
+ background: #f5f5f5;
291
+ color: grey;
292
+ }
293
+ div.jsoneditor-busy {
294
+ display: inherit;
295
+ }
296
+ }
297
+ div.jsoneditor.jsoneditor-mode-preview {
298
+ pre.jsoneditor-preview {
299
+ width: 100%;
300
+ height: 100%;
301
+ box-sizing: border-box;
302
+ overflow: auto;
303
+ padding: 2px;
304
+ margin: 0;
305
+ white-space: pre-wrap;
306
+ word-break: break-all;
307
+ }
308
+ }
309
+ div.jsoneditor-tree {
310
+ width: 100%;
311
+ height: 100%;
312
+ position: relative;
313
+ overflow: auto;
314
+ button.jsoneditor-button {
315
+ width: 24px;
316
+ height: 24px;
317
+ padding: 0;
318
+ margin: 0;
319
+ border: none;
320
+ cursor: pointer;
321
+ background: transparent asset-url("jsoneditor-icons.svg");
322
+ &:focus {
323
+ background-color: #f5f5f5;
324
+ outline: #e5e5e5 solid 1px;
325
+ }
326
+ }
327
+ button.jsoneditor-collapsed {
328
+ background-position: 0 -48px;
329
+ }
330
+ button.jsoneditor-expanded {
331
+ background-position: 0 -72px;
332
+ }
333
+ button.jsoneditor-contextmenu {
334
+ background-position: -48px -72px;
335
+ &:focus {
336
+ background-position: -48px -48px;
337
+ }
338
+ &:hover {
339
+ background-position: -48px -48px;
340
+ }
341
+ }
342
+ button.jsoneditor-invisible {
343
+ visibility: hidden;
344
+ background: 0 0;
345
+ }
346
+ button.jsoneditor-dragarea {
347
+ background: asset-url("jsoneditor-icons.svg") -72px -72px;
348
+ cursor: move;
349
+ &:focus {
350
+ background-position: -72px -48px;
351
+ }
352
+ &:hover {
353
+ background-position: -72px -48px;
354
+ }
355
+ }
356
+ &:focus {
357
+ outline: 0;
358
+ }
359
+ div.jsoneditor-show-more {
360
+ display: inline-block;
361
+ padding: 3px 4px;
362
+ margin: 2px 0;
363
+ background-color: #e5e5e5;
364
+ border-radius: 3px;
365
+ color: grey;
366
+ font-family: arial,sans-serif;
367
+ font-size: 10pt;
368
+ a {
369
+ display: inline-block;
370
+ color: grey;
371
+ &:focus {
372
+ color: #ee422e;
373
+ }
374
+ &:hover {
375
+ color: #ee422e;
376
+ }
377
+ }
378
+ }
379
+ div.jsoneditor-color {
380
+ display: inline-block;
381
+ width: 12px;
382
+ height: 12px;
383
+ margin: 4px;
384
+ border: 1px solid grey;
385
+ cursor: pointer;
386
+ }
387
+ div.jsoneditor-date {
388
+ background: #a1a1a1;
389
+ color: #fff;
390
+ font-family: arial,sans-serif;
391
+ border-radius: 3px;
392
+ display: inline-block;
393
+ padding: 3px;
394
+ margin: 0 3px;
395
+ }
396
+ table.jsoneditor-tree {
397
+ border-collapse: collapse;
398
+ border-spacing: 0;
399
+ width: 100%;
400
+ }
401
+ .jsoneditor-button.jsoneditor-schema-error {
402
+ width: 24px;
403
+ height: 24px;
404
+ padding: 0;
405
+ margin: 0 4px 0 0;
406
+ background: asset-url("jsoneditor-icons.svg") -168px -48px;
407
+ }
408
+ button.jsoneditor-contextmenu.jsoneditor-selected {
409
+ background-position: -48px -48px;
410
+ }
411
+ }
412
+ div.jsoneditor-outer {
413
+ position: static;
414
+ width: 100%;
415
+ height: 100%;
416
+ margin: 0;
417
+ padding: 0;
418
+ -moz-box-sizing: border-box;
419
+ -webkit-box-sizing: border-box;
420
+ box-sizing: border-box;
421
+ }
422
+ div.jsoneditor-outer.has-nav-bar {
423
+ margin-top: -26px;
424
+ padding-top: 26px;
425
+ }
426
+ div.jsoneditor-outer.has-nav-bar.has-main-menu-bar {
427
+ margin-top: -61px;
428
+ padding-top: 61px;
429
+ }
430
+ div.jsoneditor-outer.has-status-bar {
431
+ margin-bottom: -26px;
432
+ padding-bottom: 26px;
433
+ }
434
+ div.jsoneditor-outer.has-main-menu-bar {
435
+ margin-top: -35px;
436
+ padding-top: 35px;
437
+ }
438
+ div.jsoneditor-busy {
439
+ position: absolute;
440
+ top: 15%;
441
+ left: 0;
442
+ box-sizing: border-box;
443
+ width: 100%;
444
+ text-align: center;
445
+ display: none;
446
+ span {
447
+ background-color: #ffffab;
448
+ border: 1px solid #fe0;
449
+ border-radius: 3px;
450
+ padding: 5px 15px;
451
+ box-shadow: 0 0 5px rgba(0,0,0,.4);
452
+ }
453
+ }
454
+ a.jsoneditor-value.jsoneditor-url {
455
+ color: #006000;
456
+ text-decoration: underline;
457
+ display: inline-block;
458
+ padding: 2px;
459
+ margin: 2px;
460
+ &:focus {
461
+ color: #ee422e;
462
+ }
463
+ &:hover {
464
+ color: #ee422e;
465
+ }
466
+ }
467
+ div.jsoneditor-value.jsoneditor-url {
468
+ color: #006000;
469
+ text-decoration: underline;
470
+ }
471
+ div.jsoneditor-field.jsoneditor-highlight {
472
+ background-color: #ffffab;
473
+ border: 1px solid #fe0;
474
+ border-radius: 2px;
475
+ }
476
+ div.jsoneditor-field[contenteditable=true] {
477
+ &:focus {
478
+ background-color: #ffffab;
479
+ border: 1px solid #fe0;
480
+ border-radius: 2px;
481
+ }
482
+ &:hover {
483
+ background-color: #ffffab;
484
+ border: 1px solid #fe0;
485
+ border-radius: 2px;
486
+ }
487
+ }
488
+ div.jsoneditor-value.jsoneditor-highlight {
489
+ background-color: #ffffab;
490
+ border: 1px solid #fe0;
491
+ border-radius: 2px;
492
+ }
493
+ div.jsoneditor-value[contenteditable=true] {
494
+ &:focus {
495
+ background-color: #ffffab;
496
+ border: 1px solid #fe0;
497
+ border-radius: 2px;
498
+ }
499
+ &:hover {
500
+ background-color: #ffffab;
501
+ border: 1px solid #fe0;
502
+ border-radius: 2px;
503
+ }
504
+ }
505
+ div.jsoneditor-field.jsoneditor-highlight-active {
506
+ background-color: #fe0;
507
+ border: 1px solid #ffc700;
508
+ border-radius: 2px;
509
+ &:focus {
510
+ background-color: #fe0;
511
+ border: 1px solid #ffc700;
512
+ border-radius: 2px;
513
+ }
514
+ &:hover {
515
+ background-color: #fe0;
516
+ border: 1px solid #ffc700;
517
+ border-radius: 2px;
518
+ }
519
+ }
520
+ div.jsoneditor-value.jsoneditor-highlight-active {
521
+ background-color: #fe0;
522
+ border: 1px solid #ffc700;
523
+ border-radius: 2px;
524
+ &:focus {
525
+ background-color: #fe0;
526
+ border: 1px solid #ffc700;
527
+ border-radius: 2px;
528
+ }
529
+ &:hover {
530
+ background-color: #fe0;
531
+ border: 1px solid #ffc700;
532
+ border-radius: 2px;
533
+ }
534
+ }
535
+ div.jsoneditor-value.jsoneditor-array {
536
+ min-width: 16px;
537
+ }
538
+ div.jsoneditor-value.jsoneditor-object {
539
+ min-width: 16px;
540
+ }
541
+ div.jsoneditor-mode-form {
542
+ tr.jsoneditor-expandable {
543
+ td.jsoneditor-tree {
544
+ cursor: pointer;
545
+ }
546
+ }
547
+ }
548
+ div.jsoneditor-mode-view {
549
+ tr.jsoneditor-expandable {
550
+ td.jsoneditor-tree {
551
+ cursor: pointer;
552
+ }
553
+ }
554
+ }
555
+ tr.jsoneditor-selected.jsoneditor-first {
556
+ button.jsoneditor-contextmenu {
557
+ background-position: -48px -48px;
558
+ visibility: visible;
559
+ }
560
+ button.jsoneditor-dragarea {
561
+ visibility: visible;
562
+ background-position: -72px -48px;
563
+ }
564
+ }
565
+ .ace-jsoneditor {
566
+ min-height: 150px;
567
+ }
568
+ textarea.jsoneditor-text {
569
+ min-height: 150px;
570
+ width: 100%;
571
+ height: 100%;
572
+ margin: 0;
573
+ -moz-box-sizing: border-box;
574
+ -webkit-box-sizing: border-box;
575
+ box-sizing: border-box;
576
+ outline-width: 0;
577
+ border: none;
578
+ background-color: #fff;
579
+ resize: none;
580
+ }
581
+ tr.jsoneditor-highlight {
582
+ background-color: #d3d3d3;
583
+ }
584
+ tr.jsoneditor-selected {
585
+ background-color: #d3d3d3;
586
+ button.jsoneditor-contextmenu {
587
+ visibility: hidden;
588
+ }
589
+ button.jsoneditor-dragarea {
590
+ visibility: hidden;
591
+ }
592
+ }
593
+ .jsoneditor-popover {
594
+ font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;
595
+ font-size: 10pt;
596
+ color: #1a1a1a;
597
+ background-color: #4c4c4c;
598
+ border-radius: 3px;
599
+ box-shadow: 0 0 5px rgba(0,0,0,.4);
600
+ color: #fff;
601
+ padding: 7px 10px;
602
+ position: absolute;
603
+ cursor: auto;
604
+ width: 200px;
605
+ z-index: 999;
606
+ &:before {
607
+ border-right: 7px solid transparent;
608
+ border-left: 7px solid transparent;
609
+ content: "";
610
+ display: block;
611
+ left: 50%;
612
+ margin-left: -7px;
613
+ position: absolute;
614
+ }
615
+ }
616
+ .jsoneditor-schema-error {
617
+ font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;
618
+ font-size: 10pt;
619
+ color: #1a1a1a;
620
+ cursor: default;
621
+ display: inline-block;
622
+ height: 24px;
623
+ line-height: 24px;
624
+ position: relative;
625
+ text-align: center;
626
+ width: 24px;
627
+ &:focus {
628
+ .jsoneditor-popover {
629
+ display: block;
630
+ animation: fade-in .3s linear 1,move-up .3s linear 1;
631
+ }
632
+ }
633
+ &:hover {
634
+ .jsoneditor-popover {
635
+ display: block;
636
+ animation: fade-in .3s linear 1,move-up .3s linear 1;
637
+ }
638
+ }
639
+ }
640
+ pre.jsoneditor-preview {
641
+ font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;
642
+ font-size: 10pt;
643
+ color: #1a1a1a;
644
+ }
645
+ .jsoneditor-popover.jsoneditor-above {
646
+ bottom: 32px;
647
+ left: -98px;
648
+ &:before {
649
+ border-top: 7px solid #4c4c4c;
650
+ bottom: -7px;
651
+ }
652
+ }
653
+ .jsoneditor-popover.jsoneditor-below {
654
+ top: 32px;
655
+ left: -98px;
656
+ &:before {
657
+ border-bottom: 7px solid #4c4c4c;
658
+ top: -7px;
659
+ }
660
+ }
661
+ .jsoneditor-popover.jsoneditor-left {
662
+ top: -7px;
663
+ right: 32px;
664
+ &:before {
665
+ border-left: 7px solid #4c4c4c;
666
+ border-top: 7px solid transparent;
667
+ border-bottom: 7px solid transparent;
668
+ content: "";
669
+ top: 19px;
670
+ right: -14px;
671
+ left: inherit;
672
+ margin-left: inherit;
673
+ margin-top: -7px;
674
+ position: absolute;
675
+ }
676
+ }
677
+ .jsoneditor-popover.jsoneditor-right {
678
+ top: -7px;
679
+ left: 32px;
680
+ &:before {
681
+ border-right: 7px solid #4c4c4c;
682
+ border-top: 7px solid transparent;
683
+ border-bottom: 7px solid transparent;
684
+ content: "";
685
+ top: 19px;
686
+ left: -14px;
687
+ margin-left: inherit;
688
+ margin-top: -7px;
689
+ position: absolute;
690
+ }
691
+ }
692
+ .jsoneditor-text-errors {
693
+ tr.jump-to-line {
694
+ &:hover {
695
+ text-decoration: underline;
696
+ cursor: pointer;
697
+ }
698
+ }
699
+ .jsoneditor-schema-error {
700
+ border: none;
701
+ width: 24px;
702
+ height: 24px;
703
+ padding: 0;
704
+ margin: 0 4px 0 0;
705
+ cursor: pointer;
706
+ }
707
+ tr {
708
+ .jsoneditor-schema-error {
709
+ background: asset-url("jsoneditor-icons.svg") -168px -48px;
710
+ }
711
+ }
712
+ tr.parse-error {
713
+ .jsoneditor-schema-error {
714
+ background: asset-url("jsoneditor-icons.svg") -25px 0;
715
+ }
716
+ }
717
+ }
718
+ .fadein {
719
+ -webkit-animation: fadein .3s;
720
+ animation: fadein .3s;
721
+ -moz-animation: fadein .3s;
722
+ -o-animation: fadein .3s;
723
+ }
724
+ .jsoneditor-contextmenu-root {
725
+ position: relative;
726
+ width: 0;
727
+ height: 0;
728
+ }
729
+ .jsoneditor-contextmenu {
730
+ position: absolute;
731
+ box-sizing: content-box;
732
+ z-index: 99;
733
+ .jsoneditor-menu {
734
+ position: relative;
735
+ left: 0;
736
+ top: 0;
737
+ width: 128px;
738
+ height: auto;
739
+ background: #fff;
740
+ border: 1px solid #d3d3d3;
741
+ box-shadow: 2px 2px 12px rgba(128,128,128,.3);
742
+ list-style: none;
743
+ margin: 0;
744
+ padding: 0;
745
+ button {
746
+ position: relative;
747
+ padding: 0 4px 0 0;
748
+ margin: 0;
749
+ width: 128px;
750
+ height: auto;
751
+ border: none;
752
+ cursor: pointer;
753
+ color: #4d4d4d;
754
+ background: 0 0;
755
+ font-size: 10pt;
756
+ font-family: arial,sans-serif;
757
+ box-sizing: border-box;
758
+ text-align: left;
759
+ &::-moz-focus-inner {
760
+ padding: 0;
761
+ border: 0;
762
+ }
763
+ &:focus {
764
+ color: #1a1a1a;
765
+ background-color: #f5f5f5;
766
+ outline: 0;
767
+ }
768
+ &:hover {
769
+ color: #1a1a1a;
770
+ background-color: #f5f5f5;
771
+ outline: 0;
772
+ }
773
+ }
774
+ button.jsoneditor-default {
775
+ width: 96px;
776
+ }
777
+ button.jsoneditor-expand {
778
+ float: right;
779
+ width: 32px;
780
+ height: 24px;
781
+ border-left: 1px solid #e5e5e5;
782
+ }
783
+ li {
784
+ overflow: hidden;
785
+ ul {
786
+ display: none;
787
+ position: relative;
788
+ left: -10px;
789
+ top: 0;
790
+ border: none;
791
+ box-shadow: inset 0 0 10px rgba(128,128,128,.5);
792
+ padding: 0 10px;
793
+ -webkit-transition: all .3s ease-out;
794
+ -moz-transition: all .3s ease-out;
795
+ -o-transition: all .3s ease-out;
796
+ transition: all .3s ease-out;
797
+ .jsoneditor-icon {
798
+ margin-left: 24px;
799
+ }
800
+ li {
801
+ button {
802
+ padding-left: 24px;
803
+ animation: all ease-in-out 1s;
804
+ &:focus {
805
+ background-color: #f5f5f5;
806
+ }
807
+ &:hover {
808
+ background-color: #f5f5f5;
809
+ }
810
+ }
811
+ }
812
+ }
813
+ button {
814
+ .jsoneditor-expand {
815
+ position: absolute;
816
+ top: 0;
817
+ right: 0;
818
+ width: 24px;
819
+ height: 24px;
820
+ padding: 0;
821
+ margin: 0 4px 0 0;
822
+ background: asset-url("jsoneditor-icons.svg") 0 -72px;
823
+ }
824
+ }
825
+ button.jsoneditor-selected {
826
+ color: #fff;
827
+ background-color: #ee422e;
828
+ &:focus {
829
+ color: #fff;
830
+ background-color: #ee422e;
831
+ }
832
+ &:hover {
833
+ color: #fff;
834
+ background-color: #ee422e;
835
+ }
836
+ }
837
+ }
838
+ }
839
+ .jsoneditor-icon {
840
+ position: absolute;
841
+ top: 0;
842
+ left: 0;
843
+ width: 24px;
844
+ height: 24px;
845
+ border: none;
846
+ padding: 0;
847
+ margin: 0;
848
+ background-image: asset-url("jsoneditor-icons.svg");
849
+ }
850
+ .jsoneditor-text {
851
+ padding: 4px 0 4px 24px;
852
+ word-wrap: break-word;
853
+ }
854
+ .jsoneditor-text.jsoneditor-right-margin {
855
+ padding-right: 24px;
856
+ }
857
+ .jsoneditor-separator {
858
+ height: 0;
859
+ border-top: 1px solid #e5e5e5;
860
+ padding-top: 5px;
861
+ margin-top: 5px;
862
+ }
863
+ button.jsoneditor-remove {
864
+ .jsoneditor-icon {
865
+ background-position: -24px 0;
866
+ }
867
+ }
868
+ button.jsoneditor-append {
869
+ .jsoneditor-icon {
870
+ background-position: 0 0;
871
+ }
872
+ }
873
+ button.jsoneditor-insert {
874
+ .jsoneditor-icon {
875
+ background-position: 0 0;
876
+ }
877
+ }
878
+ button.jsoneditor-duplicate {
879
+ .jsoneditor-icon {
880
+ background-position: -48px 0;
881
+ }
882
+ }
883
+ button.jsoneditor-sort-asc {
884
+ .jsoneditor-icon {
885
+ background-position: -168px 0;
886
+ }
887
+ }
888
+ button.jsoneditor-sort-desc {
889
+ .jsoneditor-icon {
890
+ background-position: -192px 0;
891
+ }
892
+ }
893
+ button.jsoneditor-transform {
894
+ .jsoneditor-icon {
895
+ background-position: -216px 0;
896
+ }
897
+ }
898
+ button.jsoneditor-extract {
899
+ .jsoneditor-icon {
900
+ background-position: 0 -24px;
901
+ }
902
+ }
903
+ button.jsoneditor-type-string {
904
+ .jsoneditor-icon {
905
+ background-position: -144px 0;
906
+ }
907
+ }
908
+ button.jsoneditor-type-auto {
909
+ .jsoneditor-icon {
910
+ background-position: -120px 0;
911
+ }
912
+ }
913
+ button.jsoneditor-type-object {
914
+ .jsoneditor-icon {
915
+ background-position: -72px 0;
916
+ }
917
+ }
918
+ button.jsoneditor-type-array {
919
+ .jsoneditor-icon {
920
+ background-position: -96px 0;
921
+ }
922
+ }
923
+ button.jsoneditor-type-modes {
924
+ .jsoneditor-icon {
925
+ background-image: none;
926
+ width: 6px;
927
+ }
928
+ }
929
+ li {
930
+ box-sizing: content-box;
931
+ position: relative;
932
+ }
933
+ ul {
934
+ box-sizing: content-box;
935
+ position: relative;
936
+ }
937
+ }
938
+ .jsoneditor-modal {
939
+ max-width: 95%;
940
+ border-radius: 2px !important;
941
+ padding: 45px 15px 15px 15px !important;
942
+ box-shadow: 2px 2px 12px rgba(128,128,128,.3);
943
+ color: #4d4d4d;
944
+ line-height: 1.3em;
945
+ font-size: 10.5pt;
946
+ font-family: arial,sans-serif;
947
+ .pico-modal-header {
948
+ position: absolute;
949
+ box-sizing: border-box;
950
+ top: 0;
951
+ left: 0;
952
+ width: 100%;
953
+ padding: 0 10px;
954
+ height: 30px;
955
+ line-height: 30px;
956
+ font-family: arial,sans-serif;
957
+ font-size: 11pt;
958
+ background: #3883fa;
959
+ color: #fff;
960
+ }
961
+ table {
962
+ width: 100%;
963
+ td {
964
+ padding: 3px 0;
965
+ text-align: left;
966
+ vertical-align: top;
967
+ font-weight: 400;
968
+ color: #4d4d4d;
969
+ border-spacing: 0;
970
+ border-collapse: collapse;
971
+ font-size: 10.5pt;
972
+ font-family: arial,sans-serif;
973
+ }
974
+ td.jsoneditor-modal-input {
975
+ text-align: right;
976
+ padding-right: 0;
977
+ white-space: nowrap;
978
+ }
979
+ td.jsoneditor-modal-actions {
980
+ padding-top: 15px;
981
+ }
982
+ th {
983
+ vertical-align: middle;
984
+ text-align: left;
985
+ vertical-align: top;
986
+ font-weight: 400;
987
+ color: #4d4d4d;
988
+ border-spacing: 0;
989
+ border-collapse: collapse;
990
+ font-size: 10.5pt;
991
+ font-family: arial,sans-serif;
992
+ }
993
+ }
994
+ p {
995
+ &:first-child {
996
+ margin-top: 0;
997
+ }
998
+ }
999
+ a {
1000
+ color: #3883fa;
1001
+ }
1002
+ .jsoneditor-jmespath-block {
1003
+ margin-bottom: 10px;
1004
+ }
1005
+ .pico-close {
1006
+ background: 0 0 !important;
1007
+ font-size: 24px !important;
1008
+ top: 7px !important;
1009
+ right: 7px !important;
1010
+ color: #fff;
1011
+ }
1012
+ input {
1013
+ padding: 4px;
1014
+ background: #fff;
1015
+ border: 1px solid #d3d3d3;
1016
+ color: #4d4d4d;
1017
+ border-radius: 3px;
1018
+ padding: 4px;
1019
+ font-size: 10.5pt;
1020
+ font-family: arial,sans-serif;
1021
+ cursor: pointer;
1022
+ }
1023
+ input[type=text] {
1024
+ cursor: inherit;
1025
+ }
1026
+ input[disabled] {
1027
+ background: #d3d3d3;
1028
+ color: grey;
1029
+ }
1030
+ .jsoneditor-select-wrapper {
1031
+ position: relative;
1032
+ display: inline-block;
1033
+ &:after {
1034
+ content: "";
1035
+ width: 0;
1036
+ height: 0;
1037
+ border-left: 5px solid transparent;
1038
+ border-right: 5px solid transparent;
1039
+ border-top: 6px solid #666;
1040
+ position: absolute;
1041
+ right: 8px;
1042
+ top: 14px;
1043
+ pointer-events: none;
1044
+ }
1045
+ }
1046
+ select {
1047
+ padding: 3px 24px 3px 10px;
1048
+ min-width: 180px;
1049
+ max-width: 350px;
1050
+ -webkit-appearance: none;
1051
+ -moz-appearance: none;
1052
+ appearance: none;
1053
+ text-indent: 0;
1054
+ text-overflow: "";
1055
+ font-size: 10pt;
1056
+ line-height: 1.5em;
1057
+ background: #fff;
1058
+ border: 1px solid #d3d3d3;
1059
+ color: #4d4d4d;
1060
+ border-radius: 3px;
1061
+ padding: 4px;
1062
+ font-size: 10.5pt;
1063
+ font-family: arial,sans-serif;
1064
+ cursor: pointer;
1065
+ &::-ms-expand {
1066
+ display: none;
1067
+ }
1068
+ }
1069
+ .jsoneditor-button-group {
1070
+ input {
1071
+ padding: 4px 10px;
1072
+ margin: 0;
1073
+ border-radius: 0;
1074
+ border-left-style: none;
1075
+ }
1076
+ input.jsoneditor-button-first {
1077
+ border-top-left-radius: 3px;
1078
+ border-bottom-left-radius: 3px;
1079
+ border-left-style: solid;
1080
+ }
1081
+ input.jsoneditor-button-last {
1082
+ border-top-right-radius: 3px;
1083
+ border-bottom-right-radius: 3px;
1084
+ }
1085
+ }
1086
+ .jsoneditor-transform-preview {
1087
+ background: #f5f5f5;
1088
+ height: 200px;
1089
+ font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;
1090
+ font-size: 10pt;
1091
+ width: 100%;
1092
+ box-sizing: border-box;
1093
+ }
1094
+ .jsoneditor-transform-preview.jsoneditor-error {
1095
+ color: #ee422e;
1096
+ }
1097
+ .jsoneditor-jmespath-wizard {
1098
+ line-height: 1.2em;
1099
+ width: 100%;
1100
+ padding: 0;
1101
+ border-radius: 3px;
1102
+ }
1103
+ .jsoneditor-jmespath-label {
1104
+ font-weight: 700;
1105
+ color: #1e90ff;
1106
+ margin-top: 20px;
1107
+ margin-bottom: 5px;
1108
+ }
1109
+ .jsoneditor-jmespath-wizard-table {
1110
+ width: 100%;
1111
+ }
1112
+ .jsoneditor-jmespath-wizard-label {
1113
+ font-style: italic;
1114
+ margin: 4px 0 2px 0;
1115
+ }
1116
+ .jsoneditor-inline {
1117
+ position: relative;
1118
+ display: inline-block;
1119
+ width: 100%;
1120
+ padding-top: 2px;
1121
+ padding-bottom: 2px;
1122
+ &:not(:last-child) {
1123
+ padding-right: 2px;
1124
+ }
1125
+ }
1126
+ .jsoneditor-jmespath-filter {
1127
+ display: flex;
1128
+ flex-wrap: wrap;
1129
+ }
1130
+ .jsoneditor-jmespath-filter-field {
1131
+ width: 180px;
1132
+ }
1133
+ .jsoneditor-jmespath-filter-relation {
1134
+ width: 100px;
1135
+ }
1136
+ .jsoneditor-jmespath-filter-value {
1137
+ min-width: 180px;
1138
+ flex: 1;
1139
+ }
1140
+ .jsoneditor-jmespath-sort-field {
1141
+ width: 170px;
1142
+ }
1143
+ .jsoneditor-jmespath-sort-order {
1144
+ width: 150px;
1145
+ }
1146
+ .jsoneditor-jmespath-select-fields {
1147
+ width: 100%;
1148
+ }
1149
+ .selectr-selected {
1150
+ border-color: #d3d3d3;
1151
+ padding: 4px 28px 4px 8px;
1152
+ .selectr-tag {
1153
+ background-color: #3883fa;
1154
+ border-radius: 5px;
1155
+ }
1156
+ }
1157
+ #query {
1158
+ background: #fff;
1159
+ border: 1px solid #d3d3d3;
1160
+ color: #4d4d4d;
1161
+ border-radius: 3px;
1162
+ padding: 4px;
1163
+ font-size: 10.5pt;
1164
+ font-family: arial,sans-serif;
1165
+ font-family: "dejavu sans mono","droid sans mono",consolas,monaco,"lucida console","courier new",courier,monospace,sans-serif;
1166
+ font-size: 10pt;
1167
+ width: 100%;
1168
+ box-sizing: border-box;
1169
+ }
1170
+ textarea {
1171
+ background: #fff;
1172
+ border: 1px solid #d3d3d3;
1173
+ color: #4d4d4d;
1174
+ border-radius: 3px;
1175
+ padding: 4px;
1176
+ font-size: 10.5pt;
1177
+ font-family: arial,sans-serif;
1178
+ }
1179
+ option {
1180
+ font-size: 10.5pt;
1181
+ font-family: arial,sans-serif;
1182
+ }
1183
+ input[type=button] {
1184
+ background: #f5f5f5;
1185
+ padding: 4px 20px;
1186
+ }
1187
+ input[type=submit] {
1188
+ background: #f5f5f5;
1189
+ padding: 4px 20px;
1190
+ }
1191
+ .jsoneditor-button-group.jsoneditor-button-group-value-asc {
1192
+ input.jsoneditor-button-asc {
1193
+ background: #3883fa;
1194
+ border-color: #3883fa;
1195
+ color: #fff;
1196
+ }
1197
+ }
1198
+ .jsoneditor-button-group.jsoneditor-button-group-value-desc {
1199
+ input.jsoneditor-button-desc {
1200
+ background: #3883fa;
1201
+ border-color: #3883fa;
1202
+ color: #fff;
1203
+ }
1204
+ }
1205
+ }
1206
+ .jsoneditor-modal.jsoneditor-modal-transform {
1207
+ width: 600px !important;
1208
+ }
1209
+ .jsoneditor-menu {
1210
+ width: 100%;
1211
+ height: 35px;
1212
+ padding: 2px;
1213
+ margin: 0;
1214
+ -moz-box-sizing: border-box;
1215
+ -webkit-box-sizing: border-box;
1216
+ box-sizing: border-box;
1217
+ color: #fff;
1218
+ background-color: #3883fa;
1219
+ border-bottom: 1px solid #3883fa;
1220
+ >.jsoneditor-modes {
1221
+ >button {
1222
+ width: 26px;
1223
+ height: 26px;
1224
+ margin: 2px;
1225
+ padding: 0;
1226
+ border-radius: 2px;
1227
+ border: 1px solid transparent;
1228
+ background: transparent asset-url("jsoneditor-icons.svg");
1229
+ color: #fff;
1230
+ opacity: .8;
1231
+ font-family: arial,sans-serif;
1232
+ font-size: 10pt;
1233
+ float: left;
1234
+ background-image: none;
1235
+ width: auto;
1236
+ padding-left: 6px;
1237
+ padding-right: 6px;
1238
+ &:hover {
1239
+ background-color: rgba(255,255,255,.2);
1240
+ border: 1px solid rgba(255,255,255,.4);
1241
+ }
1242
+ &:active {
1243
+ background-color: rgba(255,255,255,.3);
1244
+ }
1245
+ &:focus {
1246
+ background-color: rgba(255,255,255,.3);
1247
+ }
1248
+ &:disabled {
1249
+ opacity: .5;
1250
+ background-color: transparent;
1251
+ border: none;
1252
+ }
1253
+ }
1254
+ display: inline-block;
1255
+ float: left;
1256
+ >button.jsoneditor-separator {
1257
+ margin-left: 10px;
1258
+ }
1259
+ }
1260
+ >button {
1261
+ width: 26px;
1262
+ height: 26px;
1263
+ margin: 2px;
1264
+ padding: 0;
1265
+ border-radius: 2px;
1266
+ border: 1px solid transparent;
1267
+ background: transparent asset-url("jsoneditor-icons.svg");
1268
+ color: #fff;
1269
+ opacity: .8;
1270
+ font-family: arial,sans-serif;
1271
+ font-size: 10pt;
1272
+ float: left;
1273
+ &:hover {
1274
+ background-color: rgba(255,255,255,.2);
1275
+ border: 1px solid rgba(255,255,255,.4);
1276
+ }
1277
+ &:active {
1278
+ background-color: rgba(255,255,255,.3);
1279
+ }
1280
+ &:focus {
1281
+ background-color: rgba(255,255,255,.3);
1282
+ }
1283
+ &:disabled {
1284
+ opacity: .5;
1285
+ background-color: transparent;
1286
+ border: none;
1287
+ }
1288
+ }
1289
+ >button.jsoneditor-collapse-all {
1290
+ background-position: 0 -96px;
1291
+ }
1292
+ >button.jsoneditor-expand-all {
1293
+ background-position: 0 -120px;
1294
+ }
1295
+ >button.jsoneditor-sort {
1296
+ background-position: -120px -96px;
1297
+ }
1298
+ >button.jsoneditor-transform {
1299
+ background-position: -144px -96px;
1300
+ }
1301
+ >button.jsoneditor-undo {
1302
+ background-position: -24px -96px;
1303
+ &:disabled {
1304
+ background-position: -24px -120px;
1305
+ }
1306
+ }
1307
+ >button.jsoneditor-redo {
1308
+ background-position: -48px -96px;
1309
+ &:disabled {
1310
+ background-position: -48px -120px;
1311
+ }
1312
+ }
1313
+ >button.jsoneditor-compact {
1314
+ background-position: -72px -96px;
1315
+ }
1316
+ >button.jsoneditor-format {
1317
+ background-position: -72px -120px;
1318
+ }
1319
+ >button.jsoneditor-repair {
1320
+ background-position: -96px -96px;
1321
+ }
1322
+ >button.jsoneditor-separator {
1323
+ margin-left: 10px;
1324
+ }
1325
+ a {
1326
+ font-family: arial,sans-serif;
1327
+ font-size: 10pt;
1328
+ color: #fff;
1329
+ opacity: .8;
1330
+ vertical-align: middle;
1331
+ &:hover {
1332
+ opacity: 1;
1333
+ }
1334
+ }
1335
+ a.jsoneditor-poweredBy {
1336
+ font-size: 8pt;
1337
+ position: absolute;
1338
+ right: 0;
1339
+ top: 0;
1340
+ padding: 10px;
1341
+ }
1342
+ }
1343
+ .jsoneditor.jsoneditor-mode-form {
1344
+ >.jsoneditor-menu {
1345
+ >button.jsoneditor-sort {
1346
+ display: none;
1347
+ }
1348
+ >button.jsoneditor-transform {
1349
+ display: none;
1350
+ }
1351
+ }
1352
+ }
1353
+ .jsoneditor.jsoneditor-mode-view {
1354
+ >.jsoneditor-menu {
1355
+ >button.jsoneditor-sort {
1356
+ display: none;
1357
+ }
1358
+ >button.jsoneditor-transform {
1359
+ display: none;
1360
+ }
1361
+ }
1362
+ }
1363
+ .jsoneditor-search {
1364
+ font-family: arial,sans-serif;
1365
+ position: absolute;
1366
+ right: 4px;
1367
+ top: 4px;
1368
+ border-collapse: collapse;
1369
+ border-spacing: 0;
1370
+ display: flex;
1371
+ input {
1372
+ color: #1a1a1a;
1373
+ width: 120px;
1374
+ border: none;
1375
+ outline: 0;
1376
+ margin: 1px;
1377
+ line-height: 20px;
1378
+ }
1379
+ button {
1380
+ width: 16px;
1381
+ height: 24px;
1382
+ padding: 0;
1383
+ margin: 0;
1384
+ border: none;
1385
+ background: asset-url("jsoneditor-icons.svg");
1386
+ vertical-align: top;
1387
+ &:hover {
1388
+ background-color: transparent;
1389
+ }
1390
+ }
1391
+ button.jsoneditor-refresh {
1392
+ width: 18px;
1393
+ background-position: -99px -73px;
1394
+ }
1395
+ button.jsoneditor-next {
1396
+ cursor: pointer;
1397
+ background-position: -124px -73px;
1398
+ &:hover {
1399
+ background-position: -124px -49px;
1400
+ }
1401
+ }
1402
+ button.jsoneditor-previous {
1403
+ cursor: pointer;
1404
+ background-position: -148px -73px;
1405
+ margin-right: 2px;
1406
+ &:hover {
1407
+ background-position: -148px -49px;
1408
+ }
1409
+ }
1410
+ }
1411
+ .jsoneditor-results {
1412
+ font-family: arial,sans-serif;
1413
+ color: #fff;
1414
+ padding-right: 5px;
1415
+ line-height: 26px;
1416
+ }
1417
+ .jsoneditor-frame {
1418
+ border: 1px solid transparent;
1419
+ background-color: #fff;
1420
+ padding: 0 2px;
1421
+ margin: 0;
1422
+ }
1423
+ .jsoneditor-treepath {
1424
+ padding: 0 5px;
1425
+ overflow: hidden;
1426
+ white-space: nowrap;
1427
+ outline: 0;
1428
+ div.jsoneditor-contextmenu-root {
1429
+ position: absolute;
1430
+ left: 0;
1431
+ }
1432
+ .jsoneditor-treepath-show-all-btn {
1433
+ position: absolute;
1434
+ background-color: #ebebeb;
1435
+ left: 0;
1436
+ height: 20px;
1437
+ padding: 0 3px;
1438
+ cursor: pointer;
1439
+ }
1440
+ .jsoneditor-treepath-element {
1441
+ margin: 1px;
1442
+ font-family: arial,sans-serif;
1443
+ font-size: 10pt;
1444
+ }
1445
+ .jsoneditor-treepath-seperator {
1446
+ margin: 2px;
1447
+ font-size: 9pt;
1448
+ font-family: arial,sans-serif;
1449
+ }
1450
+ span.jsoneditor-treepath-element {
1451
+ &:hover {
1452
+ cursor: pointer;
1453
+ text-decoration: underline;
1454
+ }
1455
+ }
1456
+ span.jsoneditor-treepath-seperator {
1457
+ &:hover {
1458
+ cursor: pointer;
1459
+ text-decoration: underline;
1460
+ }
1461
+ }
1462
+ }
1463
+ .jsoneditor-treepath.show-all {
1464
+ word-wrap: break-word;
1465
+ white-space: normal;
1466
+ position: absolute;
1467
+ background-color: #ebebeb;
1468
+ z-index: 999;
1469
+ box-shadow: 2px 2px 12px rgba(128,128,128,.3);
1470
+ span.jsoneditor-treepath-show-all-btn {
1471
+ display: none;
1472
+ }
1473
+ }
1474
+ .jsoneditor-statusbar {
1475
+ line-height: 26px;
1476
+ height: 26px;
1477
+ color: grey;
1478
+ background-color: #ebebeb;
1479
+ border-top: 1px solid #d3d3d3;
1480
+ -moz-box-sizing: border-box;
1481
+ -webkit-box-sizing: border-box;
1482
+ box-sizing: border-box;
1483
+ font-size: 10pt;
1484
+ >.jsoneditor-curserinfo-val {
1485
+ margin-right: 12px;
1486
+ }
1487
+ >.jsoneditor-curserinfo-count {
1488
+ margin-left: 4px;
1489
+ }
1490
+ >.jsoneditor-validation-error-icon {
1491
+ float: right;
1492
+ width: 24px;
1493
+ height: 24px;
1494
+ padding: 0;
1495
+ margin-top: 1px;
1496
+ background: asset-url("jsoneditor-icons.svg") -168px -48px;
1497
+ cursor: pointer;
1498
+ }
1499
+ >.jsoneditor-validation-error-count {
1500
+ float: right;
1501
+ margin: 0 4px 0 0;
1502
+ cursor: pointer;
1503
+ }
1504
+ >.jsoneditor-parse-error-icon {
1505
+ float: right;
1506
+ width: 24px;
1507
+ height: 24px;
1508
+ padding: 0;
1509
+ margin: 1px;
1510
+ background: asset-url("jsoneditor-icons.svg") -25px 0;
1511
+ }
1512
+ .jsoneditor-array-info {
1513
+ a {
1514
+ color: inherit;
1515
+ }
1516
+ }
1517
+ }
1518
+ div.jsoneditor-statusbar {
1519
+ >.jsoneditor-curserinfo-label {
1520
+ margin: 0 4px;
1521
+ }
1522
+ >.jsoneditor-size-info {
1523
+ margin: 0 4px;
1524
+ }
1525
+ }
1526
+ .jsoneditor-navigation-bar {
1527
+ width: 100%;
1528
+ height: 26px;
1529
+ line-height: 26px;
1530
+ padding: 0;
1531
+ margin: 0;
1532
+ border-bottom: 1px solid #d3d3d3;
1533
+ -moz-box-sizing: border-box;
1534
+ -webkit-box-sizing: border-box;
1535
+ box-sizing: border-box;
1536
+ color: grey;
1537
+ background-color: #ebebeb;
1538
+ overflow: hidden;
1539
+ font-family: arial,sans-serif;
1540
+ font-size: 10pt;
1541
+ }
1542
+ .selectr-container {
1543
+ position: relative;
1544
+ li {
1545
+ list-style: none;
1546
+ }
1547
+ &::-webkit-input-placeholder {
1548
+ color: #6c7a86;
1549
+ opacity: 1;
1550
+ }
1551
+ &::-moz-placeholder {
1552
+ color: #6c7a86;
1553
+ opacity: 1;
1554
+ }
1555
+ &:-ms-input-placeholder {
1556
+ color: #6c7a86;
1557
+ opacity: 1;
1558
+ }
1559
+ &::placeholder {
1560
+ color: #6c7a86;
1561
+ opacity: 1;
1562
+ }
1563
+ }
1564
+ .selectr-hidden {
1565
+ position: absolute;
1566
+ overflow: hidden;
1567
+ clip: rect(0,0,0,0);
1568
+ width: 1px;
1569
+ height: 1px;
1570
+ margin: -1px;
1571
+ padding: 0;
1572
+ border: 0 none;
1573
+ }
1574
+ .selectr-visible {
1575
+ position: absolute;
1576
+ left: 0;
1577
+ top: 0;
1578
+ width: 100%;
1579
+ height: 100%;
1580
+ opacity: 0;
1581
+ z-index: 11;
1582
+ }
1583
+ .selectr-desktop.multiple {
1584
+ .selectr-visible {
1585
+ display: none;
1586
+ }
1587
+ }
1588
+ .selectr-desktop.multiple.native-open {
1589
+ .selectr-visible {
1590
+ top: 100%;
1591
+ min-height: 200px !important;
1592
+ height: auto;
1593
+ opacity: 1;
1594
+ display: block;
1595
+ }
1596
+ }
1597
+ .selectr-container.multiple.selectr-mobile {
1598
+ .selectr-selected {
1599
+ z-index: 0;
1600
+ }
1601
+ }
1602
+ .selectr-selected {
1603
+ position: relative;
1604
+ z-index: 1;
1605
+ box-sizing: border-box;
1606
+ width: 100%;
1607
+ padding: 7px 28px 7px 14px;
1608
+ cursor: pointer;
1609
+ border: 1px solid #999;
1610
+ border-radius: 3px;
1611
+ background-color: #fff;
1612
+ &::before {
1613
+ position: absolute;
1614
+ top: 50%;
1615
+ right: 10px;
1616
+ width: 0;
1617
+ height: 0;
1618
+ content: '';
1619
+ -o-transform: rotate(0) translate3d(0,-50%,0);
1620
+ -ms-transform: rotate(0) translate3d(0,-50%,0);
1621
+ -moz-transform: rotate(0) translate3d(0,-50%,0);
1622
+ -webkit-transform: rotate(0) translate3d(0,-50%,0);
1623
+ transform: rotate(0) translate3d(0,-50%,0);
1624
+ border-width: 4px 4px 0 4px;
1625
+ border-style: solid;
1626
+ border-color: #6c7a86 transparent transparent;
1627
+ }
1628
+ .selectr-tag-remove {
1629
+ right: 2px;
1630
+ }
1631
+ }
1632
+ .selectr-container.native-open {
1633
+ .selectr-selected {
1634
+ &::before {
1635
+ border-width: 0 4px 4px 4px;
1636
+ border-style: solid;
1637
+ border-color: transparent transparent #6c7a86;
1638
+ }
1639
+ }
1640
+ }
1641
+ .selectr-container.open {
1642
+ .selectr-selected {
1643
+ &::before {
1644
+ border-width: 0 4px 4px 4px;
1645
+ border-style: solid;
1646
+ border-color: transparent transparent #6c7a86;
1647
+ }
1648
+ border-color: #999 #999 transparent #999;
1649
+ border-radius: 3px 3px 0 0;
1650
+ &::after {
1651
+ -o-transform: rotate(180deg) translate3d(0,50%,0);
1652
+ -ms-transform: rotate(180deg) translate3d(0,50%,0);
1653
+ -moz-transform: rotate(180deg) translate3d(0,50%,0);
1654
+ -webkit-transform: rotate(180deg) translate3d(0,50%,0);
1655
+ transform: rotate(180deg) translate3d(0,50%,0);
1656
+ }
1657
+ }
1658
+ .selectr-options-container {
1659
+ display: block;
1660
+ }
1661
+ .selectr-input-container {
1662
+ display: block;
1663
+ }
1664
+ .selectr-options {
1665
+ display: block;
1666
+ }
1667
+ }
1668
+ .selectr-label {
1669
+ display: none;
1670
+ overflow: hidden;
1671
+ width: 100%;
1672
+ white-space: nowrap;
1673
+ text-overflow: ellipsis;
1674
+ }
1675
+ .selectr-placeholder {
1676
+ color: #6c7a86;
1677
+ }
1678
+ .selectr-tags {
1679
+ margin: 0;
1680
+ padding: 0;
1681
+ white-space: normal;
1682
+ }
1683
+ .has-selected {
1684
+ .selectr-tags {
1685
+ margin: 0 0 -2px;
1686
+ }
1687
+ .selectr-placeholder {
1688
+ display: none;
1689
+ }
1690
+ .selectr-label {
1691
+ display: block;
1692
+ }
1693
+ }
1694
+ .selectr-tag {
1695
+ list-style: none;
1696
+ position: relative;
1697
+ float: left;
1698
+ padding: 2px 25px 2px 8px;
1699
+ margin: 0 2px 2px 0;
1700
+ cursor: default;
1701
+ color: #fff;
1702
+ border: medium none;
1703
+ border-radius: 10px;
1704
+ background: #acb7bf none repeat scroll 0 0;
1705
+ }
1706
+ .selectr-container.multiple.has-selected {
1707
+ .selectr-selected {
1708
+ padding: 5px 28px 5px 5px;
1709
+ }
1710
+ }
1711
+ .selectr-options-container {
1712
+ position: absolute;
1713
+ z-index: 10000;
1714
+ top: calc(100% - 1px);
1715
+ left: 0;
1716
+ display: none;
1717
+ box-sizing: border-box;
1718
+ width: 100%;
1719
+ border-width: 0 1px 1px;
1720
+ border-style: solid;
1721
+ border-color: transparent #999 #999;
1722
+ border-radius: 0 0 3px 3px;
1723
+ background-color: #fff;
1724
+ }
1725
+ .selectr-input-container {
1726
+ position: relative;
1727
+ display: none;
1728
+ }
1729
+ .selectr-clear {
1730
+ position: absolute;
1731
+ top: 50%;
1732
+ right: 22px;
1733
+ width: 20px;
1734
+ height: 20px;
1735
+ padding: 0;
1736
+ cursor: pointer;
1737
+ -o-transform: translate3d(0,-50%,0);
1738
+ -ms-transform: translate3d(0,-50%,0);
1739
+ -moz-transform: translate3d(0,-50%,0);
1740
+ -webkit-transform: translate3d(0,-50%,0);
1741
+ transform: translate3d(0,-50%,0);
1742
+ border: medium none;
1743
+ background-color: transparent;
1744
+ z-index: 11;
1745
+ display: none;
1746
+ &::after {
1747
+ position: absolute;
1748
+ top: 5px;
1749
+ left: 9px;
1750
+ width: 2px;
1751
+ height: 10px;
1752
+ content: ' ';
1753
+ background-color: #6c7a86;
1754
+ }
1755
+ &::before {
1756
+ position: absolute;
1757
+ top: 5px;
1758
+ left: 9px;
1759
+ width: 2px;
1760
+ height: 10px;
1761
+ content: ' ';
1762
+ background-color: #6c7a86;
1763
+ }
1764
+ &:before {
1765
+ -o-transform: rotate(45deg);
1766
+ -ms-transform: rotate(45deg);
1767
+ -moz-transform: rotate(45deg);
1768
+ -webkit-transform: rotate(45deg);
1769
+ transform: rotate(45deg);
1770
+ }
1771
+ &:after {
1772
+ -o-transform: rotate(-45deg);
1773
+ -ms-transform: rotate(-45deg);
1774
+ -moz-transform: rotate(-45deg);
1775
+ -webkit-transform: rotate(-45deg);
1776
+ transform: rotate(-45deg);
1777
+ }
1778
+ }
1779
+ .selectr-input-clear {
1780
+ position: absolute;
1781
+ top: 50%;
1782
+ right: 22px;
1783
+ width: 20px;
1784
+ height: 20px;
1785
+ padding: 0;
1786
+ cursor: pointer;
1787
+ -o-transform: translate3d(0,-50%,0);
1788
+ -ms-transform: translate3d(0,-50%,0);
1789
+ -moz-transform: translate3d(0,-50%,0);
1790
+ -webkit-transform: translate3d(0,-50%,0);
1791
+ transform: translate3d(0,-50%,0);
1792
+ border: medium none;
1793
+ background-color: transparent;
1794
+ z-index: 11;
1795
+ display: none;
1796
+ &::after {
1797
+ position: absolute;
1798
+ top: 5px;
1799
+ left: 9px;
1800
+ width: 2px;
1801
+ height: 10px;
1802
+ content: ' ';
1803
+ background-color: #6c7a86;
1804
+ -o-transform: rotate(-45deg);
1805
+ -ms-transform: rotate(-45deg);
1806
+ -moz-transform: rotate(-45deg);
1807
+ -webkit-transform: rotate(-45deg);
1808
+ transform: rotate(-45deg);
1809
+ }
1810
+ &::before {
1811
+ position: absolute;
1812
+ top: 5px;
1813
+ left: 9px;
1814
+ width: 2px;
1815
+ height: 10px;
1816
+ content: ' ';
1817
+ background-color: #6c7a86;
1818
+ -o-transform: rotate(45deg);
1819
+ -ms-transform: rotate(45deg);
1820
+ -moz-transform: rotate(45deg);
1821
+ -webkit-transform: rotate(45deg);
1822
+ transform: rotate(45deg);
1823
+ }
1824
+ }
1825
+ .selectr-tag-remove {
1826
+ position: absolute;
1827
+ top: 50%;
1828
+ right: 22px;
1829
+ width: 20px;
1830
+ height: 20px;
1831
+ padding: 0;
1832
+ cursor: pointer;
1833
+ -o-transform: translate3d(0,-50%,0);
1834
+ -ms-transform: translate3d(0,-50%,0);
1835
+ -moz-transform: translate3d(0,-50%,0);
1836
+ -webkit-transform: translate3d(0,-50%,0);
1837
+ transform: translate3d(0,-50%,0);
1838
+ border: medium none;
1839
+ background-color: transparent;
1840
+ z-index: 11;
1841
+ &::after {
1842
+ position: absolute;
1843
+ top: 5px;
1844
+ left: 9px;
1845
+ width: 2px;
1846
+ height: 10px;
1847
+ content: ' ';
1848
+ background-color: #6c7a86;
1849
+ top: 4px;
1850
+ width: 3px;
1851
+ height: 12px;
1852
+ background-color: #fff;
1853
+ -o-transform: rotate(-45deg);
1854
+ -ms-transform: rotate(-45deg);
1855
+ -moz-transform: rotate(-45deg);
1856
+ -webkit-transform: rotate(-45deg);
1857
+ transform: rotate(-45deg);
1858
+ }
1859
+ &::before {
1860
+ position: absolute;
1861
+ top: 5px;
1862
+ left: 9px;
1863
+ width: 2px;
1864
+ height: 10px;
1865
+ content: ' ';
1866
+ background-color: #6c7a86;
1867
+ top: 4px;
1868
+ width: 3px;
1869
+ height: 12px;
1870
+ background-color: #fff;
1871
+ -o-transform: rotate(45deg);
1872
+ -ms-transform: rotate(45deg);
1873
+ -moz-transform: rotate(45deg);
1874
+ -webkit-transform: rotate(45deg);
1875
+ transform: rotate(45deg);
1876
+ }
1877
+ }
1878
+ .selectr-container.has-selected {
1879
+ .selectr-clear {
1880
+ display: block;
1881
+ }
1882
+ }
1883
+ .selectr-input-container.active {
1884
+ .selectr-input-clear {
1885
+ display: block;
1886
+ }
1887
+ display: block;
1888
+ .selectr-clear {
1889
+ display: block;
1890
+ }
1891
+ }
1892
+ .selectr-input {
1893
+ top: 5px;
1894
+ left: 5px;
1895
+ box-sizing: border-box;
1896
+ width: calc(100% - 30px);
1897
+ margin: 10px 15px;
1898
+ padding: 7px 30px 7px 9px;
1899
+ border: 1px solid #999;
1900
+ border-radius: 3px;
1901
+ }
1902
+ .selectr-notice {
1903
+ display: none;
1904
+ box-sizing: border-box;
1905
+ width: 100%;
1906
+ padding: 8px 16px;
1907
+ border-top: 1px solid #999;
1908
+ border-radius: 0 0 3px 3px;
1909
+ background-color: #fff;
1910
+ }
1911
+ .selectr-container.notice {
1912
+ .selectr-notice {
1913
+ display: block;
1914
+ }
1915
+ .selectr-selected {
1916
+ border-radius: 3px 3px 0 0;
1917
+ }
1918
+ .selectr-options-container {
1919
+ display: block;
1920
+ }
1921
+ }
1922
+ .selectr-options {
1923
+ position: relative;
1924
+ top: calc(100% + 2px);
1925
+ display: none;
1926
+ overflow-x: auto;
1927
+ overflow-y: scroll;
1928
+ max-height: 200px;
1929
+ margin: 0;
1930
+ padding: 0;
1931
+ }
1932
+ .selectr-option {
1933
+ position: relative;
1934
+ display: block;
1935
+ padding: 5px 20px;
1936
+ list-style: outside none none;
1937
+ cursor: pointer;
1938
+ font-weight: 400;
1939
+ }
1940
+ .selectr-options.optgroups {
1941
+ >.selectr-option {
1942
+ padding-left: 25px;
1943
+ }
1944
+ }
1945
+ .selectr-optgroup {
1946
+ font-weight: 700;
1947
+ padding: 0;
1948
+ }
1949
+ .selectr-optgroup--label {
1950
+ font-weight: 700;
1951
+ margin-top: 10px;
1952
+ padding: 5px 15px;
1953
+ }
1954
+ .selectr-match {
1955
+ text-decoration: underline;
1956
+ }
1957
+ .selectr-option.selected {
1958
+ background-color: #ddd;
1959
+ }
1960
+ .selectr-option.active {
1961
+ color: #fff;
1962
+ background-color: #5897fb;
1963
+ }
1964
+ .selectr-option.disabled {
1965
+ opacity: .4;
1966
+ }
1967
+ .selectr-option.excluded {
1968
+ display: none;
1969
+ }
1970
+ .selectr-disabled {
1971
+ opacity: .6;
1972
+ }
1973
+ .selectr-empty {
1974
+ display: none;
1975
+ }
1976
+ .taggable {
1977
+ .selectr-selected {
1978
+ padding: 4px 28px 4px 4px;
1979
+ &::after {
1980
+ display: table;
1981
+ content: " ";
1982
+ clear: both;
1983
+ }
1984
+ }
1985
+ .selectr-label {
1986
+ width: auto;
1987
+ }
1988
+ .selectr-tags {
1989
+ float: left;
1990
+ display: block;
1991
+ }
1992
+ .selectr-placeholder {
1993
+ display: none;
1994
+ }
1995
+ }
1996
+ .input-tag {
1997
+ float: left;
1998
+ min-width: 90px;
1999
+ width: auto;
2000
+ }
2001
+ .selectr-tag-input {
2002
+ border: medium none;
2003
+ padding: 3px 10px;
2004
+ width: 100%;
2005
+ font-family: inherit;
2006
+ font-weight: inherit;
2007
+ font-size: inherit;
2008
+ }
2009
+ .selectr-input-container.loading {
2010
+ &::after {
2011
+ position: absolute;
2012
+ top: 50%;
2013
+ right: 20px;
2014
+ width: 20px;
2015
+ height: 20px;
2016
+ content: '';
2017
+ -o-transform: translate3d(0,-50%,0);
2018
+ -ms-transform: translate3d(0,-50%,0);
2019
+ -moz-transform: translate3d(0,-50%,0);
2020
+ -webkit-transform: translate3d(0,-50%,0);
2021
+ transform: translate3d(0,-50%,0);
2022
+ -o-transform-origin: 50% 0 0;
2023
+ -ms-transform-origin: 50% 0 0;
2024
+ -moz-transform-origin: 50% 0 0;
2025
+ -webkit-transform-origin: 50% 0 0;
2026
+ transform-origin: 50% 0 0;
2027
+ -moz-animation: .5s linear 0s normal forwards infinite running spin;
2028
+ -webkit-animation: .5s linear 0s normal forwards infinite running spin;
2029
+ animation: .5s linear 0s normal forwards infinite running spin;
2030
+ border-width: 3px;
2031
+ border-style: solid;
2032
+ border-color: #aaa #ddd #ddd;
2033
+ border-radius: 50%;
2034
+ }
2035
+ }
2036
+ .selectr-container.open.inverted {
2037
+ .selectr-selected {
2038
+ border-color: transparent #999 #999;
2039
+ border-radius: 0 0 3px 3px;
2040
+ }
2041
+ }
2042
+ .selectr-container.inverted {
2043
+ .selectr-options-container {
2044
+ border-width: 1px 1px 0;
2045
+ border-color: #999 #999 transparent;
2046
+ border-radius: 3px 3px 0 0;
2047
+ background-color: #fff;
2048
+ top: auto;
2049
+ bottom: calc(100% - 1px);
2050
+ }
2051
+ }