opendev
/
storyboard-webclient
Code Issues Proposed changes

Redesign the sidebar to neaten code and improve contrast 

This commit completely rewrites the sidebar to use much cleaner
html, and simple to understand and maintain styling. The new
sidebar also has higher contrast for its contents and active
item. The scrolling behaviour still exists for some combinations
of permissions and screen size, but is made less painful since
only the overflowing part of the navbar now scrolls.

Change-Id: Ic9b71c9bfe03b8f324c8e36fa4dfd0266a2dcfcb
This commit is contained in:
Adam Coldrick 2018-03-01 17:17:53 +00:00
parent e5d53dbad3
commit 4bbd07075c
8 changed files with 316 additions and 443 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/app/admin/template/admin_submenu.html
View File

@ -13,15 +13,13 @@
~ License for the specific language governing permissions and limitations
~ under the License.
-->
<ul class="nav nav-pills nav-stacked text-center">
<li active-path="^\/admin/user.*">
<a href="#!/admin/user" title="Users">
<i class="fa fa-sb-user fa-lg"></i>
</a>
</li>
<li active-path="^\/admin/team.*">
<a href="#!/admin/team" title="Teams">
<i class="fa fa-sb-team fa-lg"></i>
</a>
</li>
</ul>
<a href="#!/admin/user"
active-path="^\/admin/user.*"
title="Users">
<i class="fa fa-sb-user fa-lg"></i>
</a>
<a href="#!/admin/team"
active-path="^\/admin/team.*"
title="Teams">
<i class="fa fa-sb-team fa-lg"></i>
</a>

32
src/app/dashboard/template/submenu.html
View File

@ -13,20 +13,18 @@
~ License for the specific language governing permissions and limitations
~ under the License.
-->
<ul class="nav nav-pills nav-stacked text-center">
<li active-path="^\/dashboard/stories.*">
<a href="#!/dashboard/stories" title="Stories">
<i class="fa fa-sb-story fa-lg"></i>
</a>
</li>
<li active-path="^\/dashboard/boards.*">
<a href="#!/dashboard/boards" title="Boards and Worklists">
<i class="fa fa-sb-board fa-lg"></i>
</a>
</li>
<li active-path="^\/dashboard/subscriptions.*">
<a href="#!/dashboard/subscriptions" title="Subscriptions">
<i class="fa fa-star fa-lg"></i>
</a>
</li>
</ul>
<a href="#!/dashboard/stories"
active-path="^\/dashboard/stories.*"
title="Stories">
<i class="fa fa-sb-story fa-lg"></i>
</a>
<a href="#!/dashboard/boards"
active-path="^\/dashboard/boards.*"
title="Boards and Worklists">
<i class="fa fa-sb-board fa-lg"></i>
</a>
<a href="#!/dashboard/subscriptions"
active-path="^\/dashboard/subscriptions.*"
title="Subscriptions">
<i class="fa fa-star fa-lg"></i>
</a>

23
src/app/profile/template/profile_submenu.html
View File

@ -13,16 +13,13 @@
~ License for the specific language governing permissions and limitations
~ under the License.
-->
<ul class="nav nav-pills nav-stacked text-center">
<li active-path="^\/profile/preferences.*">
<a href="#!/profile/preferences" title="Preferences">
<i class="fa fa-sb-profile-preferences fa-lg"></i>
</a>
</li>
<li active-path="^\/profile/tokens.*">
<a href="#!/profile/tokens" title="Authentication Tokens">
<i class="fa fa-sb-profile-tokens fa-lg"></i>
</a>
</li>
</ul>
<a href="#!/profile/preferences"
active-path="^\/profile/preferences.*"
title="Preferences">
<i class="fa fa-sb-profile-preferences fa-lg"></i>
</a>
<a href="#!/profile/tokens"
active-path="^\/profile/tokens.*"
title="Authentication Tokens">
<i class="fa fa-sb-profile-tokens fa-lg"></i>
</a>

