_button.scss

/*** @export "button-component" css */
/**
 * Button Component
 *
 * 1. import the button-object dependency.
 */
@import 'path/to/bower_components/_o-button.scss';     /* 1 */

/*** @export "button-structure" css */
/**
 * Button Structure
 *
 * Extends button object
 *
 * 6. Normalise box model styles.
 * 7. If the button’s text is 1em, and the button is (3 * font-size) tall, then
 *    there is 1em of space above and below that text. We therefore apply 1em
 *    of space to the left and right, as padding, to keep consistent spacing.
 * 8. Basic cosmetics for default buttons. Change or override at will.
 */

/**
 * Small Button 
 */
$btn--structure__small:(
  font-size: ($base-font-size - 4px),
  padding: 2px 6px,       /* 6 */
  line-height: $base-line-height,     /* 7 */
  margin: 0,        /* 6 */
  border-radius: 3px,     /* 8 */
);

/**
 * Medium Button 
 */
$btn--structure__medium:(
  font-size: ($base-font-size - 2px),
  padding: 5px 9px,         /* 6 */
  line-height: $base-line-height,       /* 7 */
  margin: 5px,        /* 6 */
  border-radius: 5px,     /* 8 */
);

/**
 * Large Button 
 */
$btn--structure__large:(
  font-size: ($base-font-size + 2px),
  padding: 9px 14px,    /* 6 */
  line-height: $base-line-height,   /* 7 */
  margin: 5px,        /* 6 */
  border-radius: 7px,   /*8 */
);

/**
 * Full Button
 *
 * override default prototype structure with custom structure styles
 * full screen, block level button style for small screens 
 */
$btn--structure__touch:(
  display: block,
  width: 100%,
  padding-left: 0,
  padding-right: 0,
);

.btn--structure__small {
  @include componentConstructor($btn--structure__small);
}

.btn--structure__medium {
  @include componentConstructor($btn--structure__medium);
}

.btn--structure__large {
  @include componentConstructor($btn--structure__large);
}

.btn--structure__touch {
  @extend .btn--structure__large;
  @include componentConstructor($btn--structure__touch);
}

/*** @export "button-skin" css */
/**
 * Button Skin
 *
 */

/* Default Button Skin */
$btn__default--color1:                #B3B3B3;
$btn__default--color2:                darken($btn__default--color1, 10%);
/* Positive Button Skin */
$btn__positive--color1:               #5B8737;
$btn__positive--color2:               darken($btn__positive--color1, 10%);
/* Negative Button Skin */
$btn__negative--color1:               #E91C21;
$btn__negative--color2:               darken($btn__negative--color1, 10%);
/* Secondary Button Skin */
$btn__secondary--color1:              white(10%);
$btn__secondary--color2:              darken($btn__secondary--color1, 10%);

/**
 * Default Button Skin
 *
 * override default prototype skin with custom skin styles
 */
$btn--skin__default:(
  background-color: $btn__default--color1,
  color: $white,
  border: 1px solid $strong,
);// hover state styles
$btn--skin__default__hover:(
  background-color: $btn__default--color2,
);// active state styles
$btn--skin__default__active:(
  background-color: tint($btn__default--color2, 10%),
);// disabled state styles
$btn--skin__default__disabled:(
  opacity: 0.6,
  cursor: default,
);

/**
 * Positive Button Skin
 */
$btn--skin__positive:(
  background-color: $btn__positive--color1,
  color: $white,
  border: 1px solid $strong,
);// hover state styles
$btn--skin__positive__hover:(
  background-color: $btn__positive--color2;,
);// active state styles
$btn--skin__positive__active:(
  background-color: tint($btn__positive--color2, 10%),
);// disabled state styles
$btn--skin__positive__disabled:(
  opacity: 0.6,
  cursor: default,
);

/**
 * Negative Button Skin
 */
$btn--skin__negative:(
  background-color: $btn__negative--color1,
  color: $white,
  border: 1px solid $strong,
);// hover state styles
$btn--skin__negative__hover:(
  background-color: $btn__negative--color2,
);// active state styles
$btn--skin__negative__active:(
  background-color: tint($btn__negative--color2, 10%),
);// disabled state styles
$btn--skin__negative__disabled:(
  opacity: 0.6,
  cursor: default,
);

/**
 * Secondary Button Skin Styles
 */
$btn--skin__secondary:(
  background-color: $btn__secondary--color1,
  color: $white,
  border: 1px solid $strong,
);// hover state styles
$btn--skin__secondary__hover:(
  background-color: $btn__secondary--color2;,
);// active state styles
$btn--skin__secondary__active:(
  background-color: tint($btn__secondary--color2, 10%),
);// disabled state styles
$btn--skin__secondary__disabled:(
  opacity: 0.6,
  cursor: default,
);

.btn--skin__default {
  @include componentConstructor($btn--skin__default);
  &:hover { 
    @include componentConstructor($btn--skin__default__hover);
  }
  &:active,
  &.active {
    @include componentConstructor($btn--skin__default__active);
  }
  &.disabled,
  &[disabled] {
    @include componentConstructor($btn--skin__default__disabled);
  }
}

.btn--skin__positive {
  @include componentConstructor($btn--skin__positive);
  &:hover { 
    @include componentConstructor($btn--skin__positive__hover);
  }
  &:active,
  &.active {
    @include componentConstructor($btn--skin__positive__active);
  }
  &.disabled,
  &[disabled] {
    @include componentConstructor($btn--skin__positive__disabled);
  }
}

.btn--skin__negative {
  @include componentConstructor($btn--skin__negative);
  &:hover { 
    @include componentConstructor($btn--skin__negative__hover);
  }
  &:active,
  &.active {
    @include componentConstructor($btn--skin__negative__active);
  }
  &.disabled,
  &[disabled] {
    @include componentConstructor($btn--skin__negative__disabled);
  }
}

.btn--skin__primary {
  @include componentConstructor($btn--skin__primary);
  &:hover { 
    @include componentConstructor($btn--skin__primary__hover);
  }
  &:active,
  &.active {
    @include componentConstructor($btn--skin__primary__active);
  }
  &.disabled,
  &[disabled] {
    @include componentConstructor($btn--skin__primary__disabled);
  }
}

.btn--skin__secondary {
  @include componentConstructor($btn--skin__secondary);
  &:hover { 
    @include componentConstructor($btn--skin__secondary__hover);
  }
  &:active,
  &.active {
    @include componentConstructor($btn--skin__secondary__active);
  }
  &.disabled,
  &[disabled] {
    @include componentConstructor($btn--skin__secondary__disabled);
  }
}