org.wicketstuff.openlayers3.component.Marker.css Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of wicketstuff-openlayers3-bootstrap4 Show documentation
Openlayer3 components that leverage Wicket Bootstrap
The newest version!
div.marker .pin {
    width: 30px;
    height: 30px;
    border-radius: 50% 50% 50% 0;
    position: absolute;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    left: 50%;
    top: 50%;
    margin: -20px 0 0 -20px;
    z-index: 501;
}

div.marker .pin:after {
    content: "";
    width: 14px;
    height: 14px;
    margin: 8px 0 0 8px;
    background: white;
    position: absolute;
    border-radius: 50%;
}

div.marker .bounce {
    animation-name: bounce;
    animation-fill-mode: both;
    animation-duration: 1s;
    -webkit-animation-name: bounce;
    -webkit-animation-fill-mode: both;
    -webkit-animation-duration: 1s;
}

div.marker .pulse {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    height: 14px;
    width: 14px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: 11px 0px 0px -12px;
    transform: rotateX(55deg);
    -webkit-transform: rotateX(55deg);
    z-index: 500;
}

div.marker .pulse:after {
    content: "";
    border-radius: 50%;
    height: 40px;
    width: 40px;
    position: absolute;
    margin: -13px 0 0 -13px;
    animation: pulsate 1s ease-out;
    animation-iteration-count: infinite;
    animation-delay: 1.1s;
    -webkit-animation: pulsate 1s ease-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-delay: 1.1s;
    opacity: 0;
    box-shadow: 0 0 1px 2px #89849b;
}

@keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        -webkit-transform: scale(0.1, 0.1);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0;
    }
}

@-webkit-keyframes pulsate {
    0% {
        transform: scale(0.1, 0.1);
        -webkit-transform: scale(0.1, 0.1);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2, 1.2);
        -webkit-transform: scale(1.2, 1.2);
        opacity: 0;
    }
}

@keyframes bounce {
    0% {
        opacity: 0;
        transform: translateY(-2000px) rotate(-45deg);
        -webkit-transform: translateY(-2000px) rotate(-45deg);
    }

    60% {
        opacity: 1;
        transform: translateY(30px) rotate(-45deg);
        -webkit-transform: translateY(30px) rotate(-45deg);
    }

    80% {
        transform: translateY(-10px) rotate(-45deg);
        -webkit-transform: translateY(-10px) rotate(-45deg);
    }

    100% {
        transform: translateY(0) rotate(-45deg);
        -webkit-transform: translateY(0) rotate(-45deg);
    }
}

@-webkit-keyframes bounce {
    0% {
        opacity: 0;
        transform: translateY(-2000px) rotate(-45deg);
        -webkit-transform: translateY(-2000px) rotate(-45deg);
    }

    60% {
        opacity: 1;
        transform: translateY(30px) rotate(-45deg);
        -webkit-transform: translateY(30px) rotate(-45deg);
    }

    80% {
        transform: translateY(-10px) rotate(-45deg);
        -webkit-transform: translateY(-10px) rotate(-45deg);
    }

    100% {
        transform: translateY(0) rotate(-45deg);
        -webkit-transform: translateY(0) rotate(-45deg);
    }
}

.popover-body {
    min-width: 200px;
}