159
src/app/storyboard/template/side_menu.html
View File

@ -1,5 +1,5 @@
<!--
~ Copyright (c) 2013 Hewlett-Packard Development Company, L.P.
~ Copyright (c) 2018 Adam Coldrick
~
~ Licensed under the Apache License, Version 2.0 (the "License"); you may
~ not use this file except in compliance with the License. You may obtain
@ -14,96 +14,67 @@
~ under the License.
-->
<nav class="navbar navbar-inverse navbar-fixed-side
navbar-fixed-side-header-offset"
role="navigation"
ng-class="{'navbar-fixed-side-has-submenu': hasSubmenu}">
<div class="nav-main">
<ul class="nav nav-pills nav-stacked text-center">
<li active-path="^\/search.*">
<a href="#!/search">
<i class="fa fa-search fa-lg visible-sm visible-xs"></i>
<i class="fa fa-search fa-3x visible-lg visible-md"></i>
<small class="visible-lg visible-md">Search</small>
</a>
</li>
<li class="nav-divider"></li>
<li active-path="^\/(dashboard\/.*)?$" ng-if="isLoggedIn">
<a href="#!/">
<i class="fa fa-tachometer-alt fa-lg visible-sm visible-xs"></i>
<i class="fa fa-tachometer-alt fa-3x visible-lg visible-md"></i>
<small class="visible-lg visible-md">Dashboard</small>
</a>
</li>
<li active-path="^\/page\/about$" ng-if="!isLoggedIn">
<a href="#!/page/about">
<i class="fa fa-question-circle fa-lg visible-sm visible-xs"></i>
<i class="fa fa-question-circle fa-3x visible-lg visible-md"></i>
<small class="visible-lg visible-md">About</small>
</a>
</li>
<li active-path="^\/board\/*">
<a href="#!/board/list">
<i class="fa fa-sb-board fa-lg visible-sm visible-xs"></i>
<i class="fa fa-sb-board fa-3x visible-lg visible-md"></i>
<small class="visible-lg visible-md">Worklists & Boards</small>
</a>
</li>
<li active-path="^\/project_group\/*">
<a href="#!/project_group">
<i class="fa fa-sb-project-group fa-lg visible-sm visible-xs"></i>
<i class="fa fa-sb-project-group fa-3x visible-lg visible-md"></i>
<small class="visible-lg visible-md">Project Groups</small>
</a>
</li>
<li active-path="^\/project[^_]\/*">
<a href="#!/project">
<i class="fa fa-sb-project fa-lg visible-sm visible-xs"></i>
<i class="fa fa-sb-project fa-3x visible-lg visible-md"></i>
<small class="visible-lg visible-md">Projects</small>
</a>
</li>
<li active-path="^\/story.*">
<a href="#!/story">
<i class="fa fa-sb-story fa-lg visible-sm visible-xs"></i>
<i class="fa fa-sb-story fa-3x visible-lg visible-md"></i>
<small class="visible-lg visible-md">Stories</small>
</a>
</li>
<li class="nav-divider" ng-if="isLoggedIn"></li>
<li active-path="^\/profile.*" ng-if="isLoggedIn">
<a href="#!/profile">
<i class="fa fa-sb-profile fa-lg visible-sm visible-xs"></i>
<i class="fa fa-sb-profile fa-3x visible-lg visible-md"></i>
<small class="visible-lg visible-md">Profile</small>
</a>
</li>
<li active-path="^\/admin.*" permission="is_superuser">
<a href="#!/admin">
<i class="fa fa-sb-admin fa-lg visible-sm visible-xs"></i>
<i class="fa fa-sb-admin fa-3x visible-lg visible-md"></i>
<small class="visible-lg visible-md">Admin</small>
</a>
</li>
<li class="nav-divider visible-xs"></li>
</ul>
<ul class="list-unstyled nav-stacked">
<li active-path="^\/page\/about.*$" ng-if="isLoggedIn">
<a href="#!/page/about">
<i class="fa fa-question-circle visible-xs text-center"></i>
<small class="hidden-xs">About</small>
</a>
</li>
<li>
<a href="http://www.apache.org/licenses/LICENSE-2.0"
target="_blank">
<i class="fa fa-exclamation-circle visible-xs text-center"></i>
<small class="hidden-xs">License</small>
</a>
</li>
</ul>
<div ui-view="submenu"
class="nav-submenu">
</div>
</div>
</nav>
<nav class="sidebar text-center" role="navigation"
ng-class="{'has-submenu': hasSubmenu}">
<a href="#!/search" active-path="^\/search.*">
<i class="fa fa-search fa-2x visible-lg visible-md"></i>
<i class="fa fa-search fa-lg visible-sm visible-xs"></i>
<p class="visible-lg visible-md">Search</p>
</a>
<hr>
<a href="#!/" active-path="^\/(dashboard\/.*)?$" ng-if="isLoggedIn">
<i class="fa fa-tachometer-alt fa-2x visible-lg visible-md"></i>
<i class="fa fa-tachometer-alt fa-lg visible-sm visible-xs"></i>
<p class="visible-lg visible-md">Dashboard</p>
</a>
<a href="#!/page/about" active-path="^\/page\/about$" ng-if="!isLoggedIn">
<i class="fa fa-question-circle fa-2x visible-lg visible-md"></i>
<i class="fa fa-question-circle fa-lg visible-sm visible-xs"></i>
<p class="visible-lg visible-md">About</p>
</a>
<a href="#!/board/list" active-path="^\/board\/*">
<i class="fa fa-sb-board fa-2x visible-lg visible-md"></i>
<i class="fa fa-sb-board fa-lg visible-sm visible-xs"></i>
<p class="visible-lg visible-md">Worklists & Boards</p>
</a>
<a href="#!/project_group" active-path="^\/project_group\/*">
<i class="fa fa-sb-project-group fa-2x visible-lg visible-md"></i>
<i class="fa fa-sb-project-group fa-lg visible-sm visible-xs"></i>
<p class="visible-lg visible-md">Project Groups</p>
</a>
<a href="#!/project" active-path="^\/project[^_]\/*">
<i class="fa fa-sb-project fa-2x visible-lg visible-md"></i>
<i class="fa fa-sb-project fa-lg visible-sm visible-xs"></i>
<p class="visible-lg visible-md">Projects</p>
</a>
<a href="#!/story" active-path="^\/story.*">
<i class="fa fa-sb-story fa-2x visible-lg visible-md"></i>
<i class="fa fa-sb-story fa-lg visible-sm visible-xs"></i>
<p class="visible-lg visible-md">Stories</p>
</a>
<hr>
<a href="#!/profile" active-path="^\/profile.*" ng-if="isLoggedIn">
<i class="fa fa-sb-profile fa-2x visible-lg visible-md"></i>
<i class="fa fa-sb-profile fa-lg visible-sm visible-xs"></i>
<p class="visible-lg visible-md">Profile</p>
</a>
<a href="#!/admin" active-path="^\/admin.*" permission="is_superuser">
<i class="fa fa-sb-admin fa-2x visible-lg visible-md"></i>
<i class="fa fa-sb-admin fa-lg visible-sm visible-xs"></i>
<p class="visible-lg visible-md">Admin</p>
</a>
<a href="#!/page/about" active-path="^\/page\/about$" ng-if="isLoggedIn">
<i class="fa fa-question-circle visible-xs"></i>
<p class="hidden-xs">About</p>
</a>
<a href="http://www.apache.org/licenses/LICENSE-2.0"
target="_blank">
<i class="fa fa-exclamation-circle visible-xs"></i>
<p class="hidden-xs">License</p>
</a>
<nav ui-view="submenu" class="submenu text-center"></nav>
</nav>

