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

36
components/SummonUnit/index.scss
View file

@ -39,44 +39,44 @@
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 {
background: white;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 8px;
border-radius: $unit;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: all 0.18s ease-in-out;
&:hover .icon {
color: #555;
&:hover .icon svg {
fill: $grey-10;
}
.icon {
position: absolute;
height: 20px;
width: 20px;
height: $unit * 3;
width: $unit * 3;
z-index: 1;
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 {
display: block;
}

22
components/WeaponUnit/index.scss
View file

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

6
styles/variables.scss
View file

@ -34,4 +34,8 @@ $font-xlarge: 24px;
// Scale factors
$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;