/
desktop-light.html
106 lines (106 loc) · 21.9 KB
/
desktop-light.html
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Topcoat</title>
<meta name="viewport" content="user-scalable=no,initial-scale = 1.0,maximum-scale = 1.0">
<style>
@font-face{font-family:"Source Sans Pro";src:url('fonts/sourcesanspro-light-webfont.eot');src:url('fonts/sourcesanspro-light-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/sourcesanspro-light-webfont.woff') format('woff'),url('fonts/sourcesanspro-light-webfont.ttf') format('truetype'),url('fonts/sourcesanspro-light-webfont.svg#source_sans_prolight') format('svg');font-weight:300;font-style:normal}@font-face{font-family:"Source Sans Pro";src:url('fonts/sourcesanspro-regular-webfont.eot');src:url('fonts/sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/sourcesanspro-regular-webfont.woff') format('woff'),url('fonts/sourcesanspro-regular-webfont.ttf') format('truetype'),url('fonts/sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg');font-weight:400;font-style:normal}@font-face{font-family:"Source Sans Pro";src:url('fonts/sourcesanspro-semibold-webfont.eot');src:url('fonts/sourcesanspro-semibold-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/sourcesanspro-semibold-webfont.woff') format('woff'),url('fonts/sourcesanspro-semibold-webfont.ttf') format('truetype'),url('fonts/sourcesanspro-semibold-webfont.svg#source_sans_prosemibold') format('svg');font-weight:600;font-style:normal}@font-face{font-family:'source-code-pro';src:url('fonts/sourcecodepro-regular-webfont.eot');src:url('fonts/sourcecodepro-regular-webfont.eot?#iefix') format('embedded-opentype'),url('fonts/sourcecodepro-regular-webfont.woff') format('woff'),url('fonts/sourcecodepro-regular-webfont.ttf') format('truetype'),url('fonts/sourcecodepro-regular-webfont.svg#source_code_proregular') format('svg');font-weight:normal;font-style:normal}
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}
html,body{margin:0;padding:0;height:100%}body{font-family:"Source Sans Pro",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}select.docNav{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;background:#595b5b;background-image:none;box-shadow:0 0 0 1px #303233;border:0;border-top:2px solid #666767;color:#FFF;text-shadow:0 -1px 0 #000;overflow:hidden;font-size:14px;-moz-box-sizing:border-box;box-sizing:border-box;padding:20px;-webkit-appearance:none;-moz-appearance:button}@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}select.docNav{background:#595b5b;box-shadow:0 0 0 1px #303233;border:0;border-top:2px solid #666767;color:#FFF;text-shadow:0 -1px 0 #000;padding:3px 20px 4px 8px;-webkit-appearance:none}body.light select.docNav{box-shadow:0 0 0 1px #949696;background:#dde1e1;border-top:1px solid #FFF;color:#454545;text-shadow:0 -1px 0 #FFF;width:192px}}@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}}
@font-face{font-family:"Source Sans Pro";src:url(../font/SourceSansPro-Regular.otf)}@font-face{font-family:"Source Sans Pro";src:url(../font/SourceSansPro-Light.otf);font-weight:200}@font-face{font-family:"Source Sans Pro";src:url(../font/SourceSansPro-Semibold.otf);font-weight:600}body{font:12px "Source Sans Pro",HelveticaNeue-Light,"Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;font-weight:400;margin:0;padding:0;background:hsla(180,5%,88%,1)}:focus{outline-color:transparent;outline-style:none}input[type=checkbox]{position:absolute;overflow:hidden;padding:0;border:0;opacity:.001;z-index:1;vertical-align:top;outline:0}.topcoat-checkbox,.topcoat-checkbox__checkmark{cursor:default;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.topcoat-checkbox__checkmark,.topcoat-checkbox__checkmark:before{-moz-box-sizing:border-box;box-sizing:border-box;background-clip:padding-box}.topcoat-checkbox,.topcoat-checkbox__checkmark{position:relative;display:inline-block;vertical-align:top}input[type=checkbox]:disabled+.topcoat-checkbox__checkmark{opacity:.3;cursor:default;pointer-events:none}.topcoat-checkbox__checkmark:after,.topcoat-checkbox__checkmark:before{content:'';position:absolute}input[type=checkbox]{height:1rem;width:1rem;margin-top:0;margin-right:-1rem;margin-bottom:-1rem;margin-left:0}input[type=checkbox]:checked+.topcoat-checkbox__checkmark:after{opacity:1}.topcoat-checkbox{line-height:1rem}.topcoat-checkbox__checkmark:before{width:1rem;height:1rem;background:hsla(165,8%,91%,1);border:1px solid hsla(168,8%,65%,1);border-radius:3px;box-shadow:inset 0 1px hsla(0,100%,100%,1)}.topcoat-checkbox__checkmark{width:1rem;height:1rem}.topcoat-checkbox__checkmark:after{top:2px;left:1px;opacity:0;width:14px;height:4px;background:0 0;border:7px solid hsla(0,0%,27%,1);border-width:3px;border-top:0;border-right:0;border-radius:1px;-webkit-transform:rotate(-50deg);transform:rotate(-50deg)}input[type=checkbox]:focus+.topcoat-checkbox__checkmark:before{border:1px solid hsla(227,100%,50%,1);box-shadow:inset 0 1px hsla(0,100%,100%,.36),0 0 0 2px hsla(208,82%,69%,1)}input[type=checkbox]:active+.topcoat-checkbox__checkmark:before{border:1px solid hsla(168,8%,65%,1);background-color:hsla(180,5%,83%,1);box-shadow:inset 0 1px hsla(0,0%,0%,.1)}input[type=checkbox]:disabled:active+.topcoat-checkbox__checkmark:before{border:1px solid hsla(168,8%,65%,1);background:hsla(165,8%,91%,1);box-shadow:inset 0 1px hsla(0,100%,100%,1)}
</style>
<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("docNav");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")}}}};
</script><!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body class="light">
<div id="wrapper">
<div class="max-width">
<div id="sideNav">
<nav class="site">
<ul>
<li><a href="http://topcoat.io">Home</a></li>
</ul>
</nav>
<div class="combo">
<select class="docNav">
<option value="index.html">Desktop Dark</option>
<option value="desktop-light.html" selected="selected">Desktop Light</option>
<option value="mobile-dark.html">Mobile Dark</option>
<option value="mobile-light.html">Mobile Light</option>
</select>
</div>
<div id="pageNav">
<ul>
<li><a href="#checkbox">Checkbox</a></li>
</ul>
</div>
</div>
</div>
<div id="site">
<header id="main-header">
<div class="max-width">
<hgroup>
<h1><a href="http://topcoat.io">Topcoat</a></h1>
<p>CSS for clean and fast web apps</p>
</hgroup>
<nav>
<ul>
</ul>
</nav><a id="slide-menu-button" class="topcoat-icon-button--large--quiet"><span class="topcoat-icon--large topcoat-icon--menu-stack"></span></a>
</div>
</header>
<div id="content" class="max-width">
<article id="checkbox" class="component">
<header>
<h2>Checkbox</h2>
</header>
<section class="component"><label class="topcoat-checkbox"> <input type="checkbox"> <div class="topcoat-checkbox__checkmark"></div> Default</label><br><br><label class="topcoat-checkbox"> <input type="checkbox" disabled> <div class="topcoat-checkbox__checkmark"></div> Disabled</label></section>
<section class="examples">
<h4>Examples</h4>
<ul>
<li><a href="http://codepen.io/Topcoat/pen/piHcs">mobile checkbox</a></li>
</ul>
</section>
<footer>
<div class="showcode"><a href="#">Show code snippets</a></div>
<section class="code">
<div>
<h3>HTML</h3>
<pre class="html"><code data-language="html"><label class="topcoat-checkbox"> <input type="checkbox"> <div class="topcoat-checkbox__checkmark"></div> Default</label><br><br><label class="topcoat-checkbox"> <input type="checkbox" disabled> <div class="topcoat-checkbox__checkmark"></div> Disabled</label></code></pre>
</div>
</section>
</footer>
</article>
</div>
<footer></footer>
</div>
</div>
</body>
</html>