2gis-maps/src/DGCustomization/skin/basic/less/dg-customization.less

Interactive 2GIS maps API, based on Leaflet

.dg-customization__marker {
    background-repeat: no-repeat;

    &:before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-image: inherit;
        background-size: contain;
        background-repeat: no-repeat;
        transition: opacity ease-in-out .2s, transform ease-in-out .2s;
        transform: scale(1, 1);
        transform-origin: 50% 100%;
    }
}

.dg-customization__marker_type_mushroom {
    .notRepeatableBgWithSizes('DGCustomization__marker', true);
    transform-origin: 50% 100%;
    animation: dg-customization__show-marker .2s;

    &:focus {
        outline: 0;
    }

    .no-touch &:hover {
        .notRepeatableBg('DGCustomization__markerHover', true);
    }

    &:active,
    .no-touch &:active {
        .notRepeatableBg('DGCustomization__markerActive', true);
    }
}

@keyframes dg-customization__show-marker {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.dg-customization__marker_appear {
    background-position: 999px;

    &:before {
        content: '';
    }
}

.dg-customization__marker_disappear {
    background-position: 999px;
    pointer-events: none;

    &:before {
        visibility: hidden;
        content: '';
        opacity: 0;
        transform: scale(1.2, 1.8);
        animation: dg-customization__marker-to-callout .2s;
    }
}

@keyframes dg-customization__marker-to-callout {
    0% {
        visibility: visible;
        opacity: 1;
        transform: scale(1, 1);
    }
    100% {
        visibility: visible;
        opacity: 0;
        transform: scale(1.2, 1.8);
    }
}

.dg-dragging-false {
    touch-action: auto;
    -ms-touch-action: auto;
}