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

Bug 1657565 - Default theme new navigation

Change-Id: I50550c247804bbdab41201a1d4fb8766c6630060
parent 9bdc90e9
.header {
.navbar-toggle {
margin-top: 6px;
margin-bottom: 10px;
border-color: $link-color;
background-color: $link-color;
color: #FFFFFF;
&:focus,
&:hover {
border-color: $link-hover-color;
background-color: $link-hover-color;
}
.icon-bar {
background-color: #FFFFFF;
}
}
.navbar-nav {
.navbar-toggle {
margin-top: 0;
}
.navbar-toggle {
background-color: $link-color;
&:hover,
&:focus {
border-color: $link-hover-color;
background-color: $link-hover-color;
}
}
.header {
background: #FFFFFF url(../images/header-bkgd.png) repeat-x center 60px;
.logo-area {
.logo {
@media (max-width: $screen-xs-min) {
@media (max-width: $screen-xs-min - 1) {
width: 25px;
height: 45px;
overflow-x: hidden;
......@@ -11,24 +9,14 @@
}
}
img {
@media (max-width: $screen-xs-min) {
@media (max-width: $screen-xs-min - 1) {
display: none;
}
}
}
.admin-title {
margin-top: 10px;
font-weight: 300;
font-size: $font-size-large;
@media (max-width: $screen-sm-min) {
display: none;
}
}
&.navbar {
border-bottom: 0;
min-height: 64px;
}
}
/*
* Base structure
*/
body {
padding-top: 65px;
@media (max-width: $screen-sm-min - 1) {
padding-top: 0;
}
}
/*
* Primary navigation menu
*/
.main-nav {
background-color: #f1f6eb;
@media (max-width: $screen-sm-min - 1) {
background-color: $theme-primary-color;
}
.nav > li > a {
padding: 15px 20px;
@media (max-width: $screen-sm-min - 1) {
border: 0;
background-color: $theme-primary-color;
color: #FFFFFF;
padding: 10px 20px;
}
}
// making the admin nav a little different looking
&.dropdown-adminnav,
&.adminnav {
margin-bottom: 0;
.nav {
> li > a {
padding: 15px 10px;
font-weight: 700;
&:hover, &:focus {
color: #ffffff;
}
@media (max-width: $screen-sm-min) {
padding: 10px 20px;
}
}
> li.active > a {
&:hover,
&:focus {
background-color: $navbar-default-link-hover-bg;
color: $navbar-default-link-hover-color;
}
}
}
}
// Only shown on mobile, or when dropdowns are turned on
.child-nav {
padding: 0;
background-color: $theme-primary-color;
li {
a {
padding: 10px 30px;
font-weight: 400;
color: #FFFFFF;
&:hover, &:focus {
background-color: #2e3a1c;
font-weight: 400;
}
}
}
// If this link is the current page or section
.active > a {
background-color: #2e3a1c;
color: #FFFFFF;
font-weight: 700;
&:hover, &:focus {
color: #FFFFFF;
background-color: #2e3a1c;
font-weight: 700;
}
}
}
.has-dropdown {
@media (min-width: $screen-sm-min) {
padding: 0;
// Links within the dropdown menu
> li a {
padding: 9px 15px;
color: #FFFFFF;
}
.dropdown-tertiary {
font-size: $font-size-base - 1;
> li a {
padding: 6px 15px 6px 25px;
}
}
}
}
}
.minor-nav {
background-color: #FFFFFF;
border-left: 0;
border-right: 0;
border-bottom: 1px solid #ddd;
margin-top: 0;
.nav {
margin: 0px 15px 0px 5px;
>li {
margin: 0 5px 0 0;
> a {
padding: 5px;
}
&.active {
> a {
font-weight: 700;
}
}
}
}
}
.navbar {
margin-bottom: 0;
min-height: auto;
}
.navbar-fixed-top {
position:relative;
border: 0;
@media (min-width: $screen-sm-min) {
position:fixed;
}
}
.navbar-inverse {
.navbar-nav {
> li {
> a {
font-weight: 700;
}
> a:hover,
> a:focus {
background-color: $navbar-default-link-hover-bg;
color: $navbar-default-link-hover-color;
@media (max-width: $screen-sm-min - 1) {
background-color: #2e3a1c;
}
}
}
>.active {
> a {
background-color: #FFFFFF;
color: $navbar-default-link-active-color;
}
> a:hover,
> a:focus {
background-color: $navbar-default-link-hover-bg;
color: $navbar-default-link-hover-color;
@media (max-width: $screen-sm-min - 1) {
background-color: #2e3a1c;
}
}
}
}
.navbar-toggle {
background-color: $theme-primary-color;
color: #FFFFFF;
height: 35px;
top: 3px;
&.collapsed {
background-color: #799152;
top: 5px;
}
&:hover, &:focus {
background-color: $theme-primary-color;
color: #FFFFFF;
}
.icon {
color: #FFFFFF;
}
}
}
.main-nav {
.navbar-showchildren {
background-color: #799152;
color: #FFFFFF;
height: 34px;
top: 6px;
border-radius: 3px 3px 0 0;
&:focus {
background-color: #799152;
color: #FFFFFF;
}
&:hover {
background-color: #799152;
color: #FFFFFF;
}
&.collapsed {
background-color: transparent;
top: 3px;
border-radius: 3px;
&:focus {
background-color: transparent;
color: #FFFFFF;
}
&:hover {
background-color: #799152;
color: #FFFFFF;
}
}
.icon {
color: #FFFFFF;
}
}
}
.navbar-text {
margin-top: 15px;
font-size: 13px;
@media (max-width: $screen-sm-min - 1) {
padding: 10px 15px;
display: block;
margin-top: 0;
margin-bottom: 0;
background-color: $theme-primary-color;
color: #FFFFFF;
}
}
.navbar-default .navbar-link {
@media (max-width: $screen-sm-min - 1) {
color: #FFFFFF;
}
&:focus,
&:hover {
color: $link-hover-color;
@media (max-width: $screen-sm-min - 1) {
color: #FFFFFF;
}
}
}
.navbar-form {
border: 0;
box-shadow: none;
padding-bottom: 0;
}
.top-nav.navbar-nav {
@media (max-width: $screen-sm-min) {
background-color: transparent;
position: relative;
margin: 2px 3px 0 0;
}
.login-link + .language-form {
float: none;
@media (min-width: $screen-xs-min) {
float: left;
}
form {
padding-top: 0;
}
}
.language-form form {
padding-top: 0;
}
> li {
> a {
font-size: 12px;
&:focus,
&:hover {
background-color: transparent;
color: $link-hover-color;
}
}
&:last-child {
> a {
padding-right: 0;
}
}
.form-group-inline {
label {
min-width: 0;
}
.btn {
margin-left: 5px;
}
}
.div {
@media (max-width: $screen-md-min) {
display: inline-block;
}
}
}
.backto-be-admin {
@media (min-width: $screen-sm-min) {
display: none;
}
a {
@media (max-width: $screen-sm-min) {
color: darken($theme-primary-color, 10%);
background-color: transparent;
}
}
}
}
// when logged out and language options are available
.loggedout {
.top-nav {
margin-right: 0;
> li {
form {
margin-top: 5px;
@media (max-width: $screen-sm-min) {
display: inline-block;
label {
display: none;
}
div {
display: inline-block;
}
.picker {
width: 125px;
}
}
}
}
}
}
......@@ -348,7 +348,7 @@ $grid-columns: 12;
$grid-gutter-width: 30px;
// Navbar collapse
//** Point at which the navbar becomes uncollapsed.
$grid-float-breakpoint: $screen-sm-min;
$grid-float-breakpoint: 100000px;
//** Point at which the navbar begins collapsing.
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);
......@@ -378,7 +378,7 @@ $container-lg: $container-large-desktop;
//##
// Basics of a navbar
$navbar-height: 50px;
$navbar-height: 60px;
$navbar-margin-bottom: $line-height-computed;
$navbar-border-radius: $border-radius-base;
$navbar-padding-horizontal: floor(($grid-gutter-width / 2));
......@@ -405,22 +405,22 @@ $navbar-default-brand-hover-bg: transparent;
// Navbar toggle
$navbar-default-toggle-hover-bg: #ddd;
$navbar-default-toggle-icon-bar-bg: #888;
$navbar-default-toggle-border-color: #ddd;
$navbar-default-toggle-icon-bar-bg: #ffffff;
$navbar-default-toggle-border-color: $link-color;
// Inverted navbar
// Reset inverted navbar basics
$navbar-inverse-color: #fff;
$navbar-inverse-bg: #F1F1F1;
$navbar-inverse-color: $link-color;
$navbar-inverse-bg: #fff;
$navbar-inverse-border: darken($navbar-inverse-bg, 5%);
// Inverted navbar links
$navbar-inverse-link-color: $theme-primary-color;
$navbar-inverse-link-hover-color: lighten($theme-primary-color, 5%);
$navbar-inverse-link-hover-bg: rgba(darken($navbar-inverse-bg, 7%), 0.5);
$navbar-inverse-link-active-color: $text-color;
$navbar-inverse-link-active-bg: #fff;
$navbar-inverse-link-hover-color: #FFFFFF;
$navbar-inverse-link-hover-bg: #2e3a1c;
$navbar-inverse-link-active-color: #FFFFFF;
$navbar-inverse-link-active-bg: #2e3a1c;
$navbar-inverse-link-disabled-color: #444;
$navbar-inverse-link-disabled-bg: transparent;
......@@ -430,9 +430,9 @@ $navbar-inverse-brand-hover-color: $navbar-inverse-link-hover-color;
$navbar-inverse-brand-hover-bg: transparent;
// Inverted navbar toggle
$navbar-inverse-toggle-hover-bg: #333;
$navbar-inverse-toggle-icon-bar-bg: #fff;
$navbar-inverse-toggle-border-color: #333;
$navbar-inverse-toggle-hover-bg: #fff;
$navbar-inverse-toggle-icon-bar-bg: #676767;
$navbar-inverse-toggle-border-color: #fff;
//== Navs
......
......@@ -4,7 +4,6 @@
// General customisation and component files go here...
@import "../layout/footer";
@import "../layout/header";
@import "../layout/layout";
@import "../layout/profile-block";
// Panels are a very commonly used layout component
......@@ -15,11 +14,7 @@
@import "../layout/panel/panel-secondary";
// Navigation
@import "../layout/nav/main-nav";
@import "../layout/nav/minor-nav";
@import "../layout/nav/nav-tabs";
@import "../layout/nav/navbar";
@import "../layout/nav/top-nav";
// Components - small reusable design elements
@import "../components/arrow-bar";
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment