copy in styles from bootstrap docs site

mollymca · Nov 22, 2015 · a516818 · a516818
1 parent f08fd9f
commit a516818
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 4 deletions.
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -6,15 +6,16 @@
  <title>Bootstrap Table of Contents</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
  <link rel="stylesheet" href="{{ site.baseurl }}/assets/screen.css" media="screen" charset="utf-8">
+ <link rel="stylesheet" href="{{ site.baseurl }}/bootstrap-toc.css" media="screen" charset="utf-8">
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
  <script src="{{ site.baseurl }}/bootstrap-toc.js" charset="utf-8"></script>
  </head>
- <body>
+ <body data-spy="scroll" data-target="#toc">
  <div class="container">
  <div class="row">
  <div class="col-sm-4">
- <nav id="toc" data-spy="affix"></nav>
+ <nav id="toc" class="bs-docs-sidebar" data-spy="affix"></nav>
  </div>
  <div class="col-sm-8">
  {{ content }}

diff --git a/bootstrap-toc.css b/bootstrap-toc.css
@@ -0,0 +1,60 @@
+/* modified from https://github.com/twbs/bootstrap/blob/94b4076dd2efba9af71f0b18d4ee4b163aa9e0dd/docs/assets/css/src/docs.css#L548-L601 */
+/* First level of nav */
+.bs-docs-sidenav {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+/* All levels of nav */
+.bs-docs-sidebar .nav > li > a {
+ display: block;
+ padding: 4px 20px;
+ font-size: 13px;
+ font-weight: 500;
+ color: #767676;
+}
+.bs-docs-sidebar .nav > li > a:hover,
+.bs-docs-sidebar .nav > li > a:focus {
+ padding-left: 19px;
+ color: #563d7c;
+ text-decoration: none;
+ background-color: transparent;
+ border-left: 1px solid #563d7c;
+}
+.bs-docs-sidebar .nav > .active > a,
+.bs-docs-sidebar .nav > .active:hover > a,
+.bs-docs-sidebar .nav > .active:focus > a {
+ padding-left: 18px;
+ font-weight: bold;
+ color: #563d7c;
+ background-color: transparent;
+ border-left: 2px solid #563d7c;
+}
+
+/* Nav: second level (shown on .active) */
+.bs-docs-sidebar .nav .nav {
+ display: none; /* Hide by default, but at >768px, show it */
+ padding-bottom: 10px;
+}
+.bs-docs-sidebar .nav .nav > li > a {
+ padding-top: 1px;
+ padding-bottom: 1px;
+ padding-left: 30px;
+ font-size: 12px;
+ font-weight: normal;
+}
+.bs-docs-sidebar .nav .nav > li > a:hover,
+.bs-docs-sidebar .nav .nav > li > a:focus {
+ padding-left: 29px;
+}
+.bs-docs-sidebar .nav .nav > .active > a,
+.bs-docs-sidebar .nav .nav > .active:hover > a,
+.bs-docs-sidebar .nav .nav > .active:focus > a {
+ padding-left: 28px;
+ font-weight: 500;
+}
+
+/* from https://github.com/twbs/bootstrap/blob/e38f066d8c203c3e032da0ff23cd2d6098ee2dd6/docs/assets/css/src/docs.css#L631-L634 */
+.bs-docs-sidebar .nav > .active > ul {
+ display: block;
+}
diff --git a/bootstrap-toc.js b/bootstrap-toc.js
@@ -33,6 +33,10 @@ $(function() {
  }
  };
 
+ var createNavList = function() {
+ return $('<ul class="nav"></ul>');
+ };
+
  var getContext = function($startingContext, navLevel) {
  var $context = $startingContext;
 
@@ -46,7 +50,7 @@ $(function() {
  var prevNavLevel = $prevNav.data('nav-level');
  if (navLevel > prevNavLevel) {
  // create a new level of the tree
- var $childList = $('<ul></ul>');
+ var $childList = createNavList();
  $prevNav.append($childList);
  $context = $childList;
  } else if (navLevel < prevNavLevel) {
@@ -80,7 +84,7 @@ $(function() {
  };
 
  var init = function($base) {
- var $context = $('<ul></ul>');
+ var $context = createNavList();
  $base.append($context);
 
  $('h1,h2,h3,h4').each(function(i, el) {