diff options
author | Jiri Tomasek <jtomasek@redhat.com> | 2014-06-18 10:47:16 +0200 |
---|---|---|
committer | Jiri Tomasek <jtomasek@redhat.com> | 2014-06-18 10:47:16 +0200 |
commit | b0f2c6852f0268fcfe2b75c58620454417d18a31 (patch) | |
tree | f2ec4ac360a4b15463f50c2a0e6cc08fda6bc9cd /xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss | |
parent | d65969800716f9652340eb7e39e74a6c770dcc04 (diff) | |
download | xstatic-bootstrap-scss-b0f2c6852f0268fcfe2b75c58620454417d18a31.tar.gz |
Upgraded to Bootstrap SCSS version 3.1.1
Diffstat (limited to 'xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss')
-rw-r--r-- | xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss | 242 |
1 files changed, 119 insertions, 123 deletions
diff --git a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss index da51df9..28110b6 100644 --- a/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss +++ b/xstatic/pkg/bootstrap_scss/data/scss/bootstrap/_buttons.scss @@ -1,163 +1,159 @@ -// BUTTON STYLES -// ------------- +// +// Buttons +// -------------------------------------------------- // Base styles // -------------------------------------------------- -// Core .btn { display: inline-block; - padding: 4px 10px 4px; margin-bottom: 0; // For input.btn - font-size: $baseFontSize; - line-height: $baseLineHeight; - color: $grayDark; + font-weight: $btn-font-weight; text-align: center; - text-shadow: 0 1px 1px rgba(255,255,255,.75); vertical-align: middle; - @include buttonBackground($white, darken($white, 10%)); - border: 1px solid #ccc; - border-bottom-color: #bbb; - @include border-radius(4px); - $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); - @include box-shadow($shadow); cursor: pointer; + background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214 + border: 1px solid transparent; + white-space: nowrap; + @include button-size($padding-base-vertical, $padding-base-horizontal, $font-size-base, $line-height-base, $border-radius-base); + @include user-select(none); + + &, + &:active, + &.active { + &:focus { + @include tab-focus(); + } + } - // Give IE7 some love - @include reset-filter(); - @include ie7-restore-left-whitespace(); -} - -// Hover state -.btn:hover { - color: $grayDark; - text-decoration: none; - background-color: darken($white, 10%); - background-position: 0 -15px; - - // transition is only when going to hover, otherwise the background - // behind the gradient (there for IE<=9 fallback) gets mismatched - @include transition(background-position .1s linear); -} - -// Focus state for keyboard and accessibility -.btn:focus { - @include tab-focus(); -} + &:hover, + &:focus { + color: $btn-default-color; + text-decoration: none; + } -// Active state -.btn.active, .btn:active { - background-image: none; - $shadow: inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05); - @include box-shadow($shadow); - background-color: darken($white, 10%); - background-color: darken($white, 15%) \9; - outline: 0; -} + &:active, + &.active { + outline: 0; + background-image: none; + @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125)); + } -// Disabled state -.btn.disabled, .btn[disabled] { - cursor: default; - background-image: none; - background-color: darken($white, 10%); - @include opacity(0.65); - @include box-shadow(none); + &.disabled, + &[disabled], + fieldset[disabled] & { + cursor: not-allowed; + pointer-events: none; // Future-proof disabling of clicks + @include opacity(.65); + @include box-shadow(none); + } } -// Button Sizes +// Alternate buttons // -------------------------------------------------- -// Large -.btn-large { - padding: 9px 14px; - font-size: $baseFontSize + 2px; - line-height: normal; - @include border-radius(5px); +.btn-default { + @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border); } -.btn-large [class^="icon-"] { - margin-top: 1px; +.btn-primary { + @include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border); } - -// Small -.btn-small { - padding: 5px 9px; - font-size: $baseFontSize - 2px; - line-height: $baseLineHeight - 2px; +// Success appears as green +.btn-success { + @include button-variant($btn-success-color, $btn-success-bg, $btn-success-border); } -.btn-small [class^="icon-"] { - margin-top: -1px; +// Info appears as blue-green +.btn-info { + @include button-variant($btn-info-color, $btn-info-bg, $btn-info-border); } - -// Mini -.btn-mini { - padding: 2px 6px; - font-size: $baseFontSize - 2px; - line-height: $baseLineHeight - 4px; +// Warning appears as orange +.btn-warning { + @include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border); +} +// Danger and error appear as red +.btn-danger { + @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border); } -// Alternate buttons -// -------------------------------------------------- - -// Set text color +// Link buttons // ------------------------- -.btn-primary, .btn-primary:hover, .btn-warning, .btn-warning:hover, .btn-danger, .btn-danger:hover, .btn-success, .btn-success:hover, .btn-info, .btn-info:hover, .btn-inverse, .btn-inverse:hover { - text-shadow: 0 -1px 0 rgba(0,0,0,.25); - color: $white; -} -// 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-primary { - @include buttonBackground($primaryButtonBackground, adjust-hue($primaryButtonBackground, 20)); -} -// Warning appears are orange -.btn-warning { - @include buttonBackground(lighten($orange, 15%), $orange); -} -// Danger and error appear as red -.btn-danger { - @include buttonBackground(#ee5f5b, #bd362f); +// Make a button look and behave like a link +.btn-link { + color: $link-color; + font-weight: normal; + cursor: pointer; + border-radius: 0; + + &, + &:active, + &[disabled], + fieldset[disabled] & { + background-color: transparent; + @include box-shadow(none); + } + &, + &:hover, + &:focus, + &:active { + border-color: transparent; + } + &:hover, + &:focus { + color: $link-hover-color; + text-decoration: underline; + background-color: transparent; + } + &[disabled], + fieldset[disabled] & { + &:hover, + &:focus { + color: $btn-link-disabled-color; + text-decoration: none; + } + } } -// Success appears as green -.btn-success { - @include buttonBackground(#62c462, #51a351); + + +// Button Sizes +// -------------------------------------------------- + +.btn-lg { + // line-height: ensure even-numbered height of button next to large input + @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $border-radius-large); } -// Info appears as a neutral blue -.btn-info { - @include buttonBackground(#5bc0de, #2f96b4); +.btn-sm { + // line-height: ensure proper height of button next to small input + @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $border-radius-small); } -.btn-inverse { - @include buttonBackground(#454545, #262626); +.btn-xs { + @include button-size($padding-xs-vertical, $padding-xs-horizontal, $font-size-small, $line-height-small, $border-radius-small); } -// Cross-browser Jank +// Block button // -------------------------------------------------- -button.btn, input[type="submit"].btn { +.btn-block { + display: block; + width: 100%; + padding-left: 0; + padding-right: 0; +} - // Firefox 3.6 only I believe - &::-moz-focus-inner { - padding: 0; - border: 0; - } +// Vertically space out multiple block buttons +.btn-block + .btn-block { + margin-top: 5px; +} - // IE7 has some default padding on button controls - *padding-top: 2px; - *padding-bottom: 2px; - &.large { - *padding-top: 7px; - *padding-bottom: 7px; - } - &.small { - *padding-top: 3px; - *padding-bottom: 3px; +// Specificity overrides +input[type="submit"], +input[type="reset"], +input[type="button"] { + &.btn-block { + width: 100%; } } |