From e64890e4ba4205f51ae84ff84020642466bb67ea Mon Sep 17 00:00:00 2001
From: Kushal Pandya <kushal@gitlab.com>
Date: Mon, 15 Jan 2018 17:01:28 +0530
Subject: StackedProgressBar Component styles

---
 .../framework/stacked-progress-bar.scss            | 54 ++++++++++++++++++++++
 1 file changed, 54 insertions(+)
 create mode 100644 app/assets/stylesheets/framework/stacked-progress-bar.scss

diff --git a/app/assets/stylesheets/framework/stacked-progress-bar.scss b/app/assets/stylesheets/framework/stacked-progress-bar.scss
new file mode 100644
index 00000000000..4869cda73e5
--- /dev/null
+++ b/app/assets/stylesheets/framework/stacked-progress-bar.scss
@@ -0,0 +1,54 @@
+.stacked-progress-bar {
+  display: flex;
+  height: 16px;
+  border-radius: 10px;
+  overflow: hidden;
+  background-color: $theme-gray-100;
+
+  .status-unavailable,
+  .status-green,
+  .status-neutral,
+  .status-red, {
+    height: 100%;
+    min-width: 25px;
+    padding: 0 5px;
+    font-size: $tooltip-font-size;
+    font-weight: normal;
+    color: $white-light;
+    line-height: 16px;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .status-unavailable {
+    padding: 0 10px;
+    color: $theme-gray-700;
+  }
+
+  .status-green {
+    background-color: $green-500;
+
+    &:hover {
+      background-color: $green-600;
+    }
+  }
+
+  .status-neutral {
+    background-color: $theme-gray-200;
+    color: $gl-gray-dark;
+
+    &:hover {
+      background-color: $theme-gray-300;
+    }
+  }
+
+  .status-red {
+    background-color: $red-500;
+
+    &:hover {
+      background-color: $red-600;
+    }
+  }
+}
-- 
cgit v1.2.1