git.roojs.org Git - ratchet/blob - lib/css/modals.css

   1 /* Modals
   2 -------------------------------------------------- */
   3 .modal {
   4   position: fixed;
   5   top: 0;
   6   background-color: #fff;
   7   width: 100%;
   8
   9   -webkit-transform: translateY(100%);
  10           transform: translateY(100%);
  11
  12   -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
  13           transition:         transform .25s ease-in-out, opacity 1ms .25s;
  14
  15   opacity: 0;
  16   overflow: hidden;
  17
  18   /*
  19       Normally, we'd use '1', … ratchet uses '10'
  20       for the title bar, so deal with that.
  21   */
  22   z-index: 11;
  23
  24   min-height: 100%;
  25 }
  26
  27 /* Modal - When active
  28 -------------------------------------------------- */
  29 .modal.active {
  30   -webkit-transition: -webkit-transform .25s ease-in-out;
  31       transition:     transform: .25 ease-in-out;
  32
  33   -webkit-transform: translateY(0);
  34           transform: translateY(0);
  35
  36   opacity: 1;
  37   height: 100%;
  38 }