Skip to content

Commit

Permalink
feat(megamenu): adjust spacings and sizes to match design
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed Sep 2, 2019
1 parent 5634c92 commit 8d3b5a6
Show file tree
Hide file tree
Showing 5 changed files with 68 additions and 66 deletions.
4 changes: 4 additions & 0 deletions scss/_navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,6 +138,10 @@
margin-left: 0;
font-size: $h5-font-size;
border-top: 1px solid $gray-900;

.nav-item:first-child {
border: 0;
}
}

.dropdown {
Expand Down
34 changes: 16 additions & 18 deletions scss/_o-navbar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,7 +171,7 @@
left: 0;
z-index: $zindex-fixed;
width: 100%;
padding: 1rem 0;
padding: 1rem 0 2.375rem;
background-color: #000;
border-top: 1px solid $gray-700;

Expand Down Expand Up @@ -200,33 +200,31 @@
> .container > .navbar-nav > .nav-item {
flex-grow: 1;
padding: 1rem 0;
}

> .container > .navbar-nav > .nav-item > .nav-link {
padding: 0;
margin-right: .625rem;
margin-bottom: 1rem;
font-size: 1.25rem;
border-bottom: 1px solid $gray-700;
> .nav-link {
max-width: 13.75rem;
padding-bottom: map-get($spacers, 2);
margin-bottom: map-get($spacers, 2);
border-bottom: 1px solid $gray-700;
}

&:first-child,
& + .nav-item {
margin-left: 0;
}
}

> .container > .navbar-nav .navbar-nav {
position: static;
display: block !important; // stylelint-disable-line declaration-no-important
flex-direction: column;
align-items: flex-start;
}

> .container > .navbar-nav .navbar-nav .nav-link {
padding: 0;
line-height: 1.75rem;
outline-offset: 1px;
}

> .container > .navbar-nav .nav-item:first-child,
> .container > .navbar-nav .nav-item + .nav-item {
margin-left: 0;
.nav-link {
padding: 0;
line-height: 1.75rem;
outline-offset: 1px;
}
}

> .container > .navbar-nav .nav-link.back {
Expand Down
2 changes: 1 addition & 1 deletion site/docs/4.3/assets/css/docs.min.css
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion site/docs/4.3/assets/css/docs.min.css.map
View file

Large diffs are not rendered by default.

92 changes: 46 additions & 46 deletions site/docs/4.3/essentials/global-headers/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -230,8 +230,8 @@ <h3 class="mt-5" id="web-glh-nic-001">
</div>
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item col-12 col-lg-4 pr-lg-5">
<a class="nav-link pb-3" href="#">Devices</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Devices</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Devices</a></li>
<li class="nav-item"><a class="nav-link" href="#">iPhone 6</a></li>
Expand All @@ -241,8 +241,8 @@ <h3 class="mt-5" id="web-glh-nic-001">
<li class="nav-item"><a class="nav-link" href="#">Coming soon</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 px-lg-5">
<a class="nav-link pb-3" href="#">Plans</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Plans</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Plans</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pay monthly</a></li>
Expand All @@ -253,8 +253,8 @@ <h3 class="mt-5" id="web-glh-nic-001">
<li class="nav-item"><a class="nav-link" href="#">Data SIM</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 pl-lg-5">
<a class="nav-link pb-3" href="#">Offers</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Offers</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Offers</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pay monthly offers</a></li>
Expand All @@ -264,8 +264,8 @@ <h3 class="mt-5" id="web-glh-nic-001">
<li class="nav-item"><a class="nav-link" href="#">Customer Offers</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 pr-lg-5">
<a class="nav-link pb-3" href="#">Orange TV</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Orange TV</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Orange TV</a></li>
<li class="nav-item"><a class="nav-link" href="#">Mobiles</a></li>
Expand All @@ -274,8 +274,8 @@ <h3 class="mt-5" id="web-glh-nic-001">
<li class="nav-item"><a class="nav-link" href="#">Livebox</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 px-lg-5">
<a class="nav-link pb-3" href="#">Broadband</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Broadband</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Broadband</a></li>
<li class="nav-item"><a class="nav-link" href="#">Home broadband</a></li>
Expand All @@ -284,8 +284,8 @@ <h3 class="mt-5" id="web-glh-nic-001">
<li class="nav-item"><a class="nav-link" href="#">4G WiFi</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 pl-lg-5">
<a class="nav-link pb-3" href="#">Customers</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Customers</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Customers</a></li>
<li class="nav-item"><a class="nav-link" href="#">Access your account</a></li>
Expand Down Expand Up @@ -431,8 +431,8 @@ <h3 id="a11y-suggestion" class="mt-5">
</div>
<div class="container">
<ul class="navbar-nav flex-wrap">
<li class="nav-item col-12 col-lg-4 pr-lg-5">
<a class="nav-link pb-3" href="#">Devices</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Devices</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Devices</a></li>
<li class="nav-item"><a class="nav-link" href="#">iPhone 6</a></li>
Expand All @@ -442,8 +442,8 @@ <h3 id="a11y-suggestion" class="mt-5">
<li class="nav-item"><a class="nav-link" href="#">Coming soon</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 px-lg-5">
<a class="nav-link pb-3" href="#">Plans</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Plans</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Plans</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pay monthly</a></li>
Expand All @@ -454,8 +454,8 @@ <h3 id="a11y-suggestion" class="mt-5">
<li class="nav-item"><a class="nav-link" href="#">Data SIM</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 pl-lg-5">
<a class="nav-link pb-3" href="#">Offers</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Offers</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Offers</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pay monthly offers</a></li>
Expand All @@ -465,8 +465,8 @@ <h3 id="a11y-suggestion" class="mt-5">
<li class="nav-item"><a class="nav-link" href="#">Customer Offers</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 pr-lg-5">
<a class="nav-link pb-3" href="#">Orange TV</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Orange TV</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Orange TV</a></li>
<li class="nav-item"><a class="nav-link" href="#">Mobiles</a></li>
Expand All @@ -475,8 +475,8 @@ <h3 id="a11y-suggestion" class="mt-5">
<li class="nav-item"><a class="nav-link" href="#">Livebox</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 px-lg-5">
<a class="nav-link pb-3" href="#">Broadband</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Broadband</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Broadband</a></li>
<li class="nav-item"><a class="nav-link" href="#">Home broadband</a></li>
Expand All @@ -485,8 +485,8 @@ <h3 id="a11y-suggestion" class="mt-5">
<li class="nav-item"><a class="nav-link" href="#">4G WiFi</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 pl-lg-5">
<a class="nav-link pb-3" href="#">Customers</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Customers</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Customers</a></li>
<li class="nav-item"><a class="nav-link" href="#">Access your account</a></li>
Expand Down Expand Up @@ -601,7 +601,7 @@ <h3 class="mt-5" id="web-glh-nic-002">
<div class="container d-lg-flex">
<ul class="navbar-nav col-lg-10 flex-wrap mt-0">
<li class="nav-item col-lg-4 pr-lg-3">
<a class="nav-link pb-3" href="#">Devices</a>
<a class="nav-link" href="#">Devices</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Devices</a></li>
<li class="nav-item"><a class="nav-link" href="#">iPhone 6</a></li>
Expand All @@ -612,7 +612,7 @@ <h3 class="mt-5" id="web-glh-nic-002">
</ul>
</li>
<li class="nav-item col-lg-4 pr-lg-3">
<a class="nav-link pb-3" href="#">Plans</a>
<a class="nav-link" href="#">Plans</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Plans</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pay monthly</a></li>
Expand All @@ -624,7 +624,7 @@ <h3 class="mt-5" id="web-glh-nic-002">
</ul>
</li>
<li class="nav-item col-lg-4 pr-lg-3">
<a class="nav-link pb-3" href="#">Offers</a>
<a class="nav-link" href="#">Offers</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Offers</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pay monthly offers</a></li>
Expand All @@ -635,7 +635,7 @@ <h3 class="mt-5" id="web-glh-nic-002">
</ul>
</li>
<li class="nav-item col-lg-4 pr-lg-3">
<a class="nav-link pb-3" href="#">Orange TV</a>
<a class="nav-link" href="#">Orange TV</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Orange TV</a></li>
<li class="nav-item"><a class="nav-link" href="#">Mobiles</a></li>
Expand All @@ -645,7 +645,7 @@ <h3 class="mt-5" id="web-glh-nic-002">
</ul>
</li>
<li class="nav-item col-lg-4 pr-lg-3">
<a class="nav-link pb-3" href="#">Broadband</a>
<a class="nav-link" href="#">Broadband</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Broadband</a></li>
<li class="nav-item"><a class="nav-link" href="#">Home broadband</a></li>
Expand All @@ -655,7 +655,7 @@ <h3 class="mt-5" id="web-glh-nic-002">
</ul>
</li>
<li class="nav-item col-lg-4 pr-lg-4">
<a class="nav-link pb-3" href="#">Customers</a>
<a class="nav-link" href="#">Customers</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Customers</a></li>
<li class="nav-item"><a class="nav-link" href="#">Access your account</a></li>
Expand Down Expand Up @@ -780,7 +780,7 @@ <h3 class="mt-5" id="web-glh-min-001">
<div class="container">
<ul class="navbar-nav flex-wrap mt-0">
<li class="nav-item col-12 col-lg-3 pr-lg-3">
<a class="nav-link pb-3" href="#">Devices</a>
<a class="nav-link" href="#">Devices</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Devices</a></li>
<li class="nav-item"><a class="nav-link" href="#">iPhone 6</a></li>
Expand All @@ -791,7 +791,7 @@ <h3 class="mt-5" id="web-glh-min-001">
</ul>
</li>
<li class="nav-item col-12 col-lg-3 pr-lg-3">
<a class="nav-link pb-3" href="#">Plans</a>
<a class="nav-link" href="#">Plans</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Plans</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pay monthly</a></li>
Expand All @@ -803,7 +803,7 @@ <h3 class="mt-5" id="web-glh-min-001">
</ul>
</li>
<li class="nav-item col-12 col-lg-3 pr-lg-3">
<a class="nav-link pb-3" href="#">Offers</a>
<a class="nav-link" href="#">Offers</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Offers</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pay monthly offers</a></li>
Expand All @@ -814,7 +814,7 @@ <h3 class="mt-5" id="web-glh-min-001">
</ul>
</li>
<li class="nav-item col-12 col-lg-3">
<a class="nav-link pb-3" href="#">Orange TV</a>
<a class="nav-link" href="#">Orange TV</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Orange TV</a></li>
<li class="nav-item"><a class="nav-link" href="#">Mobiles</a></li>
Expand Down Expand Up @@ -922,8 +922,8 @@ <h3 class="mt-5" id="web-glh-nsc-001">
</div>
<div class="container">
<ul class="navbar-nav flex-wrap mt-0">
<li class="nav-item col-12 col-lg-4 pr-lg-3">
<a class="nav-link pb-3" href="#">Devices</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Devices</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Devices</a></li>
<li class="nav-item"><a class="nav-link" href="#">iPhone 6</a></li>
Expand All @@ -933,8 +933,8 @@ <h3 class="mt-5" id="web-glh-nsc-001">
<li class="nav-item"><a class="nav-link" href="#">Coming soon</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 pr-lg-3">
<a class="nav-link pb-3" href="#">Plans</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Plans</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Plans</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pay monthly</a></li>
Expand All @@ -945,8 +945,8 @@ <h3 class="mt-5" id="web-glh-nsc-001">
<li class="nav-item"><a class="nav-link" href="#">Data SIM</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 pr-lg-3">
<a class="nav-link pb-3" href="#">Offers</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Offers</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Offers</a></li>
<li class="nav-item"><a class="nav-link" href="#">Pay monthly offers</a></li>
Expand All @@ -956,8 +956,8 @@ <h3 class="mt-5" id="web-glh-nsc-001">
<li class="nav-item"><a class="nav-link" href="#">Customer Offers</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 pr-lg-3">
<a class="nav-link pb-3" href="#">Orange TV</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Orange TV</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Orange TV</a></li>
<li class="nav-item"><a class="nav-link" href="#">Mobiles</a></li>
Expand All @@ -966,8 +966,8 @@ <h3 class="mt-5" id="web-glh-nsc-001">
<li class="nav-item"><a class="nav-link" href="#">Livebox</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 pr-lg-3">
<a class="nav-link pb-3" href="#">Broadband</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Broadband</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Broadband</a></li>
<li class="nav-item"><a class="nav-link" href="#">Home broadband</a></li>
Expand All @@ -976,8 +976,8 @@ <h3 class="mt-5" id="web-glh-nsc-001">
<li class="nav-item"><a class="nav-link" href="#">4G WiFi</a></li>
</ul>
</li>
<li class="nav-item col-12 col-lg-4 pr-lg-4">
<a class="nav-link pb-3" href="#">Customers</a>
<li class="nav-item col-12 col-lg-4">
<a class="nav-link" href="#">Customers</a>
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link back" href="#">Customers</a></li>
<li class="nav-item"><a class="nav-link" href="#">Access your account</a></li>
Expand Down

0 comments on commit 8d3b5a6

Please sign in to comment.