Merge branch 'develop' into improved-forwarding-ui

res/css/structures/_ContextualMenu.scss

@@ -115,8 +115,3 @@ limitations under the License.
     border-top: 8px solid $menu-bg-color;
     border-right: 8px solid transparent;
 }
-
-.mx_ContextualMenu_spinner {
-    display: block;
-    margin: 0 auto;
-}

res/css/views/elements/_InlineSpinner.scss

@@ -18,7 +18,11 @@ limitations under the License.
     display: inline;
 }
 
-.mx_InlineSpinner_spin img {
+.mx_InlineSpinner img, .mx_InlineSpinner_icon {
     margin: 0px 6px;
     vertical-align: -3px;
 }
+
+.mx_InlineSpinner_icon {
+    display: inline-block;
+}

res/css/views/elements/_MiniAvatarUploader.scss

@@ -28,8 +28,7 @@ limitations under the License.
         top: 0;
     }
 
-    &::before, &::after {
-        content: '';
+    .mx_MiniAvatarUploader_indicator {
         position: absolute;
 
         height: 26px;
@@ -37,27 +36,22 @@ limitations under the License.
 
         right: -6px;
         bottom: -6px;
-    }
 
-    &::before {
         background-color: $primary-bg-color;
         border-radius: 50%;
         z-index: 1;
-    }
 
-    &::after {
-        background-color: $secondary-fg-color;
-        mask-position: center;
-        mask-repeat: no-repeat;
-        mask-image: url('$(res)/img/element-icons/camera.svg');
-        mask-size: 16px;
-        z-index: 2;
-    }
+        .mx_MiniAvatarUploader_cameraIcon {
+            height: 100%;
+            width: 100%;
 
-    &.mx_MiniAvatarUploader_busy::after {
-        background: url("$(res)/img/spinner.gif") no-repeat center;
-        background-size: 80%;
-        mask: unset;
+            background-color: $secondary-fg-color;
+            mask-position: center;
+            mask-repeat: no-repeat;
+            mask-image: url('$(res)/img/element-icons/camera.svg');
+            mask-size: 16px;
+            z-index: 2;
+        }
     }
 }
 

res/css/views/elements/_Spinner.scss

@@ -26,3 +26,19 @@ limitations under the License.
 .mx_MatrixChat_middlePanel .mx_Spinner {
     height: auto;
 }
+
+@keyframes spin {
+    from {
+        transform: rotateZ(0deg);
+    }
+    to {
+        transform: rotateZ(360deg);
+    }
+}
+
+.mx_Spinner_icon {
+    background-color: $primary-fg-color;
+    mask: url('$(res)/img/spinner.svg');
+    mask-size: contain;
+    animation: 1.1s steps(12, end) infinite spin;
+}

res/css/views/right_panel/_RoomSummaryCard.scss

@@ -36,6 +36,7 @@ limitations under the License.
             -webkit-box-orient: vertical;
             overflow: hidden;
             text-overflow: ellipsis;
+            white-space: pre-wrap;
         }
 
         .mx_RoomSummaryCard_avatar {

res/css/views/rooms/_NewRoomIntro.scss

@@ -18,8 +18,8 @@ limitations under the License.
     margin: 40px 0 48px 64px;
 
     .mx_MiniAvatarUploader_hasAvatar:not(.mx_MiniAvatarUploader_busy):not(:hover) {
-        &::before, &::after {
-            content: unset;
+        .mx_MiniAvatarUploader_indicator {
+            display: none;
         }
     }