Sha256: 12873b0c0cb93a9f6b2fb5d9267f53271087ce920e6f56c9145202920dc77f35
Contents?: true
Size: 1.63 KB
Versions: 53
Compression:
Stored size: 1.63 KB
Contents
// Media query helpers. These make producing IE layouts
// super easy.
// The base css you write should be for mobile. You can
// then add desktop styles on top.
//
// Usage:
//
// div.columns {
// border: 1px solid;
//
// @include media(desktop){
// width: 30%;
// float: left;
// }
// @include ie-lte(8) {
// something to fix visual bugs in old IE
// }
// @include ie(6) {
// padding: 0;
// }
// }
$is-ie: false !default;
$mobile-ie6: true !default;
$tablet-breakpoint: 641px !default;
$desktop-breakpoint: 769px !default;
@mixin media($size: false, $max-width: false, $min-width: false, $ignore-for-ie: false) {
@if $is-ie and ($ignore-for-ie == false) {
@if $size != mobile {
@if ($ie-version == 6 and $mobile-ie6 == false) or $ie-version > 6 {
@content;
}
}
} @else {
@if $size == desktop {
@media (min-width: $desktop-breakpoint){
@content;
}
} @else if $size == tablet {
@media (min-width: $tablet-breakpoint){
@content;
}
} @else if $size == mobile {
@media (max-width: $tablet-breakpoint - 1px){
@content;
}
} @else if $max-width != false {
@media (max-width: $max-width){
@content;
}
} @else if $min-width != false {
@media (min-width: $min-width){
@content;
}
} @else {
@media (min-width: $size){
@content
}
}
}
}
@mixin ie-lte($version) {
@if $is-ie {
@if $ie-version <= $version {
@content;
}
}
}
@mixin ie($version) {
@if $is-ie {
@if $ie-version == $version {
@content;
}
}
}
Version data entries
53 entries across 53 versions & 5 rubygems