Rename PostCSS files to .pcss (#9013)

* Rename PostCSS files to `.pcss` * Make Stylelint happy * Delint * Rename new files too * delint * Fix bad comment placement
2022-07-15 14:53:23 +01:00 · 2022-07-15 14:53:23 +01:00 · 01f4bb8c78
commit 01f4bb8c78
parent 7842d5165c
371 changed files with 740 additions and 1045 deletions
--- a/res/css/views/elements/_GenericEventListSummary.pcss
+++ b/res/css/views/elements/_GenericEventListSummary.pcss
@ -0,0 +1,125 @@
+/*
+Copyright 2016 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+.mx_GenericEventListSummary {
+    position: relative;
+
+    .mx_GenericEventListSummary_avatars {
+        margin-right: $spacing-8;
+    }
+
+    &[data-layout="irc"],
+    &[data-layout="group"] {
+        .mx_GenericEventListSummary_toggle {
+            float: right;
+            margin-inline: 0 10px;
+        }
+    }
+
+    &[data-layout="group"] {
+        margin-top: $spacing-8;
+    }
+
+    &[data-layout="bubble"] {
+        --maxWidth: 70%;
+        display: flex;
+        margin-left: calc(var(--avatarSize) + var(--gutterSize));
+
+        .mx_GenericEventListSummary_toggle {
+            margin-block: 0;
+
+            &[aria-expanded="false"] {
+                order: 9; // TODO: Remove
+            }
+
+            &[aria-expanded="true"] {
+                margin-inline-start: auto; // reduce clickable area
+                margin-inline-end: var(--EventTile_bubble-margin-inline-end); // as the parent has zero margin
+            }
+        }
+
+        .mx_GenericEventListSummary_line {
+            display: none;
+        }
+
+        &[data-expanded="false"] {
+            align-items: center;
+            justify-content: space-between;
+            column-gap: 5px;
+        }
+
+        // ideally we'd use display=contents here for the layout to all work regardless of the *ELS but
+        // that breaks ScrollPanel's reliance upon offsetTop so we have to have a bit more finesse.
+        &[data-expanded="true"] {
+            flex-direction: column;
+            margin: 0;
+        }
+
+        &::after {
+            content: "";
+            clear: both;
+        }
+
+        &:hover {
+            &::before {
+                background: transparent;
+            }
+        }
+    }
+
+    .mx_MatrixChat_useCompactLayout & {
+        font-size: $font-13px;
+        margin-top: $spacing-4;
+
+        .mx_EventTile_line {
+            line-height: $font-20px;
+        }
+
+        .mx_GenericEventListSummary_line {
+            line-height: $font-22px;
+        }
+
+        .mx_TextualEvent.mx_GenericEventListSummary_summary {
+            font-size: $font-13px;
+        }
+    }
+}
+
+.mx_GenericEventListSummary_unstyledList {
+    list-style: none;
+    padding: 0;
+}
+
+.mx_TextualEvent.mx_GenericEventListSummary_summary {
+    font-size: $font-14px;
+    display: inline-flex;
+}
+
+.mx_GenericEventListSummary_avatars {
+    display: inline-block;
+    line-height: $font-12px;
+
+    .mx_BaseAvatar {
+        margin-right: -4px;
+        cursor: pointer;
+    }
+}
+
+.mx_GenericEventListSummary_line {
+    border-bottom: 1px solid $primary-hairline-color;
+    margin-left: 63px;
+    line-height: $font-30px;
+}