UNPKG

2.34 kBSCSSView Raw
1// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
2// Licensed under the Apache License, Version 2.0.
3
4// these implementations borrowed from Bourbon v5, and modified to fit our use cases.
5// changes: removed $asset-pipeline argument, added weight/style params like Bourbon v4.
6// https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/library/_font-face.scss
7// https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/utilities/_font-source-declaration.scss
8
9// Generates an `@font-face` declaration. You can choose the specific file
10// formats you need to output; the mixin supports `eot`, `ttf`, `svg`, `woff2`
11// and `woff`.
12//
13// @argument {string} $font-family
14//
15// @argument {string} $file-path
16//
17// @argument {string | list} $file-formats
18// List of the font file formats to include.
19//
20// @argument {string} $weight
21//
22// @argument {string} $style
23//
24// @content
25// Any additional CSS properties that are included in the `@include`
26// directive will be output within the `@font-face` declaration, e.g. you can
27// pass in `font-weight`, `font-style` and/or `unicode-range`.
28@mixin font-face(
29 $font-family,
30 $file-path,
31 $file-formats,
32 $font-weight: normal,
33 $font-style: normal
34) {
35 @font-face {
36 font-family: $font-family;
37 font-style: $font-style;
38 font-weight: $font-weight;
39
40 src: font-source-declaration(
41 $font-family,
42 $file-path,
43 $file-formats
44 );
45
46 @content;
47 }
48}
49
50@function font-source-declaration($font-family, $file-path, $file-formats) {
51 $src: ();
52
53 $formats-map: (
54 eot: "#{$file-path}.eot?#iefix" format("embedded-opentype"),
55 woff2: "#{$file-path}.woff2" format("woff2"),
56 woff: "#{$file-path}.woff" format("woff"),
57 ttf: "#{$file-path}.ttf" format("truetype"),
58 svg: "#{$file-path}.svg##{$font-family}" format("svg"),
59 );
60
61 @each $key, $values in $formats-map {
62 @if list-contains($file-formats, $key) {
63 $file-path: nth($values, 1);
64 $font-format: nth($values, 2);
65
66 $src: append($src, url($file-path) $font-format, comma);
67 }
68 }
69
70 @return $src;
71}
72
73// Returns true if `$list` contains any of `$values`.
74@function list-contains($list, $values...) {
75 @each $value in $values {
76 @if type-of(index($list, $value)) != "number" {
77 @return false;
78 }
79 }
80
81 @return true;
82}