diff options
author | Scott Hampton <shampton@gitlab.com> | 2019-03-08 08:34:29 -0700 |
---|---|---|
committer | Scott Hampton <shampton@gitlab.com> | 2019-03-08 08:35:16 -0700 |
commit | ce6becd00ab1b08d34b6d79b7abb11b350d65ce3 (patch) | |
tree | 3809d192df747dd4985d622a76779abeed9367a4 | |
parent | f3f02f56f05895d40aba887b145b267778d19f69 (diff) | |
download | gitlab-ce-ce6becd00ab1b08d34b6d79b7abb11b350d65ce3.tar.gz |
Backport EE CSS addition
Adding the dashboard skeleton SCSS file to CE.
[skip visual]
-rw-r--r-- | app/assets/stylesheets/components/dashboard_skeleton.scss | 80 |
1 files changed, 80 insertions, 0 deletions
diff --git a/app/assets/stylesheets/components/dashboard_skeleton.scss b/app/assets/stylesheets/components/dashboard_skeleton.scss new file mode 100644 index 00000000000..42ede599bc6 --- /dev/null +++ b/app/assets/stylesheets/components/dashboard_skeleton.scss @@ -0,0 +1,80 @@ +.dashboard-cards { + margin-right: -$gl-padding-8; + margin-left: -$gl-padding-8; +} + +.dashboard-card { + &-header { + &-warning { + background-color: $orange-100; + } + + &-failed { + background-color: $red-100; + } + } + + &-body { + height: 120px; + + &-warning { + background-color: $orange-50; + } + + &-failed { + background-color: $red-50; + } + } + + &-time-ago { + &-icon { + color: $gray-500; + } + } + + &-footer { + border-radius: $gl-padding; + height: $gl-padding-32; + + &-failed { + background-color: $red-100; + } + + &-arrow { + color: $gray-300; + } + + &-downstream { + margin-right: -$gl-padding-8; + } + + &-extra { + background-color: $gray-400; + font-size: 10px; + line-height: $gl-line-height; + width: $gl-padding; + } + } + + &-skeleton-info { + border-radius: $gl-padding; + height: $gl-padding; + overflow: hidden; + + &::after { + content: ' '; + display: block; + animation: blockTextShine 1s linear infinite forwards; + background-repeat: no-repeat; + background-size: cover; + background-image: linear-gradient(to right, + $gray-100 0%, + $gray-50 20%, + $gray-100 40%, + $gray-100 100%); + border-radius: $gl-padding; + height: $gl-padding; + margin-top: -$gl-padding-8; + } + } +} |