/** * @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%; }