snap.js/dist/css/main.css

509 lines
197 KiB
CSS
Raw Normal View History

2013-09-02 04:26:51 +00:00
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 0.2s ease-out;
-webkit-transition: all 0.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 */
#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 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: 0.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(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjMsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgWw0KCTwhRU5USVRZIG5zX2V4dGVuZCAiaHR0cDovL25zLmFkb2JlLmNvbS9FeHRlbnNpYmlsaXR5LzEuMC8iPg0KCTwhRU5USVRZIG5zX2FpICJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlSWxsdXN0cmF0b3IvMTAuMC8iPg0KCTwhRU5USVRZIG5zX2dyYXBocyAiaHR0cDovL25zLmFkb2JlLmNvbS9HcmFwaHMvMS4wLyI+DQoJPCFFTlRJVFkgbnNfdmFycyAiaHR0cDovL25zLmFkb2JlLmNvbS9WYXJpYWJsZXMvMS4wLyI+DQoJPCFFTlRJVFkgbnNfaW1yZXAgImh0dHA6Ly9ucy5hZG9iZS5jb20vSW1hZ2VSZXBsYWNlbWVudC8xLjAvIj4NCgk8IUVOVElUWSBuc19zZncgImh0dHA6Ly9ucy5hZG9iZS5jb20vU2F2ZUZvcldlYi8xLjAvIj4NCgk8IUVOVElUWSBuc19jdXN0b20gImh0dHA6Ly9ucy5hZG9iZS5jb20vR2VuZXJpY0N1c3RvbU5hbWVzcGFjZS8xLjAvIj4NCgk8IUVOVElUWSBuc19hZG9iZV94cGF0aCAiaHR0cDovL25zLmFkb2JlLmNvbS9YUGF0aC8xLjAvIj4NCl0+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zOng9IiZuc19leHRlbmQ7IiB4bWxuczppPSImbnNfYWk7IiB4bWxuczpncmFwaD0iJm5zX2dyYXBoczsiDQoJIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iNDBweCIgaGVpZ2h0PSI0MHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDAgNDAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQwIDQwIiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxzd2l0Y2g+DQoJPGZvcmVpZ25PYmplY3QgcmVxdWlyZWRFeHRlbnNpb25zPSImbnNfYWk7IiB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIj4NCgkJPGk6cGdmUmVmICB4bGluazpocmVmPSIjYWRvYmVfaWxsdXN0cmF0b3JfcGdmIj4NCgkJPC9pOnBnZlJlZj4NCgk8L2ZvcmVpZ25PYmplY3Q+DQoJPGcgaTpleHRyYW5lb3VzPSJzZWxmIj4NCgkJPGcgb3BhY2l0eT0iMC43Ij4NCgkJCTxnIG9wYWNpdHk9IjAuNzUiPg0KCQkJCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjRkZGRkZGIiBkPSJNMzksMTF2LTFjMC0xLjQ3LTAuNDgtMi0yLTJIM2MtMS41MywwLTIsMC41Mi0yLDJ2MQ0KCQkJCQljMCwxLjU1LDAuNTIsMiwyLDJoMzRDMzguNSwxMywzOSwxMi41MiwzOSwxMXoiLz4NCgkJCTwvZz4NCgkJCTxnPg0KCQkJCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzksMTBWOWMwLTEuNDctMC40OC0yLTItMkgzQzEuNDcsNywxLDcuNTIsMSw5djFjMCwxLjU1LDAuNTIsMiwyLDJoMzQNCgkJCQkJQzM4LjUsMTIsMzksMTEuNTIsMzksMTB6Ii8+DQoJCQk8L2c+DQoJCTwvZz4NCgkJPGcgb3BhY2l0eT0iMC43Ij4NCgkJCTxnIG9wYWNpdHk9IjAuNzUiPg0KCQkJCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBmaWxsPSIjRkZGRkZGIiBkPSJNMzksMjJ2LTFjMC0xLjQ3LTAuNDgtMi0yLTJIM2MtMS41MywwLTIsMC41Mi0yLDJ2MQ0KCQkJCQljMCwxLjU1LDAuNTIsMiwyLDJoMzRDMzguNSwyNCwzOSwyMy41MiwzOSwyMnoiLz4NCgkJCTwvZz4NCgkJCTxnPg0KCQkJCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzksMjF2LTFjMC0xLjQ3LTAuNDgtMi0yLTJIM2MtMS41MywwLTIsMC41Mi0yLDJ2MWMwLDEuNTUsMC41MiwyLDIsMmgzNA0KCQkJCQlDMzguNSwyMywzOSwyMi41MiwzOSwyMXoiLz4NCgkJCTwvZz4NCgkJPC9nPg0KCQk8ZyBvcGFjaXR5PSIwLjciPg0KCQkJPGcgb3BhY2l0eT0iMC43NSI+DQoJCQkJPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGZpbGw9IiNGRkZGRkYiIGQ9Ik0zOSwzM3YtMWMwLTEuNDcxLTAuNDgtMi0yLTJIM2MtMS41MywwLTIsMC41Mi0yLDJ2MQ0KCQkJCQljMCwxLjU1LDAuNTIsMiwyLDJoMzRDMzguNSwzNSwzOSwzNC41MiwzOSwzM3oiLz4NCgkJCTwvZz4NCgkJCTxnPg0KCQkJCTxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMzksMzJ2LTFjMC0xLjQ3MS0wLjQ4LTItMi0ySDNjLTEuNTMsMC0yLDAuNTItMiwydjFjMCwxLjU1LDAuNTIsMiwyLDJoMzQNCgkJCQkJQzM4LjUsMzQsMzksMzMuNTIsMzksMzJ6Ii8+DQoJCQk8L2c+DQoJCTwvZz4NCgk8L2c+DQo8L3N3aXRjaD4NCjxpOnBnZiAgaWQ9ImFkb2JlX2lsbHVzdHJhdG9yX3BnZiI+DQoJPCFbQ0RBVEFbDQoJZUp6c3ZlbVNKTG1SSnZnRTlnNitQMXFFSEprS0dnQ0RBY1lkV1pId09IbzRRM2FYa094anBXV2tKSmtWVGVaMEhpVlpXZVJ5bjM3MQorMVFWZ0xsN1pFVWVSVksySzFDVkVhNE9nNW5oVU9qeHFlTHYvbzh2Zi9QRjlkZHZmdmZ3UmJxYUQ5UGYvZDNOMjRkbjc5NjgvZm1CCjFNTXZYcjc4N3R0M2IwSDZ5YTkvZWdqcjFTeVZybjlSdjdLSy8venc5dHNYYjE3L25GOWRKZm55SGxmLzVCZmZQdnZkdzh1WEQ0ZGYKUG52OTlicy9QSHY1OFBhbmg1LzhWTDcvN1l0M0x4K2t4aCtldmZyZGQyOS8vL0QyNnRzLy92Nm5mbXRwNi9iWk8vbCsrVm44V1VpSAorUE01SHI3OEZiNSs5dnFQejc3OTlzWC8rNENicFlwN0hkOTg5L3JyRjY5L2Yzenovd2p4OEVYS2g3UWR2aWp5MVg5LzhldUhiOS96Ci9lMmI1OSs5ZW5qOTdzdTNiNTQvZlB2dHpadVhiOTUrKy9QRHpaK2Z2VDc4NnRudjVadG5oLzliM3VETm53N0hsOCtlLzhja2I1Mi8KdW4veDhrRmU4Tld6ZDRjUTBSZlh2d2p4cStOM
-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 */
#content {
width: 100%;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
}
/* Code */
#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;
}
/* Side Nav */
#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: none;
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;
}
/* Side Nav */
#sideNav {
background: transparent;
width: 220px;
z-index: 20;
left: 10px;
top: 150px;
height: auto;
}
#sideNav nav.site {
display: none;
}
#sideNav .combo {
border-bottom: none;
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: none;
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;
width: 48%;
vertical-align: top;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
section.code div:first-child {
padding-right: 5px;
}
section.code div:last-child {
padding-left: 5px;
}
.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;
}
}