bottom: 0;
left: 0;
overflow: auto;
- background: #fff;
+ background-color: #fff;
-webkit-transition-property: top, bottom;
transition-property: top, bottom;
- -webkit-transition-duration: .2s, .2s;
- transition-duration: .2s, .2s;
+ -webkit-transition-duration: .2s, .2s;
+ transition-duration: .2s, .2s;
-webkit-transition-timing-function: linear, linear;
transition-timing-function: linear, linear;
-webkit-overflow-scrolling: touch;
height: 40px;
padding: 10px;
margin-bottom: 10px;
- background: #fff;
+ background-color: #fff;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 3px;
box-shadow: 0 1px 1px rgba(255, 255, 255, .2), inset 0 1px 1px rgba(0, 0, 0, .1);
border: 1px solid #000;
border-radius: 3px;
-webkit-overflow-scrolling: touch;
+}/* Modals
+-------------------------------------------------- */
+.modal {
+ position: fixed;
+ top: 0;
+ background-color: #fff;
+ width: 100%;
+
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+
+ -webkit-transition: -webkit-transform .25s ease-in-out, opacity 1ms .25s;
+ transition: transform .25s ease-in-out, opacity 1ms .25s;
+
+ opacity: 0;
+ overflow: hidden;
+ 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: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+
+ opacity: 1;
+ height: 100%;
}/* Slider styles (to be used with sliders.js)
-------------------------------------------------- */