0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-13 22:41:32 -05:00
ghost/core/client/assets/sass/modules/nprogress.scss

98 lines
2.6 KiB
SCSS
Raw Normal View History

/*
* NProgress styles
*
* Table of Contents
*
* NProgress
* Keyframes
*/
/* ==========================================================================
NProgress
========================================================================== */
/* Make clicks pass-through */
#nprogress {
pointer-events: none;
-webkit-pointer-events: none;
}
#nprogress .bar {
background: $blue;
position: fixed;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 2px;
}
/* Fancy blur effect */
#nprogress .peg {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px $blue, 0 0 5px $blue;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
/* Remove these to get rid of the spinner */
#nprogress .spinner {
display: block;
position: fixed;
z-index: 100;
top: 15px;
right: 15px;
}
#nprogress .spinner-icon {
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: $blue;
border-left-color: $blue;
border-radius: 10px;
-webkit-animation: nprogress-spinner 400ms linear infinite;
-moz-animation: nprogress-spinner 400ms linear infinite;
-ms-animation: nprogress-spinner 400ms linear infinite;
-o-animation: nprogress-spinner 400ms linear infinite;
animation: nprogress-spinner 400ms linear infinite;
}
/* ==========================================================================
Keyframes
========================================================================== */
@-webkit-keyframes nprogress-spinner {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-moz-keyframes nprogress-spinner {
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
}
@-o-keyframes nprogress-spinner {
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
}
@-ms-keyframes nprogress-spinner {
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
}
@keyframes nprogress-spinner {
0% { transform: rotate(0deg); transform: rotate(0deg); }
100% { transform: rotate(360deg); transform: rotate(360deg); }
}