bootstrap-layout
Version:
Bootstrap layout with sidebar navigation, sidebar skins, sidebar transition, custom scrollbars, sidebar menus and other advanced features and utilities
246 lines (237 loc) • 10.4 kB
HTML
---
title: Sidebar menu utilities
slug: sidebar-menu/utilities
path: ../
---
{% extends "layouts/default.html" %}
{% block page %}
<h1>{{ title }}</h1>
<p>You can modify the style of <a href="index.html">sidebar menus</a> and <a href="submenu.html">sidebar submenus</a> by using the following CSS helper classes.</p>
<div class="card card-block">
<ul class="nav nav-pills">
<li class="nav-item">
<a href="#css" data-toggle="pill" class="nav-link active">CSS</a>
</li>
<li class="nav-item">
<a href="#sass" data-toggle="pill" class="nav-link">Sass</a>
</li>
<li class="nav-item">
<a href="#usage" data-toggle="pill" class="nav-link">Usage</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Demos</a>
<div class="dropdown-menu">
<a class="dropdown-item" target="_blank" href="../demo/sidebar-menu-utilities-light.html">Sidebar light</a>
<a class="dropdown-item" target="_blank" href="../demo/sidebar-menu-utilities-dark.html">Sidebar dark</a>
</div>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="css">
<blockquote>
All the following classes should be applied on <code>.sidebar-menu</code> and <code>.sidebar-submenu</code> elements.
</blockquote>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th>CSS Class</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>.sm-condensed</code></td>
<td>Applies a smaller spacing to sidebar menu buttons</td>
</tr>
<tr>
<td><code>.sm-bordered</code></td>
<td>Applies a border bottom to a <code>.sidebar-menu</code> or <code>.sidebar-submenu</code></td>
</tr>
<tr>
<td><code>.sm-item-bordered</code></td>
<td>Applies a border bottom to <code>.sidebar-menu</code> or <code>.sidebar-submenu</code> items</td>
</tr>
<tr>
<td><code>.sm-active-button-bg</code></td>
<td>Applies a background color to active sidebar menu items</td>
</tr>
<tr>
<td><code>.sm-icons-right</code></td>
<td>Aligns the sidebar menu icons to the right</td>
</tr>
<tr>
<td><code>.sm-icons-block</code></td>
<td>Wrap the sidebar menu icons into a square block with background color</td>
</tr>
<tr>
<td><code>.sm-indent</code></td>
<td>Increase the horizontal spacing of <code>.sidebar-menu</code> or <code>.sidebar-submenu</code> buttons</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane" id="sass">
<blockquote>
You can customize sidebar utilities with the following Sass variables.
</blockquote>
<h3>.sm-condensed</h3>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="270">Sass variable</th>
<th>Description</th>
<th class="text-xs-center" width="200">Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sm-condensed-button-height</code></td>
<td>Defines the height in <code>px</code> for sidebar menu buttons when using <code>.sm-condensed</code></td>
<td class="text-xs-center"><code>$sm-button-height - ($sm-button-height/4)</code></td>
</tr>
<tr>
<td><code>$ssm-condensed-button-height</code></td>
<td>Defines the height in <code>px</code> for sidebar submenu buttons when using <code>.sm-condensed</code></td>
<td class="text-xs-center"><code>$ssm-button-height - ($ssm-button-height/4)</code></td>
</tr>
</tbody>
</table>
</div>
<h3>.sm-bordered</h3>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="270">Sass variable</th>
<th>Description</th>
<th class="text-xs-center" width="200">Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sidebar-dark-border-color</code></td>
<td>Defines the default border color for sidebar elements when using the <code>.sidebar-dark</code> skin</td>
<td class="text-xs-center"><code>rgba(0, 0, 0, .15)</code></td>
</tr>
<tr>
<td><code>$sidebar-light-border-color</code></td>
<td>Defines the default border color for sidebar elements when using the <code>.sidebar-light</code> skin</td>
<td class="text-xs-center"><code>#e5e5e5</code></td>
</tr>
</tbody>
</table>
</div>
<h3>.sm-item-bordered</h3>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="270">Sass variable</th>
<th>Description</th>
<th class="text-xs-center" width="200">Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sm-dark-item-border-color</code></td>
<td>Defines the border color for sidebar menu items when using the <code>.sidebar-dark</code> skin</td>
<td class="text-xs-center"><code>$sidebar-dark-border-color</code></td>
</tr>
<tr>
<td><code>$ssm-dark-item-border-color</code></td>
<td>Defines the border color for sidebar submenu items when using the <code>.sidebar-dark</code> skin</td>
<td class="text-xs-center"><code>$sm-dark-item-border-color</code></td>
</tr>
<tr>
<td><code>$sm-light-item-border-color</code></td>
<td>Defines the border color for sidebar menu items when using the <code>.sidebar-light</code> skin</td>
<td class="text-xs-center"><code>$sidebar-light-border-color</code></td>
</tr>
<tr>
<td><code>$ssm-light-item-border-color</code></td>
<td>Defines the border color for sidebar submenu items when using the <code>.sidebar-light</code> skin</td>
<td class="text-xs-center"><code>$sm-light-item-border-color</code></td>
</tr>
</tbody>
</table>
</div>
<h3>.sm-active-button-bg</h3>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="270">Sass variable</th>
<th>Description</th>
<th class="text-xs-center" width="200">Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sm-dark-active-button-bg</code></td>
<td>Defines the background color for active sidebar menu buttons when using the <code>.sidebar-dark</code> skin</td>
<td class="text-xs-center"><code>rgba(255, 255, 255, .12)</code></td>
</tr>
<tr>
<td><code>$sm-dark-activebuttonbg-button-color</code></td>
<td>Defines the text color for active sidebar menu buttons when using the <code>.sidebar-dark</code> skin</td>
<td class="text-xs-center"><code>#fff</code></td>
</tr>
<tr>
<td><code>$sm-dark-activebuttonbg-icon-color</code></td>
<td>Defines the icon text color for active sidebar menu buttons when using the <code>.sidebar-dark</code> skin</td>
<td class="text-xs-center"><code>$sm-dark-activebuttonbg-button-color</code></td>
</tr>
<tr>
<td><code>$sm-light-active-button-bg</code></td>
<td>Defines the background color for active sidebar menu buttons when using the <code>.sidebar-light</code> skin</td>
<td class="text-xs-center"><code>$brand-primary</code></td>
</tr>
<tr>
<td><code>$sm-light-activebuttonbg-button-color</code></td>
<td>Defines the text color for active sidebar menu buttons when using the <code>.sidebar-light</code> skin</td>
<td class="text-xs-center"><code>#fff</code></td>
</tr>
<tr>
<td><code>$sm-light-activebuttonbg-icon-color</code></td>
<td>Defines the icon text color for active sidebar menu buttons when using the <code>.sidebar-light</code> skin</td>
<td class="text-xs-center"><code>$sm-light-activebuttonbg-button-color</code></td>
</tr>
</tbody>
</table>
</div>
<h3>.sm-active-button-bg and .sm-icons-block</h3>
<div class="table-responsive">
<table class="table table-sm">
<thead>
<tr>
<th width="270">Sass variable</th>
<th>Description</th>
<th class="text-xs-center" width="200">Default value</th>
</tr>
</thead>
<tbody>
<tr>
<td><code>$sm-dark-active-iconsblock-activebuttonbg-icon-bg</code></td>
<td>Defines the icon background color for active sidebar menu buttons when using the <code>.sidebar-dark</code> skin</td>
<td class="text-xs-center"><code>$sm-dark-active-iconsblock-icon-bg</code></td>
</tr>
<tr>
<td><code>$sm-light-active-iconsblock-activebuttonbg-icon-bg</code></td>
<td>Defines the icon background color for active sidebar menu buttons when using the <code>.sidebar-light</code> skin</td>
<td class="text-xs-center"><code>$sm-light-active-iconsblock-icon-bg</code></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="tab-pane" id="usage">
{% include 'code/material-icons.html' %}
<h3>Usage</h3>
{% include 'code/sidebar-menu/style.html' %}
</div>
</div>
</div>
{% endblock %}