From: jrobson <jrobson@wikimedia.org>
Date: Mon, 30 Sep 2013 17:39:29 +0000 (-0700)
Subject: Rewrite collapsibleNav as LESS file
X-Git-Tag: 1.31.0-rc.0~18603^2
X-Git-Url: https://git.cyclocoop.org/%27.WWW_URL.%27admin/?a=commitdiff_plain;h=3a4f170590e36ce0c6b5dee212480c79ee65d85b;p=lhc%2Fweb%2Fwiklou.git

Rewrite collapsibleNav as LESS file

* Rewrote css file as a LESS file for better maintainability
* Make use of core embed mixin
** Add .background-image-svg mixin for rendering svgs as background images

Change-Id: I72a66553d6ecee5018d4efaabfd0fa0df6c4135f
---

diff --git a/resources/Resources.php b/resources/Resources.php
index d8bd39a33a..ca0426395c 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -110,7 +110,7 @@ return array(
 	),
 	'skins.vector.collapsibleNav' => array(
 		'styles' => array(
-			'vector/collapsibleNav.css',
+			'vector/collapsibleNav.less',
 		),
 		'scripts' => array(
 			'vector/collapsibleNav.js',
diff --git a/resources/mediawiki.less/mediawiki.mixins.less b/resources/mediawiki.less/mediawiki.mixins.less
index 032028fbea..3763b87964 100644
--- a/resources/mediawiki.less/mediawiki.mixins.less
+++ b/resources/mediawiki.less/mediawiki.mixins.less
@@ -18,3 +18,12 @@
 .background-image(@url) when not (embeddable(@url)) {
 	background-image: url(@url);
 }
+
+/* Note gzip compression means that it is okay to embed twice */
+.background-image-svg(@svg, @fallback) {
+	background-image: url(@fallback);
+	/* SVG support using a transparent gradient to guarantee cross-browser
+	 * compatibility (browsers able to understand gradient syntax support also SVG) */
+	/* @embed */ background-image: -webkit-linear-gradient(transparent, transparent), url(@svg);
+	/* @embed */ background-image: linear-gradient(transparent, transparent), url(@svg);
+}
diff --git a/skins/vector/collapsibleNav.css b/skins/vector/collapsibleNav.css
deleted file mode 100644
index 02799d766f..0000000000
--- a/skins/vector/collapsibleNav.css
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Stylesheet for collapsible nav
- */
-
-#mw-panel.collapsible-nav .portal {
-	/* @embed */
-	background: url(images/portal-break.png) left top no-repeat;
-	padding: 0.25em 0 !important;
-	margin: -11px 9px 10px 11px;
-}
-
-#mw-panel.collapsible-nav .portal h3 {
-	color: #4D4D4D;
-	font-weight: normal;
-	/* @embed */
-	background: url(images/arrow-expanded.png) left center no-repeat;
-	/* SVG support using a transparent gradient to guarantee cross-browser
-	 * compatibility (browsers able to understand gradient syntax support also SVG) */
-	/* @embed */
-	background-image: -webkit-linear-gradient(transparent, transparent), url(images/arrow-expanded.svg);
-	/* @embed */
-	background-image: linear-gradient(transparent, transparent), url(images/arrow-expanded.svg);
-	padding: 4px 0 3px 1.5em;
-	margin-bottom: 0;
-}
-
-#mw-panel.collapsible-nav .portal h3:hover {
-	cursor: pointer;
-	text-decoration: none;
-}
-
-#mw-panel.collapsible-nav .portal h3 a {
-	color: #4D4D4D;
-	text-decoration: none;
-}
-
-#mw-panel.collapsible-nav .portal .body {
-	background-image: none !important;
-	padding-top: 0;
-	display: none;
-}
-
-#mw-panel.collapsible-nav .portal .body ul li {
-	padding: 0.25em 0;
-}
-
-/* First */
-#mw-panel.collapsible-nav .portal.first h3 {
-	display: none;
-}
-
-#mw-panel.collapsible-nav .portal.first {
-	background-image: none;
-	margin-top: 0;
-}
-
-/* Persistent */
-
-#mw-panel.collapsible-nav .portal.persistent .body {
-	display: block;
-}
-
-#mw-panel.collapsible-nav .portal.persistent h3 {
-	background-image: none !important;
-	padding-left: 0.7em;
-	cursor: default;
-}
-
-#mw-panel.collapsible-nav .portal.persistent .body {
-	margin-left: 0.5em;
-}
-
-/* Collapsed */
-
-#mw-panel.collapsible-nav .portal.collapsed h3 {
-	color: #0645AD;
-	/* @embed */
-	background: url(images/arrow-collapsed-ltr.png) left center no-repeat;
-	/* SVG support using a transparent gradient to guarantee cross-browser
-	 * compatibility (browsers able to understand gradient syntax support also SVG) */
-	/* @embed */
-	background-image: -webkit-linear-gradient(transparent, transparent), url(images/arrow-collapsed-ltr.svg);
-	/* @embed */
-	background-image: linear-gradient(transparent, transparent), url(images/arrow-collapsed-ltr.svg);
-	margin-bottom: 0;
-}
-
-#mw-panel.collapsible-nav .portal.collapsed h3 a {
-	color: #0645AD;
-}
-
-#mw-panel.collapsible-nav .portal.collapsed h3:hover {
-	text-decoration: underline;
-}
diff --git a/skins/vector/collapsibleNav.less b/skins/vector/collapsibleNav.less
new file mode 100644
index 0000000000..25ebec7c38
--- /dev/null
+++ b/skins/vector/collapsibleNav.less
@@ -0,0 +1,89 @@
+/**
+ * LESS Stylesheet for collapsible nav
+ */
+@import "mediawiki.mixins.less";
+
+#mw-panel.collapsible-nav {
+	.portal {
+		background-position: left top;
+		background-repeat: no-repeat;
+		.background-image('images/portal-break.png');
+		padding: 0.25em 0 !important;
+		margin: -11px 9px 10px 11px;
+
+		h3 {
+			color: #4D4D4D;
+			font-weight: normal;
+			background-position: left center;
+			background-repeat: no-repeat;
+			.background-image-svg('images/arrow-expanded.svg', 'images/arrow-expanded.png');
+			padding: 4px 0 3px 1.5em;
+			margin-bottom: 0;
+
+			&:hover {
+				cursor: pointer;
+				text-decoration: none;
+			}
+
+			a {
+				color: #4D4D4D;
+				text-decoration: none;
+			}
+		}
+
+		.body {
+			background-image: none !important;
+			padding-top: 0;
+			display: none;
+
+			ul {
+				li {
+					padding: 0.25em 0;
+				}
+			}
+		}
+
+
+		/* First */
+		&.first {
+			background-image: none;
+			margin-top: 0;
+			h3 {
+				display: none;
+			}
+		}
+
+		/* Persistent */
+		&.persistent {
+			.body {
+				display: block;
+				margin-left: 0.5em;
+			}
+
+			h3 {
+				background-image: none !important;
+				padding-left: 0.7em;
+				cursor: default;
+			}
+		}
+
+		/* Collapsed */
+		&.collapsed {
+			h3 {
+				color: #0645AD;
+				background-position: left center;
+				background-repeat: no-repeat;
+				.background-image-svg('images/arrow-collapsed-ltr.svg', 'images/arrow-collapsed-ltr.png');
+				margin-bottom: 0;
+
+				&:hover {
+					text-decoration: underline;
+				}
+
+				a {
+					color: #0645AD;
+				}
+			}
+		}
+	}
+}