sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Make all 'font-size's and 'line-height's rem

Browse Source 
Font size of the whole app would ideally be controlled by a single
value. This value is currently hard coded using the :root CSS selector.
It is the intention to make this value configurable within riot. In the
interim all font-sizes have been converted to rem by the simple process
of regex. Replacing px values with their equivalent rem values assuming
a font size of 15px and then rounded to three decimal places, which was
the base at the time of this transformation.

I'm expecting another commit cleaning up rem values but I thought it
best to leave that to review.

This commit doesn't address any scaling issues. I thought it better to
land this unwieldy, mechanical, invisible change before the others
otherwise the pr would be impossible to review thoroughly.
This commit is contained in:
Jorik Schellekens
2020-03-30 18:23:46 +01:00
parent cf4f595f79
commit da34e6241d
91 changed files with 230 additions and 226 deletions
Download Patch File Download Diff File Expand all files Collapse all files
res/css/views/right_panel/_UserInfo.scss
+9 -9
View File
@@ -20,7 +20,7 @@ limitations under the License.
flex-direction: column;
flex: 1;
overflow-y: auto;
font-size: 12px;
font-size: 0.8rem;
.mx_UserInfo_cancel {
cursor: pointer;
@@ -43,7 +43,7 @@ limitations under the License.
}
h2 {
font-size: 18px;
font-size: 1.2rem;
font-weight: 600;
margin: 18px 0 0 0;
}
@@ -109,7 +109,7 @@ limitations under the License.
justify-content: center;
// override the calculated sizes so that the letter isn't HUGE
font-size: 56px !important;
font-size: 3.733rem !important;
width: 100% !important;
transition: font-size 0.5s;
}
@@ -122,7 +122,7 @@ limitations under the License.
text-transform: uppercase;
color: $notice-secondary-color;
font-weight: bold;
font-size: 12px;
font-size: 0.8rem;
margin: 4px 0;
}
@@ -134,8 +134,8 @@ limitations under the License.
text-align: center;
h2 {
font-size: 18px;
line-height: 25px;
font-size: 1.2rem;
line-height: 1.667rem;
flex: 1;
justify-content: center;
align-items: center;
@@ -197,7 +197,7 @@ limitations under the License.
.mx_UserInfo_field {
cursor: pointer;
color: $accent-color;
line-height: 16px;
line-height: 1.067rem;
margin: 8px 0;
&.mx_UserInfo_destructive {
@@ -206,7 +206,7 @@ limitations under the License.
}
.mx_UserInfo_statusMessage {
font-size: 11px;
font-size: 0.733rem;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
@@ -282,6 +282,6 @@ limitations under the License.
}
.mx_UserInfo_avatar .mx_BaseAvatar_initial {
font-size: 40px !important; // override the other override because here the avatar is smaller
font-size: 2.667rem !important; // override the other override because here the avatar is smaller
}
}
res/css/views/right_panel/_VerificationPanel.scss
+1 -1
View File
@@ -95,7 +95,7 @@ limitations under the License.
}
.mx_VerificationPanel_QRPhase_helpText {
font-size: 14px;
font-size: 0.933rem;
margin-top: 71px;
text-align: center;
}