// ————————————————- // Swift Compass Imports // ———————————————- */ @import “framework/reset”; @import “compass/css3/border-radius”; @import “compass/css3/box-shadow”; @import “compass/css3/box-sizing”; @import “compass/css3/images”; @import “compass/css3/opacity”; @import “compass/css3/transform”; @import “compass/css3/transition”; @import “compass/typography/lists/inline-block-list”; @import “compass/typography/text/replacement”; @import “compass/utilities/general/clearfix”; @import “compass/utilities/sprites”;

// ————————————————- // Swift Variables // ———————————————- */ $page-width: 1024px; $ani-speed: 250ms;

// ————————————————- // Media Query Break Points // ———————————————- */ $mobile: 420px; $tablet: 768px; $desktop: 1000px;

// ————————————————- // Fixes // ———————————————- */

/* iOS fixes */ html { -webkit-text-size-adjust: none; } input { -webkit-appearance: none; -moz-appearance: none; }

/* Media Queries for determining javascript events, via adactio.com/journal/5429/ */ // body:after { content: ‘mobile’; display: none; } // @media only screen and (min-width: $desktop) { // body:after { content: ‘desktop’; } // }

// ————————————————- // Swift Mixins // ———————————————- */

// media query @mixin breakpoint($min-point: 0, $max-point: $desktop) {

@media (min-width: $min-point) and (max-width: $max-point)  { @content; }

}

@mixin mobile($operator: eq) {

@if $operator == gt {
      @media (min-width: $tablet) { @content; }
}
@else if ( $operator == eq ) {
      @media (max-width: $tablet - 1){ @content; }
}

}

@mixin tablet($operator: eq) {

@if ( $operator == gt ) {
      @media (min-width: $desktop){ @content; }
}
@else if ( $operator == lt ) {
      @media (max-width: $tablet - 1){ @content; }
}
@else if ( $operator == eq ) {
      @media (min-width: $tablet) and (max-width: $desktop - 1 ) { @content; }
}
@else if ( $operator == ge ) {
      @media (min-width: $tablet){ @content; }
}
@else if ( $operator == le ) {
      @media (max-width: $tablet - 1){ @content; }
}

}

@mixin desktop($operator: eq) {

@if ( $operator == lt ) {
      @media (max-width: $desktop - 1){ @content; }
}
@else if  ( $operator == eq ) {
      @media (min-width: $desktop) { @content; }
}

}

@mixin input-placeholder() {

::-webkit-input-placeholder { @content; }
:-moz-placeholder { @content; }
::-moz-placeholder { @content; }
:-ms-input-placeholder { @content; }

}

// custom text selection treatment, developed from stackoverflow.com/a/10372599/136018 @mixin selection($color, $background) {

    $prefixes: ("-webkit-","-moz-", "-o-", "");
@each $prefix in $prefixes {
    ::#{$prefix}selection {
        color: $color;
        background: $background;
        text-shadow:none; // remove any text shadows:twitter.com/miketaylr/status/12228805301)
    }
}
/* j.mp/webkit-tap-highlight-color */
    a:link{-webkit-tap-highlight-color:$background;}
    ins{background-color:$background;color:$color;text-decoration:none;}

}

@mixin font-smoothing($value: on) {

@if $value == on {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
@else {
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
}

}

@mixin inline-block($percent: auto) {

display: inline-block;
width: $percent;
padding-right: 2%;
box-sizing: border-box;
vertical-align: top;
zoom: 1;

.lt-ie8 & {
  display: inline;
}

&.last {
  padding-right: 0;
}

}

// Remove UL Styling @mixin ul-reset {

list-style: none;
margin: 0;
padding-bottom: 0;

}

@mixin areas-text-style-nav {

font-size: .875em;
text-transform: uppercase;
letter-spacing: .15em;

}

@mixin hyphenate {

-ms-word-break: break-all;
word-break: break-all;
// Non standard for webkit
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;

}

@mixin trans-fade-hidden {

@include transition(opacity $ani_speed linear 0ms, visibility $ani_speed linear 0ms);
visibility: hidden;
opacity: 0;

}

@mixin trans-fade-visible {

visibility: visible;
opacity: 1;

}

/———————————–\

$GRID

*———————————–*/ .region {

overflow: hidden;

} .container, .grid {

margin-left: 0;
max-width: none;
-webkit-transition: 0.5s;
transition: 0.5s;
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
@include tablet(ge) {
    margin-left: -2.5%;
    max-width: 105%;
}

}

.wrapper, .unit, .item {

display: block;
*display: inline;
vertical-align: top;
width: 100%;
margin-left: 0;
*zoom: 1;
/* Clearfix */
/*overflow: hidden;*/
*overflow: visible;
-webkit-transition: width 0.5s;
transition: width 0.5s;
-webkit-transition-delay: 0.7s;
transition-delay: 0.7s;
@include tablet(ge) {
        display: inline-block;
        margin-left: 2.5%;
        &.one-of-one {
                width: 97.5%;
        }
        &.one-of-two {
                width: 47.5%;
        }
        &.one-of-three {
                width: 30.8333333%;
        }
        &.two-of-three {
                width: 64.1666666%;
        }
        &.one-of-four {
                width: 22.5%;
        }
        &.three-of-four {
                width: 72.5%;
        }
        &.one-of-five {
                width: 17.44%;
        }
        &.two-of-five {
                width: 37.44%;
        }
        &.three-of-five {
                width: 57.44%;
        }
        &.four-of-five {
                width: 77.44%;
        }
}

}