jdvue/src/components/notice/index.less

A Vue.js 2.0 Mobile UI components at JinDanLiCai

.v-notice-bar {
    display: flex;
    color: @yellow;
    padding: 9px 20px;
    line-height: 1;
    position: relative;
    background-color: @yellow-bg;

    &-withicon {
        position: relative;
        padding-right: 30px;
    }

    &-left-icon {
        height: 18px;
        min-width: 20px;
        padding-top: 1px;
        box-sizing: border-box;
    }

    &-left-none {
        height: 18px;
        min-width: 1px;
        margin-right: -5px;
        box-sizing: border-box;
    }

    &-right-icon {
        top: 10px;
        right: 10px;
        position: absolute;
        font-size: 15px;
    }

    &-content-wrap {
        margin-left: 5px;
        flex: 1;
        overflow: hidden;
        position: relative;
    }

    &-content {
        top: 1px;
        position: absolute;
        white-space: nowrap;
        font-size: 13px;
        height: 18px;
        line-height: 18px;
    }

    &-play {
        animation: van-notice-bar-play linear both;
    }

    &-play-infinite {
        animation: van-notice-bar-play-infinite linear infinite both;
    }
}


/** 
 * Declare two same keyframes
 * In case that some mobile browsers can continue animation when className changed
 */

@keyframes van-notice-bar-play {
    to {
        transform: translate3d(-100%, 0, 0)
    }
}

@keyframes van-notice-bar-play-infinite {
    to {
        transform: translate3d(-100%, 0, 0)
    }
}