VolkerE has uploaded a new change for review. ( 
https://gerrit.wikimedia.org/r/384094 )

Change subject: Use standard close icon
......................................................................

Use standard close icon

Making use of standard close icon and add `opacity` transition
for slight user feedback on states.

Bug: T50067
Change-Id: Ief0dc70d7a59ec1b21e0bcf6fea022c4f4394199
---
M resources/ext.gettingstarted.return.less
D resources/images/x.png
D resources/images/x.svg
M resources/lightbulb/lightbulb.postEdit.less
4 files changed, 26 insertions(+), 13 deletions(-)


  git pull ssh://gerrit.wikimedia.org:29418/mediawiki/extensions/GettingStarted 
refs/changes/94/384094/1

diff --git a/resources/ext.gettingstarted.return.less 
b/resources/ext.gettingstarted.return.less
index f77ce1c..bef28b6 100644
--- a/resources/ext.gettingstarted.return.less
+++ b/resources/ext.gettingstarted.return.less
@@ -93,11 +93,21 @@
 }
 
 .mw-gettingstarted-cta-close {
+       .background-image-svg( 'images/close.svg', 'images/close.png' );
        float: right;
-       width: 13px;
-       height: 13px;
+       width: 20px;
+       height: 20px;
        margin-left: 20px; /* Prevents text from getting close */
-       .background-image-svg( 'images/x.svg', 'images/x.png' );
+       opacity: 0.87; // = `#222` on `background-color: #fff`
+       .transition( opacity 100ms );
+
+       &:hover {
+               opacity: 0.73; // = `#454545` on `background-color: #fff`, 
closest to `#444`
+       }
+
+       &:active {
+               opacity: 1;
+       }
 }
 
 .mw-gettingstarted-cta-heading {
diff --git a/resources/images/x.png b/resources/images/x.png
deleted file mode 100644
index fd361f8..0000000
--- a/resources/images/x.png
+++ /dev/null
Binary files differ
diff --git a/resources/images/x.svg b/resources/images/x.svg
deleted file mode 100644
index 938fd51..0000000
--- a/resources/images/x.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 
6.00 Build 0)  -->
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd";>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"; 
xmlns:xlink="http://www.w3.org/1999/xlink"; x="0px" y="0px"
-        viewBox="0 0 96 96" enable-background="new 0 0 96 96" 
xml:space="preserve">
-<polygon fill="#AAAAAB" points="96,14 82,0 48,34 14,0 0,14 34,48 0,82 14,96 
48,62 82,96 96,82 62,48 "/>
-</svg>
diff --git a/resources/lightbulb/lightbulb.postEdit.less 
b/resources/lightbulb/lightbulb.postEdit.less
index 0180021..26b25e8 100644
--- a/resources/lightbulb/lightbulb.postEdit.less
+++ b/resources/lightbulb/lightbulb.postEdit.less
@@ -50,12 +50,22 @@
        }
 
        .mw-gettingstarted-lightbulb-notification-hide {
+               .background-image-svg( '../images/close.svg', 
'../images/close.png' );
                position: absolute;
-               width: 13px;
-               height: 13px;
-               .background-image-svg( '../images/x.svg', '../images/x.png' );
+               width: 20px;
+               height: 20px;
                top: 19px;
                right: 19px;
+               opacity: 0.87; // = `#222` on `background-color: #fff`
+               .transition( opacity 100ms );
+
+               &:hover {
+                       opacity: 0.73; // = `#454545` on `background-color: 
#fff`, closest to `#444`
+               }
+
+               &:active {
+                       opacity: 1;
+               }
        }
 
        .mw-gettingstarted-lightbulb-notification-body {

-- 
To view, visit https://gerrit.wikimedia.org/r/384094
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings

Gerrit-MessageType: newchange
Gerrit-Change-Id: Ief0dc70d7a59ec1b21e0bcf6fea022c4f4394199
Gerrit-PatchSet: 1
Gerrit-Project: mediawiki/extensions/GettingStarted
Gerrit-Branch: master
Gerrit-Owner: VolkerE <volke...@wikimedia.org>

_______________________________________________
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits

Reply via email to