Clean up font-size
We'll have to change this to rems in the future, but at least we're just changing variables
This commit is contained in:
parent
96265c31f0
commit
471b61b2c0
11 changed files with 87 additions and 30 deletions
|
|
@ -19,7 +19,7 @@
|
|||
.CharacterResult h5 {
|
||||
color: #555;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
font-size: $font-large;
|
||||
font-weight: 500;
|
||||
margin: 2px 4px 4px 0;
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
.CharacterResult .stars {
|
||||
display: inline-block;
|
||||
color: #FFA15E;
|
||||
font-size: 21px;
|
||||
font-size: $font-xlarge;
|
||||
}
|
||||
|
||||
.CharacterResult .stars > span {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
|
||||
.CharacterUnit h3 {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-size: $font-regular;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
max-width: 131px;
|
||||
|
|
|
|||
|
|
@ -9,23 +9,73 @@
|
|||
position: absolute;
|
||||
left: 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;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -39,7 +39,7 @@
|
|||
|
||||
.SearchModal #NoResults h2 {
|
||||
color: #ccc;
|
||||
font-size: 18px;
|
||||
font-size: $font-large;
|
||||
font-weight: 500;
|
||||
margin-top: -32px;
|
||||
}
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
#ModalTop h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
font-size: $font-xlarge;
|
||||
text-align: left;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
#ModalBottom a {
|
||||
color: #666;
|
||||
font-size: 13px;
|
||||
font-size: $font-regular;
|
||||
font-weight: 500;
|
||||
flex-grow: 1;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
& .Label {
|
||||
color: $grey-50;
|
||||
font-size: 12px;
|
||||
font-size: $font-small;
|
||||
font-weight: $medium;
|
||||
margin-bottom: $unit;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
.SummonResult h5 {
|
||||
color: #555;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
font-size: $font-large;
|
||||
font-weight: 500;
|
||||
margin: 2px 4px 4px 0;
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
.SummonResult .stars {
|
||||
display: inline-block;
|
||||
color: #FFA15E;
|
||||
font-size: 21px;
|
||||
font-size: $font-xlarge;
|
||||
}
|
||||
|
||||
.SummonResult .stars > span {
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
|
||||
h3 {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-size: $font-regular;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@
|
|||
.WeaponResult h5 {
|
||||
color: #555;
|
||||
display: inline-block;
|
||||
font-size: 18px;
|
||||
font-size: $font-large;
|
||||
font-weight: 500;
|
||||
margin: 2px 4px 4px 0;
|
||||
}
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
.WeaponResult .stars {
|
||||
display: inline-block;
|
||||
color: #FFA15E;
|
||||
font-size: 21px;
|
||||
font-size: $font-xlarge;
|
||||
}
|
||||
|
||||
.WeaponResult .stars > span {
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
.WeaponUnit h3 {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
font-size: $font-regular;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -15,8 +15,15 @@ $grey-90: #F5F5F5;
|
|||
|
||||
$blue: #61B3FF;
|
||||
$red: #FF6161;
|
||||
$error: #D13A3A;
|
||||
|
||||
// Font weight
|
||||
$normal: 400;
|
||||
$medium: 500;
|
||||
$bold: 600;
|
||||
$bold: 600;
|
||||
|
||||
// Font size
|
||||
$font-small: 12px;
|
||||
$font-regular: 14px;
|
||||
$font-large: 18px;
|
||||
$font-xlarge: 21px;
|
||||
Loading…
Reference in a new issue