diff options
Diffstat (limited to 'app/assets/stylesheets/framework/animations.scss')
-rw-r--r-- | app/assets/stylesheets/framework/animations.scss | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 7c50b80fd2b..667b73e150d 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -159,3 +159,109 @@ a { .fade-in { animation: fadeIn $fade-in-duration 1; } + +@keyframes fadeInHalf { + 0% { + opacity: 0; + } + + 100% { + opacity: 0.5; + } +} + +.fade-in-half { + animation: fadeInHalf $fade-in-duration 1; +} + +@keyframes fadeInFull { + 0% { + opacity: 0.5; + } + + 100% { + opacity: 1; + } +} + +.fade-in-full { + animation: fadeInFull $fade-in-duration 1; +} + + +.animation-container { + background: $repo-editor-grey; + height: 40px; + overflow: hidden; + position: relative; + + &.animation-container-small { + height: 12px; + } + + &::before { + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: blockTextShine; + animation-timing-function: linear; + background-image: $repo-editor-linear-gradient; + background-repeat: no-repeat; + background-size: 800px 45px; + content: ' '; + display: block; + height: 100%; + position: relative; + } + + div { + background: $white-light; + height: 6px; + left: 0; + position: absolute; + right: 0; + } + + .skeleton-line-1 { + left: 0; + top: 8px; + } + + .skeleton-line-2 { + left: 150px; + top: 0; + height: 10px; + } + + .skeleton-line-3 { + left: 0; + top: 23px; + } + + .skeleton-line-4 { + left: 0; + top: 38px; + } + + .skeleton-line-5 { + left: 200px; + top: 28px; + height: 10px; + } + + .skeleton-line-6 { + top: 14px; + left: 230px; + height: 10px; + } +} + +@keyframes blockTextShine { + 0% { + transform: translateX(-468px); + } + + 100% { + transform: translateX(468px); + } +} |