209 lines
9.5 KiB
SCSS
Executable File
209 lines
9.5 KiB
SCSS
Executable File
// ---------------------------------------------------------------------------------------------------------------------
|
|
//
|
|
// Author: Rafal Bromirski
|
|
// www: http://paranoida.com/
|
|
// twitter: http://twitter.com/paranoida
|
|
// dribbble: http://dribbble.com/paranoida
|
|
//
|
|
// Licensed under a MIT License
|
|
//
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
//
|
|
// Requirements:
|
|
// Sass 3.2.0+
|
|
//
|
|
// Version:
|
|
// 1.3 // developed on 14/11/2013
|
|
//
|
|
// Mixins:
|
|
// @ min-screen(width) // shortcut for @media screen and (min-width ...)
|
|
// @ max-screen(width) // shortcut for @media screen and (max-width ...)
|
|
// @ screen(min-width, max-width) // shortcut for @media screen and (min-width ...) and (max-width ...)
|
|
// ---
|
|
// @ min-screen-height(height) // shortcut for @media screen and (min-height ...)
|
|
// @ max-screen-height(height) // shortcut for @media screen and (max-height ...)
|
|
// @ screen-height(min-height, max-height) // shortcut for @media screen and (min-height ...) and (max-height ...)
|
|
// ---
|
|
// @ iphone3 // only iPhone (2, 3G, 3GS) landscape & portrait
|
|
// @ iphone3(landscape) // only iPhone (2, 3G, 3GS) only landscape
|
|
// @ iphone3(portrait) // only iPhone (2, 3G, 3GS) only portrait
|
|
// ---
|
|
// @ iphone4 // only iPhone (4, 4S) landscape & portrait
|
|
// @ iphone4(landscape) // only iPhone (4, 4S) only landscape
|
|
// @ iphone4(portrait) // only iPhone (4, 4S) only portrait
|
|
// ---
|
|
// @ iphone5 // only iPhone (5) landscape & portrait
|
|
// @ iphone5(landscape) // only iPhone (5) only landscape
|
|
// @ iphone5(portrait) // only iPhone (5) only portrait
|
|
// ---
|
|
// @ ipad // all iPads (1, 2, 3, 4, Mini) landscape & portrait
|
|
// @ ipad(landscape) // all iPads (1, 2, 3, 4, Mini) only landscape
|
|
// @ ipad(portrait) // all iPads (1, 2, 3, 4, Mini) only portrait
|
|
// ---
|
|
// @ ipad-retina // only iPad (3, 4) landscape & portrait
|
|
// @ ipad-retina(landscape) // only iPad (3, 4) only landscape
|
|
// @ ipad-retina(portrait) // only iPad (3, 4) only portrait
|
|
// ---
|
|
// @ hdpi(ratio) // devices with hidpi displays (default ratio: 1.3)
|
|
//
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
// --- screen ----------------------------------------------------------------------------------------------------------
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
@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-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) {
|
|
@content;
|
|
}
|
|
}
|
|
@else {
|
|
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-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-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) {
|
|
@content;
|
|
}
|
|
}
|
|
@else {
|
|
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-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-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) {
|
|
@content;
|
|
}
|
|
}
|
|
@else {
|
|
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation:#{$orientation}) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
// --- ipads (all) -----------------------------------------------------------------------------------------------------
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
@mixin ipad($orientation: all) {
|
|
$deviceMinWidth: 768px;
|
|
$deviceMaxWidth: 1024px;
|
|
|
|
@if $orientation == all {
|
|
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) {
|
|
@content;
|
|
}
|
|
}
|
|
@else {
|
|
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-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-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) {
|
|
@content;
|
|
}
|
|
}
|
|
@else {
|
|
@media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth) and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation:#{$orientation}) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|