diff options
| -rw-r--r-- | docs/assets/css/docs.css | 38 | ||||
| -rw-r--r-- | docs/css.html | 2 | ||||
| -rw-r--r-- | docs/templates/pages/css.mustache | 2 |
3 files changed, 32 insertions, 10 deletions
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index f973c6395..7c086d903 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -160,11 +160,20 @@ section > ul li { /* Sidenav -------------------------------------------------- */ +/* Base styles are not affixable given mobile-first */ .bs-docs-sidenav { - width: 218px; margin: 20px 0 0; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} +.bs-docs-sidenav.affix { + position: static; + width: auto; + top: 0; } -/* Chevrons */ + +/* Chevrons within each link */ .bs-docs-sidenav .glyphicon-chevron-right { float: right; margin-top: 1px; @@ -180,17 +189,30 @@ section > ul li { color: #fff; opacity: 1; } -.bs-docs-sidenav.affix { - top: 10px; + +/* Affix all the things, and set widths because they're positioned, depending on viewport size */ +@media screen and (min-width: 768px) { + .bs-docs-sidenav.affix { + position: fixed; + top: 10px; + width: 170px; + } + .bs-docs-sidenav.affix-bottom { + position: absolute; + top: auto; + bottom: 270px; + } } -.bs-docs-sidenav.affix-bottom { - position: absolute; - top: auto; - bottom: 270px; + +@media screen and (min-width: 992px) { + .bs-docs-sidenav.affix { + width: 220px; + } } + /* Bootstrap code examples -------------------------------------------------- */ diff --git a/docs/css.html b/docs/css.html index 756cec1ea..ac6d98141 100644 --- a/docs/css.html +++ b/docs/css.html @@ -91,7 +91,7 @@ <li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li> <li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li> <li><a href="#images"><i class="glyphicon-chevron-right"></i> Images</a></li> - <li><a href="#icons"><i class="glyphicon-chevron-right"></i> Icons by Glyphicons</a></li> + <li><a href="#icons"><i class="glyphicon-chevron-right"></i> Glyphicons</a></li> <li><a href="#responsive"><i class="glyphicon-chevron-right"></i> Responsive design</a></li> </ul> </div> diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 9e373dec6..2d31dd3f6 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -23,7 +23,7 @@ <li><a href="#forms"><i class="glyphicon-chevron-right"></i> Forms</a></li> <li><a href="#buttons"><i class="glyphicon-chevron-right"></i> Buttons</a></li> <li><a href="#images"><i class="glyphicon-chevron-right"></i> Images</a></li> - <li><a href="#icons"><i class="glyphicon-chevron-right"></i> Icons by Glyphicons</a></li> + <li><a href="#icons"><i class="glyphicon-chevron-right"></i> Glyphicons</a></li> <li><a href="#responsive"><i class="glyphicon-chevron-right"></i> Responsive design</a></li> </ul> </div> |