.mdl-components {
display: -webkit-flex; display: -ms-flexbox; display: flex
}
.mdl-components-index {
box-sizing: border-box; position: relative; padding-top: 64px
}
.mdl-components-index-text {
max-width: 960px; margin: 0
}
.mdl-components-index-text .mdl-components-dl {
-webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; margin-left: 40px
}
.mdl-components-img {
position: absolute; margin-top: 24px; left: 40px; height: 90%; width: 90%; max-height: 600px; background: url('../assets/compindex_2x.png') no-repeat top left/contain
}
.mdl-components-text {
margin: 0; padding: 0
}
mdl-components-dl {
padding: .5em; width: 80%
}
mdl-components-dt {
float: left; clear: left; width: 150px; font-weight: 700
}
mdl-components-dd {
margin: 0 0 0 150px; padding: 0 0 .5em
}
.mdl-components .mdl-components__nav {
display: inline-block; background: #fff; width: 200px; box-sizing: border-box; padding: 24px 0; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; z-index: 1
}
.mdl-components .mdl-components__pages {
display: inline-block; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; padding-bottom: 120px
}
.mdl-components .mdl-components__link {
margin: 16px; font-weight: 400; color: rgba(0, 0, 0, .66); position: relative; padding-left: 72px; min-height: 48px; display: table; line-height: 48px
}
.mdl-components .mdl-components__link.is-active {
font-weight: 700; color: #98040C
}
.content {
background: #fafafa
}
.mdl-components .mdl-components__page {
display: none; min-height: 1000px
}
.mdl-components .docs-toc, .mdl-components .component-title {
margin-bottom: 60px; margin-left: 32px
}
.mdl-components .component-title {
margin-top: 30px
}
.mdl-components .component-title h3 {
font-size: 16px; font-weight: 500; margin-top: 80px; text-transform: uppercase
}
.mdl-components .snippet-code pre.language-markup code {
padding-left: 40px
}
.mdl-components .mdl-components__page.is-active {
display: block
}
.mdl-components__link-image {
display: inline-block; margin: 0 10px; position: absolute; left: 0; top: 0; background-color: #ddd; background-position: center; background-repeat: no-repeat; background-size: auto 48px; border-radius: 50%; height: 46px; width: 46px
}
.mdl-components__warning {
width: 100%; max-width: 640px; margin: 0 auto; background-color: #FFF9C4; padding: 16px; border-radius: 2px; color: #212121
}
.mdl-components__link.is-active .mdl-components__link-image {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .14), 0 3px 3px -2px rgba(0, 0, 0, .2), 0 1px 8px 0 rgba(0, 0, 0, .12)
}
.docs-readme {
width: 100%; max-width: 640px; margin: 0 auto
}
.docs-readme .language-markup {
width: 100%
}
@media (max-width: 850px) {
.mdl-components .component-title, .mdl-components .docs-toc { margin-left: 0 }
.mdl-components .snippet-code pre.language-markup code { padding-left: 8px }
.docs-layout-content { position: relative; height: 100%; overflow: hidden !important }
.mdl-components .mdl-components__nav { position: fixed; top: 64px; left: 0; display: block; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; width: 100%; height: 120px; overflow-x: auto; overflow-y: hidden; padding: 8px; z-index: 100; white-space: nowrap }
.mdl-components-index-text .mdl-components-dl { margin: 0 }
.mdl-components-img { left: 8px }
.components .content .about-panel { padding: 8px }
.mdl-components__nav .mdl-components__link { display: inline-block; vertical-align: top; height: 100%; width: auto; min-width: 48px; margin: 0 8px 0 0; padding-left: 0; padding-top: 10px }
.mdl-components__nav .mdl-components__link > * { display: block; width: auto; margin: 0 auto; text-align: center }
.mdl-components__nav .mdl-components__link > .mdl-components__link-image { position: static; width: 48px }
.content { padding-top: 64px !important; padding-left: 0 !important; overflow-y: auto; height: 100% }
}