created framework for badges, solving duplicate code

6 files changed, 18 insertions, 21 deletions

diff --git a/app/assets/stylesheets/framework.scss b/app/assets/stylesheets/framework.scss
index 7c7f991dd87..c26fea8d5b2 100644
--- a/app/assets/stylesheets/framework.scss
+++ b/app/assets/stylesheets/framework.scss
@@ -9,6 +9,7 @@
 @import "framework/avatar.scss";
 @import "framework/blocks.scss";
 @import "framework/buttons.scss";
+@import "framework/badges.scss";
 @import "framework/calendar.scss";
 @import "framework/callout.scss";
 @import "framework/common.scss";
diff --git a/app/assets/stylesheets/framework/badges.scss b/app/assets/stylesheets/framework/badges.scss
new file mode 100644
index 00000000000..89e1c7890d8
--- /dev/null
+++ b/app/assets/stylesheets/framework/badges.scss
@@ -0,0 +1,10 @@
+.badge {
+  font-weight: normal;
+  background-color: $badge-bg;
+  color: $badge-color;
+  vertical-align: baseline;
+}
+
+.badge-dark {
+  background-color: $badge-bg-dark;
+}
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 40b696774a4..477582f9e3f 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -72,17 +72,6 @@
       color: $black;
       font-weight: 600;
     }
-
-    .badge {
-      font-weight: normal;
-      background-color: #f3f3f3;
-      color: $btn-transparent-color;
-      vertical-align: baseline;
-    }
-
-    .badge-dark {
-      background-color: #eee;
-    }
   }
 
   &.sub-nav {
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 8a9c279d124..651e58d0bb4 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -248,6 +248,13 @@ $btn-white-active: #848484;
 $btn-gray-hover: #eee;
 
 /*
+* Badges
+*/
+$badge-bg: #f3f3f3;
+$badge-bg-dark: #eee;
+$badge-color: $btn-transparent-color;
+
+/*
  *  Award emoji
  */
 $award-emoji-menu-bg: #fff;
diff --git a/app/assets/stylesheets/pages/environments.scss b/app/assets/stylesheets/pages/environments.scss
index 658aec5e609..387d2818495 100644
--- a/app/assets/stylesheets/pages/environments.scss
+++ b/app/assets/stylesheets/pages/environments.scss
@@ -113,13 +113,6 @@
 
   .folder-name {
     cursor: pointer;
-
-    .badge {
-      font-weight: normal;
-      background-color: #f3f3f3;
-      color: $gl-placeholder-color;
-      vertical-align: baseline;
-    }
   }
 }
 
diff --git a/app/assets/stylesheets/pages/pipelines.scss b/app/assets/stylesheets/pages/pipelines.scss
index 651e82b7b45..90e933cbd61 100644
--- a/app/assets/stylesheets/pages/pipelines.scss
+++ b/app/assets/stylesheets/pages/pipelines.scss
@@ -507,9 +507,6 @@
       }
 
       .badge {
-        background-color: #f3f3f3;
-        color: $gl-text-color-light;
-        font-weight: normal;
         margin-left: $btn-xs-side-margin;
       }
     }