diff options
author | Simon Knox <psimyn@gmail.com> | 2018-03-16 19:59:07 +1100 |
---|---|---|
committer | Simon Knox <psimyn@gmail.com> | 2018-03-16 19:59:07 +1100 |
commit | 457fac6842808c3b0e66b110ef0c9edd9c024ad4 (patch) | |
tree | 79c2b8dfe6ebca5dfc7a8c0d2b9410f603a1706c | |
parent | 0c375c8045f7169e4cead1568d60649039904054 (diff) | |
download | gitlab-ce-457fac6842808c3b0e66b110ef0c9edd9c024ad4.tar.gz |
remvoe background color from skeleton text lines44294-skeleton-lines
3 files changed, 28 insertions, 49 deletions
diff --git a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue index b06493e6c66..16304e4815d 100644 --- a/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue +++ b/app/assets/javascripts/vue_shared/components/skeleton_loading_container.vue @@ -9,7 +9,7 @@ lines: { type: Number, required: false, - default: 6, + default: 3, }, }, computed: { diff --git a/app/assets/stylesheets/framework/animations.scss b/app/assets/stylesheets/framework/animations.scss index 728f9a27aca..5ea3866a1b9 100644 --- a/app/assets/stylesheets/framework/animations.scss +++ b/app/assets/stylesheets/framework/animations.scss @@ -187,12 +187,9 @@ a { animation: fadeInFull $fade-in-duration 1; } - .animation-container { - background: $repo-editor-grey; height: 40px; overflow: hidden; - position: relative; &.animation-container-small { height: 12px; @@ -205,60 +202,42 @@ a { } } - &::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%; + [class^="skeleton-line-"] { position: relative; - } + background-color: rgba(0, 0, 0, 0.06); + height: 10px; + overflow: hidden; + + &:not(:last-of-type) { + margin-bottom: 4px; + } - div { - background: $white-light; - height: 6px; - left: 0; - position: absolute; - right: 0; + &:after { + content: ' '; + display: block; + animation-duration: 1s; + animation-fill-mode: forwards; + animation-iteration-count: infinite; + animation-name: blockTextShine; + animation-timing-function: linear; + background-repeat: no-repeat; + background-size: 800px 45px; + background-image: $repo-editor-linear-gradient; + height: 12px; + width: 100%; + } } .skeleton-line-1 { - left: 0; - top: 8px; + width: 156px; } .skeleton-line-2 { - left: 150px; - top: 0; - height: 10px; + width: 235px; } .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; + width: 200px; } } diff --git a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js index bbd50863069..34487885cf0 100644 --- a/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js +++ b/spec/javascripts/vue_shared/components/skeleton_loading_container_spec.js @@ -14,8 +14,8 @@ describe('Skeleton loading container', () => { vm.$destroy(); }); - it('renders 6 skeleton lines by default', () => { - expect(vm.$el.querySelector('.skeleton-line-6')).not.toBeNull(); + it('renders 3 skeleton lines by default', () => { + expect(vm.$el.querySelector('.skeleton-line-3')).not.toBeNull(); }); it('renders in full mode by default', () => { |