add pokedex icon

src/scss/sprites.scss

@@ -1,5 +1,33 @@
 $scale: 4;
 
+.pokedex {
+  $pokedex-scale: 4;
+
+  @keyframes blink {
+    100% { background-position-x: -18px * $pokedex-scale; }
+  }
+
+  display: inline-block;
+  background: url('../img/pokedex_small.png') no-repeat;
+  background-size: 18px * $pokedex-scale 12px * $pokedex-scale;
+  background-position: 0 * $pokedex-scale 0 * $pokedex-scale;
+  overflow: hidden;
+  text-indent: -9999px;
+  text-align: left;
+  height: 12px * $pokedex-scale;
+  width: 6px * $pokedex-scale;
+  image-rendering: -webkit-crisp-edges;
+  image-rendering: -moz-crisp-edges;
+  image-rendering: crisp-edges;
+  image-rendering: pixelated;
+  -ms-interpolation-mode: nearest-neighbor;
+
+  &:hover {
+    background-position-x: -6px * $pokedex-scale;
+    animation: blink 500ms steps(2) infinite;
+  }
+}
+
 .pokeball {
   $pokeball-scale: 2;
 
@@ -926,22 +954,19 @@ $scale: 4;
 
 .menu {
   @keyframes dance {
-    from { background-position-x: 0; }
-    to { background-position-x: -32px; }
+    100% { background-position-x: -32px; }
   }
 
   @keyframes pokeball-dance {
-    from { background-position-y: -128px; }
-    to { background-position-y: -130px; }
+    100% { background-position-y: -130px; }
   }
 
   @keyframes fossil-dance {
-    from { background-position-y: -144px; }
-    to { background-position-y: -146px; }
+    100% { background-position-y: -146px; }
   }
 
   :hover > & {
-    animation: dance 300ms steps(2) infinite alternate;
+    animation: dance 300ms steps(2) infinite;
   }
 
   // rhydon

src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx

@@ -181,6 +181,11 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
             },
         );
 
+        const pokedexCss = classNames(
+            'pokedex',
+            styles.pokedex,
+        );
+
         const pokemonIconCss = classNames(
             `pokemon-${dex}`,
             {
@@ -237,6 +242,7 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
             <div className={ styles.wrapper }>
                 <div className={ styles.pokemonInfoWrapper }>
                     <div className={ styles.pokemonInfoLeftColumn }>
+                        <i className={ pokedexCss } />
                         <i className={ pokemonIconCss } />
                         <h4 className={ styles.dexHeader }>No.{ dex }</h4>
                         <div className={ styles.pokemonTypeWrapper }>

src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss

@@ -31,6 +31,13 @@
 
   .pokemonInfoLeftColumn {
     text-align: center;
+    position: relative;
+
+    .pokedex {
+      position: absolute;
+      top: 0.5em;
+      left: 0.5em;
+    }
   }
 
   .pokemonInfoRightColumn {

src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts

@@ -6,6 +6,7 @@ export const formHeader: string;
 export const ivContainerTitle: string;
 export const ivsContainer: string;
 export const leaguePokemonRank: string;
+export const pokedex: string;
 export const pokemonBaseStats: string;
 export const pokemonInfoLeftColumn: string;
 export const pokemonInfoRightColumn: string;