SeriouslyAwesome/democratictravelers

View on GitHub
app/assets/stylesheets/bitters/mixins/_base.scss

Summary

Maintainability
Test Coverage
@import "flash";

@mixin background-size($size) {
  -webkit-background-size: $size;
  -moz-background-size: $size;
  -o-background-size: $size;
  background-size: $size;
  background-repeat: no-repeat;
  background-position: center center;
}

@mixin btn($color) {
  display: inline-block;
  font-size: $base-font-size;
  font-family: $sans-serif;
  text-transform: uppercase;
  font-weight: bold;
  background-color: $color;
  color: $white;
  padding: 1px ($base-font-size);
  height: $baseline * 1.5;
  border: none;
  vertical-align: top;
  line-height: $baseline * 1.5;
  white-space: nowrap;
  margin-top: $baseline * 0.25;
  @include border-top-radius(5px);
  @include border-bottom-radius(5px);
  @include border-left-radius(5px);
  @include border-right-radius(5px);
  box-shadow: 2px 2px 0px rgba(0,0,0,0.25);
  text-shadow: 1px 1px 0px rgba(0,0,0,0.25);
  @include transition(all 0.1s ease-in-out);

  &:hover, &:focus {
    color: $white;
    background-color: darken($color, 5%);
  }

  &:active {
    box-shadow: 1px 1px 0px rgba(0,0,0,0.6);
  }

  &:disabled {
    background-color: $color;
    opacity: 0.5;
    cursor: default;
  }
}

@mixin baseline-grid {
  background: image-url('baseline-grid.gif') repeat left top;
}

@mixin border-radius($radius) {
  @include border-top-radius($radius);
  @include border-bottom-radius($radius);
  @include border-left-radius($radius);
  @include border-right-radius($radius);
}

@mixin navigational-text {
  font-family: $sans-serif;
  text-transform: uppercase;
  font-weight: bold;
}