@import "compass/css3"; @import "compass/css3/user-interface"; @import "compass/utilities/sprites/base"; @import "compass/css3/border-radius"; @import "compass/utilities/sprites"; @import "compass/reset"; // Responsive Breakpoints @mixin screen($resMin, $resMax) { @media screen and (min-width: $resMin) and (max-width: $resMax) { @content; } } @mixin max-screen($res) { @media screen and (max-width: $res) { @content; } } @mixin min-screen($res) { @media screen and (min-width: $res) { @content; } } @mixin screen-height($resMin, $resMax) { @media screen and (min-height: $resMin) and (max-height: $resMax) { @content; } } @mixin max-screen-height($res) { @media screen and (max-height: $res) { @content; } } @mixin min-screen-height($res) { @media screen and (min-height: $res) { @content; } } // --------------------------------------------------------------------------------------------------------------------- // --- hdpi ------------------------------------------------------------------------------------------------------------ // --------------------------------------------------------------------------------------------------------------------- // Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss) // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/) @mixin hdpi($ratio: 1.3) { @media only screen and (-webkit-min-device-pixel-ratio: $ratio), only screen and (min--moz-device-pixel-ratio: $ratio), only screen and (-o-min-device-pixel-ratio: #{$ratio}/1), only screen and (min-resolution: #{round($ratio*96)}dpi), only screen and (min-resolution: #{$ratio}dppx) { @content; } } // --------------------------------------------------------------------------------------------------------------------- // --- iphone ---------------------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------------------------------- @mixin iphone3($orientation: all) { $deviceMinWidth: 320px; $deviceMaxWidth: 480px; $devicePixelRatio: 1; @if $orientation == all { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) { @content; } } @else { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation}) { @content; } } } // --------------------------------------------------------------------------------------------------------------------- // --- iphone-retina --------------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------------------------------- @mixin iphone4($orientation: all) { $deviceMinWidth: 320px; $deviceMaxWidth: 480px; $devicePixelRatio: 2; $deviceAspectRatio: '2/3'; @if $orientation == all { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) { @content; } } @else { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: 2/3) and (orientation: #{$orientation}) { @content; } } } // --------------------------------------------------------------------------------------------------------------------- // --- iphone-5 -------------------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------------------------------- @mixin iphone5($orientation: all) { $deviceMinWidth: 320px; $deviceMaxWidth: 568px; $devicePixelRatio: 2; $deviceAspectRatio: '40/71'; @if $orientation == all { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) { @content; } } @else { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation: #{$orientation}) { @content; } } } // --------------------------------------------------------------------------------------------------------------------- // --- iphone-6 -------------------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------------------------------- @mixin iphone6($orientation: all) { $deviceMinWidth: 375px; $deviceMaxWidth: 667px; $devicePixelRatio: 2; @if $orientation == all { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) { @content; } } @else { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation}) { @content; } } } // --------------------------------------------------------------------------------------------------------------------- // --- iphone-6 Plus --------------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------------------------------- @mixin iphone6-plus($orientation: all) { $deviceMinWidth: 414px; $deviceMaxWidth: 736px; $devicePixelRatio: 3; @if $orientation == all { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) { @content; } } @else { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation}) { @content; } } } // --------------------------------------------------------------------------------------------------------------------- // --- ipads (all) ----------------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------------------------------- @mixin ipad($orientation: all) { $deviceMinWidth: 768px; $deviceMaxWidth: 1024px; @if $orientation == all { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) { @content; } } @else { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (orientation: #{$orientation}) { @content; } } } // --------------------------------------------------------------------------------------------------------------------- // --- medium (all) ----------------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------------------------------- @mixin medium($orientation: all) { $deviceMinWidth: 940px; $deviceMaxWidth: 1200px; @if $orientation == all { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) { @content; } } @else { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (orientation: #{$orientation}) { @content; } } } // --------------------------------------------------------------------------------------------------------------------- // --- small (all) ----------------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------------------------------- @mixin small($orientation: all) { $deviceMinWidth: 768px; $deviceMaxWidth: 1000px; @if $orientation == all { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) { @content; } } @else { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (orientation: #{$orientation}) { @content; } } } // --------------------------------------------------------------------------------------------------------------------- // --- xsmall (all) ----------------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------------------------------- @mixin xsmall($orientation: all) { $deviceMinWidth: 240px; $deviceMaxWidth: 767px; @if $orientation == all { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) { @content; } } @else { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (orientation: #{$orientation}) { @content; } } } // --------------------------------------------------------------------------------------------------------------------- // --- ipad-retina ----------------------------------------------------------------------------------------------------- // --------------------------------------------------------------------------------------------------------------------- @mixin ipad-retina($orientation: all) { $deviceMinWidth: 768px; $deviceMaxWidth: 1024px; $devicePixelRatio: 2; @if $orientation == all { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) { @content; } } @else { @media only screen and (min-width: $deviceMinWidth) and (max-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation: #{$orientation}) { @content; } } }