rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-03-02 02:29:24 +01:00
Code Issues Actions Packages Releases Activity

more work on the sidenav, including small css refactor and new classes

Browse Source
This commit is contained in:
Mark Otto 2013-05-08 22:42:42 -07:00
parent f09b07dc2a
commit d7acf4e82d
3 changed files with 44 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/_layouts/default.html
View File

@ -5,7 +5,7 @@
{% include header.html %} {% include header.html %}
<!-- Place anything custom after this. --> <!-- Place anything custom after this. -->
</head> </head>
<body data-spy="scroll" data-target=".bs-docs-sidebar"> <body data-spy="scroll" data-target=".bs-sidebar">
<!-- Docs master nav --> <!-- Docs master nav -->
{% include nav-main.html %} {% include nav-main.html %}
@ -21,8 +21,8 @@
<div class="container bs-docs-container"> <div class="container bs-docs-container">
<div class="row"> <div class="row">
<div class="col col-lg-3"> <div class="col col-lg-3">
<div class="bs-docs-sidebar"> <div class="bs-sidebar">
<ul class="nav"> <ul class="nav bs-sidenav">
{% if page.slug == "welcome" %} {% if page.slug == "welcome" %}
{% include nav-welcome.html %} {% include nav-welcome.html %}
{% elsif page.slug == "css" %} {% elsif page.slug == "css" %}

97
docs/assets/css/docs.css
View File

@ -126,7 +126,6 @@ hr {
/* Page headers */ /* Page headers */
.bs-docs-header { .bs-docs-header {
padding: 30px 30px 40px; padding: 30px 30px 40px;
margin-bottom: 30px;
font-size: 16px; font-size: 16px;
color: #5a5a5a; color: #5a5a5a;
text-align: center; text-align: center;
@ -147,32 +146,39 @@ hr {
/* Sidenav /* Docs sidebar
-------------------------------------------------- */ -------------------------------------------------- */
/* Nav: first level */ /* By default it's not affixed in mobile views, so undo that */
.bs-docs-sidebar > .nav { .bs-sidebar.affix {
margin-top: 20px; position: static;
margin-bottom: 20px; }
/* First level of nav */
.bs-sidenav {
margin-top: 30px;
margin-bottom: 30px;
padding-top: 15px; padding-top: 15px;
padding-bottom: 15px; padding-bottom: 15px;
text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff;
background-color: #f5f5f5; background-color: #f5f5f5;
border-radius: 5px; border-radius: 5px;
} }
.bs-docs-sidebar .nav > li > a {
/* All levels of nav */
.bs-sidebar .nav > li > a {
display: block; display: block;
color: #666; color: #666;
padding: 4px 25px; padding: 4px 20px;
} }
.bs-docs-sidebar .nav > li > a:hover, .bs-sidebar .nav > li > a:hover,
.bs-docs-sidebar .nav > li > a:focus { .bs-sidebar .nav > li > a:focus {
text-decoration: none; text-decoration: none;
border-right: 1px solid #d5d5d5; border-right: 1px solid #d5d5d5;
} }
.bs-docs-sidebar .nav > .active > a, .bs-sidebar .nav > .active > a,
.bs-docs-sidebar .nav > .active:hover > a, .bs-sidebar .nav > .active:hover > a,
.bs-docs-sidebar .nav > .active:focus > a { .bs-sidebar .nav > .active:focus > a {
font-weight: 500; font-weight: 500;
color: #b94a48; color: #b94a48;
background-color: transparent; background-color: transparent;
@ -180,60 +186,20 @@ hr {
} }
/* Nav: second level (shown on .active) */ /* Nav: second level (shown on .active) */
.bs-docs-sidebar .nav .nav { .bs-sidebar .nav .nav {
display: none; display: none;
margin-bottom: 5px; margin-bottom: 5px;
} }
.bs-docs-sidebar .nav > .active > ul { .bs-sidebar .nav > .active > ul {
display: block; display: block;
} }
.bs-docs-sidebar .nav .nav > li > a { .bs-sidebar .nav .nav > li > a {
padding-top: 2px; padding-top: 2px;
padding-bottom: 2px; padding-bottom: 2px;
padding-left: 40px; padding-left: 40px;
font-size: 90%; 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 /* Special grid styles
@ -690,6 +656,13 @@ input.focused {
/* Tablets and up */ /* Tablets and up */
@media screen and (min-width: 768px) { @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 */ /* Back to top link */
.bs-docs-top { .bs-docs-top {
float: left; float: left;
@ -726,7 +699,7 @@ input.focused {
} }
/* Show the docs nav */ /* Show the docs nav */
.bs-docs-sidebar { .bs-sidebar {
display: block; display: block;
} }
@ -754,6 +727,11 @@ input.focused {
/* Tablets/desktops and up */ /* Tablets/desktops and up */
@media screen and (min-width: 992px) { @media screen and (min-width: 992px) {
/* Widen the fixed sidebar */
.bs-sidebar.affix {
width: 213px;
}
/* Icons */ /* Icons */
.the-icons li { .the-icons li {
width: 12.5%; width: 12.5%;
@ -764,4 +742,9 @@ input.focused {
/* Large desktops and up */ /* Large desktops and up */
@media screen and (min-width: 1200px) { @media screen and (min-width: 1200px) {
/* Widen the fixed sidebar again */
.bs-sidebar.affix {
width: 270px;
}
} }

2
docs/assets/js/application.js
View File

@ -15,7 +15,7 @@
// back to top // back to top
setTimeout(function () { setTimeout(function () {
$('.bs-docs-sidebar').affix({ $('.bs-sidebar').affix({
offset: { offset: {
top: function () { return $window.width() <= 980 ? 290 : 210 } top: function () { return $window.width() <= 980 ? 290 : 210 }
, bottom: 270 , bottom: 270