framework7rails 3.0.0 → 4.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +1 -1
- data/lib/framework7rails/version.rb +2 -2
- data/update_from_vendor.rb +1 -1
- data/vendor/assets/javascripts/framework7.js +5806 -2303
- data/vendor/assets/javascripts/framework7.js.map +1 -1
- data/vendor/assets/stylesheets/framework7.css +2164 -464
- data/vendor/assets/stylesheets/framework7.themes.css +189 -25
- metadata +2 -205
- data/Framework7-0.9.6/.gitignore +0 -5
- data/Framework7-0.9.6/.jshintrc +0 -33
- data/Framework7-0.9.6/.travis.yml +0 -5
- data/Framework7-0.9.6/CHANGELOG.md +0 -342
- data/Framework7-0.9.6/Gruntfile.js +0 -560
- data/Framework7-0.9.6/LICENSE +0 -20
- data/Framework7-0.9.6/README.md +0 -113
- data/Framework7-0.9.6/apps/todo7/css/todo7.css +0 -208
- data/Framework7-0.9.6/apps/todo7/img/Icon-152.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/bg.jpg +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-114.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-120.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-144.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-57.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-72.png +0 -0
- data/Framework7-0.9.6/apps/todo7/img/icon-76.png +0 -0
- data/Framework7-0.9.6/apps/todo7/index.html +0 -112
- data/Framework7-0.9.6/apps/todo7/jade/index.jade +0 -99
- data/Framework7-0.9.6/apps/todo7/js/todo7.js +0 -102
- data/Framework7-0.9.6/apps/todo7/less/todo7.less +0 -221
- data/Framework7-0.9.6/apps/todo7/manifest.php +0 -27
- data/Framework7-0.9.6/apps/weather7/css/weather7.css +0 -291
- data/Framework7-0.9.6/apps/weather7/img/bg.jpg +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-114.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-120.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-144.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-152.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-57.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-72.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/icon-76.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/logo.png +0 -0
- data/Framework7-0.9.6/apps/weather7/img/yahoo-logo.png +0 -0
- data/Framework7-0.9.6/apps/weather7/index.html +0 -127
- data/Framework7-0.9.6/apps/weather7/jade/index.jade +0 -113
- data/Framework7-0.9.6/apps/weather7/js/weather7.js +0 -213
- data/Framework7-0.9.6/apps/weather7/less/weather7.less +0 -294
- data/Framework7-0.9.6/apps/weather7/manifest.php +0 -29
- data/Framework7-0.9.6/bower.json +0 -30
- data/Framework7-0.9.6/dist/about.html +0 -28
- data/Framework7-0.9.6/dist/css/framework7.css +0 -4922
- data/Framework7-0.9.6/dist/css/framework7.min.css +0 -15
- data/Framework7-0.9.6/dist/css/framework7.rtl.css +0 -427
- data/Framework7-0.9.6/dist/css/framework7.rtl.min.css +0 -1
- data/Framework7-0.9.6/dist/css/framework7.themes.css +0 -279
- data/Framework7-0.9.6/dist/css/framework7.themes.min.css +0 -1
- data/Framework7-0.9.6/dist/css/my-app.css +0 -0
- data/Framework7-0.9.6/dist/form.html +0 -229
- data/Framework7-0.9.6/dist/img/i-f7.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-calendar.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-comment.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-email.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-gender.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-name.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-password.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-settings.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-tel.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-toggle.png +0 -0
- data/Framework7-0.9.6/dist/img/i-form-url.png +0 -0
- data/Framework7-0.9.6/dist/index.html +0 -102
- data/Framework7-0.9.6/dist/js/framework7.js +0 -7479
- data/Framework7-0.9.6/dist/js/framework7.min.js +0 -18
- data/Framework7-0.9.6/dist/js/my-app.js +0 -48
- data/Framework7-0.9.6/dist/services.html +0 -28
- data/Framework7-0.9.6/examples/split-view-panel/about.html +0 -20
- data/Framework7-0.9.6/examples/split-view-panel/css/my-app.css +0 -56
- data/Framework7-0.9.6/examples/split-view-panel/index.html +0 -135
- data/Framework7-0.9.6/examples/split-view-panel/jade/about.jade +0 -18
- data/Framework7-0.9.6/examples/split-view-panel/jade/index.jade +0 -107
- data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-1.jade +0 -15
- data/Framework7-0.9.6/examples/split-view-panel/jade/left-page-2.jade +0 -15
- data/Framework7-0.9.6/examples/split-view-panel/jade/services.jade +0 -18
- data/Framework7-0.9.6/examples/split-view-panel/js/my-app.js +0 -15
- data/Framework7-0.9.6/examples/split-view-panel/left-page-1.html +0 -19
- data/Framework7-0.9.6/examples/split-view-panel/left-page-2.html +0 -19
- data/Framework7-0.9.6/examples/split-view-panel/less/my-app.less +0 -62
- data/Framework7-0.9.6/examples/split-view-panel/services.html +0 -20
- data/Framework7-0.9.6/examples/split-view/about.html +0 -19
- data/Framework7-0.9.6/examples/split-view/css/my-app.css +0 -23
- data/Framework7-0.9.6/examples/split-view/index.html +0 -135
- data/Framework7-0.9.6/examples/split-view/jade/about.jade +0 -15
- data/Framework7-0.9.6/examples/split-view/jade/index.jade +0 -107
- data/Framework7-0.9.6/examples/split-view/jade/left-page-1.jade +0 -15
- data/Framework7-0.9.6/examples/split-view/jade/left-page-2.jade +0 -15
- data/Framework7-0.9.6/examples/split-view/jade/services.jade +0 -15
- data/Framework7-0.9.6/examples/split-view/js/my-app.js +0 -15
- data/Framework7-0.9.6/examples/split-view/left-page-1.html +0 -19
- data/Framework7-0.9.6/examples/split-view/left-page-2.html +0 -19
- data/Framework7-0.9.6/examples/split-view/less/my-app.less +0 -23
- data/Framework7-0.9.6/examples/split-view/services.html +0 -19
- data/Framework7-0.9.6/examples/tab-bar/about.html +0 -19
- data/Framework7-0.9.6/examples/tab-bar/css/my-app.css +0 -34
- data/Framework7-0.9.6/examples/tab-bar/index.html +0 -238
- data/Framework7-0.9.6/examples/tab-bar/jade/about.jade +0 -15
- data/Framework7-0.9.6/examples/tab-bar/jade/index.jade +0 -189
- data/Framework7-0.9.6/examples/tab-bar/jade/services.jade +0 -15
- data/Framework7-0.9.6/examples/tab-bar/js/my-app.js +0 -15
- data/Framework7-0.9.6/examples/tab-bar/less/my-app.less +0 -35
- data/Framework7-0.9.6/examples/tab-bar/services.html +0 -19
- data/Framework7-0.9.6/kitchen-sink/about.html +0 -22
- data/Framework7-0.9.6/kitchen-sink/accordion.html +0 -171
- data/Framework7-0.9.6/kitchen-sink/color-themes.html +0 -42
- data/Framework7-0.9.6/kitchen-sink/contacts.html +0 -190
- data/Framework7-0.9.6/kitchen-sink/core-features.html +0 -70
- data/Framework7-0.9.6/kitchen-sink/css/kitchen-sink.css +0 -233
- data/Framework7-0.9.6/kitchen-sink/deep-2.html +0 -22
- data/Framework7-0.9.6/kitchen-sink/deep-navbar-2.html +0 -19
- data/Framework7-0.9.6/kitchen-sink/deep-navbar-3.html +0 -19
- data/Framework7-0.9.6/kitchen-sink/deep-navbar.html +0 -18
- data/Framework7-0.9.6/kitchen-sink/forms-buttons.html +0 -64
- data/Framework7-0.9.6/kitchen-sink/forms-checkboxes.html +0 -200
- data/Framework7-0.9.6/kitchen-sink/forms-elements.html +0 -359
- data/Framework7-0.9.6/kitchen-sink/forms-selects.html +0 -72
- data/Framework7-0.9.6/kitchen-sink/forms-storage.html +0 -181
- data/Framework7-0.9.6/kitchen-sink/forms.html +0 -56
- data/Framework7-0.9.6/kitchen-sink/grid.html +0 -140
- data/Framework7-0.9.6/kitchen-sink/hide-navbar-toolbar.html +0 -42
- data/Framework7-0.9.6/kitchen-sink/img/beach.jpg +0 -0
- data/Framework7-0.9.6/kitchen-sink/img/lock.jpg +0 -0
- data/Framework7-0.9.6/kitchen-sink/img/monkey.jpg +0 -0
- data/Framework7-0.9.6/kitchen-sink/img/mountains.jpg +0 -0
- data/Framework7-0.9.6/kitchen-sink/index.html +0 -466
- data/Framework7-0.9.6/kitchen-sink/infinite-scroll-load.php +0 -19
- data/Framework7-0.9.6/kitchen-sink/infinite-scroll.html +0 -119
- data/Framework7-0.9.6/kitchen-sink/jade/about.jade +0 -19
- data/Framework7-0.9.6/kitchen-sink/jade/accordion.jade +0 -133
- data/Framework7-0.9.6/kitchen-sink/jade/color-themes.jade +0 -37
- data/Framework7-0.9.6/kitchen-sink/jade/contacts.jade +0 -115
- data/Framework7-0.9.6/kitchen-sink/jade/core-features.jade +0 -74
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-2.jade +0 -15
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar-3.jade +0 -15
- data/Framework7-0.9.6/kitchen-sink/jade/deep-navbar.jade +0 -15
- data/Framework7-0.9.6/kitchen-sink/jade/forms-buttons.jade +0 -71
- data/Framework7-0.9.6/kitchen-sink/jade/forms-checkboxes.jade +0 -152
- data/Framework7-0.9.6/kitchen-sink/jade/forms-elements.jade +0 -239
- data/Framework7-0.9.6/kitchen-sink/jade/forms-selects.jade +0 -60
- data/Framework7-0.9.6/kitchen-sink/jade/forms-storage.jade +0 -134
- data/Framework7-0.9.6/kitchen-sink/jade/forms.jade +0 -52
- data/Framework7-0.9.6/kitchen-sink/jade/grid.jade +0 -110
- data/Framework7-0.9.6/kitchen-sink/jade/hide-navbar-toolbar.jade +0 -38
- data/Framework7-0.9.6/kitchen-sink/jade/index.jade +0 -427
- data/Framework7-0.9.6/kitchen-sink/jade/infinite-scroll.jade +0 -20
- data/Framework7-0.9.6/kitchen-sink/jade/list-view.jade +0 -266
- data/Framework7-0.9.6/kitchen-sink/jade/login-screen-embedded.jade +0 -22
- data/Framework7-0.9.6/kitchen-sink/jade/login-screen.jade +0 -20
- data/Framework7-0.9.6/kitchen-sink/jade/media-lists.jade +0 -170
- data/Framework7-0.9.6/kitchen-sink/jade/messages.jade +0 -71
- data/Framework7-0.9.6/kitchen-sink/jade/modals.jade +0 -36
- data/Framework7-0.9.6/kitchen-sink/jade/navbars-toolbars.jade +0 -43
- data/Framework7-0.9.6/kitchen-sink/jade/no-navbar-toolbar.jade +0 -7
- data/Framework7-0.9.6/kitchen-sink/jade/no-navbar.jade +0 -7
- data/Framework7-0.9.6/kitchen-sink/jade/no-toolbar.jade +0 -17
- data/Framework7-0.9.6/kitchen-sink/jade/notifications.jade +0 -23
- data/Framework7-0.9.6/kitchen-sink/jade/panels.jade +0 -21
- data/Framework7-0.9.6/kitchen-sink/jade/photo-browser.jade +0 -36
- data/Framework7-0.9.6/kitchen-sink/jade/popover.jade +0 -21
- data/Framework7-0.9.6/kitchen-sink/jade/preloader.jade +0 -31
- data/Framework7-0.9.6/kitchen-sink/jade/pull-to-refresh.jade +0 -44
- data/Framework7-0.9.6/kitchen-sink/jade/searchbar.jade +0 -146
- data/Framework7-0.9.6/kitchen-sink/jade/slider-custom.jade +0 -23
- data/Framework7-0.9.6/kitchen-sink/jade/slider-horizontal.jade +0 -18
- data/Framework7-0.9.6/kitchen-sink/jade/slider-multiple.jade +0 -48
- data/Framework7-0.9.6/kitchen-sink/jade/slider-nested.jade +0 -26
- data/Framework7-0.9.6/kitchen-sink/jade/slider-space-between.jade +0 -18
- data/Framework7-0.9.6/kitchen-sink/jade/slider-vertical.jade +0 -18
- data/Framework7-0.9.6/kitchen-sink/jade/slider.jade +0 -57
- data/Framework7-0.9.6/kitchen-sink/jade/sortable-list.jade +0 -107
- data/Framework7-0.9.6/kitchen-sink/jade/swipe-delete.jade +0 -195
- data/Framework7-0.9.6/kitchen-sink/jade/tabbar-labels.jade +0 -54
- data/Framework7-0.9.6/kitchen-sink/jade/tabbar.jade +0 -50
- data/Framework7-0.9.6/kitchen-sink/jade/tabs.jade +0 -34
- data/Framework7-0.9.6/kitchen-sink/jade/transitions.jade +0 -27
- data/Framework7-0.9.6/kitchen-sink/js/kitchen-sink.js +0 -442
- data/Framework7-0.9.6/kitchen-sink/less/kitchen-sink.less +0 -245
- data/Framework7-0.9.6/kitchen-sink/list-view.html +0 -318
- data/Framework7-0.9.6/kitchen-sink/login-screen-embedded.html +0 -36
- data/Framework7-0.9.6/kitchen-sink/login-screen.html +0 -21
- data/Framework7-0.9.6/kitchen-sink/media-lists.html +0 -173
- data/Framework7-0.9.6/kitchen-sink/messages.html +0 -84
- data/Framework7-0.9.6/kitchen-sink/modals.html +0 -33
- data/Framework7-0.9.6/kitchen-sink/navbars-toolbars.html +0 -46
- data/Framework7-0.9.6/kitchen-sink/no-navbar-toolbar.html +0 -11
- data/Framework7-0.9.6/kitchen-sink/no-navbar.html +0 -11
- data/Framework7-0.9.6/kitchen-sink/no-toolbar.html +0 -18
- data/Framework7-0.9.6/kitchen-sink/notifications.html +0 -21
- data/Framework7-0.9.6/kitchen-sink/panel-right2.html +0 -16
- data/Framework7-0.9.6/kitchen-sink/panel-right3.html +0 -16
- data/Framework7-0.9.6/kitchen-sink/panels.html +0 -23
- data/Framework7-0.9.6/kitchen-sink/photo-browser.html +0 -36
- data/Framework7-0.9.6/kitchen-sink/popover.html +0 -21
- data/Framework7-0.9.6/kitchen-sink/preloader.html +0 -28
- data/Framework7-0.9.6/kitchen-sink/pull-to-refresh.html +0 -52
- data/Framework7-0.9.6/kitchen-sink/searchbar.html +0 -233
- data/Framework7-0.9.6/kitchen-sink/slider-custom.html +0 -28
- data/Framework7-0.9.6/kitchen-sink/slider-horizontal.html +0 -29
- data/Framework7-0.9.6/kitchen-sink/slider-multiple.html +0 -89
- data/Framework7-0.9.6/kitchen-sink/slider-nested.html +0 -32
- data/Framework7-0.9.6/kitchen-sink/slider-space-between.html +0 -29
- data/Framework7-0.9.6/kitchen-sink/slider-vertical.html +0 -29
- data/Framework7-0.9.6/kitchen-sink/slider.html +0 -54
- data/Framework7-0.9.6/kitchen-sink/sortable-list.html +0 -137
- data/Framework7-0.9.6/kitchen-sink/swipe-delete.html +0 -216
- data/Framework7-0.9.6/kitchen-sink/tabbar-labels.html +0 -51
- data/Framework7-0.9.6/kitchen-sink/tabbar.html +0 -0
@@ -1,15 +0,0 @@
|
|
1
|
-
.navbar
|
2
|
-
.navbar-inner
|
3
|
-
.left
|
4
|
-
a(href="#").back.link
|
5
|
-
i.icon.icon-back
|
6
|
-
span Back
|
7
|
-
.center.sliding About Us
|
8
|
-
.pages
|
9
|
-
.page(data-page="about")
|
10
|
-
.page-content
|
11
|
-
.content-block
|
12
|
-
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.
|
13
|
-
p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
|
14
|
-
p Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.
|
15
|
-
p Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.
|
@@ -1,189 +0,0 @@
|
|
1
|
-
doctype
|
2
|
-
html
|
3
|
-
head
|
4
|
-
meta(charset="utf-8")
|
5
|
-
meta(name="viewport", content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui")
|
6
|
-
meta(name='apple-mobile-web-app-capable', content='yes')
|
7
|
-
meta(name="apple-mobile-web-app-status-bar-style", content="black")
|
8
|
-
title My App
|
9
|
-
// Path to Framework7 Library CSS
|
10
|
-
link(rel="stylesheet", href="../../dist/css/framework7.min.css")
|
11
|
-
// Path to your custom app styles
|
12
|
-
link(rel="stylesheet", href="css/my-app.css")
|
13
|
-
body
|
14
|
-
// Status bar overlay for fullscreen mode
|
15
|
-
.statusbar-overlay
|
16
|
-
|
17
|
-
// Panels overlay
|
18
|
-
.panel-overlay
|
19
|
-
// Left panel with reveal effect
|
20
|
-
.panel.panel-left.panel-reveal
|
21
|
-
.content-block
|
22
|
-
p Left panel content goes here
|
23
|
-
// Right panel with cover effect
|
24
|
-
.panel.panel-right.panel-cover
|
25
|
-
.content-block
|
26
|
-
p Right panel content goes here
|
27
|
-
|
28
|
-
// Views, and they are tabs
|
29
|
-
// We need to set "toolbar-through" class on it to keep space for our tab bar
|
30
|
-
.views.tabs.toolbar-through
|
31
|
-
// Your first view, it is also a .tab and should have "active" class to make it visible by default
|
32
|
-
.view.view-main.tab.active#view-1
|
33
|
-
// Pages
|
34
|
-
.pages
|
35
|
-
// Page, data-page contains page name
|
36
|
-
.page(data-page="index-1")
|
37
|
-
// Scrollable page content
|
38
|
-
.page-content
|
39
|
-
.content-block-title Welcome
|
40
|
-
.content-block
|
41
|
-
p This is an example of tab bar application layout. The main point of such tabbed layout is that each tab contains independent view with its own routing and navigation.
|
42
|
-
p Each tab/view may have different layout, different navbar type (dynamic, fixed or static) or without navbar like this tab.
|
43
|
-
p And of course, your favorite panels are still here:
|
44
|
-
a(href="#").open-panel left
|
45
|
-
| and
|
46
|
-
a(href="#", data-panel="right").open-panel right
|
47
|
-
p Icons and their labels in tab bar below are just for example and don't related to their content.
|
48
|
-
// Second view (for second wrap)
|
49
|
-
.view.tab#view-2
|
50
|
-
// We can make with view with navigation, let's add Top Navbar
|
51
|
-
.navbar
|
52
|
-
.navbar-inner
|
53
|
-
.center.sliding Second View
|
54
|
-
.pages.navbar-through
|
55
|
-
.page(data-page="index-2")
|
56
|
-
.page-content
|
57
|
-
.content-block
|
58
|
-
p This is a second view. Lets, for example, have here some internal pages with navbar navigation
|
59
|
-
.list-block
|
60
|
-
ul
|
61
|
-
li
|
62
|
-
a(href="about.html").item-link
|
63
|
-
.item-content
|
64
|
-
.item-inner
|
65
|
-
.item-title About Us
|
66
|
-
li
|
67
|
-
a(href="services.html").item-link
|
68
|
-
.item-content
|
69
|
-
.item-inner
|
70
|
-
.item-title Services
|
71
|
-
.view.tab#view-3
|
72
|
-
.pages
|
73
|
-
.page(data-page="index-3")
|
74
|
-
.page-content
|
75
|
-
.content-block-title Another plain static view
|
76
|
-
.content-block
|
77
|
-
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.
|
78
|
-
p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
|
79
|
-
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.
|
80
|
-
|
81
|
-
.view.tab#view-4
|
82
|
-
.pages.navbar-fixed
|
83
|
-
.page(data-page="index-4")
|
84
|
-
.navbar
|
85
|
-
.navbar-inner
|
86
|
-
.center Settings
|
87
|
-
.page-content
|
88
|
-
.list-block
|
89
|
-
ul
|
90
|
-
li
|
91
|
-
.item-content
|
92
|
-
.item-media
|
93
|
-
i.icon.icon-form-name
|
94
|
-
.item-inner
|
95
|
-
.item-title.label Name
|
96
|
-
.item-input
|
97
|
-
input(type="text", placeholder="Your name")
|
98
|
-
li
|
99
|
-
.item-content
|
100
|
-
.item-media
|
101
|
-
i.icon.icon-form-email
|
102
|
-
.item-inner
|
103
|
-
.item-title.label E-mail
|
104
|
-
.item-input
|
105
|
-
input(type="email", placeholder="E-mail")
|
106
|
-
li
|
107
|
-
.item-content
|
108
|
-
.item-media
|
109
|
-
i.icon.icon-form-url
|
110
|
-
.item-inner
|
111
|
-
.item-title.label URL
|
112
|
-
.item-input
|
113
|
-
input(type="url", placeholder="URL")
|
114
|
-
li
|
115
|
-
.item-content
|
116
|
-
.item-media
|
117
|
-
i.icon.icon-form-password
|
118
|
-
.item-inner
|
119
|
-
.item-title.label Password
|
120
|
-
.item-input
|
121
|
-
input(type="password", placeholder="Password")
|
122
|
-
li
|
123
|
-
.item-content
|
124
|
-
.item-media
|
125
|
-
i.icon.icon-form-tel
|
126
|
-
.item-inner
|
127
|
-
.item-title.label Phone
|
128
|
-
.item-input
|
129
|
-
input(type="tel", placeholder="Phone")
|
130
|
-
li
|
131
|
-
.item-content
|
132
|
-
.item-media
|
133
|
-
i.icon.icon-form-gender
|
134
|
-
.item-inner
|
135
|
-
.item-title.label Gender
|
136
|
-
.item-input
|
137
|
-
select
|
138
|
-
option Male
|
139
|
-
option Female
|
140
|
-
li
|
141
|
-
.item-content
|
142
|
-
.item-media
|
143
|
-
i.icon.icon-form-calendar
|
144
|
-
.item-inner
|
145
|
-
.item-title.label Birth date
|
146
|
-
.item-input
|
147
|
-
input(type="date", placeholder="Birth day", value="2014-04-30")
|
148
|
-
li
|
149
|
-
.item-content
|
150
|
-
.item-media
|
151
|
-
i.icon.icon-form-toggle
|
152
|
-
.item-inner
|
153
|
-
.item-title.label Switch
|
154
|
-
.item-input
|
155
|
-
label.label-switch
|
156
|
-
input(type="checkbox")
|
157
|
-
.checkbox
|
158
|
-
li
|
159
|
-
.item-content
|
160
|
-
.item-media
|
161
|
-
i.icon.icon-form-settings
|
162
|
-
.item-inner
|
163
|
-
.item-title.label Slider
|
164
|
-
.item-input
|
165
|
-
.range-slider
|
166
|
-
input(type="range", min="0", max="100", value="50", step="0.1")
|
167
|
-
.content-block
|
168
|
-
p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
|
169
|
-
// Bottom Tabbar
|
170
|
-
.toolbar.tabbar.tabbar-labels
|
171
|
-
.toolbar-inner
|
172
|
-
a(href="#view-1").tab-link.active
|
173
|
-
i.icon.tabbar-demo-icon-1
|
174
|
-
span.tabbar-label Information
|
175
|
-
a(href="#view-2").tab-link
|
176
|
-
i.icon.tabbar-demo-icon-2
|
177
|
-
span.tabbar-label Inbox
|
178
|
-
a(href="#view-3").tab-link
|
179
|
-
i.icon.tabbar-demo-icon-3
|
180
|
-
span.badge.badge-red 4
|
181
|
-
span.tabbar-label Upload
|
182
|
-
a(href="#view-4").tab-link
|
183
|
-
i.icon.tabbar-demo-icon-4
|
184
|
-
span.tabbar-label Photos
|
185
|
-
|
186
|
-
// Path to Framework7 Library JS
|
187
|
-
script(type="text/javascript", src="../../dist/js/framework7.min.js")
|
188
|
-
// Path to your app js
|
189
|
-
script(type="text/javascript", src="js/my-app.js")
|
@@ -1,15 +0,0 @@
|
|
1
|
-
.navbar
|
2
|
-
.navbar-inner
|
3
|
-
.left
|
4
|
-
a(href="#").back.link
|
5
|
-
i.icon.icon-back
|
6
|
-
span Back
|
7
|
-
.center.sliding Services
|
8
|
-
.pages
|
9
|
-
.page(data-page="services")
|
10
|
-
.page-content
|
11
|
-
.content-block
|
12
|
-
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor.
|
13
|
-
p Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.
|
14
|
-
p Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.
|
15
|
-
p Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.
|
@@ -1,15 +0,0 @@
|
|
1
|
-
// Initialize your app
|
2
|
-
var myApp = new Framework7();
|
3
|
-
|
4
|
-
// Export selectors engine
|
5
|
-
var $$ = Dom7;
|
6
|
-
|
7
|
-
// Add views
|
8
|
-
var view1 = myApp.addView('#view-1');
|
9
|
-
var view2 = myApp.addView('#view-2', {
|
10
|
-
// Because we use fixed-through navbar we can enable dynamic navbar
|
11
|
-
dynamicNavbar: true
|
12
|
-
});
|
13
|
-
var view3 = myApp.addView('#view-3');
|
14
|
-
var view4 = myApp.addView('#view-4');
|
15
|
-
|
@@ -1,35 +0,0 @@
|
|
1
|
-
/* Your app custom files in this file */
|
2
|
-
|
3
|
-
/* Tab bar icons */
|
4
|
-
i.tabbar-demo-icon-1 {
|
5
|
-
width: 30px;
|
6
|
-
height: 30px;
|
7
|
-
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>");
|
8
|
-
.active & {
|
9
|
-
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>");
|
10
|
-
}
|
11
|
-
}
|
12
|
-
i.tabbar-demo-icon-2 {
|
13
|
-
width: 25px;
|
14
|
-
height: 30px;
|
15
|
-
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>");
|
16
|
-
.active & {
|
17
|
-
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>");
|
18
|
-
}
|
19
|
-
}
|
20
|
-
i.tabbar-demo-icon-3 {
|
21
|
-
width: 30px;
|
22
|
-
height: 30px;
|
23
|
-
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>");
|
24
|
-
.active & {
|
25
|
-
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>");
|
26
|
-
}
|
27
|
-
}
|
28
|
-
i.tabbar-demo-icon-4 {
|
29
|
-
width: 25px;
|
30
|
-
height: 30px;
|
31
|
-
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>");
|
32
|
-
.active & {
|
33
|
-
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>");
|
34
|
-
}
|
35
|
-
}
|
@@ -1,19 +0,0 @@
|
|
1
|
-
|
2
|
-
<div class="navbar">
|
3
|
-
<div class="navbar-inner">
|
4
|
-
<div class="left"><a href="#" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
|
5
|
-
<div class="center sliding">Services</div>
|
6
|
-
</div>
|
7
|
-
</div>
|
8
|
-
<div class="pages">
|
9
|
-
<div data-page="services" class="page">
|
10
|
-
<div class="page-content">
|
11
|
-
<div class="content-block">
|
12
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vel commodo massa, eu adipiscing mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus ultricies dictum neque, non varius tortor fermentum at. Curabitur auctor cursus imperdiet. Nam molestie nisi nec est lacinia volutpat in a purus. Maecenas consectetur condimentum viverra. Donec ultricies nec sem vel condimentum. Phasellus eu tincidunt enim, sit amet convallis orci. Vestibulum quis fringilla dolor. </p>
|
13
|
-
<p>Mauris commodo lacus at nisl lacinia, nec facilisis erat rhoncus. Sed eget pharetra nunc. Aenean vitae vehicula massa, sed sagittis ante. Quisque luctus nec velit dictum convallis. Nulla facilisi. Ut sed erat nisi. Donec non dolor massa. Mauris malesuada dolor velit, in suscipit leo consectetur vitae. Duis tempus ligula non eros pretium condimentum. Cras sed dolor odio.</p>
|
14
|
-
<p>Suspendisse commodo adipiscing urna, a aliquet sem egestas in. Sed tincidunt dui a magna facilisis bibendum. Nunc euismod consectetur lorem vitae molestie. Proin mattis tellus libero, non hendrerit neque eleifend ac. Pellentesque interdum velit at lacus consectetur scelerisque et id dui. Praesent non fringilla dui, a elementum purus. Proin vitae lacus libero. Nunc eget lectus non mi iaculis interdum vel a velit. Nullam tincidunt purus id lacus ornare, at elementum turpis euismod. Cras mauris enim, congue eu nisl sit amet, pulvinar semper erat. Suspendisse sed mauris diam.</p>
|
15
|
-
<p>Nam eu mauris leo. Pellentesque aliquam vehicula est, sed lobortis tellus malesuada facilisis. Fusce at hendrerit ligula. Donec eu nibh convallis, pulvinar enim quis, lacinia diam. Ut semper ac magna nec ornare. Integer placerat justo sed nunc suscipit facilisis. Vestibulum ac tincidunt augue. Duis eu aliquet mauris, vel luctus mauris. Nulla non augue nec diam pharetra posuere at in mauris.</p>
|
16
|
-
</div>
|
17
|
-
</div>
|
18
|
-
</div>
|
19
|
-
</div>
|
@@ -1,22 +0,0 @@
|
|
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">About Framework7</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="about" class="page">
|
11
|
-
<div class="page-content">
|
12
|
-
<div class="content-block-title">Welcome to Framework7</div>
|
13
|
-
<div class="content-block">
|
14
|
-
<div class="content-block-inner">
|
15
|
-
<p>Framework7 - is a 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>
|
16
|
-
<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 strict frames like other HTML mobile frameworks. Framework7 doesn't try to do everything for you, no, Framework7 gives you freedom, it has ultra simple and clean HTML layout, all basic interfaces (futher more), animations, work with views, and easy customization and styling opportunities.</p>
|
17
|
-
<p>Framework7 doesn't try to be compatible with all platforms, it is focused only on iOS7 to bring the best experience and simplicity.</p>
|
18
|
-
</div>
|
19
|
-
</div>
|
20
|
-
</div>
|
21
|
-
</div>
|
22
|
-
</div>
|
@@ -1,171 +0,0 @@
|
|
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">Accordion</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="accordion" class="page">
|
11
|
-
<div class="page-content">
|
12
|
-
<div class="content-block-title">List View Accordion</div>
|
13
|
-
<div class="list-block accordion-list">
|
14
|
-
<ul>
|
15
|
-
<li class="accordion-item"><a href="#" class="item-link item-content">
|
16
|
-
<div class="item-inner">
|
17
|
-
<div class="item-title">Lorem Ipsum</div>
|
18
|
-
</div></a>
|
19
|
-
<div class="accordion-item-content">
|
20
|
-
<div class="content-block">
|
21
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
|
22
|
-
</div>
|
23
|
-
</div>
|
24
|
-
</li>
|
25
|
-
<li class="accordion-item"><a href="#" class="item-link item-content">
|
26
|
-
<div class="item-inner">
|
27
|
-
<div class="item-title">Nested List</div>
|
28
|
-
</div></a>
|
29
|
-
<div class="accordion-item-content">
|
30
|
-
<div class="list-block">
|
31
|
-
<ul>
|
32
|
-
<li>
|
33
|
-
<div class="item-content">
|
34
|
-
<div class="item-media"><i class="icon icon-f7"></i></div>
|
35
|
-
<div class="item-inner">
|
36
|
-
<div class="item-title">Item 1</div>
|
37
|
-
</div>
|
38
|
-
</div>
|
39
|
-
</li>
|
40
|
-
<li>
|
41
|
-
<div class="item-content">
|
42
|
-
<div class="item-media"><i class="icon icon-f7"></i></div>
|
43
|
-
<div class="item-inner">
|
44
|
-
<div class="item-title">Item 2</div>
|
45
|
-
</div>
|
46
|
-
</div>
|
47
|
-
</li>
|
48
|
-
<li>
|
49
|
-
<div class="item-content">
|
50
|
-
<div class="item-media"><i class="icon icon-f7"></i></div>
|
51
|
-
<div class="item-inner">
|
52
|
-
<div class="item-title">Item 3</div>
|
53
|
-
</div>
|
54
|
-
</div>
|
55
|
-
</li>
|
56
|
-
<li>
|
57
|
-
<div class="item-content">
|
58
|
-
<div class="item-media"><i class="icon icon-f7"></i></div>
|
59
|
-
<div class="item-inner">
|
60
|
-
<div class="item-title">Item 4</div>
|
61
|
-
</div>
|
62
|
-
</div>
|
63
|
-
</li>
|
64
|
-
</ul>
|
65
|
-
</div>
|
66
|
-
</div>
|
67
|
-
</li>
|
68
|
-
<li class="accordion-item"><a href="#" class="item-link item-content">
|
69
|
-
<div class="item-inner">
|
70
|
-
<div class="item-title">Integer semper</div>
|
71
|
-
</div></a>
|
72
|
-
<div class="accordion-item-content">
|
73
|
-
<div class="content-block">
|
74
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
|
75
|
-
</div>
|
76
|
-
</div>
|
77
|
-
</li>
|
78
|
-
</ul>
|
79
|
-
</div>
|
80
|
-
<div class="content-block-title">Inset Accordion</div>
|
81
|
-
<div class="list-block accordion-list inset">
|
82
|
-
<ul>
|
83
|
-
<li class="accordion-item"><a href="#" class="item-link item-content">
|
84
|
-
<div class="item-inner">
|
85
|
-
<div class="item-title">Lorem Ipsum</div>
|
86
|
-
</div></a>
|
87
|
-
<div class="accordion-item-content">
|
88
|
-
<div class="content-block">
|
89
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
|
90
|
-
</div>
|
91
|
-
</div>
|
92
|
-
</li>
|
93
|
-
<li class="accordion-item"><a href="#" class="item-link item-content">
|
94
|
-
<div class="item-inner">
|
95
|
-
<div class="item-title">Nested List</div>
|
96
|
-
</div></a>
|
97
|
-
<div class="accordion-item-content">
|
98
|
-
<div class="list-block">
|
99
|
-
<ul>
|
100
|
-
<li>
|
101
|
-
<div class="item-content">
|
102
|
-
<div class="item-media"><i class="icon icon-f7"></i></div>
|
103
|
-
<div class="item-inner">
|
104
|
-
<div class="item-title">Item 1</div>
|
105
|
-
</div>
|
106
|
-
</div>
|
107
|
-
</li>
|
108
|
-
<li>
|
109
|
-
<div class="item-content">
|
110
|
-
<div class="item-media"><i class="icon icon-f7"></i></div>
|
111
|
-
<div class="item-inner">
|
112
|
-
<div class="item-title">Item 2</div>
|
113
|
-
</div>
|
114
|
-
</div>
|
115
|
-
</li>
|
116
|
-
<li>
|
117
|
-
<div class="item-content">
|
118
|
-
<div class="item-media"><i class="icon icon-f7"></i></div>
|
119
|
-
<div class="item-inner">
|
120
|
-
<div class="item-title">Item 3</div>
|
121
|
-
</div>
|
122
|
-
</div>
|
123
|
-
</li>
|
124
|
-
<li>
|
125
|
-
<div class="item-content">
|
126
|
-
<div class="item-media"><i class="icon icon-f7"></i></div>
|
127
|
-
<div class="item-inner">
|
128
|
-
<div class="item-title">Item 4</div>
|
129
|
-
</div>
|
130
|
-
</div>
|
131
|
-
</li>
|
132
|
-
</ul>
|
133
|
-
</div>
|
134
|
-
</div>
|
135
|
-
</li>
|
136
|
-
<li class="accordion-item"><a href="#" class="item-link item-content">
|
137
|
-
<div class="item-inner">
|
138
|
-
<div class="item-title">Integer semper</div>
|
139
|
-
</div></a>
|
140
|
-
<div class="accordion-item-content">
|
141
|
-
<div class="content-block">
|
142
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
|
143
|
-
</div>
|
144
|
-
</div>
|
145
|
-
</li>
|
146
|
-
</ul>
|
147
|
-
</div>
|
148
|
-
<div class="content-block-title">Custom Styled Accordion</div>
|
149
|
-
<div class="content-block accordion-list custom-accordion">
|
150
|
-
<div class="accordion-item">
|
151
|
-
<div class="accordion-item-toggle"><i class="icon icon-ks-plus">+</i><i class="icon icon-ks-minus">-</i><span>Item 1</span></div>
|
152
|
-
<div class="accordion-item-content">
|
153
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
|
154
|
-
</div>
|
155
|
-
</div>
|
156
|
-
<div class="accordion-item">
|
157
|
-
<div class="accordion-item-toggle"><i class="icon icon-ks-plus">+</i><i class="icon icon-ks-minus">-</i><span>Item 2</span></div>
|
158
|
-
<div class="accordion-item-content">
|
159
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
|
160
|
-
</div>
|
161
|
-
</div>
|
162
|
-
<div class="accordion-item">
|
163
|
-
<div class="accordion-item-toggle"><i class="icon icon-ks-plus">+</i><i class="icon icon-ks-minus">-</i><span>Item 3</span></div>
|
164
|
-
<div class="accordion-item-content">
|
165
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elementum id neque nec commodo. Sed vel justo at turpis laoreet pellentesque quis sed lorem. Integer semper arcu nibh, non mollis arcu tempor vel. Sed pharetra tortor vitae est rhoncus, vel congue dui sollicitudin. Donec eu arcu dignissim felis viverra blandit suscipit eget ipsum.</p>
|
166
|
-
</div>
|
167
|
-
</div>
|
168
|
-
</div>
|
169
|
-
</div>
|
170
|
-
</div>
|
171
|
-
</div>
|