framework7rails 3.0.0 → 4.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (212) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +1 -1
  3. data/lib/framework7rails/version.rb +2 -2
  4. data/update_from_vendor.rb +1 -1
  5. data/vendor/assets/javascripts/framework7.js +5806 -2303
  6. data/vendor/assets/javascripts/framework7.js.map +1 -1
  7. data/vendor/assets/stylesheets/framework7.css +2164 -464
  8. data/vendor/assets/stylesheets/framework7.themes.css +189 -25
  9. metadata +2 -205
  10. data/Framework7-0.9.6/.gitignore +0 -5
  11. data/Framework7-0.9.6/.jshintrc +0 -33
  12. data/Framework7-0.9.6/.travis.yml +0 -5
  13. data/Framework7-0.9.6/CHANGELOG.md +0 -342
  14. data/Framework7-0.9.6/Gruntfile.js +0 -560
  15. data/Framework7-0.9.6/LICENSE +0 -20
  16. data/Framework7-0.9.6/README.md +0 -113
  17. data/Framework7-0.9.6/apps/todo7/css/todo7.css +0 -208
  18. data/Framework7-0.9.6/apps/todo7/img/Icon-152.png +0 -0
  19. data/Framework7-0.9.6/apps/todo7/img/bg.jpg +0 -0
  20. data/Framework7-0.9.6/apps/todo7/img/icon-114.png +0 -0
  21. data/Framework7-0.9.6/apps/todo7/img/icon-120.png +0 -0
  22. data/Framework7-0.9.6/apps/todo7/img/icon-144.png +0 -0
  23. data/Framework7-0.9.6/apps/todo7/img/icon-57.png +0 -0
  24. data/Framework7-0.9.6/apps/todo7/img/icon-72.png +0 -0
  25. data/Framework7-0.9.6/apps/todo7/img/icon-76.png +0 -0
  26. data/Framework7-0.9.6/apps/todo7/index.html +0 -112
  27. data/Framework7-0.9.6/apps/todo7/jade/index.jade +0 -99
  28. data/Framework7-0.9.6/apps/todo7/js/todo7.js +0 -102
  29. data/Framework7-0.9.6/apps/todo7/less/todo7.less +0 -221
  30. data/Framework7-0.9.6/apps/todo7/manifest.php +0 -27
  31. data/Framework7-0.9.6/apps/weather7/css/weather7.css +0 -291
  32. data/Framework7-0.9.6/apps/weather7/img/bg.jpg +0 -0
  33. data/Framework7-0.9.6/apps/weather7/img/icon-114.png +0 -0
  34. data/Framework7-0.9.6/apps/weather7/img/icon-120.png +0 -0
  35. data/Framework7-0.9.6/apps/weather7/img/icon-144.png +0 -0
  36. data/Framework7-0.9.6/apps/weather7/img/icon-152.png +0 -0
  37. data/Framework7-0.9.6/apps/weather7/img/icon-57.png +0 -0
  38. data/Framework7-0.9.6/apps/weather7/img/icon-72.png +0 -0
  39. data/Framework7-0.9.6/apps/weather7/img/icon-76.png +0 -0
  40. data/Framework7-0.9.6/apps/weather7/img/logo.png +0 -0
  41. data/Framework7-0.9.6/apps/weather7/img/yahoo-logo.png +0 -0
  42. data/Framework7-0.9.6/apps/weather7/index.html +0 -127
  43. data/Framework7-0.9.6/apps/weather7/jade/index.jade +0 -113
  44. data/Framework7-0.9.6/apps/weather7/js/weather7.js +0 -213
  45. data/Framework7-0.9.6/apps/weather7/less/weather7.less +0 -294
  46. data/Framework7-0.9.6/apps/weather7/manifest.php +0 -29
  47. data/Framework7-0.9.6/bower.json +0 -30
  48. data/Framework7-0.9.6/dist/about.html +0 -28
  49. data/Framework7-0.9.6/dist/css/framework7.css +0 -4922
  50. data/Framework7-0.9.6/dist/css/framework7.min.css +0 -15
  51. data/Framework7-0.9.6/dist/css/framework7.rtl.css +0 -427
  52. data/Framework7-0.9.6/dist/css/framework7.rtl.min.css +0 -1
  53. data/Framework7-0.9.6/dist/css/framework7.themes.css +0 -279
  54. data/Framework7-0.9.6/dist/css/framework7.themes.min.css +0 -1
  55. data/Framework7-0.9.6/dist/css/my-app.css +0 -0
  56. data/Framework7-0.9.6/dist/form.html +0 -229
  57. data/Framework7-0.9.6/dist/img/i-f7.png +0 -0
  58. data/Framework7-0.9.6/dist/img/i-form-calendar.png +0 -0
  59. data/Framework7-0.9.6/dist/img/i-form-comment.png +0 -0
  60. data/Framework7-0.9.6/dist/img/i-form-email.png +0 -0
  61. data/Framework7-0.9.6/dist/img/i-form-gender.png +0 -0
  62. data/Framework7-0.9.6/dist/img/i-form-name.png +0 -0
  63. data/Framework7-0.9.6/dist/img/i-form-password.png +0 -0
  64. data/Framework7-0.9.6/dist/img/i-form-settings.png +0 -0
  65. data/Framework7-0.9.6/dist/img/i-form-tel.png +0 -0
  66. data/Framework7-0.9.6/dist/img/i-form-toggle.png +0 -0
  67. data/Framework7-0.9.6/dist/img/i-form-url.png +0 -0
  68. data/Framework7-0.9.6/dist/index.html +0 -102
  69. data/Framework7-0.9.6/dist/js/framework7.js +0 -7479
  70. data/Framework7-0.9.6/dist/js/framework7.min.js +0 -18
  71. data/Framework7-0.9.6/dist/js/my-app.js +0 -48
  72. data/Framework7-0.9.6/dist/services.html +0 -28
  73. data/Framework7-0.9.6/examples/split-view-panel/about.html +0 -20
  74. data/Framework7-0.9.6/examples/split-view-panel/css/my-app.css +0 -56
  75. data/Framework7-0.9.6/examples/split-view-panel/index.html +0 -135
  76. data/Framework7-0.9.6/examples/split-view-panel/jade/about.jade +0 -18
  77. data/Framework7-0.9.6/examples/split-view-panel/jade/index.jade +0 -107
  78. data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-1.jade +0 -15
  79. data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-2.jade +0 -15
  80. data/Framework7-0.9.6/examples/split-view-panel/jade/services.jade +0 -18
  81. data/Framework7-0.9.6/examples/split-view-panel/js/my-app.js +0 -15
  82. data/Framework7-0.9.6/examples/split-view-panel/left-page-1.html +0 -19
  83. data/Framework7-0.9.6/examples/split-view-panel/left-page-2.html +0 -19
  84. data/Framework7-0.9.6/examples/split-view-panel/less/my-app.less +0 -62
  85. data/Framework7-0.9.6/examples/split-view-panel/services.html +0 -20
  86. data/Framework7-0.9.6/examples/split-view/about.html +0 -19
  87. data/Framework7-0.9.6/examples/split-view/css/my-app.css +0 -23
  88. data/Framework7-0.9.6/examples/split-view/index.html +0 -135
  89. data/Framework7-0.9.6/examples/split-view/jade/about.jade +0 -15
  90. data/Framework7-0.9.6/examples/split-view/jade/index.jade +0 -107
  91. data/Framework7-0.9.6/examples/split-view/jade/left-page-1.jade +0 -15
  92. data/Framework7-0.9.6/examples/split-view/jade/left-page-2.jade +0 -15
  93. data/Framework7-0.9.6/examples/split-view/jade/services.jade +0 -15
  94. data/Framework7-0.9.6/examples/split-view/js/my-app.js +0 -15
  95. data/Framework7-0.9.6/examples/split-view/left-page-1.html +0 -19
  96. data/Framework7-0.9.6/examples/split-view/left-page-2.html +0 -19
  97. data/Framework7-0.9.6/examples/split-view/less/my-app.less +0 -23
  98. data/Framework7-0.9.6/examples/split-view/services.html +0 -19
  99. data/Framework7-0.9.6/examples/tab-bar/about.html +0 -19
  100. data/Framework7-0.9.6/examples/tab-bar/css/my-app.css +0 -34
  101. data/Framework7-0.9.6/examples/tab-bar/index.html +0 -238
  102. data/Framework7-0.9.6/examples/tab-bar/jade/about.jade +0 -15
  103. data/Framework7-0.9.6/examples/tab-bar/jade/index.jade +0 -189
  104. data/Framework7-0.9.6/examples/tab-bar/jade/services.jade +0 -15
  105. data/Framework7-0.9.6/examples/tab-bar/js/my-app.js +0 -15
  106. data/Framework7-0.9.6/examples/tab-bar/less/my-app.less +0 -35
  107. data/Framework7-0.9.6/examples/tab-bar/services.html +0 -19
  108. data/Framework7-0.9.6/kitchen-sink/about.html +0 -22
  109. data/Framework7-0.9.6/kitchen-sink/accordion.html +0 -171
  110. data/Framework7-0.9.6/kitchen-sink/color-themes.html +0 -42
  111. data/Framework7-0.9.6/kitchen-sink/contacts.html +0 -190
  112. data/Framework7-0.9.6/kitchen-sink/core-features.html +0 -70
  113. data/Framework7-0.9.6/kitchen-sink/css/kitchen-sink.css +0 -233
  114. data/Framework7-0.9.6/kitchen-sink/deep-2.html +0 -22
  115. data/Framework7-0.9.6/kitchen-sink/deep-navbar-2.html +0 -19
  116. data/Framework7-0.9.6/kitchen-sink/deep-navbar-3.html +0 -19
  117. data/Framework7-0.9.6/kitchen-sink/deep-navbar.html +0 -18
  118. data/Framework7-0.9.6/kitchen-sink/forms-buttons.html +0 -64
  119. data/Framework7-0.9.6/kitchen-sink/forms-checkboxes.html +0 -200
  120. data/Framework7-0.9.6/kitchen-sink/forms-elements.html +0 -359
  121. data/Framework7-0.9.6/kitchen-sink/forms-selects.html +0 -72
  122. data/Framework7-0.9.6/kitchen-sink/forms-storage.html +0 -181
  123. data/Framework7-0.9.6/kitchen-sink/forms.html +0 -56
  124. data/Framework7-0.9.6/kitchen-sink/grid.html +0 -140
  125. data/Framework7-0.9.6/kitchen-sink/hide-navbar-toolbar.html +0 -42
  126. data/Framework7-0.9.6/kitchen-sink/img/beach.jpg +0 -0
  127. data/Framework7-0.9.6/kitchen-sink/img/lock.jpg +0 -0
  128. data/Framework7-0.9.6/kitchen-sink/img/monkey.jpg +0 -0
  129. data/Framework7-0.9.6/kitchen-sink/img/mountains.jpg +0 -0
  130. data/Framework7-0.9.6/kitchen-sink/index.html +0 -466
  131. data/Framework7-0.9.6/kitchen-sink/infinite-scroll-load.php +0 -19
  132. data/Framework7-0.9.6/kitchen-sink/infinite-scroll.html +0 -119
  133. data/Framework7-0.9.6/kitchen-sink/jade/about.jade +0 -19
  134. data/Framework7-0.9.6/kitchen-sink/jade/accordion.jade +0 -133
  135. data/Framework7-0.9.6/kitchen-sink/jade/color-themes.jade +0 -37
  136. data/Framework7-0.9.6/kitchen-sink/jade/contacts.jade +0 -115
  137. data/Framework7-0.9.6/kitchen-sink/jade/core-features.jade +0 -74
  138. data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-2.jade +0 -15
  139. data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-3.jade +0 -15
  140. data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar.jade +0 -15
  141. data/Framework7-0.9.6/kitchen-sink/jade/forms-buttons.jade +0 -71
  142. data/Framework7-0.9.6/kitchen-sink/jade/forms-checkboxes.jade +0 -152
  143. data/Framework7-0.9.6/kitchen-sink/jade/forms-elements.jade +0 -239
  144. data/Framework7-0.9.6/kitchen-sink/jade/forms-selects.jade +0 -60
  145. data/Framework7-0.9.6/kitchen-sink/jade/forms-storage.jade +0 -134
  146. data/Framework7-0.9.6/kitchen-sink/jade/forms.jade +0 -52
  147. data/Framework7-0.9.6/kitchen-sink/jade/grid.jade +0 -110
  148. data/Framework7-0.9.6/kitchen-sink/jade/hide-navbar-toolbar.jade +0 -38
  149. data/Framework7-0.9.6/kitchen-sink/jade/index.jade +0 -427
  150. data/Framework7-0.9.6/kitchen-sink/jade/infinite-scroll.jade +0 -20
  151. data/Framework7-0.9.6/kitchen-sink/jade/list-view.jade +0 -266
  152. data/Framework7-0.9.6/kitchen-sink/jade/login-screen-embedded.jade +0 -22
  153. data/Framework7-0.9.6/kitchen-sink/jade/login-screen.jade +0 -20
  154. data/Framework7-0.9.6/kitchen-sink/jade/media-lists.jade +0 -170
  155. data/Framework7-0.9.6/kitchen-sink/jade/messages.jade +0 -71
  156. data/Framework7-0.9.6/kitchen-sink/jade/modals.jade +0 -36
  157. data/Framework7-0.9.6/kitchen-sink/jade/navbars-toolbars.jade +0 -43
  158. data/Framework7-0.9.6/kitchen-sink/jade/no-navbar-toolbar.jade +0 -7
  159. data/Framework7-0.9.6/kitchen-sink/jade/no-navbar.jade +0 -7
  160. data/Framework7-0.9.6/kitchen-sink/jade/no-toolbar.jade +0 -17
  161. data/Framework7-0.9.6/kitchen-sink/jade/notifications.jade +0 -23
  162. data/Framework7-0.9.6/kitchen-sink/jade/panels.jade +0 -21
  163. data/Framework7-0.9.6/kitchen-sink/jade/photo-browser.jade +0 -36
  164. data/Framework7-0.9.6/kitchen-sink/jade/popover.jade +0 -21
  165. data/Framework7-0.9.6/kitchen-sink/jade/preloader.jade +0 -31
  166. data/Framework7-0.9.6/kitchen-sink/jade/pull-to-refresh.jade +0 -44
  167. data/Framework7-0.9.6/kitchen-sink/jade/searchbar.jade +0 -146
  168. data/Framework7-0.9.6/kitchen-sink/jade/slider-custom.jade +0 -23
  169. data/Framework7-0.9.6/kitchen-sink/jade/slider-horizontal.jade +0 -18
  170. data/Framework7-0.9.6/kitchen-sink/jade/slider-multiple.jade +0 -48
  171. data/Framework7-0.9.6/kitchen-sink/jade/slider-nested.jade +0 -26
  172. data/Framework7-0.9.6/kitchen-sink/jade/slider-space-between.jade +0 -18
  173. data/Framework7-0.9.6/kitchen-sink/jade/slider-vertical.jade +0 -18
  174. data/Framework7-0.9.6/kitchen-sink/jade/slider.jade +0 -57
  175. data/Framework7-0.9.6/kitchen-sink/jade/sortable-list.jade +0 -107
  176. data/Framework7-0.9.6/kitchen-sink/jade/swipe-delete.jade +0 -195
  177. data/Framework7-0.9.6/kitchen-sink/jade/tabbar-labels.jade +0 -54
  178. data/Framework7-0.9.6/kitchen-sink/jade/tabbar.jade +0 -50
  179. data/Framework7-0.9.6/kitchen-sink/jade/tabs.jade +0 -34
  180. data/Framework7-0.9.6/kitchen-sink/jade/transitions.jade +0 -27
  181. data/Framework7-0.9.6/kitchen-sink/js/kitchen-sink.js +0 -442
  182. data/Framework7-0.9.6/kitchen-sink/less/kitchen-sink.less +0 -245
  183. data/Framework7-0.9.6/kitchen-sink/list-view.html +0 -318
  184. data/Framework7-0.9.6/kitchen-sink/login-screen-embedded.html +0 -36
  185. data/Framework7-0.9.6/kitchen-sink/login-screen.html +0 -21
  186. data/Framework7-0.9.6/kitchen-sink/media-lists.html +0 -173
  187. data/Framework7-0.9.6/kitchen-sink/messages.html +0 -84
  188. data/Framework7-0.9.6/kitchen-sink/modals.html +0 -33
  189. data/Framework7-0.9.6/kitchen-sink/navbars-toolbars.html +0 -46
  190. data/Framework7-0.9.6/kitchen-sink/no-navbar-toolbar.html +0 -11
  191. data/Framework7-0.9.6/kitchen-sink/no-navbar.html +0 -11
  192. data/Framework7-0.9.6/kitchen-sink/no-toolbar.html +0 -18
  193. data/Framework7-0.9.6/kitchen-sink/notifications.html +0 -21
  194. data/Framework7-0.9.6/kitchen-sink/panel-right2.html +0 -16
  195. data/Framework7-0.9.6/kitchen-sink/panel-right3.html +0 -16
  196. data/Framework7-0.9.6/kitchen-sink/panels.html +0 -23
  197. data/Framework7-0.9.6/kitchen-sink/photo-browser.html +0 -36
  198. data/Framework7-0.9.6/kitchen-sink/popover.html +0 -21
  199. data/Framework7-0.9.6/kitchen-sink/preloader.html +0 -28
  200. data/Framework7-0.9.6/kitchen-sink/pull-to-refresh.html +0 -52
  201. data/Framework7-0.9.6/kitchen-sink/searchbar.html +0 -233
  202. data/Framework7-0.9.6/kitchen-sink/slider-custom.html +0 -28
  203. data/Framework7-0.9.6/kitchen-sink/slider-horizontal.html +0 -29
  204. data/Framework7-0.9.6/kitchen-sink/slider-multiple.html +0 -89
  205. data/Framework7-0.9.6/kitchen-sink/slider-nested.html +0 -32
  206. data/Framework7-0.9.6/kitchen-sink/slider-space-between.html +0 -29
  207. data/Framework7-0.9.6/kitchen-sink/slider-vertical.html +0 -29
  208. data/Framework7-0.9.6/kitchen-sink/slider.html +0 -54
  209. data/Framework7-0.9.6/kitchen-sink/sortable-list.html +0 -137
  210. data/Framework7-0.9.6/kitchen-sink/swipe-delete.html +0 -216
  211. data/Framework7-0.9.6/kitchen-sink/tabbar-labels.html +0 -51
  212. data/Framework7-0.9.6/kitchen-sink/tabbar.html +0 -0
