imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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:18:10 +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

8
res/css/views/settings/tabs/_SettingsTab.scss
View file

@ -19,7 +19,7 @@ limitations under the License.
}
.mx_SettingsTab_heading {
font-size: 20px;
font-size: 1.333rem;
font-weight: 600;
color: $primary-fg-color;
}
@ -29,7 +29,7 @@ limitations under the License.
}
.mx_SettingsTab_subheading {
font-size: 16px;
font-size: 1.067rem;
display: block;
font-family: $font-family;
font-weight: 600;
@ -40,7 +40,7 @@ limitations under the License.
.mx_SettingsTab_subsectionText {
color: $settings-subsection-fg-color;
font-size: 14px;
font-size: 0.933rem;
display: block;
margin: 10px 100px 10px 0; // Align with the rest of the view
}
@ -61,7 +61,7 @@ limitations under the License.
.mx_SettingsTab_section .mx_SettingsFlag .mx_SettingsFlag_label {
vertical-align: middle;
display: inline-block;
font-size: 14px;
font-size: 0.933rem;
color: $primary-fg-color;
max-width: calc(100% - 48px); // Force word wrap instead of colliding with the switch
box-sizing: border-box;