mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-11-21 16:55:34 +03:00
Code Issues Projects Releases Packages Wiki Activity

Remove TODO comments about spacing variables (#10695)

Browse source 
The variables on _spacing.pcss have been deprecated by https://github.com/matrix-org/matrix-react-sdk/pull/10686
This commit is contained in:
Suguru Hirahara 2023-06-06 14:03:52 +00:00 committed by GitHub
parent c42a7769e9
commit d340fa8d2a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 56 additions and 56 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -15,7 +15,7 @@ limitations under the License.
*/
:root {
--RoomView_MessageList-padding: 18px; /* TODO: use a variable */
--RoomView_MessageList-padding: 18px;
}
.mx_RoomView_wrapper {
@ -212,7 +212,7 @@ limitations under the License.
margin-bottom: 4px;
h2 {
margin-top: 6px; /* TODO: Use a spacing variable */
margin-top: 6px;
}
}

4
res/css/views/beta/_BetaCard.pcss
View file

@ -35,7 +35,7 @@ limitations under the License.
font-size: $font-18px;
line-height: $font-22px;
color: $primary-content;
margin: $spacing-4 0 14px; // TODO: use a spacing variable
margin: $spacing-4 0 14px;
display: flex;
align-items: center;
@ -117,7 +117,7 @@ limitations under the License.
.mx_BetaCard_betaPill {
background-color: $accent-alt;
padding: $spacing-4 10px; // TODO: use a spacing variable
padding: $spacing-4 10px;
border-radius: 8px;
text-transform: uppercase;
font-size: $font-12px;

18
res/css/views/dialogs/_InviteDialog.pcss
View file

@ -28,7 +28,7 @@ limitations under the License.
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; /* TODO: Use a spacing variable */
margin: $spacing-8 45px 0 0;
.mx_InviteDialog_editor {
flex: 1;
@ -43,14 +43,14 @@ limitations under the License.
flex-wrap: wrap;
.mx_InviteDialog_userTile {
margin: 6px 6px 0 0; /* TODO: Use a spacing variable */
margin: 6px 6px 0 0;
display: inline-block;
min-width: max-content; /* prevent manipulation by flexbox */
}
/* overrides bunch of our default text input styles */
> input[type="text"] {
margin: 6px 0 !important; /* TODO: Use a spacing variable */
margin: 6px 0 !important;
height: 24px;
line-height: $font-24px;
font-size: $font-14px;
@ -67,7 +67,7 @@ limitations under the License.
.mx_InviteDialog_goButton {
min-width: 48px;
margin-inline-start: 10px; /* TODO: Use a spacing variable */
margin-inline-start: 10px;
height: 25px;
line-height: $font-25px;
}
@ -77,7 +77,7 @@ limitations under the License.
/* Width and height are required to trick the layout engine. */
width: 20px;
height: 20px;
margin-inline-start: 5px; /* TODO: Use a spacing variable */
margin-inline-start: 5px;
display: inline-block;
vertical-align: middle;
}
@ -103,7 +103,7 @@ limitations under the License.
}
.mx_InviteDialog_section_showMore {
margin: 7px 18px; /* TODO: Use a spacing variable */
margin: 7px 18px;
display: block;
}
}
@ -252,7 +252,7 @@ limitations under the License.
.mx_InviteDialog_userSections {
margin-top: $spacing-4;
overflow-y: auto;
padding: 0 45px $spacing-4 0; /* TODO: Use a spacing variable */
padding: 0 45px $spacing-4 0;
}
.mx_InviteDialog_helpText {
@ -289,7 +289,7 @@ limitations under the License.
.mx_DialPad {
row-gap: $spacing-16;
column-gap: 48px; /* TODO: Use a spacing variable */
column-gap: 48px;
margin-inline: auto;
}
}
@ -450,7 +450,7 @@ limitations under the License.
}
.mx_InviteDialog_identityServer {
margin-top: 1em; /* TODO: Use a spacing variable */
margin-top: 1em;
}
.mx_InviteDialog_oneThreepid {

14
res/css/views/dialogs/_SpotlightDialog.pcss
View file

@ -36,7 +36,7 @@ limitations under the License.
kbd {
display: inline-block;
padding: 2px $spacing-4; /* TODO: Use a spacing variable */
padding: 2px $spacing-4;
margin: 0 $spacing-4;
border-radius: 6px;
background-color: $quinary-content;
@ -76,7 +76,7 @@ limitations under the License.
vertical-align: middle;
color: $primary-content;
position: relative;
padding: $spacing-4 $spacing-8 $spacing-4 37px; /* TODO: Use a spacing variable */
padding: $spacing-4 $spacing-8 $spacing-4 37px;
&::before {
background-color: $secondary-content;
@ -234,7 +234,7 @@ limitations under the License.
.mx_SpotlightDialog_otherSearches,
.mx_SpotlightDialog_hiddenResults {
.mx_SpotlightDialog_option {
padding: 6px $spacing-4; /* TODO: Use a spacing variable */
padding: 6px $spacing-4;
border-radius: 8px;
font-size: $font-15px;
line-height: $font-24px;
@ -258,11 +258,11 @@ limitations under the License.
.mx_AccessibleButton {
padding: $spacing-4 $spacing-20;
margin: 2px $spacing-4; /* TODO: Use a spacing variable */
margin: 2px $spacing-4;
}
.mx_SpotlightDialog_enterPrompt {
margin-top: 9px; /* TODO: Use a spacing variable */
margin-top: 9px;
margin-right: $spacing-8;
}
}
@ -379,7 +379,7 @@ limitations under the License.
.mx_AccessibleButton {
position: relative;
margin: 0;
padding: 3px $spacing-8 3px $spacing-28; /* TODO: Use a spacing variable */
padding: 3px $spacing-8 3px $spacing-28;
&::before {
content: "";
@ -480,7 +480,7 @@ limitations under the License.
}
.mx_SpotlightDialog_enterPrompt {
padding: 2px $spacing-4; /* TODO: Use a spacing variable */
padding: 2px $spacing-4;
/* To avoid any styling inherent with <kbd> elements */
font-family: inherit;
font-weight: inherit;

6
res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
View file

@ -23,7 +23,7 @@ limitations under the License.
height: 24px;
margin-inline-end: $spacing-8;
position: relative;
top: 5px; /* TODO: spacing variable */
top: 5px;
background-color: $primary-content;
}
@ -81,7 +81,7 @@ limitations under the License.
mask-repeat: no-repeat;
mask-position: center;
mask-size: 20px;
margin-inline-end: 5px; /* TODO: spacing variable */
margin-inline-end: 5px;
}
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
@ -109,7 +109,7 @@ limitations under the License.
text-align: initial;
display: flex;
flex-flow: column;
gap: 14px; /* TODO: spacing variable */
gap: 14px;
.mx_Dialog_buttons_additive {
float: none;

2
res/css/views/elements/_GenericEventListSummary.pcss
View file

@ -23,7 +23,7 @@ limitations under the License.
.mx_GenericEventListSummary_spacer {
border-bottom: 1px solid $primary-hairline-color;
margin-left: 63px; /* TODO: Use a variable */
margin-left: 63px;
line-height: $font-30px; /* TODO: Use a variable */
.mx_IRCLayout & {

6
res/css/views/elements/_ReplyChain.pcss
View file

@ -16,9 +16,9 @@ limitations under the License.
.mx_ReplyChain {
margin: 0; // Reset default blockquote margin
padding-left: 10px; // TODO: Use a spacing variable
border-left: 2px solid var(--username-color); // TODO: Use a spacing variable
border-radius: 2px; // TODO: Use a spacing variable
padding-left: 10px;
border-left: 2px solid var(--username-color);
border-radius: 2px;
.mx_ReplyChain_show {
&.mx_AccessibleButton_kind_link_inline {

4
res/css/views/messages/_EventTileBubble.pcss
View file

@ -15,10 +15,10 @@ limitations under the License.
*/
.mx_EventTileBubble {
--EventTileBubble_margin-block: 10px; /* TODO: Use a spacing variable */
--EventTileBubble_margin-block: 10px;
background-color: $dark-panel-bg-color;
padding: 10px; /* TODO: Use a spacing variable */
padding: 10px;
border-radius: 8px;
/* Reserve space for external timestamps, but also cap the width */
max-width: min(calc(100% - 2 * var(--MessageTimestamp-width)), 600px);

4
res/css/views/messages/_ViewSourceEvent.pcss
View file

@ -29,7 +29,7 @@ limitations under the License.
pre {
line-height: 1.2;
margin: 3.5px 0; /* TODO: use a variable */
margin: 3.5px 0;
}
.mx_ViewSourceEvent_toggle {
@ -56,7 +56,7 @@ limitations under the License.
align-self: flex-end;
height: var(--ViewSourceEvent_toggle-size);
mask-position: 0 bottom;
margin-bottom: 5px; /* TODO: use a variable */
margin-bottom: 5px;
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
}
}

14
res/css/views/right_panel/_BaseCard.pcss
View file

@ -17,7 +17,7 @@ limitations under the License.
.mx_BaseCard {
--BaseCard_padding-inline: $spacing-8;
--BaseCard_EventTile_line-padding-block: 2px;
--BaseCard_EventTile-spacing-inline: 36px; /* TODO: Use a spacing variable */
--BaseCard_EventTile-spacing-inline: 36px;
--BaseCard_header-button-size: 24px;
padding: 0 var(--BaseCard_padding-inline);
@ -32,7 +32,7 @@ limitations under the License.
margin: $spacing-4 0 $spacing-12;
> h2 {
margin: 0 44px; /* TODO: Use a spacing variable */
margin: 0 44px;
font-size: $font-18px;
font-weight: var(--font-semi-bold);
overflow: hidden;
@ -79,7 +79,7 @@ limitations under the License.
margin-inline-start: var(--BaseCard_header-button-size);
.mx_BaseCard_header_title_heading {
margin-inline-start: 6px; /* TODO: Use a spacing variable */
margin-inline-start: 6px;
}
}
}
@ -159,7 +159,7 @@ limitations under the License.
}
.mx_BaseCard_Button {
padding: 10px; /* TODO: Use a spacing variable */
padding: 10px;
padding-inline-start: $spacing-12;
margin: 0;
position: relative;
@ -234,8 +234,8 @@ limitations under the License.
font-size: $font-12px;
color: $secondary-content;
padding-top: 10px; /* TODO: Use a spacing variable */
padding-bottom: 10px; /* TODO: Use a spacing variable */
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid $quinary-content;
box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05);
@ -243,7 +243,7 @@ limitations under the License.
.mx_ContextualMenu_chevron_top {
left: auto;
right: 22px; /* TODO: Use a spacing variable */
right: 22px;
border-bottom-color: $quinary-content;
&::after {

2
res/css/views/right_panel/_ThreadPanel.pcss
View file

@ -26,7 +26,7 @@ limitations under the License.
}
.mx_ThreadPanel_dropdown {
padding: 3px $spacing-4 3px $spacing-8; /* TODO: Use a spacing variable */
padding: 3px $spacing-4 3px $spacing-8;
border-radius: 4px;
line-height: 1.5;
user-select: none;

10
res/css/views/right_panel/_UserInfo.pcss
View file

@ -27,7 +27,7 @@ limitations under the License.
top: 0;
border-radius: 4px;
background-color: $dark-panel-bg-color;
margin: 9px; /* TODO: Use a variable */
margin: 9px;
z-index: 1; /* render on top of the right panel */
div {
@ -44,7 +44,7 @@ limitations under the License.
h2 {
font-size: $font-18px;
font-weight: var(--font-semi-bold);
margin: 18px 0 0 0; /* TODO: Use a variable */
margin: 18px 0 0 0;
}
.mx_UserInfo_container {
@ -151,7 +151,7 @@ limitations under the License.
}
p {
margin: 5px 0; /* TODO: Use a variable */
margin: 5px 0;
}
.mx_UserInfo_profile {
@ -179,7 +179,7 @@ limitations under the License.
}
.mx_E2EIcon {
margin-top: 3px; /* visual vertical centering to the top line of text. TODO: Use a variable */
margin-top: 3px; /* visual vertical centering to the top line of text. */
margin-inline-end: $spacing-4; /* margin from displayName */
min-width: 18px; /* convince flexbox to not collapse it */
}
@ -196,7 +196,7 @@ limitations under the License.
justify-content: center;
align-items: center;
margin: 6px 0; /* TODO: Use a variable */
margin: 6px 0;
.mx_UserInfo_roleDescription {
display: flex;

6
res/css/views/rooms/_EventTile.pcss
View file

@ -18,7 +18,7 @@ limitations under the License.
$left-gutter: 64px;
.mx_EventTile {
--EventTile_content-margin-inline-end: 34px; /* TODO: Use a spacing variable */
--EventTile_content-margin-inline-end: 34px;
--EventTile_group_line-spacing-block-start: 1px;
--EventTile_group_line-spacing-block-end: 3px;
--EventTile_group_line-spacing-inline-start: $left-gutter;
@ -347,7 +347,7 @@ $left-gutter: 64px;
> .mx_DisambiguatedProfile_mxid {
visibility: collapse;
margin-left: 0; /* Override the inherited margin. */
padding: 0 5px; /* TODO: Use a spacing variable */
padding: 0 5px;
}
&:hover {
@ -537,7 +537,7 @@ $left-gutter: 64px;
}
.mx_RoomView_timeline_rr_enabled & {
$inline-end-margin: 80px; /* TODO: Use a spacing variable */
$inline-end-margin: 80px;
.mx_ThreadSummary,
.mx_ThreadSummary_icon,

2
res/css/views/rooms/_IRCLayout.pcss
View file

@ -22,7 +22,7 @@ limitations under the License.
--name-width: 80px; /* cf. ircDisplayNameWidth on Settings.tsx */
--icon-width: 14px;
--line-height: var(--irc-line-height);
--right-padding: 5px; /* TODO: Use a spacing variable */
--right-padding: 5px;
line-height: var(--line-height) !important;

6
res/css/views/settings/_FontScalingPanel.pcss
View file

@ -24,11 +24,11 @@ limitations under the License.
display: flow-root;
&.mx_IRCLayout {
padding-top: 9px; /* TODO: Use a spacing variable */
padding-top: 9px;
}
.mx_EventTile[data-layout="bubble"] {
margin-top: 30px; /* TODO: Use a spacing variable */
margin-top: 30px;
}
.mx_EventTile_msgOption {
@ -39,7 +39,7 @@ limitations under the License.
.mx_FontScalingPanel_fontSlider {
display: flex;
align-items: center;
padding: 15px $spacing-20 35px; /* TODO: Use spacing variables */
padding: 15px $spacing-20 35px;
background: rgba($quinary-content, 0.2);
border-radius: 10px;
font-size: $font-10px;

2
res/css/views/settings/_ProfileSettings.pcss
View file

@ -57,7 +57,7 @@ limitations under the License.
> .mx_AccessibleButton_kind_link {
font-size: $font-14px;
margin-inline-end: 10px; /* TODO: Use a spacing variable */
margin-inline-end: 10px;
}
}
}

2
res/css/views/settings/tabs/_SettingsSection.pcss
View file

@ -16,7 +16,7 @@ limitations under the License.
.mx_SettingsSection {
--SettingsTab_section-margin-bottom-preferences-labs: 30px;
--SettingsTab_heading_nth_child-margin-top: 30px; /* TODO: Use a spacing variable */
--SettingsTab_heading_nth_child-margin-top: 30px;
--SettingsTab_tooltip-max-width: 120px; /* So it fits in the space provided by the page */
color: $primary-content;

6
res/css/views/settings/tabs/_SettingsTab.pcss
View file

@ -50,9 +50,9 @@ limitations under the License.
color: $secondary-content;
font-size: $font-14px;
display: block;
margin-top: 10px; /* TODO: Use a spacing variable */
margin-top: 10px;
margin-inline-end: 80px; /* Align with the rest of the view */
margin-bottom: 10px; /* TODO: Use a spacing variable */
margin-bottom: 10px;
margin-inline-start: 0;
}
@ -63,7 +63,7 @@ limitations under the License.
.mx_SettingsFlag {
margin-inline-end: $end-gutter;
margin-bottom: 10px; /* TODO: Use a spacing variable */
margin-bottom: 10px;
.mx_SettingsFlag_label {
vertical-align: middle;