Skip to content

B
bootstrap
Commit d7acf4e8 authored by Mark Otto's avatar Mark Otto
Browse files
Options

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

parent f09b07dc
Hide whitespace changes
Inline Side-by-side
Showing with 44 additions and 61 deletions
docs/_layouts/default.html
View file @ d7acf4e8
......@@ -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" %}
......
docs/assets/css/docs.css
View file @ d7acf4e8
......@@ -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;
}
}
docs/assets/js/application.js
View file @ d7acf4e8
......@@ -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
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment