Merge branch 'new-buttons-everywhere' into 'master'

Standartize buttons and fields size

Fixes #8069 and #8070

See merge request !2428

10 files changed, 61 insertions, 83 deletions

diff --git a/app/assets/stylesheets/framework/blocks.scss b/app/assets/stylesheets/framework/blocks.scss
index 8c1bbff8201..d0f5d33bf4d 100644
--- a/app/assets/stylesheets/framework/blocks.scss
+++ b/app/assets/stylesheets/framework/blocks.scss
@@ -137,11 +137,7 @@
 .nav-block {
   .controls {
     float: right;
-
-    .btn {
-      padding: 7px 10px;
-      margin-top: 11px;
-    }
+    margin-top: 11px;
   }
 }
 
diff --git a/app/assets/stylesheets/framework/buttons.scss b/app/assets/stylesheets/framework/buttons.scss
index d1d692f8384..c99292c3f83 100644
--- a/app/assets/stylesheets/framework/buttons.scss
+++ b/app/assets/stylesheets/framework/buttons.scss
@@ -1,12 +1,8 @@
 @mixin btn-default {
   @include border-radius(3px);
-  border-width: 1px;
-  border-style: solid;
-  font-size: 15px;
+  font-size: $gl-font-size;
   font-weight: 500;
-  line-height: 18px;
-  padding: 11px $gl-padding;
-  letter-spacing: .4px;
+  padding: $gl-vert-padding $gl-padding;
 
   &:focus,
   &:active {
@@ -17,8 +13,6 @@
 
 @mixin btn-middle {
   @include btn-default;
-  @include border-radius(3px);
-  padding: 11px 24px;
 }
 
 @mixin btn-color($light, $border-light, $normal, $border-normal, $dark, $border-dark, $color) {
@@ -74,16 +68,15 @@
   @include btn-default;
   @include btn-white;
 
+  &.btn-small,
   &.btn-sm {
-    padding: 5px 10px;
-  }
-
-  &.btn-nr {
-    padding: 7px 10px;
+    padding: 4px 10px;
+    font-size: 13px;
+    line-height: 18px;
   }
 
   &.btn-xs {
-    padding: 1px 5px;
+    padding: 2px 5px;
   }
 
   &.btn-success,
@@ -161,4 +154,40 @@
 
 .btn-clipboard {
   border: none;
+  padding: 0 5px;
+}
+
+.input-group-btn {
+  .btn {
+    @include btn-gray;
+    @include btn-middle;
+
+    &:hover {
+      outline: none;
+    }
+
+    &:focus {
+      outline: none;
+    }
+
+    &:active {
+      outline: none;
+    }
+
+    &.btn-clipboard {
+      padding-left: 15px;
+      padding-right: 15px;
+    }
+  }
+
+  .active {
+    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+
+    border: 1px solid #c6cacf !important;
+    background-color: #e4e7ed !important;
+  }
+
+  .btn-green {
+    @include btn-green
+  }
 }
diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss
index d0cb91a5b64..4dab806d50e 100644
--- a/app/assets/stylesheets/framework/forms.scss
+++ b/app/assets/stylesheets/framework/forms.scss
@@ -74,8 +74,6 @@ label {
 
 .form-control {
   @include box-shadow(none);
-  height: 42px;
-  padding: 8px $gl-padding;
 }
 
 .form-control-inline {
diff --git a/app/assets/stylesheets/framework/selects.scss b/app/assets/stylesheets/framework/selects.scss
index af145191bc8..3ee3443e349 100644
--- a/app/assets/stylesheets/framework/selects.scss
+++ b/app/assets/stylesheets/framework/selects.scss
@@ -3,8 +3,8 @@
   .select2-choice {
     background: #FFF;
     border-color: #DDD;
-    height: 42px;
-    padding: 8px $gl-padding;
+    height: 36px;
+    padding: 6px $gl-padding;
     font-size: $gl-font-size;
     line-height: 1.42857143;
 
diff --git a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
index 63868a34e2a..cd0621cdbf3 100644
--- a/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
+++ b/app/assets/stylesheets/framework/tw_bootstrap_variables.scss
@@ -46,7 +46,7 @@ $font-size-base:         $gl-font-size;
 //
 //## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
 
-$padding-base-vertical:     9px;
+$padding-base-vertical:     $gl-vert-padding;
 $padding-base-horizontal:   $gl-padding;
 $component-active-color:    #fff;
 $component-active-bg:       $brand-info;
diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss
index d0ff3248ce1..85ecdddda79 100644
--- a/app/assets/stylesheets/framework/variables.scss
+++ b/app/assets/stylesheets/framework/variables.scss
@@ -22,6 +22,7 @@ $header-height: 58px;
 $fixed-layout-width: 1280px;
 $gl-gray: #5a5a5a;
 $gl-padding: 16px;
+$gl-vert-padding: 6px;
 $gl-padding-top:10px;
 $gl-avatar-size: 46px;
 $secondary-text: #7f8fa4;
diff --git a/app/assets/stylesheets/pages/diff.scss b/app/assets/stylesheets/pages/diff.scss
index 685e7697237..1e2b8b51827 100644
--- a/app/assets/stylesheets/pages/diff.scss
+++ b/app/assets/stylesheets/pages/diff.scss
@@ -21,14 +21,6 @@
       }
     }
 
-    .diff-controls {
-      .btn {
-        padding: 0px 10px;
-        font-size: 13px;
-        line-height: 28px;
-      }
-    }
-
     .commit-short-id {
       font-family: $monospace_font;
       font-size: smaller;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index 7ab77550496..55e834947d1 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -27,7 +27,7 @@
 .project-issuable-filter {
   .controls {
     float: right;
-    margin-top: 7px;
+    margin-top: 11px;
   }
 
   .nav-links {
@@ -95,7 +95,7 @@
 
   .cross-project-reference {
     color: $gl-link-color;
-    
+
     span {
       white-space: nowrap;
       width: 85%;
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index bd5f96a87ef..4fabd765537 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -83,9 +83,13 @@
     .form-control {
       background: #FFF;
       font-size: 14px;
-      height: 42px;
       margin-left: -1px;
     }
+
+    .btn-clipboard {
+      border: 1px solid $border-color;
+      padding: 6px $gl-padding;
+    }
   }
 
   .visibility-level-label {
@@ -162,8 +166,8 @@
         border-style: solid;
         font-size: 13px;
         font-weight: 600;
-        line-height: 20px;
-        padding: 11px 16px;
+        line-height: 13px;
+        padding: $gl-vert-padding $gl-padding;
         letter-spacing: .4px;
         padding: 10px;
         text-align: center;
@@ -227,48 +231,6 @@
   }
 }
 
-.projects-search-form {
-  .input-group .form-control {
-    height: 42px;
-  }
-}
-
-.input-group-btn {
-  .btn {
-    @include btn-gray;
-    @include btn-middle;
-
-    &:hover {
-      outline: none;
-    }
-
-    &:focus {
-      outline: none;
-    }
-
-    &:active {
-      outline: none;
-    }
-
-    &.btn-clipboard {
-      padding-left: 15px;
-      padding-right: 15px;
-    }
-  }
-
-  .active {
-    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
-
-    border: 1px solid #c6cacf !important;
-    background-color: #e4e7ed !important;
-  }
-
-  .btn-green {
-    @include btn-green
-  }
-
-}
-
 .split-repo-buttons {
   display: inline-table;
   margin: 0 12px 0 12px;
@@ -378,9 +340,9 @@
 
 .breadcrumb.repo-breadcrumb {
   padding: 0;
-  line-height: 42px;
   background: transparent;
   border: none;
+  line-height: 42px;
   margin: 0;
 
   > li + li:before {
@@ -407,12 +369,12 @@
     width: 50%;
     display: inline-block;
     float: right;
-    padding-top: 7px;
+    padding-top: 11px;
     text-align: right;
 
     .btn-green {
-      margin-top: -2px;
       margin-left: 10px;
+      float: right;
     }
   }
 
diff --git a/app/helpers/button_helper.rb b/app/helpers/button_helper.rb
index ec0e3f409c1..d6c05843743 100644
--- a/app/helpers/button_helper.rb
+++ b/app/helpers/button_helper.rb
@@ -17,7 +17,7 @@ module ButtonHelper
   def clipboard_button(data = {})
     content_tag :button,
       icon('clipboard'),
-      class: 'btn btn-xs btn-clipboard',
+      class: 'btn btn-clipboard',
       data: data,
       type: :button
   end