created framework for badges, solving duplicate code

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";

app/assets/stylesheets/framework/badges.scss

+.badge {
+  font-weight: normal;
+  background-color: $badge-bg;
+  color: $badge-color;
+  vertical-align: baseline;
+}
+
+.badge-dark {
+  background-color: $badge-bg-dark;
+}

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 {

app/assets/stylesheets/framework/variables.scss

@@ -247,6 +247,13 @@ $btn-placeholder-gray: #c7c7c7;
 $btn-white-active: #848484;
 $btn-gray-hover: #eee;
 
+/*
+* Badges
+*/
+$badge-bg: #f3f3f3;
+$badge-bg-dark: #eee;
+$badge-color: $btn-transparent-color;
+
 /*
  *  Award emoji
  */

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;
-    }
   }
 }
 

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;
       }
     }