Include mx_MessageActionBar_maskButton in mx_MessageActionBar (#8792)

* Include mx_MessageActionBar_maskButton in mx_MessageActionBar Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * yarn run lint:style --fix Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
matrix-org · Jun 16, 2022 · 3b28b11 · 3b28b11
1 parent fe8c267
commit 3b28b11
Showing 1 changed file with 70 additions and 70 deletions.
diff --git a/res/css/views/messages/_MessageActionBar.scss b/res/css/views/messages/_MessageActionBar.scss
@@ -67,96 +67,96 @@ limitations under the License.
             z-index: var(--MessageActionBar-item-hover-zIndex);
         }
     }
-}
 
-.mx_MessageActionBar_maskButton {
-    width: var(--MessageActionBar-size-button);
-    height: var(--MessageActionBar-size-button);
+    .mx_MessageActionBar_maskButton {
+        width: var(--MessageActionBar-size-button);
+        height: var(--MessageActionBar-size-button);
 
-    &:disabled,
-    &[disabled] {
-        cursor: not-allowed;
-        opacity: .75;
-    }
+        &:disabled,
+        &[disabled] {
+            cursor: not-allowed;
+            opacity: .75;
+        }
 
-    &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        left: 0;
-        height: 100%;
-        width: 100%;
-        mask-size: 18px;
-        mask-repeat: no-repeat;
-        mask-position: center;
-        background-color: $secondary-content;
-    }
+        &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            height: 100%;
+            width: 100%;
+            mask-size: 18px;
+            mask-repeat: no-repeat;
+            mask-position: center;
+            background-color: $secondary-content;
+        }
 
-    &:hover::after {
-        background-color: $primary-content;
-    }
+        &:hover::after {
+            background-color: $primary-content;
+        }
 
-    &.mx_MessageActionBar_reactButton::after {
-        mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
-    }
+        &.mx_MessageActionBar_reactButton::after {
+            mask-image: url('$(res)/img/element-icons/room/message-bar/emoji.svg');
+        }
 
-    &.mx_MessageActionBar_replyButton::after {
-        mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
-    }
+        &.mx_MessageActionBar_replyButton::after {
+            mask-image: url('$(res)/img/element-icons/room/message-bar/reply.svg');
+        }
 
-    &.mx_MessageActionBar_threadButton {
-        &::after {
-            mask-image: url('$(res)/img/element-icons/message/thread.svg');
+        &.mx_MessageActionBar_threadButton {
+            &::after {
+                mask-image: url('$(res)/img/element-icons/message/thread.svg');
+            }
+
+            .mx_Indicator {
+                background: $links;
+                animation-iteration-count: infinite;
+            }
         }
 
-        .mx_Indicator {
-            background: $links;
-            animation-iteration-count: infinite;
+        &.mx_MessageActionBar_editButton::after {
+            mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
         }
-    }
 
-    &.mx_MessageActionBar_editButton::after {
-        mask-image: url('$(res)/img/element-icons/room/message-bar/edit.svg');
-    }
+        &.mx_MessageActionBar_optionsButton::after {
+            mask-image: url('$(res)/img/element-icons/context-menu.svg');
+        }
 
-    &.mx_MessageActionBar_optionsButton::after {
-        mask-image: url('$(res)/img/element-icons/context-menu.svg');
-    }
+        &.mx_MessageActionBar_resendButton::after {
+            mask-image: url('$(res)/img/element-icons/retry.svg');
+        }
 
-    &.mx_MessageActionBar_resendButton::after {
-        mask-image: url('$(res)/img/element-icons/retry.svg');
-    }
+        &.mx_MessageActionBar_cancelButton::after {
+            mask-image: url('$(res)/img/element-icons/trashcan.svg');
+        }
 
-    &.mx_MessageActionBar_cancelButton::after {
-        mask-image: url('$(res)/img/element-icons/trashcan.svg');
-    }
+        &.mx_MessageActionBar_downloadButton {
+            &::after {
+                mask-size: 14px;
+                mask-image: url('$(res)/img/download.svg');
+            }
 
-    &.mx_MessageActionBar_downloadButton {
-        &::after {
-            mask-size: 14px;
-            mask-image: url('$(res)/img/download.svg');
+            &.mx_MessageActionBar_downloadSpinnerButton::after {
+                background-color: transparent; // hide the download icon mask
+            }
         }
 
-        &.mx_MessageActionBar_downloadSpinnerButton::after {
-            background-color: transparent; // hide the download icon mask
+        &.mx_MessageActionBar_expandMessageButton::after {
+            mask-size: 12px;
+            mask-image: url('$(res)/img/element-icons/expand-message.svg');
         }
-    }
-
-    &.mx_MessageActionBar_expandMessageButton::after {
-        mask-size: 12px;
-        mask-image: url('$(res)/img/element-icons/expand-message.svg');
-    }
 
-    &.mx_MessageActionBar_collapseMessageButton::after {
-        mask-size: 12px;
-        mask-image: url('$(res)/img/element-icons/collapse-message.svg');
-    }
+        &.mx_MessageActionBar_collapseMessageButton::after {
+            mask-size: 12px;
+            mask-image: url('$(res)/img/element-icons/collapse-message.svg');
+        }
 
-    &.mx_MessageActionBar_viewInRoomButton::after {
-        mask-image: url('$(res)/img/element-icons/view-in-room.svg');
-    }
+        &.mx_MessageActionBar_viewInRoomButton::after {
+            mask-image: url('$(res)/img/element-icons/view-in-room.svg');
+        }
 
-    &.mx_MessageActionBar_copyLinkButton::after {
-        mask-image: url('$(res)/img/element-icons/link.svg');
+        &.mx_MessageActionBar_copyLinkButton::after {
+            mask-image: url('$(res)/img/element-icons/link.svg');
+        }
     }
 }