// ————————————————- // 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 // ———————————————- */
-
{ @include box-sizing(‘border-box’); }
/* 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%; } }
}