bootstrap-bookingsync-sass 0.0.17 → 0.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +8 -0
- data/assets/javascripts/bookingsync/stackable.js +49 -0
- data/assets/javascripts/bootstrap-bookingsync-sprockets.js +1 -0
- data/assets/stylesheets/_bootstrap-bookingsync.scss +1 -0
- data/assets/stylesheets/bookingsync/_colors.scss +1 -0
- data/assets/stylesheets/bookingsync/_dropdown.scss +8 -0
- data/assets/stylesheets/bookingsync/_sheet.scss +58 -1
- data/assets/stylesheets/bookingsync/_variables.scss +30 -12
- data/docs/content/assets/stylesheets/_base.scss +6 -5
- data/docs/content/assets/stylesheets/_callout.scss +10 -1
- data/docs/content/components.html +7 -7
- data/docs/content/components/chosen.md +28 -22
- data/docs/content/components/dropdown.md +45 -0
- data/docs/content/components/menu.md +186 -103
- data/docs/content/components/sheet.md +256 -4
- data/docs/content/components/switch.md +15 -7
- data/docs/content/css.html +44 -18
- data/docs/content/css/forms.md +732 -590
- data/docs/content/css/helpers.md +37 -27
- data/lib/bootstrap/bookingsync/version.rb +1 -1
- metadata +5 -2
|
@@ -1,116 +1,158 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
### Basic example
|
|
1
|
+
# Menu
|
|
4
2
|
|
|
5
3
|
<div class="example">
|
|
6
|
-
<
|
|
7
|
-
<
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
4
|
+
<div class="sheet-header">
|
|
5
|
+
<h3 id="menu-example">Basic example</h3>
|
|
6
|
+
</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">
|
|
20
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>
|
|
21
44
|
<li role="presentation">
|
|
22
|
-
<a href="#">
|
|
45
|
+
<a href="#">
|
|
46
|
+
<i class="fa fa-users fa-fw"></i>
|
|
47
|
+
<span>Clients</span>
|
|
48
|
+
</a>
|
|
23
49
|
</li>
|
|
24
|
-
<li role="presentation"
|
|
25
|
-
<a href="#">
|
|
50
|
+
<li role="presentation">
|
|
51
|
+
<a href="#">
|
|
52
|
+
<i class="fa fa-envelope-o fa-fw"></i>
|
|
53
|
+
<span>Inquiries</span></a>
|
|
26
54
|
</li>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
<li role="presentation" class="active">
|
|
33
|
-
<a href="#"><i class="fa fa-calendar fa-fw"></i> <span>Bookings</span></a>
|
|
34
|
-
</li>
|
|
35
|
-
<li role="presentation">
|
|
36
|
-
<a href="#"><i class="fa fa-users fa-fw"></i> <span>Clients</span></a>
|
|
37
|
-
</li>
|
|
38
|
-
<li role="presentation">
|
|
39
|
-
<a href="#"><i class="fa fa-envelope-o fa-fw"></i> <span>Inquiries</span></a>
|
|
40
|
-
</li>
|
|
41
|
-
<li role="presentation">
|
|
42
|
-
<a href="#"><i class="fa fa-home fa-fw"></i> <span>Rentals</span></a>
|
|
43
|
-
</li>
|
|
44
|
-
<li role="presentation">
|
|
45
|
-
<a href="#"><i class="fa fa-star fa-fw"></i> <span>Reviews</span></a>
|
|
46
|
-
</li>
|
|
47
|
-
<li role="presentation">
|
|
48
|
-
<a href="#"><i class="fa fa-globe fa-fw"></i> <span>Website</span></a>
|
|
49
|
-
</li>
|
|
50
|
-
<li role="presentation">
|
|
51
|
-
<a href="#"><i class="fa fa-cubes fa-fw"></i> <span>Apps</span></a>
|
|
52
|
-
</li>
|
|
53
|
-
</ol>
|
|
54
|
-
</div>
|
|
55
|
-
<footer>
|
|
56
|
-
<div class="bar">
|
|
57
|
-
<img src="https://s3-us-west-2.amazonaws.com/slack-files2/avatars/2015-06-11/6253926944_bd7ce3198dba69ac91be_24.jpg" class="img-responsive img-circle avatar" alt="Peter Fabor">
|
|
58
|
-
<p>
|
|
59
|
-
Peter Fabor<br>
|
|
60
|
-
<small>
|
|
61
|
-
<a data-target="#menu-footer-submenu" href="#" data-toggle="dropdown"
|
|
62
|
-
aria-haspopup="true" aria-expanded="false" id="menu-manage-account">Manage Account
|
|
63
|
-
<i class="fa fa-gear"></i></a>
|
|
64
|
-
</small>
|
|
65
|
-
</p>
|
|
66
|
-
</div>
|
|
67
|
-
<div id="menu-footer-submenu" class="menu-dropright flex-col" aria-labelledby="menu-manage-account">
|
|
68
|
-
<ol class="flex-1">
|
|
69
|
-
<li class="back text-center" role="presentation">
|
|
70
|
-
<a data-target="#menu-footer-submenu" href="#" data-toggle="dropdown">
|
|
71
|
-
<i class="fa fa-long-arrow-left fa-fw"></i> <span class="sr-only">Back</span></a>
|
|
55
|
+
<li role="presentation">
|
|
56
|
+
<a href="#">
|
|
57
|
+
<i class="fa fa-home fa-fw"></i>
|
|
58
|
+
<span>Rentals</span>
|
|
59
|
+
</a>
|
|
72
60
|
</li>
|
|
73
61
|
<li role="presentation">
|
|
74
|
-
<a href="#"
|
|
62
|
+
<a href="#">
|
|
63
|
+
<i class="fa fa-star fa-fw"></i>
|
|
64
|
+
<span>Reviews</span>
|
|
65
|
+
</a>
|
|
75
66
|
</li>
|
|
76
67
|
<li role="presentation">
|
|
77
|
-
<a href="#"
|
|
68
|
+
<a href="#">
|
|
69
|
+
<i class="fa fa-globe fa-fw"></i>
|
|
70
|
+
<span>Website</span>
|
|
71
|
+
</a>
|
|
78
72
|
</li>
|
|
79
73
|
<li role="presentation">
|
|
80
|
-
<a href="#"
|
|
74
|
+
<a href="#">
|
|
75
|
+
<i class="fa fa-cubes fa-fw"></i>
|
|
76
|
+
<span>Apps</span>
|
|
77
|
+
</a>
|
|
81
78
|
</li>
|
|
82
79
|
</ol>
|
|
83
80
|
</div>
|
|
84
|
-
|
|
85
|
-
|
|
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>
|
|
128
|
+
</div>
|
|
86
129
|
</div>
|
|
87
130
|
|
|
88
131
|
~~~ html
|
|
89
132
|
<nav class="menu flex-col">
|
|
90
133
|
<header class="dropdown">
|
|
91
134
|
<div class="bar">
|
|
92
|
-
<img src="http://placehold.it/24x24" class="img-responsive img-circle brand"
|
|
135
|
+
<img src="http://placehold.it/24x24" class="img-responsive img-circle brand"
|
|
136
|
+
alt="Fullname">
|
|
93
137
|
<p>
|
|
94
|
-
|
|
138
|
+
Vacation Rentals<br>
|
|
95
139
|
<small>
|
|
96
|
-
<a data-target="#menu-header-submenu" href="#"
|
|
97
|
-
|
|
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
|
|
98
144
|
<span class="caret"></span></a>
|
|
99
145
|
</small>
|
|
100
146
|
</p>
|
|
101
147
|
</div>
|
|
102
|
-
<div id="menu-header-submenu" class="menu-dropdown"
|
|
148
|
+
<div id="menu-header-submenu" class="menu-dropdown"
|
|
149
|
+
aria-labelledby="menu-switch-account">
|
|
103
150
|
<ol>
|
|
104
151
|
<li role="presentation">
|
|
105
|
-
<a href="#">
|
|
106
|
-
<span class="label label-transparent pull-right">current</span>
|
|
107
|
-
</a>
|
|
108
|
-
</li>
|
|
109
|
-
<li role="presentation">
|
|
110
|
-
<a href="#">SurfOffice: Grand Canaria</a>
|
|
152
|
+
<a href="#">Bed and Breakfast</a>
|
|
111
153
|
</li>
|
|
112
154
|
<li role="presentation" class="active">
|
|
113
|
-
<a href="#">
|
|
155
|
+
<a href="#">City Apartments</a>
|
|
114
156
|
</li>
|
|
115
157
|
</ol>
|
|
116
158
|
</div>
|
|
@@ -118,54 +160,90 @@
|
|
|
118
160
|
<div class="body flex-1">
|
|
119
161
|
<ol>
|
|
120
162
|
<li role="presentation" class="active">
|
|
121
|
-
<a href="#"
|
|
163
|
+
<a href="#">
|
|
164
|
+
<i class="fa fa-calendar fa-fw"></i>
|
|
165
|
+
<span>Bookings</span>
|
|
166
|
+
</a>
|
|
122
167
|
</li>
|
|
123
168
|
<li role="presentation">
|
|
124
|
-
<a href="#"
|
|
169
|
+
<a href="#">
|
|
170
|
+
<i class="fa fa-users fa-fw"></i>
|
|
171
|
+
<span>Clients</span>
|
|
172
|
+
</a>
|
|
125
173
|
</li>
|
|
126
174
|
<li role="presentation">
|
|
127
|
-
<a href="#"
|
|
175
|
+
<a href="#">
|
|
176
|
+
<i class="fa fa-envelope-o fa-fw"></i>
|
|
177
|
+
<span>Inquiries</span></a>
|
|
128
178
|
</li>
|
|
129
179
|
<li role="presentation">
|
|
130
|
-
<a href="#"
|
|
180
|
+
<a href="#">
|
|
181
|
+
<i class="fa fa-home fa-fw"></i>
|
|
182
|
+
<span>Rentals</span>
|
|
183
|
+
</a>
|
|
131
184
|
</li>
|
|
132
185
|
<li role="presentation">
|
|
133
|
-
<a href="#"
|
|
186
|
+
<a href="#">
|
|
187
|
+
<i class="fa fa-star fa-fw"></i>
|
|
188
|
+
<span>Reviews</span>
|
|
189
|
+
</a>
|
|
134
190
|
</li>
|
|
135
191
|
<li role="presentation">
|
|
136
|
-
<a href="#"
|
|
192
|
+
<a href="#">
|
|
193
|
+
<i class="fa fa-globe fa-fw"></i>
|
|
194
|
+
<span>Website</span>
|
|
195
|
+
</a>
|
|
137
196
|
</li>
|
|
138
197
|
<li role="presentation">
|
|
139
|
-
<a href="#"
|
|
198
|
+
<a href="#">
|
|
199
|
+
<i class="fa fa-cubes fa-fw"></i>
|
|
200
|
+
<span>Apps</span>
|
|
201
|
+
</a>
|
|
140
202
|
</li>
|
|
141
203
|
</ol>
|
|
142
204
|
</div>
|
|
143
205
|
<footer>
|
|
144
206
|
<div class="bar">
|
|
145
|
-
<img src="
|
|
207
|
+
<img src="http://placehold.it/24x24"
|
|
208
|
+
class="img-responsive img-circle avatar" alt="John Doe">
|
|
146
209
|
<p>
|
|
147
|
-
|
|
210
|
+
John Doe<br>
|
|
148
211
|
<small>
|
|
149
|
-
<a data-target="#menu-footer-submenu" href="#"
|
|
150
|
-
|
|
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
|
|
151
216
|
<i class="fa fa-gear"></i></a>
|
|
152
217
|
</small>
|
|
153
218
|
</p>
|
|
154
219
|
</div>
|
|
155
|
-
<div id="menu-footer-submenu" class="menu-dropright flex-col"
|
|
220
|
+
<div id="menu-footer-submenu" class="menu-dropright flex-col"
|
|
221
|
+
aria-labelledby="menu-manage-account">
|
|
156
222
|
<ol class="flex-1">
|
|
157
|
-
<li role="presentation">
|
|
158
|
-
<a data-target="#menu-footer-submenu" href="#"
|
|
159
|
-
|
|
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>
|
|
160
229
|
</li>
|
|
161
230
|
<li role="presentation">
|
|
162
|
-
<a href="#"
|
|
231
|
+
<a href="#">
|
|
232
|
+
<i class="fa fa-user fa-fw"></i>
|
|
233
|
+
<span>Personal Information</span>
|
|
234
|
+
</a>
|
|
163
235
|
</li>
|
|
164
236
|
<li role="presentation">
|
|
165
|
-
<a href="#"
|
|
237
|
+
<a href="#">
|
|
238
|
+
<i class="fa fa-calendar-o fa-fw"></i>
|
|
239
|
+
<span>Calendar Preferences</span>
|
|
240
|
+
</a>
|
|
166
241
|
</li>
|
|
167
242
|
<li role="presentation">
|
|
168
|
-
<a href="#"
|
|
243
|
+
<a href="#">
|
|
244
|
+
<i class="fa fa-clock-o fa-fw"></i>
|
|
245
|
+
<span>Time Format</span>
|
|
246
|
+
</a>
|
|
169
247
|
</li>
|
|
170
248
|
</ol>
|
|
171
249
|
</div>
|
|
@@ -173,9 +251,14 @@
|
|
|
173
251
|
</nav>
|
|
174
252
|
~~~
|
|
175
253
|
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
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>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
179
262
|
|
|
180
263
|
~~~ html
|
|
181
264
|
<nav class="menu menu-fixed flex-col">
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
|
|
1
|
+
# Sheet
|
|
2
2
|
|
|
3
3
|
<div class="example">
|
|
4
|
-
<
|
|
4
|
+
<div class="sheet-header">
|
|
5
|
+
<h3 id="sheet-example">Basic example</h3>
|
|
6
|
+
</div>
|
|
5
7
|
<p>Highly inspired from the <code>panel</code> component, the sheet will auto scale and have a relative position to ease children positioning.</p>
|
|
6
8
|
<div class="bs-example bs-sheet" data-example-id="sheet-example">
|
|
7
9
|
<div class="sheet">
|
|
@@ -16,8 +18,11 @@
|
|
|
16
18
|
~~~
|
|
17
19
|
|
|
18
20
|
<div class="example">
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
+
<div class="sheet-header">
|
|
22
|
+
<h3 id="sheet-example-with-header">Example with header</h3>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="bs-example bs-sheet-with-header"
|
|
25
|
+
data-example-id="sheet-example-with-header">
|
|
21
26
|
<div class="sheet">
|
|
22
27
|
<div class="sheet-header">
|
|
23
28
|
<h2>Header</h2>
|
|
@@ -34,3 +39,250 @@
|
|
|
34
39
|
<p>Text...</p>
|
|
35
40
|
</div>
|
|
36
41
|
~~~
|
|
42
|
+
|
|
43
|
+
<div class="example">
|
|
44
|
+
<div class="sheet-header">
|
|
45
|
+
<h3 id="sheet-example-with-tabs">Example with tabs</h3>
|
|
46
|
+
</div>
|
|
47
|
+
<div class="bs-example bs-sheet" data-example-id="sheet-example-with-tabs">
|
|
48
|
+
<div class="sheet">
|
|
49
|
+
<ul class="nav nav-tabs">
|
|
50
|
+
<li class="active"><a href="#">Tab 1</a></li>
|
|
51
|
+
<li><a href="#">Tab 2</a></li>
|
|
52
|
+
<li><a href="#">Tab 3</a></li>
|
|
53
|
+
</ul>
|
|
54
|
+
<div>
|
|
55
|
+
<p>Text...</p>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
~~~ html
|
|
61
|
+
<div class="sheet">
|
|
62
|
+
<ul class="nav nav-tabs">
|
|
63
|
+
<li class="active"><a href="#">Tab 1</a></li>
|
|
64
|
+
<li><a href="#">Tab 2</a></li>
|
|
65
|
+
<li><a href="#">Tab 3</a></li>
|
|
66
|
+
</ul>
|
|
67
|
+
<div>
|
|
68
|
+
<p>Text...</p>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
~~~
|
|
72
|
+
|
|
73
|
+
<div class="example">
|
|
74
|
+
<div class="sheet-header">
|
|
75
|
+
<h3 id="sheet-example-with-stacked-tabs">Example with stacked tabs</h3>
|
|
76
|
+
</div>
|
|
77
|
+
<div class="bs-example bs-sheet"
|
|
78
|
+
data-example-id="sheet-example-with-stacked-tabs">
|
|
79
|
+
<div class="sheet">
|
|
80
|
+
<ul class="nav nav-tabs">
|
|
81
|
+
<li><a href="#">Tab 1</a></li>
|
|
82
|
+
<li class="active"><a href="#">Tab 2</a></li>
|
|
83
|
+
<li><a href="#">Tab 3</a></li>
|
|
84
|
+
<li class="dropdown pull-right">
|
|
85
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
86
|
+
More <span class="caret"></span>
|
|
87
|
+
</a>
|
|
88
|
+
<ul class="dropdown-menu">
|
|
89
|
+
<li><a href="#">Tab 4</a></li>
|
|
90
|
+
<li><a href="#">Tab 5</a></li>
|
|
91
|
+
</ul>
|
|
92
|
+
</li>
|
|
93
|
+
</ul>
|
|
94
|
+
<div>
|
|
95
|
+
<p>Text...</p>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
~~~ html
|
|
101
|
+
<div class="sheet">
|
|
102
|
+
<ul class="nav nav-tabs">
|
|
103
|
+
<li><a href="#">Tab 1</a></li>
|
|
104
|
+
<li class="active"><a href="#">Tab 2</a></li>
|
|
105
|
+
<li><a href="#">Tab 3</a></li>
|
|
106
|
+
<li class="dropdown pull-right">
|
|
107
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
108
|
+
More <span class="caret"></span>
|
|
109
|
+
</a>
|
|
110
|
+
<ul class="dropdown-menu">
|
|
111
|
+
<li><a href="#">Tab 4</a></li>
|
|
112
|
+
<li><a href="#">Tab 5</a></li>
|
|
113
|
+
</ul>
|
|
114
|
+
</li>
|
|
115
|
+
</ul>
|
|
116
|
+
<div>
|
|
117
|
+
<p>Text...</p>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
~~~
|
|
121
|
+
|
|
122
|
+
<div class="example">
|
|
123
|
+
<div class="sheet-header">
|
|
124
|
+
<h3 id="sheet-example-with-auto-stackable-tabs">
|
|
125
|
+
Example with auto-stackable tabs
|
|
126
|
+
</h3>
|
|
127
|
+
</div>
|
|
128
|
+
|
|
129
|
+
<div class="bs-callout bs-callout-danger">
|
|
130
|
+
<h4>Plugin dependency</h4>
|
|
131
|
+
<p>
|
|
132
|
+
This component requires customized bootstrapStackable JS plugin provided by the bootstrap-bookingsync-sass gem.
|
|
133
|
+
</p>
|
|
134
|
+
</div>
|
|
135
|
+
|
|
136
|
+
<div class="bs-example bs-sheet"
|
|
137
|
+
data-example-id="sheet-example-with-auto-stackable-tabs">
|
|
138
|
+
<div class="sheet">
|
|
139
|
+
<ul class="nav nav-tabs" data-toggle="stackable"
|
|
140
|
+
data-target=".stackable-dropdown">
|
|
141
|
+
<li><a href="#">Tab 1</a></li>
|
|
142
|
+
<li class="active"><a href="#">Tab 2</a></li>
|
|
143
|
+
<li><a href="#">Tab 3</a></li>
|
|
144
|
+
<li><a href="#">Tab 4</a></li>
|
|
145
|
+
<li><a href="#">Tab 5</a></li>
|
|
146
|
+
<li><a href="#">Tab 6</a></li>
|
|
147
|
+
<li><a href="#">Tab 7</a></li>
|
|
148
|
+
<li><a href="#">Tab 8</a></li>
|
|
149
|
+
<li><a href="#">Tab 9</a></li>
|
|
150
|
+
<li><a href="#">Tab 10</a></li>
|
|
151
|
+
<li><a href="#">Tab 11</a></li>
|
|
152
|
+
<li><a href="#">Tab 12</a></li>
|
|
153
|
+
<li><a href="#">Tab Last</a></li>
|
|
154
|
+
<li class="dropdown pull-right stackable-dropdown">
|
|
155
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
156
|
+
More <span class="caret"></span>
|
|
157
|
+
</a>
|
|
158
|
+
<ul class="dropdown-menu">
|
|
159
|
+
</ul>
|
|
160
|
+
</li>
|
|
161
|
+
</ul>
|
|
162
|
+
<div>
|
|
163
|
+
<p>Text...</p>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
|
|
167
|
+
<div class="sheet">
|
|
168
|
+
<ul class="nav nav-tabs" data-toggle="stackable"
|
|
169
|
+
data-target=".stackable-dropdown">
|
|
170
|
+
<li><a href="#">Tab 1</a></li>
|
|
171
|
+
<li class="active"><a href="#">Tab 2</a></li>
|
|
172
|
+
<li><a href="#">Tab 3</a></li>
|
|
173
|
+
<li><a href="#">Tab 4</a></li>
|
|
174
|
+
<li><a href="#">Tab 5</a></li>
|
|
175
|
+
<li><a href="#">Tab 6</a></li>
|
|
176
|
+
<li><a href="#">Tab 7</a></li>
|
|
177
|
+
<li><a href="#">Tab 8</a></li>
|
|
178
|
+
<li><a href="#">Tab Last</a></li>
|
|
179
|
+
<li class="dropdown pull-right stackable-dropdown">
|
|
180
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
181
|
+
More <span class="caret"></span>
|
|
182
|
+
</a>
|
|
183
|
+
<ul class="dropdown-menu">
|
|
184
|
+
</ul>
|
|
185
|
+
</li>
|
|
186
|
+
</ul>
|
|
187
|
+
<div>
|
|
188
|
+
<p>Text...</p>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
|
|
192
|
+
<div class="sheet">
|
|
193
|
+
<ul class="nav nav-tabs" data-toggle="stackable"
|
|
194
|
+
data-target=".stackable-dropdown">
|
|
195
|
+
<li><a href="#">Tab 1</a></li>
|
|
196
|
+
<li class="active"><a href="#">Tab 2</a></li>
|
|
197
|
+
<li><a href="#">Tab Last</a></li>
|
|
198
|
+
<li class="dropdown pull-right stackable-dropdown">
|
|
199
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
200
|
+
More <span class="caret"></span>
|
|
201
|
+
</a>
|
|
202
|
+
<ul class="dropdown-menu">
|
|
203
|
+
</ul>
|
|
204
|
+
</li>
|
|
205
|
+
</ul>
|
|
206
|
+
<div>
|
|
207
|
+
<p>Text...</p>
|
|
208
|
+
</div>
|
|
209
|
+
</div>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
~~~ html
|
|
213
|
+
<div class="sheet">
|
|
214
|
+
<ul class="nav nav-tabs" data-toggle="stackable"
|
|
215
|
+
data-target=".stackable-dropdown">
|
|
216
|
+
<li><a href="#">Tab 1</a></li>
|
|
217
|
+
<li class="active"><a href="#">Tab 2</a></li>
|
|
218
|
+
<li><a href="#">Tab 3</a></li>
|
|
219
|
+
<li><a href="#">Tab 4</a></li>
|
|
220
|
+
<li><a href="#">Tab 5</a></li>
|
|
221
|
+
<li><a href="#">Tab 6</a></li>
|
|
222
|
+
<li><a href="#">Tab 7</a></li>
|
|
223
|
+
<li><a href="#">Tab 8</a></li>
|
|
224
|
+
<li><a href="#">Tab 9</a></li>
|
|
225
|
+
<li><a href="#">Tab 10</a></li>
|
|
226
|
+
<li><a href="#">Tab 11</a></li>
|
|
227
|
+
<li><a href="#">Tab 12</a></li>
|
|
228
|
+
<li><a href="#">Tab Last</a></li>
|
|
229
|
+
<li class="dropdown pull-right stackable-dropdown">
|
|
230
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
231
|
+
More <span class="caret"></span>
|
|
232
|
+
</a>
|
|
233
|
+
<ul class="dropdown-menu">
|
|
234
|
+
</ul>
|
|
235
|
+
</li>
|
|
236
|
+
</ul>
|
|
237
|
+
<div>
|
|
238
|
+
<p>Text...</p>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
~~~
|
|
242
|
+
|
|
243
|
+
<div class="example">
|
|
244
|
+
<div class="sheet-header">
|
|
245
|
+
<h3 id="sheet-example-with-nested-tabs">Example with nested tabs</h3>
|
|
246
|
+
</div>
|
|
247
|
+
<div class="bs-example bs-sheet"
|
|
248
|
+
data-example-id="sheet-example-with-nested-tab">
|
|
249
|
+
<div class="sheet">
|
|
250
|
+
<ul class="nav nav-tabs">
|
|
251
|
+
<li class="active"><a href="#">Tab 1</a></li>
|
|
252
|
+
<li><a href="#">Tab 2</a></li>
|
|
253
|
+
<li><a href="#">Tab 3</a></li>
|
|
254
|
+
</ul>
|
|
255
|
+
<div>
|
|
256
|
+
<p>Text...</p>
|
|
257
|
+
<ul class="nav nav-tabs">
|
|
258
|
+
<li class="active"><a href="#">Tab 1</a></li>
|
|
259
|
+
<li><a href="#">Tab 2</a></li>
|
|
260
|
+
<li><a href="#">Tab 3</a></li>
|
|
261
|
+
</ul>
|
|
262
|
+
<div>
|
|
263
|
+
<p>Text...</p>
|
|
264
|
+
</div>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
</div>
|
|
269
|
+
~~~ html
|
|
270
|
+
<div class="sheet">
|
|
271
|
+
<ul class="nav nav-tabs">
|
|
272
|
+
<li class="active"><a href="#">Tab 1</a></li>
|
|
273
|
+
<li><a href="#">Tab 2</a></li>
|
|
274
|
+
<li><a href="#">Tab 3</a></li>
|
|
275
|
+
</ul>
|
|
276
|
+
<div>
|
|
277
|
+
<p>Text...</p>
|
|
278
|
+
<ul class="nav nav-tabs">
|
|
279
|
+
<li class="active"><a href="#">Tab 1</a></li>
|
|
280
|
+
<li><a href="#">Tab 2</a></li>
|
|
281
|
+
<li><a href="#">Tab 3</a></li>
|
|
282
|
+
</ul>
|
|
283
|
+
<div>
|
|
284
|
+
<p>Text...</p>
|
|
285
|
+
</div>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
~~~
|