From e980c146ff2218d199ac8b1aa712446e671ee150 Mon Sep 17 00:00:00 2001
From: Suguru Hirahara <luixxiul@users.noreply.github.com>
Date: Sat, 7 May 2022 19:08:00 +0000
Subject: [PATCH] Create a mixin of cancel button (#8526)

---
 res/css/_common.scss                              | 13 ++++++++++---
 res/css/structures/auth/_CompleteSecurity.scss    |  7 +------
 res/css/views/dialogs/_CompoundDialog.scss        |  7 +------
 res/css/views/elements/_EditableItemList.scss     |  4 +---
 res/css/views/right_panel/_VerificationPanel.scss |  6 +-----
 res/css/views/voip/_DialPadContextMenu.scss       |  7 +------
 res/css/views/voip/_DialPadModal.scss             |  7 +------
 7 files changed, 16 insertions(+), 35 deletions(-)

diff --git a/res/css/_common.scss b/res/css/_common.scss
index 94ec5ea011..9ef9720b6f 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -385,15 +385,22 @@ legend {
     color: $alert;
 }
 
-.mx_Dialog_cancelButton {
+@define-mixin customisedCancelButton {
     mask: url('$(res)/img/feather-customised/cancel.svg');
     mask-repeat: no-repeat;
     mask-position: center;
     mask-size: cover;
-    width: 14px;
-    height: 14px;
     background-color: $dialog-close-fg-color;
     cursor: pointer;
+    position: unset;
+    width: unset;
+    height: unset;
+}
+
+.mx_Dialog_cancelButton {
+    @mixin customisedCancelButton;
+    width: 14px;
+    height: 14px;
     position: absolute;
     top: 10px;
     right: 0;
diff --git a/res/css/structures/auth/_CompleteSecurity.scss b/res/css/structures/auth/_CompleteSecurity.scss
index bf5aeb15f5..4c3602ac26 100644
--- a/res/css/structures/auth/_CompleteSecurity.scss
+++ b/res/css/structures/auth/_CompleteSecurity.scss
@@ -34,14 +34,9 @@ limitations under the License.
 }
 
 .mx_CompleteSecurity_skip {
-    mask: url('$(res)/img/feather-customised/cancel.svg');
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: cover;
+    @mixin customisedCancelButton;
     width: 18px;
     height: 18px;
-    background-color: $dialog-close-fg-color;
-    cursor: pointer;
     position: absolute;
     right: 24px;
 }
diff --git a/res/css/views/dialogs/_CompoundDialog.scss b/res/css/views/dialogs/_CompoundDialog.scss
index d90c7e0f8e..28e7388e0e 100644
--- a/res/css/views/dialogs/_CompoundDialog.scss
+++ b/res/css/views/dialogs/_CompoundDialog.scss
@@ -38,14 +38,9 @@ limitations under the License.
         }
 
         .mx_CompoundDialog_cancelButton {
-            mask: url('$(res)/img/feather-customised/cancel.svg');
-            mask-repeat: no-repeat;
-            mask-position: center;
-            mask-size: cover;
+            @mixin customisedCancelButton;
             width: 20px;
             height: 20px;
-            background-color: $dialog-close-fg-color;
-            cursor: pointer;
 
             // Align with middle of title, 34px from right edge
             position: absolute;
diff --git a/res/css/views/elements/_EditableItemList.scss b/res/css/views/elements/_EditableItemList.scss
index 91ef20539c..8782456249 100644
--- a/res/css/views/elements/_EditableItemList.scss
+++ b/res/css/views/elements/_EditableItemList.scss
@@ -25,14 +25,12 @@ limitations under the License.
 }
 
 .mx_EditableItem_delete {
+    @mixin customisedCancelButton;
     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: $alert;
     mask-size: 100%;
 }
diff --git a/res/css/views/right_panel/_VerificationPanel.scss b/res/css/views/right_panel/_VerificationPanel.scss
index 0db93f58cc..ff5b5f0dc1 100644
--- a/res/css/views/right_panel/_VerificationPanel.scss
+++ b/res/css/views/right_panel/_VerificationPanel.scss
@@ -25,14 +25,10 @@ limitations under the License.
 
 .mx_UserInfo {
     .mx_EncryptionPanel_cancel {
-        mask: url('$(res)/img/feather-customised/cancel.svg');
-        mask-repeat: no-repeat;
-        mask-position: center;
-        mask-size: cover;
+        @mixin customisedCancelButton;
         width: 14px;
         height: 14px;
         background-color: $settings-subsection-fg-color;
-        cursor: pointer;
         position: absolute;
         z-index: 100;
         top: 14px;
diff --git a/res/css/views/voip/_DialPadContextMenu.scss b/res/css/views/voip/_DialPadContextMenu.scss
index 905486de8a..046db3133e 100644
--- a/res/css/views/voip/_DialPadContextMenu.scss
+++ b/res/css/views/voip/_DialPadContextMenu.scss
@@ -35,15 +35,10 @@ limitations under the License.
 }
 
 .mx_DialPadContextMenu_cancel {
+    @mixin customisedCancelButton;
     float: right;
-    mask: url('$(res)/img/feather-customised/cancel.svg');
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: cover;
     width: 14px;
     height: 14px;
-    background-color: $dialog-close-fg-color;
-    cursor: pointer;
 }
 
 .mx_DialPadContextMenu_header:focus-within {
diff --git a/res/css/views/voip/_DialPadModal.scss b/res/css/views/voip/_DialPadModal.scss
index ff1ded029c..75ad8a1902 100644
--- a/res/css/views/voip/_DialPadModal.scss
+++ b/res/css/views/voip/_DialPadModal.scss
@@ -45,15 +45,10 @@ limitations under the License.
 }
 
 .mx_DialPadModal_cancel {
+    @mixin customisedCancelButton;
     float: right;
-    mask: url('$(res)/img/feather-customised/cancel.svg');
-    mask-repeat: no-repeat;
-    mask-position: center;
-    mask-size: cover;
     width: 14px;
     height: 14px;
-    background-color: $dialog-close-fg-color;
-    cursor: pointer;
     margin-right: 16px;
 }