styling for desktop
This commit is contained in:
Jeff Colombo
parent
2100315c80
commit
008e249908
241
dist/app.css
vendored
241
dist/app.css
vendored
@ -57,7 +57,8 @@
|
|||||||
flex-flow: column wrap;
|
flex-flow: column wrap;
|
||||||
align-content: center; }
|
align-content: center; }
|
||||||
.PokemonApp__displayWrapper__2PiN5 > * {
|
.PokemonApp__displayWrapper__2PiN5 > * {
|
||||||
width: 425px; }
|
width: 425px;
|
||||||
|
margin: 0 1em; }
|
||||||
|
|
||||||
.PokemonApp__container__MsUHy {
|
.PokemonApp__container__MsUHy {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -189,7 +190,8 @@
|
|||||||
flex-flow: column wrap;
|
flex-flow: column wrap;
|
||||||
align-content: center; }
|
align-content: center; }
|
||||||
.PokemonApp__displayWrapper__2PiN5 > * {
|
.PokemonApp__displayWrapper__2PiN5 > * {
|
||||||
width: 425px; }
|
width: 425px;
|
||||||
|
margin: 0 1em; }
|
||||||
|
|
||||||
.PokemonApp__container__MsUHy {
|
.PokemonApp__container__MsUHy {
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -229,6 +231,7 @@
|
|||||||
display: inline; }
|
display: inline; }
|
||||||
|
|
||||||
.LeagueIvExplorer__ivsContainer__31sfb {
|
.LeagueIvExplorer__ivsContainer__31sfb {
|
||||||
|
font-size: 0.95em;
|
||||||
flex: 0 999 auto;
|
flex: 0 999 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
@ -262,165 +265,49 @@
|
|||||||
line-height: 0.9;
|
line-height: 0.9;
|
||||||
flex-basis: 50%;
|
flex-basis: 50%;
|
||||||
margin: 0.5rem 7px 11px; }
|
margin: 0.5rem 7px 11px; }
|
||||||
.TypeIndicator__pokemonType__3MOQI.normal {
|
.TypeIndicator__pokemonType__3MOQI.normal::after {
|
||||||
color: #fff;
|
box-shadow: 0 -4px #a8a878, 0 -8px, 4px 0 #a8a878, 4px -4px, 8px 0, 0 4px #a8a878, 0 8px, -4px 0 #a8a878, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
background-color: #a8a878; }
|
.TypeIndicator__pokemonType__3MOQI.fighting::after {
|
||||||
.TypeIndicator__pokemonType__3MOQI.normal::after {
|
box-shadow: 0 -4px #c03028, 0 -8px, 4px 0 #c03028, 4px -4px, 8px 0, 0 4px #c03028, 0 8px, -4px 0 #c03028, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
box-shadow: 0 -4px #a8a878, 0 -8px, 4px 0 #a8a878, 4px -4px, 8px 0, 0 4px #a8a878, 0 8px, -4px 0 #a8a878, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
.TypeIndicator__pokemonType__3MOQI.flying::after {
|
||||||
.TypeIndicator__pokemonType__3MOQI.normal.outline {
|
box-shadow: 0 -4px #a890f0, 0 -8px, 4px 0 #a890f0, 4px -4px, 8px 0, 0 4px #a890f0, 0 8px, -4px 0 #a890f0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
color: #a8a878;
|
.TypeIndicator__pokemonType__3MOQI.poison::after {
|
||||||
background-color: #fff; }
|
box-shadow: 0 -4px #a040a0, 0 -8px, 4px 0 #a040a0, 4px -4px, 8px 0, 0 4px #a040a0, 0 8px, -4px 0 #a040a0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
.TypeIndicator__pokemonType__3MOQI.fighting {
|
.TypeIndicator__pokemonType__3MOQI.ground::after {
|
||||||
color: #fff;
|
box-shadow: 0 -4px #e0c068, 0 -8px, 4px 0 #e0c068, 4px -4px, 8px 0, 0 4px #e0c068, 0 8px, -4px 0 #e0c068, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
background-color: #c03028; }
|
.TypeIndicator__pokemonType__3MOQI.rock::after {
|
||||||
.TypeIndicator__pokemonType__3MOQI.fighting::after {
|
box-shadow: 0 -4px #b8a038, 0 -8px, 4px 0 #b8a038, 4px -4px, 8px 0, 0 4px #b8a038, 0 8px, -4px 0 #b8a038, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
box-shadow: 0 -4px #c03028, 0 -8px, 4px 0 #c03028, 4px -4px, 8px 0, 0 4px #c03028, 0 8px, -4px 0 #c03028, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
.TypeIndicator__pokemonType__3MOQI.bug::after {
|
||||||
.TypeIndicator__pokemonType__3MOQI.fighting.outline {
|
box-shadow: 0 -4px #a8b820, 0 -8px, 4px 0 #a8b820, 4px -4px, 8px 0, 0 4px #a8b820, 0 8px, -4px 0 #a8b820, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
color: #c03028;
|
.TypeIndicator__pokemonType__3MOQI.ghost::after {
|
||||||
background-color: #fff; }
|
box-shadow: 0 -4px #705898, 0 -8px, 4px 0 #705898, 4px -4px, 8px 0, 0 4px #705898, 0 8px, -4px 0 #705898, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
.TypeIndicator__pokemonType__3MOQI.flying {
|
.TypeIndicator__pokemonType__3MOQI.steel::after {
|
||||||
color: #fff;
|
box-shadow: 0 -4px #b8b8d0, 0 -8px, 4px 0 #b8b8d0, 4px -4px, 8px 0, 0 4px #b8b8d0, 0 8px, -4px 0 #b8b8d0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
background-color: #a890f0; }
|
.TypeIndicator__pokemonType__3MOQI.fire::after {
|
||||||
.TypeIndicator__pokemonType__3MOQI.flying::after {
|
box-shadow: 0 -4px #f08030, 0 -8px, 4px 0 #f08030, 4px -4px, 8px 0, 0 4px #f08030, 0 8px, -4px 0 #f08030, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
box-shadow: 0 -4px #a890f0, 0 -8px, 4px 0 #a890f0, 4px -4px, 8px 0, 0 4px #a890f0, 0 8px, -4px 0 #a890f0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
.TypeIndicator__pokemonType__3MOQI.water::after {
|
||||||
.TypeIndicator__pokemonType__3MOQI.flying.outline {
|
box-shadow: 0 -4px #6890f0, 0 -8px, 4px 0 #6890f0, 4px -4px, 8px 0, 0 4px #6890f0, 0 8px, -4px 0 #6890f0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
color: #a890f0;
|
.TypeIndicator__pokemonType__3MOQI.grass::after {
|
||||||
background-color: #fff; }
|
box-shadow: 0 -4px #78c850, 0 -8px, 4px 0 #78c850, 4px -4px, 8px 0, 0 4px #78c850, 0 8px, -4px 0 #78c850, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
.TypeIndicator__pokemonType__3MOQI.poison {
|
.TypeIndicator__pokemonType__3MOQI.electric::after {
|
||||||
color: #fff;
|
box-shadow: 0 -4px #f8d030, 0 -8px, 4px 0 #f8d030, 4px -4px, 8px 0, 0 4px #f8d030, 0 8px, -4px 0 #f8d030, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
background-color: #a040a0; }
|
.TypeIndicator__pokemonType__3MOQI.psychic::after {
|
||||||
.TypeIndicator__pokemonType__3MOQI.poison::after {
|
box-shadow: 0 -4px #f85888, 0 -8px, 4px 0 #f85888, 4px -4px, 8px 0, 0 4px #f85888, 0 8px, -4px 0 #f85888, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
box-shadow: 0 -4px #a040a0, 0 -8px, 4px 0 #a040a0, 4px -4px, 8px 0, 0 4px #a040a0, 0 8px, -4px 0 #a040a0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
.TypeIndicator__pokemonType__3MOQI.ice::after {
|
||||||
.TypeIndicator__pokemonType__3MOQI.poison.outline {
|
box-shadow: 0 -4px #98d8d8, 0 -8px, 4px 0 #98d8d8, 4px -4px, 8px 0, 0 4px #98d8d8, 0 8px, -4px 0 #98d8d8, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
color: #a040a0;
|
.TypeIndicator__pokemonType__3MOQI.dragon::after {
|
||||||
background-color: #fff; }
|
box-shadow: 0 -4px #6f35fc, 0 -8px, 4px 0 #6f35fc, 4px -4px, 8px 0, 0 4px #6f35fc, 0 8px, -4px 0 #6f35fc, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
.TypeIndicator__pokemonType__3MOQI.ground {
|
.TypeIndicator__pokemonType__3MOQI.dark::after {
|
||||||
color: #fff;
|
box-shadow: 0 -4px #705848, 0 -8px, 4px 0 #705848, 4px -4px, 8px 0, 0 4px #705848, 0 8px, -4px 0 #705848, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
background-color: #e0c068; }
|
.TypeIndicator__pokemonType__3MOQI.fairy::after {
|
||||||
.TypeIndicator__pokemonType__3MOQI.ground::after {
|
box-shadow: 0 -4px #ee99ac, 0 -8px, 4px 0 #ee99ac, 4px -4px, 8px 0, 0 4px #ee99ac, 0 8px, -4px 0 #ee99ac, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
||||||
box-shadow: 0 -4px #e0c068, 0 -8px, 4px 0 #e0c068, 4px -4px, 8px 0, 0 4px #e0c068, 0 8px, -4px 0 #e0c068, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.ground.outline {
|
|
||||||
color: #e0c068;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.rock {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #b8a038; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.rock::after {
|
|
||||||
box-shadow: 0 -4px #b8a038, 0 -8px, 4px 0 #b8a038, 4px -4px, 8px 0, 0 4px #b8a038, 0 8px, -4px 0 #b8a038, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.rock.outline {
|
|
||||||
color: #b8a038;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.bug {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #a8b820; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.bug::after {
|
|
||||||
box-shadow: 0 -4px #a8b820, 0 -8px, 4px 0 #a8b820, 4px -4px, 8px 0, 0 4px #a8b820, 0 8px, -4px 0 #a8b820, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.bug.outline {
|
|
||||||
color: #a8b820;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.ghost {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #705898; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.ghost::after {
|
|
||||||
box-shadow: 0 -4px #705898, 0 -8px, 4px 0 #705898, 4px -4px, 8px 0, 0 4px #705898, 0 8px, -4px 0 #705898, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.ghost.outline {
|
|
||||||
color: #705898;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.steel {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #b8b8d0; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.steel::after {
|
|
||||||
box-shadow: 0 -4px #b8b8d0, 0 -8px, 4px 0 #b8b8d0, 4px -4px, 8px 0, 0 4px #b8b8d0, 0 8px, -4px 0 #b8b8d0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.steel.outline {
|
|
||||||
color: #b8b8d0;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.fire {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #f08030; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.fire::after {
|
|
||||||
box-shadow: 0 -4px #f08030, 0 -8px, 4px 0 #f08030, 4px -4px, 8px 0, 0 4px #f08030, 0 8px, -4px 0 #f08030, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.fire.outline {
|
|
||||||
color: #f08030;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.water {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #6890f0; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.water::after {
|
|
||||||
box-shadow: 0 -4px #6890f0, 0 -8px, 4px 0 #6890f0, 4px -4px, 8px 0, 0 4px #6890f0, 0 8px, -4px 0 #6890f0, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.water.outline {
|
|
||||||
color: #6890f0;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.grass {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #78c850; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.grass::after {
|
|
||||||
box-shadow: 0 -4px #78c850, 0 -8px, 4px 0 #78c850, 4px -4px, 8px 0, 0 4px #78c850, 0 8px, -4px 0 #78c850, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.grass.outline {
|
|
||||||
color: #78c850;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.electric {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #f8d030; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.electric::after {
|
|
||||||
box-shadow: 0 -4px #f8d030, 0 -8px, 4px 0 #f8d030, 4px -4px, 8px 0, 0 4px #f8d030, 0 8px, -4px 0 #f8d030, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.electric.outline {
|
|
||||||
color: #f8d030;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.psychic {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #f85888; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.psychic::after {
|
|
||||||
box-shadow: 0 -4px #f85888, 0 -8px, 4px 0 #f85888, 4px -4px, 8px 0, 0 4px #f85888, 0 8px, -4px 0 #f85888, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.psychic.outline {
|
|
||||||
color: #f85888;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.ice {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #98d8d8; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.ice::after {
|
|
||||||
box-shadow: 0 -4px #98d8d8, 0 -8px, 4px 0 #98d8d8, 4px -4px, 8px 0, 0 4px #98d8d8, 0 8px, -4px 0 #98d8d8, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.ice.outline {
|
|
||||||
color: #98d8d8;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.dragon {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #6f35fc; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.dragon::after {
|
|
||||||
box-shadow: 0 -4px #6f35fc, 0 -8px, 4px 0 #6f35fc, 4px -4px, 8px 0, 0 4px #6f35fc, 0 8px, -4px 0 #6f35fc, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.dragon.outline {
|
|
||||||
color: #6f35fc;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.dark {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #705848; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.dark::after {
|
|
||||||
box-shadow: 0 -4px #705848, 0 -8px, 4px 0 #705848, 4px -4px, 8px 0, 0 4px #705848, 0 8px, -4px 0 #705848, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.dark.outline {
|
|
||||||
color: #705848;
|
|
||||||
background-color: #fff; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.fairy {
|
|
||||||
color: #fff;
|
|
||||||
background-color: #ee99ac; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.fairy::after {
|
|
||||||
box-shadow: 0 -4px #ee99ac, 0 -8px, 4px 0 #ee99ac, 4px -4px, 8px 0, 0 4px #ee99ac, 0 8px, -4px 0 #ee99ac, -4px 4px, -8px 0, -4px -4px, 4px 4px; }
|
|
||||||
.TypeIndicator__pokemonType__3MOQI.fairy.outline {
|
|
||||||
color: #ee99ac;
|
|
||||||
background-color: #fff; }
|
|
||||||
|
|
||||||
.MovesExplorer__wrapper__2y-BK {
|
|
||||||
font-size: 1em; }
|
|
||||||
.MovesExplorer__wrapper__2y-BK .title {
|
|
||||||
color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
margin-top: -2em;
|
|
||||||
margin-bottom: 0; }
|
|
||||||
|
|
||||||
.MovesExplorer__legacy__2PDtp {
|
|
||||||
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
|
|
||||||
background-size: 14px 14px; }
|
|
||||||
|
|
||||||
.MovesDropdown__wrapper__3aoeI {
|
.MovesDropdown__wrapper__3aoeI {
|
||||||
text-transform: capitalize; }
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
text-transform: capitalize;
|
||||||
|
margin-bottom: 1em; }
|
||||||
|
|
||||||
.MovesDropdown__menu__38tPs {
|
.MovesDropdown__menu__38tPs {
|
||||||
width: 425px;
|
width: 425px;
|
||||||
@ -434,6 +321,11 @@
|
|||||||
.MovesDropdown__menu__38tPs .list-item.active::before,
|
.MovesDropdown__menu__38tPs .list-item.active::before,
|
||||||
.MovesDropdown__menu__38tPs .list-item:hover::before {
|
.MovesDropdown__menu__38tPs .list-item:hover::before {
|
||||||
top: 8px; }
|
top: 8px; }
|
||||||
|
.MovesDropdown__menu__38tPs .title {
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -2em;
|
||||||
|
margin-bottom: 0; }
|
||||||
|
|
||||||
.MovesDropdown__listItem__U8AQj {
|
.MovesDropdown__listItem__U8AQj {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -448,7 +340,9 @@
|
|||||||
.MovesDropdown__listItem__U8AQj > .nes-container {
|
.MovesDropdown__listItem__U8AQj > .nes-container {
|
||||||
flex-basis: 9em; }
|
flex-basis: 9em; }
|
||||||
|
|
||||||
.MovesDropdown__legacy__3-s2n { }
|
.MovesDropdown__legacy__3-s2n {
|
||||||
|
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
|
||||||
|
background-size: 14px 14px; }
|
||||||
|
|
||||||
.TypeEffectiveDisplay__typeWrapper__3w4wT,
|
.TypeEffectiveDisplay__typeWrapper__3w4wT,
|
||||||
.TypeEffectiveDisplay__typeMultiplierWrapper__1WOCi {
|
.TypeEffectiveDisplay__typeMultiplierWrapper__1WOCi {
|
||||||
@ -495,11 +389,10 @@
|
|||||||
.TypeEffectiveDisplay__wrapper__1FFIj * + h4 {
|
.TypeEffectiveDisplay__wrapper__1FFIj * + h4 {
|
||||||
margin-top: 1em; }
|
margin-top: 1em; }
|
||||||
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY {
|
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-flow: row wrap;
|
grid-template-columns: repeat(auto-fill, minmax(7em, auto));
|
||||||
align-items: end; }
|
justify-content: space-between; }
|
||||||
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY > * {
|
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY > * {
|
||||||
margin-right: 14px;
|
|
||||||
height: 0%; }
|
height: 0%; }
|
||||||
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__typeMultiplierWrapper__1WOCi {
|
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__typeMultiplierWrapper__1WOCi {
|
||||||
width: auto;
|
width: auto;
|
||||||
@ -511,7 +404,8 @@
|
|||||||
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__typeWrapper__3w4wT > *,
|
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__typeWrapper__3w4wT > *,
|
||||||
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__typeMultiplierWrapper__1WOCi > * {
|
.TypeEffectiveDisplay__wrapper__1FFIj .TypeEffectiveDisplay__indicatorWrapper__2F3AY .TypeEffectiveDisplay__typeMultiplierWrapper__1WOCi > * {
|
||||||
flex-basis: unset;
|
flex-basis: unset;
|
||||||
width: 6.75rem; }
|
font-size: 0.6em;
|
||||||
|
width: 10em; }
|
||||||
|
|
||||||
.TypeEffectiveDisplay__isCovered__3qyUq {
|
.TypeEffectiveDisplay__isCovered__3qyUq {
|
||||||
position: relative; }
|
position: relative; }
|
||||||
@ -519,24 +413,19 @@
|
|||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 25px;
|
right: 25px;
|
||||||
bottom: 20px;
|
bottom: -15px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
color: #92cc41;
|
color: #92cc41;
|
||||||
box-shadow: 18px 2px, 20px 2px, 16px 4px, 18px 4px, 20px 4px, 2px 6px, 14px 6px, 16px 6px, 2px 8px, 4px 8px, 12px 8px, 14px 8px, 4px 10px, 6px 10px, 10px 10px, 12px 10px, 6px 12px, 8px 12px, 10px 12px, 8px 14px; }
|
box-shadow: 18px 2px, 20px 2px, 16px 4px, 18px 4px, 20px 4px, 2px 6px, 14px 6px, 16px 6px, 2px 8px, 4px 8px, 12px 8px, 14px 8px, 4px 10px, 6px 10px, 10px 10px, 12px 10px, 6px 12px, 8px 12px, 10px 12px, 8px 14px; }
|
||||||
|
|
||||||
.MovesExplorer__wrapper__2y-BK {
|
.MovesExplorer__wrapper__2y-BK h3 {
|
||||||
font-size: 1em; }
|
font-size: 1rem; }
|
||||||
.MovesExplorer__wrapper__2y-BK .title {
|
|
||||||
color: #fff;
|
|
||||||
position: absolute;
|
|
||||||
margin-top: -2em;
|
|
||||||
margin-bottom: 0; }
|
|
||||||
|
|
||||||
.MovesExplorer__legacy__2PDtp {
|
.MovesExplorer__wrapper__2y-BK h4 {
|
||||||
background-image: repeating-linear-gradient(45deg, transparent, transparent 5px, rgba(255, 255, 255, 0.5) 5px, rgba(255, 255, 255, 0.5) 10px);
|
font-size: 0.8em;
|
||||||
background-size: 14px 14px; }
|
color: #676767; }
|
||||||
|
|
||||||
.PokemonDisplay__highlight__h50BA {
|
.PokemonDisplay__highlight__h50BA {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
133
dist/global.css
vendored
133
dist/global.css
vendored
@ -793,7 +793,7 @@ input[type="checkbox"] {
|
|||||||
.nes-container.with-title > .title {
|
.nes-container.with-title > .title {
|
||||||
display: table;
|
display: table;
|
||||||
padding: 0 0.5rem;
|
padding: 0 0.5rem;
|
||||||
margin: -1.8rem 0 1rem;
|
margin: -1.75rem 0 1rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
background-color: #fff; }
|
background-color: #fff; }
|
||||||
.nes-container.with-title.is-centered > .title {
|
.nes-container.with-title.is-centered > .title {
|
||||||
@ -6481,7 +6481,9 @@ a.list-item {
|
|||||||
box-shadow: 2px 2px 0 0.020em,4px 2px 0 0.020em,2px 4px 0 0.020em,4px 4px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,2px 6px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,8px 6px 0 0.020em,10px 6px 0 0.020em,2px 8px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,8px 8px 0 0.020em,10px 8px 0 0.020em,12px 8px 0 0.020em,2px 10px 0 0.020em,4px 10px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,2px 12px 0 0.020em,4px 12px 0 0.020em,6px 12px 0 0.020em,8px 12px 0 0.020em,2px 14px 0 0.020em,4px 14px 0 0.020em; } }
|
box-shadow: 2px 2px 0 0.020em,4px 2px 0 0.020em,2px 4px 0 0.020em,4px 4px 0 0.020em,6px 4px 0 0.020em,8px 4px 0 0.020em,2px 6px 0 0.020em,4px 6px 0 0.020em,6px 6px 0 0.020em,8px 6px 0 0.020em,10px 6px 0 0.020em,2px 8px 0 0.020em,4px 8px 0 0.020em,6px 8px 0 0.020em,8px 8px 0 0.020em,10px 8px 0 0.020em,12px 8px 0 0.020em,2px 10px 0 0.020em,4px 10px 0 0.020em,6px 10px 0 0.020em,8px 10px 0 0.020em,10px 10px 0 0.020em,2px 12px 0 0.020em,4px 12px 0 0.020em,6px 12px 0 0.020em,8px 12px 0 0.020em,2px 14px 0 0.020em,4px 14px 0 0.020em; } }
|
||||||
|
|
||||||
.nes-container {
|
.nes-container {
|
||||||
background-color: #fff; }
|
background-color: #fff;
|
||||||
|
padding-right: 1em;
|
||||||
|
padding-left: 1em; }
|
||||||
|
|
||||||
.nes-container::after,
|
.nes-container::after,
|
||||||
.nes-container.is-rounded::after {
|
.nes-container.is-rounded::after {
|
||||||
@ -6532,5 +6534,132 @@ a.list-item {
|
|||||||
.nes-field.is-inline {
|
.nes-field.is-inline {
|
||||||
display: inherit; } }
|
display: inherit; } }
|
||||||
|
|
||||||
|
/** end nes.css overrides */
|
||||||
|
.normal {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #a8a878; }
|
||||||
|
.normal.outline {
|
||||||
|
color: #a8a878;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.fighting {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #c03028; }
|
||||||
|
.fighting.outline {
|
||||||
|
color: #c03028;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.flying {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #a890f0; }
|
||||||
|
.flying.outline {
|
||||||
|
color: #a890f0;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.poison {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #a040a0; }
|
||||||
|
.poison.outline {
|
||||||
|
color: #a040a0;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.ground {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #e0c068; }
|
||||||
|
.ground.outline {
|
||||||
|
color: #e0c068;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.rock {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #b8a038; }
|
||||||
|
.rock.outline {
|
||||||
|
color: #b8a038;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.bug {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #a8b820; }
|
||||||
|
.bug.outline {
|
||||||
|
color: #a8b820;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.ghost {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #705898; }
|
||||||
|
.ghost.outline {
|
||||||
|
color: #705898;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.steel {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #b8b8d0; }
|
||||||
|
.steel.outline {
|
||||||
|
color: #b8b8d0;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.fire {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #f08030; }
|
||||||
|
.fire.outline {
|
||||||
|
color: #f08030;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.water {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #6890f0; }
|
||||||
|
.water.outline {
|
||||||
|
color: #6890f0;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.grass {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #78c850; }
|
||||||
|
.grass.outline {
|
||||||
|
color: #78c850;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.electric {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #f8d030; }
|
||||||
|
.electric.outline {
|
||||||
|
color: #f8d030;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.psychic {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #f85888; }
|
||||||
|
.psychic.outline {
|
||||||
|
color: #f85888;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.ice {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #98d8d8; }
|
||||||
|
.ice.outline {
|
||||||
|
color: #98d8d8;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.dragon {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #6f35fc; }
|
||||||
|
.dragon.outline {
|
||||||
|
color: #6f35fc;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #705848; }
|
||||||
|
.dark.outline {
|
||||||
|
color: #705848;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
.fairy {
|
||||||
|
color: #fff;
|
||||||
|
background-color: #ee99ac; }
|
||||||
|
.fairy.outline {
|
||||||
|
color: #ee99ac;
|
||||||
|
background-color: #fff; }
|
||||||
|
|
||||||
|
|
||||||
/*# sourceMappingURL=global.tmp.css.map*/
|
/*# sourceMappingURL=global.tmp.css.map*/
|
||||||
60
dist/main-bundle.js
vendored
60
dist/main-bundle.js
vendored
@ -29619,7 +29619,7 @@ function pathToRegexp (path, keys, options) {
|
|||||||
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js because of ./node_modules/react-redux/es/index.js */
|
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/assertThisInitialized.js because of ./node_modules/react-redux/es/index.js */
|
||||||
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/extends.js because of ./node_modules/react-redux/es/index.js */
|
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/extends.js because of ./node_modules/react-redux/es/index.js */
|
||||||
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js because of ./node_modules/react-redux/es/index.js */
|
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/inheritsLoose.js because of ./node_modules/react-redux/es/index.js */
|
||||||
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js because of ./node_modules/react-redux/es/index.js */
|
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/@babel/runtime/helpers/esm/objectWithoutPropertiesLoose.js because of ./node_modules/react-measure/dist/index.esm.js */
|
||||||
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/react/index.js (<- Module is not an ECMAScript module) */
|
/*! ModuleConcatenation bailout: Cannot concat with ./node_modules/react/index.js (<- Module is not an ECMAScript module) */
|
||||||
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
||||||
|
|
||||||
@ -38269,6 +38269,10 @@ var classnames_1 = __importDefault(__webpack_require__(/*! classnames */ "./node
|
|||||||
|
|
||||||
var TypeIndicator_1 = __webpack_require__(/*! ./TypeIndicator */ "./src/ts/app/components/PokemonExplorer/TypeIndicator.tsx");
|
var TypeIndicator_1 = __webpack_require__(/*! ./TypeIndicator */ "./src/ts/app/components/PokemonExplorer/TypeIndicator.tsx");
|
||||||
|
|
||||||
|
var formatter_1 = __webpack_require__(/*! app/utils/formatter */ "./src/ts/app/utils/formatter.ts");
|
||||||
|
|
||||||
|
var types_1 = __webpack_require__(/*! app/utils/types */ "./src/ts/app/utils/types.ts");
|
||||||
|
|
||||||
var styles = __importStar(__webpack_require__(/*! app/components/PokemonExplorer/styles/MovesDropdown.scss */ "./src/ts/app/components/PokemonExplorer/styles/MovesDropdown.scss"));
|
var styles = __importStar(__webpack_require__(/*! app/components/PokemonExplorer/styles/MovesDropdown.scss */ "./src/ts/app/components/PokemonExplorer/styles/MovesDropdown.scss"));
|
||||||
|
|
||||||
var MovesDropdown =
|
var MovesDropdown =
|
||||||
@ -38300,7 +38304,8 @@ function (_react_1$default$Comp) {
|
|||||||
_createClass(MovesDropdown, [{
|
_createClass(MovesDropdown, [{
|
||||||
key: "render",
|
key: "render",
|
||||||
value: function render() {
|
value: function render() {
|
||||||
var _this2 = this;
|
var _this2 = this,
|
||||||
|
_classnames_1$default;
|
||||||
|
|
||||||
var _this$props = this.props,
|
var _this$props = this.props,
|
||||||
isMenuOpen = _this$props.isMenuOpen,
|
isMenuOpen = _this$props.isMenuOpen,
|
||||||
@ -38322,9 +38327,8 @@ function (_react_1$default$Comp) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
var wrapperCss = classnames_1.default('nes-select', 'dropdown', styles.wrapper);
|
|
||||||
var menuCss = classnames_1.default('nes-container', styles.menu);
|
|
||||||
var moveName = 'Select a move';
|
var moveName = 'Select a move';
|
||||||
|
var moveType = null;
|
||||||
|
|
||||||
if (selectedMove !== null) {
|
if (selectedMove !== null) {
|
||||||
var moveStats = movesById.get(selectedMove.id);
|
var moveStats = movesById.get(selectedMove.id);
|
||||||
@ -38334,8 +38338,12 @@ function (_react_1$default$Comp) {
|
|||||||
} else {
|
} else {
|
||||||
moveName = 'UNKNOWN MOVE';
|
moveName = 'UNKNOWN MOVE';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
moveType = types_1.getMoveType(selectedMove, movesById);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var wrapperCss = classnames_1.default('nes-select', 'dropdown', styles.wrapper, (_classnames_1$default = {}, _defineProperty(_classnames_1$default, moveType ? formatter_1.formatType(moveType) : '', moveType !== null), _defineProperty(_classnames_1$default, styles.legacy, selectedMove ? selectedMove.isLegacy : false), _classnames_1$default));
|
||||||
|
var menuCss = classnames_1.default('nes-container', styles.menu);
|
||||||
return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("div", {
|
return react_1.default.createElement(react_1.default.Fragment, null, react_1.default.createElement("div", {
|
||||||
className: wrapperCss,
|
className: wrapperCss,
|
||||||
onClick: this.toggleMenu
|
onClick: this.toggleMenu
|
||||||
@ -38431,8 +38439,6 @@ exports.MovesDropdown = MovesDropdown;
|
|||||||
|
|
||||||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
||||||
|
|
||||||
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
||||||
|
|
||||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
||||||
|
|
||||||
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
|
||||||
@ -38477,8 +38483,6 @@ var MovesDropdown_1 = __webpack_require__(/*! app/components/PokemonExplorer/Mov
|
|||||||
|
|
||||||
var TypeEffectiveDisplay_1 = __webpack_require__(/*! ./TypeEffectiveDisplay */ "./src/ts/app/components/PokemonExplorer/TypeEffectiveDisplay.tsx");
|
var TypeEffectiveDisplay_1 = __webpack_require__(/*! ./TypeEffectiveDisplay */ "./src/ts/app/components/PokemonExplorer/TypeEffectiveDisplay.tsx");
|
||||||
|
|
||||||
var TypeIndicator_1 = __webpack_require__(/*! ./TypeIndicator */ "./src/ts/app/components/PokemonExplorer/TypeIndicator.tsx");
|
|
||||||
|
|
||||||
var types_1 = __webpack_require__(/*! app/utils/types */ "./src/ts/app/utils/types.ts");
|
var types_1 = __webpack_require__(/*! app/utils/types */ "./src/ts/app/utils/types.ts");
|
||||||
|
|
||||||
var styles = __importStar(__webpack_require__(/*! app/components/PokemonExplorer/styles/MovesExplorer.scss */ "./src/ts/app/components/PokemonExplorer/styles/MovesExplorer.scss"));
|
var styles = __importStar(__webpack_require__(/*! app/components/PokemonExplorer/styles/MovesExplorer.scss */ "./src/ts/app/components/PokemonExplorer/styles/MovesExplorer.scss"));
|
||||||
@ -38549,27 +38553,19 @@ function (_react_1$default$Comp) {
|
|||||||
quickMove = _this$props$selectedM.quickMove,
|
quickMove = _this$props$selectedM.quickMove,
|
||||||
chargeMove1 = _this$props$selectedM.chargeMove1,
|
chargeMove1 = _this$props$selectedM.chargeMove1,
|
||||||
chargeMove2 = _this$props$selectedM.chargeMove2;
|
chargeMove2 = _this$props$selectedM.chargeMove2;
|
||||||
var wrapperCss = classnames_1.default('nes-container', styles.wrapper);
|
var wrapperCss = classnames_1.default('nes-container', 'with-title', styles.wrapper);
|
||||||
var quickMoveType = types_1.getMoveType(quickMove, movesById);
|
|
||||||
var quickMoveCss = classnames_1.default(_defineProperty({}, styles.legacy, quickMove ? quickMove.isLegacy : false));
|
|
||||||
var chargeMove1Type = types_1.getMoveType(chargeMove1, movesById);
|
|
||||||
var chargeMove1Css = classnames_1.default(_defineProperty({}, styles.legacy, chargeMove1 ? chargeMove1.isLegacy : false));
|
|
||||||
var chargeMove2Type = types_1.getMoveType(chargeMove2, movesById);
|
|
||||||
var chargeMove2Css = classnames_1.default(_defineProperty({}, styles.legacy, chargeMove2 ? chargeMove2.isLegacy : false));
|
|
||||||
return react_1.default.createElement("div", {
|
return react_1.default.createElement("div", {
|
||||||
className: wrapperCss
|
className: wrapperCss
|
||||||
}, react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
|
}, react_1.default.createElement("h3", {
|
||||||
menuLabel: "Quick Move",
|
className: "title"
|
||||||
|
}, "Move Selection"), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
|
||||||
|
menuLabel: "Fast Move",
|
||||||
isMenuOpen: combatMoveSelectorsOpen.quickMove,
|
isMenuOpen: combatMoveSelectorsOpen.quickMove,
|
||||||
movesById: movesById,
|
movesById: movesById,
|
||||||
selectedMove: quickMove,
|
selectedMove: quickMove,
|
||||||
options: quickMoves,
|
options: quickMoves,
|
||||||
handleToggleOpen: this.handleToggleQuickMoveMenu,
|
handleToggleOpen: this.handleToggleQuickMoveMenu,
|
||||||
handleChangeSelectedOption: this.handleChangeQuickMove
|
handleChangeSelectedOption: this.handleChangeQuickMove
|
||||||
}), quickMove && quickMoveType && react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
|
|
||||||
className: quickMoveCss,
|
|
||||||
type: quickMoveType,
|
|
||||||
theme: TypeIndicator_1.TypeTheme.SOLID
|
|
||||||
}), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
|
}), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
|
||||||
isMenuOpen: combatMoveSelectorsOpen.chargeMove1,
|
isMenuOpen: combatMoveSelectorsOpen.chargeMove1,
|
||||||
menuLabel: "Charge Move 1",
|
menuLabel: "Charge Move 1",
|
||||||
@ -38578,10 +38574,6 @@ function (_react_1$default$Comp) {
|
|||||||
options: chargeMoves,
|
options: chargeMoves,
|
||||||
handleToggleOpen: this.handleToggleChargeMove1Menu,
|
handleToggleOpen: this.handleToggleChargeMove1Menu,
|
||||||
handleChangeSelectedOption: this.handleChangeChargeMove1
|
handleChangeSelectedOption: this.handleChangeChargeMove1
|
||||||
}), chargeMove1 && chargeMove1Type && react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
|
|
||||||
className: chargeMove1Css,
|
|
||||||
type: chargeMove1Type,
|
|
||||||
theme: TypeIndicator_1.TypeTheme.SOLID
|
|
||||||
}), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
|
}), react_1.default.createElement(MovesDropdown_1.MovesDropdown, {
|
||||||
isMenuOpen: combatMoveSelectorsOpen.chargeMove2,
|
isMenuOpen: combatMoveSelectorsOpen.chargeMove2,
|
||||||
menuLabel: "Charge Move 2",
|
menuLabel: "Charge Move 2",
|
||||||
@ -38590,11 +38582,7 @@ function (_react_1$default$Comp) {
|
|||||||
options: chargeMoves,
|
options: chargeMoves,
|
||||||
handleToggleOpen: this.handleToggleChargeMove2Menu,
|
handleToggleOpen: this.handleToggleChargeMove2Menu,
|
||||||
handleChangeSelectedOption: this.handleChangeChargeMove2
|
handleChangeSelectedOption: this.handleChangeChargeMove2
|
||||||
}), chargeMove2 && chargeMove2Type && react_1.default.createElement(TypeIndicator_1.TypeIndicator, {
|
}), (quickMove !== null || chargeMove1 !== null || chargeMove2 !== null) && react_1.default.createElement("div", null, react_1.default.createElement("h3", null, "Type Coverage"), react_1.default.createElement(TypeEffectiveDisplay_1.TypeEffectiveDisplay, {
|
||||||
className: chargeMove2Css,
|
|
||||||
type: chargeMove2Type,
|
|
||||||
theme: TypeIndicator_1.TypeTheme.SOLID
|
|
||||||
}), react_1.default.createElement("div", null, react_1.default.createElement("h4", null, "Type Coverage"), react_1.default.createElement(TypeEffectiveDisplay_1.TypeEffectiveDisplay, {
|
|
||||||
mode: TypeEffectiveDisplay_1.EffectivenessMode.OFFENSE,
|
mode: TypeEffectiveDisplay_1.EffectivenessMode.OFFENSE,
|
||||||
effectiveness: this.calculateTypeCoverage(),
|
effectiveness: this.calculateTypeCoverage(),
|
||||||
coverage: pokemonTypeWeaknesses
|
coverage: pokemonTypeWeaknesses
|
||||||
@ -39043,8 +39031,10 @@ function (_react_1$default$Comp) {
|
|||||||
leaguePokemon: leaguePokemon,
|
leaguePokemon: leaguePokemon,
|
||||||
isHighlighted: isOverlayShown
|
isHighlighted: isOverlayShown
|
||||||
}), widgets.types && leaguePokemon !== null && react_1.default.createElement("div", {
|
}), widgets.types && leaguePokemon !== null && react_1.default.createElement("div", {
|
||||||
className: "nes-container"
|
className: "nes-container with-title"
|
||||||
}, react_1.default.createElement(TypeEffectiveDisplay_1.TypeEffectiveDisplay, {
|
}, react_1.default.createElement("h3", {
|
||||||
|
className: "title"
|
||||||
|
}, "Type Effectivess"), react_1.default.createElement(TypeEffectiveDisplay_1.TypeEffectiveDisplay, {
|
||||||
mode: TypeEffectiveDisplay_1.EffectivenessMode.DEFENSE,
|
mode: TypeEffectiveDisplay_1.EffectivenessMode.DEFENSE,
|
||||||
effectiveness: leaguePokemon.effectiveness,
|
effectiveness: leaguePokemon.effectiveness,
|
||||||
coverage: moveTypeStrengths
|
coverage: moveTypeStrengths
|
||||||
@ -39318,7 +39308,7 @@ function (_react_1$default$Comp) {
|
|||||||
var _this$props = this.props,
|
var _this$props = this.props,
|
||||||
mode = _this$props.mode,
|
mode = _this$props.mode,
|
||||||
effectiveness = _this$props.effectiveness;
|
effectiveness = _this$props.effectiveness;
|
||||||
var wrapperCss = classnames_1.default('nes-container', styles.wrapper);
|
var wrapperCss = classnames_1.default(styles.wrapper);
|
||||||
var indicatorWrapperCss = classnames_1.default(styles.indicatorWrapper);
|
var indicatorWrapperCss = classnames_1.default(styles.indicatorWrapper);
|
||||||
var multiplierWrapperX2Css = classnames_1.default(styles.typeMultiplierWrapper);
|
var multiplierWrapperX2Css = classnames_1.default(styles.typeMultiplierWrapper);
|
||||||
var multiplierWrapperX3Css = classnames_1.default(styles.typeMultiplierWrapper, styles.typeMultiplierWrapperX3);
|
var multiplierWrapperX3Css = classnames_1.default(styles.typeMultiplierWrapper, styles.typeMultiplierWrapperX3);
|
||||||
@ -39911,7 +39901,7 @@ module.exports = {"selectList":"LeagueStatsList__selectList__1FBIL","listItem":"
|
|||||||
/***/ (function(module, exports, __webpack_require__) {
|
/***/ (function(module, exports, __webpack_require__) {
|
||||||
|
|
||||||
// extracted by mini-css-extract-plugin
|
// extracted by mini-css-extract-plugin
|
||||||
module.exports = {"wrapper":"MovesDropdown__wrapper__3aoeI","menu":"MovesDropdown__menu__38tPs","listItem":"MovesDropdown__listItem__U8AQj","legacy":"MovesDropdown__legacy__3-s2n MovesExplorer__legacy__2PDtp"};
|
module.exports = {"wrapper":"MovesDropdown__wrapper__3aoeI","menu":"MovesDropdown__menu__38tPs","listItem":"MovesDropdown__listItem__U8AQj","legacy":"MovesDropdown__legacy__3-s2n"};
|
||||||
|
|
||||||
/***/ }),
|
/***/ }),
|
||||||
|
|
||||||
@ -39924,7 +39914,7 @@ module.exports = {"wrapper":"MovesDropdown__wrapper__3aoeI","menu":"MovesDropdow
|
|||||||
/***/ (function(module, exports, __webpack_require__) {
|
/***/ (function(module, exports, __webpack_require__) {
|
||||||
|
|
||||||
// extracted by mini-css-extract-plugin
|
// extracted by mini-css-extract-plugin
|
||||||
module.exports = {"wrapper":"MovesExplorer__wrapper__2y-BK","legacy":"MovesExplorer__legacy__2PDtp"};
|
module.exports = {"wrapper":"MovesExplorer__wrapper__2y-BK"};
|
||||||
|
|
||||||
/***/ }),
|
/***/ }),
|
||||||
|
|
||||||
|
|||||||
@ -92,6 +92,8 @@ a.list-item {
|
|||||||
|
|
||||||
.nes-container {
|
.nes-container {
|
||||||
background-color: $main-background-color;
|
background-color: $main-background-color;
|
||||||
|
padding-right: 1em;
|
||||||
|
padding-left: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nes-container::after,
|
.nes-container::after,
|
||||||
@ -169,3 +171,20 @@ a.list-item {
|
|||||||
display: inherit;
|
display: inherit;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/** end nes.css overrides */
|
||||||
|
|
||||||
|
@each $type, $colors in $type-colors {
|
||||||
|
$primary: map-get($colors, 'primary');
|
||||||
|
$contrast: map-get($colors, 'contrast');
|
||||||
|
|
||||||
|
&.#{$type} {
|
||||||
|
color: $contrast;
|
||||||
|
background-color: $primary;
|
||||||
|
|
||||||
|
&.outline {
|
||||||
|
color: $primary;
|
||||||
|
background-color: $contrast;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
@ -1,3 +1,5 @@
|
|||||||
|
import POGOProtos from 'pogo-protos';
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ContentRect, default as Measure } from 'react-measure';
|
import { ContentRect, default as Measure } from 'react-measure';
|
||||||
import { FixedSizeList } from 'react-window';
|
import { FixedSizeList } from 'react-window';
|
||||||
@ -8,7 +10,11 @@ import { CombatMoveStats, IPokemonMove } from 'app/models/Pokemon';
|
|||||||
|
|
||||||
import { TypeIndicator, TypeTheme } from './TypeIndicator';
|
import { TypeIndicator, TypeTheme } from './TypeIndicator';
|
||||||
|
|
||||||
|
import { formatType } from 'app/utils/formatter';
|
||||||
|
import { getMoveType } from 'app/utils/types';
|
||||||
|
|
||||||
import * as styles from 'app/components/PokemonExplorer/styles/MovesDropdown.scss';
|
import * as styles from 'app/components/PokemonExplorer/styles/MovesDropdown.scss';
|
||||||
|
import * as typeStyles from 'app/components/PokemonExplorer/styles/TypeIndicator.scss';
|
||||||
|
|
||||||
export interface IMovesDropdownProps {
|
export interface IMovesDropdownProps {
|
||||||
isMenuOpen : boolean;
|
isMenuOpen : boolean;
|
||||||
@ -81,17 +87,8 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const wrapperCss = classNames(
|
|
||||||
'nes-select',
|
|
||||||
'dropdown',
|
|
||||||
styles.wrapper,
|
|
||||||
);
|
|
||||||
const menuCss = classNames(
|
|
||||||
'nes-container',
|
|
||||||
styles.menu,
|
|
||||||
);
|
|
||||||
|
|
||||||
let moveName = 'Select a move';
|
let moveName = 'Select a move';
|
||||||
|
let moveType : POGOProtos.Enums.PokemonType | null = null;
|
||||||
if (selectedMove !== null) {
|
if (selectedMove !== null) {
|
||||||
const moveStats = movesById.get(selectedMove.id);
|
const moveStats = movesById.get(selectedMove.id);
|
||||||
if (moveStats) {
|
if (moveStats) {
|
||||||
@ -99,7 +96,23 @@ export class MovesDropdown extends React.Component<IMovesDropdownProps, IState>
|
|||||||
} else {
|
} else {
|
||||||
moveName = 'UNKNOWN MOVE';
|
moveName = 'UNKNOWN MOVE';
|
||||||
}
|
}
|
||||||
|
moveType = getMoveType(selectedMove, movesById);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const wrapperCss = classNames(
|
||||||
|
'nes-select',
|
||||||
|
'dropdown',
|
||||||
|
styles.wrapper,
|
||||||
|
{
|
||||||
|
[moveType ? formatType(moveType) : ''] : moveType !== null,
|
||||||
|
[styles.legacy]: selectedMove ? selectedMove.isLegacy : false,
|
||||||
|
}
|
||||||
|
);
|
||||||
|
const menuCss = classNames(
|
||||||
|
'nes-container',
|
||||||
|
styles.menu,
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<div
|
<div
|
||||||
|
|||||||
@ -5,15 +5,14 @@ import React from 'react';
|
|||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
|
|
||||||
import { AttackTypeEffectiveness } from 'app/models/Config';
|
import { AttackTypeEffectiveness } from 'app/models/Config';
|
||||||
import { CombatMoveStats, IPokemon, IPokemonMove } from 'app/models/Pokemon';
|
import { CombatMoveStats, IPokemonMove } from 'app/models/Pokemon';
|
||||||
|
|
||||||
import { CombatMoveSelectorsOpen, SelectedCombatMoves } from 'app/components/PokemonExplorer/types';
|
import { CombatMoveSelectorsOpen, SelectedCombatMoves } from 'app/components/PokemonExplorer/types';
|
||||||
|
|
||||||
import { MovesDropdown } from 'app/components/PokemonExplorer/MovesDropdown';
|
import { MovesDropdown } from 'app/components/PokemonExplorer/MovesDropdown';
|
||||||
import { EffectivenessMode, TypeEffectiveDisplay } from './TypeEffectiveDisplay';
|
import { EffectivenessMode, TypeEffectiveDisplay } from './TypeEffectiveDisplay';
|
||||||
import { TypeIndicator, TypeTheme } from './TypeIndicator';
|
|
||||||
|
|
||||||
import { calculateTypeCoverage, getMoveType } from 'app/utils/types';
|
import { calculateTypeCoverage } from 'app/utils/types';
|
||||||
|
|
||||||
import * as styles from 'app/components/PokemonExplorer/styles/MovesExplorer.scss';
|
import * as styles from 'app/components/PokemonExplorer/styles/MovesExplorer.scss';
|
||||||
|
|
||||||
@ -47,26 +46,15 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps> {
|
|||||||
|
|
||||||
const wrapperCss = classNames(
|
const wrapperCss = classNames(
|
||||||
'nes-container',
|
'nes-container',
|
||||||
|
'with-title',
|
||||||
styles.wrapper,
|
styles.wrapper,
|
||||||
);
|
);
|
||||||
|
|
||||||
const quickMoveType = getMoveType(quickMove, movesById);
|
|
||||||
const quickMoveCss = classNames({
|
|
||||||
[styles.legacy]: quickMove ? quickMove.isLegacy : false,
|
|
||||||
});
|
|
||||||
const chargeMove1Type = getMoveType(chargeMove1, movesById);
|
|
||||||
const chargeMove1Css = classNames({
|
|
||||||
[styles.legacy]: chargeMove1 ? chargeMove1.isLegacy : false,
|
|
||||||
});
|
|
||||||
const chargeMove2Type = getMoveType(chargeMove2, movesById);
|
|
||||||
const chargeMove2Css = classNames({
|
|
||||||
[styles.legacy]: chargeMove2 ? chargeMove2.isLegacy : false,
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={ wrapperCss }>
|
<div className={ wrapperCss }>
|
||||||
|
<h3 className="title">Move Selection</h3>
|
||||||
<MovesDropdown
|
<MovesDropdown
|
||||||
menuLabel="Quick Move"
|
menuLabel="Fast Move"
|
||||||
isMenuOpen={ combatMoveSelectorsOpen.quickMove }
|
isMenuOpen={ combatMoveSelectorsOpen.quickMove }
|
||||||
movesById={ movesById }
|
movesById={ movesById }
|
||||||
selectedMove={ quickMove }
|
selectedMove={ quickMove }
|
||||||
@ -74,9 +62,6 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps> {
|
|||||||
handleToggleOpen={ this.handleToggleQuickMoveMenu }
|
handleToggleOpen={ this.handleToggleQuickMoveMenu }
|
||||||
handleChangeSelectedOption={ this.handleChangeQuickMove }
|
handleChangeSelectedOption={ this.handleChangeQuickMove }
|
||||||
/>
|
/>
|
||||||
{ quickMove && quickMoveType &&
|
|
||||||
<TypeIndicator className={ quickMoveCss } type={ quickMoveType } theme={ TypeTheme.SOLID }/>
|
|
||||||
}
|
|
||||||
<MovesDropdown
|
<MovesDropdown
|
||||||
isMenuOpen={ combatMoveSelectorsOpen.chargeMove1 }
|
isMenuOpen={ combatMoveSelectorsOpen.chargeMove1 }
|
||||||
menuLabel="Charge Move 1"
|
menuLabel="Charge Move 1"
|
||||||
@ -86,9 +71,6 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps> {
|
|||||||
handleToggleOpen={ this.handleToggleChargeMove1Menu }
|
handleToggleOpen={ this.handleToggleChargeMove1Menu }
|
||||||
handleChangeSelectedOption={ this.handleChangeChargeMove1 }
|
handleChangeSelectedOption={ this.handleChangeChargeMove1 }
|
||||||
/>
|
/>
|
||||||
{ chargeMove1 && chargeMove1Type &&
|
|
||||||
<TypeIndicator className={ chargeMove1Css } type={ chargeMove1Type } theme={ TypeTheme.SOLID }/>
|
|
||||||
}
|
|
||||||
<MovesDropdown
|
<MovesDropdown
|
||||||
isMenuOpen={ combatMoveSelectorsOpen.chargeMove2 }
|
isMenuOpen={ combatMoveSelectorsOpen.chargeMove2 }
|
||||||
menuLabel="Charge Move 2"
|
menuLabel="Charge Move 2"
|
||||||
@ -98,17 +80,16 @@ export class MovesExplorer extends React.Component<IMovesExplorerProps> {
|
|||||||
handleToggleOpen={ this.handleToggleChargeMove2Menu }
|
handleToggleOpen={ this.handleToggleChargeMove2Menu }
|
||||||
handleChangeSelectedOption={ this.handleChangeChargeMove2 }
|
handleChangeSelectedOption={ this.handleChangeChargeMove2 }
|
||||||
/>
|
/>
|
||||||
{ chargeMove2 && chargeMove2Type &&
|
{ (quickMove !== null || chargeMove1 !== null || chargeMove2 !== null) &&
|
||||||
<TypeIndicator className={ chargeMove2Css } type={ chargeMove2Type } theme={ TypeTheme.SOLID }/>
|
<div>
|
||||||
|
<h3>Type Coverage</h3>
|
||||||
|
<TypeEffectiveDisplay
|
||||||
|
mode={ EffectivenessMode.OFFENSE }
|
||||||
|
effectiveness={ this.calculateTypeCoverage() }
|
||||||
|
coverage={ pokemonTypeWeaknesses }
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
<div>
|
|
||||||
<h4>Type Coverage</h4>
|
|
||||||
<TypeEffectiveDisplay
|
|
||||||
mode={ EffectivenessMode.OFFENSE }
|
|
||||||
effectiveness={ this.calculateTypeCoverage() }
|
|
||||||
coverage={ pokemonTypeWeaknesses }
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -143,7 +143,8 @@ class PokemonExplorer extends React.Component<IConnectedPokemonExplorerProps, IS
|
|||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
{ widgets.types && leaguePokemon !== null &&
|
{ widgets.types && leaguePokemon !== null &&
|
||||||
<div className="nes-container">
|
<div className="nes-container with-title">
|
||||||
|
<h3 className="title">Type Effectivess</h3>
|
||||||
<TypeEffectiveDisplay
|
<TypeEffectiveDisplay
|
||||||
mode={ EffectivenessMode.DEFENSE }
|
mode={ EffectivenessMode.DEFENSE }
|
||||||
effectiveness={ leaguePokemon.effectiveness }
|
effectiveness={ leaguePokemon.effectiveness }
|
||||||
|
|||||||
@ -30,7 +30,6 @@ export class TypeEffectiveDisplay extends React.Component<ITypeEffectiveDisplayP
|
|||||||
} = this.props;
|
} = this.props;
|
||||||
|
|
||||||
const wrapperCss = classNames(
|
const wrapperCss = classNames(
|
||||||
'nes-container',
|
|
||||||
styles.wrapper,
|
styles.wrapper,
|
||||||
);
|
);
|
||||||
const indicatorWrapperCss = classNames(
|
const indicatorWrapperCss = classNames(
|
||||||
|
|||||||
@ -37,6 +37,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.ivsContainer {
|
.ivsContainer {
|
||||||
|
font-size: 0.95em;
|
||||||
flex: 0 999 auto;
|
flex: 0 999 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-flow: column nowrap;
|
flex-flow: column nowrap;
|
||||||
|
|||||||
@ -1,7 +1,11 @@
|
|||||||
@import 'styles/Variables.scss';
|
@import 'styles/Variables.scss';
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
text-transform: capitalize;
|
text-transform: capitalize;
|
||||||
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
.menu {
|
||||||
@ -18,6 +22,13 @@
|
|||||||
:global(.list-item):hover::before {
|
:global(.list-item):hover::before {
|
||||||
top: 8px;
|
top: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
:global(.title) {
|
||||||
|
color: $main-active-font-color;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: -2em;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.listItem {
|
.listItem {
|
||||||
@ -39,5 +50,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.legacy {
|
.legacy {
|
||||||
composes: legacy from './MovesExplorer.scss';
|
background-image:
|
||||||
|
repeating-linear-gradient(
|
||||||
|
45deg,
|
||||||
|
transparent,
|
||||||
|
transparent 5px,
|
||||||
|
rgba(255, 255, 255, 0.5) 5px,
|
||||||
|
rgba(255, 255, 255, 0.5) 10px
|
||||||
|
);
|
||||||
|
background-size: 14px 14px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,24 +1,12 @@
|
|||||||
@import 'styles/Variables.scss';
|
@import 'styles/Variables.scss';
|
||||||
|
|
||||||
.wrapper {
|
.wrapper {
|
||||||
font-size: 1em;
|
h3 {
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
:global(.title) {
|
h4 {
|
||||||
color: $main-active-font-color;
|
font-size: 0.8em;
|
||||||
position: absolute;
|
color: $main-active-background-color;
|
||||||
margin-top: -2em;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.legacy {
|
|
||||||
background-image:
|
|
||||||
repeating-linear-gradient(
|
|
||||||
45deg,
|
|
||||||
transparent,
|
|
||||||
transparent 5px,
|
|
||||||
rgba(255, 255, 255, 0.5) 5px,
|
|
||||||
rgba(255, 255, 255, 0.5) 10px
|
|
||||||
);
|
|
||||||
background-size: 14px 14px;
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,4 +1,3 @@
|
|||||||
// This file is automatically generated.
|
// This file is automatically generated.
|
||||||
// Please do not change this file!
|
// Please do not change this file!
|
||||||
export const legacy: string;
|
|
||||||
export const wrapper: string;
|
export const wrapper: string;
|
||||||
|
|||||||
@ -74,12 +74,11 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.indicatorWrapper {
|
.indicatorWrapper {
|
||||||
display: flex;
|
display: grid;
|
||||||
flex-flow: row wrap;
|
grid-template-columns: repeat(auto-fill, minmax(7em, auto));
|
||||||
align-items: end;
|
justify-content: space-between;
|
||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
margin-right: 14px;
|
|
||||||
height: 0%; // stop single effectiveness indicators from growing to match height/margin of multiple effectiveness indicators
|
height: 0%; // stop single effectiveness indicators from growing to match height/margin of multiple effectiveness indicators
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -99,7 +98,8 @@
|
|||||||
.typeWrapper > *,
|
.typeWrapper > *,
|
||||||
.typeMultiplierWrapper > * {
|
.typeMultiplierWrapper > * {
|
||||||
flex-basis: unset;
|
flex-basis: unset;
|
||||||
width: 6.75rem;
|
font-size: 0.6em;
|
||||||
|
width: 10em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -112,7 +112,7 @@
|
|||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 25px;
|
right: 25px;
|
||||||
bottom: 20px;
|
bottom: -15px;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
|
|||||||
@ -19,20 +19,9 @@
|
|||||||
|
|
||||||
@each $type, $colors in $type-colors {
|
@each $type, $colors in $type-colors {
|
||||||
$primary: map-get($colors, 'primary');
|
$primary: map-get($colors, 'primary');
|
||||||
$contrast: map-get($colors, 'contrast');
|
|
||||||
|
|
||||||
&:global(.#{$type}) {
|
&:global(.#{$type})::after {
|
||||||
color: $contrast;
|
@include rounded-box-shadow($primary);
|
||||||
background-color: $primary;
|
|
||||||
|
|
||||||
&::after {
|
|
||||||
@include rounded-box-shadow($primary);
|
|
||||||
}
|
|
||||||
|
|
||||||
&:global(.outline) {
|
|
||||||
color: $primary;
|
|
||||||
background-color: $contrast;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -84,6 +84,7 @@ $overlay-opacity: 0.7;
|
|||||||
|
|
||||||
& > * {
|
& > * {
|
||||||
width: map-get($container-width, 'desktop');
|
width: map-get($container-width, 'desktop');
|
||||||
|
margin: 0 1em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user