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

fix league colors

Browse Source
This commit is contained in:
Jeff Colombo 2019-02-06 21:41:35 -05:00
parent a639613694
commit f16da85933
2 changed files with 111 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/scss/Variables.scss
View File

@ -46,50 +46,103 @@ $main-border-color: $gray-scale-4;
$main-hover-color: darken($main-background-color, 5%); $main-hover-color: darken($main-background-color, 5%);
$great-league-color: #4d6ed0; $great-league-colors: (
$ultra-league-color: #5e30a3; primary: #649bde,
$master-league-color: #475b5e; shadow: #243897,
$custom-league-color: #f00; );
$ultra-league-colors: (
primary: #516d76,
shadow: #262d31,
);
$master-league-colors: (
primary: #703fb1,
shadow: #361b7c,
);
$custom-league-colors: (
primary: #f00,
shadow: darkred,
);
$league-colors: ( $league-colors: (
great: ( great: (
primary: $great-league-color, active: (
border: $nes-dark, background-color: map-get($great-league-colors, 'primary'),
hover: lighten($great-league-color, 10), box-shadow-color: map-get($great-league-colors, 'shadow'),
// active: #355aca, border-color: $nes-dark,
blur: lighten($great-league-color, 30), color: #fff,
blur-border: lighten($nes-dark, 10), ),
shadow: #1a3ea7, blur: (
contrast: #fff background-color: lighten(map-get($great-league-colors, 'primary'), 30),
box-shadow-color: lighten(map-get($great-league-colors, 'shadow'), 40),
border-color: $nes-dark,
color: $nes-dark,
),
hover: (
background-color: lighten(map-get($great-league-colors, 'primary'), 30),
box-shadow-color: lighten(map-get($great-league-colors, 'shadow'), 40),
border-color: $nes-dark,
color: $nes-dark,
),
), ),
ultra: ( ultra: (
primary: $ultra-league-color, active: (
border: $nes-dark, background-color: map-get($ultra-league-colors, 'primary'),
hover: lighten($ultra-league-color, 10), box-shadow-color: map-get($ultra-league-colors, 'shadow'),
// active: #50298b, border-color: $nes-dark,
blur: lighten($ultra-league-color, 30), color: #fff,
blur-border: lighten($nes-dark, 10), ),
shadow: #342085, blur: (
contrast: #fff background-color: lighten(map-get($ultra-league-colors, 'primary'), 40),
box-shadow-color: lighten(map-get($ultra-league-colors, 'shadow'), 40),
border-color: $nes-dark,
color: $nes-dark,
),
hover: (
background-color: lighten(map-get($ultra-league-colors, 'primary'), 40),
box-shadow-color: lighten(map-get($ultra-league-colors, 'shadow'), 40),
border-color: $nes-dark,
color: $nes-dark,
),
), ),
master: ( master: (
primary: $master-league-color, active: (
border: $nes-dark, background-color: map-get($master-league-colors, 'primary'),
hover: lighten($master-league-color, 10), box-shadow-color: map-get($master-league-colors, 'shadow'),
// active: #3a4a4d, border-color: $nes-dark,
blur: lighten($master-league-color, 30), color: #fff,
blur-border: lighten($nes-dark, 10), ),
shadow: #2f4947, blur: (
contrast: #fff background-color: lighten(map-get($master-league-colors, 'primary'), 40),
box-shadow-color: lighten(map-get($master-league-colors, 'shadow'), 40),
border-color: $nes-dark,
color: $nes-dark,
),
hover: (
background-color: lighten(map-get($master-league-colors, 'primary'), 40),
box-shadow-color: lighten(map-get($master-league-colors, 'shadow'), 40),
border-color: $nes-dark,
color: $nes-dark,
),
), ),
custom: ( custom: (
primary: $custom-league-color, active: (
border: $nes-dark, background-color: map-get($custom-league-colors, 'primary'),
hover: lighten($custom-league-color, 10), box-shadow-color: map-get($custom-league-colors, 'shadow'),
blur: lighten($custom-league-color, 30), border-color: $nes-dark,
blur-border: lighten($nes-dark, 10), color: #fff,
shadow: darkred, ),
contrast: #fff blur: (
) background-color: lighten(map-get($custom-league-colors, 'primary'), 40),
box-shadow-color: lighten(map-get($custom-league-colors, 'shadow'), 40),
border-color: $nes-dark,
color: $nes-dark,
),
hover: (
background-color: lighten(map-get($custom-league-colors, 'primary'), 40),
box-shadow-color: lighten(map-get($custom-league-colors, 'shadow'), 40),
border-color: $nes-dark,
color: $nes-dark,
),
),
); );
// https://bulbapedia.bulbagarden.net/wiki/Category:Type_color_templates // https://bulbapedia.bulbagarden.net/wiki/Category:Type_color_templates

43
src/ts/app/components/PokemonExplorer/styles/LeagueSelector.scss
View File

@ -1,57 +1,58 @@
@import 'styles/Variables.scss'; @import 'styles/Variables.scss';
@each $league, $colors in $league-colors { @each $league, $states in $league-colors {
$blur: map-get($colors, 'blur'); $active: map-get($states, 'active');
$hover: map-get($colors, 'hover'); $blur: map-get($states, 'blur');
$primary: map-get($colors, 'primary'); $hover: map-get($states, 'hover');
$shadow: map-get($colors, 'shadow');
$border: map-get($colors, 'border');
$blur-border: map-get($colors, 'blur-border');
$contrast: map-get($colors, 'contrast');
:global(.nes-btn).#{$league}LeagueButton { :global(.nes-btn).#{$league}LeagueButton {
color: $contrast; color: map-get($blur, 'color');
background-color: $blur; background-color: map-get($blur, 'background-color');
box-shadow: none; box-shadow: inset -4px -4px map-get($blur, 'box-shadow-color');
opacity: 0.6;
// box-shadow: inset -4px -4px darken(saturate(adjust-hue($primary, -12deg), 7), 9); // box-shadow: inset -4px -4px darken(saturate(adjust-hue($primary, -12deg), 7), 9);
// box-shadow: inset -4px -4px darken(saturate($primary, 14), 18); // box-shadow: inset -4px -4px darken(saturate($primary, 14), 18);
&::before, &::before,
&::after { &::after {
border-color: $blur-border; border-color: map-get($blur, 'border-color');
} }
&:hover, &:hover,
&:focus { &:focus {
background-color: $hover; color: map-get($hover, 'color');
box-shadow: inset -4px -4px $shadow; background-color: map-get($hover, 'background-color');
box-shadow: inset -6px -6px map-get($hover, 'box-shadow-color');
opacity: 0.75;
&:active { &:active {
box-shadow: inset 4px 4px $shadow; box-shadow: inset 4px 4px map-get($hover, 'box-shadow-color');
} }
&::before, &::before,
&::after { &::after {
border-color: $border; border-color: map-get($hover, 'border-color');
} }
} }
&.active { &.active {
background-color: $primary; color: map-get($active, 'color');
box-shadow: inset -4px -4px $shadow; background-color: map-get($active, 'background-color');
box-shadow: inset -4px -4px map-get($active, 'box-shadow-color');
opacity: 1;
&:hover, &:hover,
&:focus { &:focus {
box-shadow: inset -6px -6px $shadow; box-shadow: inset -6px -6px map-get($active, 'box-shadow-color');
} }
&:active { &:active {
box-shadow: inset 4px 4px $shadow; box-shadow: inset 4px 4px map-get($active, 'box-shadow-color');
} }
&::before, &::before,
&::after { &::after {
border-color: $border; border-color: map-get($active, 'border-color');
} }
} }
} }