@import './variable.less';

.Rem(@key, @val) {
    @{key}: @val/@fontSize*1rem;
}

.padding(@key, @val) {
    padding-@{key}: @val/@fontSize*1rem;
}

.padding4(@val1, @val2, @val3, @val4) {
    padding: @val1/@fontSize*1rem @val2/@fontSize*1rem @val3/@fontSize*1rem @val4/@fontSize*1rem;
}

.padding2(@val1, @val2) {
    padding: @val1/@fontSize*1rem @val2/@fontSize*1rem;
}

.margin(@key, @val) {
    margin-@{key}: @val/@fontSize*1rem;
}

.scroll-hidden {
    &::-webkit-scrollbar {
        display: none;
    }
}

//1.使用伪类加边框是应为1px的border边框可能在移动端变粗
//2.如果这样加边框导致内部元素选中不了，则给那边元素加上以下属性：
//position: relative; z-index:3  这样就能选中内部元素啦
.border-1px(@color){
    position: relative;
    &::after{
        display: block;
        position:absolute;
        left:0;
        bottom: 0;
        width: 100%;
        border-bottom: 1px solid @color;
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
        content: ' ';
    }
}

@media  (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio:1.5) {
    .border-1px {
        &::after {
            -webkit-transform: scaleY(0.35);
            transform: scaleY(0.35);
        }
    }
}
@media  (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio:2) {
    .border-1px {
        &::after {
            -webkit-transform: scaleY(0.25);
            transform: scaleY(0.25);
        }
    }
}
@media  (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio:3) {
    .border-1px {
        &::after {
            -webkit-transform: scaleY(0.15);
            transform: scaleY(0.15);
        }
    }
}