compass/frameworks/blueprint/stylesheets/blueprint/_buttons.scss
2010-11-12 10:26:08 -08:00

101 lines
3.2 KiB
SCSS

@import "compass/css3/inline-block";
@import "compass/utilities/general/float";
// Button Font
$blueprint-button-font-family: "Lucida Grande", Tahoma, Arial, Verdana, sans-serif !default;
// Default Button Colors
$blueprint-button-border-color: #dedede !default;
$blueprint-button-background-color: #f5f5f5 !default;
$blueprint-button-font-color: #565656 !default;
// Default Button Hover Colors
$blueprint-button-hover-border-color: #c2e1ef !default;
$blueprint-button-hover-background-color: #dff4ff !default;
$blueprint-button-hover-font-color: #336699 !default;
// Default Button Active Colors
$blueprint-button-active-border-color: #6299c5 !default;
$blueprint-button-active-background-color: #6299c5 !default;
$blueprint-button-active-font-color: white !default;
//**
// Sets the colors for a button
// @param border-highlight-color
// The highlight color defaults to whatever is the value of the border-color but it's one shade lighter.
@mixin button-colors(
$font-color: $blueprint-button-font-color,
$bg-color: $blueprint-button-background-color,
$border-color: $blueprint-button-border-color,
$border-highlight-color: $border-color + #101010
) {
background-color: $bg-color;
border-color: $border-highlight-color $border-color $border-color $border-highlight-color;
color: $font-color;
}
//**
// Sets the colors for a button in the active state
// @param border-highlight-color
// The highlight color defaults to whatever is the value of the border-color but it's one shade lighter.
@mixin button-active-colors(
$font-color: $blueprint-button-active-font-color,
$bg-color: $blueprint-button-active-background-color,
$border-color: $blueprint-button-active-border-color,
$border-highlight-color: $border-color + #101010
) {
&:active {
@include button-colors($font-color, $bg-color, $border-color, $border-highlight-color);
}
}
//**
// Sets the colors for a button in the hover state.
// @param border-highlight-color
// The highlight color defaults to whatever is the value of the border-color but it's one shade lighter.
@mixin button-hover-colors(
$font-color: $blueprint-button-hover-font-color,
$bg-color: $blueprint-button-hover-background-color,
$border-color: $blueprint-button-hover-border-color,
$border-highlight-color: $border-color + #101010
) {
&:hover {
@include button-colors($font-color, $bg-color, $border-color, $border-highlight-color);
}
}
@mixin button-base($float: false) {
@if $float { @include float($float); display: block; }
@else { @include inline-block; }
margin: 0.7em 0.5em 0.7em 0;
border-width: 1px; border-style: solid;
font-family: $blueprint-button-font-family; font-size: 100%; line-height: 130%; font-weight: bold;
text-decoration: none;
cursor: pointer;
img {
margin: 0 3px -3px 0 !important;
padding: 0;
border: none;
width: 16px;
height: 16px;
float: none;
}
}
@mixin anchor-button($float: false) {
@include button-base($float);
padding: 5px 10px 5px 7px;
}
@mixin button-button($float: false) {
@include button-base($float);
width: auto;
overflow: visible;
padding: 4px 10px 3px 7px;
&[type] {
padding: 4px 10px 4px 7px;
line-height: 17px; }
*:first-child+html &[type] {
padding: 4px 10px 3px 7px;
}
}