Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-11-12 01:50:52 +01:00
Code Issues Releases Wiki Activity

Cleaned up search modal styles

Browse Source
This commit is contained in:
squidfunk 2016-10-23 19:31:54 +02:00
parent e61f12d429
commit 83c5c7512b
15 changed files with 1024 additions and 1098 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintignore
View File

@ -1,4 +1,3 @@
/build /build
/material /material
/site /site
/lib

6
.sass-lint.yml
View File

@ -73,7 +73,9 @@ rules:
- break-at-device - break-at-device
- break-from-device - break-from-device
- break-to-device - break-to-device
nesting-depth: 2 nesting-depth:
- 2
- max-depth: 3
no-color-keywords: 2 no-color-keywords: 2
no-color-literals: 2 no-color-literals: 2
no-css-comments: 2 no-css-comments: 2
@ -100,7 +102,7 @@ rules:
- order: smacss - order: smacss
property-units: property-units:
- 2 - 2
- global: [rem, em, s] - global: [rem, em, s, vh]
pseudo-element: 2 pseudo-element: 2
quotes: quotes:
- 2 - 2

2
lib/providers/jsx.js
View File

@ -31,7 +31,7 @@ export default /* JSX */ {
* *
* @param {string} tag - Tag name * @param {string} tag - Tag name
* @param {object} properties - Properties * @param {object} properties - Properties
* @param {string|number|Array} children - Child nodes * @param {...(string|number|Array)} children - Child nodes
* @return {HTMLElement} Native DOM node * @return {HTMLElement} Native DOM node
*/ */
createElement(tag, properties, ...children) { createElement(tag, properties, ...children) {

165
material/assets/javascripts/application.js
View File

@ -2,41 +2,41 @@ var Application =
/******/ (function(modules) { // webpackBootstrap /******/ (function(modules) { // webpackBootstrap
/******/ // The module cache /******/ // The module cache
/******/ var installedModules = {}; /******/ var installedModules = {};
/******/
/******/ // The require function /******/ // The require function
/******/ function __webpack_require__(moduleId) { /******/ function __webpack_require__(moduleId) {
/******/
/******/ // Check if module is in cache /******/ // Check if module is in cache
/******/ if(installedModules[moduleId]) /******/ if(installedModules[moduleId])
/******/ return installedModules[moduleId].exports; /******/ return installedModules[moduleId].exports;
/******/
/******/ // Create a new module (and put it into the cache) /******/ // Create a new module (and put it into the cache)
/******/ var module = installedModules[moduleId] = { /******/ var module = installedModules[moduleId] = {
/******/ exports: {}, /******/ exports: {},
/******/ id: moduleId, /******/ id: moduleId,
/******/ loaded: false /******/ loaded: false
/******/ }; /******/ };
/******/
/******/ // Execute the module function /******/ // Execute the module function
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); /******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
/******/
/******/ // Flag the module as loaded /******/ // Flag the module as loaded
/******/ module.loaded = true; /******/ module.loaded = true;
/******/
/******/ // Return the exports of the module /******/ // Return the exports of the module
/******/ return module.exports; /******/ return module.exports;
/******/ } /******/ }
/******/
/******/
/******/ // expose the modules object (__webpack_modules__) /******/ // expose the modules object (__webpack_modules__)
/******/ __webpack_require__.m = modules; /******/ __webpack_require__.m = modules;
/******/
/******/ // expose the module cache /******/ // expose the module cache
/******/ __webpack_require__.c = installedModules; /******/ __webpack_require__.c = installedModules;
/******/
/******/ // __webpack_public_path__ /******/ // __webpack_public_path__
/******/ __webpack_require__.p = ""; /******/ __webpack_require__.p = "";
/******/
/******/ // Load entry module and return exports /******/ // Load entry module and return exports
/******/ return __webpack_require__(0); /******/ return __webpack_require__(0);
/******/ }) /******/ })
@ -175,58 +175,72 @@ var Application =
/* Attack FastClick to mitigate 300ms delay on touch devices */ /* Attack FastClick to mitigate 300ms delay on touch devices */
_fastclick2.default.attach(document.body); _fastclick2.default.attach(document.body);
var query = document.getElementById("query"); // const query = document.getElementById("query")
query.addEventListener("focus", function () { // query.addEventListener("focus", () => {
document.querySelector(".md-search").dataset.mdLocked = ""; // document.querySelector(".md-search").dataset.mdLocked = ""
}); // })
/* Intercept click on search mode toggle */ /* Intercept click on search mode toggle */
var offset = 0; var offset = 0;
var toggle = document.getElementById("search"); // const toggle = document.getElementById("search")
toggle.addEventListener("click", function () { // toggle.addEventListener("click", () => { // TODO: click may be the wrong event...
// TODO: click may be the wrong event... // const list = document.body // classList md bla
var list = document.body; // classList md bla // const lock = !matchMedia("only screen and (min-width: 960px)").matches
var lock = !matchMedia("only screen and (min-width: 960px)").matches; //
// /* Exiting search mode */
/* Exiting search mode */ // if (list.dataset.mdLocked) {
if (list.dataset.mdLocked) { // delete list.dataset.mdLocked
delete list.dataset.mdLocked; //
// /* Scroll to former position, but wait for 100ms to prevent flashes
/* Scroll to former position, but wait for 100ms to prevent flashes // on iOS. A short timeout seems to do the trick */
on iOS. A short timeout seems to do the trick */ // if (lock)
if (lock) setTimeout(function () { // setTimeout(() => {
window.scrollTo(0, offset); // window.scrollTo(0, offset)
}, 100); // }, 100)
//
/* Entering search mode */ // /* Entering search mode */
} else { // } else {
offset = window.scrollY; // offset = window.scrollY
//
/* First timeout: scroll to top after transition, to omit flickering */ // /* First timeout: scroll to top after transition, to omit flickering */
if (lock) setTimeout(function () { // if (lock)
window.scrollTo(0, 0); // setTimeout(() => {
}, 400); // window.scrollTo(0, 0)
// }, 400)
/* Second timeout: Lock body after finishing transition and scrolling to //
top and focus input field. Sadly, the focus event is not dispatched // /* Second timeout: Lock body after finishing transition and scrolling to
on iOS Safari and there's nothing we can do about it. */ // top and focus input field. Sadly, the focus event is not dispatched
setTimeout(function () { // on iOS Safari and there's nothing we can do about it. */
// setTimeout(() => {
/* This additional check is necessary to handle fast subsequent clicks //
on the toggle and the timeout to lock the body must be cancelled */ // /* This additional check is necessary to handle fast subsequent clicks
// if (ev.target.checked) { // on the toggle and the timeout to lock the body must be cancelled */
if (lock) list.dataset.mdLocked = ""; // // if (ev.target.checked) {
setTimeout(function () { // if (lock)
document.getElementById("query").focus(); // list.dataset.mdLocked = ""
}, 200); // setTimeout(() => {
// } // document.getElementById("query").focus()
}, 450); // }, 200)
} // // }
}); // }, 450)
// }
// })
// TODO: only do this on MOBILE and TABLET // TODO: only do this on MOBILE and TABLET
var toggleSearchClose = document.querySelector(".md-search__icon"); // const toggleSearchClose = document.querySelector(".md-search__icon")
toggleSearchClose.setAttribute("for", "search"); // TODO: override query with search, when on mobile!!! // toggleSearchClose.setAttribute("for", "search") // TODO: override query with search, when on mobile!!!
document.getElementById("query").addEventListener("focus", function () {
document.getElementById("search").checked = true;
});
document.querySelector(".md-container").addEventListener("click", function () {
if (document.getElementById("search").checked) document.getElementById("search").checked = false;
});
// stop propagation, if search is active...
document.querySelector(".md-search").addEventListener("click", function (ev) {
ev.stopPropagation();
});
// toggleSearchClose.addEventListener("click", ev => { // toggleSearchClose.addEventListener("click", ev => {
// ev.preventDefault() // ev.preventDefault()
// // ev.target // // ev.target
@ -1260,7 +1274,7 @@ var Application =
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
/** /**
* lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 0.7.2 * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 0.7.1
* Copyright (C) 2016 Oliver Nightingale * Copyright (C) 2016 Oliver Nightingale
* @license MIT * @license MIT
*/ */
@ -1312,7 +1326,7 @@ var Application =
return idx; return idx;
}; };
lunr.version = "0.7.2"; lunr.version = "0.7.1";
/*! /*!
* lunr.utils * lunr.utils
* Copyright (C) 2016 Oliver Nightingale * Copyright (C) 2016 Oliver Nightingale
@ -1444,12 +1458,12 @@ var Application =
/** /**
* A function for splitting a string into tokens ready to be inserted into * A function for splitting a string into tokens ready to be inserted into
* the search index. Uses `lunr.tokenizer.separator` to split strings, change * the search index. Uses `lunr.tokenizer.seperator` to split strings, change
* the value of this property to change how strings are split into tokens. * the value of this property to change how strings are split into tokens.
* *
* @module * @module
* @param {String} obj The string to convert into tokens * @param {String} obj The string to convert into tokens
* @see lunr.tokenizer.separator * @see lunr.tokenizer.seperator
* @returns {Array} * @returns {Array}
*/ */
lunr.tokenizer = function (obj) { lunr.tokenizer = function (obj) {
@ -1458,29 +1472,9 @@ var Application =
return lunr.utils.asString(t).toLowerCase(); return lunr.utils.asString(t).toLowerCase();
}); });
// TODO: This exists so that the deprecated property lunr.tokenizer.seperator can still be used. By return obj.toString().trim().toLowerCase().split(lunr.tokenizer.seperator);
// default it is set to false and so the correctly spelt lunr.tokenizer.separator is used unless
// the user is using the old property to customise the tokenizer.
//
// This should be removed when version 1.0.0 is released.
var separator = lunr.tokenizer.seperator || lunr.tokenizer.separator;
return obj.toString().trim().toLowerCase().split(separator);
}; };
/**
* This property is legacy alias for lunr.tokenizer.separator to maintain backwards compatability.
* When introduced the token was spelt incorrectly. It will remain until 1.0.0 when it will be removed,
* all code should use the correctly spelt lunr.tokenizer.separator property instead.
*
* @static
* @see lunr.tokenizer.separator
* @deprecated since 0.7.2 will be removed in 1.0.0
* @private
* @see lunr.tokenizer
*/
lunr.tokenizer.seperator = false;
/** /**
* The sperator used to split a string into tokens. Override this property to change the behaviour of * The sperator used to split a string into tokens. Override this property to change the behaviour of
* `lunr.tokenizer` behaviour when tokenizing strings. By default this splits on whitespace and hyphens. * `lunr.tokenizer` behaviour when tokenizing strings. By default this splits on whitespace and hyphens.
@ -1488,7 +1482,7 @@ var Application =
* @static * @static
* @see lunr.tokenizer * @see lunr.tokenizer
*/ */
lunr.tokenizer.separator = /[\s\-]+/; lunr.tokenizer.seperator = /[\s\-]+/;
/** /**
* Loads a previously serialised tokenizer. * Loads a previously serialised tokenizer.
@ -2215,7 +2209,7 @@ var Application =
idx._fields = serialisedData.fields; idx._fields = serialisedData.fields;
idx._ref = serialisedData.ref; idx._ref = serialisedData.ref;
idx.tokenizer(lunr.tokenizer.load(serialisedData.tokenizer)); idx.tokenizer = lunr.tokenizer.load(serialisedData.tokenizer);
idx.documentStore = lunr.Store.load(serialisedData.documentStore); idx.documentStore = lunr.Store.load(serialisedData.documentStore);
idx.tokenStore = lunr.TokenStore.load(serialisedData.tokenStore); idx.tokenStore = lunr.TokenStore.load(serialisedData.tokenStore);
idx.corpusTokens = lunr.SortedSet.load(serialisedData.corpusTokens); idx.corpusTokens = lunr.SortedSet.load(serialisedData.corpusTokens);
@ -3906,4 +3900,3 @@ var Application =
/***/ } /***/ }
/******/ ]); /******/ ]);
//# sourceMappingURL=application.js.map

