mahaplatform/reframe

.reframe-tray {
  flex: 1;
  display: flex;

}
.reframe-tray-overlay {
  .opacity-transition(0, 0.5, .25s);
  .opacity(0.5);
  background-color: #000;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.reframe-tray-panel {
  background-color: #FFFFFF;
  position: absolute;
  display: flex;
}
@media only screen and (min-width: 769px) {
  .reframe-tray-panel {
    .opacity-transition(0, 1, .5s);
    width: 768px;
    height: 576px;
    top: 50%;
    left: 50%;
    margin-top: -288px;
    margin-left: -384px;
  }
}
@media only screen and (max-width: 768px) {
  .reframe-tray-panel {
    .translate-y-transition(100%, 0, .25s);
    left: 0;
    right: 0;
    bottom: 0;
    min-height: 400px;
    max-height: 80vh;
  }
}