bootstrap-bookingsync-sass 0.0.19 → 1.0.0.beta1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (162) hide show
  1. checksums.yaml +4 -4
  2. data/.bowerrc +4 -0
  3. data/.editorconfig +34 -0
  4. data/.ember-cli +9 -0
  5. data/.gitignore +18 -0
  6. data/.jshintrc +32 -0
  7. data/.npmignore +16 -0
  8. data/.travis.yaml +34 -0
  9. data/.watchmanconfig +3 -0
  10. data/CHANGELOG.md +34 -1
  11. data/README.md +110 -5
  12. data/addon/.gitkeep +0 -0
  13. data/addon/components/bsy-button.js +34 -0
  14. data/addon/templates/components/bsy-button.hbs +1 -0
  15. data/app/.gitkeep +0 -0
  16. data/app/components/bsy-button.js +1 -0
  17. data/assets/fonts/bookingsync/bookingsync-icons.eot +0 -0
  18. data/assets/fonts/bookingsync/bookingsync-icons.svg +37 -0
  19. data/assets/fonts/bookingsync/bookingsync-icons.ttf +0 -0
  20. data/assets/fonts/bookingsync/bookingsync-icons.woff +0 -0
  21. data/assets/fonts/bookingsync/bookingsync-icons.woff2 +0 -0
  22. data/assets/fonts/bookingsync/bookingsync-smiles.eot +0 -0
  23. data/assets/fonts/bookingsync/bookingsync-smiles.svg +1 -1
  24. data/assets/fonts/bookingsync/bookingsync-smiles.ttf +0 -0
  25. data/assets/fonts/bookingsync/bookingsync-smiles.woff +0 -0
  26. data/assets/fonts/bookingsync/bookingsync-smiles.woff2 +0 -0
  27. data/assets/javascripts/bookingsync/menu.js +29 -0
  28. data/assets/javascripts/bookingsync/toggle.js +15 -0
  29. data/assets/javascripts/bootstrap-bookingsync-sprockets.js +2 -0
  30. data/assets/stylesheets/_bootstrap-bookingsync.scss +9 -1
  31. data/assets/stylesheets/bookingsync/_annotated-sections.scss +28 -0
  32. data/assets/stylesheets/bookingsync/_buttons.scss +218 -0
  33. data/assets/stylesheets/bookingsync/_ember-power-select.scss +131 -0
  34. data/assets/stylesheets/bookingsync/_form.scss +22 -1
  35. data/assets/stylesheets/bookingsync/_icons.scss +119 -0
  36. data/assets/stylesheets/bookingsync/_layout.scss +18 -9
  37. data/assets/stylesheets/bookingsync/_list-group.scss +37 -0
  38. data/assets/stylesheets/bookingsync/_menu.scss +230 -210
  39. data/assets/stylesheets/bookingsync/_modals.scss +24 -0
  40. data/assets/stylesheets/bookingsync/_navbar.scss +53 -0
  41. data/assets/stylesheets/bookingsync/_sheet.scss +9 -0
  42. data/assets/stylesheets/bookingsync/_smiles.scss +25 -19
  43. data/assets/stylesheets/bookingsync/_theme.scss +0 -22
  44. data/assets/stylesheets/bookingsync/_variables.scss +191 -38
  45. data/blueprints/ember-cli-bootstrap-bookingsync-sass/files/app/styles/app.scss +3 -0
  46. data/blueprints/ember-cli-bootstrap-bookingsync-sass/files/app/templates/application.hbs +31 -0
  47. data/blueprints/ember-cli-bootstrap-bookingsync-sass/files/ember-cli-build.js +28 -0
  48. data/blueprints/ember-cli-bootstrap-bookingsync-sass/index.js +15 -0
  49. data/bower.json +14 -0
  50. data/config/deploy.js +30 -0
  51. data/config/ember-try.js +36 -0
  52. data/config/environment.js +6 -0
  53. data/docs/Gemfile +1 -1
  54. data/docs/Gemfile.lock +16 -13
  55. data/docs/Rakefile +1 -1
  56. data/docs/Rules +29 -11
  57. data/docs/content/assets/fonts/bookingsync/bookingsync-icons.eot +0 -0
  58. data/docs/content/assets/fonts/bookingsync/bookingsync-icons.svg +37 -0
  59. data/docs/content/assets/fonts/bookingsync/bookingsync-icons.ttf +0 -0
  60. data/docs/content/assets/fonts/bookingsync/bookingsync-icons.woff +0 -0
  61. data/docs/content/assets/fonts/bookingsync/bookingsync-icons.woff2 +0 -0
  62. data/docs/content/assets/fonts/bookingsync/bookingsync-smiles.eot +0 -0
  63. data/docs/content/assets/fonts/bookingsync/bookingsync-smiles.svg +19 -0
  64. data/docs/content/assets/fonts/bookingsync/bookingsync-smiles.ttf +0 -0
  65. data/docs/content/assets/fonts/bookingsync/bookingsync-smiles.woff +0 -0
  66. data/docs/content/assets/fonts/bookingsync/bookingsync-smiles.woff2 +0 -0
  67. data/docs/content/assets/images/bookingsync.png +0 -0
  68. data/docs/content/assets/javascripts/application.js.coffee +1 -0
  69. data/docs/content/assets/stylesheets/_base.scss +64 -25
  70. data/docs/content/assets/stylesheets/_code.scss +6 -0
  71. data/docs/content/assets/stylesheets/_icons.scss +54 -0
  72. data/docs/content/assets/stylesheets/_override.scss +67 -0
  73. data/docs/content/assets/stylesheets/_variables.scss +7 -0
  74. data/docs/content/assets/stylesheets/application.scss +2 -1
  75. data/docs/content/brand.html +9 -0
  76. data/docs/content/brand/_navbar.html +17 -0
  77. data/docs/content/brand/colors.md +101 -0
  78. data/docs/content/brand/iconography.md +87 -0
  79. data/docs/content/brand/smiles.md +51 -0
  80. data/docs/content/brand/typography.md +301 -0
  81. data/docs/content/buttons.html +6 -0
  82. data/docs/content/buttons/_navbar.html +13 -0
  83. data/docs/content/buttons/buttons.md +320 -0
  84. data/docs/content/components.html +11 -22
  85. data/docs/content/components/_navbar.html +22 -0
  86. data/docs/content/components/chosen.md +28 -17
  87. data/docs/content/components/dropdown.md +2 -4
  88. data/docs/content/components/list-group.md +239 -0
  89. data/docs/content/components/menu.md +134 -219
  90. data/docs/content/components/modal.html +108 -0
  91. data/docs/content/components/sheet.md +11 -60
  92. data/docs/content/components/switch.md +42 -25
  93. data/docs/content/compositions.html +6 -0
  94. data/docs/content/compositions/_navbar.html +12 -0
  95. data/docs/content/compositions/compositions.md +348 -0
  96. data/docs/content/embed/menu.html +160 -0
  97. data/docs/content/forms.html +6 -0
  98. data/docs/content/forms/_navbar.html +39 -0
  99. data/docs/content/{css → forms}/forms.md +98 -86
  100. data/docs/content/utilities.html +6 -0
  101. data/docs/content/utilities/_navbar.html +6 -0
  102. data/docs/content/{css → utilities}/helpers.md +4 -6
  103. data/docs/layouts/default.html +12 -7
  104. data/docs/layouts/embed.html +7 -0
  105. data/docs/layouts/head.html +1 -2
  106. data/docs/layouts/navbar.html +15 -23
  107. data/docs/layouts/sidebar.html +53 -0
  108. data/docs/nanoc.yaml +2 -0
  109. data/docs/public/ember/assets/dummy-605390683726afd79cffdf529eb4531a.css +28 -0
  110. data/docs/public/ember/assets/dummy-daae8f1136db419cd268e84ad4f5c989.js +2 -0
  111. data/docs/public/ember/assets/vendor-226e4280b8b1da91e2e598b6726ea1f4.js +28 -0
  112. data/docs/public/ember/assets/vendor-d41d8cd98f00b204e9800998ecf8427e.css +0 -0
  113. data/docs/public/ember/crossdomain.xml +15 -0
  114. data/docs/public/ember/fonts/bookingsync/bookingsync-icons.eot +0 -0
  115. data/docs/public/ember/fonts/bookingsync/bookingsync-icons.svg +37 -0
  116. data/docs/public/ember/fonts/bookingsync/bookingsync-icons.ttf +0 -0
  117. data/docs/public/ember/fonts/bookingsync/bookingsync-icons.woff +0 -0
  118. data/docs/public/ember/fonts/bookingsync/bookingsync-icons.woff2 +0 -0
  119. data/docs/public/ember/fonts/bookingsync/bookingsync-smiles.eot +0 -0
  120. data/docs/public/ember/fonts/bookingsync/bookingsync-smiles.svg +19 -0
  121. data/docs/public/ember/fonts/bookingsync/bookingsync-smiles.ttf +0 -0
  122. data/docs/public/ember/fonts/bookingsync/bookingsync-smiles.woff +0 -0
  123. data/docs/public/ember/fonts/bookingsync/bookingsync-smiles.woff2 +0 -0
  124. data/docs/public/ember/index.html +27 -0
  125. data/docs/public/ember/robots.txt +3 -0
  126. data/ember-cli-build.js +23 -0
  127. data/index.js +78 -0
  128. data/lib/bootstrap/bookingsync/version.rb +1 -1
  129. data/package.json +62 -0
  130. data/testem.json +12 -0
  131. data/tests/.jshintrc +52 -0
  132. data/tests/dummy/app/app.js +18 -0
  133. data/tests/dummy/app/components/.gitkeep +0 -0
  134. data/tests/dummy/app/controllers/.gitkeep +0 -0
  135. data/tests/dummy/app/controllers/index.js +31 -0
  136. data/tests/dummy/app/helpers/.gitkeep +0 -0
  137. data/tests/dummy/app/index.html +25 -0
  138. data/tests/dummy/app/models/.gitkeep +0 -0
  139. data/tests/dummy/app/resolver.js +3 -0
  140. data/tests/dummy/app/router.js +11 -0
  141. data/tests/dummy/app/routes/.gitkeep +0 -0
  142. data/tests/dummy/app/styles/app.scss +3 -0
  143. data/tests/dummy/app/templates/application.hbs +7 -0
  144. data/tests/dummy/app/templates/components/.gitkeep +0 -0
  145. data/tests/dummy/app/templates/index.hbs +275 -0
  146. data/tests/dummy/app/templates/navbar.hbs +24 -0
  147. data/tests/dummy/app/templates/sidebar.hbs +47 -0
  148. data/tests/dummy/config/environment.js +47 -0
  149. data/tests/dummy/public/crossdomain.xml +15 -0
  150. data/tests/dummy/public/robots.txt +3 -0
  151. data/tests/helpers/destroy-app.js +5 -0
  152. data/tests/helpers/module-for-acceptance.js +23 -0
  153. data/tests/helpers/resolver.js +11 -0
  154. data/tests/helpers/start-app.js +18 -0
  155. data/tests/index.html +34 -0
  156. data/tests/integration/.gitkeep +0 -0
  157. data/tests/integration/components/bsy-button-test.js +24 -0
  158. data/tests/test-helper.js +6 -0
  159. data/tests/unit/.gitkeep +0 -0
  160. data/vendor/.gitkeep +0 -0
  161. metadata +127 -8
  162. data/docs/content/css.html +0 -68
