framework7rails 0.9.7 → 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (230) hide show
  1. checksums.yaml +4 -4
  2. data/.gitignore +17 -0
  3. data/Framework7-0.9.6/.gitignore +5 -0
  4. data/Framework7-0.9.6/.jshintrc +33 -0
  5. data/Framework7-0.9.6/.travis.yml +5 -0
  6. data/Framework7-0.9.6/CHANGELOG.md +342 -0
  7. data/Framework7-0.9.6/Gruntfile.js +560 -0
  8. data/Framework7-0.9.6/LICENSE +20 -0
  9. data/Framework7-0.9.6/README.md +113 -0
  10. data/Framework7-0.9.6/apps/todo7/css/todo7.css +208 -0
  11. data/Framework7-0.9.6/apps/todo7/img/Icon-152.png +0 -0
  12. data/Framework7-0.9.6/apps/todo7/img/bg.jpg +0 -0
  13. data/Framework7-0.9.6/apps/todo7/img/icon-114.png +0 -0
  14. data/Framework7-0.9.6/apps/todo7/img/icon-120.png +0 -0
  15. data/Framework7-0.9.6/apps/todo7/img/icon-144.png +0 -0
  16. data/Framework7-0.9.6/apps/todo7/img/icon-57.png +0 -0
  17. data/Framework7-0.9.6/apps/todo7/img/icon-72.png +0 -0
  18. data/Framework7-0.9.6/apps/todo7/img/icon-76.png +0 -0
  19. data/Framework7-0.9.6/apps/todo7/index.html +112 -0
  20. data/Framework7-0.9.6/apps/todo7/jade/index.jade +99 -0
  21. data/Framework7-0.9.6/apps/todo7/js/todo7.js +102 -0
  22. data/Framework7-0.9.6/apps/todo7/less/todo7.less +221 -0
  23. data/Framework7-0.9.6/apps/todo7/manifest.php +27 -0
  24. data/Framework7-0.9.6/apps/weather7/css/weather7.css +291 -0
  25. data/Framework7-0.9.6/apps/weather7/img/bg.jpg +0 -0
  26. data/Framework7-0.9.6/apps/weather7/img/icon-114.png +0 -0
  27. data/Framework7-0.9.6/apps/weather7/img/icon-120.png +0 -0
  28. data/Framework7-0.9.6/apps/weather7/img/icon-144.png +0 -0
  29. data/Framework7-0.9.6/apps/weather7/img/icon-152.png +0 -0
  30. data/Framework7-0.9.6/apps/weather7/img/icon-57.png +0 -0
  31. data/Framework7-0.9.6/apps/weather7/img/icon-72.png +0 -0
  32. data/Framework7-0.9.6/apps/weather7/img/icon-76.png +0 -0
  33. data/Framework7-0.9.6/apps/weather7/img/logo.png +0 -0
  34. data/Framework7-0.9.6/apps/weather7/img/yahoo-logo.png +0 -0
  35. data/Framework7-0.9.6/apps/weather7/index.html +127 -0
  36. data/Framework7-0.9.6/apps/weather7/jade/index.jade +113 -0
  37. data/Framework7-0.9.6/apps/weather7/js/weather7.js +213 -0
  38. data/Framework7-0.9.6/apps/weather7/less/weather7.less +294 -0
  39. data/Framework7-0.9.6/apps/weather7/manifest.php +29 -0
  40. data/Framework7-0.9.6/bower.json +30 -0
  41. data/Framework7-0.9.6/dist/about.html +28 -0
  42. data/Framework7-0.9.6/dist/css/framework7.css +4922 -0
  43. data/Framework7-0.9.6/dist/css/framework7.min.css +15 -0
  44. data/Framework7-0.9.6/dist/css/framework7.rtl.css +427 -0
  45. data/Framework7-0.9.6/dist/css/framework7.rtl.min.css +1 -0
  46. data/Framework7-0.9.6/dist/css/framework7.themes.css +279 -0
  47. data/Framework7-0.9.6/dist/css/framework7.themes.min.css +1 -0
  48. data/Framework7-0.9.6/dist/css/my-app.css +0 -0
  49. data/Framework7-0.9.6/dist/form.html +229 -0
  50. data/Framework7-0.9.6/dist/img/i-f7.png +0 -0
  51. data/Framework7-0.9.6/dist/img/i-form-calendar.png +0 -0
  52. data/Framework7-0.9.6/dist/img/i-form-comment.png +0 -0
  53. data/Framework7-0.9.6/dist/img/i-form-email.png +0 -0
  54. data/Framework7-0.9.6/dist/img/i-form-gender.png +0 -0
  55. data/Framework7-0.9.6/dist/img/i-form-name.png +0 -0
  56. data/Framework7-0.9.6/dist/img/i-form-password.png +0 -0
  57. data/Framework7-0.9.6/dist/img/i-form-settings.png +0 -0
  58. data/Framework7-0.9.6/dist/img/i-form-tel.png +0 -0
  59. data/Framework7-0.9.6/dist/img/i-form-toggle.png +0 -0
  60. data/Framework7-0.9.6/dist/img/i-form-url.png +0 -0
  61. data/Framework7-0.9.6/dist/index.html +102 -0
  62. data/Framework7-0.9.6/dist/js/framework7.js +7479 -0
  63. data/Framework7-0.9.6/dist/js/framework7.min.js +18 -0
  64. data/Framework7-0.9.6/dist/js/my-app.js +48 -0
  65. data/Framework7-0.9.6/dist/services.html +28 -0
  66. data/Framework7-0.9.6/examples/split-view/about.html +19 -0
  67. data/Framework7-0.9.6/examples/split-view/css/my-app.css +23 -0
  68. data/Framework7-0.9.6/examples/split-view/index.html +135 -0
  69. data/Framework7-0.9.6/examples/split-view/jade/about.jade +15 -0
  70. data/Framework7-0.9.6/examples/split-view/jade/index.jade +107 -0
  71. data/Framework7-0.9.6/examples/split-view/jade/left-page-1.jade +15 -0
  72. data/Framework7-0.9.6/examples/split-view/jade/left-page-2.jade +15 -0
  73. data/Framework7-0.9.6/examples/split-view/jade/services.jade +15 -0
  74. data/Framework7-0.9.6/examples/split-view/js/my-app.js +15 -0
  75. data/Framework7-0.9.6/examples/split-view/left-page-1.html +19 -0
  76. data/Framework7-0.9.6/examples/split-view/left-page-2.html +19 -0
  77. data/Framework7-0.9.6/examples/split-view/less/my-app.less +23 -0
  78. data/Framework7-0.9.6/examples/split-view/services.html +19 -0
  79. data/Framework7-0.9.6/examples/split-view-panel/about.html +20 -0
  80. data/Framework7-0.9.6/examples/split-view-panel/css/my-app.css +56 -0
  81. data/Framework7-0.9.6/examples/split-view-panel/index.html +135 -0
  82. data/Framework7-0.9.6/examples/split-view-panel/jade/about.jade +18 -0
  83. data/Framework7-0.9.6/examples/split-view-panel/jade/index.jade +107 -0
  84. data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-1.jade +15 -0
  85. data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-2.jade +15 -0
  86. data/Framework7-0.9.6/examples/split-view-panel/jade/services.jade +18 -0
  87. data/Framework7-0.9.6/examples/split-view-panel/js/my-app.js +15 -0
  88. data/Framework7-0.9.6/examples/split-view-panel/left-page-1.html +19 -0
  89. data/Framework7-0.9.6/examples/split-view-panel/left-page-2.html +19 -0
  90. data/Framework7-0.9.6/examples/split-view-panel/less/my-app.less +62 -0
  91. data/Framework7-0.9.6/examples/split-view-panel/services.html +20 -0
  92. data/Framework7-0.9.6/examples/tab-bar/about.html +19 -0
  93. data/Framework7-0.9.6/examples/tab-bar/css/my-app.css +34 -0
  94. data/Framework7-0.9.6/examples/tab-bar/index.html +238 -0
  95. data/Framework7-0.9.6/examples/tab-bar/jade/about.jade +15 -0
  96. data/Framework7-0.9.6/examples/tab-bar/jade/index.jade +189 -0
  97. data/Framework7-0.9.6/examples/tab-bar/jade/services.jade +15 -0
  98. data/Framework7-0.9.6/examples/tab-bar/js/my-app.js +15 -0
  99. data/Framework7-0.9.6/examples/tab-bar/less/my-app.less +35 -0
  100. data/Framework7-0.9.6/examples/tab-bar/services.html +19 -0
  101. data/Framework7-0.9.6/kitchen-sink/about.html +22 -0
  102. data/Framework7-0.9.6/kitchen-sink/accordion.html +171 -0
  103. data/Framework7-0.9.6/kitchen-sink/color-themes.html +42 -0
  104. data/Framework7-0.9.6/kitchen-sink/contacts.html +190 -0
  105. data/Framework7-0.9.6/kitchen-sink/core-features.html +70 -0
  106. data/Framework7-0.9.6/kitchen-sink/css/kitchen-sink.css +233 -0
  107. data/Framework7-0.9.6/kitchen-sink/deep-2.html +22 -0
  108. data/Framework7-0.9.6/kitchen-sink/deep-navbar-2.html +19 -0
  109. data/Framework7-0.9.6/kitchen-sink/deep-navbar-3.html +19 -0
  110. data/Framework7-0.9.6/kitchen-sink/deep-navbar.html +18 -0
  111. data/Framework7-0.9.6/kitchen-sink/forms-buttons.html +64 -0
  112. data/Framework7-0.9.6/kitchen-sink/forms-checkboxes.html +200 -0
  113. data/Framework7-0.9.6/kitchen-sink/forms-elements.html +359 -0
  114. data/Framework7-0.9.6/kitchen-sink/forms-selects.html +72 -0
  115. data/Framework7-0.9.6/kitchen-sink/forms-storage.html +181 -0
  116. data/Framework7-0.9.6/kitchen-sink/forms.html +56 -0
  117. data/Framework7-0.9.6/kitchen-sink/grid.html +140 -0
  118. data/Framework7-0.9.6/kitchen-sink/hide-navbar-toolbar.html +42 -0
  119. data/Framework7-0.9.6/kitchen-sink/img/beach.jpg +0 -0
  120. data/Framework7-0.9.6/kitchen-sink/img/lock.jpg +0 -0
  121. data/Framework7-0.9.6/kitchen-sink/img/monkey.jpg +0 -0
  122. data/Framework7-0.9.6/kitchen-sink/img/mountains.jpg +0 -0
  123. data/Framework7-0.9.6/kitchen-sink/index.html +466 -0
  124. data/Framework7-0.9.6/kitchen-sink/infinite-scroll-load.php +19 -0
  125. data/Framework7-0.9.6/kitchen-sink/infinite-scroll.html +119 -0
  126. data/Framework7-0.9.6/kitchen-sink/jade/about.jade +19 -0
  127. data/Framework7-0.9.6/kitchen-sink/jade/accordion.jade +133 -0
  128. data/Framework7-0.9.6/kitchen-sink/jade/color-themes.jade +37 -0
  129. data/Framework7-0.9.6/kitchen-sink/jade/contacts.jade +115 -0
  130. data/Framework7-0.9.6/kitchen-sink/jade/core-features.jade +74 -0
  131. data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-2.jade +15 -0
  132. data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-3.jade +15 -0
  133. data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar.jade +15 -0
  134. data/Framework7-0.9.6/kitchen-sink/jade/forms-buttons.jade +71 -0
  135. data/Framework7-0.9.6/kitchen-sink/jade/forms-checkboxes.jade +152 -0
  136. data/Framework7-0.9.6/kitchen-sink/jade/forms-elements.jade +239 -0
  137. data/Framework7-0.9.6/kitchen-sink/jade/forms-selects.jade +60 -0
  138. data/Framework7-0.9.6/kitchen-sink/jade/forms-storage.jade +134 -0
  139. data/Framework7-0.9.6/kitchen-sink/jade/forms.jade +52 -0
  140. data/Framework7-0.9.6/kitchen-sink/jade/grid.jade +110 -0
  141. data/Framework7-0.9.6/kitchen-sink/jade/hide-navbar-toolbar.jade +38 -0
  142. data/Framework7-0.9.6/kitchen-sink/jade/index.jade +427 -0
  143. data/Framework7-0.9.6/kitchen-sink/jade/infinite-scroll.jade +20 -0
  144. data/Framework7-0.9.6/kitchen-sink/jade/list-view.jade +266 -0
  145. data/Framework7-0.9.6/kitchen-sink/jade/login-screen-embedded.jade +22 -0
  146. data/Framework7-0.9.6/kitchen-sink/jade/login-screen.jade +20 -0
  147. data/Framework7-0.9.6/kitchen-sink/jade/media-lists.jade +170 -0
  148. data/Framework7-0.9.6/kitchen-sink/jade/messages.jade +71 -0
  149. data/Framework7-0.9.6/kitchen-sink/jade/modals.jade +36 -0
  150. data/Framework7-0.9.6/kitchen-sink/jade/navbars-toolbars.jade +43 -0
  151. data/Framework7-0.9.6/kitchen-sink/jade/no-navbar-toolbar.jade +7 -0
  152. data/Framework7-0.9.6/kitchen-sink/jade/no-navbar.jade +7 -0
  153. data/Framework7-0.9.6/kitchen-sink/jade/no-toolbar.jade +17 -0
  154. data/Framework7-0.9.6/kitchen-sink/jade/notifications.jade +23 -0
  155. data/Framework7-0.9.6/kitchen-sink/jade/panels.jade +21 -0
  156. data/Framework7-0.9.6/kitchen-sink/jade/photo-browser.jade +36 -0
  157. data/Framework7-0.9.6/kitchen-sink/jade/popover.jade +21 -0
  158. data/Framework7-0.9.6/kitchen-sink/jade/preloader.jade +31 -0
  159. data/Framework7-0.9.6/kitchen-sink/jade/pull-to-refresh.jade +44 -0
  160. data/Framework7-0.9.6/kitchen-sink/jade/searchbar.jade +146 -0
  161. data/Framework7-0.9.6/kitchen-sink/jade/slider-custom.jade +23 -0
  162. data/Framework7-0.9.6/kitchen-sink/jade/slider-horizontal.jade +18 -0
  163. data/Framework7-0.9.6/kitchen-sink/jade/slider-multiple.jade +48 -0
  164. data/Framework7-0.9.6/kitchen-sink/jade/slider-nested.jade +26 -0
  165. data/Framework7-0.9.6/kitchen-sink/jade/slider-space-between.jade +18 -0
  166. data/Framework7-0.9.6/kitchen-sink/jade/slider-vertical.jade +18 -0
  167. data/Framework7-0.9.6/kitchen-sink/jade/slider.jade +57 -0
  168. data/Framework7-0.9.6/kitchen-sink/jade/sortable-list.jade +107 -0
  169. data/Framework7-0.9.6/kitchen-sink/jade/swipe-delete.jade +195 -0
  170. data/Framework7-0.9.6/kitchen-sink/jade/tabbar-labels.jade +54 -0
  171. data/Framework7-0.9.6/kitchen-sink/jade/tabbar.jade +50 -0
  172. data/Framework7-0.9.6/kitchen-sink/jade/tabs.jade +34 -0
  173. data/Framework7-0.9.6/kitchen-sink/jade/transitions.jade +27 -0
  174. data/Framework7-0.9.6/kitchen-sink/js/kitchen-sink.js +442 -0
  175. data/Framework7-0.9.6/kitchen-sink/less/kitchen-sink.less +245 -0
  176. data/Framework7-0.9.6/kitchen-sink/list-view.html +318 -0
  177. data/Framework7-0.9.6/kitchen-sink/login-screen-embedded.html +36 -0
  178. data/Framework7-0.9.6/kitchen-sink/login-screen.html +21 -0
  179. data/Framework7-0.9.6/kitchen-sink/media-lists.html +173 -0
  180. data/Framework7-0.9.6/kitchen-sink/messages.html +84 -0
  181. data/Framework7-0.9.6/kitchen-sink/modals.html +33 -0
  182. data/Framework7-0.9.6/kitchen-sink/navbars-toolbars.html +46 -0
  183. data/Framework7-0.9.6/kitchen-sink/no-navbar-toolbar.html +11 -0
  184. data/Framework7-0.9.6/kitchen-sink/no-navbar.html +11 -0
  185. data/Framework7-0.9.6/kitchen-sink/no-toolbar.html +18 -0
  186. data/Framework7-0.9.6/kitchen-sink/notifications.html +21 -0
  187. data/Framework7-0.9.6/kitchen-sink/panel-right2.html +16 -0
  188. data/Framework7-0.9.6/kitchen-sink/panel-right3.html +16 -0
  189. data/Framework7-0.9.6/kitchen-sink/panels.html +23 -0
  190. data/Framework7-0.9.6/kitchen-sink/photo-browser.html +36 -0
  191. data/Framework7-0.9.6/kitchen-sink/popover.html +21 -0
  192. data/Framework7-0.9.6/kitchen-sink/preloader.html +28 -0
  193. data/Framework7-0.9.6/kitchen-sink/pull-to-refresh.html +52 -0
  194. data/Framework7-0.9.6/kitchen-sink/searchbar.html +233 -0
  195. data/Framework7-0.9.6/kitchen-sink/slider-custom.html +28 -0
  196. data/Framework7-0.9.6/kitchen-sink/slider-horizontal.html +29 -0
  197. data/Framework7-0.9.6/kitchen-sink/slider-multiple.html +89 -0
  198. data/Framework7-0.9.6/kitchen-sink/slider-nested.html +32 -0
  199. data/Framework7-0.9.6/kitchen-sink/slider-space-between.html +29 -0
  200. data/Framework7-0.9.6/kitchen-sink/slider-vertical.html +29 -0
  201. data/Framework7-0.9.6/kitchen-sink/slider.html +54 -0
  202. data/Framework7-0.9.6/kitchen-sink/sortable-list.html +137 -0
  203. data/Framework7-0.9.6/kitchen-sink/swipe-delete.html +216 -0
  204. data/Framework7-0.9.6/kitchen-sink/tabbar-labels.html +51 -0
  205. data/Framework7-0.9.6/kitchen-sink/tabbar.html +0 -0
  206. data/Gemfile +4 -0
  207. data/LICENSE.txt +22 -0
  208. data/README.md +109 -0
  209. data/Rakefile +2 -0
  210. data/framework7rails.gemspec +23 -0
  211. data/install_local.sh +2 -0
  212. data/lib/framework7rails/version.rb +4 -0
  213. data/lib/framework7rails.rb +8 -0
  214. data/update_from_vendor.rb +40 -0
  215. data/vendor/assets/images/i-f7.png +0 -0
  216. data/vendor/assets/images/i-form-calendar.png +0 -0
  217. data/vendor/assets/images/i-form-comment.png +0 -0
  218. data/vendor/assets/images/i-form-email.png +0 -0
  219. data/vendor/assets/images/i-form-gender.png +0 -0
  220. data/vendor/assets/images/i-form-name.png +0 -0
  221. data/vendor/assets/images/i-form-password.png +0 -0
  222. data/vendor/assets/images/i-form-settings.png +0 -0
  223. data/vendor/assets/images/i-form-tel.png +0 -0
  224. data/vendor/assets/images/i-form-toggle.png +0 -0
  225. data/vendor/assets/images/i-form-url.png +0 -0
  226. data/vendor/assets/javascripts/framework7.js +8288 -0
  227. data/vendor/assets/javascripts/framework7.js.map +1 -0
  228. data/vendor/assets/stylesheets/framework7.css +5078 -0
  229. data/vendor/assets/stylesheets/framework7.themes.css +279 -0
  230. metadata +231 -3