@@ -1,74 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link
5
- i.icon.icon-back
6
- span Back
7
- .center.sliding Core Features
8
- .right
9
- a(href="#").open-panel.link.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="core-features")
13
- .page-content
14
- .content-block-title Ultra Easy To Use
15
- .content-block
16
- .content-block-inner
17
- p All you need to make it work is a simple HTML layout and two lines of JavaScript:
18
- p var app = new Framework7();<br>app.addView('.main-view');
19
-
20
- .content-block-title Custom DOM Library
21
- .content-block
22
- .content-block-inner
23
- 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:
24
- b .addClass()
25
- b .removeClass()
26
- b .hasClass()
27
- b .toggleClass()
28
- b .on()
29
- b .off()
30
- b .attr()
31
- b .transform()
32
- b .transition()
33
- b .transitionEnd()
34
- b .animationEnd()
35
- b .width()
36
- b .offset()
37
- b .html()
38
- b .is()
39
- b .parents()
40
- b .parent()
41
- b .children()
42
- b .append()
43
- b .prepend()
44
- b .find()
45
- b .remove()
46
- p This function can be exposed for your usage by calling for example $ = app.$;
47
- .content-block-title XHR + Caching
48
- .content-block
49
- .content-block-inner
50
- 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!
51
- .content-block-title History
52
- .content-block
53
- .content-block-inner
54
- 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.
55
- .content-block-title Previous Page Preloading
56
- .content-block
57
- .content-block-inner
58
- p Framework7 preloads previous page (when available) so your users can always do the nice swipe back gesture to get that page.
59
- .content-block-title Multiple Views
60
- .content-block
61
- .content-block-inner
62
- 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.
63
- .content-block-title Performant Animations
64
- .content-block
65
- .content-block-inner
66
- p It is all about performance and Framework7 uses high performance css animations and 3d transformations to achieve the best result.
67
- .content-block-title Easy To Customize
68
- .content-block
69
- .content-block-inner
70
- 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.
71
- .content-block-title Ultra Lightweight
72
- .content-block
73
- .content-block-inner
74
- p Framework7 is a library agnostic and ultra lightweight.
@@ -1,15 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link Deep Navbar
5
- .center.sliding Deep 2
6
- .right.sliding
7
- a(href="deep-navbar-3.html").link Deep 3
8
- .pages.navbar-through
9
- .page(data-page="deep-navbar-2")
10
- .page-content
11
- .content-block
12
- p
13
- a.button(href="deep-navbar-3.html") Go to page 3
14
- 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.
15
- 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.
@@ -1,15 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link Deep 2
5
- .center.sliding Deep 3
6
- .right.sliding
7
- a(href="index.html").link Framework7
8
- .pages.navbar-through
9
- .page(data-page="deep-navbar-3")
10
- .page-content
11
- .content-block
12
- p
13
- a.button(href="index.html") Go to home page
14
- 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.
15
- 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.
@@ -1,15 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="index.html").back.link Navbars
5
- .center.sliding Deep Navbar
6
- .right.sliding
7
- a(href="deep-navbar-2.html").link Deep 2
8
- .pages.navbar-through
9
- .page(data-page="deep-navbar")
10
- .page-content
11
- .content-block
12
- 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:
13
- p
14
- a.button(href="deep-navbar-2.html") Go to page 2
15
-
@@ -1,71 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="forms.html").back.link
5
- i.icon.icon-back
6
- span Forms
7
- .center.sliding Buttons
8
- .right
9
- a(href="#").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="form-buttons")
13
- .page-content
14
- .content-block-title Usual Buttons
15
- .content-block
16
- .row
17
- .col-33
18
- a(href="#").button.active Active
19
- .col-33
20
- a(href="#").button Button
21
- .col-33
22
- a(href="#").button.button-round Round
23
- .content-block
24
- .row
25
- .col-50
26
- a(href="#").button.active Active
27
- .col-50
28
- a(href="#").button Button
29
- .content-block
30
- .buttons-row
31
- a(href="#").button Button
32
- a(href="#").button Button
33
- .content-block
34
- .buttons-row
35
- a(href="#").button.button-round Button
36
- a(href="#").button.button-round Button
37
- a(href="#").button.button-round Button
38
- .content-block
39
- .buttons-row
40
- a(href="#").button Button
41
- a(href="#").button.active Button
42
- a(href="#").button Button
43
- a(href="#").button Button
44
-
45
- .content-block-title Big Buttons
46
- .content-block
47
- .row
48
- .col-50
49
- a(href="#").button.button-big.active Active
50
- .col-50
51
- a(href="#").button.button-big Button
52
- .content-block-title Themed Fill Buttons
53
- .content-block
54
- .row
55
- .col-50
56
- a(href="#").button.button-big.button-fill.color-green Submit
57
- .col-50
58
- a(href="#").button.button-big.button-fill.color-red Cancel
59
- .content-block-title List-Block Buttons
60
- .list-block.inset
61
- ul
62
- li
63
- a(href="#").list-button.item-link List Button 1
64
- li
65
- a(href="#").list-button.item-link List Button 2
66
- li
67
- a(href="#").list-button.item-link List Button 2
68
- .list-block.inset
69
- ul
70
- li
71
- a(href="#").list-button.item-link.color-red Big Red Button
@@ -1,152 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="forms.html").back.link
5
- i.icon.icon-back
6
- span Forms
7
- .center.sliding Checkboxes And Radios
8
- .right
9
- a(href="#").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="forms-checkboxes")
13
- .page-content
14
- .content-block-title Checkbox group
15
- .list-block
16
- ul
17
- li
18
- label.label-checkbox.item-content
19
- input(type="checkbox", name="ks-checkbox", value="Books", checked=true)
20
- .item-media
21
- i.icon.icon-form-checkbox
22
- .item-inner
23
- .item-title Books
24
- li
25
- label.label-checkbox.item-content
26
- input(type="checkbox", name="ks-checkbox", value="Movies")
27
- .item-media
28
- i.icon.icon-form-checkbox
29
- .item-inner
30
- .item-title Movies
31
- li
32
- label.label-checkbox.item-content
33
- input(type="checkbox", name="ks-checkbox", value="Food")
34
- .item-media
35
- i.icon.icon-form-checkbox
36
- .item-inner
37
- .item-title Food
38
- li
39
- label.label-checkbox.item-content
40
- input(type="checkbox", name="ks-checkbox", value="Drinks")
41
- .item-media
42
- i.icon.icon-form-checkbox
43
- .item-inner
44
- .item-title Drinks
45
- .content-block-title Radio buttons group
46
- .list-block
47
- ul
48
- li
49
- label.label-radio.item-content
50
- input(type="radio", name="ks-radio", value="Books", checked=true)
51
- .item-inner
52
- .item-title Books
53
- li
54
- label.label-radio.item-content
55
- input(type="radio", name="ks-radio", value="Movies")
56
- .item-inner
57
- .item-title Movies
58
- li
59
- label.label-radio.item-content
60
- input(type="radio", name="ks-radio", value="Food")
61
- .item-inner
62
- .item-title Food
63
- li
64
- label.label-radio.item-content
65
- input(type="radio", name="ks-radio", value="Drinks")
66
- .item-inner
67
- .item-title Drinks
68
- .content-block-title With Media Lists
69
- .list-block.media-list
70
- ul
71
- li
72
- label.label-checkbox.item-content
73
- input(type="checkbox", name="ks-media-checkbox", value="1")
74
- .item-media
75
- i.icon.icon-form-checkbox
76
- .item-inner
77
- .item-title-row
78
- .item-title Facebook
79
- .item-after 17:14
80
- .item-subtitle New messages from John Doe
81
- .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
82
-
83
- li
84
- label.label-checkbox.item-content
85
- input(type="checkbox", name="ks-media-checkbox", value="2")
86
- .item-media
87
- i.icon.icon-form-checkbox
88
- .item-inner
89
- .item-title-row
90
- .item-title John Doe (via Twitter)
91
- .item-after 17:11
92
- .item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
93
- .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
94
-
95
- li
96
- label.label-checkbox.item-content
97
- input(type="checkbox", name="ks-media-checkbox", value="3")
98
- .item-media
99
- i.icon.icon-form-checkbox
100
- .item-inner
101
- .item-title-row
102
- .item-title Facebook
103
- .item-after 16:48
104
- .item-subtitle New messages from John Doe
105
- .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
106
- li
107
- label.label-checkbox.item-content
108
- input(type="checkbox", name="ks-media-checkbox", value="4")
109
- .item-media
110
- i.icon.icon-form-checkbox
111
- .item-inner
112
- .item-title-row
113
- .item-title John Doe (via Twitter)
114
- .item-after 15:32
115
- .item-subtitle John Doe (@_johndoe) mentioned you on Twitter!
116
- .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
117
- .content-block-title What is your favourite song?
118
- .list-block.media-list
119
- ul
120
- li
121
- label.label-radio.item-content
122
- input(type="radio", name="ks-media-radio", value="1", checked=true)
123
- .item-media
124
- img(src="http://hhhhold.com/160/d/jpg?1", width="80")
125
- .item-inner
126
- .item-title-row
127
- .item-title Yellow Submarine
128
- .item-after $15
129
- .item-subtitle Beatles
130
- .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
131
- li
132
- label.label-radio.item-content
133
- input(type="radio", name="ks-media-radio", value="2")
134
- .item-media
135
- img(src="http://hhhhold.com/160/d/jpg?2", width="80")
136
- .item-inner
137
- .item-title-row
138
- .item-title Don't Stop Me Now
139
- .item-after $22
140
- .item-subtitle Queen
141
- .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
142
- li
143
- label.label-radio.item-content
144
- input(type="radio", name="ks-media-radio", value="3")
145
- .item-media
146
- img(src="http://hhhhold.com/160/d/jpg?3", width="80")
147
- .item-inner
148
- .item-title-row
149
- .item-title Billie Jean
150
- .item-after $16
151
- .item-subtitle Michael Jackson
152
- .item-text Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus.
@@ -1,239 +0,0 @@
1
- .navbar
2
- .navbar-inner
3
- .left.sliding
4
- a(href="forms.html").back.link
5
- i.icon.icon-back
6
- span Forms
7
- .center.sliding Form Elements
8
- .right
9
- a(href="#").link.open-panel.icon-only
10
- i.icon.icon-bars
11
- .pages.navbar-through
12
- .page(data-page="form-elements")
13
- .page-content
14
- .content-block-title Full Layout
15
- .list-block
16
- ul
17
- li
18
- .item-content
19
- .item-media
20
- i.icon.icon-form-name
21
- .item-inner
22
- .item-title.label Name
23
- .item-input
24
- input(type="text", placeholder="Your name")
25
- li
26
- .item-content
27
- .item-media
28
- i.icon.icon-form-email
29
- .item-inner
30
- .item-title.label E-mail
31
- .item-input
32
- input(type="email", placeholder="E-mail")
33
- li
34
- .item-content
35
- .item-media
36
- i.icon.icon-form-url
37
- .item-inner
38
- .item-title.label URL
39
- .item-input
40
- input(type="url", placeholder="URL")
41
- li
42
- .item-content
43
- .item-media
44
- i.icon.icon-form-password
45
- .item-inner
46
- .item-title.label Password
47
- .item-input
48
- input(type="password", placeholder="Password")
49
- li
50
- .item-content
51
- .item-media
52
- i.icon.icon-form-tel
53
- .item-inner
54
- .item-title.label Phone
55
- .item-input
56
- input(type="tel", placeholder="Phone")
57
- li
58
- .item-content
59
- .item-media
60
- i.icon.icon-form-gender
61
- .item-inner
62
- .item-title.label Gender
63
- .item-input
64
- select
65
- option Male
66
- option Female
67
- li
68
- .item-content
69
- .item-media
70
- i.icon.icon-form-calendar
71
- .item-inner
72
- .item-title.label Birth date
73
- .item-input
74
- input(type="date", placeholder="Birth day", value="2014-04-30")
75
- li
76
- .item-content
77
- .item-media
78
- i.icon.icon-form-calendar
79
- .item-inner
80
- .item-title.label Date time
81
- .item-input
82
- input(type="datetime-local", placeholder="Birth day")
83
- li
84
- .item-content
85
- .item-media
86
- i.icon.icon-form-toggle
87
- .item-inner
88
- .item-title.label Switch
89
- .item-input
90
- label.label-switch
91
- input(type="checkbox")
92
- .checkbox
93
- li
94
- .item-content
95
- .item-media
96
- i.icon.icon-form-settings
97
- .item-inner
98
- .item-title.label Slider
99
- .item-input
100
- .range-slider
101
- input(type="range", min="0", max="100", value="50", step="0.1")
102
- li.align-top
103
- .item-content
104
- .item-media
105
- i.icon.icon-form-comment
106
- .item-inner
107
- .item-title.label Textarea
108
- .item-input
109
- textarea
110
- .content-block-title Icons and inputs
111
- .list-block
112
- ul
113
- li
114
- .item-content
115
- .item-media
116
- i.icon.icon-form-name
117
- .item-inner
118
- .item-input
119
- input(type="text", placeholder="Your name")
120
- li
121
- .item-content
122
- .item-media
123
- i.icon.icon-form-email
124
- .item-inner
125
- .item-input
126
- input(type="email", placeholder="E-mail")
127
- li
128
- .item-content
129
- .item-media
130
- i.icon.icon-form-gender
131
- .item-inner
132
- .item-input
133
- select
134
- option Male
135
- option Female
136
- li
137
- .item-content
138
- .item-media
139
- i.icon.icon-form-calendar
140
- .item-inner
141
- .item-input
142
- input(type="date", placeholder="Birth day", value="2014-04-30")
143
- li
144
- .item-content
145
- .item-media
146
- i.icon.icon-form-toggle
147
- .item-inner
148
- .item-input
149
- label.label-switch
150
- input(type="checkbox")
151
- .checkbox
152
- .content-block-title Labels and inputs
153
- .list-block
154
- ul
155
- li
156
- .item-content
157
- .item-inner
158
- .item-title.label Name
159
- .item-input
160
- input(type="text", placeholder="Your name")
161
- li
162
- .item-content
163
- .item-inner
164
- .item-title.label E-mail
165
- .item-input
166
- input(type="email", placeholder="E-mail")
167
- li
168
- .item-content
169
- .item-inner
170
- .item-title.label Gender
171
- .item-input
172
- select
173
- option Male
174
- option Female
175
- li
176
- .item-content
177
- .item-inner
178
- .item-title.label Birth date
179
- .item-input
180
- input(type="date", placeholder="Birth day", value="2014-04-30")
181
- li
182
- .item-content
183
- .item-inner
184
- .item-title.label Switch
185
- .item-input
186
- label.label-switch
187
- input(type="checkbox")
188
- .checkbox
189
- .content-block-title Just inputs
190
- .list-block
191
- ul
192
- li
193
- .item-content
194
- .item-inner
195
- .item-input
196
- input(type="text", placeholder="Your name")
197
- li
198
- .item-content
199
- .item-inner
200
- .item-input
201
- input(type="email", placeholder="E-mail")
202
- li
203
- .item-content
204
- .item-inner
205
- .item-input
206
- select
207
- option Male
208
- option Female
209
- li
210
- .item-content
211
- .item-inner
212
- .item-input
213
- input(type="date", placeholder="Birth day", value="2014-04-30")
214
- .content-block-title Inset, just inputs
215
- .list-block.inset
216
- ul
217
- ul
218
- li
219
- .item-content
220
- .item-inner
221
- .item-input
222
- input(type="text", placeholder="Your name")
223
- li
224
- .item-content
225
- .item-inner
226
- .item-input
227
- input(type="email", placeholder="E-mail")
228
- li
229
- .item-content
230
- .item-inner
231
- .item-input
232
- select
233
- option Male
234
- option Female
235
- li
236
- .item-content
237
- .item-inner
238
- .item-input
239
- input(type="date", placeholder="Birth day", value="2014-04-30")