data/docs/content/components/dropdown.md CHANGED
@@ -1,10 +1,8 @@
1
- # Dropdown
2
-
3
1
  <div class="example">
4
2
  <div class="sheet-header">
5
- <h3 id="dropdown-example">Basic example</h3>
3
+ <h3 id="dropdown">Dropdown</h3>
6
4
  </div>
7
- <div class="bs-example bs-sheet" data-example-id="dropdown-example">
5
+ <div class="bs-example bs-sheet" data-example-id="dropdown">
8
6
  <div class="dropdown">
9
7
  <button class="btn btn-default dropdown-toggle" type="button"
10
8
  id="dropdownMenu1" data-toggle="dropdown"
data/docs/content/components/list-group.md ADDED
@@ -0,0 +1,239 @@
1
+ <div class="example">
2
+ <div class="sheet-header">
3
+ <h3 id="list-group">List group</h3>
4
+ </div>
5
+ <div class="bs-example bs-sheet" data-example-id="list-group">
6
+ <div class="panel panel-default">
7
+ <ul class="list-group list-unstyled">
8
+ <li class="active">
9
+ <a href="#" class="list-group-item">Vacation Rentals</a>
10
+ </li>
11
+ <li>
12
+ <a href="#" class="list-group-item">City Apartments</a>
13
+ </li>
14
+ </ul>
15
+ </div>
16
+ </div>
17
+ </div>
18
+ ~~~ html
19
+ <div class="panel panel-default">
20
+ <ul class="list-group list-unstyled">
21
+ <li class="active">
22
+ <a href="#" class="list-group-item">Vacation Rentals</a>
23
+ </li>
24
+ <li>
25
+ <a href="#" class="list-group-item">City Apartments</a>
26
+ </li>
27
+ </ul>
28
+ </div>
29
+ ~~~
30
+
31
+ <div class="example">
32
+ <div class="sheet-header">
33
+ <h3 id="list-group-with-icons">List group with icons</h3>
34
+ </div>
35
+ <div class="bs-example bs-sheet" data-example-id="list-group-with-icons">
36
+ <div class="panel panel-default">
37
+ <ul class="list-group list-unstyled">
38
+ <li class="active">
39
+ <a href="#" class="list-group-item">
40
+ <i class="icon-reservation icon-fw"></i>
41
+ &nbsp; Reservations
42
+ </a>
43
+ </li>
44
+ <li>
45
+ <a href="#" class="list-group-item">
46
+ <i class="icon-clients icon-fw"></i>
47
+ &nbsp; Clients
48
+ </a>
49
+ </li>
50
+ <li>
51
+ <a href="#" class="list-group-item">
52
+ <i class="icon-rental icon-fw"></i>
53
+ &nbsp; Rentals
54
+ </a>
55
+ </li>
56
+ <li>
57
+ <a href="#" class="list-group-item">
58
+ <i class="icon-reviews icon-fw"></i>
59
+ &nbsp; Reviews
60
+ </a>
61
+ </li>
62
+ </ul>
63
+ </div>
64
+ </div>
65
+ </div>
66
+ ~~~ html
67
+ <div class="panel panel-default">
68
+ <ul class="list-group list-unstyled">
69
+ <li class="active">
70
+ <a href="#" class="list-group-item">
71
+ <i class="icon-reservation icon-fw"></i>
72
+ &nbsp; Reservations
73
+ </a>
74
+ </li>
75
+ <li>
76
+ <a href="#" class="list-group-item">
77
+ <i class="icon-clients icon-fw"></i>
78
+ &nbsp; Clients
79
+ </a>
80
+ </li>
81
+ <li>
82
+ <a href="#" class="list-group-item">
83
+ <i class="icon-rental icon-fw"></i>
84
+ &nbsp; Rentals
85
+ </a>
86
+ </li>
87
+ <li>
88
+ <a href="#" class="list-group-item">
89
+ <i class="icon-reviews icon-fw"></i>
90
+ &nbsp; Reviews
91
+ </a>
92
+ </li>
93
+ </ul>
94
+ </div>
95
+ ~~~
96
+
97
+ <div class="example">
98
+ <div class="sheet-header">
99
+ <h3 id="nested-list-group">Nested list group</h3>
100
+ </div>
101
+ <div class="bs-example bs-sheet" data-example-id="nested-list-group">
102
+ <div class="panel panel-default">
103
+ <ul class="list-group list-unstyled">
104
+ <li class="expanded active">
105
+ <a href="#" class="list-group-item">Reservations</a>
106
+ <ul class="list-group list-unstyled">
107
+ <li>
108
+ <a href="#" class="list-group-item">Planning</a>
109
+ </li>
110
+ <li>
111
+ <a href="#" class="list-group-item">Calendrier</a>
112
+ </li>
113
+ <li>
114
+ <a href="#" class="list-group-item">List</a>
115
+ </li>
116
+ </ul>
117
+ </li>
118
+ <li>
119
+ <a href="#" class="list-group-item">Clients</a>
120
+ </li>
121
+ <li>
122
+ <a href="#" class="list-group-item">Rentals</a>
123
+ </li>
124
+ <li>
125
+ <a href="#" class="list-group-item">Reviews</a>
126
+ </li>
127
+ </ul>
128
+ </div>
129
+ </div>
130
+ </div>
131
+ ~~~ html
132
+ <div class="panel panel-default">
133
+ <ul class="list-group list-unstyled">
134
+ <li class="expanded active">
135
+ <a href="#" class="list-group-item">Reservations</a>
136
+ <ul class="list-group list-unstyled">
137
+ <li>
138
+ <a href="#" class="list-group-item">Planning</a>
139
+ </li>
140
+ <li>
141
+ <a href="#" class="list-group-item">Calendrier</a>
142
+ </li>
143
+ <li>
144
+ <a href="#" class="list-group-item">List</a>
145
+ </li>
146
+ </ul>
147
+ </li>
148
+ <li>
149
+ <a href="#" class="list-group-item">Clients</a>
150
+ </li>
151
+ <li>
152
+ <a href="#" class="list-group-item">Rentals</a>
153
+ </li>
154
+ <li>
155
+ <a href="#" class="list-group-item">Reviews</a>
156
+ </li>
157
+ </ul>
158
+ </div>
159
+ ~~~
160
+
161
+ <div class="example">
162
+ <div class="sheet-header">
163
+ <h3 id="nested-list-group-with-icons">Nested list group with icons</h3>
164
+ </div>
165
+ <div class="bs-example bs-sheet" data-example-id="nested-list-group-with-icons">
166
+ <div class="panel panel-default">
167
+ <ul class="list-group list-group-with-icon list-unstyled">
168
+ <li class="expanded">
169
+ <a href="#" class="list-group-item">
170
+ <i class="icon-reservation icon-fw"></i>
171
+ &nbsp; Reservations
172
+ </a>
173
+ <ul class="list-group list-unstyled">
174
+ <li><a href="#" class="list-group-item">Planning</a></li>
175
+ <li class="active">
176
+ <a href="#" class="list-group-item">Calendars</a>
177
+ </li>
178
+ <li><a href="#" class="list-group-item">List</a></li>
179
+ </ul>
180
+ </li>
181
+ <li>
182
+ <a href="#" class="list-group-item">
183
+ <i class="icon-clients icon-fw"></i>
184
+ &nbsp; Clients
185
+ </a>
186
+ </li>
187
+ <li>
188
+ <a href="#" class="list-group-item">
189
+ <i class="icon-rental icon-fw"></i>
190
+ &nbsp; Rentals
191
+ </a>
192
+ </li>
193
+ <li>
194
+ <a href="#" class="list-group-item">
195
+ <i class="icon-reviews icon-fw"></i>
196
+ &nbsp; Reviews
197
+ </a>
198
+ </li>
199
+ </ul>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ ~~~ html
204
+ <div class="panel panel-default">
205
+ <ul class="list-group list-group-with-icon list-unstyled">
206
+ <li class="expanded">
207
+ <a href="#" class="list-group-item">
208
+ <i class="icon-reservation icon-fw"></i>
209
+ &nbsp; Reservations
210
+ </a>
211
+ <ul class="list-group list-unstyled">
212
+ <li><a href="#" class="list-group-item">Planning</a></li>
213
+ <li class="active">
214
+ <a href="#" class="list-group-item">Calendars</a>
215
+ </li>
216
+ <li><a href="#" class="list-group-item">List</a></li>
217
+ </ul>
218
+ </li>
219
+ <li>
220
+ <a href="#" class="list-group-item">
221
+ <i class="icon-clients icon-fw"></i>
222
+ &nbsp; Clients
223
+ </a>
224
+ </li>
225
+ <li>
226
+ <a href="#" class="list-group-item">
227
+ <i class="icon-rental icon-fw"></i>
228
+ &nbsp; Rentals
229
+ </a>
230
+ </li>
231
+ <li>
232
+ <a href="#" class="list-group-item">
233
+ <i class="icon-reviews icon-fw"></i>
234
+ &nbsp; Reviews
235
+ </a>
236
+ </li>
237
+ </ul>
238
+ </div>
239
+ ~~~
data/docs/content/components/menu.md CHANGED
@@ -1,152 +1,44 @@
1
- # Menu
2
-
3
1
  <div class="example">
