postEdit: Use standard close icon

Making use of standard close icon and also prevent screenreaders
from reading 'x' if they ever come across the message.
Also slightly bumping `font-size` to better harmonize
with close icon and clean-up CSS.

Bug: T50067
Change-Id: I82cdad23462f62d5e8ab2eef8632a2b3ac35e93f

diff --git a/resources/src/mediawiki.action/images/close.png b/resources/src/mediawiki.action/images/close.png
new file mode 100644 (file)
index 0000000..80dde95
Binary files /dev/null and b/resources/src/mediawiki.action/images/close.png differ

diff --git a/resources/src/mediawiki.action/images/close.svg b/resources/src/mediawiki.action/images/close.svg
new file mode 100644 (file)
index 0000000..7f75511
--- /dev/null
+++ b/resources/src/mediawiki.action/images/close.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
+       <path d="M3.636 2.222l14.142 14.142-1.414 1.414L2.222 3.636z"/>
+       <path d="M17.778 3.636L3.636 17.778l-1.414-1.414L16.364 2.222z"/>
+</svg>

diff --git a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
index e1fa925..d19f098 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
+++ b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
@@ -7,7 +7,7 @@
        height: 0;
        left: 50%;
        z-index: 1000;
-       font-size: 13px;
+       font-size: 14px;
        cursor: pointer;
 }
 
@@ -19,6 +19,24 @@
        opacity: 1;
        .transition( opacity 250ms );
 
+       &:after {
+               content: '';
+               background: no-repeat center center;
+               .background-image-svg( 'images/close.svg', 'images/close.png' );
+               background-size: 12px 12px;
+               position: absolute;
+               right: 0.4em;
+               top: 0;
+               bottom: 0;
+               min-width: 32px;
+               min-height: 32px;
+               opacity: 0.87;
+
+               &:hover {
+                       opacity: 1;
+               }
+       }
+
        &.mw-notification {
                padding-right: 3em;
        }
@@ -29,32 +47,13 @@
 }
 
 .postedit-icon {
-       padding-left: 41px; /* 25 + 8 + 8 */
+       padding-left: 25px;
        /* like min-height, but old IE compatible and keeps text vertically aligned, too */
        line-height: 25px;
        background-repeat: no-repeat;
-       background-position: 8px 50%;
 }
 
 .postedit-icon-checkmark {
        /* @embed */
        background-image: url( images/green-checkmark.png );
-       background-position: left;
-}
-
-.postedit:after {
-       content: '×';
-       position: absolute;
-       padding: 0 0.8em;
-       right: 0;
-       top: 0;
-       font-size: 1.25em;
-       font-weight: bold;
-       line-height: 2.3em;
-       text-shadow: 0 0.0625em 0 #fff;
-       opacity: 0.2;
-}
-
-.postedit:hover:after {
-       opacity: 0.4;
 }