zeusjs/widgets

View on GitHub
src/sass/_flip_card.scss

Summary

Maintainability
Test Coverage
/**
 * Copyright 2015, Symantec Corporation
 * All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree
 */

.zs-flip-card
{
    position: relative;
    z-index: 1001;
    perspective: 1000;
    //display: inline-block;

    .face-container
    {
        transition: all 0.4s;
        transform-style: preserve-3d;

        &.is-flipped
        {
            transform: rotateY(180deg);
        }
    }

    .face
    {
        position: absolute;
        padding: 10px;
        width: 100%;
        background-color: $color_white;
        backface-visibility: hidden;
        position: absolute;
        top: 0;
        left: 0;

        @include make_shadow();
    }

    .header
    {
        margin-bottom: 10px;
        h6
        {
            padding: 0px;
            margin: 0px;
        }

        .flip-btn
        {
            font-size: 0.9em;
            cursor: pointer;
            color: $color_gray;
        }
    }

    .face-front
    {
        z-index: 1000;
        transform: rotateY(0deg);
    }

    .face-back
    {
        transform: rotateY(180deg);
    }

}