toc.css 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. .elv-toc {
  2. font-size: 1rem; /* Reset */
  3. }
  4. .elv-toc details {
  5. --details-force-closed: (max-width: 79.9375em); /* 1023px */
  6. }
  7. .elv-toc details > summary {
  8. font-size: 1.375rem; /* 22px /16 */
  9. margin-bottom: .5em;
  10. }
  11. @media (min-width: 80em) {
  12. .elv-toc {
  13. position: absolute;
  14. left: 3rem;
  15. width: 16rem;
  16. z-index: 1;
  17. }
  18. .elv-toc details > summary {
  19. margin-top: 0;
  20. }
  21. .js .elv-toc details > summary {
  22. display: none;
  23. }
  24. }
  25. .elv-toc-list {
  26. display: flex;
  27. flex-wrap: wrap;
  28. justify-content: space-between;
  29. padding-left: 0;
  30. padding-right: 0;
  31. margin: 0 0 2.5em;
  32. list-style: none;
  33. }
  34. .elv-toc-list li {
  35. font-size: 0.9375em; /* 15px /16 */
  36. line-height: 1.466666666667; /* 22px /15 */
  37. }
  38. /* Nested lists */
  39. .elv-toc-list ul {
  40. padding: 0 0 .75em 0;
  41. margin: 0;
  42. list-style: none;
  43. }
  44. /* Menus nested 2 or more deep */
  45. .elv-toc-list ul ul {
  46. padding-bottom: 0;
  47. padding-left: 0.625rem; /* 10px /16 */
  48. }
  49. /* Hide inactive menus 3 or more deep */
  50. .elv-toc-list ul ul > li:not(.elv-toc-active) > ul > li:not(.elv-toc-active) {
  51. display: none;
  52. }
  53. /* List items */
  54. .elv-toc summary,
  55. .elv-toc-list a {
  56. padding: .15em .25em;
  57. }
  58. .elv-toc-list a {
  59. display: block;
  60. }
  61. .elv-toc-list a:not(:hover) {
  62. text-decoration: none;
  63. }
  64. .elv-toc-list li {
  65. margin: 0;
  66. padding: 0;
  67. }
  68. .elv-toc-list > li {
  69. flex-grow: 1;
  70. flex-basis: 14.375rem; /* 230px /16 */
  71. }
  72. /* Top level links */
  73. .elv-toc-list > li > a {
  74. color: #222;
  75. font-weight: 600;
  76. border-bottom: 1px solid #ddd;
  77. margin-bottom: 0.25em; /* 4px /16 */
  78. }
  79. /* Active links */
  80. .elv-toc-list li.elv-toc-active > a {
  81. background-color: #dff7ff;
  82. }
  83. .elv-toc-list ul .elv-toc-active > a:after {
  84. content: "";
  85. }
  86. /* Show only active nested lists */
  87. .elv-toc-list ul.elv-toc-active,
  88. .elv-toc-list li.elv-toc-active > ul {
  89. display: block;
  90. }
  91. /* Footer category navigation */
  92. .elv-cat-list-active {
  93. font-weight: 600;
  94. }