4
2
  <div class="sheet-header">
5
- <h3 id="menu-example">Basic example</h3>
3
+ <h3 id="menu">Menu</h3>
6
4
  </div>
7
- <div class="bs-example bs-sheet" data-example-id="menu-example">
8
- <nav class="menu flex-col">
9
- <header class="dropdown">
10
- <div class="bar">
11
- <img src="http://placehold.it/24x24" class="img-responsive img-circle brand"
12
- alt="Fullname">
13
- <p>
14
- Vacation Rentals<br>
15
- <small>
16
- <a data-target="#menu-header-submenu" href="#"
17
- data-toggle="dropdown"
18
- aria-haspopup="true" aria-expanded="false"
19
- id="menu-switch-account">Switch account
20
- <span class="caret"></span></a>
21
- </small>
22
- </p>
23
- </div>
24
- <div id="menu-header-submenu" class="menu-dropdown"
25
- aria-labelledby="menu-switch-account">
26
- <ol>
27
- <li role="presentation">
28
- <a href="#">Bed and Breakfast</a>
29
- </li>
30
- <li role="presentation" class="active">
31
- <a href="#">City Apartments</a>
32
- </li>
33
- </ol>
34
- </div>
35
- </header>
36
- <div class="body flex-1">
37
- <ol>
38
- <li role="presentation" class="active">
39
- <a href="#">
40
- <i class="fa fa-calendar fa-fw"></i>
41
- <span>Bookings</span>
42
- </a>
43
- </li>
44
- <li role="presentation">
45
- <a href="#">
46
- <i class="fa fa-users fa-fw"></i>
47
- <span>Clients</span>
48
- </a>
49
- </li>
50
- <li role="presentation">
51
- <a href="#">
52
- <i class="fa fa-envelope-o fa-fw"></i>
53
- <span>Inquiries</span></a>
54
- </li>
55
- <li role="presentation">
56
- <a href="#">
57
- <i class="fa fa-home fa-fw"></i>
58
- <span>Rentals</span>
59
- </a>
60
- </li>
61
- <li role="presentation">
62
- <a href="#">
63
- <i class="fa fa-star fa-fw"></i>
64
- <span>Reviews</span>
65
- </a>
66
- </li>
67
- <li role="presentation">
68
- <a href="#">
69
- <i class="fa fa-globe fa-fw"></i>
70
- <span>Website</span>
71
- </a>
72
- </li>
73
- <li role="presentation">
74
- <a href="#">
75
- <i class="fa fa-cubes fa-fw"></i>
76
- <span>Apps</span>
77
- </a>
78
- </li>
79
- </ol>
80
- </div>
81
- <footer>
82
- <div class="bar">
83
- <img src="http://placehold.it/24x24"
84
- class="img-responsive img-circle avatar" alt="John Doe">
85
- <p>
86
- John Doe<br>
87
- <small>
88
- <a data-target="#menu-footer-submenu" href="#"
89
- data-toggle="dropdown"
90
- aria-haspopup="true" aria-expanded="false"
91
- id="menu-manage-account">Manage Account
92
- <i class="fa fa-gear"></i></a>
93
- </small>
94
- </p>
95
- </div>
96
- <div id="menu-footer-submenu" class="menu-dropright flex-col"
97
- aria-labelledby="menu-manage-account">
98
- <ol class="flex-1">
99
- <li class="back text-center" role="presentation">
100
- <a data-target="#menu-footer-submenu" href="#"
101
- data-toggle="dropdown">
102
- <i class="fa fa-long-arrow-left fa-fw"></i>
103
- <span class="sr-only">Back</span>
104
- </a>
105
- </li>
106
- <li role="presentation">
107
- <a href="#">
108
- <i class="fa fa-user fa-fw"></i>
109
- <span>Personal Information</span>
110
- </a>
111
- </li>
112
- <li role="presentation">
113
- <a href="#">
114
- <i class="fa fa-calendar-o fa-fw"></i>
115
- <span>Calendar Preferences</span>
116
- </a>
117
- </li>
118
- <li role="presentation">
119
- <a href="#">
120
- <i class="fa fa-clock-o fa-fw"></i>
121
- <span>Time Format</span>
122
- </a>
123
- </li>
124
- </ol>
125
- </div>
126
- </footer>
127
- </nav>
5
+
6
+ <div class="bs-callout bs-callout-danger">
7
+ <h4>Plugin dependency</h4>
8
+ <p>
9
+ This component requires <code>menu</code> and <code>toggle</code> JS plugins provided by the bootstrap-bookingsync-sass gem.
10
+ </p>
11
+ </div>
12
+
13
+ <div class="bs-example bs-sheet" data-example-id="menu">
14
+ <div class="bs-example-iframe-container-desktop">
15
+ <iframe class="bs-example-iframe" src="/embed/menu/index.html"
16
+ frameborder="0"></iframe>
17
+ </div>
128
18
  </div>
