diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 5051c7ef98..87b2942a15 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -2541,56 +2541,16 @@ button.close { .btn { display: inline-block; - padding: 6px 12px; + padding: 7px 13px; margin-bottom: 0; font-size: 14px; + font-weight: bold; line-height: 20px; - color: #333333; text-align: center; - text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); - white-space: nowrap; vertical-align: middle; cursor: pointer; - background-color: #f0f0f0; - background-image: -moz-linear-gradient(top, #fafafa, #e1e1e1); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fafafa), to(#e1e1e1)); - background-image: -webkit-linear-gradient(top, #fafafa, #e1e1e1); - background-image: -o-linear-gradient(top, #fafafa, #e1e1e1); - background-image: linear-gradient(to bottom, #fafafa, #e1e1e1); - background-repeat: repeat-x; - border: 1px solid #bbbbbb; - border-color: #e1e1e1 #e1e1e1 #bababa; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - border-bottom-color: #a2a2a2; + border: 0; border-radius: 4px; - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffafafa', endColorstr='#ffe1e1e1', GradientType=0); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); - -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); - box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -} - -.btn:hover, -.btn:active, -.btn.active, -.btn.disabled, -.btn[disabled] { - color: #333333; - background-color: #e1e1e1; -} - -.btn:active, -.btn.active { - background-color: #c7c7c7 \9; -} - -.btn:hover { - color: #333333; - text-decoration: none; - background-position: 0 -15px; - -webkit-transition: background-position 0.1s linear; - -moz-transition: background-position 0.1s linear; - -o-transition: background-position 0.1s linear; - transition: background-position 0.1s linear; } .btn:focus { @@ -2599,9 +2559,12 @@ button.close { outline-offset: -2px; } -.btn.active, -.btn:active { - background-image: none; +.btn:hover { + text-decoration: none; +} + +.btn:active, +.btn.active { outline: 0; -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); @@ -2610,13 +2573,79 @@ button.close { .btn.disabled, .btn[disabled] { cursor: default; - background-image: none; opacity: 0.65; filter: alpha(opacity=65); -webkit-box-shadow: none; box-shadow: none; } +.btn-default { + padding: 6px 12px; + color: #5a5a5a; + background-color: #fff; + border: 1px solid #ccc; +} + +.btn-default:hover { + color: #fff; + background-color: #999; + border-color: #999; +} + +/* +// Core +.btn { + display: inline-block; + padding: 6px 12px; + margin-bottom: 0; // For input.btn + font-size: @font-size-base; + line-height: @line-height-base; + text-align: center; + vertical-align: middle; + cursor: pointer; + white-space: nowrap; + .buttonBackground(@btn-background, @btn-background-highlight, @grayDark, 0 1px 1px rgba(255,255,255,.75)); + border: 1px solid @btn-border; + border-bottom-color: darken(@btn-border, 10%); + border-radius: @border-radius-base; + .box-shadow(~"inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)"); + + // Hover state + &:hover { + color: @grayDark; + text-decoration: none; + background-position: 0 -15px; + + // transition is only when going to hover, otherwise the background + // behind the gradient (there for IE<=9 fallback) gets mismatched + .transition(background-position .1s linear); + } + + // Focus state for keyboard and accessibility + &:focus { + .tab-focus(); + } + + // Active state + &.active, + &:active { + background-image: none; + outline: 0; + .box-shadow(~"inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05)"); + } + + // Disabled state + &.disabled, + &[disabled] { + cursor: default; + background-image: none; + .opacity(65); + .box-shadow(none); + } + +} +*/ + .btn-large { padding: 11px 19px; font-size: 17.5px; @@ -2669,198 +2698,52 @@ input[type="button"].btn-block { width: 100%; } -.btn-primary.active, -.btn-warning.active, -.btn-danger.active, -.btn-success.active, -.btn-info.active, -.btn-inverse.active { - color: rgba(255, 255, 255, 0.75); -} - -.btn { - border-color: #c5c5c5; - border-color: rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.15) rgba(0, 0, 0, 0.25); -} - .btn-primary { color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #006dcc; - background-image: -moz-linear-gradient(top, #0088cc, #0044cc); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0044cc)); - background-image: -webkit-linear-gradient(top, #0088cc, #0044cc); - background-image: -o-linear-gradient(top, #0088cc, #0044cc); - background-image: linear-gradient(to bottom, #0088cc, #0044cc); - background-repeat: repeat-x; - border-color: #0044cc #0044cc #002a80; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0044cc', GradientType=0); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + background-color: #0088cc; } .btn-primary:hover, -.btn-primary:active, -.btn-primary.active, -.btn-primary.disabled, -.btn-primary[disabled] { - color: #ffffff; - background-color: #0044cc; -} - .btn-primary:active, .btn-primary.active { - background-color: #003399 \9; + color: #ffffff; + background-color: #006699; } .btn-warning { color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #faa732; - background-image: -moz-linear-gradient(top, #fbb450, #f89406); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406)); - background-image: -webkit-linear-gradient(top, #fbb450, #f89406); - background-image: -o-linear-gradient(top, #fbb450, #f89406); - background-image: linear-gradient(to bottom, #fbb450, #f89406); - background-repeat: repeat-x; - border-color: #f89406 #f89406 #ad6704; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + background-color: #fbb450; } .btn-warning:hover, -.btn-warning:active, -.btn-warning.active, -.btn-warning.disabled, -.btn-warning[disabled] { - color: #ffffff; - background-color: #f89406; -} - .btn-warning:active, .btn-warning.active { - background-color: #c67605 \9; + color: #ffffff; + background-color: #fa9f1e; } .btn-danger { color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #da4f49; - background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f)); - background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f); - background-image: -o-linear-gradient(top, #ee5f5b, #bd362f); - background-image: linear-gradient(to bottom, #ee5f5b, #bd362f); - background-repeat: repeat-x; - border-color: #bd362f #bd362f #802420; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffee5f5b', endColorstr='#ffbd362f', GradientType=0); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + background-color: #ee5f5b; } .btn-danger:hover, -.btn-danger:active, -.btn-danger.active, -.btn-danger.disabled, -.btn-danger[disabled] { - color: #ffffff; - background-color: #bd362f; -} - .btn-danger:active, .btn-danger.active { - background-color: #942a25 \9; + color: #ffffff; + background-color: #e9322d; } .btn-success { color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #5bb75b; - background-image: -moz-linear-gradient(top, #62c462, #51a351); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351)); - background-image: -webkit-linear-gradient(top, #62c462, #51a351); - background-image: -o-linear-gradient(top, #62c462, #51a351); - background-image: linear-gradient(to bottom, #62c462, #51a351); - background-repeat: repeat-x; - border-color: #51a351 #51a351 #387038; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff62c462', endColorstr='#ff51a351', GradientType=0); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + background-color: #62c462; } .btn-success:hover, -.btn-success:active, -.btn-success.active, -.btn-success.disabled, -.btn-success[disabled] { - color: #ffffff; - background-color: #51a351; -} - .btn-success:active, .btn-success.active { - background-color: #408140 \9; -} - -.btn-info { color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #49afcd; - background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#5bc0de), to(#2f96b4)); - background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4); - background-image: -o-linear-gradient(top, #5bc0de, #2f96b4); - background-image: linear-gradient(to bottom, #5bc0de, #2f96b4); - background-repeat: repeat-x; - border-color: #2f96b4 #2f96b4 #1f6377; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2f96b4', GradientType=0); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -} - -.btn-info:hover, -.btn-info:active, -.btn-info.active, -.btn-info.disabled, -.btn-info[disabled] { - color: #ffffff; - background-color: #2f96b4; -} - -.btn-info:active, -.btn-info.active { - background-color: #24748c \9; -} - -.btn-inverse { - color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #363636; - background-image: -moz-linear-gradient(top, #444444, #222222); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#444444), to(#222222)); - background-image: -webkit-linear-gradient(top, #444444, #222222); - background-image: -o-linear-gradient(top, #444444, #222222); - background-image: linear-gradient(to bottom, #444444, #222222); - background-repeat: repeat-x; - border-color: #222222 #222222 #000000; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff444444', endColorstr='#ff222222', GradientType=0); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); -} - -.btn-inverse:hover, -.btn-inverse:active, -.btn-inverse.active, -.btn-inverse.disabled, -.btn-inverse[disabled] { - color: #ffffff; - background-color: #222222; -} - -.btn-inverse:active, -.btn-inverse.active { - background-color: #080808 \9; + background-color: #42b142; } .btn-link, @@ -3020,14 +2903,6 @@ input[type="button"].btn-block { background-color: #51a351; } -.btn-group.open .btn-info.dropdown-toggle { - background-color: #2f96b4; -} - -.btn-group.open .btn-inverse.dropdown-toggle { - background-color: #222222; -} - .btn .caret { margin-top: 8px; margin-left: 0; @@ -3654,35 +3529,17 @@ input[type="button"].btn-block { padding: 7px 10px; margin-right: 5px; margin-left: 5px; - color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #ededed; - background-image: -moz-linear-gradient(top, #f2f2f2, #e5e5e5); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f2f2f2), to(#e5e5e5)); - background-image: -webkit-linear-gradient(top, #f2f2f2, #e5e5e5); - background-image: -o-linear-gradient(top, #f2f2f2, #e5e5e5); - background-image: linear-gradient(to bottom, #f2f2f2, #e5e5e5); - background-repeat: repeat-x; - border-color: #e5e5e5 #e5e5e5 #bfbfbf; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2f2f2', endColorstr='#ffe5e5e5', GradientType=0); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + color: #e5e5e5; + background-color: #f2f2f2; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.075); } .navbar .btn-navbar:hover, -.navbar .btn-navbar:active, -.navbar .btn-navbar.active, -.navbar .btn-navbar.disabled, -.navbar .btn-navbar[disabled] { - color: #ffffff; - background-color: #e5e5e5; -} - .navbar .btn-navbar:active, .navbar .btn-navbar.active { - background-color: #cccccc \9; + color: #e5e5e5; + background-color: #d9d9d9; } .navbar .btn-navbar .icon-bar { @@ -3906,33 +3763,15 @@ input[type="button"].btn-block { } .navbar-inverse .btn-navbar { - color: #ffffff; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); - background-color: #0e0e0e; - background-image: -moz-linear-gradient(top, #151515, #040404); - background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#151515), to(#040404)); - background-image: -webkit-linear-gradient(top, #151515, #040404); - background-image: -o-linear-gradient(top, #151515, #040404); - background-image: linear-gradient(to bottom, #151515, #040404); - background-repeat: repeat-x; - border-color: #040404 #040404 #000000; - border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff151515', endColorstr='#ff040404', GradientType=0); - filter: progid:DXImageTransform.Microsoft.gradient(enabled=false); + color: #040404; + background-color: #151515; } .navbar-inverse .btn-navbar:hover, -.navbar-inverse .btn-navbar:active, -.navbar-inverse .btn-navbar.active, -.navbar-inverse .btn-navbar.disabled, -.navbar-inverse .btn-navbar[disabled] { - color: #ffffff; - background-color: #040404; -} - .navbar-inverse .btn-navbar:active, .navbar-inverse .btn-navbar.active { - background-color: #000000 \9; + color: #040404; + background-color: #000000; } .breadcrumb { diff --git a/docs/css.html b/docs/css.html index 20900ec9c4..dd279a6b4c 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1729,8 +1729,8 @@ For example, <code><section></code> should be wrapped as inlin - - btn + + btn btn-default Standard gray button with gradient @@ -1738,11 +1738,6 @@ For example, <code><section></code> should be wrapped as inlin btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons - - - btn btn-info - Used as an alternative to the default styles - btn btn-success @@ -1758,11 +1753,6 @@ For example, <code><section></code> should be wrapped as inlin btn btn-danger Indicates a dangerous or potentially negative action - - - btn btn-inverse - Alternate dark gray button, not tied to a semantic action or use - btn btn-link diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index d6607d7039..ff73aef5b7 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1669,8 +1669,8 @@ For example, <code><section></code> should be wrapped as inlin - - btn + + btn btn-default Standard gray button with gradient @@ -1678,11 +1678,6 @@ For example, <code><section></code> should be wrapped as inlin btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons - - - btn btn-info - Used as an alternative to the default styles - btn btn-success @@ -1698,11 +1693,6 @@ For example, <code><section></code> should be wrapped as inlin btn btn-danger Indicates a dangerous or potentially negative action - - - btn btn-inverse - Alternate dark gray button, not tied to a semantic action or use - btn btn-link diff --git a/less/button-groups.less b/less/button-groups.less index 4648245c7d..01f84517f9 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 1133192926..0aca982b2b 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); + .buttonBackground(@btn-backround-success); } -// Info appears as a neutral blue -.btn-info { - .buttonBackground(@btn-backround-info, @btn-backround-info-highlight); -} -// 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 1da2758634..13d9ad2054 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(); + background-color: @background-color; - // 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 + &: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 9b85f3574e..d881f55aa7 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 // -------------------------