Apply new default and inline label design

app/assets/stylesheets/framework/variables.scss

@@ -558,6 +558,7 @@ $jq-ui-default-color: #777;
 /*
 * Label
 */
+$label-font-size: 12px;
 $label-padding: 7px;
 $label-padding-modal: 10px;
 $label-gray-bg: #f8fafc;

app/assets/stylesheets/pages/events.scss

@@ -72,7 +72,6 @@
 
         .label {
           color: $gl-text-color;
-          font-size: inherit;
         }
 
         iframe.twitter-share-button {

app/assets/stylesheets/pages/issuable.scss

@@ -102,12 +102,11 @@
 
 .issuable-show-labels {
   a {
-    margin-right: 5px;
     margin-bottom: 5px;
     display: inline-block;
 
     .color-label {
-      padding: 6px 10px;
+      padding: 4px $grid-size;
       border-radius: $label-border-radius;
     }
 

app/assets/stylesheets/pages/labels.scss

@@ -105,13 +105,16 @@
   }
 
   .label {
-    padding: 8px 12px;
-    font-size: 14px;
+    padding: 4px $grid-size;
+    font-size: $label-font-size;
+    position: relative;
+    top: ($grid-size / 2);
   }
 }
 
 .color-label {
-  padding: 3px $label-padding;
+  padding: 0 $grid-size;
+  line-height: 16px;
   border-radius: $label-border-radius;
 }
 
@@ -302,10 +305,11 @@
 }
 
 .label-link {
-  display: inline-block;
+  display: inline-flex;
   vertical-align: top;
 
   .label {
     vertical-align: inherit;
+    font-size: $label-font-size;
   }
 }

app/assets/stylesheets/pages/todos.scss

@@ -128,7 +128,6 @@
 
         .label {
           color: $gl-text-color;
-          font-size: inherit;
         }
 
         p {

changelogs/unreleased/fix-change-event-body-label-font-size.yml

+---
+title: Apply new default and inline label design
+merge_request: 16956
+author: George Tsiolis
+type: changed