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

Added search bar to screen header

Browse Source
This commit is contained in:
squidfunk 2016-08-08 23:33:06 +02:00
parent 7f2444174f
commit c534800ab9
14 changed files with 1959 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1818
material/assets/javascripts/modernizr-30b4746408.js Normal file
View File

File diff suppressed because it is too large Load Diff

1
material/assets/javascripts/modernizr-d1e05123d4.js
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-cbf902c7ca.css Normal file
View File

File diff suppressed because one or more lines are too long

1
material/assets/stylesheets/application-fe75383308.css
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

4
material/base.html
View File

@ -41,12 +41,12 @@
font-style: normal;
}
</style>
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-fe75383308.css">
<link rel="stylesheet" href="{{ base_url }}/assets/stylesheets/application-cbf902c7ca.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+300,400,700|Roboto+Mono">
{% 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-30b4746408.js"></script>
</head>
<body>
<input class="md-toggle" type="checkbox" id="md-toggle-drawer">

4
material/header.html
View File

@ -11,6 +11,10 @@
</div>
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--search md-header-nav__icon" for="md-toggle-search"></label>
<div class="md-header-search">
<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>
</div>
</div>
</nav>

4
material/manifest.json
View File

@ -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-fe75383308.css"
"assets/javascripts/modernizr.js": "assets/javascripts/modernizr-30b4746408.js",
"assets/stylesheets/application.css": "assets/stylesheets/application-cbf902c7ca.css"
}

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