16
src/theme/base/_body.scss
View File

@ -24,40 +24,40 @@ body {
@media (max-width: $screen-xs-max) {
body {
margin-right: $navbar-fixed-side-width-xs;
margin-right: $sidebar-width-xs;
&.submenu {
margin-right: ($navbar-fixed-side-width-xs + $navbar-fixed-side-submenu-width-xs);
margin-right: ($sidebar-width-xs + $sidebar-submenu-width-xs);
}
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
body {
margin-left: $navbar-fixed-side-width-sm;
margin-left: $sidebar-width-sm;
&.submenu {
margin-left: ($navbar-fixed-side-width-sm + $navbar-fixed-side-submenu-width-sm);
margin-left: ($sidebar-width-sm + $sidebar-submenu-width-sm);
}
}
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
body {
margin-left: $navbar-fixed-side-width-md;
margin-left: $sidebar-width-md;
&.submenu {
margin-left: ($navbar-fixed-side-width-md + $navbar-fixed-side-submenu-width-md);
margin-left: ($sidebar-width-md + $sidebar-submenu-width-md);
}
}
}
@media (min-width: $screen-lg-min) {
body {
margin-left: $navbar-fixed-side-width-lg;
margin-left: $sidebar-width-lg;
&.submenu {
margin-left: ($navbar-fixed-side-width-lg + $navbar-fixed-side-submenu-width-lg);
margin-left: ($sidebar-width-lg + $sidebar-submenu-width-lg);
}
}
}

396
src/theme/base/bootstrap/_navbar.scss
View File

@ -1,262 +1,156 @@
/**
* A side-locked navbar.
*/
.navbar {
nav.sidebar {
color: $sidebar-color;
background-color: $sidebar-bg;
box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.25) inset;
width: $sidebar-width-lg;
height: calc(100vh - 50px);
position: fixed;
top: $navbar-height;
left: $sidebar-left-lg;
padding: $sidebar-padding-lg;
font-size: $sidebar-font-size;
overflow-y: scroll;
.pull-right {
margin-right: 5px;
p {
margin-bottom: 0px;
margin-top: $sidebar-item-spacing;
&:first-child {
margin-top: 0px;
}
}
.fa-2x{
font-size: 3rem;
}
hr {
width: $sidebar-divider-width;
border-color: $sidebar-divider-color;
border-width: 2px;
margin: $sidebar-divider-margin auto;
}
a {
color: $sidebar-color;
position: relative;
padding: $sidebar-item-padding-lg;
margin-bottom: 5px;
width: 100%;
display: block;
transition: color 100ms ease-in-out;
border-radius: $sidebar-item-border-radius;
p {
color: $sidebar-link-color;
}
&.navbar-fixed-side {
// Add this class if you want to add an offset for the header.
&.navbar-fixed-side-header-offset {
top: $navbar-height;
}
// Add this class if you want to add an offset for the footer.
&.navbar-fixed-side-footer-offset {
bottom: $navbar-height;
}
@media (max-width: $screen-xs-max) {
width: $navbar-fixed-side-width-xs;
&.navbar-fixed-side-has-submenu {
width: ($navbar-fixed-side-width-xs + $navbar-fixed-side-submenu-width-xs);
}
top: 0px;
right: 0px;
bottom: 0px;
.nav-submenu {
position: absolute;
top: 0px;
left: -40px;
bottom: 0px;
width: $navbar-fixed-side-submenu-width-md;
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
width: $navbar-fixed-side-width-sm;
&.navbar-fixed-side-has-submenu {
width: ($navbar-fixed-side-width-sm + $navbar-fixed-side-submenu-width-sm);
}
top: 0px;
left: 0px;
bottom: 0px;
.nav-submenu {
position: absolute;
top: 0px;
right: -40px;
bottom: 0px;
width: $navbar-fixed-side-submenu-width-md;
}
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
width: $navbar-fixed-side-width-md;
&.navbar-fixed-side-has-submenu {
width: ($navbar-fixed-side-width-md + $navbar-fixed-side-submenu-width-md);
}
top: 0px;
left: 0px;
bottom: 0px;
.nav-submenu {
position: absolute;
top: 0px;
right: -40px;
bottom: 0px;
width: $navbar-fixed-side-submenu-width-md;
}
}
@media (min-width: $screen-lg-min) {
width: $navbar-fixed-side-width-lg;
&.navbar-fixed-side-has-submenu {
width: ($navbar-fixed-side-width-lg + $navbar-fixed-side-submenu-width-lg);
}
top: 0px;
left: 0px;
bottom: 0px;
.nav-submenu {
position: absolute;
top: 0px;
right: -40px;
bottom: 0px;
width: $navbar-fixed-side-submenu-width-md;
}
}
.nav-main {
padding: 5px 0px 5px 0px;
position: relative;
min-height: 100%;
}
.nav-submenu {
display: none;
background-color: $navbar-inverse-link-active-bg;
.nav.nav-pills {
> li {
margin-right: 0px;
margin-left: 0px;
> a {
border-radius: 0px;
background: none;
&:hover {
background: none;
}
}
}
}
}
overflow: auto;
border-radius: 0px;
position: fixed;
margin: 0px;
&.navbar-inverse .nav {
> li {
margin-right: 5px;
margin-left: 5px;
> a {
color: $navbar-inverse-link-color;
background: $navbar-inverse-bg;
border-color: $navbar-inverse-border;
padding: 10px 5px;
}
> a:hover {
color: $navbar-inverse-link-hover-color;
background: $navbar-inverse-link-hover-bg;
border-color: $navbar-inverse-border;
}
> a:active {
color: $navbar-inverse-link-active-color;
background: $navbar-inverse-link-active-bg;
border-color: $navbar-inverse-border;
}
&.active {
> a {
color: $navbar-inverse-link-active-color;
background: $navbar-inverse-link-active-bg;
}
> a:hover {
color: $navbar-inverse-link-active-color;
background: $navbar-inverse-link-active-bg;
}
> a:active {
color: $navbar-inverse-link-active-color;
background: $navbar-inverse-link-active-bg;
}
}
}
li.active {
background-color: $navbar-inverse-bg;
}
}
a {
color: $navbar-inverse-link-color;
&:hover {
color: $navbar-inverse-link-hover-color;
}
&:active {
color: $navbar-inverse-link-active-color;
}
}
.nav-bottom {
position: absolute;
bottom: 0px;
}
&.navbar-fixed-side-has-submenu {
.nav-submenu {
display: inherit;
}
@media (max-width: $screen-xs-max) {
.nav-main {
margin-left: $navbar-fixed-side-submenu-width-xs;
a {
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
}
li {
&.active {
margin-left: 0px;
a {
padding-left: 10px;
}
}
}
}
}
@media (min-width: $screen-sm-min) and (max-width: $screen-sm-max) {
.nav-main {
margin-right: $navbar-fixed-side-submenu-width-sm;
}
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
.nav-main {
margin-right: $navbar-fixed-side-submenu-width-md;
}
}
@media (min-width: $screen-lg-min) {
.nav-main {
margin-right: $navbar-fixed-side-submenu-width-lg;
}
}
@media (min-width: $screen-sm-min) {
.nav-main {
li {
&.active {
margin-right: 0px;
a {
padding-right: 10px;
}
}
}
a {
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
}
}
}
&.active {
z-index: 1000;
background-color: $sidebar-link-color;
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.75);
}
&:hover, &.active {
color: $sidebar-link-hover-color;
text-decoration: none;
p {
color: $sidebar-link-hover-color;
}
}
&:hover {
background-color: $sidebar-link-hover-bg;
}
}
&.has-submenu {
box-shadow: none;
}
}
// Stacked pills
.nav-stacked {
> li {
+ li {
margin-top: 5px;
}
nav.has-submenu > nav.submenu {
position: fixed;
height: 100vh;
width: $sidebar-submenu-width-lg;
top: $navbar-height;
left: $sidebar-width-lg;
background-color: $sidebar-submenu-bg;
box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.25) inset;
padding-top: $sidebar-submenu-top-offset;
a {
display: block;
color: $sidebar-submenu-color;
width: 100%;
&:hover, &.active {
color: $sidebar-submenu-hover-color;
text-decoration: none;
background-color: $sidebar-submenu-hover-bg;
border-radius: $sidebar-submenu-item-border-radius;
box-shadow: none;
}
}
}
@media (max-width: $screen-xs-max) {
nav.sidebar {
width: $sidebar-width-xs;
left: $sidebar-left-xs;
padding: $sidebar-padding-xs;
box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.25) inset;
a {
padding: $sidebar-item-padding-xs;
}
&.has-submenu {
width: $sidebar-width-xs;
box-shadow: none;
}
}
nav.has-submenu > nav.submenu {
left: calc(100% - #{$sidebar-width-xs} -
#{$sidebar-submenu-width-xs});
box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.25) inset;
}
}
@media (max-width: $screen-sm-max) and (min-width: $screen-sm-min) {
nav.sidebar {
width: $sidebar-width-sm;
left: $sidebar-left-sm;
padding: $sidebar-padding-sm;
a {
padding: $sidebar-item-padding-sm;
}
}
nav.has-submenu > nav.submenu {
width: $sidebar-submenu-width-sm;
left: $sidebar-width-sm;
}
}
@media (max-width: $screen-md-max) and (min-width: $screen-md-min) {
nav.sidebar {
width: $sidebar-width-md;
left: $sidebar-left-md;
padding: $sidebar-padding-md;
a {
padding: $sidebar-item-padding-md;
}
}
nav.has-submenu > nav.submenu {
width: $sidebar-submenu-width-md;
left: $sidebar-width-md;
}
}

37
src/theme/storyboard/_bootstrap_overrides.scss
View File

@ -45,39 +45,4 @@ $navbar-default-brand-hover-bg: transparent;
// Navbar toggle
$navbar-default-toggle-hover-bg: #ddd;
$navbar-default-toggle-icon-bar-bg: #888;
$navbar-default-toggle-border-color: #ddd;
// Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-bg: #222;
$navbar-inverse-border: darken($navbar-inverse-bg, 10%);
// Inverted navbar links
// $navbar-inverse-link-color: $gray-light;
$navbar-inverse-link-hover-color: #fff;
$navbar-inverse-link-hover-bg: transparent;
$navbar-inverse-link-active-color: $navbar-inverse-link-hover-color;
$navbar-inverse-link-active-bg: lighten($navbar-inverse-bg, 20%);
$navbar-inverse-link-disabled-color: #444;
$navbar-inverse-link-disabled-bg: transparent;
// Inverted navbar brand label
$navbar-inverse-brand-hover-color: #fff;
$navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
$navbar-inverse-toggle-hover-bg: #333;
$navbar-inverse-toggle-icon-bar-bg: #fff;
$navbar-inverse-toggle-border-color: #333;
// Sizes for the side navbar at different container sizes.
$navbar-fixed-side-width-xs: 50px;
$navbar-fixed-side-width-sm: 50px;
$navbar-fixed-side-width-md: 90px;
$navbar-fixed-side-width-lg: 90px;
// Sizes for the side navbar submenu at different container sizes.
$navbar-fixed-side-submenu-width-xs: 40px;
$navbar-fixed-side-submenu-width-sm: 40px;
$navbar-fixed-side-submenu-width-md: 40px;
$navbar-fixed-side-submenu-width-lg: 40px;
$navbar-default-toggle-border-color: #ddd;

74
src/theme/storyboard/_theme.scss
View File

@ -21,19 +21,69 @@ $navbar-border-radius: $border-radius-base;
$navbar-padding-horizontal: floor(($grid-gutter-width / 2));
$navbar-padding-vertical: (($navbar-height - $line-height-computed) / 2);
// Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-color: $gray-light;
$navbar-inverse-bg: #222;
$navbar-inverse-border: darken($navbar-inverse-bg, 10%);
// Sidebar
// -------
// Inverted navbar links
$navbar-inverse-link-color: $gray-light;
$sidebar-font-size: 1.2rem;
// Inverted navbar brand label
$navbar-inverse-brand-color: $navbar-inverse-link-color;
// Sidebar colors
$sidebar-bg: #333;
$sidebar-color: #aaa;
$sidebar-link-color: $white;
$sidebar-link-hover-color: #333;
$sidebar-link-hover-bg: #bbb;
$sidebar-link-active-color: $sidebar-link-hover-color;
$sidebar-link-active-bg: $white;
// Sizes for the side navbar at different container sizes.
$sidebar-width-xs: 50px;
$sidebar-width-sm: 70px;
$sidebar-width-md: 100px;
$sidebar-width-lg: 100px;
// Position of topleft corner for the sidebar
// top will be $navbar-height
$sidebar-left-xs: calc(100% - #{$sidebar-width-xs});
$sidebar-left-sm: 0;
$sidebar-left-md: 0;
$sidebar-left-lg: 0;
// Padding for the main sidebar menu
$sidebar-padding-xs: 5px;
$sidebar-padding-sm: 5px;
$sidebar-padding-md: 10px;
$sidebar-padding-lg: 10px;
// Sidebar items
$sidebar-divider-margin: 5px;
$sidebar-divider-width: 80%;
$sidebar-divider-color: #777;
$sidebar-item-border-radius: 5px;
$sidebar-item-spacing: 0.4em;
$sidebar-item-padding-xs: 15px 5px;
$sidebar-item-padding-sm: 15px 5px;
$sidebar-item-padding-md: 10px;
$sidebar-item-padding-lg: 10px;
// Sidebar submenu
// ---------------
$sidebar-submenu-color: #ddd;
$sidebar-submenu-bg: #555;
$sidebar-submenu-hover-color: $white;
$sidebar-submenu-hover-bg: #777;
$sidebar-submenu-item-border-radius: 0px;
$sidebar-submenu-top-offset: 20px;
// Sizes for the side navbar submenu at different container sizes.
$sidebar-submenu-width-xs: 40px;
$sidebar-submenu-width-sm: 40px;
$sidebar-submenu-width-md: 40px;
$sidebar-submenu-width-lg: 40px;
// Form Controls
// -------------
$input-height-h1: (ceil($font-size-h1 * $line-height-large) + ($padding-base-vertical * 2));
$input-height-h2: (ceil($font-size-h2 * $line-height-large) + ($padding-base-vertical * 2));
$input-height-h3: (ceil($font-size-h3 * $line-height-base) + ($padding-base-vertical * 2));
@ -42,6 +92,6 @@ $input-height-h5: (ceil($font-size-h5 * $line-height-base) + ($paddi
$input-height-h6: (ceil($font-size-h6 * $line-height-base) + ($padding-base-vertical * 2));
// == Container sizes
$container-tablet: ((720px + $grid-gutter-width - $navbar-fixed-side-width-sm));
$container-desktop: ((940px + $grid-gutter-width - $navbar-fixed-side-width-md));
$container-large-desktop: ((1140px + $grid-gutter-width - $navbar-fixed-side-width-lg));
$container-tablet: ((720px + $grid-gutter-width - $sidebar-width-sm));
$container-desktop: ((940px + $grid-gutter-width - $sidebar-width-md));
$container-large-desktop: ((1140px + $grid-gutter-width - $sidebar-width-lg));