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; font-style: normal;
} }
</style> </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"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto+300,400,700|Roboto+Mono">
{% for path in extra_css %} {% for path in extra_css %}
<link rel="stylesheet" href="{{ path }}"> <link rel="stylesheet" href="{{ path }}">
{% endfor %} {% endfor %}
<script src="{{ base_url }}/assets/javascripts/modernizr-d1e05123d4.js"></script> <script src="{{ base_url }}/assets/javascripts/modernizr-30b4746408.js"></script>
</head> </head>
<body> <body>
<input class="md-toggle" type="checkbox" id="md-toggle-drawer"> <input class="md-toggle" type="checkbox" id="md-toggle-drawer">

4
material/header.html
View File

@ -11,6 +11,10 @@
</div> </div>
<div class="md-flex__cell md-flex__cell--shrink"> <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> <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>
</div> </div>
</nav> </nav>

4
material/manifest.json
View File

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

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

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

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

@ -63,6 +63,17 @@
&:active { &:active {
background: $md-color-white--lightest; 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; 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"> <div class="md-flex__cell md-flex__cell--shrink">
<label class="md-icon md-icon--search md-header-nav__icon" <label class="md-icon md-icon--search md-header-nav__icon"
for="md-toggle-search"></label> 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>
<!-- Link to GitHub profile --> <!-- Link to GitHub profile -->