bootstrap-bookingsync-sass 0.0.16 → 0.0.17
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/.gitignore +4 -1
- data/CHANGELOG.md +11 -0
- data/assets/stylesheets/_bootstrap-bookingsync.scss +5 -2
- data/assets/stylesheets/bookingsync/_layout.scss +0 -49
- data/assets/stylesheets/bookingsync/_menu.scss +282 -0
- data/assets/stylesheets/bookingsync/_sheet.scss +27 -0
- data/assets/stylesheets/bookingsync/_switch.scss +0 -4
- data/assets/stylesheets/bookingsync/_theme.scss +0 -301
- data/assets/stylesheets/bookingsync/_type.scss +0 -4
- data/assets/stylesheets/bookingsync/_utilities.scss +46 -3
- data/assets/stylesheets/bookingsync/_variables.scss +130 -108
- data/docs/Gemfile +16 -0
- data/docs/Guardfile +25 -0
- data/docs/Rakefile +53 -0
- data/docs/Rules +58 -0
- data/docs/config.ru +15 -0
- data/docs/content/CNAME +1 -0
- data/docs/content/assets/javascripts/application.js.coffee +7 -0
- data/docs/content/assets/stylesheets/_base.scss +41 -0
- data/docs/content/assets/stylesheets/_callout.scss +50 -0
- data/docs/content/assets/stylesheets/_code.scss +18 -0
- data/docs/content/assets/stylesheets/_panels.scss +4 -0
- data/docs/content/assets/stylesheets/_variables.scss +14 -0
- data/docs/content/assets/stylesheets/application.scss +11 -0
- data/docs/content/components.html +23 -0
- data/docs/content/components/chosen.md +54 -0
- data/docs/content/components/menu.md +184 -0
- data/docs/content/components/sheet.md +36 -0
- data/docs/content/components/switch.md +44 -0
- data/docs/content/css.html +42 -0
- data/docs/content/css/forms.md +1138 -0
- data/docs/content/css/helpers.md +49 -0
- data/docs/content/highlight.css +1 -0
- data/docs/content/index.html +5 -0
- data/docs/layouts/default.html +12 -0
- data/docs/layouts/head.html +17 -0
- data/docs/layouts/navbar.html +27 -0
- data/docs/lib/default.rb +13 -0
- data/docs/nanoc.yaml +74 -0
- data/docs/vendor/assets/javascripts/chosen.js +1284 -0
- data/docs/vendor/assets/stylesheets/chosen.scss +448 -0
- data/lib/bootstrap/bookingsync/version.rb +1 -1
- metadata +36 -3
data/docs/Rules
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
#!/usr/bin/env ruby
|
|
2
|
+
|
|
3
|
+
# A few helpful tips about the Rules file:
|
|
4
|
+
#
|
|
5
|
+
# * The string given to #compile and #route are matching patterns for
|
|
6
|
+
# identifiers--not for paths. Therefore, you can’t match on extension.
|
|
7
|
+
#
|
|
8
|
+
# * The order of rules is important: for each item, only the first matching
|
|
9
|
+
# rule is applied.
|
|
10
|
+
#
|
|
11
|
+
# * Item identifiers start and end with a slash (e.g. “/about/” for the file
|
|
12
|
+
# “content/about.html”). To select all children, grandchildren, … of an
|
|
13
|
+
# item, use the pattern “/about/*/”; “/about/*” will also select the parent,
|
|
14
|
+
# because “*” matches zero or more characters.
|
|
15
|
+
|
|
16
|
+
ignore '/assets/(stylesheets|javascripts)/_*'
|
|
17
|
+
|
|
18
|
+
compile '/static/*' do
|
|
19
|
+
end
|
|
20
|
+
|
|
21
|
+
compile '/CNAME/' do
|
|
22
|
+
end
|
|
23
|
+
|
|
24
|
+
compile '/highlight/' do
|
|
25
|
+
filter :erb
|
|
26
|
+
end
|
|
27
|
+
|
|
28
|
+
compile %r{/assets/(stylesheets|javascripts)/.+/} do
|
|
29
|
+
filter :sprockets, {
|
|
30
|
+
:css_compressor => :scss,
|
|
31
|
+
:js_compressor => :uglifier
|
|
32
|
+
}
|
|
33
|
+
end
|
|
34
|
+
|
|
35
|
+
compile '*' do
|
|
36
|
+
filter :erb
|
|
37
|
+
filter :kramdown, toc_levels: [2], header_offset: 1, enable_coderay: false
|
|
38
|
+
filter :colorize_syntax, default_colorizer: :pygmentsrb
|
|
39
|
+
layout item[:layout] || 'default'
|
|
40
|
+
end
|
|
41
|
+
|
|
42
|
+
route '/assets/*/' do
|
|
43
|
+
Nanoc::Sprockets::Helper.asset_path(item)
|
|
44
|
+
end
|
|
45
|
+
|
|
46
|
+
route '/CNAME' do
|
|
47
|
+
'/CNAME'
|
|
48
|
+
end
|
|
49
|
+
|
|
50
|
+
route '/highlight' do
|
|
51
|
+
'/highlight.css'
|
|
52
|
+
end
|
|
53
|
+
|
|
54
|
+
route '*' do
|
|
55
|
+
item.identifier + 'index.html'
|
|
56
|
+
end
|
|
57
|
+
|
|
58
|
+
layout '*', :erb
|
data/docs/config.ru
ADDED
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
require 'rubygems'
|
|
2
|
+
require 'bundler/setup'
|
|
3
|
+
|
|
4
|
+
require 'rack'
|
|
5
|
+
require 'adsf'
|
|
6
|
+
|
|
7
|
+
app = Rack::Builder.new do
|
|
8
|
+
use Rack::CommonLogger
|
|
9
|
+
use Rack::ShowExceptions
|
|
10
|
+
use Rack::Head
|
|
11
|
+
use Adsf::Rack::IndexFileFinder, :root => 'output'
|
|
12
|
+
run Rack::File.new('output')
|
|
13
|
+
end.to_app
|
|
14
|
+
|
|
15
|
+
run app
|
data/docs/content/CNAME
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
styleguide.bookingsync.com
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
body {
|
|
2
|
+
padding-top: 0;
|
|
3
|
+
}
|
|
4
|
+
|
|
5
|
+
.navbar-brand {
|
|
6
|
+
line-height: $menu-header-height;
|
|
7
|
+
padding: 0;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.navbar-nav >li >a {
|
|
11
|
+
line-height: 40px;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.menu {
|
|
15
|
+
position: relative;
|
|
16
|
+
height: auto;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.content {
|
|
20
|
+
padding-top: 10px;
|
|
21
|
+
padding-bottom: 40px;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.reference-body h3,
|
|
25
|
+
.reference-body h4,
|
|
26
|
+
.reference-body h5,
|
|
27
|
+
.reference-body h6 {
|
|
28
|
+
margin-top: 2em;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.reference-body h3+h4 {
|
|
32
|
+
margin-top: 1em;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.reference-body .nav-pills {
|
|
36
|
+
border-bottom: 2px solid $nav-pills-active-link-hover-bg;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.reference-body .nav-pills a {
|
|
40
|
+
border-radius: 0;
|
|
41
|
+
}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Callouts
|
|
3
|
+
*
|
|
4
|
+
* Not quite alerts, but custom and helpful notes for folks reading the docs.
|
|
5
|
+
* Requires a base and modifier class.
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/* Common styles for all types */
|
|
9
|
+
.bs-callout {
|
|
10
|
+
padding: 20px;
|
|
11
|
+
margin: 20px 0;
|
|
12
|
+
border: 1px solid #eee;
|
|
13
|
+
border-left-width: 5px;
|
|
14
|
+
border-radius: 3px;
|
|
15
|
+
}
|
|
16
|
+
.bs-callout h4 {
|
|
17
|
+
margin-top: 0;
|
|
18
|
+
margin-bottom: 5px;
|
|
19
|
+
}
|
|
20
|
+
.bs-callout p:last-child {
|
|
21
|
+
margin-bottom: 0;
|
|
22
|
+
}
|
|
23
|
+
.bs-callout code {
|
|
24
|
+
border-radius: 3px;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
/* Tighten up space between multiple callouts */
|
|
28
|
+
.bs-callout + .bs-callout {
|
|
29
|
+
margin-top: -5px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
/* Variations */
|
|
33
|
+
.bs-callout-danger {
|
|
34
|
+
border-left-color: #ce4844;
|
|
35
|
+
}
|
|
36
|
+
.bs-callout-danger h4 {
|
|
37
|
+
color: #ce4844;
|
|
38
|
+
}
|
|
39
|
+
.bs-callout-warning {
|
|
40
|
+
border-left-color: #aa6708;
|
|
41
|
+
}
|
|
42
|
+
.bs-callout-warning h4 {
|
|
43
|
+
color: #aa6708;
|
|
44
|
+
}
|
|
45
|
+
.bs-callout-info {
|
|
46
|
+
border-left-color: #1b809e;
|
|
47
|
+
}
|
|
48
|
+
.bs-callout-info h4 {
|
|
49
|
+
color: #1b809e;
|
|
50
|
+
}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Code blocks
|
|
3
|
+
*/
|
|
4
|
+
.example {
|
|
5
|
+
border: 1px solid $gray-lighter;
|
|
6
|
+
background-color: #fff;
|
|
7
|
+
border-radius: 3px 3px 0 0;
|
|
8
|
+
padding: 15px;
|
|
9
|
+
margin-top: 15px;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
pre {
|
|
13
|
+
border: 1px solid $gray-lighter;
|
|
14
|
+
border-top: 0;
|
|
15
|
+
border-radius: 0 0 3px 3px;
|
|
16
|
+
background-color: $body-bg;
|
|
17
|
+
margin-bottom: 15px;
|
|
18
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
$navbar-default-toggle-hover-bg: transparent;
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
$list-group-hover-bg: #f5f5f5;
|
|
5
|
+
|
|
6
|
+
$list-group-active-color: $brand-primary;
|
|
7
|
+
$list-group-active-bg: $list-group-hover-bg;
|
|
8
|
+
$list-group-active-border: $list-group-border;
|
|
9
|
+
|
|
10
|
+
$list-group-link-color: $brand-primary;
|
|
11
|
+
$list-group-link-hover-color: darken($brand-primary, 10%);
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
$pre-bg: #f4f4f4;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<div class="row">
|
|
2
|
+
<div class="col-md-3 col-md-push-9">
|
|
3
|
+
<div class="panel panel-default">
|
|
4
|
+
<div class="list-group">
|
|
5
|
+
<%= link_to("Menu", "#menu", class: "list-group-item") %>
|
|
6
|
+
<%= link_to("Sheet", "#sheet", class: "list-group-item") %>
|
|
7
|
+
<%= link_to("Chosen", "#chosen", class: "list-group-item") %>
|
|
8
|
+
<%= link_to("Switch", "#switch", class: "list-group-item") %>
|
|
9
|
+
</div>
|
|
10
|
+
</div>
|
|
11
|
+
</div>
|
|
12
|
+
|
|
13
|
+
<div class="col-md-9 col-md-pull-3">
|
|
14
|
+
<div class="panel panel-default">
|
|
15
|
+
<div class="panel-body reference-body">
|
|
16
|
+
<%= items['/components/menu/'].compiled_content %>
|
|
17
|
+
<%= items['/components/sheet/'].compiled_content %>
|
|
18
|
+
<%= items['/components/chosen/'].compiled_content %>
|
|
19
|
+
<%= items['/components/switch/'].compiled_content %>
|
|
20
|
+
</div>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
</div>
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
## Chosen
|
|
2
|
+
|
|
3
|
+
<div class="bs-callout bs-callout-danger">
|
|
4
|
+
<h4>External dependency</h4>
|
|
5
|
+
<p>
|
|
6
|
+
This component requires the
|
|
7
|
+
<a href="http://harvesthq.github.io/chosen/">Chosen</a> library.
|
|
8
|
+
</p>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
Custom styles for select boxes provided by
|
|
12
|
+
[Chosen](http://harvesthq.github.io/chosen/).
|
|
13
|
+
|
|
14
|
+
### Standard Select
|
|
15
|
+
|
|
16
|
+
<div class="example">
|
|
17
|
+
<select class="form-control chosen">
|
|
18
|
+
<option value=""></option>
|
|
19
|
+
<option value="One">One</option>
|
|
20
|
+
<option value="Two">Two</option>
|
|
21
|
+
<option value="Three">Three</option>
|
|
22
|
+
<option value="Four">Four</option>
|
|
23
|
+
</select>
|
|
24
|
+
</div>
|
|
25
|
+
~~~ HTML
|
|
26
|
+
<select class="form-control chosen">
|
|
27
|
+
<option value=""></option>
|
|
28
|
+
<option value="One">One</option>
|
|
29
|
+
<option value="Two">Two</option>
|
|
30
|
+
<option value="Three">Three</option>
|
|
31
|
+
<option value="Four">Four</option>
|
|
32
|
+
</select>
|
|
33
|
+
~~~
|
|
34
|
+
|
|
35
|
+
### Multiple Select
|
|
36
|
+
|
|
37
|
+
<div class="example">
|
|
38
|
+
<select class="form-control chosen" multiple tabindex="3">
|
|
39
|
+
<option value=""></option>
|
|
40
|
+
<option value="One">One</option>
|
|
41
|
+
<option value="Two">Two</option>
|
|
42
|
+
<option value="Three">Three</option>
|
|
43
|
+
<option value="Four">Four</option>
|
|
44
|
+
</select>
|
|
45
|
+
</div>
|
|
46
|
+
~~~ HTML
|
|
47
|
+
<select class="form-control chosen" multiple tabindex="3">
|
|
48
|
+
<option value=""></option>
|
|
49
|
+
<option value="One">One</option>
|
|
50
|
+
<option value="Two">Two</option>
|
|
51
|
+
<option value="Three">Three</option>
|
|
52
|
+
<option value="Four">Four</option>
|
|
53
|
+
</select>
|
|
54
|
+
~~~
|
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
## Menu
|
|
2
|
+
|
|
3
|
+
### Basic example
|
|
4
|
+
|
|
5
|
+
<div class="example">
|
|
6
|
+
<nav class="menu flex-col">
|
|
7
|
+
<header class="dropdown">
|
|
8
|
+
<div class="bar">
|
|
9
|
+
<img src="http://placehold.it/24x24" class="img-responsive img-circle brand" alt="Fullname">
|
|
10
|
+
<p>
|
|
11
|
+
Surf Office: Lisbon<br>
|
|
12
|
+
<small>
|
|
13
|
+
<a data-target="#menu-header-submenu" href="#" data-toggle="dropdown"
|
|
14
|
+
aria-haspopup="true" aria-expanded="false" id="menu-switch-account">Switch account
|
|
15
|
+
<span class="caret"></span></a>
|
|
16
|
+
</small>
|
|
17
|
+
</p>
|
|
18
|
+
</div>
|
|
19
|
+
<div id="menu-header-submenu" class="menu-dropdown" aria-labelledby="menu-switch-account">
|
|
20
|
+
<ol>
|
|
21
|
+
<li role="presentation">
|
|
22
|
+
<a href="#">SurfOffice: Grand Canaria</a>
|
|
23
|
+
</li>
|
|
24
|
+
<li role="presentation" class="active">
|
|
25
|
+
<a href="#">SurfOffice: Santa Cruz</a>
|
|
26
|
+
</li>
|
|
27
|
+
</ol>
|
|
28
|
+
</div>
|
|
29
|
+
</header>
|
|
30
|
+
<div class="body flex-1">
|
|
31
|
+
<ol>
|
|
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>
|
|
72
|
+
</li>
|
|
73
|
+
<li role="presentation">
|
|
74
|
+
<a href="#"><i class="fa fa-user fa-fw"></i> <span>Personal Information</span></a>
|
|
75
|
+
</li>
|
|
76
|
+
<li role="presentation">
|
|
77
|
+
<a href="#"><i class="fa fa-calendar-o fa-fw"></i> <span>Calendar Preferences</span></a>
|
|
78
|
+
</li>
|
|
79
|
+
<li role="presentation">
|
|
80
|
+
<a href="#"><i class="fa fa-clock-o fa-fw"></i> <span>Time Format</span></a>
|
|
81
|
+
</li>
|
|
82
|
+
</ol>
|
|
83
|
+
</div>
|
|
84
|
+
</footer>
|
|
85
|
+
</nav>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
~~~ html
|
|
89
|
+
<nav class="menu flex-col">
|
|
90
|
+
<header class="dropdown">
|
|
91
|
+
<div class="bar">
|
|
92
|
+
<img src="http://placehold.it/24x24" class="img-responsive img-circle brand" alt="Fullname">
|
|
93
|
+
<p>
|
|
94
|
+
Surf Office: Lisbon<br>
|
|
95
|
+
<small>
|
|
96
|
+
<a data-target="#menu-header-submenu" href="#" data-toggle="dropdown"
|
|
97
|
+
aria-haspopup="true" aria-expanded="false" id="menu-switch-account">Switch account
|
|
98
|
+
<span class="caret"></span></a>
|
|
99
|
+
</small>
|
|
100
|
+
</p>
|
|
101
|
+
</div>
|
|
102
|
+
<div id="menu-header-submenu" class="menu-dropdown" aria-labelledby="menu-switch-account">
|
|
103
|
+
<ol>
|
|
104
|
+
<li role="presentation">
|
|
105
|
+
<a href="#">SurfOffice: Lisbon
|
|
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>
|
|
111
|
+
</li>
|
|
112
|
+
<li role="presentation" class="active">
|
|
113
|
+
<a href="#">SurfOffice: Santa Cruz</a>
|
|
114
|
+
</li>
|
|
115
|
+
</ol>
|
|
116
|
+
</div>
|
|
117
|
+
</header>
|
|
118
|
+
<div class="body flex-1">
|
|
119
|
+
<ol>
|
|
120
|
+
<li role="presentation" class="active">
|
|
121
|
+
<a href="#"><i class="fa fa-calendar fa-fw"></i> <span>Bookings</span></a>
|
|
122
|
+
</li>
|
|
123
|
+
<li role="presentation">
|
|
124
|
+
<a href="#"><i class="fa fa-users fa-fw"></i> <span>Clients</span></a>
|
|
125
|
+
</li>
|
|
126
|
+
<li role="presentation">
|
|
127
|
+
<a href="#"><i class="fa fa-envelope-o fa-fw"></i> <span>Inquiries</span></a>
|
|
128
|
+
</li>
|
|
129
|
+
<li role="presentation">
|
|
130
|
+
<a href="#"><i class="fa fa-home fa-fw"></i> <span>Rentals</span></a>
|
|
131
|
+
</li>
|
|
132
|
+
<li role="presentation">
|
|
133
|
+
<a href="#"><i class="fa fa-star fa-fw"></i> <span>Reviews</span></a>
|
|
134
|
+
</li>
|
|
135
|
+
<li role="presentation">
|
|
136
|
+
<a href="#"><i class="fa fa-globe fa-fw"></i> <span>Website</span></a>
|
|
137
|
+
</li>
|
|
138
|
+
<li role="presentation">
|
|
139
|
+
<a href="#"><i class="fa fa-cubes fa-fw"></i> <span>Apps</span></a>
|
|
140
|
+
</li>
|
|
141
|
+
</ol>
|
|
142
|
+
</div>
|
|
143
|
+
<footer>
|
|
144
|
+
<div class="bar">
|
|
145
|
+
<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">
|
|
146
|
+
<p>
|
|
147
|
+
Peter Fabor<br>
|
|
148
|
+
<small>
|
|
149
|
+
<a data-target="#menu-footer-submenu" href="#" data-toggle="dropdown"
|
|
150
|
+
aria-haspopup="true" aria-expanded="false" id="menu-manage-account">Manage Account
|
|
151
|
+
<i class="fa fa-gear"></i></a>
|
|
152
|
+
</small>
|
|
153
|
+
</p>
|
|
154
|
+
</div>
|
|
155
|
+
<div id="menu-footer-submenu" class="menu-dropright flex-col" aria-labelledby="menu-manage-account">
|
|
156
|
+
<ol class="flex-1">
|
|
157
|
+
<li role="presentation">
|
|
158
|
+
<a data-target="#menu-footer-submenu" href="#" data-toggle="dropdown">
|
|
159
|
+
<i class="fa fa-long-arrow-left fa-fw"></i> <span>Back</span></a>
|
|
160
|
+
</li>
|
|
161
|
+
<li role="presentation">
|
|
162
|
+
<a href="#"><i class="fa fa-user fa-fw"></i> <span>Personal Information</span></a>
|
|
163
|
+
</li>
|
|
164
|
+
<li role="presentation">
|
|
165
|
+
<a href="#"><i class="fa fa-calendar-o fa-fw"></i> <span>Calendar Preferences</span></a>
|
|
166
|
+
</li>
|
|
167
|
+
<li role="presentation">
|
|
168
|
+
<a href="#"><i class="fa fa-clock-o fa-fw"></i> <span>Time Format</span></a>
|
|
169
|
+
</li>
|
|
170
|
+
</ol>
|
|
171
|
+
</div>
|
|
172
|
+
</footer>
|
|
173
|
+
</nav>
|
|
174
|
+
~~~
|
|
175
|
+
|
|
176
|
+
### Full height fixed position menu
|
|
177
|
+
|
|
178
|
+
Add `.menu-fixed` class to make the menu fixed to the left viewport edge.
|
|
179
|
+
|
|
180
|
+
~~~ html
|
|
181
|
+
<nav class="menu menu-fixed flex-col">
|
|
182
|
+
...
|
|
183
|
+
</nav>
|
|
184
|
+
~~~
|