overleaf/services/web/frontend/stylesheets/bootstrap-5/components/tabs.scss
M Fahru 5b0bf3f915 Merge pull request #20662 from overleaf/mf-fix-bs5-nav-tab-li-hover
[web] BS5 CMS - Fix tab nav hover effect (remove underline)

GitOrigin-RevId: fdcb566b63afd567c1cf0ef95e72c66491137f30
2024-10-01 08:05:54 +00:00

80 lines
1.8 KiB
SCSS

.ol-tabs {
--border-width-base: 3px;
.nav-tabs-container {
overflow-x: auto;
display: flex;
flex-direction: column;
@include media-breakpoint-down(md) {
display: block;
}
.nav-tabs {
display: inline-flex;
gap: var(--spacing-04);
margin: 0 auto;
padding: 0;
border-bottom: var(--border-width-base) solid var(--neutral-20);
text-align: center;
border-top: 2px solid transparent; // so that top focus border is visible
min-width: max-content; // This is for horizontal scrolling
li {
display: inline-block;
float: none;
margin-bottom: calc(var(--border-width-base) * -0.6);
&:last-child {
margin-right: 0;
}
a {
border: 0;
border-radius: 0;
color: var(--neutral-70);
margin-right: unset;
padding: var(--spacing-04);
line-height: var(--line-height-03);
&:focus,
&:hover {
border: 0;
}
&:focus,
&:focus-visible {
background-color: unset;
outline: 0;
}
&:hover {
background-color: var(--neutral-10);
text-decoration: none;
}
&:focus-visible {
@include box-shadow-button-input;
}
}
}
li > a.active {
background-color: transparent !important;
border: 0 !important;
border-bottom: 3px solid var(--green-50) !important;
color: var(--neutral-90) !important;
}
}
}
.tab-content {
margin-top: var(--spacing-11);
}
}
// Scroll the page up a bit to allow tab links to be shown when navigating to
// a bookmarked tab hash
[data-ol-bookmarkable-tabset] .tab-pane {
scroll-margin-top: 120px;
}