toc.css in Open Social 8.5
/*
* Side navigation
*
* Scrollspy and affixed enhanced navigation to highlight sections and secondary
* sections of docs content.
*/
.toc-wrapper.affix {
position: static;
}
.toc-wrapper .nav li a {
position: relative;
display: inline-block;
font-size: 14px;
color: #555555;
transition: color 0.5s;
padding-top: 0;
padding-bottom: 0;
}
.toc-wrapper .nav li a:before {
content: '';
position: absolute;
left: -20px;
top: 0;
width: 3px;
height: 100%;
background-color: #f3f3f3;
transition: background-color .3s, width .3s;
}
.toc-wrapper .nav li a:hover, .toc-wrapper .nav li a:focus {
color: #29abe2;
font-weight: 500;
}
.toc-wrapper .nav li.active a {
color: #29abe2;
font-weight: 500;
}
.toc-wrapper .nav li.active a:before {
background-color: #29abe2;
}
.toc-wrapper .nav li a.back-to-top {
display: none;
color: #777;
margin-top: 1rem;
}
/* Show and affix the side nav when space allows it */
@media (min-width: 900px) {
.toc-wrapper {
padding-left: 40px;
}
.toc-wrapper .nav > .active > ul {
display: block;
}
/* Widen the fixed sidebar */
.toc-wrapper.affix,
.toc-wrapper.affix-bottom {
width: 320px;
}
.toc-wrapper.affix {
position: fixed;
/* Undo the static from mobile first approach */
top: 74px;
}
.toc-wrapper.affix-bottom {
position: absolute;
/* Undo the static from mobile first approach */
}
.toc-wrapper.affix-bottom .table-of-contents,
.toc-wrapper.affix .table-of-contents {
margin-top: 0;
margin-bottom: 0;
}
.back-to-top {
display: block;
}
}
File
themes/socialblue/assets/css/toc.css
View source
- /*
- * Side navigation
- *
- * Scrollspy and affixed enhanced navigation to highlight sections and secondary
- * sections of docs content.
- */
- .toc-wrapper.affix {
- position: static;
- }
-
- .toc-wrapper .nav li a {
- position: relative;
- display: inline-block;
- font-size: 14px;
- color: #555555;
- transition: color 0.5s;
- padding-top: 0;
- padding-bottom: 0;
- }
-
- .toc-wrapper .nav li a:before {
- content: '';
- position: absolute;
- left: -20px;
- top: 0;
- width: 3px;
- height: 100%;
- background-color: #f3f3f3;
- transition: background-color .3s, width .3s;
- }
-
- .toc-wrapper .nav li a:hover, .toc-wrapper .nav li a:focus {
- color: #29abe2;
- font-weight: 500;
- }
-
- .toc-wrapper .nav li.active a {
- color: #29abe2;
- font-weight: 500;
- }
-
- .toc-wrapper .nav li.active a:before {
- background-color: #29abe2;
- }
-
- .toc-wrapper .nav li a.back-to-top {
- display: none;
- color: #777;
- margin-top: 1rem;
- }
-
- /* Show and affix the side nav when space allows it */
-
- @media (min-width: 900px) {
- .toc-wrapper {
- padding-left: 40px;
- }
- .toc-wrapper .nav > .active > ul {
- display: block;
- }
- /* Widen the fixed sidebar */
- .toc-wrapper.affix,
- .toc-wrapper.affix-bottom {
- width: 320px;
- }
- .toc-wrapper.affix {
- position: fixed;
- /* Undo the static from mobile first approach */
- top: 74px;
- }
- .toc-wrapper.affix-bottom {
- position: absolute;
- /* Undo the static from mobile first approach */
- }
- .toc-wrapper.affix-bottom .table-of-contents,
- .toc-wrapper.affix .table-of-contents {
- margin-top: 0;
- margin-bottom: 0;
- }
- .back-to-top {
- display: block;
- }
- }