Use variables for the rem values.

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

View file

@ -20,7 +20,7 @@ limitations under the License.
flex-direction: column;
flex: 1;
overflow-y: auto;
font-size: 0.8rem;
font-size: $font-12px;
.mx_UserInfo_cancel {
cursor: pointer;
@ -43,7 +43,7 @@ limitations under the License.
}
h2 {
font-size: 1.2rem;
font-size: $font-18px;
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: 3.733rem !important;
font-size: 56px !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: 0.8rem;
font-size: $font-12px;
margin: 4px 0;
}
@ -134,8 +134,8 @@ limitations under the License.
text-align: center;
h2 {
font-size: 1.2rem;
line-height: 1.667rem;
font-size: $font-18px;
line-height: $font-25px;
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: 1.067rem;
line-height: $font-16px;
margin: 8px 0;
&.mx_UserInfo_destructive {
@ -206,7 +206,7 @@ limitations under the License.
}
.mx_UserInfo_statusMessage {
font-size: 0.733rem;
font-size: $font-11px;
opacity: 0.5;
overflow: hidden;
white-space: nowrap;
@ -282,6 +282,6 @@ limitations under the License.
}
.mx_UserInfo_avatar .mx_BaseAvatar_initial {
font-size: 2.667rem !important; // override the other override because here the avatar is smaller
font-size: 40px !important; // override the other override because here the avatar is smaller
}
}

View file

@ -95,7 +95,7 @@ limitations under the License.
}
.mx_VerificationPanel_QRPhase_helpText {
font-size: 0.933rem;
font-size: $font-14px;
margin-top: 71px;
text-align: center;
}