mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Merge pull request #18420 from overleaf/td-bs5-nav
Bootstrap 5: Navigation GitOrigin-RevId: d22683d78c8b3bc3f41bbd276c36f47d480e24ff
This commit is contained in:
Tim Down
Copybot
parent
8704e430a4
commit
edaba14ed1
14 changed files with 555 additions and 23 deletions
23
services/web/app/views/_mixins/navbar.pug
Normal file
23
services/web/app/views/_mixins/navbar.pug
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
mixin nav-item
|
||||
li(role="none")&attributes(attributes)
|
||||
block
|
||||
|
||||
mixin nav-link
|
||||
a(role="menuitem")&attributes(attributes)
|
||||
block
|
||||
|
||||
mixin dropdown-menu
|
||||
ul(role="menu").dropdown-menu&attributes(attributes)
|
||||
block
|
||||
|
||||
mixin dropdown-menu-item
|
||||
li(role="none")
|
||||
block
|
||||
|
||||
mixin dropdown-menu-link-item
|
||||
+dropdown-menu-item
|
||||
a(role="menuitem", tabindex="-1").dropdown-item&attributes(attributes)
|
||||
block
|
||||
|
||||
mixin dropdown-menu-divider
|
||||
li(role="separator").dropdown-divider.d-none.d-lg-block
|
||||
|
|
@ -7,12 +7,15 @@ block entrypointVar
|
|||
- entrypoint = 'marketing'
|
||||
|
||||
block body
|
||||
if (typeof(suppressNavbar) == "undefined")
|
||||
include layout/navbar-marketing
|
||||
if (typeof suppressNavbar === "undefined")
|
||||
if bootstrapVersion === 5
|
||||
include layout/navbar-marketing-bootstrap-5
|
||||
else
|
||||
include layout/navbar-marketing
|
||||
|
||||
block content
|
||||
|
||||
if (typeof(suppressFooter) == "undefined")
|
||||
if (typeof suppressFooter === "undefined")
|
||||
if showThinFooter
|
||||
include layout/footer-marketing
|
||||
else
|
||||
|
|
|
|||
179
services/web/app/views/layout/navbar-marketing-bootstrap-5.pug
Normal file
179
services/web/app/views/layout/navbar-marketing-bootstrap-5.pug
Normal file
|
|
@ -0,0 +1,179 @@
|
|||
include ../_mixins/navbar
|
||||
|
||||
nav.navbar.navbar-default.navbar-main.navbar-expand-lg
|
||||
.container-fluid.navbar-container
|
||||
.navbar-header
|
||||
if settings.nav.custom_logo
|
||||
a(href='/', aria-label=settings.appName, style='background-image:url("'+settings.nav.custom_logo+'")').navbar-brand
|
||||
else if (nav.title)
|
||||
a(href='/', aria-label=settings.appName).navbar-title #{nav.title}
|
||||
else
|
||||
a(href='/', aria-label=settings.appName).navbar-brand
|
||||
|
||||
- var enableUpgradeButton = projectDashboardReact && usersBestSubscription && usersBestSubscription.type === 'free'
|
||||
if (enableUpgradeButton)
|
||||
a.btn.btn-primary.me-2.d-md-none(
|
||||
href="/user/subscription/plans"
|
||||
event-tracking="upgrade-button-click"
|
||||
event-tracking-mb="true"
|
||||
event-tracking-label="upgrade"
|
||||
event-tracking-trigger="click"
|
||||
event-segmentation='{"source": "dashboard-top", "project-dashboard-react": "enabled", "is-dashboard-sidebar-hidden": "true", "is-screen-width-less-than-768px": "true"}'
|
||||
) #{translate("upgrade")}
|
||||
|
||||
- var canDisplayAdminMenu = hasAdminAccess()
|
||||
- var canDisplayAdminRedirect = canRedirectToAdminDomain()
|
||||
- var canDisplaySplitTestMenu = hasFeature('saas') && (canDisplayAdminMenu || (getSessionUser() && getSessionUser().staffAccess && (getSessionUser().staffAccess.splitTestMetrics || getSessionUser().staffAccess.splitTestManagement)))
|
||||
- var canDisplaySurveyMenu = hasFeature('saas') && canDisplayAdminMenu
|
||||
|
||||
if (typeof suppressNavbarRight === "undefined")
|
||||
button.navbar-toggler.collapsed(
|
||||
type="button",
|
||||
data-bs-toggle="collapse",
|
||||
data-bs-target="#navbar-main-collapse"
|
||||
aria-controls="navbar-main-collapse"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle " + translate('navigation')
|
||||
)
|
||||
i.fa.fa-bars(aria-hidden="true")
|
||||
|
||||
.navbar-collapse.collapse#navbar-main-collapse
|
||||
ul.nav.navbar-nav.navbar-right.ms-auto(role="menubar")
|
||||
if (canDisplayAdminMenu || canDisplayAdminRedirect || canDisplaySplitTestMenu)
|
||||
+nav-item.dropdown.subdued
|
||||
button.dropdown-toggle(
|
||||
aria-haspopup="true",
|
||||
aria-expanded="false",
|
||||
data-bs-toggle="dropdown"
|
||||
)
|
||||
| Admin
|
||||
span.caret
|
||||
+dropdown-menu.dropdown-menu-end
|
||||
if canDisplayAdminMenu
|
||||
+dropdown-menu-link-item()(href="/admin") Manage Site
|
||||
+dropdown-menu-link-item()(href="/admin/user") Manage Users
|
||||
+dropdown-menu-link-item()(href="/admin/project") Project URL Lookup
|
||||
if canDisplayAdminRedirect
|
||||
+dropdown-menu-link-item()(settings.adminUrl) Switch to Admin
|
||||
if canDisplaySplitTestMenu
|
||||
+dropdown-menu-link-item()(href="/admin/split-test") Manage Feature Flags
|
||||
if canDisplaySurveyMenu
|
||||
+dropdown-menu-link-item()(href="/admin/survey") Manage Surveys
|
||||
|
||||
// loop over header_extras
|
||||
each item in nav.header_extras
|
||||
-
|
||||
if ((item.only_when_logged_in && getSessionUser())
|
||||
|| (item.only_when_logged_out && (!getSessionUser()))
|
||||
|| (!item.only_when_logged_out && !item.only_when_logged_in && !item.only_content_pages)
|
||||
|| (item.only_content_pages && (typeof suppressNavContentLinks === "undefined" || !suppressNavContentLinks))
|
||||
){
|
||||
var showNavItem = true
|
||||
} else {
|
||||
var showNavItem = false
|
||||
}
|
||||
|
||||
if showNavItem
|
||||
if item.dropdown
|
||||
+nav-item.dropdown(class=item.class)
|
||||
button.dropdown-toggle(
|
||||
aria-haspopup="true",
|
||||
aria-expanded="false",
|
||||
data-bs-toggle="dropdown"
|
||||
)
|
||||
| !{translate(item.text)}
|
||||
span.caret
|
||||
+dropdown-menu.dropdown-menu-end
|
||||
each child in item.dropdown
|
||||
if child.divider
|
||||
+dropdown-menu-divider
|
||||
else if child.isContactUs
|
||||
+dropdown-menu-link-item()(data-ol-open-contact-form-modal="contact-us" href)
|
||||
span(event-tracking="menu-clicked-contact" event-tracking-mb="true" event-tracking-trigger="click")
|
||||
| #{translate("contact_us")}
|
||||
else
|
||||
if child.url
|
||||
+dropdown-menu-link-item()(
|
||||
class=child.class,
|
||||
event-tracking=child.event
|
||||
event-tracking-mb="true"
|
||||
event-tracking-trigger="click"
|
||||
event-segmentation=child.eventSegmentation
|
||||
) !{translate(child.text)}
|
||||
else
|
||||
+dropdown-menu-item !{translate(child.text)}
|
||||
else
|
||||
+nav-item(class=item.class)
|
||||
if item.url
|
||||
+nav-link(
|
||||
href=item.url,
|
||||
class=item.class,
|
||||
event-tracking=item.event
|
||||
event-tracking-mb="true"
|
||||
event-tracking-trigger="click"
|
||||
) !{translate(item.text)}
|
||||
else
|
||||
| !{translate(item.text)}
|
||||
|
||||
// logged out
|
||||
if !getSessionUser()
|
||||
// register link
|
||||
if hasFeature('registration-page')
|
||||
+nav-item.primary
|
||||
+nav-link(
|
||||
href="/register"
|
||||
event-tracking="menu-clicked-register"
|
||||
event-tracking-action="clicked"
|
||||
event-tracking-trigger="click"
|
||||
event-tracking-mb="true"
|
||||
event-segmentation={ page: currentUrl }
|
||||
) #{translate('sign_up')}
|
||||
|
||||
// login link
|
||||
+nav-item
|
||||
+nav-link(
|
||||
href="/login"
|
||||
event-tracking="menu-clicked-login"
|
||||
event-tracking-action="clicked"
|
||||
event-tracking-trigger="click"
|
||||
event-tracking-mb="true"
|
||||
event-segmentation={ page: currentUrl }
|
||||
) #{translate('log_in')}
|
||||
|
||||
// projects link and account menu
|
||||
if getSessionUser()
|
||||
+nav-item
|
||||
+nav-link(href="/project") #{translate('Projects')}
|
||||
+nav-item.dropdown
|
||||
button.dropdown-toggle(
|
||||
aria-haspopup="true",
|
||||
aria-expanded="false",
|
||||
data-bs-toggle="dropdown"
|
||||
)
|
||||
| #{translate('Account')}
|
||||
span.caret
|
||||
+dropdown-menu.dropdown-menu-end
|
||||
+dropdown-menu-item
|
||||
div.disabled.dropdown-item #{getSessionUser().email}
|
||||
+dropdown-menu-divider
|
||||
+dropdown-menu-link-item()(href="/user/settings") #{translate('Account Settings')}
|
||||
if nav.showSubscriptionLink
|
||||
+dropdown-menu-link-item()(href="/user/subscription") #{translate('subscription')}
|
||||
+dropdown-menu-divider
|
||||
+dropdown-menu-item
|
||||
//-
|
||||
The button is outside the form but still belongs to it via the form attribute. The reason to do
|
||||
this is that if the button is inside the form, screen readers will not count it in the total
|
||||
number of menu items.
|
||||
button.btn-link.text-left.dropdown-menu-button.dropdown-item(
|
||||
role="menuitem",
|
||||
tabindex="-1"
|
||||
form="logOutForm"
|
||||
)
|
||||
| #{translate('log_out')}
|
||||
form(
|
||||
method="POST",
|
||||
action="/logout",
|
||||
id="logOutForm"
|
||||
)
|
||||
input(name='_csrf', type='hidden', value=csrfToken)
|
||||
|
|
@ -11,6 +11,7 @@ import type {
|
|||
DropdownItemProps,
|
||||
DropdownToggleProps,
|
||||
DropdownMenuProps,
|
||||
DropdownDividerProps,
|
||||
} from '@/features/ui/components/types/dropdown-menu-props'
|
||||
import MaterialIcon from '@/shared/components/material-icon'
|
||||
|
||||
|
|
@ -62,9 +63,9 @@ export function DropdownToggle({ ...props }: DropdownToggleProps) {
|
|||
}
|
||||
|
||||
export function DropdownMenu({ as = 'ul', ...props }: DropdownMenuProps) {
|
||||
return <BS5DropdownMenu as={as} role="menubar" {...props} />
|
||||
return <BS5DropdownMenu as={as} role="menu" {...props} />
|
||||
}
|
||||
|
||||
export function DropdownDivider() {
|
||||
return <BS5DropdownDivider aria-hidden="true" />
|
||||
export function DropdownDivider({ as = 'li' }: DropdownDividerProps) {
|
||||
return <BS5DropdownDivider as={as} />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -45,3 +45,7 @@ export type DropdownMenuProps = PropsWithChildren<{
|
|||
disabled?: boolean
|
||||
show?: boolean
|
||||
}>
|
||||
|
||||
export type DropdownDividerProps = PropsWithChildren<{
|
||||
as?: ElementType
|
||||
}>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
@import 'mixins';
|
||||
@import 'variable-overrides';
|
||||
@import 'variables';
|
||||
@import 'variable-overrides';
|
||||
|
|
|
|||
|
|
@ -130,7 +130,6 @@ $form-validation-states: (
|
|||
),
|
||||
);
|
||||
// Close buttons
|
||||
// Close button
|
||||
$btn-close-color: $content-primary;
|
||||
$btn-close-opacity: 1;
|
||||
$btn-close-width: 10px;
|
||||
|
|
@ -145,6 +144,14 @@ $danger: $bg-danger-01;
|
|||
$light: $bg-light-tertiary;
|
||||
$dark: $neutral-90;
|
||||
|
||||
// Body colors
|
||||
$body-color: $content-primary;
|
||||
$body-bg: $bg-light-primary;
|
||||
$body-secondary-color: $content-secondary;
|
||||
$body-secondary-bg: $bg-light-secondary;
|
||||
$body-tertiary-color: $content-disabled;
|
||||
$body-tertiary-bg: $bg-light-tertiary;
|
||||
|
||||
// Badges
|
||||
$badge-font-size: var(--font-size-01);
|
||||
$badge-font-weight: var(--bs-body-font-weight);
|
||||
|
|
@ -183,3 +190,30 @@ $box-shadow-lg: shadow-lg();
|
|||
$modal-header-padding: $spacing-05 $spacing-06;
|
||||
$modal-header-padding-x: $spacing-08;
|
||||
$modal-header-padding-y: $spacing-08;
|
||||
|
||||
// Nav toggler
|
||||
$navbar-toggler-font-size: 30px;
|
||||
$navbar-toggler-padding-x: var(--spacing-05);
|
||||
$navbar-toggler-padding-y: var(--spacing-02);
|
||||
$navbar-toggler-border-radius: var(--border-radius-base);
|
||||
|
||||
// Spacing scale used by Bootstrap utilities
|
||||
$spacer: $spacing-06;
|
||||
$spacers: (
|
||||
0: 0,
|
||||
1: $spacing-02,
|
||||
2: $spacing-04,
|
||||
3: $spacing-06,
|
||||
4: $spacing-08,
|
||||
5: $spacing-11,
|
||||
);
|
||||
|
||||
// Dropdowns
|
||||
$dropdown-link-disabled-color: var(--content-disabled);
|
||||
$dropdown-spacer: var(--spacing-01);
|
||||
$dropdown-border-width: 0;
|
||||
$dropdown-border-radius: var(--border-radius-base);
|
||||
$dropdown-padding-x: var(--spacing-02);
|
||||
$dropdown-padding-y: var(--spacing-02);
|
||||
$dropdown-item-padding-x: var(--spacing-04);
|
||||
$dropdown-item-padding-y: var(--spacing-05);
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
// Layout & components
|
||||
@import 'bootstrap-5/scss/root';
|
||||
@import 'bootstrap-5/scss/reboot';
|
||||
@import 'bootstrap-5/scss/transitions';
|
||||
@import 'bootstrap-5/scss/type';
|
||||
@import 'bootstrap-5/scss/images';
|
||||
@import 'bootstrap-5/scss/containers';
|
||||
|
|
@ -35,6 +36,8 @@
|
|||
@import 'bootstrap-5/scss/spinners';
|
||||
@import 'bootstrap-5/scss/card';
|
||||
@import 'bootstrap-5/scss/close';
|
||||
@import 'bootstrap-5/scss/nav';
|
||||
@import 'bootstrap-5/scss/navbar';
|
||||
|
||||
// Helpers
|
||||
@import 'bootstrap-5/scss/helpers';
|
||||
|
|
|
|||
|
|
@ -9,3 +9,5 @@
|
|||
@import 'input-suggestions';
|
||||
@import 'modal';
|
||||
@import 'footer';
|
||||
@import 'nav';
|
||||
@import 'navbar';
|
||||
|
|
|
|||
|
|
@ -96,7 +96,6 @@
|
|||
color: var(--link-ui);
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
border-radius: 0;
|
||||
text-decoration: underline;
|
||||
font-size: inherit;
|
||||
vertical-align: inherit;
|
||||
|
|
|
|||
|
|
@ -3,30 +3,30 @@
|
|||
}
|
||||
|
||||
.dropdown-menu {
|
||||
@include shadow-sm;
|
||||
@include shadow-md;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--border-radius-base);
|
||||
padding: var(--spacing-02);
|
||||
transform: none;
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
@include body-sm;
|
||||
|
||||
border-radius: var(--border-radius-base);
|
||||
color: var(--neutral-90);
|
||||
--bs-dropdown-item-border-radius: var(--border-radius-base);
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: start;
|
||||
align-content: center;
|
||||
min-height: 44px; // a minimum height of 44px to be accessible for touch screens
|
||||
padding: var(--spacing-05) var(--spacing-04);
|
||||
position: relative;
|
||||
|
||||
&:active {
|
||||
background-color: var(--bg-accent-03);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&,
|
||||
&:active,
|
||||
&:visited {
|
||||
color: var(--neutral-90);
|
||||
}
|
||||
|
||||
&:hover:not(.active),
|
||||
|
|
@ -49,12 +49,20 @@
|
|||
background-color: var(--bg-accent-03);
|
||||
color: var(--green-70);
|
||||
}
|
||||
|
||||
&.btn-link {
|
||||
text-decoration: none;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-divider {
|
||||
border-radius: 1px;
|
||||
background-color: var(--border-divider);
|
||||
margin: 2px 6px;
|
||||
border-top-color: var(--border-divider);
|
||||
margin: var(--spacing-01) var(--spacing-03);
|
||||
}
|
||||
|
||||
.dropdown-item-description {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,56 @@
|
|||
@import 'bootstrap-5/scss/functions';
|
||||
|
||||
:root {
|
||||
// Basics
|
||||
--navbar-item-spacing-horizontal: var(--spacing-06);
|
||||
|
||||
--navbar-bg: var(--bg-dark-primary);
|
||||
--navbar-border: transparent;
|
||||
|
||||
--navbar-padding-h: var(--spacing-05);
|
||||
--navbar-padding: 0 var(--navbar-padding-h);
|
||||
|
||||
--navbar-brand-width: 130px;
|
||||
--navbar-brand-image-url: url(../../../../public/img/ol-brand/overleaf-white.svg);
|
||||
|
||||
// Title, when used instead of a logo
|
||||
--navbar-title-font-size: var(--font-size-05);
|
||||
--navbar-title-color: var(--neutral-20);
|
||||
--navbar-title-color-hover: var(--neutral-40);
|
||||
|
||||
// Button-like top-level items
|
||||
--navbar-btn-font-size: #{$font-size-base};
|
||||
--navbar-btn-border-radius: #{$border-radius-full};
|
||||
--navbar-btn-border-width: #{$spacing-01};
|
||||
--navbar-btn-font-weight: #{$font-weight-base};
|
||||
--navbar-btn-padding-v: #{$spacing-02};
|
||||
--navbar-btn-padding-h: #{$spacing-06};
|
||||
--navbar-btn-line-height: #{$line-height-base};
|
||||
|
||||
// Properties of "subdued" items
|
||||
--navbar-subdued-padding: calc(
|
||||
var(--navbar-btn-padding-v) + var(--navbar-btn-border-width)
|
||||
)
|
||||
calc(var(--navbar-btn-padding-h) + 1px);
|
||||
--navbar-subdued-color: var(--white);
|
||||
--navbar-subdued-hover-bg: var(--white);
|
||||
--navbar-subdued-hover-color: var(--green-50);
|
||||
|
||||
// Links
|
||||
--navbar-link-color: var(--white);
|
||||
--navbar-link-border-color: var(--navbar-link-color);
|
||||
|
||||
--navbar-link-hover-color: var(--white);
|
||||
--navbar-link-hover-bg: var(--green-50);
|
||||
--navbar-link-hover-border-color: var(--navbar-link-hover-bg);
|
||||
|
||||
// Toggler
|
||||
--navbar-toggler-expanded-color: var(--navbar-link-color);
|
||||
--navbar-toggler-expanded-bg: var(--blue-60);
|
||||
|
||||
// Mobile view
|
||||
--navbar-hamburger-submenu-bg: var(--bg-dark-secondary);
|
||||
--navbar-hamburger-submenu-item-color: var(--navbar-link-color);
|
||||
--navbar-hamburger-submenu-item-hover-color: var(--navbar-link-color);
|
||||
--navbar-hamburger-submenu-item-hover-bg: var(--navbar-link-hover-bg);
|
||||
}
|
||||
|
|
@ -0,0 +1,220 @@
|
|||
// 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;
|
||||
|
||||
> a,
|
||||
> .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 > a,
|
||||
&.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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.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: var(--spacing-05) var(--navbar-padding-h);
|
||||
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);
|
||||
}
|
||||
|
|
@ -13,6 +13,6 @@
|
|||
// Modals, drawers
|
||||
@mixin shadow-lg {
|
||||
box-shadow:
|
||||
0px 8px 16px 0px rgb(30 37 48 / 12%),
|
||||
0px 4px 6px 0px rgb(30 37 48 / 12%);
|
||||
0 8px 16px 0 rgb(30 37 48 / 12%),
|
||||
0 4px 6px 0 rgb(30 37 48 / 12%);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue