first commit
This commit is contained in:
root
324
public/component/pear/css/module/layer.css
Executable file
324
public/component/pear/css/module/layer.css
Executable file
@ -0,0 +1,324 @@
|
||||
.layui-layer-msg {
|
||||
border-color: transparent !important;
|
||||
box-shadow: 2px 0 6px rgb(0 21 41 / 0.04) !important;
|
||||
}
|
||||
|
||||
/* 扩展动画开始 */
|
||||
.pear-drawer.layui-layer {
|
||||
border-radius: 0 !important;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.pear-drawer.layui-layer.position-absolute {
|
||||
position: absolute !important;
|
||||
}
|
||||
.pear-drawer-anim,
|
||||
.pear-drawer-anim.layui-anim {
|
||||
-webkit-animation-duration: .3s;
|
||||
animation-duration: .3s;
|
||||
-webkit-animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
}
|
||||
|
||||
/* right to left */
|
||||
@keyframes layer-rl {
|
||||
from {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-ms-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-rl {
|
||||
from {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-ms-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
opacity: 1;
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-rl {
|
||||
-webkit-animation-name: layer-rl;
|
||||
animation-name: layer-rl;
|
||||
}
|
||||
|
||||
/* right to left close */
|
||||
@keyframes layer-rl-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-ms-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes layer-rl-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(100%, 0, 0);
|
||||
-ms-transform: translate3d(100%, 0, 0);
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-rl-close,
|
||||
.layer-anim-rl.layer-anim-close {
|
||||
-webkit-animation-name: layer-rl-close;
|
||||
animation-name: layer-rl-close;
|
||||
}
|
||||
|
||||
/* left to right */
|
||||
@-webkit-keyframes layer-lr {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
-ms-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes layer-lr {
|
||||
from {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
-ms-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-lr {
|
||||
-webkit-animation-name: layer-lr;
|
||||
animation-name: layer-lr
|
||||
}
|
||||
|
||||
/* left to right close */
|
||||
@-webkit-keyframes layer-lr-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
-ms-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes layer-lr-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(-100%, 0, 0);
|
||||
-ms-transform: translate3d(-100%, 0, 0);
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-lr-close,
|
||||
.layer-anim-lr.layer-anim-close {
|
||||
-webkit-animation-name: layer-lr-close;
|
||||
animation-name: layer-lr-close
|
||||
}
|
||||
|
||||
/* top to bottom */
|
||||
@-webkit-keyframes layer-tb {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
-ms-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes layer-tb {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
-ms-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1;
|
||||
animation-timing-function: cubic-bezier(0.7, 0.3, 0.1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-tb {
|
||||
-webkit-animation-name: layer-tb;
|
||||
animation-name: layer-tb
|
||||
}
|
||||
|
||||
/* top to bottom close */
|
||||
@-webkit-keyframes layer-tb-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
-ms-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes layer-tb-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, -100%, 0);
|
||||
-ms-transform: translate3d(0, -100%, 0);
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-tb-close,
|
||||
.layer-anim-tb.layer-anim-close {
|
||||
-webkit-animation-name: layer-tb-close;
|
||||
animation-name: layer-tb-close
|
||||
}
|
||||
|
||||
/* bottom to top */
|
||||
@-webkit-keyframes layer-bt {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
-ms-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes layer-bt {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
-ms-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-bt {
|
||||
-webkit-animation-name: layer-bt;
|
||||
animation-name: layer-bt
|
||||
}
|
||||
|
||||
/* bottom to top close */
|
||||
@-webkit-keyframes layer-bt-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
-ms-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes layer-bt-close {
|
||||
from {
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-ms-transform: translate3d(0, 0, 0);
|
||||
transform: translate3d(0, 0, 0);
|
||||
|
||||
}
|
||||
|
||||
to {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
-ms-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.layer-anim-bt-close,
|
||||
.layer-anim-bt.layer-anim-close {
|
||||
-webkit-animation-name: layer-bt-close;
|
||||
animation-name: layer-bt-close
|
||||
}
|
||||
|
||||
/* 扩展动画结束 */
|
||||
Reference in New Issue
Block a user