Commit b8f6d67b96991e8089fb3b139d4e17994af60b17
1 parent
0be06215
Exists in
master
and in
4 other branches
Restyle buttons
Showing
1 changed file
with
75 additions
and
53 deletions
Show diff stats
app/assets/stylesheets/gitlab_bootstrap/buttons.scss
| 1 | .btn { | 1 | .btn { |
| 2 | + display: inline-block; | ||
| 3 | + padding: 6px 12px; | ||
| 4 | + margin-bottom: 0; | ||
| 5 | + font-size: 13px; | ||
| 6 | + line-height: $baseLineHeight; | ||
| 7 | + text-align: center; | ||
| 8 | + vertical-align: middle; | ||
| 9 | + 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)); | ||
| 2 | @include linear-gradient(#f1f1f1, #e1e1e1); | 14 | @include linear-gradient(#f1f1f1, #e1e1e1); |
| 3 | text-shadow: 0 1px 1px #FFF; | 15 | text-shadow: 0 1px 1px #FFF; |
| 4 | - border-color: #BBB; | 16 | + text-decoration: none; |
| 5 | 17 | ||
| 18 | + &.hover, | ||
| 6 | &:hover { | 19 | &:hover { |
| 20 | + color: $style_color; | ||
| 7 | background: #f1f1f1; | 21 | background: #f1f1f1; |
| 8 | - @include linear-gradient(#fAfAfA, #f1f1f1); | ||
| 9 | border-color: #AAA; | 22 | border-color: #AAA; |
| 10 | - color: #333; | 23 | + text-decoration: none; |
| 24 | + @include linear-gradient(#fAfAfA, #f1f1f1); | ||
| 11 | } | 25 | } |
| 12 | 26 | ||
| 13 | - &.btn-primary { | ||
| 14 | - background: #2a79A3; | ||
| 15 | - @include linear-gradient(#47A7b7, #2585b5); | ||
| 16 | - border-color: #2A79A3; | ||
| 17 | - color: #fff; | ||
| 18 | - text-shadow: 0 1px 1px #268; | ||
| 19 | - &:hover { | ||
| 20 | - background: $primary_color; | ||
| 21 | - color: #fff; | ||
| 22 | - } | ||
| 23 | - | ||
| 24 | - &.disabled { | ||
| 25 | - color: #fff; | ||
| 26 | - background: $primary_color; | ||
| 27 | - } | 27 | + &.active, |
| 28 | + &:active { | ||
| 29 | + background-image: none; | ||
| 30 | + outline: 0; | ||
| 31 | + @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15)); | ||
| 28 | } | 32 | } |
| 29 | 33 | ||
| 30 | - &.btn-info { | ||
| 31 | - background: #5aB9C3; | ||
| 32 | - border-color: $primary_color; | ||
| 33 | - color: #fff; | ||
| 34 | - text-shadow: 0 1px 1px #268; | ||
| 35 | - &:hover { | ||
| 36 | - background: $primary_color; | ||
| 37 | - color: #fff; | ||
| 38 | - } | 34 | + &.disabled, |
| 35 | + &[disabled] { | ||
| 36 | + cursor: default; | ||
| 37 | + background-image: none; | ||
| 38 | + @include opacity(65); | ||
| 39 | + @include box-shadow(none); | ||
| 40 | + } | ||
| 39 | 41 | ||
| 40 | - &.disabled { | ||
| 41 | - color: #fff; | ||
| 42 | - background: $primary_color; | 42 | + &.btn-primary { |
| 43 | + color: #FFF; | ||
| 44 | + border-color: #189; | ||
| 45 | + text-shadow: 0 1px 1px #189; | ||
| 46 | + @include linear-gradient(#4AC, #289); | ||
| 47 | + | ||
| 48 | + &.hover, | ||
| 49 | + &:hover, | ||
| 50 | + &.disabled, | ||
| 51 | + &[disabled] { | ||
| 52 | + color: #FFF; | ||
| 53 | + background: #389; | ||
| 43 | } | 54 | } |
| 44 | } | 55 | } |
| 45 | 56 | ||
| 46 | &.btn-success { | 57 | &.btn-success { |
| 47 | - &:hover { | ||
| 48 | - background: #51a351; | 58 | + color: #FFF; |
| 59 | + border-color: #1A1; | ||
| 60 | + text-shadow: 0 1px 1px #FFF; | ||
| 61 | + text-shadow: 0 1px 1px #181; | ||
| 62 | + @include linear-gradient(#62C452, #51a351); | ||
| 63 | + | ||
| 64 | + | ||
| 65 | + &.hover, | ||
| 66 | + &:hover, | ||
| 67 | + &.disabled, | ||
| 68 | + &[disabled] { | ||
| 69 | + color: #FFF; | ||
| 70 | + background: #2A2; | ||
| 49 | } | 71 | } |
| 72 | + } | ||
| 73 | + | ||
| 74 | + &.btn-danger { | ||
| 75 | + color: #FFF; | ||
| 76 | + text-shadow: 0 1px 1px #811; | ||
| 77 | + border-color: #BD362F; | ||
| 78 | + @include linear-gradient(#EE5F5B, #BD362F); | ||
| 50 | 79 | ||
| 51 | - &.disabled { | ||
| 52 | - color: #fff; | ||
| 53 | - background: #2b2; | 80 | + |
| 81 | + &.hover, | ||
| 82 | + &:hover, | ||
| 83 | + &.disabled, | ||
| 84 | + &[disabled] { | ||
| 85 | + color: #FFF; | ||
| 86 | + background: #A22; | ||
| 54 | } | 87 | } |
| 55 | } | 88 | } |
| 56 | 89 | ||
| 90 | + &.btn-new { | ||
| 91 | + @extend .btn-success; | ||
| 92 | + } | ||
| 93 | + | ||
| 57 | &.btn-create { | 94 | &.btn-create { |
| 58 | @extend .wide; | 95 | @extend .wide; |
| 59 | @extend .btn-success; | 96 | @extend .btn-success; |
| @@ -67,12 +104,6 @@ | @@ -67,12 +104,6 @@ | ||
| 67 | &.btn-close, | 104 | &.btn-close, |
| 68 | &.btn-remove { | 105 | &.btn-remove { |
| 69 | @extend .btn-danger; | 106 | @extend .btn-danger; |
| 70 | - border-color: #BD362F; | ||
| 71 | - | ||
| 72 | - &:hover { | ||
| 73 | - color: #fff; | ||
| 74 | - background: #EE4E49; | ||
| 75 | - } | ||
| 76 | } | 107 | } |
| 77 | 108 | ||
| 78 | &.btn-cancel { | 109 | &.btn-cancel { |
| @@ -84,13 +115,9 @@ | @@ -84,13 +115,9 @@ | ||
| 84 | padding-right: 20px; | 115 | padding-right: 20px; |
| 85 | } | 116 | } |
| 86 | 117 | ||
| 87 | - &.small { | ||
| 88 | - @extend .btn-small; | ||
| 89 | - } | ||
| 90 | - | ||
| 91 | - &.active { | ||
| 92 | - border-color: #aaa; | ||
| 93 | - background-color: #ccc; | 118 | + &.btn-small { |
| 119 | + padding: 2px 10px; | ||
| 120 | + font-size: 12px; | ||
| 94 | } | 121 | } |
| 95 | 122 | ||
| 96 | &.btn-tiny { | 123 | &.btn-tiny { |
| @@ -104,9 +131,4 @@ | @@ -104,9 +131,4 @@ | ||
| 104 | margin-right: 7px; | 131 | margin-right: 7px; |
| 105 | float: left; | 132 | float: left; |
| 106 | } | 133 | } |
| 107 | - | ||
| 108 | - &.padded { | ||
| 109 | - margin-right: 3px; | ||
| 110 | - padding: 4px 10px 4px; | ||
| 111 | - } | ||
| 112 | } | 134 | } |