129
19
  </div>
130
20
 
131
21
  ~~~ html
132
- <nav class="menu flex-col">
133
- <header class="dropdown">
134
- <div class="bar">
135
- <img src="http://placehold.it/24x24" class="img-responsive img-circle brand"
136
- alt="Fullname">
137
- <p>
138
- Vacation Rentals<br>
139
- <small>
140
- <a data-target="#menu-header-submenu" href="#"
141
- data-toggle="dropdown"
142
- aria-haspopup="true" aria-expanded="false"
143
- id="menu-switch-account">Switch account
144
- <span class="caret"></span></a>
145
- </small>
146
- </p>
22
+ <nav id="sidebar" class="menu menu-fixed flex-col">
23
+ <header class="menu-header">
24
+ <div class="menu-icon menu-header-icon">
25
+ <i class="bs-icon-bookingsync"></i>
147
26
  </div>
148
- <div id="menu-header-submenu" class="menu-dropdown"
149
- aria-labelledby="menu-switch-account">
27
+ <div class="menu-body menu-header-body">
28
+ <h4 class="menu-header-heading">Vacation Rentals</h4>
29
+ <small>
30
+ <a href="#menu-header-submenu"
31
+ data-toggle="collapse"
32
+ role="button"
33
+ aria-expanded="false"
34
+ aria-controls="menu-header-submenu"
35
+ class="collapsed">
36
+ Switch account
37
+ <span class="caret"></span>
38
+ </a>
39
+ </small>
40
+ </div>
41
+ <nav id="menu-header-submenu" class="collapse menu-header-submenu">
150
42
  <ol>
