common.scss

约定不等于承诺〃 2022-05-13 11:08 192阅读 0赞

$theme-Color:#004FBF;
    $theme-fontFamily:'.PingFangSC-Semibold';
    $reguler-fontFamily:'.PingFangSC-Regular';
    $medium-fontFamily:'.PingFangSC-Medium';
    $font-d9:#D9D9D9;
    $font-f0:#F0F0F0;
    
    @mixin gradient_two($topColor, $bottomColor){
      background: -webkit-linear-gradient($topColor, $bottomColor); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient($topColor, $bottomColor); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient($topColor, $bottomColor); /* Firefox 3.6 - 15 */
      background: linear-gradient($topColor, $bottomColor); /* 标准的语法 */
    }
    @mixin gradient_three-leftStart($leftColor, $middleColor, $rightColor){
      background: -webkit-linear-gradient(left, $leftColor, $middleColor, $rightColor); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, $leftColor, $middleColor, $rightColor); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, $leftColor, $middleColor, $rightColor); /* Firefox 3.6 - 15 */
      background: linear-gradient(right, $leftColor, $middleColor, $rightColor); /* 标准的语法 */
    }
    @mixin gradient_leftToRight($leftColor, $rightColor){
      background: -webkit-linear-gradient(left, $leftColor , $rightColor); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(right, $leftColor, $rightColor); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(right, $leftColor, $rightColor); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right, $leftColor , $rightColor); /* 标准的语法 */
    }
    
    @mixin displayflex {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
    }
    
    @mixin flex-align-center($item) {
      -webkit-box-align: $item;
      -webkit-align-items: $item;
      -ms-flex-align: $item;
      align-items: $item;
    }
    
    @mixin flex-pack-center {
      -webkit-box-pack: center;
      -webkit-justify-content: center;
      -ms-flex-pack: center;
      justify-content: center;
    }
    
    @mixin flex-justify-center($item) {
      -webkit-box-pack: $item;
      -webkit-justify-content: $item;
      -ms-flex-pack: $item;
      justify-content: $item;
    }
    
    @mixin flex-num($num) {
      -webkit-box-flex: $num;
      -webkit-flex: $num;
      -ms-flex: $num;
      flex: $num;
    }
    
    @mixin flex-v {
      -webkit-box-orient: vertical;
      -webkit-flex-direction: column;
      -ms-flex-direction: column;
      flex-direction: column;
    }
    
    @mixin flex-type($item1, $item2) {
      @include displayflex;
      @include flex-align-center($item1);
      @include flex-justify-center($item2);
    }
    
    @mixin box-shadow($b1, $b2, $b3, $color) {
      box-shadow: $b1 $b2 $b3 $color;
      -moz-box-shadow: $b1 $b2 $b3 $color;
      -webkit-box-shadow: $b1 $b2 $b3 $color;
    }
    
    // 单行省略
    @mixin ellipsis {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    // 多行省略
    @mixin ellipsisMore($row) {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: $row;
      -webkit-box-orient: vertical;
    }
    
    // 垂直居中
    @mixin s_middle {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      /* IE 9 */
      -moz-transform: translateY(-50%);
      /* Firefox */
      -webkit-transform: translateY(-50%);
      /* Safari 和 Chrome */
      -o-transform: translateY(-50%);
    }
    
    @mixin arrow-down {
                width: 0;
                height: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-top: 12px solid $font-6A;
                margin-left: 5px;
              }
    
    // 圆圈叉
    span{
          border: 2px solid #fff;
          height: 40px;
          @include flex;
          @include flex-align-center;
          border-radius: 50%;
          padding: 8px;
          i {
            display: inline-block;
            width: 40px;
            height: 2px;
            background: #fff;
            line-height: 0;
            font-size: 0;
            vertical-align: middle;
            -webkit-transform: rotate(45deg);
            &:after{
              content: '/';
              display: block;
              width: 40px;
              height: 2px;
              background: #fff;
              -webkit-transform: rotate(-90deg);
            }
          }
        }

common.scss

发表评论取消回复

还没有评论，来说两句吧...

相关阅读