Create a mixin of cancel button (#8526)

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;

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;
 }

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;

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%;
 }

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;

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 {

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;
 }