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 .btn { 1 .btn {
2 display: inline-block; 2 display: inline-block;
3 - padding: 6px 12px;  
4 margin-bottom: 0; 3 margin-bottom: 0;
5 - font-size: 13px;  
6 - line-height: $baseLineHeight; 4 + font-weight: normal;
7 text-align: center; 5 text-align: center;
8 vertical-align: middle; 6 vertical-align: middle;
9 cursor: pointer; 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 &.hover, 25 &.hover,
19 &:hover { 26 &:hover {
20 - color: $style_color;  
21 - background: #f1f1f1;  
22 - border-color: #AAA; 27 + color: #333333;
23 text-decoration: none; 28 text-decoration: none;
24 - @include linear-gradient(#fAfAfA, #f1f1f1); 29 + background-color: #ebebeb;
  30 + border-color: #adadad;
25 } 31 }
26 32
27 &.focus, 33 &.focus,
28 &:focus { 34 &:focus {
  35 + color: #333333;
29 text-decoration: none; 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 &.active, 42 &.active,
34 &:active { 43 &:active {
35 - background-image: none;  
36 outline: 0; 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 &.disabled, 50 &.disabled,
42 &[disabled] { 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 &.btn-primary { 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 &.hover, 65 &.hover,
56 &:hover, 66 &:hover,
57 &.disabled, 67 &.disabled,
58 &[disabled] { 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 &.btn-success { 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 &.hover, 81 &.hover,
73 &:hover, 82 &:hover,
74 &.disabled, 83 &.disabled,
75 &[disabled] { 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 &.btn-danger { 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 &.hover, 97 &.hover,
89 &:hover, 98 &:hover,
90 &.disabled, 99 &.disabled,
91 &[disabled] { 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