All the following classes should be applied on .sidebar-menu
and .sidebar-submenu
elements.
CSS Class |
Description |
.sm-condensed |
Applies a smaller spacing to sidebar menu buttons |
.sm-bordered |
Applies a border bottom to a .sidebar-menu or .sidebar-submenu |
.sm-item-bordered |
Applies a border bottom to .sidebar-menu or .sidebar-submenu items |
.sm-active-button-bg |
Applies a background color to active sidebar menu items |
.sm-icons-right |
Aligns the sidebar menu icons to the right |
.sm-icons-block |
Wrap the sidebar menu icons into a square block with background color |
.sm-indent |
Increase the horizontal spacing of .sidebar-menu or .sidebar-submenu buttons |
You can customize sidebar utilities with the following Sass variables.
.sm-condensed
Sass variable |
Description |
Default value |
$sm-condensed-button-height |
Defines the height in px for sidebar menu buttons when using .sm-condensed |
$sm-button-height - ($sm-button-height/4) |
$ssm-condensed-button-height |
Defines the height in px for sidebar submenu buttons when using .sm-condensed |
$ssm-button-height - ($ssm-button-height/4) |
.sm-bordered
Sass variable |
Description |
Default value |
$sidebar-dark-border-color |
Defines the default border color for sidebar elements when using the .sidebar-dark skin |
rgba(0, 0, 0, .15) |
$sidebar-light-border-color |
Defines the default border color for sidebar elements when using the .sidebar-light skin |
#e5e5e5 |
.sm-item-bordered
Sass variable |
Description |
Default value |
$sm-dark-item-border-color |
Defines the border color for sidebar menu items when using the .sidebar-dark skin |
$sidebar-dark-border-color |
$ssm-dark-item-border-color |
Defines the border color for sidebar submenu items when using the .sidebar-dark skin |
$sm-dark-item-border-color |
$sm-light-item-border-color |
Defines the border color for sidebar menu items when using the .sidebar-light skin |
$sidebar-light-border-color |
$ssm-light-item-border-color |
Defines the border color for sidebar submenu items when using the .sidebar-light skin |
$sm-light-item-border-color |
.sm-active-button-bg
Sass variable |
Description |
Default value |
$sm-dark-active-button-bg |
Defines the background color for active sidebar menu buttons when using the .sidebar-dark skin |
rgba(255, 255, 255, .12) |
$sm-dark-activebuttonbg-button-color |
Defines the text color for active sidebar menu buttons when using the .sidebar-dark skin |
#fff |
$sm-dark-activebuttonbg-icon-color |
Defines the icon text color for active sidebar menu buttons when using the .sidebar-dark skin |
$sm-dark-activebuttonbg-button-color |
$sm-light-active-button-bg |
Defines the background color for active sidebar menu buttons when using the .sidebar-light skin |
$brand-primary |
$sm-light-activebuttonbg-button-color |
Defines the text color for active sidebar menu buttons when using the .sidebar-light skin |
#fff |
$sm-light-activebuttonbg-icon-color |
Defines the icon text color for active sidebar menu buttons when using the .sidebar-light skin |
$sm-light-activebuttonbg-button-color |
.sm-active-button-bg and .sm-icons-block
Sass variable |
Description |
Default value |
$sm-dark-active-iconsblock-activebuttonbg-icon-bg |
Defines the icon background color for active sidebar menu buttons when using the .sidebar-dark skin |
$sm-dark-active-iconsblock-icon-bg |
$sm-light-active-iconsblock-activebuttonbg-icon-bg |
Defines the icon background color for active sidebar menu buttons when using the .sidebar-light skin |
$sm-light-active-iconsblock-icon-bg |
{% include 'code/material-icons.html' %}
Usage
{% include 'code/sidebar-menu/style.html' %}