@antv/l7-component 2.22.4 → 2.22.6

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