_docs.scss 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. /*************************************************
  2. * Documentation layout
  3. **************************************************/
  4. .docs-article-container {
  5. max-width: 760px;
  6. }
  7. /* Documentation: article footer. */
  8. .docs .body-footer {
  9. border-top: 1px solid #e8e8e8;
  10. margin-top: 30px;
  11. padding-top: 10px;
  12. font-size: 14px;
  13. color: #707070;
  14. }
  15. /* Docs content. */
  16. .docs-content {
  17. order: 1;
  18. position: relative;
  19. }
  20. .docs-content>h2[id],
  21. .docs-content>h3[id],
  22. .docs-content>h4[id] {
  23. pointer-events: none;
  24. }
  25. .docs-content>ol li,
  26. .docs-content>ul li {
  27. margin-bottom: .25rem;
  28. }
  29. /* Docs search. */
  30. .docs-search {
  31. position: relative;
  32. padding: 1rem 15px;
  33. margin-right: -15px;
  34. margin-left: -15px;
  35. border-bottom: 1px solid rgba(0, 0, 0, .05);
  36. }
  37. .docs-search .form-control:focus {
  38. border-color: $sta-primary;
  39. box-shadow: 0 0 0 3px $sta-primary-light;
  40. }
  41. /* Docs sidebar. */
  42. .docs-sidebar {
  43. order: 0;
  44. border-bottom: 1px solid rgba(0, 0, 0, .1)
  45. }
  46. @media (min-width:768px) {
  47. .docs-sidebar {
  48. border-right: 1px solid rgba(0, 0, 0, .1)
  49. }
  50. @supports ((position:-webkit-sticky) or (position:sticky)) {
  51. .docs-sidebar {
  52. position: -webkit-sticky;
  53. position: sticky;
  54. top: 50px;
  55. z-index: 10;
  56. height: calc(100vh - 50px)
  57. }
  58. }
  59. }
  60. @media (min-width:1200px) {
  61. .docs-sidebar {
  62. border-right: 1px solid rgba(0, 0, 0, .1)
  63. }
  64. @supports ((position:-webkit-sticky) or (position:sticky)) {
  65. .docs-sidebar {
  66. position: -webkit-sticky;
  67. position: sticky;
  68. top: 70px;
  69. z-index: 10;
  70. height: calc(100vh - 70px)
  71. }
  72. }
  73. }
  74. @media (min-width:1200px) {
  75. .docs-sidebar {
  76. flex: 0 1 320px
  77. }
  78. }
  79. /* Hide sidebar in printouts. */
  80. @media print {
  81. .docs-sidebar {
  82. display: none;
  83. }
  84. }
  85. /* Docs sidebar li>a. */
  86. .docs-sidebar .nav>li>a {
  87. display: block;
  88. padding: .25rem 1.5rem;
  89. font-size: 0.8rem;
  90. color: rgba(0, 0, 0, .65);
  91. }
  92. .docs-sidebar .nav>li>a:hover {
  93. color: rgba(0, 0, 0, .85);
  94. text-decoration: none;
  95. background-color: transparent;
  96. }
  97. .docs-sidebar .docs-toc-item.active a,
  98. .docs-sidebar .docs-toc-item a.active, // Book layout sidebar links
  99. .docs-sidebar .nav>.active:hover>a,
  100. .docs-sidebar .nav>.active>a {
  101. font-weight: bold;
  102. color: $sta-primary;
  103. background-color: transparent;
  104. }
  105. /* Docs links. */
  106. .docs-toggle {
  107. line-height: 1;
  108. font-size: 1.2rem;
  109. color: $sta-primary;
  110. background-color: transparent;
  111. }
  112. .docs-links {
  113. padding-top: 1rem;
  114. padding-bottom: 1rem;
  115. margin-right: -15px;
  116. margin-left: -15px;
  117. }
  118. @media (min-width:768px) {
  119. @supports ((position:-webkit-sticky) or (position:sticky)) {
  120. .docs-links {
  121. max-height: calc(100vh - 5rem - 70px);
  122. overflow-y: auto;
  123. }
  124. }
  125. }
  126. @media (min-width:768px) {
  127. .docs-links {
  128. display: block!important;
  129. }
  130. }
  131. /* Docs TOC. */
  132. .docs-toc {
  133. order: 2;
  134. padding-top: 1.5rem;
  135. padding-bottom: 1.5rem;
  136. font-size: .875rem
  137. }
  138. @supports ((position:-webkit-sticky) or (position:sticky)) {
  139. .docs-toc {
  140. position: -webkit-sticky;
  141. position: sticky;
  142. top: 70px;
  143. height: calc(100vh - 70px);
  144. overflow-y: auto
  145. }
  146. }
  147. /* Docs TOC item links. */
  148. .docs-toc-link {
  149. display: block;
  150. padding: .25rem 1.5rem;
  151. font-weight: bold;
  152. color: rgba(0, 0, 0, .65);
  153. }
  154. .docs-toc-link:hover {
  155. color: rgba(0, 0, 0, .85);
  156. text-decoration: none;
  157. }
  158. .docs-toc-item.active {
  159. margin-bottom: 1rem;
  160. }
  161. .docs-toc-item.active:not(:first-child) {
  162. margin-top: 1rem;
  163. }
  164. .docs-toc-item.active>.docs-toc-link {
  165. color: rgba(0, 0, 0, .85);
  166. }
  167. .docs-toc-item.active>.docs-toc-link:hover {
  168. background-color: transparent;
  169. }
  170. .docs-sidenav {
  171. display: block;
  172. }
  173. /* Docs TOC nav. */
  174. .docs-toc-title {
  175. color: #b5b5b5;
  176. font-size: .875rem;
  177. font-weight: 600;
  178. padding-left: calc(1.5rem + 1px);
  179. }
  180. #TableOfContents {
  181. padding-left: 0;
  182. border-left: 1px solid #eee;
  183. }
  184. #TableOfContents ul,
  185. ul.toc-top {
  186. padding-left: 0;
  187. }
  188. // TOC indentation for each level.
  189. #TableOfContents ul ul {
  190. padding-left: 0.8rem;
  191. }
  192. #TableOfContents li {
  193. display: block;
  194. }
  195. #TableOfContents li a,
  196. .toc-top li a {
  197. display: block;
  198. padding: .125rem 1.5rem;
  199. color: #99979c;
  200. font-size: 0.7rem;
  201. }
  202. #TableOfContents li a:hover,
  203. .toc-top li a:hover {
  204. color: $sta-primary;
  205. text-decoration: none;
  206. }
  207. /* ScrollSpy active link style. */
  208. #TableOfContents li a.active {
  209. color: $sta-primary;
  210. font-weight: 700;
  211. }
  212. /* Docs achnorjs links. */
  213. .anchorjs-link {
  214. font-weight: 400;
  215. color: $sta-primary-dark;
  216. transition: color .16s linear;
  217. }
  218. .anchorjs-link:hover {
  219. color: $sta-primary;
  220. text-decoration: none;
  221. }