Commit 9d74eb46 authored by Phil Hughes's avatar Phil Hughes

Increased speed of sidebar transition

parent e3529d54
...@@ -275,8 +275,12 @@ $ -> ...@@ -275,8 +275,12 @@ $ ->
if $.cookie('pin_nav') is 'true' if $.cookie('pin_nav') is 'true'
$.cookie 'pin_nav', 'false' $.cookie 'pin_nav', 'false'
$('.page-with-sidebar').removeClass('page-sidebar-pinned') $('.page-with-sidebar')
$('.navbar-fixed-top').removeClass('header-pinned-nav') .removeClass('page-sidebar-pinned')
.toggleClass('page-sidebar-collapsed page-sidebar-expanded')
$('.navbar-fixed-top')
.removeClass('header-pinned-nav')
.toggleClass('header-collapsed header-expanded')
else else
$.cookie 'pin_nav', 'true' $.cookie 'pin_nav', 'true'
$('.page-with-sidebar').addClass('page-sidebar-pinned') $('.page-with-sidebar').addClass('page-sidebar-pinned')
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
* *
*/ */
header { header {
transition-duration: .3s; transition: padding $sidebar-transition-duration;
&.navbar-empty { &.navbar-empty {
height: $header-height; height: $header-height;
...@@ -103,9 +103,7 @@ header { ...@@ -103,9 +103,7 @@ header {
.header-content { .header-content {
position: relative; position: relative;
height: $header-height; height: $header-height;
padding-right: 40px;
padding-left: 30px; padding-left: 30px;
transition-duration: .3s;
@media (min-width: $screen-sm-min) { @media (min-width: $screen-sm-min) {
padding-right: 0; padding-right: 0;
...@@ -193,18 +191,6 @@ header { ...@@ -193,18 +191,6 @@ header {
} }
} }
.header-collapsed {
margin-left: 0;
.header-content {
@media (min-width: $screen-sm-max) {
padding-left: 30px;
transition-duration: .3s;
}
}
}
.tanuki-shape { .tanuki-shape {
transition: all 0.8s; transition: all 0.8s;
......
...@@ -251,7 +251,7 @@ ...@@ -251,7 +251,7 @@
z-index: 11; z-index: 11;
background: $background-color; background: $background-color;
border-bottom: 1px solid $border-color; border-bottom: 1px solid $border-color;
transition-duration: .3s; transition: padding $sidebar-transition-duration;
text-align: center; text-align: center;
.container-fluid { .container-fluid {
......
.page-with-sidebar { .page-with-sidebar {
padding-top: $header-height; padding-top: $header-height;
transition-duration: .3s; transition: padding $sidebar-transition-duration;
.sidebar-wrapper { .sidebar-wrapper {
position: fixed; position: fixed;
...@@ -8,7 +8,8 @@ ...@@ -8,7 +8,8 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
height: 100%; height: 100%;
transition-duration: .3s; overflow: hidden;
transition: width $sidebar-transition-duration;
} }
} }
...@@ -24,6 +25,7 @@ ...@@ -24,6 +25,7 @@
.content-wrapper { .content-wrapper {
width: 100%; width: 100%;
transition: padding $sidebar-transition-duration;
.container-fluid { .container-fluid {
background: #fff; background: #fff;
...@@ -44,13 +46,9 @@ ...@@ -44,13 +46,9 @@
bottom: 0; bottom: 0;
width: $sidebar_width; width: $sidebar_width;
overflow: hidden; overflow: hidden;
transition-duration: .3s;
.username {
margin-left: 10px;
font-size: 16px; font-size: 16px;
line-height: 36px; line-height: 36px;
} transition: width $sidebar-transition-duration, padding $sidebar-transition-duration;
} }
...@@ -68,8 +66,7 @@ ...@@ -68,8 +66,7 @@
position: absolute; position: absolute;
top: 50px; top: 50px;
bottom: 65px; bottom: 65px;
width: 100%; width: $sidebar_width;
transition-duration: .3s;
overflow-y: auto; overflow-y: auto;
overflow-x: hidden; overflow-x: hidden;
...@@ -99,11 +96,9 @@ ...@@ -99,11 +96,9 @@
outline: none; outline: none;
white-space: nowrap; white-space: nowrap;
&:hover { &:hover,
text-decoration: none; &:active,
} &:focus {
&:active, &:focus {
text-decoration: none; text-decoration: none;
} }
...@@ -115,10 +110,6 @@ ...@@ -115,10 +110,6 @@
svg { svg {
margin-right: 13px; margin-right: 13px;
} }
&.back-link i {
transition-duration: .3s;
}
} }
} }
...@@ -129,20 +120,12 @@ ...@@ -129,20 +120,12 @@
} }
} }
.sidebar-subnav {
margin-left: 0;
padding-left: 0;
li {
list-style: none;
}
}
.collapse-nav { .collapse-nav {
width: 100%; width: 100%;
position: absolute;; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
min-height: 50px;
padding: 5px 0; padding: 5px 0;
font-size: 18px; font-size: 18px;
background: transparent; background: transparent;
...@@ -187,38 +170,6 @@ ...@@ -187,38 +170,6 @@
.sidebar-wrapper { .sidebar-wrapper {
width: 0; width: 0;
.nav-sidebar {
width: 0;
li {
width: auto;
a {
span {
display: none;
}
}
}
}
.collapse-nav a {
width: 0;
i {
display: none;
}
}
.sidebar-user {
width: 0;
padding-left: 0;
padding-right: 0;
.username {
display: none;
}
}
} }
} }
...@@ -240,6 +191,14 @@ ...@@ -240,6 +191,14 @@
header.header-pinned-nav { header.header-pinned-nav {
@media (min-width: $screen-lg-min) { @media (min-width: $screen-lg-min) {
padding-left: ($sidebar_width + $gl-padding); padding-left: ($sidebar_width + $gl-padding);
.side-nav-toggle {
display: none;
}
.header-content {
padding-left: 0;
}
} }
} }
......
...@@ -6,6 +6,7 @@ $sidebar_width: 220px; ...@@ -6,6 +6,7 @@ $sidebar_width: 220px;
$gutter_collapsed_width: 62px; $gutter_collapsed_width: 62px;
$gutter_width: 290px; $gutter_width: 290px;
$gutter_inner_width: 258px; $gutter_inner_width: 258px;
$sidebar-transition-duration: .15s;
/* /*
* UI elements * UI elements
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment