From 675d454badabcb4df8be4b2ee87c3cccba09b59b Mon Sep 17 00:00:00 2001
From: Volker E <volker.e@wikimedia.org>
Date: Wed, 5 Oct 2016 12:03:41 -0700
Subject: [PATCH] build: Extend stylelint to further rules

Extending stylelint to include further general rules
and remove obsolete .csslintrc file.

Change-Id: I6957cc3731c39f495e985c9dbd40363102e2e6f0
---
 .csslintrc                                    | 13 -----
 .stylelintrc                                  |  4 +-
 modules/nojs/mw.echo.badge.less               |  2 +
 .../mw.echo.ui.NotificationItemWidget.less    | 56 +++++++++----------
 ...echo.ui.NotificationItemWidget.modern.less | 36 ++++++------
 5 files changed, 51 insertions(+), 60 deletions(-)
 delete mode 100644 .csslintrc

diff --git a/.csslintrc b/.csslintrc
deleted file mode 100644
index ec188a930..000000000
--- a/.csslintrc
+++ /dev/null
@@ -1,13 +0,0 @@
-{
-	"adjoining-classes": false,
-	"box-model": false,
-	"box-sizing": false,
-	"fallback-colors": false,
-	"ids": false,
-	"important": false,
-	"outline-none": false,
-	"overqualified-elements": false,
-	"qualified-headings": false,
-	"universal-selector": false,
-	"unqualified-attributes": false
-}
diff --git a/.stylelintrc b/.stylelintrc
index c0e9c2f41..c0d30c62e 100644
--- a/.stylelintrc
+++ b/.stylelintrc
@@ -2,8 +2,6 @@
 	"extends": "stylelint-config-wikimedia",
 	"rules": {
 		"declaration-no-important": null,
-		"no-descending-specificity": null,
-		"selector-no-id": null,
-		"selector-no-vendor-prefix": null
+		"selector-no-id": null
 	}
 }
diff --git a/modules/nojs/mw.echo.badge.less b/modules/nojs/mw.echo.badge.less
index df6c29fc2..2ad79e812 100644
--- a/modules/nojs/mw.echo.badge.less
+++ b/modules/nojs/mw.echo.badge.less
@@ -1,6 +1,7 @@
 @import '../echo.variables';
 @import 'mediawiki.mixins';
 
+/* stylelint-disable no-descending-specificity */
 /* We have to include the #pt-notifications selector due to monobook */
 .mw-echo-notifications-badge {
 	#pt-notifications-alert &,
@@ -80,3 +81,4 @@
 		}
 	}
 }
+/* stylelint-enable no-descending-specificity */
diff --git a/modules/styles/mw.echo.ui.NotificationItemWidget.less b/modules/styles/mw.echo.ui.NotificationItemWidget.less
index 875d754a6..e9615d312 100644
--- a/modules/styles/mw.echo.ui.NotificationItemWidget.less
+++ b/modules/styles/mw.echo.ui.NotificationItemWidget.less
@@ -3,6 +3,7 @@
 @import '../echo.mixins';
 
 .mw-echo-ui-notificationItemWidget {
+	background-color: #f1f1f1;
 	position: relative;
 	white-space: normal;
 	padding: 0.8em 1em 0.5em 1em;
@@ -11,10 +12,22 @@
 	border: 1px solid #ddd;
 	border-bottom: 0;
 
+	&:hover {
+		background-color: #ececec;
+	}
+
 	&:last-child {
 		border-bottom: 1px solid #ddd;
 	}
 
+	&-unread {
+		background-color: #fff;
+
+		&:hover {
+			background-color: #fafafa;
+		}
+	}
+
 	> a,
 	&:hover > a {
 		text-decoration: none;
@@ -34,12 +47,12 @@
 	}
 
 	&-icon {
+		position: absolute;
+
 		img {
 			height: 30px;
 			width: 30px;
 		}
-
-		position: absolute;
 	}
 
 	&-content {
@@ -117,6 +130,19 @@
 		}
 	}
 
+	&-markAsReadButton {
+		float: right;
+		font-size: 1em;
+		// Compensate for the padding in the item widget
+		margin-top: -0.8em;
+		margin-right: -1em;
+		padding: 0;
+
+		.mw-echo-ui-notificationItemWidget-bundled & {
+			margin-top: 0;
+		}
+	}
+
 	// Table layout only for the content inside bundles
 	&-bundled {
 		display: table;
@@ -210,19 +236,6 @@
 		}
 	}
 
-	&-markAsReadButton {
-		float: right;
-		font-size: 1em;
-		// Compensate for the padding in the item widget
-		margin-top: -0.8em;
-		margin-right: -1em;
-		padding: 0;
-
-		.mw-echo-ui-notificationItemWidget-bundled & {
-			margin-top: 0;
-		}
-	}
-
 	&-initiallyUnseen {
 		-webkit-animation-name: unseen-fadeout-to-read;
 		animation-name: unseen-fadeout-to-read;
@@ -241,19 +254,6 @@
 		}
 	}
 
-	background-color: #f1f1f1;
-
-	&:hover {
-		background-color: #ececec;
-	}
-	&-unread {
-		background-color: #fff;
-
-		&:hover {
-			background-color: #fafafa;
-		}
-	}
-
 	// NOTE: The internal styling of the notifications is outside this file, because
 	// it also affects the notifications in Special:Notifications
 	// These styles are in modules/nojs/ext.echo.notifications.less
diff --git a/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less b/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less
index f5c4ef943..b6edb0df9 100644
--- a/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less
+++ b/modules/styles/mw.echo.ui.NotificationItemWidget.modern.less
@@ -1,21 +1,25 @@
-.mw-echo-ui-notificationItemWidget {
-	#p-personal & a,
-	#p-personal & a.new {
-		// Oh and double everything for :hover since Modern does that too.
-		&,
-		&:hover {
-			// In modern, the hover color is white, which is unhelpful.
-			color: #666;
-			text-decoration: none;
+/* stylelint-disable no-descending-specificity */
+#p-personal {
+	.mw-echo-ui-notificationItemWidget {
+		& a,
+		& a.new {
+			// Oh and double everything for :hover since Modern does that too.
+			&,
+			&:hover {
+				// In modern, the hover color is white, which is unhelpful.
+				color: #666;
+				text-decoration: none;
+			}
 		}
 	}
-}
 
-#p-personal .mw-echo-ui-notificationBadgeButtonPopupWidget-footer a {
-	color: #666;
-}
+	// Override personal tools padding for links
+	li .mw-echo-state a {
+		padding: 0;
+	}
 
-// Override personal tools padding for links
-#p-personal li .mw-echo-state a {
-	padding: 0;
+	.mw-echo-ui-notificationBadgeButtonPopupWidget-footer a {
+		color: #666;
+	}
 }
+/* stylelint-enable no-descending-specificity */