55 lines
1.7 KiB
SCSS
55 lines
1.7 KiB
SCSS
|
@import "compass/css3/images";
|
||
|
|
|
||
|
|
// Mixins
|
||
|
|
// - Necessary SCSS functions
|
||
|
|
// - Browser support:
|
||
|
|
// · IE => 11
|
||
|
|
// · Chrome => 21
|
||
|
|
// · Sarafi => 6
|
||
|
|
// · Firefox => 24
|
||
|
|
// · Opera => 12
|
||
|
|
// --------------------------------------------------
|
||
|
|
|
||
|
|
@mixin grayscale() {
|
||
|
|
-webkit-filter: grayscale(100%);
|
||
|
|
-moz-filter: grayscale(100%);
|
||
|
|
-ms-filter: grayscale(100%);
|
||
|
|
-o-filter: grayscale(100%);
|
||
|
|
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin image-2x($image, $width, $height, $x: 0, $y: 0) {
|
||
|
|
@media (-webkit-min-device-pixel-ratio: 1.3),
|
||
|
|
(min-resolution: 1.3dppx) {
|
||
|
|
/* on retina, use image that's scaled by 2 */
|
||
|
|
background: image-url($image);
|
||
|
|
background-position: $x $y;
|
||
|
|
background-size: $width $height;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
/* FONT FACE */
|
||
|
|
@mixin font-face($fontFamily: myFont, $eotFileSrc: 'myFont.eot', $woffFileSrc: 'myFont.woff', $ttfFileSrc: 'myFont.ttf', $svgFileSrc: 'myFont.svg', $svgFontID: '#myFont') {
|
||
|
|
font-family: $fontFamily;
|
||
|
|
src: url($eotFileSrc) format('eot'), url($woffFileSrc) format('woff'), url($ttfFileSrc) format('truetype'), url($svgFileSrc + $svgFontID) format('svg');
|
||
|
|
}
|
||
|
|
|
||
|
|
@mixin line-clamp($lines) {
|
||
|
|
display: -webkit-box;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
-webkit-box-orient: vertical;
|
||
|
|
-webkit-line-clamp: $lines;
|
||
|
|
|
||
|
|
&::after {
|
||
|
|
content: ' ';
|
||
|
|
display: block;
|
||
|
|
position: absolute;
|
||
|
|
right: 0;
|
||
|
|
bottom: 0;
|
||
|
|
width: 2 * $sLineHeight-normal;
|
||
|
|
height: $sLineHeight-normal;
|
||
|
|
background-image: linear-gradient(to right, rgba(#FFF, 0), rgba(#FFF, 1));
|
||
|
|
}
|
||
|
|
}
|