ecomp-portal-FE/client/kpi-dashboard/views/DCAE_DASH/lib/leaflet.css

   1 /*-
   2  * ================================================================================
   3  * eCOMP Portal
   4  * ================================================================================
   5  * Copyright (C) 2017 AT&T Intellectual Property
   6  * ================================================================================
   7  * Licensed under the Apache License, Version 2.0 (the "License");
   8  * you may not use this file except in compliance with the License.
   9  * You may obtain a copy of the License at
  10  *
  11  *      http://www.apache.org/licenses/LICENSE-2.0
  12  *
  13  * Unless required by applicable law or agreed to in writing, software
  14  * distributed under the License is distributed on an "AS IS" BASIS,
  15  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  16  * See the License for the specific language governing permissions and
  17  * limitations under the License.
  18  * ================================================================================
  19  */
  20 /* required styles */
  21
  22 .leaflet-map-pane,
  23 .leaflet-tile,
  24 .leaflet-marker-icon,
  25 .leaflet-marker-shadow,
  26 .leaflet-tile-pane,
  27 .leaflet-tile-container,
  28 .leaflet-overlay-pane,
  29 .leaflet-shadow-pane,
  30 .leaflet-marker-pane,
  31 .leaflet-popup-pane,
  32 .leaflet-overlay-pane svg,
  33 .leaflet-zoom-box,
  34 .leaflet-image-layer,
  35 .leaflet-layer {
  36         position: absolute;
  37         left: 0;
  38         top: 0;
  39         }
  40 .leaflet-container {
  41         overflow: hidden;
  42         -ms-touch-action: none;
  43         }
  44 .leaflet-tile,
  45 .leaflet-marker-icon,
  46 .leaflet-marker-shadow {
  47         -webkit-user-select: none;
  48            -moz-user-select: none;
  49                 user-select: none;
  50         -webkit-user-drag: none;
  51         }
  52 .leaflet-marker-icon,
  53 .leaflet-marker-shadow {
  54         display: block;
  55         }
  56 /* map is broken in FF if you have max-width: 100% on tiles */
  57 .leaflet-container img {
  58         max-width: none !important;
  59         }
  60 /* stupid Android 2 doesn't understand "max-width: none" properly */
  61 .leaflet-container img.leaflet-image-layer {
  62         max-width: 15000px !important;
  63         }
  64 .leaflet-tile {
  65         filter: inherit;
  66         visibility: hidden;
  67         }
  68 .leaflet-tile-loaded {
  69         visibility: inherit;
  70         }
  71 .leaflet-zoom-box {
  72         width: 0;
  73         height: 0;
  74         }
  75 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
  76 .leaflet-overlay-pane svg {
  77         -moz-user-select: none;
  78         }
  79
  80 .leaflet-tile-pane    { z-index: 2; }
  81 .leaflet-objects-pane { z-index: 3; }
  82 .leaflet-overlay-pane { z-index: 4; }
  83 .leaflet-shadow-pane  { z-index: 5; }
  84 .leaflet-marker-pane  { z-index: 6; }
  85 .leaflet-popup-pane   { z-index: 7; }
  86
  87 .leaflet-vml-shape {
  88         width: 1px;
  89         height: 1px;
  90         }
  91 .lvml {
  92         behavior: url(#default#VML);
  93         display: inline-block;
  94         position: absolute;
  95         }
  96
  97
  98 /* control positioning */
  99
 100 .leaflet-control {
 101         position: relative;
 102         z-index: 7;
 103         pointer-events: auto;
 104         }
 105 .leaflet-top,
 106 .leaflet-bottom {
 107         position: absolute;
 108         z-index: 1000;
 109         pointer-events: none;
 110         }
 111 .leaflet-top {
 112         top: 0;
 113         }
 114 .leaflet-right {
 115         right: 0;
 116         }
 117 .leaflet-bottom {
 118         bottom: 0;
 119         }
 120 .leaflet-left {
 121         left: 0;
 122         }
 123 .leaflet-control {
 124         float: left;
 125         clear: both;
 126         }
 127 .leaflet-right .leaflet-control {
 128         float: right;
 129         }
 130 .leaflet-top .leaflet-control {
 131         margin-top: 10px;
 132         }
 133 .leaflet-bottom .leaflet-control {
 134         margin-bottom: 10px;
 135         }
 136 .leaflet-left .leaflet-control {
 137         margin-left: 10px;
 138         }
 139 .leaflet-right .leaflet-control {
 140         margin-right: 10px;
 141         }
 142
 143
 144 /* zoom and fade animations */
 145
 146 .leaflet-fade-anim .leaflet-tile,
 147 .leaflet-fade-anim .leaflet-popup {
 148         opacity: 0;
 149         -webkit-transition: opacity 0.2s linear;
 150            -moz-transition: opacity 0.2s linear;
 151              -o-transition: opacity 0.2s linear;
 152                 transition: opacity 0.2s linear;
 153         }
 154 .leaflet-fade-anim .leaflet-tile-loaded,
 155 .leaflet-fade-anim .leaflet-map-pane .leaflet-popup {
 156         opacity: 1;
 157         }
 158
 159 .leaflet-zoom-anim .leaflet-zoom-animated {
 160         -webkit-transition: -webkit-transform 0.25s cubic-bezier(0,0,0.25,1);
 161            -moz-transition:    -moz-transform 0.25s cubic-bezier(0,0,0.25,1);
 162              -o-transition:      -o-transform 0.25s cubic-bezier(0,0,0.25,1);
 163                 transition:         transform 0.25s cubic-bezier(0,0,0.25,1);
 164         }
 165 .leaflet-zoom-anim .leaflet-tile,
 166 .leaflet-pan-anim .leaflet-tile,
 167 .leaflet-touching .leaflet-zoom-animated {
 168         -webkit-transition: none;
 169            -moz-transition: none;
 170              -o-transition: none;
 171                 transition: none;
 172         }
 173
 174 .leaflet-zoom-anim .leaflet-zoom-hide {
 175         visibility: hidden;
 176         }
 177
 178
 179 /* cursors */
 180
 181 .leaflet-clickable {
 182         cursor: pointer;
 183         }
 184 .leaflet-container {
 185         cursor: -webkit-grab;
 186         cursor:    -moz-grab;
 187         }
 188 .leaflet-popup-pane,
 189 .leaflet-control {
 190         cursor: auto;
 191         }
 192 .leaflet-dragging .leaflet-container,
 193 .leaflet-dragging .leaflet-clickable {
 194         cursor: move;
 195         cursor: -webkit-grabbing;
 196         cursor:    -moz-grabbing;
 197         }
 198
 199
 200 /* visual tweaks */
 201
 202 .leaflet-container {
 203         background: #ddd;
 204         outline: 0;
 205         }
 206 .leaflet-container a {
 207         color: #0078A8;
 208         }
 209 .leaflet-container a.leaflet-active {
 210         outline: 2px solid orange;
 211         }
 212 .leaflet-zoom-box {
 213         border: 2px dotted #38f;
 214         background: rgba(255,255,255,0.5);
 215         }
 216
 217
 218 /* general typography */
 219 .leaflet-container {
 220         font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, sans-serif;
 221         }
 222
 223
 224 /* general toolbar styles */
 225
 226 .leaflet-bar {
 227         box-shadow: 0 1px 5px rgba(0,0,0,0.65);
 228         border-radius: 4px;
 229         }
 230 .leaflet-bar a,
 231 .leaflet-bar a:hover {
 232         background-color: #fff;
 233         border-bottom: 1px solid #ccc;
 234         width: 26px;
 235         height: 26px;
 236         line-height: 26px;
 237         display: block;
 238         text-align: center;
 239         text-decoration: none;
 240         color: black;
 241         }
 242 .leaflet-bar a,
 243 .leaflet-control-layers-toggle {
 244         background-position: 50% 50%;
 245         background-repeat: no-repeat;
 246         display: block;
 247         }
 248 .leaflet-bar a:hover {
 249         background-color: #f4f4f4;
 250         }
 251 .leaflet-bar a:first-child {
 252         border-top-left-radius: 4px;
 253         border-top-right-radius: 4px;
 254         }
 255 .leaflet-bar a:last-child {
 256         border-bottom-left-radius: 4px;
 257         border-bottom-right-radius: 4px;
 258         border-bottom: none;
 259         }
 260 .leaflet-bar a.leaflet-disabled {
 261         cursor: default;
 262         background-color: #f4f4f4;
 263         color: #bbb;
 264         }
 265
 266 .leaflet-touch .leaflet-bar a {
 267         width: 30px;
 268         height: 30px;
 269         line-height: 30px;
 270         }
 271
 272
 273 /* zoom control */
 274
 275 .leaflet-control-zoom-in,
 276 .leaflet-control-zoom-out {
 277         font: bold 18px 'Lucida Console', Monaco, monospace;
 278         text-indent: 1px;
 279         }
 280 .leaflet-control-zoom-out {
 281         font-size: 20px;
 282         }
 283
 284 .leaflet-touch .leaflet-control-zoom-in {
 285         font-size: 22px;
 286         }
 287 .leaflet-touch .leaflet-control-zoom-out {
 288         font-size: 24px;
 289         }
 290
 291
 292 /* layers control */
 293
 294 .leaflet-control-layers {
 295         box-shadow: 0 1px 5px rgba(0,0,0,0.4);
 296         background: #fff;
 297         border-radius: 5px;
 298         }
 299 .leaflet-control-layers-toggle {
 300         background-image: url(images/layers.png);
 301         width: 36px;
 302         height: 36px;
 303         }
 304 .leaflet-retina .leaflet-control-layers-toggle {
 305         background-image: url(images/layers-2x.png);
 306         background-size: 26px 26px;
 307         }
 308 .leaflet-touch .leaflet-control-layers-toggle {
 309         width: 44px;
 310         height: 44px;
 311         }
 312 .leaflet-control-layers .leaflet-control-layers-list,
 313 .leaflet-control-layers-expanded .leaflet-control-layers-toggle {
 314         display: none;
 315         }
 316 .leaflet-control-layers-expanded .leaflet-control-layers-list {
 317         display: block;
 318         position: relative;
 319         }
 320 .leaflet-control-layers-expanded {
 321         padding: 6px 10px 6px 6px;
 322         color: #333;
 323         background: #fff;
 324         }
 325 .leaflet-control-layers-selector {
 326         margin-top: 2px;
 327         position: relative;
 328         top: 1px;
 329         }
 330 .leaflet-control-layers label {
 331         display: block;
 332         }
 333 .leaflet-control-layers-separator {
 334         height: 0;
 335         border-top: 1px solid #ddd;
 336         margin: 5px -10px 5px -6px;
 337         }
 338
 339
 340 /* attribution and scale controls */
 341
 342 .leaflet-container .leaflet-control-attribution {
 343         background: #fff;
 344         background: rgba(255, 255, 255, 0.7);
 345         margin: 0;
 346         }
 347 .leaflet-control-attribution,
 348 .leaflet-control-scale-line {
 349         padding: 0 5px;
 350         color: #333;
 351         }
 352 .leaflet-control-attribution a {
 353         text-decoration: none;
 354         }
 355 .leaflet-control-attribution a:hover {
 356         text-decoration: underline;
 357         }
 358 .leaflet-container .leaflet-control-attribution,
 359 .leaflet-container .leaflet-control-scale {
 360         font-size: 11px;
 361         }
 362 .leaflet-left .leaflet-control-scale {
 363         margin-left: 5px;
 364         }
 365 .leaflet-bottom .leaflet-control-scale {
 366         margin-bottom: 5px;
 367         }
 368 .leaflet-control-scale-line {
 369         border: 2px solid #777;
 370         border-top: none;
 371         line-height: 1.1;
 372         padding: 2px 5px 1px;
 373         font-size: 11px;
 374         white-space: nowrap;
 375         overflow: hidden;
 376         -moz-box-sizing: content-box;
 377              box-sizing: content-box;
 378
 379         background: #fff;
 380         background: rgba(255, 255, 255, 0.5);
 381         }
 382 .leaflet-control-scale-line:not(:first-child) {
 383         border-top: 2px solid #777;
 384         border-bottom: none;
 385         margin-top: -2px;
 386         }
 387 .leaflet-control-scale-line:not(:first-child):not(:last-child) {
 388         border-bottom: 2px solid #777;
 389         }
 390
 391 .leaflet-touch .leaflet-control-attribution,
 392 .leaflet-touch .leaflet-control-layers,
 393 .leaflet-touch .leaflet-bar {
 394         box-shadow: none;
 395         }
 396 .leaflet-touch .leaflet-control-layers,
 397 .leaflet-touch .leaflet-bar {
 398         border: 2px solid rgba(0,0,0,0.2);
 399         background-clip: padding-box;
 400         }
 401
 402
 403 /* popup */
 404
 405 .leaflet-popup {
 406         position: absolute;
 407         text-align: center;
 408         }
 409 .leaflet-popup-content-wrapper {
 410         padding: 1px;
 411         text-align: left;
 412         border-radius: 12px;
 413         }
 414 .leaflet-popup-content {
 415         margin: 13px 19px;
 416         line-height: 1.4;
 417         }
 418 .leaflet-popup-content p {
 419         margin: 18px 0;
 420         }
 421 .leaflet-popup-tip-container {
 422         margin: 0 auto;
 423         width: 40px;
 424         height: 20px;
 425         position: relative;
 426         overflow: hidden;
 427         }
 428 .leaflet-popup-tip {
 429         width: 17px;
 430         height: 17px;
 431         padding: 1px;
 432
 433         margin: -10px auto 0;
 434
 435         -webkit-transform: rotate(45deg);
 436            -moz-transform: rotate(45deg);
 437             -ms-transform: rotate(45deg);
 438              -o-transform: rotate(45deg);
 439                 transform: rotate(45deg);
 440         }
 441 .leaflet-popup-content-wrapper,
 442 .leaflet-popup-tip {
 443         background: white;
 444
 445         box-shadow: 0 3px 14px rgba(0,0,0,0.4);
 446         }
 447 .leaflet-container a.leaflet-popup-close-button {
 448         position: absolute;
 449         top: 0;
 450         right: 0;
 451         padding: 4px 4px 0 0;
 452         text-align: center;
 453         width: 18px;
 454         height: 14px;
 455         font: 16px/14px Tahoma, Verdana, sans-serif;
 456         color: #c3c3c3;
 457         text-decoration: none;
 458         font-weight: bold;
 459         background: transparent;
 460         }
 461 .leaflet-container a.leaflet-popup-close-button:hover {
 462         color: #999;
 463         }
 464 .leaflet-popup-scrolled {
 465         overflow: auto;
 466         border-bottom: 1px solid #ddd;
 467         border-top: 1px solid #ddd;
 468         }
 469
 470 .leaflet-oldie .leaflet-popup-content-wrapper {
 471         zoom: 1;
 472         }
 473 .leaflet-oldie .leaflet-popup-tip {
 474         width: 24px;
 475         margin: 0 auto;
 476
 477         -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678)";
 478         filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678);
 479         }
 480 .leaflet-oldie .leaflet-popup-tip-container {
 481         margin-top: -1px;
 482         }
 483
 484 .leaflet-oldie .leaflet-control-zoom,
 485 .leaflet-oldie .leaflet-control-layers,
 486 .leaflet-oldie .leaflet-popup-content-wrapper,
 487 .leaflet-oldie .leaflet-popup-tip {
 488         border: 1px solid #999;
 489         }
 490
 491
 492 /* div icon */
 493
 494 .leaflet-div-icon {
 495         background: #fff;
 496         border: 1px solid #666;
 497         }