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

2
res/css/views/elements/_AccessibleButton.scss
View file

@ -27,7 +27,7 @@ limitations under the License.
text-align: center;
border-radius: 4px;
display: inline-block;
font-size: 14px;
font-size: 0.933rem;
}
.mx_AccessibleButton_kind_primary {

4
res/css/views/elements/_AddressTile.scss
View file

@ -19,9 +19,9 @@ limitations under the License.
border-radius: 3px;
background-color: rgba(74, 73, 74, 0.1);
border: solid 1px $input-border-color;
line-height: 26px;
line-height: 1.733rem;
color: $primary-fg-color;
font-size: 14px;
font-size: 0.933rem;
font-weight: normal;
margin-right: 4px;
}

2
res/css/views/elements/_DirectorySearchBox.scss
View file

@ -32,7 +32,7 @@ limitations under the License.
background-repeat: no-repeat;
text-indent: 18px;
font-weight: 600;
font-size: 12px;
font-size: 0.8rem;
user-select: none;
cursor: pointer;
}

4
res/css/views/elements/_Dropdown.scss
View file

@ -29,7 +29,7 @@ limitations under the License.
position: relative;
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-size: 12px;
font-size: 0.8rem;
user-select: none;
}
@ -53,7 +53,7 @@ limitations under the License.
.mx_Dropdown_option {
height: 35px;
line-height: 35px;
line-height: 2.333rem;
padding-left: 8px;
padding-right: 8px;
}

14
res/css/views/elements/_EventListSummary.scss
View file

@ -19,7 +19,7 @@ limitations under the License.
}
.mx_TextualEvent.mx_EventListSummary_summary {
font-size: 14px;
font-size: 0.933rem;
display: inline-flex;
}
@ -27,7 +27,7 @@ limitations under the License.
display: inline-block;
margin-right: 8px;
padding-top: 8px;
line-height: 12px;
line-height: 0.8rem;
}
.mx_EventListSummary_avatars .mx_BaseAvatar {
@ -46,19 +46,19 @@ limitations under the License.
.mx_EventListSummary_line {
border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px;
line-height: 30px;
line-height: 2.000rem;
}
.mx_MatrixChat_useCompactLayout {
.mx_EventListSummary {
font-size: 13px;
font-size: 0.867rem;
.mx_EventTile_line {
line-height: 20px;
line-height: 1.333rem;
}
}
.mx_EventListSummary_line {
line-height: 22px;
line-height: 1.467rem;
}
.mx_EventListSummary_toggle {
@ -66,6 +66,6 @@ limitations under the License.
}
.mx_TextualEvent.mx_EventListSummary_summary {
font-size: 13px;
font-size: 0.867rem;
}
}

6
res/css/views/elements/_Field.scss
View file

@ -40,7 +40,7 @@ limitations under the License.
.mx_Field textarea {
font-weight: normal;
font-family: $font-family;
font-size: 14px;
font-size: 0.933rem;
border: none;
// Even without a border here, we still need this avoid overlapping the rounded
// corners on the field above.
@ -102,7 +102,7 @@ limitations under the License.
background-color 0.25s ease-out 0.1s;
color: $primary-fg-color;
background-color: transparent;
font-size: 14px;
font-size: 0.933rem;
position: absolute;
left: 0px;
top: 0px;
@ -126,7 +126,7 @@ limitations under the License.
color 0.25s ease-out 0s,
top 0.25s ease-out 0s,
background-color 0.25s ease-out 0s;
font-size: 10px;
font-size: 0.667rem;
top: -13px;
padding: 0 2px;
background-color: $field-focused-label-bg-color;

4
res/css/views/elements/_FormButton.scss
View file

@ -15,9 +15,9 @@ limitations under the License.
*/
.mx_FormButton {
line-height: 16px;
line-height: 1.067rem;
padding: 5px 15px;
font-size: 12px;
font-size: 0.8rem;
height: min-content;
&:not(:last-child) {

10
res/css/views/elements/_ImageView.scss
View file

@ -102,13 +102,13 @@ limitations under the License.
}
.mx_ImageView_name {
font-size: 18px;
font-size: 1.2rem;
margin-bottom: 6px;
word-wrap: break-word;
}
.mx_ImageView_metadata {
font-size: 15px;
font-size: 1rem;
opacity: 0.5;
}
@ -118,13 +118,13 @@ limitations under the License.
margin-bottom: 6px;
border-radius: 5px;
background-color: $lightbox-bg-color;
font-size: 14px;
font-size: 0.933rem;
padding: 9px;
border: 1px solid $lightbox-border-color;
}
.mx_ImageView_size {
font-size: 11px;
font-size: 0.733rem;
}
.mx_ImageView_link {
@ -133,7 +133,7 @@ limitations under the License.
}
.mx_ImageView_button {
font-size: 15px;
font-size: 1rem;
opacity: 0.5;
margin-top: 18px;
cursor: pointer;

2
res/css/views/elements/_InteractiveTooltip.scss
View file

@ -24,7 +24,7 @@ limitations under the License.
background-color: $interactive-tooltip-bg-color;
color: $interactive-tooltip-fg-color;
position: absolute;
font-size: 10px;
font-size: 0.667rem;
font-weight: 600;
padding: 6px;
z-index: 5001;

2
res/css/views/elements/_RichText.scss
View file

@ -9,7 +9,7 @@
border-radius: 16px;
display: inline-block;
height: 20px;
line-height: 20px;
line-height: 1.333rem;
padding-left: 5px;
}

6
res/css/views/elements/_Tooltip.scss
View file

@ -58,8 +58,8 @@ limitations under the License.
z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
padding: 10px;
pointer-events: none;
line-height: 14px;
font-size: 12px;
line-height: 0.933rem;
font-size: 0.8rem;
font-weight: 600;
color: $primary-fg-color;
max-width: 200px;
@ -82,7 +82,7 @@ limitations under the License.
text-align: center;
border: none;
border-radius: 3px;
font-size: 14px;
font-size: 0.933rem;
line-height: 1.2;
padding: 6px 8px;

4
res/css/views/elements/_TooltipButton.scss
View file

@ -28,7 +28,7 @@ limitations under the License.
transition: opacity 0.2s ease-in;
opacity: 0.6;
line-height: 11px;
line-height: 0.733rem;
text-align: center;
cursor: pointer;
@ -47,6 +47,6 @@ limitations under the License.
.mx_TooltipButton_helpText {
width: 400px;
text-align: start;
line-height: 17px !important;
line-height: 1.133rem !important;
}