Increased speed of sidebar transition
This commit is contained in:
parent
e3529d5432
commit
9d74eb4622
5 changed files with 30 additions and 80 deletions
|
@ -275,8 +275,12 @@ $ ->
|
|||
|
||||
if $.cookie('pin_nav') is 'true'
|
||||
$.cookie 'pin_nav', 'false'
|
||||
$('.page-with-sidebar').removeClass('page-sidebar-pinned')
|
||||
$('.navbar-fixed-top').removeClass('header-pinned-nav')
|
||||
$('.page-with-sidebar')
|
||||
.removeClass('page-sidebar-pinned')
|
||||
.toggleClass('page-sidebar-collapsed page-sidebar-expanded')
|
||||
$('.navbar-fixed-top')
|
||||
.removeClass('header-pinned-nav')
|
||||
.toggleClass('header-collapsed header-expanded')
|
||||
else
|
||||
$.cookie 'pin_nav', 'true'
|
||||
$('.page-with-sidebar').addClass('page-sidebar-pinned')
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
*
|
||||
*/
|
||||
header {
|
||||
transition-duration: .3s;
|
||||
transition: padding $sidebar-transition-duration;
|
||||
|
||||
&.navbar-empty {
|
||||
height: $header-height;
|
||||
|
@ -103,9 +103,7 @@ header {
|
|||
.header-content {
|
||||
position: relative;
|
||||
height: $header-height;
|
||||
padding-right: 40px;
|
||||
padding-left: 30px;
|
||||
transition-duration: .3s;
|
||||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
padding-right: 0;
|
||||
|
@ -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 {
|
||||
transition: all 0.8s;
|
||||
|
||||
|
|
|
@ -251,7 +251,7 @@
|
|||
z-index: 11;
|
||||
background: $background-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
transition-duration: .3s;
|
||||
transition: padding $sidebar-transition-duration;
|
||||
text-align: center;
|
||||
|
||||
.container-fluid {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
.page-with-sidebar {
|
||||
padding-top: $header-height;
|
||||
transition-duration: .3s;
|
||||
transition: padding $sidebar-transition-duration;
|
||||
|
||||
.sidebar-wrapper {
|
||||
position: fixed;
|
||||
|
@ -8,7 +8,8 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
transition-duration: .3s;
|
||||
overflow: hidden;
|
||||
transition: width $sidebar-transition-duration;
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -24,6 +25,7 @@
|
|||
|
||||
.content-wrapper {
|
||||
width: 100%;
|
||||
transition: padding $sidebar-transition-duration;
|
||||
|
||||
.container-fluid {
|
||||
background: #fff;
|
||||
|
@ -44,13 +46,9 @@
|
|||
bottom: 0;
|
||||
width: $sidebar_width;
|
||||
overflow: hidden;
|
||||
transition-duration: .3s;
|
||||
|
||||
.username {
|
||||
margin-left: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 36px;
|
||||
}
|
||||
transition: width $sidebar-transition-duration, padding $sidebar-transition-duration;
|
||||
}
|
||||
|
||||
|
||||
|
@ -68,8 +66,7 @@
|
|||
position: absolute;
|
||||
top: 50px;
|
||||
bottom: 65px;
|
||||
width: 100%;
|
||||
transition-duration: .3s;
|
||||
width: $sidebar_width;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
|
||||
|
@ -99,11 +96,9 @@
|
|||
outline: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&:active, &:focus {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
@ -115,10 +110,6 @@
|
|||
svg {
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
&.back-link i {
|
||||
transition-duration: .3s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -129,20 +120,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.sidebar-subnav {
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.collapse-nav {
|
||||
width: 100%;
|
||||
position: absolute;;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
min-height: 50px;
|
||||
padding: 5px 0;
|
||||
font-size: 18px;
|
||||
background: transparent;
|
||||
|
@ -187,38 +170,6 @@
|
|||
|
||||
.sidebar-wrapper {
|
||||
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 @@
|
|||
header.header-pinned-nav {
|
||||
@media (min-width: $screen-lg-min) {
|
||||
padding-left: ($sidebar_width + $gl-padding);
|
||||
|
||||
.side-nav-toggle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -6,6 +6,7 @@ $sidebar_width: 220px;
|
|||
$gutter_collapsed_width: 62px;
|
||||
$gutter_width: 290px;
|
||||
$gutter_inner_width: 258px;
|
||||
$sidebar-transition-duration: .15s;
|
||||
|
||||
/*
|
||||
* UI elements
|
||||
|
|
Loading…
Reference in a new issue