starred/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-07-29 09:12:35 -04:00
Code Issues Packages Projects Releases Wiki Activity

Focus search after reset

Browse Source
This commit is contained in:
squidfunk
2017-03-21 15:27:45 +01:00
committed by Martin Donath
parent a2ff177885
commit 50efda702a
17 changed files with 97 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/javascripts/application.js
View File

@@ -172,6 +172,16 @@ function initialize(config) { // eslint-disable-line func-style
}
}))
/* Listener: focus input after form reset */
new Material.Event.Listener("[data-md-component=reset]", "click", () => {
setTimeout(() => {
const query = document.querySelector("[data-md-component=query]")
if (!(query instanceof HTMLInputElement))
throw new ReferenceError
query.focus()
}, 10)
}).listen()
/* Listener: focus input after opening search */
new Material.Event.Listener("[data-md-toggle=search]", "change", ev => {
setTimeout(toggle => {

2
src/assets/javascripts/components/Material/Search/Result.jsx
View File

@@ -148,7 +148,7 @@ export default class Result {
}, 250)
/* Execute search on new input event */
} else if (ev.type === "keyup") {
} else if (ev.type === "focus" || ev.type === "keyup") {
const target = ev.target
if (!(target instanceof HTMLInputElement))
throw new ReferenceError

24
src/assets/stylesheets/_config.scss
View File

@@ -58,22 +58,22 @@ $break-devices: (
// ----------------------------------------------------------------------------
// Primary and accent colors
$md-color-primary: $clr-indigo-500;
$md-color-accent: $clr-indigo-a200;
$md-color-primary: $clr-indigo-500 !default;
$md-color-accent: $clr-indigo-a200 !default;
// Shades of black
$md-color-black: hsla(0, 0%, 0%, 0.87);
$md-color-black--light: hsla(0, 0%, 0%, 0.54);
$md-color-black--lighter: hsla(0, 0%, 0%, 0.26);
$md-color-black--lightest: hsla(0, 0%, 0%, 0.07);
$md-color-black--transparent: hsla(0, 0%, 0%, 0);
$md-color-black: hsla(0, 0%, 0%, 0.87) !default;
$md-color-black--light: hsla(0, 0%, 0%, 0.54) !default;
$md-color-black--lighter: hsla(0, 0%, 0%, 0.26) !default;
$md-color-black--lightest: hsla(0, 0%, 0%, 0.07) !default;
$md-color-black--transparent: hsla(0, 0%, 0%, 0) !default;
// Shades of white
$md-color-white: hsla(0, 0%, 100%, 1);
$md-color-white--light: hsla(0, 0%, 100%, 0.7);
$md-color-white--lighter: hsla(0, 0%, 100%, 0.3);
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12);
$md-color-white--transparent: hsla(0, 0%, 100%, 0);
$md-color-white: hsla(0, 0%, 100%, 1) !default;
$md-color-white--light: hsla(0, 0%, 100%, 0.7) !default;
$md-color-white--lighter: hsla(0, 0%, 100%, 0.3) !default;
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12) !default;
$md-color-white--transparent: hsla(0, 0%, 100%, 0) !default;
// ----------------------------------------------------------------------------
// Variables: sizing and spacing

2
src/assets/stylesheets/application.palette.scss
View File

@@ -49,7 +49,7 @@ button[data-md-color-accent] {
padding: 2.4rem 0.8rem 0.4rem;
transition:
background-color 0.25s,
opacity 0.25s;
opacity 0.25s;
border-radius: 0.2rem;
color: $md-color-white;
font-size: ms(-1);

4
src/assets/stylesheets/base/_typeset.scss
View File

@@ -34,7 +34,7 @@ body {
body,
input {
color: $md-color-black;
font-feature-settings: "kern", "onum", "liga";
font-feature-settings: "kern", "liga";
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 400;
}
@@ -44,7 +44,7 @@ pre,
code,
kbd {
color: $md-color-black;
font-feature-settings: "kern", "onum", "liga";
font-feature-settings: "kern", "liga";
font-family: "Courier New", Courier, monospace;
font-weight: 400;
}

10
src/assets/stylesheets/layout/_base.scss
View File

@@ -20,6 +20,14 @@
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
// Active (toggled) drawer
$md-toggle__drawer--checked:
"[data-md-toggle=\"drawer\"]:checked ~";
// ----------------------------------------------------------------------------
// Rules: base grid and containers
// ----------------------------------------------------------------------------
@@ -137,7 +145,7 @@ hr {
@include break-to-device(tablet) {
// Expanded drawer
[data-md-toggle="drawer"]:checked ~ & {
#{$md-toggle__drawer--checked} & {
width: 100%;
height: 100%;
transition:

61
src/assets/stylesheets/layout/_search.scss
View File

@@ -20,6 +20,14 @@
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
// Active (toggled) search
$md-toggle__search--checked:
"[data-md-toggle=\"search\"]:checked ~ .md-header";
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
@@ -62,7 +70,7 @@
z-index: 1;
// Expanded overlay
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
transition:
transform 0.4s,
opacity 0.1s;
@@ -71,7 +79,7 @@
}
// Set scale factors
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
// [mobile portrait -]: Scale up 45 times
@include break-to-device(mobile portrait) {
@@ -109,7 +117,7 @@
z-index: 2;
// Active search modal
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
left: 0;
transform: translateX(0);
transition:
@@ -122,9 +130,7 @@
// [tablet landscape +]: Make relative for inner layout
@include break-from-device(tablet landscape) {
display: table;
position: relative;
clear: both;
}
}
@@ -142,7 +148,7 @@
}
// Set maximum width
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
// [tablet landscape]: Do not overlay title
@include break-at-device(tablet landscape) {
@@ -197,7 +203,6 @@
// Placeholder color
+ .md-search__icon,
&::placeholder {
transition: color 0.25s;
color: $md-color-white;
}
@@ -207,7 +212,7 @@
}
// Set light background on active search field
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
border-radius: 0.2rem 0.2rem 0 0;
background-color: $md-color-white;
color: $md-color-black;
@@ -225,11 +230,16 @@
// Icons
&__icon {
position: absolute;
transition: color 0.25s;
transition: opacity 0.25s;
font-size: $md-icon-size;
cursor: pointer;
z-index: 1;
// Hovered icon
&:hover {
opacity: 0.7;
}
// Search icon
&[for="search"] {
top: $md-icon-padding;
@@ -257,10 +267,10 @@
&[type="reset"] {
top: $md-icon-padding;
right: $md-icon-padding + $md-icon-margin;
transform: scale(0.25);
transform: scale(0.125);
transition:
transform 0.25s,
opacity 0.25s;
transform 0.15s cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.15s;
opacity: 0;
// [tablet portrait -]: Full-screen search bar
@@ -269,13 +279,14 @@
right: 1.6rem;
}
// Non-empty input field ...
.md-search__input:valid ~ & {
// Show reset button if search is active and input non-empty
#{$md-toggle__search--checked} .md-search__input:valid ~ & {
transform: scale(1);
opacity: 1;
// ...and expanded overlay
[data-md-toggle="search"]:checked ~ .md-header & {
transform: scale(1);
opacity: 1;
// Hovered icon
&:hover {
opacity: 0.7;
}
}
}
@@ -301,7 +312,7 @@
opacity: 0;
// Show search output in active state
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
@include z-depth(6);
opacity: 1;
@@ -352,7 +363,7 @@
max-height: 0;
// Expand in active state
[data-md-toggle="search"]:checked ~ .md-header & {
#{$md-toggle__search--checked} & {
max-height: 75vh;
}
@@ -416,6 +427,11 @@
// Hovered link
&:hover {
background-color: transparentize($md-color-accent, 0.9);
// Slightly transparent icon
.md-search-result__article::before {
opacity: 0.7;
}
}
// Add a little spacing on the last link
@@ -444,7 +460,8 @@
position: absolute;
left: 0;
color: $md-color-black--lighter;
transition: opacity 0.25s;
color: $md-color-black--light;
content: "find_in_page";
// [tablet portrait -]: Hide page icon
@@ -501,7 +518,7 @@
// stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix
// Highlighting
// Search term highlighting
em {
font-style: normal;
font-weight: 700;

10
src/assets/stylesheets/layout/_sidebar.scss
View File

@@ -20,6 +20,14 @@
/// DEALINGS
////
// ----------------------------------------------------------------------------
// Variables
// ----------------------------------------------------------------------------
// Active (toggled) drawer
$md-toggle__drawer--checked:
"[data-md-toggle=\"drawer\"]:checked ~ .md-container";
// ----------------------------------------------------------------------------
// Rules
// ----------------------------------------------------------------------------
@@ -65,7 +73,7 @@
}
// Expanded drawer
[data-md-toggle="drawer"]:checked ~ .md-container & {
#{$md-toggle__drawer--checked} & {
@include z-depth(8);
transform: translateX(24.2rem);

2
src/assets/stylesheets/layout/_source.scss
View File

@@ -181,7 +181,7 @@
html & {
transition:
background 0.4s,
color 0.4s,
color 0.4s,
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
// Icon

8
src/assets/stylesheets/layout/_tabs.scss
View File

@@ -64,9 +64,9 @@
display: block;
margin-top: 1.6rem;
transition:
color 0.25s,
color 0.25s,
transform 0.4s cubic-bezier(0.1, 0.7, 0.1, 1),
opacity 0.1s;
opacity 0.1s;
color: $md-color-white--light;
font-size: 1.4rem;
@@ -94,9 +94,9 @@
.md-tabs__link {
transform: translateY(50%);
transition:
color 0.25s,
color 0.25s,
transform 0s 0.4s,
opacity 0.1s;
opacity 0.1s;
opacity: 0;
}
}

3
src/partials/search.html
View File

@@ -32,7 +32,8 @@
accesskey="s" autocapitalize="off" autocorrect="off"
autocomplete="off" spellcheck="false" data-md-component="query" />
<label class="md-icon md-search__icon" for="search"></label>
<button type="reset" class="md-icon md-search__icon">close</button>
<button type="reset" class="md-icon md-search__icon"
data-md-component="reset">close</button>
</form>
<div class="md-search__output">
<div class="md-search__scrollwrap" data-md-scrollfix>