OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects 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
/material
/site
/lib

6
.sass-lint.yml
View File

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

2
lib/providers/jsx.js
View File

@ -31,7 +31,7 @@ export default /* JSX */ {
*
* @param {string} tag - Tag name
* @param {object} properties - Properties
* @param {string|number|Array} children - Child nodes
* @param {...(string|number|Array)} children - Child nodes
* @return {HTMLElement} Native DOM node
*/
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;
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-style: normal;
font-variant: normal;
@ -389,10 +389,9 @@ hr {
position: absolute;
bottom: 0;
width: 100%; }
.md-footer-pagination {
background: rgba(0, 0, 0, 0.87);
color: white; }
.md-footer__inner {
background: rgba(0, 0, 0, 0.87);
color: white; }
.md-footer-nav {
padding: 0.4rem;
@ -486,20 +485,11 @@ hr {
.md-search__inner {
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 {
position: relative;
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 {
color: rgba(0, 0, 0, 0.54); }
.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 {
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 {
position: relative;
width: 24.2rem;
@ -1016,17 +1034,6 @@ hr {
padding-top: 9rem;
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 {
color: rgba(0, 0, 0, 0.54);
padding-left: 4.8rem;
@ -1062,24 +1069,6 @@ hr {
line-height: 1.4;
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 {
position: relative;
list-style-type: none; }
@ -1186,22 +1175,29 @@ mark {
border-radius: 0.2em; }
.md-typeset sup[id]:target {
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 > pre > code{
margin: 1.0em -1.6rem;
padding: 1.0rem 1.6rem;
border-radius: 0; }
.md-search__suggest{
position: relative;
z-index: 2; } }
@media only screen and (min-width: 100em){
border-radius: 0; } }
@media only screen and (min-width: 100em){
html{
font-size: 68.75%; } }
@media only screen and (min-width: 125em){
@media only screen and (min-width: 125em){
html{
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{
width: 100%;
height: 100%;
@ -1336,7 +1332,8 @@ mark {
overflow: hidden; }
.md-sidebar--primary .md-sidebar__scrollwrap{
margin: 0; } }
@media only screen and (min-width: 60em){
@media only screen and (min-width: 60em){
.md-content{
margin-right: 24.2rem; }
.md-header-nav__icon--search{
@ -1353,10 +1350,11 @@ mark {
position: relative; }
.md-search__form{
width: 23.0rem;
float: right;
-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);
border-radius: 0.2rem; }
[data-md-locked] .md-search__form{
.md-toggle--search:checked ~ .md-header .md-search__form{
width: 66.8rem; }
.md-search__input{
width: 100%;
@ -1386,50 +1384,46 @@ mark {
color: white; }
.md-search__input:hover{
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;
background: white;
color: rgba(0, 0, 0, 0.87);
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); }
[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); }
[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); }
[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); }
.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{
display: block;
float: right; }
.md-sidebar--secondary[data-md-locked]{
margin-left: 100%;
-webkit-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);
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){
transform: translate(-100%, 0); } }
@media only screen and (min-width: 75em){
.md-content{
margin-left: 24.2rem; }
.md-content__inner{
@ -1463,16 +1457,19 @@ mark {
transform: rotateX(180deg); }
.md-sidebar__inner{
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{
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{
display: none; }
.md-toggle--search:checked ~ .md-header .md-search__overlay{
-webkit-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{
border-left: 0; }
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, -webkit-transform 0.15s 0.15s cubic-bezier(0.1, 0.7, 0.1, 1);
opacity: 1; }
.md-search__input{
width: 100%;
height: 5.6rem;
font-size: 1.8rem; }
.md-search__icon{
top: 1.6rem;
left: 1.6rem; }
.md-search__icon::before{
content: "arrow_back"; }
.md-search__input{
width: 100%;
height: 5.6rem;
font-size: 1.8rem; }
.md-search__output{
position: absolute;
top: 5.6rem;
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; }
bottom: 0; }
.md-search-result__link{
padding: 0 1.6rem; }
.md-search-result__meta{
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){
padding-left: 1.6rem; } }
@media only screen and (min-width: 30em) and (max-width: 44.9375em){
.md-toggle--search:checked ~ .md-header .md-search__overlay{
-webkit-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{
-webkit-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]{
margin-left: 120.0rem; } }
/*# sourceMappingURL=application.css.map */

8
material/partials/footer.html
View File

@ -1,6 +1,6 @@
<footer class="md-footer">
{% if previous_page or next_page %}
<div class="md-footer-pagination">
<div class="md-footer__inner">
{% if previous_page or next_page %}
<nav class="md-footer-nav md-grid">
{% 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">
@ -33,6 +33,6 @@
</a>
{% endif %}
</nav>
</div>
{% endif %}
{% endif %}
</div>
</footer>

13
material/partials/search.html
View File

@ -3,15 +3,16 @@
<div class="md-search__inner">
<form class="md-search__form">
<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>
<div class="md-search__output">
<div class="md-search-result">
<div class="md-search-result__meta">
3 Search results
<div class="md-search__scrollwrap">
<div class="md-search-result">
<div class="md-search-result__meta">
Type to search...
</div>
<ol class="md-search-result__list"></ol>
</div>
<ol class="md-search-result__list">
</ol>
</div>
</div>
</div>

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

@ -100,59 +100,74 @@ document.addEventListener("DOMContentLoaded", () => {
FastClick.attach(document.body)
const query = document.getElementById("query")
query.addEventListener("focus", () => {
document.querySelector(".md-search").dataset.mdLocked = ""
})
// query.addEventListener("focus", () => {
// document.querySelector(".md-search").dataset.mdLocked = ""
// })
/* Intercept click on search mode toggle */
let offset = 0
const toggle = document.getElementById("search")
toggle.addEventListener("click", () => { // TODO: click may be the wrong event...
const list = document.body // classList md bla
const lock = !matchMedia("only screen and (min-width: 960px)").matches
/* Exiting search mode */
if (list.dataset.mdLocked) {
delete list.dataset.mdLocked
/* Scroll to former position, but wait for 100ms to prevent flashes
on iOS. A short timeout seems to do the trick */
if (lock)
setTimeout(() => {
window.scrollTo(0, offset)
}, 100)
/* Entering search mode */
} else {
offset = window.scrollY
/* First timeout: scroll to top after transition, to omit flickering */
if (lock)
setTimeout(() => {
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
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 */
// if (ev.target.checked) {
if (lock)
list.dataset.mdLocked = ""
setTimeout(() => {
document.getElementById("query").focus()
}, 200)
// }
}, 450)
}
})
// const offset = 0
// const toggle = document.getElementById("search")
// toggle.addEventListener("click", () => {
// const list = document.body // classList md bla
// const lock = !matchMedia("only screen and (min-width: 960px)").matches
//
// /* Exiting search mode */
// if (list.dataset.mdLocked) {
// delete list.dataset.mdLocked
//
// /* Scroll to former position, but wait for 100ms to prevent flashes
// on iOS. A short timeout seems to do the trick */
// if (lock)
// setTimeout(() => {
// window.scrollTo(0, offset)
// }, 100)
//
// /* Entering search mode */
// } else {
// offset = window.scrollY
//
// /* First timeout: scroll to top after transition, to omit flickering */
// if (lock)
// setTimeout(() => {
// 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 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 */
// // if (ev.target.checked) {
// if (lock)
// list.dataset.mdLocked = ""
// setTimeout(() => {
// document.getElementById("query").focus()
// }, 200)
// // }
// }, 450)
// }
// })
// TODO: only do this on MOBILE and TABLET
const toggleSearchClose = document.querySelector(".md-search__icon")
toggleSearchClose.setAttribute("for", "search") // TODO: override query with search, when on mobile!!!
// const toggleSearchClose = document.querySelector(".md-search__icon")
// 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 => {
// ev.preventDefault()
// // ev.target
@ -202,7 +217,6 @@ document.addEventListener("DOMContentLoaded", () => {
nav.style.maxHeight = `${last}px`
})
}
})
// 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--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);
// Shades of white
$md-color-white: hsla(0, 0%, 100%, 1.00);
$md-color-white--light: hsla(0, 0%, 100%, 0.70);
$md-color-white--lighter: hsla(0, 0%, 100%, 0.30);
$md-color-white--lightest: hsla(0, 0%, 100%, 0.12);
$md-color-white--transparent: hsla(0, 0%, 100%, 0);
// ----------------------------------------------------------------------------
// Variables: sizing and spacing

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

@ -24,124 +24,23 @@
// 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) {
.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 {
padding: 0 1.6rem;
// background: white;
// border-radius: 0.2rem;
// @include z-depth(2);
}
.md-search-result__meta {
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 {
&__meta {
color: $md-color-black--light;
padding-left: 4.8rem;
padding-right: 1.6rem;
line-height: 4.0rem;
font-size: ms(-1);
}
&__list {
@ -151,13 +50,6 @@
border-top: 0.1rem solid $md-color-black--lightest;
}
&__item {
// background: yellow;
// border-top: 0.1rem solid $md-color-black--lightest;
}
&__link {
overflow: auto;
display: block;
@ -225,37 +117,37 @@
// border-radius: 0.3rem 0.3rem 0 0;
// }
@include break-to-device(mobile landscape) {
.md-search__suggest {
position: relative;
z-index: 2;
}
}
.md-search-term {
position: relative;
padding: 0 0.8rem 0 4.8rem;
line-height: 4.0rem; // don't use line height????
font-size: 1.6rem;
&::before {
@extend %md-icon;
position: absolute;
content: "access_time";
font-size: 2.4rem;
line-height: 4.0rem; // this sucks...
left: 1.2rem;
color: $md-color-black--lighter;
}
transition: background .25s;
cursor: pointer;
&:hover {
background: mix($md-color-white, $md-color-primary, 90%);
}
}
// @include break-to-device(mobile landscape) {
//
// .md-search__suggest {
// position: relative;
// z-index: 2;
// }
// }
//
// .md-search-term {
// position: relative;
// padding: 0 0.8rem 0 4.8rem;
// line-height: 4.0rem; // don't use line height????
// font-size: 1.6rem;
//
// &::before {
// @extend %md-icon;
//
// position: absolute;
//
// content: "access_time";
// font-size: 2.4rem;
// line-height: 4.0rem; // this sucks...
// left: 1.2rem;
// color: $md-color-black--lighter;
// }
// transition: background .25s;
// cursor: pointer;
// &:hover {
// background: mix($md-color-white, $md-color-primary, 90%);
// }
// }
@ -440,9 +332,10 @@ mark {
}
}
// TODO: remove jitter
// .md-search,
// .md-search__inner,
// .md-search__form {
// text-align: right;
// }
// TODO for temporary fixes
.md-header {
position: static !important
}
.md-toggle {
display: initial !important;
}

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

@ -30,12 +30,12 @@ html {
height: 100%;
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) {
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) {
font-size: 75%;
}

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

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

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

@ -43,7 +43,7 @@
display: none;
pointer-events: none;
// [tablet portrait -]: Show overlay
// [tablet portrait -]: Full-screen search bar
@include break-to-device(tablet portrait) {
display: block;
position: absolute;
@ -70,7 +70,7 @@
}
}
// Set scale factors (currently selected by trial)
// Set scale factors
.md-toggle--search:checked ~ .md-header & {
// [mobile portrait -]: Scale up 45 times
@ -83,7 +83,7 @@
transform: scale(60);
}
// [mobile landscape]: Scale up 75 times
// [tablet portrait]: Scale up 75 times
@include break-at-device(tablet portrait) {
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) {
position: relative;
}
@ -132,47 +132,26 @@
// [tablet landscape +]: Header-embedded search
@include break-from-device(tablet landscape) {
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);
border-radius: 0.2rem;
// Active search field
[data-md-locked] & {
// Enlarge search field when active
.md-toggle--search:checked ~ .md-header & {
width: 66.8rem;
}
}
}
// Icon
&__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
// Search input
&__input {
position: relative;
padding: 0 1.6rem 0 7.2rem;
text-overflow: ellipsis;
z-index: 1;
// Placeholder and icon color in active state
+ .md-search__icon,
@ -212,8 +191,8 @@
background: $md-color-white--lightest;
}
// Active search field
[data-md-locked] & {
// Set light background on active search field
.md-toggle--search:checked ~ .md-header & {
border-radius: 0.2rem 0.2rem 0 0;
background: $md-color-white;
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 -->
<footer class="md-footer">
<div class="md-footer__inner">
<!-- Link to previous and/or next page -->
{% if previous_page or next_page %}
<div class="md-footer-pagination">
<!-- Link to previous and/or next page -->
{% if previous_page or next_page %}
<nav class="md-footer-nav md-grid">
<!-- Link to previous page -->
@ -68,6 +68,6 @@
</a>
{% endif %}
</nav>
</div>
{% endif %}
{% endif %}
</div>
</footer>

70
src/partials/search.html
View File

@ -23,77 +23,21 @@
<!-- Search interface -->
<div class="md-search">
<div class="md-search__overlay"></div>
<!-- Include search input -->
<div class="md-search__inner">
<form class="md-search__form">
<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>
<!--<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! -->
<label class="md-icon md-search__icon" for="search"></label>
</form>
<div class="md-search__output">
<div class="md-search-result">
<div class="md-search-result__meta">
3 Search results
<div class="md-search__scrollwrap">
<div class="md-search-result">
<div class="md-search-result__meta">
Type to search...
</div>
<ol class="md-search-result__list"></ol>
</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>