Blueprint Buttons

Install the buttons module with:

compass install blueprint/buttons

This file can be imported using: @import "blueprint/buttons"

View the Source for this module on Github.

Imports

The following sass files are automatically imported when you import this file:

  1. Inline Block – Declare an element inline block for all browsers.
  2. Float – Mixins for cross-browser floats.

Configurable Variables help

Value
unquote('"Lucida Grande", Tahoma, Arial, Verdana, sans-serif')
Description

Button Font

Value
#dedede
Description

Default Button Colors

Value
#f5f5f5

Value
#565656

Value
#c2e1ef
Description

Default Button Hover Colors

Value
#dff4ff

Value
#336699

Value
#6299c5
Description

Default Button Active Colors

Value
#6299c5

Value
white

Mixins

View Source: Sass | SCSS 

=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

@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 @param border_highlight_color The highlight color defaults to whatever is the value of the border_color but it’s one shade lighter.

View Source: Sass | SCSS 

=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
    +button-colors($font_color, $bg_color, $border_color, $border_highlight_color)

@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 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.

View Source: Sass | SCSS 

=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
    +button-colors($font_color, $bg_color, $border_color, $border_highlight_color)

@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); } }

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.

View Source: Sass | SCSS 

=button-base($float: false)
  @if $float
    +float($float)
    display: block
  @else
    +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 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; } }
View Source: Sass | SCSS 

=anchor-button($float: false)
  +button-base($float)
  padding: 5px 10px 5px 7px

@mixin anchor-button($float: false) {
  @include button-base($float);
  padding: 5px 10px 5px 7px; }
View Source: Sass | SCSS 

=button-button($float: false)
  +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

@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; } }