205
material/assets/stylesheets/application.css
View File

@ -89,7 +89,7 @@ input {
border: 0; border: 0;
outline: 0; } outline: 0; }
.md-icon, .md-nav__title::before, .md-nav__link::after, .admonition-title::before, .footnote-backref, .md-search-term::before, .checklist li::before, .critic.comment::before { .md-icon, .md-nav__title::before, .md-nav__link::after, .admonition-title::before, .footnote-backref, .checklist li::before, .critic.comment::before {
font-family: "Material Icons"; font-family: "Material Icons";
font-style: normal; font-style: normal;
font-variant: normal; font-variant: normal;
@ -389,10 +389,9 @@ hr {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; } width: 100%; }
.md-footer__inner {
.md-footer-pagination { background: rgba(0, 0, 0, 0.87);
background: rgba(0, 0, 0, 0.87); color: white; }
color: white; }
.md-footer-nav { .md-footer-nav {
padding: 0.4rem; padding: 0.4rem;
@ -486,20 +485,11 @@ hr {
.md-search__inner { .md-search__inner {
width: 100%; } width: 100%; }
.md-search__icon {
position: absolute;
top: 0.8rem;
left: 1.2rem;
-webkit-transition: color 0.25s;
transition: color 0.25s;
font-size: 2.4rem;
cursor: pointer; }
.md-search__icon::before {
content: "search"; }
.md-search__input { .md-search__input {
position: relative;
padding: 0 1.6rem 0 7.2rem; padding: 0 1.6rem 0 7.2rem;
text-overflow: ellipsis; } text-overflow: ellipsis;
z-index: 1; }
.md-search__input + .md-search__icon, .md-search__input::-webkit-input-placeholder { .md-search__input + .md-search__icon, .md-search__input::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.54); } color: rgba(0, 0, 0, 0.54); }
.md-search__input + .md-search__icon, .md-search__input::-moz-placeholder { .md-search__input + .md-search__icon, .md-search__input::-moz-placeholder {
@ -509,6 +499,34 @@ hr {
.md-search__input + .md-search__icon, .md-search__input::placeholder { .md-search__input + .md-search__icon, .md-search__input::placeholder {
color: rgba(0, 0, 0, 0.54); } color: rgba(0, 0, 0, 0.54); }
.md-search__icon {
position: absolute;
top: 0.8rem;
left: 1.2rem;
-webkit-transition: color 0.25s;
transition: color 0.25s;
font-size: 2.4rem;
cursor: pointer;
z-index: 1; }
.md-search__icon::before {
content: "search"; }
.md-search__output {
width: 100%;
border-radius: 0 0 0.2rem 0.2rem;
overflow: hidden; }
.md-search__scrollwrap {
height: 100%;
background: -webkit-linear-gradient(top, white 10%, rgba(255, 255, 255, 0)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.07) 35%, transparent 60%);
background: linear-gradient(to bottom, white 10%, rgba(255, 255, 255, 0)), linear-gradient(to bottom, rgba(0, 0, 0, 0.26), rgba(0, 0, 0, 0.07) 35%, transparent 60%);
background-attachment: local, scroll;
background-color: white;
background-repeat: no-repeat;
background-size: 100% 2.0rem, 100% 1.0rem;
box-shadow: 0 0.1rem 0 rgba(0, 0, 0, 0.07) inset;
overflow-y: auto; }
.md-sidebar { .md-sidebar {
position: relative; position: relative;
width: 24.2rem; width: 24.2rem;
@ -1016,17 +1034,6 @@ hr {
padding-top: 9rem; padding-top: 9rem;
content: ""; } content: ""; }
.md-search__output {
overflow-y: auto;
width: 100%;
opacity: 0;
-webkit-transition: opacity .4s, max-height .4s;
transition: opacity .4s, max-height .4s;
text-align: left;
z-index: -1; }
[data-md-locked] .md-search__output {
opacity: 1; }
.md-search-result__meta { .md-search-result__meta {
color: rgba(0, 0, 0, 0.54); color: rgba(0, 0, 0, 0.54);
padding-left: 4.8rem; padding-left: 4.8rem;
@ -1062,24 +1069,6 @@ hr {
line-height: 1.4; line-height: 1.4;
margin: 0.5em 0; } margin: 0.5em 0; }
.md-search-term {
position: relative;
padding: 0 0.8rem 0 4.8rem;
line-height: 4.0rem;
font-size: 1.6rem;
-webkit-transition: background .25s;
transition: background .25s;
cursor: pointer; }
.md-search-term::before {
position: absolute;
content: "access_time";
font-size: 2.4rem;
line-height: 4.0rem;
left: 1.2rem;
color: rgba(0, 0, 0, 0.26); }
.md-search-term:hover {
background: #eceef8; }
.checklist li { .checklist li {
position: relative; position: relative;
list-style-type: none; } list-style-type: none; }
@ -1186,22 +1175,29 @@ mark {
border-radius: 0.2em; } border-radius: 0.2em; }
.md-typeset sup[id]:target { .md-typeset sup[id]:target {
background: orange; } background: orange; }
@media only screen and (max-width: 44.9375em){
.md-header {
position: static !important; }
.md-toggle {
display: initial !important; }
@media only screen and (max-width: 44.9375em){
.md-typeset > div > pre, .md-typeset > div > pre,
.md-typeset > pre > code{ .md-typeset > pre > code{
margin: 1.0em -1.6rem; margin: 1.0em -1.6rem;
padding: 1.0rem 1.6rem; padding: 1.0rem 1.6rem;
border-radius: 0; } border-radius: 0; } }
.md-search__suggest{
position: relative; @media only screen and (min-width: 100em){
z-index: 2; } }
@media only screen and (min-width: 100em){
html{ html{
font-size: 68.75%; } } font-size: 68.75%; } }
@media only screen and (min-width: 125em){
@media only screen and (min-width: 125em){
html{ html{
font-size: 75%; } } font-size: 75%; } }
@media only screen and (max-width: 74.9375em){
@media only screen and (max-width: 74.9375em){
.md-toggle--drawer:checked ~ .md-overlay{ .md-toggle--drawer:checked ~ .md-overlay{
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -1336,7 +1332,8 @@ mark {
overflow: hidden; } overflow: hidden; }
.md-sidebar--primary .md-sidebar__scrollwrap{ .md-sidebar--primary .md-sidebar__scrollwrap{
margin: 0; } } margin: 0; } }
@media only screen and (min-width: 60em){
@media only screen and (min-width: 60em){
.md-content{ .md-content{
margin-right: 24.2rem; } margin-right: 24.2rem; }
.md-header-nav__icon--search{ .md-header-nav__icon--search{
@ -1353,10 +1350,11 @@ mark {
position: relative; } position: relative; }
.md-search__form{ .md-search__form{
width: 23.0rem; width: 23.0rem;
float: right;
-webkit-transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1); -webkit-transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1); transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1);
border-radius: 0.2rem; } border-radius: 0.2rem; }
[data-md-locked] .md-search__form{ .md-toggle--search:checked ~ .md-header .md-search__form{
width: 66.8rem; } width: 66.8rem; }
.md-search__input{ .md-search__input{
width: 100%; width: 100%;
@ -1386,50 +1384,46 @@ mark {
color: white; } color: white; }
.md-search__input:hover{ .md-search__input:hover{
background: rgba(255, 255, 255, 0.12); } background: rgba(255, 255, 255, 0.12); }
[data-md-locked] .md-search__input{ .md-toggle--search:checked ~ .md-header .md-search__input{
border-radius: 0.2rem 0.2rem 0 0; border-radius: 0.2rem 0.2rem 0 0;
background: white; background: white;
color: rgba(0, 0, 0, 0.87); color: rgba(0, 0, 0, 0.87);
text-overflow: none; } text-overflow: none; }
[data-md-locked] .md-search__input + .md-search__icon, [data-md-locked] .md-search__input::-webkit-input-placeholder{ .md-toggle--search:checked ~ .md-header .md-search__input + .md-search__icon, .md-toggle--search:checked ~ .md-header .md-search__input::-webkit-input-placeholder{
color: rgba(0, 0, 0, 0.54); } color: rgba(0, 0, 0, 0.54); }
[data-md-locked] .md-search__input + .md-search__icon, [data-md-locked] .md-search__input::-moz-placeholder{ .md-toggle--search:checked ~ .md-header .md-search__input + .md-search__icon, .md-toggle--search:checked ~ .md-header .md-search__input::-moz-placeholder{
color: rgba(0, 0, 0, 0.54); } color: rgba(0, 0, 0, 0.54); }
[data-md-locked] .md-search__input + .md-search__icon, [data-md-locked] .md-search__input:-ms-input-placeholder{ .md-toggle--search:checked ~ .md-header .md-search__input + .md-search__icon, .md-toggle--search:checked ~ .md-header .md-search__input:-ms-input-placeholder{
color: rgba(0, 0, 0, 0.54); } color: rgba(0, 0, 0, 0.54); }
[data-md-locked] .md-search__input + .md-search__icon, [data-md-locked] .md-search__input::placeholder{ .md-toggle--search:checked ~ .md-header .md-search__input + .md-search__icon, .md-toggle--search:checked ~ .md-header .md-search__input::placeholder{
color: rgba(0, 0, 0, 0.54); } color: rgba(0, 0, 0, 0.54); }
.md-search__output{
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4);
-webkit-transition: opacity 0.4s;
transition: opacity 0.4s;
opacity: 0; }
.md-toggle--search:checked ~ .md-header .md-search__output{
opacity: 1; }
.md-search__scrollwrap{
max-height: 0; }
.md-toggle--search:checked ~ .md-header .md-search__scrollwrap{
max-height: 75vh; }
.md-search__scrollwrap::-webkit-scrollbar{
width: 0.4rem;
height: 0.4rem; }
.md-search__scrollwrap::-webkit-scrollbar-thumb{
background-color: rgba(0, 0, 0, 0.26); }
.md-search__scrollwrap::-webkit-scrollbar-thumb:hover{
background-color: #536dfe; }
.md-sidebar--secondary{ .md-sidebar--secondary{
display: block; display: block;
float: right; } float: right; }
.md-sidebar--secondary[data-md-locked]{ .md-sidebar--secondary[data-md-locked]{
margin-left: 100%; margin-left: 100%;
-webkit-transform: translate(-100%, 0); -webkit-transform: translate(-100%, 0);
transform: translate(-100%, 0); } transform: translate(-100%, 0); } }
.md-search__output{
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.4); @media only screen and (min-width: 75em){
background: white;
border-top: 0.1rem solid rgba(0, 0, 0, 0.07);
border-radius: 0 0 0.3rem 0.3rem;
position: absolute;
max-height: 0vh;
background: -webkit-linear-gradient(white 10%, rgba(255, 255, 255, 0)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 20%, transparent 60%);
background: linear-gradient(white 10%, rgba(255, 255, 255, 0)), linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 20%, transparent 60%);
background-repeat: no-repeat;
background-color: white;
background-size: 100% 20px, 100% 5px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, scroll; }
[data-md-locked] .md-search__output{
max-height: 75vh; }
.md-search__output::-webkit-scrollbar{
width: 0.4rem;
height: 0.4rem; }
.md-search__output::-webkit-scrollbar-thumb{
background-color: rgba(0, 0, 0, 0.26); }
.md-search__output::-webkit-scrollbar-thumb:hover{
background-color: #536dfe; } }
@media only screen and (min-width: 75em){
.md-content{ .md-content{
margin-left: 24.2rem; } margin-left: 24.2rem; }
.md-content__inner{ .md-content__inner{
@ -1463,16 +1457,19 @@ mark {
transform: rotateX(180deg); } transform: rotateX(180deg); }
.md-sidebar__inner{ .md-sidebar__inner{
border-right: 0.1rem solid rgba(0, 0, 0, 0.07); } } border-right: 0.1rem solid rgba(0, 0, 0, 0.07); } }
@media only screen and (min-width: 30em){
@media only screen and (min-width: 30em){
.md-footer-nav__link{ .md-footer-nav__link{
width: 50%; } } width: 50%; } }
@media only screen and (max-width: 29.9375em){
@media only screen and (max-width: 29.9375em){
.md-footer-nav__link--prev .md-footer-nav__title{ .md-footer-nav__link--prev .md-footer-nav__title{
display: none; } display: none; }
.md-toggle--search:checked ~ .md-header .md-search__overlay{ .md-toggle--search:checked ~ .md-header .md-search__overlay{
-webkit-transform: scale(45); -webkit-transform: scale(45);
transform: scale(45); } } transform: scale(45); } }
@media only screen and (max-width: 59.9375em){
@media only screen and (max-width: 59.9375em){
.md-nav--secondary{ .md-nav--secondary{
border-left: 0; } border-left: 0; }
html .md-nav__link[for="toc"]{ html .md-nav__link[for="toc"]{
@ -1539,40 +1536,34 @@ mark {
transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s; transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s;
transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1); transition: left 0s 0s, transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1), opacity 0.15s 0.15s, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1);
opacity: 1; } opacity: 1; }
.md-search__input{
width: 100%;
height: 5.6rem;
font-size: 1.8rem; }
.md-search__icon{ .md-search__icon{
top: 1.6rem; top: 1.6rem;
left: 1.6rem; } left: 1.6rem; }
.md-search__icon::before{ .md-search__icon::before{
content: "arrow_back"; } content: "arrow_back"; }
.md-search__input{
width: 100%;
height: 5.6rem;
font-size: 1.8rem; }
.md-search__output{ .md-search__output{
position: absolute; position: absolute;
top: 5.6rem; top: 5.6rem;
bottom: 0; bottom: 0; }
background: -webkit-linear-gradient(white 10%, rgba(255, 255, 255, 0)), -webkit-linear-gradient(top, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.125) 20%, transparent 60%);
background: linear-gradient(white 10%, rgba(255, 255, 255, 0)), linear-gradient(to bottom, rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.125) 20%, transparent 60%);
background-repeat: no-repeat;
background-color: white;
background-size: 100% 20px, 100% 10px;
background-attachment: local, scroll; }
.md-search-result__link{ .md-search-result__link{
padding: 0 1.6rem; } padding: 0 1.6rem; }
.md-search-result__meta{ .md-search-result__meta{
padding-left: 1.6rem; padding-left: 1.6rem; } }
border-top: 0.1rem solid rgba(0, 0, 0, 0.07); } }
@media only screen and (min-width: 30em) and (max-width: 44.9375em){ @media only screen and (min-width: 30em) and (max-width: 44.9375em){
.md-toggle--search:checked ~ .md-header .md-search__overlay{ .md-toggle--search:checked ~ .md-header .md-search__overlay{
-webkit-transform: scale(60); -webkit-transform: scale(60);
transform: scale(60); } } transform: scale(60); } }
@media only screen and (min-width: 45em) and (max-width: 59.9375em){
@media only screen and (min-width: 45em) and (max-width: 59.9375em){
.md-toggle--search:checked ~ .md-header .md-search__overlay{ .md-toggle--search:checked ~ .md-header .md-search__overlay{
-webkit-transform: scale(75); -webkit-transform: scale(75);
transform: scale(75); } } transform: scale(75); } }
@media only screen and (min-width: 60em) and (min-width: 75em){
@media only screen and (min-width: 60em) and (min-width: 75em){
.md-sidebar--secondary[data-md-locked]{ .md-sidebar--secondary[data-md-locked]{
margin-left: 120.0rem; } } margin-left: 120.0rem; } }
/*# sourceMappingURL=application.css.map */

8
material/partials/footer.html
View File

@ -1,6 +1,6 @@
<footer class="md-footer"> <footer class="md-footer">
{% if previous_page or next_page %} <div class="md-footer__inner">
<div class="md-footer-pagination"> {% if previous_page or next_page %}
<nav class="md-footer-nav md-grid"> <nav class="md-footer-nav md-grid">
{% if previous_page %} {% if previous_page %}
<a href="{{ previous_page.url }}" title="{{ previous_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev"> <a href="{{ previous_page.url }}" title="{{ previous_page.title }}" class="md-flex md-footer-nav__link md-footer-nav__link--prev" rel="prev">
@ -33,6 +33,6 @@
</a> </a>
{% endif %} {% endif %}
</nav> </nav>
</div> {% endif %}
{% endif %} </div>
</footer> </footer>

13
material/partials/search.html
View File

@ -3,15 +3,16 @@
<div class="md-search__inner"> <div class="md-search__inner">
<form class="md-search__form"> <form class="md-search__form">
<input type="text" class="md-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="query"> <input type="text" class="md-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="query">
<label class="md-icon md-search__icon" for="query"></label> <label class="md-icon md-search__icon" for="search"></label>
</form> </form>
<div class="md-search__output"> <div class="md-search__output">
<div class="md-search-result"> <div class="md-search__scrollwrap">
<div class="md-search-result__meta"> <div class="md-search-result">
3 Search results <div class="md-search-result__meta">
Type to search...
</div>
<ol class="md-search-result__list"></ol>
</div> </div>
<ol class="md-search-result__list">
</ol>
</div> </div>
</div> </div>
</div> </div>

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

@ -100,59 +100,74 @@ document.addEventListener("DOMContentLoaded", () => {
FastClick.attach(document.body) FastClick.attach(document.body)
const query = document.getElementById("query") const query = document.getElementById("query")
query.addEventListener("focus", () => { // query.addEventListener("focus", () => {
document.querySelector(".md-search").dataset.mdLocked = "" // document.querySelector(".md-search").dataset.mdLocked = ""
}) // })
/* Intercept click on search mode toggle */ /* Intercept click on search mode toggle */
let offset = 0 // const offset = 0
const toggle = document.getElementById("search") // const toggle = document.getElementById("search")
toggle.addEventListener("click", () => { // TODO: click may be the wrong event... // toggle.addEventListener("click", () => {
const list = document.body // classList md bla // const list = document.body // classList md bla
const lock = !matchMedia("only screen and (min-width: 960px)").matches // const lock = !matchMedia("only screen and (min-width: 960px)").matches
//
/* Exiting search mode */ // /* Exiting search mode */
if (list.dataset.mdLocked) { // if (list.dataset.mdLocked) {
delete list.dataset.mdLocked // delete list.dataset.mdLocked
//
/* Scroll to former position, but wait for 100ms to prevent flashes // /* Scroll to former position, but wait for 100ms to prevent flashes
on iOS. A short timeout seems to do the trick */ // on iOS. A short timeout seems to do the trick */
if (lock) // if (lock)
setTimeout(() => { // setTimeout(() => {
window.scrollTo(0, offset) // window.scrollTo(0, offset)
}, 100) // }, 100)
//
/* Entering search mode */ // /* Entering search mode */
} else { // } else {
offset = window.scrollY // offset = window.scrollY
//
/* First timeout: scroll to top after transition, to omit flickering */ // /* First timeout: scroll to top after transition, to omit flickering */
if (lock) // if (lock)
setTimeout(() => { // setTimeout(() => {
window.scrollTo(0, 0) // window.scrollTo(0, 0)
}, 400) // }, 400)
//
/* Second timeout: Lock body after finishing transition and scrolling to // /* Second timeout: Lock body after finishing transition and scrolling
top and focus input field. Sadly, the focus event is not dispatched // to top and focus input field. Sadly, the focus event is not
on iOS Safari and there's nothing we can do about it. */ // dispatched on iOS Safari and there's nothing we can do about it. */
setTimeout(() => { // setTimeout(() => {
//
/* This additional check is necessary to handle fast subsequent clicks // /* This additional check is necessary to handle fast subsequent
on the toggle and the timeout to lock the body must be cancelled */ // clicks on the toggle and the timeout to lock the body must be
// if (ev.target.checked) { // cancelled */
if (lock) // // if (ev.target.checked) {
list.dataset.mdLocked = "" // if (lock)
setTimeout(() => { // list.dataset.mdLocked = ""
document.getElementById("query").focus() // setTimeout(() => {
}, 200) // document.getElementById("query").focus()
// } // }, 200)
}, 450) // // }
} // }, 450)
}) // }
// })
// TODO: only do this on MOBILE and TABLET // TODO: only do this on MOBILE and TABLET
const toggleSearchClose = document.querySelector(".md-search__icon") // const toggleSearchClose = document.querySelector(".md-search__icon")
toggleSearchClose.setAttribute("for", "search") // TODO: override query with search, when on mobile!!! // toggleSearchClose.setAttribute("for", "search") // TODO: override query with search, when on mobile!!!
document.getElementById("query").addEventListener("focus", () => {
document.getElementById("search").checked = true
})
// should be registered on body, but leads to problems
document.querySelector(".md-container").addEventListener("click", () => {
if (document.getElementById("search").checked)
document.getElementById("search").checked = false
})
// stop propagation, if search is active...
document.querySelector(".md-search").addEventListener("click", ev => {
ev.stopPropagation()
})
// toggleSearchClose.addEventListener("click", ev => { // toggleSearchClose.addEventListener("click", ev => {
// ev.preventDefault() // ev.preventDefault()
// // ev.target // // ev.target
@ -202,7 +217,6 @@ document.addEventListener("DOMContentLoaded", () => {
nav.style.maxHeight = `${last}px` nav.style.maxHeight = `${last}px`
}) })
} }
}) })
// Capture the end with transitionend // Capture the end with transitionend

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

