Cool_Tools/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-09-24 03:18:21 +02: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) {

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

File diff suppressed because it is too large Load Diff

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>