Merge "Rewrite collapsibleNav as LESS file"

diff --git a/resources/Resources.php b/resources/Resources.php
index d8bd39a..ca04263 100644 (file)
--- 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 032028f..3763b87 100644 (file)
--- 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 (file)
index 02799d7..0000000
--- 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 (file)
index 0000000..25ebec7
--- /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;
+                               }
+                       }
+               }
+       }
+}