@ -62,12 +62,14 @@ $md-color-black: hsla(0, 0%, 0%, 0.87);
$md-color-black--light: hsla(0, 0%, 0%, 0.54); $md-color-black--light: hsla(0, 0%, 0%, 0.54);
$md-color-black--lighter: hsla(0, 0%, 0%, 0.26); $md-color-black--lighter: hsla(0, 0%, 0%, 0.26);
$md-color-black--lightest: hsla(0, 0%, 0%, 0.07); $md-color-black--lightest: hsla(0, 0%, 0%, 0.07);
$md-color-black--transparent: hsla(0, 0%, 0%, 0);
// Shades of white // Shades of white
$md-color-white: hsla(0, 0%, 100%, 1.00); $md-color-white: hsla(0, 0%, 100%, 1.00);
$md-color-white--light: hsla(0, 0%, 100%, 0.70); $md-color-white--light: hsla(0, 0%, 100%, 0.70);
$md-color-white--lighter: hsla(0, 0%, 100%, 0.30); $md-color-white--lighter: hsla(0, 0%, 100%, 0.30);
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12); $md-color-white--lightest: hsla(0, 0%, 100%, 0.12);
$md-color-white--transparent: hsla(0, 0%, 100%, 0);
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// Variables: sizing and spacing // Variables: sizing and spacing

