diff options
author | Mark Otto <otto@github.com> | 2012-12-20 10:54:04 +0400 |
---|---|---|
committer | Mark Otto <otto@github.com> | 2012-12-20 10:54:04 +0400 |
commit | 9b4e5746a4340855e86ed16e15331e10ac23a687 (patch) | |
tree | 11abaa6e1738baf5168a3cd2cf3dcac49f5801c5 /less | |
parent | afef81c0d79fc0c8bc313f7f46f4f92f7e3a9988 (diff) |
More button tweaks
Diffstat (limited to 'less')
-rw-r--r-- | less/button-groups.less | 8 | ||||
-rw-r--r-- | less/buttons.less | 24 | ||||
-rw-r--r-- | less/mixins.less | 37 | ||||
-rw-r--r-- | less/variables.less | 17 |
4 files changed, 57 insertions, 29 deletions
diff --git a/less/button-groups.less b/less/button-groups.less index 01f84517f9..f9bcd11625 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -126,16 +126,16 @@ background-color: @btn-background-highlight; } .btn-primary.dropdown-toggle { - background-color: @btn-backround-primary-highlight; + background-color: @btn-background-primary-highlight; } .btn-warning.dropdown-toggle { - background-color: @btn-backround-warning-highlight; + background-color: @btn-background-warning-highlight; } .btn-danger.dropdown-toggle { - background-color: @btn-backround-danger-highlight; + background-color: @btn-background-danger-highlight; } .btn-success.dropdown-toggle { - background-color: @btn-backround-success-highlight; + background-color: @btn-background-success-highlight; } } diff --git a/less/buttons.less b/less/buttons.less index 72a70f535b..d35b7f9011 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -9,19 +9,19 @@ // Core styles .btn { display: inline-block; - padding: 7px 13px; + padding: 6px 13px; margin-bottom: 0; // For input.btn font-size: @font-size-base; - font-weight: bold; line-height: @line-height-base; - text-align: center; color: @gray; + text-align: center; + text-shadow: 0 1px 0 rgba(255,255,255,.75); vertical-align: middle; cursor: pointer; - background-color: #eee; - border: 0; + #gradient > .vertical(@btn-background, @btn-background-highlight); + border: 1px solid darken(@btn-background, 20%); border-radius: @border-radius-base; - .transition(all .075s ease-in-out); + .box-shadow(inset 0 1px 0 rgba(255,255,255,.25)); &:focus { .tab-focus(); @@ -29,13 +29,13 @@ &:hover { text-decoration: none; - background-color: #ddd; } &:active, &.active { outline: 0; - .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.1)"); + background-image: none; + .box-shadow(~"inset 0 3px 5px rgba(0,0,0,.15), 0 1px 0 rgba(255,255,255,.1)"); } &.disabled, @@ -116,19 +116,19 @@ input[type="button"] { // -------------------------------------------------- .btn-primary { - .buttonBackground(@btn-backround-primary); + .buttonBackground(@btn-background-primary, @btn-background-primary-highlight); } // Warning appears are orange .btn-warning { - .buttonBackground(@btn-backround-warning); + .buttonBackground(@btn-background-warning, @btn-background-warning-highlight); } // Danger and error appear as red .btn-danger { - .buttonBackground(@btn-backround-danger); + .buttonBackground(@btn-background-danger, @btn-background-danger-highlight); } // Success appears as green .btn-success { - .buttonBackground(@btn-backround-success); + .buttonBackground(@btn-background-success, @btn-background-success-highlight); } diff --git a/less/mixins.less b/less/mixins.less index 13d9ad2054..da430a2779 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -405,17 +405,46 @@ // Button backgrounds // ------------------ -.buttonBackground(@background-color: #333, @text-color: #fff) { +/*.buttonBackground(@startColor, @endColor, @text-color: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { color: @text-color; - background-color: @background-color; + text-shadow: @textShadow; + #gradient > .vertical(@startColor, @endColor); + border-color: @endColor @endColor darken(@endColor, 15%); + border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); + .reset-filter(); + + // in these cases the gradient won't cover the background, so we override + &:hover, &:active, &.active, &.disabled, &[disabled] { + color: @text-color; + background-color: @endColor; + } + + // IE8 can't handle box-shadow to show active, so we darken a bit ourselves + &:active, + &.active { + background-color: darken(@endColor, 10%) e("\9"); + } +}*/ + +// Button backgrounds +// ------------------ +.buttonBackground(@background-start, @background-end, @text-color: #fff, @text-shadow: 0 -1px 0 rgba(0,0,0,.25)) { + color: @text-color; + text-shadow: @text-shadow; + #gradient > .vertical(@background-start, @background-end); + border-color: darken(@background-end, 5%); &:hover, &:active, &.active { color: @text-color; - background-color: darken(@background-color, 10%); + background-position: 0 -15px; + background-color: @background-end; + } + &:active, + &.active { + background-image: none; } - } diff --git a/less/variables.less b/less/variables.less index d881f55aa7..78ccca53f0 100644 --- a/less/variables.less +++ b/less/variables.less @@ -77,19 +77,18 @@ @btn-background: #fafafa; @btn-background-highlight: darken(@btn-background, 10%); -@btn-border: #bbb; -@btn-backround-primary: @link-color; -@btn-backround-primary-highlight: spin(@btn-backround-primary, 20%); +@btn-background-primary: @link-color; +@btn-background-primary-highlight: spin(@btn-background-primary, 20%); -@btn-backround-success: #62c462; -@btn-backround-success-highlight: #51a351; +@btn-background-success: #62c462; +@btn-background-success-highlight: #51a351; -@btn-backround-warning: lighten(#f89406, 15%); -@btn-backround-warning-highlight: #f89406; +@btn-background-warning: lighten(#f89406, 15%); +@btn-background-warning-highlight: #f89406; -@btn-backround-danger: #ee5f5b; -@btn-backround-danger-highlight: #bd362f; +@btn-background-danger: #ee5f5b; +@btn-background-danger-highlight: #bd362f; // Forms |