Adding modals to the Ratchet component list.
build:
mkdir -p dist
- cat lib/css/base.css lib/css/bars.css lib/css/lists.css lib/css/forms.css lib/css/buttons.css lib/css/chevrons.css lib/css/counts.css lib/css/segmented-controllers.css lib/css/popovers.css lib/css/sliders.css lib/css/toggles.css lib/css/push.css > ./dist/ratchet.tmp.css
+ cat lib/css/base.css lib/css/bars.css lib/css/lists.css lib/css/forms.css lib/css/buttons.css lib/css/chevrons.css lib/css/counts.css lib/css/segmented-controllers.css lib/css/popovers.css lib/css/modals.css lib/css/sliders.css lib/css/toggles.css lib/css/push.css > ./dist/ratchet.tmp.css
cat lib/js/*.js > ./dist/ratchet.tmp.js
@echo "/**\n * ==================================\n * Ratchet v1.0.0\n * Licensed under The MIT License\n * http://opensource.org/licenses/MIT\n * ==================================\n */\n" > ./dist/copywrite.txt
cat ./dist/copywrite.txt ./dist/ratchet.tmp.js > ./dist/ratchet.js
border: 1px solid #000;
border-radius: 3px;
-webkit-overflow-scrolling: touch;
+}/* Modals
+-------------------------------------------------- */
+.modal {
+ position: fixed;
+ top: 0;
+ opacity: 0;
+ z-index: 11;
+ width: 100%;
+ min-height: 100%;
+ overflow: hidden;
+ background-color: #fff;
+ -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;
+}
+
+/* Modal - When active
+-------------------------------------------------- */
+.modal.active {
+ opacity: 1;
+ height: 100%;
+ -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);
}/* Slider styles (to be used with sliders.js)
-------------------------------------------------- */
*/
/* ----------------------------------
+ * MODAL v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+ var findModals = function (target) {
+ var i;
+ var modals = document.querySelectorAll('a');
+ for (; target && target !== document; target = target.parentNode) {
+ for (i = modals.length; i--;) { if (modals[i] === target) return target; }
+ }
+ };
+
+ var getModal = function (event) {
+ var modalToggle = findModals(event.target);
+ if (modalToggle && modalToggle.hash) return document.querySelector(modalToggle.hash);
+ };
+
+ window.addEventListener('touchend', function (event) {
+ var modal = getModal(event);
+ if (modal) modal.classList.toggle('active');
+ });
+}();/* ----------------------------------
* POPOVER v1.0.0
* Licensed under The MIT License
* http://opensource.org/licenses/MIT
opacity: 1 !important;
}
+/* Modal example */
+.iphone .iphone-content .modal { position: absolute; }
+.iphone .iphone-content .modal .content { margin-top: 44px; }
+#myModal.active { background: #cecece; }
+#modalsInPhone #iwindow > .button { margin: 10px; }
+
/* Slider examples */
.component-example-fullbleed .slider,
.component-example-fullbleed .slider li,
<li><a href="#forms">Forms</a></li>
<li><a href="#toggles">Toggles</a></li>
<li><a href="#popovers">Popovers</a></li>
+ <li><a href="#modals">Modals</a></li>
<li><a href="#sliders">Sliders</a></li>
<li><a href="#push">Push</a></li>
</ul>
</pre>
</article>
+
+ <!-- Modals -->
+ <article class="component" id="modals">
+ <h3 class="component-title">Modals</h3>
+
+ <div class="component-example">
+
+ </div>
+
+<pre class="prettyprint">
+<a href="#myModal" class="button">Open modal</a>
+
+<div id="myModal" class="modal">
+ <header class="bar-title">
+ <h1 class="title">Modal</h1>
+ <a class="button" href="#myModal">
+ Close
+ </a>
+ </header>
+
+ <div class="content content-padded">
+ <p>The contents of my modal</p>
+ </div>
+</div>
+</pre>
+
+ <p class="component-description">Modals are designed to only fire from links. Set the value of the toggle links href to the id of a modal.</p>
+
+ </article>
<!-- Slider -->
<article class="component" id="sliders">
--- /dev/null
+/* Modals
+-------------------------------------------------- */
+.modal {
+ position: fixed;
+ top: 0;
+ opacity: 0;
+ z-index: 11;
+ width: 100%;
+ min-height: 100%;
+ overflow: hidden;
+ background-color: #fff;
+ -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;
+}
+
+/* Modal - When active
+-------------------------------------------------- */
+.modal.active {
+ opacity: 1;
+ height: 100%;
+ -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);
+}
\ No newline at end of file
--- /dev/null
+/* ----------------------------------
+ * MODAL v1.0.0
+ * Licensed under The MIT License
+ * http://opensource.org/licenses/MIT
+ * ---------------------------------- */
+
+!function () {
+ var findModals = function (target) {
+ var i;
+ var modals = document.querySelectorAll('a');
+ for (; target && target !== document; target = target.parentNode) {
+ for (i = modals.length; i--;) { if (modals[i] === target) return target; }
+ }
+ };
+
+ var getModal = function (event) {
+ var modalToggle = findModals(event.target);
+ if (modalToggle && modalToggle.hash) return document.querySelector(modalToggle.hash);
+ };
+
+ window.addEventListener('touchend', function (event) {
+ var modal = getModal(event);
+ if (modal) modal.classList.toggle('active');
+ });
+}();
\ No newline at end of file
--- /dev/null
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Modal slideup</title>
+
+ <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
+
+ <link rel="stylesheet" href="../../lib/css/base.css">
+ <link rel="stylesheet" href="../../lib/css/bars.css">
+ <link rel="stylesheet" href="../../lib/css/lists.css">
+ <link rel="stylesheet" href="../../lib/css/forms.css">
+ <link rel="stylesheet" href="../../lib/css/buttons.css">
+ <link rel="stylesheet" href="../../lib/css/chevrons.css">
+ <link rel="stylesheet" href="../../lib/css/counts.css">
+ <link rel="stylesheet" href="../../lib/css/segmented-controllers.css">
+ <link rel="stylesheet" href="../../lib/css/popovers.css">
+ <link rel="stylesheet" href="../../lib/css/modals.css">
+ <link rel="stylesheet" href="../../lib/css/sliders.css">
+ <link rel="stylesheet" href="../../lib/css/toggles.css">
+ <link rel="stylesheet" href="../../lib/css/push.css">
+ <script src="../../lib/js/push.js"></script>
+ <script src="../../lib/js/toggles.js"></script>
+ <script src="../../lib/js/sliders.js"></script>
+ <script src="../../lib/js/popovers.js"></script>
+ <script src="../../lib/js/modals.js"></script>
+ <script src="../../lib/js/segmented-controllers.js"></script>
+ </head>
+ <body>
+
+ <header class="bar-title">
+ <h1 class="title">Modal slideup</h1>
+ </header>
+
+ <div class="content content-padded">
+ <a href="#myModal" class="button">Open modal</a>
+ </div>
+
+ <div id="myModal" class="modal">
+ <header class="bar-title">
+ <h1 class="title">Modal</h1>
+ <a class="button" href="#myModal">
+ Close
+ </a>
+ </header>
+
+ <div class="content content-padded">
+ <p>Honey, check it out, you got me mesmerized
+ With your black hair and fat-ass thighs
+ Street poetry is my everyday
+ But yo, I gotta stop when you trot my way
+ If I was workin at the club you would not pay
+ Aiyyo, my man phife diggy, he got somthin to say</p>
+
+ <p>I like em brown, yellow, puero rican or hatian
+ Name is phife dawg from the zulu nation
+ Told you in the jam that we can get down
+ Now lets knock the boots like the group h-town
+ You got bbd all on your bedroom wall
+ But Im above the rim and this is how I ball
+ A pretty little somethin on the new york street
+ This is how I represent over this here beat</p>
+ <p>Talkin bout you</p>
+
+ <p>Yo, I took you out</p>
+ <p>But sex was on my mind for the whole damn route
+ My mind was in a frenzy and a horny state
+ But I couldnt drop dimes cause *you couldnt relate*</p>
+ </div>
+ </div>
+
+ </body>
+</html>
\ No newline at end of file