Apply new default and inline label design

6 files changed, 15 insertions, 8 deletions

diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 25ee081ea9c..54e13f9d95c 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/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;
diff --git a/app/assets/stylesheets/pages/events.scss b/app/assets/stylesheets/pages/events.scss
index da096354b5a..8871a069d5d 100644
--- a/app/assets/stylesheets/pages/events.scss
+++ b/app/assets/stylesheets/pages/events.scss
@@ -72,7 +72,6 @@
 
         .label {
           color: $gl-text-color;
-          font-size: inherit;
         }
 
         iframe.twitter-share-button {
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 759719a72da..2ee932ae44b 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/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;
     }
 
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index a72e654824e..0f49d15203b 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/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;
   }
 }
diff --git a/app/assets/stylesheets/pages/todos.scss b/app/assets/stylesheets/pages/todos.scss
index a79772ea37b..4b9824fab0c 100644
--- a/app/assets/stylesheets/pages/todos.scss
+++ b/app/assets/stylesheets/pages/todos.scss
@@ -128,7 +128,6 @@
 
         .label {
           color: $gl-text-color;
-          font-size: inherit;
         }
 
         p {
diff --git a/changelogs/unreleased/fix-change-event-body-label-font-size.yml b/changelogs/unreleased/fix-change-event-body-label-font-size.yml
new file mode 100644
index 00000000000..3192a7bff92
--- /dev/null
+++ b/changelogs/unreleased/fix-change-event-body-label-font-size.yml
@@ -0,0 +1,5 @@
+---
+title: Apply new default and inline label design
+merge_request: 16956
+author: George Tsiolis
+type: changed