Brion VIBBER has submitted this change and it was merged.
Change subject: Rewrite collapsibleNav as LESS file
......................................................................
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
---
M resources/Resources.php
M resources/mediawiki.less/mediawiki.mixins.less
D skins/vector/collapsibleNav.css
A skins/vector/collapsibleNav.less
4 files changed, 99 insertions(+), 95 deletions(-)
Approvals:
Brion VIBBER: Looks good to me, approved
jenkins-bot: Verified
diff --git a/resources/Resources.php b/resources/Resources.php
index d8bd39a..ca04263 100644
--- a/resources/Resources.php
+++ b/resources/Resources.php
@@ -110,7 +110,7 @@
),
'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
--- 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 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
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;
+ }
+ }
+ }
+ }
+}
--
To view, visit https://gerrit.wikimedia.org/r/86691
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I72a66553d6ecee5018d4efaabfd0fa0df6c4135f
Gerrit-PatchSet: 5
Gerrit-Project: mediawiki/core
Gerrit-Branch: master
Gerrit-Owner: Jdlrobson <[email protected]>
Gerrit-Reviewer: Bartosz Dziewoński <[email protected]>
Gerrit-Reviewer: Brion VIBBER <[email protected]>
Gerrit-Reviewer: Daniel Friesen <[email protected]>
Gerrit-Reviewer: Jack Phoenix <[email protected]>
Gerrit-Reviewer: Jdlrobson <[email protected]>
Gerrit-Reviewer: Krinkle <[email protected]>
Gerrit-Reviewer: Ori.livneh <[email protected]>
Gerrit-Reviewer: jenkins-bot
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
