react-draggable-bottom-sheet/dist/index.css

A React component with the bottom sheet experience we have for native mobile applications, but for web ✨

.BottomSheet{align-items:flex-end;bottom:0;color:#0f0e17;display:flex;justify-content:center;left:0;position:fixed;right:0;top:0;transition-property:opacity;z-index:20}.BottomSheet--modalOnDesktop{align-items:center}.BottomSheet--modalOnDesktop .BottomSheet__draggable{pointer-events:none}.BottomSheet--modalOnDesktop .BottomSheet__window{pointer-events:all}.BottomSheet--open{opacity:1;pointer-events:auto}.BottomSheet--closed{opacity:0;transition-delay:.3s}.BottomSheet--closed,.BottomSheet--closed *,.BottomSheet--closed.BottomSheet--modalOnDesktop .BottomSheet__window{pointer-events:none}.BottomSheet__backdrop{bottom:0;left:0;opacity:0;pointer-events:none;position:absolute;right:0;top:0;transition-duration:.5s;transition-property:opacity;z-index:20}.BottomSheet__backdrop--active{background-color:#000;opacity:1;opacity:.7;pointer-events:auto}.BottomSheet__draggable{max-width:72rem;transition-duration:.3s;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);width:100%}.BottomSheet__window-wrap{background-color:#fff;display:flex;flex-direction:column;max-height:100vh;position:relative;z-index:40}.BottomSheet__drag-indicator-wrap{align-items:center;display:flex;justify-content:center;padding-bottom:1rem;padding-top:1rem}.BottomSheet__drag-indicator{background-color:#0f0e17;height:2px;width:2.5rem}.BottomSheet__window{overflow-y:auto}.BottomSheet__window::-webkit-scrollbar{display:none}