bootstrap-bookingsync-sass 1.0.0.beta2 → 1.0.0.beta3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +13 -0
- data/assets/javascripts/bookingsync/menu.js +51 -5
- data/assets/stylesheets/_bootstrap-bookingsync.scss +1 -0
- data/assets/stylesheets/bookingsync/_layout.scss +39 -12
- data/assets/stylesheets/bookingsync/_menu.scss +23 -1
- data/assets/stylesheets/bookingsync/_navbar.scss +6 -0
- data/assets/stylesheets/bookingsync/_navs.scss +60 -0
- data/assets/stylesheets/bookingsync/_sheet.scss +0 -58
- data/assets/stylesheets/bookingsync/_variables.scss +1 -0
- data/docs/Gemfile.lock +1 -1
- data/docs/Rakefile +1 -1
- data/docs/content/components/menu.md +4 -4
- data/docs/content/compositions/_navbar.html +8 -4
- data/docs/content/compositions/compositions.md +186 -35
- data/docs/content/embed/annotated_section.html +1 -3
- data/docs/content/embed/annotated_section_with_tabulated_content.html +49 -0
- data/docs/content/embed/app_admin.html +50 -6
- data/docs/content/embed/app_admin__content.html +37 -0
- data/docs/content/embed/app_admin_with_menu.html +174 -0
- data/docs/content/embed/app_admin_with_menu__content.html +79 -0
- data/docs/content/embed/core_admin.html +4 -4
- data/docs/content/embed/fullscreen_modal.html +1 -1
- data/docs/content/embed/menu.html +3 -3
- data/docs/content/embed/nested_section.html +5 -4
- data/docs/content/embed/section.html +1 -1
- data/docs/content/embed/tabulated_content.html +1 -1
- data/docs/content/embed/two_columns.html +1 -1
- data/lib/bootstrap/bookingsync/version.rb +1 -1
- metadata +7 -3
- data/docs/content/embed/app_admin_content.html +0 -70
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
<div class="menu-toggle-hideable">
|
|
2
|
+
<button type="button" class="navbar-toggle menu-toggle" data-toggle="toggle"
|
|
3
|
+
data-target="body" data-value="menu-open">
|
|
4
|
+
<span class="sr-only">Toggle Navigation</span>
|
|
5
|
+
<span class="icon-bar"></span>
|
|
6
|
+
<span class="icon-bar"></span>
|
|
7
|
+
<span class="icon-bar"></span>
|
|
8
|
+
</button>
|
|
9
|
+
</div>
|
|
10
|
+
<nav id="sidebar" class="menu menu-fixed flex-col menu-folded">
|
|
11
|
+
<header class="menu-header">
|
|
12
|
+
<div class="menu-icon menu-header-icon">
|
|
13
|
+
<i class="bs-icon-bookingsync"></i>
|
|
14
|
+
</div>
|
|
15
|
+
<div class="menu-body menu-header-body">
|
|
16
|
+
<h4 class="menu-header-heading">Vacation Rentals</h4>
|
|
17
|
+
<small>
|
|
18
|
+
<a href="#menu-header-submenu"
|
|
19
|
+
data-toggle="collapse"
|
|
20
|
+
role="button"
|
|
21
|
+
aria-expanded="false"
|
|
22
|
+
aria-controls="menu-header-submenu"
|
|
23
|
+
class="collapsed">
|
|
24
|
+
Switch account
|
|
25
|
+
<span class="caret"></span>
|
|
26
|
+
</a>
|
|
27
|
+
</small>
|
|
28
|
+
</div>
|
|
29
|
+
<nav id="menu-header-submenu" class="collapse menu-header-submenu">
|
|
30
|
+
<ol>
|
|
31
|
+
<li role="presentation">
|
|
32
|
+
<a href="#">Bed and Breakfast</a>
|
|
33
|
+
</li>
|
|
34
|
+
<li role="presentation" class="active">
|
|
35
|
+
<a href="#">City Apartments</a>
|
|
36
|
+
</li>
|
|
37
|
+
</ol>
|
|
38
|
+
</nav>
|
|
39
|
+
</header>
|
|
40
|
+
<div class="menu-body flex-1">
|
|
41
|
+
<ol>
|
|
42
|
+
<li role="presentation">
|
|
43
|
+
<a href="#" class="menu-link">
|
|
44
|
+
<div class="menu-icon menu-link-icon">
|
|
45
|
+
<i class="icon-calendar"></i>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="menu-body menu-link-body">
|
|
48
|
+
Bookings
|
|
49
|
+
</div>
|
|
50
|
+
</a>
|
|
51
|
+
</li>
|
|
52
|
+
<li role="presentation">
|
|
53
|
+
<a href="#" class="menu-link">
|
|
54
|
+
<div class="menu-icon menu-link-icon">
|
|
55
|
+
<i class="icon-clients"></i>
|
|
56
|
+
</div>
|
|
57
|
+
<div class="menu-body menu-link-body">
|
|
58
|
+
Clients
|
|
59
|
+
</div>
|
|
60
|
+
</a>
|
|
61
|
+
</li>
|
|
62
|
+
<li role="presentation">
|
|
63
|
+
<a href="#" class="menu-link">
|
|
64
|
+
<div class="menu-icon menu-link-icon">
|
|
65
|
+
<i class="icon-rental"></i>
|
|
66
|
+
</div>
|
|
67
|
+
<div class="menu-body menu-link-body">
|
|
68
|
+
Rentals
|
|
69
|
+
</div>
|
|
70
|
+
</a>
|
|
71
|
+
</li>
|
|
72
|
+
</ol>
|
|
73
|
+
</div>
|
|
74
|
+
<footer class="menu-footer">
|
|
75
|
+
<ol>
|
|
76
|
+
<li role="separator" class="divider"></li>
|
|
77
|
+
<li role="presentation" class="active">
|
|
78
|
+
<a href="#" class="menu-link">
|
|
79
|
+
<div class="menu-icon menu-link-icon">
|
|
80
|
+
<i class="icon-applications"></i>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="menu-body menu-link-body">
|
|
83
|
+
Apps
|
|
84
|
+
</div>
|
|
85
|
+
</a>
|
|
86
|
+
</li>
|
|
87
|
+
<li role="presentation">
|
|
88
|
+
<a href="#" class="menu-link" data-toggle="menu-expand" data-menu="#sidebar"
|
|
89
|
+
data-submenu="#sidebar-settings">
|
|
90
|
+
<div class="menu-icon menu-link-icon">
|
|
91
|
+
<i class="icon-settings"></i>
|
|
92
|
+
</div>
|
|
93
|
+
<div class="menu-body menu-link-body">
|
|
94
|
+
Settings
|
|
95
|
+
</div>
|
|
96
|
+
<div class="menu-caret">
|
|
97
|
+
<span class="caret-right"></span>
|
|
98
|
+
</div>
|
|
99
|
+
</a>
|
|
100
|
+
</li>
|
|
101
|
+
<li role="separator" class="divider"></li>
|
|
102
|
+
<li role="presentation">
|
|
103
|
+
<a href="#menu-footer-submenu"
|
|
104
|
+
data-toggle="collapse"
|
|
105
|
+
role="button"
|
|
106
|
+
aria-expanded="false"
|
|
107
|
+
aria-controls="menu-footer-submenu"
|
|
108
|
+
class="collapsed menu-link">
|
|
109
|
+
<div class="menu-icon menu-footer-icon">
|
|
110
|
+
<img src="http://lorempixel.com/100/100/people/9" alt="Jane Doe"
|
|
111
|
+
class="img-rounded">
|
|
112
|
+
</div>
|
|
113
|
+
<div class="menu-body menu-link-body">
|
|
114
|
+
Jane Doe
|
|
115
|
+
</div>
|
|
116
|
+
<div class="menu-caret">
|
|
117
|
+
<span class="caret"></span>
|
|
118
|
+
</div>
|
|
119
|
+
</a>
|
|
120
|
+
</li>
|
|
121
|
+
</ol>
|
|
122
|
+
<nav id="menu-footer-submenu" class="collapse menu-footer-submenu">
|
|
123
|
+
<ol>
|
|
124
|
+
<li role="presentation">
|
|
125
|
+
<a href="#">Help Center</a>
|
|
126
|
+
</li>
|
|
127
|
+
<li role="separator" class="divider"></li>
|
|
128
|
+
<li role="presentation">
|
|
129
|
+
<a href="#">Profile</a>
|
|
130
|
+
</li>
|
|
131
|
+
<li role="presentation" class="active">
|
|
132
|
+
<a href="#">Logout</a>
|
|
133
|
+
</li>
|
|
134
|
+
</ol>
|
|
135
|
+
</nav>
|
|
136
|
+
</footer>
|
|
137
|
+
</nav>
|
|
138
|
+
<nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
|
|
139
|
+
<header class="menu-header">
|
|
140
|
+
<div class="menu-body menu-header-body">
|
|
141
|
+
<h4 class="menu-header-heading">Settings</h4>
|
|
142
|
+
</div>
|
|
143
|
+
</header>
|
|
144
|
+
<div class="menu-body flex-1">
|
|
145
|
+
<ol>
|
|
146
|
+
<li role="presentation" class="active">
|
|
147
|
+
<a href="#" class="menu-link">
|
|
148
|
+
<div class="menu-body menu-link-body">
|
|
149
|
+
General
|
|
150
|
+
</div>
|
|
151
|
+
</a>
|
|
152
|
+
</li>
|
|
153
|
+
<li role="presentation">
|
|
154
|
+
<a href="#" class="menu-link">
|
|
155
|
+
<div class="menu-body menu-link-body">
|
|
156
|
+
Payments
|
|
157
|
+
</div>
|
|
158
|
+
</a>
|
|
159
|
+
</li>
|
|
160
|
+
<li role="presentation">
|
|
161
|
+
<a href="#" class="menu-link">
|
|
162
|
+
<div class="menu-body menu-link-body">
|
|
163
|
+
Apps
|
|
164
|
+
</div>
|
|
165
|
+
</a>
|
|
166
|
+
</li>
|
|
167
|
+
</ol>
|
|
168
|
+
</div>
|
|
169
|
+
</nav>
|
|
170
|
+
<div class="sided-content-full">
|
|
171
|
+
<iframe class="iframe-fullscreen" src="/embed/app_admin_with_menu__content/index.html"
|
|
172
|
+
frameborder="0"></iframe>
|
|
173
|
+
</div>
|
|
174
|
+
|
|
@@ -0,0 +1,79 @@
|
|
|
1
|
+
<nav class="menu menu-fixed flex-col menu-submenu menu-app">
|
|
2
|
+
<header class="menu-header">
|
|
3
|
+
<div class="menu-body menu-header-body">
|
|
4
|
+
<h4 class="menu-header-heading">App name</h4>
|
|
5
|
+
</div>
|
|
6
|
+
</header>
|
|
7
|
+
<div class="menu-body flex-1">
|
|
8
|
+
<ol>
|
|
9
|
+
<li role="presentation" class="active">
|
|
10
|
+
<a href="#" class="menu-link">
|
|
11
|
+
<div class="menu-body menu-link-body">
|
|
12
|
+
Rentals
|
|
13
|
+
</div>
|
|
14
|
+
</a>
|
|
15
|
+
</li>
|
|
16
|
+
<li role="presentation">
|
|
17
|
+
<a href="#" class="menu-link">
|
|
18
|
+
<div class="menu-body menu-link-body">
|
|
19
|
+
Pages
|
|
20
|
+
</div>
|
|
21
|
+
</a>
|
|
22
|
+
</li>
|
|
23
|
+
<li role="presentation">
|
|
24
|
+
<a href="#" class="menu-link">
|
|
25
|
+
<div class="menu-body menu-link-body">
|
|
26
|
+
Categories
|
|
27
|
+
</div>
|
|
28
|
+
</a>
|
|
29
|
+
</li>
|
|
30
|
+
</ol>
|
|
31
|
+
</div>
|
|
32
|
+
</nav>
|
|
33
|
+
<div class="sided-content-with-menu">
|
|
34
|
+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
35
|
+
<div class="container-fluid">
|
|
36
|
+
<div class="navbar-header">
|
|
37
|
+
<button type="button" class="navbar-toggle menu-toggle menu-toggle-parent-frame"
|
|
38
|
+
data-toggle="toggle"
|
|
39
|
+
data-target="body" data-value="menu-open">
|
|
40
|
+
<span class="sr-only">Toggle Navigation</span>
|
|
41
|
+
<span class="icon-bar"></span>
|
|
42
|
+
<span class="icon-bar"></span>
|
|
43
|
+
<span class="icon-bar"></span>
|
|
44
|
+
</button>
|
|
45
|
+
<button type="button" class="navbar-toggle navbar-toggle-context"
|
|
46
|
+
data-toggle="collapse" data-target=".navbar-top-collapse">
|
|
47
|
+
<span class="sr-only">Toggle Navigation</span>
|
|
48
|
+
<span class="icon-bar"></span>
|
|
49
|
+
<span class="icon-bar"></span>
|
|
50
|
+
<span class="icon-bar"></span>
|
|
51
|
+
</button>
|
|
52
|
+
<div class="navbar-brand-container">
|
|
53
|
+
<span class="navbar-brand">
|
|
54
|
+
<h1 class="text-overflow"><i class="icon-rental"></i> Rentals</h1>
|
|
55
|
+
</span>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="collapse navbar-collapse navbar-top-collapse">
|
|
59
|
+
<div class="navbar-right">
|
|
60
|
+
<button class="btn btn-secondary navbar-btn" type="button">Button</button>
|
|
61
|
+
<button class="btn btn-primary navbar-btn" type="button">Call to action</button>
|
|
62
|
+
</div>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
</nav>
|
|
66
|
+
<section class="main-content">
|
|
67
|
+
<div class="sheet">
|
|
68
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla volutpat placerat dui sed interdum. Proin vel est pulvinar, tempus ante consectetur, euismod ante. Integer ultricies augue orci, nec semper velit dictum nec. Nam vitae nisl ex. Cras et fringilla urna. Fusce laoreet leo quis lacus accumsan auctor. Donec mattis nec nulla et hendrerit. Maecenas a viverra nisl. Aenean ornare, metus sit amet euismod congue, libero nulla gravida dolor, et finibus ante lacus eget nisi. In porttitor elit molestie lorem aliquam, nec varius ex luctus.</p>
|
|
69
|
+
|
|
70
|
+
<p>In non justo lacus. Curabitur pretium, ipsum at tincidunt lobortis, massa justo pretium risus, sodales facilisis urna dui in ligula. Vivamus dignissim diam ut augue dignissim elementum. Donec felis lorem, congue a pharetra eget, lacinia sed lectus. Morbi vitae eros in nibh hendrerit elementum. Nulla condimentum dolor nec tellus condimentum, non tincidunt leo euismod. Mauris semper, magna vel placerat euismod, velit ante elementum lectus, ut mollis lectus magna et augue. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In at pharetra arcu, eget pulvinar lacus. Vestibulum id dolor eu felis porttitor sagittis. Aenean quis dignissim augue. Maecenas sit amet lorem mattis, facilisis ex eget, pharetra quam. Morbi pulvinar est ac scelerisque molestie. Morbi dignissim scelerisque massa in iaculis. Proin non gravida urna. Donec viverra massa hendrerit, euismod felis a, commodo sem.</p>
|
|
71
|
+
|
|
72
|
+
<p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam ullamcorper rhoncus volutpat. Cras tortor leo, placerat vitae facilisis quis, hendrerit ac dui. Pellentesque blandit ut orci eget lobortis. Sed viverra magna posuere, congue felis posuere, scelerisque orci. Nunc ac scelerisque lacus, id blandit nunc. Proin sodales enim quis urna imperdiet, non finibus velit congue. Donec nisl sapien, posuere at nisi sed, malesuada dignissim mi. Donec posuere eget turpis eget malesuada. Suspendisse tempor diam tortor, a viverra justo sodales eu. Ut et quam ac magna aliquet malesuada in a eros. Nunc scelerisque purus eu justo mollis, id pulvinar arcu varius. Nullam a justo consequat, malesuada elit eu, luctus turpis. In mi purus, varius vitae lacinia sollicitudin, aliquam quis metus.</p>
|
|
73
|
+
|
|
74
|
+
<p>Ut ac porttitor lacus, quis placerat metus. Aliquam condimentum ligula nec turpis ultricies, et egestas lorem venenatis. Duis non lacus sit amet tortor dignissim pharetra nec quis ligula. Vivamus faucibus metus erat, ac posuere sapien aliquet sed. Mauris pretium dictum urna, id sodales justo lacinia quis. Maecenas porttitor et elit ac placerat. Nunc felis arcu, consectetur id feugiat et, interdum eu augue. Donec rutrum tortor mattis enim interdum semper. Suspendisse interdum turpis mauris, accumsan rutrum dolor dictum sed. Pellentesque imperdiet, ligula id tincidunt ultrices, enim neque fringilla sapien, in dignissim nulla tortor eget nisi. Sed commodo erat non tellus pellentesque consectetur.</p>
|
|
75
|
+
|
|
76
|
+
<p>Sed sed urna ut nibh gravida aliquam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a risus venenatis, pharetra odio sed, vestibulum mauris. Vivamus vel porttitor neque. Maecenas eu lobortis felis. Ut pretium turpis accumsan leo rutrum, in volutpat sapien posuere. Mauris nibh libero, venenatis eget eros in, blandit lobortis ex. Donec facilisis elementum condimentum.</p>
|
|
77
|
+
</div>
|
|
78
|
+
</section>
|
|
79
|
+
</div>
|
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
</a>
|
|
77
77
|
</li>
|
|
78
78
|
<li role="presentation">
|
|
79
|
-
<a href="#" class="menu-link" data-toggle="
|
|
80
|
-
data-
|
|
79
|
+
<a href="#" class="menu-link" data-toggle="menu-expand" data-menu="#sidebar"
|
|
80
|
+
data-submenu="#sidebar-settings">
|
|
81
81
|
<div class="menu-icon menu-link-icon">
|
|
82
82
|
<i class="icon-settings"></i>
|
|
83
83
|
</div>
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
</nav>
|
|
127
127
|
</footer>
|
|
128
128
|
</nav>
|
|
129
|
-
<nav class="menu menu-fixed flex-col menu-submenu">
|
|
129
|
+
<nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
|
|
130
130
|
<header class="menu-header">
|
|
131
131
|
<div class="menu-body menu-header-body">
|
|
132
132
|
<h4 class="menu-header-heading">Settings</h4>
|
|
@@ -178,7 +178,7 @@
|
|
|
178
178
|
</button>
|
|
179
179
|
<div class="navbar-brand-container">
|
|
180
180
|
<span class="navbar-brand">
|
|
181
|
-
<h1><i class="icon-rental"></i> Rentals</h1>
|
|
181
|
+
<h1 class="text-overflow"><i class="icon-rental"></i> Rentals</h1>
|
|
182
182
|
</span>
|
|
183
183
|
</div>
|
|
184
184
|
</div>
|
|
@@ -76,8 +76,8 @@
|
|
|
76
76
|
</a>
|
|
77
77
|
</li>
|
|
78
78
|
<li role="presentation">
|
|
79
|
-
<a href="#" class="menu-link" data-toggle="
|
|
80
|
-
data-
|
|
79
|
+
<a href="#" class="menu-link" data-toggle="menu-expand"
|
|
80
|
+
data-menu="#sidebar" data-submenu="#sidebar-settings">
|
|
81
81
|
<div class="menu-icon menu-link-icon">
|
|
82
82
|
<i class="icon-settings"></i>
|
|
83
83
|
</div>
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
</nav>
|
|
127
127
|
</footer>
|
|
128
128
|
</nav>
|
|
129
|
-
<nav class="menu menu-fixed flex-col menu-submenu">
|
|
129
|
+
<nav id="sidebar-settings" class="menu menu-fixed flex-col menu-submenu menu-submenu-collapsed">
|
|
130
130
|
<header class="menu-header">
|
|
131
131
|
<div class="menu-body menu-header-body">
|
|
132
132
|
<h4 class="menu-header-heading">Settings</h4>
|
|
@@ -10,12 +10,13 @@
|
|
|
10
10
|
</button>
|
|
11
11
|
<div class="navbar-brand-container">
|
|
12
12
|
<span class="navbar-brand">
|
|
13
|
-
<h1>
|
|
14
|
-
<
|
|
15
|
-
|
|
13
|
+
<h1 class="text-overflow">
|
|
14
|
+
<i class="icon-calendar"></i>
|
|
15
|
+
<span class="navbar-breadcrumb hidden-xs">
|
|
16
|
+
<a href="#">Bookings</a>
|
|
16
17
|
/
|
|
17
18
|
</span>
|
|
18
|
-
|
|
19
|
+
A very long section name
|
|
19
20
|
</h1>
|
|
20
21
|
</span>
|
|
21
22
|
</div>
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: bootstrap-bookingsync-sass
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 1.0.0.
|
|
4
|
+
version: 1.0.0.beta3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Sebastien Grosjean
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2016-08-
|
|
11
|
+
date: 2016-08-09 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bootstrap-sass
|
|
@@ -79,6 +79,7 @@ files:
|
|
|
79
79
|
- assets/stylesheets/bookingsync/_menu.scss
|
|
80
80
|
- assets/stylesheets/bookingsync/_modals.scss
|
|
81
81
|
- assets/stylesheets/bookingsync/_navbar.scss
|
|
82
|
+
- assets/stylesheets/bookingsync/_navs.scss
|
|
82
83
|
- assets/stylesheets/bookingsync/_sheet.scss
|
|
83
84
|
- assets/stylesheets/bookingsync/_smiles.scss
|
|
84
85
|
- assets/stylesheets/bookingsync/_switch.scss
|
|
@@ -144,8 +145,11 @@ files:
|
|
|
144
145
|
- docs/content/compositions/_navbar.html
|
|
145
146
|
- docs/content/compositions/compositions.md
|
|
146
147
|
- docs/content/embed/annotated_section.html
|
|
148
|
+
- docs/content/embed/annotated_section_with_tabulated_content.html
|
|
147
149
|
- docs/content/embed/app_admin.html
|
|
148
|
-
- docs/content/embed/
|
|
150
|
+
- docs/content/embed/app_admin__content.html
|
|
151
|
+
- docs/content/embed/app_admin_with_menu.html
|
|
152
|
+
- docs/content/embed/app_admin_with_menu__content.html
|
|
149
153
|
- docs/content/embed/core_admin.html
|
|
150
154
|
- docs/content/embed/fullscreen_modal.html
|
|
151
155
|
- docs/content/embed/menu.html
|
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
<nav class="menu menu-fixed flex-col menu-submenu">
|
|
2
|
-
<header class="menu-header">
|
|
3
|
-
<div class="menu-body menu-header-body">
|
|
4
|
-
<h4 class="menu-header-heading">App name</h4>
|
|
5
|
-
</div>
|
|
6
|
-
</header>
|
|
7
|
-
<div class="menu-body flex-1">
|
|
8
|
-
<ol>
|
|
9
|
-
<li role="presentation" class="active">
|
|
10
|
-
<a href="#" class="menu-link">
|
|
11
|
-
<div class="menu-body menu-link-body">
|
|
12
|
-
Rentals
|
|
13
|
-
</div>
|
|
14
|
-
</a>
|
|
15
|
-
</li>
|
|
16
|
-
<li role="presentation">
|
|
17
|
-
<a href="#" class="menu-link">
|
|
18
|
-
<div class="menu-body menu-link-body">
|
|
19
|
-
Pages
|
|
20
|
-
</div>
|
|
21
|
-
</a>
|
|
22
|
-
</li>
|
|
23
|
-
<li role="presentation">
|
|
24
|
-
<a href="#" class="menu-link">
|
|
25
|
-
<div class="menu-body menu-link-body">
|
|
26
|
-
Categories
|
|
27
|
-
</div>
|
|
28
|
-
</a>
|
|
29
|
-
</li>
|
|
30
|
-
</ol>
|
|
31
|
-
</div>
|
|
32
|
-
</nav>
|
|
33
|
-
<div class="sided-content">
|
|
34
|
-
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
35
|
-
<div class="container-fluid">
|
|
36
|
-
<div class="navbar-header">
|
|
37
|
-
<button type="button" class="navbar-toggle menu-toggle" data-toggle="toggle"
|
|
38
|
-
data-target="body" data-value="menu-open">
|
|
39
|
-
<span class="sr-only">Toggle Navigation</span>
|
|
40
|
-
<span class="icon-bar"></span>
|
|
41
|
-
<span class="icon-bar"></span>
|
|
42
|
-
<span class="icon-bar"></span>
|
|
43
|
-
</button>
|
|
44
|
-
<button type="button" class="navbar-toggle navbar-toggle-context"
|
|
45
|
-
data-toggle="collapse" data-target=".navbar-top-collapse">
|
|
46
|
-
<span class="sr-only">Toggle Navigation</span>
|
|
47
|
-
<span class="icon-bar"></span>
|
|
48
|
-
<span class="icon-bar"></span>
|
|
49
|
-
<span class="icon-bar"></span>
|
|
50
|
-
</button>
|
|
51
|
-
<div class="navbar-brand-container">
|
|
52
|
-
<span class="navbar-brand">
|
|
53
|
-
<h1><i class="icon-rental"></i> Rentals</h1>
|
|
54
|
-
</span>
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
57
|
-
<div class="collapse navbar-collapse navbar-top-collapse">
|
|
58
|
-
<div class="navbar-right">
|
|
59
|
-
<button class="btn btn-secondary navbar-btn" type="button">Button</button>
|
|
60
|
-
<button class="btn btn-primary navbar-btn" type="button">Call to action</button>
|
|
61
|
-
</div>
|
|
62
|
-
</div>
|
|
63
|
-
</div>
|
|
64
|
-
</nav>
|
|
65
|
-
<section class="main-content">
|
|
66
|
-
<div class="sheet">
|
|
67
|
-
<p>Body</p>
|
|
68
|
-
</div>
|
|
69
|
-
</section>
|
|
70
|
-
</div>
|