gaf-mobile/app/styles/layout/error.less

GAF mobile Web site

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

.error-page {
    text-align: center;

    .subtitle {
      margin: 1.5em 0;
    }

    .button-separator {
        margin: 0.5em 0;
        display: block;
    }

    .dino {
        width: 55%;
        height: auto;
        padding: 28px 0;
    }

    &-inner {
        padding-top: 10%;
    }

    &-unicorn {
        background: url("/images/404/universe.jpg") no-repeat center;
        background-size: cover;

        @keyframes bounceinfinity {
            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-30px);
            }
        }

        @keyframes flapWingLeft {
            0%,
            50%,
            100% {
                transform: rotate(0deg);
            }

            25%,
            75% {
                transform: rotate(-75deg);
            }
        }

        @keyframes flapWingRight {
            0%,
            50%,
            100% {
                transform: rotate(0deg);
            }

            25%,
            75% {
                transform: rotate(75deg);
            }
        }

        &-title {
            color: @text-color-light;
            font-size: @type-size-xlge;
            font-weight: @type-weight-medium;
        }

        &-subtitle {
            color: @text-color-light;
        }

        &-whole {
            width: auto;
            height: 350px;
            animation: bounceinfinity 5s infinite;
        }

        &-leftWing {
            animation: flapWingLeft 2.5s infinite;
            transform-origin: bottom right;
            -moz-animation: none; /* transform-origin is buggy on FF */
        }

        &-rightWing {
            animation: flapWingRight 2.5s infinite;
            transform-origin: bottom left;
            -moz-animation: none; /* transform-origin is buggy on FF */
        }
    }
}