60 lines
1.3 KiB
SCSS
60 lines
1.3 KiB
SCSS
/* ----------------------------- */
|
|
/* ==mixins */
|
|
/* ----------------------------- */
|
|
|
|
/**
|
|
* Mixin to handle media queries breakpoints
|
|
*/
|
|
@mixin mq($keyword) {
|
|
@if $keyword == large {
|
|
@media (min-width: 1280px) { @content; }
|
|
}
|
|
@if $keyword == medium {
|
|
@media (min-width: 769px) { @content; }
|
|
}
|
|
@if $keyword == small {
|
|
@media (max-width: 768px) { @content; }
|
|
}
|
|
@if $keyword == tiny {
|
|
@media (max-width: 640px) { @content; }
|
|
}
|
|
@if $keyword == retina {
|
|
@media
|
|
only screen and (-webkit-min-device-pixel-ratio: 2),
|
|
only screen and (min-resolution: 192dpi),
|
|
only screen and (min-resolution: 2dppx) {
|
|
@content;
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Mixin to handle REM font sizing with PX fallback
|
|
*/
|
|
@mixin rem($value, $base: 10) {
|
|
@if $legacy-support-for-ie {
|
|
font-size: $value + px;
|
|
}
|
|
font-size: $value / $base + rem;
|
|
}
|
|
|
|
/**
|
|
* Compass-like inline-block mixin
|
|
*/
|
|
@mixin inline-block($alignment: none) {
|
|
@if $legacy-support-for-mozilla {
|
|
display: -moz-inline-stack;
|
|
}
|
|
|
|
display: inline-block;
|
|
|
|
@if $alignment and $alignment != none {
|
|
vertical-align: $alignment;
|
|
}
|
|
|
|
@if $legacy-support-for-ie {
|
|
*vertical-align: auto;
|
|
zoom: 1;
|
|
*display: inline;
|
|
}
|
|
} |