Download as
Browse Code »

Commit aed65f56ec746eeae0af86ec7ff733bda881b41d

Authored by Dmitriy Zaporozhets
1 parent 37741f3e
Exists in master and in 4 other branches 6-8-stable, 7-0-stable, 7-0-stable-spb, spb-stable

New style for buttons (bootstrap 3 like) 

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>
Showing 1 changed file with 51 additions and 41 deletions   Show diff stats
app/assets/stylesheets/gitlab_bootstrap/buttons.scss
  Diff comments   View file @aed65f5
1 1 .btn {
2 2 display: inline-block;
3   - padding: 6px 12px;
4 3 margin-bottom: 0;
5   - font-size: 13px;
6   - line-height: $baseLineHeight;
  4 + font-weight: normal;
7 5 text-align: center;
8 6 vertical-align: middle;
9 7 cursor: pointer;
10   - border: 1px solid #BBB;
11   - color: $style_color;
12   - @include border-radius($baseBorderRadius);
13   - @include box-shadow(inset 0 1px 0 rgba(255,255,255,.2));
14   - @include linear-gradient(#f1f1f1, #e1e1e1);
15   - text-shadow: 0 1px 1px #FFF;
16   - text-decoration: none;
  8 + background-image: none;
  9 + border: 1px solid transparent;
  10 + white-space: nowrap;
  11 + padding: 6px 12px;
  12 + font-size: 13px;
  13 + line-height: 1.5;
  14 + border-radius: 4px;
  15 + -webkit-user-select: none;
  16 + -moz-user-select: none;
  17 + -ms-user-select: none;
  18 + -o-user-select: none;
  19 + user-select: none;
  20 + color: #333333;
  21 + background-color: #fff;
  22 + border-color: #ccc;
  23 + text-shadow: none;
17 24  
18 25 &.hover,
19 26 &:hover {
20   - color: $style_color;
21   - background: #f1f1f1;
22   - border-color: #AAA;
  27 + color: #333333;
23 28 text-decoration: none;
24   - @include linear-gradient(#fAfAfA, #f1f1f1);
  29 + background-color: #ebebeb;
  30 + border-color: #adadad;
25 31 }
26 32  
27 33 &.focus,
28 34 &:focus {
  35 + color: #333333;
29 36 text-decoration: none;
30   - @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15));
  37 + outline: thin dotted #333;
  38 + outline: 5px auto -webkit-focus-ring-color;
  39 + outline-offset: -2px;
31 40 }
32 41  
33 42 &.active,
34 43 &:active {
35   - background-image: none;
36 44 outline: 0;
37   - text-decoration: none;
38   - @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15));
  45 + background-image: none;
  46 + -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  47 + box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
39 48 }
40 49  
41 50 &.disabled,
42 51 &[disabled] {
43   - cursor: default;
44   - background-image: none;
45   - @include opacity(65);
46   - @include box-shadow(none);
  52 + cursor: not-allowed;
  53 + pointer-events: none;
  54 + opacity: 0.65;
  55 + filter: alpha(opacity=65);
  56 + -webkit-box-shadow: none;
  57 + box-shadow: none;
47 58 }
48 59  
49 60 &.btn-primary {
50   - color: #FFF;
51   - border-color: #189;
52   - text-shadow: 0 1px 1px #189;
53   - @include linear-gradient(#4AC, #289);
  61 + color: #ffffff;
  62 + background-color: #429bca;
  63 + border-color: #358ebd;
54 64  
55 65 &.hover,
56 66 &:hover,
57 67 &.disabled,
58 68 &[disabled] {
59   - color: #FFF;
60   - background: #389;
  69 + color: #ffffff;
  70 + background-color: #3286b1;
  71 + border-color: #286e8e;
61 72 }
62 73 }
63 74  
64 75 &.btn-success {
65   - color: #FFF;
66   - border-color: #1A1;
67   - text-shadow: 0 1px 1px #FFF;
68   - text-shadow: 0 1px 1px #181;
69   - @include linear-gradient(#62C452, #51a351);
  76 + color: #ffffff;
  77 + background-color: #5cb85c;
  78 + border-color: #4cae4c;
70 79  
71 80  
72 81 &.hover,
73 82 &:hover,
74 83 &.disabled,
75 84 &[disabled] {
76   - color: #FFF;
77   - background: #2A2;
  85 + color: #ffffff;
  86 + background-color: #47a447;
  87 + border-color: #398439;
78 88 }
79 89 }
80 90  
81 91 &.btn-danger {
82   - color: #FFF;
83   - text-shadow: 0 1px 1px #811;
84   - border-color: #BD362F;
85   - @include linear-gradient(#EE5F5B, #BD362F);
  92 + color: #ffffff;
  93 + background-color: #d9534f;
  94 + border-color: #d43f3a;
86 95  
87 96  
88 97 &.hover,
89 98 &:hover,
90 99 &.disabled,
91 100 &[disabled] {
92   - color: #FFF;
93   - background: #A22;
  101 + color: #ffffff;
  102 + background-color: #d2322d;
  103 + border-color: #ac2925;
94 104 }
95 105 }
96 106  
... ...