framework7rails 0.9.7 → 1.0.0

data/Framework7-0.9.6/kitchen-sink/contacts.html

@@ -0,0 +1,190 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Contacts</div>
+    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="contacts" class="page">
+    <div class="page-content contacts-content">
+      <div class="list-block contacts-block">
+        <div class="list-group">
+          <ul>
+            <li class="list-group-title">A</li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Aaron </div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Abbie</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Adam</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Adele</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Agatha</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Agnes</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Albert</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Alexander</div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="list-group">
+          <ul>
+            <li class="list-group-title">B</li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Bailey</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Barclay</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Bartolo</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Bellamy</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Belle</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Benjamin</div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="list-group">
+          <ul>
+            <li class="list-group-title">C</li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Caiden</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Calvin</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Candy</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Carl</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Cherilyn</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Chester</div>
+                </div>
+              </div>
+            </li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Chloe</div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+        <div class="list-group">
+          <ul>
+            <li class="list-group-title">V</li>
+            <li>
+              <div class="item-content">
+                <div class="item-inner">
+                  <div class="item-title">Vladimir</div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/core-features.html

@@ -0,0 +1,70 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
+    <div class="center sliding">Core Features</div>
+    <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="core-features" class="page">
+    <div class="page-content">
+      <div class="content-block-title">Ultra Easy To Use</div>
+      <div class="content-block">
+        <div class="content-block-inner">
+          <p>All you need to make it work is a simple HTML layout and two lines of JavaScript: </p>
+          <p>var app = new Framework7();<br>app.addView('.main-view');</p>
+        </div>
+      </div>
+      <div class="content-block-title">Custom DOM Library</div>
+      <div class="content-block">
+        <div class="content-block-inner">
+          <p>Framework7 is library agnostic, so you don't need to use any other library (like jQuery, Zepto, Mootols, etc) to make it work. If you need to work with DOM (like jQuery) Framework7 may help you to avoid, it contains custom function to work with DOM. Its syntax is the same as in jQuery with almost the same methods, and also support jQuery-like chaining! The following methods are available with the same syntax and functionality: <b> .addClass()</b><b> .removeClass()</b><b> .hasClass()</b><b> .toggleClass()</b><b> .on()</b><b> .off()</b><b> .attr()</b><b> .transform()</b><b> .transition()</b><b> .transitionEnd()</b><b> .animationEnd()</b><b> .width()</b><b> .offset()</b><b> .html()</b><b> .is()</b><b> .parents()</b><b> .parent()</b><b> .children()</b><b> .append()</b><b> .prepend()</b><b> .find()</b><b> .remove()</b></p>
+          <p>This function can be exposed for your usage by calling for example $ =  app.$;</p>
+        </div>
+      </div>
+      <div class="content-block-title">XHR + Caching</div>
+      <div class="content-block">
+        <div class="content-block-inner">
+          <p>Framework7 utilizes own methods to load pages via Ajax with internal configurable caching that allows to load pages faster and saves a lot of traffic for your users!</p>
+        </div>
+      </div>
+      <div class="content-block-title">History</div>
+      <div class="content-block">
+        <div class="content-block-inner">
+          <p>When you navigate deeper and deeper you may face a problem about how to get back in the same order? Framework7 solves this problem by collecting navigation history. It is epsecially good if your users may come to the same page from different pages. And with Framework7 it is enough just to add "back" class to your link, and it will recognize what page to load.</p>
+        </div>
+      </div>
+      <div class="content-block-title">Previous Page Preloading</div>
+      <div class="content-block">
+        <div class="content-block-inner">
+          <p>Framework7 preloads previous page (when available) so your users can always do the nice swipe back gesture to get that page.</p>
+        </div>
+      </div>
+      <div class="content-block-title">Multiple Views</div>
+      <div class="content-block">
+        <div class="content-block-inner">
+          <p>Framework7 supports unlimited number of different isolated views, like the main view where you are reading this text and another view in <a href="#" class="open-panel" data-panel="right">right panel</a>. And the fun thing is that you can control one view from another by using "data-view" attribute on links.</p>
+        </div>
+      </div>
+      <div class="content-block-title">Performant Animations</div>
+      <div class="content-block">
+        <div class="content-block-inner">
+          <p>It is all about performance and Framework7 uses high performance css animations and 3d transformations to achieve the best result.</p>
+        </div>
+      </div>
+      <div class="content-block-title">Easy To Customize</div>
+      <div class="content-block">
+        <div class="content-block-inner">
+          <p>With Framework7 everything is simple, all styles are divided by parts into small .less files, so you can easy, very easy, bring your own custom styles to your app.</p>
+        </div>
+      </div>
+      <div class="content-block-title">Ultra Lightweight</div>
+      <div class="content-block">
+        <div class="content-block-inner">
+          <p>Framework7 is a library agnostic and ultra lightweight.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/css/kitchen-sink.css