@@ -0,0 +1,29 @@
1
+
2
+ <div class="navbar">
3
+ <div class="navbar-inner">
4
+ <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
5
+ <div class="center sliding">Slider Horizontal</div>
6
+ <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
7
+ </div>
8
+ </div>
9
+ <div class="pages navbar-through">
10
+ <div data-page="slider-horizontal" class="page">
11
+ <div class="page-content">
12
+ <div data-pagination=".slider-pagination" class="slider-container slider-init ks-demo-slider">
13
+ <div class="slider-pagination"></div>
14
+ <div class="slider-wrapper">
15
+ <div class="slider-slide">Slide 1</div>
16
+ <div class="slider-slide">Slide 2</div>
17
+ <div class="slider-slide">Slide 3</div>
18
+ <div class="slider-slide">Slide 4</div>
19
+ <div class="slider-slide">Slide 5</div>
20
+ <div class="slider-slide">Slide 6</div>
21
+ <div class="slider-slide">Slide 7</div>
22
+ <div class="slider-slide">Slide 8</div>
23
+ <div class="slider-slide">Slide 9</div>
24
+ <div class="slider-slide">Slide 10</div>
25
+ </div>
26
+ </div>
27
+ </div>
28
+ </div>
29
+ </div>
@@ -0,0 +1,89 @@
1
+
2
+ <div class="navbar">
3
+ <div class="navbar-inner">
4
+ <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
5
+ <div class="center sliding">Multiple Sliders</div>
6
+ <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
7
+ </div>
8
+ </div>
9
+ <div class="pages navbar-through">
10
+ <div data-page="slider-multiple" class="page">
11
+ <div class="page-content">
12
+ <div class="content-block-title">1 Slide Per View, 50px Between</div>
13
+ <div data-pagination=".slider-pagination-c1" data-spaceBetween="50" class="slider-container slider-init ks-carousel-slider">
14
+ <div class="slider-pagination slider-pagination-c1"></div>
15
+ <div class="slider-wrapper">
16
+ <div class="slider-slide">Slide 1</div>
17
+ <div class="slider-slide">Slide 2</div>
18
+ <div class="slider-slide">Slide 3</div>
19
+ <div class="slider-slide">Slide 4</div>
20
+ <div class="slider-slide">Slide 5</div>
21
+ <div class="slider-slide">Slide 6</div>
22
+ <div class="slider-slide">Slide 7</div>
23
+ <div class="slider-slide">Slide 8</div>
24
+ <div class="slider-slide">Slide 9</div>
25
+ <div class="slider-slide">Slide 10</div>
26
+ </div>
27
+ </div>
28
+ <div class="content-block-title">2 Slides Per View, 20px Between</div>
29
+ <div data-pagination=".slider-pagination-c2" data-spaceBetween="20" data-slidesPerView="2" class="slider-container slider-init ks-carousel-slider">
30
+ <div class="slider-pagination slider-pagination-c2"></div>
31
+ <div class="slider-wrapper">
32
+ <div class="slider-slide">Slide 1</div>
33
+ <div class="slider-slide">Slide 2</div>
34
+ <div class="slider-slide">Slide 3</div>
35
+ <div class="slider-slide">Slide 4</div>
36
+ <div class="slider-slide">Slide 5</div>
37
+ <div class="slider-slide">Slide 6</div>
38
+ <div class="slider-slide">Slide 7</div>
39
+ <div class="slider-slide">Slide 8</div>
40
+ <div class="slider-slide">Slide 9</div>
41
+ <div class="slider-slide">Slide 10</div>
42
+ </div>
43
+ </div>
44
+ <div class="content-block-title">3 Slides Per View, 10px Between</div>
45
+ <div data-pagination=".slider-pagination-c3" data-spaceBetween="10" data-slidesPerView="3" class="slider-container slider-init ks-carousel-slider">
46
+ <div class="slider-pagination slider-pagination-c3"></div>
47
+ <div class="slider-wrapper">
48
+ <div class="slider-slide">Slide 1</div>
49
+ <div class="slider-slide">Slide 2</div>
50
+ <div class="slider-slide">Slide 3</div>
51
+ <div class="slider-slide">Slide 4</div>
52
+ <div class="slider-slide">Slide 5</div>
53
+ <div class="slider-slide">Slide 6</div>
54
+ <div class="slider-slide">Slide 7</div>
55
+ <div class="slider-slide">Slide 8</div>
56
+ <div class="slider-slide">Slide 9</div>
57
+ <div class="slider-slide">Slide 10</div>
58
+ </div>
59
+ </div>
60
+ <div class="content-block-title">Vertical, 10px Between</div>
61
+ <div data-pagination=".slider-pagination-c4" data-spaceBetween="10" data-direction="vertical" class="slider-container slider-init ks-carousel-slider">
62
+ <div class="slider-pagination slider-pagination-c4"></div>
63
+ <div class="slider-wrapper">
64
+ <div class="slider-slide">Slide 1</div>
65
+ <div class="slider-slide">Slide 2</div>
66
+ <div class="slider-slide">Slide 3</div>
67
+ <div class="slider-slide">Slide 4</div>
68
+ <div class="slider-slide">Slide 5</div>
69
+ </div>
70
+ </div>
71
+ <div class="content-block-title">Slow speed</div>
72
+ <div data-speed="900" data-pagination=".slider-pagination-c5" data-spaceBetween="50" class="slider-container slider-init ks-carousel-slider">
73
+ <div class="slider-pagination slider-pagination-c5"></div>
74
+ <div class="slider-wrapper">
75
+ <div class="slider-slide">Slide 1</div>
76
+ <div class="slider-slide">Slide 2</div>
77
+ <div class="slider-slide">Slide 3</div>
78
+ <div class="slider-slide">Slide 4</div>
79
+ <div class="slider-slide">Slide 5</div>
80
+ <div class="slider-slide">Slide 6</div>
81
+ <div class="slider-slide">Slide 7</div>
82
+ <div class="slider-slide">Slide 8</div>
83
+ <div class="slider-slide">Slide 9</div>
84
+ <div class="slider-slide">Slide 10</div>
85
+ </div>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </div>
@@ -0,0 +1,32 @@
1
+
2
+ <div class="navbar">
3
+ <div class="navbar-inner">
4
+ <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
5
+ <div class="center sliding">Nested Sliders</div>
6
+ <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
7
+ </div>
8
+ </div>
9
+ <div class="pages navbar-through">
10
+ <div data-page="slider-nested" class="page">
11
+ <div class="page-content">
12
+ <div data-pagination=".slider-pagination-h" data-paginationHide="false" class="slider-container slider-init ks-demo-slider">
13
+ <div class="slider-pagination slider-pagination-h"></div>
14
+ <div class="slider-wrapper">
15
+ <div class="slider-slide">Horizontal Slide 1</div>
16
+ <div class="slider-slide">
17
+ <div data-pagination=".slider-pagination-v" data-direction="vertical" data-paginationHide="false" class="slider-container slider-init ks-demo-slider">
18
+ <div class="slider-pagination slider-pagination-v"></div>
19
+ <div class="slider-wrapper">
20
+ <div class="slider-slide">Vertical Slide 1</div>
21
+ <div class="slider-slide">Vertical Slide 2</div>
22
+ <div class="slider-slide">Vertical Slide 3</div>
23
+ </div>
24
+ </div>
25
+ </div>
26
+ <div class="slider-slide">Horizontal Slide 3</div>
27
+ <div class="slider-slide">Horizontal Slide 4</div>
28
+ </div>
29
+ </div>
30
+ </div>
31
+ </div>
32
+ </div>
@@ -0,0 +1,29 @@
1
+
2
+ <div class="navbar">
3
+ <div class="navbar-inner">
4
+ <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
5
+ <div class="center sliding">Space Between Slides</div>
6
+ <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
7
+ </div>
8
+ </div>
9
+ <div class="pages navbar-through">
10
+ <div data-page="slider-horizontal" class="page">
11
+ <div class="page-content">
12
+ <div data-pagination=".slider-pagination" data-spaceBetween="50" class="slider-container slider-init ks-demo-slider">
13
+ <div class="slider-pagination"></div>
14
+ <div class="slider-wrapper">
15
+ <div class="slider-slide ks-slide-white">Slide 1</div>
16
+ <div class="slider-slide ks-slide-white">Slide 2</div>
17
+ <div class="slider-slide ks-slide-white">Slide 3</div>
18
+ <div class="slider-slide ks-slide-white">Slide 4</div>
19
+ <div class="slider-slide ks-slide-white">Slide 5</div>
20
+ <div class="slider-slide ks-slide-white">Slide 6</div>
21
+ <div class="slider-slide ks-slide-white">Slide 7</div>
22
+ <div class="slider-slide ks-slide-white">Slide 8</div>
23
+ <div class="slider-slide ks-slide-white">Slide 9</div>
24
+ <div class="slider-slide ks-slide-white">Slide 10</div>
25
+ </div>
26
+ </div>
27
+ </div>
28
+ </div>
29
+ </div>
@@ -0,0 +1,29 @@
1
+
2
+ <div class="navbar">
3
+ <div class="navbar-inner">
4
+ <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
5
+ <div class="center sliding">Slider Vertical</div>
6
+ <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
7
+ </div>
8
+ </div>
9
+ <div class="pages navbar-through">
10
+ <div data-page="slider-vertical" class="page">
11
+ <div class="page-content">
12
+ <div data-direction="vertical" data-pagination=".slider-pagination" class="slider-container slider-init ks-demo-slider">
13
+ <div class="slider-pagination"></div>
14
+ <div class="slider-wrapper">
15
+ <div class="slider-slide">Slide 1</div>
16
+ <div class="slider-slide">Slide 2</div>
17
+ <div class="slider-slide">Slide 3</div>
18
+ <div class="slider-slide">Slide 4</div>
19
+ <div class="slider-slide">Slide 5</div>
20
+ <div class="slider-slide">Slide 6</div>
21
+ <div class="slider-slide">Slide 7</div>
22
+ <div class="slider-slide">Slide 8</div>
23
+ <div class="slider-slide">Slide 9</div>
24
+ <div class="slider-slide">Slide 10</div>
25
+ </div>
26
+ </div>
27
+ </div>
28
+ </div>
29
+ </div>
@@ -0,0 +1,54 @@
1
+
2
+ <div class="navbar">
3
+ <div class="navbar-inner">
4
+ <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
5
+ <div class="center sliding">Slider</div>
6
+ <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
7
+ </div>
8
+ </div>
9
+ <div class="pages navbar-through">
10
+ <div data-page="slider" class="page">
11
+ <div class="page-content">
12
+ <div class="content-block">
13
+ <p>Framework7 comes with powerful swipe Slider component similar to <a href="http://idangero.us/sliders/swiper" target="_blank" class="external">Swiper</a> with flexible configuration and lot of features:</p>
14
+ <ul>
15
+ <li>Resistant bounds</li>
16
+ <li>Scroll prevention in opposite direction</li>
17
+ <li>Built-in pagination control</li>
18
+ <li>Carousel mode - allows you to set numbers of slides you want to display at the same time per view</li>
19
+ <li>Nesting - you can nest Slider in Slider</li>
20
+ <li>Auto initialization - no need for JavaScript</li>
21
+ </ul>
22
+ </div>
23
+ <div class="content-block-title">Slider Examples</div>
24
+ <div class="list-block">
25
+ <ul>
26
+ <li><a href="slider-horizontal.html" class="item-link item-content">
27
+ <div class="item-inner">
28
+ <div class="item-title">Slider Horizontal</div>
29
+ </div></a></li>
30
+ <li><a href="slider-vertical.html" class="item-link item-content">
31
+ <div class="item-inner">
32
+ <div class="item-title">Slider Vertical</div>
33
+ </div></a></li>
34
+ <li><a href="slider-space-between.html" class="item-link item-content">
35
+ <div class="item-inner">
36
+ <div class="item-title">Space Between Slides</div>
37
+ </div></a></li>
38
+ <li><a href="slider-multiple.html" class="item-link item-content">
39
+ <div class="item-inner">
40
+ <div class="item-title">Multiple Per Page</div>
41
+ </div></a></li>
42
+ <li><a href="slider-custom.html" class="item-link item-content">
43
+ <div class="item-inner">
44
+ <div class="item-title">Custom Controls</div>
45
+ </div></a></li>
46
+ <li><a href="slider-nested.html" class="item-link item-content">
47
+ <div class="item-inner">
48
+ <div class="item-title">Nested Sliders</div>
49
+ </div></a></li>
50
+ </ul>
51
+ </div>
52
+ </div>
53
+ </div>
54
+ </div>
@@ -0,0 +1,137 @@
1
+
2
+ <div class="navbar">
3
+ <div class="navbar-inner">
4
+ <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
5
+ <div class="center sliding">Sortable List</div>
6
+ <div class="right"><a href="#" class="link toggle-sortable icon-only">Edit</a></div>
7
+ </div>
8
+ </div>
9
+ <div class="pages navbar-through">
10
+ <div data-page="sortable-list" class="page">
11
+ <div class="page-content">
12
+ <div class="content-block">
13
+ <p>Just click "Edit" button on navigation bar to enable sorting</p>
14
+ </div>
15
+ <div class="list-block sortable">
16
+ <ul>
17
+ <li>
18
+ <div class="item-content">
19
+ <div class="item-media"><i class="icon icon-f7"></i></div>
20
+ <div class="item-inner">
21
+ <div class="item-title">1 Jenna Smith</div>
22
+ <div class="item-after">CEO</div>
23
+ </div>
24
+ </div>
25
+ <div class="sortable-handler"></div>
26
+ </li>
27
+ <li>
28
+ <div class="item-content">
29
+ <div class="item-media"><i class="icon icon-f7"></i></div>
30
+ <div class="item-inner">
31
+ <div class="item-title">2 John Doe</div>
32
+ <div class="item-after">Director</div>
33
+ </div>
34
+ </div>
35
+ <div class="sortable-handler"></div>
36
+ </li>
37
+ <li>
38
+ <div class="item-content">
39
+ <div class="item-media"><i class="icon icon-f7"></i></div>
40
+ <div class="item-inner">
41
+ <div class="item-title">3 John Doe</div>
42
+ <div class="item-after">Developer</div>
43
+ </div>
44
+ </div>
45
+ <div class="sortable-handler"></div>
46
+ </li>
47
+ <li>
48
+ <div class="item-content">
49
+ <div class="item-media"><i class="icon icon-f7"></i></div>
50
+ <div class="item-inner">
51
+ <div class="item-title">4 Aaron Darling</div>
52
+ <div class="item-after">Manager</div>
53
+ </div>
54
+ </div>
55
+ <div class="sortable-handler"></div>
56
+ </li>
57
+ <li>
58
+ <div class="item-content">
59
+ <div class="item-media"><i class="icon icon-f7"></i></div>
60
+ <div class="item-inner">
61
+ <div class="item-title">5 Calvin Johnson</div>
62
+ <div class="item-after">Accounter</div>
63
+ </div>
64
+ </div>
65
+ <div class="sortable-handler"></div>
66
+ </li>
67
+ <li>
68
+ <div class="item-content">
69
+ <div class="item-media"><i class="icon icon-f7"></i></div>
70
+ <div class="item-inner">
71
+ <div class="item-title">6 John Smith</div>
72
+ <div class="item-after">SEO</div>
73
+ </div>
74
+ </div>
75
+ <div class="sortable-handler"></div>
76
+ </li>
77
+ <li>
78
+ <div class="item-content">
79
+ <div class="item-media"><i class="icon icon-f7"></i></div>
80
+ <div class="item-inner">
81
+ <div class="item-title">7 Chloe</div>
82
+ <div class="item-after">Manager</div>
83
+ </div>
84
+ </div>
85
+ <div class="sortable-handler"></div>
86
+ </li>
87
+ </ul>
88
+ </div>
89
+ <div class="list-block media-list sortable">
90
+ <ul>
91
+ <li>
92
+ <div class="item-content">
93
+ <div class="item-media"><img src="http://hhhhold.com/160/d/jpg?1" width="80"/></div>
94
+ <div class="item-inner">
95
+ <div class="item-title-row">
96
+ <div class="item-title">Yellow Submarine</div>
97
+ <div class="item-after">$15</div>
98
+ </div>
99
+ <div class="item-subtitle">Beatles</div>
100
+ <div class="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.</div>
101
+ </div>
102
+ </div>
103
+ <div class="sortable-handler"></div>
104
+ </li>
105
+ <li>
106
+ <div class="item-content">
107
+ <div class="item-media"><img src="http://hhhhold.com/160/d/jpg?2" width="80"/></div>
108
+ <div class="item-inner">
109
+ <div class="item-title-row">
110
+ <div class="item-title">Don't Stop Me Now</div>
111
+ <div class="item-after">$22</div>
112
+ </div>
113
+ <div class="item-subtitle">Queen</div>
114
+ <div class="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.</div>
115
+ </div>
116
+ </div>
117
+ <div class="sortable-handler"></div>
118
+ </li>
119
+ <li>
120
+ <div class="item-content">
121
+ <div class="item-media"><img src="http://hhhhold.com/160/d/jpg?3" width="80"/></div>
122
+ <div class="item-inner">
123
+ <div class="item-title-row">
124
+ <div class="item-title">Billie Jean</div>
125
+ <div class="item-after">$16</div>
126
+ </div>
127
+ <div class="item-subtitle">Michael Jackson</div>
128
+ <div class="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.</div>
129
+ </div>
130
+ </div>
131
+ <div class="sortable-handler"></div>
132
+ </li>
133
+ </ul>
134
+ </div>
135
+ </div>
136
+ </div>
137
+ </div>
@@ -0,0 +1,216 @@
1
+
2
+ <div class="navbar">
3
+ <div class="navbar-inner">
4
+ <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
5
+ <div class="center sliding">Swipe To Delete</div>
6
+ <div class="right"><a href="#" class="open-panel link icon-only"><i class="icon icon-bars"></i></a></div>
7
+ </div>
8
+ </div>
9
+ <div class="pages navbar-through">
10
+ <div data-page="swipe-delete" class="page">
11
+ <div class="page-content">
12
+ <div class="content-block">
13
+ <p>Swipe out actions on list elements is one of the most awesome F7 features. It allows you to call hidden menu for each list element where you can put default ready-to use delete button or any other buttons for some required actions. </p>
14
+ </div>
15
+ <div class="content-block-title">Swipe to delete with confirm modal</div>
16
+ <div class="list-block">
17
+ <ul>
18
+ <li class="swipeout">
19
+ <div class="item-content swipeout-content">
20
+ <div class="item-media"><i class="icon icon-f7"></i></div>
21
+ <div class="item-inner">
22
+ <div class="item-title">Swipe left on me please</div>
23
+ </div>
24
+ </div>
25
+ <div class="swipeout-actions-right"><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a></div>
26
+ </li>
27
+ <li class="swipeout">
28
+ <div class="item-content swipeout-content">
29
+ <div class="item-media"><i class="icon icon-f7"></i></div>
30
+ <div class="item-inner">
31
+ <div class="item-title">Swipe left on me too</div>
32
+ </div>
33
+ </div>
34
+ <div class="swipeout-actions-right"><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete">Delete</a></div>
35
+ </li>
36
+ <li>
37
+ <div class="item-content">
38
+ <div class="item-media"><i class="icon icon-f7"></i></div>
39
+ <div class="item-inner">
40
+ <div class="item-title">I am not removable</div>
41
+ </div>
42
+ </div>
43
+ </li>
44
+ </ul>
45
+ </div>
46
+ <div class="content-block-title">Swipe to delete without confirm</div>
47
+ <div class="list-block">
48
+ <ul>
49
+ <li class="swipeout">
50
+ <div class="item-content swipeout-content">
51
+ <div class="item-inner">
52
+ <div class="item-title">Swipe left on me please</div>
53
+ </div>
54
+ </div>
55
+ <div class="swipeout-actions-right"><a href="#" class="swipeout-delete">Delete</a></div>
56
+ </li>
57
+ <li class="swipeout">
58
+ <div class="item-content swipeout-content">
59
+ <div class="item-inner">
60
+ <div class="item-title">Swipe left on me too</div>
61
+ </div>
62
+ </div>
63
+ <div class="swipeout-actions-right"><a href="#" class="swipeout-delete">Delete</a></div>
64
+ </li>
65
+ <li>
66
+ <div class="item-content">
67
+ <div class="item-inner">
68
+ <div class="item-title">I am not removable</div>
69
+ </div>
70
+ </div>
71
+ </li>
72
+ </ul>
73
+ </div>
74
+ <div class="content-block-title">Swipe for actions</div>
75
+ <div class="list-block">
76
+ <ul>
77
+ <li class="swipeout">
78
+ <div class="item-content swipeout-content">
79
+ <div class="item-media"><i class="icon icon-f7"></i></div>
80
+ <div class="item-inner">
81
+ <div class="item-title">Swipe left on me please</div>
82
+ </div>
83
+ </div>
84
+ <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="swipeout-delete">Delete</a></div>
85
+ </li>
86
+ <li class="swipeout">
87
+ <div class="item-content swipeout-content">
88
+ <div class="item-media"><i class="icon icon-f7"></i></div>
89
+ <div class="item-inner">
90
+ <div class="item-title">Swipe left on me too</div>
91
+ </div>
92
+ </div>
93
+ <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="swipeout-delete">Delete</a></div>
94
+ </li>
95
+ <li class="swipeout">
96
+ <div class="item-content swipeout-content">
97
+ <div class="item-media"><i class="icon icon-f7"></i></div>
98
+ <div class="item-inner">
99
+ <div class="item-title">You can't delete me</div>
100
+ </div>
101
+ </div>
102
+ <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a></div>
103
+ </li>
104
+ </ul>
105
+ </div>
106
+ <div class="content-block-title">With callback on remove</div>
107
+ <div class="list-block">
108
+ <ul>
109
+ <li class="swipeout demo-remove-callback">
110
+ <div class="item-content swipeout-content">
111
+ <div class="item-inner">
112
+ <div class="item-title">Swipe left on me please</div>
113
+ </div>
114
+ </div>
115
+ <div class="swipeout-actions-right"><a href="#" class="swipeout-delete">Delete</a></div>
116
+ </li>
117
+ <li class="swipeout demo-remove-callback">
118
+ <div class="item-content swipeout-content">
119
+ <div class="item-inner">
120
+ <div class="item-title">Swipe left on me too</div>
121
+ </div>
122
+ </div>
123
+ <div class="swipeout-actions-right"><a href="#" class="swipeout-delete">Delete</a></div>
124
+ </li>
125
+ <li>
126
+ <div class="item-content">
127
+ <div class="item-inner">
128
+ <div class="item-title">I am not removable</div>
129
+ </div>
130
+ </div>
131
+ </li>
132
+ </ul>
133
+ </div>
134
+ <div class="content-block-title">With actions on left side (swipe to right)</div>
135
+ <div class="list-block">
136
+ <ul>
137
+ <li class="swipeout">
138
+ <div class="item-content swipeout-content">
139
+ <div class="item-media"><i class="icon icon-f7"></i></div>
140
+ <div class="item-inner">
141
+ <div class="item-title">Swipe right on me please</div>
142
+ </div>
143
+ </div>
144
+ <div class="swipeout-actions-left"><a href="#" class="bg-green demo-reply">Reply</a><a href="#" class="bg-blue demo-forward">Forward</a></div>
145
+ </li>
146
+ <li class="swipeout">
147
+ <div class="item-content swipeout-content">
148
+ <div class="item-media"><i class="icon icon-f7"></i></div>
149
+ <div class="item-inner">
150
+ <div class="item-title">Swipe right on me too</div>
151
+ </div>
152
+ </div>
153
+ <div class="swipeout-actions-left"><a href="#" class="bg-green demo-reply">Reply</a><a href="#" class="bg-blue demo-forward">Forward</a></div>
154
+ </li>
155
+ </ul>
156
+ </div>
157
+ <div class="content-block-title">On both sides with overswipes</div>
158
+ <div class="list-block media-list">
159
+ <ul>
160
+ <li class="swipeout">
161
+ <div class="swipeout-content"><a href="#" class="item-link item-content">
162
+ <div class="item-inner">
163
+ <div class="item-title-row">
164
+ <div class="item-title">Facebook</div>
165
+ <div class="item-after">17:14</div>
166
+ </div>
167
+ <div class="item-subtitle">New messages from John Doe</div>
168
+ <div class="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.</div>
169
+ </div></a></div>
170
+ <div class="swipeout-actions-left"><a href="#" class="bg-green swipeout-overswipe demo-reply">Reply</a><a href="#" class="demo-forward bg-blue">Forward</a></div>
171
+ <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="demo-mark bg-orange">Mark</a><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a></div>
172
+ </li>
173
+ <li class="swipeout">
174
+ <div class="swipeout-content"><a href="#" class="item-link item-content">
175
+ <div class="item-inner">
176
+ <div class="item-title-row">
177
+ <div class="item-title">John Doe (via Twitter)</div>
178
+ <div class="item-after">17:11</div>
179
+ </div>
180
+ <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
181
+ <div class="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.</div>
182
+ </div></a></div>
183
+ <div class="swipeout-actions-left"><a href="#" class="bg-green swipeout-overswipe demo-reply">Reply</a><a href="#" class="demo-forward bg-blue">Forward</a></div>
184
+ <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="demo-mark bg-orange">Mark</a><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a></div>
185
+ </li>
186
+ <li class="swipeout">
187
+ <div class="swipeout-content"><a href="#" class="item-link item-content">
188
+ <div class="item-inner">
189
+ <div class="item-title-row">
190
+ <div class="item-title">Facebook</div>
191
+ <div class="item-after">16:48</div>
192
+ </div>
193
+ <div class="item-subtitle">New messages from John Doe</div>
194
+ <div class="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.</div>
195
+ </div></a></div>
196
+ <div class="swipeout-actions-left"><a href="#" class="bg-green swipeout-overswipe demo-reply">Reply</a><a href="#" class="demo-forward bg-blue">Forward</a></div>
197
+ <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="demo-mark bg-orange">Mark</a><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a></div>
198
+ </li>
199
+ <li class="swipeout">
200
+ <div class="swipeout-content"><a href="#" class="item-link item-content">
201
+ <div class="item-inner">
202
+ <div class="item-title-row">
203
+ <div class="item-title">John Doe (via Twitter)</div>
204
+ <div class="item-after">15:32</div>
205
+ </div>
206
+ <div class="item-subtitle">John Doe (@_johndoe) mentioned you on Twitter!</div>
207
+ <div class="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.</div>
208
+ </div></a></div>
209
+ <div class="swipeout-actions-left"><a href="#" class="bg-green swipeout-overswipe demo-reply">Reply</a><a href="#" class="demo-forward bg-blue">Forward</a></div>
210
+ <div class="swipeout-actions-right"><a href="#" class="demo-actions">More</a><a href="#" class="demo-mark bg-orange">Mark</a><a href="#" data-confirm="Are you sure you want to delete this item?" class="swipeout-delete swipeout-overswipe">Delete</a></div>
211
+ </li>
212
+ </ul>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ </div>