Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

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

Merged
merged 5 commits into from
Apr 2, 2020
Merged

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
da34e62
Make all 'font-size's and 'line-height's rem
JorikSchellekens Mar 30, 2020
6cf9166
Use variables for the rem values.
JorikSchellekens Mar 31, 2020
e2685b1
Licensing info
JorikSchellekens Mar 31, 2020
df1a8b2
Change copyright
JorikSchellekens Apr 2, 2020
202ad9f
Remove sort and include new scss file in components
JorikSchellekens Apr 2, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 10 additions & 8 deletions res/css/_common.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

@import "./_font-sizes.scss";

:root {
font-size: 15px;
}
Expand All @@ -29,7 +31,7 @@ html {

body {
font-family: $font-family;
font-size: 1rem;
font-size: $font-15px;
background-color: $primary-bg-color;
color: $primary-fg-color;
border: 0px;
Expand Down Expand Up @@ -64,7 +66,7 @@ b {
h2 {
color: $primary-fg-color;
font-weight: 400;
font-size: 1.2rem;
font-size: $font-18px;
margin-top: 16px;
margin-bottom: 16px;
}
Expand All @@ -80,7 +82,7 @@ input[type=search],
input[type=password] {
padding: 9px;
font-family: $font-family;
font-size: 0.933rem;
font-size: $font-14px;
font-weight: 600;
min-width: 0;
}
Expand Down Expand Up @@ -257,7 +259,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
color: $light-fg-color;
z-index: 4012;
font-weight: 300;
font-size: 1rem;
font-size: $font-15px;
position: relative;
padding: 25px 30px 30px 30px;
max-height: 80%;
Expand Down Expand Up @@ -325,8 +327,8 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}

.mx_Dialog_title {
font-size: 1.467rem;
line-height: 2.400rem;
font-size: $font-22px;
line-height: $font-36px;
color: $dialog-title-fg-color;
}

Expand Down Expand Up @@ -354,7 +356,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {

.mx_Dialog_content {
margin: 24px 0 68px;
font-size: 0.933rem;
font-size: $font-14px;
color: $primary-fg-color;
word-wrap: break-word;
}
Expand Down Expand Up @@ -450,7 +452,7 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
}

.mx_TextInputDialog_input {
font-size: 1rem;
font-size: $font-15px;
border-radius: 3px;
border: 1px solid $input-border-color;
padding: 9px;
Expand Down
47 changes: 47 additions & 0 deletions res/css/_font-sizes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
$font-8px: 0.533rem;
$font-9px: 0.600rem;
$font-10px: 0.667rem;
$font-10-4px: 0.693rem;
$font-11px: 0.733rem;
$font-12px: 0.800rem;
$font-13px: 0.867rem;
$font-14px: 0.933rem;
$font-15px: 1.000rem;
$font-16px: 1.067rem;
$font-17px: 1.133rem;
$font-18px: 1.200rem;
$font-19px: 1.267rem;
$font-20px: 1.333rem;
$font-21px: 1.400rem;
$font-22px: 1.467rem;
$font-23px: 1.533rem;
$font-24px: 1.600rem;
$font-25px: 1.667rem;
$font-26px: 1.733rem;
$font-27px: 1.800rem;
$font-28px: 1.867rem;
$font-29px: 1.933rem;
$font-30px: 2.000rem;
$font-31px: 2.067rem;
$font-32px: 2.133rem;
$font-33px: 2.200rem;
$font-34px: 2.267rem;
$font-35px: 2.333rem;
$font-36px: 2.400rem;
$font-37px: 2.467rem;
$font-38px: 2.533rem;
$font-39px: 2.600rem;
$font-40px: 2.667rem;
$font-41px: 2.733rem;
$font-42px: 2.800rem;
$font-43px: 2.867rem;
$font-44px: 2.933rem;
$font-45px: 3.000rem;
$font-46px: 3.067rem;
$font-47px: 3.133rem;
$font-48px: 3.200rem;
$font-49px: 3.267rem;
$font-50px: 3.333rem;
$font-51px: 3.400rem;
$font-52px: 3.467rem;
$font-400px: 26.667rem;
2 changes: 1 addition & 1 deletion res/css/rethemendex.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ cd `dirname $0`
# we used to have exclude /themes from the find at this point.
# as themes are no longer a spurious subdirectory of css/, we don't
# need it any more.
find . -iname _\*.scss | fgrep -v _components.scss | LC_ALL=C sort |
find . -iname _\*.scss | sort | fgrep -v _components.scss | LC_ALL=C sort |
JorikSchellekens marked this conversation as resolved.
Show resolved Hide resolved
while read i; do
echo "@import \"$i\";"
done
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_ContextualMenu.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ limitations under the License.
background-color: $menu-bg-color;
color: $primary-fg-color;
position: absolute;
font-size: 0.933rem;
font-size: $font-14px;
z-index: 5001;
}

Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_CreateRoom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ limitations under the License.
border-radius: 3px;
border: 1px solid $strong-input-border-color;
font-weight: 300;
font-size: 0.867rem;
font-size: $font-13px;
padding: 9px;
margin-top: 6px;
}
Expand Down
8 changes: 4 additions & 4 deletions res/css/structures/_FilePanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ limitations under the License.

.mx_FilePanel .mx_EventTile .mx_MFileBody_download {
display: flex;
font-size: 0.933rem;
font-size: $font-14px;
color: $event-timestamp-color;
}

Expand All @@ -60,7 +60,7 @@ limitations under the License.

.mx_FilePanel .mx_EventTile .mx_MImageBody_size {
flex: 1 0 0;
font-size: 0.733rem;
font-size: $font-11px;
text-align: right;
white-space: nowrap;
}
Expand All @@ -80,7 +80,7 @@ limitations under the License.
flex: 1 1 auto;
line-height: initial;
padding: 0px;
font-size: 0.733rem;
font-size: $font-11px;
opacity: 1.0;
color: $event-timestamp-color;
}
Expand All @@ -90,7 +90,7 @@ limitations under the License.
text-align: right;
visibility: visible;
position: initial;
font-size: 0.733rem;
font-size: $font-11px;
opacity: 1.0;
color: $event-timestamp-color;
}
Expand Down
10 changes: 5 additions & 5 deletions res/css/structures/_GroupView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,7 +134,7 @@ limitations under the License.
overflow: hidden;
color: $primary-fg-color;
font-weight: bold;
font-size: 1.467rem;
font-size: $font-22px;
padding-left: 19px;
padding-right: 16px;
/* why isn't text-overflow working? */
Expand All @@ -148,7 +148,7 @@ limitations under the License.
max-height: 42px;
color: $settings-grey-fg-color;
font-weight: 300;
font-size: 0.867rem;
font-size: $font-13px;
padding-left: 19px;
margin-right: 16px;
overflow: hidden;
Expand Down Expand Up @@ -196,7 +196,7 @@ limitations under the License.
text-transform: uppercase;
color: $h3-color;
font-weight: 600;
font-size: 0.867rem;
font-size: $font-13px;
margin-bottom: 10px;
}

