Follows-up
db13c65 and
c3d544412, which removed the
collapsibleNav module. However it also undid various design
changes that really should not have been part of the
collapsibleNav module but were significant, I've restored those.
Basically, this merges the old collapsibleNav.less into
navigation.less. I won't list all chnages, but here's a few:
* Increase spacing between heading and side of portal (via margin and
padding on the portal, not on the heading itself).
The headings were almost against the browser edge.
* Change color of heading slightly (#4d4d4d instead of #444).
* Move separator line from below each heading to between sidebar
sections.
* Change spacing between list items from 0.5 on the bottom to
0.25em on top and bottom (effectively the same, except aligns
the first and last item better in relation to the heading and
the separator line).
* (js-only enhancement) Mark first section with class "first",
and remove the separator line, heading and offset from that one.
Also:
* Clean up 'h3' padding/margin situation.
They were inheriting 0.3em of bottom margin from the global
'h3' selector for content. This was a bit of a fragile
dependency and was just a coincidence. Reset the margin against
the global selector and added it to the local padding instead.
No visual change.
* Remove unused less variables.
Change-Id: I979179a82c1de9b1b7d66310ebd5daf8e6aa1802
left: 0;
div.portal {
- padding-bottom: 1.5em;
+ margin: 0 0.6em 0 0.7em;
+ padding: 0.25em 0;
direction: ltr;
+ background-position: top left;
+ background-repeat: no-repeat;
+ .background-image('images/portal-break.png');
h3 {
+ font-size: @menu-main-heading-font-size;
+ color: @menu-main-heading-color;
font-weight: normal;
- color: #444;
+ margin: 0;
padding: @menu-main-heading-padding;
cursor: default;
border: none;
- font-size: @menu-main-heading-font-size;
}
div.body {
- padding-top: 0.5em;
margin: @menu-main-body-margin;
-
- .background-image('images/portal-break.png');
- background-repeat: no-repeat;
- background-position: top left;
+ padding-top: 0;
ul {
list-style-type: none;
list-style-image: none;
- padding: @menu-main-body-padding;
margin: 0;
+ padding: @menu-main-body-padding;
li {
line-height: 1.125em;
- padding: 0;
- padding-bottom: 0.5em;
margin: 0;
+ padding: 0.25em 0;
font-size: @menu-main-body-font-size;
word-wrap: break-word;
}
}
}
+
+ &.first {
+ background-image: none;
+ margin-top: 0;
+ h3 {
+ display: none;
+ }
+ div.body {
+ margin-left: 0.5em;
+ }
+ }
}
}
// Main menu
@menu-main-font-size: inherit;
+
@menu-main-heading-font-size: 0.75em;
-@menu-main-heading-padding: 0 1.75em 0.25em 0.25em;
+@menu-main-heading-padding: 0.25em 0 0.25em 0.25em;
+@menu-main-heading-color: #4d4d4d;
@menu-main-body-font-size: 0.75em;
@menu-main-body-link-color: #0645ad;
@menu-main-body-link-visited-color: #0b0080;
@menu-main-body-margin: 0 0 0 1.25em;
@menu-main-body-padding: 0;
+
@menu-main-logo-left: 0.5em;
// Personal menu
@menu-personal-font-size: 0.75em;
-
-// Collapsible nav
-@collapsible-nav-heading-color: #4d4d4d;
-@collapsible-nav-heading-collapsed-color: #0645ad;
-
-@collapsible-nav-heading-padding: 4px 0 3px 1.5em;
-@collapsible-nav-body-margin: 0 0 0 1.25em;
.attr( 'tabindex', '-1' );
} );
+ /**
+ * Sidebar
+ */
+ $( '#mw-panel > .portal:first' ).addClass( 'first' );
+
/**
* Collapsible tabs for Vector
*/