Use gl-padding instead of 15px/20px where appropriate

app/assets/stylesheets/framework.scss

 @import "framework/fonts";
 @import "framework/variables";
 @import "framework/mixins";
-@import "framework/layout";
 @import 'framework/tw_bootstrap_variables';
 @import 'framework/tw_bootstrap';
+@import "framework/layout";
 
 @import "framework/avatar.scss";
 @import "framework/blocks.scss";
@@ -25,6 +25,7 @@
 @import "framework/markdown_area.scss";
 @import "framework/mobile.scss";
 @import "framework/pagination.scss";
+@import "framework/panels.scss";
 @import "framework/selects.scss";
 @import "framework/sidebar.scss";
 @import "framework/tables.scss";

app/assets/stylesheets/framework/common.scss

@@ -7,7 +7,7 @@
 
 /** COMMON CLASSES **/
 .prepend-top-10 { margin-top:10px }
-.prepend-top-default { margin-top: $gl-padding; }
+.prepend-top-default { margin-top: $gl-padding !important; }
 .prepend-top-20 { margin-top:20px }
 .prepend-left-10 { margin-left:10px }
 .prepend-left-20 { margin-left:20px }
@@ -52,6 +52,10 @@ pre {
   }
 }
 
+hr {
+  margin: $gl-padding 0;
+}
+
 .dropdown-menu > li > a {
   text-shadow: none;
 }
@@ -433,3 +437,7 @@ table {
 .space-right {
   margin-right: 10px;
 }
+
+.alert, .progress {
+  margin-bottom: $gl-padding;
+}

app/assets/stylesheets/framework/files.scss

@@ -8,7 +8,6 @@
   border: none;
   border-top: 1px solid #E7E9EE;
   border-bottom: 1px solid #E7E9EE;
-  margin-bottom: 1em;
 
   &.readme-holder {
     border-bottom: 0;
@@ -25,7 +24,7 @@
     text-shadow: 0 1px 1px #fff;
     margin: 0;
     text-align: left;
-    padding: 10px 15px;
+    padding: 10px $gl-padding;
 
     .file-actions {
       float: right;
@@ -171,4 +170,3 @@
     }
   }
 }
-

app/assets/stylesheets/framework/panels.scss

+.panel {
+  margin-bottom: $gl-padding;
+  
+  .panel-heading {
+    padding: 10px $gl-padding;
+  }
+  .panel-body {
+    padding: $gl-padding;
+
+    .form-actions {
+      margin: -$gl-padding;
+      margin-top: $gl-padding;
+    }
+  }
+}

app/assets/stylesheets/framework/tables.scss

@@ -6,6 +6,8 @@
 
 table {
   &.table {
+    margin-bottom: $gl-padding;
+    
     .dropdown-menu a {
       text-decoration: none;
     }

app/assets/stylesheets/pages/merge_requests.scss

@@ -87,7 +87,7 @@
   .mr-widget-body,
   .ci_widget,
   .mr-widget-footer {
-    padding: 15px;
+    padding: $gl-padding;
   }
 
   .normal {

app/assets/stylesheets/pages/note_form.scss

@@ -7,6 +7,7 @@
 }
 .reply-btn {
   @extend .btn-primary;
+  margin: 10px $gl-padding;
 }
 .diff-file .diff-content {
   tr.line_holder:hover {
@@ -38,9 +39,8 @@
 }
 
 .new_note, .edit_note {
-  .buttons {
-    margin-top: 8px;
-    margin-bottom: 3px;
+  .note-form-actions {
+    margin-top: $gl-padding;
   }
 
   .note-preview-holder {
@@ -150,7 +150,6 @@
 
   .discussion-reply-holder {
     background: $background-color;
-    padding: 10px 15px;
     border-top: 1px solid $border-color;
   }
 }

app/assets/stylesheets/pages/projects.scss

@@ -376,7 +376,7 @@ table.table.protected-branches-list tr.no-border {
 
 .project-stats {
   text-align: center;
-  margin-top: 15px;
+  margin-top: $gl-padding;
   margin-bottom: 0;
   padding-top: 10px;
   padding-bottom: 4px;

app/views/profiles/notifications/show.html.haml

@@ -53,9 +53,7 @@
   .form-actions
     = f.submit 'Save changes', class: "btn btn-create"
 
-.clearfix
-  %hr
-.row.all-notifications
+.row.all-notifications.prepend-top-default
   .col-md-6
     %p
       You can also specify notification level per group or per project.

app/views/projects/compare/show.html.haml

@@ -7,11 +7,11 @@
   = render "form"
 
 - if @commits.present?
-  .prepend-top-20
+  .prepend-top-default
     = render "projects/commits/commit_list"
     = render "projects/diffs/diffs", diffs: @diffs, project: @project
 - else
-  .light-well.prepend-top-20
+  .light-well.prepend-top-default
     .center
       %h4
         There isn't anything to compare.

app/views/projects/merge_requests/_new_compare.html.haml

@@ -37,7 +37,7 @@
         %h4 Compare failed
         %p We can't compare selected branches. It may be because of huge diff. Please try again or select different branches.
     - else
-      .light-well.append-bottom-10
+      .light-well.append-bottom-default
         .center
           %h4
             There isn't anything to merge.
@@ -86,4 +86,3 @@
       return;
     }
   });
-

app/views/projects/merge_requests/_show.html.haml

@@ -8,7 +8,7 @@
   .merge-request-details.issuable-details
     = render "projects/merge_requests/show/mr_title"
     = render "projects/merge_requests/show/mr_box"
-    .append-bottom-20.mr-source-target.prepend-top-default
+    .append-bottom-default.mr-source-target.prepend-top-default
       - if @merge_request.open?
         .pull-right
           - if @merge_request.source_branch_exists?

app/views/shared/issuable/_context.html.haml

 = form_for [@project.namespace.becomes(Namespace), @project, issuable], remote: true, html: {class: 'issuable-context-form inline-update js-issuable-update'} do |f|
-  %div.prepend-top-20
+  %div.prepend-top-default
     .issuable-context-title
       %label
         Assignee:
@@ -11,7 +11,7 @@
       - if can?(current_user, :"admin_#{issuable.to_ability_name}", @project)
         = users_select_tag("#{issuable.class.table_name.singularize}[assignee_id]", placeholder: 'Select assignee', class: 'custom-form-control js-select2 js-assignee', selected: issuable.assignee_id, project: @target_project, null_user: true, current_user: true)
 
-  %div.prepend-top-20.clearfix
+  %div.prepend-top-default.clearfix
     .issuable-context-title
       %label
         Milestone:
@@ -31,7 +31,7 @@
 
   - if current_user
     - subscribed = issuable.subscribed?(current_user)
-    %div.prepend-top-20.clearfix
+    %div.prepend-top-default.clearfix
       .issuable-context-title
         %label
           Subscription: