Improve button margin for btn-grouped css class

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

4 files changed, 24 insertions, 30 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/views/groups/group_members/_group_member.html.haml b/app/views/groups/group_members/_group_member.html.haml
index 271700e6db4..6bb542e658d 100644
--- a/app/views/groups/group_members/_group_member.html.haml
+++ b/app/views/groups/group_members/_group_member.html.haml
@@ -34,7 +34,7 @@
       %strong.member-access-level= member.human_access
       - if show_controls
         - if can?(current_user, :update_group_member, member)
-          = button_tag class: "btn-xs btn js-toggle-button",
+          = button_tag class: "btn-xs btn btn-grouped inline js-toggle-button",
                        title: 'Edit access level', type: 'button' do
             = icon('pencil')
 
diff --git a/app/views/projects/project_members/_project_member.html.haml b/app/views/projects/project_members/_project_member.html.haml
index 1e53b8e37da..268f140d7db 100644
--- a/app/views/projects/project_members/_project_member.html.haml
+++ b/app/views/projects/project_members/_project_member.html.haml
@@ -32,7 +32,7 @@
     .pull-right
       %strong= member.human_access
       - if can?(current_user, :update_project_member, member)
-        = button_tag class: "btn-xs btn js-toggle-button",
+        = button_tag class: "btn-xs btn-grouped inline btn js-toggle-button",
                      title: 'Edit access level', type: 'button' do
           = icon('pencil')
 
diff --git a/app/views/shared/milestones/_milestone.html.haml b/app/views/shared/milestones/_milestone.html.haml
index 6b25745c554..acc3ccf4dcf 100644
--- a/app/views/shared/milestones/_milestone.html.haml
+++ b/app/views/shared/milestones/_milestone.html.haml
@@ -35,11 +35,9 @@
       .col-sm-6= render('shared/milestone_expired', milestone: milestone)
       .col-sm-6
         - if can?(current_user, :admin_milestone, milestone.project) and milestone.active?
-          = link_to edit_namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), class: "btn btn-xs" do
-            = icon('pencil-square-o')
+          = link_to edit_namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), class: "btn btn-xs btn-grouped" do
             Edit
           \
-          = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-xs btn-close"
-          = link_to namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-xs btn-remove" do
-            = icon('trash-o')
+          = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-xs btn-close btn-grouped"
+          = link_to namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-xs btn-remove btn-grouped" do
             Delete