124 lines
3.4 KiB
Stylus
124 lines
3.4 KiB
Stylus
|
|
// // 可替代 transition 使用
|
|
// transition($op = all, $time = 0.28s, $ease = ease-out)
|
|
// transition: $op $time $ease
|
|
// -moz-transition: $op $time $ease
|
|
// -webkit-transition: $op $time $ease
|
|
// -o-transition: $op $time $ease
|
|
|
|
// 为1个属性设置动画
|
|
trans1($op, $time = 0.2s)
|
|
transition: $op $time ease-out
|
|
-moz-transition: $op $time ease-out
|
|
-webkit-transition: $op $time ease-out
|
|
-o-transition: $op $time ease-out
|
|
|
|
// 为2个属性设置动画
|
|
trans2($op1, $op2)
|
|
transition: $op1 0.2s ease-out, $op2 0.2s ease-out
|
|
-moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
|
|
-webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
|
|
-o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out
|
|
|
|
trans2pro($op1, $t1, $op2, $t2)
|
|
transition: $op1 $t1 ease-out, $op2 $t2 ease-out
|
|
-moz-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
|
|
-webkit-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
|
|
-o-transition: $op1 $t1 ease-out, $op2 $t2 ease-out
|
|
|
|
trans3($op1, $op2, $op3)
|
|
transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
|
|
-moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
|
|
-webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
|
|
-o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out
|
|
|
|
trans4($op1, $op2, $op3, $op4)
|
|
transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out, $op4 0.2s ease-out
|
|
-moz-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out, $op4 0.2s ease-out
|
|
-webkit-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out, $op4 0.2s ease-out
|
|
-o-transition: $op1 0.2s ease-out, $op2 0.2s ease-out, $op3 0.2s ease-out, $op4 0.2s ease-out
|
|
|
|
txt-ellipsis()
|
|
white-space: nowrap
|
|
overflow: hidden
|
|
text-overflow: ellipsis
|
|
|
|
placeholder(rules)
|
|
&::-webkit-input-placeholder
|
|
rules()
|
|
&:-moz-placeholder
|
|
rules()
|
|
&::-moz-placeholder
|
|
rules()
|
|
&:-ms-input-placeholder
|
|
rules()
|
|
|
|
disable-select()
|
|
-moz-user-select: none
|
|
-ms-user-select: none
|
|
-webkit-user-select: none
|
|
user-select: none
|
|
|
|
|
|
scrollbar($w = 4px, $b = 2px, $c = var(--text-meta), $h = var(--text-p3))
|
|
&::-webkit-scrollbar
|
|
height: $w
|
|
width: $w
|
|
&::-webkit-scrollbar-track-piece
|
|
background: transparent
|
|
&::-webkit-scrollbar-thumb
|
|
background: $c
|
|
cursor: pointer
|
|
border-radius: $b
|
|
&:hover
|
|
background: $h
|
|
|
|
|
|
scrollbar-codeblock($height = 4px)
|
|
&::-webkit-scrollbar
|
|
height: $height
|
|
width: $height
|
|
&::-webkit-scrollbar-track-piece
|
|
background: transparent
|
|
&::-webkit-scrollbar-thumb
|
|
background: transparent
|
|
cursor: pointer
|
|
border-radius: $border-bar
|
|
&:hover
|
|
&::-webkit-scrollbar-thumb
|
|
background: var(--text-meta)
|
|
&:hover
|
|
background: var(--text-p3)
|
|
|
|
|
|
hover-block($v, $h, $br = 4px)
|
|
border-radius: $br
|
|
padding: $v $h
|
|
trans2 color background
|
|
&:hover
|
|
background: var(--block-hover)
|
|
|
|
floatable-trans()
|
|
trans2 transform box-shadow
|
|
floatable-float()
|
|
box-shadow: 0 12px 20px -4px rgba(0, 0, 0, 0.15)
|
|
transform: translate3d(0, -2px, 0)
|
|
|
|
hoverable-card()
|
|
trans1 all
|
|
onlight()
|
|
box-shadow: $boxshadow-card
|
|
&:hover
|
|
floatable-float()
|
|
ondark()
|
|
&:hover
|
|
box-shadow: 0 0 4px -2px $color-theme, 0 0 24px -8px $color-theme
|
|
:root[data-theme="light"] &
|
|
onlight()
|
|
:root[data-theme="dark"] &
|
|
ondark()
|
|
:root:not([data-theme]) &
|
|
onlight()
|
|
@media (prefers-color-scheme: dark)
|
|
ondark()
|