jenkins-bot has submitted this change and it was merged. (
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
A resources/images/close.png
A resources/images/close.svg
D resources/images/x.png
D resources/images/x.svg
M resources/lightbulb/lightbulb.postEdit.less
6 files changed, 32 insertions(+), 13 deletions(-)
Approvals:
jenkins-bot: Verified
Jforrester: Looks good to me, approved
diff --git a/resources/ext.gettingstarted.return.less
b/resources/ext.gettingstarted.return.less
index f77ce1c..3e6f08f 100644
--- a/resources/ext.gettingstarted.return.less
+++ b/resources/ext.gettingstarted.return.less
@@ -93,11 +93,22 @@
}
.mw-gettingstarted-cta-close {
+ .background-image-svg( 'images/close.svg', 'images/close.png' );
float: right;
- width: 13px;
- height: 13px;
+ width: 20px;
+ height: 20px;
+ margin-top: 4px;
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/close.png b/resources/images/close.png
new file mode 100644
index 000..80dde95
--- /dev/null
+++ b/resources/images/close.png
Binary files differ
diff --git a/resources/images/close.svg b/resources/images/close.svg
new file mode 100644
index 000..44df45b
--- /dev/null
+++ b/resources/images/close.svg
@@ -0,0 +1,5 @@
+
+http://www.w3.org/2000/svg; width="20" height="20" viewBox="0 0 20
20">
+
+
+
\ No newline at end of file
diff --git a/resources/images/x.png b/resources/images/x.png
deleted file mode 100644
index fd361f8..000
--- 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..000
--- a/resources/images/x.svg
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
-http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd;>
-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">
-
-
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: merged
Gerrit-Change-Id: Ief0dc70d7a59ec1b21e0bcf6fea022c4f4394199
Gerrit-PatchSet: 2
Gerrit-Project: mediawiki/extensions/GettingStarted
Gerrit-Branch: master
Gerrit-Owner: VolkerE
Gerrit-Reviewer: Jforrester
Gerrit-Reviewer: Mattflaschen
Gerrit-Reviewer: Phuedx
Gerrit-Reviewer: Swalling
Gerrit-Reviewer: jenkins-bot <>
___
MediaWiki-commits mailing list
MediaWiki-commits@lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
