From ce6becd00ab1b08d34b6d79b7abb11b350d65ce3 Mon Sep 17 00:00:00 2001 From: Scott Hampton Date: Fri, 8 Mar 2019 08:34:29 -0700 Subject: [PATCH] Backport EE CSS addition Adding the dashboard skeleton SCSS file to CE. [skip visual] --- .../components/dashboard_skeleton.scss | 80 +++++++++++++++++++ 1 file changed, 80 insertions(+) create mode 100644 app/assets/stylesheets/components/dashboard_skeleton.scss 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; + } + } +} -- GitLab