materialize modal open from top to bottom

Question

I'm trying to open the materialize modal drooping from top to bottom, exactly like in this fiddle but reverse from top to bottom. Unfortunately is pretty hard to modify something on materialize modal because some of the css properties have been added from materialize js. The special effect from bottom to top is added by "bottom-sheet" class but a "top-sheet" class is not exist.

.modal.bottom-sheet {
  top: auto;
  bottom: -100%;
  margin: 0;
  width: 100%;
  max-height: 45%;
  border-radius: 0;
  will-change: bottom, opacity;
}

So how can I modify the open effect to be reversed and the modal to be eopened from top to bottom?

Answer 1

I know this solution is soooooo hacky, but at least it works.

.modal.top-sheet {
  top: 0% !important;
  bottom: auto !important;
  transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) .2s;
  will-change: transform;
  transform: translate(0, -100%) scale(1) !important;
  width: 100%;
  opacity: 1 !important;
}

.modal.top-sheet.open {
   transition: transform cubic-bezier(0.22, 0.61, 0.36, 1) .35s .25s;
}

.modal.top-sheet.open:not([style*="display: none"]):not([style*="opacity: 0;"]) {
  transform: translate(0, 0%) !important;
}

https://jsfiddle.net/xmz0afhf/1/

The principle:

1. Setting "bottom" property to "auto !important"
2. Overwriting transition property to include "top"
3. Applying css rule that is applied when display prop is not "none" and "opacity" prop is not "0"

Edit: updated so you can use bottom-sheet and top-sheet separately