fix menu icon layout

This commit is contained in:
Jeff Colombo 2019-02-16 15:12:33 -05:00
parent 6bcb00f751
commit daad1b2b64
2 changed files with 29 additions and 11 deletions

View File

@ -857,6 +857,16 @@ $scale: 4;
to { background-position-x: -32px; } 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 > & { :hover > & {
animation: dance 300ms steps(2) infinite alternate; animation: dance 300ms steps(2) infinite alternate;
} }
@ -1572,7 +1582,7 @@ $scale: 4;
&.pokemon-181, // #181 Ampharos &.pokemon-181, // #181 Ampharos
&.pokemon-150, // #150 Mewtwo &.pokemon-150, // #150 Mewtwo
&.pokemon-151, // #151 Mew &.pokemon-151, // #151 Mew
&.pokemon-999 { &.pokemon-rhydon {
background-position: 0 0; background-position: 0 0;
} }
@ -1589,7 +1599,7 @@ $scale: 4;
&.pokemon-144, // #144 Articuno &.pokemon-144, // #144 Articuno
&.pokemon-145, // #145 Zapdos &.pokemon-145, // #145 Zapdos
&.pokemon-146, // #146 Moltres &.pokemon-146, // #146 Moltres
&.pokemon-999 { &.pokemon-bird {
background-position: 0 -16px; background-position: 0 -16px;
} }
@ -1610,7 +1620,7 @@ $scale: 4;
&.pokemon-119, // #119 Seaking &.pokemon-119, // #119 Seaking
&.pokemon-129, // #129 Magikarp &.pokemon-129, // #129 Magikarp
&.pokemon-131, // #131 Lapras &.pokemon-131, // #131 Lapras
&.pokemon-999 { &.pokemon-fish {
background-position: 0 -32px; background-position: 0 -32px;
} }
@ -1626,7 +1636,7 @@ $scale: 4;
&.pokemon-040, // #040 Wigglytuff &.pokemon-040, // #040 Wigglytuff
&.pokemon-113, // #113 Chansey &.pokemon-113, // #113 Chansey
&.pokemon-242, // #242 Blissey &.pokemon-242, // #242 Blissey
&.pokemon-999 { &.pokemon-clefairy {
background-position: 0 -48px; background-position: 0 -48px;
} }
@ -1645,7 +1655,7 @@ $scale: 4;
&.pokemon-103, // #103 Exeggutor &.pokemon-103, // #103 Exeggutor
&.pokemon-114, // #114 Tangela &.pokemon-114, // #114 Tangela
&.pokemon-465, // #465 Tangrowth &.pokemon-465, // #465 Tangrowth
&.pokemon-999 { &.pokemon-plant {
background-position: 0 -64px; background-position: 0 -64px;
} }
@ -1663,7 +1673,7 @@ $scale: 4;
&.pokemon-123, // #123 Scyther &.pokemon-123, // #123 Scyther
&.pokemon-212, // #212 Scizor &.pokemon-212, // #212 Scizor
&.pokemon-127, // #127 Pinsir &.pokemon-127, // #127 Pinsir
&.pokemon-999 { &.pokemon-bug {
background-position: 0 -80px; background-position: 0 -80px;
} }
@ -1676,7 +1686,7 @@ $scale: 4;
&.pokemon-147, // #147 Dratini &.pokemon-147, // #147 Dratini
&.pokemon-148, // #148 Dragonair &.pokemon-148, // #148 Dragonair
&.pokemon-149, // #149 Dragonite &.pokemon-149, // #149 Dragonite
&.pokemon-999 { &.pokemon-snake {
background-position: 0 -96px; background-position: 0 -96px;
} }
@ -1696,7 +1706,7 @@ $scale: 4;
&.pokemon-197, // #197 Umbreon &.pokemon-197, // #197 Umbreon
&.pokemon-470, // #470 Leafeon &.pokemon-470, // #470 Leafeon
&.pokemon-471, // #471 Glaceon &.pokemon-471, // #471 Glaceon
&.pokemon-999 { &.pokemon-tauros {
background-position: 0 -112px; background-position: 0 -112px;
} }
@ -1706,8 +1716,12 @@ $scale: 4;
&.pokemon-462, // #462 Magnezone &.pokemon-462, // #462 Magnezone
&.pokemon-100, // #100 Voltorb &.pokemon-100, // #100 Voltorb
&.pokemon-101, // #101 Electrode &.pokemon-101, // #101 Electrode
&.pokemon-999 { &.pokemon-pokeball {
background-position: 0 -128px; background-position: 0 -128px;
:hover > & {
animation: pokeball-dance 300ms steps(2) infinite alternate;
}
} }
// fossil // fossil
@ -1719,8 +1733,12 @@ $scale: 4;
&.pokemon-139, // #139 Omastar &.pokemon-139, // #139 Omastar
&.pokemon-140, // #140 Kabuto &.pokemon-140, // #140 Kabuto
&.pokemon-141, // #141 Kabutops &.pokemon-141, // #141 Kabutops
&.pokemon-999 { &.pokemon-fossil {
background-position: 0 -144px; background-position: 0 -144px;
:hover > & {
animation: fossil-dance 300ms steps(2) infinite alternate;
}
} }
} }

View File

@ -31,12 +31,12 @@
a { a {
padding: 5px 1em 5px 2.25em; padding: 5px 1em 5px 2.25em;
justify-content: flex-end; justify-content: flex-end;
align-items: baseline;
align-content: space-around; align-content: space-around;
flex-wrap: wrap; flex-wrap: wrap;
.menuIcon { .menuIcon {
position: absolute; position: absolute;
top: 3px;
left: 0.5em; left: 0.5em;
} }