/**
* @file plugins/themes/default/styles/head.less
*
* Copyright (c) 2014-2021 Simon Fraser University
* Copyright (c) 2003-2021 John Willinsky
* Distributed under the GNU GPL v3. For full terms see the file docs/COPYING.
*
* @ingroup pkp_structure_head
*
* @brief Classes for the page header structural elements
*/
@nav-menu-height: @quadruple;
// Structural components of the header layout
.pkp_structure_head {
background-color: @bg-base;
border-bottom: @bg-border;
}
.pkp_head_wrapper {
position: relative;
}
.pkp_site_name_wrapper {
height: @nav-menu-height;
@media (min-width: @screen-desktop) {
height: auto;
}
}
// Site logo/name
.pkp_site_name {
position: absolute;
left: @nav-menu-height;
right: 0;
margin-top: 0;
margin-bottom: 0;
padding-left: @base;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: @text-bg-base;
font-family: @font-site-title;
font-size: @font-sml;
> a {
padding-top: @base;
padding-bottom: @base;
&:focus {
outline: 0;
}
}
.is_img {
display: inline-block;
margin-top: @half;
margin-bottom: @half;
padding: 0;
&:focus {
outline: 1px solid @text-bg-base;
}
img {
display: block;
max-height: @nav-menu-height - @base;
max-width: 100%;
width: auto;
height: auto;
}
}
.is_text {
font-family: @font-site-title;
font-size: @font-sml;
font-weight: @bold;
line-height: @nav-menu-height;
color: @text-bg-base;
text-decoration: none;
&:focus {
text-decoration: underline;
}
}
}
.pkp_navigation_primary_wrapper {
padding-left: 0;
padding-right: 0;
}
// Mobile navigation menu
.pkp_site_nav_menu {
position: absolute;
width: 100%;
top: 100%;
background:@bg-base;
left: 0;
padding: @base;
z-index: 9999;
.pkp_nav_list {
padding-left: 0;
margin-left: 0;
}
ul {
&:extend(.pkp_unstyled_list);
ul {
padding-left: 0.5rem;
}
}
a {
display: inline-block;
padding: 0.125rem 0;
color: @text-bg-base;
text-decoration: none;
&:hover,
&:focus {
color: @text-bg-base;
text-decoration: underline;
}
}
#siteNav {
position: absolute;
top: 0;
height: 0;
}
}
.pkp_navigation_user {
&.pkp_navigation_user {
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid @bg-base-border-color;
}
.task_count {
display: inline-block;
width: @double;
height: @double;
margin-left: 0.5em;
border-radius: 50%;
background: @bg-base-border-color;
line-height: @double;
text-align: center;
font-size: 0.857rem;
position: relative;
}
// Hide the top-level task count in mobile nav
> li > a .task_count {
display: none;
}
> li > ul a {
.task_count {
display: inline-block;
background: @bg-base-border-color;
color: @text-bg-base;
}
&:hover .task_count,
&:focus .task_count {
background: @text;
}
}
}
.pkp_navigation_search_wrapper {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid @bg-base-border-color;
}
// The padding to apply to top-level items in the navigation row
// Total height - line height (divided by 2 since it will be applied to top and bottom)
@pkp_nav_primary_row_el_padding: @base;
@media (min-width: @screen-desktop) {
.pkp_head_wrapper {
padding-top: @triple * 2; // Make room for the user nav at the top
}
.pkp_site_nav_toggle {
display: none;
}
.pkp_site_name {
position: relative;
width: 100%;
left: auto;
right: auto;
padding: 0;
white-space: normal;
font-size: 2em; // Prevents extra vertical space after logos
background: transparent;
overflow: visible;
.is_text {
font-family: @font-site-title;
font-size: @font-header;
line-height: @line-header;
}
.is_img img {
max-height: 80px; // must match height - padding of .is_img
}
}
.pkp_site_nav_menu {
display: block;
position: static;
top: auto;
padding: 0;
ul ul {
padding-left: 0;
}
}
// Site logo/nav on same line on larger screens
.has_site_logo .pkp_head_wrapper {
padding-top: @triple;
}
.pkp_nav_list {
margin: 0;
padding: 0;
list-style: none;
li {
position: relative;
display: inline-block;
}
a {
display: inline-block;
padding-left: @base;
padding-right: @base;
text-decoration: none;
padding-top: @half;
padding-bottom: @half;
&:hover,
&:focus {
text-decoration: none;
}
}
ul {
position: absolute;
top: 100%;
left: -9999px;
z-index: 1000;
width: 15em;
margin: 0;
padding: 0;
background: @bg;
border-radius: @radius;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
li {
display: block;
}
a {
display: block;
padding-left: @half;
border-left: @half solid transparent;
color: @primary;
&:hover,
&:focus {
outline: 0;
background: @bg-shade;
border-color: @primary;
color: @primary;
}
}
li:first-child a {
border-top-left-radius: @radius;
border-top-right-radius: @radius;
}
li:last-child a {
border-bottom-left-radius: @radius;
border-bottom-right-radius: @radius;
}
}
> li:hover ul {
left: 0;
}
[aria-haspopup]:after {
position: relative;
display: inline-block;
content: "";
width: 0;
height: 0;
margin-left: 0.25em;
border-top: 4px solid;
border-right: 4px solid transparent;
border-left: 4px solid transparent;
vertical-align: middle;
overflow: hidden;
}
}
// Primary site navigation menu
.pkp_navigation_primary {
text-align: center;
> li {
> a {
margin: @half 0.5em 0;
padding: @half 0.5em
calc(~"@{pkp_nav_primary_row_el_padding} - 2px"); // -2 to account for border size
border-bottom: 2px solid transparent;
color: @text-bg-base;
text-decoration: none;
&:hover {
color: @text-bg-base;
outline: 0;
border-color: @text-bg-base;
}
&:focus {
background: @text-bg-base;
color: @bg-base;
outline: 0;
}
}
&:first-child {
a {
margin-left: -0.5em;
}
}
&:last-child {
a {
margin-right: -0.5em;
}
}
}
// Reproduce positioning of dropdown menu from Popper.js
> li:hover ul {
position: absolute;
transform: translate3d(7px, 40px, 0px);
top: 0;
left: 0;
will-change: transform;
}
ul a {
padding-top: @base;
padding-bottom: @base;
}
[aria-haspopup]:hover {
border-color: transparent;
}
.dropdown-menu a:focus,
.dropdown-menu a:hover {
border-color: @primary;
}
@media (min-width: @screen-desktop) {
display: inline-block;
max-width: 80%;
text-align: left;
}
}
// Bootstrap dropdown components
.dropdown-menu {
display: none;
&.show {
display: block;
}
}
[data-toggle="dropdown"]:hover + .dropdown-menu,
.dropdown-menu:hover {
display: block;
}
// User-focused navigation menu
.pkp_navigation_user_wrapper {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
padding-left: @base;
padding-right: @base;
text-align: right;
padding-top: 0;
margin-top: 0;
border-top: none;
z-index: 1000;
}
.pkp_navigation_user {
text-align: right;
font-size: @font-sml;
padding-right: @double;
&.pkp_navigation_user {
margin: 0;
padding: 0;
border: none;
}
li {
text-align: left;
}
a {
padding-top: @half;
padding-bottom: @half;
line-height: @line-sml;
}
> li > a:focus {
outline: 0;
background: @text-bg-base;
color: @bg-base;
}
ul {
width: 10em;
}
// Reproduce positioning of dropdown menu from Popper.js
// There can still be some shifting when the parent item is focused
// because Popper.js will adjust if it is too close to the edge of
// the screen.
> li:hover ul {
position: absolute;
top: 0;
left: 0;
transform: translate3d(0px, 30px, 0px);
will-change: transform;
}
// Align to the right edge of the container
> li:last-child > a {
margin-right: -@base;
}
// Show the top-level task count in desktop nav
> li > a .task_count {
display: inline-block;
}
> li > a:focus .task_count {
background: @bg-base;
color: @text-bg-base;
}
> li > ul a {
.task_count {
display: none;
}
}
}
.pkp_navigation_search_wrapper {
float: right;
margin: 0;
padding: 0;
border: none;
a {
margin: @half 0.5em 0;
padding: @half 0.5em
calc(~"@{pkp_nav_primary_row_el_padding} - 2px"); // -2 to account for border size
border-bottom: 2px solid transparent;
color: @text-bg-base;
text-decoration: none;
&:hover {
color: @text-bg-base;
outline: 0;
border-color: @text-bg-base;
text-decoration: none;
}
&:focus {
background: @text-bg-base;
color: @bg-base;
outline: 0;
text-decoration: none;
}
}
}
} |