553 lines
11 KiB
Plaintext
553 lines
11 KiB
Plaintext
//
|
|
// Top navigation bar
|
|
// --------------------------------------------------
|
|
|
|
@mainmenu-mode-tile-height: 78px;
|
|
@mainmenu-mode-inline-height: 60px;
|
|
@mainmenu-mode-collapse-height: 45px;
|
|
|
|
@mainmenu-icon-dimension: 30px;
|
|
@mainmenu-tile-dimension: 65px;
|
|
@mainmenu-tile-label-height: 20px;
|
|
@mainmenu-tile-label-width: 100px;
|
|
|
|
body.mainmenu-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.mainmenu-item-link() {
|
|
display: inline-block;
|
|
font-size: @font-size-base + 1;
|
|
color: inherit;
|
|
outline: none;
|
|
|
|
&:hover {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
&:active, &:focus {
|
|
text-decoration: none;
|
|
color: @color-mainmenu-inactive;
|
|
}
|
|
|
|
i {
|
|
line-height: 1;
|
|
font-size: 30px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.mainmenu-set-height(@height) {
|
|
height: @height;
|
|
|
|
ul.mainmenu-toolbar {
|
|
li.mainmenu-preview {
|
|
a {
|
|
height: @height;
|
|
line-height: @height;
|
|
}
|
|
}
|
|
|
|
li.mainmenu-account {
|
|
> a {
|
|
height: @height;
|
|
line-height: @height;
|
|
}
|
|
}
|
|
}
|
|
|
|
ul li .mainmenu-accountmenu {
|
|
top: @height;
|
|
}
|
|
}
|
|
|
|
.mainmenu-tooltip {
|
|
.tooltip-inner {
|
|
font-size: @font-size-base;
|
|
padding: 6px 16px;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
nav#layout-mainmenu {
|
|
background-color: @color-mainmenu;
|
|
padding: 0 0 0 20px;
|
|
line-height: 0;
|
|
white-space: nowrap;
|
|
vertical-align: top;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
&:focus {
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
float: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
li {
|
|
color: @color-mainmenu-inactive;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
position: relative;
|
|
margin-right: 30px;
|
|
|
|
a {
|
|
.mainmenu-item-link();
|
|
padding: 14px 0 10px;
|
|
|
|
img.svg-icon {
|
|
height: 30px;
|
|
width: 30px;
|
|
margin-right: 10px;
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.nav {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
.toolbar-item {
|
|
padding-right: 0;
|
|
|
|
&:before, &:after {
|
|
margin-top: 0;
|
|
}
|
|
|
|
&:before {
|
|
left: -12px;
|
|
}
|
|
|
|
&:after {
|
|
right: -12px;
|
|
}
|
|
|
|
&.scroll-active-before:before {
|
|
color: @color-mainmenu-active;
|
|
}
|
|
|
|
&.scroll-active-after:after {
|
|
color: @color-mainmenu-active;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Toolbar
|
|
//
|
|
|
|
ul.mainmenu-toolbar {
|
|
li.mainmenu-preview {
|
|
margin: 0 0 0 11px;
|
|
|
|
i {
|
|
font-size: 20px;
|
|
}
|
|
|
|
a {
|
|
position: relative;
|
|
padding: 0 15px;
|
|
top: -1px;
|
|
}
|
|
}
|
|
|
|
li.mainmenu-account {
|
|
margin-right: 0;
|
|
|
|
> a {
|
|
padding: 0 15px 0 10px;
|
|
font-size: @font-size-base;
|
|
position: relative;
|
|
// z-index: 200; // Previous value 590 was overlappnig with drop-down menus on small screens
|
|
z-index: 590; // @todo Investigate: This causes the button to dim without 590
|
|
}
|
|
|
|
img.account-avatar {
|
|
width: 45px;
|
|
}
|
|
|
|
.account-name {
|
|
margin-right: 15px;
|
|
}
|
|
|
|
ul {
|
|
line-height: 23px;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Fading animation (disabled)
|
|
//
|
|
|
|
&:hover {
|
|
ul.mainmenu-nav li {
|
|
//.transition(opacity .15s ease);
|
|
//.opacity(1);
|
|
}
|
|
}
|
|
|
|
ul.mainmenu-nav li {
|
|
//.opacity(.65);
|
|
//.transition(opacity 5s ease);
|
|
//.transition-delay(5s);
|
|
|
|
&.active {
|
|
//.opacity(1);
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// SVG support
|
|
//
|
|
|
|
html.svg {
|
|
nav#layout-mainmenu,
|
|
.mainmenu-collapsed {
|
|
img.svg-icon {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// User account menu
|
|
//
|
|
|
|
nav#layout-mainmenu ul li .mainmenu-accountmenu {
|
|
position: fixed;
|
|
top: 0; // See mode for this value
|
|
right: 0;
|
|
background: @color-accountmenu-bg;
|
|
z-index: 590;
|
|
display: none;
|
|
|
|
&.active {
|
|
display: block;
|
|
}
|
|
|
|
&:after {
|
|
.triangle(up, 22px, 12px, @color-accountmenu-bg);
|
|
right: 26px;
|
|
top: -12px;
|
|
position: absolute;
|
|
}
|
|
|
|
ul {
|
|
float: none;
|
|
display: block;
|
|
}
|
|
|
|
li {
|
|
padding: 0;
|
|
margin: 0;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
display: block;
|
|
|
|
a {
|
|
display: block;
|
|
padding: 12px 30px;
|
|
text-align: left;
|
|
}
|
|
|
|
&:hover {
|
|
background: #3d5265 !important;
|
|
}
|
|
}
|
|
|
|
li.divider {
|
|
height: 1px;
|
|
width: 100%;
|
|
background-color: @color-accountmenu-divider;
|
|
}
|
|
}
|
|
|
|
//
|
|
// Navbar (Inline mode)
|
|
//
|
|
|
|
nav#layout-mainmenu.navbar-mode-inline {
|
|
.mainmenu-set-height(@mainmenu-mode-inline-height);
|
|
|
|
ul.mainmenu-nav {
|
|
li a {
|
|
padding: 15px 0;
|
|
|
|
.nav-icon {
|
|
position: relative;
|
|
top: -1px;
|
|
margin-right: 5px;
|
|
width: @mainmenu-icon-dimension;
|
|
height: @mainmenu-icon-dimension;
|
|
i, img { margin: 0; }
|
|
}
|
|
.nav-label {
|
|
line-height: @mainmenu-icon-dimension;
|
|
}
|
|
}
|
|
|
|
li {
|
|
&:first-child {
|
|
margin-left: 2px;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Navbar (Tiles mode)
|
|
//
|
|
|
|
nav#layout-mainmenu.navbar-mode-tile {
|
|
.mainmenu-set-height(@mainmenu-mode-tile-height);
|
|
.mainmenu-navbar-tiles();
|
|
}
|
|
|
|
.mainmenu-navbar-tiles() {
|
|
ul.mainmenu-nav {
|
|
li a {
|
|
position: relative;
|
|
width: @mainmenu-tile-dimension;
|
|
height: @mainmenu-tile-dimension;
|
|
|
|
.nav-icon {
|
|
text-align: center;
|
|
display: block;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
margin-left: -(@mainmenu-icon-dimension / 2);
|
|
margin-top: -(@mainmenu-tile-dimension - @mainmenu-tile-label-height) / 2;
|
|
width: @mainmenu-icon-dimension;
|
|
height: @mainmenu-icon-dimension;
|
|
i, img { margin: 0; }
|
|
}
|
|
|
|
.nav-label {
|
|
display: block;
|
|
width: @mainmenu-tile-label-width;
|
|
height: @mainmenu-tile-label-height;
|
|
line-height: @mainmenu-tile-label-height;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
padding: 0 5px;
|
|
margin-left: -(@mainmenu-tile-label-width / 2);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
li {
|
|
padding: 3px 0;
|
|
|
|
&:first-child {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
&.active {
|
|
a .nav-label {
|
|
text-shadow: 1px 1px 0 rgba(255,255,255,.3);
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.nav-label {
|
|
width: auto;
|
|
min-width: @mainmenu-tile-label-width;
|
|
text-overflow: all;
|
|
overflow: visible;
|
|
background-color: @color-mainmenu;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
//
|
|
// Mobile (Collapsed mode)
|
|
//
|
|
|
|
nav#layout-mainmenu {
|
|
.menu-toggle {
|
|
height: @mainmenu-mode-collapse-height;
|
|
line-height: @mainmenu-mode-collapse-height;
|
|
font-size: @font-size-base + 2;
|
|
display: none;
|
|
|
|
.menu-toggle-icon {
|
|
background: #333;
|
|
display: inline-block;
|
|
height: @mainmenu-mode-collapse-height;
|
|
line-height: @mainmenu-mode-collapse-height;
|
|
width: @mainmenu-mode-collapse-height;
|
|
text-align: center;
|
|
|
|
i {
|
|
line-height: 1;
|
|
font-size: 30px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.menu-toggle-title {
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
nav#layout-mainmenu.navbar-mode-collapse {
|
|
.mainmenu-navbar-collapse();
|
|
}
|
|
|
|
@media (max-width: @menu-breakpoint-max) {
|
|
nav#layout-mainmenu.navbar {
|
|
.mainmenu-navbar-collapse();
|
|
}
|
|
}
|
|
|
|
// This logic is implemented in the october.navbar.js script,
|
|
// it prevents the collapse mode from working beyond the min
|
|
// breakpoint. Leaving this code just in case, remove later.
|
|
// -SG
|
|
@media (min-width: @menu-breakpoint-min) {
|
|
// #layout-canvas { position: static !important; }
|
|
// .mainmenu-collapsed { display: none !important; }
|
|
}
|
|
|
|
.mainmenu-navbar-collapse() {
|
|
padding-left: 0;
|
|
|
|
.mainmenu-set-height(@mainmenu-mode-collapse-height);
|
|
|
|
ul.mainmenu-toolbar li.mainmenu-account > a {
|
|
padding-right: 0;
|
|
}
|
|
|
|
ul li .mainmenu-accountmenu:after {
|
|
right: 11px;
|
|
}
|
|
|
|
ul.nav { display: none; }
|
|
|
|
.menu-toggle {
|
|
display: inline-block;
|
|
color: @color-mainmenu-active !important;
|
|
}
|
|
}
|
|
|
|
.mainmenu-collapsed {
|
|
position: absolute;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
margin: 0;
|
|
background: @color-mainmenu-collapsed;
|
|
|
|
> div {
|
|
display: block;
|
|
height: 100%;
|
|
|
|
.mainmenu-navbar-tiles();
|
|
|
|
ul.mainmenu-nav li:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 5px 0 15px 30px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
ul li {
|
|
color: @color-mainmenu-inactive;
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
position: relative;
|
|
margin-right: 30px;
|
|
}
|
|
|
|
ul li a {
|
|
.mainmenu-item-link();
|
|
|
|
img.svg-icon {
|
|
height: 30px;
|
|
width: 30px;
|
|
position: relative;
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.vertical-scroll-marker(@color-mainmenu-inactive);
|
|
}
|
|
|
|
body.mainmenu-open .mainmenu-collapsed ul {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 10px;
|
|
bottom: 10px;
|
|
}
|
|
|
|
//
|
|
// Misc
|
|
//
|
|
|
|
nav#layout-mainmenu.navbar ul li:hover,
|
|
.mainmenu-collapsed li:hover {
|
|
a {
|
|
&:active, &:focus {
|
|
color: @color-mainmenu-active !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
.touch .mainmenu-collapsed li a:hover {
|
|
color: @color-mainmenu-inactive;
|
|
}
|
|
|
|
nav#layout-mainmenu.navbar ul li,
|
|
.mainmenu-collapsed li {
|
|
&.active, &.highlight {
|
|
color: @color-mainmenu-active !important;
|
|
|
|
a {
|
|
color: @color-mainmenu-active !important;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
color: @color-mainmenu-active;
|
|
background: transparent;
|
|
}
|
|
}
|
|
|
|
body.drag {
|
|
nav#layout-mainmenu.navbar ul.nav,
|
|
.mainmenu-collapsed ul {
|
|
li:hover { color: @color-mainmenu-inactive; }
|
|
}
|
|
}
|