diff options
| -rw-r--r-- | app/assets/stylesheets/gitlab_bootstrap/buttons.scss | 128 |
1 files changed, 75 insertions, 53 deletions
diff --git a/app/assets/stylesheets/gitlab_bootstrap/buttons.scss b/app/assets/stylesheets/gitlab_bootstrap/buttons.scss index 90b041b29db..503de3cfd80 100644 --- a/app/assets/stylesheets/gitlab_bootstrap/buttons.scss +++ b/app/assets/stylesheets/gitlab_bootstrap/buttons.scss @@ -1,59 +1,96 @@ .btn { + display: inline-block; + padding: 6px 12px; + margin-bottom: 0; + font-size: 13px; + line-height: $baseLineHeight; + text-align: center; + vertical-align: middle; + cursor: pointer; + border: 1px solid #BBB; + color: $style_color; + @include border-radius($baseBorderRadius); + @include box-shadow(inset 0 1px 0 rgba(255,255,255,.2)); @include linear-gradient(#f1f1f1, #e1e1e1); text-shadow: 0 1px 1px #FFF; - border-color: #BBB; + text-decoration: none; + &.hover, &:hover { + color: $style_color; background: #f1f1f1; - @include linear-gradient(#fAfAfA, #f1f1f1); border-color: #AAA; - color: #333; + text-decoration: none; + @include linear-gradient(#fAfAfA, #f1f1f1); } - &.btn-primary { - background: #2a79A3; - @include linear-gradient(#47A7b7, #2585b5); - border-color: #2A79A3; - color: #fff; - text-shadow: 0 1px 1px #268; - &:hover { - background: $primary_color; - color: #fff; - } - - &.disabled { - color: #fff; - background: $primary_color; - } + &.active, + &:active { + background-image: none; + outline: 0; + @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15)); } - &.btn-info { - background: #5aB9C3; - border-color: $primary_color; - color: #fff; - text-shadow: 0 1px 1px #268; - &:hover { - background: $primary_color; - color: #fff; - } + &.disabled, + &[disabled] { + cursor: default; + background-image: none; + @include opacity(65); + @include box-shadow(none); + } - &.disabled { - color: #fff; - background: $primary_color; + &.btn-primary { + color: #FFF; + border-color: #189; + text-shadow: 0 1px 1px #189; + @include linear-gradient(#4AC, #289); + + &.hover, + &:hover, + &.disabled, + &[disabled] { + color: #FFF; + background: #389; } } &.btn-success { - &:hover { - background: #51a351; + color: #FFF; + border-color: #1A1; + text-shadow: 0 1px 1px #FFF; + text-shadow: 0 1px 1px #181; + @include linear-gradient(#62C452, #51a351); + + + &.hover, + &:hover, + &.disabled, + &[disabled] { + color: #FFF; + background: #2A2; } + } + + &.btn-danger { + color: #FFF; + text-shadow: 0 1px 1px #811; + border-color: #BD362F; + @include linear-gradient(#EE5F5B, #BD362F); - &.disabled { - color: #fff; - background: #2b2; + + &.hover, + &:hover, + &.disabled, + &[disabled] { + color: #FFF; + background: #A22; } } + &.btn-new { + @extend .btn-success; + } + &.btn-create { @extend .wide; @extend .btn-success; @@ -67,12 +104,6 @@ &.btn-close, &.btn-remove { @extend .btn-danger; - border-color: #BD362F; - - &:hover { - color: #fff; - background: #EE4E49; - } } &.btn-cancel { @@ -84,13 +115,9 @@ padding-right: 20px; } - &.small { - @extend .btn-small; - } - - &.active { - border-color: #aaa; - background-color: #ccc; + &.btn-small { + padding: 2px 10px; + font-size: 12px; } &.btn-tiny { @@ -104,9 +131,4 @@ margin-right: 7px; float: left; } - - &.padded { - margin-right: 3px; - padding: 4px 10px 4px; - } } |