diff options
| author | Mark Otto <[email protected]> | 2012-12-19 22:25:56 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2012-12-19 22:25:56 -0800 |
| commit | c38b7206eb049f57c7b1db570817739bdda0be6f (patch) | |
| tree | 6a017fe46b14b51c72e4e195b7d409e9450af8c0 /less | |
| parent | a932476f803fc97f05a60b6bedf4a09c1ed31d4d (diff) | |
| download | bootstrap-c38b7206eb049f57c7b1db570817739bdda0be6f.tar.xz bootstrap-c38b7206eb049f57c7b1db570817739bdda0be6f.zip | |
overhaul buttons
Diffstat (limited to 'less')
| -rw-r--r-- | less/button-groups.less | 6 | ||||
| -rw-r--r-- | less/buttons.less | 89 | ||||
| -rw-r--r-- | less/mixins.less | 20 | ||||
| -rw-r--r-- | less/variables.less | 6 |
4 files changed, 64 insertions, 57 deletions
diff --git a/less/button-groups.less b/less/button-groups.less index 4648245c7..01f84517f 100644 --- a/less/button-groups.less +++ b/less/button-groups.less @@ -137,12 +137,6 @@ .btn-success.dropdown-toggle { background-color: @btn-backround-success-highlight; } - .btn-info.dropdown-toggle { - background-color: @btn-backround-info-highlight; - } - .btn-inverse.dropdown-toggle { - background-color: @btn-backround-inverse-highlight; - } } diff --git a/less/buttons.less b/less/buttons.less index 113319292..0aca982b2 100644 --- a/less/buttons.less +++ b/less/buttons.less @@ -6,6 +6,59 @@ // Base styles // -------------------------------------------------- +// Core styles +.btn { + display: inline-block; + padding: 7px 13px; + margin-bottom: 0; // For input.btn + font-size: @font-size-base; + font-weight: bold; + line-height: @line-height-base; + text-align: center; + vertical-align: middle; + cursor: pointer; + border: 0; + border-radius: @border-radius-base; + //.transition(all .075s ease-in-out); + + &:focus { + .tab-focus(); + } + + &:hover { + text-decoration: none; + } + + &:active, + &.active { + outline: 0; + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); + } + + &.disabled, + &[disabled] { + cursor: default; + .opacity(65); + .box-shadow(none); + } + +} + +// Default button visuals +.btn-default { + padding: 6px 12px; + color: #5a5a5a; + background-color: #fff; + border: 1px solid #ccc; + + &:hover { + color: #fff; + background-color: #999; + border-color: #999; + } +} + +/* // Core .btn { display: inline-block; @@ -57,7 +110,7 @@ } } - +*/ // Button Sizes // ------------------------- @@ -126,47 +179,21 @@ input[type="button"] { // Alternate buttons // -------------------------------------------------- -// Provide *some* extra contrast for those who can get it -.btn-primary.active, -.btn-warning.active, -.btn-danger.active, -.btn-success.active, -.btn-info.active, -.btn-inverse.active { - color: rgba(255,255,255,.75); -} - -// Set the backgrounds -// ------------------------- -.btn { - // reset here as of 2.0.3 due to Recess property order - border-color: #c5c5c5; - border-color: rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,.25); -} .btn-primary { - .buttonBackground(@btn-backround-primary, @btn-backround-primary-highlight); + .buttonBackground(@btn-backround-primary); } // Warning appears are orange .btn-warning { - .buttonBackground(@btn-backround-warning, @btn-backround-warning-highlight); + .buttonBackground(@btn-backround-warning); } // Danger and error appear as red .btn-danger { - .buttonBackground(@btn-backround-danger, @btn-backround-danger-highlight); + .buttonBackground(@btn-backround-danger); } // Success appears as green .btn-success { - .buttonBackground(@btn-backround-success, @btn-backround-success-highlight); -} -// Info appears as a neutral blue -.btn-info { - .buttonBackground(@btn-backround-info, @btn-backround-info-highlight); + .buttonBackground(@btn-backround-success); } -// Inverse appears as dark gray -.btn-inverse { - .buttonBackground(@btn-backround-inverse, @btn-backround-inverse-highlight); -} - // Link buttons diff --git a/less/mixins.less b/less/mixins.less index 1da275863..13d9ad205 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -405,25 +405,17 @@ // Button backgrounds // ------------------ -.buttonBackground(@startColor, @endColor, @text-color: #fff, @textShadow: 0 -1px 0 rgba(0,0,0,.25)) { +.buttonBackground(@background-color: #333, @text-color: #fff) { color: @text-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; - } + background-color: @background-color; - // IE8 can't handle box-shadow to show active, so we darken a bit ourselves + &:hover, &:active, &.active { - background-color: darken(@endColor, 10%) e("\9"); + color: @text-color; + background-color: darken(@background-color, 10%); } + } diff --git a/less/variables.less b/less/variables.less index 9b85f3574..d881f55aa 100644 --- a/less/variables.less +++ b/less/variables.less @@ -82,9 +82,6 @@ @btn-backround-primary: @link-color; @btn-backround-primary-highlight: spin(@btn-backround-primary, 20%); -@btn-backround-info: #5bc0de; -@btn-backround-info-highlight: #2f96b4; - @btn-backround-success: #62c462; @btn-backround-success-highlight: #51a351; @@ -94,9 +91,6 @@ @btn-backround-danger: #ee5f5b; @btn-backround-danger-highlight: #bd362f; -@btn-backround-inverse: #444; -@btn-backround-inverse-highlight: @grayDarker; - // Forms // ------------------------- |
