andrexduarte

/*------------------------------------*\
    $NAV
\*------------------------------------*/
/*
TAGS: ^lists ^navigation ^text
*/
/*
As per csswizardry.com/2011/09/the-nav-abstraction
*/
.nav{

andrexduarte

@mixin ie6 { * html & { @content } }

#logo {
  background-image: url("/images/logo.png");
  @include ie6 { background-image: url("/images/logo.gif"); }
}

andrexduarte

// blog post: http://blog.slashpoundbang.com/post/15096433153/css3-scss-mixins

// Mixins ----------------------------------------------------------------------
// http://css3please.com/
@mixin background-rgba($red, $green, $blue, $opacity, $rgba) {
  background-color: transparent;
  background-color: rgba($red, $green, $blue, $opacity);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$rgba}',endColorstr='#{$rgba}');
  zoom: 1;
}

andrexduarte

// Placeholder @mixin for Sass
//
// A mixin to style placeholders in HTML5 form elements.
// Includes also a .placeholder class to be used with a polyfill e.g.
// https://github.com/mathiasbynens/jquery-placeholder
// Requires Sass 3.2.
//
// Example usage (.scss):
// 
// input {

andrexduarte

@mixin mobile_bg($file){
  background-image: image-url('mobile/standard/#{$file}');

  @media screen and (-webkit-min-device-pixel-ratio: 2) {
    background-image: image-url('mobile/retina/#{$file}');
    background-size: image-width('mobile/standard/#{$file}') image-height('mobile/standard/#{$file}');
  }
}

// Usage

andrexduarte

@mixin before-after-background($height, $side-width, $before, $after) {
    height: $height;
  position: relative;
   z-index: 1;

  &:before, &:after {
     content: '';
     display: block;
      height: $height;
    position: absolute;