TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-12-25 11:55:03 +03:00
Code Issues Projects Releases Wiki Activity

Refactored loading bar SCSS

Browse Source
This commit is contained in:
Matthew Harrison-Jones 2013-09-30 15:02:51 +01:00
parent 16742bcaef
commit de6b8ee9b3
2 changed files with 21 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
core/client/assets/sass/modules/animations.scss
View File

@ -37,3 +37,21 @@
}
}
@include keyframes(shift-rightwards) {
0% {
@include transform(translateX(-100%));
}
40% {
@include transform(translateX(0%));
}
60% {
@include transform(translateX(0%));
}
100% {
@include transform(translateX(100%));
}
}

137
core/client/assets/sass/modules/global.scss
View File

@ -988,15 +988,8 @@ nav {
.js-loading .loading-bar {
display: block;
-webkit-animation: shift-rightwards 1.5s ease-in-out infinite;
-moz-animation: shift-rightwards 1.5s ease-in-out infinite;
-ms-animation: shift-rightwards 1.5s ease-in-out infinite;
-o-animation: shift-rightwards 1.5s ease-in-out infinite;
animation: shift-rightwards 1.5s ease-in-out infinite;
-webkit-animation-delay: 0.4s;
-moz-animation-delay: 0.4s;
-o-animation-delay: 0.4s;
animation-delay: 0.4s;
@include animation(shift-rightwards 1.5s ease-in-out infinite);
@include animation-delay(0.4s);
}
.loading-bar {
@ -1008,133 +1001,9 @@ nav {
height: 2px;
z-index: 900;
background: $blue;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
@include transform(translateX(100%));
}
@-webkit-keyframes shift-rightwards {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
40% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
60% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
@-moz-keyframes shift-rightwards {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
40% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
60% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
@-o-keyframes shift-rightwards {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
40% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
60% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
@keyframes shift-rightwards {
0% {
-webkit-transform: translateX(-100%);
-moz-transform: translateX(-100%);
-o-transform: translateX(-100%);
transform: translateX(-100%);
}
40% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
60% {
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
100% {
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
/* ==========================================================================
Modals
========================================================================== */