Unify on variables and file names on 'navigation'

Navigation is the appropriate, general term – settling on it and
unifying file name and common abbreviation 'nav' for variable names.

Change-Id: I237b56320544de15e3b97c4806f6e2387bc54ca0
This commit is contained in:
Volker E 2019-09-29 13:21:41 -07:00
parent daa3611bce
commit 2b0a28cdcb
4 changed files with 27 additions and 27 deletions

View file

@ -1,5 +1,5 @@
@import 'mediawiki.mixins'; @import 'mediawiki.mixins';
@import 'personalMenu'; @import 'personalNavigation';
@import 'search'; @import 'search';
@import 'tabs'; @import 'tabs';
@ -72,7 +72,7 @@
top: 0; top: 0;
width: 10em; width: 10em;
left: 0; left: 0;
font-size: @font-size-menu-main; font-size: @font-size-nav-main;
.portal { .portal {
margin: 0 0.6em 0 0.7em; margin: 0 0.6em 0 0.7em;
@ -82,17 +82,17 @@
background-repeat: no-repeat; background-repeat: no-repeat;
h3 { h3 {
color: @color-navigation-subtle; color: @color-nav-subtle;
font-weight: normal; font-weight: normal;
margin: 0.5em 0 0 ( @margin-left-menu-main-body / @font-size-menu-main-heading ); margin: 0.5em 0 0 ( @margin-left-nav-main-body / @font-size-nav-main-heading );
padding: 0.25em 0; padding: 0.25em 0;
cursor: default; cursor: default;
border: 0; border: 0;
font-size: @font-size-menu-main-heading; font-size: @font-size-nav-main-heading;
} }
.body { .body {
margin-left: @margin-left-menu-main-body; margin-left: @margin-left-nav-main-body;
padding-top: 0; padding-top: 0;
background-image: url( images/portal-break.png ); background-image: url( images/portal-break.png );
background-repeat: no-repeat; background-repeat: no-repeat;
@ -106,8 +106,8 @@
li { li {
margin: 0; margin: 0;
padding: 0.25em 0; padding: 0.25em 0;
font-size: @font-size-menu-main-body; font-size: @font-size-nav-main-body;
line-height: @line-height-navigation; line-height: @line-height-nav;
word-wrap: break-word; word-wrap: break-word;
a { a {
@ -132,7 +132,7 @@
.body { .body {
background-image: none; background-image: none;
margin-left: @margin-left-menu-main-body; margin-left: @margin-left-nav-main-body;
} }
} }
} }

View file

@ -22,8 +22,8 @@
// `padding-top` instead of `margin-top` necessary for // `padding-top` instead of `margin-top` necessary for
// anonymous user icon position below // anonymous user icon position below
padding-top: 0.5em; padding-top: 0.5em;
font-size: @font-size-menu-personal; font-size: @font-size-nav-personal;
line-height: @line-height-menu-personal; line-height: @line-height-nav-personal;
white-space: nowrap; white-space: nowrap;
} }
} }
@ -34,9 +34,9 @@
// SVG support using a transparent gradient to guarantee cross-browser // SVG support using a transparent gradient to guarantee cross-browser
// compatibility (browsers able to understand gradient syntax support also SVG) // compatibility (browsers able to understand gradient syntax support also SVG)
.background-image-svg( 'images/user-avatar.svg', 'images/user-avatar.png' ); .background-image-svg( 'images/user-avatar.svg', 'images/user-avatar.png' );
background-position: @background-position-menu-personal-icon; background-position: @background-position-nav-personal-icon;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: @background-size-menu-personal-icon @background-size-menu-personal-icon; background-size: @background-size-nav-personal-icon @background-size-nav-personal-icon;
// Same as `#p-personal li` above // Same as `#p-personal li` above
padding-top: 0.5em !important; // stylelint-disable-line declaration-no-important padding-top: 0.5em !important; // stylelint-disable-line declaration-no-important
padding-left: 16px !important; // stylelint-disable-line declaration-no-important padding-left: 16px !important; // stylelint-disable-line declaration-no-important

View file

@ -38,7 +38,7 @@
.background-image('images/tab-normal-fade.png'); .background-image('images/tab-normal-fade.png');
background-position: bottom left; background-position: bottom left;
background-repeat: repeat-x; background-repeat: repeat-x;
line-height: @line-height-navigation; line-height: @line-height-nav;
white-space: nowrap; white-space: nowrap;
&.new { &.new {
@ -102,7 +102,7 @@
h3 { h3 {
span { span {
color: @color-navigation-subtle; color: @color-nav-subtle;
position: relative; position: relative;
display: block; display: block;
padding-left: 0.615em; padding-left: 0.615em;

View file

@ -35,24 +35,24 @@
// Navigation // Navigation
@background-color-secondary: #f6f6f6; @background-color-secondary: #f6f6f6;
@color-navigation-subtle: #444; @color-nav-subtle: #444;
// Navigation `line-height` has to be set in `em`s due to a rendering calculation issue. // Navigation `line-height` has to be set in `em`s due to a rendering calculation issue.
@line-height-navigation: 1.125em; @line-height-nav: 1.125em;
// Main menu // Navigation: Main
@font-size-menu-main: inherit; @font-size-nav-main: inherit;
@font-size-menu-main-heading: unit( 12 / @font-size-browser, em ); // Equals `0.75em`. @font-size-nav-main-heading: unit( 12 / @font-size-browser, em ); // Equals `0.75em`.
@font-size-menu-main-body: unit( 12 / @font-size-browser, em ); @font-size-nav-main-body: unit( 12 / @font-size-browser, em );
@margin-left-menu-main-body: 0.5em; @margin-left-nav-main-body: 0.5em;
// Personal menu // Navigation: Personal tools
@background-position-menu-personal-icon: left ( 4 / @font-size-browser / @font-size-menu-personal ); @background-position-nav-personal-icon: left ( 4 / @font-size-browser / @font-size-nav-personal );
@background-size-menu-personal-icon: 14 / @font-size-browser / @font-size-menu-personal; @background-size-nav-personal-icon: 14 / @font-size-browser / @font-size-nav-personal;
@font-size-menu-personal: 0.75em; @font-size-nav-personal: 0.75em;
// Using `unit()` without second parameter to achieve a unitless output for `line-height`. // Using `unit()` without second parameter to achieve a unitless output for `line-height`.
@line-height-menu-personal: unit( 14 / @font-size-browser / @font-size-menu-personal ); // Equals `1.667`. @line-height-nav-personal: unit( 14 / @font-size-browser / @font-size-nav-personal ); // Equals `1.667`.
// Tabs // Tabs
@font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`. @font-size-tabs: unit( 13 / @font-size-browser, em ); // Equals `0.8125em`.