diff --git a/src/scss/sprites.scss b/src/scss/sprites.scss index 6ade4b4..f600bd1 100644 --- a/src/scss/sprites.scss +++ b/src/scss/sprites.scss @@ -857,6 +857,16 @@ $scale: 4; to { background-position-x: -32px; } } + @keyframes pokeball-dance { + from { background-position-y: -127px; } + to { background-position-y: -129px; } + } + + @keyframes fossil-dance { + from { background-position-y: -143px; } + to { background-position-y: -145px; } + } + :hover > & { animation: dance 300ms steps(2) infinite alternate; } @@ -1572,7 +1582,7 @@ $scale: 4; &.pokemon-181, // #181 Ampharos &.pokemon-150, // #150 Mewtwo &.pokemon-151, // #151 Mew - &.pokemon-999 { + &.pokemon-rhydon { background-position: 0 0; } @@ -1589,7 +1599,7 @@ $scale: 4; &.pokemon-144, // #144 Articuno &.pokemon-145, // #145 Zapdos &.pokemon-146, // #146 Moltres - &.pokemon-999 { + &.pokemon-bird { background-position: 0 -16px; } @@ -1610,7 +1620,7 @@ $scale: 4; &.pokemon-119, // #119 Seaking &.pokemon-129, // #129 Magikarp &.pokemon-131, // #131 Lapras - &.pokemon-999 { + &.pokemon-fish { background-position: 0 -32px; } @@ -1626,7 +1636,7 @@ $scale: 4; &.pokemon-040, // #040 Wigglytuff &.pokemon-113, // #113 Chansey &.pokemon-242, // #242 Blissey - &.pokemon-999 { + &.pokemon-clefairy { background-position: 0 -48px; } @@ -1645,7 +1655,7 @@ $scale: 4; &.pokemon-103, // #103 Exeggutor &.pokemon-114, // #114 Tangela &.pokemon-465, // #465 Tangrowth - &.pokemon-999 { + &.pokemon-plant { background-position: 0 -64px; } @@ -1663,7 +1673,7 @@ $scale: 4; &.pokemon-123, // #123 Scyther &.pokemon-212, // #212 Scizor &.pokemon-127, // #127 Pinsir - &.pokemon-999 { + &.pokemon-bug { background-position: 0 -80px; } @@ -1676,7 +1686,7 @@ $scale: 4; &.pokemon-147, // #147 Dratini &.pokemon-148, // #148 Dragonair &.pokemon-149, // #149 Dragonite - &.pokemon-999 { + &.pokemon-snake { background-position: 0 -96px; } @@ -1696,7 +1706,7 @@ $scale: 4; &.pokemon-197, // #197 Umbreon &.pokemon-470, // #470 Leafeon &.pokemon-471, // #471 Glaceon - &.pokemon-999 { + &.pokemon-tauros { background-position: 0 -112px; } @@ -1706,8 +1716,12 @@ $scale: 4; &.pokemon-462, // #462 Magnezone &.pokemon-100, // #100 Voltorb &.pokemon-101, // #101 Electrode - &.pokemon-999 { + &.pokemon-pokeball { background-position: 0 -128px; + + :hover > & { + animation: pokeball-dance 300ms steps(2) infinite alternate; + } } // fossil @@ -1719,8 +1733,12 @@ $scale: 4; &.pokemon-139, // #139 Omastar &.pokemon-140, // #140 Kabuto &.pokemon-141, // #141 Kabutops - &.pokemon-999 { + &.pokemon-fossil { background-position: 0 -144px; + + :hover > & { + animation: fossil-dance 300ms steps(2) infinite alternate; + } } } diff --git a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss index 386708e..630ca06 100644 --- a/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss +++ b/src/ts/app/components/PokemonSelectList/styles/PokemonSelectList.scss @@ -31,12 +31,12 @@ a { padding: 5px 1em 5px 2.25em; justify-content: flex-end; - align-items: baseline; align-content: space-around; flex-wrap: wrap; .menuIcon { position: absolute; + top: 3px; left: 0.5em; }