sorb/ThreadNet-Web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 4 Wiki Activity

Replace legacy $spacing-X vars with Compound Design Tokens (#34380)

Browse Source 
* Replace legacy `$spacing-X` vars with Compound Design Tokens

* Remove unused font size vars

* Use calc to get negative spacing vars
This commit is contained in:
Michael Telatynski
2026-07-22 10:10:57 +00:00
committed by GitHub
parent ef8cfda6fe
commit 49a2bdd7e4
87 changed files with 343 additions and 380 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/res/css/_common.pcss
+4 -5
View File
@@ -11,15 +11,14 @@ Please see LICENSE files in the repository root for full details.
@import "./_font-sizes.pcss";
@import "./_animations.pcss";
@import "./_spacing.pcss";
:root {
--container-border-width: 8px;
--container-gap-width: 8px; /* only even numbers should be used because otherwise we get 0.5px margin values. */
--transition-short: 0.1s;
--transition-standard: 0.3s;
--buttons-dialog-gap-row: $spacing-8;
--buttons-dialog-gap-column: $spacing-8;
--buttons-dialog-gap-row: var(--cpd-space-2x);
--buttons-dialog-gap-column: var(--cpd-space-2x);
--MBody-border-radius: 8px;
--EventTileBubble_margin-block: 10px;
--MessageTimestamp-width: 46px; /* 8 + 30 (avatar) + 8 */
@@ -532,7 +531,7 @@ legend {
}
.mx_Dialog_buttons {
margin-top: $spacing-20;
margin-top: var(--cpd-space-5x);
margin-inline-start: auto;
text-align: right;
@@ -872,7 +871,7 @@ legend {
font-weight: var(--cpd-font-weight-semibold);
white-space: nowrap;
position: relative;
padding: 0 $spacing-12 0 $spacing-8;
padding: 0 var(--cpd-space-3x) 0 var(--cpd-space-2x);
}
@define-mixin ThreadSummaryIcon {
apps/web/res/css/_components.pcss
-1
View File
@@ -2,7 +2,6 @@
@import "./_animations.pcss";
@import "./_common.pcss";
@import "./_font-sizes.pcss";
@import "./_spacing.pcss";
@import "./components/views/beacon/_BeaconListItem.pcss";
@import "./components/views/beacon/_BeaconStatus.pcss";
@import "./components/views/beacon/_BeaconStatusTooltip.pcss";
apps/web/res/css/_font-sizes.pcss
-4
View File
@@ -24,7 +24,6 @@ Please see LICENSE files in the repository root for full details.
*/
$font-1px: 0.0625rem;
$font-8px: 0.5rem;
$font-9px: 0.5625rem;
$font-10px: 0.625rem;
$font-10-4px: 0.6275rem;
$font-11px: 0.6875rem; /* Compound equivalent: --cpd-font-size-body-xs */
@@ -37,17 +36,14 @@ $font-17px: 1.0625rem; /* Compound equivalent: --cpd-font-size-body-lg */
$font-18px: 1.125rem;
$font-20px: 1.25rem; /* Compound equivalent: --cpd-font-size-heading-sm */
$font-22px: 1.375rem;
$font-23px: 1.4375rem;
$font-24px: 1.5rem; /* Compound equivalent: --cpd-font-size-heading-md */
$font-25px: 1.5625rem;
$font-26px: 1.625rem;
$font-28px: 1.75rem; /* Compound equivalent: --cpd-font-size-heading-lg */
$font-29px: 1.8125rem;
$font-30px: 1.875rem;
$font-32px: 2rem; /* Compound equivalent: --cpd-font-size-heading-xl */
$font-34px: 2.125rem;
$font-35px: 2.1875rem;
$font-39px: 2.4375rem;
$font-42px: 2.625rem;
$font-44px: 2.75rem;
$font-48px: 3rem;
apps/web/res/css/_spacing.pcss
-30
View File
@@ -1,30 +0,0 @@
/*
Copyright 2024 New Vector Ltd.
Copyright 2022 The Matrix.org Foundation C.I.C.
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
Please see LICENSE files in the repository root for full details.
*/
/* SCSS variables representing a range of standard lengths.
*
* Avoid using these in new code: we cannot adjust their values without causing massive confusion, so they are
* effectively equivalent to using hardcoded values.
*
* In future, we plan to introduce variables named according to their purpose rather than their size. Additionally,
* we want switch to custom CSS properties (https://github.com/vector-im/element-web/issues/21656), so we might have
* `--spacing-standard` or something. For now, you might as well use hardcoded px values for lengths (except for font
* sizes, for which see the `$font-<N>px` variables).
*/
$spacing-2: 2px;
$spacing-4: 4px;
$spacing-8: 8px;
$spacing-12: 12px;
$spacing-16: 16px;
$spacing-20: 20px;
$spacing-24: 24px;
$spacing-28: 28px;
$spacing-32: 32px;
$spacing-40: 40px;
$spacing-48: 48px;
$spacing-64: 64px;
apps/web/res/css/components/views/beacon/_BeaconListItem.pcss
+3 -3
View File
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: row;
align-items: flex-start;
padding: $spacing-12 0;
padding: var(--cpd-space-3x) 0;
border-bottom: 1px solid $system;
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
flex: 0 0;
box-sizing: border-box;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
border: 2px solid $location-live-color;
border-radius: 50%;
}
@@ -44,7 +44,7 @@ Please see LICENSE files in the repository root for full details.
.mx_BeaconListItem_status {
/* override beacon status padding */
padding: 0 !important;
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
.mx_BeaconStatus_label {
font-weight: var(--cpd-font-weight-semibold);
apps/web/res/css/components/views/beacon/_BeaconStatus.pcss
+3 -3
View File
@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
justify-content: flex-start;
box-sizing: border-box;
padding: $spacing-8;
padding: var(--cpd-space-2x);
color: var(--color);
font-size: $font-12px;
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
width: 32px;
flex: 0 0 32px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
}
.mx_BeaconStatus_description {
@@ -43,7 +43,7 @@ Please see LICENSE files in the repository root for full details.
flex-direction: column;
line-height: $font-14px;
padding-right: $spacing-8;
padding-right: var(--cpd-space-2x);
white-space: nowrap;
overflow: hidden;
apps/web/res/css/components/views/beacon/_BeaconStatusTooltip.pcss
+1 -1
View File
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
max-width: 150px;
height: 38px;
box-sizing: content-box;
padding-top: $spacing-8;
padding-top: var(--cpd-space-2x);
}
.mx_BeaconStatusTooltip_inner {
apps/web/res/css/components/views/beacon/_BeaconViewDialog.pcss
+3 -3
View File
@@ -53,11 +53,11 @@ Please see LICENSE files in the repository root for full details.
.mx_BeaconViewDialog_mapFallbackMessage {
color: $secondary-content;
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
}
.mx_BeaconViewDialog_viewListButton {
position: absolute;
top: $spacing-24;
left: $spacing-24;
top: var(--cpd-space-6x);
left: var(--cpd-space-6x);
}
apps/web/res/css/components/views/beacon/_DialogOwnBeaconStatus.pcss
+4 -4
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_DialogOwnBeaconStatus {
position: absolute;
bottom: $spacing-32;
bottom: var(--cpd-space-8x);
width: 300px;
margin-left: -150px;
left: 50%;
@@ -23,14 +23,14 @@ Please see LICENSE files in the repository root for full details.
border-radius: 8px;
box-shadow: 4px 4px 12px 0 $menu-box-shadow-color;
padding: 0 $spacing-12;
padding: 0 var(--cpd-space-3x);
}
.mx_DialogOwnBeaconStatus_avatarIcon {
flex: 0 0;
height: 32px;
width: 32px;
margin: $spacing-8 0 $spacing-8 0;
margin: var(--cpd-space-2x) 0 var(--cpd-space-2x) 0;
}
.mx_DialogOwnBeaconStatus_avatar {
@@ -39,7 +39,7 @@ Please see LICENSE files in the repository root for full details.
border: 2px solid $location-live-color;
border-radius: 50%;
margin: $spacing-8 0 $spacing-8 0;
margin: var(--cpd-space-2x) 0 var(--cpd-space-2x) 0;
}
.mx_DialogOwnBeaconStatus_status {
apps/web/res/css/components/views/beacon/_DialogSidebar.pcss
+2 -2
View File
@@ -17,7 +17,7 @@ Please see LICENSE files in the repository root for full details.
flex-direction: column;
box-sizing: border-box;
padding: $spacing-16;
padding: var(--cpd-space-4x);
background-color: $background;
box-shadow: 0px 4px 4px $menu-box-shadow-color;
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
justify-content: space-between;
flex: 0 0;
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
color: $primary-content;
apps/web/res/css/components/views/beacon/_LeftPanelLiveShareWarning.pcss
+1 -1
View File
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
width: 100%;
box-sizing: border-box;
padding: $spacing-4;
padding: var(--cpd-space-1x);
text-align: center;
background-color: $accent;
apps/web/res/css/components/views/beacon/_OwnBeaconStatus.pcss
+1 -1
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_OwnBeaconStatus_button {
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
}
.mx_EventTile[data-layout="bubble"] .mx_OwnBeaconStatus_button {
apps/web/res/css/components/views/beacon/_ShareLatestLocation.pcss
+1 -1
View File
@@ -17,7 +17,7 @@ Please see LICENSE files in the repository root for full details.
/* override copyable text style to make compact */
.mx_CopyableText_copyButton {
height: 13px;
margin-left: $spacing-8 !important;
margin-left: var(--cpd-space-2x) !important;
position: relative;
top: -1px;
width: 13px;
apps/web/res/css/components/views/dialogs/polls/_PollDetailHeader.pcss
+1 -1
View File
@@ -14,6 +14,6 @@ Please see LICENSE files in the repository root for full details.
.mx_PollDetailHeader_icon {
height: 16px;
width: 16px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
vertical-align: middle;
}
apps/web/res/css/components/views/dialogs/polls/_PollListItem.pcss
+2 -2
View File
@@ -15,7 +15,7 @@ Please see LICENSE files in the repository root for full details.
display: grid;
justify-content: left;
align-items: center;
gap: $spacing-8;
gap: var(--cpd-space-2x);
grid-template-columns: auto auto auto;
grid-template-rows: auto;
cursor: pointer;
@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
height: 14px;
width: 14px;
color: $quaternary-content;
padding-left: $spacing-8;
padding-left: var(--cpd-space-2x);
}
.mx_PollListItem_question {
apps/web/res/css/components/views/dialogs/polls/_PollListItemEnded.pcss
+5 -5
View File
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
display: grid;
justify-content: left;
align-items: center;
gap: $spacing-8;
gap: var(--cpd-space-2x);
grid-template-columns: min-content 1fr min-content;
grid-template-rows: auto;
}
@@ -31,7 +31,7 @@ Please see LICENSE files in the repository root for full details.
height: 14px;
width: 14px;
color: $quaternary-content;
padding-left: $spacing-8;
padding-left: var(--cpd-space-2x);
}
.mx_PollListItemEnded_date {
@@ -47,11 +47,11 @@ Please see LICENSE files in the repository root for full details.
.mx_PollListItemEnded_answers {
display: grid;
gap: $spacing-8;
margin-top: $spacing-12;
gap: var(--cpd-space-2x);
margin-top: var(--cpd-space-3x);
}
.mx_PollListItemEnded_voteCount {
/* 6px to match PollOption padding */
margin: $spacing-8 0 0 6px;
margin: var(--cpd-space-2x) 0 0 6px;
}
apps/web/res/css/components/views/elements/_FilterDropdown.pcss
+6 -6
View File
@@ -8,11 +8,11 @@ Please see LICENSE files in the repository root for full details.
.mx_FilterDropdown {
.mx_Dropdown_menu {
margin-top: $spacing-4;
margin-top: var(--cpd-space-1x);
left: unset;
right: -$spacing-12;
right: calc(-1 * var(--cpd-space-3x));
width: 232px;
padding: $spacing-12;
padding: var(--cpd-space-3x);
border: 1px solid $quinary-content;
border-radius: 8px;
@@ -48,7 +48,7 @@ Please see LICENSE files in the repository root for full details.
position: relative;
width: 100%;
box-sizing: border-box;
padding: $spacing-8 0 $spacing-8 $spacing-20;
padding: var(--cpd-space-2x) 0 var(--cpd-space-2x) var(--cpd-space-5x);
font-size: $font-12px;
line-height: $font-15px;
@@ -59,7 +59,7 @@ Please see LICENSE files in the repository root for full details.
height: 14px;
width: 14px;
position: absolute;
top: $spacing-8;
top: var(--cpd-space-2x);
left: 0;
}
@@ -70,5 +70,5 @@ Please see LICENSE files in the repository root for full details.
.mx_FilterDropdown_optionDescription {
color: $secondary-content;
margin-top: $spacing-4;
margin-top: var(--cpd-space-1x);
}
apps/web/res/css/components/views/elements/_FilterTabGroup.pcss
+1 -1
View File
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
.mx_FilterTabGroup {
color: $primary-content;
label {
margin-right: $spacing-12;
margin-right: var(--cpd-space-3x);
cursor: pointer;
span {
display: inline-block;
apps/web/res/css/components/views/elements/_LearnMore.pcss
+1 -1
View File
@@ -7,5 +7,5 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_LearnMore_button {
margin-left: $spacing-4;
margin-left: var(--cpd-space-1x);
}
apps/web/res/css/components/views/location/_EnableLiveShare.pcss
+5 -5
View File
@@ -13,13 +13,13 @@ Please see LICENSE files in the repository root for full details.
justify-content: flex-end;
align-items: center;
padding: $spacing-32 $spacing-16;
padding: var(--cpd-space-8x) var(--cpd-space-4x);
text-align: center;
box-sizing: border-box;
}
.mx_EnableLiveShare_heading {
padding-top: $spacing-24;
padding-top: var(--cpd-space-6x);
}
.mx_EnableLiveShare_icon {
@@ -28,13 +28,13 @@ Please see LICENSE files in the repository root for full details.
}
.mx_EnableLiveShare_description {
padding: 0 $spacing-24;
margin-bottom: $spacing-32;
padding: 0 var(--cpd-space-6x);
margin-bottom: var(--cpd-space-8x);
line-height: $font-20px;
}
.mx_EnableLiveShare_button {
margin-top: $spacing-32;
margin-top: var(--cpd-space-8x);
height: 48px;
width: 100%;
}
apps/web/res/css/components/views/location/_LiveDurationDropdown.pcss
+1 -1
View File
@@ -7,5 +7,5 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_LiveDurationDropdown {
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
}
apps/web/res/css/components/views/location/_MapError.pcss
+5 -5
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_MapError {
padding: 100px $spacing-32 0;
padding: 100px var(--cpd-space-8x) 0;
text-align: center;
--mx-map-error-icon-color: $secondary-content;
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
justify-content: center;
align-items: center;
padding: $spacing-24;
padding: var(--cpd-space-6x);
background-color: $panels;
font-size: $font-12px;
line-height: $font-16px;
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MapError_heading {
padding-top: $spacing-8;
padding-top: var(--cpd-space-2x);
/* override h3 heading size */
font-size: inherit !important;
font-weight: normal !important;
@@ -44,11 +44,11 @@ Please see LICENSE files in the repository root for full details.
}
.mx_MapError_message {
margin: $spacing-16 0 $spacing-32;
margin: var(--cpd-space-4x) 0 var(--cpd-space-8x);
}
.mx_MapError_heading {
padding-top: $spacing-24;
padding-top: var(--cpd-space-6x);
}
.mx_MapError_icon {
apps/web/res/css/components/views/location/_MapFallback.pcss
+1 -1
View File
@@ -32,6 +32,6 @@ Please see LICENSE files in the repository root for full details.
.mx_MapFallback_icon {
width: 65px;
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
color: $quaternary-content;
}
apps/web/res/css/components/views/location/_ShareDialogButtons.pcss
+3 -3
View File
@@ -22,7 +22,7 @@ button.mx_ShareDialogButtons_button {
text-align: center;
color: $secondary-content;
position: absolute;
top: $spacing-16;
top: var(--cpd-space-4x);
&:hover,
&:focus {
@@ -30,11 +30,11 @@ button.mx_ShareDialogButtons_button {
}
&.left {
left: $spacing-16;
left: var(--cpd-space-4x);
}
&.right {
right: $spacing-16;
right: var(--cpd-space-4x);
}
}
apps/web/res/css/components/views/location/_ShareType.pcss
+7 -7
View File
@@ -13,22 +13,22 @@ Please see LICENSE files in the repository root for full details.
justify-content: flex-start;
align-items: center;
padding: 60px $spacing-12 $spacing-32;
padding: 60px var(--cpd-space-3x) var(--cpd-space-8x);
color: $primary-content;
.mx_ShareType_wrapper_options {
display: flex;
flex-direction: column;
row-gap: $spacing-12;
row-gap: var(--cpd-space-3x);
width: 100%;
margin-top: $spacing-12;
margin-top: var(--cpd-space-3x);
.mx_ShareType_option {
display: flex;
align-items: center;
justify-content: flex-start;
padding: $spacing-8 $spacing-20;
padding: var(--cpd-space-2x) var(--cpd-space-5x);
background: none;
border: 1px solid $quinary-content;
@@ -50,7 +50,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ShareType_badge {
height: 60px;
width: 60px;
margin-bottom: $spacing-20;
margin-bottom: var(--cpd-space-5x);
background-color: $accent;
border-radius: 50%;
border: 14px solid $accent;
@@ -60,7 +60,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_ShareType_heading {
padding-bottom: $spacing-32;
padding-bottom: var(--cpd-space-8x);
text-align: center;
}
@@ -68,7 +68,7 @@ Please see LICENSE files in the repository root for full details.
height: 40px;
width: 40px;
box-sizing: border-box;
margin-right: $spacing-12;
margin-right: var(--cpd-space-3x);
flex: 0 0 40px;
border-width: 2px;
border-style: solid;
apps/web/res/css/components/views/location/_ZoomButtons.pcss
+3 -3
View File
@@ -8,11 +8,11 @@ Please see LICENSE files in the repository root for full details.
.mx_ZoomButtons {
position: absolute;
bottom: $spacing-32;
right: $spacing-24;
bottom: var(--cpd-space-8x);
right: var(--cpd-space-6x);
display: flex;
flex-direction: column;
row-gap: $spacing-8;
row-gap: var(--cpd-space-2x);
.mx_ZoomButtons_button {
$ZoomButtons_button-size: 24px;
apps/web/res/css/components/views/messages/_MBeaconBody.pcss
+2 -2
View File
@@ -32,8 +32,8 @@ Please see LICENSE files in the repository root for full details.
.mx_MBeaconBody_withoutMapInfoLastUpdated {
/* 48px lines up with icon in BeaconStatus */
margin-top: -$spacing-8;
padding: 0 $spacing-8 $spacing-8 48px;
margin-top: calc(-1 * var(--cpd-space-2x));
padding: 0 var(--cpd-space-2x) var(--cpd-space-2x) 48px;
color: $tertiary-content;
font-size: $font-10px;
apps/web/res/css/components/views/messages/shared/_MediaProcessingError.pcss
+1 -1
View File
@@ -7,6 +7,6 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_MediaProcessingError_Icon {
margin-right: $spacing-4;
margin-right: var(--cpd-space-1x);
vertical-align: text-top;
}
apps/web/res/css/components/views/polls/_PollOption.pcss
+2 -2
View File
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
height: 12px;
width: 12px;
color: var(--cpd-color-icon-accent-tertiary);
margin-right: $spacing-4;
margin-right: var(--cpd-space-1x);
vertical-align: middle;
}
@@ -105,7 +105,7 @@ Please see LICENSE files in the repository root for full details.
margin-right: 12px;
border-radius: 8px;
background-color: $system;
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
.mx_PollOption_popularityAmount {
width: 0%;
apps/web/res/css/components/views/settings/devices/_DeviceDetailHeading.pcss
+4 -4
View File
@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
.mx_DeviceDetailHeading_renameForm {
display: grid;
gap: $spacing-16;
gap: var(--cpd-space-4x);
justify-content: left;
grid-template-columns: 100%;
}
@@ -27,7 +27,7 @@ Please see LICENSE files in the repository root for full details.
.mx_DeviceDetailHeading_renameFormButtons {
display: flex;
flex-direction: row;
gap: $spacing-8;
gap: var(--cpd-space-2x);
.mx_Spinner {
width: auto;
@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
.mx_DeviceDetailHeading_renameFormInput {
/* override field styles */
margin: 0 0 $spacing-4 0 !important;
margin: 0 0 var(--cpd-space-1x) 0 !important;
}
.mx_DeviceDetailHeading_renameFormHeading {
@@ -46,6 +46,6 @@ Please see LICENSE files in the repository root for full details.
.mx_DeviceDetailHeading_renameFormError {
color: $alert;
padding-right: $spacing-4;
padding-right: var(--cpd-space-1x);
display: block;
}
apps/web/res/css/components/views/settings/devices/_DeviceDetails.pcss
+8 -8
View File
@@ -11,19 +11,19 @@ Please see LICENSE files in the repository root for full details.
flex-direction: column;
box-sizing: border-box;
margin-top: $spacing-16;
padding: $spacing-24;
margin-top: var(--cpd-space-4x);
padding: var(--cpd-space-6x);
border-radius: 8px;
border: 1px solid $quinary-content;
}
.mx_DeviceDetails_section {
padding-bottom: $spacing-20;
margin-bottom: $spacing-20;
padding-bottom: var(--cpd-space-5x);
margin-bottom: var(--cpd-space-5x);
border-bottom: 1px solid $quinary-content;
display: grid;
gap: $spacing-24;
gap: var(--cpd-space-6x);
justify-content: left;
grid-template-columns: 100%;
@@ -42,7 +42,7 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-12px;
color: $secondary-content;
line-height: $font-14px;
margin-top: $spacing-4;
margin-top: var(--cpd-space-1x);
}
}
@@ -61,7 +61,7 @@ Please see LICENSE files in the repository root for full details.
}
td {
padding-top: $spacing-8;
padding-top: var(--cpd-space-2x);
}
.mxDeviceDetails_metadataLabel {
@@ -77,7 +77,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: row;
align-items: center;
gap: $spacing-4;
gap: var(--cpd-space-1x);
}
.mx_DeviceDetails_pushNotifications {
apps/web/res/css/components/views/settings/devices/_DeviceSecurityCard.pcss
+4 -4
View File
@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
align-items: flex-start;
box-sizing: border-box;
padding: $spacing-16;
padding: var(--cpd-space-4x);
border: 1px solid $quinary-content;
border-radius: 8px;
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
align-items: center;
justify-content: center;
margin-right: $spacing-16;
margin-right: var(--cpd-space-4x);
border-radius: 8px;
height: 40px;
@@ -53,7 +53,7 @@ Please see LICENSE files in the repository root for full details.
flex: 1 1;
}
.mx_DeviceSecurityCard_heading {
margin: 0 0 $spacing-4 0;
margin: 0 0 var(--cpd-space-1x) 0;
}
.mx_DeviceSecurityCard_description {
margin: 0;
@@ -62,5 +62,5 @@ Please see LICENSE files in the repository root for full details.
}
.mx_DeviceSecurityCard_actions {
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
}
apps/web/res/css/components/views/settings/devices/_DeviceTile.pcss
+4 -4
View File
@@ -22,20 +22,20 @@ Please see LICENSE files in the repository root for full details.
}
.mx_DeviceTile_metadata {
margin-top: $spacing-4;
margin-top: var(--cpd-space-1x);
font: var(--cpd-font-body-sm-regular);
color: $secondary-content;
}
.mx_DeviceTile_inactiveIcon {
height: 14px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
vertical-align: middle;
}
.mx_DeviceTile_actions {
display: grid;
gap: $spacing-8;
gap: var(--cpd-space-2x);
grid-auto-flow: column;
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
}
apps/web/res/css/components/views/settings/devices/_DeviceTypeIcon.pcss
+4 -4
View File
@@ -9,9 +9,9 @@ Please see LICENSE files in the repository root for full details.
.mx_DeviceTypeIcon {
flex: 0 0 auto;
position: relative;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
/* creates space for verification icon to overlap */
padding: 0 $spacing-8 $spacing-8 0;
padding: 0 var(--cpd-space-2x) var(--cpd-space-2x) 0;
}
.mx_DeviceTypeIcon_deviceIconWrapper {
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
width: 40px;
box-sizing: border-box;
border: $spacing-8 solid var(--background-color);
border: var(--cpd-space-2x) solid var(--background-color);
border-radius: 50%;
color: var(--icon-color);
background-color: var(--background-color);
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
height: 24px;
width: 24px;
box-sizing: border-box;
padding: $spacing-4;
padding: var(--cpd-space-1x);
border: 1px solid $quinary-content;
border-radius: 50%;
apps/web/res/css/components/views/settings/devices/_FilteredDeviceList.pcss
+5 -5
View File
@@ -15,9 +15,9 @@ Please see LICENSE files in the repository root for full details.
.mx_FilteredDeviceList_list {
list-style-type: none;
display: grid;
gap: $spacing-16;
gap: var(--cpd-space-4x);
margin: 0;
padding: 0 $spacing-16;
padding: 0 var(--cpd-space-4x);
}
.mx_FilteredDeviceList_listItem {
@@ -26,13 +26,13 @@ Please see LICENSE files in the repository root for full details.
}
.mx_FilteredDeviceList_securityCard {
margin-bottom: $spacing-32;
margin-bottom: var(--cpd-space-8x);
}
.mx_FilteredDeviceList_noResults {
width: 100%;
text-align: center;
margin-bottom: $spacing-32;
margin-bottom: var(--cpd-space-8x);
}
.mx_FilteredDeviceList_headerButton {
@@ -40,7 +40,7 @@ Please see LICENSE files in the repository root for full details.
/* override inline button styling */
display: flex !important;
flex-direction: row;
gap: $spacing-8;
gap: var(--cpd-space-2x);
}
.mx_FilteredDeviceList_deviceDetails {
apps/web/res/css/components/views/settings/devices/_FilteredDeviceListHeader.pcss
+3 -3
View File
@@ -11,12 +11,12 @@ Please see LICENSE files in the repository root for full details.
flex-direction: row;
align-items: center;
box-sizing: border-box;
gap: $spacing-16;
gap: var(--cpd-space-4x);
width: 100%;
height: 48px;
padding: 0 $spacing-16;
margin-bottom: $spacing-32;
padding: 0 var(--cpd-space-4x);
margin-bottom: var(--cpd-space-8x);
background-color: $panels;
border-radius: 8px;
apps/web/res/css/components/views/settings/devices/_SecurityRecommendations.pcss
+1 -1
View File
@@ -7,5 +7,5 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_SecurityRecommendations_spacing {
height: $spacing-16;
height: var(--cpd-space-4x);
}
apps/web/res/css/components/views/settings/shared/_SettingsSubsection.pcss
+3 -3
View File
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SettingsSubsection_description {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
}
.mx_SettingsSubsection_text {
@@ -44,14 +44,14 @@ Please see LICENSE files in the repository root for full details.
/* setting minwidth 0 makes columns definitely sized fixing horizontal overflow */
grid-template-columns: minmax(0, 1fr);
justify-items: flex-start;
margin-top: $spacing-24;
margin-top: var(--cpd-space-6x);
summary {
color: $accent;
}
details[open] {
summary {
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
}
apps/web/res/css/components/views/settings/shared/_SettingsSubsectionHeading.pcss
+1 -1
View File
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: row;
gap: $spacing-8;
gap: var(--cpd-space-2x);
}
.mx_SettingsSubsectionHeading_heading {
apps/web/res/css/compound/_SuccessDialog.pcss
+3 -3
View File
@@ -10,11 +10,11 @@ Please see LICENSE files in the repository root for full details.
text-align: center;
.mx_Icon {
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
}
.mx_Dialog_header {
margin: 0 0 $spacing-16;
margin: 0 0 var(--cpd-space-4x);
padding: 0;
}
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
.mx_Dialog_content {
color: $secondary-content;
margin: 0 0 $spacing-40;
margin: 0 0 var(--cpd-space-10x);
}
.mx_Dialog_buttons {
apps/web/res/css/structures/_AutocompleteInput.pcss
+7 -7
View File
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AutocompleteInput_search_icon {
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
fill: $secondary-content;
}
@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
resize: none;
/* `!important` is required to bypass global input styles. */
margin: 0 !important;
padding: $spacing-8 9px;
padding: var(--cpd-space-2x) 9px;
border: none !important;
color: $primary-content !important;
font-weight: normal !important;
@@ -55,15 +55,15 @@ Please see LICENSE files in the repository root for full details.
.mx_AutocompleteInput_editor_selection {
display: flex;
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
}
.mx_AutocompleteInput_editor_selection_pill {
display: flex;
align-items: center;
border-radius: 12px;
padding-left: $spacing-8;
padding-right: $spacing-8;
padding-left: var(--cpd-space-2x);
padding-right: var(--cpd-space-2x);
background-color: $username-variant1-color;
color: #ffffff;
font-size: $font-12px;
@@ -88,7 +88,7 @@ Please see LICENSE files in the repository root for full details.
.mx_AutocompleteInput_suggestion {
display: flex;
align-items: center;
padding: $spacing-8;
padding: var(--cpd-space-2x);
cursor: pointer;
> * {
@@ -112,7 +112,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AutocompleteInput_suggestion_title {
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
}
.mx_AutocompleteInput_suggestion_description {
apps/web/res/css/structures/_ErrorMessage.pcss
+1 -1
View File
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
color: $alert;
display: flex;
font-size: $font-12px;
gap: $spacing-8;
gap: var(--cpd-space-2x);
line-height: 1.2em;
min-height: 2.4em;
}
apps/web/res/css/structures/_ViewSource.pcss
+4 -4
View File
@@ -17,8 +17,8 @@ Please see LICENSE files in the repository root for full details.
.mx_ViewSource_header {
border-bottom: 1px solid $quinary-content;
padding-bottom: $spacing-12;
margin-bottom: $spacing-12;
padding-bottom: var(--cpd-space-3x);
margin-bottom: var(--cpd-space-3x);
font-family: monospace;
.mx_CopyableText {
@@ -30,11 +30,11 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-17px;
font-weight: 400;
color: $primary-content;
margin-top: $spacing-12;
margin-top: var(--cpd-space-3x);
}
.mx_ViewSource_details {
margin-top: $spacing-12;
margin-top: var(--cpd-space-3x);
}
.mx_CopyableText_border {
apps/web/res/css/views/auth/_AuthBody.pcss
+15 -15
View File
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
h1 {
font-size: $font-24px;
font-weight: var(--cpd-font-weight-semibold);
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
color: $authpage-primary-color;
}
@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AuthBody_text {
margin-bottom: $spacing-48;
margin-bottom: var(--cpd-space-12x);
margin-top: 0;
}
@@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
.mx_Login_submit {
height: 32px;
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
}
.mx_ErrorMessage {
@@ -139,7 +139,7 @@ Please see LICENSE files in the repository root for full details.
min-height: 600px;
h1 {
margin: $spacing-24 0;
margin: var(--cpd-space-6x) 0;
}
.mx_AuthBody_button-container {
@@ -148,24 +148,24 @@ Please see LICENSE files in the repository root for full details.
}
.mx_Login_submit {
margin: 0 0 $spacing-16;
margin: 0 0 var(--cpd-space-4x);
}
.mx_AuthBody_text {
margin-bottom: $spacing-32;
margin-bottom: var(--cpd-space-8x);
p {
margin: 0 0 $spacing-8;
margin: 0 0 var(--cpd-space-2x);
}
}
.mx_AuthBody_sign-in-instead-button {
font-weight: var(--cpd-font-weight-semibold);
padding: $spacing-4;
padding: var(--cpd-space-1x);
}
.mx_AuthBody_fieldRow {
margin-bottom: $spacing-24;
margin-bottom: var(--cpd-space-6x);
}
.mx_AccessibleButton.mx_AccessibleButton_hasKind {
@@ -182,7 +182,7 @@ Please see LICENSE files in the repository root for full details.
align-items: center;
color: $secondary-content;
display: flex;
gap: $spacing-8;
gap: var(--cpd-space-2x);
}
.mx_AuthBody_resend-button {
@@ -190,8 +190,8 @@ Please see LICENSE files in the repository root for full details.
border-radius: 8px;
color: $accent;
display: flex;
gap: $spacing-4;
padding: $spacing-4;
gap: var(--cpd-space-1x);
padding: var(--cpd-space-1x);
&:hover {
background-color: $system;
@@ -232,7 +232,7 @@ Please see LICENSE files in the repository root for full details.
text-align: center;
.mx_AuthBody_paddedFooter_title {
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
font-size: $font-15px;
line-height: $font-24px;
@@ -243,7 +243,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_AuthBody_paddedFooter_subtitle {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
font-size: $font-10px;
line-height: $font-14px;
}
@@ -259,7 +259,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SSOButtons + .mx_AuthBody_changeFlow {
margin-top: $spacing-24;
margin-top: var(--cpd-space-6x);
}
.mx_AuthBody_spinner {
apps/web/res/css/views/auth/_LoginWithQR.pcss
+13 -13
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQRSection p {
margin-top: 0;
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
}
.mx_LoginWithQRSection {
@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_LoginWithQRSection .mx_AccessibleButton svg {
margin-right: $spacing-12;
margin-right: var(--cpd-space-3x);
}
.mx_LoginWithQR_dialog .mx_Dialog {
@@ -42,12 +42,12 @@ Please see LICENSE files in the repository root for full details.
}
h2 {
margin-top: $spacing-24;
margin-top: var(--cpd-space-6x);
}
.mx_LoginWithQR_qrWrapper {
display: flex;
padding: $spacing-28 0;
padding: var(--cpd-space-7x) 0;
.mx_Spinner {
/* Match the size of the QR code to prevent jumps */
@@ -58,7 +58,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQR_confirmationDigits {
text-align: center;
margin: $spacing-48 auto;
margin: var(--cpd-space-12x) auto;
font-weight: var(--cpd-font-weight-semibold);
font-size: $font-24px;
color: $primary-content;
@@ -66,8 +66,8 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQR_confirmationAlert {
border: 1px solid $quaternary-content;
border-radius: $spacing-8;
padding: $spacing-8;
border-radius: var(--cpd-space-2x);
padding: var(--cpd-space-2x);
line-height: 1.5em;
display: flex;
@@ -128,14 +128,14 @@ Please see LICENSE files in the repository root for full details.
.mx_LoginWithQR_heading {
display: flex;
gap: $spacing-12;
gap: var(--cpd-space-3x);
align-items: center;
}
.mx_LoginWithQR_BackButton {
height: $spacing-28;
border-radius: $spacing-28;
padding: $spacing-4;
height: var(--cpd-space-7x);
border-radius: var(--cpd-space-7x);
padding: var(--cpd-space-1x);
box-sizing: border-box;
background-color: var(--cpd-color-bg-subtle-secondary);
svg {
@@ -166,7 +166,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: column;
align-items: center;
gap: $spacing-16;
gap: var(--cpd-space-4x);
margin-top: var(--cpd-space-6x);
.mx_AccessibleButton {
@@ -177,7 +177,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_QRCode {
border-radius: $spacing-8;
border-radius: var(--cpd-space-2x);
display: flex;
justify-content: center;
}
apps/web/res/css/views/beta/_BetaCard.pcss
+12 -12
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_BetaCard {
padding: $spacing-24;
padding: var(--cpd-space-6x);
background-color: $panels;
border-radius: 8px;
box-sizing: border-box;
@@ -16,7 +16,7 @@ Please see LICENSE files in the repository root for full details.
.mx_BetaCard_columns {
display: flex;
flex-flow: wrap;
gap: $spacing-20;
gap: var(--cpd-space-5x);
justify-content: center;
.mx_BetaCard_columns_description {
@@ -27,11 +27,11 @@ Please see LICENSE files in the repository root for full details.
font-size: $font-18px;
line-height: $font-22px;
color: $primary-content;
margin: $spacing-4 0 14px;
margin: var(--cpd-space-1x) 0 14px;
display: flex;
align-items: center;
column-gap: $spacing-12;
column-gap: var(--cpd-space-3x);
}
.mx_BetaCard_caption {
@@ -42,8 +42,8 @@ Please see LICENSE files in the repository root for full details.
.mx_BetaCard_buttons {
display: flex;
flex-wrap: wrap-reverse;
gap: $spacing-12;
margin: $spacing-20 auto 0;
gap: var(--cpd-space-3x);
margin: var(--cpd-space-5x) auto 0;
.mx_AccessibleButton {
padding: 7px 40px;
@@ -58,17 +58,17 @@ Please see LICENSE files in the repository root for full details.
}
.mx_BetaCard_refreshWarning {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
font-size: $font-10px;
text-align: center;
}
.mx_BetaCard_faq {
margin-top: $spacing-20;
margin-top: var(--cpd-space-5x);
font: var(--cpd-font-body-xs-regular);
> h4 {
margin: $spacing-12 0 0;
margin: var(--cpd-space-3x) 0 0;
}
> p {
@@ -92,13 +92,13 @@ Please see LICENSE files in the repository root for full details.
.mx_BetaCard_relatedSettings {
.mx_SettingsFlag {
margin: $spacing-16 0 0;
margin: var(--cpd-space-4x) 0 0;
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
.mx_SettingsFlag_microcopy {
margin-top: $spacing-4;
margin-top: var(--cpd-space-1x);
font: var(--cpd-font-body-sm-regular);
}
}
@@ -107,7 +107,7 @@ Please see LICENSE files in the repository root for full details.
.mx_BetaCard_betaPill {
background-color: $accent-alt;
padding: $spacing-4 10px;
padding: var(--cpd-space-1x) 10px;
border-radius: 8px;
text-transform: uppercase;
font-size: $font-12px;
apps/web/res/css/views/dialogs/_ExportDialog.pcss
+1 -1
View File
@@ -79,5 +79,5 @@ Please see LICENSE files in the repository root for full details.
}
.mx_ExportDialog_attachments-checkbox {
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
}
apps/web/res/css/views/dialogs/_InviteDialog.pcss
+16 -16
View File
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_transferWrapper .mx_Dialog {
padding-bottom: $spacing-16;
padding-bottom: var(--cpd-space-4x);
}
.mx_InviteDialog_addressBar {
@@ -20,7 +20,7 @@ Please see LICENSE files in the repository root for full details.
flex-direction: row;
/* Right margin for the design. We could apply this to the whole dialog, but then the scrollbar */
/* for the user section gets weird. */
margin: $spacing-8 45px 0 0;
margin: var(--cpd-space-2x) 45px 0 0;
.mx_InviteDialog_editor {
flex: 1;
@@ -36,7 +36,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_section {
padding-bottom: $spacing-4;
padding-bottom: var(--cpd-space-1x);
.mx_InviteDialog_section_showMore {
margin: 7px 18px;
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_section_hidden_suggestions_disclaimer {
padding: $spacing-8 0 $spacing-16 0;
padding: var(--cpd-space-2x) 0 var(--cpd-space-4x) 0;
font: var(--cpd-font-body-md-regular);
> span {
@@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.
border-top: 1px solid $input-border-color;
> h3 {
margin: $spacing-12 0;
margin: var(--cpd-space-3x) 0;
font-size: $font-12px;
color: $muted-fg-color;
font-weight: bold;
@@ -153,17 +153,17 @@ Please see LICENSE files in the repository root for full details.
}
.mx_InviteDialog_addressBar {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
}
input[type="checkbox"] {
margin-inline-end: $spacing-8;
margin-inline-end: var(--cpd-space-2x);
}
}
.mx_InviteDialog_userSections {
overflow-y: auto;
padding: 0 45px $spacing-4 0;
padding: 0 45px var(--cpd-space-1x) 0;
}
.mx_InviteDialog_helpText {
@@ -172,7 +172,7 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_dialPad {
width: 224px;
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
margin-inline: auto;
.mx_InviteDialog_dialPadField {
@@ -199,19 +199,19 @@ Please see LICENSE files in the repository root for full details.
}
.mx_DialPad {
row-gap: $spacing-16;
row-gap: var(--cpd-space-4x);
column-gap: 48px;
margin-inline: auto;
}
}
.mx_InviteDialog_transferConsultConnect {
padding-top: $spacing-16;
padding-top: var(--cpd-space-4x);
/* This wants a drop shadow the full width of the dialog, so use negative margin to make it full width,
* then compensate with padding
*/
padding-inline: $spacing-24;
margin-inline: calc(-1 * $spacing-24);
padding-inline: var(--cpd-space-6x);
margin-inline: calc(-1 * var(--cpd-space-6x));
border-top: 1px solid $quinary-content;
display: flex;
@@ -226,12 +226,12 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_tile {
cursor: pointer;
display: grid;
gap: $spacing-8 $spacing-12;
gap: var(--cpd-space-2x) var(--cpd-space-3x);
align-items: center;
&.mx_InviteDialog_tile--inviterError {
grid-template-columns: max-content auto; /* max-content = avatar width */
margin-bottom: $spacing-24;
margin-bottom: var(--cpd-space-6x);
&:last-child {
margin-bottom: 0;
@@ -312,5 +312,5 @@ Please see LICENSE files in the repository root for full details.
.mx_InviteDialog_oneThreepid {
font-size: $font-12px;
margin: $spacing-8 0;
margin: var(--cpd-space-2x) 0;
}
apps/web/res/css/views/dialogs/_RoomSettingsDialogBridges.pcss
+4 -4
View File
@@ -15,9 +15,9 @@ Please see LICENSE files in the repository root for full details.
&.mx_RoomSettingsDialog_BridgeList_listItem {
display: flex;
flex-wrap: wrap;
gap: $spacing-8;
gap: var(--cpd-space-2x);
padding: 5px;
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
/* border-style around each bridge list item */
border-width: 1px 1px;
@@ -71,11 +71,11 @@ Please see LICENSE files in the repository root for full details.
.mx_RoomSettingsDialog_column_data_details,
.mx_RoomSettingsDialog_column_data_metadata {
margin-top: $spacing-4;
margin-top: var(--cpd-space-1x);
}
.mx_RoomSettingsDialog_column_data_metadata li {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
}
.mx_RoomSettingsDialog_column_data_protocolName {
apps/web/res/css/views/dialogs/_SpotlightDialog.pcss
+34 -34
View File
@@ -24,7 +24,7 @@ Please see LICENSE files in the repository root for full details.
#mx_SpotlightDialog_keyboardPrompt {
position: absolute;
padding: $spacing-8;
padding: var(--cpd-space-2x);
border-radius: 8px;
background-color: $background;
top: -60px; /* relative to the top of the modal */
@@ -36,8 +36,8 @@ Please see LICENSE files in the repository root for full details.
kbd {
display: inline-block;
padding: 2px $spacing-4;
margin: 0 $spacing-4;
padding: 2px var(--cpd-space-1x);
margin: 0 var(--cpd-space-1x);
border-radius: 6px;
background-color: $quinary-content;
vertical-align: middle;
@@ -64,7 +64,7 @@ Please see LICENSE files in the repository root for full details.
margin: 0;
border: none;
border-radius: 8px 8px 0 0;
padding: $spacing-12 $spacing-16;
padding: var(--cpd-space-3x) var(--cpd-space-4x);
border-bottom: 1px solid $system;
> .mx_SpotlightDialog_filter {
@@ -72,19 +72,19 @@ Please see LICENSE files in the repository root for full details.
align-content: center;
align-items: center;
border-radius: 8px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
background-color: $quinary-content;
vertical-align: middle;
color: $primary-content;
position: relative;
padding: $spacing-4 $spacing-8 $spacing-4 37px;
padding: var(--cpd-space-1x) var(--cpd-space-2x) var(--cpd-space-1x) 37px;
> svg {
color: $secondary-content;
width: 18px;
height: 18px;
position: absolute;
left: $spacing-8;
left: var(--cpd-space-2x);
top: 50%;
transform: translateY(-50%);
}
@@ -96,7 +96,7 @@ Please see LICENSE files in the repository root for full details.
padding: 1px;
background: $system;
border-radius: 8px;
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
text-align: center;
line-height: 16px;
color: $secondary-content;
@@ -126,7 +126,7 @@ Please see LICENSE files in the repository root for full details.
flex-grow: 0;
width: unset;
height: unset;
margin-left: $spacing-16;
margin-left: var(--cpd-space-4x);
}
&:not(:focus-within) + #mx_SpotlightDialog_content {
@@ -143,7 +143,7 @@ Please see LICENSE files in the repository root for full details.
#mx_SpotlightDialog_content {
height: 100%;
overflow-y: auto;
padding: $spacing-16;
padding: var(--cpd-space-4x);
ul {
padding: 0;
@@ -161,23 +161,23 @@ Please see LICENSE files in the repository root for full details.
}
> h4 {
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
.mx_SpotlightDialog_sectionHeader {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
.mx_SpotlightDialog_options {
display: flex;
gap: $spacing-4;
gap: var(--cpd-space-1x);
}
}
& + .mx_SpotlightDialog_section {
margin-top: $spacing-24;
margin-top: var(--cpd-space-6x);
}
}
@@ -201,7 +201,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_option {
padding: $spacing-4;
padding: var(--cpd-space-1x);
color: $primary-content;
font-size: $font-12px;
line-height: $font-15px;
@@ -213,11 +213,11 @@ Please see LICENSE files in the repository root for full details.
text-align: center;
.mx_DecoratedRoomAvatar {
margin: 0 9px $spacing-4; /* maintain centering */
margin: 0 9px var(--cpd-space-1x); /* maintain centering */
}
& + .mx_SpotlightDialog_option {
margin-left: $spacing-16;
margin-left: var(--cpd-space-4x);
}
}
}
@@ -229,7 +229,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_option {
--mx_SpotlightDialog_option_selectedBgColor: $system;
padding: 6px $spacing-4;
padding: 6px var(--cpd-space-1x);
font-size: $font-15px;
line-height: $font-24px;
color: $primary-content;
@@ -249,20 +249,20 @@ Please see LICENSE files in the repository root for full details.
align-items: flex-start;
.mx_AccessibleButton {
padding: $spacing-4 $spacing-20;
margin: 2px $spacing-4;
padding: var(--cpd-space-1x) var(--cpd-space-5x);
margin: 2px var(--cpd-space-1x);
}
.mx_SpotlightDialog_enterPrompt {
margin-top: 9px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
}
}
> .mx_SpotlightDialog_metaspaceResult,
> .mx_DecoratedRoomAvatar,
> .mx_BaseAvatar {
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
width: 24px;
height: 24px;
flex-shrink: 0;
@@ -283,7 +283,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: row;
line-height: $font-24px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
.mx_SpotlightDialog_result_publicRoomName {
color: $primary-content;
@@ -294,7 +294,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_result_publicRoomAlias {
color: $tertiary-content;
font-size: $font-12px;
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
overflow: hidden;
text-overflow: ellipsis;
}
@@ -313,7 +313,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_NotificationBadge {
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
}
.mx_SpotlightDialog_option--menu,
@@ -356,17 +356,17 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_inviteLink,
.mx_SpotlightDialog_createRoom {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
.mx_AccessibleButton {
position: relative;
margin: 0;
padding: 3px $spacing-8 3px $spacing-28;
padding: 3px var(--cpd-space-2x) 3px var(--cpd-space-7x);
svg {
display: block;
position: absolute;
left: $spacing-8;
left: var(--cpd-space-2x);
width: 16px;
height: 16px;
color: var(--cpd-color-icon-primary);
@@ -376,7 +376,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SpotlightDialog_otherSearches {
.mx_SpotlightDialog_option {
padding-left: $spacing-32;
padding-left: var(--cpd-space-8x);
position: relative;
svg {
@@ -384,7 +384,7 @@ Please see LICENSE files in the repository root for full details.
width: 24px;
height: 24px;
position: absolute;
left: $spacing-4;
left: var(--cpd-space-1x);
top: 50%;
transform: translateY(-50%);
}
@@ -397,8 +397,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_result_details {
margin-left: $spacing-8;
margin-right: $spacing-8;
margin-left: var(--cpd-space-2x);
margin-right: var(--cpd-space-2x);
color: $tertiary-content;
font-size: $font-12px;
line-height: $font-15px;
@@ -415,7 +415,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SpotlightDialog_enterPrompt {
padding: 2px $spacing-4;
padding: 2px var(--cpd-space-1x);
/* To avoid any styling inherent with <kbd> elements */
font-family: inherit;
font-weight: inherit;
@@ -424,7 +424,7 @@ Please see LICENSE files in the repository root for full details.
color: $tertiary-content;
border-radius: 6px;
background-color: $quinary-content;
margin-right: $spacing-4;
margin-right: var(--cpd-space-1x);
display: none;
}
apps/web/res/css/views/dialogs/_VerifyEMailDialog.pcss
+2 -2
View File
@@ -13,7 +13,7 @@ Please see LICENSE files in the repository root for full details.
.mx_Dialog {
color: $primary-content;
font: var(--cpd-font-body-md-regular);
padding: $spacing-24 $spacing-24 $spacing-16;
padding: var(--cpd-space-6x) var(--cpd-space-6x) var(--cpd-space-4x);
text-align: center;
/* !important override compound */
width: 485px !important;
@@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details.
.mx_AuthBody_did-not-receive {
justify-content: center;
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
.mx_Dialog_cancelButton {
apps/web/res/css/views/dialogs/security/_CreateSecretStorageDialog.pcss
+1 -1
View File
@@ -19,7 +19,7 @@ Please see LICENSE files in the repository root for full details.
padding: 56px; /* 80px from design - 24px wrapper padding */
.mx_Dialog_title {
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
}
}
apps/web/res/css/views/directory/_NetworkDropdown.pcss
+7 -7
View File
@@ -9,14 +9,14 @@ Please see LICENSE files in the repository root for full details.
.mx_NetworkDropdown_wrapper .mx_ContextualMenu {
.mx_GenericDropdownMenu_Option {
&.mx_GenericDropdownMenu_Option--header {
padding-top: $spacing-12;
padding-bottom: $spacing-4;
padding-top: var(--cpd-space-3x);
padding-bottom: var(--cpd-space-1x);
min-width: 160px;
}
&.mx_GenericDropdownMenu_Option--item {
padding-top: $spacing-4;
padding-bottom: $spacing-4;
padding-top: var(--cpd-space-1x);
padding-bottom: var(--cpd-space-1x);
> .mx_GenericDropdownMenu_Option--label span:first-child {
font-weight: normal;
@@ -30,15 +30,15 @@ Please see LICENSE files in the repository root for full details.
color: $primary-content;
span:not(:first-child) {
margin-left: $spacing-4;
margin-left: var(--cpd-space-1x);
color: $secondary-content;
}
}
}
.mx_GenericDropdownMenu_divider {
margin-top: $spacing-4;
margin-bottom: $spacing-4;
margin-top: var(--cpd-space-1x);
margin-bottom: var(--cpd-space-1x);
& + .mx_GenericDropdownMenu_Option .mx_GenericDropdownMenu_Option--label {
font-size: $font-15px;
apps/web/res/css/views/elements/_GenericEventListSummary.pcss
+3 -3
View File
@@ -10,7 +10,7 @@ Please see LICENSE files in the repository root for full details.
position: relative;
.mx_GenericEventListSummary_avatars {
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
}
.mx_GenericEventListSummary_spacer {
@@ -37,7 +37,7 @@ Please see LICENSE files in the repository root for full details.
}
&[data-layout="group"] {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
}
&[data-layout="bubble"] {
@@ -89,7 +89,7 @@ Please see LICENSE files in the repository root for full details.
.mx_MatrixChat_useCompactLayout & {
font-size: $font-13px;
margin-top: $spacing-4;
margin-top: var(--cpd-space-1x);
.mx_EventTile_line {
line-height: 1.25;
apps/web/res/css/views/elements/_ServerPicker.pcss
+1 -1
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ServerPicker {
margin-bottom: 14px;
padding-bottom: $spacing-16;
padding-bottom: var(--cpd-space-4x);
border-bottom: 1px solid rgb(141, 151, 165, 0.2);
display: grid;
grid-template-columns: auto min-content;
apps/web/res/css/views/location/_LocationPicker.pcss
+4 -4
View File
@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
.maplibregl-ctrl.maplibregl-ctrl-group,
.maplibregl-ctrl.maplibregl-ctrl-attrib {
margin-right: $spacing-16;
margin-right: var(--cpd-space-4x);
}
.maplibregl-ctrl.maplibregl-ctrl-group {
@@ -54,7 +54,7 @@ Please see LICENSE files in the repository root for full details.
flex: 0;
width: 100%;
box-sizing: border-box;
padding: $spacing-16;
padding: var(--cpd-space-4x);
display: flex;
flex-direction: column;
justify-content: stretch;
@@ -68,7 +68,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LocationPicker_pinText {
position: absolute;
top: $spacing-16;
top: var(--cpd-space-4x);
width: 100%;
box-sizing: border-box;
text-align: center;
@@ -78,7 +78,7 @@ Please see LICENSE files in the repository root for full details.
span {
box-shadow: 0px 4px 15px rgb(0, 0, 0, 0.15);
border-radius: 8px;
padding: $spacing-8;
padding: var(--cpd-space-2x);
background-color: $background;
color: $primary-content;
apps/web/res/css/views/messages/_CallEvent.pcss
+5 -5
View File
@@ -21,7 +21,7 @@ Please see LICENSE files in the repository root for full details.
border-radius: 8px;
display: flex;
gap: $spacing-8;
gap: var(--cpd-space-2x);
> .mx_BaseAvatar,
> .mx_Icon {
@@ -30,7 +30,7 @@ Please see LICENSE files in the repository root for full details.
> .mx_Icon {
padding: 0;
margin: $spacing-4 0;
margin: var(--cpd-space-1x) 0;
color: $secondary-content;
}
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content;
width: 16px;
height: 16px;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
}
.mx_CallEvent_active .mx_CallEvent_title {
@@ -62,7 +62,7 @@ Please see LICENSE files in the repository root for full details.
.mx_CallEvent_columns {
flex-grow: 1;
display: flex;
gap: $spacing-12;
gap: var(--cpd-space-3x);
align-items: center;
justify-content: space-between;
}
@@ -70,7 +70,7 @@ Please see LICENSE files in the repository root for full details.
.mx_TimelineCard .mx_CallEvent_columns {
flex-direction: column;
align-items: flex-start;
gap: $spacing-8;
gap: var(--cpd-space-2x);
}
.mx_CallEvent_details {
apps/web/res/css/views/messages/_LegacyCallEvent.pcss
+10 -10
View File
@@ -16,11 +16,11 @@ Please see LICENSE files in the repository root for full details.
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: $spacing-4 0;
gap: var(--cpd-space-1x) 0;
position: relative;
margin: $spacing-4 0;
padding: $spacing-12 $spacing-24;
margin: var(--cpd-space-1x) 0;
padding: var(--cpd-space-3x) var(--cpd-space-6x);
box-sizing: border-box;
background-color: $dark-panel-bg-color;
border-radius: 8px;
@@ -47,14 +47,14 @@ Please see LICENSE files in the repository root for full details.
.mx_LegacyCallEvent_info_basic {
display: flex;
flex-direction: column;
gap: $spacing-4;
gap: var(--cpd-space-1x);
margin-left: 10px; /* To match mx_LegacyCallEvent */
margin-right: 10px;
min-width: 0;
.mx_LegacyCallEvent_sender {
font-weight: var(--cpd-font-weight-semibold);
margin-bottom: $spacing-4;
margin-bottom: var(--cpd-space-1x);
overflow: hidden;
white-space: nowrap;
@@ -74,14 +74,14 @@ Please see LICENSE files in the repository root for full details.
align-items: center;
color: $secondary-content;
font-size: $font-12px;
gap: $spacing-12; /* See mx_IncomingLegacyCallToast_buttons */
gap: var(--cpd-space-3x); /* See mx_IncomingLegacyCallToast_buttons */
margin-inline-start: 42px; /* avatar (32px) + mx_LegacyCallEvent_info_basic margin (10px) */
word-break: break-word;
max-width: fit-content;
.mx_LegacyCallEvent_content_button {
@mixin LegacyCallButton;
padding: 0 $spacing-12;
padding: 0 var(--cpd-space-3x);
font-size: inherit;
}
@@ -93,7 +93,7 @@ Please see LICENSE files in the repository root for full details.
&.mx_LegacyCallEvent_narrow {
flex-direction: column;
align-items: unset;
gap: $spacing-4 $spacing-16;
gap: var(--cpd-space-1x) var(--cpd-space-4x);
height: unset;
min-width: 290px;
@@ -144,7 +144,7 @@ Please see LICENSE files in the repository root for full details.
.mx_LegacyCallEvent_wrapper {
.mx_LegacyCallEvent {
&.mx_LegacyCallEvent_narrow {
gap: $spacing-8 $spacing-4;
gap: var(--cpd-space-2x) var(--cpd-space-1x);
}
}
}
@@ -153,7 +153,7 @@ Please see LICENSE files in the repository root for full details.
.mx_IRCLayout {
.mx_LegacyCallEvent_wrapper {
.mx_LegacyCallEvent {
margin-inline-start: $spacing-4; /* display green line */
margin-inline-start: var(--cpd-space-1x); /* display green line */
}
}
}
apps/web/res/css/views/messages/_MImageReplyBody.pcss
+4 -4
View File
@@ -10,9 +10,9 @@ Please see LICENSE files in the repository root for full details.
.mx_MStickerBody_wrapper {
.mx_MImageBody_banner {
position: absolute;
bottom: $spacing-4;
left: $spacing-4;
padding: $spacing-4;
bottom: var(--cpd-space-1x);
left: var(--cpd-space-1x);
padding: var(--cpd-space-1x);
border-radius: var(--MBody-border-radius);
font-size: $font-15px;
user-select: none;
@@ -66,7 +66,7 @@ Please see LICENSE files in the repository root for full details.
.mx_MImageReplyBody {
display: flex;
column-gap: $spacing-4;
column-gap: var(--cpd-space-1x);
.mx_MImageBody_thumbnail_container {
flex: 1;
apps/web/res/css/views/messages/_MPollBody.pcss
+3 -3
View File
@@ -47,7 +47,7 @@ $poll-max-width: 550px;
.mx_Spinner {
flex: 0;
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
}
}
}
@@ -59,7 +59,7 @@ $poll-max-width: 550px;
.mx_MPollBody_allOptions {
display: grid;
gap: $spacing-16;
margin-bottom: $spacing-8;
gap: var(--cpd-space-4x);
margin-bottom: var(--cpd-space-2x);
max-width: $poll-max-width;
}
apps/web/res/css/views/polls/pollHistory/_PollHistory.pcss
+1 -1
View File
@@ -15,5 +15,5 @@ Please see LICENSE files in the repository root for full details.
}
.mx_PollHistory_header.mx_Heading_h2 {
margin-bottom: $spacing-16;
margin-bottom: var(--cpd-space-4x);
}
apps/web/res/css/views/polls/pollHistory/_PollHistoryList.pcss
+6 -6
View File
@@ -21,12 +21,12 @@ Please see LICENSE files in the repository root for full details.
flex: 1 1 0;
align-content: flex-start;
display: grid;
gap: $spacing-20;
padding-right: $spacing-64;
margin: $spacing-32 0;
gap: var(--cpd-space-5x);
padding-right: var(--cpd-space-16x);
margin: var(--cpd-space-8x) 0;
&.mx_PollHistoryList_list_ENDED {
gap: $spacing-32;
gap: var(--cpd-space-8x);
}
}
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 0 $spacing-64;
padding: 0 var(--cpd-space-16x);
display: flex;
flex-direction: column;
align-items: center;
@@ -45,7 +45,7 @@ Please see LICENSE files in the repository root for full details.
color: $secondary-content;
.mx_PollHistoryList_loadMorePolls {
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
}
}
apps/web/res/css/views/right_panel/_BaseCard.pcss
+1 -1
View File
@@ -87,7 +87,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_BaseCard_footer {
padding-top: $spacing-4;
padding-top: var(--cpd-space-1x);
text-align: center;
display: flex;
justify-content: space-around;
apps/web/res/css/views/right_panel/_ExtensionsCard.pcss
+1 -1
View File
@@ -22,7 +22,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ExtensionsCard_container {
text-align: center;
margin: $spacing-20 var(--cpd-space-4x) 0;
margin: var(--cpd-space-5x) var(--cpd-space-4x) 0;
}
.mx_ExtensionsCard_Button {
apps/web/res/css/views/right_panel/_RoomSummaryCard.pcss
+2 -2
View File
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
.mx_RoomSummaryCard_container {
text-align: center;
margin: $spacing-20 var(--cpd-space-4x) 0;
margin: var(--cpd-space-5x) var(--cpd-space-4x) 0;
}
.mx_RoomSummaryCard_roomName,
@@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomSummaryCard_roomName {
margin: $spacing-12 0 $spacing-4;
margin: var(--cpd-space-3x) 0 var(--cpd-space-1x);
}
.mx_RoomSummaryCard_bottomOptions {
apps/web/res/css/views/right_panel/_ThreadPanel.pcss
+3 -3
View File
@@ -32,7 +32,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ThreadPanel_dropdown {
font: var(--cpd-font-body-sm-regular);
padding: 3px $spacing-4 3px $spacing-8;
padding: 3px var(--cpd-space-1x) 3px var(--cpd-space-2x);
border-radius: 4px;
line-height: 1.5;
user-select: none;
@@ -111,8 +111,8 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomView_MessageList {
padding-inline-start: $spacing-8;
padding-inline-end: $spacing-8;
padding-inline-start: var(--cpd-space-2x);
padding-inline-end: var(--cpd-space-2x);
content-visibility: visible;
}
apps/web/res/css/views/right_panel/_TimelineCard.pcss
+2 -2
View File
@@ -51,7 +51,7 @@ Please see LICENSE files in the repository root for full details.
padding-inline-end: var(--MessageTimestamp-width); /* ensure timestamp is not hidden */
.mx_EventTile_e2eIcon {
inset-inline-start: $spacing-8;
inset-inline-start: var(--cpd-space-2x);
}
}
@@ -98,7 +98,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ReactionsRow {
/* See: var(--ThreadView_group_spacing-end) for ReactionsRow on _EventTile.pcss */
margin-inline-end: $spacing-8;
margin-inline-end: var(--cpd-space-2x);
}
.mx_ThreadSummary {
apps/web/res/css/views/right_panel/_UserInfo.pcss
+2 -2
View File
@@ -25,7 +25,7 @@ Please see LICENSE files in the repository root for full details.
.mx_UserInfo_memberDetailsContainer {
padding-top: 0;
padding-bottom: 0;
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
.mx_RoomTile_titleContainer {
@@ -67,7 +67,7 @@ Please see LICENSE files in the repository root for full details.
color: $tertiary-content;
font: var(--cpd-font-body-md-semibold);
font-weight: var(--cpd-font-weight-semibold);
margin: $spacing-4 0;
margin: var(--cpd-space-1x) 0;
}
p {
apps/web/res/css/views/rooms/_EventTile.pcss
+25 -25
View File
@@ -97,7 +97,7 @@ $left-gutter: 64px;
display: flex;
flex-flow: wrap;
align-items: center;
gap: $spacing-4;
gap: var(--cpd-space-1x);
}
.mx_ReplyChain--expanded {
@@ -236,7 +236,7 @@ $left-gutter: 64px;
}
.mx_ReplyChain {
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
}
@@ -315,7 +315,7 @@ $left-gutter: 64px;
display: inline;
background-color: $event-selected-color;
border-radius: 8px 0 0 8px;
padding-right: $spacing-8;
padding-right: var(--cpd-space-2x);
}
> .mx_DisambiguatedProfile_mxid {
@@ -440,7 +440,7 @@ $left-gutter: 64px;
&[data-layout="group"] {
.mx_EventTile_avatar {
top: 14px;
left: $spacing-8;
left: var(--cpd-space-2x);
}
.mx_EventTile_line,
@@ -657,11 +657,11 @@ $left-gutter: 64px;
border: 1px solid $inlinecode-border-color;
border-radius: 4px;
/* The horizontal padding is added by github-markdown-css .markdown-body */
padding: $spacing-2 0;
padding: var(--cpd-space-0-5x) 0;
/* Avoid inline code blocks to be sticked when on multiple lines */
line-height: $font-22px;
/* Avoid the border to be glued to the other words */
margin-right: $spacing-2;
margin-right: var(--cpd-space-0-5x);
}
code {
@@ -860,15 +860,15 @@ $left-gutter: 64px;
.mx_EventTile_collapsedCodeBlock {
max-height: 30vh;
padding-top: $spacing-12;
padding-bottom: $spacing-12;
padding-top: var(--cpd-space-3x);
padding-bottom: var(--cpd-space-3x);
}
/* Inserted adjacent to <pre> blocks, (See TextualBody) */
.mx_EventTile_button {
position: absolute;
top: $spacing-8;
right: $spacing-8;
top: var(--cpd-space-2x);
right: var(--cpd-space-2x);
visibility: hidden;
&.mx_EventTile_buttonBottom {
@@ -914,7 +914,7 @@ $left-gutter: 64px;
margin-right: 0;
span {
padding: $spacing-4 $spacing-8;
padding: var(--cpd-space-1x) var(--cpd-space-2x);
}
}
@@ -932,10 +932,10 @@ $left-gutter: 64px;
.mx_EventTile[data-shape="ThreadsList"],
.mx_EventTile[data-shape="Notification"] {
--topOffset: $spacing-12;
--topOffset: var(--cpd-space-3x);
--leftOffset: 48px;
$borderRadius: 8px;
$padding: $spacing-8;
$padding: var(--cpd-space-2x);
$hrHeight: 1px;
$notification-dot-size: 8px; /* notification dot next to the timestamp */
@@ -1051,7 +1051,7 @@ $left-gutter: 64px;
.mx_EventTile[data-shape="ThreadsList"] {
.mx_ThreadPanel_replies {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
display: flex;
align-items: center;
position: relative;
@@ -1069,13 +1069,13 @@ $left-gutter: 64px;
.mx_ThreadSummary_icon {
display: inline-block;
margin-top: $spacing-8;
margin-bottom: $spacing-8;
margin-top: var(--cpd-space-2x);
margin-bottom: var(--cpd-space-2x);
> svg {
@mixin ThreadSummaryIcon;
vertical-align: middle;
margin-inline-end: $spacing-8;
margin-inline-end: var(--cpd-space-2x);
margin-top: -2px;
}
@@ -1163,7 +1163,7 @@ $left-gutter: 64px;
&[data-layout="irc"],
&[data-layout="group"] {
padding-block-start: $spacing-16;
padding-block-start: var(--cpd-space-4x);
.mx_EventTile_line,
.mx_EventTile_footer {
@@ -1200,8 +1200,8 @@ $left-gutter: 64px;
.mx_EventTile_senderDetails {
display: flex;
align-items: center;
gap: $spacing-16; /* gap between the avatar and the sender ID */
padding-inline-start: $spacing-8;
gap: var(--cpd-space-4x); /* gap between the avatar and the sender ID */
padding-inline-start: var(--cpd-space-2x);
a {
flex: 1;
@@ -1265,7 +1265,7 @@ $left-gutter: 64px;
/* Cascading - compact modern layout on the main timeline and the right panel */
.mx_MatrixChat_useCompactLayout {
.mx_EventTile[data-layout="group"] {
--MatrixChat_useCompactLayout_group-padding-top: $spacing-4;
--MatrixChat_useCompactLayout_group-padding-top: var(--cpd-space-1x);
--MatrixChat_useCompactLayout-top-avatar: 2px;
--MatrixChat_useCompactLayout_line-spacing-block: 0px;
@@ -1277,7 +1277,7 @@ $left-gutter: 64px;
}
.mx_ReplyChain {
margin-bottom: $spacing-4;
margin-bottom: var(--cpd-space-1x);
}
&.mx_EventTile_info {
@@ -1297,7 +1297,7 @@ $left-gutter: 64px;
}
&.mx_EventTile_emote {
padding-top: $spacing-8; /* add a bit more space for emotes so that avatars don't collide */
padding-top: var(--cpd-space-2x); /* add a bit more space for emotes so that avatars don't collide */
.mx_EventTile_avatar {
top: var(--MatrixChat_useCompactLayout-top-avatar);
@@ -1349,7 +1349,7 @@ $left-gutter: 64px;
blockquote,
pre,
table {
margin-bottom: $spacing-4; /* 1/4 of the non-compact margin-bottom */
margin-bottom: var(--cpd-space-1x); /* 1/4 of the non-compact margin-bottom */
}
}
}
@@ -1360,7 +1360,7 @@ $left-gutter: 64px;
width: stretch;
align-items: center;
justify-content: space-between;
gap: $spacing-8;
gap: var(--cpd-space-2x);
margin-left: var(--leftOffset);
.mx_EventTile_truncated {
flex: 1;
apps/web/res/css/views/rooms/_ReplyPreview.pcss
+2 -2
View File
@@ -17,8 +17,8 @@ Please see LICENSE files in the repository root for full details.
border-bottom: 1px solid $primary-hairline-color;
display: flex;
flex-flow: column;
row-gap: $spacing-8;
padding: $spacing-8 $spacing-8 0 0;
row-gap: var(--cpd-space-2x);
padding: var(--cpd-space-2x) var(--cpd-space-2x) 0 0;
.mx_ReplyPreview_header {
display: flex;
apps/web/res/css/views/rooms/_RoomPreviewCard.pcss
+12 -12
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_RoomPreviewCard {
padding: $spacing-32 $spacing-24 !important; /* Override SpaceRoomView's default padding */
padding: var(--cpd-space-8x) var(--cpd-space-6x) !important; /* Override SpaceRoomView's default padding */
margin: auto;
flex-grow: 1;
max-width: 480px;
@@ -21,12 +21,12 @@ Please see LICENSE files in the repository root for full details.
font-weight: var(--cpd-font-weight-semibold);
line-height: $font-24px;
color: $primary-content;
margin-top: $spacing-24;
margin-top: var(--cpd-space-6x);
svg {
height: 1em;
width: 1em;
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
color: $secondary-content;
vertical-align: -2px;
}
@@ -35,11 +35,11 @@ Please see LICENSE files in the repository root for full details.
.mx_RoomPreviewCard_inviter {
display: flex;
align-items: center;
margin-bottom: $spacing-20;
margin-bottom: var(--cpd-space-5x);
font-size: $font-15px;
> div {
margin-left: $spacing-8;
margin-left: var(--cpd-space-2x);
.mx_RoomPreviewCard_inviter_name {
line-height: $font-18px;
@@ -75,18 +75,18 @@ Please see LICENSE files in the repository root for full details.
/* XXX Remove this when video rooms leave beta */
.mx_BetaCard_betaPill {
position: absolute;
inset-block-start: $spacing-32;
inset-inline-end: $spacing-24;
inset-block-start: var(--cpd-space-8x);
inset-inline-end: var(--cpd-space-6x);
}
}
h1.mx_RoomPreviewCard_name {
margin: $spacing-16 0 !important; /* Override SpaceRoomView's default margins */
margin: var(--cpd-space-4x) 0 !important; /* Override SpaceRoomView's default margins */
}
.mx_RoomPreviewCard_topic {
line-height: $font-22px;
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
max-height: 160px;
overflow-y: auto;
}
@@ -94,7 +94,7 @@ Please see LICENSE files in the repository root for full details.
.mx_FacePile {
display: flex;
align-items: center;
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
/* For enhanced visibility under contrast control */
outline: 1px solid transparent;
@@ -104,9 +104,9 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomPreviewCard_joinButtons {
margin-top: $spacing-20;
margin-top: var(--cpd-space-5x);
display: flex;
gap: $spacing-20;
gap: var(--cpd-space-5x);
.mx_AccessibleButton {
max-width: 200px;
apps/web/res/css/views/rooms/wysiwyg_composer/components/_Editor.pcss
+3 -3
View File
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
ol {
margin-top: 0;
margin-bottom: 0;
padding-inline-start: $spacing-28;
padding-inline-start: var(--cpd-space-7x);
}
/* Make list type disc to match rich text editor */
@@ -78,7 +78,7 @@ Please see LICENSE files in the repository root for full details.
margin-top: 0;
margin-bottom: 0;
padding: $spacing-8 $spacing-12;
padding: var(--cpd-space-2x) var(--cpd-space-3x);
background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color;
@@ -90,7 +90,7 @@ Please see LICENSE files in the repository root for full details.
background-color: $inlinecode-background-color;
border: 1px solid $inlinecode-border-color;
border-radius: 4px;
padding: $spacing-2;
padding: var(--cpd-space-0-5x);
&:empty {
border: unset;
apps/web/res/css/views/rooms/wysiwyg_composer/components/_LinkModal.pcss
+2 -2
View File
@@ -7,7 +7,7 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_LinkModal {
padding: $spacing-32;
padding: var(--cpd-space-8x);
max-width: 600px;
height: 341px;
box-sizing: border-box;
@@ -18,7 +18,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
flex-direction: column;
flex: 1;
gap: $spacing-8;
gap: var(--cpd-space-2x);
margin-top: 7px;
.mx_LinkModal_Field {
apps/web/res/css/views/settings/_FontScalingPanel.pcss
+1 -1
View File
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
border: 1px solid $quinary-content;
border-radius: 10px;
padding: 0 $spacing-16 var(--FontScalingPanel_preview-padding-block) $spacing-16;
padding: 0 var(--cpd-space-4x) var(--FontScalingPanel_preview-padding-block) var(--cpd-space-4x);
pointer-events: none;
display: flow-root;
apps/web/res/css/views/settings/_ImageSizePanel.pcss
+1 -1
View File
@@ -9,7 +9,7 @@ Please see LICENSE files in the repository root for full details.
.mx_ImageSizePanel_radios {
display: flex;
flex-direction: row;
gap: $spacing-16;
gap: var(--cpd-space-4x);
> label {
margin-right: 68px; /* keep the boxes separate */
apps/web/res/css/views/settings/_IntegrationManager.pcss
+1 -1
View File
@@ -28,7 +28,7 @@ Please see LICENSE files in the repository root for full details.
}
h3 {
margin-block: $spacing-20;
margin-block: var(--cpd-space-5x);
}
.mx_IntegrationManager_loading,
apps/web/res/css/views/settings/_Notifications.pcss
+1 -1
View File
@@ -58,7 +58,7 @@ Please see LICENSE files in the repository root for full details.
justify-self: start;
padding-right: 30%;
/* collapse half of the grid-gap */
margin-top: -$spacing-4;
margin-top: calc(-1 * var(--cpd-space-1x));
}
.mx_UserNotifSettings_floatingSection {
apps/web/res/css/views/settings/_RoomProfileSettings.pcss
+4 -4
View File
@@ -17,11 +17,11 @@ Please see LICENSE files in the repository root for full details.
margin-inline-end: 54px;
.mx_Field {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
}
.mx_RoomProfileSettings_profile_controls_topic {
margin-top: $spacing-8;
margin-top: var(--cpd-space-2x);
& > textarea {
font-family: inherit;
@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_RoomProfileSettings_profile_controls_userId {
margin-inline-end: $spacing-20;
margin-inline-end: var(--cpd-space-5x);
}
}
}
@@ -43,6 +43,6 @@ Please see LICENSE files in the repository root for full details.
display: flex;
gap: var(--cpd-space-4x);
margin-top: 10px; /* 18px is already accounted for by the <p> above the buttons */
margin-bottom: $spacing-28;
margin-bottom: var(--cpd-space-7x);
}
}
apps/web/res/css/views/settings/_SetIntegrationManager.pcss
+1 -1
View File
@@ -11,7 +11,7 @@ Please see LICENSE files in the repository root for full details.
display: flex;
align-items: center;
flex-wrap: wrap;
column-gap: $spacing-4;
column-gap: var(--cpd-space-1x);
}
form {
margin-top: var(--cpd-space-3x);
apps/web/res/css/views/settings/_SettingsFieldset.pcss
+1 -1
View File
@@ -37,5 +37,5 @@ Please see LICENSE files in the repository root for full details.
.mx_SettingsFieldset_content {
display: flex;
flex-direction: column;
gap: $spacing-8;
gap: var(--cpd-space-2x);
}
apps/web/res/css/views/settings/_SpellCheckLanguages.pcss
+1 -1
View File
@@ -17,5 +17,5 @@ Please see LICENSE files in the repository root for full details.
}
.mx_GeneralUserSettingsTab_spellCheckLanguageInput {
margin-bottom: $spacing-8;
margin-bottom: var(--cpd-space-2x);
}
apps/web/res/css/views/settings/tabs/_SettingsSection.pcss
+2 -2
View File
@@ -35,7 +35,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SettingsSection_subSections {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: $spacing-32;
gap: var(--cpd-space-8x);
margin: $spacing-16 0;
margin: var(--cpd-space-4x) 0;
}
apps/web/res/css/views/settings/tabs/_SettingsTab.pcss
+3 -3
View File
@@ -52,7 +52,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SettingsTab_section {
$end-gutter: 80px;
margin-bottom: $spacing-24;
margin-bottom: var(--cpd-space-6x);
.mx_SettingsFlag {
margin-inline-end: $end-gutter;
@@ -82,7 +82,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SettingsTab_sections {
display: grid;
grid-template-columns: 1fr;
gap: $spacing-32;
gap: var(--cpd-space-8x);
padding-bottom: $spacing-16;
padding-bottom: var(--cpd-space-4x);
}
apps/web/res/css/views/settings/tabs/room/_SecurityRoomSettingsTab.pcss
+2 -2
View File
@@ -6,13 +6,13 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_SecurityRoomSettingsTab_advancedSection {
margin-top: $spacing-16;
margin-top: var(--cpd-space-4x);
}
.mx_SecurityRoomSettingsTab_warning {
display: flex;
align-items: center;
column-gap: $spacing-4;
column-gap: var(--cpd-space-1x);
svg {
color: #ff0064; /* Match legacy icon colour until redesign */
apps/web/res/css/views/settings/tabs/user/_KeyboardUserSettingsTab.pcss
+3 -3
View File
@@ -12,7 +12,7 @@ Please see LICENSE files in the repository root for full details.
padding: 0;
width: 100%;
display: grid;
gap: $spacing-4;
gap: var(--cpd-space-1x);
}
.mx_KeyboardShortcut_shortcutRow,
@@ -23,10 +23,10 @@ Please see LICENSE files in the repository root for full details.
}
.mx_KeyboardShortcut_shortcutRow {
column-gap: $spacing-8;
column-gap: var(--cpd-space-2x);
}
.mx_KeyboardShortcut {
flex-wrap: nowrap;
column-gap: $spacing-4;
column-gap: var(--cpd-space-1x);
}
apps/web/res/css/views/settings/tabs/user/_SecurityUserSettingsTab.pcss
+3 -3
View File
@@ -8,7 +8,7 @@ Please see LICENSE files in the repository root for full details.
.mx_SecurityUserSettingsTab_bulkOptions {
display: flex;
flex-direction: row;
column-gap: $spacing-8;
column-gap: var(--cpd-space-2x);
}
.mx_SecurityUserSettingsTab_ignoredUsers {
@@ -18,11 +18,11 @@ Please see LICENSE files in the repository root for full details.
}
.mx_SecurityUserSettingsTab_ignoredUser {
margin-bottom: $spacing-4;
margin-bottom: var(--cpd-space-1x);
}
.mx_SecurityUserSettingsTab_ignoredUser .mx_AccessibleButton {
margin-right: $spacing-8;
margin-right: var(--cpd-space-2x);
}
.mx_SecurityUserSettingsTab_warning {
code_style.md
+1 -2
View File
@@ -301,8 +301,7 @@ Inheriting all the rules of TypeScript, the following additionally apply:
- Note: These are deprecated. Prefer Compound typography tokens like `var(--cpd-font-body-md-regular)` for new code.
7. Use theme color variables like `$primary-content`, `$secondary-content`, `$accent`, `$alert` for colors.
- Prefer Compound color tokens like `var(--cpd-color-text-primary)` for new code.
8. Use spacing variables like `$spacing-8`, `$spacing-12`, `$spacing-16` where available.
- Prefer Compound spacing tokens like `var(--cpd-space-2x)` for new code.
8. Use spacing variables like `var(--cpd-space-2x)`, `var(--cpd-space-3x)`, `var(--cpd-space-4x)`.
#### Syntax and formatting