@moohng/dui
Version:
基于 Vue 3 的轻量级组件库
46 lines (40 loc) • 798 B
CSS
.mask {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 9999;
opacity: 0;
transition: opacity .3s;
pointer-events: none;
}
.mask.transparent {
background-color: transparent;
}
.show > .mask {
opacity: 1;
pointer-events: auto;
}
.dui-actionsheet__body {
position: fixed;
top: initial;
right: 0;
bottom: 0;
left: 0;
z-index: 10000;
transform: translate(0, 100%);
transition: transform .3s;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.dui-actionsheet__body--default {
background-color: #f7f7f7;
border-top-left-radius: 24px;
border-top-right-radius: 24px;
}
.dui-actionsheet.show .dui-actionsheet__body {
transform: translate(0, 0);
}