183
src/assets/stylesheets/_shame.scss
View File

@ -24,124 +24,23 @@
// Rules // Rules
// ---------------------------------------------------------------------------- // ----------------------------------------------------------------------------
// TODO: cleanup redundant data-md-locked,
// --> use hidden checkbox for reasons of label/button/trigger easyness...
// TODO: set label for magnifying glasses onto search toggle
// --> this way we can always use the search toggle and only need the locked state on the body!
// --> question: how does this play with directly focusing the search field!?
.md-search__output {
overflow-y: auto; // necessary for rounded borders
// &::after {
// display: block;
// content: "";
// width: 100%;
// height: 20px;
// background: red; // TODO: white shadow overlay to fade out result scrolling
// }
[data-md-locked] & {
opacity: 1;
}
width: 100%;
opacity: 0;
transition: opacity .4s, max-height .4s;
text-align: left; // TODO: wrap with another div for this effect
z-index: -1; // ??? wherefor? probably not necessary anymore.
}
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
.md-search__output {
position: absolute;
top: 5.6rem;
bottom: 0;
background:
linear-gradient(white 10%, rgba(255,255,255,0)), // cover
linear-gradient(to bottom, rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.125) 20%,
rgba(0, 0, 0, 0) 60%); // shadow
background-repeat: no-repeat;
background-color: white;
background-size: 100% 20px, 100% 10px;
// Opera doesn't support this in the shorthand
background-attachment: local, scroll;
}
.md-search-result__item {
// margin: 0.8rem;
}
.md-search-result__link { .md-search-result__link {
padding: 0 1.6rem; padding: 0 1.6rem;
// background: white;
// border-radius: 0.2rem;
// @include z-depth(2);
} }
.md-search-result__meta { .md-search-result__meta {
padding-left: 1.6rem; padding-left: 1.6rem;
border-top: 0.1rem solid rgba(0, 0, 0, 0.07);
}
}
@include break-from-device(tablet landscape) {
// Scroll shadow - WIP
.md-search__output {
@include z-depth(6);
background: $md-color-white;
// color: red;
border-top: 0.1rem solid $md-color-black--lightest; // TODO: box-shadow inset!
border-radius: 0 0 0.3rem 0.3rem; // ???
position: absolute; // must be absolute, or header nav will stretch
max-height: 0vh; // TODO: can this be done in percent!?!?!?
[data-md-locked] & {
max-height: 75vh;
}
// Override native scrollbar styles
&::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
// Style scrollbar thumb
&-thumb {
background-color: $md-color-black--lighter;
// Hovered scrollbar thumb
&:hover {
background-color: $md-color-accent;
}
}
}
background:
linear-gradient(white 10%, rgba(255,255,255,0)), // cover
linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0) 60%); // shadow
background-repeat: no-repeat;
background-color: white;
background-size: 100% 20px, 100% 5px;
/* Opera doesn't support this in the shorthand */
background-attachment: local, scroll;
} }
} }
.md-search-result { .md-search-result {
&__meta { &__meta {
color: $md-color-black--light; color: $md-color-black--light;
padding-left: 4.8rem; padding-left: 4.8rem;
padding-right: 1.6rem; padding-right: 1.6rem;
line-height: 4.0rem; line-height: 4.0rem;
font-size: ms(-1); font-size: ms(-1);
} }
&__list { &__list {
@ -151,13 +50,6 @@
border-top: 0.1rem solid $md-color-black--lightest; border-top: 0.1rem solid $md-color-black--lightest;
} }
&__item {
// background: yellow;
// border-top: 0.1rem solid $md-color-black--lightest;
}
&__link { &__link {
overflow: auto; overflow: auto;
display: block; display: block;
@ -225,37 +117,37 @@
// border-radius: 0.3rem 0.3rem 0 0; // border-radius: 0.3rem 0.3rem 0 0;
// } // }
@include break-to-device(mobile landscape) { // @include break-to-device(mobile landscape) {
//
.md-search__suggest { // .md-search__suggest {
position: relative; // position: relative;
z-index: 2; // z-index: 2;
} // }
} // }
//
.md-search-term { // .md-search-term {
position: relative; // position: relative;
padding: 0 0.8rem 0 4.8rem; // padding: 0 0.8rem 0 4.8rem;
line-height: 4.0rem; // don't use line height???? // line-height: 4.0rem; // don't use line height????
font-size: 1.6rem; // font-size: 1.6rem;
//
&::before { // &::before {
@extend %md-icon; // @extend %md-icon;
//
position: absolute; // position: absolute;
//
content: "access_time"; // content: "access_time";
font-size: 2.4rem; // font-size: 2.4rem;
line-height: 4.0rem; // this sucks... // line-height: 4.0rem; // this sucks...
left: 1.2rem; // left: 1.2rem;
color: $md-color-black--lighter; // color: $md-color-black--lighter;
} // }
transition: background .25s; // transition: background .25s;
cursor: pointer; // cursor: pointer;
&:hover { // &:hover {
background: mix($md-color-white, $md-color-primary, 90%); // background: mix($md-color-white, $md-color-primary, 90%);
} // }
} // }
@ -440,9 +332,10 @@ mark {
} }
} }
// TODO: remove jitter // TODO for temporary fixes
// .md-search, .md-header {
// .md-search__inner, position: static !important
// .md-search__form { }
// text-align: right; .md-toggle {
// } display: initial !important;
}

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

