mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2024-06-14 11:52:32 +03:00
Admonition styles and removed bower as dependency
This commit is contained in:
squidfunk
parent
c3e10c25f3
commit
fec7e13bea
@ -97,9 +97,9 @@ gulp.task('assets:stylesheets', function() {
|
||||
.pipe(
|
||||
sass({
|
||||
includePaths: [
|
||||
'bower_components/modular-scale/stylesheets',
|
||||
'bower_components/quantum-colors',
|
||||
'bower_components/quantum-shadows'
|
||||
'node_modules/modularscale-sass/stylesheets',
|
||||
'node_modules/material-design-color',
|
||||
'node_modules/material-shadows'
|
||||
]
|
||||
}))
|
||||
.pipe(
|
||||
@ -153,8 +153,7 @@ gulp.task('assets:javascripts', function() {
|
||||
resolve: {
|
||||
modulesDirectories: [
|
||||
'src/assets/javascripts',
|
||||
'node_modules',
|
||||
'bower_components'
|
||||
'node_modules'
|
||||
],
|
||||
extensions: [
|
||||
'', '.js'
|
||||
|
||||
24
bower.json
24
bower.json
@ -1,24 +0,0 @@
|
||||
{
|
||||
"name": "mkdocs-material",
|
||||
"version": "0.2.1",
|
||||
"description": "A material design theme for MkDocs",
|
||||
"homepage": "http://squidfunk.github.io/mkdocs-material/",
|
||||
"authors": [
|
||||
"squidfunk <martin.donath@squidfunk.com>"
|
||||
],
|
||||
"license": "MIT",
|
||||
"moduleType": [
|
||||
"globals"
|
||||
],
|
||||
"ignore": [
|
||||
"**/.*",
|
||||
"bower_components",
|
||||
"node_modules"
|
||||
],
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"modular-scale": "^2.1.1",
|
||||
"quantum-colors": "^1.0.1",
|
||||
"quantum-shadows": "^1.0.0"
|
||||
}
|
||||
}
|
||||
@ -270,9 +270,21 @@ This will print:
|
||||
|
||||
More colors can be freely defined.
|
||||
|
||||
> MkDocs supports several [Markdown extensions][]. The following extensions are
|
||||
> not enabled by default (see the link for which are enabled by default), so you
|
||||
> have to switch them on explicitly.
|
||||
!!! hint "hint, note <small>default</small>"
|
||||
|
||||
!!! tip "tip, idea"
|
||||
|
||||
!!! check "check, success"
|
||||
|
||||
!!! warning
|
||||
|
||||
!!! failure "fail, failure"
|
||||
|
||||
!!! fatal "fatal, danger"
|
||||
|
||||
!!! bug "error, bug"
|
||||
|
||||
!!! bug
|
||||
|
||||
## Full example
|
||||
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}var o=n(1),r=i(o),a=n(2),s=i(a),c=n(3),l=i(c);document.addEventListener("DOMContentLoaded",function(){Modernizr.addTest("ios",function(){return!!navigator.userAgent.match(/(iPad|iPhone|iPod)/g)}),Modernizr.addTest("standalone",function(){return!!navigator.standalone}),r["default"].attach(document.body);var e=window.matchMedia("(min-width: 1200px)"),t=function(){e.matches?n.listen():n.unlisten()},n=new s["default"](".md-sidebar--primary");t();var i=new s["default"](".md-sidebar--secondary");i.listen();var o=new l["default"](".md-nav--toc .md-nav__item a");o.listen(),window.addEventListener("resize",t)})},function(e,t,n){var i;!function(){"use strict";/**
|
||||
!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}var o=n(1),r=i(o),a=n(2),s=i(a),c=n(3),l=i(c);document.addEventListener("DOMContentLoaded",function(){Modernizr.addTest("ios",function(){return!!navigator.userAgent.match(/(iPad|iPhone|iPod)/g)}),Modernizr.addTest("standalone",function(){return!!navigator.standalone}),r["default"].attach(document.body);var e=window.matchMedia("(min-width: 1200px)"),t=function(){e.matches?n.listen():n.unlisten()},n=new s["default"](".md-sidebar--primary");t();var i=new s["default"](".md-sidebar--secondary");i.listen();var o=new l["default"](".md-nav--toc .md-nav__item a");o.listen(),window.addEventListener("resize",t);var a=0,c=document.getElementById("md-toggle-search");c.addEventListener("click",function(e){var t=document.body.classList,n=!matchMedia("only screen and (min-width: 960px)").matches;t.contains("md-js__body--locked")?(t.remove("md-js__body--locked"),n&&setTimeout(function(){window.scrollTo(0,a)},100)):(a=window.scrollY,n&&setTimeout(function(){window.scrollTo(0,0)},400),setTimeout(function(){this.checked&&(n&&t.add("md-js__body--locked"),setTimeout(function(){document.getElementById("md-search").focus()},200))}.bind(this),450))})})},function(e,t,n){var i;!function(){"use strict";/**
|
||||
* @preserve FastClick: polyfill to remove click delays on browsers with touch UIs.
|
||||
*
|
||||
* @codingstandard ftlabs-jsv2
|
||||
@ -1,4 +1,4 @@
|
||||
!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}var o=n(1),r=i(o),a=n(2),s=i(a),c=n(3),l=i(c);document.addEventListener("DOMContentLoaded",function(){Modernizr.addTest("ios",function(){return!!navigator.userAgent.match(/(iPad|iPhone|iPod)/g)}),Modernizr.addTest("standalone",function(){return!!navigator.standalone}),r["default"].attach(document.body);var e=window.matchMedia("(min-width: 1200px)"),t=function(){e.matches?n.listen():n.unlisten()},n=new s["default"](".md-sidebar--primary");t();var i=new s["default"](".md-sidebar--secondary");i.listen();var o=new l["default"](".md-nav--toc .md-nav__item a");o.listen(),window.addEventListener("resize",t)})},function(e,t,n){var i;!function(){"use strict";/**
|
||||
!function(e){function t(i){if(n[i])return n[i].exports;var o=n[i]={exports:{},id:i,loaded:!1};return e[i].call(o.exports,o,o.exports,t),o.loaded=!0,o.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";function i(e){return e&&e.__esModule?e:{"default":e}}var o=n(1),r=i(o),a=n(2),s=i(a),c=n(3),l=i(c);document.addEventListener("DOMContentLoaded",function(){Modernizr.addTest("ios",function(){return!!navigator.userAgent.match(/(iPad|iPhone|iPod)/g)}),Modernizr.addTest("standalone",function(){return!!navigator.standalone}),r["default"].attach(document.body);var e=window.matchMedia("(min-width: 1200px)"),t=function(){e.matches?n.listen():n.unlisten()},n=new s["default"](".md-sidebar--primary");t();var i=new s["default"](".md-sidebar--secondary");i.listen();var o=new l["default"](".md-nav--toc .md-nav__item a");o.listen(),window.addEventListener("resize",t);var a=0,c=document.getElementById("md-toggle-search");c.addEventListener("click",function(e){var t=document.body.classList,n=!matchMedia("only screen and (min-width: 960px)").matches;t.contains("md-js__body--locked")?(t.remove("md-js__body--locked"),n&&setTimeout(function(){window.scrollTo(0,a)},100)):(a=window.scrollY,n&&setTimeout(function(){window.scrollTo(0,0)},400),setTimeout(function(){this.checked&&(n&&t.add("md-js__body--locked"),setTimeout(function(){document.getElementById("md-search").focus()},200))}.bind(this),450))})})},function(e,t,n){var i;!function(){"use strict";/**
|
||||
* @preserve FastClick: polyfill to remove click delays on browsers with touch UIs.
|
||||
*
|
||||
* @codingstandard ftlabs-jsv2
|
||||
|
||||
1
material/assets/javascripts/modernizr-31a00ebfc6.js
Normal file
1
material/assets/javascripts/modernizr-31a00ebfc6.js
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1
material/assets/stylesheets/application-8e9e9d1cff.css
Normal file
1
material/assets/stylesheets/application-8e9e9d1cff.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -25,28 +25,14 @@
|
||||
<meta name="author" content="{{ site_author }}">
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Icon";
|
||||
src: url({{ base_url }}/assets/fonts/icon.eot?52m981);
|
||||
src: url({{ base_url }}/assets/fonts/icon.eot?#iefix52m981)
|
||||
format("embedded-opentype"),
|
||||
url({{ base_url }}/assets/fonts/icon.woff?52m981)
|
||||
format("woff"),
|
||||
url({{ base_url }}/assets/fonts/icon.ttf?52m981)
|
||||
format("truetype"),
|
||||
url({{ base_url }}/assets/fonts/icon.svg?52m981#icon)
|
||||
format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-76344d4d6f.css">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+300,400,700|Roboto+Mono">
|
||||
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-8e9e9d1cff.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
{% for path in extra_css %}
|
||||
<link rel="stylesheet" href="{{ path }}">
|
||||
{% endfor %}
|
||||
<script src="{{ base_url }}/assets/javascripts/modernizr-d1e05123d4.js"></script>
|
||||
<script src="{{ base_url }}/assets/javascripts/modernizr-31a00ebfc6.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<input class="md-toggle" type="checkbox" id="md-toggle-drawer">
|
||||
@ -87,7 +73,7 @@
|
||||
var base_url = '{{ base_url }}';
|
||||
var repo_url = '{{ repo_url }}';
|
||||
</script>
|
||||
<script src="{{ base_url }}/assets/javascripts/application-a7f7c32389.js"></script>
|
||||
<script src="{{ base_url }}/assets/javascripts/application-e9877e2824.js"></script>
|
||||
{% for path in extra_javascript %}
|
||||
<script src="{{ path }}"></script>
|
||||
{% endfor %}
|
||||
|
||||
@ -9,13 +9,14 @@
|
||||
{{ page_title | default(site_name, true) }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<div class="md-flex__cell md-flex__cell--shrink md-search">
|
||||
<label class="md-icon md-icon--search md-header-nav__icon" for="md-toggle-search"></label>
|
||||
<div class="md-header-search">
|
||||
<form class="md-header-search__form">
|
||||
<input type="text" class="md-header-search__input" placeholder="Search" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" id="md-search">
|
||||
<label class="md-icon md-icon--search md-header-search__icon" for="md-search"></label>
|
||||
<div class="md-header-search__suggest">
|
||||
<div class="md-search__overlay"></div>
|
||||
<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="md-search">
|
||||
<label class="md-icon md-icon--search md-search__icon" for="md-search"></label>
|
||||
<div class="md-search__suggest">
|
||||
FOO<br>
|
||||
FOO<br>
|
||||
FOO<br>
|
||||
@ -36,4 +37,6 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<nav class="md-header-search">
|
||||
</nav>
|
||||
</header>
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"assets/images/favicon.ico": "assets/images/favicon-e565ddfa3b.ico",
|
||||
"assets/javascripts/application.js": "assets/javascripts/application-a7f7c32389.js",
|
||||
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-d1e05123d4.js",
|
||||
"assets/stylesheets/application.css": "assets/stylesheets/application-76344d4d6f.css"
|
||||
"assets/javascripts/application.js": "assets/javascripts/application-e9877e2824.js",
|
||||
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-31a00ebfc6.js",
|
||||
"assets/stylesheets/application.css": "assets/stylesheets/application-8e9e9d1cff.css"
|
||||
}
|
||||
@ -9,7 +9,8 @@
|
||||
"license": "MIT",
|
||||
"main": "Gulpfile.js",
|
||||
"scripts": {
|
||||
"start": "gulp watch"
|
||||
"start": "./node_modules/.bin/gulp watch --mkdocs",
|
||||
"build": "./node_modules/.bin/gulp build --production"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -18,6 +19,9 @@
|
||||
"private": true,
|
||||
"dependencies": {
|
||||
"fastclick": "^1.0.6",
|
||||
"material-colors": "^1.0.0",
|
||||
"material-shadows": "^3.0.0",
|
||||
"modularscale-sass": "^2.1.1",
|
||||
"whatwg-fetch": "^1.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Binary file not shown.
@ -1,348 +0,0 @@
|
||||
{
|
||||
"IcoMoonType": "selection",
|
||||
"icons": [
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M661.333 597.333h-33.92l-11.733-11.733c41.813-48.427 66.987-111.36 66.987-180.267 0-153.173-124.16-277.333-277.333-277.333s-277.333 124.16-277.333 277.333 124.16 277.333 277.333 277.333c68.907 0 131.84-25.173 180.267-66.773l11.733 11.733v33.707l213.333 212.907 63.573-63.573-212.907-213.333zM405.333 597.333c-106.027 0-192-85.973-192-192s85.973-192 192-192 192 85.973 192 192-85.973 192-192 192z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"tags": [
|
||||
"search"
|
||||
],
|
||||
"grid": 24
|
||||
},
|
||||
"attrs": [],
|
||||
"properties": {
|
||||
"id": 0,
|
||||
"order": 7,
|
||||
"prevSize": 24,
|
||||
"code": 58880,
|
||||
"name": "search"
|
||||
},
|
||||
"setIdx": 0,
|
||||
"setId": 3,
|
||||
"iconIdx": 0
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M853.333 469.333h-519.253l238.293-238.293-60.373-60.373-341.333 341.333 341.333 341.333 60.373-60.373-238.293-238.293h519.253v-85.333z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"tags": [
|
||||
"arrow-back"
|
||||
],
|
||||
"grid": 24
|
||||
},
|
||||
"attrs": [],
|
||||
"properties": {
|
||||
"id": 1,
|
||||
"order": 4,
|
||||
"prevSize": 24,
|
||||
"code": 58881,
|
||||
"name": "arrow-back"
|
||||
},
|
||||
"setIdx": 0,
|
||||
"setId": 3,
|
||||
"iconIdx": 1
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M426.667 256l-60.373 60.373 195.627 195.627-195.627 195.627 60.373 60.373 256-256z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"tags": [
|
||||
"chevron-right"
|
||||
],
|
||||
"grid": 24
|
||||
},
|
||||
"attrs": [],
|
||||
"properties": {
|
||||
"id": 2,
|
||||
"order": 9,
|
||||
"prevSize": 24,
|
||||
"code": 58882,
|
||||
"name": "chevron-right"
|
||||
},
|
||||
"setIdx": 0,
|
||||
"setId": 3,
|
||||
"iconIdx": 2
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M810.667 273.707l-60.373-60.373-238.293 238.293-238.293-238.293-60.373 60.373 238.293 238.293-238.293 238.293 60.373 60.373 238.293-238.293 238.293 238.293 60.373-60.373-238.293-238.293z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"tags": [
|
||||
"close"
|
||||
],
|
||||
"grid": 24
|
||||
},
|
||||
"attrs": [],
|
||||
"properties": {
|
||||
"id": 3,
|
||||
"order": 8,
|
||||
"prevSize": 24,
|
||||
"code": 58883,
|
||||
"name": "close"
|
||||
},
|
||||
"setIdx": 0,
|
||||
"setId": 3,
|
||||
"iconIdx": 3
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M128 768h768v-85.333h-768v85.333zM128 554.667h768v-85.333h-768v85.333zM128 256v85.333h768v-85.333h-768z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"tags": [
|
||||
"menu"
|
||||
],
|
||||
"grid": 24
|
||||
},
|
||||
"attrs": [],
|
||||
"properties": {
|
||||
"id": 4,
|
||||
"order": 10,
|
||||
"prevSize": 24,
|
||||
"code": 58884,
|
||||
"name": "menu"
|
||||
},
|
||||
"setIdx": 0,
|
||||
"setId": 3,
|
||||
"iconIdx": 4
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M512 170.667l-60.373 60.373 238.293 238.293h-519.253v85.333h519.253l-238.293 238.293 60.373 60.373 341.333-341.333z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"tags": [
|
||||
"arrow-forward"
|
||||
],
|
||||
"grid": 24
|
||||
},
|
||||
"attrs": [],
|
||||
"properties": {
|
||||
"id": 5,
|
||||
"order": 15,
|
||||
"prevSize": 24,
|
||||
"code": 58885,
|
||||
"name": "arrow-forward"
|
||||
},
|
||||
"setIdx": 0,
|
||||
"setId": 3,
|
||||
"iconIdx": 5
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M1024 194.418c-37.676 16.708-78.164 28.002-120.66 33.080 43.372-26 76.686-67.17 92.372-116.23-40.596 24.078-85.556 41.56-133.41 50.98-38.32-40.83-92.922-66.34-153.346-66.34-116.022 0-210.088 94.058-210.088 210.078 0 16.466 1.858 32.5 5.44 47.878-174.6-8.764-329.402-92.4-433.018-219.506-18.084 31.028-28.446 67.116-28.446 105.618 0 72.888 37.088 137.192 93.46 174.866-34.438-1.092-66.832-10.542-95.154-26.278-0.020 0.876-0.020 1.756-0.020 2.642 0 101.788 72.418 186.696 168.522 206-17.626 4.8-36.188 7.372-55.348 7.372-13.538 0-26.698-1.32-39.528-3.772 26.736 83.46 104.32 144.206 196.252 145.896-71.9 56.35-162.486 89.934-260.916 89.934-16.958 0-33.68-0.994-50.116-2.94 92.972 59.61 203.402 94.394 322.042 94.394 386.422 0 597.736-320.124 597.736-597.744 0-9.108-0.206-18.168-0.61-27.18 41.056-29.62 76.672-66.62 104.836-108.748z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"tags": [
|
||||
"twitter",
|
||||
"brand",
|
||||
"tweet",
|
||||
"social"
|
||||
],
|
||||
"defaultCode": 58525,
|
||||
"grid": 24
|
||||
},
|
||||
"attrs": [],
|
||||
"properties": {
|
||||
"id": 6,
|
||||
"order": 9,
|
||||
"prevSize": 24,
|
||||
"code": 58886,
|
||||
"ligatures": "twitter, brand11",
|
||||
"name": "twitter"
|
||||
},
|
||||
"setIdx": 0,
|
||||
"setId": 3,
|
||||
"iconIdx": 6
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M810.667 384h-170.667v-256h-256v256h-170.667l298.667 298.667 298.667-298.667zM213.333 768v85.333h597.333v-85.333h-597.333z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"tags": [
|
||||
"file-download"
|
||||
],
|
||||
"grid": 24
|
||||
},
|
||||
"attrs": [],
|
||||
"properties": {
|
||||
"id": 7,
|
||||
"order": 10,
|
||||
"prevSize": 24,
|
||||
"code": 58888,
|
||||
"name": "download"
|
||||
},
|
||||
"setIdx": 0,
|
||||
"setId": 3,
|
||||
"iconIdx": 7
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M512 736.853l263.68 159.147-69.973-299.947 232.96-201.813-306.773-26.027-119.893-282.88-119.893 282.88-306.773 26.027 232.96 201.813-69.973 299.947z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"tags": [
|
||||
"star"
|
||||
],
|
||||
"grid": 24
|
||||
},
|
||||
"attrs": [],
|
||||
"properties": {
|
||||
"id": 8,
|
||||
"order": 9,
|
||||
"prevSize": 24,
|
||||
"code": 58889,
|
||||
"name": "star"
|
||||
},
|
||||
"setIdx": 0,
|
||||
"setId": 3,
|
||||
"iconIdx": 8
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M512.008 12.642c-282.738 0-512.008 229.218-512.008 511.998 0 226.214 146.704 418.132 350.136 485.836 25.586 4.738 34.992-11.11 34.992-24.632 0-12.204-0.48-52.542-0.696-95.324-142.448 30.976-172.504-60.41-172.504-60.41-23.282-59.176-56.848-74.916-56.848-74.916-46.452-31.778 3.51-31.124 3.51-31.124 51.4 3.61 78.476 52.766 78.476 52.766 45.672 78.27 119.776 55.64 149.004 42.558 4.588-33.086 17.852-55.68 32.506-68.464-113.73-12.942-233.276-56.85-233.276-253.032 0-55.898 20.004-101.574 52.76-137.428-5.316-12.9-22.854-64.972 4.952-135.5 0 0 43.006-13.752 140.84 52.49 40.836-11.348 84.636-17.036 128.154-17.234 43.502 0.198 87.336 5.886 128.256 17.234 97.734-66.244 140.656-52.49 140.656-52.49 27.872 70.528 10.35 122.6 5.036 135.5 32.82 35.856 52.694 81.532 52.694 137.428 0 196.654-119.778 239.95-233.79 252.624 18.364 15.89 34.724 47.046 34.724 94.812 0 68.508-0.596 123.644-0.596 140.508 0 13.628 9.222 29.594 35.172 24.566 203.322-67.776 349.842-259.626 349.842-485.768 0-282.78-229.234-511.998-511.992-511.998z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"tags": [
|
||||
"github",
|
||||
"brand",
|
||||
"octacat",
|
||||
"social"
|
||||
],
|
||||
"grid": 24
|
||||
},
|
||||
"attrs": [],
|
||||
"properties": {
|
||||
"order": 27,
|
||||
"prevSize": 24,
|
||||
"ligatures": "github, brand40",
|
||||
"name": "github",
|
||||
"id": 9,
|
||||
"code": 58887
|
||||
},
|
||||
"setIdx": 0,
|
||||
"setId": 3,
|
||||
"iconIdx": 9
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M554 598v-172h-84v172h84zM554 768v-86h-84v86h84zM42 896l470-810 470 810h-940z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"tags": [
|
||||
"warning"
|
||||
],
|
||||
"defaultCode": 57346,
|
||||
"grid": 24
|
||||
},
|
||||
"attrs": [],
|
||||
"properties": {
|
||||
"order": 11,
|
||||
"prevSize": 24,
|
||||
"name": "warning",
|
||||
"ligatures": "warning",
|
||||
"id": 2,
|
||||
"code": 58896
|
||||
},
|
||||
"setIdx": 1,
|
||||
"setId": 2,
|
||||
"iconIdx": 2
|
||||
},
|
||||
{
|
||||
"icon": {
|
||||
"paths": [
|
||||
"M614 256h240v426h-300l-16-84h-240v298h-84v-726h384z"
|
||||
],
|
||||
"attrs": [],
|
||||
"isMulticolor": false,
|
||||
"tags": [
|
||||
"flag"
|
||||
],
|
||||
"defaultCode": 57683,
|
||||
"grid": 24
|
||||
},
|
||||
"attrs": [],
|
||||
"properties": {
|
||||
"order": 13,
|
||||
"prevSize": 24,
|
||||
"name": "note",
|
||||
"ligatures": "flag",
|
||||
"id": 140,
|
||||
"code": 58897
|
||||
},
|
||||
"setIdx": 1,
|
||||
"setId": 2,
|
||||
"iconIdx": 140
|
||||
}
|
||||
],
|
||||
"height": 1024,
|
||||
"metadata": {
|
||||
"name": "icon"
|
||||
},
|
||||
"preferences": {
|
||||
"showGlyphs": true,
|
||||
"showQuickUse": true,
|
||||
"showQuickUse2": true,
|
||||
"showSVGs": true,
|
||||
"fontPref": {
|
||||
"prefix": "icon-",
|
||||
"metadata": {
|
||||
"fontFamily": "icon",
|
||||
"majorVersion": 1,
|
||||
"minorVersion": 0
|
||||
},
|
||||
"metrics": {
|
||||
"emSize": 1024,
|
||||
"baseline": 6.25,
|
||||
"whitespace": 50
|
||||
},
|
||||
"ie7": true,
|
||||
"showSelector": true,
|
||||
"selector": "class",
|
||||
"classSelector": ".icon",
|
||||
"showMetrics": true,
|
||||
"showMetadata": true,
|
||||
"cssVars": true,
|
||||
"embed": false,
|
||||
"noie8": false
|
||||
},
|
||||
"imagePref": {
|
||||
"prefix": "icon-",
|
||||
"png": true,
|
||||
"useClassSelector": true,
|
||||
"color": 4473924,
|
||||
"bgColor": 16777215
|
||||
},
|
||||
"historySize": 100,
|
||||
"showCodes": true,
|
||||
"gridSize": 16
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Generated by IcoMoon</metadata>
|
||||
<defs>
|
||||
<font id="icon" horiz-adv-x="1024">
|
||||
<font-face units-per-em="1024" ascent="960" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="1024" />
|
||||
<glyph unicode=" " horiz-adv-x="512" d="" />
|
||||
<glyph unicode="" glyph-name="search" d="M661.333 341.334h-33.92l-11.733 11.733c41.813 48.427 66.987 111.36 66.987 180.267 0 153.173-124.16 277.333-277.333 277.333s-277.333-124.16-277.333-277.333 124.16-277.333 277.333-277.333c68.907 0 131.84 25.173 180.267 66.773l11.733-11.733v-33.707l213.333-212.907 63.573 63.573-212.907 213.333zM405.333 341.334c-106.027 0-192 85.973-192 192s85.973 192 192 192 192-85.973 192-192-85.973-192-192-192z" />
|
||||
<glyph unicode="" glyph-name="arrow-back" d="M853.333 469.334h-519.253l238.293 238.293-60.373 60.373-341.333-341.333 341.333-341.333 60.373 60.373-238.293 238.293h519.253v85.333z" />
|
||||
<glyph unicode="" glyph-name="chevron-right" d="M426.667 682.667l-60.373-60.373 195.627-195.627-195.627-195.627 60.373-60.373 256 256z" />
|
||||
<glyph unicode="" glyph-name="close" d="M810.667 664.96l-60.373 60.373-238.293-238.293-238.293 238.293-60.373-60.373 238.293-238.293-238.293-238.293 60.373-60.373 238.293 238.293 238.293-238.293 60.373 60.373-238.293 238.293z" />
|
||||
<glyph unicode="" glyph-name="menu" d="M128 170.667h768v85.333h-768v-85.333zM128 384h768v85.333h-768v-85.333zM128 682.667v-85.333h768v85.333h-768z" />
|
||||
<glyph unicode="" glyph-name="arrow-forward" d="M512 768l-60.373-60.373 238.293-238.293h-519.253v-85.333h519.253l-238.293-238.293 60.373-60.373 341.333 341.333z" />
|
||||
<glyph unicode="" glyph-name="twitter" d="M1024 744.249c-37.676-16.708-78.164-28.002-120.66-33.080 43.372 26 76.686 67.17 92.372 116.23-40.596-24.078-85.556-41.56-133.41-50.98-38.32 40.83-92.922 66.34-153.346 66.34-116.022 0-210.088-94.058-210.088-210.078 0-16.466 1.858-32.5 5.44-47.878-174.6 8.764-329.402 92.4-433.018 219.506-18.084-31.028-28.446-67.116-28.446-105.618 0-72.888 37.088-137.192 93.46-174.866-34.438 1.092-66.832 10.542-95.154 26.278-0.020-0.876-0.020-1.756-0.020-2.642 0-101.788 72.418-186.696 168.522-206-17.626-4.8-36.188-7.372-55.348-7.372-13.538 0-26.698 1.32-39.528 3.772 26.736-83.46 104.32-144.206 196.252-145.896-71.9-56.35-162.486-89.934-260.916-89.934-16.958 0-33.68 0.994-50.116 2.94 92.972-59.61 203.402-94.394 322.042-94.394 386.422 0 597.736 320.124 597.736 597.744 0 9.108-0.206 18.168-0.61 27.18 41.056 29.62 76.672 66.62 104.836 108.748z" />
|
||||
<glyph unicode="" glyph-name="github" d="M512.008 926.025c-282.738 0-512.008-229.218-512.008-511.998 0-226.214 146.704-418.132 350.136-485.836 25.586-4.738 34.992 11.11 34.992 24.632 0 12.204-0.48 52.542-0.696 95.324-142.448-30.976-172.504 60.41-172.504 60.41-23.282 59.176-56.848 74.916-56.848 74.916-46.452 31.778 3.51 31.124 3.51 31.124 51.4-3.61 78.476-52.766 78.476-52.766 45.672-78.27 119.776-55.64 149.004-42.558 4.588 33.086 17.852 55.68 32.506 68.464-113.73 12.942-233.276 56.85-233.276 253.032 0 55.898 20.004 101.574 52.76 137.428-5.316 12.9-22.854 64.972 4.952 135.5 0 0 43.006 13.752 140.84-52.49 40.836 11.348 84.636 17.036 128.154 17.234 43.502-0.198 87.336-5.886 128.256-17.234 97.734 66.244 140.656 52.49 140.656 52.49 27.872-70.528 10.35-122.6 5.036-135.5 32.82-35.856 52.694-81.532 52.694-137.428 0-196.654-119.778-239.95-233.79-252.624 18.364-15.89 34.724-47.046 34.724-94.812 0-68.508-0.596-123.644-0.596-140.508 0-13.628 9.222-29.594 35.172-24.566 203.322 67.776 349.842 259.626 349.842 485.768 0 282.78-229.234 511.998-511.992 511.998z" />
|
||||
<glyph unicode="" glyph-name="download" d="M810.667 554.667h-170.667v256h-256v-256h-170.667l298.667-298.667 298.667 298.667zM213.333 170.667v-85.333h597.333v85.333h-597.333z" />
|
||||
<glyph unicode="" glyph-name="star" d="M512 201.814l263.68-159.147-69.973 299.947 232.96 201.813-306.773 26.027-119.893 282.88-119.893-282.88-306.773-26.027 232.96-201.813-69.973-299.947z" />
|
||||
<glyph unicode="" glyph-name="warning" d="M554 340.667v172h-84v-172h84zM554 170.667v86h-84v-86h84zM42 42.667l470 810 470-810h-940z" />
|
||||
<glyph unicode="" glyph-name="hint" d="M614 682.667h240v-426h-300l-16 84h-240v-298h-84v726h384z" />
|
||||
</font></defs></svg>
|
||||
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
Binary file not shown.
@ -71,4 +71,54 @@ document.addEventListener('DOMContentLoaded', function() {
|
||||
spy.listen();
|
||||
|
||||
window.addEventListener('resize', handler);
|
||||
|
||||
/* Intercept click on search mode toggle */
|
||||
var offset = 0;
|
||||
var toggle = document.getElementById('md-toggle-search');
|
||||
toggle.addEventListener('click', function(e) {
|
||||
var list = document.body.classList;
|
||||
var lock = !matchMedia('only screen and (min-width: 960px)').matches;
|
||||
|
||||
/* Exiting search mode */
|
||||
if (list.contains('md-js__body--locked')) {
|
||||
list.remove('md-js__body--locked');
|
||||
|
||||
/* Scroll to former position, but wait for 100ms to prevent flashes
|
||||
on iOS. A short timeout seems to do the trick */
|
||||
if (lock)
|
||||
setTimeout(function() {
|
||||
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(function() {
|
||||
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(function() {
|
||||
|
||||
/* This additional check is necessary to handle fast subsequent clicks
|
||||
on the toggle and the timeout to lock the body must be cancelled */
|
||||
if (this.checked) {
|
||||
if (lock)
|
||||
list.add('md-js__body--locked');
|
||||
setTimeout(function() {
|
||||
document.getElementById('md-search').focus();
|
||||
}, 200);
|
||||
}
|
||||
}.bind(this), 450);
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
});
|
||||
@ -93,7 +93,7 @@ class ScrollSpy {
|
||||
[].forEach.call(this.el_, (el) => {
|
||||
el.classList.remove('md-nav__link--marked');
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Register listener for all relevant events
|
||||
@ -105,7 +105,7 @@ class ScrollSpy {
|
||||
|
||||
/* Initial update */
|
||||
this.update();
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Unregister listener for all relevant events
|
||||
@ -117,7 +117,7 @@ class ScrollSpy {
|
||||
|
||||
/* Perform reset */
|
||||
this.reset();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
|
||||
@ -60,10 +60,10 @@ $break-devices: (
|
||||
/*
|
||||
* Primary and accent colors
|
||||
*/
|
||||
$md-color-primary: $indigo-500;
|
||||
$md-color-primary--light: $indigo-100;
|
||||
$md-color-primary--dark: $indigo-700;
|
||||
$md-color-accent: $indigo-a200;
|
||||
$md-color-primary: $clr-indigo-500;
|
||||
$md-color-primary--light: $clr-indigo-100;
|
||||
$md-color-primary--dark: $clr-indigo-700;
|
||||
$md-color-accent: $clr-indigo-a200;
|
||||
|
||||
/*
|
||||
* Shades of black
|
||||
|
||||
@ -22,4 +22,55 @@
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Nothing to see here, move along
|
||||
* ------------------------------------------------------------------------- */
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
// Specificity?
|
||||
.md-content .admonition-title {
|
||||
margin: 0;
|
||||
+ * {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.md-search__suggest {
|
||||
background: $md-color-white;
|
||||
border-radius: 0 0 px2rem(3px) px2rem(3px);
|
||||
color: black;
|
||||
text-align: left;
|
||||
border-top: px2rem(1px) solid $md-color-black--lightest;
|
||||
display: none;
|
||||
|
||||
.md-search__input:focus ~ & {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.md-search__input:focus {
|
||||
border-radius: px2rem(3px) px2rem(3px) 0 0;
|
||||
}
|
||||
|
||||
@include break-to-device(mobile landscape) {
|
||||
.md-search__inner {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 100%;
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
transform: translate3d(5%, 0, 0);
|
||||
transition: transform .3s .15s cubic-bezier(0.1, 0.7, 0.1, 1.0), opacity .15s .15s;
|
||||
|
||||
#md-toggle-search:checked ~ .md-header & {
|
||||
transform: translate3d(0, 0, 0);
|
||||
left: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.md-search__suggest {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
@ -25,8 +25,8 @@
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
@import "modular-scale";
|
||||
@import "quantum-colors";
|
||||
@import "quantum-shadows";
|
||||
@import "material-color";
|
||||
@import "material-shadows";
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Application
|
||||
@ -46,6 +46,7 @@
|
||||
@import "layout/header";
|
||||
@import "layout/footer";
|
||||
@import "layout/nav";
|
||||
@import "layout/search";
|
||||
@import "layout/sidebar";
|
||||
|
||||
@import "extensions/admonition";
|
||||
|
||||
@ -28,13 +28,16 @@
|
||||
* Base icon class
|
||||
*/
|
||||
.md-icon {
|
||||
font-family: "Icon";
|
||||
font-family: "Material Icons";
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
|
||||
/* Better Font Rendering */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
@ -42,23 +45,16 @@
|
||||
}
|
||||
|
||||
/*
|
||||
* Build icon set
|
||||
* Build representational classes
|
||||
*/
|
||||
@each $name, $code in (
|
||||
"search": "e600",
|
||||
"back": "e601",
|
||||
"link": "e602",
|
||||
"close": "e603",
|
||||
"menu": "e604",
|
||||
"forward": "e605",
|
||||
"twitter": "e606",
|
||||
"github": "e607",
|
||||
"download": "e608",
|
||||
"star": "e609",
|
||||
"warning": "e610",
|
||||
"note": "e611"
|
||||
@each $ligature, $name in (
|
||||
"arrow_back": "back",
|
||||
"arrow_forward": "forward",
|
||||
"close": "close",
|
||||
"menu": "menu",
|
||||
"search": "search"
|
||||
) {
|
||||
.md-icon--#{$name}:before {
|
||||
content: unquote("\"\\#{$code}\"");
|
||||
content: $ligature;
|
||||
}
|
||||
}
|
||||
@ -22,4 +22,92 @@
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Admonition extension
|
||||
* ------------------------------------------------------------------------- */
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/*
|
||||
* Admonition
|
||||
*/
|
||||
.admonition {
|
||||
position: relative;
|
||||
padding: 0.8rem 1.6rem;
|
||||
margin: 2.0rem 0;
|
||||
background: rgba($clr-blue-a200, 0.05);
|
||||
border-left: px2rem(32px) solid $clr-blue-a200;
|
||||
border-radius: px2rem(2px);
|
||||
|
||||
/*
|
||||
* Icon
|
||||
*/
|
||||
&:before {
|
||||
content: "edit";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.2rem;
|
||||
left: -2.6rem;
|
||||
float: left;
|
||||
font-family: "Material Icons";
|
||||
font-weight: normal;
|
||||
font-size: 2.0rem;
|
||||
vertical-align: -0.1em;
|
||||
color: $md-color-white;
|
||||
}
|
||||
|
||||
/*
|
||||
* Title
|
||||
*/
|
||||
&-title {
|
||||
font-size: ms(-1);
|
||||
font-weight: 700;
|
||||
line-height: 2.0rem;
|
||||
text-transform: uppercase;
|
||||
color: $clr-blue-a400;
|
||||
}
|
||||
|
||||
/*
|
||||
* Build representational classes
|
||||
*/
|
||||
@each $names, $appearance in (
|
||||
tip idea: $clr-teal-a700 "whatshot",
|
||||
success check: $clr-green-a400 "done",
|
||||
warning: $clr-orange-a400 "warning",
|
||||
failure fail: $clr-red-a200 "clear",
|
||||
danger fatal: $clr-red-a400 "flash_on",
|
||||
bug error: $clr-pink-a400 "bug_report"
|
||||
) {
|
||||
$tint: nth($appearance, 1);
|
||||
$icon: nth($appearance, 2);
|
||||
|
||||
/*
|
||||
* Define base class
|
||||
*/
|
||||
&.#{nth($names, 1)} {
|
||||
background: rgba($tint, 0.05);
|
||||
border-color: $tint;
|
||||
|
||||
/*
|
||||
* Icon
|
||||
*/
|
||||
&:before {
|
||||
content: $icon;
|
||||
}
|
||||
|
||||
/*
|
||||
* Set color for title
|
||||
*/
|
||||
.admonition-title {
|
||||
color: $tint;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Define synonyms for base class
|
||||
*/
|
||||
@if length($names) > 1 {
|
||||
@for $n from 2 through length($names) {
|
||||
&.#{nth($names, $n)} {
|
||||
@extend .admonition.#{nth($names, 1)};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -33,7 +33,7 @@
|
||||
*/
|
||||
@function px2em($size, $base: 16px) {
|
||||
@if unit($size) == px {
|
||||
@return ($size / $base) * 1em;
|
||||
@return ($size / $base) * 1.0em;
|
||||
} @else {
|
||||
@error "Invalid unit: #{$size} - must be px";
|
||||
}
|
||||
@ -47,7 +47,7 @@
|
||||
*/
|
||||
@function px2rem($size, $base: 10px) {
|
||||
@if unit($size) == px {
|
||||
@return ($size / $base) * 1rem;
|
||||
@return ($size / $base) * 1.0rem;
|
||||
} @else {
|
||||
@error "Invalid unit: #{$size} - must be px";
|
||||
}
|
||||
|
||||
@ -37,6 +37,14 @@ html {
|
||||
body {
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
|
||||
/*
|
||||
* Lock body to viewport height (e.g. in search mode)
|
||||
*/
|
||||
&.md-js__body--locked {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
@ -53,7 +61,7 @@ hr {
|
||||
* Template-wide grid
|
||||
*/
|
||||
.md-grid {
|
||||
max-width: 120rem;
|
||||
max-width: 120.0rem;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
@ -73,7 +81,7 @@ hr {
|
||||
margin-top: 5.6rem;
|
||||
|
||||
/*
|
||||
* bottom spacing to account for footer
|
||||
* Bottom spacing to account for footer
|
||||
*/
|
||||
&__inner {
|
||||
margin-top: 3.0rem;
|
||||
@ -87,7 +95,7 @@ hr {
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/*
|
||||
* Toggle checkbox (should never be visibile)
|
||||
* Toggle checkbox (should never be visible)
|
||||
*/
|
||||
.md-toggle {
|
||||
display: none !important;
|
||||
|
||||
@ -28,7 +28,7 @@
|
||||
* Application header (stays always on top)
|
||||
*/
|
||||
.md-header {
|
||||
@include drop-shadow(1);
|
||||
@include z-depth(2);
|
||||
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@ -50,6 +50,8 @@
|
||||
*/
|
||||
&__icon {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-size: 2.4rem;
|
||||
padding: 0.8rem;
|
||||
margin: 0.4rem;
|
||||
@ -64,8 +66,8 @@
|
||||
background: $md-color-white--lightest;
|
||||
}
|
||||
|
||||
/* [tablet portrait +]: Hide the search icon */
|
||||
@include break-from-device(tablet landscape) {
|
||||
/* [tablet +]: Hide the search icon */
|
||||
@include break-from-device(tablet) {
|
||||
|
||||
/*
|
||||
* Search icon
|
||||
@ -85,68 +87,4 @@
|
||||
line-height: 4.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Search bar within header - the right aligment removes jitter
|
||||
*/
|
||||
&-search {
|
||||
position: relative;
|
||||
margin: 0.6rem 0.4rem 0.6rem 0;
|
||||
text-align: right;
|
||||
|
||||
/*
|
||||
* Icon
|
||||
*/
|
||||
&__icon {
|
||||
position: absolute;
|
||||
top: 0.6rem;
|
||||
left: 1.2rem;
|
||||
font-size: 2.4rem;
|
||||
transition: color .25s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
* Search field
|
||||
*/
|
||||
&__input {
|
||||
display: inline-block;
|
||||
width: 23.0rem;
|
||||
height: 3.6rem;
|
||||
padding-left: 4.4rem;
|
||||
padding-right: 0.8rem;
|
||||
font-size: ms(0);
|
||||
background: $md-color-white--lightest;
|
||||
color: $md-color-white;
|
||||
border-radius: px2rem(2px);
|
||||
transition: color .25s,
|
||||
background-color .25s,
|
||||
width .25s cubic-bezier(0.1, 0.7, 0.1, 1);
|
||||
|
||||
/*
|
||||
* Placeholder color
|
||||
*/
|
||||
&::placeholder {
|
||||
color: $md-color-white;
|
||||
transition: color .25s;
|
||||
}
|
||||
|
||||
/*
|
||||
* Active search field
|
||||
*/
|
||||
&:focus {
|
||||
background: $md-color-white;
|
||||
color: $md-color-black;
|
||||
width: 40rem;
|
||||
|
||||
/*
|
||||
* Placeholder and icon color in active state
|
||||
*/
|
||||
+ .md-header-search__icon,
|
||||
&::placeholder {
|
||||
color: $md-color-black--light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,179 @@
|
||||
/*
|
||||
* Copyright (c) 2016 Martin Donath <martin.donath@squidfunk.com>
|
||||
*
|
||||
* Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
* of this software and associated documentation files (the "Software"), to
|
||||
* deal in the Software without restriction, including without limitation the
|
||||
* rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
|
||||
* sell copies of the Software, and to permit persons to whom the Software is
|
||||
* furnished to do so, subject to the following conditions:
|
||||
*
|
||||
* The above copyright notice and this permission notice shall be included in
|
||||
* all copies or substantial portions of the Software.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
|
||||
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
||||
* IN THE SOFTWARE.
|
||||
*/
|
||||
|
||||
/* ----------------------------------------------------------------------------
|
||||
* Search
|
||||
* ------------------------------------------------------------------------- */
|
||||
|
||||
/*
|
||||
* Application search
|
||||
*/
|
||||
.md-search {
|
||||
position: relative;
|
||||
|
||||
/*
|
||||
* Search overlay
|
||||
*/
|
||||
&__overlay {
|
||||
display: none;
|
||||
|
||||
/* [mobile -]: Only show overlay on mobile */
|
||||
@include break-to-device(mobile) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0.4rem;
|
||||
left: 0.4rem;
|
||||
width: 4.0rem;
|
||||
height: 4.0rem;
|
||||
overflow: hidden;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
background: #EEEEEE;
|
||||
border-radius: 100%;
|
||||
transform-orgin: center;
|
||||
transition: opacity .2s .2s,
|
||||
transform .3s .1s;
|
||||
|
||||
/*
|
||||
* Expanded overlay
|
||||
*/
|
||||
#md-toggle-search:checked ~ .md-header & {
|
||||
z-index: 1;
|
||||
opacity: 1;
|
||||
transform: scale(40);
|
||||
transition: opacity .1s,
|
||||
transform .4s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Inner wrapper
|
||||
*/
|
||||
&__inner {
|
||||
padding: 0.8rem 0.8rem 0;
|
||||
|
||||
/* [tablet +]: Header-embedded search */
|
||||
@include break-from-device(tablet) {
|
||||
padding: 0.4rem;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Search form
|
||||
*/
|
||||
&__form {
|
||||
position: relative;
|
||||
text-align: right;
|
||||
border-radius: px2rem(2px);
|
||||
|
||||
/* [mobile -]: Add drop-shadow on mobile */
|
||||
@include break-to-device(mobile) {
|
||||
@include z-depth(2);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Icon
|
||||
*/
|
||||
&__icon {
|
||||
position: absolute;
|
||||
top: 0.8rem;
|
||||
left: 1.2rem;
|
||||
font-size: 2.4rem;
|
||||
transition: color .25s;
|
||||
cursor: pointer;
|
||||
|
||||
|
||||
/* [mobile -]: Use back arrow as search icon */
|
||||
@include break-to-device(mobile) {
|
||||
top: 1.2rem;
|
||||
|
||||
/* Hack: @extend doesn't work in media queries, so override manually */
|
||||
&:before {
|
||||
content: "arrow_back";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
* Search field
|
||||
*/
|
||||
&__input {
|
||||
padding: 0 0.8rem 0 6.4rem;
|
||||
border-radius: px2rem(2px);
|
||||
|
||||
/*
|
||||
* Placeholder and icon color in active state
|
||||
*/
|
||||
+ .md-search__icon,
|
||||
&::placeholder {
|
||||
color: $md-color-black--light;
|
||||
}
|
||||
|
||||
/* [mobile -]: Full-screen search bar */
|
||||
@include break-to-device(mobile) {
|
||||
width: 100%;
|
||||
height: 4.8rem;
|
||||
font-size: 1.8rem;
|
||||
}
|
||||
|
||||
/* [tablet +]: Header-embedded search */
|
||||
@include break-from-device(tablet) {
|
||||
width: 23.0rem;
|
||||
height: 4.0rem;
|
||||
padding-left: 4.8rem;
|
||||
font-size: ms(0);
|
||||
background: $md-color-white--lightest;
|
||||
color: $md-color-white;
|
||||
transition: color .25s,
|
||||
background-color .25s,
|
||||
width .25s cubic-bezier(0.1, 0.7, 0.1, 1.0);
|
||||
|
||||
/*
|
||||
* Placeholder color
|
||||
*/
|
||||
+ .md-search__icon,
|
||||
&::placeholder {
|
||||
color: $md-color-white;
|
||||
transition: color .25s;
|
||||
}
|
||||
|
||||
/*
|
||||
* Active search field
|
||||
*/
|
||||
&:focus {
|
||||
background: $md-color-white;
|
||||
color: $md-color-black;
|
||||
width: 40.0rem;
|
||||
|
||||
/*
|
||||
* Placeholder and icon color in active state
|
||||
*/
|
||||
+ .md-search__icon,
|
||||
&::placeholder {
|
||||
color: $md-color-black--light;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -100,7 +100,7 @@
|
||||
|
||||
/* [screen small +]: Limit to grid */
|
||||
@include break-from-device(screen small) {
|
||||
margin-left: 120rem;
|
||||
margin-left: 120.0rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -114,7 +114,7 @@
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
/* [tablet landscape +]: Adjust margins */
|
||||
/* [tablet landscape -]: Adjust margins */
|
||||
@include break-to-device(tablet landscape) {
|
||||
|
||||
/*
|
||||
|
||||
@ -61,31 +61,17 @@
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
<!-- Configure icons (placed here to omit issues with subdirectories) -->
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: "Icon";
|
||||
src: url({{ base_url }}/assets/fonts/icon.eot?52m981);
|
||||
src: url({{ base_url }}/assets/fonts/icon.eot?#iefix52m981)
|
||||
format("embedded-opentype"),
|
||||
url({{ base_url }}/assets/fonts/icon.woff?52m981)
|
||||
format("woff"),
|
||||
url({{ base_url }}/assets/fonts/icon.ttf?52m981)
|
||||
format("truetype"),
|
||||
url({{ base_url }}/assets/fonts/icon.svg?52m981#icon)
|
||||
format("svg");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Theme-related stylesheets -->
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="{{ base_url }}/assets/stylesheets/application.css" />
|
||||
|
||||
<!-- Web fonts -->
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="//fonts.googleapis.com/css?family=Roboto+300,400,700|Roboto+Mono" />
|
||||
href="https://fonts.googleapis.com/css?family=Roboto:300,400,700" />
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" />
|
||||
<link rel="stylesheet" type="text/css"
|
||||
href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
|
||||
<!-- Custom stylesheets -->
|
||||
{% for path in extra_css %}
|
||||
|
||||
@ -40,19 +40,33 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Button to open search -->
|
||||
<div class="md-flex__cell md-flex__cell--shrink">
|
||||
<!-- Button to open search dialogue -->
|
||||
<div class="md-flex__cell md-flex__cell--shrink md-search">
|
||||
<label class="md-icon md-icon--search md-header-nav__icon"
|
||||
for="md-toggle-search"></label>
|
||||
<div class="md-header-search">
|
||||
<form class="md-header-search__form">
|
||||
<input type="text" class="md-header-search__input"
|
||||
<div class="md-search__overlay"></div>
|
||||
<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="md-search" />
|
||||
<label class="md-icon md-icon--search md-header-search__icon"
|
||||
<label class="md-icon md-icon--search md-search__icon"
|
||||
for="md-search"></label>
|
||||
<div class="md-header-search__suggest">
|
||||
|
||||
<div class="md-search__suggest">
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
FOO<br />
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
@ -69,4 +83,14 @@
|
||||
</div> -->
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Search dialogue -->
|
||||
<nav class="md-header-search">
|
||||
|
||||
</nav>
|
||||
|
||||
<!--
|
||||
FOO
|
||||
|
||||
-->
|
||||
</header>
|
||||
Loading…
Reference in New Issue
Block a user