Sha256: 9726b3997f6ec26bbceeaba79a41ba69ef486fa7234a2f7e06398ae5d1a0fc58
Contents?: true
Size: 1.52 KB
Versions: 17
Compression:
Stored size: 1.52 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;
@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: 769px){
@content;
}
} @else if $size == tablet {
@media (min-width: 641px){
@content;
}
} @else if $size == mobile {
@media (max-width: 640px){
@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
17 entries across 17 versions & 1 rubygems