$menuBgActive: linear-gradient(266deg, rgba(107, 178, 250, .05) 0%, rgba(57, 122, 242, .4) 100%);

.dy-menu-item {
    box-sizing: border-box;
    height: 40px;
    padding: 0 0 0 10px;
    overflow: hidden;
    font-size: 14px;
    line-height: 40px;
    color: rgba(255, 255, 255, .4);
    transition: color .2;

    /* Safari */
    &:hover {
        background: $menuBgActive;
        cursor: pointer;
    }

    em {
        float: right;
        display: block;
        font-size: 14px;
    }
}

.dy-active {
    position: relative;
    color: #397af2;
    background: $menuBgActive;

    .dy-border {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 4px;
        height: 100%;
        background: rgba(57, 122, 242, 1);

        @include animation(menu-background-1,background,$menuBg,rgba(57,122,242,1),.4s);
    }

    .dy-icon-top {
        @include transition(rotateX(0deg),.5s);
    }

    @include animation(menu-background,background,$menuBg, $menuBgActive,.4s);
}

.dy-menu-item-text {
    float: left;
    margin-left: 10px;
    overflow: hidden;
    opacity: 1;
}

.dy-menu-item-icon {
    float: left;
    font-size: 14px;
}

.dy-icon-top {
    transform: rotateX(180deg);

    /* Safari 与 Chrome */
}