/*--============================---
 *  基础组件 -- 操作菜单样式
 *  loke 2018-08-24 16:09:09
 *--==============================*/
.sui-action-sheet{
    .as-container {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 9999;
    }

    .as-cover {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .3);
    }

    .as-buttons {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        font-size: 14px;
    }

    .as-button {
        background: #FFF;
        padding: 10px;
        text-align: center;
        border-top: 1px solid #fff;
        & + .as-button {
            border-top-color: #e2e2e2;
        }
        &.description {
            color:  #999;
            font-size: 0.8em;
        }
        &.as-split {
            padding: 5px 0;
            background: #e9e9e9;
        }
    }

    .as-button.as-active {
        opacity: .7;
    }

    @keyframes as-easein {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @keyframes as-easeout {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    @-moz-keyframes as-easein {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @-moz-keyframes as-easeout {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    @-webkit-keyframes as-easein {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @-webkit-keyframes as-easeout {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    @-o-keyframes as-easein {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    @-o-keyframes as-easeout {
        from {
            opacity: 1;
        }
        to {
            opacity: 0;
        }
    }

    .as-in {
        animation: as-easein .30s forwards;
    }
    .as-out {
        animation: as-easeout .30s forwards;
    }

    @keyframes as-buttons-easein {
        from {
            transform: translate(0, 100%) translateZ(0);
        }
        to {
            transform: translate(0, 0) translateZ(0);
        }
    }
    @keyframes as-buttons-easeout {
        from {
            transform: translate(0, 0) translateZ(0);
        }
        to {
            transform: translate(0, 100%) translateZ(0);
        }
    }

    @-moz-keyframes as-buttons-easein {
        from {
            transform: translate(0, 100%) translateZ(0);
        }
        to {
            transform: translate(0, 0) translateZ(0);
        }
    }
    @-moz-keyframes as-buttons-easeout {
        from {
            transform: translate(0, 0) translateZ(0);
        }
        to {
            transform: translate(0, 100%) translateZ(0);
        }
    }

    @-webkit-keyframes as-buttons-easein {
        from {
            transform: translate(0, 100%) translateZ(0);
        }
        to {
            transform: translate(0, 0) translateZ(0);
        }
    }
    @-webkit-keyframes as-buttons-easeout {
        from {
            transform: translate(0, 0) translateZ(0);
        }
        to {
            transform: translate(0, 100%) translateZ(0);
        }
    }

    @-o-keyframes as-buttons-easein {
        from {
            transform: translate(0, 100%) translateZ(0);
        }
        to {
            transform: translate(0, 0) translateZ(0);
        }
    }
    @-o-keyframes as-buttons-easeout {
        from {
            transform: translate(0, 0) translateZ(0);
        }
        to {
            transform: translate(0, 100%) translateZ(0);
        }
    }

    .as-in .as-buttons {
        animation: as-buttons-easein .30s forwards;
    }

    .as-out .as-buttons {
        animation: as-buttons-easeout .30s forwards;
    }
}