Merge remote-tracking branch 'upstream/develop' into compact-reply-rendering

res/css/views/elements/_AccessibleButton.scss

@@ -27,7 +27,7 @@ limitations under the License.
     text-align: center;
     border-radius: 4px;
     display: inline-block;
-    font-size: 14px;
+    font-size: $font-14px;
 }
 
 .mx_AccessibleButton_kind_primary {
@@ -36,12 +36,20 @@ limitations under the License.
     font-weight: 600;
 }
 
+.mx_AccessibleButton_kind_primary_outline {
+    color: $button-primary-bg-color;
+    background-color: $button-secondary-bg-color;
+    border: 1px solid $button-primary-bg-color;
+    font-weight: 600;
+}
+
 .mx_AccessibleButton_kind_secondary {
     color: $accent-color;
     font-weight: 600;
 }
 
-.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled {
+.mx_AccessibleButton_kind_primary.mx_AccessibleButton_disabled,
+.mx_AccessibleButton_kind_primary_outline.mx_AccessibleButton_disabled {
     opacity: 0.4;
 }
 
@@ -60,7 +68,14 @@ limitations under the License.
     background-color: $button-danger-bg-color;
 }
 
-.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled {
+.mx_AccessibleButton_kind_danger_outline {
+    color: $button-danger-bg-color;
+    background-color: $button-secondary-bg-color;
+    border: 1px solid $button-danger-bg-color;
+}
+
+.mx_AccessibleButton_kind_danger.mx_AccessibleButton_disabled,
+.mx_AccessibleButton_kind_danger_outline.mx_AccessibleButton_disabled {
     color: $button-danger-disabled-fg-color;
     background-color: $button-danger-disabled-bg-color;
 }

res/css/views/elements/_AddressTile.scss

@@ -19,9 +19,9 @@ limitations under the License.
     border-radius: 3px;
     background-color: rgba(74, 73, 74, 0.1);
     border: solid 1px $input-border-color;
-    line-height: 26px;
+    line-height: $font-26px;
     color: $primary-fg-color;
-    font-size: 14px;
+    font-size: $font-14px;
     font-weight: normal;
     margin-right: 4px;
 }

res/css/views/elements/_DirectorySearchBox.scss

@@ -18,7 +18,6 @@ limitations under the License.
     display: flex;
     padding-left: 9px;
     padding-right: 9px;
-    margin: 0 5px 0 0 !important;
 }
 
 .mx_DirectorySearchBox_joinButton {
@@ -33,7 +32,7 @@ limitations under the License.
     background-repeat: no-repeat;
     text-indent: 18px;
     font-weight: 600;
-    font-size: 12px;
+    font-size: $font-12px;
     user-select: none;
     cursor: pointer;
 }

res/css/views/elements/_Dropdown.scss

@@ -29,7 +29,7 @@ limitations under the License.
     position: relative;
     border-radius: 3px;
     border: 1px solid $strong-input-border-color;
-    font-size: 12px;
+    font-size: $font-12px;
     user-select: none;
 }
 
@@ -53,7 +53,7 @@ limitations under the License.
 
 .mx_Dropdown_option {
     height: 35px;
-    line-height: 35px;
+    line-height: $font-35px;
     padding-left: 8px;
     padding-right: 8px;
 }

res/css/views/elements/_EditableItemList.scss

@@ -20,14 +20,21 @@ limitations under the License.
 }
 
 .mx_EditableItem {
+    display: flex;
     margin-bottom: 5px;
-    margin-left: 15px;
 }
 
 .mx_EditableItem_delete {
+    order: 3;
     margin-right: 5px;
     cursor: pointer;
     vertical-align: middle;
+    width: 14px;
+    height: 14px;
+    mask-image: url('$(res)/img/feather-customised/cancel.svg');
+    mask-repeat: no-repeat;
+    background-color: $warning-color;
+    mask-size: 100%;
 }
 
 .mx_EditableItem_email {
@@ -36,12 +43,19 @@ limitations under the License.
 
 .mx_EditableItem_promptText {
     margin-right: 10px;
+    order: 2;
 }
 
 .mx_EditableItem_confirmBtn {
     margin-right: 5px;
 }
 
+.mx_EditableItem_item {
+    flex: auto 1 0;
+    order: 1;
+}
+
 .mx_EditableItemList_label {
     margin-bottom: 5px;
 }
+

res/css/views/elements/_EventListSummary.scss

@@ -19,7 +19,7 @@ limitations under the License.
 }
 
 .mx_TextualEvent.mx_EventListSummary_summary {
-    font-size: 14px;
+    font-size: $font-14px;
     display: inline-flex;
 }
 
@@ -27,7 +27,7 @@ limitations under the License.
     display: inline-block;
     margin-right: 8px;
     padding-top: 8px;
