Custom Mixins for Orion

Some Mixins I used on the job board

@import "compass"
@import "sassy-buttons"

$experimental-support-for-svg: true

$total-cols: 15
$col-width: 3.5em
$gutter-width: 1em
$side-gutter-width: $gutter-width

@import "susy"

// --------- FONT MIXINS -------------
=sans-serif-stack
  font-family: "helvetica neue", "helvetica", "arial", "verdana", sans-serif
  

//------ BUTTON MIXINS ------

=radical_button($top-color:#fff, $bottom-color:#eee, $text-color: #757575)
  $darker-shade: darken($top-color, 15%)
  +sassy-button("simple", 0.35em, 1.2em, $top-color, $bottom-color, $text-color, "inset")
  +mario_shadow
  +sans-serif-stack
  color: #fff !important
  text:
    align: center
    shadow: -1px -1px darken($darker-shade, 5%)
    decoration: none
  border-color: $darker-shade
  &:hover
    cursor: pointer


=white-button
  background-color: #efefef
  +radical_button($top-color:#fff, $bottom-color:#eee, $text-color: #595959)
  +white_and_mario_shadow
  +background-image(linear-gradient(#fff, #eee 40%))
  color: #333 !important
  text-shadow: -1px -1px white
  text-transform: capitalize
  border-color: #ADADAD
  width: 100%

=red_button
  +radical_button(#dd4422, darken(#dd4422, 12%), #fff)
  +white_and_mario_shadow(0.3)
  color: #fff
  background-color: #dd4422
  text-decoration: none
  &:hover
    text-decoration: none
    background-color: #ff4422
    
=green_button
  +radical_button(#1FA216, darken(#1FA216, 12%), #fff)
  +white_and_mario_shadow(0.2)
  background-color: #1fa216
  &:hover
    background-color: lighten(#1fa216, 5%)
  

// -------- Widget Parts --------

=letterpress($shadow:#333333)
  +text-shadow(darken($shadow, 30%) 1px -1px)

=speckle($color:#fffef7)
  background: image-url("speckle.png") repeat scroll 0 0 $color

=mario_shadow
  +box-shadow(rgba(#000, 0.2) 1px 1px 1px)

=white_and_mario_shadow($trans: 1)
  +box-shadow(rgba(#000, 0.2) 1px 1px 1px, rgba(#fff, $trans) 1px 1px 0 inset)

=black-gradient($darken_amount:8%)
  background-color: #4b4b4b
  +background-image(linear-gradient(#4b4b4b, darken(#4b4b4b, $darken_amount)))
  color: #fff

=slick-black-gradient
  background-color: #4b4b4b
  +background-image(linear-gradient(#848282, #4B4B4B 50%, darken(#2C2C2C, 4%)))
  +box-shadow(rgba(#fff, 0.33) 0 1px 0 inset, rgba(#000, 0.2) 1px 1px 1px)
  border: 1px solid transparent
  border-color: darken(#626262, 10%) #3D3D3D #222

=white-gradient
  background-color: #eaeaea
  @include background-image(linear-gradient(#fbfbfb, #eaeaea))

=widget-top
  +opacity(0.8)
  +border-radius(7px 7px 0 0)
  +slick-black-gradient
  +letterpress(#3D6877)
  padding: .6em
  color: white
  font-weight: bold
  span
    color: white

=widget-body
  +mario_shadow
  +border-radius(0 0 7px 7px)
  +speckle
  padding: 1.25em 1.25em .4em
  border-color: #C4C4C4
  border-width: 0 1px 1px 1px 
  border-style: solid
    
=place-top-right
  position: absolute
  top: 1em
  right: 1em
  color: #9A9A9A
  font-size: .85em
  text-align: right
  line-height: 1.4em
  text-transform: capitalize

=links
  margin-top: 1.3em
  line-height: 1.3em
  padding-right: 1.25em

//---------- FORM MIXINS ------------

=text-inputs
  +box-sizing(border-box)
  +border-radius(7px)
  +sans-serif-stack
  +mario_shadow
  padding: 12px
  font-size: 1em
  border: 1px solid #ADABAB
  background: #fff
  width: 100%
  &:focus
    +box-shadow(lighten(#1EC6DC, 20%) 0 0 5px)
    border-color: #1a979d
    outline: none

=vertical_form
  &
    padding-bottom: 12px
  +field_with_errors
  div
    padding-bottom: 1em
    &:last-child
      padding-bottom: 0
  label
    display: block
    margin-bottom: 0.2em
    font:
      size: 0.89em
      weight: bold
      color: #6c6c6c
  input[type="text"],
  input[type="email"],
  input[type="password"]
    +text-inputs
  input[type="submit"]
    +green_button
    margin-top: .8em
    width: 100%
  textarea
    +text-inputs
    width: 100%
  select
    min-width: 100%
  input[type="checkbox"]
    margin-right: 8px
    display: inline
    & + label
      display: inline

// --------- GENERAL WIDGET MIXINS ------------

=widget
  h2
    +widget-top
  .body
    +widget-body
  form
    +vertical_form
  clear: both
  .links
    +links

=sidebar-widget
  +border-radius(0 0 7px 7px)
  margin-bottom: 1em
  h2
    +widget-top
    letter-spacing: 0.03em
  ul
    li:last-child,
    li:last-child a,
    li:last-child span.current
      +border-radius(0 0 7px 7px)
    li
      position: relative
      border-width: 0 1px 1px
      border-style: solid
      border-color: #C2C2C2
      line-height: 1.5em
      .icon
        position: absolute
        top: 50%
        left: .325em
      a, span.current
        padding: 0.65em
        display: block
      span.current
        background-color: #157cd6
        +background-image(linear-gradient(#157cd6, darken(#157cd6, 17%))) 
        +text-shadow(rgba(black, 0.7%) 0 1px)
        color: white
      a 
        +box-shadow(#fff 0 1px 0 inset)
        color: #333
        background-color: #f2f0f0
        text-decoration: none
        &:hover
          background-color: lighten(#f2f0f0, 3%) 
          cursor: pointer
    li.edit_job_posting,
    li.activate_job_posting
      a
        background-color: #f0f9ff
        color: #4985AD
    li.view_all_companies,
    li.companies_job_postings
      .icon
        background-image: image-url("eye-icon.png")
    li.add_company,
    li.add_division
      .icon
        background-image: image-url("plus-icon.png")
    li.edit_links
      .icon
        background-image: image-url("pencil.png")
    li.add_user
      .icon
        background-image: image-url("person.png")
    li.add_job_posting
      .icon
        background-image: image-url("add_job_posting.png")

=widget-list
  +box-shadow(rgba(#000, 0.25) 1px 1px 1px inset, rgba(#000, .06) -1px -1px 1px inset)
  +no-bullets
  +border-radius(7px)
  background: none repeat scroll 0 0 rgba(255, 255, 255, 0.45)
  overflow: hidden
  text-overflow: ellipsis
  line-height: 20px
  color: #4F4E4E
  padding: 15px 14px
  color: #4F4E4E
  margin-bottom: 1em
  @media screen and (min-width: 800px)
    +column-count(2)
    
=zebra_stripes
  +no-bullets
  padding: 0
  clear: both
  li
    &:nth-child(odd)
      +speckle
    border-top: 0 solid #d9d8d0
    border-width: 1px 0 0 0
    padding: 0
    > a:hover
      background-color: #fffdeb
      cursor: pointer
      

=collections_titles
  $bg: #444444
  +border-radius(7px)
  +letterpress
  +box-shadow(-1px 1px 0 darken($bg, 13%))
  clear: both
  background: image-url("speckle.png") repeat scroll 0 0 $bg
  color: lighten(#48767E, 60%)
  padding: .5em
  margin-bottom: 1em
  font-size: 1.2em
  line-height: 1.3em
  h5
    color: #939393
    font-size: 0.9em
    letter-spacing: 0.02em
    font-weight: bold
  a
    font-weight: bold
    color: #e6e3e6
    border-bottom: 1px solid darken(#e6e3e6, 35%)
    text:
      shadow: none
      decoration: none
    &:hover
      border-bottom: 1px solid #fff

=job_posting_box($context)
  @if $context == "collection"
    @extend #job_postings_box_in_collections
    +zebra_stripes
  @if $context == "single"  
    @extend #job_postings_box_in_single

=search_box
  +border-radius(7px)
  +pie-clearfix
  +columns(11,11)
  background: #ebebeb
  border: 1px #cccccc solid
  margin-bottom: 1em
  h2
    color: #333
    font-weight: bold
    padding: 1em 1em 0 1em
  p
    +box-sizing(border-box)
  p.input_box
    +columns(8, 11)
    padding: 1em 0 1em 1em
  p.submit
    +columns(3, 11)
    +omega(11)
    +nowrap
    padding: 1em 1em 1em 0
  input[type='submit']
    +red_button
    width: 100%
  input[type='text']
    +text-inputs
    width: 100%
  @media screen and (max-width: 600px)
    p.input_box,
    p.submit
      +columns(11,11)
      +omega
      padding: 1em
    p.submit
      padding: 0 1em 1em
    input[type='submit']
    input[type='text']
      +columns(11,11)
      +omega
      margin: 0
      

// ---------- MESSAGES MIXINS ------------

=message_box($bgcolor)
  +alpha
  +box-sizing(border-box)
  +border-radius(28px)
  +box-shadow(0 1px darken($bgcolor, 20%))
  background-image: image-url("stripe.png")
  background-color: $bgcolor
  color: desaturate(darken($bgcolor, 60%), 10%)
  display: none
  padding: 0.7em
  font-size: 1.2em
  margin: 0 0 1em 0
  text-align: center

=field_with_errors
  .field_with_errors
    padding: 0
    input[type='text'], 
    textarea
      background: #fae8ec
      border-color: #de627a
    label
      color: darken(#de627a, 20%)
      font-weight: bold
      &:after
        content: "*"

=error_list
  +border-radius(7px)
  color: darken(#de627a, 20%)
  background: #fae8ec
  border: 1px solid #de627a
  padding: 1em
  margin-bottom: 1em
  list-style-type: disc
  list-style-position: inside


#general-job-posting-box-structure
  +columns(11, 11)
  clear: both
  & > a
    +columns(11, 11)
  .details,
  .actions
    +box-sizing(border-box)
  .actions
    +columns(3, 11)
    +omega(11)
    padding: 1em 1em 1em 0
    .apply_button
      width: auto
  .details
    +columns(8, 11)
    padding: 1em

  @media screen and (max-width: 600px)
    .actions
      +columns(11, 11)
      +box-sizing(border-box)
      padding: .5em 1em 1em
      .apply_button
        +box-sizing(border-box)
        +columns(11, 11)
        margin: 0
    .details
      +columns(11, 11)
          
#general_job_postings_box_styles
  clear: both
  border: 0 solid lighten(#D3D3D3, 5%)
  border-width: 1px 0 1px
  .edit
    a
      font-weight: bold
      font-size: 0.9em
      margin-top: 7px
      color: #b3374c
      float: none
      text-transform: uppercase
      &:hover
        background-color: #b3374c
        color: white
        cursor: pointer
  .employment_type
    dislpay: inline
    float: right
    clear: both
    padding: 3px
    border-width: 1px
    border-radius: 4px
    color: #87b2cf
    text-transform: capitalize
    margin-top: 2px
    font-size: 14px
  li > a
    +clearfix
    +unstyled-link
    cursor: pointer
    display: block
  .actions
    text-align: right
    time
      color: #a8a6a8
      font-size: .875em
      text-transform: uppercase
      padding-bottom: 2px
      float: right
      clear: both
  .details
    .employer_name,
    .division_name
      font-weight: bold
    .employer_name,
    .division_name,
    address
      display: inline
      font-size: 0.95em
      color: #4985ad
      padding-bottom: 0.75em
    h2
      color: #03558c
      font-size: 1.25em
      font-weight: bold
      padding-bottom: 0.4em
      .edit
        color: red
      a
        color: #03558C
        &:hover
          color: darken(#03558c, 15%)
          cursor: pointer
    .job_description
      @extend #reading-color
      margin-top: 0.8em
      font-size: .9375em
      line-height: 1.35em