sp-boilerplate/apps/doc/client/ui/base/less/tools.less

Superproject Demo.

// mixins
.clearfix(){
    &:extend(.clearfix all);
}
.nowrap(){
    &:extend(.nowrap);
}
.ellipsis(){
    /*
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis
    */
    &:extend(.ellipsis);
}



.img-in-content(){
    display:    block;
    margin:     0 auto;
    max-width:  85%;
    max-height: 50%;
    max-height: ~"calc(50vh - @{navheader-height})";
    @media all and (max-width: @screen-t2){
        max-width:  100%;
        max-height: ~"calc(75vh - @{navheader-height})";
    }
}




.coverimg( @position: relative ){
    //@supports (background-size: cover){
        width: 		100%;
        height:     100%;
        position:   @position;
        top:        auto;
        transform:  none;
        background-position: 50% 38.2%;
        object-fit: cover;
        object-position: 50% 38.2%;
        //font-family: ~"'object-fit: cover; object-position: 50% 38.2%'";
    //}
}




@card-border-radius:(@base-border-radius * 1.5);
@card-box-shadow:   0 2px 3px rgba(0, 0, 0, .03),
                    0 3px 5px -3px rgba(0, 0, 0, .125);
.card-container-shadow(
    @box-shadow:    @card-box-shadow
){
    box-shadow:     @box-shadow;
}
.card-container(
    @position:      relative;
    @box-shadow:    @card-box-shadow;
    @border-width:  1px;
    @border-color:  @base-border-color
){    
    .clearfix();
    .card-container-shadow(@box-shadow);
    .margin();

    clear:          both;
    background:     #fff;
    border:         @border-width solid @border-color;
    border-radius:  @card-border-radius;
    position:       @position;
}





.text-container-sizing(@_border-color: transparent){
    line-height:    1.2em;
    padding-top:    .5em;
    padding-bottom: .5em;
    padding-top:    ~"calc(.5em - 1px)";
    padding-bottom: ~"calc(.5em - 1px)";
    border:         1px solid @_border-color;
}
.text-container(){
    .text-container-sizing(@base-border-color);
    border-radius:  @base-border-radius;
    // font-family:    inherit;
}





.overlay(){
    //background:     @base-background-color;
    background: 	#fff;
    border:         1px solid @base-border-color;
    //.theme(border-color, 500);
    overflow:       hidden;
    overflow-y:     auto;
    box-shadow:     0 2px 3px rgba(0, 0, 0, .25);
}









.pixelgrid( @opacity: .35 ){
    @grid-color:rgba(0, 0, 0, @opacity);
    background: linear-gradient(45deg, @grid-color 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, @grid-color 75%, @grid-color 0), linear-gradient(45deg, @grid-color 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 75%, @grid-color 75%, @grid-color 0), transparent;
    background-size:    2px 2px;
    background-position:0 0, 1px 1px;
    @-moz-document url-prefix() {
        @solid-color:rgba(0, 0, 0, (@opacity / 2));
        background-image: linear-gradient(to bottom, @solid-color, @solid-color);
    }
}





// 深色模式
.mod-color-deep( @rules ){
    .mod-color-deep &, &.mod-color-deep{
        @rules();
    }
}





// 浏览器兼容
.browser-ie9( @rules ){
    html.ie9 &{
        @rules();
    }
}
.browser-ie8( @rules ){
    html.ie8 &{
        @rules();
    }
}
.browser-ie7( @rules ){
    html.ie7 &{
        @rules();
    }
}