hairlines

由于我们在移动开发时,选用的是viewport方案,会导致border定义的1px边框比较粗(实际上可能是屏幕硬件上的2个或2个以上像素点),为了实现较细的边框,我们提供了hairlines工具库,以下class可以直接在html中使用:

四面边框:
.hum-hair

上下边框:
.hum-hair-tb
左右边框:
.hum-hair-lr

上边框
.hum-hair-t
下边框
.hum-hair-b
左边框
.hum-hair-l
右边框
.hum-hair-r

另外,对于上面的class无法满足的情形,比如圆角,边框颜色不一样等,我们也提供一套封装好的less工具库,可以在编写less时调用:

细边框，使用方法：

.search-tbar {
    .hum-hairlines();    //调用函数，输出样式，可以传入颜色值，默认是#e5e5e5
}


//PS：需要注意边框的css，别跟外部(.search-tbar)原有css冲突了
//周围四条边框，PS：这里有个副作用，&:after伪类元素会遮住原节点，导致不能滚动、子元素事件失效等
.hum-hairlines(@color:#e5e5e5)

//下述方法没有上述方法中的副作用，不过，由于只能使用before和after伪类，所以最多只能同时绘制两条边框
.hum-hairlines-single(@color:#e5e5e5)

//上边框
.hum-hairlines-t(@color:#e5e5e5)
//下边框
.hum-hairlines-b(@color:#e5e5e5)
//左边框
.hum-hairlines-l(@color:#e5e5e5)
//右边框
.hum-hairlines-r(@color:#e5e5e5)

//上下边框
.hum-hairlines-tb(@color:#e5e5e5)
//左右边框
.hum-hairlines-lr(@color:#e5e5e5)

//设置细边框宽度，用于清除(传入0)或者恢复(不传参数)
.hum-hairlines-width(@width:1px)
//设置上边框宽度
.hum-hairlines-width-t(@width:1px)
//设置下边框宽度
.hum-hairlines-width-b(@width:1px)
//设置左边框宽度
.hum-hairlines-width-l(@width:1px)
//设置右边框宽度
.hum-hairlines-width-r(@width:1px)

//设置圆角
.hum-hairlines-radius(@radius:0)
//设置上圆角
.hum-hairlines-radius-t(@radius:1px)
//设置下圆角
.hum-hairlines-radius-b(@radius:1px)
//设置左圆角
.hum-hairlines-radius-l(@radius:1px)
//设置右圆角
.hum-hairlines-radius-r(@radius:1px)

html示例:

<div class="hum-hair">
    细边框
</div>

less示例:

@import (reference) "@alife/hummer-hairlines/hairlines";

.content{
  .hum-hairlines();
}  

hairlines的less源码:

@import (reference) "@alife/hummer-theme/lib";

//细边框，使用方法：
//.header {
//    .hum-hairlines();    //调用函数，输出样式，可以传入颜色值，默认是#e5e5e5
//}
//PS：本文件下面会定义一些常用的class，在html中可以直接使用，例如：.hum-hair、.hum-hair-t等


//PS：需要注意边框的css，别跟外部(.search-tbar)原有css冲突了
//周围四条边框，PS：这里有个副作用，&:after伪类元素会遮住原节点，导致不能滚动、子元素事件失效等bug
.hum-hairlines(@color:#e5e5e5){
    position:relative;
    &:after{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        border: 1px solid @color;
        width: 200%;
        height: 200%;
        .scale(0.5);
        .transform-origin(~'left top');
    }
}
//下述方法没有上述方法中的副作用，不过，由于只能使用before和after伪类，所以最多只能同时绘制两条边框
.hum-hairlines-single(@color:#e5e5e5){
    content: '';
    position: absolute;
    .scale(0.5);
    .transform-origin(~'left top');
}
//上边框
.hum-hairlines-t(@color:#e5e5e5){
    position:relative;
    &:before{
        .hum-hairlines-single(@color);
        .transform-origin(~'left top');
        top: 0;
        left: 0;
        width: 200%;
        border-top: 1px solid @color;
    }
}
//下边框
.hum-hairlines-b(@color:#e5e5e5){
    position:relative;
    &:after{
        .hum-hairlines-single(@color);
        .transform-origin(~'left bottom');
        bottom:0;
        left: 0;
        width: 200%;
        border-bottom: 1px solid @color;
    }
}
//左边框
.hum-hairlines-l(@color:#e5e5e5){
    position:relative;
    &:before{
        .hum-hairlines-single(@color);
        top:0;
        left: 0;
        height: 200%;
        border-left: 1px solid @color;
    }
}
//右边框
.hum-hairlines-r(@color:#e5e5e5){
    position:relative;
    &:after{
        .hum-hairlines-single(@color);
        .transform-origin(~'right top');
        top:0;
        right:0;
        height: 200%;
        border-right: 1px solid @color;
    }
}
//上下边框
.hum-hairlines-tb(@color:#e5e5e5){
    .hum-hairlines-t(@color);
    .hum-hairlines-b(@color);
}
//左右边框
.hum-hairlines-lr(@color:#e5e5e5){
    .hum-hairlines-l(@color);
    .hum-hairlines-r(@color);
}

//设置细边框宽度，用于清除(传入0)或者恢复(不传参数)
.hum-hairlines-width(@width:1px){
    &:before,&:after{
        border-width:@width;
    }
}
//设置上边框宽度
.hum-hairlines-width-t(@width:1px){
    &:before,&:after{
        border-top-width:@width;
    }
}
//设置下边框宽度
.hum-hairlines-width-b(@width:1px){
    &:before,&:after{
        border-bottom-width:@width;
    }
}
//设置左边框宽度
.hum-hairlines-width-l(@width:1px){
    &:before,&:after{
        border-left-width:@width;
    }
}
//设置右边框宽度
.hum-hairlines-width-r(@width:1px){
    &:before,&:after{
        border-right-width:@width;
    }
}

//设置圆角
.hum-hairlines-radius(@radius:0){
    &:before,&:after{
        .border-radius(@radius);
    }
}
//设置上圆角
.hum-hairlines-radius-t(@radius:1px){
    &:before,&:after{
        .border-radius-t(@radius);
    }
}
//设置下圆角
.hum-hairlines-radius-b(@radius:1px){
    &:before,&:after{
        .border-radius-b(@radius);
    }
}
//设置左圆角
.hum-hairlines-radius-l(@radius:1px){
    &:before,&:after{
        .border-radius-l(@radius);
    }
}
//设置右圆角
.hum-hairlines-radius-r(@radius:1px){
    &:before,&:after{
        .border-radius-r(@radius);
    }
}

//常用class，方便直接使用
//四周边框
.hum-hair{
    .hum-hairlines();
}
//上下边框
.hum-hair-tb{
    .hum-hairlines-tb();
}
//左右边框
.hum-hair-lr{
    .hum-hairlines-lr();
}
//上边框
.hum-hair-t{
    .hum-hairlines-t();
}
//下边框
.hum-hair-b{
    .hum-hairlines-b();
}
//左边框
.hum-hair-l{
    .hum-hairlines-l();
}
//右边框
.hum-hair-r{
    .hum-hairlines-r();
}