adui
Version:
<div> <img src="https://wxa.wxs.qq.com/mpweb/delivery/legacy/wxadtouch/upload/t1/od834zef_52939fc6.png" style="margin:40px 0 0 -8px; background-color: #fcfcfc; box-shadow: none;" /> </div>
2 lines (1 loc) • 4.55 kB
CSS
.adui-drawer-wrapper,.adui-drawer-mask{position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden}.adui-drawer-mask{will-change:opacity;background-color:rgba(0,0,0,.65);pointer-events:initial}.adui-drawer-wrapper{outline:none;pointer-events:none}.adui-drawer-inner{position:absolute;display:flex;flex-direction:column;background-color:#fff;pointer-events:initial;overflow:auto}@supports(overflow: overlay){.adui-drawer-inner{overflow:overlay}}.adui-drawer-inner::-webkit-scrollbar{width:14px;height:14px}.adui-drawer-inner::-webkit-scrollbar-thumb{min-width:14px;min-height:14px;background-color:rgba(0,0,0,.15);background-clip:content-box;border:4px solid rgba(0,0,0,0);border-radius:14px}.adui-drawer-inner::-webkit-scrollbar-thumb:hover{background-color:rgba(0,0,0,.4)}.adui-drawer-inner::-webkit-scrollbar-thumb:active{background-color:rgba(0,0,0,.65)}.adui-drawer-header{flex:none;position:-webkit-sticky;position:sticky;z-index:calc(var(--z-index-tooltip) + 1);top:0;display:flex;align-items:center;padding-left:4px;height:72px;background-color:#fff;box-shadow:0 1px 0 0 rgba(0,0,0,.06),0 3px 6px 0 rgba(0,0,0,.04)}.adui-drawer-header-content{flex:1}.adui-drawer-header-close{flex:none}.adui-drawer-header-divider{flex:none;margin-right:4px;margin-left:4px;width:1px;height:24px;background-color:var(--gray-300)}.adui-drawer-body{flex:1;min-height:0}.adui-drawer-left,.adui-drawer-right{top:0;min-width:280px;height:100vh}.adui-drawer-left.adui-drawer-large,.adui-drawer-right.adui-drawer-large{max-width:1440px;width:90vw}.adui-drawer-left.adui-drawer-medium,.adui-drawer-right.adui-drawer-medium{max-width:1280px;width:70vw}.adui-drawer-left.adui-drawer-small,.adui-drawer-right.adui-drawer-small{max-width:960px;width:40vw}.adui-drawer-left.adui-drawer-mini,.adui-drawer-right.adui-drawer-mini{max-width:400px;width:25vw}.adui-drawer-top,.adui-drawer-bottom{left:0;width:100vw;min-height:72px}.adui-drawer-top.adui-drawer-large,.adui-drawer-bottom.adui-drawer-large{height:90vh}.adui-drawer-top.adui-drawer-medium,.adui-drawer-bottom.adui-drawer-medium{height:70vh}.adui-drawer-top.adui-drawer-small,.adui-drawer-bottom.adui-drawer-small{height:40vh}.adui-drawer-top.adui-drawer-mini,.adui-drawer-bottom.adui-drawer-mini{height:25vh}.adui-drawer-left{left:0}.adui-drawer-right{right:0}.adui-drawer-top{top:0}.adui-drawer-left,.adui-drawer-right,.adui-drawer-top{box-shadow:var(--box-shadow-elevation-4)}.adui-drawer-bottom{bottom:0}.adui-drawer-mask-appear,.adui-drawer-mask-enter{opacity:0}.adui-drawer-mask-appear.adui-drawer-mask-appear-active,.adui-drawer-mask-enter.adui-drawer-mask-enter-active{opacity:1;transition:all var(--motion-duration-base) var(--ease-out)}.adui-drawer-mask-leave{opacity:1}.adui-drawer-mask-leave.adui-drawer-mask-leave-active{opacity:0;transition:all var(--motion-duration-base) var(--ease-in)}.adui-drawer-top-appear,.adui-drawer-top-enter{opacity:.5;transform:translate3d(0, -100%, 0)}.adui-drawer-right-appear,.adui-drawer-right-enter{opacity:.5;transform:translate3d(100%, 0, 0)}.adui-drawer-bottom-appear,.adui-drawer-bottom-enter{opacity:.5;transform:translate3d(0, 100%, 0)}.adui-drawer-left-appear,.adui-drawer-left-enter{opacity:.5;transform:translate3d(-100%, 0, 0)}.adui-drawer-top-appear.adui-drawer-top-appear-active,.adui-drawer-top-enter.adui-drawer-top-enter-active,.adui-drawer-right-appear.adui-drawer-right-appear-active,.adui-drawer-right-enter.adui-drawer-right-enter-active,.adui-drawer-bottom-appear.adui-drawer-bottom-appear-active,.adui-drawer-bottom-enter.adui-drawer-bottom-enter-active,.adui-drawer-left-appear.adui-drawer-left-appear-active,.adui-drawer-left-enter.adui-drawer-left-enter-active{opacity:1;transform:translate3d(0, 0, 0);transition:all var(--motion-duration-slow) var(--ease-out)}.adui-drawer-top-leave,.adui-drawer-right-leave,.adui-drawer-bottom-leave,.adui-drawer-left-leave{opacity:1;transform:translate3d(0, 0, 0)}.adui-drawer-top-leave.adui-drawer-top-leave-active{opacity:.5;transform:translate3d(0, -100%, 0);transition:all var(--motion-duration-base) var(--ease-in)}.adui-drawer-right-leave.adui-drawer-right-leave-active{opacity:.5;transform:translate3d(100%, 0, 0);transition:all var(--motion-duration-base) var(--ease-in)}.adui-drawer-bottom-leave.adui-drawer-bottom-leave-active{opacity:.5;transform:translate3d(0, 100%, 0);transition:all var(--motion-duration-base) var(--ease-in)}.adui-drawer-left-leave.adui-drawer-left-leave-active{opacity:.5;transform:translate3d(-100%, 0, 0);transition:all var(--motion-duration-base) var(--ease-in)}