Refactor button css and do some cleanup

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

6 files changed, 75 insertions, 98 deletions

diff --git a/app/assets/stylesheets/base/gl_variables.scss b/app/assets/stylesheets/base/gl_variables.scss
index 7378d404008..18632da4f2a 100644
--- a/app/assets/stylesheets/base/gl_variables.scss
+++ b/app/assets/stylesheets/base/gl_variables.scss
@@ -22,8 +22,8 @@ $brand-info:     $gl-info;
 $brand-warning:  $gl-warning;
 $brand-danger:   $gl-danger;
 
-$border-radius-base:        3px !default;
-$border-radius-large:       5px !default;
+$border-radius-base:        2px !default;
+$border-radius-large:       2px !default;
 $border-radius-small:       2px !default;
 
 
diff --git a/app/assets/stylesheets/base/layout.scss b/app/assets/stylesheets/base/layout.scss
index b91c15d8910..c7b3b60e769 100644
--- a/app/assets/stylesheets/base/layout.scss
+++ b/app/assets/stylesheets/base/layout.scss
@@ -5,6 +5,7 @@ html {
 
   body {
     padding-top: $header-height;
+    text-rendering: geometricPrecision;
   }
 }
 
diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss
index 50c3de089f3..086a056bbf5 100644
--- a/app/assets/stylesheets/generic/buttons.scss
+++ b/app/assets/stylesheets/generic/buttons.scss
@@ -1,10 +1,6 @@
-body {
-    text-rendering: geometricPrecision;
-}
-
 @mixin btn-default {
   @include border-radius(2px);
-  
+
   border-width: 1px;
   border-style: solid;
   text-transform: uppercase;
@@ -13,17 +9,17 @@ body {
   line-height: 18px;
   padding: 11px 16px;
   letter-spacing: .4px;
-  
+
   &:hover {
     border-width: 1px;
     border-style: solid;
   }
-  
+
   &:focus {
     border-width: 1px;
     border-style: solid;
   }
-  
+
   &:active {
     @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
     border-width: 1px;
@@ -33,7 +29,7 @@ body {
 
 @mixin btn-middle {
   @include border-radius(2px);
-  
+
   border-width: 1px;
   border-style: solid;
   text-transform: uppercase;
@@ -42,22 +38,22 @@ body {
   line-height: 18px;
   padding: 11px 24px;
   letter-spacing: .4px;
-  
+
   &:hover {
     border-width: 1px;
     border-style: solid;
   }
-  
+
   &:focus {
     border-width: 1px;
     border-style: solid;
   }
-  
+
   &:active {
     @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
     border-width: 1px;
     border-style: solid;
-    }
+  }
 }
 
 
@@ -65,118 +61,113 @@ body {
   background-color: #28b061;
   border: 1px solid #26a65c;
   color: #fff;
-    
-     &:hover {
-       background-color: #26ab5d;
-       border: 1px solid #229954;
-       color: #fff;
-     }
-     
-     &:focus {
-       background-color: #26ab5d;
-       border: 1px solid #229954;
-       color: #fff;
-     }
-     
-     &:active {
-       @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
-        
-       background-color: #23a158 !important;
-       border: 1px solid #229954 !important;
-       color: #fff !important;
-     } 
-}
 
-/*Butons*/
+  &:hover {
+    background-color: #26ab5d;
+    border: 1px solid #229954;
+    color: #fff;
+  }
+
+  &:focus {
+    background-color: #26ab5d;
+    border: 1px solid #229954;
+    color: #fff;
+  }
+
+  &:active {
+    @include box-shadow (inset 0 0 4px rgba(0, 0, 0, 0.12));
+
+    background-color: #23a158 !important;
+    border: 1px solid #229954 !important;
+    color: #fff !important;
+  }
+}
 
-@mixin btn-project {
+@mixin btn-gray {
   background-color: #f0f2f5;
   border-color: #dce0e5;
   color: #313236;
-  
+
   &:hover {
     border-color:#dce0e5;
     background-color: #ebeef2;
     color: #313236;
   }
-   
+
   &:focus {
     border-color: #dce0e5;
     background-color: #ebeef2;
     color: #313236;
   }
-  
+
   &:active {
-   @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
-   
-   color: #313236 !important;
-   border-color: #c6cacf !important;
-   background-color: #e4e7ed !important;
+    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+
+    color: #313236 !important;
+    border-color: #c6cacf !important;
+    background-color: #e4e7ed !important;
   }
 }
 
-@mixin btn-light {
+@mixin btn-white {
   background-color: #fff;
   border-color: #dce0e5;
   color: #313236;
-  
+
   &:hover {
     border-color:#dce0e5;
     background-color: #f0f2f5;
     color: #313236;
   }
-   
+
   &:focus {
     border-color: #dce0e5;
     background-color: #f0f2f5;
     color: #313236;
   }
-  
+
   &:active {
-   @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
-   
-   color: #313236 !important;
-   border-color: #c6cacf !important;
-   background-color: #e4e7ed !important;
+    @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
+
+    color: #313236 !important;
+    border-color: #c6cacf !important;
+    background-color: #e4e7ed !important;
   }
 }
 
-@mixin btn-remove {
+@mixin btn-red {
   background-color: #f72e60;
   border-color: #ee295a;
-  
+
   &:hover {
     background-color: #e82757;
     border-color: #e32555;
   }
-  
+
   &:focus {
     background-color: #e82757;
     border-color: #e32555;
   }
-  
+
   &:active {
     @include box-shadow(inset 0 0 4px rgba(0, 0, 0, 0.12));
     background-color: #d42450 !important;
     border-color: #e12554 !important;
   }
-  
 }
 
 
-.btn-info {
+.btn {
   @include btn-default;
-  @include btn-project;
-}
+  @include btn-white;
 
-.btn-success {
-  @include btn-default;
-  @include btn-green;
-  
-}
+  &.btn-success {
+    @include btn-green;
+  }
 
-.btn {
-  @include btn-default;
+  &.btn-gray {
+    @include btn-gray;
+  }
 
   &.btn-new {
     @extend .btn-success;
@@ -264,4 +255,4 @@ body {
       color: #fff;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/app/assets/stylesheets/generic/forms.scss b/app/assets/stylesheets/generic/forms.scss
index 98a7c3ad8ac..0edfe24f195 100644
--- a/app/assets/stylesheets/generic/forms.scss
+++ b/app/assets/stylesheets/generic/forms.scss
@@ -29,9 +29,6 @@ input[type='text'].danger {
   border-top: 1px solid $border-color;
 }
 
-@media (min-width: $screen-sm-min) {
-}
-
 label {
   &.control-label {
     @extend .col-sm-2;
@@ -84,20 +81,13 @@ label {
 
 .form-group .control-label {
   font-weight: normal;
-  font-color: #313236 !important;
-}
-
-.form-control {
-  @include border-radius (2px);
 }
 
-.form-control::-webkit-input-placeholder{
-  color:#7f8fa4;
+.form-control::-webkit-input-placeholder {
+  color: #7f8fa4;
 }
 
 .input-group {
-  @include border-radius (2px);
-  
   .input-group-addon {
     background-color: #f7f8fa;
   }
diff --git a/app/assets/stylesheets/generic/selects.scss b/app/assets/stylesheets/generic/selects.scss
index 633dfea5228..cba621635b6 100644
--- a/app/assets/stylesheets/generic/selects.scss
+++ b/app/assets/stylesheets/generic/selects.scss
@@ -26,13 +26,13 @@
 .select2-drop {
   @include box-shadow(rgba(76, 86, 103, 0.247059) 0px 0px 1px 0px, rgba(31, 37, 50, 0.317647) 0px 2px 18px 0px);
   @include border-radius (0px);
-  
-  padding: 16px 20px;
+
+  padding: 16px;
   border: none !important;
 }
 
 .select2-results .select2-result-label {
-  padding: 16px 20px;
+  padding: 16px;
 }
 
 .select2-drop{
@@ -142,5 +142,5 @@
 }
 
 .ajax-users-dropdown {
-  min-width: 225px !important;
-}
\ No newline at end of file
+  min-width: 250px !important;
+}
diff --git a/app/assets/stylesheets/pages/projects.scss b/app/assets/stylesheets/pages/projects.scss
index 38b17be7980..c36f5a394d8 100644
--- a/app/assets/stylesheets/pages/projects.scss
+++ b/app/assets/stylesheets/pages/projects.scss
@@ -18,10 +18,6 @@
   }
 }
 
-.btn, .commits-compare-switch {
-    @include btn-light;
-}
-
 .project-edit-content {
   padding: 7px;
 }
@@ -100,8 +96,7 @@
     margin-bottom: 0px;
 
     .btn {
-      @include btn-project;
-      @include btn-default;
+      @include btn-gray;
 
       .count {
         display: inline-block;
@@ -161,7 +156,7 @@
 
 .input-group-btn {
   .btn {
-    @include btn-project;
+    @include btn-gray;
     @include btn-middle;
 
     &:hover {
@@ -195,7 +190,7 @@
   margin: 0 12px 0 12px;
 
   .btn{
-    @include btn-project;
+    @include btn-gray;
     @include btn-default;
   }
 
@@ -390,7 +385,7 @@ table.table.protected-branches-list tr.no-border {
 
   .nav > li > a {
     @include btn-default;
-    @include btn-project;
+    @include btn-gray;
 
     background-color: transparent;
     border: 1px solid #f7f8fa;
@@ -450,7 +445,7 @@ pre.light-well {
 
   .btn-remove {
     @include btn-middle;
-    @include btn-remove;
+    @include btn-red;
 
     float: left !important;
   }