]> git.ipfire.org Git - thirdparty/bootstrap.git/commitdiff
projects / thirdparty / bootstrap.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: f09b07d)
more work on the sidenav, including small css refactor and new classes
authorMark Otto <otto@github.com>
Thu, 9 May 2013 05:42:42 +0000 (22:42 -0700)
committerMark Otto <otto@github.com>
Thu, 9 May 2013 05:42:42 +0000 (22:42 -0700)
docs/_layouts/default.html patch | blob | blame | history
docs/assets/css/docs.css patch | blob | blame | history
docs/assets/js/application.js patch | blob | blame | history

diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
index 85e7457b6c335f5af6d9ebf388e67ace3d42ab06..bc9794c5bc3c56b14f958e35dbf149a34bad8102 100644 (file)
--- a/docs/_layouts/default.html
+++ b/docs/_layouts/default.html
@@ -5,7 +5,7 @@
     {% include header.html %}
     <!-- Place anything custom after this. -->
   </head>
-  <body data-spy="scroll" data-target=".bs-docs-sidebar">
+  <body data-spy="scroll" data-target=".bs-sidebar">
 
     <!-- Docs master nav -->
     {% include nav-main.html %}
@@ -21,8 +21,8 @@
     <div class="container bs-docs-container">
       <div class="row">
         <div class="col col-lg-3">
-          <div class="bs-docs-sidebar">
-            <ul class="nav">
+          <div class="bs-sidebar">
+            <ul class="nav bs-sidenav">
               {% if page.slug == "welcome" %}
                  {% include nav-welcome.html %}
               {% elsif page.slug == "css" %}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 50cda6360f3c2295a3c379f5c5a425d9fd5fe2f8..97c998b037d88f356acb54578bc6fa3909f1b068 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -126,7 +126,6 @@ hr {
 /* Page headers */
 .bs-docs-header {
   padding: 30px 30px 40px;
-  margin-bottom: 30px;
   font-size: 16px;
   color: #5a5a5a;
   text-align: center;
@@ -147,32 +146,39 @@ hr {
 
 
 
-/* Sidenav
+/* Docs sidebar
 -------------------------------------------------- */
 
-/* Nav: first level */
-.bs-docs-sidebar > .nav {
-  margin-top: 20px;
-  margin-bottom: 20px;
+/* By default it's not affixed in mobile views, so undo that */
+.bs-sidebar.affix {
+  position: static;
+}
+
+/* First level of nav */
+.bs-sidenav {
+  margin-top: 30px;
+  margin-bottom: 30px;
   padding-top: 15px;
   padding-bottom: 15px;
   text-shadow: 0 1px 0 #fff;
   background-color: #f5f5f5;
   border-radius: 5px;
 }
-.bs-docs-sidebar .nav > li > a {
+
+/* All levels of nav */
+.bs-sidebar .nav > li > a {
   display: block;
   color: #666;
-  padding: 4px 25px;
+  padding: 4px 20px;
 }
-.bs-docs-sidebar .nav > li > a:hover,
-.bs-docs-sidebar .nav > li > a:focus {
+.bs-sidebar .nav > li > a:hover,
+.bs-sidebar .nav > li > a:focus {
   text-decoration: none;
   border-right: 1px solid #d5d5d5;
 }
-.bs-docs-sidebar .nav > .active > a,
-.bs-docs-sidebar .nav > .active:hover > a,
-.bs-docs-sidebar .nav > .active:focus > a {
+.bs-sidebar .nav > .active > a,
+.bs-sidebar .nav > .active:hover > a,
+.bs-sidebar .nav > .active:focus > a {
   font-weight: 500;
   color: #b94a48;
   background-color: transparent;
@@ -180,60 +186,20 @@ hr {
 }
 
 /* Nav: second level (shown on .active) */
-.bs-docs-sidebar .nav .nav {
+.bs-sidebar .nav .nav {
   display: none;
   margin-bottom: 5px;
 }
-.bs-docs-sidebar .nav > .active > ul {
+.bs-sidebar .nav > .active > ul {
   display: block;
 }
-.bs-docs-sidebar .nav .nav > li > a {
+.bs-sidebar .nav .nav > li > a {
   padding-top: 2px;
   padding-bottom: 2px;
   padding-left: 40px;
   font-size: 90%;
 }
 
-.bs-docs-sidenav-heading {
-  margin: 0 0 25px;
-}
-.bs-docs-sidenav-heading a {
-  display: block;
-  padding: 15px 25px;
-  color: #b94a48;
-  border-bottom: 1px solid #e5e5e5;
-  box-shadow: 0 1px 0 #fff;
-}
-.bs-docs-sidenav-heading a:hover {
-  color: #a3403e;
-  text-decoration: none;
-}
-
-/* Section headings for groups of links */
-.bs-docs-sidenav > li > .nav-header {
-  margin-top: 20px;
-  margin-bottom: 5px;
-  font-size: 14px;
-  font-weight: 500;
-  color: #333;
-}
-.bs-docs-sidenav > .active > .nav-header,
-.bs-docs-sidenav > .active > .nav-header:hover {
-  color: #333;
-  border-color: #333;
-}
-
-/* Increase spacing between page nav and other pages */
-.bs-docs-sidenav .nav-divider {
-  margin-top: 25px;
-  margin-bottom: 25px;
-}
-
-.bs-docs-sidebar.affix {
-  top: 50px;
-  width: 270px;
-}
-
 
 
 /* Special grid styles
@@ -690,6 +656,13 @@ input.focused {
 /* Tablets and up */
 @media screen and (min-width: 768px) {
 
+  /* Reaffix the fixed sidebar */
+  .bs-sidebar.affix {
+    position: fixed; /* Undo the static from mobile-first approach */
+    top: 50px;
+    width: 160px;
+  }
+
   /* Back to top link */
   .bs-docs-top {
     float: left;
@@ -726,7 +699,7 @@ input.focused {
   }
 
   /* Show the docs nav */
-  .bs-docs-sidebar {
+  .bs-sidebar {
     display: block;
   }
 
@@ -754,6 +727,11 @@ input.focused {
 /* Tablets/desktops and up */
 @media screen and (min-width: 992px) {
 
+  /* Widen the fixed sidebar */
+  .bs-sidebar.affix {
+    width: 213px;
+  }
+
   /* Icons */
   .the-icons li {
     width: 12.5%;
@@ -764,4 +742,9 @@ input.focused {
 /* Large desktops and up */
 @media screen and (min-width: 1200px) {
 
+  /* Widen the fixed sidebar again */
+  .bs-sidebar.affix {
+    width: 270px;
+  }
+
 }
diff --git a/docs/assets/js/application.js b/docs/assets/js/application.js
index c43008e51a337eea067a2a9ee2ce2e27d33ba268..397b94b331837c5d0acac398188b045b11c86699 100644 (file)
--- a/docs/assets/js/application.js
+++ b/docs/assets/js/application.js
@@ -15,7 +15,7 @@
 
     // back to top
     setTimeout(function () {
-      $('.bs-docs-sidebar').affix({
+      $('.bs-sidebar').affix({
         offset: {
           top: function () { return $window.width() <= 980 ? 290 : 210 }
         , bottom: 270
Mirror of https://github.com/twbs/bootstrap.git