@@ -0,0 +1,233 @@
+.panel {
+  background: #222;
+  color: #dddddd;
+}
+.popover {
+  width: 240px;
+}
+.ks-grid div[class*="col-"] {
+  background: #fff;
+  text-align: center;
+  color: #000;
+  border: 1px solid #ddd;
+  padding: 5px;
+  margin-bottom: 15px;
+}
+.ks-preloaders {
+  text-align: center;
+}
+.ks-preloader-big {
+  width: 42px;
+  height: 42px;
+}
+.statusbar-overlay {
+  background: #000;
+}
+.statusbar-overlay.with-panel-left {
+  background: #222;
+}
+.statusbar-overlay.with-panel-right {
+  background: #000;
+}
+.page[data-page="tabbar"] .tabbar,
+.page[data-page="tabbar-labels"] .tabbar {
+  -webkit-transform: none;
+  -moz-transform: none;
+  -ms-transform: none;
+  -o-transform: none;
+  transform: none;
+}
+.page[data-page="tabbar-labels"] .page-content {
+  padding-bottom: 50px;
+}
+@media all and (min-width: 768px) {
+  .page[data-page="tabbar-labels"] .page-content {
+    padding-bottom: 56px;
+  }
+}
+i.ks-tabbar-icon-1 {
+  width: 30px;
+  height: 30px;
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='%23929292'><g><circle cx='15.2' cy='8.8' r='1.5'/><polygon points='16.7,12.3 16.7,11.7 16.7,11.3 13.7,11.3 13.7,12.3 14.7,12.3 14.7,20.3 13.7,20.3 13.7,21.3 17.7,21.3 17.7,20.3 16.7,20.3'/><path d='M15.2,2.3C8.3,2.3,2.7,7.9,2.7,14.8s5.6,12.5,12.5,12.5c6.9,0,12.5-5.6,12.5-12.5S22.1,2.3,15.2,2.3z M15.2,26.3 c-6.3,0-11.5-5.2-11.5-11.5S8.8,3.3,15.2,3.3s11.5,5.2,11.5,11.5S21.5,26.3,15.2,26.3z'/></g></svg>");
+}
+.active i.ks-tabbar-icon-1 {
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 30' fill='%23007aff'><path d='M15,2.6C8.1,2.6,2.5,8.2,2.5,15.1C2.5,22,8.1,27.6,15,27.6S27.5,22,27.5,15.1C27.5,8.2,21.9,2.6,15,2.6z M15,7.6 c0.8,0,1.5,0.7,1.5,1.5c0,0.8-0.7,1.5-1.5,1.5c-0.8,0-1.5-0.7-1.5-1.5C13.5,8.3,14.2,7.6,15,7.6z M17.5,21.6h-4v-1h1v-8h-1v-1h3V12 v0.6v8h1V21.6z'/></svg>");
+}
+i.ks-tabbar-icon-2 {
+  width: 25px;
+  height: 30px;
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 17' fill='%23929292'><path d='M19.5,0h-14L0,6v11h25V6L19.5,0z M5.9,1h13.2l4.5,5H16c0,1.9-1.6,3.4-3.5,3.4C10.6,9.4,9,7.9,9,6H1.4L5.9,1z M24,16H1V7h7.1 c0.5,1.9,2.3,3.4,4.4,3.4s3.9-1.5,4.4-3.4H24V16z'/></svg>");
+}
+.active i.ks-tabbar-icon-2 {
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 17' fill='%23007aff'><path d='M19.5,0h-14L0,6v11h25V6L19.5,0z M5.9,1h13.2l4.5,5H16c0,1.9-1.6,3.4-3.5,3.4C10.6,9.4,9,7.9,9,6H1.3L5.9,1z'/></svg>");
+}
+i.ks-tabbar-icon-3 {
+  width: 30px;
+  height: 30px;
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 19' fill='%23929292'><path d='M16.8,1c3.7,0,6.8,3,6.8,6.8l0,0.1c0,0,0,0.1,0,0.1l0,1l1,0C27,9,29,11,29,13.5c0,2.5-2,4.5-4.5,4.5H6c-2.8,0-5-2.2-5-5 c0-2.1,1.4-4,3.4-4.7L5,8.1l0.1-0.6C5.3,6,6.5,5,8,5c0.4,0,0.9,0.1,1.3,0.3l0.9,0.5l0.4-0.9C11.8,2.5,14.2,1,16.8,1 M16.8,0 c-3.1,0-5.7,1.8-7,4.4C9.2,4.2,8.6,4,8,4C6,4,4.4,5.4,4.1,7.3C1.7,8.1,0,10.4,0,13c0,3.3,2.7,6,6,6h18.5v0c3,0,5.5-2.5,5.5-5.5 c0-3-2.5-5.5-5.5-5.5c0-0.1,0-0.2,0-0.2C24.5,3.5,21.1,0,16.8,0L16.8,0z'/></svg>");
+}
+.active i.ks-tabbar-icon-3 {
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 30 19' fill='%23007aff'><path d='M24.5,8c0-0.1,0-0.2,0-0.2C24.5,3.5,21,0,16.8,0c-3.1,0-5.7,1.8-7,4.4C9.2,4.2,8.6,4,8,4C6,4,4.4,5.4,4,7.3 C1.7,8.1,0,10.4,0,13c0,3.3,2.7,6,6,6h18.5v0c3,0,5.5-2.5,5.5-5.5C30,10.5,27.5,8,24.5,8z'/></svg>");
+}
+i.ks-tabbar-icon-4 {
+  width: 25px;
+  height: 30px;
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 19' fill='%23929292'><g><path d='M23,3h-4.1l-2.4-2.4c0,0,0,0,0,0l0,0C16.1,0.2,15.6,0,15,0h-5C9.5,0,8.9,0.3,8.6,0.6l0,0L6.2,3H2C0.9,3,0,3.9,0,5v12 c0,1.1,0.9,2,2,2h21c1.1,0,2-0.9,2-2V5C25,3.9,24.1,3,23,3z M24,17c0,0.6-0.4,1-1,1H2c-0.6,0-1-0.4-1-1V5c0-0.6,0.4-1,1-1h4.2h0.4 l0.3-0.3l1.2-1.2l0,0.1l1.1-1.2C9.5,1.1,9.8,1,10,1h5c0.3,0,0.5,0.1,0.7,0.3l2.4,2.4L18.4,4h0.4H23c0.6,0,1,0.4,1,1V17z'/><path d='M12.5,4C8.9,4,6,6.9,6,10.5c0,3.6,2.9,6.5,6.5,6.5c3.6,0,6.5-2.9,6.5-6.5C19,6.9,16.1,4,12.5,4z M12.5,16 c-3,0-5.5-2.5-5.5-5.5C7,7.5,9.5,5,12.5,5S18,7.5,18,10.5C18,13.5,15.5,16,12.5,16z'/><path d='M12.5,6C10,6,8,8,8,10.5C8,13,10,15,12.5,15s4.5-2,4.5-4.5C17,8,15,6,12.5,6z M12.5,14C10.6,14,9,12.4,9,10.5 C9,8.6,10.6,7,12.5,7S16,8.6,16,10.5C16,12.4,14.4,14,12.5,14z'/></g></svg>");
+}
+.active i.ks-tabbar-icon-4 {
+  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 25 19' fill='%23007aff'><g><path d='M23,3h-4.1l-2.4-2.4c0,0,0,0,0,0l0,0C16.1,0.2,15.6,0,15.1,0h-5C9.5,0,9,0.3,8.6,0.6l0,0L6.2,3H2C0.9,3,0,3.9,0,5v12 c0,1.1,0.9,2,2,2h21c1.1,0,2-0.9,2-2V5C25,3.9,24.1,3,23,3z M12.5,16c-3,0-5.5-2.5-5.5-5.5C7,7.5,9.5,5,12.5,5c3,0,5.5,2.5,5.5,5.5 C18,13.5,15.5,16,12.5,16z'/><circle cx='12.5' cy='10.5' r='4.5'/></g></svg>");
+}
+.ks-demo-slider,
+.ks-carousel-slider {
+  font-size: 25px;
+  font-weight: 300;
+}
+.ks-demo-slider .slider-slide,
+.ks-carousel-slider .slider-slide {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  -webkit-justify-content: center;
+  justify-content: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  -webkit-align-items: center;
+  align-items: center;
+  background: #fff;
+}
+.ks-carousel-slider .slider-slide {
+  box-sizing: border-box;
+  border: 1px solid #ccc;
+  background: #fff;
+}
+.page[data-page="slider-multiple"] .slider-container {
+  margin: 35px 0;
+  font-size: 18px;
+  height: 120px;
+}
+.ks-slider-custom {
+  height: 100%;
+}
+.ks-slider-custom .slider-container {
+  background: #000;
+}
+.ks-slider-custom .slider-slide {
+  -webkit-background-size: cover;
+  background-size: cover;
+  background-position: center;
+}
+.ks-slider-custom .slider-pagination .slider-pagination-bullet {
+  cursor: pointer;
+  width: 10px;
+  height: 10px;
+  background: rgba(255, 255, 255, 0);
+  opacity: 1;
+  border-radius: 0;
+  -webkit-transition: 200ms;
+  -moz-transition: 200ms;
+  -ms-transition: 200ms;
+  -o-transition: 200ms;
+  transition: 200ms;
+  position: relative;
+  -webkit-transform: scale(0.9);
+  -moz-transform: scale(0.9);
+  transform: scale(0.9);
+  box-sizing: border-box;
+  border: 1px solid rgba(255, 255, 255, 0.8);
+}
+.ks-slider-custom .slider-pagination .slider-pagination-active {
+  z-index: 1;
+  border: 1px solid #007aff;
+  -webkit-transform: scale(1.4);
+  -moz-transform: scale(1.4);
+  transform: scale(1.4);
+}
+.ks-slider-custom .slider-prev-button,
+.ks-slider-custom .slider-next-button {
+  width: 44px;
+  height: 44px;
+  background: rgba(0, 0, 0, 0.8);
+  position: absolute;
+  top: 50%;
+  text-align: center;
+  line-height: 44px;
+  margin-top: -22px;
+}
+.ks-slider-custom .slider-next-button {
+  right: 0;
+}
+.ks-slider-custom .slider-prev-button {
+  left: 0;
+}
+.custom-accordion {
+  padding-left: 0;
+  padding-right: 0;
+}
+.custom-accordion .accordion-item-toggle {
+  padding: 0px 15px;
+  height: 44px;
+  line-height: 44px;
+  font-size: 17px;
+  color: #000;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  cursor: pointer;
+}
+.custom-accordion .accordion-item-toggle:active {
+  background: rgba(0, 0, 0, 0.15);
+}
+.custom-accordion .accordion-item-toggle span {
+  display: inline-block;
+  margin-left: 15px;
+}
+html[dir="rtl"] .custom-accordion .accordion-item-toggle span {
+  margin-left: 0;
+  margin-right: 15px;
+}
+.custom-accordion .accordion-item:last-child .accordion-item-toggle {
+  border-bottom: none;
+}
+.custom-accordion .icon-ks-plus,
+.custom-accordion .icon-ks-minus {
+  display: inline-block;
+  width: 22px;
+  height: 22px;
+  border: 1px solid #000;
+  border-radius: 100%;
+  line-height: 20px;
+  text-align: center;
+}
+.custom-accordion .icon-ks-minus {
+  display: none;
+}
+.custom-accordion .accordion-item-expanded .icon-ks-minus {
+  display: inline-block;
+}
+.custom-accordion .accordion-item-expanded .icon-ks-plus {
+  display: none;
+}
+.custom-accordion .accordion-item-content {
+  padding: 0px 15px;
+}
+.ks-layout-theme {
+  height: 44px;
+  border: 1px solid #aaa;
+  cursor: pointer;
+}
+.ks-layout-theme.ks-layout-default {
+  background: #efeff4;
+}
+.ks-layout-theme.ks-layout-dark {
+  background: #222426;
+}
+.ks-layout-theme.ks-layout-white {
+  background: #fff;
+}
+.ks-color-theme {
+  height: 44px;
+  border: 1px solid #aaa;
+  cursor: pointer;
+  margin-bottom: 10px;
+}

