luxolus
/
open-vault
2
0
Fork 0
Code Issues 1 Pull Requests Releases Activity

docs sidebar new animation/cleanup

This commit is contained in:
captainill 2015-03-14 18:16:58 -07:00
parent c2bcd6092f
commit 77bbbb18f3
2 changed files with 48 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
website/source/assets/stylesheets/_docs.scss
View File

@ -43,14 +43,14 @@ body.layout-intro{
color: $dark-blue; color: $dark-blue;
} }
.docs-sidenav{ .nav.docs-sidenav{
padding-bottom: 15px; padding-bottom: 15px;
:last-child{ :last-child{
border-bottom: none; border-bottom: none;
} }
//all li > a //all li
li{ li{
position: relative; position: relative;
@ -58,72 +58,75 @@ body.layout-intro{
padding: 10px 0 10px 8px; padding: 10px 0 10px 8px;
font-size: 13px; font-size: 13px;
color: $dark-blue; color: $dark-blue;
@include transition( all 300ms cubic-bezier(.17,.67,.83,.67) );
@include translate3d(0, 0, 0); &:before{
@include bez-1-transition();
}
&:hover{ &:hover{
background-color: transparent !important; background-color: transparent !important;
@include transition( all 300ms cubic-bezier(.17,.67,.83,.67) );
@include translate3d(5px, 0, 0); &:before{
@include bez-1-transition();
}
} }
} }
} }
$parent-active-state: -14px;
$parent-default-state: -10px;
$child-active-state: -4px;
$child-default-state: 0px;
//first teir li
> li { > li {
margin: 0 0 0 10px; margin: 0 0 0 10px;
>.nav{
li{
a{
color: $dark-blue;
}
}
}
&.active { &.active {
>a{ >a{
color: lighten($black, 4%); color: lighten($black, 4%);
@include open();
&:hover{ &:hover{
background-color: transparent !important; &:before{
@include transition( none ); left: $parent-default-state;
@include translate3d(0, 0, 0); }
} }
&:before{ &:before{
background: url(../images/triangle-sprite.png) 0 0 no-repeat; background: url(../images/triangle-sprite.png) 0 0 no-repeat;
@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 7px, 25px); @include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 7px, 25px);
} }
} }
.nav { .nav {
display: block; display: block;
li.active a {
color: $black;
@include open();
}
} }
} }
> a { > a {
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
&:hover{
&:before{
left: $parent-active-state;
}
}
&:before{ &:before{
content: ''; content: '';
position: absolute; position: absolute;
width: 7px; width: 7px;
height: 8px; height: 8px;
top: 15px; top: 15px;
left: -10px; left: $parent-default-state;
overflow: hidden; overflow: hidden;
background: url(../images/triangle-sprite.png) 0 -9px no-repeat; background: url(../images/triangle-sprite.png) 0 -9px no-repeat;
@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 7px, 25px); @include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 7px, 25px);
} }
} }
} }
//nested ul.nav
.nav { .nav {
display: none; display: none;
margin-bottom: 15px; margin-bottom: 15px;
@ -133,11 +136,14 @@ body.layout-intro{
&.active{ &.active{
> a{ > a{
color: $black;
&:hover{ &:hover{
background-color: transparent !important; &:before{
@include transition( none ); left: $child-default-state;
@include translate3d(0, 0, 0); }
} }
&:before{ &:before{
background: url(../images/triangle-sprite.png) 0 0 no-repeat; background: url(../images/triangle-sprite.png) 0 0 no-repeat;
@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px); @include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px);
@ -148,7 +154,13 @@ body.layout-intro{
> a{ > a{
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
padding: 6px 15px; padding: 6px 15px;
&:hover{
&:before{
left: $child-active-state;
}
}
&:before{ &:before{
opacity: .75; opacity: .75;
content: ''; content: '';
@ -156,7 +168,7 @@ body.layout-intro{
width: 5px; width: 5px;
height: 7px; height: 7px;
top: 12px; top: 12px;
left: 0px; left: $child-default-state;
overflow: hidden; overflow: hidden;
background: url(../images/triangle-sprite.png) 0 -13px no-repeat; background: url(../images/triangle-sprite.png) 0 -13px no-repeat;
@include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px); @include img-retina("../images/triangle-sprite.png", "../images/triangle-sprite@2x.png", 5px, 19px);

4
website/source/assets/stylesheets/_utilities.scss
View File

@ -66,3 +66,7 @@
background-color: transparent; background-color: transparent;
} }
} }
@mixin bez-1-transition{
@include transition( all 300ms ease-in-out );
}