Expand Down Expand Up @@ -226,7 +226,7 @@ limitations under the License.
.mx_GroupView_rooms_header_addRow_label {
display: inline-block;
vertical-align: top;
line-height: 1.600rem;
line-height: $font-24px;
padding-left: 28px;
color: $accent-color;
}
Expand Down Expand Up @@ -258,7 +258,7 @@ limitations under the License.

.mx_GroupView_membershipSection_description {
/* To match textButton */
line-height: 2.267rem;
line-height: $font-34px;
}

.mx_GroupView_membershipSection_description .mx_BaseAvatar {
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_LeftPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,7 @@ limitations under the License.
}

.mx_AccessibleButton {
font-size: 0.933rem;
font-size: $font-14px;
margin: 4px 0 1px 9px;
padding: 9px;
padding-left: 42px;
Expand Down
8 changes: 4 additions & 4 deletions res/css/structures/_MyGroups.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,7 +105,7 @@ limitations under the License.
.mx_MyGroups_placeholder {
background-color: $info-plinth-bg-color;
color: $info-plinth-fg-color;
line-height: 26.667rem;
line-height: $font-400px;
border-radius: 10px;
text-align: center;
}
Expand Down Expand Up @@ -149,19 +149,19 @@ limitations under the License.

.mx_GroupTile_profile .mx_GroupTile_name {
margin: 0px;
font-size: 1rem;
font-size: $font-15px;
}

.mx_GroupTile_profile .mx_GroupTile_groupId {
font-size: 0.867rem;
font-size: $font-13px;
opacity: 0.7;
}

.mx_GroupTile_profile .mx_GroupTile_desc {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
font-size: 0.867rem;
font-size: $font-13px;
max-height: 36px;
overflow: hidden;
}
4 changes: 2 additions & 2 deletions res/css/structures/_NotificationPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ limitations under the License.

.mx_NotificationPanel .mx_EventTile_roomName {
font-weight: bold;
font-size: 0.933rem;
font-size: $font-14px;
}

.mx_NotificationPanel .mx_EventTile_roomName a {
Expand All @@ -54,7 +54,7 @@ limitations under the License.
.mx_NotificationPanel .mx_EventTile .mx_SenderProfile,
.mx_NotificationPanel .mx_EventTile .mx_MessageTimestamp {
color: $primary-fg-color;
font-size: 0.8rem;
font-size: $font-12px;
display: inline;
padding-left: 0px;
}
Expand Down
2 changes: 1 addition & 1 deletion res/css/structures/_RightPanel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ limitations under the License.
}

.mx_RightPanel_headerButton_badge {
font-size: 0.533rem;
font-size: $font-8px;
border-radius: 8px;
color: $accent-fg-color;
background-color: $accent-color;
Expand Down
10 changes: 5 additions & 5 deletions res/css/structures/_RoomDirectory.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ limitations under the License.
}

.mx_RoomDirectory_table {
font-size: 0.8rem;
font-size: $font-12px;
color: $primary-fg-color;
width: 100%;
text-align: left;
Expand Down Expand Up @@ -112,7 +112,7 @@ limitations under the License.

.mx_RoomDirectory_name {
display: inline-block;
font-size: 1.2rem;
font-size: $font-18px;
font-weight: 600;
}

Expand All @@ -124,7 +124,7 @@ limitations under the License.
border-radius: 10px;
display: inline-block;
height: 20px;
line-height: 1.333rem;
line-height: $font-20px;
padding: 0 5px;
color: $accent-fg-color;
background-color: $rte-room-pill-color;
Expand All @@ -136,7 +136,7 @@ limitations under the License.
}

.mx_RoomDirectory_alias {
font-size: 0.8rem;
font-size: $font-12px;
color: $settings-grey-fg-color;
}

Expand All @@ -150,7 +150,7 @@ limitations under the License.
}

.mx_RoomDirectory > span {
font-size: 1rem;
font-size: $font-15px;
margin-top: 0;

.mx_AccessibleButton {
Expand Down
Loading