gaf-mobile/app/styles/modules/onboarding-overlay-proposals.less

GAF mobile Web site

@import (reference) '../libs/mixins';
@import (reference) '../themes/variables';

// Bid proposals onboarding overlay

.proposal-overlay {

    // Overlay animation classes
    .proposal-animation-finger,
    .proposal-animation-screen01,
    .proposal-animation-screen02 {
        position: absolute;
        width: 120px;
        top: 0;
        bottom: 0;
        margin-top: auto;
        margin-bottom: auto;
        padding: 3px;
        padding-top: 20px;
        stroke: @text-color-dark;
        stroke-width: 3px;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
    }

    .proposal-animation-finger {
        z-index: 1;
        -webkit-animation: animation-finger linear 1.8s infinite;
        -moz-animation:    animation-finger linear 1.8s infinite;
        animation:         animation-finger linear 1.8s infinite;
        .proposal-animation-finger-fill {
            fill: @septenary-color-xxxlight;
        }
    }

    .proposal-animation-screen01 {
        height: 120px;
        -webkit-animation: animation-screen01 linear 1.8s infinite;
        -moz-animation:    animation-screen01 linear 1.8s infinite;
        animation:         animation-screen01 linear 1.8s infinite;
    }

    .proposal-animation-screen01-stroke {
        -webkit-animation: animation-screen01-stroke linear 1.8s infinite;
        -moz-animation:    animation-screen01-stroke linear 1.8s infinite;
        animation:         animation-screen01-stroke linear 1.8s infinite;
    }

    .proposal-animation-screen02 {
        height: 120px;
        -webkit-animation: animation-screen02 linear 1.8s infinite;
        -moz-animation:    animation-screen02 linear 1.8s infinite;
        animation:         animation-screen02 linear 1.8s infinite;
    }
}


// Animation Finger
@-webkit-keyframes animation-finger {
    0% {
        left: -110px;
        height: 135px;
        width: 135px;
        -webkit-animation-timing-function: ease;
    }
    50% {
        left: 55px;
        height: 120px;
        width: 120px;
        -webkit-animation-timing-function: ease;
    }
    100% {
        left: -110px;
        height: 120px;
        width: 120px;
    }
}
@-moz-keyframes animation-finger {
    0% {
        left: -110px;
        height: 135px;
        width: 135px;
        -moz-animation-timing-function: ease;
    }
    50% {
        left: 55px;
        height: 120px;
        width: 120px;
        -moz-animation-timing-function: ease;
    }
    100% {
        left: -110px;
        height: 120px;
        width: 120px;
    }
}
@keyframes animation-finger {
    0% {
        left: -110px;
        height: 135px;
        width: 135px;
        animation-timing-function: ease;
    }
    50% {
        left: 55px;
        height: 120px;
        width: 120px;
        animation-timing-function: ease;
    }
    100% {
        left: -110px;
        height: 120px;
        width: 120px;
    }
}

// Animation Screen 01
@-webkit-keyframes animation-screen01 {
    0% {
        left: 55px;
    }
    50% {
        left: 55px;
        -webkit-animation-timing-function: ease;
    }
    100% {
        left: -110px;
    }
}
@-moz-keyframes animation-screen01 {
    0% {
        left: 55px;
    }
    50% {
        left: 55px;
        -moz-animation-timing-function: ease;
    }
    100% {
        left: -110px;
    }
}
@keyframes animation-screen01 {
    0% {
        left: 55px;
    }
    50% {
        left: 55px;
        animation-timing-function: ease;
    }
    100% {
        left: -110px;
    }
}

// Animation Screen 01 child path stroke change
@-webkit-keyframes animation-screen01-stroke {
    0% {
        stroke: @text-color-dark;
    }
    46% {
        stroke: @text-color-dark;
    }
    50% {
        stroke: @septenary-color-light;
    }
    99% {
        stroke: @septenary-color-light;
    }
    100% {
        stroke: @text-color-dark;
    }
}
@-moz-keyframes animation-screen01-stroke {
    0% {
        stroke: @text-color-dark;
    }
    46% {
        stroke: @text-color-dark;
    }
    50% {
        stroke: @septenary-color-light;
    }
    99% {
        stroke: @septenary-color-light;
    }
    100% {
        stroke: @text-color-dark;
    }
}
@keyframes animation-screen01-stroke {
    0% {
        stroke: @text-color-dark;
    }
    46% {
        stroke: @text-color-dark;
    }
    50% {
        stroke: @septenary-color-light;
    }
    99% {
        stroke: @septenary-color-light;
    }
    100% {
        stroke: @text-color-dark;
    }
}

// Animation Screen 02
@-webkit-keyframes animation-screen02 {
    0% {
        left: 235px;
    }
    50% {
        left: 235px;
        -webkit-animation-timing-function: ease;
    }
    100% {
        left: 55px;
    }
}
@-moz-keyframes animation-screen02 {
    0% {
        left: 235px;
    }
    50% {
        left: 235px;
        -moz-animation-timing-function: ease;
    }
    100% {
        left: 55px;
    }
}
@keyframes animation-screen02 {
    0% {
        left: 235px;
    }
    50% {
        left: 235px;
        animation-timing-function: ease;
    }
    100% {
        left: 55px;
    }
}