jeff/pvpokemon
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases Wiki Activity

fix some styles

Browse Source
This commit is contained in:
Jeff Colombo 2019-02-03 14:51:20 -05:00
parent 2a12c1860e
commit 46c7142750
3 changed files with 84 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/scss/Variables.scss
View File

@ -1,3 +1,5 @@
@import '~nes.css/scss/base/color-palette';
$game-boy-1: #e3eec0;
$game-boy-2: #aeba89;
$game-boy-3: #5e6745;
@ -28,7 +30,7 @@ $custom-hover: #e8e8e8;
$custom-medium: #939393;
$custom-dark: #3d3d3d;
$nes-dark: #212529;
$nes-dark: $color-black;
// $main-background-color: $custom-light;
// $main-font-primary-color: $custom-dark;

65
src/scss/index.scss
View File

@ -1,5 +1,6 @@
@import './Variables.scss';
@import './sprites.scss';
@import '~nes.css/scss/utilities/icon-mixin';
html,
body {
@ -36,34 +37,57 @@ body {
color: $main-font-primary-color;
}
button.nes-btn:disabled,
button.nes-btn:disabled:hover {
background-color: $main-font-secondary-color;
color: $main-hover-color;
box-shadow: none;
}
a.active:not([href]):not([tabindex]) {
color: $main-active-font-color;
}
a.list-item {
position: relative;
margin-right: 20px;
// borrowed from @import '~nes.css/scss/elements/radios';
$radio: (
(1,1,0,0,0,0),
(1,1,1,1,0,0),
(1,1,1,1,1,0),
(1,1,1,1,1,1),
(1,1,1,1,1,0),
(1,1,1,1,0,0),
(1,1,0,0,0,0),
);
$radio-checked-focus: (
(2,2,0,0,0,0),
(2,2,2,2,0,0),
(2,2,2,2,2,0),
(2,2,2,2,2,2),
(2,2,2,2,2,0),
(2,2,2,2,0,0),
(2,2,0,0,0,0),
);
$colors: ($main-font-primary-color, $main-active-font-color);
&.active,
&:hover {
&::before {
content: "\A";
border-style: solid;
border-width: 7px 0 7px 11px;
border-color: transparent transparent transparent $main-font-primary-color;
position: absolute;
left: 8px;
top: 3px;
left: 4px;
content: "";
@include pixelize($radio, $colors, 2px);
}
}
&:focus,
&:hover {
&::before {
animation: blink 1s infinite steps(1);
}
}
&.active::before {
border-color: transparent transparent transparent $main-active-font-color;
@include pixelize($radio-checked-focus, $colors, 2px);
}
}
@ -96,8 +120,19 @@ a.list-item {
.nes-input,
.nes-textarea {
background-color: $main-background-color;
outline-color: $main-font-secondary-color;
box-shadow: 0 4px $main-border-color, 0 -4px $main-border-color, 4px 0 $main-border-color, -4px 0 $main-border-color;
// borrowed from @import '~nes.css/scss/elements/inputs';
@mixin border-style($border, $outline) {
outline-color: $outline;
box-shadow:
0 4px $border,
0 -4px $border,
4px 0 $border,
-4px 0 $border;
}
@include border-style($main-border-color, $main-font-secondary-color);
&::placeholder {
color: $main-font-secondary-color;

49
src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx
View File

@ -168,11 +168,16 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
const leaugeRankCss = classNames(
styles.leaguePokemonRank,
containerCss,
{ 'with-title': false }
{
'with-title': false
}
);
const maxButtonCss = classNames(
'nes-btn',
'is-primary'
{
'is-primary': individualValues.hp !== null && individualValues.atk !== null && individualValues.def !== null,
'is-disabled': individualValues.hp === null || individualValues.atk === null || individualValues.def === null,
}
);
const pokemonIconCss = classNames(
@ -182,23 +187,32 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
}
);
const progressStaminaCss = classNames('nes-progress', {
'is-success': leaguePokemon.statsRank.staminaRank > 66,
'is-warning': leaguePokemon.statsRank.staminaRank >= 34 && leaguePokemon.statsRank.staminaRank <= 66,
'is-error': leaguePokemon.statsRank.staminaRank < 34,
});
const progressStaminaCss = classNames(
'nes-progress',
{
'is-success': leaguePokemon.statsRank.staminaRank > 66,
'is-warning': leaguePokemon.statsRank.staminaRank >= 34 && leaguePokemon.statsRank.staminaRank <= 66,
'is-error': leaguePokemon.statsRank.staminaRank < 34,
}
);
const progressAttackCss = classNames('nes-progress', {
'is-success': leaguePokemon.statsRank.attackRank > 66,
'is-warning': leaguePokemon.statsRank.attackRank >= 34 && leaguePokemon.statsRank.attackRank <= 66,
'is-error': leaguePokemon.statsRank.attackRank < 34,
});
const progressAttackCss = classNames(
'nes-progress',
{
'is-success': leaguePokemon.statsRank.attackRank > 66,
'is-warning': leaguePokemon.statsRank.attackRank >= 34 && leaguePokemon.statsRank.attackRank <= 66,
'is-error': leaguePokemon.statsRank.attackRank < 34,
}
);
const progressDefenseCss = classNames('nes-progress', {
'is-success': leaguePokemon.statsRank.defenseRank > 66,
'is-warning': leaguePokemon.statsRank.defenseRank >= 34 && leaguePokemon.statsRank.defenseRank <= 66,
'is-error': leaguePokemon.statsRank.defenseRank < 34,
});
const progressDefenseCss = classNames(
'nes-progress',
{
'is-success': leaguePokemon.statsRank.defenseRank > 66,
'is-warning': leaguePokemon.statsRank.defenseRank >= 34 && leaguePokemon.statsRank.defenseRank <= 66,
'is-error': leaguePokemon.statsRank.defenseRank < 34,
}
);
const baseStamina : number = leaguePokemon.stats.baseStamina;
const baseAttack : number = leaguePokemon.stats.baseAttack;
@ -332,7 +346,6 @@ export class PokemonExplorer extends React.Component<IPokemonExplorerProps, ISta
<button
type="button"
className={ maxButtonCss }
disabled={ individualValues.hp === null || individualValues.atk === null || individualValues.def === null }
onClick={ this.handleClickMaximizeLevel }
>
MAX LEAGUE Lv