jiro-ui/lib/components/drawer/index.css

A Mithril.js UI library based from construct-ui

.cui-drawer {
  position: fixed;
  z-index: 20; }

.cui-drawer-right,
.cui-drawer-left {
  top: 0;
  height: 100%; }
  .cui-drawer-right .cui-drawer-content,
  .cui-drawer-left .cui-drawer-content {
    min-width: 320px;
    max-width: 97%;
    height: 100%; }

.cui-drawer-right {
  right: 0; }
  .fade-enter .cui-drawer-right .cui-drawer-content,
  .fade-exit-active .cui-drawer-right .cui-drawer-content {
    transform: translateX(100%); }
  .fade-enter-active .cui-drawer-right .cui-drawer-content {
    transform: translateX(0); }

.cui-drawer-left {
  left: 0; }
  .fade-enter .cui-drawer-left .cui-drawer-content,
  .fade-exit-active .cui-drawer-left .cui-drawer-content {
    transform: translateX(-100%); }
  .fade-enter-active .cui-drawer-left .cui-drawer-content {
    transform: translateX(0); }

.cui-drawer-top,
.cui-drawer-bottom {
  width: 100%;
  left: 0; }
  .cui-drawer-top .cui-drawer-content,
  .cui-drawer-bottom .cui-drawer-content {
    width: 100%;
    min-height: 160px;
    max-height: 97%; }

.cui-drawer-top {
  top: 0; }
  .fade-enter .cui-drawer-top .cui-drawer-content,
  .fade-exit-active .cui-drawer-top .cui-drawer-content {
    transform: translateY(-100%); }
  .fade-enter-active .cui-drawer-top .cui-drawer-content {
    transform: translateY(0); }

.cui-drawer-bottom {
  bottom: 0; }
  .fade-enter .cui-drawer-bottom .cui-drawer-content,
  .fade-exit-active .cui-drawer-bottom .cui-drawer-content {
    transform: translateY(100%); }
  .fade-enter-active .cui-drawer-bottom .cui-drawer-content {
    transform: translateY(0); }

.cui-overlay-inline .cui-drawer {
  position: absolute; }

.cui-drawer-content {
  position: relative;
  padding: 15px;
  background: #ffffff;
  z-index: 20;
  box-shadow: 0px 16px 24px -8px rgba(67, 90, 111, 0.3);
  border: solid 1px #c5cdd1; }
  .fade-enter .cui-drawer-content {
    opacity: 0.01;
    transition: opacity 200ms cubic-bezier(0.4, 1, 0.75, 0.9), transform 200ms cubic-bezier(0.4, 1, 0.75, 0.9); }
  .fade-enter-active .cui-drawer-content {
    opacity: 1; }
  .fade-exit .cui-drawer-content {
    transition: opacity 200ms cubic-bezier(0.4, 1, 0.75, 0.9), transform 200ms cubic-bezier(0.54, 1.12, 0.38, 1.11); }
  .fade-exit-active .cui-drawer-content {
    opacity: 0; }