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

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