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

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

@keyframes slideInDown{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}@keyframes slideOutDown{0%{transform:translateZ(0)}to{transform:translate3d(0,100%,0);visibility:hidden}}.mdc-bottom-sheet,.mdc-bottom-sheet__scrim{box-sizing:border-box;height:100%;left:0;position:fixed;top:0;width:100%}.mdc-bottom-sheet{display:none;z-index:7}.mdc-bottom-sheet.mdc-bottom-sheet--open{display:block}.mdc-bottom-sheet__scrim{background-color:rgba(0,0,0,.32);opacity:0;z-index:-1}.mdc-bottom-sheet__content{animation-duration:.3s;animation-fill-mode:both;backface-visibility:hidden;background-color:#fff;border-top-left-radius:0;border-top-right-radius:0;bottom: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);left:0;overflow:hidden;position:fixed;width:100%}.mdc-bottom-sheet--open .mdc-bottom-sheet__scrim{opacity:1}.mdc-bottom-sheet--open .mdc-bottom-sheet__content{animation-name:slideInDown}.mdc-bottom-sheet--closing .mdc-bottom-sheet__content{animation-name:slideOutDown}