Commit a47e3552 authored by Pat Kira's avatar Pat Kira Committed by Cecilia Vela Gurovic
Browse files

Bug 1657565 - Styled new raw navigation

Change-Id: I93d00112c8f64a11bdffa8516f73ebf754b5214b
parent bf6d8b64
......@@ -83,6 +83,8 @@ $string['tab'] = 'tab';
$string['selected'] = 'selected';
$string['admin'] = 'Admin';
$string['menu'] = 'Menu';
$string['adminmenu'] = 'Administration menu';
$string['usermenu'] = 'User menu';
$string['at'] = 'at';
$string['From'] = 'From';
......
......@@ -225,6 +225,16 @@ jQuery(function($) {
}
});
$('.navbar-main .navbar-collapse.collapse').on('show.bs.collapse', function(event) {
event.stopPropagation();
$('.navbar-collapse.collapse.in').collapse('hide');
});
$('.navbar-main .child-nav.collapse').on('show.bs.collapse', function(event) {
event.stopPropagation();
$('.child-nav.collapse.in').collapse('hide');
});
affixSize();
siteMessages();
focusOnOpen();
......@@ -243,4 +253,5 @@ jQuery(function($) {
$(".js-select2 select").select2({});
});
......@@ -19,7 +19,7 @@
//dash
.collapse-indicator {
color: $navbar-default-link-color;
color: lighten($gray, 25%);
font-size: 13px;
display: block;
transition-duration: 0.3s;
......@@ -30,11 +30,11 @@
font-size: 11px;
}
.collapsed & {
color: $navbar-default-link-color;
color: lighten($gray, 25%);
}
a:hover &,
a:focus & {
color: $navbar-default-link-hover-color;
color: $gray;
}
.collapsed ~ & {
transform: rotate(180deg);
......@@ -46,12 +46,12 @@
a[data-toggle="collapse"] {
&:hover .collapse-indicator,
&:focus .collapse-indicator{
color: $navbar-default-link-hover-color;
color: $gray;
}
.collapse-indicator {
transform: rotate(-180deg);
transition-duration: 0.3s;
color: $navbar-default-link-color;
color: lighten($gray, 25%);
margin-top: 5px;
line-height: 13px;
height: auto;
......@@ -79,13 +79,13 @@ a[data-toggle="collapse"] {
[data-toggle="collapse"].outer-link {
&.collapsed {
~ .collapse-indicator {
color: $navbar-default-link-color;
color: lighten($gray, 25%);
}
}
&:hover,
&:focus {
~ .collapse-indicator {
color: $navbar-default-link-hover-color;
color:$gray;
}
}
}
.menu-toggle {
border-left: 0;
border-radius: 0 3px 3px 0;
&:before {
position:absolute;
left: 0;
top: 7px;
display:block;
content:"";
height:20px;
border-right:1px solid $navbar-default-toggle-border-color;
border-left:1px solid #fff;
// Navigation toggle styles
.nav-toggle-area {
position: relative;
.user-icon {
padding: 0;
position: absolute;
margin: 7px 0 7px 9px;
z-index: 3;
left: 45px;
display: block;
@media (min-width: $screen-sm-min) {
left: 0;
}
}
}
.search-toggle {
.navbar-toggle {
display: block;
margin: 0;
border-color: $navbar-default-toggle-border-color;
border-left-width: 0;
border-radius: 0;
min-width: 45px;
color: $navbar-default-toggle-icon-bar-bg;
line-height: 13px;
height: 34px;
margin-right: 0;
border-right: 0;
border-radius: 3px 0 0 3px;
}
&:hover,
&:focus {
background-color: $navbar-default-toggle-hover-bg;
}
&.search-toggle {
@media (min-width: $screen-sm-min) {
display: none;
}
.icon {
color: $navbar-default-link-hover-color;
}
}
&.user-toggle {
padding-left: 45px;
@media (min-width: $screen-sm-min) {
border-left-width: 1px;
}
}
.navbar-toggle {
width: 42px;
margin-right: -4px;
margin-top: 50px;
&:last-of-type {
border-left-width: 1px;
}
}
.navbar-showchildren {
background-color: darken($navbar-inverse-bg, 10%);
color: $navbar-inverse-toggle-icon-bar-bg;
border-radius: 0;
border: 0;
color: $navbar-inverse-link-color;
position: absolute;
right: 10px;
top: 5px;
......@@ -44,25 +61,25 @@
transition-duration: 0.3s;
&:hover,
&:focus {
.navbar-inverse & {
background-color: darken($navbar-inverse-bg, 10%);
color: lighten($navbar-inverse-bg, 35%);
}
background-color: $navbar-inverse-toggle-hover-bg;
.icon {
color: $navbar-default-link-hover-color;
color: $navbar-inverse-link-hover-color;
}
}
.icon {
transform: rotate(-180deg);
transition-duration: 0.3s;
color: $navbar-default-link-color;
}
&.collapsed {
background-color: transparent;
height: 36px;
.icon {
transform: rotate(0deg);
transition-duration: 0.3s;
}
}
.active & {
background-color: $navbar-inverse-toggle-hover-bg;
.icon {
color: $navbar-inverse-link-hover-color;
}
}
}
......@@ -25,9 +25,6 @@
@for $i from 1 through 5 {
.header.message-count-#{$i} {
top: 33px * $i;
+ .main-nav {
margin-top: $i * 32px;
}
~ .container {
.toolbar-affix.affix {
......@@ -36,9 +33,6 @@
}
@media (max-width: $screen-sm-min - 1) {
top: 0;
+ .main-nav {
margin-top: $i * 0px;
}
}
}
}
......
.header {
top: 30px;
@media (max-width: $screen-sm-min -1) {
top: 0;
top: 0;
@media (min-width: $screen-sm-min) {
top: 30px;
}
.logo-area,
......@@ -11,6 +11,7 @@
float: left;
}
.logo {
padding: 6px 0;
margin-right: 15px;
// logo restricted to 45px - custom work required for a larger version
img {
......@@ -18,38 +19,18 @@
}
}
.admin-title {
margin: 15px 10px 5px 0;
@media (max-width: $screen-sm-min - 1) {
clear: both;
margin-top: 10px;
@extend .sr-only;
@media (min-width: $screen-sm-min) {
position: static;
width: auto;
height: auto;
margin: 18px 10px 5px 0;
}
}
// see _loading-inner for more realting to .logo-area
// if container is directly after header, then it will need a margin
+ .container {
// if container is directly after header, then it will need a margin
margin-top: 50px;
@media (min-width: $screen-xs-min) and (max-width: $screen-md-min - 1){
margin-top: 20px;
@media (min-width: $screen-sm-min) {
margin-top: 50px;
}
}
.header-search-form {
.input-group-btn {
display: block !important;
float: right;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: 0;
margin-left: -1px;
}
@media (max-width: $screen-sm-min) {
input[type=text] {
width: 87%;
float: left;
}
.input-group-btn {
float: left;
}
}
}
}
/*
* Primary navigation menu
* with collapsible
*/
.main-nav {
padding-top: 30px;
@media (max-width: $screen-sm-min) {
padding-top: 0;
.navbar-fixed-top {
position:relative;
border: 0;
@media (min-width: $screen-sm-min) {
position:fixed;
}
.container {
@media (max-width: $screen-sm-min) {
padding:0;
}
}
.navbar-main {
margin-bottom: 0;
> .container {
position: relative;
}
ul {
min-width: 0;
margin:0;
@media (min-width: $screen-md-min) {
margin: 0px -5px 0px -15px;
}
@media (min-width: $screen-sm-min) and (max-width: $screen-md-min - 1) {
margin: 0px -5px 0px 0px;
}
@media (min-width: $screen-sm-min) {
max-height: $navbar-height;
}
.nav-toggle-area {
float: right;
padding: 7px 0;
}
.navbar-header{
margin:0;
.navbar-collapse {
padding: 0;
position: static;
clear: both;
max-height: none;
@media (min-width: $screen-sm-min) {
margin-left:-15px;
position: absolute;
right: 15px;
top: $navbar-height - 2px;
max-width: 300px;
z-index: 5;
max-height: 88vh;
overflow-y: auto;
overflow-x: hidden;
margin-right: 0;
box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
}
@media (min-width: $screen-md-min) {
+ ul {
margin-left:0;
}
&.collapsing {
overflow-y: hidden;
}
}
li {
// Top level navigation items use colour variables from "navbar-default"
.navbar-nav {
margin: 0;
a {
color: $text-color;
}
}
.navbar-brand {
padding: 13px 15px;
margin-left: -10px;
border-bottom:1px solid lighten($navbar-inverse-bg, 2%);
width:100%;
@media (min-width: $screen-sm-min) {
width:auto;
margin-left:0;
border:0;
width: 300px;
}
.icon {
top:3px;
}
}
.nav > li > a {
border-top:1px solid darken($navbar-inverse-bg, 2%);
border-bottom:1px solid lighten($navbar-inverse-bg, 2%);
padding: 10px 29px;
line-height: 20px;
font-weight:normal;
@media (min-width: $screen-sm-min) {
border:none;
padding: 15px 29px;
}
@media (min-width: $screen-sm-min) and (max-width: $screen-md-min - 1) {
padding: 15px 10px;
}
&:hover, &:focus {
text-decoration:none;
color: $link-color;
}
}
// Only shown on mobile, or when dropdowns are turned on
.child-nav {
background-color: darken($navbar-inverse-bg, 10%);
border-top:0;
min-width: 200px;
max-width: 100%;
overflow: hidden;
padding: 15px 0px;
li {
float: none;
display: block;
a { //styles that need to override bootstrap specificity
padding: 10px 29px;
font-weight: normal;
&:hover, &:focus {
text-decoration:none;
background-color: rgba(darken($navbar-inverse-link-hover-bg, 5%), 0.5);
}
}
}
// If this link is the current page or section
.active > a {
font-weight: bold;
background-color: rgba(darken($navbar-inverse-link-hover-bg, 5%), 0.8);
@media (min-width: $screen-sm-min) {
background-color: $brand-default;
&:hover {
color: $text-color;
}
}
// Styles for all links inside navbar-nav
a {
@include text-overflow;
display: block;
width: 100%;
}
a { // styles that don't need to override bootstrap specificity
display:block;
width:100%;
@include text-overflow;
> li > a {
color: $navbar-default-color;
background-color: $navbar-default-bg;
padding: 10px 15px;
line-height: 20px;
font-weight: normal;
border-top: 1px solid $navbar-default-border;
border-bottom: 1px solid $navbar-default-border;
margin-top: -1px;
&:hover,
&:focus {
text-decoration:none;
color: $navbar-default-link-hover-color;
}
@media (min-width: $screen-sm-min) {
border:0;
max-width: 300px;
color:$link-color;
border: 1px solid $navbar-default-border;
}
}
}
// Child navigation items use colour variables from "navbar-inverse"
.child-nav {
border-top:0;
max-width: 100%;
overflow: hidden;
padding: 0;
// show dropdown on hover or with 'open' class
@media (min-width: $screen-sm-min) {
ul.nav > li:hover > ul.has-dropdown.child-nav,
ul.nav > li > ul.has-dropdown.child-nav.open {
display: block;
visibility: visible;
li > a {
color: $navbar-inverse-link-color;
background-color: $navbar-inverse-bg;
padding: 9px 29px;
margin-top: -1px;
font-weight: normal;
&:hover,
&:focus {
text-decoration: none;
background-color: $navbar-inverse-link-hover-bg;
color: $navbar-inverse-link-hover-color;
}
}
}
.has-dropdown {
@media (min-width: $screen-sm-min) {
max-width: 350px;
position: absolute;
top: 100%;
left: 0;
z-index: $zindex-dropdown;
display: none; // none by default, but block on "open" of the menu
float: left;
padding: 5px 0;
margin: 0 0 0 -1px; // override default ul
list-style: none;
font-size: $font-size-base;
text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
background-color: $dropdown-bg;
border: 1px solid $dropdown-fallback-border; // IE8 fallback
border: 1px solid $dropdown-border;
border-top:0;
@include box-shadow(0 6px 12px rgba(0,0,0,.175));
background-clip: padding-box;
// Links within the dropdown menu
> li a {
padding: 3px 20px;
clear: both;
font-weight: normal;
line-height: $line-height-base;
white-space: nowrap; // prevent links from randomly breaking onto new lines
}
> li > a {
color: $dropdown-link-color;
}
.dropdown-tertiary {
padding:0;
margin: 0;
font-size: $font-size-base - 2;
.active > a {
font-weight: bold;
background-color: $navbar-inverse-link-active-bg;
color: $navbar-inverse-link-active-color;
&:hover,
&:focus {
color: $text-color;
}
}
}
// when a container is at the same level as main-nav (but isn't for admin), add padding
&:not(.adminnav)~ .container {
padding-top: 20px;
}
}
.dropdown-menu .btn-link:not(.btn-link-danger) {
color: $text-color;
}
.minor-nav {
border-radius: 0;
margin-top:-1px; //overlay bottom border of main nav
border-top:0;
.nav {
margin:7px 15px 7px 0;
>li {
margin: 3px 0 3px 3px;
>a {
font-size: 13px;
padding: 3px 5px;
}
}
}
}
/*
* Modificatiosn to bootstraps default navbar components
* Modification to bootstraps default navbar components
*/
.navbar.header {
margin-bottom:0;
padding: 7px 0;
border-bottom:1px solid $navbar-default-border;
}
.dropdown-adminnav {
margin-bottom: $grid-gutter-width;
}
body:not(.admin) .navbar.minor-nav {
margin-bottom: 0;
}
.navbar-fixed-top {
position:relative;
border: 0;
@media (min-width: $screen-sm-min) {
position:fixed;
}
}