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

@ -6,4 +6,62 @@
.navbar .nav .active .badge { .navbar .nav .active .badge {
padding: 3px 6px 3px; padding: 3px 6px 3px;
background-color: $navbar-inverse-bg; 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;
}
} }

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

@ -3,9 +3,14 @@
.navbar-header .navbar-header
%button.navbar-toggle{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"} %button.navbar-toggle{"data-target" => "#j2-main-navbar-collapse", "data-toggle" => "collapse", type: "button"}
%span.sr-only Toggle navigation %span.sr-only Toggle navigation
%span.icon-bar - if inbox_count > 0
%span.icon-bar %span.icon-bar.navbar--inbox-animation
%span.icon-bar %span.icon-bar.navbar--inbox-animation
%span.icon-bar.navbar--inbox-animation
- else
%span.icon-bar
%span.icon-bar
%span.icon-bar
%a.navbar-brand{href: "/"}= APP_CONFIG['site_name'] %a.navbar-brand{href: "/"}= APP_CONFIG['site_name']
#j2-main-navbar-collapse.collapse.navbar-collapse #j2-main-navbar-collapse.collapse.navbar-collapse
- if user_signed_in? - if user_signed_in?