From 627f0488e5bd3c31359fc9e78acffbfea4a86a8b Mon Sep 17 00:00:00 2001 From: elijah Date: Fri, 24 Aug 2012 21:12:36 -0700 Subject: committed website v. 0.1.0 --- app/assets/stylesheets/bootstrap/_buttons.scss | 183 +++++++++++++++++++++++++ 1 file changed, 183 insertions(+) create mode 100644 app/assets/stylesheets/bootstrap/_buttons.scss (limited to 'app/assets/stylesheets/bootstrap/_buttons.scss') diff --git a/app/assets/stylesheets/bootstrap/_buttons.scss b/app/assets/stylesheets/bootstrap/_buttons.scss new file mode 100644 index 0000000..d0c4ee6 --- /dev/null +++ b/app/assets/stylesheets/bootstrap/_buttons.scss @@ -0,0 +1,183 @@ +// BUTTON STYLES +// ------------- + + +// 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; + 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; + + // 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(); +} + +// 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; +} + +// Disabled state +.btn.disabled, +.btn[disabled] { + cursor: default; + background-image: none; + background-color: darken($white, 10%); + @include opacity(65); + @include box-shadow(none); +} + + +// Button Sizes +// -------------------------------------------------- + +// Large +.btn-large { + padding: 9px 14px; + font-size: $baseFontSize + 2px; + line-height: normal; + @include border-radius(5px); +} +.btn-large [class^="icon-"] { + margin-top: 1px; +} + +// Small +.btn-small { + padding: 5px 9px; + font-size: $baseFontSize - 2px; + line-height: $baseLineHeight - 2px; +} +.btn-small [class^="icon-"] { + margin-top: -1px; +} + +// Mini +.btn-mini { + padding: 2px 6px; + font-size: $baseFontSize - 2px; + line-height: $baseLineHeight - 4px; +} + + +// Alternate buttons +// -------------------------------------------------- + +// Set text color +// ------------------------- +.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-dark.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); +} +// Success appears as green +.btn-success { + @include buttonBackground(#62c462, #51a351); +} +// Info appears as a neutral blue +.btn-info { + @include buttonBackground(#5bc0de, #2f96b4); +} +// Inverse appears as dark gray +.btn-inverse { + @include buttonBackground(#454545, #262626); +} + + +// Cross-browser Jank +// -------------------------------------------------- + +button.btn, +input[type="submit"].btn { + + // Firefox 3.6 only I believe + &::-moz-focus-inner { + padding: 0; + border: 0; + } + + // 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; + } +} -- cgit v1.2.3