// font
@font-roboto: "fonts/roboto";
@font: Roboto, "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", sans-serif;
@font-code: Consolas, Monaco, courier, monospace;
@font-en: "MV Boli", Roboto, serif;
// font-size
@font-size: 15px;
// Palette generated by Material Palette - materialpalette.com/indigo/pink
@darkPrimaryColor: #303f9f;
@primaryColor: #3f51b5;
@lightPrimaryColor: #c5cae9;
@textPrimaryColor: #fff;
@accentColor: #ff4081;
@primaryTextColor: #212121;
@secondaryTextColor: #727272;
@dividerColor: #b6b6b6;
@borderColor: #dadada;
@backColor: #f6f6f6;
@codeBg: #f5f5f5;
// tags color
@tag-color-1: #8bc34a;
@tag-color-2: #673ab7;
@tag-color-3: #ff9800;
@tag-color-4: #f44336;
@tag-color-5: #00abc0;
@tag-color-6: #2196f3;
//layout
@contentWidth: 960px;
@menuWidth: 240px;
@menuPadding: 20px;
@headerH: 56px;
@navH: 44px;
@mNavH: 36px;
@boxShadow: 0 2px 5px 0 rgba(0, 0, 0, .16), 0 2px 10px 0 rgba(0, 0, 0, .12);

.transition(@s, @dur: ease-in-out) {
    -webkit-transition: @s @dur;
            transition: @s @dur;
}

.transform(@prop) {
    -webkit-transform: @prop;
            transform: @prop;
}

.boxShadow(@s:.4s) {
    box-shadow: @boxShadow;
    .transition(@s);

    &:hover,
    &:active {
        box-shadow: 0 6px 12px rgba(0, 0, 0, .2), 0 4px 15px rgba(0, 0, 0, .2);
    }
}

.hoverLine(@color) {
    position: relative;
    display: inline-block;

    &::after {
        content: "";
        position: absolute;
        width: 100%;
        height: 2px;
        bottom: 0;
        left: 0;
        background-color: @color;
        visibility: hidden;
        .transform(scaleX(0));
        .transition(.4s);
    }

    &:hover {
        text-decoration: none;
    }

    &:hover::after,
    &:active::after {
        visibility: visible;
        .transform(scaleX(1));
    }
}

.tip() {
    position: relative;

    &:before,
    &:after {
        position: absolute;
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        .transition(.3s);
    }

    &:before {
        content: attr(data-title);
        font-size: 12px;
        color: #fff;
        white-space: nowrap;
        line-height: 24px;
        padding: 0 5px;
        border-radius: 3px;
        background: rgba(0, 0, 0, .8);
    }

    &:after {
        content: "";
        border: 6px solid transparent;
    }

    &:hover {
        &:before,
        &:after {
            visibility: visible;
            opacity: 1;
        }
    }
}

.tip-top() {
    .tip();

    &:before,
    &:after {
        top: -10px;
        right: 50%;
    }

    &:before {
        .transform(translate(50%, -100%));
    }

    &:after {
        border-top-color: rgba(0, 0, 0, .8);
        .transform(translateX(50%));
    }
}
.tip-left() {
    .tip();

    &:before,
    &:after {
        top: 50%;
        .transform(translate(-100%, -50%));
    }

    &:before {
        left: -15px;
    }

    &:after {
        left: -3px;
        border-left-color: rgba(0, 0, 0, .8);
    }
}

.card(@radius: 3px) {
    background: #fff;
    border-radius: @radius;
    box-shadow: 0 1px 2px rgba(151, 151, 151, .58);
}
