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 <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
