Created
June 12, 2012 17:30
-
-
Save Jaswetz/2918885 to your computer and use it in GitHub Desktop.
SCSS: buttons.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// BUTTON STYLES | |
// ------------- | |
// Base styles | |
// -------------------------------------------------- | |
// Core | |
.btn { | |
display: inline-block; | |
@include ie7-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($btnBackground, $btnBackgroundHighlight); | |
border: 1px solid $btnBorder; | |
border-bottom-color: darken($btnBorder, 10%); | |
@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 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-inverse.active { | |
color: rgba(255,255,255,.75); | |
} | |
// Set the backgrounds | |
// ------------------------- | |
.btn-primary { | |
@include buttonBackground($btnPrimaryBackground, $btnPrimaryBackgroundHighlight); | |
} | |
// Warning appears are orange | |
.btn-warning { | |
@include buttonBackground($btnWarningBackground, $btnWarningBackgroundHighlight); | |
} | |
// Danger and error appear as red | |
.btn-danger { | |
@include buttonBackground($btnDangerBackground, $btnDangerBackgroundHighlight); | |
} | |
// Success appears as green | |
.btn-success { | |
@include buttonBackground($btnSuccessBackground, $btnSuccessBackgroundHighlight); | |
} | |
// Info appears as a neutral blue | |
.btn-info { | |
@include buttonBackground($btnInfoBackground, $btnInfoBackgroundHighlight); | |
} | |
// Inverse appears as dark gray | |
.btn-inverse { | |
@include buttonBackground($btnInverseBackground, $btnInverseBackgroundHighlight); | |
} | |
// 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; | |
&.btn-large { | |
*padding-top: 7px; | |
*padding-bottom: 7px; | |
} | |
&.btn-small { | |
*padding-top: 3px; | |
*padding-bottom: 3px; | |
} | |
&.btn-mini { | |
*padding-top: 1px; | |
*padding-bottom: 1px; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment