Use bootstrap buttons with custom colors instead of own css

2 files changed, 14 insertions, 114 deletions

diff --git a/app/assets/stylesheets/generic/buttons.scss b/app/assets/stylesheets/generic/buttons.scss
index 3b360275065..d106e3b201e 100644
--- a/app/assets/stylesheets/generic/buttons.scss
+++ b/app/assets/stylesheets/generic/buttons.scss
@@ -1,115 +1,5 @@
 .btn {
-  display: inline-block;
-  margin-bottom: 0;
-  font-weight: normal;
-  text-align: center;
-  vertical-align: middle;
-  cursor: pointer;
-  background-image: none;
-  border: $btn-border;
-  white-space: nowrap;
-  padding: 6px 12px;
-  font-size: 13px;
-  line-height: 18px;
-  border-radius: 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  -o-user-select: none;
-  user-select: none;
-  color: #444444;
-  background-color: #fff;
-  text-shadow: none;
-
-  &.hover,
-  &:hover {
-    color: #444444;
-    text-decoration: none;
-    background-color: #ebebeb;
-    border-color: #adadad;
-  }
-
-  &.focus,
-  &:focus {
-    color: #444444;
-    text-decoration: none;
-    outline: thin dotted #333;
-    outline: 5px auto -webkit-focus-ring-color;
-    outline-offset: -2px;
-  }
-
-  &.active,
-  &:active {
-    outline: 0;
-    background-image: none;
-    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-  }
-
-  &.disabled,
-  &[disabled] {
-    cursor: not-allowed;
-    pointer-events: none;
-    opacity: 0.65;
-    filter: alpha(opacity=65);
-    -webkit-box-shadow: none;
-    box-shadow: none;
-  }
-
-  &.btn-primary {
-    color: #ffffff;
-    background-color: $bg_primary;
-    border-color: $border_primary;
-
-    &.hover,
-    &:hover,
-    &.disabled,
-    &[disabled] {
-      color: #ffffff;
-    }
-  }
-
-  &.btn-success {
-    color: #ffffff;
-    background-color: $bg_success;
-    border-color: $border_success;
-
-
-    &.hover,
-    &:hover,
-    &.disabled,
-    &[disabled] {
-      color: #ffffff;
-    }
-  }
-
-  &.btn-danger {
-    color: #ffffff;
-    background-color: $bg_danger;
-    border-color: $border_danger;
-
-
-    &.hover,
-    &:hover,
-    &.disabled,
-    &[disabled] {
-      color: #ffffff;
-    }
-  }
-
-  &.btn-warning {
-    color: #ffffff;
-    background-color: $bg_warning;
-    border-color: $border_warning;
-
-
-    &.hover,
-    &:hover,
-    &.disabled,
-    &[disabled] {
-      color: #ffffff;
-    }
-  }
+  @extend .btn-default;
 
   &.btn-new {
     @extend .btn-success;
@@ -174,9 +64,12 @@
     }
   }
 
-  &.btn-lg {
-    font-size: 15px;
-    line-height: 1.4;
+  &.btn-save {
+    @extend .btn-primary;
+  }
+
+  &.btn-new, &.btn-create {
+    @extend .btn-success;
   }
 }
 
diff --git a/app/assets/stylesheets/gl_bootstrap.scss b/app/assets/stylesheets/gl_bootstrap.scss
index 6efa56544a5..34ddf6f8717 100644
--- a/app/assets/stylesheets/gl_bootstrap.scss
+++ b/app/assets/stylesheets/gl_bootstrap.scss
@@ -8,6 +8,12 @@ $nav-pills-active-link-hover-bg: $bg_primary;
 $pagination-active-bg: $bg_primary;
 $list-group-active-bg: $bg_primary;
 
+$brand-primary:         $bg_primary;
+$brand-success:         $bg_success;
+$brand-info:            #029ACF;
+$brand-warning:         $bg_warning;
+$brand-danger:          $bg_danger;
+
 // Core variables and mixins
 @import "bootstrap/variables";
 @import "bootstrap/mixins";
@@ -23,6 +29,7 @@ $list-group-active-bg: $bg_primary;
 @import "bootstrap/grid";
 @import "bootstrap/tables";
 @import "bootstrap/forms";
+@import "bootstrap/buttons";
 
 // Components
 @import "bootstrap/component-animations";