7
1
mirror of https://gitlab.com/ansol/web-ansol.org.git synced 2024-11-30 01:28:49 +00:00
web-ansol.org/themes/academic/assets/scss/academic/_docs.scss
2020-06-11 12:46:16 +01:00

262 lines
4.3 KiB
SCSS

/*************************************************
* Documentation layout
**************************************************/
.docs-article-container {
max-width: 760px;
}
/* Documentation: article footer. */
.docs .body-footer {
border-top: 1px solid #e8e8e8;
margin-top: 30px;
padding-top: 10px;
font-size: 14px;
color: #707070;
}
/* Docs content. */
.docs-content {
order: 1;
position: relative;
}
.docs-content>h2[id],
.docs-content>h3[id],
.docs-content>h4[id] {
pointer-events: none;
}
.docs-content>ol li,
.docs-content>ul li {
margin-bottom: .25rem;
}
/* Docs search. */
.docs-search {
position: relative;
padding: 1rem 15px;
margin-right: -15px;
margin-left: -15px;
border-bottom: 1px solid rgba(0, 0, 0, .05);
}
.docs-search .form-control:focus {
border-color: $sta-primary;
box-shadow: 0 0 0 3px $sta-primary-light;
}
/* Docs sidebar. */
.docs-sidebar {
order: 0;
border-bottom: 1px solid rgba(0, 0, 0, .1)
}
@media (min-width:768px) {
.docs-sidebar {
border-right: 1px solid rgba(0, 0, 0, .1)
}
@supports ((position:-webkit-sticky) or (position:sticky)) {
.docs-sidebar {
position: -webkit-sticky;
position: sticky;
top: 50px;
z-index: 10;
height: calc(100vh - 50px)
}
}
}
@media (min-width:1200px) {
.docs-sidebar {
border-right: 1px solid rgba(0, 0, 0, .1)
}
@supports ((position:-webkit-sticky) or (position:sticky)) {
.docs-sidebar {
position: -webkit-sticky;
position: sticky;
top: 70px;
z-index: 10;
height: calc(100vh - 70px)
}
}
}
@media (min-width:1200px) {
.docs-sidebar {
flex: 0 1 320px
}
}
/* Docs sidebar li>a. */
.docs-sidebar .nav>li>a {
display: block;
padding: .25rem 1.5rem;
font-size: 0.8rem;
color: rgba(0, 0, 0, .65);
}
.docs-sidebar .nav>li>a:hover {
color: rgba(0, 0, 0, .85);
text-decoration: none;
background-color: transparent;
}
.docs-sidebar .docs-toc-item.active a,
.docs-sidebar .nav>.active:hover>a,
.docs-sidebar .nav>.active>a {
font-weight: bold;
color: $sta-primary;
background-color: transparent;
}
/* Docs links. */
.docs-toggle {
line-height: 1;
font-size: 1.2rem;
color: $sta-primary;
background-color: transparent;
}
.docs-links {
padding-top: 1rem;
padding-bottom: 1rem;
margin-right: -15px;
margin-left: -15px;
}
@media (min-width:768px) {
@supports ((position:-webkit-sticky) or (position:sticky)) {
.docs-links {
max-height: calc(100vh - 5rem - 70px);
overflow-y: auto;
}
}
}
@media (min-width:768px) {
.docs-links {
display: block!important;
}
}
/* Docs TOC. */
.docs-toc {
order: 2;
padding-top: 1.5rem;
padding-bottom: 1.5rem;
font-size: .875rem
}
@supports ((position:-webkit-sticky) or (position:sticky)) {
.docs-toc {
position: -webkit-sticky;
position: sticky;
top: 70px;
height: calc(100vh - 70px);
overflow-y: auto
}
}
/* Docs TOC item links. */
.docs-toc-link {
display: block;
padding: .25rem 1.5rem;
font-weight: bold;
color: rgba(0, 0, 0, .65);
}
.docs-toc-link:hover {
color: rgba(0, 0, 0, .85);
text-decoration: none;
}
.docs-toc-item.active {
margin-bottom: 1rem;
}
.docs-toc-item.active:not(:first-child) {
margin-top: 1rem;
}
.docs-toc-item.active>.docs-toc-link {
color: rgba(0, 0, 0, .85);
}
.docs-toc-item.active>.docs-toc-link:hover {
background-color: transparent;
}
.docs-sidenav {
display: block;
}
/* Docs TOC nav. */
.docs-toc-title {
color: #b5b5b5;
font-size: .875rem;
font-weight: 600;
padding-left: calc(1.5rem + 1px);
}
#TableOfContents {
padding-left: 0;
border-left: 1px solid #eee;
}
#TableOfContents ul,
ul.toc-top {
padding-left: 0;
}
// TOC indentation for each level.
#TableOfContents ul ul {
padding-left: 0.8rem;
}
#TableOfContents li {
display: block;
}
#TableOfContents li a,
.toc-top li a {
display: block;
padding: .125rem 1.5rem;
color: #99979c;
font-size: 0.7rem;
}
#TableOfContents li a:hover,
.toc-top li a:hover {
color: $sta-primary;
text-decoration: none;
}
/* ScrollSpy active link style. */
#TableOfContents li a.active {
color: $sta-primary;
font-weight: 700;
}
/* Docs achnorjs links. */
.anchorjs-link {
font-weight: 400;
color: $sta-primary-dark;
transition: color .16s linear;
}
.anchorjs-link:hover {
color: $sta-primary;
text-decoration: none;
}