Unify dropdown styles
This affects all dropdowns in Vector 2022, including the user menu in the header and the language variants and "more" menu in the article toolbar. By relying on shared styles instead of separate implementations, this change also reduces the size of the skins.vector.styles module by 1.6kB (uncompressed). Visual changes: - The links in the user menu are now blue - Dropdown links in the user menu and tabs are blue - The dropdown labels in the tabs are black not dark gray. Bug: T312157 Bug: T308344 Change-Id: I002d5454838a5516b6ee6c7c38721209ed28508b
This commit is contained in:
Jan Drewniak
parent
23b1fb3b45
commit
ce007e059e
|
|
@ -9,7 +9,6 @@
|
|||
* dropdown content.
|
||||
*/
|
||||
.vector-menu-dropdown {
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
|
||||
// Dropdown menu container. Hidden by default until checkbox is checked.
|
||||
|
|
|
|||
|
|
@ -9,3 +9,21 @@
|
|||
width: unit( 16 / @font-size-tabs / @font-size-browser, em );
|
||||
height: unit( 16 / @font-size-tabs / @font-size-browser, em );
|
||||
}
|
||||
|
||||
.mixin-vector-dropdown-menu-item() {
|
||||
//NOTE: using px instead of em's due to difference in font-size
|
||||
// across dropdowns (i.e tabs 13px vs. personal menu 14px).
|
||||
min-height: 32px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 12px;
|
||||
|
||||
&:visited {
|
||||
color: @color-link;
|
||||
}
|
||||
|
||||
&.selected a,
|
||||
&.selected a:visited {
|
||||
color: @color-link-selected;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,25 +8,12 @@
|
|||
* - more menu, user menu
|
||||
* - ULS button in sticky header
|
||||
*/
|
||||
.emptyPortlet .vector-menu-heading,
|
||||
.vector-menu-dropdown .vector-menu-heading,
|
||||
.mw-interlanguage-selector {
|
||||
display: flex;
|
||||
color: @color-base--subtle;
|
||||
|
||||
&:after {
|
||||
.mixin-vector-menu-heading-arrow();
|
||||
// Modify the color of the image from the default #202122 to approx. #404244 to match the text.
|
||||
opacity: 0.84;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: @color-base;
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,18 +27,17 @@
|
|||
box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 );
|
||||
transition-property: opacity;
|
||||
transition-duration: @transition-duration-base;
|
||||
line-height: 1.125em;
|
||||
}
|
||||
|
||||
.mw-list-item {
|
||||
a {
|
||||
color: @color-link;
|
||||
}
|
||||
|
||||
&.selected a,
|
||||
&.selected a:visited {
|
||||
color: @color-link-selected;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//non-standard dropdown menu item.
|
||||
.vector-user-menu-logout,
|
||||
.vector-user-menu-create-account,
|
||||
.vector-user-menu-login,
|
||||
.vector-menu-dropdown .mw-list-item {
|
||||
a {
|
||||
.mixin-vector-dropdown-menu-item();
|
||||
white-space: nowrap;
|
||||
color: @color-link;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,10 +59,3 @@
|
|||
box-sizing: border-box;
|
||||
}
|
||||
}
|
||||
|
||||
// Applies only to dropdowns inside the article toolbar.
|
||||
.mw-article-toolbar-container .vector-menu-dropdown {
|
||||
.mw-list-item {
|
||||
padding: 0.625em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,183 +1,72 @@
|
|||
@import '../../common/variables.less';
|
||||
@import '../../common/mixins.less';
|
||||
@import 'mediawiki.mixins.less';
|
||||
|
||||
@font-size-user-links: unit( 14 / @font-size-browser, em ); // Equals `0.875em`.
|
||||
@padding-horizontal-user-links: 12px;
|
||||
|
||||
/**
|
||||
* Container that holds both the horizontal menu and dropdown menus.
|
||||
*/
|
||||
.vector-user-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 1;
|
||||
font-size: @font-size-user-links;
|
||||
|
||||
.vector-user-menu-more {
|
||||
font-size: @font-size-user-links;
|
||||
|
||||
.vector-menu-content-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
li {
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
|
||||
a {
|
||||
color: @color-base;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Below tablet threshold, all menu items except the notification icons will collapse into the user menu
|
||||
// This ensures a max of 4 icons on small screen sizes (i.e. search, 2 notification icons and the user avatar)
|
||||
&.user-links-collapsible-item {
|
||||
display: none;
|
||||
|
||||
@media ( min-width: @min-width-tablet ) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-ui-button {
|
||||
// FIXME: Overrides mw-ui-button's `display: inline-block` property so that
|
||||
// the text in the button is vertically centered. `.mw-ui-button` sets a
|
||||
// min-height to the button, but should also vertically center the
|
||||
// button's children.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#pt-userpage-2 {
|
||||
max-width: unit( 155 / @font-size-browser / @font-size-base, em );
|
||||
|
||||
span {
|
||||
.text-overflow( @visible: false );
|
||||
}
|
||||
|
||||
// T287522#7295558: Increase the max-width of the username when viewport
|
||||
// allows for it.
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
max-width: unit( 200 / @font-size-browser / @font-size-base, em );
|
||||
}
|
||||
}
|
||||
.mw-ui-button {
|
||||
// FIXME: Overrides mw-ui-button's `display: inline-block` property so that
|
||||
// the text in the button is vertically centered. `.mw-ui-button` sets a
|
||||
// min-height to the button, but should also vertically center the
|
||||
// button's children.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vector-user-menu {
|
||||
.mw-list-item {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Override ".emptyPortlet" class to ensure user menu isn't hidden
|
||||
&.emptyPortlet {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.vector-menu-heading {
|
||||
.mw-ui-icon ~ span {
|
||||
.mixin-screen-reader-text();
|
||||
}
|
||||
}
|
||||
|
||||
.vector-menu-content {
|
||||
min-width: 200px;
|
||||
max-width: unit( 350px / @font-size-browser, em );
|
||||
top: 100%;
|
||||
// stylelint-disable-next-line plugin/no-unsupported-browser-features
|
||||
left: unset;
|
||||
right: 0;
|
||||
border-radius: 2px;
|
||||
// T285786: Box shadow per design spec
|
||||
box-shadow: 0 2px 2px 0 rgba( 0, 0, 0, 0.25 );
|
||||
|
||||
.user-links-collapsible-item {
|
||||
@media ( min-width: @min-width-tablet ) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-list-item {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.vector-menu-content-item,
|
||||
.mw-list-item > a {
|
||||
// Overrides .mw-ui-icon's `min-height` property to have a computed
|
||||
// min-height of 32px. This matches the design spec of having an icon that
|
||||
// is 20px in height + 6px of top padding + 6px of bottom padding. Using
|
||||
// min-height instead of vertical padding allows menu items without an
|
||||
// icon to still be 32px in height.
|
||||
min-height: unit( 32px / @font-size-browser, em );
|
||||
// Overrides .mw-ui-icon's `display: inline-block` property so that
|
||||
// the text can be vertically centered.
|
||||
display: flex;
|
||||
align-items: center;
|
||||
// Overrides .mw-ui-icon's `padding: 0` property so that the text is not
|
||||
// at the edge of the menu. Apply the padding on the link element instead
|
||||
// of the li element to maximize the click target.
|
||||
padding: 0 @padding-horizontal-user-links;
|
||||
color: @color-base;
|
||||
text-decoration: none;
|
||||
|
||||
// Update menu item text styles
|
||||
span:not( .mw-ui-icon ) {
|
||||
font-size: @font-size-user-links;
|
||||
.text-overflow( @visible: false );
|
||||
// Overrides .mw-ui-icon's `line-height: 0` property so that the text is
|
||||
// visible when not overflowing.
|
||||
line-height: @line-height-nav-personal;
|
||||
}
|
||||
|
||||
// Set hover color for "Create account" and "Login" menu items.
|
||||
&:hover {
|
||||
background-color: @background-color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-menu-content-item-login {
|
||||
border-bottom: @border-width-base @border-style-base @border-color-base;
|
||||
}
|
||||
|
||||
.vector-user-menu-anon-editor {
|
||||
padding: 4px @padding-horizontal-user-links;
|
||||
color: @colorGray5;
|
||||
font-size: @font-size-user-links;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a:before {
|
||||
content: '@{msg-parentheses-start}';
|
||||
color: @colorGray5;
|
||||
}
|
||||
|
||||
a:after {
|
||||
content: '@{msg-parentheses-end}';
|
||||
color: @colorGray5;
|
||||
}
|
||||
}
|
||||
|
||||
.vector-menu-content-item-logout {
|
||||
border-top: @border-width-base @border-style-base @border-color-base;
|
||||
}
|
||||
|
||||
#pt-tmpuserpage {
|
||||
padding: 4px @padding-horizontal-user-links;
|
||||
color: @colorGray5;
|
||||
font-size: @font-size-user-links;
|
||||
}
|
||||
/**
|
||||
* Both logged-in and logged-out dropdown menus.
|
||||
*/
|
||||
.vector-user-menu {
|
||||
.vector-menu-content {
|
||||
left: auto;
|
||||
right: 0;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
.vector-user-menu-logged-out .vector-menu-heading {
|
||||
&:before {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: none;
|
||||
.user-links-collapsible-item {
|
||||
@media ( min-width: @min-width-tablet ) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.vector-user-menu-logged-in .vector-menu-heading {
|
||||
/**
|
||||
* Horizontal links menu - logged in and logged out.
|
||||
*/
|
||||
.vector-user-menu-more {
|
||||
.vector-menu-content-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.user-links-collapsible-item {
|
||||
@media ( max-width: @min-width-tablet ) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Logged-in dropdown menu
|
||||
*/
|
||||
.vector-user-menu-logged-in {
|
||||
.vector-menu-heading {
|
||||
// override user menu (.mw-ui-icon) fixed width,
|
||||
// so chevron beside icon is visible.
|
||||
width: auto;
|
||||
|
|
@ -188,3 +77,46 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dropdown menu items- Special treatment for special links.
|
||||
*/
|
||||
|
||||
// Anon editor notice i.e. "Pages for logged out editors".
|
||||
.vector-user-menu-anon-editor {
|
||||
.mixin-vector-dropdown-menu-item();
|
||||
color: @color-base--subtle;
|
||||
|
||||
a:before {
|
||||
content: '@{msg-parentheses-start}';
|
||||
}
|
||||
|
||||
a:after {
|
||||
content: '@{msg-parentheses-end}';
|
||||
}
|
||||
}
|
||||
|
||||
// Login link.
|
||||
.vector-user-menu-login {
|
||||
border-bottom: @border-width-base @border-style-base @colorGray14;
|
||||
}
|
||||
|
||||
// Logout link
|
||||
.vector-user-menu-logout {
|
||||
border-top: @border-width-base @border-style-base @colorGray14;
|
||||
}
|
||||
|
||||
//User-page link in personal (dropdown) menu.
|
||||
#pt-userpage-2 {
|
||||
max-width: unit( 155 / @font-size-browser / @font-size-user-links, em );
|
||||
|
||||
span {
|
||||
.text-overflow( @visible: false );
|
||||
}
|
||||
|
||||
// T287522#7295558: Increase the max-width of the username when viewport
|
||||
// allows for it.
|
||||
@media ( min-width: @min-width-desktop-wide ) {
|
||||
max-width: unit( 200 / @font-size-browser / @font-size-user-links, em );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue