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%);
$great-league-color: #4d6ed0;
$ultra-league-color: #5e30a3;
$master-league-color: #475b5e;
$custom-league-color: #f00;
$great-league-colors: (
primary: #649bde,
shadow: #243897,
);
$ultra-league-colors: (
primary: #516d76,
shadow: #262d31,
);
$master-league-colors: (
primary: #703fb1,
shadow: #361b7c,
);
$custom-league-colors: (
primary: #f00,
shadow: darkred,
);
$league-colors: (
great: (
primary: $great-league-color,
border: $nes-dark,
hover: lighten($great-league-color, 10),
// active: #355aca,
blur: lighten($great-league-color, 30),
blur-border: lighten($nes-dark, 10),
shadow: #1a3ea7,
contrast: #fff
active: (
background-color: map-get($great-league-colors, 'primary'),
box-shadow-color: map-get($great-league-colors, 'shadow'),
border-color: $nes-dark,
color: #fff,
),
blur: (
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: (
primary: $ultra-league-color,
border: $nes-dark,
hover: lighten($ultra-league-color, 10),
// active: #50298b,
blur: lighten($ultra-league-color, 30),
blur-border: lighten($nes-dark, 10),
shadow: #342085,
contrast: #fff
active: (
background-color: map-get($ultra-league-colors, 'primary'),
box-shadow-color: map-get($ultra-league-colors, 'shadow'),
border-color: $nes-dark,
color: #fff,
),
blur: (
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: (
primary: $master-league-color,
border: $nes-dark,
hover: lighten($master-league-color, 10),
// active: #3a4a4d,
blur: lighten($master-league-color, 30),
blur-border: lighten($nes-dark, 10),
shadow: #2f4947,
contrast: #fff
active: (
background-color: map-get($master-league-colors, 'primary'),
box-shadow-color: map-get($master-league-colors, 'shadow'),
border-color: $nes-dark,
color: #fff,
),
blur: (
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: (
primary: $custom-league-color,
border: $nes-dark,
hover: lighten($custom-league-color, 10),
blur: lighten($custom-league-color, 30),
blur-border: lighten($nes-dark, 10),
shadow: darkred,
contrast: #fff
)
active: (
background-color: map-get($custom-league-colors, 'primary'),
box-shadow-color: map-get($custom-league-colors, 'shadow'),
border-color: $nes-dark,
color: #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

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

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