From e191964ff800f5576576d6212be1e43112567ebe Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 31 Jul 2012 00:01:04 -0700 Subject: [PATCH] reorder docs css --- docs/assets/css/docs.css | 252 +++++++++++++++++++-------------------- 1 file changed, 125 insertions(+), 127 deletions(-) diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 5470cfe31f..b91910d935 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -730,15 +730,88 @@ form.bs-docs-example { +/* Sidenav for Docs +-------------------------------------------------- */ + +/* prevent column from collapsing when affixing */ +.span3 { + min-height: 1px; +} + +.bs-docs-sidenav { + width: 218px; + margin-top: 30px; + padding: 0; + margin-right: 10px; + background-color: #fff; + margin-left: 0; + -webkit-border-radius: 6px; + -moz-border-radius: 6px; + border-radius: 6px; + -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); + -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); + box-shadow: 0 1px 4px rgba(0,0,0,.065); +} +.bs-docs-sidenav > li > a { + display: block; + *width: 190px; + margin: 0 0 -1px; + font-size: 14px; + padding: 9px 14px; + border: 1px solid #e5e5e5; +} +.bs-docs-sidenav > li:first-child > a { + -webkit-border-radius: 6px 6px 0 0; + -moz-border-radius: 6px 6px 0 0; + border-radius: 6px 6px 0 0; +} +.bs-docs-sidenav > li:last-child > a { + -webkit-border-radius: 0 0 6px 6px; + -moz-border-radius: 0 0 6px 6px; + border-radius: 0 0 6px 6px; +} +.bs-docs-sidenav > .active > a { + border-color: #08c; + position: relative; + z-index: 2; +} +/* Chevrons */ +.bs-docs-sidenav .icon-chevron-right { + float: right; + margin-top: 2px; + margin-right: -6px; + opacity: .25; +} +.bs-docs-sidenav > li > a:hover { + background-color: #f5f5f5; +} +.bs-docs-sidenav a:hover .icon-chevron-right { + opacity: .5; +} +.bs-docs-sidenav .active .icon-chevron-right { + background-image: url(../img/glyphicons-halflings-white.png); + opacity: .75; +} +.bs-docs-sidenav.affix { + top: 30px; +} + + + + + /* Responsive -------------------------------------------------- */ /* Desktop large ------------------------- */ -@media (min-width: 1210px) { +@media (min-width: 1200px) { .bs-docs-container { max-width: 970px; } + .bs-docs-sidenav { + width: 258px; + } } /* Desktop @@ -757,6 +830,44 @@ form.bs-docs-example { display: inline-block; margin: 5px; } + + /* When affixed, space properly */ + .bs-docs-sidenav { + top: 0; + margin-top: 30px; + margin-right: 0; + } +} + +@media (min-width: 979px) { + .masthead, + .subhead { + position: fixed; + top: 40px; + right: 0; + left: 0; + } + .masthead { + height: 380px; + } + .subhead { + height: 130px; /* +80px pdding */ + } + .bs-docs-canvas { + position: absolute; + width: 100%; + z-index: 10; + background-color: #fff; + -webkit-box-shadow: 0 -5px 15px rgba(0,0,0,.15); + -moz-box-shadow: 0 -5px 15px rgba(0,0,0,.15); + box-shadow: 0 -5px 15px rgba(0,0,0,.15); + } + .masthead + .bs-docs-canvas { + top: 570px; + } + .subhead + .bs-docs-canvas { + top: 250px; + } } /* Tablet to desktop @@ -770,6 +881,10 @@ form.bs-docs-example { .jumbotron { margin-top: -20px; /* Offset bottom margin on .navbar */ } + /* Adjust sidenav width */ + .bs-docs-sidenav { + width: 166px; + } } /* Tablet @@ -806,6 +921,15 @@ form.bs-docs-example { margin-bottom: 5px; } + /* Sidenav */ + .bs-docs-sidenav { + width: auto; + } + .bs-docs-sidenav.affix { + position: relative; + width: auto; + } + /* Unfloat the back to top link in footer */ .footer { margin-left: -20px; @@ -889,129 +1013,3 @@ form.bs-docs-example { float: none; } } - - - -/* Docs side .nav-list -------------------------- */ -.span3 { - min-height: 1px; -} -.bs-docs-sidenav { - width: 218px; - margin-top: 30px; - padding: 0; - margin-right: 10px; - background-color: #fff; - margin-left: 0; - -webkit-border-radius: 6px; - -moz-border-radius: 6px; - border-radius: 6px; - -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.065); - -moz-box-shadow: 0 1px 4px rgba(0,0,0,.065); - box-shadow: 0 1px 4px rgba(0,0,0,.065); -} -.bs-docs-sidenav > li > a { - display: block; - *width: 190px; - margin: 0 0 -1px; - font-size: 14px; - padding: 9px 14px; - border: 1px solid #e5e5e5; -} -.bs-docs-sidenav > li:first-child > a { - -webkit-border-radius: 6px 6px 0 0; - -moz-border-radius: 6px 6px 0 0; - border-radius: 6px 6px 0 0; -} -.bs-docs-sidenav > li:last-child > a { - -webkit-border-radius: 0 0 6px 6px; - -moz-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; -} -.bs-docs-sidenav > .active > a { - border-color: #08c; - position: relative; - z-index: 2; -} -/* Chevrons */ -.bs-docs-sidenav .icon-chevron-right { - float: right; - margin-top: 2px; - margin-right: -6px; - opacity: .25; -} -.bs-docs-sidenav > li > a:hover { - background-color: #f5f5f5; -} -.bs-docs-sidenav a:hover .icon-chevron-right { - opacity: .5; -} -.bs-docs-sidenav .active .icon-chevron-right { - background-image: url(../img/glyphicons-halflings-white.png); - opacity: .75; -} -.bs-docs-sidenav.affix { - top: 40px; -} - -@media (min-width: 1200px) { - .bs-docs-sidenav { - width: 258px; - } -} - -@media (max-width: 979px) { - .bs-docs-sidenav { - top: 0px; - margin-top: 30px; - margin-right: 0; - } -} - -@media (min-width: 768px) and (max-width: 979px) { - .bs-docs-sidenav { - width: 166px; - } -} - -@media (max-width: 767px) { - .bs-docs-sidenav { - width: auto; - } - .bs-docs-sidenav.affix { - position: relative; - width: auto; - } -} - -@media (min-width: 979px) { - .masthead, - .subhead { - position: fixed; - top: 40px; - right: 0; - left: 0; - } - .masthead { - height: 380px; - } - .subhead { - height: 130px; /* +80px pdding */ - } - .bs-docs-canvas { - position: absolute; - width: 100%; - z-index: 10; - background-color: #fff; - -webkit-box-shadow: 0 -5px 15px rgba(0,0,0,.15); - -moz-box-shadow: 0 -5px 15px rgba(0,0,0,.15); - box-shadow: 0 -5px 15px rgba(0,0,0,.15); - } - .masthead + .bs-docs-canvas { - top: 570px; - } - .subhead + .bs-docs-canvas { - top: 250px; - } -}