bootstrap-bookingsync-sass 1.0.0.beta1 → 1.0.0.beta2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +6 -0
- data/assets/javascripts/bookingsync/menu.js +14 -0
- data/assets/javascripts/bookingsync/toggle.js +1 -0
- data/assets/stylesheets/bookingsync/_layout.scss +52 -5
- data/assets/stylesheets/bookingsync/_menu.scss +1 -1
- data/docs/Rakefile +1 -1
- data/docs/content/assets/javascripts/application.js.coffee +21 -0
- data/docs/content/assets/stylesheets/_base.scss +10 -4
- data/docs/content/assets/stylesheets/_override.scss +13 -1
- data/docs/content/components/menu.md +2 -1
- data/docs/content/compositions/_navbar.html +6 -0
- data/docs/content/compositions/compositions.md +128 -181
- data/docs/content/embed/annotated_section.html +49 -0
- data/docs/content/embed/app_admin.html +129 -0
- data/docs/content/embed/app_admin_content.html +70 -0
- data/docs/content/embed/core_admin.html +198 -0
- data/docs/content/embed/fullscreen_modal.html +21 -0
- data/docs/content/embed/nested_section.html +35 -0
- data/docs/content/embed/section.html +29 -0
- data/docs/content/embed/tabulated_content.html +42 -0
- data/docs/content/embed/two_columns.html +38 -0
- data/docs/content/index.html +2 -2
- data/lib/bootstrap/bookingsync/version.rb +1 -1
- metadata +11 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 72f18858785f11fad466435fa37fe9e7efb3ec66
|
|
4
|
+
data.tar.gz: 75c41838c295dfd9a79906edbe8810c0e013d1fe
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 7119d51263cc5d66677c00e93a1a84d86fa456f4267ae836f95d9a7baffa2f2ee6cc9f5a37196db797dc7e43377c26129e1bc7bad1507edf4b0b59cca820e599
|
|
7
|
+
data.tar.gz: 48720690d681f7595c2350d84a0ab06347b0a1bf44f6876f6e5c37eeb6befaf0dee0ba75e9cd1d72ad8c6935c7702110e6183b93bcdcd3834a98dac30b97f9b3
|
data/CHANGELOG.md
CHANGED
|
@@ -26,4 +26,18 @@
|
|
|
26
26
|
element.removeClass('menu-hovered');
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
|
+
|
|
30
|
+
$(document).on('click', '.navbar-toggle.menu-toggle', function(event) {
|
|
31
|
+
parent.postMessage("bookingsync:menu:toggle", "*");
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
$(window).load(function() {
|
|
35
|
+
if ($('iframe.iframe-fullscreen').length > 0) {
|
|
36
|
+
window.addEventListener("message", function(event) {
|
|
37
|
+
if (event.data === "bookingsync:menu:toggle") {
|
|
38
|
+
$('body').toggleClass("menu-open");
|
|
39
|
+
}
|
|
40
|
+
}, false);
|
|
41
|
+
}
|
|
42
|
+
});
|
|
29
43
|
}(jQuery);
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
|
|
6
6
|
body {
|
|
7
7
|
min-height: 100vh;
|
|
8
|
-
padding-top: $navbar-height + 1; // for the navbar-fixed-top border
|
|
9
8
|
}
|
|
10
9
|
|
|
11
10
|
.navbar.navbar-fixed-top {
|
|
@@ -55,11 +54,59 @@ body {
|
|
|
55
54
|
|
|
56
55
|
.main-content {
|
|
57
56
|
overflow: auto;
|
|
57
|
+
padding-top: $navbar-height + 1; // for the navbar-fixed-top border
|
|
58
|
+
|
|
59
|
+
& > .row {
|
|
60
|
+
padding-top: $sheet-margin;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.navbar-toggle.menu-toggle {
|
|
65
|
+
float: left;
|
|
66
|
+
margin-left: $navbar-padding-horizontal;
|
|
67
|
+
margin-right: 0;
|
|
58
68
|
}
|
|
59
69
|
|
|
60
|
-
.
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
70
|
+
.iframe-fullscreen {
|
|
71
|
+
width: 100%;
|
|
72
|
+
height: 100vh;
|
|
73
|
+
display: block;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
@media (max-width: $grid-float-breakpoint) {
|
|
77
|
+
body.menu-open {
|
|
78
|
+
overflow: hidden;
|
|
79
|
+
max-height: 100vh;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
// .menu, // Already set
|
|
83
|
+
.menu-submenu,
|
|
84
|
+
.sided-content {
|
|
85
|
+
transition: transform 0.2s cubic-bezier(.4, 0, .2, 1);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.menu,
|
|
89
|
+
.menu-submenu {
|
|
90
|
+
transform: translate3d(-$menu-width, 0, 0);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
body.menu-open {
|
|
94
|
+
.menu,
|
|
95
|
+
.menu-submenu {
|
|
96
|
+
transform: translate3d(0, 0, 0);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.sided-content {
|
|
100
|
+
transform: translate3d($menu-width, 0, 0);
|
|
101
|
+
}
|
|
102
|
+
}
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
@media (min-width: $grid-float-breakpoint) {
|
|
106
|
+
.sided-content {
|
|
107
|
+
& > .navbar,
|
|
108
|
+
& > .main-content {
|
|
109
|
+
margin-left: $menu-width;
|
|
110
|
+
}
|
|
64
111
|
}
|
|
65
112
|
}
|
data/docs/Rakefile
CHANGED
|
@@ -6,3 +6,24 @@
|
|
|
6
6
|
|
|
7
7
|
$ ->
|
|
8
8
|
$(".chosen").chosen()
|
|
9
|
+
|
|
10
|
+
responsiveButtons = '<div class="example-responsive-nav">
|
|
11
|
+
<div class="btn-group" role="group" aria-label="screensize">
|
|
12
|
+
<button type="button" class="btn btn-secondary"
|
|
13
|
+
data-value="bs-example-iframe-container-mobile">Mobile</button>
|
|
14
|
+
<button type="button" class="btn btn-secondary"
|
|
15
|
+
data-value="bs-example-iframe-container-tablet">Tablet</button>
|
|
16
|
+
<button type="button" class="btn btn-secondary"
|
|
17
|
+
data-value="bs-example-iframe-container-desktop">Desktop</button>
|
|
18
|
+
</div>
|
|
19
|
+
</div>'
|
|
20
|
+
|
|
21
|
+
for example in $(".example-responsive")
|
|
22
|
+
$(example).find(".sheet-header").append(responsiveButtons)
|
|
23
|
+
|
|
24
|
+
$(document).on 'click', '.example-responsive-nav button', (event) ->
|
|
25
|
+
button = $(this)
|
|
26
|
+
example = button.parents('.example').find('.bs-example')
|
|
27
|
+
example.removeClass('bs-example-iframe-container-mobile bs-example-iframe-container-tablet
|
|
28
|
+
bs-example-iframe-container-desktop')
|
|
29
|
+
example.addClass(button.data('value'))
|
|
@@ -1,7 +1,3 @@
|
|
|
1
|
-
.main-content {
|
|
2
|
-
padding-top: 15px;
|
|
3
|
-
}
|
|
4
|
-
|
|
5
1
|
.reference-body > h2,
|
|
6
2
|
.reference-body > h3,
|
|
7
3
|
.reference-body > h4,
|
|
@@ -79,3 +75,13 @@
|
|
|
79
75
|
.color-gray-lightest {
|
|
80
76
|
background-color: $gray-lightest;
|
|
81
77
|
}
|
|
78
|
+
|
|
79
|
+
.example-responsive {
|
|
80
|
+
position: relative;
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.example-responsive-nav {
|
|
84
|
+
position: absolute;
|
|
85
|
+
right: 15px;
|
|
86
|
+
top: 8px;
|
|
87
|
+
}
|
|
@@ -56,9 +56,21 @@
|
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
+
.bs-example-iframe-container-mobile {
|
|
60
|
+
margin: 0 auto;
|
|
61
|
+
width: 320px;
|
|
62
|
+
height: 568px;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.bs-example-iframe-container-tablet {
|
|
66
|
+
margin: 0 auto;
|
|
67
|
+
width: 768px;
|
|
68
|
+
height: 1024px;
|
|
69
|
+
}
|
|
70
|
+
|
|
59
71
|
.bs-example-iframe-container-desktop {
|
|
60
72
|
width: 100%;
|
|
61
|
-
height:
|
|
73
|
+
height: 568px;
|
|
62
74
|
}
|
|
63
75
|
|
|
64
76
|
.bs-example-iframe {
|
|
@@ -10,7 +10,8 @@
|
|
|
10
10
|
</p>
|
|
11
11
|
</div>
|
|
12
12
|
|
|
13
|
-
<div class="bs-example bs-sheet
|
|
13
|
+
<div class="bs-example bs-sheet bs-example-composition-body"
|
|
14
|
+
data-example-id="menu">
|
|
14
15
|
<div class="bs-example-iframe-container-desktop">
|
|
15
16
|
<iframe class="bs-example-iframe" src="/embed/menu/index.html"
|
|
16
17
|
frameborder="0"></iframe>
|
|
@@ -1,8 +1,14 @@
|
|
|
1
1
|
<ul class="list-group list-unstyled">
|
|
2
|
+
<li><%= link_to("Core Admin", "#core-admin",
|
|
3
|
+
class: "list-group-item") %></li>
|
|
4
|
+
<li><%= link_to("App Admin", "#app-admin",
|
|
5
|
+
class: "list-group-item") %></li>
|
|
2
6
|
<li><%= link_to("Section", "#section",
|
|
3
7
|
class: "list-group-item") %></li>
|
|
4
8
|
<li><%= link_to("Nested section", "#nested-section",
|
|
5
9
|
class: "list-group-item") %></li>
|
|
10
|
+
<li><%= link_to("Two columns", "#two-columns",
|
|
11
|
+
class: "list-group-item") %></li>
|
|
6
12
|
<li><%= link_to("Annotated section", "#annotated-section",
|
|
7
13
|
class: "list-group-item") %></li>
|
|
8
14
|
<li><%= link_to("Tabulated content", "#tabulated-content",
|
|
@@ -1,38 +1,108 @@
|
|
|
1
|
-
<div class="example">
|
|
1
|
+
<div class="example example-responsive">
|
|
2
2
|
<div class="sheet-header">
|
|
3
|
-
<h3 id="
|
|
3
|
+
<h3 id="core-admin">Core Admin</h3>
|
|
4
4
|
</div>
|
|
5
5
|
|
|
6
|
-
<div class="bs-example bs-sheet bs-example-composition-body
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
<
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
6
|
+
<div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
|
|
7
|
+
data-example-id="core-admin">
|
|
8
|
+
<iframe class="bs-example-iframe" src="/embed/core_admin/index.html"
|
|
9
|
+
frameborder="0"></iframe>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
~~~ html
|
|
13
|
+
<nav id="sidebar" class="menu menu-fixed flex-col">
|
|
14
|
+
...
|
|
15
|
+
</nav>
|
|
16
|
+
<div class="sided-content">
|
|
17
|
+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
18
|
+
<div class="container-fluid">
|
|
19
|
+
<div class="navbar-header">
|
|
20
|
+
<button type="button" class="navbar-toggle menu-toggle" data-toggle="toggle"
|
|
21
|
+
data-target="body" data-value="menu-open">
|
|
22
|
+
<span class="sr-only">Toggle Navigation</span>
|
|
23
|
+
<span class="icon-bar"></span>
|
|
24
|
+
<span class="icon-bar"></span>
|
|
25
|
+
<span class="icon-bar"></span>
|
|
26
|
+
</button>
|
|
27
|
+
<button type="button" class="navbar-toggle navbar-toggle-context"
|
|
28
|
+
data-toggle="collapse" data-target=".navbar-top-collapse">
|
|
29
|
+
<span class="sr-only">Toggle Navigation</span>
|
|
30
|
+
<span class="icon-bar"></span>
|
|
31
|
+
<span class="icon-bar"></span>
|
|
32
|
+
<span class="icon-bar"></span>
|
|
33
|
+
</button>
|
|
34
|
+
<div class="navbar-brand-container">
|
|
35
|
+
<span class="navbar-brand">
|
|
36
|
+
<h1><i class="icon-rental"></i> Rentals</h1>
|
|
37
|
+
</span>
|
|
28
38
|
</div>
|
|
29
39
|
</div>
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
40
|
+
<div class="collapse navbar-collapse navbar-top-collapse">
|
|
41
|
+
<div class="navbar-right">
|
|
42
|
+
<button class="btn btn-secondary navbar-btn" type="button">Button</button>
|
|
43
|
+
<button class="btn btn-primary navbar-btn" type="button">Call to action</button>
|
|
44
|
+
</div>
|
|
34
45
|
</div>
|
|
35
|
-
</
|
|
46
|
+
</div>
|
|
47
|
+
</nav>
|
|
48
|
+
<section class="main-content">
|
|
49
|
+
<div class="sheet">
|
|
50
|
+
<p>Body</p>
|
|
51
|
+
</div>
|
|
52
|
+
</section>
|
|
53
|
+
</div>
|
|
54
|
+
~~~
|
|
55
|
+
|
|
56
|
+
<div class="example example-responsive">
|
|
57
|
+
<div class="sheet-header">
|
|
58
|
+
<h3 id="app-admin">App Admin</h3>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<div class="bs-callout bs-callout-info">
|
|
62
|
+
<h4>Information</h4>
|
|
63
|
+
<p>
|
|
64
|
+
Using the <code>menu</code> plugin, the iframe will automatically post a message to the parent iframe when clicking the <code>.navbar-toggle.menu-toggle</code> button.
|
|
65
|
+
The parent iframe using this plugin will automatically monitor this message to toggle the menu on mobile devices.
|
|
66
|
+
</p>
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
|
|
70
|
+
data-example-id="app-admin">
|
|
71
|
+
<iframe class="bs-example-iframe" src="/embed/app_admin/index.html"
|
|
72
|
+
frameborder="0"></iframe>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
~~~ html
|
|
76
|
+
<nav id="sidebar" class="menu menu-fixed flex-col">
|
|
77
|
+
...
|
|
78
|
+
</nav>
|
|
79
|
+
<iframe class="iframe-fullscreen" src="/embed/app_admin_content/index.html" frameborder="0"></iframe>
|
|
80
|
+
|
|
81
|
+
<!-- iFrame content -->
|
|
82
|
+
<nav class="menu menu-fixed flex-col menu-submenu">
|
|
83
|
+
...
|
|
84
|
+
</nav>
|
|
85
|
+
<div class="sided-content">
|
|
86
|
+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
87
|
+
...
|
|
88
|
+
</nav>
|
|
89
|
+
<section class="main-content">
|
|
90
|
+
<div class="sheet">
|
|
91
|
+
<p>Body</p>
|
|
92
|
+
</div>
|
|
93
|
+
</section>
|
|
94
|
+
</div>
|
|
95
|
+
~~~
|
|
96
|
+
|
|
97
|
+
<div class="example">
|
|
98
|
+
<div class="sheet-header">
|
|
99
|
+
<h3 id="section">Section</h3>
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
|
|
103
|
+
data-example-id="section">
|
|
104
|
+
<iframe class="bs-example-iframe" src="/embed/section/index.html"
|
|
105
|
+
frameborder="0"></iframe>
|
|
36
106
|
</div>
|
|
37
107
|
</div>
|
|
38
108
|
~~~ html
|
|
@@ -72,42 +142,10 @@
|
|
|
72
142
|
<h3 id="nested-section">Nested Section</h3>
|
|
73
143
|
</div>
|
|
74
144
|
|
|
75
|
-
<div class="bs-example bs-sheet bs-example-composition-body
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
<button type="button" class="navbar-toggle navbar-toggle-context"
|
|
80
|
-
data-toggle="collapse" data-target=".navbar-top-collapse">
|
|
81
|
-
<span class="sr-only">Toggle Navigation</span>
|
|
82
|
-
<span class="icon-bar"></span>
|
|
83
|
-
<span class="icon-bar"></span>
|
|
84
|
-
<span class="icon-bar"></span>
|
|
85
|
-
</button>
|
|
86
|
-
<div class="navbar-brand-container">
|
|
87
|
-
<span class="navbar-brand">
|
|
88
|
-
<h1>
|
|
89
|
-
<span class="navbar-breadcrumb">
|
|
90
|
-
<i class="icon-calendar"></i> <a href="#">Bookings</a>
|
|
91
|
-
/
|
|
92
|
-
</span>
|
|
93
|
-
Planning
|
|
94
|
-
</h1>
|
|
95
|
-
</span>
|
|
96
|
-
</div>
|
|
97
|
-
</div>
|
|
98
|
-
<div class="collapse navbar-collapse navbar-top-collapse">
|
|
99
|
-
<div class="navbar-right">
|
|
100
|
-
<button class="btn btn-secondary navbar-btn" type="button">Button</button>
|
|
101
|
-
<button class="btn btn-primary navbar-btn" type="button">Call to action</button>
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
104
|
-
</div>
|
|
105
|
-
</nav>
|
|
106
|
-
<section class="main-content">
|
|
107
|
-
<div class="sheet">
|
|
108
|
-
<p>Body</p>
|
|
109
|
-
</div>
|
|
110
|
-
</section>
|
|
145
|
+
<div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
|
|
146
|
+
data-example-id="nested-section">
|
|
147
|
+
<iframe class="bs-example-iframe" src="/embed/nested_section/index.html"
|
|
148
|
+
frameborder="0"></iframe>
|
|
111
149
|
</div>
|
|
112
150
|
</div>
|
|
113
151
|
~~~ html
|
|
@@ -148,61 +186,27 @@
|
|
|
148
186
|
</section>
|
|
149
187
|
~~~
|
|
150
188
|
|
|
151
|
-
<div class="example">
|
|
189
|
+
<div class="example example-responsive">
|
|
190
|
+
<div class="sheet-header">
|
|
191
|
+
<h3 id="two-columns">Two columns</h3>
|
|
192
|
+
</div>
|
|
193
|
+
|
|
194
|
+
<div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
|
|
195
|
+
data-example-id="two-columns">
|
|
196
|
+
<iframe class="bs-example-iframe" src="/embed/two_columns/index.html"
|
|
197
|
+
frameborder="0"></iframe>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
|
|
201
|
+
<div class="example example-responsive">
|
|
152
202
|
<div class="sheet-header">
|
|
153
203
|
<h3 id="annotated-section">Annotated Section</h3>
|
|
154
204
|
</div>
|
|
155
205
|
|
|
156
|
-
<div class="bs-example bs-sheet bs-example-composition-body
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
<button type="button" class="navbar-toggle navbar-toggle-context"
|
|
161
|
-
data-toggle="collapse" data-target=".navbar-top-collapse">
|
|
162
|
-
<span class="sr-only">Toggle Navigation</span>
|
|
163
|
-
<span class="icon-bar"></span>
|
|
164
|
-
<span class="icon-bar"></span>
|
|
165
|
-
<span class="icon-bar"></span>
|
|
166
|
-
</button>
|
|
167
|
-
<div class="navbar-brand-container">
|
|
168
|
-
<span class="navbar-brand">
|
|
169
|
-
<h1><i class="icon-reviews"></i> Section Name</h1>
|
|
170
|
-
</span>
|
|
171
|
-
</div>
|
|
172
|
-
</div>
|
|
173
|
-
<div class="collapse navbar-collapse navbar-top-collapse">
|
|
174
|
-
<div class="navbar-right">
|
|
175
|
-
<button class="btn btn-secondary navbar-btn" type="button">Button</button>
|
|
176
|
-
<button class="btn btn-primary navbar-btn" type="button">Call to action</button>
|
|
177
|
-
</div>
|
|
178
|
-
</div>
|
|
179
|
-
</div>
|
|
180
|
-
</nav>
|
|
181
|
-
<section class="main-content">
|
|
182
|
-
<section class="annotated-section">
|
|
183
|
-
<header class="annotated-section-annotation">
|
|
184
|
-
<h2 class="annotated-section-title">Section Name</h2>
|
|
185
|
-
<p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
|
186
|
-
<p><a href="#">More Information</a></p>
|
|
187
|
-
</header>
|
|
188
|
-
<div class="annotated-section-content">
|
|
189
|
-
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit et tellus eget elementum. Praesent in cursus massa, nec laoreet elit. Nullam eleifend consectetur ligula et dictum. Praesent dignissim sodales nulla laoreet vehicula. Quisque at convallis lacus, at ornare lectus. Cras dapibus placerat sem, iaculis tincidunt ligula sodales non. Suspendisse dolor augue, ultricies condimentum pharetra sed, suscipit sit amet magna. In quis convallis sem. Sed cursus placerat tellus vitae tincidunt. Fusce molestie nisi et nisl pulvinar pulvinar. Nam id mauris lectus. Vivamus nisl neque, tempor nec efficitur quis, tincidunt quis justo. Curabitur pharetra auctor augue a consectetur. Integer lorem elit, fermentum non nulla quis, lobortis tincidunt ex.</p>
|
|
190
|
-
<p>Aenean consectetur in metus sit amet suscipit. Phasellus faucibus ornare tortor sit amet vestibulum. Nulla felis nisl, vestibulum vitae interdum vel, venenatis vitae lacus. Nullam tempus ante ut nibh pharetra, in consequat justo iaculis. Curabitur viverra, orci eu hendrerit malesuada, sapien ex varius sapien, id laoreet diam magna et mi. Fusce finibus justo quis egestas fermentum. Aliquam rhoncus orci libero, ut faucibus felis egestas et. Proin vitae eros lacus. Nulla facilisi. Maecenas ut lacinia justo. Nulla at erat non orci gravida convallis. Aliquam congue leo odio, eu sagittis mauris hendrerit sed. Duis eros augue, viverra ac justo ut, pulvinar venenatis urna. Cras auctor fermentum massa, mattis fringilla neque vehicula et. Ut vitae est a velit accumsan tempus. Duis vel congue risus.</p>
|
|
191
|
-
</div>
|
|
192
|
-
</section>
|
|
193
|
-
</section>
|
|
194
|
-
<section class="main-content">
|
|
195
|
-
<section class="annotated-section">
|
|
196
|
-
<header class="annotated-section-annotation">
|
|
197
|
-
<h2 class="annotated-section-title">Section Name</h2>
|
|
198
|
-
<p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
|
199
|
-
<p><a href="#">More Information</a></p>
|
|
200
|
-
</header>
|
|
201
|
-
<div class="annotated-section-content">
|
|
202
|
-
<p>Body</p>
|
|
203
|
-
</div>
|
|
204
|
-
</section>
|
|
205
|
-
</section>
|
|
206
|
+
<div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
|
|
207
|
+
data-example-id="annotated-section">
|
|
208
|
+
<iframe class="bs-example-iframe" src="/embed/annotated_section/index.html"
|
|
209
|
+
frameborder="0"></iframe>
|
|
206
210
|
</div>
|
|
207
211
|
</div>
|
|
208
212
|
~~~ html
|
|
@@ -238,49 +242,10 @@
|
|
|
238
242
|
<h3 id="tabulated-content">Tabulated content</h3>
|
|
239
243
|
</div>
|
|
240
244
|
|
|
241
|
-
<div class="bs-example bs-sheet bs-example-composition-body
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
<button type="button" class="navbar-toggle navbar-toggle-context"
|
|
246
|
-
data-toggle="collapse" data-target=".navbar-top-collapse">
|
|
247
|
-
<span class="sr-only">Toggle Navigation</span>
|
|
248
|
-
<span class="icon-bar"></span>
|
|
249
|
-
<span class="icon-bar"></span>
|
|
250
|
-
<span class="icon-bar"></span>
|
|
251
|
-
</button>
|
|
252
|
-
<div class="navbar-brand-container">
|
|
253
|
-
<span class="navbar-brand">
|
|
254
|
-
<h1><i class="icon-reviews"></i> Section Name</h1>
|
|
255
|
-
</span>
|
|
256
|
-
</div>
|
|
257
|
-
</div>
|
|
258
|
-
<div class="collapse navbar-collapse navbar-top-collapse">
|
|
259
|
-
<div class="navbar-right">
|
|
260
|
-
<button class="btn btn-secondary navbar-btn" type="button">Button</button>
|
|
261
|
-
<button class="btn btn-primary navbar-btn" type="button">Call to action</button>
|
|
262
|
-
</div>
|
|
263
|
-
</div>
|
|
264
|
-
</div>
|
|
265
|
-
</nav>
|
|
266
|
-
<section class="main-content">
|
|
267
|
-
<div class="sheet">
|
|
268
|
-
<ul class="nav nav-tabs" data-toggle="stackable" data-target=".stackable-dropdown">
|
|
269
|
-
<li class="active"><a href="#">Tab 1</a></li>
|
|
270
|
-
<li><a href="#">Tab 2</a></li>
|
|
271
|
-
<li class="dropdown pull-right stackable-dropdown">
|
|
272
|
-
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
273
|
-
More <span class="caret"></span>
|
|
274
|
-
</a>
|
|
275
|
-
<ul class="dropdown-menu">
|
|
276
|
-
</ul>
|
|
277
|
-
</li>
|
|
278
|
-
</ul>
|
|
279
|
-
<div>
|
|
280
|
-
<p>Text...</p>
|
|
281
|
-
</div>
|
|
282
|
-
</div>
|
|
283
|
-
</section>
|
|
245
|
+
<div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
|
|
246
|
+
data-example-id="tabulated-content">
|
|
247
|
+
<iframe class="bs-example-iframe" src="/embed/tabulated_content/index.html"
|
|
248
|
+
frameborder="0"></iframe>
|
|
284
249
|
</div>
|
|
285
250
|
</div>
|
|
286
251
|
~~~ html
|
|
@@ -312,28 +277,10 @@
|
|
|
312
277
|
<h3 id="fullscreen-modal">Fullscreen modal</h3>
|
|
313
278
|
</div>
|
|
314
279
|
|
|
315
|
-
<div class="bs-example bs-sheet bs-example-composition-body
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
<div class="navbar-brand-container">
|
|
320
|
-
<span class="navbar-brand">
|
|
321
|
-
<h1><i class="icon-reviews"></i> Section Name</h1>
|
|
322
|
-
</span>
|
|
323
|
-
</div>
|
|
324
|
-
</div>
|
|
325
|
-
<div class="navbar-right">
|
|
326
|
-
<button class="btn btn-sm btn-secondary-inverse btn-round navbar-btn" type="button">
|
|
327
|
-
<span>×</span>
|
|
328
|
-
</button>
|
|
329
|
-
</div>
|
|
330
|
-
</div>
|
|
331
|
-
</nav>
|
|
332
|
-
<section class="main-content">
|
|
333
|
-
<div class="sheet sheet-fullscreen">
|
|
334
|
-
<p>Text...</p>
|
|
335
|
-
</div>
|
|
336
|
-
</section>
|
|
280
|
+
<div class="bs-example bs-sheet bs-example-composition-body bs-example-iframe-container-desktop"
|
|
281
|
+
data-example-id="fullscreen-modal">
|
|
282
|
+
<iframe class="bs-example-iframe" src="/embed/fullscreen_modal/index.html"
|
|
283
|
+
frameborder="0"></iframe>
|
|
337
284
|
</div>
|
|
338
285
|
</div>
|
|
339
286
|
~~~ html
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
2
|
+
<div class="container-fluid">
|
|
3
|
+
<div class="navbar-header">
|
|
4
|
+
<button type="button" class="navbar-toggle navbar-toggle-context"
|
|
5
|
+
data-toggle="collapse" data-target=".navbar-top-collapse">
|
|
6
|
+
<span class="sr-only">Toggle Navigation</span>
|
|
7
|
+
<span class="icon-bar"></span>
|
|
8
|
+
<span class="icon-bar"></span>
|
|
9
|
+
<span class="icon-bar"></span>
|
|
10
|
+
</button>
|
|
11
|
+
<div class="navbar-brand-container">
|
|
12
|
+
<span class="navbar-brand">
|
|
13
|
+
<h1><i class="icon-reviews"></i> Section Name</h1>
|
|
14
|
+
</span>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="collapse navbar-collapse navbar-top-collapse">
|
|
18
|
+
<div class="navbar-right">
|
|
19
|
+
<button class="btn btn-secondary navbar-btn" type="button">Button</button>
|
|
20
|
+
<button class="btn btn-primary navbar-btn" type="button">Call to action</button>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</nav>
|
|
25
|
+
<section class="main-content">
|
|
26
|
+
<section class="annotated-section">
|
|
27
|
+
<header class="annotated-section-annotation">
|
|
28
|
+
<h2 class="annotated-section-title">Section Name</h2>
|
|
29
|
+
<p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
|
30
|
+
<p><a href="#">More Information</a></p>
|
|
31
|
+
</header>
|
|
32
|
+
<div class="annotated-section-content">
|
|
33
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit et tellus eget elementum. Praesent in cursus massa, nec laoreet elit. Nullam eleifend consectetur ligula et dictum. Praesent dignissim sodales nulla laoreet vehicula. Quisque at convallis lacus, at ornare lectus. Cras dapibus placerat sem, iaculis tincidunt ligula sodales non. Suspendisse dolor augue, ultricies condimentum pharetra sed, suscipit sit amet magna. In quis convallis sem. Sed cursus placerat tellus vitae tincidunt. Fusce molestie nisi et nisl pulvinar pulvinar. Nam id mauris lectus. Vivamus nisl neque, tempor nec efficitur quis, tincidunt quis justo. Curabitur pharetra auctor augue a consectetur. Integer lorem elit, fermentum non nulla quis, lobortis tincidunt ex.</p>
|
|
34
|
+
<p>Aenean consectetur in metus sit amet suscipit. Phasellus faucibus ornare tortor sit amet vestibulum. Nulla felis nisl, vestibulum vitae interdum vel, venenatis vitae lacus. Nullam tempus ante ut nibh pharetra, in consequat justo iaculis. Curabitur viverra, orci eu hendrerit malesuada, sapien ex varius sapien, id laoreet diam magna et mi. Fusce finibus justo quis egestas fermentum. Aliquam rhoncus orci libero, ut faucibus felis egestas et. Proin vitae eros lacus. Nulla facilisi. Maecenas ut lacinia justo. Nulla at erat non orci gravida convallis. Aliquam congue leo odio, eu sagittis mauris hendrerit sed. Duis eros augue, viverra ac justo ut, pulvinar venenatis urna. Cras auctor fermentum massa, mattis fringilla neque vehicula et. Ut vitae est a velit accumsan tempus. Duis vel congue risus.</p>
|
|
35
|
+
</div>
|
|
36
|
+
</section>
|
|
37
|
+
</section>
|
|
38
|
+
<section class="main-content">
|
|
39
|
+
<section class="annotated-section">
|
|
40
|
+
<header class="annotated-section-annotation">
|
|
41
|
+
<h2 class="annotated-section-title">Section Name</h2>
|
|
42
|
+
<p>Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.</p>
|
|
43
|
+
<p><a href="#">More Information</a></p>
|
|
44
|
+
</header>
|
|
45
|
+
<div class="annotated-section-content">
|
|
46
|
+
<p>Body</p>
|
|
47
|
+
</div>
|
|
48
|
+
</section>
|
|
49
|
+
</section>
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
<nav id="sidebar" class="menu menu-fixed flex-col">
|
|
2
|
+
<header class="menu-header">
|
|
3
|
+
<div class="menu-icon menu-header-icon">
|
|
4
|
+
<i class="bs-icon-bookingsync"></i>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="menu-body menu-header-body">
|
|
7
|
+
<h4 class="menu-header-heading">Vacation Rentals</h4>
|
|
8
|
+
<small>
|
|
9
|
+
<a href="#menu-header-submenu"
|
|
10
|
+
data-toggle="collapse"
|
|
11
|
+
role="button"
|
|
12
|
+
aria-expanded="false"
|
|
13
|
+
aria-controls="menu-header-submenu"
|
|
14
|
+
class="collapsed">
|
|
15
|
+
Switch account
|
|
16
|
+
<span class="caret"></span>
|
|
17
|
+
</a>
|
|
18
|
+
</small>
|
|
19
|
+
</div>
|
|
20
|
+
<nav id="menu-header-submenu" class="collapse menu-header-submenu">
|
|
21
|
+
<ol>
|
|
22
|
+
<li role="presentation">
|
|
23
|
+
<a href="#">Bed and Breakfast</a>
|
|
24
|
+
</li>
|
|
25
|
+
<li role="presentation" class="active">
|
|
26
|
+
<a href="#">City Apartments</a>
|
|
27
|
+
</li>
|
|
28
|
+
</ol>
|
|
29
|
+
</nav>
|
|
30
|
+
</header>
|
|
31
|
+
<div class="menu-body flex-1">
|
|
32
|
+
<ol>
|
|
33
|
+
<li role="presentation" class="active">
|
|
34
|
+
<a href="#" class="menu-link">
|
|
35
|
+
<div class="menu-icon menu-link-icon">
|
|
36
|
+
<i class="icon-calendar"></i>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="menu-body menu-link-body">
|
|
39
|
+
Bookings
|
|
40
|
+
</div>
|
|
41
|
+
</a>
|
|
42
|
+
</li>
|
|
43
|
+
<li role="presentation">
|
|
44
|
+
<a href="#" class="menu-link">
|
|
45
|
+
<div class="menu-icon menu-link-icon">
|
|
46
|
+
<i class="icon-clients"></i>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="menu-body menu-link-body">
|
|
49
|
+
Clients
|
|
50
|
+
</div>
|
|
51
|
+
</a>
|
|
52
|
+
</li>
|
|
53
|
+
<li role="presentation">
|
|
54
|
+
<a href="#" class="menu-link">
|
|
55
|
+
<div class="menu-icon menu-link-icon">
|
|
56
|
+
<i class="icon-rental"></i>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="menu-body menu-link-body">
|
|
59
|
+
Rentals
|
|
60
|
+
</div>
|
|
61
|
+
</a>
|
|
62
|
+
</li>
|
|
63
|
+
</ol>
|
|
64
|
+
</div>
|
|
65
|
+
<footer class="menu-footer">
|
|
66
|
+
<ol>
|
|
67
|
+
<li role="separator" class="divider"></li>
|
|
68
|
+
<li role="presentation">
|
|
69
|
+
<a href="#" class="menu-link">
|
|
70
|
+
<div class="menu-icon menu-link-icon">
|
|
71
|
+
<i class="icon-applications"></i>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="menu-body menu-link-body">
|
|
74
|
+
Apps
|
|
75
|
+
</div>
|
|
76
|
+
</a>
|
|
77
|
+
</li>
|
|
78
|
+
<li role="presentation">
|
|
79
|
+
<a href="#" class="menu-link" data-toggle="toggle" data-target="#sidebar"
|
|
80
|
+
data-value="menu-collapsed">
|
|
81
|
+
<div class="menu-icon menu-link-icon">
|
|
82
|
+
<i class="icon-settings"></i>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="menu-body menu-link-body">
|
|
85
|
+
Settings
|
|
86
|
+
</div>
|
|
87
|
+
<div class="menu-caret">
|
|
88
|
+
<span class="caret-right"></span>
|
|
89
|
+
</div>
|
|
90
|
+
</a>
|
|
91
|
+
</li>
|
|
92
|
+
<li role="separator" class="divider"></li>
|
|
93
|
+
<li role="presentation">
|
|
94
|
+
<a href="#menu-footer-submenu"
|
|
95
|
+
data-toggle="collapse"
|
|
96
|
+
role="button"
|
|
97
|
+
aria-expanded="false"
|
|
98
|
+
aria-controls="menu-footer-submenu"
|
|
99
|
+
class="collapsed menu-link">
|
|
100
|
+
<div class="menu-icon menu-footer-icon">
|
|
101
|
+
<img src="http://lorempixel.com/100/100/people/9" alt="Jane Doe"
|
|
102
|
+
class="img-rounded">
|
|
103
|
+
</div>
|
|
104
|
+
<div class="menu-body menu-link-body">
|
|
105
|
+
Jane Doe
|
|
106
|
+
</div>
|
|
107
|
+
<div class="menu-caret">
|
|
108
|
+
<span class="caret"></span>
|
|
109
|
+
</div>
|
|
110
|
+
</a>
|
|
111
|
+
</li>
|
|
112
|
+
</ol>
|
|
113
|
+
<nav id="menu-footer-submenu" class="collapse menu-footer-submenu">
|
|
114
|
+
<ol>
|
|
115
|
+
<li role="presentation">
|
|
116
|
+
<a href="#">Help Center</a>
|
|
117
|
+
</li>
|
|
118
|
+
<li role="separator" class="divider"></li>
|
|
119
|
+
<li role="presentation">
|
|
120
|
+
<a href="#">Profile</a>
|
|
121
|
+
</li>
|
|
122
|
+
<li role="presentation" class="active">
|
|
123
|
+
<a href="#">Logout</a>
|
|
124
|
+
</li>
|
|
125
|
+
</ol>
|
|
126
|
+
</nav>
|
|
127
|
+
</footer>
|
|
128
|
+
</nav>
|
|
129
|
+
<iframe class="iframe-fullscreen" src="/embed/app_admin_content/index.html" frameborder="0"></iframe>
|
|
@@ -0,0 +1,70 @@
|
|
|
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>
|
|
@@ -0,0 +1,198 @@
|
|
|
1
|
+
<nav id="sidebar" class="menu menu-fixed flex-col">
|
|
2
|
+
<header class="menu-header">
|
|
3
|
+
<div class="menu-icon menu-header-icon">
|
|
4
|
+
<i class="bs-icon-bookingsync"></i>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="menu-body menu-header-body">
|
|
7
|
+
<h4 class="menu-header-heading">Vacation Rentals</h4>
|
|
8
|
+
<small>
|
|
9
|
+
<a href="#menu-header-submenu"
|
|
10
|
+
data-toggle="collapse"
|
|
11
|
+
role="button"
|
|
12
|
+
aria-expanded="false"
|
|
13
|
+
aria-controls="menu-header-submenu"
|
|
14
|
+
class="collapsed">
|
|
15
|
+
Switch account
|
|
16
|
+
<span class="caret"></span>
|
|
17
|
+
</a>
|
|
18
|
+
</small>
|
|
19
|
+
</div>
|
|
20
|
+
<nav id="menu-header-submenu" class="collapse menu-header-submenu">
|
|
21
|
+
<ol>
|
|
22
|
+
<li role="presentation">
|
|
23
|
+
<a href="#">Bed and Breakfast</a>
|
|
24
|
+
</li>
|
|
25
|
+
<li role="presentation" class="active">
|
|
26
|
+
<a href="#">City Apartments</a>
|
|
27
|
+
</li>
|
|
28
|
+
</ol>
|
|
29
|
+
</nav>
|
|
30
|
+
</header>
|
|
31
|
+
<div class="menu-body flex-1">
|
|
32
|
+
<ol>
|
|
33
|
+
<li role="presentation" class="active">
|
|
34
|
+
<a href="#" class="menu-link">
|
|
35
|
+
<div class="menu-icon menu-link-icon">
|
|
36
|
+
<i class="icon-calendar"></i>
|
|
37
|
+
</div>
|
|
38
|
+
<div class="menu-body menu-link-body">
|
|
39
|
+
Bookings
|
|
40
|
+
</div>
|
|
41
|
+
</a>
|
|
42
|
+
</li>
|
|
43
|
+
<li role="presentation">
|
|
44
|
+
<a href="#" class="menu-link">
|
|
45
|
+
<div class="menu-icon menu-link-icon">
|
|
46
|
+
<i class="icon-clients"></i>
|
|
47
|
+
</div>
|
|
48
|
+
<div class="menu-body menu-link-body">
|
|
49
|
+
Clients
|
|
50
|
+
</div>
|
|
51
|
+
</a>
|
|
52
|
+
</li>
|
|
53
|
+
<li role="presentation">
|
|
54
|
+
<a href="#" class="menu-link">
|
|
55
|
+
<div class="menu-icon menu-link-icon">
|
|
56
|
+
<i class="icon-rental"></i>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="menu-body menu-link-body">
|
|
59
|
+
Rentals
|
|
60
|
+
</div>
|
|
61
|
+
</a>
|
|
62
|
+
</li>
|
|
63
|
+
</ol>
|
|
64
|
+
</div>
|
|
65
|
+
<footer class="menu-footer">
|
|
66
|
+
<ol>
|
|
67
|
+
<li role="separator" class="divider"></li>
|
|
68
|
+
<li role="presentation">
|
|
69
|
+
<a href="#" class="menu-link">
|
|
70
|
+
<div class="menu-icon menu-link-icon">
|
|
71
|
+
<i class="icon-applications"></i>
|
|
72
|
+
</div>
|
|
73
|
+
<div class="menu-body menu-link-body">
|
|
74
|
+
Apps
|
|
75
|
+
</div>
|
|
76
|
+
</a>
|
|
77
|
+
</li>
|
|
78
|
+
<li role="presentation">
|
|
79
|
+
<a href="#" class="menu-link" data-toggle="toggle" data-target="#sidebar"
|
|
80
|
+
data-value="menu-collapsed">
|
|
81
|
+
<div class="menu-icon menu-link-icon">
|
|
82
|
+
<i class="icon-settings"></i>
|
|
83
|
+
</div>
|
|
84
|
+
<div class="menu-body menu-link-body">
|
|
85
|
+
Settings
|
|
86
|
+
</div>
|
|
87
|
+
<div class="menu-caret">
|
|
88
|
+
<span class="caret-right"></span>
|
|
89
|
+
</div>
|
|
90
|
+
</a>
|
|
91
|
+
</li>
|
|
92
|
+
<li role="separator" class="divider"></li>
|
|
93
|
+
<li role="presentation">
|
|
94
|
+
<a href="#menu-footer-submenu"
|
|
95
|
+
data-toggle="collapse"
|
|
96
|
+
role="button"
|
|
97
|
+
aria-expanded="false"
|
|
98
|
+
aria-controls="menu-footer-submenu"
|
|
99
|
+
class="collapsed menu-link">
|
|
100
|
+
<div class="menu-icon menu-footer-icon">
|
|
101
|
+
<img src="http://lorempixel.com/100/100/people/9" alt="Jane Doe"
|
|
102
|
+
class="img-rounded">
|
|
103
|
+
</div>
|
|
104
|
+
<div class="menu-body menu-link-body">
|
|
105
|
+
Jane Doe
|
|
106
|
+
</div>
|
|
107
|
+
<div class="menu-caret">
|
|
108
|
+
<span class="caret"></span>
|
|
109
|
+
</div>
|
|
110
|
+
</a>
|
|
111
|
+
</li>
|
|
112
|
+
</ol>
|
|
113
|
+
<nav id="menu-footer-submenu" class="collapse menu-footer-submenu">
|
|
114
|
+
<ol>
|
|
115
|
+
<li role="presentation">
|
|
116
|
+
<a href="#">Help Center</a>
|
|
117
|
+
</li>
|
|
118
|
+
<li role="separator" class="divider"></li>
|
|
119
|
+
<li role="presentation">
|
|
120
|
+
<a href="#">Profile</a>
|
|
121
|
+
</li>
|
|
122
|
+
<li role="presentation" class="active">
|
|
123
|
+
<a href="#">Logout</a>
|
|
124
|
+
</li>
|
|
125
|
+
</ol>
|
|
126
|
+
</nav>
|
|
127
|
+
</footer>
|
|
128
|
+
</nav>
|
|
129
|
+
<nav class="menu menu-fixed flex-col menu-submenu">
|
|
130
|
+
<header class="menu-header">
|
|
131
|
+
<div class="menu-body menu-header-body">
|
|
132
|
+
<h4 class="menu-header-heading">Settings</h4>
|
|
133
|
+
</div>
|
|
134
|
+
</header>
|
|
135
|
+
<div class="menu-body flex-1">
|
|
136
|
+
<ol>
|
|
137
|
+
<li role="presentation" class="active">
|
|
138
|
+
<a href="#" class="menu-link">
|
|
139
|
+
<div class="menu-body menu-link-body">
|
|
140
|
+
General
|
|
141
|
+
</div>
|
|
142
|
+
</a>
|
|
143
|
+
</li>
|
|
144
|
+
<li role="presentation">
|
|
145
|
+
<a href="#" class="menu-link">
|
|
146
|
+
<div class="menu-body menu-link-body">
|
|
147
|
+
Payments
|
|
148
|
+
</div>
|
|
149
|
+
</a>
|
|
150
|
+
</li>
|
|
151
|
+
<li role="presentation">
|
|
152
|
+
<a href="#" class="menu-link">
|
|
153
|
+
<div class="menu-body menu-link-body">
|
|
154
|
+
Apps
|
|
155
|
+
</div>
|
|
156
|
+
</a>
|
|
157
|
+
</li>
|
|
158
|
+
</ol>
|
|
159
|
+
</div>
|
|
160
|
+
</nav>
|
|
161
|
+
<div class="sided-content">
|
|
162
|
+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
163
|
+
<div class="container-fluid">
|
|
164
|
+
<div class="navbar-header">
|
|
165
|
+
<button type="button" class="navbar-toggle menu-toggle" data-toggle="toggle"
|
|
166
|
+
data-target="body" data-value="menu-open">
|
|
167
|
+
<span class="sr-only">Toggle Navigation</span>
|
|
168
|
+
<span class="icon-bar"></span>
|
|
169
|
+
<span class="icon-bar"></span>
|
|
170
|
+
<span class="icon-bar"></span>
|
|
171
|
+
</button>
|
|
172
|
+
<button type="button" class="navbar-toggle navbar-toggle-context"
|
|
173
|
+
data-toggle="collapse" data-target=".navbar-top-collapse">
|
|
174
|
+
<span class="sr-only">Toggle Navigation</span>
|
|
175
|
+
<span class="icon-bar"></span>
|
|
176
|
+
<span class="icon-bar"></span>
|
|
177
|
+
<span class="icon-bar"></span>
|
|
178
|
+
</button>
|
|
179
|
+
<div class="navbar-brand-container">
|
|
180
|
+
<span class="navbar-brand">
|
|
181
|
+
<h1><i class="icon-rental"></i> Rentals</h1>
|
|
182
|
+
</span>
|
|
183
|
+
</div>
|
|
184
|
+
</div>
|
|
185
|
+
<div class="collapse navbar-collapse navbar-top-collapse">
|
|
186
|
+
<div class="navbar-right">
|
|
187
|
+
<button class="btn btn-secondary navbar-btn" type="button">Button</button>
|
|
188
|
+
<button class="btn btn-primary navbar-btn" type="button">Call to action</button>
|
|
189
|
+
</div>
|
|
190
|
+
</div>
|
|
191
|
+
</div>
|
|
192
|
+
</nav>
|
|
193
|
+
<section class="main-content">
|
|
194
|
+
<div class="sheet">
|
|
195
|
+
<p>Body</p>
|
|
196
|
+
</div>
|
|
197
|
+
</section>
|
|
198
|
+
</div>
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
2
|
+
<div class="container-fluid">
|
|
3
|
+
<div class="navbar-header">
|
|
4
|
+
<div class="navbar-brand-container">
|
|
5
|
+
<span class="navbar-brand">
|
|
6
|
+
<h1><i class="icon-reviews"></i> Section Name</h1>
|
|
7
|
+
</span>
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="navbar-right">
|
|
11
|
+
<button class="btn btn-sm btn-secondary-inverse btn-round navbar-btn" type="button">
|
|
12
|
+
<span>×</span>
|
|
13
|
+
</button>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</nav>
|
|
17
|
+
<section class="main-content">
|
|
18
|
+
<div class="sheet sheet-fullscreen">
|
|
19
|
+
<p>Text...</p>
|
|
20
|
+
</div>
|
|
21
|
+
</section>
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
2
|
+
<div class="container-fluid">
|
|
3
|
+
<div class="navbar-header">
|
|
4
|
+
<button type="button" class="navbar-toggle navbar-toggle-context"
|
|
5
|
+
data-toggle="collapse" data-target=".navbar-top-collapse">
|
|
6
|
+
<span class="sr-only">Toggle Navigation</span>
|
|
7
|
+
<span class="icon-bar"></span>
|
|
8
|
+
<span class="icon-bar"></span>
|
|
9
|
+
<span class="icon-bar"></span>
|
|
10
|
+
</button>
|
|
11
|
+
<div class="navbar-brand-container">
|
|
12
|
+
<span class="navbar-brand">
|
|
13
|
+
<h1>
|
|
14
|
+
<span class="navbar-breadcrumb">
|
|
15
|
+
<i class="icon-calendar"></i> <a href="#">Bookings</a>
|
|
16
|
+
/
|
|
17
|
+
</span>
|
|
18
|
+
Planning
|
|
19
|
+
</h1>
|
|
20
|
+
</span>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="collapse navbar-collapse navbar-top-collapse">
|
|
24
|
+
<div class="navbar-right">
|
|
25
|
+
<button class="btn btn-secondary navbar-btn" type="button">Button</button>
|
|
26
|
+
<button class="btn btn-primary navbar-btn" type="button">Call to action</button>
|
|
27
|
+
</div>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
</nav>
|
|
31
|
+
<section class="main-content">
|
|
32
|
+
<div class="sheet">
|
|
33
|
+
<p>Body</p>
|
|
34
|
+
</div>
|
|
35
|
+
</section>
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
2
|
+
<div class="container-fluid">
|
|
3
|
+
<div class="navbar-header">
|
|
4
|
+
<button type="button" class="navbar-toggle navbar-toggle-context"
|
|
5
|
+
data-toggle="collapse" data-target=".navbar-top-collapse">
|
|
6
|
+
<span class="sr-only">Toggle Navigation</span>
|
|
7
|
+
<span class="icon-bar"></span>
|
|
8
|
+
<span class="icon-bar"></span>
|
|
9
|
+
<span class="icon-bar"></span>
|
|
10
|
+
</button>
|
|
11
|
+
<div class="navbar-brand-container">
|
|
12
|
+
<span class="navbar-brand">
|
|
13
|
+
<h1><i class="icon-rental"></i> Rentals</h1>
|
|
14
|
+
</span>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="collapse navbar-collapse navbar-top-collapse">
|
|
18
|
+
<div class="navbar-right">
|
|
19
|
+
<button class="btn btn-secondary navbar-btn" type="button">Button</button>
|
|
20
|
+
<button class="btn btn-primary navbar-btn" type="button">Call to action</button>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</nav>
|
|
25
|
+
<section class="main-content">
|
|
26
|
+
<div class="sheet">
|
|
27
|
+
<p>Body</p>
|
|
28
|
+
</div>
|
|
29
|
+
</section>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
2
|
+
<div class="container-fluid">
|
|
3
|
+
<div class="navbar-header">
|
|
4
|
+
<button type="button" class="navbar-toggle navbar-toggle-context"
|
|
5
|
+
data-toggle="collapse" data-target=".navbar-top-collapse">
|
|
6
|
+
<span class="sr-only">Toggle Navigation</span>
|
|
7
|
+
<span class="icon-bar"></span>
|
|
8
|
+
<span class="icon-bar"></span>
|
|
9
|
+
<span class="icon-bar"></span>
|
|
10
|
+
</button>
|
|
11
|
+
<div class="navbar-brand-container">
|
|
12
|
+
<span class="navbar-brand">
|
|
13
|
+
<h1><i class="icon-reviews"></i> Section Name</h1>
|
|
14
|
+
</span>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="collapse navbar-collapse navbar-top-collapse">
|
|
18
|
+
<div class="navbar-right">
|
|
19
|
+
<button class="btn btn-secondary navbar-btn" type="button">Button</button>
|
|
20
|
+
<button class="btn btn-primary navbar-btn" type="button">Call to action</button>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</nav>
|
|
25
|
+
<section class="main-content">
|
|
26
|
+
<div class="sheet">
|
|
27
|
+
<ul class="nav nav-tabs" data-toggle="stackable" data-target=".stackable-dropdown">
|
|
28
|
+
<li class="active"><a href="#">Tab 1</a></li>
|
|
29
|
+
<li><a href="#">Tab 2</a></li>
|
|
30
|
+
<li class="dropdown pull-right stackable-dropdown">
|
|
31
|
+
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
32
|
+
More <span class="caret"></span>
|
|
33
|
+
</a>
|
|
34
|
+
<ul class="dropdown-menu">
|
|
35
|
+
</ul>
|
|
36
|
+
</li>
|
|
37
|
+
</ul>
|
|
38
|
+
<div>
|
|
39
|
+
<p>Text...</p>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
</section>
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
|
|
2
|
+
<div class="container-fluid">
|
|
3
|
+
<div class="navbar-header">
|
|
4
|
+
<button type="button" class="navbar-toggle navbar-toggle-context"
|
|
5
|
+
data-toggle="collapse" data-target=".navbar-top-collapse">
|
|
6
|
+
<span class="sr-only">Toggle Navigation</span>
|
|
7
|
+
<span class="icon-bar"></span>
|
|
8
|
+
<span class="icon-bar"></span>
|
|
9
|
+
<span class="icon-bar"></span>
|
|
10
|
+
</button>
|
|
11
|
+
<div class="navbar-brand-container">
|
|
12
|
+
<span class="navbar-brand">
|
|
13
|
+
<h1><i class="icon-rental"></i> Rentals</h1>
|
|
14
|
+
</span>
|
|
15
|
+
</div>
|
|
16
|
+
</div>
|
|
17
|
+
<div class="collapse navbar-collapse navbar-top-collapse">
|
|
18
|
+
<div class="navbar-right">
|
|
19
|
+
<button class="btn btn-secondary navbar-btn" type="button">Button</button>
|
|
20
|
+
<button class="btn btn-primary navbar-btn" type="button">Call to action</button>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
24
|
+
</nav>
|
|
25
|
+
<section class="main-content container-fluid">
|
|
26
|
+
<div class="row">
|
|
27
|
+
<div class="col-sm-4">
|
|
28
|
+
<div class="panel panel-default">
|
|
29
|
+
<p class="text-center">Aside</p>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="col-sm-8">
|
|
33
|
+
<div class="panel panel-default">
|
|
34
|
+
<p class="text-center">Body</p>
|
|
35
|
+
</div>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
</section>
|
data/docs/content/index.html
CHANGED
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.beta2
|
|
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-07 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bootstrap-sass
|
|
@@ -143,7 +143,16 @@ files:
|
|
|
143
143
|
- docs/content/compositions.html
|
|
144
144
|
- docs/content/compositions/_navbar.html
|
|
145
145
|
- docs/content/compositions/compositions.md
|
|
146
|
+
- docs/content/embed/annotated_section.html
|
|
147
|
+
- docs/content/embed/app_admin.html
|
|
148
|
+
- docs/content/embed/app_admin_content.html
|
|
149
|
+
- docs/content/embed/core_admin.html
|
|
150
|
+
- docs/content/embed/fullscreen_modal.html
|
|
146
151
|
- docs/content/embed/menu.html
|
|
152
|
+
- docs/content/embed/nested_section.html
|
|
153
|
+
- docs/content/embed/section.html
|
|
154
|
+
- docs/content/embed/tabulated_content.html
|
|
155
|
+
- docs/content/embed/two_columns.html
|
|
147
156
|
- docs/content/forms.html
|
|
148
157
|
- docs/content/forms/_navbar.html
|
|
149
158
|
- docs/content/forms/forms.md
|