Wan_Backup / custom_nodes /ComfyUI-Easy-Use /ComfyUI-Easy-Use-Frontend /src /styles /sass /_function.scss
| /* css3浏览器兼容伪类 */ | |
| @mixin css3($property,$value) { | |
| -webkit-#{$property}: $value; | |
| -khtml-#{$property}: $value; | |
| -moz-#{$property}: $value; | |
| -ms-#{$property}: $value; | |
| -o-#{$property}: $value; | |
| #{$property}: $value; | |
| } | |
| @mixin css3-flex(){ | |
| display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ | |
| display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ | |
| display: -ms-flexbox; /* TWEENER - IE 10 */ | |
| display: -webkit-flex; /* NEW - Chrome */ | |
| display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ | |
| } | |
| /* Flex - flex布局 */ | |
| @mixin flex-w{ | |
| @include css3-flex; | |
| @include css3(flex-wrap,wrap); | |
| } | |
| @mixin flex-a{ | |
| @include css3-flex; | |
| @include css3(justify-content,space-around); | |
| @include css3(align-items,center); | |
| } | |
| @mixin flex-b{ | |
| @include css3-flex; | |
| @include css3(justify-content,space-between); | |
| @include css3(align-items,center); | |
| } | |
| @mixin flex-b-start{ | |
| @include css3-flex; | |
| @include css3(justify-content,space-between); | |
| @include css3(align-items,flex-start); | |
| } | |
| @mixin flex-b-end{ | |
| @include css3-flex; | |
| @include css3(justify-content,space-between); | |
| @include css3(align-items,flex-end); | |
| } | |
| @mixin flex-y{ | |
| @include css3-flex; | |
| @include css3(align-items,center); | |
| } | |
| @mixin flex-y-start{ | |
| @include css3-flex; | |
| @include css3(justify-content,center); | |
| @include css3(align-items,flex-start); | |
| } | |
| @mixin flex-y-end{ | |
| @include css3-flex; | |
| @include css3(align-items,flex-end); | |
| } | |
| @mixin flex-x{ | |
| @include css3-flex; | |
| @include css3(justify-content,center); | |
| } | |
| @mixin flex-x-start{ | |
| @include css3-flex; | |
| @include css3(justify-content,flex-start); | |
| @include css3(align-items,center); | |
| } | |
| @mixin flex-x-end{ | |
| @include css3-flex; | |
| @include css3(justify-content,flex-end); | |
| } | |
| @mixin flex-c{ | |
| @include css3-flex; | |
| @include css3(justify-content,center); | |
| @include css3(align-items,center); | |
| } | |
| @mixin flex-column-up-down{ | |
| @include css3-flex; | |
| @include css3(flex-direction,column); | |
| @include css3(justify-content,space-between); | |
| } | |
| @mixin flex-1($num:1){ | |
| -webkit-box-flex: $num; | |
| -ms-flex: $num; | |
| -webkit-flex: $num; | |
| flex:$num; | |
| } | |
| // 文本截断 | |
| @mixin clamp($line:1) { | |
| display: -webkit-box; | |
| -webkit-line-clamp: $line; | |
| overflow: hidden; | |
| word-break: break-all; | |
| text-overflow:ellipsis; | |
| -webkit-box-orient: vertical; | |
| } | |
| //清除浮动 | |
| @mixin clearfix() { | |
| zoom: 1; | |
| &:before, | |
| &:after { | |
| content: ""; | |
| display: table; | |
| } | |
| &:after { | |
| clear: both; | |
| visibility: hidden; | |
| font-size: 0; | |
| height: 0; | |
| } | |
| } | |
| /* Border - 边框 */ | |
| @mixin b($px:1px,$c:var(--border-color)){ | |
| border:$px solid $c; | |
| } // 默认实线边框 | |
| @mixin b--($px:1px,$c:var(--border-color)){ | |
| border:$px dashed $c; | |
| } // 默认虚线边框 | |
| @mixin bt($px:1px,$c:var(--border-color)){ | |
| border-top:$px solid $c; | |
| } // 顶部实线 | |
| @mixin bl($px:1px,$c:var(--border-color)){ | |
| border-left:$px solid $c; | |
| } // 左侧实线 | |
| @mixin br($px:1px,$c:var(--border-color)){ | |
| border-right:$px solid $c; | |
| } // 右侧实线 | |
| @mixin bb($px:1px,$c:var(--border-color)){ | |
| border-bottom:$px solid $c; | |
| } // 底部实线 | |
| @mixin bt--($px:1px,$c:var(--border-color)){ | |
| border-top:$px dashed $c; | |
| } // 顶部虚线 | |
| @mixin bl--($px:1px,$c:var(--border-color)){ | |
| border-left:$px dashed $c; | |
| } // 左侧虚线 | |
| @mixin br--($px:1px,$c:var(--border-color)){ | |
| border-right:$px dashed $c; | |
| } // 右侧虚线 | |
| @mixin bb--($px:1px,$c:var(--border-color)){ | |
| border-bottom:$px dashed $c; | |
| } // 底部虚线 | |
| @mixin border(){ | |
| @include b(); | |
| &--{@include b--();} | |
| &b{@include bb();&--{@include bb--();}} | |
| &t{@include bt();&--{@include bt--();}} | |
| &l{@include bl();&--{@include bl--();}} | |
| &r{@include br();&--{@include br--();}} | |
| } | |
| /* 字体 */ | |
| @mixin font($size:14px,$color:var(--font-color),$weight:400,$line:1.5){ | |
| font-size:$size; | |
| color:$color; | |
| font-weight:$weight; | |
| line-height:$line; | |
| } | |
| @mixin font-title($size:14px, $weight:500){ | |
| @include font($size,var(--input-text),$weight,1.5); | |
| } | |
| @mixin font-desc($size:12px){ | |
| @include font($size,var(--descrip-text),300,1.5); | |
| } | |
| /* 字体变形 */ | |
| @mixin fontHeight($value:matrix(1, 0, 0, 1.2, 0, 0)){ | |
| @include css3(transform,$value); | |
| } | |
| /* 背景 */ | |
| @mixin bg($background:var(--bg-color)){ | |
| @include css3(background,$background); | |
| }// 设置背景颜色 默认白色 | |
| @mixin bg-s($param:cover){ | |
| background-size:$param; | |
| }// 设置背景大小 | |
| @mixin bg-p($x:50%,$y:50%){ | |
| background-position:$x $y; | |
| }// 设置背景位置 | |
| @mixin bg-a($a:1){ | |
| background:linear-gradient(to top,rgba(250,250,250,$a),rgba(250,250,250,0)); | |
| } // 背景从下往上透明 | |
| @mixin bg-a-b($a:1){ | |
| background:linear-gradient(to top,rgba(0,0,0,$a),rgba(0,0,0,0)); | |
| } // 背景从下往上透明(黑色) | |
| @mixin arrow-r($size:10px,$weight:2px,$color:var(--descrip-text)){ | |
| width:$size; | |
| height:$size; | |
| @include br($weight,$color); | |
| @include bb($weight,$color); | |
| transform: rotate(-45deg); | |
| } // 右箭头 | |
| @mixin arrow-l($size:10px,$weight:2px,$color:var(--descrip-text)){ | |
| width:$size; | |
| height:$size; | |
| @include br($weight,$color); | |
| @include bb($weight,$color); | |
| transform: rotate(135deg); | |
| border-radius:4px; | |
| } // 左箭头 | |
| @mixin arrow-t($size:10px,$weight:1px,$color:var(--descrip-text)){ | |
| width:$size; | |
| height:$size; | |
| @include br($weight,$color); | |
| @include bb($weight,$color); | |
| transform: rotate(-135deg); | |
| } // 上箭头 | |
| @mixin arrow-b($size:10px,$weight:1px,$color:var(--descrip-text)){ | |
| width:$size; | |
| height:$size; | |
| @include br($weight,$color); | |
| @include bb($weight,$color); | |
| transform: rotate(45deg); | |
| } // 下箭头 | |
| @mixin triangle($size:6px,$color:var(--descrip-text)){ | |
| display:block; | |
| width:0; | |
| height:0; | |
| border-width:$size $size 0; | |
| border-style:solid; | |
| border-color:$color transparent transparent ;/*透明 透明 黄*/ | |
| } | |
| /* Size - 尺寸 */ | |
| @mixin radius($num:8px){ | |
| border-radius:$num | |
| } | |
| @mixin size($width:40px,$height:40px){ | |
| width:$width; | |
| height:$height; | |
| } | |
| @mixin size_s($size:40px){ | |
| @include size($size,$size); | |
| } | |
| @mixin size_r($size:40px,$r:100%){ | |
| @include size_s($size); | |
| @include radius($r); | |
| } | |
| /* margin递归 */ | |
| @mixin margin-loop($n:60,$i:5) { | |
| @while($i <= $n){ | |
| &#{$i}{margin: ($i+0px);} | |
| &t#{$i}{margin-top: ($i+0px);} | |
| &b#{$i}{margin-bottom: ($i+0px);} | |
| &l#{$i}{margin-left: ($i+0px);} | |
| &r#{$i}{margin-right: ($i+0px);} | |
| &v#{$i}{margin: ($i+0px) 0;} | |
| &h#{$i}{margin: 0 ($i+0px);} | |
| &va#{$i}{margin: ($i+0px) auto;} | |
| &ha#{$i}{margin: auto ($i+0px);} | |
| $i:$i + 5; | |
| } | |
| } | |
| /* padding递归 */ | |
| @mixin padding-loop($n:60,$i:5) { | |
| @while($i <= $n){ | |
| &#{$i}{padding: ($i+0px);} | |
| &t#{$i}{padding-top: ($i+0px);} | |
| &b#{$i}{padding-bottom: ($i+0px);} | |
| &l#{$i}{padding-left: ($i+0px);} | |
| &r#{$i}{padding-right: ($i+0px);} | |
| &v#{$i}{padding: ($i+0px) 0;} | |
| &h#{$i}{padding: 0 ($i+0px);} | |
| &va#{$i}{padding: ($i+0px) auto;} | |
| &ha#{$i}{padding: auto ($i+0px);} | |
| $i:$i + 5; | |
| } | |
| } | |
| /* Transition - 过渡 */ | |
| @mixin transition3($property:all,$function:ease-in-out){ | |
| @include css3(transition,$property .3s $function); | |
| } // 默认 0.3秒过渡动画 | |
| @mixin transition5($property:all,$function:cubic-bezier(.55,0,.1,1)){ | |
| @include css3(transition,$property .5s $function); | |
| } // 默认 0.5秒过渡动画 | |
| @mixin transition8($property:all,$function:cubic-bezier(.55,0,.1,1)){ | |
| @include css3(transition,$property .8s $function); | |
| } // 默认 0.8秒过渡动画 | |
| @mixin transition10($property:all,$function:ease-in-out){ | |
| @include css3(transition,$property 1s $function); | |
| } // 默认 1秒过渡动画 | |
| @mixin transition20($property:all,$function:ease-in-out){ | |
| @include css3(transition,$property 2s $function); | |
| } // 默认 2秒过渡动画 | |
| /* CssFilter - css滤镜 */ | |
| @mixin blur($params:5px){ | |
| @include css3(filter,blur($params)); | |
| } | |
| @mixin contrast($params:100%){ | |
| @include css3(filter,contrast($params)); | |
| } | |
| @mixin brightness($params:100%){ | |
| @include css3(filter,brightness($params)); | |
| } | |
| @mixin grayscale($params:100%){ | |
| @include css3(filter,grayscale($params)); | |
| } | |
| @mixin bg-blur($saturate:180%,$blur:40px){ | |
| @include css3(backdrop-filter,saturate($saturate) blur($blur)); | |
| } | |
| @mixin hairline_bottom($color:var(--border-color-solid)){ | |
| &:after{ | |
| bottom: 0px; | |
| left: 0px; | |
| right: 0px; | |
| top: auto; | |
| width: 100%; | |
| height: 2rpx; | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| content: ''; | |
| position: absolute; | |
| z-index: 2; | |
| background-color: $color; | |
| -webkit-transform: scaleY(0.5) translateY(100%); | |
| transform: scaleY(0.5) translateY(100%); | |
| } | |
| } | |
| @mixin remove_hairline_bottom(){ | |
| &:after{ | |
| display: none; | |
| } | |
| } | |
| @mixin hairline_right($color:var(--border-color-solid)){ | |
| &:before{ | |
| bottom: 0; | |
| left: auto; | |
| right: 0px; | |
| top: 0; | |
| width: 2rpx; | |
| height: 100%; | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| content: ''; | |
| position: absolute; | |
| z-index: 2; | |
| background-color: $color; | |
| -webkit-transform: scaleX(0.5) translateX(100%); | |
| transform: scaleX(0.5) translateX(100%); | |
| } | |
| } | |
| @mixin remove_hairline_right(){ | |
| &:before { | |
| display: none; | |
| } | |
| } | |
| @mixin hairline_top($color:var(--border-color-solid)){ | |
| &:after{ | |
| bottom: auto; | |
| left: 0px; | |
| right: 0px; | |
| top: 0px; | |
| width: 100%; | |
| height: 2rpx; | |
| -webkit-transform-origin: 50% 100%; | |
| transform-origin: 50% 100%; | |
| content: ''; | |
| position: absolute; | |
| z-index: 2; | |
| background-color: $color; | |
| -webkit-transform: scaleY(0.5) translateY(-100%); | |
| transform: scaleY(0.5) translateY(-100%); | |
| } | |
| } | |
| @mixin remove_hairline_top(){ | |
| &:after{ | |
| display: none; | |
| } | |
| } | |
| @mixin overflow_hidden(){ | |
| -wekit-backface-visibility: hidden; | |
| -webkit-transform: translate3d(0, 0, 0); | |
| overflow: hidden; | |
| } | |