data/Framework7-0.9.6/kitchen-sink/deep-2.html

@@ -0,0 +1,22 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link">Deep Navbar</a></div>
+    <div class="center sliding">Deep 2</div>
+    <div class="right sliding"><a href="#" class="link">Deep 3</a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="index" class="page">
+    <div class="page-content">
+      <div class="content-block-title">Welcome to Framework7</div>
+      <div class="content-block">
+        <div class="content-block-inner">
+          <p>Framework7 - is the free (Open Source) and ultra lightweight mobile framework for development of hybrid (Phonegap) or web apps with iOS7 native look and feel. It is intended to use in mobile websites, mobile web apps, and mobile native apps. Designed for iOS Safari, but also works great on desktop Chrome and Safari. Framework7 is created by Vladimir Kharlampidi (The iDangero.us).</p>
+          <p>Main approach of the Framework7 is to give you an instrument, easy and clear, for building iOS7 apps on HTML. Framework7 is full of freedom, it doesn't put you in a strict frames like other HTML mobile frameworks (for example like jQuery Mobile with crazy "data-role" attributes or Sencha Touch where you need to be JS pro). Framework7 doesn't try to do everything for you, no, Framework7 gives you a freedom, it has ultra simple and clean HTML layout, all basic interfaces (futher more), animations, work with views, and simple customization and styling opportunities.</p>
+          <p>And yes, Framework7 doesn't try to be compatible with all platforms, it is focused only on iOS7 to bring the best experience and simplicity.</p>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/deep-navbar-2.html

