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

Update size/color of plus icons in grids; replace values with vars

Browse source
This commit is contained in:
Justin Edmund 2022-02-03 00:42:33 -08:00
parent 97fafbd8f1
commit 1344b43bee
4 changed files with 43 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
components/CharacterUnit/index.scss
View file

@ -1,12 +1,12 @@
.CharacterUnit { .CharacterUnit {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 4px; gap: $unit / 2;
max-width: 200px; max-width: 200px;
&.editable .CharacterImage:hover { &.editable .CharacterImage:hover {
border: 1px solid rgba(0, 0, 0, 0.1); border: $hover-stroke;
box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; box-shadow: $hover-shadow;
cursor: pointer; cursor: pointer;
transform: $scale-tall; transform: $scale-tall;
} }
@ -45,7 +45,7 @@
aspect-ratio: 131 / 238; aspect-ratio: 131 / 238;
background: white; background: white;
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
border-radius: 8px; border-radius: $unit;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -58,18 +58,18 @@
width: 17vw; width: 17vw;
} }
&:hover .icon { &:hover .icon svg {
color: #555; color: $grey-10;
} }
.icon { .icon {
position: absolute; position: absolute;
height: 20px; height: $unit * 3;
width: 20px; width: $unit * 3;
z-index: 1; z-index: 1;
svg { svg {
fill: #c9c9c9; fill: $grey-70;
} }
} }
} }

36
components/SummonUnit/index.scss
View file

@ -39,44 +39,44 @@
margin-right: 0; margin-right: 0;
} }
&.main.editable .SummonImage:hover,
&.friend.editable .SummonImage:hover {
transform: $scale-tall;
}
&.editable .SummonImage:hover {
border: $hover-stroke;
box-shadow: $hover-shadow;
cursor: pointer;
transform: $scale-wide;
}
.SummonImage { .SummonImage {
background: white; background: white;
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
border-radius: 8px; border-radius: $unit;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
overflow: hidden; overflow: hidden;
transition: all 0.18s ease-in-out; transition: all 0.18s ease-in-out;
&:hover .icon { &:hover .icon svg {
color: #555; fill: $grey-10;
} }
.icon { .icon {
position: absolute; position: absolute;
height: 20px; height: $unit * 3;
width: 20px; width: $unit * 3;
z-index: 1; z-index: 1;
svg { svg {
fill: #c9c9c9; fill: $grey-70;
} }
} }
} }
&.editable .SummonImage:hover {
border: 1px solid rgba(0, 0, 0, 0.1);
box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px;
cursor: pointer;
transform: $scale-wide;
}
&.main.editable .SummonImage:hover,
&.friend.editable .SummonImage:hover {
transform: $scale-tall;
}
&.filled h3 { &.filled h3 {
display: block; display: block;
} }

22
components/WeaponUnit/index.scss
View file

@ -4,8 +4,8 @@
gap: 4px; gap: 4px;
&.editable .WeaponImage:hover { &.editable .WeaponImage:hover {
border: 1px solid rgba(0, 0, 0, 0.1); border: $hover-stroke;
box-shadow: rgba(0, 0, 0, 0.14) 0px 0px 14px; box-shadow: $hover-shadow;
cursor: pointer; cursor: pointer;
transform: $scale-wide; transform: $scale-wide;
} }
@ -64,22 +64,22 @@
.WeaponImage { .WeaponImage {
background: white; background: white;
border: 1px solid rgba(0, 0, 0, 0); border: 1px solid rgba(0, 0, 0, 0);
border-radius: 8px; border-radius: $unit;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin-bottom: 2px; margin-bottom: $unit / 4;
overflow: hidden; overflow: hidden;
transition: all 0.18s ease-in-out; transition: all 0.18s ease-in-out;
&:hover .icon { &:hover .icon svg {
color: #555; fill: $grey-10;
} }
h3 { h3 {
color: #333; color: $grey-00;
font-size: $font-regular; font-size: $font-regular;
font-weight: 500; font-weight: $medium;
margin: 0; margin: 0;
text-align: center; text-align: center;
} }
@ -92,12 +92,12 @@
.icon { .icon {
position: absolute; position: absolute;
height: 20px; height: $unit * 3;
width: 20px; width: $unit * 3;
z-index: 1; z-index: 1;
svg { svg {
fill: #c9c9c9; fill: $grey-70;
} }
} }
} }

6
styles/variables.scss
View file

@ -34,4 +34,8 @@ $font-xlarge: 24px;
// Scale factors // Scale factors
$scale-wide: scale(1.05, 1.05); $scale-wide: scale(1.05, 1.05);
$scale-tall: scale(1.012, 1.012); $scale-tall: scale(1.012, 1.012);
// Shadows
$hover-stroke: 1px solid rgba(0, 0, 0, 0.1);
$hover-shadow: rgba(0, 0, 0, 0.08) 0px 0px 14px;