@antv/l7-component 2.22.7 → 2.23.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.
Files changed (3) hide show
  1. package/es/index.js +28 -150
  2. package/lib/index.js +28 -150
  3. package/package.json +5 -5
package/es/index.js CHANGED
@@ -38,7 +38,6 @@ loadStyles(`.l7-marker-container {
38
38
  height: 100%;
39
39
  overflow: hidden;
40
40
  }
41
-
42
41
  .l7-marker {
43
42
  position: absolute !important;
44
43
  top: 0;
@@ -46,15 +45,13 @@ loadStyles(`.l7-marker-container {
46
45
  z-index: 5;
47
46
  cursor: pointer;
48
47
  }
49
-
50
48
  .l7-marker-cluster {
51
49
  width: 40px;
52
50
  height: 40px;
53
- background-color: rgb(181 226 140 / 60%);
51
+ background-color: rgba(181, 226, 140, 0.6);
54
52
  background-clip: padding-box;
55
53
  border-radius: 20px;
56
54
  }
57
-
58
55
  .l7-marker-cluster div {
59
56
  width: 30px;
60
57
  height: 30px;
@@ -66,31 +63,26 @@ loadStyles(`.l7-marker-container {
66
63
  Helvetica,
67
64
  sans-serif;
68
65
  text-align: center;
69
- background-color: rgb(110 204 57 / 60%);
66
+ background-color: rgba(110, 204, 57, 0.6);
70
67
  border-radius: 15px;
71
68
  }
72
-
73
69
  .l7-marker-cluster span {
74
70
  line-height: 30px;
75
71
  }
76
-
77
72
  .l7-touch .l7-control-attribution,
78
73
  .l7-touch .l7-control-layers,
79
74
  .l7-touch .l7-bar {
80
75
  box-shadow: none;
81
76
  }
82
-
83
77
  .l7-touch .l7-control-layers,
84
78
  .l7-touch .l7-bar {
85
79
  background-clip: padding-box;
86
- border: 2px solid rgb(0 0 0 / 20%);
80
+ border: 2px solid rgba(0, 0, 0, 0.2);
87
81
  }
88
-
89
82
  .mapboxgl-ctrl-logo,
90
83
  .amap-logo {
91
84
  display: none !important;
92
85
  }
93
-
94
86
  .l7-select-box {
95
87
  border: 3px dashed gray;
96
88
  border-radius: 2px;
@@ -98,7 +90,6 @@ loadStyles(`.l7-marker-container {
98
90
  z-index: 999;
99
91
  box-sizing: border-box;
100
92
  }
101
-
102
93
  .l7-control-container {
103
94
  font:
104
95
  12px/1.5 'Helvetica Neue',
@@ -106,7 +97,6 @@ loadStyles(`.l7-marker-container {
106
97
  Helvetica,
107
98
  sans-serif;
108
99
  }
109
-
110
100
  .l7-control-container .l7-control {
111
101
  position: relative;
112
102
  z-index: 999;
@@ -114,16 +104,13 @@ loadStyles(`.l7-marker-container {
114
104
  clear: both;
115
105
  color: #595959;
116
106
  font-size: 12px;
117
- pointer-events: visiblepainted;
118
-
107
+ pointer-events: visiblePainted;
119
108
  /* IE 9-10 doesn't have auto */
120
109
  pointer-events: auto;
121
110
  }
122
-
123
111
  .l7-control-container .l7-control.l7-control--hide {
124
112
  display: none;
125
113
  }
126
-
127
114
  .l7-control-container .l7-top {
128
115
  top: 0;
129
116
  display: flex;
@@ -131,11 +118,9 @@ loadStyles(`.l7-marker-container {
131
118
  z-index: 999;
132
119
  pointer-events: none;
133
120
  }
134
-
135
121
  .l7-control-container .l7-top .l7-control:not(.l7-control--hide) {
136
122
  margin-top: 8px;
137
123
  }
138
-
139
124
  .l7-control-container .l7-right {
140
125
  right: 0;
141
126
  display: flex;
@@ -143,11 +128,9 @@ loadStyles(`.l7-marker-container {
143
128
  z-index: 999;
144
129
  pointer-events: none;
145
130
  }
146
-
147
131
  .l7-control-container .l7-right .l7-control:not(.l7-control--hide) {
148
132
  margin-right: 8px;
149
133
  }
150
-
151
134
  .l7-control-container .l7-bottom {
152
135
  bottom: 0;
153
136
  display: flex;
@@ -155,11 +138,9 @@ loadStyles(`.l7-marker-container {
155
138
  z-index: 999;
156
139
  pointer-events: none;
157
140
  }
158
-
159
141
  .l7-control-container .l7-bottom .l7-control:not(.l7-control--hide) {
160
142
  margin-bottom: 8px;
161
143
  }
162
-
163
144
  .l7-control-container .l7-left {
164
145
  left: 0;
165
146
  display: flex;
@@ -167,56 +148,44 @@ loadStyles(`.l7-marker-container {
167
148
  z-index: 999;
168
149
  pointer-events: none;
169
150
  }
170
-
171
151
  .l7-control-container .l7-left .l7-control:not(.l7-control--hide) {
172
152
  margin-left: 8px;
173
153
  }
174
-
175
154
  .l7-control-container .l7-center {
176
155
  position: absolute;
177
156
  display: flex;
178
157
  justify-content: center;
179
158
  }
180
-
181
159
  .l7-control-container .l7-center.l7-top,
182
160
  .l7-control-container .l7-center.l7-bottom {
183
161
  width: 100%;
184
162
  }
185
-
186
163
  .l7-control-container .l7-center.l7-left,
187
164
  .l7-control-container .l7-center.l7-right {
188
165
  height: 100%;
189
166
  }
190
-
191
167
  .l7-control-container .l7-center .l7-control {
192
168
  margin-right: 8px;
193
169
  margin-bottom: 8px;
194
170
  }
195
-
196
171
  .l7-control-container .l7-row {
197
172
  flex-direction: row;
198
173
  }
199
-
200
174
  .l7-control-container .l7-row.l7-top {
201
175
  align-items: flex-start;
202
176
  }
203
-
204
177
  .l7-control-container .l7-row.l7-bottom {
205
178
  align-items: flex-end;
206
179
  }
207
-
208
180
  .l7-control-container .l7-column {
209
181
  flex-direction: column;
210
182
  }
211
-
212
183
  .l7-control-container .l7-column.l7-left {
213
184
  align-items: flex-start;
214
185
  }
215
-
216
186
  .l7-control-container .l7-column.l7-right {
217
187
  align-items: flex-end;
218
188
  }
219
-
220
189
  .l7-button-control {
221
190
  min-width: 28px;
222
191
  height: 28px;
@@ -230,68 +199,55 @@ loadStyles(`.l7-marker-container {
230
199
  justify-content: center;
231
200
  align-items: center;
232
201
  padding: 0 6px;
233
- box-shadow: 0 0 20px 0 rgb(0 0 0 / 15%);
202
+ box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
234
203
  line-height: 16px;
235
204
  }
236
-
237
205
  .l7-button-control .l7-iconfont {
238
206
  fill: #595959;
239
207
  color: #595959;
240
208
  width: 16px;
241
209
  height: 16px;
242
210
  }
243
-
244
211
  .l7-button-control.l7-button-control--row {
245
212
  padding: 0 16px 0 13px;
246
213
  }
247
-
248
214
  .l7-button-control.l7-button-control--row * + .l7-button-control__text {
249
215
  margin-left: 8px;
250
216
  }
251
-
252
217
  .l7-button-control.l7-button-control--column {
253
218
  height: 44px;
254
219
  flex-direction: column;
255
220
  }
256
-
257
221
  .l7-button-control.l7-button-control--column .l7-iconfont {
258
222
  margin-top: 3px;
259
223
  }
260
-
261
224
  .l7-button-control.l7-button-control--column .l7-button-control__text {
262
225
  margin-top: 3px;
263
226
  font-size: 10px;
264
227
  -webkit-transform: scale(0.83333);
265
228
  transform: scale(0.83333);
266
229
  }
267
-
268
230
  .l7-button-control:not(:disabled):hover {
269
231
  background-color: #f3f3f3;
270
232
  }
271
-
272
233
  .l7-button-control:not(:disabled):active {
273
234
  background-color: #f3f3f3;
274
235
  }
275
-
276
236
  .l7-button-control:disabled {
277
237
  background-color: #fafafa;
278
238
  color: #bdbdbd;
279
239
  cursor: not-allowed;
280
240
  }
281
-
282
241
  .l7-button-control:disabled .l7-iconfont {
283
242
  fill: #bdbdbd;
284
243
  color: #bdbdbd;
285
244
  }
286
-
287
245
  .l7-button-control:disabled:hover {
288
246
  background-color: #fafafa;
289
247
  }
290
-
291
248
  .l7-button-control:disabled:active {
292
249
  background-color: #fafafa;
293
250
  }
294
-
295
251
  .l7-popper {
296
252
  position: absolute;
297
253
  display: flex;
@@ -300,75 +256,63 @@ loadStyles(`.l7-marker-container {
300
256
  z-index: 5;
301
257
  color: #595959;
302
258
  }
303
-
304
259
  .l7-popper.l7-popper-hide {
305
260
  display: none;
306
261
  }
307
-
308
262
  .l7-popper .l7-popper-content {
309
263
  min-height: 28px;
310
264
  background: #fff;
311
265
  border-radius: 2px;
312
- box-shadow: 0 0 20px 0 rgb(0 0 0 / 15%);
266
+ box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
313
267
  }
314
-
315
268
  .l7-popper .l7-popper-arrow {
316
269
  width: 0;
317
270
  height: 0;
318
271
  border-width: 4px;
319
272
  border-style: solid;
320
- border-color: transparent;
321
- box-shadow: 0 0 20px 0 rgb(0 0 0 / 15%);
273
+ border-top-color: transparent;
274
+ border-bottom-color: transparent;
275
+ border-left-color: transparent;
276
+ border-right-color: transparent;
277
+ box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
322
278
  }
323
-
324
279
  .l7-popper.l7-popper-left {
325
280
  flex-direction: row;
326
281
  }
327
-
328
282
  .l7-popper.l7-popper-left .l7-popper-arrow {
329
283
  border-left-color: #fff;
330
284
  margin: 10px 0;
331
285
  }
332
-
333
286
  .l7-popper.l7-popper-right {
334
287
  flex-direction: row-reverse;
335
288
  }
336
-
337
289
  .l7-popper.l7-popper-right .l7-popper-arrow {
338
290
  border-right-color: #fff;
339
291
  margin: 10px 0;
340
292
  }
341
-
342
293
  .l7-popper.l7-popper-top {
343
294
  flex-direction: column;
344
295
  }
345
-
346
296
  .l7-popper.l7-popper-top .l7-popper-arrow {
347
297
  border-top-color: #fff;
348
298
  margin: 0 10px;
349
299
  }
350
-
351
300
  .l7-popper.l7-popper-bottom {
352
301
  flex-direction: column-reverse;
353
302
  }
354
-
355
303
  .l7-popper.l7-popper-bottom .l7-popper-arrow {
356
304
  border-bottom-color: #fff;
357
305
  margin: 0 10px;
358
306
  }
359
-
360
307
  .l7-popper.l7-popper-start {
361
308
  align-items: flex-start;
362
309
  }
363
-
364
310
  .l7-popper.l7-popper-end {
365
311
  align-items: flex-end;
366
312
  }
367
-
368
313
  .l7-select-control--normal {
369
314
  padding: 4px 0;
370
315
  }
371
-
372
316
  .l7-select-control--normal .l7-select-control-item {
373
317
  display: flex;
374
318
  align-items: center;
@@ -377,20 +321,16 @@ loadStyles(`.l7-marker-container {
377
321
  font-size: 12px;
378
322
  line-height: 24px;
379
323
  }
380
-
381
324
  .l7-select-control--normal .l7-select-control-item > * + * {
382
325
  margin-left: 6px;
383
326
  }
384
-
385
327
  .l7-select-control--normal .l7-select-control-item input[type='checkbox'] {
386
328
  width: 14px;
387
329
  height: 14px;
388
330
  }
389
-
390
331
  .l7-select-control--normal .l7-select-control-item:hover {
391
332
  background-color: #f3f3f3;
392
333
  }
393
-
394
334
  .l7-select-control--image {
395
335
  display: flex;
396
336
  flex-wrap: wrap;
@@ -399,9 +339,9 @@ loadStyles(`.l7-marker-container {
399
339
  max-width: 460px;
400
340
  max-height: 400px;
401
341
  margin: 12px 0 0 12px;
402
- overflow: hidden auto;
342
+ overflow-x: hidden;
343
+ overflow-y: auto;
403
344
  }
404
-
405
345
  .l7-select-control--image .l7-select-control-item {
406
346
  position: relative;
407
347
  display: flex;
@@ -416,46 +356,37 @@ loadStyles(`.l7-marker-container {
416
356
  border: 1px solid #fff;
417
357
  border-radius: 2px;
418
358
  }
419
-
420
359
  .l7-select-control--image .l7-select-control-item img {
421
360
  width: 100%;
422
361
  height: 80px;
423
362
  }
424
-
425
363
  .l7-select-control--image .l7-select-control-item input[type='checkbox'] {
426
364
  position: absolute;
427
365
  top: 0;
428
366
  right: 0;
429
367
  }
430
-
431
368
  .l7-select-control--image .l7-select-control-item .l7-select-control-item-row {
432
369
  display: flex;
433
370
  align-items: center;
434
371
  justify-content: center;
435
372
  line-height: 26px;
436
373
  }
437
-
438
374
  .l7-select-control--image .l7-select-control-item .l7-select-control-item-row > * + * {
439
375
  margin-left: 8px;
440
376
  }
441
-
442
377
  .l7-select-control--image .l7-select-control-item.l7-select-control-item-active {
443
378
  border-color: #0370fe;
444
379
  }
445
-
446
380
  .l7-select-control-item {
447
381
  cursor: pointer;
448
382
  }
449
-
450
383
  .l7-select-control-item input[type='checkbox'] {
451
384
  margin: 0;
452
385
  cursor: pointer;
453
386
  }
454
-
455
387
  .l7-select-control--multiple .l7-select-control-item:hover {
456
388
  background-color: transparent;
457
389
  }
458
-
459
390
  .l7-control-logo {
460
391
  width: 89px;
461
392
  height: 16px;
@@ -464,65 +395,53 @@ loadStyles(`.l7-marker-container {
464
395
  -ms-user-select: none;
465
396
  user-select: none;
466
397
  }
467
-
468
398
  .l7-control-logo img {
469
399
  height: 100%;
470
400
  width: 100%;
471
401
  }
472
-
473
402
  .l7-control-logo .l7-control-logo-link {
474
403
  display: block;
475
404
  cursor: pointer;
476
405
  }
477
-
478
406
  .l7-control-logo .l7-control-logo-link img {
479
407
  cursor: pointer;
480
408
  }
481
-
482
409
  .l7-control-mouse-location {
483
410
  background-color: #fff;
484
411
  border-radius: 2px;
485
- box-shadow: 0 0 20px 0 rgb(0 0 0 / 15%);
412
+ box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
486
413
  padding: 2px 4px;
487
414
  min-width: 130px;
488
415
  }
489
-
490
416
  .l7-control-zoom {
491
417
  overflow: hidden;
492
418
  border-radius: 2px;
493
- box-shadow: 0 0 20px 0 rgb(0 0 0 / 15%);
419
+ box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
494
420
  }
495
-
496
421
  .l7-control-zoom .l7-button-control {
497
422
  font-size: 16px;
498
423
  border-bottom: 1px solid #f0f0f0;
499
424
  border-radius: 0;
500
425
  box-shadow: 0 0 0;
501
426
  }
502
-
503
427
  .l7-control-zoom .l7-button-control .l7-iconfont {
504
428
  width: 14px;
505
429
  height: 14px;
506
430
  }
507
-
508
431
  .l7-control-zoom .l7-button-control:last-child {
509
432
  border-bottom: 0;
510
433
  }
511
-
512
434
  .l7-control-zoom .l7-control-zoom__number {
513
435
  color: #595959;
514
436
  padding: 0;
515
437
  }
516
-
517
438
  .l7-control-zoom .l7-control-zoom__number:hover {
518
439
  background-color: #fff;
519
440
  }
520
-
521
441
  .l7-control-scale {
522
442
  display: flex;
523
443
  flex-direction: column;
524
444
  }
525
-
526
445
  .l7-control-scale .l7-control-scale-line {
527
446
  box-sizing: border-box;
528
447
  padding: 2px 5px 1px;
@@ -536,22 +455,18 @@ loadStyles(`.l7-marker-container {
536
455
  border-top: 0;
537
456
  transition: width 0.1s;
538
457
  }
539
-
540
458
  .l7-control-scale .l7-control-scale-line + .l7-control-scale .l7-control-scale-line {
541
459
  margin-top: -2px;
542
460
  border-top: 2px solid #777;
543
461
  border-bottom: none;
544
462
  }
545
-
546
463
  .l7-right .l7-control-scale {
547
464
  display: flex;
548
465
  align-items: flex-end;
549
466
  }
550
-
551
467
  .l7-right .l7-control-scale .l7-control-scale-line {
552
468
  text-align: right;
553
469
  }
554
-
555
470
  .l7-popup {
556
471
  position: absolute;
557
472
  top: 0;
@@ -561,25 +476,21 @@ loadStyles(`.l7-marker-container {
561
476
  will-change: transform;
562
477
  pointer-events: none;
563
478
  }
564
-
565
479
  .l7-popup.l7-popup-hide {
566
480
  display: none;
567
481
  }
568
-
569
482
  .l7-popup .l7-popup-content {
570
483
  position: relative;
571
484
  padding: 16px;
572
485
  font-size: 14px;
573
486
  background: #fff;
574
487
  border-radius: 3px;
575
- box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
488
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
576
489
  }
577
-
578
490
  .l7-popup .l7-popup-content .l7-popup-content__title {
579
491
  margin-bottom: 8px;
580
492
  font-weight: bold;
581
493
  }
582
-
583
494
  .l7-popup .l7-popup-content .l7-popup-close-button,
584
495
  .l7-popup .l7-popup-content .l7-popup-content__title,
585
496
  .l7-popup .l7-popup-content .l7-popup-content__panel {
@@ -590,7 +501,6 @@ loadStyles(`.l7-marker-container {
590
501
  user-select: text;
591
502
  pointer-events: initial;
592
503
  }
593
-
594
504
  .l7-popup .l7-popup-content .l7-popup-close-button {
595
505
  position: absolute;
596
506
  top: 0;
@@ -606,7 +516,6 @@ loadStyles(`.l7-marker-container {
606
516
  border-radius: 0 3px 0 0;
607
517
  cursor: pointer;
608
518
  }
609
-
610
519
  .l7-popup .l7-popup-tip {
611
520
  position: relative;
612
521
  z-index: 1;
@@ -614,113 +523,93 @@ loadStyles(`.l7-marker-container {
614
523
  height: 0;
615
524
  border: 10px solid transparent;
616
525
  }
617
-
618
526
  .l7-popup.l7-popup-anchor-bottom,
619
527
  .l7-popup.l7-popup-anchor-bottom-left,
620
528
  .l7-popup.l7-popup-anchor-bottom-right {
621
529
  flex-direction: column-reverse;
622
530
  }
623
-
624
531
  .l7-popup.l7-popup-anchor-bottom .l7-popup-tip,
625
532
  .l7-popup.l7-popup-anchor-bottom-left .l7-popup-tip,
626
533
  .l7-popup.l7-popup-anchor-bottom-right .l7-popup-tip {
627
534
  bottom: 1px;
628
535
  }
629
-
630
536
  .l7-popup.l7-popup-anchor-top,
631
537
  .l7-popup.l7-popup-anchor-top-left,
632
538
  .l7-popup.l7-popup-anchor-top-right {
633
539
  flex-direction: column;
634
540
  }
635
-
636
541
  .l7-popup.l7-popup-anchor-top .l7-popup-tip,
637
542
  .l7-popup.l7-popup-anchor-top-left .l7-popup-tip,
638
543
  .l7-popup.l7-popup-anchor-top-right .l7-popup-tip {
639
544
  top: 1px;
640
545
  }
641
-
642
546
  .l7-popup.l7-popup-anchor-left {
643
547
  flex-direction: row;
644
548
  }
645
-
646
549
  .l7-popup.l7-popup-anchor-right {
647
550
  flex-direction: row-reverse;
648
551
  }
649
-
650
552
  .l7-popup-anchor-top .l7-popup-tip {
651
553
  position: relative;
652
554
  align-self: center;
653
555
  border-top: none;
654
556
  border-bottom-color: #fff;
655
557
  }
656
-
657
558
  .l7-popup-anchor-top-left .l7-popup-tip {
658
559
  align-self: flex-start;
659
560
  border-top: none;
660
561
  border-bottom-color: #fff;
661
562
  border-left: none;
662
563
  }
663
-
664
564
  .l7-popup-anchor-top-right .l7-popup-tip {
665
565
  align-self: flex-end;
666
566
  border-top: none;
667
567
  border-right: none;
668
568
  border-bottom-color: #fff;
669
569
  }
670
-
671
570
  .l7-popup-anchor-bottom .l7-popup-tip {
672
571
  align-self: center;
673
572
  border-top-color: #fff;
674
573
  border-bottom: none;
675
574
  }
676
-
677
575
  .l7-popup-anchor-bottom-left .l7-popup-tip {
678
576
  align-self: flex-start;
679
577
  border-top-color: #fff;
680
578
  border-bottom: none;
681
579
  border-left: none;
682
580
  }
683
-
684
581
  .l7-popup-anchor-bottom-right .l7-popup-tip {
685
582
  align-self: flex-end;
686
583
  border-top-color: #fff;
687
584
  border-right: none;
688
585
  border-bottom: none;
689
586
  }
690
-
691
587
  .l7-popup-anchor-left .l7-popup-tip {
692
588
  align-self: center;
693
589
  border-right-color: #fff;
694
590
  border-left: none;
695
591
  }
696
-
697
592
  .l7-popup-anchor-right .l7-popup-tip {
698
593
  right: 1px;
699
594
  align-self: center;
700
595
  border-right: none;
701
596
  border-left-color: #fff;
702
597
  }
703
-
704
598
  .l7-popup-anchor-top-left .l7-popup-content {
705
599
  border-top-left-radius: 0;
706
600
  }
707
-
708
601
  .l7-popup-anchor-top-right .l7-popup-content {
709
602
  border-top-right-radius: 0;
710
603
  }
711
-
712
604
  .l7-popup-anchor-bottom-left .l7-popup-content {
713
605
  border-bottom-left-radius: 0;
714
606
  }
715
-
716
607
  .l7-popup-anchor-bottom-right .l7-popup-content {
717
608
  border-bottom-right-radius: 0;
718
609
  }
719
-
720
610
  .l7-popup-track-pointer {
721
611
  display: none;
722
612
  }
723
-
724
613
  .l7-popup-track-pointer * {
725
614
  -webkit-user-select: none;
726
615
  -moz-user-select: none;
@@ -728,23 +617,18 @@ loadStyles(`.l7-marker-container {
728
617
  user-select: none;
729
618
  pointer-events: none;
730
619
  }
731
-
732
620
  .l7-map:hover .l7-popup-track-pointer {
733
621
  display: flex;
734
622
  }
735
-
736
623
  .l7-map:active .l7-popup-track-pointer {
737
624
  display: none;
738
625
  }
739
-
740
626
  .l7-layer-popup__row {
741
627
  font-size: 12px;
742
628
  }
743
-
744
629
  .l7-layer-popup__row + .l7-layer-popup__row {
745
630
  margin-top: 4px;
746
631
  }
747
-
748
632
  .l7-control-swipe {
749
633
  position: absolute;
750
634
  top: 50%;
@@ -754,12 +638,10 @@ loadStyles(`.l7-marker-container {
754
638
  transform: translate(-50%, -50%);
755
639
  touch-action: none;
756
640
  }
757
-
758
641
  .l7-control-swipe_hide {
759
642
  display: none;
760
643
  }
761
-
762
- .l7-control-swipe::before {
644
+ .l7-control-swipe:before {
763
645
  position: absolute;
764
646
  top: -5000px;
765
647
  bottom: -5000px;
@@ -771,13 +653,14 @@ loadStyles(`.l7-marker-container {
771
653
  transform: translate(-2px, 0);
772
654
  content: '';
773
655
  }
774
-
775
- .l7-control-swipe.horizontal::before {
776
- inset: 50% -5000px auto;
656
+ .l7-control-swipe.horizontal:before {
657
+ top: 50%;
658
+ right: -5000px;
659
+ bottom: auto;
660
+ left: -5000px;
777
661
  width: auto;
778
662
  height: 4px;
779
663
  }
780
-
781
664
  .l7-control-swipe__button {
782
665
  display: block;
783
666
  width: 28px;
@@ -794,37 +677,32 @@ loadStyles(`.l7-marker-container {
794
677
  border-radius: 2px;
795
678
  outline: none;
796
679
  }
797
-
798
680
  .l7-control-swipe,
799
681
  .l7-control-swipe__button {
800
682
  cursor: ew-resize;
801
683
  }
802
-
803
684
  .l7-control-swipe.horizontal,
804
685
  .l7-control-swipe.horizontal button {
805
686
  cursor: ns-resize;
806
687
  }
807
-
808
- .l7-control-swipe::after,
809
- .l7-control-swipe__button::before,
810
- .l7-control-swipe__button::after {
688
+ .l7-control-swipe:after,
689
+ .l7-control-swipe__button:before,
690
+ .l7-control-swipe__button:after {
811
691
  position: absolute;
812
692
  top: 25%;
813
693
  bottom: 25%;
814
694
  left: 50%;
815
695
  width: 2px;
816
- background: currentcolor;
696
+ background: currentColor;
817
697
  -webkit-transform: translate(-1px, 0);
818
698
  transform: translate(-1px, 0);
819
699
  content: '';
820
700
  }
821
-
822
- .l7-control-swipe__button::after {
701
+ .l7-control-swipe__button:after {
823
702
  -webkit-transform: translateX(4px);
824
703
  transform: translateX(4px);
825
704
  }
826
-
827
- .l7-control-swipe__button::before {
705
+ .l7-control-swipe__button:before {
828
706
  -webkit-transform: translateX(-6px);
829
707
  transform: translateX(-6px);
830
708
  }