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 .icon-pause {
  91   &:before {
  92     content: $icon-pause;
  93   }
  94 }
  95 .icon-volume {
  96   &:before {
  97     content: $icon-volume;
  98   }
  99 }
 100 .icon-mute {
 101   &:before {
 102     content: $icon-mute;
 103   }
 104 }
 105 .icon-quote {
 106   &:before {
 107     content: $icon-quote;
 108   }
 109 }
 110 .icon-search {
 111   &:before {
 112     content: $icon-search;
 113   }
 114 }
 115 .icon-acc-1 {
 116   &:before {
 117     content: $icon-acc-1;
 118   }
 119 }
 120 .icon-acc-2 {
 121   &:before {
 122     content: $icon-acc-2;
 123   }
 124 }
 125 .icon-acc-3 {
 126   &:before {
 127     content: $icon-acc-3;
 128   }
 129 }
 130 .icon-all {
 131   &:before {
 132     content: $icon-all;
 133   }
 134 }
 135 .icon-arrow-right {
 136   &:before {
 137     content: $icon-arrow-right;
 138   }
 139 }
 140 .icon-arrow-up {
 141   &:before {
 142     content: $icon-arrow-up;
 143   }
 144 }
 145 .icon-arrow-down {
 146   &:before {
 147     content: $icon-arrow-down;
 148   }
 149 }
 150 .icon-close {
 151   &:before {
 152     content: $icon-close;
 153   }
 154 }