From 0f64fdafa909be68efae8257c7e0a0a70bdc9043 Mon Sep 17 00:00:00 2001 From: Jeff Colombo Date: Sun, 24 Feb 2019 01:40:03 -0500 Subject: [PATCH] add pokedex icon --- src/img/pokedex.png | Bin 0 -> 666 bytes src/img/pokedex_small.png | Bin 0 -> 306 bytes src/scss/sprites.scss | 39 ++++++++++++++---- .../PokemonExplorer/PokemonExplorer.tsx | 6 +++ .../styles/PokemonExplorer.scss | 7 ++++ .../styles/PokemonExplorer.scss.d.ts | 1 + 6 files changed, 46 insertions(+), 7 deletions(-) create mode 100644 src/img/pokedex.png create mode 100644 src/img/pokedex_small.png diff --git a/src/img/pokedex.png b/src/img/pokedex.png new file mode 100644 index 0000000000000000000000000000000000000000..988f27d863c56f5a5075a1519a7eda526460dc32 GIT binary patch literal 666 zcmV;L0%iS)P)WFU8GbZ8()Nlj2>E@cM*00I62%#*tGNVNuU1)z#po@U=^P!!pUskTU-||>>6gLPi&ZWk4AMWeN_26f<`O_i zNx?LU%+69-US?V;=G;4qP5)vRIrY${C99ZL)Z7mc&~^3$uX8y};GR4AJ?=68>wbVt zB#v4BNsm(G@_7J#vl$?BB98gd+a-YUxyahr0>NMqo$WEw1q$E1T>_l$nWwuc&A)P{ z?E?o2GoB^^GOv#FE`00+n+5hv2Iy7TOY{HPF}aNZRbGMEzz$0H^A8E#dld(+W-In07*qoM6N<$g3-_* AsQ>@~ literal 0 HcmV?d00001 diff --git a/src/img/pokedex_small.png b/src/img/pokedex_small.png new file mode 100644 index 0000000000000000000000000000000000000000..41a6df569dfd57002e9af55a502fe4dca6ead7d7 GIT binary patch literal 306 zcmeAS@N?(olHy`uVBq!ia0vp^LO{&J!3HGrh2HJ~Qfx`y?k)@$7&I6(iesx=fFhg) z9+AZi4BWyX%*Zfnjs#GUy~NYkmHjc31e==p_m@-80)=EVLn2C?^K)}k^GbkR1_tM% z)Wnk16ovB4k_-iRPv3wPy;OFf_%u%!#}JM4b1!Y=Z8i{SeJG#hc7h??&FPekrewQh zP)d`C-0_!rd`1VB8XjykJ~SugZ~o5{gif0gXuu%*D2dAnObz#UfQUU z^!M~L=V`GU{uQ5@UD~wDXi4qbXb=7N|7_Q+%KD@46gzGID3%~ou=+{io*jALj`-^R vYWctTyYrovMfYp|n_igtAS%A?)tY+7_ii(uYZqT%2y(iotDnm{r-UW|7RYh& literal 0 HcmV?d00001 diff --git a/src/scss/sprites.scss b/src/scss/sprites.scss index bdadeaf..6bcfc72 100644 --- a/src/scss/sprites.scss +++ b/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 diff --git a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx index 75d8c39..8ddf6c5 100644 --- a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx +++ b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx @@ -181,6 +181,11 @@ export class PokemonExplorer extends React.Component
+

No.{ dex }

diff --git a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss index 7380577..1fe4322 100644 --- a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss +++ b/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 { diff --git a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts b/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts index bd63d44..25d6c76 100644 --- a/src/ts/app/components/PokemonExplorer/styles/PokemonExplorer.scss.d.ts +++ b/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;