postEdit: Generate close button with CSS instead of HTML

Also remove :hover for cursor:pointer because cursor:pointer is always
shown on hovering.

Change-Id: Ib44f927a1764f703a8c31af363ebd5a8fca27375

diff --git a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.js b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.js
index 09eef57..e0ab45a 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.js
+++ b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.js
@@ -48,13 +48,11 @@
                        $content.append( data.message );
                }
 
-               $popup = $( '<div>' ).addClass( 'postedit mw-notification' ).append(
-                       $content,
-                       $( '<span>' ).addClass( 'postedit-close' ).text( '×' )
-               ).click( function () {
-                       clearTimeout( timeoutId );
-                       fadeOutConfirmation();
-               } );
+               $popup = $( '<div>' ).addClass( 'postedit mw-notification' ).append( $content )
+                       .click( function () {
+                               clearTimeout( timeoutId );
+                               fadeOutConfirmation();
+                       } );
 
                $container = $( '<div>' ).addClass( 'postedit-container' ).append( $popup );
                timeoutId = setTimeout( fadeOutConfirmation, 3000 );

diff --git a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
index 633fd20..467928d 100644 (file)
--- a/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
+++ b/resources/src/mediawiki.action/mediawiki.action.view.postEdit.less
@@ -8,10 +8,7 @@
        left: 50%;
        z-index: 1000;
        font-size: 13px;
-
-       &:hover {
-               cursor: pointer;
-       }
+       cursor: pointer;
 }
 
 .postedit {
@@ -50,7 +47,8 @@
        background-position: left;
 }
 
-.postedit-close {
+.postedit:after {
+       content: '×';
        position: absolute;
        padding: 0 0.8em;
        right: 0;
@@ -60,8 +58,8 @@
        line-height: 2.3em;
        text-shadow: 0 0.0625em 0 #fff;
        opacity: 0.2;
+}
 
-       .postedit:hover & {
-               opacity: 0.4;
-       }
+.postedit:hover:after {
+       opacity: 0.4;
 }