mirror of https://github.com/docker/docs.git
_scss: cleanup navigation styles
This fixes various inconsistencies between the landing page and the other pages by sharing more styles between both: - fix homepage using a different color for the active tab - fix homepage not having "hover" styles for the top navigation I addition, this: - fixes unwanted whitespace in the hamburger-menu on mobile - fixes "active" menu item not being highlighted on mobile - fixes left-side aligning of left-hand menu on desktop Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
This commit is contained in:
Sebastiaan van Stijn
parent
a6e5434600
commit
3631769979
|
|
@ -20,8 +20,8 @@
|
|||
</button>
|
||||
</div>
|
||||
<div class="nav-container hidden-sm hidden-xs">
|
||||
<div id="tabs">
|
||||
<ul class="tabs jsTOCHorizontal">
|
||||
<div>
|
||||
<ul class="nav navbar-nav">
|
||||
{%- for entry in site.data.toc.horizontalnav -%}
|
||||
<li><a href="{{ entry.path }}" id="{{ entry.node }}">{{ entry.title }}</a></li>
|
||||
{%- endfor -%}
|
||||
|
|
|
|||
|
|
@ -50,7 +50,7 @@
|
|||
<nav class="col-nav">
|
||||
<div id="sidebar-nav" class="sidebar hidden-sm hidden-xs">
|
||||
<div id="navbar" class="nav-sidebar">
|
||||
<ul class="nav jsTOCHorizontal hidden-md hidden-lg"></ul>
|
||||
<ul class="nav hidden-md hidden-lg"></ul>
|
||||
<ul class="nav" id="jsTOCLeftNav"></ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -56,24 +56,6 @@ body.landing {
|
|||
}
|
||||
}
|
||||
|
||||
@include md-width {
|
||||
.navbar-nav > li > a {
|
||||
font-weight: bold;
|
||||
line-height: 25px;
|
||||
padding-top: 17px;
|
||||
padding-bottom: 9px;
|
||||
border-bottom-style: solid;
|
||||
border-bottom-width: 4px;
|
||||
border-bottom-color: rgba(255, 255, 255, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@include md-width {
|
||||
.navbar-nav > li.active > a {
|
||||
border-bottom-color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.toggle-mode {
|
||||
margin-top: 15px;
|
||||
|
||||
|
|
|
|||
|
|
@ -54,6 +54,7 @@
|
|||
and (max-width : 900px) {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 55px; // top-navigation bar (without breadcrumbs)
|
||||
width: 100%;
|
||||
z-index: 100;
|
||||
background-color: $bg-sidebar;
|
||||
|
|
@ -197,7 +198,7 @@
|
|||
}
|
||||
.sidebar {
|
||||
background-color: $bg-sidebar;
|
||||
top: 51px;
|
||||
top: 55px; // top-navigation bar (without breadcrumbs)
|
||||
left: 0;
|
||||
display: block;
|
||||
padding: 0;
|
||||
|
|
@ -253,9 +254,6 @@
|
|||
and (min-device-width: 768px)
|
||||
and (max-device-width: 1024px)
|
||||
and (orientation: landscape) {
|
||||
.search-form {
|
||||
float: left;
|
||||
}
|
||||
.ctrl-right {
|
||||
display: block;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,16 +58,12 @@
|
|||
|
||||
.nav-sidebar ul {
|
||||
list-style: none;
|
||||
padding: 0 15px;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
}
|
||||
|
||||
@include lg-width {
|
||||
padding: 0 0 0 7px; // left-padding to align with logo
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sidebar .nav ul {
|
||||
|
|
@ -83,10 +79,18 @@
|
|||
.nav-sidebar ul li a:focus,
|
||||
.nav-sidebar ul li a:hover {
|
||||
border-bottom: none;
|
||||
border-left: 4px solid rgba($primary-links, 0);
|
||||
}
|
||||
|
||||
.nav-sidebar .nav > li > a {
|
||||
padding-left: 22px; // left-padding to align with logo
|
||||
@include before-md-width {
|
||||
padding-right: 32px; // right-align with hamburger menu
|
||||
}
|
||||
}
|
||||
|
||||
.nav-sidebar ul li a.active,
|
||||
.nav-sidebar.nav>li>a:focus {
|
||||
.nav-sidebar.nav > li > a:focus {
|
||||
background: $bg-sidebar-active;
|
||||
border-left: 4px solid $primary-links;
|
||||
font-weight: 600;
|
||||
|
|
@ -234,37 +238,36 @@ input:checked+.slider:before {
|
|||
/*
|
||||
* Tabs ************************************************************************
|
||||
*/
|
||||
#tabs {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding-left: 8px;
|
||||
ul {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
border-left: 4px solid rgba($white, 0.0);
|
||||
}
|
||||
.navbar-nav > li.active > a {
|
||||
border-left: 4px solid rgba($white, 0.75);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
li {
|
||||
float: left;
|
||||
list-style: none;
|
||||
a {
|
||||
color: $white;
|
||||
padding: 17px 19px 14px 15px;
|
||||
float: left;
|
||||
font-weight: 600;
|
||||
&:hover {
|
||||
background: rgba(0, 0, 0, 0.17) !important;
|
||||
border-bottom: 4px solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include md-width {
|
||||
.landing .navbar-nav > li > a {
|
||||
padding-top: 17px;
|
||||
padding-bottom: 9px;
|
||||
}
|
||||
.navbar-nav > li > a {
|
||||
color: $white;
|
||||
line-height: 25px;
|
||||
padding-top: 14px;
|
||||
padding-bottom: 12px;
|
||||
font-weight: 600;
|
||||
|
||||
.tabs li.active a {
|
||||
background: transparent !important;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
border-bottom: 4px solid #fff;
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.17);
|
||||
border-bottom: 4px solid rgba($white, 0.75);
|
||||
}
|
||||
}
|
||||
.navbar-nav > li.active > a {
|
||||
cursor: default;
|
||||
border-left: none;
|
||||
border-bottom: 4px solid rgba($white, 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -61,8 +61,8 @@ body.night {
|
|||
background: $bg-sidebar-night-active;
|
||||
border-left: 4px solid $primary-links;
|
||||
}
|
||||
.tabs li.active a {
|
||||
border-bottom: 4px solid $primary-links;
|
||||
.navbar-nav > li.active > a {
|
||||
border-color: $primary-links;
|
||||
}
|
||||
.slider {
|
||||
background-color: #344658;
|
||||
|
|
|
|||
|
|
@ -82,7 +82,7 @@ img.inline {
|
|||
*/
|
||||
.search-form {
|
||||
float: left;
|
||||
margin: 5px 0 0;
|
||||
margin: 5px 8px 0 0;
|
||||
& input[type=text] {
|
||||
background: rgba(0, 0, 0, 0.17) url("/images/search.png") no-repeat 10px 9px;
|
||||
border: 0;
|
||||
|
|
|
|||
Loading…
Reference in New Issue