ol-wfst 5.0.0 → 5.1.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.
@@ -2,651 +2,769 @@
2
2
  @import 'variables';
3
3
  @import '~bootstrap/scss/mixins';
4
4
 
5
- :root {
5
+ // clase general aplicada al mapa
6
+ .ol-wfst--map {
6
7
  --ol-subtle-background-color: transparent;
7
- }
8
-
9
- .ol-zoom {
10
- top: inherit;
11
- left: inherit;
12
- bottom: 5em;
13
- right: 0.5em;
14
- }
15
-
16
- .ol-wfst--input-field-container {
17
- display: inline-block;
18
- width: 49%;
19
- padding: 5px;
20
- margin-bottom: 10px;
21
- }
22
- .ol-wfst--input-field-label {
23
- display: block;
24
- font-weight: 500;
25
- margin-bottom: 4px;
26
- }
27
- .ol-wfst--input-field-input {
28
- width: 100%;
29
- padding: 5px;
30
- border: 1px solid black;
31
- border-radius: 3px;
32
- }
33
- .ol-wfst--input-field-input.ol-wfst--input-multiple::placeholder {
34
- font-style: italic;
35
- color: #888;
36
- }
37
- .ol-wfst--edit-modal-notice {
38
- padding: 10px 12px;
39
- margin-bottom: 12px;
40
- border: 1px solid #ffc107;
41
- border-radius: $borderRadius;
42
- background: #fff8e1;
43
- color: #6b5300;
44
- font-size: 13px;
45
- font-weight: 500;
46
- }
47
- .ol-wfst--edit-button-cnt {
48
- display: inline-block;
49
- margin: 0 5px;
50
- }
51
- .ol-wfst--edit-button {
52
- outline: 0;
53
- padding: 8px;
54
- height: 38px;
55
- width: 38px;
56
- font-size: 12px;
57
- background: $btnBack;
58
- border: 1px solid #b3b3b3;
59
- border-radius: 50%;
60
- box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
61
- cursor: pointer;
62
-
63
- &:hover {
64
- background: $btnHover;
65
- }
66
- &:active {
67
- background: $btnBackActive;
68
- transform: translateY(1px);
69
- }
70
8
 
71
- svg {
72
- fill: #333;
73
- width: 20px;
74
- height: 20px;
75
- }
76
- }
9
+ .ol-control {
10
+ button {
11
+ cursor: pointer;
12
+ }
77
13
 
78
- .ol-wfst--extend-button-cnt {
79
- display: inline-block;
80
- }
14
+ &.ol-zoom {
15
+ top: inherit;
16
+ left: inherit;
17
+ bottom: 5em;
18
+ right: 0.5em;
19
+ }
81
20
 
82
- .ol-wfst--extend-button {
83
- outline: 0;
84
- display: flex;
85
- align-items: center;
86
- justify-content: center;
87
- padding: 0;
88
- width: 24px;
89
- height: 24px;
90
- background: $btnBack;
91
- border: 1px solid #b3b3b3;
92
- border-radius: 50%;
93
- box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
94
- cursor: pointer;
95
-
96
- &:hover {
97
- background: $btnHover;
98
- }
99
- &:active {
100
- background: $btnBackActive;
101
- transform: translateY(1px);
21
+ &.ol-wfst--fullscreen {
22
+ top: auto;
23
+ left: auto;
24
+ right: 0.5em;
25
+ bottom: 18px;
26
+
27
+ button {
28
+ background: #fff;
29
+ border-radius: $borderRadius;
30
+ outline: 0;
31
+ width: 32px;
32
+ height: 32px;
33
+ display: inline-flex;
34
+ align-items: center;
35
+ justify-content: center;
36
+ padding: 0;
37
+
38
+ svg {
39
+ width: 20px;
40
+ height: 20px;
41
+ pointer-events: none;
42
+ }
43
+
44
+ &:hover,
45
+ &:active {
46
+ opacity: 0.95;
47
+ }
48
+ &:active {
49
+ transform: translateY(1px);
50
+ }
51
+ }
52
+ }
102
53
  }
103
54
 
104
- svg {
105
- fill: #333;
106
- width: 16px;
107
- height: 16px;
55
+ .ol-box.ol-wfst--dragbox {
56
+ border: 2px dashed #ffc800;
57
+ background-color: rgba(255, 200, 0, 0.1);
58
+ border-radius: 0;
108
59
  }
109
- }
110
-
111
- .ol-wfst--changes-control {
112
- position: absolute;
113
- left: 50%;
114
- top: 0;
115
- transform: translateX(-50%);
116
- z-index: 10;
117
- max-width: 320px;
118
- width: 90%;
119
- background: $changesBackground;
120
- color: $changesText;
121
- border: 1px solid rgb(0 0 0 / 18%);
122
- border-top: 0;
123
- box-shadow:
124
- 0 2px 6px rgb(0 0 0 / 20%),
125
- 0 8px 24px rgb(0 0 0 / 35%);
126
- border-radius: 0 0 $borderRadius $borderRadius;
127
- padding: 12px 14px 14px;
128
- animation: ol-wfst--slide-down 0.28s ease-out;
129
- }
130
60
 
131
- @keyframes ol-wfst--slide-down {
132
- from {
133
- opacity: 0;
134
- transform: translate(-50%, -10px);
135
- }
136
- to {
137
- opacity: 1;
138
- transform: translate(-50%, 0);
61
+ .ol-wfst--edit-button-cnt {
62
+ display: inline-block;
63
+ margin: 0 5px;
139
64
  }
140
- }
141
65
 
142
- .ol-wfst--changes-control-el {
143
- display: flex;
144
- flex-wrap: wrap;
145
- justify-content: center;
146
- align-items: center;
147
- gap: 8px;
148
-
149
- button {
150
- margin: 0;
151
- transition:
152
- transform 0.12s ease,
153
- box-shadow 0.12s ease,
154
- filter 0.12s ease;
66
+ .ol-wfst--edit-button {
67
+ outline: 0;
68
+ padding: 8px;
69
+ height: 38px;
70
+ width: 38px;
71
+ font-size: 12px;
72
+ background: $btnBack;
73
+ border: 1px solid #b3b3b3;
74
+ border-radius: 50%;
75
+ box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
76
+ cursor: pointer;
155
77
 
156
78
  &:hover {
157
- box-shadow: 0 3px 8px rgb(0 0 0 / 25%);
158
- filter: brightness(1.05);
79
+ background: $btnHover;
159
80
  }
160
81
  &:active {
161
- transform: translateY(-1px);
162
- box-shadow: none;
163
- filter: brightness(0.97);
82
+ background: $btnBackActive;
83
+ transform: translateY(1px);
164
84
  }
165
- }
166
85
 
167
- .btn-danger-outline {
168
- color: rgb(255 255 255 / 90%);
169
- border: 1px solid rgb(255 255 255 / 55%);
170
- background: transparent;
171
-
172
- &:hover {
173
- background: rgb(255 255 255 / 15%);
174
- box-shadow: none;
175
- }
176
- &:active {
177
- background: rgb(255 255 255 / 25%);
86
+ svg {
87
+ fill: #333;
88
+ width: 20px;
89
+ height: 20px;
178
90
  }
179
91
  }
180
- }
181
92
 
182
- .ol-wfst--changes-control-id {
183
- flex-basis: 100%;
184
- display: flex;
185
- align-items: center;
186
- justify-content: center;
187
- gap: 8px;
188
- margin-bottom: 8px;
189
- padding-bottom: 10px;
190
- border-bottom: 1px solid rgb(255 255 255 / 25%);
191
- font-size: 12px;
192
- font-weight: 600;
193
- text-transform: uppercase;
194
- letter-spacing: 0.4px;
195
- color: $changesText;
196
-
197
- b {
198
- display: inline-flex;
199
- align-items: center;
200
- gap: 6px;
93
+ .ol-wfst--extend-button-cnt {
94
+ display: inline-block;
201
95
 
202
- &::before {
203
- content: '';
204
- width: 8px;
205
- height: 8px;
96
+ .ol-wfst--extend-button {
97
+ outline: 0;
98
+ display: flex;
99
+ align-items: center;
100
+ justify-content: center;
101
+ padding: 0;
102
+ width: 24px;
103
+ height: 24px;
104
+ background: $btnBack;
105
+ border: 1px solid #b3b3b3;
206
106
  border-radius: 50%;
207
- background: currentColor;
208
- animation: ol-wfst--pulse 1.6s infinite;
107
+ box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
108
+ cursor: pointer;
109
+
110
+ &:hover {
111
+ background: $btnHover;
112
+ }
113
+ &:active {
114
+ background: $btnBackActive;
115
+ transform: translateY(1px);
116
+ }
117
+
118
+ svg {
119
+ fill: #333;
120
+ width: 16px;
121
+ height: 16px;
122
+ }
209
123
  }
210
124
  }
211
125
 
212
- i {
213
- font-style: normal;
214
- font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
215
- font-size: 11px;
216
- font-weight: 500;
217
- text-transform: none;
218
- letter-spacing: 0;
219
- background: rgb(255 255 255 / 22%);
220
- border-radius: 999px;
221
- padding: 2px 10px;
222
- max-width: 180px;
223
- overflow: hidden;
224
- text-overflow: ellipsis;
225
- white-space: nowrap;
226
- }
227
- }
126
+ .ol-wfst--changes-control {
127
+ position: absolute;
128
+ left: 50%;
129
+ top: 0;
130
+ transform: translateX(-50%);
131
+ z-index: 10;
132
+ max-width: 320px;
133
+ width: 90%;
134
+ background: $changesBackground;
135
+ color: $changesText;
136
+ border: 1px solid rgb(0 0 0 / 18%);
137
+ border-top: 0;
138
+ box-shadow:
139
+ 0 2px 6px rgb(0 0 0 / 20%),
140
+ 0 8px 24px rgb(0 0 0 / 35%);
141
+ border-radius: 0 0 $borderRadius $borderRadius;
142
+ padding: 12px 14px 14px;
143
+ animation: ol-wfst--slide-down 0.28s ease-out;
144
+
145
+ @keyframes ol-wfst--slide-down {
146
+ from {
147
+ opacity: 0;
148
+ transform: translate(-50%, -10px);
149
+ }
150
+ to {
151
+ opacity: 1;
152
+ transform: translate(-50%, 0);
153
+ }
154
+ }
228
155
 
229
- @keyframes ol-wfst--pulse {
230
- 0% {
231
- box-shadow: 0 0 0 0 rgb(255 255 255 / 70%);
232
- }
233
- 70% {
234
- box-shadow: 0 0 0 6px rgb(255 255 255 / 0%);
235
- }
236
- 100% {
237
- box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);
156
+ .ol-wfst--changes-control-el {
157
+ display: flex;
158
+ flex-wrap: wrap;
159
+ justify-content: center;
160
+ align-items: center;
161
+ gap: 8px;
162
+
163
+ .ol-wfst--changes-control-id {
164
+ flex-basis: 100%;
165
+ display: flex;
166
+ align-items: center;
167
+ justify-content: center;
168
+ gap: 8px;
169
+ margin-bottom: 8px;
170
+ padding-bottom: 10px;
171
+ border-bottom: 1px solid rgb(255 255 255 / 25%);
172
+ font-size: 12px;
173
+ font-weight: 600;
174
+ text-transform: uppercase;
175
+ letter-spacing: 0.4px;
176
+ color: $changesText;
177
+
178
+ b {
179
+ display: inline-flex;
180
+ align-items: center;
181
+ gap: 6px;
182
+
183
+ &::before {
184
+ content: '';
185
+ width: 8px;
186
+ height: 8px;
187
+ border-radius: 50%;
188
+ background: currentColor;
189
+ animation: ol-wfst--pulse 1.6s infinite;
190
+ }
191
+ }
192
+
193
+ @keyframes ol-wfst--pulse {
194
+ 0% {
195
+ box-shadow: 0 0 0 0 rgb(255 255 255 / 70%);
196
+ }
197
+ 70% {
198
+ box-shadow: 0 0 0 6px rgb(255 255 255 / 0%);
199
+ }
200
+ 100% {
201
+ box-shadow: 0 0 0 0 rgb(255 255 255 / 0%);
202
+ }
203
+ }
204
+
205
+ i {
206
+ font-style: normal;
207
+ font-family:
208
+ ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
209
+ font-size: 11px;
210
+ font-weight: 500;
211
+ text-transform: none;
212
+ letter-spacing: 0;
213
+ background: rgb(255 255 255 / 22%);
214
+ border-radius: 999px;
215
+ padding: 2px 10px;
216
+ max-width: 180px;
217
+ overflow: hidden;
218
+ text-overflow: ellipsis;
219
+ white-space: nowrap;
220
+ }
221
+ }
222
+
223
+ button {
224
+ margin: 0;
225
+ transition:
226
+ transform 0.12s ease,
227
+ box-shadow 0.12s ease,
228
+ filter 0.12s ease;
229
+
230
+ &:hover {
231
+ box-shadow: 0 3px 8px rgb(0 0 0 / 25%);
232
+ filter: brightness(1.05);
233
+ }
234
+
235
+ &:active {
236
+ transform: translateY(-1px);
237
+ box-shadow: none;
238
+ filter: brightness(0.97);
239
+ }
240
+
241
+ &:first-of-type {
242
+ margin-right: auto;
243
+ }
244
+ }
245
+
246
+ .btn-danger-outline {
247
+ color: rgb(255 255 255 / 90%);
248
+ border: 1px solid rgb(255 255 255 / 55%);
249
+ background: transparent;
250
+
251
+ &:hover {
252
+ background: rgb(255 255 255 / 15%);
253
+ box-shadow: none;
254
+ }
255
+ &:active {
256
+ background: rgb(255 255 255 / 25%);
257
+ }
258
+ }
259
+ }
238
260
  }
239
- }
240
- .ol-wfst--tools-control {
241
- position: absolute;
242
- top: 0.5em;
243
- left: 0.5em;
244
- }
245
- .ol-control button {
246
- cursor: pointer;
247
- }
248
261
 
249
- .ol-wfst--fullscreen {
250
- top: auto;
251
- left: auto;
252
- right: 0.5em;
253
- bottom: 18px;
262
+ .ol-wfst--tools-control {
263
+ position: absolute;
264
+ top: 0.5em;
265
+ left: 0.5em;
254
266
 
255
- button {
256
- background: #fff;
257
- border-radius: $borderRadius;
258
- outline: 0;
259
- width: 32px;
260
- height: 32px;
261
- display: inline-flex;
262
- align-items: center;
263
- justify-content: center;
264
- padding: 0;
267
+ &.ol-wfst--controls--hidden {
268
+ display: none;
269
+ }
265
270
 
266
- svg {
267
- width: 20px;
268
- height: 20px;
269
- pointer-events: none;
271
+ .ol-wfst--tools-control-btn {
272
+ border-radius: $borderRadius;
273
+ outline: 0;
274
+ width: 40px;
275
+ height: 32px;
276
+ display: inline-block;
277
+ text-align: center;
278
+ vertical-align: middle;
279
+ cursor: pointer;
280
+ border: 1px solid #c0c0c0;
281
+ background-color: #fff;
282
+
283
+ &.wfst--active {
284
+ background-color: $btnActive !important;
285
+ opacity: 1;
286
+ }
287
+ &:hover,
288
+ &:active {
289
+ background-color: $btnHover;
290
+ opacity: 0.95;
291
+ }
292
+ &:active {
293
+ transform: translateY(1px);
294
+ }
295
+
296
+ svg {
297
+ width: 20px;
298
+ height: 20px;
299
+ }
270
300
  }
271
301
 
272
- &:hover,
273
- &:active {
274
- opacity: 0.95;
302
+ .wfst--tools-control--head {
303
+ position: absolute;
304
+ background: #dddddd;
305
+ padding: 10px;
306
+ border: 1px solid #a9a9a9bb;
307
+ border-radius: $borderRadius;
308
+ box-shadow: 0 1px 4px rgb(0 0 0 / 42%);
309
+ display: flex;
310
+ pointer-events: auto;
311
+ gap: 6px;
312
+
313
+ label {
314
+ cursor: pointer;
315
+ }
316
+
317
+ > * {
318
+ display: flex;
319
+ }
275
320
  }
276
- &:active {
277
- transform: translateY(1px);
321
+
322
+ .ol-wfst--tools-control-select-cnt {
323
+ font-size: 0;
324
+
325
+ &:not(:first-child) {
326
+ margin-left: 6px;
327
+ }
278
328
  }
279
- }
280
- }
281
329
 
282
- .btn.btn-third {
283
- margin-right: auto;
284
- color: $btnDelete;
285
- }
330
+ .ol-wfst--tools-control-btn-select,
331
+ .ol-wfst--tools-control-btn-select-box,
332
+ .ol-wfst--tools-control-btn-select-freehand {
333
+ width: 34px;
334
+ padding: 0;
335
+ border-radius: 0;
336
+ }
286
337
 
287
- .ol-wfst--layer-not-visible {
288
- opacity: 0.5 !important;
289
- font-style: italic;
290
- }
338
+ .ol-wfst--tools-control-btn-select {
339
+ border-radius: $borderRadius 0 0 $borderRadius;
291
340
 
292
- .wfst--layer-control {
293
- position: relative;
294
- min-width: 200px;
295
- opacity: 0.7;
296
- display: flex;
341
+ svg {
342
+ width: 11px;
343
+ height: auto;
344
+ }
345
+ }
297
346
 
298
- label {
299
- width: 100%;
300
- padding: 5px 10px;
301
- display: flex;
302
- gap: 6px;
303
- }
347
+ .ol-wfst--tools-control-btn-select-box {
348
+ border-left: 0;
349
+ }
304
350
 
305
- &.ol-wfst--visible-on {
306
- opacity: 1;
307
- }
351
+ .ol-wfst--tools-control-btn-select-freehand {
352
+ border-left: 0;
353
+ border-radius: 0 $borderRadius $borderRadius 0;
354
+ }
308
355
 
309
- &.ol-wfst--selected-on {
310
- background-color: $layerSelected !important;
311
- }
356
+ .ol-wfst--tools-control-query-cnt {
357
+ .ol-wfst--tools-control-btn-query {
358
+ border-radius: $borderRadius;
359
+ }
312
360
 
313
- &:hover,
314
- &:active {
315
- background-color: $layerHover;
316
- }
361
+ svg {
362
+ width: 16px;
363
+ height: 16px;
364
+ }
365
+ }
317
366
 
318
- input[type='radio'] {
319
- display: none;
320
- }
321
- }
367
+ .ol-wfst--tools-control-btn-upload {
368
+ padding: 3px;
369
+ }
370
+ .wfst--tools-control--select-draw {
371
+ outline: 0;
372
+ border: 1px solid #c0c0c0;
373
+ border-radius: $borderRadius;
374
+ padding: 0 3px;
375
+ height: 32px;
376
+ background: #f7f7f7;
377
+ cursor: pointer;
378
+ pointer-events: none;
379
+ opacity: 0.5;
380
+ vertical-align: middle;
381
+ font-size: 0.9em;
382
+ border-left: 0;
383
+ border-radius: 0 $borderRadius $borderRadius 0;
384
+ }
385
+ .ol-wfst--tools-control-btn-draw {
386
+ border-radius: $borderRadius 0 0 $borderRadius;
387
+ opacity: 0.7;
388
+ }
322
389
 
323
- .wfst--tools-control--select-layers {
324
- .wfst--tools-control--select-layers-title {
325
- padding: 5px 10px;
326
- font-weight: bold;
327
- border-bottom: 1px solid #a9a9a9bb;
328
- background-color: #dddddd;
390
+ #ol-wfst--upload {
391
+ display: none;
392
+ visibility: hidden;
393
+ }
329
394
  }
330
395
 
331
- .wfst--tools-control--select-layers-list {
332
- max-height: 150px;
333
- overflow-y: auto;
334
- }
396
+ .ol-wfst--layers-control {
397
+ font-size: 13px;
398
+ position: absolute;
399
+ left: 10px;
400
+ bottom: 10px;
401
+ pointer-events: auto;
335
402
 
336
- .wfst--layer-control:not(.ol-wfst--selected-on) label {
337
- cursor: pointer;
403
+ .ol-wfst--layer-not-visible {
404
+ opacity: 0.5 !important;
405
+ font-style: italic;
406
+ }
407
+
408
+ .ol-wfst--layer-control-visible {
409
+ display: inline-block;
410
+ position: relative;
411
+ z-index: 999;
412
+
413
+ svg {
414
+ width: 14px;
415
+ height: 14px;
416
+ }
417
+ .ol-wfst--layer-control-visible -btn {
418
+ opacity: 0.6;
419
+ cursor: pointer;
420
+ }
421
+ .ol-wfst--layer-control-visible -btn:hover {
422
+ opacity: 0.9;
423
+ }
424
+ }
425
+
426
+ .wfst--tools-control--select-layers {
427
+ border-radius: $borderRadius;
428
+ border: 1px solid #a9a9a9bb;
429
+ box-shadow: 0 1px 4px rgb(0 0 0 / 42%);
430
+ background-color: #fff;
431
+ overflow: hidden;
432
+
433
+ .wfst--tools-control--select-layers-title {
434
+ padding: 5px 10px;
435
+ font-weight: bold;
436
+ border-bottom: 1px solid #a9a9a9bb;
437
+ background-color: #dddddd;
438
+ }
439
+
440
+ .wfst--tools-control--select-layers-list {
441
+ max-height: 150px;
442
+ overflow-y: auto;
443
+ }
444
+
445
+ .wfst--layer-control:not(.ol-wfst--selected-on) label {
446
+ cursor: pointer;
447
+ }
448
+ }
449
+
450
+ .wfst--layer-control {
451
+ position: relative;
452
+ min-width: 200px;
453
+ opacity: 0.7;
454
+ display: flex;
455
+
456
+ label {
457
+ width: 100%;
458
+ padding: 5px 10px;
459
+ display: flex;
460
+ gap: 6px;
461
+ }
462
+
463
+ &.ol-wfst--visible-on {
464
+ opacity: 1;
465
+ }
466
+
467
+ &.ol-wfst--selected-on {
468
+ background-color: $layerSelected !important;
469
+ }
470
+
471
+ &:hover,
472
+ &:active {
473
+ background-color: $layerHover;
474
+ }
475
+
476
+ input[type='radio'] {
477
+ display: none;
478
+ }
479
+ }
480
+
481
+ .ol-wfst--visible-btn-on {
482
+ display: none;
483
+ }
484
+
485
+ .ol-wfst--visible-on {
486
+ .ol-wfst--visible-btn-on {
487
+ display: block;
488
+ }
489
+ .ol-wfst--visible-btn-off {
490
+ display: none;
491
+ }
492
+ }
493
+
494
+ .ol-wfst--visible-btn-off {
495
+ display: block;
496
+ }
338
497
  }
339
- }
340
498
 
341
- .ol-wfst--tools-control-btn {
342
- border-radius: $borderRadius;
343
- outline: 0;
344
- width: 40px;
345
- height: 32px;
346
- display: inline-block;
347
- text-align: center;
348
- vertical-align: middle;
349
- cursor: pointer;
350
- border: 1px solid #c0c0c0;
351
- background-color: #fff;
352
-
353
- &.wfst--active {
354
- background-color: $btnActive !important;
499
+ .draw-mode .wfst--tools-control--select-draw {
500
+ pointer-events: inherit;
355
501
  opacity: 1;
356
- }
357
- &:hover,
358
- &:active {
359
- background-color: $btnHover;
360
- opacity: 0.95;
361
- }
362
- &:active {
363
- transform: translateY(1px);
502
+ background: #fffab5;
364
503
  }
365
504
 
366
- svg {
367
- width: 20px;
368
- height: 20px;
369
- }
370
- }
505
+ .ol-wfst--tools-control--loading {
506
+ display: none;
507
+ position: absolute;
508
+ top: -10px;
509
+ width: 100%;
510
+ height: 4px;
511
+ overflow: hidden;
512
+ background: rgba(0, 0, 0, 0.5);
513
+ border-radius: 4px;
514
+ box-shadow: 0 0 4px rgb(0 0 0 / 15%);
371
515
 
372
- .wfst--tools-control--head {
373
- position: absolute;
374
- background: #dddddd;
375
- padding: 10px;
376
- border: 1px solid #a9a9a9bb;
377
- border-radius: $borderRadius;
378
- box-shadow: 0 1px 4px rgb(0 0 0 / 42%);
379
- display: flex;
380
- pointer-events: auto;
381
- gap: 6px;
382
-
383
- label {
384
- cursor: pointer;
516
+ &::before {
517
+ content: '';
518
+ position: absolute;
519
+ top: 0;
520
+ left: 0;
521
+ width: 35%;
522
+ height: 100%;
523
+ background: $primaryColor;
524
+ border-radius: inherit;
525
+ animation: ol-wfst-loading-sweep 1.1s ease-in-out infinite;
526
+ }
385
527
  }
386
528
 
387
- > * {
388
- display: flex;
529
+ @keyframes ol-wfst-loading-sweep {
530
+ 0% {
531
+ transform: translateX(-100%);
532
+ }
533
+ 100% {
534
+ transform: translateX(300%);
535
+ }
536
+ }
537
+ .ol-wfst--tools-control--loading.ol-wfst--tools-control--loading-show {
538
+ display: block;
389
539
  }
390
- }
391
-
392
- .ol-wfst--layers-control {
393
- font-size: 13px;
394
- position: absolute;
395
- left: 10px;
396
- bottom: 10px;
397
- pointer-events: auto;
398
540
 
399
- .wfst--tools-control--select-layers {
541
+ .ol-wfst--query-popup {
542
+ position: relative;
543
+ width: 260px;
544
+ max-width: 280px;
545
+ background: $btnBack;
546
+ border: 1px solid #a9a9a9;
400
547
  border-radius: $borderRadius;
401
- border: 1px solid #a9a9a9bb;
402
- box-shadow: 0 1px 4px rgb(0 0 0 / 42%);
403
- background-color: #fff;
548
+ box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
549
+ font-size: 12px;
550
+ color: #333;
404
551
  overflow: hidden;
405
- }
406
- }
407
552
 
408
- .ol-wfst--tools-control-select-cnt {
409
- font-size: 0;
410
-
411
- &:not(:first-child) {
412
- margin-left: 6px;
413
- }
414
- }
553
+ .ol-wfst--query-popup-head {
554
+ display: flex;
555
+ align-items: center;
556
+ justify-content: space-between;
557
+ padding: 6px 8px;
558
+ background: #f2f2f2;
559
+ border-bottom: 1px solid #d9d9d9;
560
+ }
415
561
 
416
- .ol-wfst--tools-control-btn-select,
417
- .ol-wfst--tools-control-btn-select-box,
418
- .ol-wfst--tools-control-btn-select-freehand {
419
- width: 34px;
420
- padding: 0;
421
- border-radius: 0;
422
- }
562
+ .ol-wfst--query-popup-title {
563
+ font-weight: 600;
564
+ font-size: 12px;
565
+ }
423
566
 
424
- .ol-wfst--tools-control-btn-select {
425
- border-radius: $borderRadius 0 0 $borderRadius;
567
+ .ol-wfst--query-popup-close {
568
+ outline: 0;
569
+ border: 0;
570
+ background: transparent;
571
+ cursor: pointer;
572
+ font-size: 18px;
573
+ line-height: 1;
574
+ color: #555;
575
+ padding: 0 2px;
576
+
577
+ &:hover {
578
+ color: #000;
579
+ }
580
+ }
426
581
 
427
- svg {
428
- width: 11px;
429
- height: auto;
430
- }
431
- }
582
+ .ol-wfst--query-popup-subtitle {
583
+ display: flex;
584
+ align-items: center;
585
+ justify-content: space-between;
586
+ gap: 8px;
587
+ padding: 6px 10px;
588
+ border-bottom: 1px solid #efefef;
589
+
590
+ b {
591
+ font-weight: 600;
592
+ }
593
+
594
+ i {
595
+ font-style: normal;
596
+ font-family:
597
+ ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
598
+ font-size: 11px;
599
+ color: #777;
600
+ max-width: 150px;
601
+ overflow: hidden;
602
+ text-overflow: ellipsis;
603
+ white-space: nowrap;
604
+ }
605
+ }
432
606
 
433
- .ol-wfst--tools-control-btn-select-box {
434
- border-left: 0;
435
- }
607
+ .ol-wfst--query-popup-body {
608
+ max-height: 220px;
609
+ overflow-y: auto;
610
+ padding: 4px 0;
611
+ }
436
612
 
437
- .ol-wfst--tools-control-btn-select-freehand {
438
- border-left: 0;
439
- border-radius: 0 $borderRadius $borderRadius 0;
440
- }
613
+ .ol-wfst--query-popup-row {
614
+ display: flex;
615
+ gap: 8px;
616
+ padding: 3px 10px;
617
+ word-break: break-word;
441
618
 
442
- .ol-box.ol-wfst--dragbox {
443
- border: 2px dashed #ffc800;
444
- background-color: rgba(255, 200, 0, 0.1);
445
- border-radius: 0;
446
- }
619
+ &:nth-child(odd) {
620
+ background: #fafafa;
621
+ }
622
+ }
447
623
 
448
- .ol-wfst--tools-control-btn-upload {
449
- padding: 3px;
450
- }
451
- .wfst--tools-control--select-draw {
452
- outline: 0;
453
- border: 1px solid #c0c0c0;
454
- border-radius: $borderRadius;
455
- padding: 0 3px;
456
- height: 32px;
457
- background: #f7f7f7;
458
- cursor: pointer;
459
- pointer-events: none;
460
- opacity: 0.5;
461
- vertical-align: middle;
462
- font-size: 0.9em;
463
- border-left: 0;
464
- border-radius: 0 $borderRadius $borderRadius 0;
465
- }
466
- .ol-wfst--tools-control-btn-draw {
467
- border-radius: $borderRadius 0 0 $borderRadius;
468
- opacity: 0.7;
469
- }
470
- .draw-mode .wfst--tools-control--select-draw {
471
- pointer-events: inherit;
472
- opacity: 1;
473
- background: #fffab5;
474
- }
624
+ .ol-wfst--query-popup-key {
625
+ flex: 0 0 35%;
626
+ font-weight: 600;
627
+ color: #555;
628
+ overflow: hidden;
629
+ text-overflow: ellipsis;
630
+ }
475
631
 
476
- #ol-wfst--upload {
477
- display: none;
478
- visibility: hidden;
479
- }
480
- .ol-wfst--tools-control--loading {
481
- display: none;
482
- position: absolute;
483
- top: -10px;
484
- width: 100%;
485
- height: 4px;
486
- overflow: hidden;
487
- background: rgba(0, 0, 0, 0.5);
488
- border-radius: 4px;
489
- box-shadow: 0 0 4px rgb(0 0 0 / 15%);
490
- }
491
- .ol-wfst--tools-control--loading::before {
492
- content: '';
493
- position: absolute;
494
- top: 0;
495
- left: 0;
496
- width: 35%;
497
- height: 100%;
498
- background: $primaryColor;
499
- border-radius: inherit;
500
- animation: ol-wfst-loading-sweep 1.1s ease-in-out infinite;
501
- }
502
- @keyframes ol-wfst-loading-sweep {
503
- 0% {
504
- transform: translateX(-100%);
505
- }
506
- 100% {
507
- transform: translateX(300%);
632
+ .ol-wfst--query-popup-value {
633
+ flex: 1;
634
+ color: #222;
635
+ }
508
636
  }
509
637
  }
510
- .ol-wfst--tools-control--loading.ol-wfst--tools-control--loading-show {
511
- display: block;
512
- }
513
- .ol-wfst--tools-control-visible {
514
- display: inline-block;
515
- position: relative;
516
- z-index: 999;
517
- }
518
- .ol-wfst--tools-control-visible svg {
519
- width: 14px;
520
- height: 14px;
521
- }
522
- .ol-wfst--tools-control-visible-btn {
523
- opacity: 0.6;
524
- cursor: pointer;
525
- }
526
- .ol-wfst--tools-control-visible-btn:hover {
527
- opacity: 0.9;
528
- }
529
-
530
- .ol-wfst--visible-btn-on {
531
- display: none;
532
- }
533
638
 
534
- .ol-wfst--visible-on {
535
- .ol-wfst--visible-btn-on {
536
- display: block;
639
+ // ventana modal que esta fuera del mapa
640
+ .modal {
641
+ .ol-wfst--edit-modal-notice {
642
+ display: flex;
643
+ align-items: center;
644
+ gap: 8px;
645
+ padding: 10px 12px;
646
+ margin-bottom: 12px;
647
+ border: 1px solid #ffc107;
648
+ border-radius: $borderRadius;
649
+ background: #fff8e1;
650
+ color: #6b5300;
651
+ font-size: 13px;
652
+ font-weight: 500;
537
653
  }
538
- .ol-wfst--visible-btn-off {
539
- display: none;
654
+ .ol-wfst--edit-modal-notice-txt {
655
+ flex: 1;
540
656
  }
541
- }
657
+ .ol-wfst--edit-modal-toolbar-btn {
658
+ outline: 0;
659
+ display: inline-flex;
660
+ align-items: center;
661
+ justify-content: center;
662
+ flex: 0 0 auto;
663
+ padding: 0;
664
+ width: 26px;
665
+ height: 26px;
666
+ background: $btnBack;
667
+ border: 1px solid #b3b3b3;
668
+ border-radius: $borderRadius;
669
+ cursor: pointer;
542
670
 
543
- .ol-wfst--visible-btn-off {
544
- display: block;
545
- }
671
+ &:hover {
672
+ background: $btnHover;
673
+ }
674
+ &:active {
675
+ background: $btnBackActive;
676
+ transform: translateY(1px);
677
+ }
546
678
 
547
- .ol-wfst--tools-control-query-cnt {
548
- .ol-wfst--tools-control-btn-query {
549
- border-radius: $borderRadius;
679
+ svg {
680
+ width: 16px;
681
+ height: 16px;
682
+ }
550
683
  }
684
+ .modal-dialog {
685
+ &.ol-wfst--edit-table-modal {
686
+ --bs-modal-width: min(90vw, 1400px);
687
+ width: min(90vw, 1400px);
688
+ max-width: min(90vw, 1400px);
689
+ }
551
690
 
552
- svg {
553
- width: 16px;
554
- height: 16px;
691
+ .btn-danger:first-child {
692
+ margin-right: auto;
693
+ }
555
694
  }
556
- }
557
695
 
558
- .ol-wfst--query-popup {
559
- position: relative;
560
- width: 260px;
561
- max-width: 280px;
562
- background: $btnBack;
563
- border: 1px solid #a9a9a9;
564
- border-radius: $borderRadius;
565
- box-shadow: 0 2px 8px rgb(0 0 0 / 42%);
566
- font-size: 12px;
567
- color: #333;
568
- overflow: hidden;
569
- }
696
+ .ol-wfst--edit-table-wrap {
697
+ overflow-x: auto;
698
+ overflow-y: auto;
699
+ max-height: 60vh;
700
+ border: 1px solid #dddddd;
701
+ border-radius: $borderRadius;
702
+ }
570
703
 
571
- .ol-wfst--query-popup-head {
572
- display: flex;
573
- align-items: center;
574
- justify-content: space-between;
575
- padding: 6px 8px;
576
- background: #f2f2f2;
577
- border-bottom: 1px solid #d9d9d9;
578
- }
704
+ .ol-wfst--edit-table {
705
+ width: 100%;
706
+ border-collapse: collapse;
707
+ font-size: 13px;
708
+
709
+ th,
710
+ td {
711
+ border: 1px solid #dddddd;
712
+ padding: 4px 6px;
713
+ text-align: left;
714
+ vertical-align: middle;
715
+ white-space: nowrap;
716
+ }
579
717
 
580
- .ol-wfst--query-popup-title {
581
- font-weight: 600;
582
- font-size: 12px;
583
- }
718
+ th {
719
+ position: sticky;
720
+ top: 0;
721
+ z-index: 1;
722
+ background: #f2f2f2;
723
+ font-weight: 600;
724
+ }
584
725
 
585
- .ol-wfst--query-popup-close {
586
- outline: 0;
587
- border: 0;
588
- background: transparent;
589
- cursor: pointer;
590
- font-size: 18px;
591
- line-height: 1;
592
- color: #555;
593
- padding: 0 2px;
594
-
595
- &:hover {
596
- color: #000;
726
+ .ol-wfst--input-field-input {
727
+ min-width: 120px;
728
+ padding: 2px 4px;
729
+ border: 0;
730
+ border-radius: 0;
731
+ background: transparent;
732
+
733
+ &:focus {
734
+ outline: 1px solid #86b7fe;
735
+ background: #f8fbff;
736
+ }
737
+ }
597
738
  }
598
- }
599
-
600
- .ol-wfst--query-popup-subtitle {
601
- display: flex;
602
- align-items: center;
603
- justify-content: space-between;
604
- gap: 8px;
605
- padding: 6px 10px;
606
- border-bottom: 1px solid #efefef;
607
-
608
- b {
739
+ .ol-wfst--edit-table-fid,
740
+ .ol-wfst--edit-table-geom {
609
741
  font-weight: 600;
742
+ color: #555;
610
743
  }
611
-
612
- i {
613
- font-style: normal;
614
- font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
615
- font-size: 11px;
744
+ .ol-wfst--edit-table-geom {
745
+ font-style: italic;
746
+ font-size: 12px;
616
747
  color: #777;
617
- max-width: 150px;
618
- overflow: hidden;
619
- text-overflow: ellipsis;
620
- white-space: nowrap;
621
748
  }
622
- }
623
-
624
- .ol-wfst--query-popup-body {
625
- max-height: 220px;
626
- overflow-y: auto;
627
- padding: 4px 0;
628
- }
629
-
630
- .ol-wfst--query-popup-row {
631
- display: flex;
632
- gap: 8px;
633
- padding: 3px 10px;
634
- word-break: break-word;
635
-
636
- &:nth-child(odd) {
637
- background: #fafafa;
749
+ .ol-wfst--input-field-container {
750
+ display: inline-block;
751
+ width: 49%;
752
+ padding: 5px;
753
+ margin-bottom: 10px;
754
+ }
755
+ .ol-wfst--input-field-label {
756
+ display: block;
757
+ font-weight: 500;
758
+ margin-bottom: 4px;
759
+ }
760
+ .ol-wfst--input-field-input {
761
+ width: 100%;
762
+ padding: 5px;
763
+ border: 1px solid black;
764
+ border-radius: 3px;
765
+ }
766
+ .ol-wfst--input-field-input.ol-wfst--input-multiple::placeholder {
767
+ font-style: italic;
768
+ color: #888;
638
769
  }
639
- }
640
-
641
- .ol-wfst--query-popup-key {
642
- flex: 0 0 35%;
643
- font-weight: 600;
644
- color: #555;
645
- overflow: hidden;
646
- text-overflow: ellipsis;
647
- }
648
-
649
- .ol-wfst--query-popup-value {
650
- flex: 1;
651
- color: #222;
652
770
  }