granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add 00 scale to element colors and update pills

Browse source
This commit is contained in:
Justin Edmund 2022-12-04 09:46:19 -08:00
parent cdc82e5348
commit f2ba1139a1
2 changed files with 62 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

51
components/SegmentedControl/index.scss
View file

@ -4,7 +4,7 @@
} }
.SegmentedControl { .SegmentedControl {
background: white; background: var(--card-bg);
border-radius: $unit * 3; border-radius: $unit * 3;
display: inline-flex; display: inline-flex;
padding: 3px; padding: 3px;
@ -12,77 +12,76 @@
user-select: none; user-select: none;
overflow: hidden; overflow: hidden;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
z-index: 1;
&.fire { &.fire {
.Segment input:checked + label { .Segment input:checked + label {
background: $fire-bg-dark; background: $fire-bg-10;
color: $fire-text-dark; color: $fire-text-10;
} }
.Segment:hover label { .Segment:hover label {
background: $fire-bg-light; background: var(--fire-hover-bg);
color: $fire-text-light; color: var(--fire-hover-text);
} }
} }
&.water { &.water {
.Segment input:checked + label { .Segment input:checked + label {
background: $water-bg-dark; background: $water-bg-10;
color: $water-text-dark; color: $water-text-10;
} }
.Segment:hover label { .Segment:hover label {
background: $water-bg-light; background: var(--water-hover-bg);
color: $water-text-light; color: var(--water-hover-text);
} }
} }
&.earth { &.earth {
.Segment input:checked + label { .Segment input:checked + label {
background: $earth-bg-dark; background: $earth-bg-10;
color: $earth-text-dark; color: $earth-text-10;
} }
.Segment:hover label { .Segment:hover label {
background: $earth-bg-light; background: var(--earth-hover-bg);
color: $earth-text-light; color: var(--earth-hover-text);
} }
} }
&.wind { &.wind {
.Segment input:checked + label { .Segment input:checked + label {
background: $wind-bg-dark; background: $wind-bg-10;
color: $wind-text-dark; color: $wind-text-10;
} }
.Segment:hover label { .Segment:hover label {
background: $wind-bg-light; background: var(--wind-hover-bg);
color: $wind-text-light; color: var(--wind-hover-text);
} }
} }
&.light { &.light {
.Segment input:checked + label { .Segment input:checked + label {
background: $light-bg-dark; background: $light-bg-10;
color: $light-text-dark; color: $light-text-10;
} }
.Segment:hover label { .Segment:hover label {
background: $light-bg-light; background: var(--light-hover-bg);
color: $light-text-light; color: var(--light-hover-text);
} }
} }
&.dark { &.dark {
.Segment input:checked + label { .Segment input:checked + label {
background: $dark-bg-dark; background: $dark-bg-10;
color: $dark-text-dark; color: $dark-text-10;
} }
.Segment:hover label { .Segment:hover label {
background: $dark-bg-light; background: var(--dark-hover-bg);
color: $dark-text-light; color: var(--dark-hover-text);
} }
} }
} }

61
styles/variables.scss
View file

@ -33,35 +33,48 @@ $red: #ff6161;
$error: #d13a3a; $error: #d13a3a;
// Colors: Elements // Colors: Elements
$wind-text-dark: #006a43;
$wind-text-light: #1dc688;
$wind-bg-dark: #4cffbf;
$wind-bg-light: #cdffed;
$fire-text-dark: #6e0000; $wind-text-00: #023e28;
$fire-text-light: #ec5c5c; $wind-text-10: #006a43;
$fire-bg-dark: #ff4d4d; $wind-text-20: #1dc688;
$fire-bg-light: #ffcdcd; $wind-bg-00: #4cffbf55;
$wind-bg-10: #4cffbf;
$wind-bg-20: #cdffed;
$water-text-dark: #004b77; $fire-text-00: #3f0202;
$water-text-light: #5cb7ec; $fire-text-10: #6e0000;
$water-bg-dark: #6cc9ff; $fire-text-20: #ec5c5c;
$water-bg-light: #cdedff; $fire-bg-00: #ff4d4d55;
$fire-bg-10: #ff4d4d;
$fire-bg-20: #ffcdcd;
$earth-text-dark: #662a00; $water-text-00: #03263b;
$earth-text-light: #ec985c; $water-text-10: #004b77;
$earth-bg-dark: #fd9f5b; $water-text-20: #5cb7ec;
$earth-bg-light: #ffe2cd; $water-bg-00: #6cc9ff55;
$water-bg-10: #6cc9ff;
$water-bg-20: #cdedff;
$light-text-dark: #716500; $earth-text-00: #321602;
$light-text-light: #c5b20c; $earth-text-10: #662a00;
$light-bg-dark: #ffed4c; $earth-text-20: #ec985c;
$light-bg-light: #fffacd; $earth-bg-00: #fd9f5b55;
$earth-bg-10: #fd9f5b;
$earth-bg-20: #ffe2cd;
$dark-text-dark: #560075; $light-text-00: #433d02;
$dark-text-light: #c65cec; $light-text-10: #716500;
$dark-bg-dark: #d565fb; $light-text-20: #c5b20c;
$dark-bg-light: #f2cdff; $light-bg-00: #ffed4c55;
$light-bg-10: #ffed4c;
$light-bg-20: #fffacd;
$dark-text-00: #260134;
$dark-text-10: #560075;
$dark-text-20: #c65cec;
$dark-bg-00: #d565fb55;
$dark-bg-10: #d565fb;
$dark-bg-20: #f2cdff;
$normal: 400; $normal: 400;
$medium: 500; $medium: 500;