src/wolnelektury/static/2022/styles/base/_icons.scss

   1 /* ------------------------------
   2     Base: Icons
   3 ------------------------------ */
   4
   5 $icomoon-font-family: "wl" !default;
   6 $icomoon-font-path:   "../fonts" !default;
   7
   8 $icon-liked: "\e900";
   9 $icon-audio: "\e903";
  10 $icon-book: "\e904";
  11 $icon-eye: "\e905";
  12 $icon-prev: "\e901";
  13 $icon-next: "\e902";
  14 $icon-play: "\e906";
  15 $icon-pause: "\e907";
  16 $icon-volume: "\e908";
  17 $icon-mute: "\e909";
  18 $icon-quote: "\e90a";
  19 $icon-search: "\e90b";
  20 $icon-acc-1: "\e90c";
  21 $icon-acc-2: "\e90d";
  22 $icon-acc-3: "\e90e";
  23 $icon-all: "\e90f";
  24 $icon-arrow-right: "\e910";
  25 $icon-arrow-up: "\e911";
  26 $icon-arrow-down: "\e912";
  27 $icon-close: "\e913";
  28
  29 @font-face {
  30   font-family: '#{$icomoon-font-family}';
  31   src:
  32     url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?79zz52') format('truetype'),
  33     url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?79zz52') format('woff'),
  34     url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?79zz52##{$icomoon-font-family}') format('svg');
  35   font-weight: normal;
  36   font-style: normal;
  37   font-display: block;
  38 }
  39
  40 [class^="icon-"], [class*=" icon-"] {
  41   /* use !important to prevent issues with browser extensions that change fonts */
  42   font-family: '#{$icomoon-font-family}' !important;
  43   speak: never;
  44   font-style: normal;
  45   font-weight: normal;
  46   font-variant: normal;
  47   text-transform: none;
  48   line-height: 1;
  49
  50   /* Better Font Rendering =========== */
  51   -webkit-font-smoothing: antialiased;
  52   -moz-osx-font-smoothing: grayscale;
  53 }
  54
  55 .icon-liked {
  56   &:before {
  57     content: $icon-liked;
  58   }
  59 }
  60 .icon-audio {
  61   &:before {
  62     content: $icon-audio;
  63   }
  64 }
  65 .icon-book {
  66   &:before {
  67     content: $icon-book;
  68   }
  69 }
  70 .icon-eye {
  71   &:before {
  72     content: $icon-eye;
  73   }
  74 }
  75 .icon-prev {
  76   &:before {
  77     content: $icon-prev;
  78   }
  79 }
  80 .icon-next {
  81   &:before {
  82     content: $icon-next;
  83   }
  84 }
  85 .icon-play {
  86   &:before {
  87     content: $icon-play;
  88   }
  89 }
  90 .jp-state-playing .icon-play,
  91 .icon-pause {
  92   &:before {
  93     content: $icon-pause;
  94   }
  95 }
  96 .icon-volume {
  97   &:before {
  98     content: $icon-volume;
  99   }
 100 }
 101 .jp-state-muted .icon-volume,
 102 .icon-mute {
 103   &:before {
 104     content: $icon-mute;
 105   }
 106 }
 107 .icon-quote {
 108   &:before {
 109     content: $icon-quote;
 110   }
 111 }
 112 .icon-search {
 113   &:before {
 114     content: $icon-search;
 115   }
 116 }
 117 .icon-acc-1 {
 118   &:before {
 119     content: $icon-acc-1;
 120   }
 121 }
 122 .icon-acc-2 {
 123   &:before {
 124     content: $icon-acc-2;
 125   }
 126 }
 127 .icon-acc-3 {
 128   &:before {
 129     content: $icon-acc-3;
 130   }
 131 }
 132 .icon-all {
 133   &:before {
 134     content: $icon-all;
 135   }
 136 }
 137 .icon-arrow-right {
 138   &:before {
 139     content: $icon-arrow-right;
 140   }
 141 }
 142 .icon-arrow-up {
 143   &:before {
 144     content: $icon-arrow-up;
 145   }
 146 }
 147 .icon-arrow-down {
 148   &:before {
 149     content: $icon-arrow-down;
 150   }
 151 }
 152 .icon-close {
 153   &:before {
 154     content: $icon-close;
 155   }
 156 }