Skip to content

Commit

Permalink
fix(components): megamenu
Browse files Browse the repository at this point in the history
  • Loading branch information
@ygatesoupe
ygatesoupe committed Dec 17, 2015
1 parent 42e3e66 commit b4efdd0
Show file tree
Hide file tree
Showing 3 changed files with 58 additions and 109 deletions.
149 changes: 51 additions & 98 deletions scss/_o-main_megamenu.scss
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,29 @@
/********************************************************/
/********************** main mega **********************/
/********************************************************/
//
// Main mega menu
//
.navbar-default {
box-shadow: none;
border-radius: 0;
border: 0 none;
border-image-width : 0 0 0 0;
/* background-color: #000;*/
}
/*
.navbar-default .navbar-brand {
color: #ffffff;
background: url("../images/home.png") no-repeat scroll center center transparent;
min-width: 40px;
}
*/

.navbar-default .nav .nav-item .nav-item-cdu:hover,
.navbar-default .nav .nav-item .nav-item-cdu:focus{
background-color : transparent;
text-decoration:underline;
.navbar-default .nav .nav-item .nav-item-cdu:focus {
background-color: transparent;
text-decoration: underline;
}
.navbar-default .nav .nav-item .nav-item-cdu{
.navbar-default .nav .nav-item .nav-item-cdu {
color: #FFF !important;
}

// remove bootstrap transparent bg on small device
.navbar-nav {
@media (max-width: $grid-float-breakpoint-max) {
// Dropdowns get custom display when collapsed
.open .dropdown-menu {
background-color: $dropdown-bg;
> li > a {
.open .dropdown-menu {
background-color: $dropdown-bg;
> li > a {
color: $dropdown-link-color;
&:hover,
&:focus {
Expand All @@ -44,38 +37,29 @@
}


@media (max-width: 767px) {
/*
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #FFFFFF;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
background-color: #FFFFFF;;
}
*/
@media (max-width: $screen-sm-max) {
.navbar-default .navbar-form .form-control {
font-size: 0.95em;
height: auto;
}
.navbar-default .sub-nav {
position: relative; /*LLA*/
position: relative;
}
.navbar-default .navbar-collapse{
max-height:none; /*LLA*/
.navbar-default .navbar-collapse {
max-height:none;
}
}

.nav-menu .sub-nav .container,
.nav-menu .sub-nav .container,
.nav-menu .sub-nav .container-fluid,
.nav-menu .sub-nav.container,
.nav-menu .sub-nav.container-fluid{
z-index: 1; /*LLA*/
background-color: #FFF; /*LLA*/
.nav-menu .sub-nav.container,
.nav-menu .sub-nav.container-fluid {
z-index: 1;
background-color: #FFF;
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}

/* mega menu list */
// mega menu list
.nav-menu {
display: block;
position: relative;
Expand All @@ -85,76 +69,46 @@
z-index: 15;
}

/* a top level navigation item in the mega menu */
// .nav-item {
// list-style: none;
// display: inline-block;
// padding: 0;
// margin: 0;
// }

/* first descendant link within a top level navigation item */
// .nav-item > a {
// position: relative;
// display: inline-block;
// padding: 0.5em 1em;
// margin: 0 0 -1px 0;
// border: 1px solid transparent;
// }

/* focus/open states of first descendant link within a top level
navigation item */
/*.nav-item > a:focus,
.nav-item > a.open {
border: 1px solid #dedede;
}*/

/* open state of first descendant link within a top level
navigation item */
// .nav-item > a.open {
// border-bottom: none;
// z-index: 1;
// }

/* sub-navigation panel */
// sub-navigation panel
.sub-nav {
position: absolute; /*LLA*/
position: absolute;
display: none;
border: 1px solid transparent;
margin-top: 1px;
left: 0; /*LLA*/
left: 0;
}

/* sub-navigation panel open state */
// sub-navigation panel open state
.sub-nav.open {
display: block;
}

/* list of items within sub-navigation panel */
// list of items within sub-navigation panel
.sub-nav ul {
display: inline-block;
vertical-align: top;
margin: 0 1em 0 0;
padding: 0;
}

/* list item within sub-navigation panel */
// list item within sub-navigation panel
.sub-nav li {
display: block;
list-style-type: none;
margin: 0;
padding: 0;
}
/* link item within sub-navigation panel list*/
.sub-nav li a{

// link item within sub-navigation panel list
.sub-nav li a {
color: #000;
}
.sub-nav li a:focus, .sub-nav li a:hover{
.sub-nav li a:focus, .sub-nav li a:hover {
color: $brand-orange;
}
.mMenu{


// Specific dropdowns
// make dropdown border overlap tab border
background-color: $dropdown-bg;
Expand All @@ -167,36 +121,30 @@ navigation item */
@include border-top-radius(0);
}

/********************************************************/
/********************** Mega menu ***********************/
/********************************************************/
//.mega-menu .navbar-default .navbar-nav > .open > a,
//.mega-menu .navbar-default .navbar-nav > .open > a:hover,
//.mega-menu .navbar-default .navbar-nav > .open > a:focus {
// background-color: #FFF;
// color : black;
//}

//
// Mega menu
//

.mega-menu.navbar{
.mega-menu.navbar {
background-color: $brand-orange-black;
color: $brand-orange-white;

.navbar-toggle{
padding: 0;

.navbar-toggle {
border-color: $brand-orange-white;
&:hover,
&:focus{
background-color: $brand-orange;
background-color: $brand-orange;
}
.icon-bar{
.icon-bar {
background-color: $brand-orange-white;
}
}
.nav > li > a{

.nav > li > a {
color: $brand-orange-white;
&:hover,
&:focus{
&:focus {
color: $brand-orange;
}
}
Expand All @@ -207,19 +155,24 @@ navigation item */
.mega-menu .dropdown {
position : static;
}

.mega-menu .container {
position: relative;
}

.mega-menu .dropdown-menu {
left: auto;
}

.mega-menu .dropdown-menu .row {
padding: 20px 30px;
}

.mega-menu .nav-item.dropdown .dropdown-menu {
left: 0;
right: 0;
}
.mega-menu .nav-item.dropdown .dropdown-menu ul{

.mega-menu .nav-item.dropdown .dropdown-menu ul {
list-style: none;
}
15 changes: 5 additions & 10 deletions scss/_o-variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,24 +7,19 @@
/////////////////////////////////////////////////////////////
$brand-font-weight-bold: bold;
$brand-font-weight-normal: normal;
// Core color #000 / #FF7900
// Core color #FFF / #F16E00
//$brand-orange: #F16E00; // alternative Orange color for digital
// secondary color #4BB4E6 #FFD200 #50BE87 #A885D8 #FFB4E6
// Greys #f6f6f6 #EEEEEE #DDDDDD #CCCCCC #999999 #666666 #444444 #333333 #232323
//yellow blue green purple pink

// secondary color
$brand-yellow: #ffd200; //black text
$brand-blue: #4bb4e6; //black text
$brand-green: #50be87;//black text
$brand-purple: #a885d8;//black text
$brand-pink: #ffb4e6;//black text

$brand-orange: #f16e00;
//used to invert colors

$brand-orange-black: #000;
$brand-orange-white: #fff;
/////////////////////////////////////////////////////////////
//

//## Gray and brand colors for use across Bootstrap.
$gray-footer: $brand-orange-black;

Expand All @@ -43,7 +38,7 @@ $brand-success: #32c832;
$brand-info: #527ebd;
$brand-warning: #fc0;
$brand-danger: #dc3c14;

/////////////////////////////////////////////////////////////
//== Scaffolding
//
//## Settings for some of the most global styles.
Expand Down
3 changes: 2 additions & 1 deletion scss/_orange-css.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,7 +126,8 @@ html {
@media (min-width: $grid-float-breakpoint) {
> li {
> a {
@include navbar-vertical-align((($navbar-padding-vertical) + $line-height-computed));
// @include navbar-vertical-align($navbar-padding-vertical + $line-height-computed);
margin-top: 2.8rem;
}
}
}
Expand Down

0 comments on commit b4efdd0

Please sign in to comment.