mirror of
https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue
synced 2024-11-17 11:13:34 +00:00
c0f08790ea
Note: this agitates T230232 again - when merging this please make sure a merge for I929090848f3e04647a97f4979ec78682623fa070 is pending. In various places we try to override the default mw-ui-icon behaviours The hacks need to be removed as part of addressing the core problem. Changes: * Wherever we use mw-ui-icon-before in PHP - wrap the label with a span so that label font-size is altered where needed - not the icon * Where a small icon is needed us isSmall parameter for the Icon component * Apply font-size to labels of mw-ui-icon-before elements * The browser tests need a slight update to access the span element inside a menu item - in the case of the logout button the label is always hidden, so we need to check the visibility of the parent element (secondary_action) Bug: T229440 Depends-On: I3f803ec4c9068b30aa93b803391aa4d65d8310ff Change-Id: I07e4ae233979636b739f1117dd7703571e0a9366
54 lines
1.6 KiB
Plaintext
54 lines
1.6 KiB
Plaintext
@import '../../minerva.less/minerva.variables.less';
|
|
|
|
.toggle-list__checkbox {
|
|
// Always occlude the checkbox. The checkbox display cannot be none since its focus state is used
|
|
// for other selectors.
|
|
position: absolute;
|
|
z-index: @z-indexOccluded;
|
|
opacity: 0;
|
|
}
|
|
|
|
.toggle-list__toggle {
|
|
// labels are inline by default and this is also an icon
|
|
display: inline-block;
|
|
// Use the hand icon for the toggle button which is actually a checkbox label.
|
|
cursor: pointer;
|
|
}
|
|
|
|
.toggle-list__checkbox:focus + .toggle-list__toggle {
|
|
// The toggle button / label itself cannot receive focus but the underlying checkbox can. Keep
|
|
// the button and checkbox focus presentation in sync. From
|
|
// resources/src/mediawiki.toc.styles/screen.less.
|
|
outline: dotted 1px; /* Firefox style for focus */
|
|
outline: auto @colorProgressiveHighlight; /* Webkit style for focus */
|
|
}
|
|
|
|
.touch-events .toggle-list__checkbox:focus + .toggle-list__toggle {
|
|
// Buttons have no focus outline on mobile.
|
|
outline: 0;
|
|
}
|
|
|
|
.toggle-list__list {
|
|
// The menu appears over the content and occupies no room within it.
|
|
position: absolute;
|
|
//
|
|
// If max-height is set and the height exceeds it, add a vertical scrollbar.
|
|
overflow-y: auto;
|
|
//
|
|
// The menu floats over content but below overlays.
|
|
z-index: @z-indexDrawer;
|
|
//
|
|
background: @skinContentBgColor;
|
|
box-shadow: 0 5px 17px 0 rgba( 0, 0, 0, 0.24 ), 0 0 1px @colorGray10;
|
|
border-radius: @borderRadius;
|
|
//
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
}
|
|
|
|
.toggle-list__checkbox:checked ~ .toggle-list__list {
|
|
// Reveal the list when checked.
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|