www.aleph1.co.uk Git - yaffs-website/blob - node_modules/videojs-font/templates/scss.hbs

   1 // https://github.com/sass/sass/issues/659#issuecomment-64819075
   2 @function char($character-code) {
   3   @if function-exists("selector-append") {
   4     @return unquote("\"\\#{$character-code}\"");
   5   }
   6
   7   @return str-slice("\x", 1, 1) + $character-code;
   8 }
   9
  10 $icon-font-family: {{fontName}};
  11 $icon-font-path: '../fonts' !default;
  12
  13 @font-face {
  14   font-family: $icon-font-family;
  15   src: url('#{$icon-font-path}/{{fontName}}.eot?#iefix') format('eot');
  16 }
  17 @font-face {
  18   font-family: $icon-font-family;
  19   src: url(data:application/font-woff;charset=utf-8;base64,BASE64_WOFF_FONT) format('woff'),
  20        url(data:application/x-font-ttf;charset=utf-8;base64,BASE64_TTF_FONT) format('truetype');
  21   font-weight: normal;
  22   font-style: normal;
  23 }
  24
  25 // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps
  26 $icons: (
  27   {{#each codepoints}}
  28           {{@key}}: '{{this}}',
  29   {{/each}}
  30 );
  31
  32 // NOTE: This is as complex as we want to get with SCSS functionality.
  33 //
  34 // Now that we have a map of icons above, we can iterate over that map and create an icon class
  35 // for each icon in that list. The iterator below produces CSS classes like this:
  36 //
  37 // .vjs-icon-play {
  38 //   font-family: VideoJS;
  39 //   font-weight: normal;
  40 //   font-style: normal;
  41 // }
  42 // .vjs-icon-play:before { content: "\25b6"; }
  43 //
  44 // We can then use @extend in the codebase when we need to add an icon to a class. @extend builds up
  45 // the selectors for you so you can avoid duplication. This is generally a bad idea, but since each
  46 // icon should only be extended one or two other places, we'll roll with it.
  47 @each $name, $content in $icons {
  48   .vjs-icon-#{$name} {
  49     font-family: $icon-font-family;
  50     font-weight: normal;
  51     font-style: normal;
  52
  53     &:before {
  54       content: char($content);
  55     }
  56   }
  57 }