mixin.scss 2.58 KB
/**
 * @Description: 全局混入样式
 * @author lyk
 * @date 2019/6/4
*/
@mixin color($property) {
  #{$property}: transparent;
  transition: #{$property} .3s;
  [data-theme='default-theme'] & {
    #{$property}: #2A75CE;
  }
  [data-theme='theme-green'] & {
    #{$property}: #4BAE47;
  }
  [data-theme='theme-gray'] & {
    #{$property}: #616784;
  }
  [data-theme='theme-red'] & {
    #{$property}: #E64040;
  }
}

@mixin colorWithOpacity($property,$opacity) {
  #{$property}: transparent;
  [data-theme='default-theme'] & {
    #{$property}: rgba(#2A75CE, $opacity);
  }
  [data-theme='theme-green'] & {
    #{$property}: rgba(#4BAE47, $opacity);
  }
  [data-theme='theme-gray'] & {
    #{$property}: rgba(#616784, $opacity);
  }
  [data-theme='theme-red'] & {
    #{$property}: rgba(#E64040, $opacity);
  }
}

@mixin sidebar() {
  background: transparent;
  transition: background .3s;
  [data-theme='default-theme'] & {
    background: linear-gradient(180deg, #00477D 0%, #5692C1 100%)
  }
  [data-theme='theme-green'] & {
    background: linear-gradient(180deg, #00477D 0%, #5692C1 100%)
  }
  [data-theme='theme-gray'] & {
    background: linear-gradient(180deg, #00477D 0%, #5692C1 100%)
  }
}
@mixin family() {
  [data-family='default-family'] {
    font-family: "PingFangSC", "Helvetica Neue", Arial, "Source Han Sans CN",sans-serif;
  }
  [data-family='family-yahei'] {
    font-family: "微软雅黑";
  }
  [data-family='family-songti'] {
    font-family: "宋体";
  }
  [data-family='family-heiti'] {
    font-family: "黑体";
  } 
}
@mixin clearfix {
  &:after {
    content: "";
    display: table;
    clear: both;
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}
@mixin navbar() {
  background: transparent;
  [data-theme='default-theme'] & {
    background: linear-gradient(90deg, #00477D 0%, #5692C1 100%)
  }
  [data-theme='theme-green'] & {
    background: linear-gradient(90deg, #00477D 0%, #5692C1 100%)
  }
  [data-theme='theme-gray'] & {
    background: linear-gradient(90deg, #00477D 0%, #5692C1 100%)
  }
}
@mixin tagsView() {
  background: transparent;
  [data-theme='default-theme'] & {
    background: linear-gradient(90deg, #00477D 0%, #5692C1 100%)
  }
  [data-theme='theme-green'] & {
    background: linear-gradient(90deg, #00477D 0%, #5692C1 100%)
  }
  [data-theme='theme-gray'] & {
    background: linear-gradient(90deg, #00477D 0%, #5692C1 100%)
  }
}
@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}