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:
parent
e5d53dbad3
commit
4bbd07075c
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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;
|
|
@ -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));
|
Loading…
Reference in New Issue