Add a context menu to rooms in the new room list

The tag options are not implemented out of concern for diff size. 

This splits the context menu classes out to a new "iconized" style which is common across a number of context menus, including the UserMenu.

Some of the badge/sublist styles had to change to better accommodate the menu icon lining up.

This also contains the framework required for https://github.com/vector-im/riot-web/issues/13961

res/css/_common.scss

@@ -581,3 +581,118 @@ input[type=text]:focus, input[type=password]:focus, textarea:focus {
     // So it fits in the space provided by the page
     max-width: 120px;
 }
+
+// A context menu that largely fits the | [icon]    [label] | format.
+.mx_IconizedContextMenu {
+    // Put 20px of padding around the whole menu. We do this instead of a
+    // simple `padding: 20px` rule so the horizontal rules added by the
+    // optionLists is rendered correctly (full width).
+    > * {
+        padding-left: 20px;
+        padding-right: 20px;
+
+        &:first-child {
+            padding-top: 20px;
+        }
+
+        &:last-child {
+            padding-bottom: 20px;
+        }
+    }
+
+    .mx_IconizedContextMenu_optionList {
+        // the notFirst class is for cases where the optionList might be under a header of sorts.
+        &:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
+            margin-top: 20px;
+
+            // This is a bit of a hack when we could just use a simple border-top property,
+            // however we have a (kinda) good reason for doing it this way: we need opacity.
+            // To get the right color, we need an opacity modifier which means we have to work
+            // around the problem. PostCSS doesn't support the opacity() function, and if we
+            // use something like postcss-functions we quickly run into an issue where the
+            // function we would define gets passed a CSS variable for custom themes, which
+            // can't be converted easily even when considering https://stackoverflow.com/a/41265350/7037379
+            //
+            // Therefore, we just hack in a line and border the thing ourselves
+            &::before {
+                border-top: 1px solid $primary-fg-color;
+                opacity: 0.1;
+                content: '';
+
+                // Counteract the padding problems (width: 100% ignores the 40px padding,
+                // unless we position it absolutely then it does the right thing).
+                width: 100%;
+                position: absolute;
+                left: 0;
+            }
+        }
+
+        ul {
+            list-style: none;
+            margin: 0;
+            padding: 0;
+
+            li {
+                margin: 0;
+                padding: 20px 0 0;
+
+                .mx_AccessibleButton {
+                    text-decoration: none;
+                    color: $primary-fg-color;
+                    font-size: $font-15px;
+                    line-height: $font-24px;
+
+                    // Create a flexbox to more easily define the list items
+                    display: flex;
+                    align-items: center;
+
+                    img, .mx_IconizedContextMenu_icon { // icons
+                        width: 16px;
+                        min-width: 16px;
+                        max-width: 16px;
+                    }
+
+                    span:last-child { // labels
+                        padding-left: 14px;
+                        width: 100%;
+                        flex: 1;
+
+                        // Ellipsize any text overflow
+                        text-overflow: ellipsis;
+                        overflow: hidden;
+                        white-space: nowrap;
+                    }
+                }
+            }
+        }
+    }
+
+    &.mx_IconizedContextMenu_compact {
+        > * {
+            padding-left: 11px;
+            padding-right: 16px;
+
+            &:first-child {
+                padding-top: 13px;
+            }
+
+            &:last-child {
+                padding-bottom: 13px;
+            }
+        }
+
+        .mx_IconizedContextMenu_optionList {
+            &:nth-child(n + 2), .mx_IconizedContextMenu_optionList_notFirst {
+                margin-top: 10px;
+
+                li:first-child {
+                    padding-top: 10px;
+                }
+            }
+
+            li:first-child {
+                padding-top: 0;
+            }
+        }
+    }
+}