/*##########################################################################*/ /* Buttons */ /*##########################################################################*/
// BUTTON STYLES // ————-
// Colors // ——
.btn, form .submit_bar input {
// Set text color &.btn-primary, &.btn-primary:hover, &.btn-danger, &.btn-danger:hover, &.btn-success, &.btn-success:hover, &.btn-info, &.btn-info:hover { color: $white; } &.btn-primary.active, &.btn-danger.active, &.btn-success.active, &.btn-info.active { color: rgba(255,255,255,.75); } &.btn-primary { @include vertical-gradient(#8ac6e8, #306da2); border: solid 1px #003366; text-shadow: 0 -1px 0px #006699; &:hover { @include vertical-gradient(#c8eff9, #3ea5de); color: #003366 !important; text-shadow: 0 -1px 0px #eee; border: solid 1px #2f84da; } &.active { @include box-shadow(inset 0 0 6px $black); @include vertical-gradient(#dedede, #767676); color: #333 !important; text-shadow: 0 -1px 0px #eee; outline: none; border: solid 1px $black; } } // Danger and error appear as red &.btn-danger { @include vertical-gradient(#ee5f5b, #bd362f); border-color: #bd362f; text-shadow: 0 -1px 0px darken(#ee5f5b, 30%); &:hover { @include vertical-gradient(#f7adab, #ee5f5b); border-color: #ee5f5b; } &.active { @include vertical-gradient(#ee5f5b, #bd362f); } } // Success appears as green &.btn-success { @include vertical-gradient(#62c462, #51a351); border-color: #51a351; text-shadow: 0 -1px 0px darken(#62c462, 20%); &:hover { @include vertical-gradient(#9bee9b, #62c462); border-color: #62c462; } &.active { @include vertical-gradient(#62c462, #51a351); } } // Info appears as a neutral blue &.btn-info { @include vertical-gradient(#5bc0de, #2f96b4); border-color: #2f96b4; text-shadow: 0 -1px 0px #2f96b4; } &.clear { background: none; border-color: $gray; }
}
// Base styles // ———–
.btn, .handle, form .submit_bar input {
// Button Base display: inline-block; padding: 2px 10px; @include no-box-shadow; @include border-radius(4px); @include vertical-gradient($white, $grayLighter); font-size: $basefont - 1; cursor: pointer; font-weight: bold; color: $grayDark; letter-spacing: -0.07em; text-shadow: 0 -1px 0px $white; text-decoration: none; border: solid 1px darken($grayLight, 10%); $shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05); @include box-shadow($shadow); @include ie7-restore-left-whitespace; &:hover { @include vertical-gradient(#dbf1f7, #84c6ea); color: #003366 !important; text-shadow: 0 -1px 0px #eee; border: solid 1px #2f84da; text-decoration: none; } // Focus state for keyboard and accessibility &:focus { //.tab-focus(); } // Active and Disabled states &.active, &:active { @include box-shadow(inset 0 0 6px $black); @include vertical-gradient(#dedede, #767676); color: #333 !important; text-shadow: 0 -1px 0px #eee; outline: none; border: solid 1px $black; } &.disabled, &[disabled] { cursor: default; background-color: darken($white, 10%); @include opacity(65); color: $gray !important; @include vertical-gradient($white, $white); border: solid 1px $grayLighter; @include box-shadow(none); } // Button Sizes &.btn-large { padding: 9px 14px; font-size: $baseFontSize; letter-spacing: normal; line-height: normal; @include border-radius(5px); } &.btn-pronounced { font-size: $baseFontSize + 2px; } &.btn-large .icon { margin-top: 1px; } &.btn-small { padding: 0px 5px; font-size: $basefont - 3px; //font-size: $baseFontSize - 2px; //line-height: $baseLineHeight - 2px; } &.btn-small .icon { margin-top: -1px; } .badge { background: $gray; color: $white; font-weight: normal; text-shadow: 0 0 0; } &.active .badge { background: darken($gray, 15%); }
}
// Help Firefox not be a jerk about adding extra padding to buttons button.btn, input.btn {
&::-moz-focus-inner { padding: 0; border: 0; } line-height: inherit; // 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; } @include transition(none); &:active { @include box-shadow(inset 0 0 6px $black); @include vertical-gradient(#dedede, #767676); color: #333 !important; text-shadow: 0 -1px 0px #eee; outline: none; border: solid 1px $black; }
}
// Links with Highlights //—————- // these are not normal buttons per se but rather links with background highlights // when the user hovers over them
.link-hl {
padding: 1px; padding-right: 3px; &:hover { background: $concerto-blue-5; color: $concerto-blue-0; text-decoration: none; }
}