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

Clean up font-size

Browse source 
We'll have to change this to rems in the future, but at least we're just changing variables
This commit is contained in:
Justin Edmund 2022-01-25 01:35:39 -08:00
parent 96265c31f0
commit 471b61b2c0
11 changed files with 87 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
components/CharacterResult/index.scss
View file

@ -19,7 +19,7 @@
.CharacterResult h5 { .CharacterResult h5 {
color: #555; color: #555;
display: inline-block; display: inline-block;
font-size: 18px; font-size: $font-large;
font-weight: 500; font-weight: 500;
margin: 2px 4px 4px 0; margin: 2px 4px 4px 0;
} }
@ -31,7 +31,7 @@
.CharacterResult .stars { .CharacterResult .stars {
display: inline-block; display: inline-block;
color: #FFA15E; color: #FFA15E;
font-size: 21px; font-size: $font-xlarge;
} }
.CharacterResult .stars > span { .CharacterResult .stars > span {

2
components/CharacterUnit/index.scss
View file

@ -40,7 +40,7 @@
.CharacterUnit h3 { .CharacterUnit h3 {
color: #333; color: #333;
font-size: 14px; font-size: $font-regular;
font-weight: 500; font-weight: 500;
margin: 0; margin: 0;
max-width: 131px; max-width: 131px;

82
components/Modal/index.scss
View file

@ -9,23 +9,73 @@
position: absolute; position: absolute;
left: 0; left: 0;
top: 0; top: 0;
.Modal {
background: #f5f5f5;
border-radius: $unit;
color: $grey-00;
display: flex;
flex-direction: column;
min-width: $unit * 45;
max-width: $unit * 60;
overflow-y: auto;
padding: $unit * 3;
position: relative;
z-index: 10;
#ModalTop {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 16px;
margin-right: -8px;
h2 {
font-size: $font-xlarge;
font-weight: 500;
text-align: left;
flex-grow: 1;
}
svg {
fill: $grey-50;
padding: $unit / 2;
height: 18px;
width: 18px;
transform: rotate(45deg);
&:hover {
cursor: pointer;
fill: $grey-00;
}
}
}
#ModalBottom {
display: flex;
flex-direction: row;
a {
color: #666;
font-size: $font-regular;
font-weight: 500;
flex-grow: 1;
display: flex;
align-items: center;
}
.Button {
display: block;
min-height: $unit * 5;
text-align: center;
min-width: $unit * 11;
}
}
}
} }
.Modal {
background: #f5f5f5;
border-radius: 8px;
display: flex;
flex-direction: column;
min-width: 360px;
max-width: 480px;
overflow-y: auto;
position: relative;
z-index: 10;
}
.Modal .Button {
display: block;
min-height: 45px;
text-align: center;
}

2
components/SearchModal/index.scss
View file

@ -39,7 +39,7 @@
.SearchModal #NoResults h2 { .SearchModal #NoResults h2 {
color: #ccc; color: #ccc;
font-size: 18px; font-size: $font-large;
font-weight: 500; font-weight: 500;
margin-top: -32px; margin-top: -32px;
} }

4
components/SignupModal/index.scss
View file

@ -23,7 +23,7 @@
#ModalTop h1 { #ModalTop h1 {
margin: 0; margin: 0;
font-size: 24px; font-size: $font-xlarge;
text-align: left; text-align: left;
flex-grow: 1; flex-grow: 1;
} }
@ -55,7 +55,7 @@
#ModalBottom a { #ModalBottom a {
color: #666; color: #666;
font-size: 13px; font-size: $font-regular;
font-weight: 500; font-weight: 500;
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;

2
components/SummonGrid/index.scss
View file

@ -6,7 +6,7 @@
& .Label { & .Label {
color: $grey-50; color: $grey-50;
font-size: 12px; font-size: $font-small;
font-weight: $medium; font-weight: $medium;
margin-bottom: $unit; margin-bottom: $unit;
text-align: center; text-align: center;

4
components/SummonResult/index.scss
View file

@ -19,7 +19,7 @@
.SummonResult h5 { .SummonResult h5 {
color: #555; color: #555;
display: inline-block; display: inline-block;
font-size: 18px; font-size: $font-large;
font-weight: 500; font-weight: 500;
margin: 2px 4px 4px 0; margin: 2px 4px 4px 0;
} }
@ -31,7 +31,7 @@
.SummonResult .stars { .SummonResult .stars {
display: inline-block; display: inline-block;
color: #FFA15E; color: #FFA15E;
font-size: 21px; font-size: $font-xlarge;
} }
.SummonResult .stars > span { .SummonResult .stars > span {

2
components/SummonUnit/index.scss
View file

@ -50,7 +50,7 @@
h3 { h3 {
color: #333; color: #333;
font-size: 14px; font-size: $font-regular;
font-weight: 500; font-weight: 500;
margin: 0; margin: 0;
text-align: center; text-align: center;

4
components/WeaponResult/index.scss
View file

@ -19,7 +19,7 @@
.WeaponResult h5 { .WeaponResult h5 {
color: #555; color: #555;
display: inline-block; display: inline-block;
font-size: 18px; font-size: $font-large;
font-weight: 500; font-weight: 500;
margin: 2px 4px 4px 0; margin: 2px 4px 4px 0;
} }
@ -31,7 +31,7 @@
.WeaponResult .stars { .WeaponResult .stars {
display: inline-block; display: inline-block;
color: #FFA15E; color: #FFA15E;
font-size: 21px; font-size: $font-xlarge;
} }
.WeaponResult .stars > span { .WeaponResult .stars > span {

2
components/WeaponUnit/index.scss
View file

@ -37,7 +37,7 @@
.WeaponUnit h3 { .WeaponUnit h3 {
color: #333; color: #333;
font-size: 14px; font-size: $font-regular;
font-weight: 500; font-weight: 500;
margin: 0; margin: 0;
text-align: center; text-align: center;

9
styles/variables.scss
View file

@ -15,8 +15,15 @@ $grey-90: #F5F5F5;
$blue: #61B3FF; $blue: #61B3FF;
$red: #FF6161; $red: #FF6161;
$error: #D13A3A;
// Font weight // Font weight
$normal: 400; $normal: 400;
$medium: 500; $medium: 500;
$bold: 600; $bold: 600;
// Font size
$font-small: 12px;
$font-regular: 14px;
$font-large: 18px;
$font-xlarge: 21px;