151
43
  <li role="presentation">
152
44
  <a href="#">Bed and Breakfast</a>
@@ -155,113 +47,136 @@
155
47
  <a href="#">City Apartments</a>
156
48
  </li>
157
49
  </ol>
158
- </div>
50
+ </nav>
159
51
  </header>
160
- <div class="body flex-1">
52
+ <div class="menu-body flex-1">
161
53
  <ol>
162
54
  <li role="presentation" class="active">
163
- <a href="#">
164
- <i class="fa fa-calendar fa-fw"></i>
165
- <span>Bookings</span>
55
+ <a href="#" class="menu-link">
56
+ <div class="menu-icon menu-link-icon">
57
+ <i class="icon-calendar"></i>
58
+ </div>
59
+ <div class="menu-body menu-link-body">
60
+ Bookings
61
+ </div>
166
62
  </a>
167
63
  </li>
168
64
  <li role="presentation">
169
- <a href="#">
170
- <i class="fa fa-users fa-fw"></i>
171
- <span>Clients</span>
65
+ <a href="#" class="menu-link">
66
+ <div class="menu-icon menu-link-icon">
67
+ <i class="icon-clients"></i>
68
+ </div>
69
+ <div class="menu-body menu-link-body">
70
+ Clients
71
+ </div>
172
72
  </a>
