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

Use variables for the rem values.

Browse source 
It's become obvious that these random floating points everywhere
are unwieldy. Now they're all in one place with some fairly logical
variable names which will help out in design->implementation phase.
This commit is contained in:
Jorik Schellekens 2020-03-31 15:26:23 +01:00
parent da34e6241d
commit 6cf9166c4a
97 changed files with 280 additions and 227 deletions
Download patch file Download diff file Expand all files Collapse all files

2
res/css/structures/_ContextualMenu.scss
View file

@ -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;
}

2
res/css/structures/_CreateRoom.scss
View file

@ -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;
}

8
res/css/structures/_FilePanel.scss
View file

@ -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;
}
@ -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;
}
@ -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;
}
@ -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;
}

10
res/css/structures/_GroupView.scss
View file

@ -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? */
@ -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;
@ -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;
}
@ -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;
}
@ -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 {

2
res/css/structures/_LeftPanel.scss
View file

@ -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;

8
res/css/structures/_MyGroups.scss
View file

@ -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;
}
@ -149,11 +149,11 @@ 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;
}
@ -161,7 +161,7 @@ limitations under the License.
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
res/css/structures/_NotificationPanel.scss
View file

@ -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 {
@ -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;
}

2
res/css/structures/_RightPanel.scss
View file

@ -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;

10
res/css/structures/_RoomDirectory.scss
View file

@ -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;
@ -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;
}
@ -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;
@ -136,7 +136,7 @@ limitations under the License.
}
.mx_RoomDirectory_alias {
font-size: 0.8rem;
font-size: $font-12px;
color: $settings-grey-fg-color;
}
@ -150,7 +150,7 @@ limitations under the License.
}
.mx_RoomDirectory > span {
font-size: 1rem;
font-size: $font-15px;
margin-top: 0;
.mx_AccessibleButton {

14
res/css/structures/_RoomStatusBar.scss
View file

@ -32,7 +32,7 @@ limitations under the License.
.mx_RoomStatusBar_callBar {
height: 50px;
line-height: 3.333rem;
line-height: $font-50px;
}
.mx_RoomStatusBar_placeholderIndicator span {
@ -94,7 +94,7 @@ limitations under the License.
border-radius: 40px;
width: 24px;
height: 24px;
line-height: 1.600rem;
line-height: $font-24px;
font-size: 0.8em;
vertical-align: top;
text-align: center;
@ -132,7 +132,7 @@ limitations under the License.
.mx_RoomStatusBar_connectionLostBar_desc {
color: $primary-fg-color;
font-size: 0.867rem;
font-size: $font-13px;
opacity: 0.5;
padding-bottom: 20px;
}
@ -145,7 +145,7 @@ limitations under the License.
.mx_RoomStatusBar_typingBar {
height: 50px;
line-height: 3.333rem;
line-height: $font-50px;
color: $primary-fg-color;
opacity: 0.5;
@ -155,7 +155,7 @@ limitations under the License.
.mx_RoomStatusBar_isAlone {
height: 50px;
line-height: 3.333rem;
line-height: $font-50px;
color: $primary-fg-color;
opacity: 0.5;
@ -174,11 +174,11 @@ limitations under the License.
.mx_RoomStatusBar_callBar {
height: 40px;
line-height: 2.667rem;
line-height: $font-40px;
}
.mx_RoomStatusBar_typingBar {
height: 40px;
line-height: 2.667rem;
line-height: $font-40px;
}
}

4
res/css/structures/_RoomSubList.scss
View file

@ -68,7 +68,7 @@ limitations under the License.
text-transform: uppercase;
color: $roomsublist-label-fg-color;
font-weight: 700;
font-size: 0.8rem;
font-size: $font-12px;
margin-left: 8px;
}
@ -76,7 +76,7 @@ limitations under the License.
flex: 0 0 auto;
border-radius: 8px;
font-weight: 600;
font-size: 0.8rem;
font-size: $font-12px;
padding: 0 5px;
color: $roomtile-badge-fg-color;
background-color: $roomtile-name-color;

4
res/css/structures/_RoomView.scss
View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_RoomView_fileDropTarget {
min-width: 0px;
width: 100%;
font-size: 1.2rem;
font-size: $font-18px;
text-align: center;
pointer-events: none;
@ -186,7 +186,7 @@ limitations under the License.
.mx_RoomView_empty {
flex: 1 1 auto;
font-size: 0.867rem;
font-size: $font-13px;
padding-left: 3em;
padding-right: 3em;
margin-right: 20px;

2
res/css/structures/_TabbedView.scss
View file

@ -39,7 +39,7 @@ limitations under the License.
cursor: pointer;
display: block;
border-radius: 3px;
font-size: 0.933rem;
font-size: $font-14px;
min-height: 24px; // use min-height instead of height to allow the label to overflow a bit
margin-bottom: 6px;
position: relative;

4
res/css/structures/_TagPanel.scss
View file

@ -139,7 +139,7 @@ limitations under the License.
background-color: $neutral-badge-color;
color: #ffffff;
font-weight: 600;
font-size: 0.667rem;
font-size: $font-10px;
text-align: center;
padding-top: 1px;
padding-left: 4px;
@ -157,7 +157,7 @@ limitations under the License.
border-radius: 8px;
color: $accent-fg-color;
font-weight: 600;
font-size: 0.933rem;
font-size: $font-14px;
padding: 0 5px;
background-color: $roomtile-name-color;
}

6
res/css/structures/_ToastContainer.scss
View file

@ -77,7 +77,7 @@ limitations under the License.
grid-column: 1 / 3;
grid-row: 1;
margin: 0;
font-size: 1rem;
font-size: $font-15px;
font-weight: 600;
}
@ -96,11 +96,11 @@ limitations under the License.
white-space: nowrap;
text-overflow: ellipsis;
margin: 4px 0 11px 0;
font-size: 0.8rem;
font-size: $font-12px;
}
.mx_Toast_deviceID {
font-size: 0.667rem;
font-size: $font-10px;
}
}
}

2
res/css/structures/_TopLeftMenuButton.scss
View file

@ -32,7 +32,7 @@ limitations under the License.
.mx_TopLeftMenuButton_name {
margin: 0 7px;
font-size: 1.2rem;
font-size: $font-18px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

2
res/css/structures/_ViewSource.scss
View file

@ -29,7 +29,7 @@ limitations under the License.
.mx_ViewSource pre {
text-align: left;
font-size: 0.8rem;
font-size: $font-12px;
padding: 0.5em 1em 0.5em 1em;
word-wrap: break-word;
white-space: pre-wrap;

2
res/css/structures/auth/_CompleteSecurity.scss
View file

@ -34,7 +34,7 @@ limitations under the License.
}
.mx_CompleteSecurity_body {
font-size: 1rem;
font-size: $font-15px;
}
.mx_CompleteSecurity_waiting {