wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-12-19 09:11:05 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-MinervaNeue/resources/skins.minerva.mainMenu.styles/MainMenuItem.less

32 lines
791 B
Plaintext
Raw Normal View History

Dev: Prep for storybook * Remove ambiguity in imports - say the file extension 'less' for all instances of variables and mixins. * Separate toast styles from drawer styles so they can be imported separately * associate header-action selector with its parent (.overlay-header) not parent's parent (.overlay) so it can be imported and rendered without the Overlay. Change-Id: Ib7e19a440ba095d6424d35305fb41d643ca9764c
2019-08-08 20:01:03 +00:00
@import '../../minerva.less/minerva.variables.less';
Remove deprecated vendor prefixes and their mixins Additional change: * The animation stylesheet pulled down for the storybook instance in dev-scripts/setup-storybook.sh is no longer referenced anywhere in assets so can be removed. Bug: T306486 Bug: T308351 Bug: T308360 Change-Id: Ia9f2a05cde2724486f7e449261c5d4875388f5ab
2022-05-16 16:55:54 +00:00
@import 'mediawiki.mixins.less';
[dev] divide main menu LESS Split apart the extensive mainmenu.less file into a few component-like files: MainMenu, MainMenuFooter, MainMenuItem, and NotificationsOverlay. Two variables, @duration and @easing, were moved to minerva.variables. The separation is imperfect as some overlap still exists but is far better than before. This patch is focused on division without regression. Please limit any refactor requests. No user visible changes intended. The only selector that was cognizantly changed was to duplicate the drawer visibility on main menu and notifications overlay: // Old: mainmenu.less .navigation-drawer, .transparent-shield { visibility: visible; } // --- // New: MainMenu.less #mw-mf-page-left, .transparent-shield { visibility: visible; } // New: NotifcationsOverlay.less .navigation-enabled { .notifications-overlay { visibility: visible; } } The is unfortunately useless. It is best to reproduce these changes locally by renaming mainmenu.less to MainMenu.less and extract parts to MainMenuFooter, MainMenuItem, and NotificationsOverlay LESS files until the result matches. Bug: T206354 Change-Id: I8d37c5346efcf39a4d76322fd6e6af3fff96ac53
2019-08-01 20:35:10 +00:00
Make menuGroup.mustache use togglelist classes, ensuring ToggleList HTML is consistent. Remove duplicated CSS Bug: T343920 Change-Id: I567d20171b0e511d00922adf250f97b9b8ed146b
2023-08-17 21:21:20 +00:00
// stylelint-disable selector-max-id
[dev] divide main menu LESS Split apart the extensive mainmenu.less file into a few component-like files: MainMenu, MainMenuFooter, MainMenuItem, and NotificationsOverlay. Two variables, @duration and @easing, were moved to minerva.variables. The separation is imperfect as some overlap still exists but is far better than before. This patch is focused on division without regression. Please limit any refactor requests. No user visible changes intended. The only selector that was cognizantly changed was to duplicate the drawer visibility on main menu and notifications overlay: // Old: mainmenu.less .navigation-drawer, .transparent-shield { visibility: visible; } // --- // New: MainMenu.less #mw-mf-page-left, .transparent-shield { visibility: visible; } // New: NotifcationsOverlay.less .navigation-enabled { .notifications-overlay { visibility: visible; } } The is unfortunately useless. It is best to reproduce these changes locally by renaming mainmenu.less to MainMenu.less and extract parts to MainMenuFooter, MainMenuItem, and NotificationsOverlay LESS files until the result matches. Bug: T206354 Change-Id: I8d37c5346efcf39a4d76322fd6e6af3fff96ac53
2019-08-01 20:35:10 +00:00
// .menu
#mw-mf-page-left {
ul {
Make menuGroup.mustache use togglelist classes, ensuring ToggleList HTML is consistent. Remove duplicated CSS Bug: T343920 Change-Id: I567d20171b0e511d00922adf250f97b9b8ed146b
2023-08-17 21:21:20 +00:00
.toggle-list-item {
Convert all color related Less variables to CSS custom properties All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
2024-02-01 17:33:08 +00:00
background-color: var( --background-color-base );
[dev] divide main menu LESS Split apart the extensive mainmenu.less file into a few component-like files: MainMenu, MainMenuFooter, MainMenuItem, and NotificationsOverlay. Two variables, @duration and @easing, were moved to minerva.variables. The separation is imperfect as some overlap still exists but is far better than before. This patch is focused on division without regression. Please limit any refactor requests. No user visible changes intended. The only selector that was cognizantly changed was to duplicate the drawer visibility on main menu and notifications overlay: // Old: mainmenu.less .navigation-drawer, .transparent-shield { visibility: visible; } // --- // New: MainMenu.less #mw-mf-page-left, .transparent-shield { visibility: visible; } // New: NotifcationsOverlay.less .navigation-enabled { .notifications-overlay { visibility: visible; } } The is unfortunately useless. It is best to reproduce these changes locally by renaming mainmenu.less to MainMenu.less and extract parts to MainMenuFooter, MainMenuItem, and NotificationsOverlay LESS files until the result matches. Bug: T206354 Change-Id: I8d37c5346efcf39a4d76322fd6e6af3fff96ac53
2019-08-01 20:35:10 +00:00
position: relative; // ensure the logout link in beta can be position absolute
Fix borders in night mode palette Following a discussion in the ticket, update the places where `#eaecf0` has been hardcoded to reflect whether it is intended to be a border or background style and replace with CSS variables where applicable. Add `--border-color-muted` as a CSS custom property, and update the night mode palette to use it. Lastly, add `--color-error`, to be used in a subsequent patch Visual changes, but again gated behind night mode feature flag Bug: T356825 Change-Id: Icb5741190f3e80a20dcedf9b13d6a34fe619b467
2024-02-14 21:18:21 +00:00
border-top: @border-width-base @border-style-base var( --border-color-muted );
[dev] divide main menu LESS Split apart the extensive mainmenu.less file into a few component-like files: MainMenu, MainMenuFooter, MainMenuItem, and NotificationsOverlay. Two variables, @duration and @easing, were moved to minerva.variables. The separation is imperfect as some overlap still exists but is far better than before. This patch is focused on division without regression. Please limit any refactor requests. No user visible changes intended. The only selector that was cognizantly changed was to duplicate the drawer visibility on main menu and notifications overlay: // Old: mainmenu.less .navigation-drawer, .transparent-shield { visibility: visible; } // --- // New: MainMenu.less #mw-mf-page-left, .transparent-shield { visibility: visible; } // New: NotifcationsOverlay.less .navigation-enabled { .notifications-overlay { visibility: visible; } } The is unfortunately useless. It is best to reproduce these changes locally by renaming mainmenu.less to MainMenu.less and extract parts to MainMenuFooter, MainMenuItem, and NotificationsOverlay LESS files until the result matches. Bug: T206354 Change-Id: I8d37c5346efcf39a4d76322fd6e6af3fff96ac53
2019-08-01 20:35:10 +00:00
// offset the border for the icon by 1px
styles: Replace 'mediawiki.ui/variables' call with skin variables Replacing 'mediawiki.ui/variables.less' @import with new skin-aware 'mediawiki.skin.variables.less' standard. Removing calls for 'mediawiki.skin.variables.less' in favor for 'minerva.variables.less' for consistency. Also - replacing several static values with new Codex design token featuring skin variables of `background-color`, `color`, `border-*` and `transition` categories - renaming several Less variables to variable naming standard - moving a small number of MinervaNeue specific variables into 'minderva.variables.less' file. Those should be replaced in mid-future by Codex design tokens Please note, that this patch is not replacing all values with possible Codex tokens. It's just applying them on selected categories for consistency for now to keep the patch easier reviewable. Further replacements will be done in follow-up patches. Bump MediaWiki core required version to >= v1.41.0. Bug: T319381 Bug: T332541 Depends-On: I98c8cc27527533e2efb3b987ee34bc403e988b75 Change-Id: I86c5a35377541a784552c29456e0b8b507b3ee9c
2023-04-09 13:49:29 +00:00
margin-top: -@border-width-base;
[dev] divide main menu LESS Split apart the extensive mainmenu.less file into a few component-like files: MainMenu, MainMenuFooter, MainMenuItem, and NotificationsOverlay. Two variables, @duration and @easing, were moved to minerva.variables. The separation is imperfect as some overlap still exists but is far better than before. This patch is focused on division without regression. Please limit any refactor requests. No user visible changes intended. The only selector that was cognizantly changed was to duplicate the drawer visibility on main menu and notifications overlay: // Old: mainmenu.less .navigation-drawer, .transparent-shield { visibility: visible; } // --- // New: MainMenu.less #mw-mf-page-left, .transparent-shield { visibility: visible; } // New: NotifcationsOverlay.less .navigation-enabled { .notifications-overlay { visibility: visible; } } The is unfortunately useless. It is best to reproduce these changes locally by renaming mainmenu.less to MainMenu.less and extract parts to MainMenuFooter, MainMenuItem, and NotificationsOverlay LESS files until the result matches. Bug: T206354 Change-Id: I8d37c5346efcf39a4d76322fd6e6af3fff96ac53
2019-08-01 20:35:10 +00:00
&:first-child {
border-top: 0;
}
Make menuGroup.mustache use togglelist classes, ensuring ToggleList HTML is consistent. Remove duplicated CSS Bug: T343920 Change-Id: I567d20171b0e511d00922adf250f97b9b8ed146b
2023-08-17 21:21:20 +00:00
.toggle-list-item__anchor:hover {
Convert all color related Less variables to CSS custom properties All colors used in Minerva are converted from Less variables into CSS custom properties. A new file called CSSCustomProperties.less is created in the skins.minerva.base.styles module to store these custom properties and an ADR is provided on the rationale for dropping support for browsers that don't support custom properties. The new CSS custom properties follow Codex design token conventions where possible (and noted when not). Link colors are unique because their styles are defined in core, so in that case the Less variables values are set to custom properties. Those values are then fed back into MediaWiki core for core link styling. Also adds a temporary night-mode color palette under the .skin-nightmode-1 class on the <html> element. Bug: T356074 Change-Id: Ida1f14138f12bd3c600c264bde7b5100f9dbf4ff
2024-02-01 17:33:08 +00:00
box-shadow: inset 4px 0 0 0 var( --box-shadow-color-progressive--focus );
Make menuGroup.mustache use togglelist classes, ensuring ToggleList HTML is consistent. Remove duplicated CSS Bug: T343920 Change-Id: I567d20171b0e511d00922adf250f97b9b8ed146b
2023-08-17 21:21:20 +00:00
text-decoration: none;
[dev] divide main menu LESS Split apart the extensive mainmenu.less file into a few component-like files: MainMenu, MainMenuFooter, MainMenuItem, and NotificationsOverlay. Two variables, @duration and @easing, were moved to minerva.variables. The separation is imperfect as some overlap still exists but is far better than before. This patch is focused on division without regression. Please limit any refactor requests. No user visible changes intended. The only selector that was cognizantly changed was to duplicate the drawer visibility on main menu and notifications overlay: // Old: mainmenu.less .navigation-drawer, .transparent-shield { visibility: visible; } // --- // New: MainMenu.less #mw-mf-page-left, .transparent-shield { visibility: visible; } // New: NotifcationsOverlay.less .navigation-enabled { .notifications-overlay { visibility: visible; } } The is unfortunately useless. It is best to reproduce these changes locally by renaming mainmenu.less to MainMenu.less and extract parts to MainMenuFooter, MainMenuItem, and NotificationsOverlay LESS files until the result matches. Bug: T206354 Change-Id: I8d37c5346efcf39a4d76322fd6e6af3fff96ac53
2019-08-01 20:35:10 +00:00
}
Fix alignment for nearby and settings items in menu, and correctly hide when JS is disabled Removes a `display: inherit` that was causing issues with the alignment of these two items in the menu. In addition, correctly sets display to none for jsonly-specified list items when client js is disabled and rename the class to make it more specific to the menu items Note: this will have a visual impact as it is fixing what is currently a visual bug. The jsonly hiding will also not work with cached content, but since it's currently broken we figured this was acceptable Bug: T346670 Change-Id: I56d2c4fcba09d199a0fd6aad2f1621509bbfaba5
2023-12-14 19:03:26 +00:00
.client-nojs & .skin-minerva-list-item-jsonly {
display: none;
}
[dev] divide main menu LESS Split apart the extensive mainmenu.less file into a few component-like files: MainMenu, MainMenuFooter, MainMenuItem, and NotificationsOverlay. Two variables, @duration and @easing, were moved to minerva.variables. The separation is imperfect as some overlap still exists but is far better than before. This patch is focused on division without regression. Please limit any refactor requests. No user visible changes intended. The only selector that was cognizantly changed was to duplicate the drawer visibility on main menu and notifications overlay: // Old: mainmenu.less .navigation-drawer, .transparent-shield { visibility: visible; } // --- // New: MainMenu.less #mw-mf-page-left, .transparent-shield { visibility: visible; } // New: NotifcationsOverlay.less .navigation-enabled { .notifications-overlay { visibility: visible; } } The is unfortunately useless. It is best to reproduce these changes locally by renaming mainmenu.less to MainMenu.less and extract parts to MainMenuFooter, MainMenuItem, and NotificationsOverlay LESS files until the result matches. Bug: T206354 Change-Id: I8d37c5346efcf39a4d76322fd6e6af3fff96ac53
2019-08-01 20:35:10 +00:00
}
}
}
Make menuGroup.mustache use togglelist classes, ensuring ToggleList HTML is consistent. Remove duplicated CSS Bug: T343920 Change-Id: I567d20171b0e511d00922adf250f97b9b8ed146b
2023-08-17 21:21:20 +00:00
// stylelint-enable selector-max-id
Reference in a new issue Copy permalink