173
73
  </li>
174
74
  <li role="presentation">
175
- <a href="#">
176
- <i class="fa fa-envelope-o fa-fw"></i>
177
- <span>Inquiries</span></a>
178
- </li>
179
- <li role="presentation">
180
- <a href="#">
181
- <i class="fa fa-home fa-fw"></i>
182
- <span>Rentals</span>
75
+ <a href="#" class="menu-link">
76
+ <div class="menu-icon menu-link-icon">
77
+ <i class="icon-rental"></i>
78
+ </div>
79
+ <div class="menu-body menu-link-body">
80
+ Rentals
81
+ </div>
183
82
  </a>
184
83
  </li>
84
+ </ol>
85
+ </div>
86
+ <footer class="menu-footer">
87
+ <ol>
88
+ <li role="separator" class="divider"></li>
185
89
  <li role="presentation">
186
- <a href="#">
187
- <i class="fa fa-star fa-fw"></i>
188
- <span>Reviews</span>
90
+ <a href="#" class="menu-link">
91
+ <div class="menu-icon menu-link-icon">
92
+ <i class="icon-applications"></i>
93
+ </div>
94
+ <div class="menu-body menu-link-body">
95
+ Apps
96
+ </div>
189
97
  </a>
190
98
  </li>
191
99
  <li role="presentation">
