| 1 |
- .drawer{display:none;}.drawer__overlay{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;z-index:200;opacity:0;transition:opacity 0.3s;will-change:opacity;background-color:#000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}.drawer__header{padding:1.5rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;}.drawer__close{margin:0;padding:0;border:none;background-color:transparent;cursor:pointer;width:15px;height:15px;}.drawer__wrapper{position:fixed;top:0;right:0;bottom:0;height:100%;width:100%;max-width:550px;z-index:201;overflow:auto;transition:transform 0.3s;will-change:transform;background-color:#fafafa;display:flex;flex-direction:column;-webkit-transform:translateX(103%);transform:translateX(103%);-webkit-overflow-scrolling:touch;box-shadow:0 2px 6px #777;}.drawer__content{position:relative;overflow-x:hidden;overflow-y:auto;height:100%;flex-grow:1;padding:0rem .5rem;}.drawer--left .drawer__wrapper{left:0;right:auto;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);}.drawer.is-active{display:block;}.drawer.is-visible .drawer__wrapper{-webkit-transform:translateX(0);transform:translateX(0);}.drawer.is-visible .drawer__overlay{opacity:0.5;}
|