@ -30,12 +30,12 @@ html {
height: 100%; height: 100%;
font-size: 62.5%; font-size: 62.5%;
// [screen medium +] Set base font-size to 11px // [screen medium +]: Set base font-size to 11px
@include break-from-device(screen medium) { @include break-from-device(screen medium) {
font-size: 68.75%; font-size: 68.75%;
} }
// [screen large +] Set base font-size to 12px // [screen large +]: Set base font-size to 12px
@include break-from-device(screen large) { @include break-from-device(screen large) {
font-size: 75%; font-size: 75%;
} }

14
src/assets/stylesheets/layout/_footer.scss
View File

@ -29,15 +29,15 @@
position: absolute; position: absolute;
bottom: 0; bottom: 0;
width: 100%; width: 100%;
// Footer container
&__inner {
background: $md-color-black;
color: $md-color-white;
}
} }
// Pagination container // Navigation within footer
.md-footer-pagination {
background: $md-color-black;
color: $md-color-white;
}
// Footer navigation
.md-footer-nav { .md-footer-nav {
padding: 0.4rem; padding: 0.4rem;
overflow: auto; overflow: auto;

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

@ -43,7 +43,7 @@
display: none; display: none;
pointer-events: none; pointer-events: none;
// [tablet portrait -]: Show overlay // [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) { @include break-to-device(tablet portrait) {
display: block; display: block;
position: absolute; position: absolute;
@ -70,7 +70,7 @@
} }
} }
// Set scale factors (currently selected by trial) // Set scale factors
.md-toggle--search:checked ~ .md-header & { .md-toggle--search:checked ~ .md-header & {
// [mobile portrait -]: Scale up 45 times // [mobile portrait -]: Scale up 45 times
@ -83,7 +83,7 @@
transform: scale(60); transform: scale(60);
} }
// [mobile landscape]: Scale up 75 times // [tablet portrait]: Scale up 75 times
@include break-at-device(tablet portrait) { @include break-at-device(tablet portrait) {
transform: scale(75); transform: scale(75);
} }
@ -120,7 +120,7 @@
} }
} }
// [tablet landscape +]: Make relative for inner positioning // [tablet landscape +]: Make relative for inner layout
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
position: relative; position: relative;
} }
@ -132,47 +132,26 @@
// [tablet landscape +]: Header-embedded search // [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) { @include break-from-device(tablet landscape) {
width: 23.0rem; width: 23.0rem;
// Hack: omit jitter when form is resized
float: right;
transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0); transition: width 0.25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
border-radius: 0.2rem; border-radius: 0.2rem;
// Active search field // Enlarge search field when active
[data-md-locked] & { .md-toggle--search:checked ~ .md-header & {
width: 66.8rem; width: 66.8rem;
} }
} }
} }
// Icon // Search input
&__icon {
position: absolute;
top: $md-icon-padding;
left: $md-icon-padding + $md-icon-margin; // TODO: solve in some other way...
transition: color 0.25s;
font-size: $md-icon-size;
cursor: pointer;
// Set search icon on pseudo class, so it can be overridden for mobile
// and tablet when the search is rendered in an overlay
&::before {
content: "search";
}
// [tablet portrait -]: Use back arrow as search icon
@include break-to-device(tablet portrait) {
top: 1.6rem;
left: 1.6rem;
// Show back arrow instead of search icon
&::before {
content: "arrow_back";
}
}
}
// Search field
&__input { &__input {
position: relative;
padding: 0 1.6rem 0 7.2rem; padding: 0 1.6rem 0 7.2rem;
text-overflow: ellipsis; text-overflow: ellipsis;
z-index: 1;
// Placeholder and icon color in active state // Placeholder and icon color in active state
+ .md-search__icon, + .md-search__icon,
@ -212,8 +191,8 @@
background: $md-color-white--lightest; background: $md-color-white--lightest;
} }
// Active search field // Set light background on active search field
[data-md-locked] & { .md-toggle--search:checked ~ .md-header & {
border-radius: 0.2rem 0.2rem 0 0; border-radius: 0.2rem 0.2rem 0 0;
background: $md-color-white; background: $md-color-white;
color: $md-color-black; color: $md-color-black;
@ -227,4 +206,112 @@
} }
} }
} }
// Icon
&__icon {
position: absolute;
top: $md-icon-padding;
left: $md-icon-padding + $md-icon-margin;
transition: color 0.25s;
font-size: $md-icon-size;
cursor: pointer;
z-index: 1;
// Set search icon on pseudo class, so it can be overridden for mobile
// and tablet when the search is rendered in an overlay
&::before {
content: "search";
}
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
top: 1.6rem;
left: 1.6rem;
// Show back arrow instead of search icon
&::before {
content: "arrow_back";
}
}
}
// Search output container
&__output {
width: 100%;
border-radius: 0 0 0.2rem 0.2rem;
overflow: hidden;
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
position: absolute;
top: 5.6rem;
bottom: 0;
}
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
@include z-depth(6);
transition: opacity 0.4s;
opacity: 0;
// Show search output in active state
.md-toggle--search:checked ~ .md-header & {
opacity: 1;
}
}
}
// Wrapper for scrolling on overflow
&__scrollwrap {
height: 100%;
// Pure CSS scrolling shadows, taken from
// http://lea.verou.me/2012/04/background-attachment-local/
background:
linear-gradient(
to bottom,
$md-color-white 10%,
$md-color-white--transparent),
linear-gradient(
to bottom,
$md-color-black--lighter,
$md-color-black--lightest 35%,
$md-color-black--transparent 60%);
// Hack: Opera doesn't support this in the shorthand
background-attachment: local, scroll;
background-color: $md-color-white;
background-repeat: no-repeat;
background-size: 100% 2.0rem, 100% 1.0rem;
box-shadow: 0 0.1rem 0 $md-color-black--lightest inset;
overflow-y: auto;
// [tablet landscape +]: Limit height to viewport
@include break-from-device(tablet landscape) {
max-height: 0;
// Expand in active state
.md-toggle--search:checked ~ .md-header & {
max-height: 75vh;
}
// Override native scrollbar styles
&::-webkit-scrollbar {
width: 0.4rem;
height: 0.4rem;
// Style scrollbar thumb
&-thumb {
background-color: $md-color-black--lighter;
// Hovered scrollbar thumb
&:hover {
background-color: $md-color-accent;
}
}
}
}
}
} }

