mixins

Survival Kit: Mixins

Helpers

=hidden
  display: none !important
  visibility: hidden

=visuallyhidden($focusable: false)
  border: 0
  clip: rect(0 0 0 0)
  height: 1px
  margin: -1px
  overflow: hidden
  padding: 0
  position: absolute
  width: 1px
  @if $focusable
    &:active, &:focus
      clip: auto
      height: auto
      margin: 0
      overflow: visible
      position: static
      width: auto

=invisible
  visibility: hidden


=scale-image-ie($image)
  background: none
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="#{image_url($image, true, false)}",  sizingMethod="scale")

layout

=vertical-separation($margin: $kit-baseline, $divide: false, $bordercolor: $border-color, $borderstyle: solid)
  +pie-clearfix
  @if $divide
    border-bottom: $divide $borderstyle $bordercolor
    margin-bottom: $margin * 0.5
    padding-bottom: $margin * 0.5 - $divide
  @else
    margin-bottom: $margin * 0.5
    padding-bottom: $margin * 0.5
    border-bottom: none
  &:last-child
    padding-bottom: 0
    border-bottom-width: 0
    margin-bottom: 0

=un-vertical-separation
  border-bottom: none
  margin-bottom: 0
  padding-bottom: 0

sfx

Note: some of these are long. See the link for details

=gradient-bg($color, $top: 5, $bottom: $top)
  @if $top < 0 and $bottom < 0


// rotate a group of elements as if they were casually tossed on a table
=scatter($rotate: 2deg -3deg 1deg, $child: false)

// css3 page curl effect
=page-curl($position: bottom, $shadow-color: rgba($black, 0.7), $rotate: 6deg)


// CSS3 Tucked Corners effect
=tucked-corners($tape: rgba(white, 0.5), $inner-element: 'span.tucked-corners')

typography

Note: some of these are long. See the link for details

/* Links --------------------------------------------------------------
// replace underlines on links with bottom borders
=better-links($normal, $hover: false, $active: false, $visited: false, $focus: false)
        
=undo-better-links

// fade between default and hover colors
=link-transitions($time: 0.5s, $easing: 'ease-out', $property: 'all')
  +transition($property, $time, $easing)

// remove bottom borders from better links
=remove-link-underlines()

=accessible-color($background: $white)

// add style and weight to:
// http://compass-style.org/reference/compass/css3/font_face/#mixin-font-face
=kit-font-face($name, $font-files, $eot: false, $style: false, $weight: false)
  $iefont: unquote("#{$eot}?iefix")


// text-overflow
=text-overflow($method: ellipsis)

ui

Note: some of these are long. See the link for details

/* create simple tabs from <a> unside <ul>
 * $dir is 'bottom' for standard tabs
 * 'top' for hanging tabs
 * assumes placement on UL
=tabs($dir: bottom)


=decending-z-order-tab($count: 20)


=clean-list