balm-ui/components/side-sheet/side-sheet.css

A modular and customizable UI library based on Material Design and Vue 3

@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateX(0)}}@keyframes slideOutRight{0%{transform:translateX(0)}to{transform:translate3d(100%,0,0);visibility:hidden}}.mdc-side-sheet,.mdc-side-sheet__scrim{box-sizing:border-box;height:100%;position:fixed;right:0;top:0;width:100%}.mdc-side-sheet{display:none;z-index:7}.mdc-side-sheet.mdc-side-sheet--open{display:block}.mdc-side-sheet__scrim{background-color:rgba(0,0,0,.32);opacity:0;z-index:-1}.mdc-side-sheet__container{animation-duration:.3s;animation-fill-mode:both;backface-visibility:hidden;background-color:#fff;border-bottom-left-radius:0;border-top-left-radius:0;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12);display:flex;flex-direction:column;height:100%;overflow:hidden;position:fixed;right:0;top:0;width:40%}.mdc-side-sheet--open .mdc-side-sheet__scrim{opacity:1}.mdc-side-sheet--open .mdc-side-sheet__container{animation-name:slideInRight}.mdc-side-sheet--closing .mdc-side-sheet__container{animation-name:slideOutRight}@media (max-width:599px){.mdc-side-sheet__container{width:80%}}.mdc-side-sheet__wrapper{flex:1;padding:24px 24px 0 16px}.mdc-side-sheet__header{align-items:center;display:flex;justify-content:space-between}.mdc-side-sheet__title{margin:0}.mdc-side-sheet__actions{border-top:1px solid rgba(0,0,0,.12);padding:12px 24px}