$brand-colour: #0061aa; $nav-header-background-color: $brand-colour; $nav-header-height: 104px; $nav-background-color: f5f5f5; $nav-width: 300px;
input::-ms-clear, input::-ms-reveal {
display: none !important;
}
.docslayout {
height: auto; overflow-x: hidden; background-color: #2B2E31; &.nav-open { overflow: hidden; nav, header > form { display: block; } header { bottom: 0; } } &::before { content: ""; background-color: #fff; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; } @media (min-width: 768px) { padding: 0 0 0 $nav-width; &.nav-open { overflow: auto; } &::after, &::before { content: ""; position: fixed; top: 0; bottom: 0; z-index: -1; } &::after { left: 0; width: $nav-width; background-color: $nav-background-color; } #search-input, &::after { box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.1); } &::before { left: $nav-width; right: 0; background-color: #fff; } }
}
.docsmain {
max-width: 820px; padding: 0 25px 20px; margin: 20px auto 0 auto; ul, ol { padding-bottom: 1em; } pre{ white-space: pre; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background: #404145; border-color: #404145; color: #C1C2C3; padding: 15px; }
}
.docsheader {
$emblem-size: 35px; $emblem-vertical-padding: ($nav-header-height - $emblem-size) / 2; $emblem-horizontal-padding: 20px; position: absolute; @media (min-width: 768px) { position: fixed; overflow: hidden; } top: 0; left: 0; right: 0; overflow-x: hidden; height: 100%; z-index: 1050; background-color: $nav-background-color; ul, ol { padding: 0; margin: 0; } h1 { padding: $emblem-vertical-padding $emblem-horizontal-padding; height: $nav-header-height; box-sizing: border-box; background-color: $brand-colour; color: #fff; margin: 0; font-size: 1.7rem; line-height: 0.8; letter-spacing: 0; font-weight: 600; text-indent: 0; @include display-flex(); @include flex-direction(row); @include align-items(center); border-bottom: 1px solid rgba(0, 0, 0, 0.075); img { height: $emblem-size; width: $emblem-size; margin-right: 15px; } } .open-nav { background-color: transparent; background-repeat: no-repeat; background-size: 100%; width: $emblem-size; height: $emblem-size; border: 0; position: absolute; top: $emblem-vertical-padding; right: $emblem-horizontal-padding; border-radius: 2px; &:focus { outline: none; background-color: rgba(0, 0, 0, 0.05); } &:hover { background-color: rgba(0, 0, 0, 0.1); } } @media (min-width: 768px) { background-color: transparent; width: $nav-width; right: auto; bottom: auto; h1 { box-shadow: inset -10px 0 10px -10px rgba(0, 0, 0, 0.1); } }
}
.content {
position: relative; background-color: #fff; color: #4c4c4c; h3::before { content: ""; margin: 60px 0; }
}
.page-header {
h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -1px; } h2 { font-size: 26px; margin-left: -1px; color: #888; letter-spacing: 0; } h3 { font-size: 54px; margin-left: -4px; } @media (min-width: 768px) { h2 { font-size: 26px; } h3 { font-size: 54px; } }
}
nav > ul {
padding: 10px 0px; & + ul { border-top: 1px solid rgba(0, 0, 0, 0.075); }
}
.nav-item {
display: block; font-family: "Open Sans", sans-serif; line-height: 1; margin: 0; nav:not(.full-navigation) & > ul { display: none; } nav:not(.full-navigation) &.current > ul { display: block; } > a { color: #666; text-decoration: none; font-size: 14px; padding: 10px 0px 10px 40px; display: block; } &.current > a, > a:active, > a:hover { color: #111; } &.top-level > a { line-height: 1.5; font-weight: 600; padding-left: 20px; }
}
.settings-panel-example {
@extend p; @include display-flex(); @include flex-direction(column); .example { max-width: 300px; background-color: #fafafa; margin: 0; padding: 0; font-size: 0; line-height: 1; border-radius: 2px; overflow: hidden; } @media (min-width: 960px) { @include flex-direction(row); .details { @include flex(1); margin-right: 20px; } p + .highlight > pre { margin-bottom: 0; } .example { @include flex(0 0 300px); max-width: 100%; } }
}
.highlight {
margin-left: 0; margin-right: 0; background: none !important; padding: 0 !important;
}
h3 + .warning {
margin-top: 1.75em;
}
h4 code {
background: $nav-background-color; color: #4c4c4c; background-color: transparent; font-weight: 700; padding: 0; font-size: 1.1em; line-height: 1;
}
h4 svg {
vertical-align: middle; margin-right: 6px; position: relative; top: -2px; fill: #2E2E2E; height: 23px;
}
.required {
position: relative;
}
.required::after {
content: "REQUIRED"; font-size: 12px; position: absolute; top: 5px; line-height: 1; color: $brand-colour; padding-left: 5px;
}
search-results {
margin: 0; padding: 0; li { list-style: none; margin: 0; padding: 0; h4 { font-size: 20px; } p { line-height: 1.5; } } li::before { content: "" !important; }
}
search-input {
-webkit-appearance: none; display: block; margin: 0; padding: 10px 20px 10px 15px; width: 100%; box-sizing: border-box; border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.075); border-left: 5px solid transparent; font-size: 15px; font-weight: 600; line-height: 1.8; &:focus { outline: none; border-left-color: $brand-colour; }
}
.changelog {
&, > div { margin: 0; padding: 0; list-style: none; } .date { color: #888; font-style: italic; }
}
.badge {
font-family: "Open Sans", sans-serif; padding: 2px 5px; text-transform: uppercase; font-size: 0.8rem; border-radius: 2px; background: #eee; font-weight: bold; &.major { background: $brand-colour; color: #fff; }
}
blockquote {
border-left: 5px solid #FD0; padding: 10px 15px; margin-right: -10px; background-color: #e6eff7; border-color: $brand-colour; font-size: 16px !important; p:last-child { margin-bottom: 0; }
}
img {
max-width: 100%; height: auto;
}
.editor-link {
display: none; margin-top: 0; .btn { border: 0; border-radius: 2px; width: 100%; max-width: 500px; box-sizing: border-box; font-size: 2rem; text-decoration: none; padding: 10px 15px; margin: 0; font-size: 18px; cursor: pointer; background-color: #f7e064; color: #333; box-shadow: 1px 1px 5px 0 rgba(0, 0, 0, 0.2); &:hover { background-color: #f4d525; color: #333; } }
}
.cms-editor-active .editor-link {
display: block;
}
table {
width: 100%; margin-bottom: 1.75em;
}
tr {
border-bottom: 1px solid #EEE;
}
tr:nth-child(even) {
background: #fcfcfc;
}
td, th {
padding: 8px; text-align: left;
}
th {
padding-bottom: 4px;
}