diff --git a/src/scss/Variables.scss b/src/scss/Variables.scss index 4928751..321f656 100644 --- a/src/scss/Variables.scss +++ b/src/scss/Variables.scss @@ -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; diff --git a/src/scss/index.scss b/src/scss/index.scss index 830e711..a9fe872 100644 --- a/src/scss/index.scss +++ b/src/scss/index.scss @@ -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; diff --git a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx index 67ddbff..8e12203 100644 --- a/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx +++ b/src/ts/app/components/PokemonExplorer/PokemonExplorer.tsx @@ -168,11 +168,16 @@ export class PokemonExplorer extends React.Component 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 MAX LEAGUE Lv