95 lines
9.4 KiB
SCSS
95 lines
9.4 KiB
SCSS
|
// https://github.com/sass/sass/issues/659#issuecomment-64819075
|
||
|
|
@function char($character-code) {
|
||
|
|
@if function-exists("selector-append") {
|
||
|
|
@return unquote("\"\\#{$character-code}\"");
|
||
|
|
}
|
||
|
|
|
||
|
|
@return str-slice("\x", 1, 1) + $character-code;
|
||
|
|
}
|
||
|
|
|
||
|
|
$icon-font-family: VideoJS;
|
||
|
|
|
||
|
|
@font-face {
|
||
|
|
font-family: $icon-font-family;
|
||
|
|
src: url(data:application/font-woff;charset=utf-8;base64,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
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
}
|
||
|
|
|
||
|
|
// https://sass-lang.com/documentation/values/maps
|
||
|
|
$icons: (
|
||
|
|
play: 'f101',
|
||
|
|
play-circle: 'f102',
|
||
|
|
pause: 'f103',
|
||
|
|
volume-mute: 'f104',
|
||
|
|
volume-low: 'f105',
|
||
|
|
volume-mid: 'f106',
|
||
|
|
volume-high: 'f107',
|
||
|
|
fullscreen-enter: 'f108',
|
||
|
|
fullscreen-exit: 'f109',
|
||
|
|
spinner: 'f10a',
|
||
|
|
subtitles: 'f10b',
|
||
|
|
captions: 'f10c',
|
||
|
|
hd: 'f10d',
|
||
|
|
chapters: 'f10e',
|
||
|
|
downloading: 'f10f',
|
||
|
|
file-download: 'f110',
|
||
|
|
file-download-done: 'f111',
|
||
|
|
file-download-off: 'f112',
|
||
|
|
share: 'f113',
|
||
|
|
cog: 'f114',
|
||
|
|
square: 'f115',
|
||
|
|
circle: 'f116',
|
||
|
|
circle-outline: 'f117',
|
||
|
|
circle-inner-circle: 'f118',
|
||
|
|
cancel: 'f119',
|
||
|
|
repeat: 'f11a',
|
||
|
|
replay: 'f11b',
|
||
|
|
replay-5: 'f11c',
|
||
|
|
replay-10: 'f11d',
|
||
|
|
replay-30: 'f11e',
|
||
|
|
forward-5: 'f11f',
|
||
|
|
forward-10: 'f120',
|
||
|
|
forward-30: 'f121',
|
||
|
|
audio: 'f122',
|
||
|
|
next-item: 'f123',
|
||
|
|
previous-item: 'f124',
|
||
|
|
shuffle: 'f125',
|
||
|
|
cast: 'f126',
|
||
|
|
picture-in-picture-enter: 'f127',
|
||
|
|
picture-in-picture-exit: 'f128',
|
||
|
|
facebook: 'f129',
|
||
|
|
linkedin: 'f12a',
|
||
|
|
twitter: 'f12b',
|
||
|
|
tumblr: 'f12c',
|
||
|
|
pinterest: 'f12d',
|
||
|
|
audio-description: 'f12e',
|
||
|
|
);
|
||
|
|
|
||
|
|
// NOTE: This is as complex as we want to get with SCSS functionality.
|
||
|
|
//
|
||
|
|
// Now that we have a map of icons above, we can iterate over that map and create an icon class
|
||
|
|
// for each icon in that list. The iterator below produces CSS classes like this:
|
||
|
|
//
|
||
|
|
// .vjs-icon-play {
|
||
|
|
// font-family: VideoJS;
|
||
|
|
// font-weight: normal;
|
||
|
|
// font-style: normal;
|
||
|
|
// }
|
||
|
|
// .vjs-icon-play:before { content: "\f101"; }
|
||
|
|
//
|
||
|
|
// We can then use @extend in the codebase when we need to add an icon to a class. @extend builds up
|
||
|
|
// the selectors for you so you can avoid duplication. This is generally a bad idea, but since each
|
||
|
|
// icon should only be extended one or two other places, we'll roll with it.
|
||
|
|
@each $name, $content in $icons {
|
||
|
|
.vjs-icon-#{$name} {
|
||
|
|
font-family: $icon-font-family;
|
||
|
|
font-weight: normal;
|
||
|
|
font-style: normal;
|
||
|
|
|
||
|
|
&:before {
|
||
|
|
content: char($content);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|