overleaf/services/web/frontend/stylesheets/bootstrap-5/components/navbar.scss
Tim Down d5643d53b3 Merge pull request #18996 from overleaf/td-bs5-nav-react
Main navigation React component

GitOrigin-RevId: c99a4b4a2f6fd02618689f829681118b2b64aa8d
2024-08-22 08:05:03 +00:00

225 lines
6 KiB
SCSS

// Default navbar
.navbar-default {
background-color: var(--navbar-bg);
border-color: var(--navbar-border);
padding: var(--navbar-padding);
position: absolute;
top: 0;
width: 100%;
height: $header-height;
.navbar-container {
padding-left: 0;
padding-right: 0;
}
.navbar-header {
display: flex;
align-items: center;
justify-content: space-between;
flex: 1;
}
.navbar-brand {
width: var(--navbar-brand-width);
height: $header-height;
padding: 0;
background: var(--navbar-brand-image-url) no-repeat left center;
background-size: contain;
}
.navbar-title {
display: inline-block;
font-size: var(--navbar-title-font-size);
color: var(--navbar-title-color);
text-decoration: none;
&:hover,
&:active,
&:focus {
color: var(--navbar-title-color-hover);
}
}
.navbar-nav {
> li {
display: inline-flex;
> .nav-link,
> .dropdown-toggle {
display: block;
color: var(--navbar-link-color);
background-color: transparent;
padding: var(--navbar-btn-padding-v) var(--navbar-btn-padding-h);
margin-left: var(--navbar-item-spacing-horizontal);
border: var(--navbar-btn-border-width) solid
var(--navbar-link-border-color);
border-radius: var(--navbar-btn-border-radius);
font-size: var(--navbar-btn-font-size);
font-weight: var(--navbar-btn-font-weight);
line-height: var(--navbar-btn-line-height);
text-decoration: none;
&.show,
&:hover,
&:focus {
color: var(--navbar-link-hover-color);
background-color: var(--navbar-link-hover-bg);
border-color: var(--navbar-link-hover-border-color);
}
}
&.subdued > .nav-link,
&.subdued > .dropdown-toggle {
border: 0;
color: var(--navbar-subdued-color);
padding: var(--navbar-subdued-padding);
margin-left: 0;
&.show,
&:hover,
&:focus {
color: var(--navbar-subdued-hover-color);
background-color: var(--navbar-subdued-hover-bg);
}
}
}
}
.navbar-toggler {
--bs-navbar-toggler-padding-x: var(--spacing-04);
color: var(--navbar-link-color);
border-radius: var(--border-radius-base);
border-width: 0;
transition: 0.2s ease-out;
&:not(.collapsed) {
color: var(--navbar-toggler-expanded-color);
background-color: var(--navbar-toggler-expanded-bg);
transition: 0.2s ease-in;
}
& .material-symbols {
font-size: inherit;
font-weight: bold;
vertical-align: middle;
}
}
.navbar-collapse,
.navbar-form {
border-color: var(--navbar-border);
}
}
@include media-breakpoint-only(lg) {
:root {
--navbar-btn-padding-h: #{$spacing-04};
}
}
// Different (stacked) layout for smaller screens
@include media-breakpoint-down(lg) {
.navbar-default .navbar-collapse {
&.show {
min-height: calc(100vh - $header-height);
}
background-color: var(--navbar-bg);
margin: 0 calc(-1 * var(--navbar-padding-h));
z-index: 1;
.navbar-nav {
> li {
display: block;
> a,
> .dropdown-toggle {
margin: 0;
padding-top: var(--spacing-05);
padding-bottom: var(--spacing-05);
width: 100%;
text-align: left;
border-radius: 0;
border-width: 0;
}
// Dropdowns get custom display when collapsed
.dropdown-menu.show {
--bs-dropdown-spacer: 0;
box-shadow: none;
background-color: var(--navbar-hamburger-submenu-bg);
width: auto;
.dropdown-item {
padding: var(--spacing-02) var(--spacing-06) var(--spacing-02)
var(--spacing-08);
&:not(.disabled) {
color: var(--navbar-hamburger-submenu-item-color);
&:hover,
&:focus {
color: var(--navbar-hamburger-submenu-item-hover-color);
background-color: var(--navbar-hamburger-submenu-item-hover-bg);
}
}
}
}
}
}
}
}
// Accessibility
.skip-to-content {
color: var(--navbar-link-color);
background-color: var(--navbar-link-bg);
border: var(--spacing-01) solid transparent;
border-radius: var(--navbar-btn-border-radius);
font-size: var(--navbar-btn-font-size);
font-weight: var(--navbar-btn-font-weight);
left: calc(var(--navbar-brand-width) + var(--spacing-09));
line-height: var(--navbar-btn-line-height);
padding: var(--navbar-btn-padding-v) var(--navbar-btn-padding-h);
position: absolute;
top: -200px;
z-index: 1;
&:focus {
background-color: var(--navbar-link-hover-bg);
border: var(--spacing-01) solid var(--navbar-link-hover-color);
color: var(--white);
text-decoration: none;
top: calc(($header-height - 36px) / 2); // 36px is the height of the link
}
}
.website-redesign-navbar {
--navbar-title-color: var(--content-primary);
--navbar-title-color-hover: var(--content-secondary);
--navbar-brand-image-url: url('../../../../public/img/ol-brand/overleaf-black.svg');
--navbar-subdued-color: var(--content-primary);
--navbar-subdued-hover-bg: var(--bg-dark-primary);
--navbar-subdued-hover-color: var(--content-primary-dark);
--navbar-bg: var(--bg-light-primary);
// Navbar links
--navbar-link-color: var(--content-primary);
--navbar-link-border-color: var(--border-primary);
--navbar-link-hover-color: var(--navbar-link-color);
--navbar-link-hover-bg: var(--bg-light-tertiary);
--navbar-link-hover-border-color: var(--navbar-link-border-color);
// Toggler
--navbar-toggler-expanded-color: var(--white);
--navbar-toggler-expanded-bg: var(--bg-dark-primary);
// Mobile view
--navbar-hamburger-submenu-bg: var(--bg-light-secondary);
--navbar-hamburger-submenu-item-color: var(--navbar-link-color);
--navbar-hamburger-submenu-item-hover-color: var(--white);
--navbar-hamburger-submenu-item-hover-bg: var(--bg-dark-primary);
}