overleaf/services/web/frontend/stylesheets/components/navbar.less
Jessica Lawshe bb882c697c Merge pull request #4288 from overleaf/jel-skip-to-content
Add "Skip to content" to improve accessibility

GitOrigin-RevId: 43368a65057656bdea10b6be3c598d68bd8e2d40
2021-07-28 02:06:54 +00:00

611 lines
14 KiB
Text
Executable file

//
// Navbars
// --------------------------------------------------
// Wrapper and base class
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
.navbar {
position: relative;
min-height: @navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)
margin-bottom: @navbar-margin-bottom;
border-bottom: 1px solid transparent;
// Prevent floats from breaking the navbar
&:extend(.clearfix all);
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-border-radius;
}
}
// Navbar heading
//
// Groups `.navbar-brand` and `.navbar-toggle` into a single component for easy
// styling of responsive aspects.
.navbar-header {
&:extend(.clearfix all);
@media (min-width: @grid-float-breakpoint) {
float: left;
}
}
// Navbar collapse (body)
//
// Group your navbar content into this for easy collapsing and expanding across
// various device sizes. By default, this content is collapsed when <768px, but
// will expand past that for a horizontal display.
//
// To start (on mobile devices) the navbar links, forms, and buttons are stacked
// vertically and include a `max-height` to overflow in case you have too much
// content for the user's viewport.
.navbar-collapse {
max-height: @navbar-collapse-max-height;
overflow-x: visible;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
&:extend(.clearfix all);
-webkit-overflow-scrolling: touch;
&.in {
overflow-y: auto;
}
@media (min-width: @grid-float-breakpoint) {
width: auto;
border-top: 0;
box-shadow: none;
&.collapse {
display: block !important;
height: auto !important;
padding-bottom: 0; // Override default setting
overflow: visible !important;
}
&.in {
overflow-y: visible;
}
// Undo the collapse side padding for navbars with containers to ensure
// alignment of right-aligned contents.
.navbar-fixed-top &,
.navbar-static-top &,
.navbar-fixed-bottom & {
padding-left: 0;
padding-right: 0;
}
}
}
.navbar-main {
z-index: 1;
.container-fluid > .navbar-collapse {
// High specificity needed to override Bootstrap's default.
margin: 10px 0 0;
@media (min-width: @grid-float-breakpoint) {
margin: 0;
}
}
.navbar-collapse {
// Use absolute positioning to build the hamburger menu.
position: absolute;
left: 0;
width: 100%;
margin: 0;
background-color: @navbar-default-bg;
border-bottom: solid 1px @navbar-default-border;
padding: 0;
@media (min-width: @grid-float-breakpoint) {
// Get back to regular layout mode as soon as the menu items are
// expanded (i.e. not contained within the hamburguer menu).
position: static;
background-color: transparent;
border-bottom: 0;
padding-right: @navbar-padding-horizontal;
padding-left: @navbar-padding-horizontal;
}
}
}
// Both navbar header and collapse
//
// When a container is present, change the behavior of the header and collapse.
.container,
.container-fluid {
> .navbar-header,
> .navbar-collapse {
margin-right: -@navbar-padding-horizontal;
margin-left: -@navbar-padding-horizontal;
@media (min-width: @grid-float-breakpoint) {
margin-right: 0;
margin-left: 0;
}
}
}
//
// Navbar alignment options
//
// Display the navbar across the entirety of the page or fixed it to the top or
// bottom of the page.
// Static top (unfixed, but 100% wide) navbar
.navbar-static-top {
z-index: @zindex-navbar;
border-width: 0 0 1px;
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
// Fix the top/bottom navbars when screen real estate supports it
.navbar-fixed-top,
.navbar-fixed-bottom {
position: fixed;
right: 0;
left: 0;
z-index: @zindex-navbar-fixed;
// Undo the rounded corners
@media (min-width: @grid-float-breakpoint) {
border-radius: 0;
}
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-fixed-bottom {
bottom: 0;
margin-bottom: 0; // override .navbar defaults
border-width: 1px 0 0;
}
// Brand/project name
.navbar-brand {
float: left;
//padding: @navbar-padding-vertical @navbar-padding-horizontal;
//font-size: @font-size-large;
line-height: @line-height-computed;
//height: @navbar-height;
&:hover,
&:focus {
text-decoration: none;
}
// @media (min-width: @grid-float-breakpoint) {
// .navbar > .container &,
// .navbar > .container-fluid & {
// margin-left: -@navbar-padding-horizontal;
// }
// }
}
.navbar-title {
font-size: 20px;
display: inline-block;
margin-top: 2px;
color: @navbar-title-color;
&:hover,
&:active,
&:focus {
color: @navbar-title-color-hover;
text-decoration: none;
}
}
// Navbar toggle
//
// Custom button for toggling the `.navbar-collapse`, powered by the collapse
// JavaScript plugin.
.navbar-toggle {
position: relative;
float: right;
background-color: transparent;
background-image: none; // Reset unusual Firefox-on-Android default style; see https://github.com/necolas/normalize.css/issues/214
border: 2px solid @navbar-default-link-color;
border-radius: @border-radius-base;
// We remove the `outline` here, but later compensate by attaching `:hover`
// styles to `:focus`.
&:focus {
outline: none;
}
@media (min-width: @grid-float-breakpoint) {
display: none;
}
}
// Navbar nav links
//
// Builds on top of the `.nav` components with its own modifier class to make
// the nav the full height of the horizontal nav (above 768px).
.navbar-nav {
margin: (@navbar-padding-vertical / 2) -@navbar-padding-horizontal;
> li > a {
padding-top: 10px;
padding-bottom: 10px;
line-height: @line-height-computed;
}
@media (max-width: @grid-float-breakpoint-max) {
margin: (@navbar-padding-vertical / 2) 0;
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
position: static;
float: none;
width: auto;
margin-top: 0;
background-color: transparent;
border: 0;
box-shadow: none;
> li > a,
> li > div.subdued,
> li > form > button,
.dropdown-header {
padding: 5px 15px 5px 25px;
}
> li > a,
> li > form > button {
line-height: @line-height-computed;
&:hover,
&:focus {
background-image: none;
}
}
> li > div.subdued {
line-height: @line-height-computed;
}
}
}
// Uncollapse the nav
@media (min-width: @grid-float-breakpoint) {
float: left;
margin: 0;
> li {
float: left;
> a {
padding-top: @navbar-padding-vertical;
padding-bottom: @navbar-padding-vertical;
}
}
&.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal;
}
}
}
// Component alignment
//
// Repurpose the pull utilities as their own navbar utilities to avoid specificity
// issues with parents and chaining. Only do this when the navbar is uncollapsed
// though so that navbar contents properly stack and align in mobile.
@media (min-width: @grid-float-breakpoint) {
.navbar-left {
.pull-left();
}
.navbar-right {
.pull-right();
}
}
// Navbar form
//
// Extension of the `.form-inline` with some extra flavor for optimum display in
// our navbars.
.navbar-form {
margin-left: -@navbar-padding-horizontal;
margin-right: -@navbar-padding-horizontal;
padding: 10px @navbar-padding-horizontal;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
@shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1),
0 1px 0 rgba(255, 255, 255, 0.1);
.box-shadow(@shadow);
// Mixin behavior for optimum display
.form-inline();
.form-group {
@media (max-width: @grid-float-breakpoint-max) {
margin-bottom: 5px;
}
}
// Vertically center in expanded, horizontal navbar
.navbar-vertical-align(@input-height-base);
// Undo 100% width for pull classes
@media (min-width: @grid-float-breakpoint) {
width: auto;
border: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
.box-shadow(none);
// Outdent the form if last child to line up with content down the page
&.navbar-right:last-child {
margin-right: -@navbar-padding-horizontal;
}
}
}
// Dropdown menus
// Menu position and menu carets
.navbar-nav > li > .dropdown-menu {
margin-top: 0;
.border-top-radius(0);
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .navbar-nav > li > .dropdown-menu {
.border-bottom-radius(0);
}
// Buttons in navbars
//
// Vertically center a button within a navbar (when *not* in a form).
.navbar-btn {
.navbar-vertical-align(@input-height-base);
&.btn-sm {
.navbar-vertical-align(@input-height-small);
}
&.btn-xs {
.navbar-vertical-align(22);
}
}
// Text in navbars
//
// Add a class to make any element properly align itself vertically within the navbars.
.navbar-text {
.navbar-vertical-align(@line-height-computed);
@media (min-width: @grid-float-breakpoint) {
float: left;
margin-left: @navbar-padding-horizontal;
margin-right: @navbar-padding-horizontal;
// Outdent the form if last child to line up with content down the page
&.navbar-right:last-child {
margin-right: 0;
}
}
}
// Alternate navbars
// --------------------------------------------------
// Default navbar
.navbar-default {
background-color: @navbar-default-bg;
border-color: @navbar-default-border;
padding: @navbar-default-padding;
position: absolute;
top: 0;
width: 100%;
height: @header-height;
.navbar-brand {
position: absolute;
top: 5px;
bottom: 5px;
width: @navbar-brand-width;
padding: 0;
background-image: @navbar-brand-image-url;
background-size: contain;
background-repeat: no-repeat;
background-position: left center;
}
.navbar-text {
color: @navbar-default-color;
}
.navbar-nav {
> li > a {
color: @navbar-default-link-color;
border: 2px solid transparent;
font-size: @navbar-btn-font-size;
font-weight: @navbar-btn-font-weight;
line-height: @navbar-btn-line-height;
background-color: @navbar-default-link-bg;
@media (min-width: @grid-float-breakpoint) {
border-radius: @navbar-btn-border-radius;
padding: @navbar-btn-padding;
}
&:hover,
&:focus {
color: #fff;
background-color: @navbar-default-link-hover-bg;
border: 2px solid @navbar-default-link-hover-color;
}
}
> .active > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
> li.subdued > a {
border: 0;
color: @navbar-subdued-color;
margin-left: 0;
background-color: transparent;
&:hover,
&:focus {
color: @navbar-subdued-hover-color;
background-color: @navbar-subdued-hover-bg;
}
&:focus {
.tab-focus();
}
@media (min-width: @grid-float-breakpoint) {
padding: @navbar-subdued-padding;
}
}
@media (min-width: @grid-float-breakpoint) {
> li > a {
border-color: @navbar-default-link-border-color;
margin-left: 1rem;
}
}
}
.navbar-toggle {
border-color: @navbar-default-toggle-border-color;
color: @navbar-default-link-color;
&:hover,
&.active {
background-color: @navbar-default-toggle-hover-bg;
border-color: @navbar-default-toggle-hover-bg;
color: #fff;
}
}
.navbar-collapse,
.navbar-form {
border-color: @navbar-default-border;
}
.navbar-collapse.in {
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.25);
}
// Dropdown menu items
.navbar-nav {
// Remove background color from open dropdown
> .open > a {
&,
&:hover,
&:focus {
background-color: @navbar-default-link-active-bg;
color: @navbar-default-link-active-color;
}
}
> .open.subdued > a {
&,
&:hover,
&:focus {
color: @navbar-subdued-hover-color;
background-color: @navbar-subdued-hover-bg;
}
}
@media (max-width: @grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
background-color: lighten(@navbar-default-bg, 10%);
> li > div.subdued {
color: mix(@navbar-default-link-color, @navbar-default-bg);
}
> li > a,
> li > form > button {
// padding: 12px 12px 13px 30px;
color: @navbar-default-link-color;
&:hover,
&:focus {
color: #fff;
background-color: @navbar-default-link-hover-bg;
}
}
> .active > a,
> .active > form > button {
&,
&:hover,
&:focus {
color: @navbar-default-link-active-color;
background-color: @navbar-default-link-active-bg;
}
}
> .disabled > a,
> .disabled > form > button {
&,
&:hover,
&:focus {
color: @navbar-default-link-disabled-color;
background-color: @navbar-default-link-disabled-bg;
}
}
}
}
}
// Links in navbars
//
// Add a class to ensure links outside the navbar nav are colored correctly.
.navbar-link {
color: @navbar-default-link-color;
&:hover {
color: @navbar-default-link-hover-color;
}
}
@media (min-width: @grid-float-breakpoint) {
padding: @navbar-default-padding-v 0;
}
}
// Accessibility
.skip-to-content {
color: @navbar-default-link-color;
background-color: @navbar-default-link-bg;
border: 2px solid transparent;
border-radius: @navbar-btn-border-radius;
font-size: @navbar-btn-font-size;
font-weight: @navbar-btn-font-weight;
left: @navbar-brand-width + @padding-lg;
line-height: @navbar-btn-line-height;
padding: @navbar-btn-padding;
position: absolute;
top: -200px;
z-index: @zindex-navbar + 1;
&:focus {
background-color: @navbar-default-link-hover-bg;
border: 2px solid @navbar-default-link-hover-color;
color: @white;
text-decoration: none;
top: @navbar-default-padding-v;
}
}