Mixins for a recent project.

BugNinja Mixins

// Variables

$highlight: #ffc
$nice-to-have: lighten(red, 45%)
$low-importance: lighten(red, 30%)
$medium-importance: lighten(red, 15%)
$high-importance: red


// Mixins

@mixin border_radius($radius) 
  -moz-border-radius: $radius
  -webkit-border-radius: $radius
  border-radius: $radius

@mixin box_shadow($color, $values)
  -webkit-box-shadow: $color $values
  -moz-box-shadow: $color $values
  box-shadow: $color $values

@mixin box_gradient($start, $end)
  background-color: $start
  background-image: -webkit-gradient(linear, left top, left bottom, from($start), to($end))
  background-image: -webkit-linear-gradient(top, $start, $end)
  background-image: -moz-linear-gradient(top, $start, $end)
  background-image: -ms-linear-gradient(top, $start, $end)
  background-image: -o-linear-gradient(top, $start, $end)
  background-image: linear-gradient(top, $start, $end)
  filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#{$start}', EndColorStr='#{$end}')

@mixin fluid_width
  width: 80%
  max-width: 1160px
  min-width: 300px
  margin: 0 auto
  padding:
    left: 20px
    right: 20px

@mixin button($font_size: 36px, $padding: 2px 24px)
  +border_radius(3px)
  +box_gradient(#FFF3CC,#FFE99E)
  background-color: #FFE99E
  border: 1px solid #D2912A
  cursor: pointer
  display: inline-block
  padding: $padding
  font-weight: bold
  font-size: $font_size
  font-family: 'Lora', serif
  &:link, &:hover, &:focus, &:visited
    color: #000
  &:hover, &:focus
    background-image: none
    text-decoration: none


@mixin input_reset
  border: 1px solid #CCC
  padding: 3px
  font-family: 'Lora', serif
  font-size: 16px
  +border_radius(5px)
  &:focus
    background-color: $highlight

@mixin list_reset
  list-style: none
  margin: 0
  padding: 0
  li
    margin: 0
    padding: 0