159 lines
2.8 KiB
SCSS
159 lines
2.8 KiB
SCSS
@import '~styles/Variables.scss';
|
|
|
|
.wrapper {
|
|
margin: 0 auto;
|
|
// flex-basis: 30rem;
|
|
width: 30rem;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
|
|
.pokemonName {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.pokemonInfoWrapper {
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.pokemonInfoWrapper,
|
|
.leaguePokemonRank {
|
|
display: flex;
|
|
justify-content: space-evenly;
|
|
|
|
.pokemonInfoLeftColumn,
|
|
.pokemonInfoRightColumn {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
flex-basis: 45%;
|
|
align-items: center;
|
|
}
|
|
|
|
.pokemonInfoLeftColumn {
|
|
text-align: center;
|
|
}
|
|
|
|
.pokemonInfoRightColumn {
|
|
flex-grow: 1;
|
|
align-items: start;
|
|
}
|
|
}
|
|
|
|
.highlight {
|
|
composes: highlight from '../../../styles/PokemonApp.scss';
|
|
color: $main-active-font-color;
|
|
}
|
|
|
|
.pokemonTypeWrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.leaguePokemonRank {
|
|
justify-content: flex-start;
|
|
flex-wrap: wrap;
|
|
|
|
.pokemonInfoWraper {
|
|
flex: 1 0 100%;
|
|
display: flex;
|
|
}
|
|
|
|
.pokemonInfoLeftColumn {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.pokemonRankValue {
|
|
display: inline;
|
|
}
|
|
}
|
|
|
|
.pokemonType {
|
|
text-transform: uppercase;
|
|
|
|
&:global(.nes-container) {
|
|
padding: 0;
|
|
font-size: 0.7em;
|
|
line-height: 0.9;
|
|
flex-basis: 50%;
|
|
margin: 0.5rem 7px 11px; // default nes.css margin-bottom value is 14px
|
|
}
|
|
|
|
// override the default nes.css default, which uses #fff
|
|
@mixin rounded-box-shadow($shadow-color) {
|
|
box-shadow: 0 -4px $shadow-color, 0 -8px, 4px 0 $shadow-color, 4px -4px, 8px 0, 0 4px $shadow-color, 0 8px, -4px 0 $shadow-color, -4px 4px, -8px 0, -4px -4px, 4px 4px;
|
|
}
|
|
|
|
@each $type, $colors in $type-colors {
|
|
$primary: map-get($colors, 'primary');
|
|
$contrast: map-get($colors, 'contrast');
|
|
|
|
&:global(.#{$type}) {
|
|
color: $contrast;
|
|
background-color: $primary;
|
|
|
|
&::after {
|
|
@include rounded-box-shadow($primary);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.dexHeader {
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
.formHeader {
|
|
text-transform: uppercase;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.pokemonBaseStats {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: start;
|
|
align-self: stretch;
|
|
}
|
|
|
|
.ivsContainer {
|
|
flex: 0 999 auto;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
|
|
/* for Firefox */
|
|
// min-height: 0;
|
|
|
|
:global(.title).ivContainerTitle {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
background-color: transparent;
|
|
padding: 0;
|
|
|
|
& > * {
|
|
background-color: $main-background-color;
|
|
|
|
&:first-child {
|
|
margin-right: auto;
|
|
padding: 0 0.5em;
|
|
}
|
|
|
|
&:last-child {
|
|
padding-right: 0.5em;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.diplayingIvList {
|
|
$border-offset: 8px;
|
|
|
|
padding: 1.5rem 0 0;
|
|
|
|
:global(.title).ivContainerTitle {
|
|
margin-bottom: 0;
|
|
margin-right: -$border-offset;
|
|
margin-left: -$border-offset;
|
|
padding: 0 2.5rem;
|
|
}
|
|
}
|
|
}
|