-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathindex.jade
93 lines (93 loc) · 19 KB
/
index.jade
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
- var tint = 'light';
- if(document.source.indexOf('dark') > 0){
- tint = 'dark';
- }
!!! 5
html
head
meta(charset = 'utf-8')
meta('http-equiv' = 'X-UA-Compatible', content = 'IE=edge,chrome=1')
title Topcoat
meta(name="viewport", content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0")
style.
html,body{margin:0;padding:0;height:100%}body{font-family:source-sans-pro,sans-serif;position:relative;-webkit-font-smoothing:antialiased}body.light{background:#f4f4f4}body.dark{color:#f0f1f1;background:#4a4d4e}body.light{color:#181919}h1{font-weight:600}#wrapper{width:100%;overflow-x:hidden;background:inherit;position:relative}#site{width:100%;position:relative;z-index:10;background:inherit;left:0;transition:all .2s ease-out;-webkit-transition:all .2s ease-out;transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}#site:before{position:absolute;content:'';left:-4px;height:100%;width:4px;background:#3b3e3e}#site.open{transform:translate3d(250px,0,0);-webkit-transform:translate3d(250px,0,0)}pre{font-family:source-code-pro,sans-serif;font-size:12px}#main-header{color:#373435;background:#fff;height:98px;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px 20px;position:relative}#main-header hgroup{text-align:center}#main-header hgroup h1{font-size:40px;margin:5px 0 0;letter-spacing:-.065em;line-height:1.1em}#main-header hgroup a{color:#464646;text-decoration:none}#main-header hgroup a:hover{color:#000}#main-header hgroup p{font-size:13px;color:#999;margin:0}#main-header nav{display:none}#slide-menu-button{position:absolute;top:20px;left:20px;display:inline-block;vertical-align:top;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;-webkit-background-clip:padding;-moz-background-clip:padding;background-clip:padding-box;padding:0;margin:0;font:inherit;color:inherit;background:transparent;cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:0 .5rem;line-height:2rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:baseline;-webkit-box-shadow:inset 0 1px #fff;box-shadow:inset 0 1px #fff;-webkit-border-radius:3px;border-radius:3px;width:2.6rem;height:2.6rem;line-height:2.6rem;border:1px solid transparent;-webkit-box-shadow:none;box-shadow:none}#slide-menu:disabled,#slide-menu.is-disabled{opacity:.3;cursor:default;pointer-events:none}#slide-menu-button:active,#slide-menu-button.is-active{color:#454545;text-shadow:0 1px #fff;background-color:#d3d7d7;border:1px solid #a5a8a8;-webkit-box-shadow:inset 0 1px rgba(0,0,0,0.12);box-shadow:inset 0 1px rgba(0,0,0,0.12)}#slide-menu-button span{background-repeat:no-repeat;background-image:url('img/listview_icon.svg');-webkit-background-size:cover;-moz-background-size:cover;background-size:cover;position:relative;display:inline-block;vertical-align:top;overflow:hidden;vertical-align:middle;width:1.3rem;height:1.3rem}#download-btn{display:none}#content{width:100%;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px}#content section.code{display:none;background:#FFF;border:1px solid #e0e0e0;-moz-box-sizing:border-box;box-sizing:border-box;padding:15px;font-size:12px;-moz-border-radius:1px;-webkit-border-radius:1px;border-radius:1px;font-weight:400}article.component{padding:0 0 10px}#content section.code h3{margin:0;font-size:12px;color:#000;font-weight:400}#content header h2{font-weight:300;margin:10px 0 25px;font-size:20px;position:relative;display:inline-block;padding-right:10px}body.light #content header h2{background:#f4f4f4}body.dark #content header h2{background:#4a4d4e}#content header{position:relative}#content header:before{content:'';width:100%;display:block;position:absolute;left:0;top:23px}body.light #content header:before{border-bottom:1px solid #e0e0e0}body.dark #content header:before{border-bottom:1px solid #58595a}#content pre{padding:0;margin:2px 0 10px}.showcode{margin:10px 0}.showcode a,section.examples a{color:#288edf;text-decoration:none}.showcode a:hover,section.examples a:hover{text-decoration:underline}section.examples ul{margin:0 0 20px;padding:0 0 0 20px}section.examples h4{margin-bottom:5px}section.examples li{color:#58595a}#sideNav{background:#4a4d4e;position:absolute;width:100%;z-index:1;height:100%;left:0}#sideNav ul{list-style:none;margin:0;padding:0}#sideNav li a{color:#f0f1f1;display:block;height:46px;font-size:16px;-moz-box-sizing:border-box;box-sizing:border-box;padding:12px 0 0 20px;text-decoration:none}#sideNav nav.site,#sideNav .combo{border-bottom:1px solid #58595a;-moz-box-sizing:border-box;box-sizing:border-box;padding:10px;display:block}#pageNav li{border-bottom:1px solid #58595a}iframe.componentframe{width: 100%;height: auto;min-height: 400px;border: none;}@media screen and (min-width:650px){#site.open{transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0)}#main-header nav{display:inline-block;position:absolute;right:0;top:40px}#main-header ul{list-style:none}#main-header nav li{display:inline-block;margin:0 18px}#main-header nav li#download-btn{display:none}#main-header nav li a{text-decoration:none;font-size:20px;color:#7f7f7f}#main-header nav li.selected a{color:#373435}#slide-menu-button{display:none}#main-header hgroup{text-align:left;position:absolute;display:inline-block;top:24px}#main-header hgroup h1{font-size:60px}#main-header hgroup p{font-size:15px}#main-header{color:#373435;background:#fff;height:148px}#content{padding-left:240px}#sideNav{background:transparent;width:220px;z-index:20;left:10px;top:150px;height:auto}#sideNav nav.site{display:none}#sideNav .combo{border-bottom:0;padding:36px 0}#sideNav li a{padding:12px 0 0 10px}body.light #sideNav li a{color:#797b7b}body.light #pageNav li{border-bottom:1px solid #e0e0e0}}@media screen and (min-width:880px){#content{padding-left:300px}#sideNav li a{display:block;height:60px;padding:22px 0 0 10px;text-decoration:none}#content header h2{font-size:28px}#content header:before{top:30px}section.code div{display:inline-block;vertical-align:top;-moz-box-sizing:border-box;box-sizing:border-box}.max-width{max-width:1180px;position:relative;margin:0 auto}header#main-header .max-width{top:-10px}#main-header nav li a{font-size:22px}#main-header nav{display:inline-block}#main-header nav li{margin:0 25px}#main-header nav li:last-child{margin-right:0}}@media screen and (min-width:940px){#main-header nav li#download-btn{display:inline-block}#main-header nav li a#download-btn{position:relative;top:-15px;display:inline-block;box-sizing:border-box;-moz-box-sizing:border-box;background-clip:padding-box;font:inherit;background:transparent;-webkit-user-select:none;-moz-user-select:none;user-select:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;font-size:16px;line-height:3rem;letter-spacing:1px;color:#454545;text-shadow:0 1px #fff;vertical-align:top;background-color:#e5e9e8;box-shadow:inset 0 1px #fff;border:1px solid #a5a8a8;border-radius:6px;margin:0;padding:0 1.25rem}#main-header nav li a#download-btn,#main-header nav li a#download-btn:hover{border:1px solid #143250;background-color:#288edf;box-shadow:inset 0 1px rgba(255,255,255,0.36);color:#fff;font-weight:500;text-shadow:0 -1px rgba(0,0,0,0.36)}#main-header nav li a#download-btn:hover{background-color:#2f9cf3}#main-header nav li a#download-btn:active,#main-header nav li a#download-btn.is-active{background-color:#0380e8;box-shadow:inset 0 1px rgba(0,0,0,0.12)}#main-header nav li a#download-btn:disabled,#main-header nav li a#download-btn.is-disabled{opacity:.3;cursor:default;pointer-events:none}}
pre{word-wrap:break-word;padding:6px 10px;line-height:19px;margin-bottom:20px}pre,code{font-family:source-code-pro,'Source Code Pro',Courier,monospace;color:#535353}pre,pre code{font-size:13px}pre .comment{color:#a2a2a2}pre .support{color:#0086b3}pre .tag,pre .tag-name{color:#446fbd}pre .css-property{color:#8757ad}pre .css-value,pre .support.namespace{color:#f18900}pre .vendor-prefix{color:#535353}pre .constant.numeric,pre .keyword.unit{color:#738d00}pre .hex-color{color:#f18900}pre .entity.class{color:#5585c4}pre .entity.id,pre .entity.function{color:#900}pre .attribute,pre .variable{color:#738d00}pre .string,pre .support.value{color:#8757ad}pre .regexp{color:#535353}
.topdoc-select{padding:0;margin:0;font:inherit;color:inherit;background:transparent;border:0}.topdoc-select{vertical-align:top;outline:0}.topdoc-select{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.topdoc-select{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.topdoc-select{position:relative;display:inline-block;vertical-align:top}.topdoc-select:disabled{opacity:.3;cursor:default;pointer-events:none}.topdoc-select{-moz-appearance:none;-webkit-appearance:none}.topdoc-select::-ms-expand{display:none}.topdoc-select{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;appearance:button;text-indent:.01px;text-overflow:'';padding:.06rem 1.4rem .06rem .4rem;font-size:12px;font-weight:400;height:1.313rem;letter-spacing:0;color:hsla(0,0%,27%,1);text-shadow:0 1px hsla(0,100%,100%,1);border-radius:4px;background-color:hsla(165,8%,91%,1);box-shadow:inset 0 1px hsla(0,100%,100%,1);border:1px solid hsla(168,8%,65%,1);background-image:url('img/dropdown.svg');background-repeat:no-repeat;background-position:center right;min-width:3.4rem}.topdoc-select:hover{background-color:hsla(180,7%,94%,1)}.topdoc-select:active{background-color:hsla(180,5%,83%,1);box-shadow:inset 0 1px hsla(0,0%,0%,0.1)}.topdoc-select:focus{border:1px solid hsla(227,100%,50%,1);box-shadow:0 0 0 2px hsla(208,82%,69%,1);outline:0}.dark .topdoc-select{color:hsla(180,2%,78%,1);text-shadow:0 -1px hsla(0,0%,0%,0.69);background-color:hsla(180,1%,35%,1);box-shadow:inset 0 1px hsla(0,0%,45%,1);border:1px solid hsla(180,1%,20%,1)}.dark .topdoc-select:hover{background-color:hsla(200,2%,39%,1)}.dark .topdoc-select:active{background-color:hsla(210,2%,25%,1);box-shadow:inset 0 1px hsla(0,0%,0%,0.05)}@media screen and (max-width:650px){.topdoc-select{color:hsla(180,2%,78%,1);text-shadow:0 -1px hsla(0,0%,0%,0.69);background-color:hsla(180,1%,35%,1);box-shadow:inset 0 1px hsla(0,0%,45%,1);border:1px solid hsla(180,1%,20%,1);padding:.7rem 1.4rem .7rem 1rem;font-size:16px;height:3rem;letter-spacing:1px;border-radius:6px}.topdoc-select:hover{background-color:hsla(200,2%,39%,1)}.topdoc-select:active{background-color:hsla(210,2%,25%,1);box-shadow:inset 0 1px hsla(0,0%,0%,0.05)}}
- if(project.debug)
link(rel = 'stylesheet', type = 'text/css', href = document.relativeSource)
- else
style.
!{document.minified}
script(type="text/javascript").
window.Rainbow=function(){function G(f){var d,j=f.getAttribute&&f.getAttribute("data-language")||0;if(!j){f=f.attributes;for(d=0;d<f.length;++d){if("data-language"===f[d].nodeName){return f[d].nodeValue}}}return j}function F(f){var d=G(f)||G(f.parentNode);if(!d){var j=/\blang(?:uage)?-(\w+)/;(f=f.className.match(j)||f.parentNode.className.match(j))&&(d=f[1])}return d}function u(f,d){for(var j in O[P]){j=parseInt(j,10);if(f==j&&d==O[P][j]?0:f<=j&&d>=O[P][j]){delete O[P][j],delete N[P][j]}if(f>=j&&f<O[P][j]||d>j&&d<O[P][j]){return !0}}return !1}function E(f,d){return'<span class="'+f.replace(/\./g," ")+(M?" "+M:"")+'">'+d+"</span>"}function i(t,s,r,n){var q=t.exec(r);if(q){++h;!s.name&&"string"==typeof s.matches[0]&&(s.name=s.matches[0],delete s.matches[0]);var j=q[0],p=q.index,v=q[0].length+p,o=function(){function l(){i(t,s,r,n)}h%100>0?l():setTimeout(l,0)};if(u(p,v)){o()}else{var d=g(s.matches),f=function(l,B,w){if(l>=B.length){w(j)}else{var A=q[B[l]];if(A){var y=s.matches[B[l]],z=y.language,x=y.name&&y.matches?y.matches:y,m=function(C,S,Q){var R;R=0;var D;for(D=1;D<B[l];++D){q[D]&&(R=R+q[D].length)}S=Q?E(Q,S):S;j=j.substr(0,R)+j.substr(R).replace(C,S);f(++l,B,w)};z?K(A,z,function(C){m(A,C)}):typeof y==="string"?m(A,A,y):e(A,x.length?x:[x],function(C){m(A,C,y.matches?y.name:0)})}else{f(++l,B,w)}}};f(0,d,function(l){s.name&&(l=E(s.name,l));if(!N[P]){N[P]={};O[P]={}}N[P][p]={replace:q[0],"with":l};O[P][p]=v;o()})}}else{n()}}function g(f){var d=[],j;for(j in f){f.hasOwnProperty(j)&&d.push(j)}return d.sort(function(m,l){return l-m})}function e(f,d,l){function j(m,n){n<m.length?i(m[n].pattern,m[n],f,function(){j(m,++n)}):k(f,function(o){delete N[P];delete O[P];--P;l(o)})}++P;j(d,0)}function k(f,d){function l(o,m,p,r){if(p<m.length){++c;var q=m[p],n=N[P][q],o=o.substr(0,q)+o.substr(q).replace(n.replace,n["with"]),q=function(){l(o,m,++p,r)};0<c%250?q():setTimeout(q,0)}else{r(o)}}var j=g(N[P]);l(f,j,0,d)}function K(j,f,n){var m=L[f]||[],l=L[b]||[],f=a[f]?m:m.concat(l);e(j.replace(/</g,"<").replace(/>/g,">").replace(/&(?![\w\#]+;)/g,"&"),f,n)}function J(j,f,n){if(f<j.length){var m=j[f],l=F(m);return !(-1<(" "+m.className+" ").indexOf(" rainbow "))&&l?(l=l.toLowerCase(),m.className+=m.className?" rainbow":"rainbow",K(m.innerHTML,l,function(d){m.innerHTML=d;N={};O={};H&&H(m,l);setTimeout(function(){J(j,++f,n)},0)})):J(j,++f,n)}n&&n()}function I(l,j){var l=l&&"function"==typeof l.getElementsByTagName?l:document,q=l.getElementsByTagName("pre"),p=l.getElementsByTagName("code"),o,n=[],m=[];for(o=0;o<q.length;++o){q[o].getElementsByTagName("code").length?q[o].innerHTML=q[o].innerHTML.replace(/^\s+/,"").replace(/\s+$/,""):n.push(q[o])}for(o=0;o<p.length;++o){m.push(p[o])}J(m.concat(n),0,j)}var N={},O={},L={},a={},P=0,b=0,h=0,c=0,M,H;return{extend:function(f,d,j){1==arguments.length&&(d=f,f=b);a[f]=j;L[f]=d.concat(L[f]||[])},b:function(d){H=d},a:function(d){M=d},color:function(f,d,j){if("string"==typeof f){return K(f,d,j)}if("function"==typeof f){return I(0,f)}I(f,d)}}}();document.addEventListener?document.addEventListener("DOMContentLoaded",Rainbow.color,!1):window.attachEvent("onload",Rainbow.color);Rainbow.onHighlight=Rainbow.b;Rainbow.addClass=Rainbow.a;Rainbow.extend("html",[{name:"source.php.embedded",matches:{2:{language:"php"}},pattern:/<\?=?(?!xml)(php)?([\s\S]*?)(\?>)/gm},{name:"source.css.embedded",matches:{"0":{language:"css"}},pattern:/<style(.*?)>([\s\S]*?)<\/style>/gm},{name:"source.js.embedded",matches:{"0":{language:"javascript"}},pattern:/<script(?! src)(.*?)>([\s\S]*?)<\/script>/gm},{name:"comment.html",pattern:/<\!--[\S\s]*?-->/g},{matches:{1:"support.tag.open",2:"support.tag.close"},pattern:/(<)|(\/?\??>)/g},{name:"support.tag",matches:{1:"support.tag",2:"support.tag.special",3:"support.tag-name"},pattern:/(<\??)(\/|\!?)(\w+)/g},{matches:{1:"support.attribute"},pattern:/([a-z-]+)(?=\=)/gi},{matches:{1:"support.operator",2:"string.quote",3:"string.value",4:"string.quote"},pattern:/(=)('|")(.*?)(\2)/g},{matches:{1:"support.operator",2:"support.value"},pattern:/(=)([a-zA-Z\-0-9]*)\b/g},{matches:{1:"support.attribute"},pattern:/\s(\w+)(?=\s|>)(?![\s\S]*<)/g}],!0);Rainbow.extend("css",[{name:"comment",pattern:/\/\*[\s\S]*?\*\//gm},{name:"constant.hex-color",pattern:/#([a-f0-9]{3}|[a-f0-9]{6})(?=;|\s|,|\))/gi},{matches:{1:"constant.numeric",2:"keyword.unit"},pattern:/(\d+)(px|em|cm|s|%)?/g},{name:"string",pattern:/('|")(.*?)\1/g},{name:"support.css-property",matches:{1:"support.vendor-prefix"},pattern:/(-o-|-moz-|-webkit-|-ms-)?[\w-]+(?=\s?:)(?!.*\{)/g},{matches:{1:[{name:"entity.name.sass",pattern:/&/g},{name:"direct-descendant",pattern:/>/g},{name:"entity.name.class",pattern:/\.[\w\-_]+/g},{name:"entity.name.id",pattern:/\#[\w\-_]+/g},{name:"entity.name.pseudo",pattern:/:[\w\-_]+/g},{name:"entity.name.tag",pattern:/\w+/g}]},pattern:/([\w\ ,:\.\#\&\;\-_]+)(?=.*\{)/g},{matches:{2:"support.vendor-prefix",3:"support.css-value"},pattern:/(:|,)\s*(-o-|-moz-|-webkit-|-ms-)?([a-zA-Z-]*)(?=\b)(?!.*\{)/g},{matches:{1:"support.tag.style",2:[{name:"string",pattern:/('|")(.*?)(\1)/g},{name:"entity.tag.style",pattern:/(\w+)/g}],3:"support.tag.style"},pattern:/(<\/?)(style.*?)(>)/g}],!0);
window.onload=function(){var a=document.getElementsByClassName("showcode");for(var f=a.length-1;f>=0;f--){a[f].firstChild.onclick=function(k){var i=k.target.parentNode.nextSibling.nextSibling;var j=window.getComputedStyle(i);if(j.getPropertyValue("display")=="none"){k.target.innerHTML="Hide code snippets";i.style.display="block"}else{k.target.innerHTML="Show code snippets";i.style.display="none"}return false}}var g=document.getElementById("slide-menu-button");g.onclick=function(k){var j=document.getElementById("site");var i=j.classList;if(i.contains("open")){i.remove("open")}else{i.add("open")}};var b=document.getElementsByClassName("topdoc-select");for(var e=b.length-1;e>=0;e--){b[e].onchange=function(i){window.location.href=i.target[i.target.selectedIndex].value}}var d=document.getElementById("pageNav");var h=d.getElementsByTagName("a");for(var c=h.length-1;c>=0;c--){h[c].onclick=function(k){var j=document.getElementById("site");var i=j.classList;if(i.contains("open")){i.remove("open")}}}};
//if lt IE 9
script(src = '//html5shiv.googlecode.com/svn/trunk/html5.js')
body(class=tint)
#wrapper
.max-width
#sideNav
nav.site: ul
li: a(href="http://www.topcoat.io") Home
-if(templateData && templateData.siteNav)
- each siteNavItem, i in templateData.siteNav
- if(i == 0)
li.selected: a(href=siteNavItem.url)=siteNavItem.text
- else
li: a(href=siteNavItem.url)=siteNavItem.text
div.combo
select.topdoc-select
- each item in nav
- if(item.url == document.url)
option(value=item.url, selected="selected")=item.title
- else
option(value=item.url)=item.title
#pageNav: ul
- each component in document.components
li: a(href='#'+component.slug)=component.name
#site
header#main-header
.max-width
hgroup
h1: a(href="http://topcoat.io") Topcoat
p CSS for clean and fast web apps
nav
ul
-if(templateData && templateData.siteNav)
- each siteNavItem, i in templateData.siteNav
- if(i == 0)
li.selected: a(href=siteNavItem.url)=siteNavItem.text
- else
li: a(href=siteNavItem.url)=siteNavItem.text
- if(templateData && templateData.download)
li: a#download-btn(href=templateData.download.url, onclick="_gaq.push(['_trackEvent', 'download', 'click',,, false]);")=templateData.download.label
a#slide-menu-button.topcoat-icon-button--large--quiet
span.topcoat-icon--large.topcoat-icon--menu-stack
#content.max-width
- each component in document.components
article.component(id=component.slug)
header
h2=component.name
- if(component.iframe)
iframe.componentframe(src=component.filename)
- else
section.component!=component.markup
- if(component.examples)
section.examples
h4 Examples
ul
- each example_url, example_text in component.examples
li: a(href = example_url)!= example_text
footer
div.showcode
a(href="#") Show code snippets
section.code
div
h3 HTML
pre.html
code(data-language="html")=component.markup
//- div
//- h3 CSS
//- pre.css
//- code(data-language="css")=component.css
footer