Skip to content

Commit 35bdc95

Browse files
lazabogdanlazabogdan
committed
update docs
1 parent 69d704c commit 35bdc95

14 files changed

Lines changed: 604 additions & 139 deletions

File tree

‎docs/gulpfile.js‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ var __SRC_HTML = __SRC + '/html/pages/**/*.html';
3636
// WATCH PATHS
3737
var __WATCH_SASS = [
3838
__SRC + '/sass/**/**.scss',
39-
'./node_modules/bootstrap-layout/**/**.scss'
39+
'./node_modules/bootstrap-layout/src/sass/**/**.scss'
4040
];
4141
var __WATCH_BROWSERIFY = __SRC_BROWSERIFY;
4242
var __WATCH_HTML = __SRC + '/html/**/**';
@@ -120,9 +120,7 @@ gulp.task('sass', ['clean-css'], function () {
120120

121121
// Watch Sass
122122
gulp.task('sass:watch', function () {
123-
$.watch(__WATCH_SASS, $.batch(function (events, done) {
124-
gulp.start('sass', done)
125-
}))
123+
gulp.watch(__WATCH_SASS, ['sass'])
126124
});
127125

128126
////////////////
@@ -242,9 +240,7 @@ gulp.task('browserify', ['clean-browserify'], function (callback) {
242240

243241
// Watch Browserify Bundles
244242
gulp.task('browserify:watch', function () {
245-
$.watch(__WATCH_BROWSERIFY, $.batch(function (events, done) {
246-
gulp.start('browserify', done)
247-
}))
243+
gulp.watch(__WATCH_BROWSERIFY, ['browserify'])
248244
});
249245

250246
//////////
@@ -298,9 +294,7 @@ gulp.task('html:prettify', ['html'], function () {
298294

299295
// Watch HTML
300296
gulp.task('html:watch', ['watch:set'], function () {
301-
$.watch(__WATCH_HTML, $.batch(function (events, done) {
302-
gulp.start('html:prettify', done)
303-
}))
297+
gulp.watch(__WATCH_HTML, ['html:prettify'])
304298
});
305299

306300
////////////////////////

‎docs/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
"fs-resolver": "^1.0.0",
2929
"globby": "^4.0.0",
3030
"gulp": "^3.9.1",
31-
"gulp-batch": "^1.0.5",
3231
"gulp-clean-css": "^2.0.2",
3332
"gulp-front-matter": "^1.3.0",
3433
"gulp-if": "^2.0.0",
@@ -41,7 +40,6 @@
4140
"gulp-swig": "^0.8.0",
4241
"gulp-uglify": "^1.5.3",
4342
"gulp-util": "^3.0.7",
44-
"gulp-watch": "^4.3.5",
4543
"http-server": "^0.9.0",
4644
"lodash.assign": "^4.0.4",
4745
"pretty-hrtime": "^1.0.2",

‎docs/src/html/layouts/default.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
</li>
9191
</ul>
9292
</li>
93-
<li class="sidebar-menu-item{% if slug === 'sidebar-menu/index' or slug === 'sidebar-menu/icons' or slug === 'sidebar-menu/style' or slug === 'sidebar-menu/submenu' or slug === 'sidebar-menu/collapse' or slug === 'sidebar-menu/dropdown' %} open{% endif %}">
93+
<li class="sidebar-menu-item{% if slug === 'sidebar-menu/index' or slug === 'sidebar-menu/icons' or slug === 'sidebar-menu/utilities' or slug === 'sidebar-menu/submenu' or slug === 'sidebar-menu/collapse' or slug === 'sidebar-menu/dropdown' %} open{% endif %}">
9494
<a href="#" class="sidebar-menu-button" data-toggle="sidebar-collapse">Sidebar menus</a>
9595
<ul class="sidebar-submenu sm-condensed">
9696
<li class="sidebar-menu-item{% if slug === 'sidebar-menu/index' %} active{% endif %}">
@@ -99,8 +99,8 @@
9999
<li class="sidebar-menu-item{% if slug === 'sidebar-menu/icons' %} active{% endif %}">
100100
<a href="{{ path or '' }}sidebar-menu/icons.html" class="sidebar-menu-button">Sidebar menu icons</a>
101101
</li>
102-
<li class="sidebar-menu-item{% if slug === 'sidebar-menu/style' %} active{% endif %}">
103-
<a href="{{ path or '' }}sidebar-menu/style.html" class="sidebar-menu-button">Sidebar menu style</a>
102+
<li class="sidebar-menu-item{% if slug === 'sidebar-menu/utilities' %} active{% endif %}">
103+
<a href="{{ path or '' }}sidebar-menu/utilities.html" class="sidebar-menu-button">Sidebar menu utilities</a>
104104
</li>
105105
<li class="sidebar-menu-item{% if slug === 'sidebar-menu/submenu' %} active{% endif %}">
106106
<a href="{{ path or '' }}sidebar-menu/submenu.html" class="sidebar-menu-button">Sidebar submenu</a>

‎docs/src/html/layouts/sidebars/blank.html‎

Lines changed: 104 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!-- Sidebar -->
1+
Sidebar -->
22
<div class="sidebar sidebar-{{ position or 'left' }}{% if !visible || visible !== 'none' %} sidebar-visible-{{ visible | join(' sidebar-visible-') or 'md-up' }}{% endif %} sidebar-size-{{ size or '3' }}{% if size_xs %} sidebar-size-{{ size_xs }}-xs{% endif %}{% if size_xs_up %} sidebar-size-{{ size_xs_up }}-xs-up{% endif %}{% if size_sm %} sidebar-size-{{ size_sm }}-sm{% endif %}{% if size_sm_up %} sidebar-size-{{ size_sm_up }}-sm-up{% endif %}{% if size_md %} sidebar-size-{{ size_md }}-md{% endif %}{% if size_md_up %} sidebar-size-{{ size_md_up }}-md-up{% endif %}{% if size_lg %} sidebar-size-{{ size_lg }}-lg{% endif %}{% if size_lg_up %} sidebar-size-{{ size_lg_up }}-lg-up{% endif %}{% if size_xl %} sidebar-size-{{ size_xl }}-xl{% endif %}{% if size_xl_up %} sidebar-size-{{ size_xl_up }}-xl-up{% endif %} {{ style or 'sidebar-light bg-white' }}{% if extras %} {{ extras }}{% endif %}" id="sidebar-blank-{{ id or '1' }}" data-scrollable data-position="{{ position or 'left' }}" data-size="{{ size or '3' }}"{% if size_xs %} data-size-xs="{{ size_xs }}"{% endif %}{% if size_xs_up %} data-size-xs-up="{{ size_xs_up }}"{% endif %}{% if size_sm %} data-size-sm="{{ size_sm }}"{% endif %}{% if size_sm_up %} data-size-sm-up="{{ size_sm_up }}"{% endif %}{% if size_md %} data-size-md="{{ size_md }}"{% endif %}{% if size_md_up %} data-size-md-up="{{ size_md_up }}"{% endif %}{% if size_lg %} data-size-lg="{{ size_lg }}"{% endif %}{% if size_lg_up %} data-size-lg-up="{{ size_lg_up }}"{% endif %}{% if size_xl %} data-size-xl="{{ size_xl }}"{% endif %}{% if size_xl_up %} data-size-xl-up="{{ size_xl_up }}"{% endif %}{% if visible %} data-visible="{{ visible | join(' ') }}"{% endif %}{% if layout %} data-layout="{{ layout | join(' ') }}"{% endif %}>
33

44
{% if sm_brand !== false %}
@@ -71,12 +71,77 @@
7171
{% endif %}
7272

7373
{% if sm_style %}
74-
<div class="sidebar-heading sidebar-p-t">Menu border</div>
74+
<div class="sidebar-heading sidebar-p-t">Mixed</div>
75+
<p>Regular size menu items with icons block, align icons to the right and active item background and condensed submenu with icons block</p>
76+
77+
<ul class="sidebar-menu sm-icons-right sm-icons-block sm-active-button-bg">
78+
<li class="sidebar-menu-item">
79+
<a class="sidebar-menu-button" href="#">
80+
<span class="label sidebar-menu-label label-default">50</span>
81+
<i class="sidebar-menu-icon material-icons">home</i>
82+
Menu icon
83+
</a>
84+
</li>
85+
<li class="sidebar-menu-item active">
86+
<a class="sidebar-menu-button" href="#">
87+
<span class="label sidebar-menu-label label-default">50</span>
88+
Menu button
89+
</a>
90+
</li>
91+
<li class="sidebar-menu-item open">
92+
<a class="sidebar-menu-button" href="#" data-toggle="sidebar-collapse">
93+
<i class="sidebar-menu-icon material-icons">menu</i>
94+
Submenu
95+
</a>
96+
97+
<!-- Submenu -->
98+
<ul class="sidebar-submenu sm-condensed sm-icons-block">
99+
<li class="sidebar-menu-item">
100+
<a class="sidebar-menu-button" href="#">
101+
<span class="label sidebar-menu-label label-default">50</span>
102+
<i class="sidebar-menu-icon material-icons">home</i>
103+
Menu icon
104+
</a>
105+
</li>
106+
<li class="sidebar-menu-item">
107+
<a class="sidebar-menu-button" href="#">
108+
<i class="sidebar-menu-icon material-icons">menu</i>
109+
Menu icon
110+
</a>
111+
</li>
112+
</ul>
113+
</li>
114+
</ul>
115+
116+
<div class="sidebar-heading">Indent submenu items</div>
117+
<p>Apply a larger horizontal spacing to submenu items.</p>
118+
119+
<ul class="sidebar-menu">
120+
<li class="sidebar-menu-item open">
121+
<a class="sidebar-menu-button" href="#" data-toggle="sidebar-collapse">Submenu button</a>
122+
<ul class="sidebar-submenu sm-condensed sm-indent">
123+
<li class="sidebar-menu-item">
124+
<a class="sidebar-menu-button" href="#">Menu button</a>
125+
</li>
126+
<li class="sidebar-menu-item active">
127+
<a class="sidebar-menu-button" href="#">Menu button</a>
128+
</li>
129+
<li class="sidebar-menu-item">
130+
<a class="sidebar-menu-button" href="#">Menu button</a>
131+
</li>
132+
</ul>
133+
</li>
134+
</ul>
135+
136+
<div class="sidebar-heading">Menu border</div>
75137
<p>Apply a border bottom to the menu.</p>
76138

77139
<ul class="sidebar-menu sm-bordered">
78140
<li class="sidebar-menu-item">
79-
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">home</i> Menu button</a>
141+
<a class="sidebar-menu-button" href="#">
142+
<span class="sidebar-menu-label label label-default">new</span>
143+
<i class="sidebar-menu-icon material-icons">home</i> Menu button
144+
</a>
80145
</li>
81146
<li class="sidebar-menu-item active">
82147
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">menu</i> Menu button</a>
@@ -91,13 +156,36 @@
91156
<a class="sidebar-menu-button" href="#">Menu button</a>
92157
</li>
93158
<li class="sidebar-menu-item">
94-
<a class="sidebar-menu-button" href="#">Menu button</a>
159+
<a class="sidebar-menu-button" href="#">
160+
<span class="sidebar-menu-label label label-default">50</span>
161+
Menu button
162+
</a>
95163
</li>
96164
<li class="sidebar-menu-item">
97165
<a class="sidebar-menu-button" href="#">Menu button</a>
98166
</li>
99167
</ul>
100168

169+
<div class="sidebar-heading">Submenu item border</div>
170+
<p>Apply a border bottom to submenu items.</p>
171+
172+
<ul class="sidebar-menu">
173+
<li class="sidebar-menu-item open">
174+
<a class="sidebar-menu-button" href="#" data-toggle="sidebar-collapse">Submenu button</a>
175+
<ul class="sidebar-submenu sm-condensed sm-item-bordered">
176+
<li class="sidebar-menu-item">
177+
<a class="sidebar-menu-button" href="#">Menu button</a>
178+
</li>
179+
<li class="sidebar-menu-item">
180+
<a class="sidebar-menu-button" href="#">Menu button</a>
181+
</li>
182+
<li class="sidebar-menu-item active">
183+
<a class="sidebar-menu-button" href="#">Menu button</a>
184+
</li>
185+
</ul>
186+
</li>
187+
</ul>
188+
101189
<div class="sidebar-heading">Active background</div>
102190
<p>Apply a background color to the active menu item.</p>
103191

@@ -106,7 +194,11 @@
106194
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">home</i> Menu button</a>
107195
</li>
108196
<li class="sidebar-menu-item active">
109-
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">menu</i> Menu button</a>
197+
<a class="sidebar-menu-button" href="#">
198+
<span class="sidebar-menu-label label label-default">3</span>
199+
<i class="sidebar-menu-icon material-icons">menu</i>
200+
Menu button
201+
</a>
110202
</li>
111203
</ul>
112204

@@ -130,7 +222,10 @@
130222

131223
<ul class="sidebar-menu sm-icons-right">
132224
<li class="sidebar-menu-item">
133-
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">home</i> Menu button</a>
225+
<a class="sidebar-menu-button" href="#">
226+
<span class="sidebar-menu-label label label-default">new</span>
227+
<i class="sidebar-menu-icon material-icons">home</i> Menu button
228+
</a>
134229
</li>
135230
<li class="sidebar-menu-item active">
136231
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">menu</i> Menu button</a>
@@ -150,9 +245,9 @@
150245
</ul>
151246

152247
<div class="sidebar-heading">Mixed</div>
153-
<p>Condensed and bordered menu, align icons to the right and active item background.</p>
248+
<p>Condensed and bordered menu items, align icons to the right and active item background.</p>
154249

155-
<ul class="sidebar-menu sm-icons-right sm-condensed sm-bordered sm-active-button-bg">
250+
<ul class="sidebar-menu sm-icons-right sm-condensed sm-item-bordered sm-active-button-bg">
156251
<li class="sidebar-menu-item active">
157252
<a class="sidebar-menu-button" href="#"><i class="sidebar-menu-icon material-icons">home</i> Menu button</a>
158253
</li>
@@ -386,4 +481,4 @@
386481
{% endif %}
387482

388483
</div>
389-
<!-- // END Sidebar -->
484+
<!-- // END Sidebar

docs/src/html/pages/demo/sidebar-menu-style-dark.html renamed to docs/src/html/pages/demo/sidebar-menu-utilities-dark.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Sidebar menu style
2+
title: Sidebar menu utilities
33
path: ../
44
---
55
{% extends "layouts/demo.html" %}

docs/src/html/pages/demo/sidebar-menu-style-light.html renamed to docs/src/html/pages/demo/sidebar-menu-utilities-light.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
title: Sidebar menu style
2+
title: Sidebar menu utilities
33
path: ../
44
---
55
{% extends "layouts/demo.html" %}

‎docs/src/html/pages/sidebar-menu/icons.html‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,21 +7,25 @@
77

88
{% block page %}
99
<h1>{{ title }}</h1>
10+
<p>Add icons to <a href="index.html">sidebar menus</a>.</p>
1011

1112
<div class="card card-block">
1213
<ul class="nav nav-pills">
1314
<li class="nav-item">
14-
<a href="#icons-basic" data-toggle="pill" class="nav-link active">Usage</a>
15+
<a href="#usage" data-toggle="pill" class="nav-link active">Usage</a>
1516
</li>
1617
<li class="nav-item">
17-
<a href="#icons-css" data-toggle="pill" class="nav-link">CSS</a>
18+
<a href="#css" data-toggle="pill" class="nav-link">CSS</a>
19+
</li>
20+
<li class="nav-item">
21+
<a href="#sass" data-toggle="pill" class="nav-link">Sass</a>
1822
</li>
1923
<li class="nav-item">
2024
<a href="../demo/sidebar-menu-icons.html" target="_blank" class="nav-link">Demo</a>
2125
</li>
2226
</ul>
2327
<div class="tab-content">
24-
<div class="tab-pane active" id="icons-basic">
28+
<div class="tab-pane active" id="usage">
2529
{% include 'code/material-icons.html' %}
2630

2731
<h3>Usage</h3>
@@ -31,7 +35,7 @@ <h3>Usage</h3>
3135

3236
{% include 'code/sidebar-menu/icons.html' %}
3337
</div>
34-
<div class="tab-pane" id="icons-css">
38+
<div class="tab-pane" id="css">
3539
<div class="table-responsive">
3640
<table class="table table-sm">
3741
<thead>
@@ -45,10 +49,47 @@ <h3>Usage</h3>
4549
<td><code>.sidebar-menu-icon</code></td>
4650
<td>The sidebar menu icon</td>
4751
</tr>
52+
<tr>
53+
<td><code>.material-icons</code></td>
54+
<td>Required on <code>.sidebar-menu-icon</code> elements when using <a href="https://design.google.com/icons/">Material icons</a></td>
55+
</tr>
4856
</tbody>
4957
</table>
5058
</div>
5159
</div>
60+
<div class="tab-pane" id="sass">
61+
<blockquote>
62+
You can customize sidebar menu icons with the following Sass variables.
63+
</blockquote>
64+
<div class="table-responsive">
65+
<table class="table table-sm">
66+
<thead>
67+
<tr>
68+
<th width="250">Sass variable</th>
69+
<th>Description</th>
70+
<th class="text-xs-center" width="200">Default value</th>
71+
</tr>
72+
</thead>
73+
<tbody>
74+
<tr>
75+
<td><code>$sm-icon-font-size</code></td>
76+
<td>Defines the base font size in <code>px</code> for sidebar menu icons</td>
77+
<td class="text-xs-center"><code>24px</code></td>
78+
</tr>
79+
<tr>
80+
<td><code>$sm-icon-margin</code></td>
81+
<td>Defines the margin for sidebar menu icons</td>
82+
<td class="text-xs-center"><code>$sm-spacing-x * 0.4</code></td>
83+
</tr>
84+
</tbody>
85+
</table>
86+
</div>
87+
88+
<blockquote>
89+
<h3>See also</h3>
90+
Sidebar menu icons in the context of <a href="submenu.html#sass">sidebar submenus</a>.
91+
</blockquote>
92+
</div>
5293
</div>
5394
</div>
5495

0 commit comments

Comments
 (0)