From e855cc5f759a9b1a793b34255d49c1a94e0579fe Mon Sep 17 00:00:00 2001 From: Ben Schwarz Date: Mon, 24 Dec 2012 09:53:34 +1100 Subject: [PATCH] Added styles for modal Ported over from my demo app, tried to match coding style --- lib/css/modals.css | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 lib/css/modals.css diff --git a/lib/css/modals.css b/lib/css/modals.css new file mode 100644 index 0000000..f188c7e --- /dev/null +++ b/lib/css/modals.css @@ -0,0 +1,37 @@ +/* Modals +-------------------------------------------------- */ +.modal { + position: fixed; top: 0; + background-color: #fff; + width: 100%; + + -webkit-transform: translateY(100%); + transform: translateY(100%); + + -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s; + transition: transform .25s ease-in-out, opacity 1ms .25s; + + opacity: 0; + overflow: hidden; + + /* + Normally, we'd use '1', … ratchet uses '10' + for the title bar, so deal with that. + */ + z-index: 11; + + min-height: 100%; +} + +/* Modal - When active +-------------------------------------------------- */ +.modal.active { + -webkit-transition: -webkit-transform .25s ease-in-out; + transition: transform: .25 ease-in-out; + + -webkit-transform: translateY(0); + transform: translateY(0); + + opacity: 1; + height: 100%; +} \ No newline at end of file -- 2.39.2