mediawiki-skins-MinervaNeue/resources/skins.minerva.amc.styles/tabs.less
Roan Kattouw ec17da76c1 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-07-30 18:35:14 -07:00

34 lines
537 B
Plaintext

.minerva__tab-container {
white-space: nowrap;
overflow-x: auto;
.minerva__tab {
font-size: @taglineFontSize;
margin: 0 10px 0 0;
color: @colorGray5;
font-weight: bold;
padding-bottom: 6px;
display: inline-block;
&:visited,
&:hover,
&:active,
&.new,
&.new:visited,
&.new:active,
&.new:hover {
color: @colorGray5;
text-decoration: none;
}
&:last-child {
margin-right: 0;
}
// note core doesn't use BEM.
&.selected {
border-bottom: (@pageActionBorder * 2) solid @colorGray5;
}
}
}