meri-design/dist/theme/Drawer.css

基于vue框架的ui库

/*!
 * @meri-design v2.2.19-beta10
 * (c) 2019-2022 YuShu-Web
 * Released under the MIT License.
 * 2025-01-14 15:25:40
 */.p-loading16px{display:inline-block;height:100%;line-height:100%;text-align:center;width:100%}.p-loading16px .p-loading16px-line{animation:loading16px .5s linear infinite;height:100%;min-height:12px;min-width:12px;width:100%}@-moz-keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-webkit-keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@-o-keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes loading16px{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.slideRightLeft-enter-active{animation:m-slideInRight .3s ease-out}.slideRightLeft-leave-active{animation:m-slideOutLeft .3s ease-in}@-moz-keyframes m-slideInRight{0%{opacity:0;transform:translate3d(100%,0,0);visibility:visible}to{opacity:1;transform:translateZ(0)}}@-webkit-keyframes m-slideInRight{0%{opacity:0;transform:translate3d(100%,0,0);visibility:visible}to{opacity:1;transform:translateZ(0)}}@-o-keyframes m-slideInRight{0%{opacity:0;transform:translate3d(100%,0,0);visibility:visible}to{opacity:1;transform:translateZ(0)}}@keyframes m-slideInRight{0%{opacity:0;transform:translate3d(100%,0,0);visibility:visible}to{opacity:1;transform:translateZ(0)}}@-moz-keyframes m-slideOutLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%,0,0);visibility:hidden}}@-webkit-keyframes m-slideOutLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%,0,0);visibility:hidden}}@-o-keyframes m-slideOutLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%,0,0);visibility:hidden}}@keyframes m-slideOutLeft{0%{opacity:1;transform:translateZ(0)}to{opacity:0;transform:translate3d(100%,0,0);visibility:hidden}}.p-drawer-box{display:block;position:fixed;transition:right .3s;z-index:3000}.p-drawer-box,.p-drawer-shadow{height:100%;right:0;top:0;width:100%}.p-drawer-shadow{opacity:0;position:absolute;z-index:2999}.p-drawer-shadow-event{pointer-events:none}.p-drawer{background-color:#fff;box-shadow:0 2px 10px rgba(31,35,41,.1);font-size:0;height:100%;max-width:680px;min-width:304px;outline:none;position:absolute;right:0;top:0;z-index:3000}.p-drawer-title{align-items:center;border-bottom:1px solid #e1e5eb;display:flex;height:56px;justify-content:space-between;padding-left:32px;padding-right:32px;position:relative;width:100%}.p-drawer-title .p-drawer-title-content{font-size:0;width:calc(100% - 16px)}.p-drawer-title .p-drawer-title-icon{border-radius:4px;display:inline-block;height:24px;padding:2px;width:24px}.p-drawer-title .p-drawer-title-icon:hover{background:#e8ecf0}.p-drawer-title .p-drawer-title-icon svg{cursor:pointer}.p-drawer-title-top-shadow{box-shadow:inset 0 10px 10px -8px rgba(31,35,41,.1)}.p-drawer-content{height:calc(100% - 56px);max-width:680px;min-width:304px;width:100%}.p-drawer-content .p-drawer-content-loading{padding:16px;text-align:center;width:100%}.p-drawer-content .p-drawer-content-loading svg{vertical-align:middle;width:16px}.p-drawer-content .p-drawer-content-loading span{color:#626c78;font-size:14px;vertical-align:middle}.p-drawer-content-bottom{height:calc(100% - 132px)}.p-drawer-handle{background-color:#fff;height:76px;padding:24px 32px 20px;width:100%}.p-drawer-handle-bottom{bottom:0;box-shadow:0 -2px 10px rgba(31,35,41,.1);position:absolute;right:0}.p-drawer-loading{background-color:hsla(0,0%,100%,.8);height:100%;left:0;position:absolute;top:0;width:100%;z-index:11}.p-drawer-loading .p-drawer-loading-svg{height:40px;margin:50% auto 0;width:40px}.p-loading16px-drawer{color:#c4c9cf}