.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);
+}
+++ /dev/null
-/**
- * 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;
-}
--- /dev/null
+/**
+ * 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;
+ }
+ }
+ }
+ }
+}