@@ -0,0 +1,19 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link">Deep Navbar</a></div>
+    <div class="center sliding">Deep 2</div>
+    <div class="right sliding"><a href="deep-navbar-3.html" class="link">Deep 3</a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="deep-navbar-2" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p><a href="deep-navbar-3.html" class="button">Go to page 3</a></p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.</p>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/deep-navbar-3.html

@@ -0,0 +1,19 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link">Deep 2</a></div>
+    <div class="center sliding">Deep 3</div>
+    <div class="right sliding"><a href="index.html" class="link">Framework7</a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="deep-navbar-3" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p><a href="index.html" class="button">Go to home page</a></p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.</p>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet rhoncus odio. Suspendisse vel lectus neque. Mauris tincidunt dolor a felis vulputate, at accumsan risus convallis. Sed pulvinar malesuada enim, a consequat felis lobortis a. Morbi faucibus felis in libero lacinia blandit. Pellentesque vitae volutpat metus. In venenatis mauris massa, sed hendrerit augue pulvinar nec. Sed justo magna, lacinia vel tincidunt sed, tristique sit amet est. Nam iaculis dictum laoreet. Donec sed risus sed mauris ultricies aliquam sit amet in enim. Nullam tellus est, imperdiet et adipiscing consequat, consectetur vel nibh. Cras massa nibh, volutpat sit amet velit vel, suscipit tincidunt enim. Curabitur luctus elit id pharetra bibendum. Nulla ut dui eget nulla hendrerit commodo. Pellentesque placerat mi eget dolor rutrum, consectetur mattis mi tincidunt.</p>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/deep-navbar.html

