Merge branch 'dz-improve-ui-consistency-2' into 'master'

Improve ui consistency. Part 2

* Use responsive top-area on project branches and tags pages
* Use default button size in the content list controls
* Improve button margin for btn-grouped css class

For https://gitlab.com/gitlab-org/gitlab-ce/issues/18324

See merge request !4536

3 files changed, 31 insertions, 27 deletions

diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index 625200cbcad..1e3083cce55 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -79,6 +79,23 @@
   @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active);
 }
 
+@mixin btn-with-margin {
+  margin-left: $btn-side-margin;
+  float: left;
+
+  &.inline {
+    float: none;
+  }
+
+  &.btn-sm {
+    margin-left: $btn-sm-side-margin;
+  }
+
+  &.btn-xs {
+    margin-left: $btn-xs-side-margin;
+  }
+}
+
 .btn {
   @include btn-default;
   @include btn-white;
@@ -142,24 +159,7 @@
   }
 
   &.btn-grouped {
-    margin-right: $btn-side-margin;
-    float: left;
-
-    &.inline {
-      float: none;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    &.btn-sm {
-      margin-right: $btn-sm-side-margin;
-    }
-
-    &.btn-xs {
-      margin-right: $btn-xs-side-margin;
-    }
+    @include btn-with-margin;
   }
 
   &.disabled {
@@ -203,11 +203,7 @@
 
 .btn-group {
   &.btn-grouped {
-    margin-right: 7px;
-    float: left;
-    &:last-child {
-      margin-right: 0;
-    }
+    @include btn-with-margin;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index 96e7aa4fb15..b34ec16cdba 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -137,8 +137,16 @@ ul.content-list {
       padding-top: 1px;
       float: right;
 
-      .btn {
-        padding: 10px 14px;
+      > .btn,
+      > .btn-group {
+        margin-right: $gl-padding-top;
+        display: inline-block;
+        margin-top: 4px;
+        margin-bottom: 4px;
+
+        &:last-child {
+          margin-right: 0;
+        }
       }
     }
 
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index 5de30d67b0a..99e3df119ed 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -80,8 +80,8 @@ $provider-btn-not-active-color: #4688f1;
 $link-underline-blue: #4a8bee;
 $layout-link-gray: #7e7c7c;
 $todo-alert-blue: #428bca;
-$btn-side-margin: 7px;
-$btn-sm-side-margin: 5px;
+$btn-side-margin: 10px;
+$btn-sm-side-margin: 7px;
 $btn-xs-side-margin: 5px;
 
 /*