forked from bozboz/luigi
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_typography.scss
54 lines (47 loc) · 1.45 KB
/
_typography.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
@mixin font($type) {
@if $type == hell {
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 300;
} @else if $type == sans {
font-family: Arial,"Helvetica Neue", Helvetica, sans-serif;
} @else if $type == serif {
font-family: "Georgia", "Times New Roman", Times, sans-serif;
} @else if $type == monospace {
font-family: "Monaco", "Courier New", monospace;
}
}
@mixin font-face($font-name, $file, $svg-font-name: false, $weight: 100, $style: normal) {
@font-face {
$fonts: url('#{$file}.eot?#iefix') format('embedded-opentype'), url('#{$file}.woff') format('woff'), url('#{$file}.ttf') format('truetype');
@if($svg-font-name) {
$fonts: $fonts, url('#{$file}.svg##{$svg-font-name}') format('svg');
}
font-family: quote($font-name);
src: url('#{$file}.eot');
src: $fonts;
font-weight: $weight;
font-style: $style;
}
}
@mixin font-optimize($kerning: 0, $rendering: optimizeLegibility){
letter-spacing: $kerning;
text-rendering: $rendering;
}
@function calculate-rem($size) {
$rem-size: $size / 16px;
@return #{$rem-size}rem;
}
@mixin font-size($size) {
font-size: $size; //Fallback in px
font-size: calculate-rem($size);
}
@mixin hide-text {
font: 0/0 a;
text-shadow: none;
color: transparent;
}
@mixin truncate-text($overflow: ellipsis){
overflow: hidden;
white-space: nowrap;
text-overflow: $overflow; // values are: clip, ellipsis, or a string
}