New style for buttons (bootstrap 3 like)

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

New style for buttons (bootstrap 3 like)
Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
aed65f56 · Dmitriy Zaporozhets · 37741f3e · aed65f56
Commit aed65f56 authored Nov 13, 2013 by Dmitriy Zaporozhets
Hide whitespace changes
Inline Side-by-side

Showing with 51 additions and 41 deletions

app/assets/stylesheets/gitlab_bootstrap/buttons.scss app/assets/stylesheets/gitlab_bootstrap/buttons.scss +51 -41

No files found.
--- a/app/assets/stylesheets/gitlab_bootstrap/buttons.scss
+++ b/app/assets/stylesheets/gitlab_bootstrap/buttons.scss
 .btn {
  display: inline-block;
-  padding: 6px 12px;
  margin-bottom: 0;
-  font-size: 13px;
+  font-weight: normal;
-  line-height: $baseLineHeight;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
-  border: 1px solid #BBB;
+  background-image: none;
-  color: $style_color;
+  border: 1px solid transparent;
-  @include border-radius($baseBorderRadius);
+  white-space: nowrap;
-  @include box-shadow(inset 0 1px 0 rgba(255,255,255,.2));
+  padding: 6px 12px;
-  @include linear-gradient(#f1f1f1, #e1e1e1);
+  font-size: 13px;
-  text-shadow: 0 1px 1px #FFF;
+  line-height: 1.5;
-  text-decoration: none;
+  border-radius: 4px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  -o-user-select: none;
+  user-select: none;
+  color: #333333;
+  background-color: #fff;
+  border-color: #ccc;
+  text-shadow: none;
  &.hover,
  &:hover {
-    color: $style_color;
+    color: #333333;
-    background: #f1f1f1;
-    border-color: #AAA;
    text-decoration: none;
-    @include linear-gradient(#fAfAfA, #f1f1f1);
+    background-color: #ebebeb;
+    border-color: #adadad;
  }
  &.focus,
  &:focus {
+    color: #333333;
    text-decoration: none;
-    @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15));
+    outline: thin dotted #333;
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
  }
  &.active,
  &:active {
-    background-image: none;
    outline: 0;
-    text-decoration: none;
+    background-image: none;
-    @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15));
+    -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: default;
+    cursor: not-allowed;
-    background-image: none;
+    pointer-events: none;
-    @include opacity(65);
+    opacity: 0.65;
-    @include box-shadow(none);
+    filter: alpha(opacity=65);
+    -webkit-box-shadow: none;
+    box-shadow: none;
  }
  &.btn-primary {
-    color: #FFF;
+    color: #ffffff;
-    border-color: #189;
+    background-color: #429bca;
-    text-shadow: 0 1px 1px #189;
+    border-color: #358ebd;
-    @include linear-gradient(#4AC, #289);
    &.hover,
    &:hover,
    &.disabled,
    &[disabled] {
-      color: #FFF;
+      color: #ffffff;
-      background: #389;
+      background-color: #3286b1;
+      border-color: #286e8e;
    }
  }
  &.btn-success {
-    color: #FFF;
+    color: #ffffff;
-    border-color: #1A1;
+    background-color: #5cb85c;
-    text-shadow: 0 1px 1px #FFF;
+    border-color: #4cae4c;
-    text-shadow: 0 1px 1px #181;
-    @include linear-gradient(#62C452, #51a351);
    &.hover,
    &:hover,
    &.disabled,
    &[disabled] {
-      color: #FFF;
+      color: #ffffff;
-      background: #2A2;
+      background-color: #47a447;
+      border-color: #398439;
    }
  }
  &.btn-danger {
-    color: #FFF;
+    color: #ffffff;
-    text-shadow: 0 1px 1px #811;
+    background-color: #d9534f;
-    border-color: #BD362F;
+    border-color: #d43f3a;
-    @include linear-gradient(#EE5F5B, #BD362F);
    &.hover,
    &:hover,
    &.disabled,
    &[disabled] {
-      color: #FFF;
+      color: #ffffff;
-      background: #A22;
+      background-color: #d2322d;
+      border-color: #ac2925;
    }
  }