10
src/partials/footer.html
View File

@ -22,10 +22,10 @@
<!-- Application footer --> <!-- Application footer -->
<footer class="md-footer"> <footer class="md-footer">
<div class="md-footer__inner">
<!-- Link to previous and/or next page --> <!-- Link to previous and/or next page -->
{% if previous_page or next_page %} {% if previous_page or next_page %}
<div class="md-footer-pagination">
<nav class="md-footer-nav md-grid"> <nav class="md-footer-nav md-grid">
<!-- Link to previous page --> <!-- Link to previous page -->
@ -68,6 +68,6 @@
</a> </a>
{% endif %} {% endif %}
</nav> </nav>
</div> {% endif %}
{% endif %} </div>
</footer> </footer>

70
src/partials/search.html
View File

@ -23,77 +23,21 @@
<!-- Search interface --> <!-- Search interface -->
<div class="md-search"> <div class="md-search">
<div class="md-search__overlay"></div> <div class="md-search__overlay"></div>
<!-- Include search input -->
<div class="md-search__inner"> <div class="md-search__inner">
<form class="md-search__form"> <form class="md-search__form">
<input type="text" class="md-search__input" <input type="text" class="md-search__input"
placeholder="Search" autocapitalize="off" autocorrect="off" placeholder="Search" autocapitalize="off" autocorrect="off"
autocomplete="off" spellcheck="false" id="query" /> autocomplete="off" spellcheck="false" id="query" />
<label class="md-icon md-search__icon" for="query"></label> <label class="md-icon md-search__icon" for="search"></label>
<!--<div class="md-search__suggest">
<div class="md-search-term">
change color
</div>
<div class="md-search-term">
fork theme
</div>
<div class="md-search-term">
contributing
</div>-->
<!-- TODO: search results! -->
</form> </form>
<div class="md-search__output"> <div class="md-search__output">
<div class="md-search-result"> <div class="md-search__scrollwrap">
<div class="md-search-result__meta"> <div class="md-search-result">
3 Search results <div class="md-search-result__meta">
Type to search...
</div>
<ol class="md-search-result__list"></ol>
</div> </div>
<ol class="md-search-result__list"> <!-- TODO: use semantic tags -->
<!--<li class="md-search-result__item">
<a href="#" class="md-search-result__link">
<div class="md-search-result__title">
Changing the color palette
</div>
<p class="md-search-result__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
orci. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Donec pellentesque orci id
sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
</p>
</a>
</li>
<li class="md-search-result__item">
<a href="#" class="md-search-result__link">
<div class="md-search-result__title">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
maximus ante vel tortor lacinia porttitor.
</div>
<p class="md-search-result__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
orci. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Donec pellentesque orci id
sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
</p>
</a>
</li>
<li class="md-search-result__item">
<a href="#" class="md-search-result__link">
<div class="md-search-result__title">
Admonition
</div>
<p class="md-search-result__description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis
maximus ante vel tortor lacinia porttitor. Aenean sed faucibus
orci. Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Donec pellentesque orci id
sodales hendrerit. Proin facilisis eleifend arcu id tincidunt.
</p>
</a>
</li>-->
</ol>
</div> </div>
</div> </div>
</div> </div>