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

Redesign and add styles for element-tinted control

Browse source
This commit is contained in:
Justin Edmund 2022-02-03 01:08:55 -08:00
parent 4737b430a1
commit 2277a1eff9
2 changed files with 84 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
components/Segment/index.scss
View file

@ -1,26 +1,26 @@
.Segment { .Segment {
border-radius: 4px; color: $grey-50;
color: $grey-10;
cursor: pointer; cursor: pointer;
font-size: 1.4rem; font-size: 1.4rem;
font-weight: $medium; font-weight: $normal;
min-width: 100px; min-width: 100px;
&:hover label { &:hover label {
background: $grey-90; background: $grey-90;
color: $grey-00; color: $grey-00;
} }
& input { & input {
display: none; display: none;
&:checked + label { &:checked + label {
background: $blue; background: $blue;
color: white; color: white;
} }
} }
& label { & label {
border-radius: $unit * 3;
display: block; display: block;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;

75
components/SegmentedControl/index.scss
View file

@ -6,11 +6,84 @@
.SegmentedControl { .SegmentedControl {
background: white; background: white;
border-radius: $unit; border-radius: $unit * 3;
display: inline-flex; display: inline-flex;
padding: 3px;
position: relative; position: relative;
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; z-index: 1;
&.fire {
.Segment input:checked + label {
background: $fire-bg-dark;
color: $fire-text-dark;
}
.Segment:hover label {
background: $fire-bg-light;
color: $fire-text-light;
}
}
&.water {
.Segment input:checked + label {
background: $water-bg-dark;
color: $water-text-dark;
}
.Segment:hover label {
background: $water-bg-light;
color: $water-text-light;
}
}
&.earth {
.Segment input:checked + label {
background: $earth-bg-dark;
color: $earth-text-dark;
}
.Segment:hover label {
background: $earth-bg-light;
color: $earth-text-light;
}
}
&.wind {
.Segment input:checked + label {
background: $wind-bg-dark;
color: $wind-text-dark;
}
.Segment:hover label {
background: $wind-bg-light;
color: $wind-text-light;
}
}
&.light {
.Segment input:checked + label {
background: $light-bg-dark;
color: $light-text-dark;
}
.Segment:hover label {
background: $light-bg-light;
color: $light-text-light;
}
}
&.dark {
.Segment input:checked + label {
background: $dark-bg-dark;
color: $dark-text-dark;
}
.Segment:hover label {
background: $dark-bg-light;
color: $dark-text-light;
}
}
} }