FreakU
/
Retrospring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added navbar toggle animation

This commit is contained in:
pixeldesu 2014-12-11 15:49:01 +01:00
parent 7e2ed21908
commit 1d320fd847
2 changed files with 66 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
app/assets/stylesheets/scss/navbar.scss
View File

@ -7,3 +7,61 @@
padding: 3px 6px 3px;
background-color: $navbar-inverse-bg;
}
.navbar--inbox-animation {
animation: animationFrames ease-in-out 1.5s;
animation-iteration-count: infinite;
-webkit-animation: animationFrames ease-in-out 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation: animationFrames ease-in-out 1.5s;
-moz-animation-iteration-count: infinite;
-o-animation: animationFrames ease-in-out 1.5s;
-o-animation-iteration-count: infinite;
-ms-animation: animationFrames ease-in-out 1.5s;
-ms-animation-iteration-count: infinite;
}
@keyframes animationFrames{
0% {
background-color: #fff;
}
100% {
background-color: $navbar-inverse-toggle-border-color;
}
}
@-moz-keyframes animationFrames{
0% {
background-color: #fff;
}
100% {
background-color: $navbar-inverse-toggle-border-color;
}
}
@-webkit-keyframes animationFrames {
0% {
background-color: #fff;
}
100% {
background-color: $navbar-inverse-toggle-border-color;
}
}
@-o-keyframes animationFrames {
0% {
background-color: #fff;
}
100% {
background-color: $navbar-inverse-toggle-border-color;
}
}
@-ms-keyframes animationFrames {
0% {
background-color: #fff;
}
100% {
background-color: $navbar-inverse-toggle-border-color;
}
}

5
app/views/layouts/_header.html.haml
View File

@ -3,6 +3,11 @@
.navbar-header
%button.navbar-toggle{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}
%span.sr-only Toggle navigation
- if inbox_count > 0
%span.icon-bar.navbar--inbox-animation
%span.icon-bar.navbar--inbox-animation
%span.icon-bar.navbar--inbox-animation
- else
%span.icon-bar
%span.icon-bar
%span.icon-bar