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

61
styles/variables.scss
View file

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