diff --git a/_layouts/default.html b/_layouts/default.html
index bc4ee2799670daddd71ebeb86dd426ab2d4f6fb5..4a66b45ec32562f53ccb546f64922fa9d02b3bdf 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -46,7 +46,7 @@ layout: table_wrappers
<div class="search">
<div class="search-input-wrap">
<input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
- <svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg>
+ <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label>
</div>
<div id="search-results" class="search-results"></div>
</div>
@@ -55,7 +55,7 @@ layout: table_wrappers
<nav aria-label="Auxiliary" class="aux-nav">
<ul class="aux-nav-list">
{% for link in site.aux_links %}
- <li class="aux-nav-list-item"><a href="{{ link.last }}">{{ link.first }}</a></li>
+ <li class="aux-nav-list-item"><a href="{{ link.last }}" class="site-button">{{ link.first }}</a></li>
{% endfor %}
</ul>
</nav>
@@ -114,6 +114,8 @@ layout: table_wrappers
<a href="#" id="search-button" class="search-button">
<svg viewBox="0 0 24 24" class="icon"><use xlink:href="#svg-search"></use></svg>
</a>
+
+ <div class="search-overlay"></div>
{% endif %}
</body>
diff --git a/_sass/code.scss b/_sass/code.scss
index 4acbf5d3fabd349ffb9b02df6fb214d865c5fb04..614fa315099163f9bd89314110a733063a3cab30 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -15,6 +15,7 @@ pre.highlight,
figure.highlight {
padding: $sp-3;
margin-bottom: 0;
+ border-radius: $border-radius;
-webkit-overflow-scrolling: touch;
background-color: $code-background-color;
@@ -26,7 +27,6 @@ figure.highlight {
.highlighter-rouge {
margin-bottom: $sp-3;
- border-radius: $border-radius;
}
.highlight .c { color: #586e75; } // comment //
diff --git a/_sass/layout.scss b/_sass/layout.scss
index eaf048729aa9c24632a84d2814fa00240c40ff07..793394b06c830fcdd8c2f9348118d803124343f0 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -3,7 +3,7 @@
//
.side-bar {
- z-index: 100;
+ z-index: 0;
display: flex;
flex-wrap: wrap;
background-color: $sidebar-color;
@@ -48,15 +48,13 @@
}
.main-header {
- @include container;
+ z-index: 0;
display: none;
- padding-top: $gutter-spacing-sm;
- padding-bottom: $gutter-spacing-sm;
background-color: $sidebar-color;
@include mq(md) {
display: flex;
- justify-content: flex-end;
+ justify-content: space-between;
height: $header-height;
background-color: $body-background-color;
border-bottom: $border $border-color;
@@ -83,7 +81,14 @@
}
.site-nav {
+ display: none;
+
+ &.nav-open {
+ display: block;
+ }
+
@include mq(md) {
+ display: block;
padding-top: $sp-8;
padding-bottom: $gutter-spacing-sm;
overflow-y: auto;
@@ -97,7 +102,6 @@
align-items: center;
@include mq(md) {
- z-index: 101;
height: $header-height;
max-height: $header-height;
border-bottom: $border $border-color;
@@ -137,17 +141,22 @@
height: 100%;
padding: $gutter-spacing-sm;
align-items: center;
+}
- @include mq(md) {
+@include mq(md) {
+ .site-header .site-button {
display: none;
}
}
-.site-title:hover,
-.site-button:hover {
+.site-title:hover {
background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%);
}
+.site-button:hover {
+ background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 100%);
+}
+
// stylelint-disable selector-max-type
body {
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 16ff5f0509b02fe430ff91502fad27ca761d61c7..32ac4b9c3c47c0d8095e79d1bb4ed4a014fe5e99 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -125,37 +125,30 @@
}
}
-// Small screen nav
-
-.site-nav {
- display: none;
-
- &.nav-open {
- display: block;
- }
- @include mq(md) {
- display: block;
- }
-}
+// Aux nav
.aux-nav {
- align-self: center;
+ height: 100%;
+ overflow-x: auto;
+ @include fs-2;
.aux-nav-list {
+ display: flex;
+ height: 100%;
padding: 0;
margin: 0;
list-style: none;
- @include fs-2;
}
.aux-nav-list-item {
display: inline-block;
- margin-right: $sp-2;
- @include fs-2;
+ height: 100%;
+ padding: 0;
+ margin: 0;
+ }
- &:last-child {
- margin-right: 0;
- }
+ @include mq(md) {
+ padding-right: $gutter-spacing-sm;
}
}
diff --git a/_sass/search.scss b/_sass/search.scss
index e0d66fe0bbff43b9aa6baa8a8eac059667d19f23..bbd5cf879ac86a74678b9e42f5c2616a5e5c0646 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -4,85 +4,99 @@
.search {
position: relative;
- z-index: 99;
+ z-index: 2;
flex-grow: 1;
- height: 100%;
- margin-bottom: $sp-3;
+ height: $sp-10;
+ padding-top: $sp-2;
+ padding-bottom: $sp-2;
@include mq(md) {
- margin-bottom: 0;
+ height: 100%;
+ max-width: $search-results-width;
+ padding-top: 0;
+ padding-bottom: 0;
}
}
.search-input-wrap {
- display: flex;
+ position: relative;
height: 100%;
- padding: $sp-2;
- background-color: $search-background-color;
- border-radius: $border-radius;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+ margin-right: $sp-2;
+ margin-left: $sp-2;
+ transition: margin linear 100ms;
@include mq(md) {
- padding-top: 0;
- padding-right: 0;
- padding-bottom: 0;
- padding-left: 0;
- background-color: $body-background-color;
- border-radius: 0;
- box-shadow: none;
+ margin-right: 0;
+ margin-left: 0;
+ transition: none;
}
}
.search-input {
- align-self: center;
+ position: absolute;
width: 100%;
- padding-top: $sp-1;
- padding-bottom: $sp-1;
+ height: 100%;
+ padding-top: $sp-2;
+ padding-right: $gutter-spacing-sm;
+ padding-bottom: $sp-2;
+ padding-left: #{$gutter-spacing-sm + $sp-4 * 1.2 + $sp-2};
background-color: $search-background-color;
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
- order: 2;
+ border-radius: $border-radius;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+ transition: width ease 200ms;
@include fs-4;
+ @include mq(md) {
+ max-width: $search-results-width;
+ padding-left: #{$gutter-spacing + $sp-5};
+ background-color: $body-background-color;
+ border-radius: 0;
+ box-shadow: none;
+ @include fs-3;
+ }
+
&:focus {
outline: 0;
- box-shadow: none;
- + .search-icon {
+ + .search-label .search-icon {
fill: $link-color;
}
}
+}
+
+.search-label {
+ position: absolute;
+ display: flex;
+ height: 100%;
+ padding-left: $gutter-spacing-sm;
@include mq(md) {
- background-color: $body-background-color;
- @include fs-3;
+ padding-left: $gutter-spacing;
}
-}
-.search-icon {
- width: 1.2rem;
- height: 1.2rem;
- align-self: center;
- margin-right: $sp-2;
- fill: $grey-dk-000;
- order: 1;
+ .search-icon {
+ width: #{$sp-4 * 1.2};
+ height: #{$sp-4 * 1.2};
+ align-self: center;
+ fill: $grey-dk-000;
+ }
}
.search-results {
position: absolute;
- z-index: 100;
display: none;
width: 100%;
+ max-height: calc(100vh - 100%);
+ overflow-y: auto;
background: $search-background-color;
- border-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
- &.active {
- display: block;
- }
-
@include mq(md) {
width: $search-results-width;
}
@@ -90,7 +104,6 @@
.search-results-list {
padding-left: 0;
- margin-top: $sp-1;
margin-bottom: $sp-1;
list-style: none;
@include fs-4;
@@ -187,6 +200,42 @@
border: 1px solid rgba($link-color, 0.3);
}
-.blur {
- filter: blur(5px);
+.search-overlay {
+ position: fixed;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ width: 0;
+ height: 0;
+ background-color: rgba(0, 0, 0, 0.2);
+ opacity: 0;
+ transition: opacity ease 200ms;
+}
+
+.search-active {
+ overflow: hidden;
+
+ .search-input-wrap {
+ margin-right: 0;
+ margin-left: 0;
+ }
+
+ .search-input {
+ border-radius: 0;
+ box-shadow: none;
+
+ @include mq(md) {
+ width: $search-results-width;
+ }
+ }
+
+ .search-results {
+ display: block;
+ }
+
+ .search-overlay {
+ width: 100%;
+ height: 100%;
+ opacity: 1;
+ }
}
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 026b91f8e7ca1f466415f7aa4d2cb885c4a39571..ef14a181546d802e658bc7842f46f6b57f49bf86 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -94,8 +94,8 @@ $sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px
$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px
$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
-$sp-9: map-get($spacers, sp-9) !default; // 4 rem == 48px
-$sp-10: map-get($spacers, sp-10) !default; // 4.5 rem == 48px
+$sp-9: map-get($spacers, sp-9) !default; // 3.5 rem == 56px
+$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px
//
// Borders
@@ -118,7 +118,7 @@ $nav-list-item-height-sm: $sp-8 !default;
$nav-list-expander-right: true;
$content-width: 800px !default;
$header-height: 60px !default;
-$search-results-width: 500px !default;
+$search-results-width: $content-width - $nav-width !default;
//
// Media queries in pixels
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index e2543003def3e2bbaf4e4dc52860a1e71659fe6f..fb3a47392915fe619dba641ac16d3c737215cc66 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -111,12 +111,10 @@ function initSearch() {
var docs = docs;
var searchInput = document.getElementById('search-input');
var searchResults = document.getElementById('search-results');
- var mainContentWrap = document.getElementById('main-content-wrap');
function hideResults() {
searchResults.innerHTML = '';
- searchResults.classList.remove('active');
- mainContentWrap.classList.remove('blur');
+ document.body.classList.remove('search-active');
}
function update() {
@@ -138,8 +136,9 @@ function initSearch() {
});
if (results.length > 0) {
- searchResults.classList.add('active');
- mainContentWrap.classList.add('blur');
+ window.scroll(0, window.scrollY + searchInput.getBoundingClientRect().top);
+ document.body.classList.add('search-active');
+
var resultsList = document.createElement('ul');
resultsList.classList.add('search-results-list');
searchResults.appendChild(resultsList);