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,60 +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 Smart Selects
|
8
|
-
.right
|
9
|
-
a(href="#").link.open-panel.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="form-selects")
|
13
|
-
.page-content
|
14
|
-
.content-block Framework7 allows you to easily convert your usual form selects to dynamic pages with radios:
|
15
|
-
.list-block
|
16
|
-
ul
|
17
|
-
li
|
18
|
-
a(href="#").item-link.smart-select
|
19
|
-
select(name="fruits")
|
20
|
-
option(value="apple", selected=true) Apple
|
21
|
-
option(value="pineapple") Pineapple
|
22
|
-
option(value="pear") Pear
|
23
|
-
option(value="orange") Orange
|
24
|
-
option(value="melon") Melon
|
25
|
-
option(value="peach") Peach
|
26
|
-
option(value="banana") Banana
|
27
|
-
.item-content
|
28
|
-
.item-inner
|
29
|
-
.item-title Fruit
|
30
|
-
li
|
31
|
-
a(href="#").item-link.smart-select
|
32
|
-
select(name="car", multiple)
|
33
|
-
optgroup(label="Japanese")
|
34
|
-
option(value="honda", selected=true) Honda
|
35
|
-
option(value="lexus") Lexus
|
36
|
-
option(value="mazda") Mazda
|
37
|
-
option(value="nissan") Nissan
|
38
|
-
option(value="toyota") Toyota
|
39
|
-
optgroup(label="German")
|
40
|
-
option(value="audi", selected=true) Audi
|
41
|
-
option(value="bmw") BMW
|
42
|
-
option(value="mercedes") Mercedes
|
43
|
-
option(value="vw") Volkswagen
|
44
|
-
option(value="volvo") Volvo
|
45
|
-
optgroup(label="American")
|
46
|
-
option(value="cadillac") Cadillac
|
47
|
-
option(value="chrysler") Chrysler
|
48
|
-
option(value="dodge") Dodge
|
49
|
-
option(value="ford", selected=true) Ford
|
50
|
-
.item-content
|
51
|
-
.item-inner
|
52
|
-
.item-title Car
|
53
|
-
li
|
54
|
-
a(href="#").item-link.smart-select
|
55
|
-
select(name="mac-windows")
|
56
|
-
option(value="mac", selected=true) Mac
|
57
|
-
option(value="windows") Windows
|
58
|
-
.item-content
|
59
|
-
.item-inner
|
60
|
-
.item-title Mac or Windows
|
@@ -1,134 +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 Storage
|
8
|
-
.right
|
9
|
-
a(href="#").link.open-panel.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="form-storage")
|
13
|
-
.page-content
|
14
|
-
.content-block
|
15
|
-
p With forms storage it is easy to store and parse forms data, especially on Ajax loaded pages. All you need to make it work is to add "store-data" class to your <form> and Framework7 will store form data with every input change. And the most awesome part is that when you load this page again Framework7 will parse this data and fill all form fields automatically! Just try to fill the form below and then go to any other page, or even you may close this site, and when you will back here form fields will keep your data.
|
16
|
-
.content-block-title Personal Details
|
17
|
-
form.store-data.list-block(id="demoform-1")
|
18
|
-
ul
|
19
|
-
li
|
20
|
-
.item-content
|
21
|
-
.item-media
|
22
|
-
i.icon.icon-form-name
|
23
|
-
.item-inner
|
24
|
-
.item-title.label Name
|
25
|
-
.item-input
|
26
|
-
input(type="text", placeholder="Your name", name="name")
|
27
|
-
li
|
28
|
-
.item-content
|
29
|
-
.item-media
|
30
|
-
i.icon.icon-form-email
|
31
|
-
.item-inner
|
32
|
-
.item-title.label E-mail
|
33
|
-
.item-input
|
34
|
-
input(type="email", placeholder="E-mail", name="email")
|
35
|
-
li
|
36
|
-
.item-content
|
37
|
-
.item-media
|
38
|
-
i.icon.icon-form-url
|
39
|
-
.item-inner
|
40
|
-
.item-title.label URL
|
41
|
-
.item-input
|
42
|
-
input(type="url", placeholder="URL", name="url")
|
43
|
-
li
|
44
|
-
.item-content
|
45
|
-
.item-media
|
46
|
-
i.icon.icon-form-password
|
47
|
-
.item-inner
|
48
|
-
.item-title.label Password
|
49
|
-
.item-input
|
50
|
-
input(type="password", placeholder="Password", name="password")
|
51
|
-
li
|
52
|
-
.item-content
|
53
|
-
.item-media
|
54
|
-
i.icon.icon-form-tel
|
55
|
-
.item-inner
|
56
|
-
.item-title.label Phone
|
57
|
-
.item-input
|
58
|
-
input(type="tel", placeholder="Phone", name="phone")
|
59
|
-
li
|
60
|
-
.item-content
|
61
|
-
.item-media
|
62
|
-
i.icon.icon-form-gender
|
63
|
-
.item-inner
|
64
|
-
.item-title.label Gender
|
65
|
-
.item-input
|
66
|
-
select
|
67
|
-
option Male
|
68
|
-
option Female
|
69
|
-
li
|
70
|
-
.item-content
|
71
|
-
.item-media
|
72
|
-
i.icon.icon-form-calendar
|
73
|
-
.item-inner
|
74
|
-
.item-title.label Birth date
|
75
|
-
.item-input
|
76
|
-
input(type="date", placeholder="Birth day", value="2014-04-30", name="birth-date")
|
77
|
-
li
|
78
|
-
.item-content
|
79
|
-
.item-media
|
80
|
-
i.icon.icon-form-toggle
|
81
|
-
.item-inner
|
82
|
-
.item-title.label Switch
|
83
|
-
.item-input
|
84
|
-
label.label-switch
|
85
|
-
input(type="checkbox", name="switch")
|
86
|
-
.checkbox
|
87
|
-
li
|
88
|
-
.item-content
|
89
|
-
.item-media
|
90
|
-
i.icon.icon-form-settings
|
91
|
-
.item-inner
|
92
|
-
.item-title.label Slider
|
93
|
-
.item-input
|
94
|
-
.range-slider
|
95
|
-
input(type="range", min="0", max="100", value="50", step="0.1", name="slider")
|
96
|
-
li.align-top
|
97
|
-
.item-content
|
98
|
-
.item-media
|
99
|
-
i.icon.icon-form-comment
|
100
|
-
.item-inner
|
101
|
-
.item-title.label About Me
|
102
|
-
.item-input
|
103
|
-
textarea(name="about-me")
|
104
|
-
.content-block-title I like
|
105
|
-
form.store-data.list-block(id="demoform-2")
|
106
|
-
ul
|
107
|
-
li
|
108
|
-
label.label-checkbox.item-content
|
109
|
-
input(type="checkbox", name="ks-checkbox", value="Books", checked=true)
|
110
|
-
.item-media
|
111
|
-
i.icon.icon-form-checkbox
|
112
|
-
.item-inner
|
113
|
-
.item-title Books
|
114
|
-
li
|
115
|
-
label.label-checkbox.item-content
|
116
|
-
input(type="checkbox", name="ks-checkbox", value="Movies")
|
117
|
-
.item-media
|
118
|
-
i.icon.icon-form-checkbox
|
119
|
-
.item-inner
|
120
|
-
.item-title Movies
|
121
|
-
li
|
122
|
-
label.label-checkbox.item-content
|
123
|
-
input(type="checkbox", name="ks-checkbox", value="Food")
|
124
|
-
.item-media
|
125
|
-
i.icon.icon-form-checkbox
|
126
|
-
.item-inner
|
127
|
-
.item-title Food
|
128
|
-
li
|
129
|
-
label.label-checkbox.item-content
|
130
|
-
input(type="checkbox", name="ks-checkbox", value="Drinks")
|
131
|
-
.item-media
|
132
|
-
i.icon.icon-form-checkbox
|
133
|
-
.item-inner
|
134
|
-
.item-title Drinks
|
@@ -1,52 +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 Forms
|
8
|
-
.right
|
9
|
-
a(href="#").link.open-panel.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="forms")
|
13
|
-
.page-content
|
14
|
-
.content-block
|
15
|
-
p Framework7 provides very flexible forms layout, you can use it with/out icons, with/out labels, or mixed layouts.
|
16
|
-
.list-block
|
17
|
-
ul
|
18
|
-
li
|
19
|
-
a(href="forms-elements.html").item-link
|
20
|
-
.item-content
|
21
|
-
.item-media
|
22
|
-
i.icon.icon-f7
|
23
|
-
.item-inner
|
24
|
-
.item-title Form Elements
|
25
|
-
li
|
26
|
-
a(href="forms-checkboxes.html").item-link
|
27
|
-
.item-content
|
28
|
-
.item-media
|
29
|
-
i.icon.icon-f7
|
30
|
-
.item-inner
|
31
|
-
.item-title Checkboxes And Radios
|
32
|
-
li
|
33
|
-
a(href="forms-selects.html").item-link
|
34
|
-
.item-content
|
35
|
-
.item-media
|
36
|
-
i.icon.icon-f7
|
37
|
-
.item-inner
|
38
|
-
.item-title Smart Selects
|
39
|
-
li
|
40
|
-
a(href="forms-buttons.html").item-link
|
41
|
-
.item-content
|
42
|
-
.item-media
|
43
|
-
i.icon.icon-f7
|
44
|
-
.item-inner
|
45
|
-
.item-title Buttons
|
46
|
-
li
|
47
|
-
a(href="forms-storage.html").item-link
|
48
|
-
.item-content
|
49
|
-
.item-media
|
50
|
-
i.icon.icon-f7
|
51
|
-
.item-inner
|
52
|
-
.item-title Form Storage
|
@@ -1,110 +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 Grid
|
8
|
-
.right
|
9
|
-
a(href="#").link.open-panel.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="grid")
|
13
|
-
.page-content
|
14
|
-
.content-block
|
15
|
-
p Framework7 comes with flexible layout grid:
|
16
|
-
.ks-grid
|
17
|
-
.content-block-title Columns with gutter
|
18
|
-
.content-block
|
19
|
-
.row
|
20
|
-
.col-50 .col-50
|
21
|
-
.col-50 .col-50
|
22
|
-
.row
|
23
|
-
.col-25 .col-25
|
24
|
-
.col-25 .col-25
|
25
|
-
.col-25 .col-25
|
26
|
-
.col-25 .col-25
|
27
|
-
.row
|
28
|
-
.col-33 .col-33
|
29
|
-
.col-33 .col-33
|
30
|
-
.col-33 .col-33
|
31
|
-
.row
|
32
|
-
.col-20 .col-20
|
33
|
-
.col-20 .col-20
|
34
|
-
.col-20 .col-20
|
35
|
-
.col-20 .col-20
|
36
|
-
.col-20 .col-20
|
37
|
-
.row
|
38
|
-
.col-33 .col-33
|
39
|
-
.col-66 .col-66
|
40
|
-
.row
|
41
|
-
.col-25 .col-25
|
42
|
-
.col-25 .col-25
|
43
|
-
.col-50 .col-50
|
44
|
-
.row
|
45
|
-
.col-75 .col-75
|
46
|
-
.col-25 .col-25
|
47
|
-
.row
|
48
|
-
.col-80 .col-80
|
49
|
-
.col-20 .col-20
|
50
|
-
.content-block-title No gutter between columns
|
51
|
-
.content-block
|
52
|
-
.row.no-gutter
|
53
|
-
.col-50 .col-50
|
54
|
-
.col-50 .col-50
|
55
|
-
.row.no-gutter
|
56
|
-
.col-25 .col-25
|
57
|
-
.col-25 .col-25
|
58
|
-
.col-25 .col-25
|
59
|
-
.col-25 .col-25
|
60
|
-
.row.no-gutter
|
61
|
-
.col-33 .col-33
|
62
|
-
.col-33 .col-33
|
63
|
-
.col-33 .col-33
|
64
|
-
.row.no-gutter
|
65
|
-
.col-20 .col-20
|
66
|
-
.col-20 .col-20
|
67
|
-
.col-20 .col-20
|
68
|
-
.col-20 .col-20
|
69
|
-
.col-20 .col-20
|
70
|
-
.row.no-gutter
|
71
|
-
.col-33 .col-33
|
72
|
-
.col-66 .col-66
|
73
|
-
.row.no-gutter
|
74
|
-
.col-25 .col-25
|
75
|
-
.col-25 .col-25
|
76
|
-
.col-50 .col-50
|
77
|
-
.row.no-gutter
|
78
|
-
.col-75 .col-75
|
79
|
-
.col-25 .col-25
|
80
|
-
.row.no-gutter
|
81
|
-
.col-80 .col-80
|
82
|
-
.col-20 .col-20
|
83
|
-
.content-block-title Nested
|
84
|
-
.content-block
|
85
|
-
.row
|
86
|
-
.col-50 .col-50
|
87
|
-
.row
|
88
|
-
.col-50 .col-50
|
89
|
-
.col-50 .col-50
|
90
|
-
.col-50 .col-50
|
91
|
-
.row
|
92
|
-
.col-33 .col-33
|
93
|
-
.col-66 .col-66
|
94
|
-
.content-block-title Responsive Grid
|
95
|
-
.content-block
|
96
|
-
p Grid cells have different size on Phone/Tablet
|
97
|
-
.row
|
98
|
-
.col-100.tablet-50 .col-100.tablet-50
|
99
|
-
.col-100.tablet-50 .col-100.tablet-50
|
100
|
-
.row
|
101
|
-
.col-50.tablet-25 .col-50.tablet-25
|
102
|
-
.col-50.tablet-25 .col-50.tablet-25
|
103
|
-
.col-50.tablet-25 .col-50.tablet-25
|
104
|
-
.col-50.tablet-25 .col-50.tablet-25
|
105
|
-
.row
|
106
|
-
.col-100.tablet-40 .col-100.tablet-40
|
107
|
-
.col-50.tablet-60 .col-50.tablet-60
|
108
|
-
.col-50.tablet-66 .col-50.tablet-66
|
109
|
-
.col-100.tablet-33 .col-100.tablet-33
|
110
|
-
|
@@ -1,38 +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 Hide Navbar & Toolbar
|
8
|
-
.right
|
9
|
-
a(href="#").open-panel.link.icon-only
|
10
|
-
i.icon.icon-bars
|
11
|
-
.pages.navbar-through
|
12
|
-
.page(data-page="hide-navbar-toolbar")
|
13
|
-
.page-content
|
14
|
-
.content-block
|
15
|
-
p Sometimes you may need to hide top Navbar or bottom Toolbar. Framework7 allows this by adding additional classes to pages. Check examples:
|
16
|
-
.list-block
|
17
|
-
ul
|
18
|
-
li
|
19
|
-
a(href="no-navbar.html").item-link
|
20
|
-
.item-content
|
21
|
-
.item-media
|
22
|
-
i.icon.icon-f7
|
23
|
-
.item-inner
|
24
|
-
.item-title Hide Navbar
|
25
|
-
li
|
26
|
-
a(href="no-toolbar.html").item-link
|
27
|
-
.item-content
|
28
|
-
.item-media
|
29
|
-
i.icon.icon-f7
|
30
|
-
.item-inner
|
31
|
-
.item-title Hide Toolbar
|
32
|
-
li
|
33
|
-
a(href="no-navbar-toolbar.html").item-link
|
34
|
-
.item-content
|
35
|
-
.item-media
|
36
|
-
i.icon.icon-f7
|
37
|
-
.item-inner
|
38
|
-
.item-title Hide Both
|
@@ -1,427 +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='mobile-web-app-capable', content='yes')
|
7
|
-
meta(name='apple-mobile-web-app-capable', content='yes')
|
8
|
-
meta(name="apple-mobile-web-app-status-bar-style", content="black")
|
9
|
-
title Framework7
|
10
|
-
link(rel="stylesheet", href="../build/css/framework7.css")
|
11
|
-
link(rel="stylesheet", href="../build/css/framework7.themes.css")
|
12
|
-
link(rel="stylesheet", href="css/kitchen-sink.css")
|
13
|
-
body
|
14
|
-
.statusbar-overlay
|
15
|
-
.panel-overlay
|
16
|
-
.panel.panel-left.panel-cover.layout-dark
|
17
|
-
.content-block-title Left Panel
|
18
|
-
.content-block
|
19
|
-
p This is a side panel. You can close it by clicking outsite or on this link:
|
20
|
-
a(href="#").close-panel close me
|
21
|
-
| . You can put here anything, even another isolated view like in
|
22
|
-
a(href="#", data-panel="right").open-panel Right Panel
|
23
|
-
.content-block-title Framework7 Kitchen Sink
|
24
|
-
.list-block
|
25
|
-
ul
|
26
|
-
li
|
27
|
-
a(href="modals.html").close-panel.item-link
|
28
|
-
.item-content
|
29
|
-
.item-media
|
30
|
-
i.icon.icon-f7
|
31
|
-
.item-inner
|
32
|
-
.item-title Modals
|
33
|
-
li
|
34
|
-
a(href="popover.html").close-panel.item-link
|
35
|
-
.item-content
|
36
|
-
.item-media
|
37
|
-
i.icon.icon-f7
|
38
|
-
.item-inner
|
39
|
-
.item-title Popover
|
40
|
-
|
41
|
-
li
|
42
|
-
a(href="tabs.html").close-panel.item-link
|
43
|
-
.item-content
|
44
|
-
.item-media
|
45
|
-
i.icon.icon-f7
|
46
|
-
.item-inner
|
47
|
-
.item-title Tabs
|
48
|
-
li
|
49
|
-
a(href="panels.html").close-panel.item-link
|
50
|
-
.item-content
|
51
|
-
.item-media
|
52
|
-
i.icon.icon-f7
|
53
|
-
.item-inner
|
54
|
-
.item-title Side Panels
|
55
|
-
li
|
56
|
-
a(href="list-view.html").close-panel.item-link
|
57
|
-
.item-content
|
58
|
-
.item-media
|
59
|
-
i.icon.icon-f7
|
60
|
-
.item-inner
|
61
|
-
.item-title List View
|
62
|
-
li
|
63
|
-
a(href="swipe-delete.html").close-panel.item-link
|
64
|
-
.item-content
|
65
|
-
.item-media
|
66
|
-
i.icon.icon-f7
|
67
|
-
.item-inner
|
68
|
-
.item-title Swipe To Delete
|
69
|
-
li
|
70
|
-
a(href="forms.html").close-panel.item-link
|
71
|
-
.item-content
|
72
|
-
.item-media
|
73
|
-
i.icon.icon-f7
|
74
|
-
.item-inner
|
75
|
-
.item-title Forms
|
76
|
-
li
|
77
|
-
a(href="messages.html").close-panel.item-link
|
78
|
-
.item-content
|
79
|
-
.item-media
|
80
|
-
i.icon.icon-f7
|
81
|
-
.item-inner
|
82
|
-
.item-title Messages
|
83
|
-
li
|
84
|
-
a(href="grid.html").close-panel.item-link
|
85
|
-
.item-content
|
86
|
-
.item-media
|
87
|
-
i.icon.icon-f7
|
88
|
-
.item-inner
|
89
|
-
.item-title Grid
|
90
|
-
li
|
91
|
-
a(href="preloader.html").close-panel.item-link
|
92
|
-
.item-content
|
93
|
-
.item-media
|
94
|
-
i.icon.icon-f7
|
95
|
-
.item-inner
|
96
|
-
.item-title Preloader
|
97
|
-
li
|
98
|
-
a(href="navbars-toolbars.html").close-panel.item-link
|
99
|
-
.item-content
|
100
|
-
.item-media
|
101
|
-
i.icon.icon-f7
|
102
|
-
.item-inner
|
103
|
-
.item-title Navbars And Toolbars
|
104
|
-
li
|
105
|
-
a(href="transitions.html").close-panel.item-link
|
106
|
-
.item-content
|
107
|
-
.item-media
|
108
|
-
i.icon.icon-f7
|
109
|
-
.item-inner
|
110
|
-
.item-title Transitions And Effects
|
111
|
-
.content-block
|
112
|
-
p Long text block goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sem urna, gravida non scelerisque id, fringilla ac velit. Phasellus elementum a ipsum at ornare. Mauris sagittis rhoncus euismod. Integer convallis augue eu lacus ultrices, in dictum elit consequat. Nulla faucibus massa id felis egestas eleifend. Proin consequat dignissim magna ut scelerisque. Vestibulum ac lorem semper, posuere sapien nec, pharetra massa. Nulla a tellus facilisis, sollicitudin quam porta, aliquam lorem. Fusce dignissim eros ac diam molestie, ut ultrices lorem tristique. Ut facilisis augue ac nisi egestas malesuada. Nunc posuere tortor quis eleifend mollis. Aliquam erat volutpat. Donec feugiat elit tellus, nec convallis orci elementum in. Sed urna mi, vestibulum id tempus id, pretium et ante. Pellentesque eget sollicitudin ligula. Phasellus pellentesque velit eu porta suscipit.
|
113
|
-
.panel.panel-right.panel-reveal.layout-dark
|
114
|
-
.view.view-right
|
115
|
-
.navbar
|
116
|
-
.navbar-inner
|
117
|
-
.center.sliding Right Panel
|
118
|
-
.pages.navbar-through
|
119
|
-
.page(data-page="panel-right1")
|
120
|
-
.page-content
|
121
|
-
.content-block
|
122
|
-
p This is a right side panel. You can close it by clicking outsite or on this link:
|
123
|
-
a(href="#").close-panel close me
|
124
|
-
| . You can put here anything, even another isolated view, try it:
|
125
|
-
.list-block
|
126
|
-
ul
|
127
|
-
li
|
128
|
-
a(href="panel-right2.html").item-link
|
129
|
-
.item-content
|
130
|
-
.item-inner
|
131
|
-
.item-title Right panel page 2
|
132
|
-
li
|
133
|
-
a(href="panel-right3.html").item-link
|
134
|
-
.item-content
|
135
|
-
.item-inner
|
136
|
-
.item-title Right panel page 3
|
137
|
-
|
138
|
-
.views
|
139
|
-
.view.view-main
|
140
|
-
.navbar
|
141
|
-
.navbar-inner
|
142
|
-
//- .left
|
143
|
-
.center.sliding Framework7
|
144
|
-
.right
|
145
|
-
a(href="#").open-panel.link.icon-only
|
146
|
-
i.icon.icon-bars
|
147
|
-
.toolbar
|
148
|
-
.toolbar-inner
|
149
|
-
a(href="#").link Dummy Link
|
150
|
-
a(href="#", data-popover=".popover-menu").open-popover.link Menu
|
151
|
-
.pages.navbar-through.toolbar-through
|
152
|
-
.page(data-page="index")
|
153
|
-
.page-content
|
154
|
-
.content-block-title Welcome To Framework7
|
155
|
-
.content-block
|
156
|
-
a(href="about.html").button Read About Framework7
|
157
|
-
.content-block-title Framework7 Kitchen Sink
|
158
|
-
.list-block
|
159
|
-
ul
|
160
|
-
li
|
161
|
-
a(href="modals.html").item-link
|
162
|
-
.item-content
|
163
|
-
.item-media
|
164
|
-
i.icon.icon-f7
|
165
|
-
.item-inner
|
166
|
-
.item-title Modals
|
167
|
-
li
|
168
|
-
a(href="popover.html").item-link
|
169
|
-
.item-content
|
170
|
-
.item-media
|
171
|
-
i.icon.icon-f7
|
172
|
-
.item-inner
|
173
|
-
.item-title Popover
|
174
|
-
li
|
175
|
-
a(href="tabs.html").item-link
|
176
|
-
.item-content
|
177
|
-
.item-media
|
178
|
-
i.icon.icon-f7
|
179
|
-
.item-inner
|
180
|
-
.item-title Tabs
|
181
|
-
li
|
182
|
-
a(href="panels.html").item-link
|
183
|
-
.item-content
|
184
|
-
.item-media
|
185
|
-
i.icon.icon-f7
|
186
|
-
.item-inner
|
187
|
-
.item-title Side Panels
|
188
|
-
li
|
189
|
-
a(href="list-view.html").item-link
|
190
|
-
.item-content
|
191
|
-
.item-media
|
192
|
-
i.icon.icon-f7
|
193
|
-
.item-inner
|
194
|
-
.item-title List View
|
195
|
-
li
|
196
|
-
a(href="media-lists.html").item-link
|
197
|
-
.item-content
|
198
|
-
.item-media
|
199
|
-
i.icon.icon-f7
|
200
|
-
.item-inner
|
201
|
-
.item-title Media Lists
|
202
|
-
li
|
203
|
-
a(href="contacts.html").item-link
|
204
|
-
.item-content
|
205
|
-
.item-media
|
206
|
-
i.icon.icon-f7
|
207
|
-
.item-inner
|
208
|
-
.item-title Contacts List
|
209
|
-
li
|
210
|
-
a(href="swipe-delete.html").item-link
|
211
|
-
.item-content
|
212
|
-
.item-media
|
213
|
-
i.icon.icon-f7
|
214
|
-
.item-inner
|
215
|
-
.item-title Swipe To Delete
|
216
|
-
.item-after
|
217
|
-
span.badge.bg-blue UPDATED
|
218
|
-
li
|
219
|
-
a(href="sortable-list.html").item-link
|
220
|
-
.item-content
|
221
|
-
.item-media
|
222
|
-
i.icon.icon-f7
|
223
|
-
.item-inner
|
224
|
-
.item-title Sortable List
|
225
|
-
li
|
226
|
-
a(href="accordion.html").item-link
|
227
|
-
.item-content
|
228
|
-
.item-media
|
229
|
-
i.icon.icon-f7
|
230
|
-
.item-inner
|
231
|
-
.item-title Accordion
|
232
|
-
li
|
233
|
-
a(href="pull-to-refresh.html").item-link
|
234
|
-
.item-content
|
235
|
-
.item-media
|
236
|
-
i.icon.icon-f7
|
237
|
-
.item-inner
|
238
|
-
.item-title Pull To Refresh
|
239
|
-
li
|
240
|
-
a(href="forms.html").item-link
|
241
|
-
.item-content
|
242
|
-
.item-media
|
243
|
-
i.icon.icon-f7
|
244
|
-
.item-inner
|
245
|
-
.item-title Forms
|
246
|
-
li
|
247
|
-
a(href="messages.html").item-link
|
248
|
-
.item-content
|
249
|
-
.item-media
|
250
|
-
i.icon.icon-f7
|
251
|
-
.item-inner
|
252
|
-
.item-title Messages
|
253
|
-
li
|
254
|
-
a(href="grid.html").item-link
|
255
|
-
.item-content
|
256
|
-
.item-media
|
257
|
-
i.icon.icon-f7
|
258
|
-
.item-inner
|
259
|
-
.item-title Grid
|
260
|
-
li
|
261
|
-
a(href="preloader.html").item-link
|
262
|
-
.item-content
|
263
|
-
.item-media
|
264
|
-
i.icon.icon-f7
|
265
|
-
.item-inner
|
266
|
-
.item-title Preloader
|
267
|
-
li
|
268
|
-
a(href="navbars-toolbars.html").item-link
|
269
|
-
.item-content
|
270
|
-
.item-media
|
271
|
-
i.icon.icon-f7
|
272
|
-
.item-inner
|
273
|
-
.item-title Navbars And Toolbars
|
274
|
-
li
|
275
|
-
a(href="searchbar.html").item-link
|
276
|
-
.item-content
|
277
|
-
.item-media
|
278
|
-
i.icon.icon-f7
|
279
|
-
.item-inner
|
280
|
-
.item-title Search Bar
|
281
|
-
li
|
282
|
-
a(href="slider.html").item-link
|
283
|
-
.item-content
|
284
|
-
.item-media
|
285
|
-
i.icon.icon-f7
|
286
|
-
.item-inner
|
287
|
-
.item-title Slider
|
288
|
-
li
|
289
|
-
a(href="photo-browser.html").item-link
|
290
|
-
.item-content
|
291
|
-
.item-media
|
292
|
-
i.icon.icon-f7
|
293
|
-
.item-inner
|
294
|
-
.item-title Photo Browser
|
295
|
-
li
|
296
|
-
a(href="infinite-scroll.html").item-link
|
297
|
-
.item-content
|
298
|
-
.item-media
|
299
|
-
i.icon.icon-f7
|
300
|
-
.item-inner
|
301
|
-
.item-title Infinite Scroll
|
302
|
-
li
|
303
|
-
a(href="notifications.html").item-link
|
304
|
-
.item-content
|
305
|
-
.item-media
|
306
|
-
i.icon.icon-f7
|
307
|
-
.item-inner
|
308
|
-
.item-title Notifications
|
309
|
-
li
|
310
|
-
a(href="login-screen.html").item-link
|
311
|
-
.item-content
|
312
|
-
.item-media
|
313
|
-
i.icon.icon-f7
|
314
|
-
.item-inner
|
315
|
-
.item-title Login Screen
|
316
|
-
li
|
317
|
-
a(href="color-themes.html").item-link
|
318
|
-
.item-content
|
319
|
-
.item-media
|
320
|
-
i.icon.icon-f7
|
321
|
-
.item-inner
|
322
|
-
.item-title Color Themes
|
323
|
-
li
|
324
|
-
a(href="#").item-link.ks-generate-page
|
325
|
-
.item-content
|
326
|
-
.item-media
|
327
|
-
i.icon.icon-f7
|
328
|
-
.item-inner
|
329
|
-
.item-title Dynamically Generated Content
|
330
|
-
li
|
331
|
-
a(href="transitions.html").item-link
|
332
|
-
.item-content
|
333
|
-
.item-media
|
334
|
-
i.icon.icon-f7
|
335
|
-
.item-inner
|
336
|
-
.item-title Transitions And Effects
|
337
|
-
.content-block-title Core Features
|
338
|
-
.content-block
|
339
|
-
p
|
340
|
-
a(href="core-features.html").button Read About Core Features
|
341
|
-
.popup.demo-popup
|
342
|
-
.view.navbar-fixed
|
343
|
-
.pages
|
344
|
-
.page
|
345
|
-
.navbar
|
346
|
-
.navbar-inner
|
347
|
-
.center Popup Title
|
348
|
-
.right
|
349
|
-
a(href="#").link.close-popup Done
|
350
|
-
.page-content
|
351
|
-
.content-block
|
352
|
-
p Here comes popup. You can put here anything, even independent view with its own navigation. Also not, that by default popup looks a bit different on iPhone/iPod and iPad, on iPhone it is fullscreen.
|
353
|
-
p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse faucibus mauris leo, eu bibendum neque congue non. Ut leo mauris, eleifend eu commodo a, egestas ac urna. Maecenas in lacus faucibus, viverra ipsum pulvinar, molestie arcu. Etiam lacinia venenatis dignissim. Suspendisse non nisl semper tellus malesuada suscipit eu et eros. Nulla eu enim quis quam elementum vulputate. Mauris ornare consequat nunc viverra pellentesque. Aenean semper eu massa sit amet aliquam. Integer et neque sed libero mollis elementum at vitae ligula. Vestibulum pharetra sed libero sed porttitor. Suspendisse a faucibus lectus.
|
354
|
-
p Duis ut mauris sollicitudin, venenatis nisi sed, luctus ligula. Phasellus blandit nisl ut lorem semper pharetra. Nullam tortor nibh, suscipit in consequat vel, feugiat sed quam. Nam risus libero, auctor vel tristique ac, malesuada ut ante. Sed molestie, est in eleifend sagittis, leo tortor ullamcorper erat, at vulputate eros sapien nec libero. Mauris dapibus laoreet nibh quis bibendum. Fusce dolor sem, suscipit in iaculis id, pharetra at urna. Pellentesque tempor congue massa quis faucibus. Vestibulum nunc eros, convallis blandit dui sit amet, gravida adipiscing libero.
|
355
|
-
p Morbi posuere ipsum nisl, accumsan tincidunt nibh lobortis sit amet. Proin felis lorem, dictum vel nulla quis, lobortis dignissim nunc. Pellentesque dapibus urna ut imperdiet mattis. Proin purus diam, accumsan ut mollis ac, vulputate nec metus. Etiam at risus neque. Fusce tincidunt, risus in faucibus lobortis, diam mi blandit nunc, quis molestie dolor tellus ac enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum turpis a velit vestibulum pharetra. Vivamus blandit dapibus cursus. Aenean lorem augue, vehicula in eleifend ut, imperdiet quis felis.
|
356
|
-
p Duis non erat vel lacus consectetur ultricies. Sed non velit dolor. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin vel varius mi, a tristique ante. Vivamus eget nibh ac elit tempor bibendum sit amet vitae velit. Proin sit amet dapibus nunc, non porta tellus. Fusce interdum vulputate imperdiet. Sed faucibus metus at pharetra fringilla. Fusce mattis orci et massa congue, eget dapibus ante rhoncus. Morbi semper sed tellus vel dignissim. Cras vestibulum, sapien in suscipit tincidunt, lectus mi sodales purus, at egestas ligula dui vel erat. Etiam cursus neque eu lectus eleifend accumsan vitae non leo. Aliquam scelerisque nisl sed lacus suscipit, ac consectetur sapien volutpat. Etiam nulla diam, accumsan ut enim vel, hendrerit venenatis sem. Vestibulum convallis justo vitae pharetra consequat. Mauris sollicitudin ac quam non congue.
|
357
|
-
.popover.popover-menu
|
358
|
-
.popover-angle
|
359
|
-
.popover-inner
|
360
|
-
.list-block
|
361
|
-
ul
|
362
|
-
li
|
363
|
-
a(href="modals.html").list-button.item-link Modals
|
364
|
-
li
|
365
|
-
a(href="popover.html").list-button.item-link Popover
|
366
|
-
li
|
367
|
-
a(href="tabs.html").list-button.item-link Tabs
|
368
|
-
li
|
369
|
-
a(href="panels.html").list-button.item-link Side Panels
|
370
|
-
li
|
371
|
-
a(href="list-view.html").list-button.item-link List View
|
372
|
-
li
|
373
|
-
a(href="forms.html").list-button.item-link Forms
|
374
|
-
.popover.popover-music
|
375
|
-
.popover-angle
|
376
|
-
.popover-inner
|
377
|
-
.list-block.media-list
|
378
|
-
ul
|
379
|
-
li
|
380
|
-
a(href="#").item-link.item-content
|
381
|
-
.item-media
|
382
|
-
img(src="http://hhhhold.com/88/d/jpg?13", width="44")
|
383
|
-
.item-inner
|
384
|
-
.item-title-row
|
385
|
-
.item-title Yellow Submarine
|
386
|
-
.item-subtitle Beatles
|
387
|
-
li
|
388
|
-
a(href="#").item-link.item-content
|
389
|
-
.item-media
|
390
|
-
img(src="http://hhhhold.com/88/d/jpg?23", width="44")
|
391
|
-
.item-inner
|
392
|
-
.item-title-row
|
393
|
-
.item-title Don't Stop Me Now
|
394
|
-
.item-subtitle Queen
|
395
|
-
li
|
396
|
-
a(href="#").item-link.item-content
|
397
|
-
.item-media
|
398
|
-
img(src="http://hhhhold.com/88/d/jpg?33", width="44")
|
399
|
-
.item-inner
|
400
|
-
.item-title-row
|
401
|
-
.item-title Billie Jean
|
402
|
-
.item-subtitle Michael Jackson
|
403
|
-
.login-screen
|
404
|
-
.view
|
405
|
-
.page
|
406
|
-
.page-content.login-screen-content
|
407
|
-
.login-screen-title Framework7
|
408
|
-
form
|
409
|
-
.list-block
|
410
|
-
ul
|
411
|
-
li.item-content
|
412
|
-
.item-inner
|
413
|
-
.item-title.label Username
|
414
|
-
.item-input
|
415
|
-
input(type="text", name="username", placeholder="Your username")
|
416
|
-
li.item-content
|
417
|
-
.item-inner
|
418
|
-
.item-title.label Password
|
419
|
-
.item-input
|
420
|
-
input(type="password", name="password", placeholder="Your password")
|
421
|
-
.list-block
|
422
|
-
ul
|
423
|
-
li
|
424
|
-
a(href="#").item-link.list-button Sign In
|
425
|
-
.list-block-label Some text about login information.<br>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
426
|
-
script(type="text/javascript", src="../build/js/framework7.js")
|
427
|
-
script(type="text/javascript", src="js/kitchen-sink.js")
|