Cleanup styles for personal user dropdown menu.
Remove redundant styles. Update personal menu dropdown to more closely reflect design of OOUI dropdown elements. Extract legcay-specific, modern-specific styles for UserMenu into separate partials. Create new shared UserMenu component. Bug: T276561 Change-Id: I1e56cd5b3b24ac1b5cae684301b8e3a84ea33a5c
This commit is contained in:
parent
234659e3e3
commit
63f9dd81e3
|
@ -22,6 +22,7 @@
|
||||||
@import './components/SearchBox.less';
|
@import './components/SearchBox.less';
|
||||||
@import './components/SidebarLogo.less';
|
@import './components/SidebarLogo.less';
|
||||||
@import './components/Footer.less';
|
@import './components/Footer.less';
|
||||||
|
@import './components/UserMenu.less';
|
||||||
}
|
}
|
||||||
|
|
||||||
@media print {
|
@media print {
|
||||||
|
|
|
@ -1,16 +1,6 @@
|
||||||
@import '../variables.less';
|
@import '../variables.less';
|
||||||
@import 'mediawiki.mixins.less';
|
@import 'mediawiki.mixins.less';
|
||||||
|
|
||||||
/* Personal Menu */
|
|
||||||
#p-personal .vector-menu-content-list {
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-grow: 1;
|
|
||||||
justify-content: flex-end;
|
|
||||||
align-items: baseline;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Personal Menu */
|
|
||||||
.mw-portlet {
|
.mw-portlet {
|
||||||
// Hidden by default, but displayed by certain menus
|
// Hidden by default, but displayed by certain menus
|
||||||
// e.g. MenuPortal
|
// e.g. MenuPortal
|
||||||
|
@ -31,41 +21,3 @@
|
||||||
line-height: @line-height-nav-personal;
|
line-height: @line-height-nav-personal;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Icon for registered user names & anonymous message */
|
|
||||||
#pt-anonuserpage,
|
|
||||||
#pt-userpage a,
|
|
||||||
#p-user-page a {
|
|
||||||
background-image: url( images/user-avatar.svg );
|
|
||||||
background-position: @background-position-nav-personal-icon;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: @background-size-nav-personal-icon @background-size-nav-personal-icon;
|
|
||||||
// Same as `#p-personal li` above
|
|
||||||
padding-top: 0.5em !important; // stylelint-disable-line declaration-no-important
|
|
||||||
padding-left: 16px !important; // stylelint-disable-line declaration-no-important
|
|
||||||
}
|
|
||||||
|
|
||||||
#p-user-page a {
|
|
||||||
// Overrides directly above: padding-left: 16px !important; which does not allow for enough space between the
|
|
||||||
// personal icon asset and the user page link in the personal toolbar.
|
|
||||||
padding-left: 25px !important; // stylelint-disable-line declaration-no-important
|
|
||||||
}
|
|
||||||
|
|
||||||
#pt-userpage {
|
|
||||||
padding-top: 0 !important; // stylelint-disable-line declaration-no-important
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Show anonymous "Not logged in" text in gray */
|
|
||||||
#pt-anonuserpage {
|
|
||||||
color: #54595d;
|
|
||||||
}
|
|
||||||
|
|
||||||
#p-user-page .vector-menu-content-list {
|
|
||||||
#ca-userpage {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -0,0 +1,24 @@
|
||||||
|
// Common styles for the UserMenu component.
|
||||||
|
|
||||||
|
@import '../variables.less';
|
||||||
|
@import 'mediawiki.mixins.less';
|
||||||
|
|
||||||
|
/* Personal Menu */
|
||||||
|
#p-personal .vector-menu-content-list {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
flex-grow: 1;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icon for registered user names & anonymous message */
|
||||||
|
#pt-anonuserpage,
|
||||||
|
#pt-userpage a,
|
||||||
|
#p-user-page a {
|
||||||
|
background-image: url( images/user-avatar.svg );
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: @background-size-nav-personal-icon @background-size-nav-personal-icon;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
|
@ -31,11 +31,6 @@ pre,
|
||||||
.mixin-screen-reader-text;
|
.mixin-screen-reader-text;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Personal Menu */
|
|
||||||
#p-personal li {
|
|
||||||
font-size: @font-size-nav-personal;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Allow edit sections outside of mw-body-content (T160269) */
|
/* Allow edit sections outside of mw-body-content (T160269) */
|
||||||
.mw-editsection,
|
.mw-editsection,
|
||||||
.mw-editsection-like {
|
.mw-editsection-like {
|
||||||
|
|
|
@ -0,0 +1,28 @@
|
||||||
|
@import '../../common/variables.less';
|
||||||
|
|
||||||
|
// Legacy overrides for the UserMenu
|
||||||
|
|
||||||
|
/* Personal Menu */
|
||||||
|
#p-personal li {
|
||||||
|
font-size: @font-size-nav-personal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Icon for registered user names & anonymous message */
|
||||||
|
#pt-anonuserpage,
|
||||||
|
#pt-userpage a {
|
||||||
|
background-position: @background-position-nav-personal-icon;
|
||||||
|
padding-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pt-userpage {
|
||||||
|
padding-top: 0;
|
||||||
|
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Show anonymous "Not logged in" text in gray */
|
||||||
|
#pt-anonuserpage {
|
||||||
|
color: #54595d;
|
||||||
|
}
|
|
@ -10,4 +10,5 @@
|
||||||
// Legacy specific components
|
// Legacy specific components
|
||||||
@import './components/MenuDropdown.less';
|
@import './components/MenuDropdown.less';
|
||||||
@import './components/Sidebar.less';
|
@import './components/Sidebar.less';
|
||||||
|
@import './components/UserMenu.less';
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,17 +1,59 @@
|
||||||
|
@import '../../common/variables.less';
|
||||||
|
|
||||||
// Overrides personal menu styles for consolidated user links.
|
// Overrides personal menu styles for consolidated user links.
|
||||||
.mw-portlet-personal.vector-menu-dropdown h3:after {
|
.mw-portlet-personal.vector-menu-dropdown h3:after {
|
||||||
|
padding: 0.4em 0 0.4em 0;
|
||||||
content: none;
|
content: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#p-personal.vector-menu-dropdown .vector-menu-content-list {
|
#p-personal.vector-menu-dropdown {
|
||||||
justify-content: flex-start;
|
.vector-menu-checkbox {
|
||||||
|
&:hover + h3 {
|
||||||
|
background-color: @colorGray14;
|
||||||
|
border-radius: @border-radius-base;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
.vector-menu-content {
|
||||||
font-size: 100%;
|
top: 100%;
|
||||||
|
left: unset;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vector-menu-content-list {
|
||||||
|
justify-content: flex-start;
|
||||||
|
|
||||||
|
li {
|
||||||
|
font-size: 100%;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: @colorGray14;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
li#pt-logout {
|
||||||
|
border-top: 1px solid @border-color-base;
|
||||||
|
}
|
||||||
|
|
||||||
|
a,
|
||||||
|
&:hover,
|
||||||
|
&:visited {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#p-personal .vector-menu-content {
|
// Since user-page is pulled out of the personal menu for modern vector,
|
||||||
left: unset;
|
// apply styles for the top-level user-page menu.
|
||||||
right: 0;
|
#p-user-page {
|
||||||
|
li {
|
||||||
|
padding-bottom: 0.5em;
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-position: left center;
|
||||||
|
padding-left: 1.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue