@import '../variables.less'; @import 'mediawiki.mixins.less'; /* Variants and Actions */ .vector-menu-dropdown { direction: ltr; float: left; cursor: pointer; position: relative; .vector-menu-heading { color: @color-base--subtle; position: relative; display: block; box-sizing: border-box; &:after { content: ''; background-image: url( images/arrow-down.svg ); background-position: 100% 50%; background-repeat: no-repeat; position: absolute; top: unit( 10 / @font-size-tabs / @font-size-browser, em ); right: 8px; bottom: 0; width: unit( 16 / @font-size-tabs / @font-size-browser, em ); // 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; } } } // The menu itself. .vector-menu-content { background-color: @background-color-base; list-style: none; line-height: 1.125em; // Match the width of the dropdown "heading" (the tab) min-width: 100%; position: absolute; top: 2.5em; left: -@border-width-base; margin: 0; border: @border-width-base @border-style-base @border-color-base; padding: 0; box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, 0.1 ); text-align: left; opacity: 0; visibility: hidden; transition-property: opacity; transition-duration: @transition-duration-base; z-index: @z-index-menu; } // Hide and show menu content based off checked status. .vector-menu-checkbox:checked ~ .vector-menu-content { opacity: 1; visibility: visible; } ul { // display list style images introduced in typography.less. list-style: none; } li { padding: 0; margin: 0; text-align: left; line-height: 1em; a { padding: 0.625em; color: @color-link; display: block; white-space: nowrap; cursor: pointer; } } .selected a, .selected a:visited { color: @color-link-selected; text-decoration: none; } } // Invisible checkbox covering the dropdown menu handle .vector-menu-checkbox { cursor: pointer; position: absolute; top: 0; left: 0; z-index: @z-index-menu-checkbox; opacity: 0; width: 100%; height: 100%; margin: 0; padding: 0; // Hide the checkbox completely in browsers that don't support :checked display: none; :not( :checked ) > & { // When the browser supports :checked, display it display: block; } } .vector-menu-dropdown-noicon { .vector-menu-heading { // `padding-top` needs to scale with font-size. padding-top: 1.25em; padding-left: 8px; padding-right: unit( 24 / @font-size-tabs / @font-size-browser, em ); font-weight: normal; } // Add focus state to legacy menu dropdown buttons (i.e. p-variants, p-cactions) .vector-menu-checkbox:focus + .vector-menu-heading { // Simulate browser focus ring outline: dotted 1px; // Firefox style outline: auto -webkit-focus-ring-color; // Webkit style } }