@chief-editor/ui/css/mixin/common.less

UI Component for chief editor

@import "../var/style.less";

// 清除浮动
.clearfix() {
    &:before,
    &:after {
        display: table;
        content: "";
    }
    &:after {
        clear: both;
    }
}

// size settings
.size(@size) {
    width: @size;
    height: @size;
}

.size(@width,  @height) {
    width: @width;
    height: @height;
}


// 计算指定fontSize的字体显示样式
.font-height(@fontSize) {
    font-size: @fontSize;
    line-height: @fontSize + 8px;
}

//
// .ellipsis
//
// Known issue:
// 指定参数（行数）的功能只支持WebKit。
.ellipsis(...) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ellipsis() {
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    white-space: nowrap;
}

.ellipsis(@line-number) {
    display: -webkit-box;
    -webkit-line-clamp: @line-number;
    -webkit-box-orient: vertical;
}

//
// force-wrap
//
// 阻止长字符串（例如url或无意义连续英文字符）打破布局

.force-wrap() {
    white-space: pre; // CSS 2.0
    white-space: pre-wrap; // CSS 2.1
    white-space: pre-line; // CSS 3.0
    white-space: -o-pre-wrap; // Opera 7
    white-space: -moz-pre-wrap; // Mozilla
    word-wrap: break-word; // IE 5+
}

// 三角形
.triangle(@direction, @size, @color, @origin: corner) {
    position: absolute;
    .size(0);
    @horizontal: ~`(function() { var match = '@{direction}'.match(/\b(?:right|left)\b/); return match ? match[0] : false; })()`;
    @vertical: ~`(function() { var match = '@{direction}'.match(/\b(?:top|bottom)\b/); return match ? match[0] : false; })()`;

    // diagonal
    .output() when not (@horizontal = false) and not (@vertical = false) {
        border: @size / 2 solid @color;

        .border(top) {
            border-bottom-color: transparent;
        }
        .border(bottom) {
            border-top-color: transparent;
        }
        .border(right) {
            border-left-color: transparent;
        }
        .border(left) {
            border-right-color: transparent;
        }
        .border(top) when (@support-old-ie) {
            _border-bottom-style: dashed;
        }
        .border(bottom) when (@support-old-ie) {
            _border-top-style: dashed;
        }
        .border(right) when (@support-old-ie) {
            _border-left-style: dashed;
        }
        .border(left) when (@support-old-ie) {
            _border-right-style: dashed;
        }
        .border(@vertical);
        .border(@horizontal);

        .margin(corner) when (@vertical = bottom) {
            margin-top: -@size;
        }
        .margin(corner) when (@horizontal = right) {
            margin-left: -@size;
        }
        .margin(side) {
            margin-top: -@size / 2;
        }
        .margin(side) {
            margin-left: -@size / 2;
        }
        .margin(@origin);
    }

    // horizontal or vertical
    .output() when (@horizontal = false), (@vertical = false) {

        @border-width: @size / sqrt(2);

        border: @border-width solid transparent;

        .border(top) {
            border-bottom-color: @color;
        }
        .border(right) {
            border-left-color: @color;
        }
        .border(bottom) {
            border-top-color: @color;
        }
        .border(left) {
            border-right-color: @color;
        }

        .border(@direction);

        .margin(corner) {
            margin-left: -@border-width;
        }

        .margin(corner) {
            margin-top: -@border-width;
        }

        .margin(side) when not (@vertical = false) {
            margin-left: -@border-width;
        }
        .margin(side) when (@horizontal = left) {
            margin-left: -@border-width * 2;
        }
        .margin(side) when not (@horizontal = false) {
            margin-top: -@border-width;
        }
        .margin(side) when (@vertical = top) {
            margin-top: -@border-width * 2;
        }

        .margin(@origin);
    }
}

// 圆形
.circle(@size, @bg: false) {

    .output() when (ispixel(@size)) {
        .size(@size);
        border-radius: ceil(@size / 2);
    }

    .output() when (ispercentage(@size)) {
        width: @size;
        padding-top: @size;
        border-radius: 50%;
    }

    .output() when (@size = 0) {
        .size(0);
    }

    .output() when (iscolor(@bg)) {
        background-color: @bg;
    }

    .output() when not (@bg = false) and not (iscolor(@bg)) {
        background: @bg;
    }

    .output();
}

.property-prefix(@property, @value) {
        @{property}: @value;
    -webkit-@{property}: @value;
    -moz-@{property}: @value;
    -o-@{property}: @value;
}

.transition(@timing-function: ease-in-out, @duration: @motion-duration-a, @property: all) {
    .property-prefix(transition, @property @timing-function @duration);
}

.transform(@effects) {
    .property-prefix(transform, @effects);
}