You are here

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
  1. /*
  2. * Side navigation
  3. *
  4. * Scrollspy and affixed enhanced navigation to highlight sections and secondary
  5. * sections of docs content.
  6. */
  7. .toc-wrapper.affix {
  8. position: static;
  9. }
  10. .toc-wrapper .nav li a {
  11. position: relative;
  12. display: inline-block;
  13. font-size: 14px;
  14. color: #555555;
  15. transition: color 0.5s;
  16. padding-top: 0;
  17. padding-bottom: 0;
  18. }
  19. .toc-wrapper .nav li a:before {
  20. content: '';
  21. position: absolute;
  22. left: -20px;
  23. top: 0;
  24. width: 3px;
  25. height: 100%;
  26. background-color: #f3f3f3;
  27. transition: background-color .3s, width .3s;
  28. }
  29. .toc-wrapper .nav li a:hover, .toc-wrapper .nav li a:focus {
  30. color: #29abe2;
  31. font-weight: 500;
  32. }
  33. .toc-wrapper .nav li.active a {
  34. color: #29abe2;
  35. font-weight: 500;
  36. }
  37. .toc-wrapper .nav li.active a:before {
  38. background-color: #29abe2;
  39. }
  40. .toc-wrapper .nav li a.back-to-top {
  41. display: none;
  42. color: #777;
  43. margin-top: 1rem;
  44. }
  45. /* Show and affix the side nav when space allows it */
  46. @media (min-width: 900px) {
  47. .toc-wrapper {
  48. padding-left: 40px;
  49. }
  50. .toc-wrapper .nav > .active > ul {
  51. display: block;
  52. }
  53. /* Widen the fixed sidebar */
  54. .toc-wrapper.affix,
  55. .toc-wrapper.affix-bottom {
  56. width: 320px;
  57. }
  58. .toc-wrapper.affix {
  59. position: fixed;
  60. /* Undo the static from mobile first approach */
  61. top: 74px;
  62. }
  63. .toc-wrapper.affix-bottom {
  64. position: absolute;
  65. /* Undo the static from mobile first approach */
  66. }
  67. .toc-wrapper.affix-bottom .table-of-contents,
  68. .toc-wrapper.affix .table-of-contents {
  69. margin-top: 0;
  70. margin-bottom: 0;
  71. }
  72. .back-to-top {
  73. display: block;
  74. }
  75. }