@@ -0,0 +1,18 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="index.html" class="back link">Navbars</a></div>
+    <div class="center sliding">Deep Navbar</div>
+    <div class="right sliding"><a href="deep-navbar-2.html" class="link">Deep 2</a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="deep-navbar" class="page">
+    <div class="page-content">
+      <div class="content-block">
+        <p>This demo demonstrates Framework7 exclusive behavior of dynamic sliding navigation bars. Just click the button below and look how navbar links will change. And don't forget to try swipe-back gesture on next pages:</p>
+        <p><a href="deep-navbar-2.html" class="button">Go to page 2</a></p>
+      </div>
+    </div>
+  </div>
+</div>

data/Framework7-0.9.6/kitchen-sink/forms-buttons.html

@@ -0,0 +1,64 @@
+
+<div class="navbar">
+  <div class="navbar-inner">
+    <div class="left sliding"><a href="forms.html" class="back link"><i class="icon icon-back"></i><span>Forms</span></a></div>
+    <div class="center sliding">Buttons</div>
+    <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
+  </div>
+</div>
+<div class="pages navbar-through">
+  <div data-page="form-buttons" class="page">
+    <div class="page-content">
+      <div class="content-block-title">Usual Buttons</div>
+      <div class="content-block">
+        <div class="row">
+          <div class="col-33"><a href="#" class="button active">Active</a></div>
+          <div class="col-33"><a href="#" class="button">Button</a></div>
+          <div class="col-33"><a href="#" class="button button-round">Round</a></div>
+        </div>
+      </div>
+      <div class="content-block">
+        <div class="row">
+          <div class="col-50"><a href="#" class="button active">Active</a></div>
+          <div class="col-50"><a href="#" class="button">Button</a></div>
+        </div>
+      </div>
+      <div class="content-block">
+        <div class="buttons-row"><a href="#" class="button">Button</a><a href="#" class="button">Button</a></div>
+      </div>
+      <div class="content-block">
+        <div class="buttons-row"><a href="#" class="button button-round">Button</a><a href="#" class="button button-round">Button</a><a href="#" class="button button-round">Button</a></div>
+      </div>
+      <div class="content-block">
+        <div class="buttons-row"><a href="#" class="button">Button</a><a href="#" class="button active">Button</a><a href="#" class="button">Button</a><a href="#" class="button">Button</a></div>
+      </div>
+      <div class="content-block-title">Big Buttons</div>
+      <div class="content-block">
+        <div class="row">
+          <div class="col-50"><a href="#" class="button button-big active">Active</a></div>
+          <div class="col-50"><a href="#" class="button button-big">Button</a></div>
+        </div>
+      </div>
+      <div class="content-block-title">Themed Fill Buttons</div>
+      <div class="content-block">
+        <div class="row">
+          <div class="col-50"><a href="#" class="button button-big button-fill color-green">Submit</a></div>
+          <div class="col-50"><a href="#" class="button button-big button-fill color-red">Cancel</a></div>
+        </div>
+      </div>
+      <div class="content-block-title">List-Block Buttons</div>
+      <div class="list-block inset">
+        <ul>
+          <li><a href="#" class="list-button item-link">List Button 1</a></li>
+          <li><a href="#" class="list-button item-link">List Button 2</a></li>
+          <li><a href="#" class="list-button item-link">List Button 2</a></li>
+        </ul>
+      </div>
+      <div class="list-block inset">
+        <ul>
+          <li><a href="#" class="list-button item-link color-red">Big Red Button</a></li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>