Merge branch 'empty-state-project-page' into 'master'

Fix regressions in the design of the project statistics bar.

## What does this MR do?

Improves the design of the empty Changelog, Contribution guide, and License items in the project statistics bar.

## Are there points in the code the reviewer needs to double check?

Don't think so, maybe that the `project-stats` class isn't used anywhere else (a grep suggests it's not)

## Why was this MR needed?

Because the empty state of the repository didn't look as good anymore.

## What are the relevant issue numbers?
#18734

## Screenshots (if relevant)

Before:

![Screen_Shot_2016-06-16_at_12.15.22_PM](/uploads/a5c27d696af186346a2298071c90ba2d/Screen_Shot_2016-06-16_at_12.15.22_PM.png)

After:

![Screen_Shot_2016-06-16_at_12.59.38_PM](/uploads/8719d3ee507affd4ce7ea479a5422908/Screen_Shot_2016-06-16_at_12.59.38_PM.png)

See merge request !4717

1 files changed, 14 insertions, 8 deletions

diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 093d5e18516..346badf6d86 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -373,7 +373,7 @@ a.deploy-project-label {
 .project-stats {
   margin-top: $gl-padding;
   margin-bottom: 0;
-  padding: 16px 0;
+  padding: 0;
   background-color: $white-light;
   font-size: 0;
 
@@ -382,13 +382,14 @@ a.deploy-project-label {
   }
 
   .nav li {
-    display: inline;
+    display: inline-block;
+    margin: 16px 0;
+    margin-right: 16px;
   }
 
   .nav > li > a {
     background-color: transparent;
-    margin-right: 12px;
-    padding: 0 10px;
+    padding: 5px 10px;
     font-size: 15px;
     color: $notes-light-color;
   }
@@ -402,12 +403,17 @@ a.deploy-project-label {
     font-size: 17px;
   }
 
-  li.missing a {
-    color: #5a6069;
-    border: 1px dashed #dce0e5;
+  li.missing {
+    border: 1px dashed $border-gray-light;
+    border-radius: $border-radius-default;
+
+    a {
+      color: $notes-light-color;
+      display: block;
+    }
 
     &:hover {
-      background-color: #f0f2f5;
+      background-color: $gray-normal;
     }
   }