dwweb-pc/公共/通用前端工作流/sass/lego/_mixins.scss

@charset "utf-8";
/*
 * @file:      SASS常用Function与Mixins
 * @update:    2015-06-03 17:17:50
 * @copyright: MIT License
 */


/*
 * @name:  inline-block
 * @param: $alignment {string}  对齐类型
 * @param: $support-for-ie {boolean}  是否支持IE6
 */
@mixin inline-block($alignment: middle, $support-for-ie: true) {
    display: inline-block;
    @if $alignment and $alignment != none {
        vertical-align: $alignment;
    }
    @if $support-for-ie {
        *vertical-align: auto;
        *display: inline;
        zoom: 1;
    }
}

/* @name: 闭合浮动 */
@mixin clearfix {
    *zoom: 1;
    &:before,
    &:after {
        content: "";
        display: table;
        line-height: 0;
    }
    &:after {
        clear: both;
    }
}

/*
 * @name:  浮动
 * @param: $side {string}  浮动方向
 * @param: $support-for-ie {boolean}  是否支持IE6
 */
@mixin float($side: left, $support-for-ie: true) {
    float: unquote($side);
    @if $support-for-ie {
        _display: inline;
    }
}

/* @name: 文本隐藏 */
@mixin hide-text {
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
}

/*
 * @name:  文字溢出显示省略号
 * @param: $width {dimension}  指定宽度 (需带单位)
 * 1. Opera 9-10.6
 * 2. Chrome 21+ bug https://bugs.webkit.org/show_bug.cgi?id=121902
 */
@mixin ellipsis($width: auto) {
    @if($width) {
        width: $width;
    }
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    -o-text-overflow: ellipsis; /* 1 */
    text-overflow: ellipsis;
    text-align: left; /* 2 */
}

/*
 * @name: 强制不换行
 * @link: http://www.hicss.net/solve-change-line-in-css
 */
@mixin nowrap {
    white-space: nowrap;
    word-wrap: normal;
    word-break: keep-all;
}

/* @name: 连续字符换行 */
@mixin break {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
}

/* @name: 保留空白符序列，但是正常地进行换行 */
@mixin pre {
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/*
 * @name:  resizable
 * @param: $direction {string}  缩放的方向 (horizontal || vertical || both)
 * @link:  https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_resize.scss
 * @1:     Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
 */
@mixin resizable($direction) {
    resize: $direction;
    overflow: auto; /* 1 */
}


/*
 * @name:  背景透明
 * @param: $color {color}  颜色  
 * @param: $opacity {number}  透明度
 * @param: $support-for-ie {boolean}  是否支持IE6
 * @link:  https://github.com/airen/Sass_mixins_function/tree/master/mixins
 */
@mixin transparent($color, $opacity, $support-for-ie:true) {
    background-color: transparent;
    background-color: rgba($color, $opacity);
    @if $support-for-ie {
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str(rgba($color, $opacity))},endColorstr=#{ie-hex-str(rgba($color, $opacity))});
        zoom: 1;
        :root & {
            filter: none;
        }
    }
}

/*
 * @name:  透明度
 * @param: $opacity {number}  透明度
 * @param: $support-for-ie {boolean}  是否支持IE6
 */
@mixin opacity($opacity:.65, $support-for-ie:true) {
    opacity: $opacity;
    @if $support-for-ie{
        $opacity-ie: $opacity * 100;
        filter: alpha(opacity=$opacity-ie); //IE8
    }
}

/* @name: 重置滤镜 */
@mixin reset-filter {
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}


/*
 * @name:  border三角形
 * @param: $base {dimension}  底边尺寸
 * @param: $height {dimension}  高度
 * @param: $color {color}  颜色
 * @param: $direction {string}  方向 (top || bottom || left || right)
 * @link:  http://codepen.io/zhouwenbin/pen/emZVZp
 */
@mixin triangle($base, $height, $color, $direction) {
    font-size: 0;
    width: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
    display: inline-block;
    *display: inline;
    *zoom: 1;
    vertical-align: -2px;
    border-style: dashed;
    
    @if($direction == top) {
        border-width: $height $base / 2;
        border-color: transparent transparent $color;
        margin-top: -$height;
    }
    @if($direction == bottom) {
        border-width: $height $base / 2;
        border-color: $color transparent transparent;
        margin-bottom: -$height;
    }
    @if($direction == left) {
        border-width: $base / 2 $height;
        border-color: transparent transparent transparent $color;
        margin-right: -$height;
    }
    @if($direction == right) {
        border-width: $base / 2 $height;
        border-color: transparent $color transparent transparent;
        margin-left: -$height;
    }
}

/* @name: 按钮配色 */
@mixin button-variant($color, $background, $border) {
    color: $color;
    background-color: $background;
    border-color: $border;
    &.is-hover,
    &:hover {
        color: $color;
        background-color: lighten($background, 8%);
        border-color: lighten($border, 10%);
        text-decoration: none; // 去掉a标签按钮的下划线
    }
}

/* @name: 按钮尺寸 */
@mixin button-size($padding-vertical, $padding-horizontal, $font-size, $border-radius) {
    padding: $padding-vertical $padding-horizontal;
    font-size: $font-size;
    border-radius: $border-radius;
}