-    line-height: 12px;
+    line-height: $font-12px;
 }
 
 .mx_EventListSummary_avatars .mx_BaseAvatar {
@@ -46,19 +46,19 @@ limitations under the License.
 .mx_EventListSummary_line {
     border-bottom: 1px solid $primary-hairline-color;
     margin-left: 63px;
-    line-height: 30px;
+    line-height: $font-30px;
 }
 
 .mx_MatrixChat_useCompactLayout {
     .mx_EventListSummary {
-        font-size: 13px;
+        font-size: $font-13px;
         .mx_EventTile_line {
-            line-height: 20px;
+            line-height: $font-20px;
         }
     }
 
     .mx_EventListSummary_line {
-        line-height: 22px;
+        line-height: $font-22px;
     }
 
     .mx_EventListSummary_toggle {
@@ -66,6 +66,6 @@ limitations under the License.
     }
 
     .mx_TextualEvent.mx_EventListSummary_summary {
-        font-size: 13px;
+        font-size: $font-13px;
     }
 }

res/css/views/elements/_Field.scss

@@ -40,7 +40,7 @@ limitations under the License.
 .mx_Field textarea {
     font-weight: normal;
     font-family: $font-family;
-    font-size: 14px;
+    font-size: $font-14px;
     border: none;
     // Even without a border here, we still need this avoid overlapping the rounded
     // corners on the field above.
@@ -102,7 +102,7 @@ limitations under the License.
         background-color 0.25s ease-out 0.1s;
     color: $primary-fg-color;
     background-color: transparent;
-    font-size: 14px;
+    font-size: $font-14px;
     position: absolute;
     left: 0px;
     top: 0px;
@@ -126,7 +126,7 @@ limitations under the License.
         color 0.25s ease-out 0s,
         top 0.25s ease-out 0s,
         background-color 0.25s ease-out 0s;
-    font-size: 10px;
+    font-size: $font-10px;
     top: -13px;
     padding: 0 2px;
     background-color: $field-focused-label-bg-color;

res/css/views/elements/_FormButton.scss

@@ -15,9 +15,9 @@ limitations under the License.
 */
 
 .mx_FormButton {
-    line-height: 16px;
+    line-height: $font-16px;
     padding: 5px 15px;
-    font-size: 12px;
+    font-size: $font-12px;
     height: min-content;
 
     &:not(:last-child) {

res/css/views/elements/_ImageView.scss

@@ -102,13 +102,13 @@ limitations under the License.
 }
 
 .mx_ImageView_name {
-    font-size: 18px;
+    font-size: $font-18px;
     margin-bottom: 6px;
     word-wrap: break-word;
 }
 
 .mx_ImageView_metadata {
-    font-size: 15px;
+    font-size: $font-15px;
     opacity: 0.5;
 }
 
@@ -118,13 +118,13 @@ limitations under the License.
     margin-bottom: 6px;
     border-radius: 5px;
     background-color: $lightbox-bg-color;
-    font-size: 14px;
+    font-size: $font-14px;
     padding: 9px;
     border: 1px solid $lightbox-border-color;
 }
 
 .mx_ImageView_size {
-    font-size: 11px;
+    font-size: $font-11px;
 }
 
 .mx_ImageView_link {
@@ -133,7 +133,7 @@ limitations under the License.
 }
 
 .mx_ImageView_button {
-    font-size: 15px;
+    font-size: $font-15px;
     opacity: 0.5;
     margin-top: 18px;
     cursor: pointer;

res/css/views/elements/_InteractiveTooltip.scss

@@ -24,7 +24,7 @@ limitations under the License.
     background-color: $interactive-tooltip-bg-color;
     color: $interactive-tooltip-fg-color;
     position: absolute;
-    font-size: 10px;
+    font-size: $font-10px;
     font-weight: 600;
     padding: 6px;
     z-index: 5001;

res/css/views/elements/_RichText.scss

@@ -9,7 +9,7 @@
     border-radius: 16px;
     display: inline-block;
     height: 20px;
-    line-height: 20px;
+    line-height: $font-20px;
     padding-left: 5px;
 }
 

res/css/views/elements/_Tooltip.scss

@@ -58,8 +58,8 @@ limitations under the License.
     z-index: 4000; // Higher than dialogs so tooltips can be used in dialogs
     padding: 10px;
     pointer-events: none;
-    line-height: 14px;
-    font-size: 12px;
+    line-height: $font-14px;
+    font-size: $font-12px;
     font-weight: 600;
     color: $primary-fg-color;
     max-width: 200px;
@@ -82,7 +82,7 @@ limitations under the License.
     text-align: center;
     border: none;
     border-radius: 3px;
-    font-size: 14px;
+    font-size: $font-14px;
     line-height: 1.2;
     padding: 6px 8px;
 

res/css/views/elements/_TooltipButton.scss

@@ -28,7 +28,7 @@ limitations under the License.
     transition: opacity 0.2s ease-in;
     opacity: 0.6;
 
-    line-height: 11px;
+    line-height: $font-11px;
     text-align: center;
 
     cursor: pointer;