wikimedia/mediawiki-skins-MinervaNeue
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/MinervaNeue synced 2024-11-17 03:08:12 +00:00
Code Issues Packages Projects Releases Wiki Activity
mediawiki-skins-MinervaNeue/resources/skins.minerva.amc.styles/tabs.less

39 lines
593 B
Plaintext
Raw Normal View History

Make the tabs scrollable horizontally * Add a container around the tabs and use flexbox to position the tabs on one line and make it scrollable. * Add some JS to scroll the currently selected tab into view. Bug: T223142 Change-Id: Ie2205e6836797c2ac000e12a01f78a4aa7bc5b81
2019-06-14 17:32:17 +00:00
.minerva__tab-container {
Tabs: Remove unnecessary flexbox styles white-space:nowrap is simpler and better supported. Change-Id: I8c44cdd3c30a4cad1817b7912f9bbaae9e5ef641
2019-06-18 20:34:24 +00:00
white-space: nowrap;
Make the tabs scrollable horizontally * Add a container around the tabs and use flexbox to position the tabs on one line and make it scrollable. * Add some JS to scroll the currently selected tab into view. Bug: T223142 Change-Id: Ie2205e6836797c2ac000e12a01f78a4aa7bc5b81
2019-06-14 17:32:17 +00:00
overflow-x: auto;
Talk tabs in AMC mode A new feature/skin option is added that is enabled safely inside a MobileFrontend available/unavailable hook that changes the skin to place talk tabs at the top of the page. These new talk tabs purposely show on the main page, user page and standard pages and do not show on special pages. Depends-On: Ie1a583657176acc6f7046c569c2e94fa2f72ff93 Bug: T212216 Change-Id: I57b70cd325666a287678dc897159b5bf9d089b78
2019-01-10 22:59:56 +00:00
Make the tabs scrollable horizontally * Add a container around the tabs and use flexbox to position the tabs on one line and make it scrollable. * Add some JS to scroll the currently selected tab into view. Bug: T223142 Change-Id: Ie2205e6836797c2ac000e12a01f78a4aa7bc5b81
2019-06-14 17:32:17 +00:00
.minerva__tab {
Convert Less variable names from camelCase to snake-case Converts all Less variable names from CamelCase to snake-case per the MediaWiki coding conventions. Removes the following unused Less variables, mostly related to icons, since those were converted to Codex: - @icon-touch-area-sm - @icon-touch-area-md - @min-size-icon (replaced with @size-icon-medium) - @icon-glyph-size-sm - @icon-size-sm - @icon-padding-sm - @icon-glyph-size-md - @icon-size-md - @margin-icon-md-labelled Bug: T350581 Change-Id: I1b16e77942d9bea20dcc5636a63d64aa2325a173
2024-01-31 15:06:56 +00:00
font-size: @font-size-tag-line;
Reduce margin below article/discussion tabs. Bug: T225230 Change-Id: I318848d8e47b0a7d4f47946a1f2ae22a5c7878bb
2019-07-22 11:42:12 +00:00
margin: 0 10px 0 0;
Make the tabs scrollable horizontally * Add a container around the tabs and use flexbox to position the tabs on one line and make it scrollable. * Add some JS to scroll the currently selected tab into view. Bug: T223142 Change-Id: Ie2205e6836797c2ac000e12a01f78a4aa7bc5b81
2019-06-14 17:32:17 +00:00
font-weight: bold;
padding-bottom: 6px;
display: inline-block;
Rework tabs to use unordered list As part of my work on fixing addPortletLink for tabs on mobile (T340728) we need these tabs to be correctly designated as an unordered list (note, this is also how they are rendered in Vector). In addition, update the styles to account for the link being nested in a list item now There should be no visual change as a result of this, but if there is please let me know!! I will be testing locally in pixel after pushing to ensure the change is transparent Bug: T340728 Change-Id: I922558a59aa909ce76079bab057811d76467f644
2023-12-19 00:22:18 +00:00
a {
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
color: var( --color-subtle );
Improve tab scrolling logic * If the leftmost tab is selected, scroll all the way to the left * If the rightmost tab is selected, scroll all the way to the right * If a tab in the middle is selected, scroll to center it * If the selected tab is wider than the tab container, make sure its start (left edge in LTR, right edge in RTL) is always made visible. As Bartosz reminded me, .scrollLeft in RTL is a cross-browser nightmare (see https://github.com/othree/jquery.rtl-scroll-type), so add a bunch of code working around this. Some of this logic is in OOUI already, but what's there is not enough for what we need here, and we also don't want to load OOUI for this. Bug: T223142 Change-Id: Ica298954b42f9daa4819043ec24bc0266290a927
2019-06-25 01:10:51 +00:00
}
Rework tabs to use unordered list As part of my work on fixing addPortletLink for tabs on mobile (T340728) we need these tabs to be correctly designated as an unordered list (note, this is also how they are rendered in Vector). In addition, update the styles to account for the link being nested in a list item now There should be no visual change as a result of this, but if there is please let me know!! I will be testing locally in pixel after pushing to ensure the change is transparent Bug: T340728 Change-Id: I922558a59aa909ce76079bab057811d76467f644
2023-12-19 00:22:18 +00:00
a:visited,
a:hover,
a:active {
text-decoration: none;
}
&.new a,
&.new a:visited,
&.new a:hover,
&.new a:active {
Follow-up to 59fd0cd (red-link typo) Fixes typo in variable name. --color-link-new -> --color-link-red Bug: T356074 Change-Id: I801e5cd90d63c2af00485621f3774a10ca41804f
2024-02-02 21:54:11 +00:00
color: var( --color-link-red );
Make the tabs scrollable horizontally * Add a container around the tabs and use flexbox to position the tabs on one line and make it scrollable. * Add some JS to scroll the currently selected tab into view. Bug: T223142 Change-Id: Ie2205e6836797c2ac000e12a01f78a4aa7bc5b81
2019-06-14 17:32:17 +00:00
}
Remove old styles for unnested tabs Once the cache has cleared out and all tab links are nested in li elements (983960), follow up on the fixmes introduced and update the stylesheet to reflect the single way we will be styling `minerva__tab`s going forward. This should not be merged until after the break to ensure the cache has had time to clear No visual changes on this one as it _should_ effectively be a noop Bug: T340728 Change-Id: I36be5ab3cacfb5e0c0f056264055509d2ee22271
2023-12-20 22:28:08 +00:00
&:last-child {
margin-right: 0;
}
// note core doesn't use BEM.
&.selected {
border-bottom: @border-width-thick @border-style-base #54595d;
}
Talk tabs in AMC mode A new feature/skin option is added that is enabled safely inside a MobileFrontend available/unavailable hook that changes the skin to place talk tabs at the top of the page. These new talk tabs purposely show on the main page, user page and standard pages and do not show on special pages. Depends-On: Ie1a583657176acc6f7046c569c2e94fa2f72ff93 Bug: T212216 Change-Id: I57b70cd325666a287678dc897159b5bf9d089b78
2019-01-10 22:59:56 +00:00
}
}
Reference in a new issue Copy permalink