192
- <a href="#">
193
- <i class="fa fa-globe fa-fw"></i>
194
- <span>Website</span>
100
+ <a href="#" class="menu-link" data-toggle="toggle" data-target="#sidebar"
101
+ data-value="menu-collapsed">
102
+ <div class="menu-icon menu-link-icon">
103
+ <i class="icon-settings"></i>
104
+ </div>
105
+ <div class="menu-body menu-link-body">
106
+ Settings
107
+ </div>
108
+ <div class="menu-caret">
109
+ <span class="caret-right"></span>
110
+ </div>
195
111
  </a>
196
112
  </li>
113
+ <li role="separator" class="divider"></li>
197
114
  <li role="presentation">
198
- <a href="#">
199
- <i class="fa fa-cubes fa-fw"></i>
200
- <span>Apps</span>
115
+ <a href="#menu-footer-submenu"
116
+ data-toggle="collapse"
117
+ role="button"
118
+ aria-expanded="false"
119
+ aria-controls="menu-footer-submenu"
120
+ class="collapsed menu-link">
121
+ <div class="menu-icon menu-footer-icon">
122
+ <img src="http://lorempixel.com/100/100/people/9" alt="Jane Doe"
123
+ class="img-rounded">
124
+ </div>
125
+ <div class="menu-body menu-link-body">
126
+ Jane Doe
127
+ </div>
128
+ <div class="menu-caret">
129
+ <span class="caret"></span>
130
+ </div>
201
131
  </a>