@ -101,10 +101,10 @@ pre, code {
* 2nd level headline
*/
h2 {
margin-top: 4.0rem;
font-size: ms(2);
font-weight: 300;
line-height: 1.4;
margin-top: 4.0rem;
letter-spacing: -.01em;
/*
@ -122,10 +122,10 @@ pre, code {
* 3rd level headline
*/
h3 {
margin-top: 3.2rem;
font-size: ms(1);
font-weight: 400;
line-height: 1.5;
margin-top: 3.2rem;
letter-spacing: -.01em;
/*
@ -150,17 +150,15 @@ pre, code {
* 4th, 5th and 6th level headline
*/
h4 {
margin-top: 1.6rem;
font-size: ms(0);
font-weight: 700;
margin-top: 1.6rem;
letter-spacing: -.01em;
/*
* Correct anchor offset
*/
&:before {
position: relative;
z-index: -4;
content: " ";
display: block;
padding-top: (5.6rem + 2.4rem + 0.8rem);
@ -172,9 +170,9 @@ pre, code {
* 5th and 6th level headline
*/
h5, h6 {
margin-top: 1.6rem;
font-size: ms(-1);
font-weight: 700;
margin-top: 1.6rem;
letter-spacing: -.01em;
color: $md-color-black--light;
@ -182,8 +180,6 @@ pre, code {
* Correct anchor offset
*/
&:before {
position: relative;
z-index: -5;
content: " ";
display: block;
padding-top: (5.6rem + 2.4rem + 1.0rem);
@ -218,24 +214,24 @@ pre, code {
* Inline code blocks
*/
code {
padding: 0.1rem 0.4rem;
font-size: 85%;
font-weight: 400;
word-break: break-word;
padding: 0.1rem 0.4rem;
background: #f7f7f7;
color: #37474f;
background: #F7F7F7;
color: #37474F;
}
/*
* Formatted code blocks
*/
pre {
font-size: 85%;
line-height: 1.4;
padding: 1.0rem 1.2rem;
overflow-x: scroll;
background: #f7f7f7;
color: #37474f;
font-size: 85%;
line-height: 1.4;
background: #F7F7F7;
color: #37474F;
}
/*
@ -243,13 +239,13 @@ pre, code {
*/
kbd {
display: inline-block;
padding: 0.4rem 0.5rem 0.5rem;
vertical-align: 0.1rem;
font-size: 85%;
line-height: 1.0rem;
word-break: break-word;
padding: 0.4rem 0.5rem 0.5rem;
vertical-align: 0.1rem;
color: #555;
background-color: #FCFCFC;
color: #555555;
border: px2rem(1px) solid #CCCCCC;
border-bottom-color: #BBBBBB;
border-radius: px2rem(3px);

70
src/assets/stylesheets/extensions/_codehilite.scss
View File

@ -33,7 +33,7 @@
/*
* Errors
*/
.err { color: #a61717; }
.err { color: #A61717; }
/*
* Operators
@ -44,24 +44,24 @@
* Generics
*/
.ge { color: #000000; } /* Generic.Emph */
.gr { color: #aa0000; } /* Generic.Error */
.gr { color: #AA0000; } /* Generic.Error */
.gh { color: #999999; } /* Generic.Heading */
.go { color: #888888; } /* Generic.Output */
.gp { color: #555555; } /* Generic.Prompt */
.gs { color: inherit; } /* Generic.Strong */
.gu { color: #aaaaaa; } /* Generic.Subheading */
.gt { color: #aa0000; } /* Generic.Traceback */
.gu { color: #AAAAAA; } /* Generic.Subheading */
.gt { color: #AA0000; } /* Generic.Traceback */
/*
* Keywords
*/
.k { color: #a71d5d; } /* Keyword */
.kc { color: #a71d5d; } /* Keyword.Constant */
.kd { color: #a71d5d; } /* Keyword.Declaration */
.kn { color: #a71d5d; } /* Keyword.Namespace */
.kp { color: #a71d5d; } /* Keyword.Pseudo */
.kr { color: #0086b3; } /* Keyword.Reserved */
.kt { color: #0086b3; } /* Keyword.Type */
.k { color: #A71D5D; } /* Keyword */
.kc { color: #A71D5D; } /* Keyword.Constant */
.kd { color: #A71D5D; } /* Keyword.Declaration */
.kn { color: #A71D5D; } /* Keyword.Namespace */
.kp { color: #A71D5D; } /* Keyword.Pseudo */
.kr { color: #0086B3; } /* Keyword.Reserved */
.kt { color: #0086B3; } /* Keyword.Type */
/*
* Comments
@ -75,34 +75,34 @@
/*
* Names
*/
.na { color: #795da3; } /* Name.Attribute */
.na { color: #795da3; } /* Name.Attribute */
.nb { color: #795da3; } /* Name.Builtin */
.bp { color: #795da3; } /* Name.Builtin.Pseudo */
.nc { color: #795da3; } /* Name.Class */
.no { color: #795da3; } /* Name.Constant */
.nd { color: #795da3; } /* Name.Decorator */
.ni { color: #795da3; } /* Name.Entity */
.ne { color: #795da3; } /* Name.Exception */
.nf { color: #795da3; } /* Name.Function */
.nl { color: #795da3; } /* Name.Label */
.nn { color: #795da3; } /* Name.Namespace */
.nt { color: #795da3; } /* Name.Tag */
.nv { color: #795da3; } /* Name.Variable */
.vc { color: #795da3; } /* Name.Variable.Class */
.vg { color: #795da3; } /* Name.Variable.Global */
.vi { color: #795da3; } /* Name.Variable.Instance */
.na { color: #795DA3; } /* Name.Attribute */
.na { color: #795DA3; } /* Name.Attribute */
.nb { color: #795DA3; } /* Name.Builtin */
.bp { color: #795DA3; } /* Name.Builtin.Pseudo */
.nc { color: #795DA3; } /* Name.Class */
.no { color: #795DA3; } /* Name.Constant */
.nd { color: #795DA3; } /* Name.Decorator */
.ni { color: #795DA3; } /* Name.Entity */
.ne { color: #795DA3; } /* Name.Exception */
.nf { color: #795DA3; } /* Name.Function */
.nl { color: #795DA3; } /* Name.Label */
.nn { color: #795DA3; } /* Name.Namespace */
.nt { color: #795DA3; } /* Name.Tag */
.nv { color: #795DA3; } /* Name.Variable */
.vc { color: #795DA3; } /* Name.Variable.Class */
.vg { color: #795DA3; } /* Name.Variable.Global */
.vi { color: #795DA3; } /* Name.Variable.Instance */
.ow { color: inherit; } /* Operator.Word */
/*
* Numbers
*/
.m { color: #0086b3; } /* Literal.Number */
.mf { color: #0086b3; } /* Literal.Number.Float */
.mh { color: #0086b3; } /* Literal.Number.Hex */
.mi { color: #0086b3; } /* Literal.Number.Integer */
.mo { color: #0086b3; } /* Literal.Number.Oct */
.il { color: #0086b3; } /* Literal.Number.Integer.Long */
.m { color: #0086B3; } /* Literal.Number */
.mf { color: #0086B3; } /* Literal.Number.Float */
.mh { color: #0086B3; } /* Literal.Number.Hex */
.mi { color: #0086B3; } /* Literal.Number.Integer */
.mo { color: #0086B3; } /* Literal.Number.Oct */
.il { color: #0086B3; } /* Literal.Number.Integer.Long */
/*
* Strings
@ -117,7 +117,7 @@
.si { color: #183691; } /* Literal.String.Interpol */
.sx { color: #183691; } /* Literal.String.Other */
.sr { color: #009926; } /* Literal.String.Regex */
.s1 { color: #d01040; } /* Literal.String.Single */
.s1 { color: #D01040; } /* Literal.String.Single */
.ss { color: #990073; } /* Literal.String.Symbol */
/*

2
src/assets/stylesheets/extensions/_permalinks.scss
View File

@ -44,7 +44,7 @@
}
/*
* Only show permalinks in hover state
* Only show permalinks in active state
*/
h1, h2, h3, h4, h5, h6 {
&:hover .headerlink {

74
src/assets/stylesheets/layout/_header.scss
View File

@ -63,6 +63,17 @@
&:active {
background: $md-color-white--lightest;
}
/* [tablet portrait +]: Hide the search icon */
@include break-from-device(tablet landscape) {
/*
* Search icon
*/
&.md-icon--search {
display: none;
}
}
}
/*
@ -74,4 +85,67 @@
line-height: 4.8rem;
}
}
/*
* Search bar within header
*/
&-search {
position: relative;
margin: 0.6rem 0.4rem 0.6rem 0;
/*
* Icon
*/
&__icon {
position: absolute;
top: 0.6rem;
left: 1.2rem;
font-size: 2.4rem;
transition: color .25s;
cursor: pointer;
}
/*
* Search field - the float is a hack for non-jittery transitions
*/
&__input {
width: 23.0rem;
height: 3.6rem;
padding-left: 4.4rem;
padding-right: 0.8rem;
float: right;
font-size: ms(0);
background: $md-color-primary--dark;
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--light;
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
src/assets/stylesheets/layout/_search.scss Normal file
View File

7
src/header.html
View File

@ -44,6 +44,13 @@
<div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--search md-header-nav__icon"
for="md-toggle-search"></label>
<div class="md-header-search">
<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>
</div>
<!-- Link to GitHub profile -->