202
132
  </li>
203
133
  </ol>
204
- </div>
205
- <footer>
206
- <div class="bar">
207
- <img src="http://placehold.it/24x24"
208
- class="img-responsive img-circle avatar" alt="John Doe">
209
- <p>
210
- John Doe<br>
211
- <small>
212
- <a data-target="#menu-footer-submenu" href="#"
213
- data-toggle="dropdown"
214
- aria-haspopup="true" aria-expanded="false"
215
- id="menu-manage-account">Manage Account
216
- <i class="fa fa-gear"></i></a>
217
- </small>
218
- </p>
219
- </div>
220
- <div id="menu-footer-submenu" class="menu-dropright flex-col"
221
- aria-labelledby="menu-manage-account">
222
- <ol class="flex-1">
223
- <li class="back text-center" role="presentation">
224
- <a data-target="#menu-footer-submenu" href="#"
225
- data-toggle="dropdown">
226
- <i class="fa fa-long-arrow-left fa-fw"></i>
227
- <span class="sr-only">Back</span>
228
- </a>
229
- </li>
134
+ <nav id="menu-footer-submenu" class="collapse menu-footer-submenu">
135
+ <ol>
230
136
  <li role="presentation">
231
- <a href="#">
232
- <i class="fa fa-user fa-fw"></i>
233
- <span>Personal Information</span>
234
- </a>
137
+ <a href="#">Help Center</a>
235
138
  </li>
139
+ <li role="separator" class="divider"></li>
236
140
  <li role="presentation">
237
- <a href="#">
238
- <i class="fa fa-calendar-o fa-fw"></i>
239
- <span>Calendar Preferences</span>
240
- </a>
141
+ <a href="#">Profile</a>
241
142
  </li>
242
- <li role="presentation">
243
- <a href="#">
244
- <i class="fa fa-clock-o fa-fw"></i>
245
- <span>Time Format</span>
246
- </a>
143
+ <li role="presentation" class="active">
144
+ <a href="#">Logout</a>
247
145
  </li>
248
146
  </ol>
249
- </div>
147
+ </nav>
250
148
  </footer>
251
149
  </nav>
252
- ~~~
253
-
254
- <div class="example">
255
- <div class="sheet-header">
256
- <h3 id="menu-example">Full height fixed position menu</h3>
257
- </div>
258
- <div class="bs-example bs-sheet" data-example-id="menu-example">
259
- <p>Add <code>.menu-fixed</code> class to make the menu fixed to the left viewport edge.</p>
150
+ <nav class="menu menu-fixed flex-col menu-submenu">
151
+ <header class="menu-header">
152
+ <div class="menu-body menu-header-body">
153
+ <h4 class="menu-header-heading">Settings</h4>
154
+ </div>
155
+ </header>
156
+ <div class="menu-body flex-1">
157
+ <ol>
158
+ <li role="presentation" class="active">
159
+ <a href="#" class="menu-link">
160
+ <div class="menu-body menu-link-body">
161
+ General
162
+ </div>
163
+ </a>
164
+ </li>
165
+ <li role="presentation">
166
+ <a href="#" class="menu-link">
167
+ <div class="menu-body menu-link-body">
168
+ Payments
169
+ </div>
170
+ </a>
171
+ </li>
172
+ <li role="presentation">
173
+ <a href="#" class="menu-link">
174
+ <div class="menu-body menu-link-body">
175
+ Apps
176
+ </div>
177
+ </a>
178
+ </li>
179
+ </ol>
260
180
  </div>
261
- </div>
262
-
263
- ~~~ html
264
- <nav class="menu menu-fixed flex-col">
265
- ...
266
181
  </nav>
267
182
  ~~~