1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2022-11-09 12:25:43 -05:00

unaffix sidebar and simplify styles of docs side nav to be more like v3

This commit is contained in:
Mark Otto 2015-08-05 00:38:36 -07:00
parent 0156fc1c9d
commit d80f26fe49
15 changed files with 4477 additions and 7676 deletions

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -1,19 +1,11 @@
/*!
* Bootstrap v4.0.0-alpha (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under ()
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
font-family: sans-serif;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
body {
margin: 0;
}
margin: 0; }
article,
aside,
@ -28,367 +20,294 @@ menu,
nav,
section,
summary {
display: block;
}
display: block; }
audio,
canvas,
progress,
video {
display: inline-block;
vertical-align: baseline;
}
vertical-align: baseline; }
audio:not([controls]) {
display: none;
height: 0;
}
height: 0; }
[hidden],
template {
display: none;
}
display: none; }
a {
background-color: transparent;
}
background-color: transparent; }
a:active {
outline: 0;
}
outline: 0; }
a:hover {
outline: 0;
}
outline: 0; }
abbr[title] {
border-bottom: 1px dotted;
}
border-bottom: 1px dotted; }
b,
strong {
font-weight: bold;
}
font-weight: bold; }
dfn {
font-style: italic;
}
font-style: italic; }
h1 {
margin: .67em 0;
font-size: 2em;
}
margin: 0.67em 0; }
mark {
color: #000;
background: #ff0;
}
color: #000; }
small {
font-size: 80%;
}
font-size: 80%; }
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
position: relative;
vertical-align: baseline; }
sup {
top: -.5em;
}
top: -0.5em; }
sub {
bottom: -.25em;
}
bottom: -0.25em; }
img {
border: 0;
}
border: 0; }
svg:not(:root) {
overflow: hidden;
}
overflow: hidden; }
figure {
margin: 1em 40px;
}
margin: 1em 40px; }
hr {
height: 0;
-webkit-box-sizing: content-box;
box-sizing: content-box;
}
box-sizing: content-box;
height: 0; }
pre {
overflow: auto;
}
overflow: auto; }
code,
kbd,
pre,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
font-size: 1em; }
button,
input,
optgroup,
select,
textarea {
margin: 0;
font: inherit;
color: inherit;
}
font: inherit;
margin: 0; }
button {
overflow: visible;
}
overflow: visible; }
button,
select {
text-transform: none;
}
text-transform: none; }
button,
html input[type="button"], input[type="reset"],
input[type="submit"] {
-webkit-appearance: button;
cursor: pointer;
}
cursor: pointer; }
button[disabled],
html input[disabled] {
cursor: default;
}
cursor: default; }
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0;
}
padding: 0; }
input {
line-height: normal;
}
line-height: normal; }
input[type="checkbox"],
input[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
box-sizing: border-box;
padding: 0; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}
height: auto; }
input[type="search"] {
-webkit-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
}
box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
-webkit-appearance: none; }
fieldset {
padding: .35em .625em .75em;
margin: 0 2px;
border: 1px solid #c0c0c0;
}
margin: 0 2px;
padding: 0.35em 0.625em 0.75em; }
legend {
padding: 0;
border: 0;
}
padding: 0; }
textarea {
overflow: auto;
}
overflow: auto; }
optgroup {
font-weight: bold;
}
font-weight: bold; }
table {
border-spacing: 0;
border-collapse: collapse;
}
border-spacing: 0; }
td,
th {
padding: 0;
}
padding: 0; }
html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
box-sizing: border-box; }
*,
*:before,
*:after {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
box-sizing: inherit; }
@-moz-viewport {
width: device-width;
}
width: device-width; }
@-ms-viewport {
width: device-width;
}
width: device-width; }
@-o-viewport {
width: device-width; }
@-webkit-viewport {
width: device-width;
}
width: device-width; }
@viewport {
width: device-width;
}
width: device-width; }
html {
font-size: 16px;
-webkit-tap-highlight-color: transparent;
}
-webkit-tap-highlight-color: transparent; }
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #373a3c;
background-color: #fff;
}
background-color: #fff; }
h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem;
}
margin-bottom: .5rem; }
p {
margin-top: 0;
margin-bottom: 1rem;
}
margin-bottom: 1rem; }
abbr[title],
abbr[data-original-title] {
cursor: help;
border-bottom: 1px dotted #818a91;
}
border-bottom: 1px dotted #818a91; }
address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}
line-height: inherit; }
ol,
ul,
dl {
margin-top: 0;
margin-bottom: 1rem;
}
margin-bottom: 1rem; }
ol ol,
ul ul,
ol ul,
ul ol {
margin-bottom: 0;
}
margin-bottom: 0; }
dt {
font-weight: bold;
}
font-weight: bold; }
dd {
margin-bottom: .5rem;
margin-left: 0;
}
margin-left: 0; }
blockquote {
margin: 0 0 1rem;
}
margin: 0 0 1rem; }
a {
color: #0275d8;
text-decoration: none;
}
a:focus,
text-decoration: none; }
a:focus,
a:hover {
color: #014c8c;
text-decoration: underline;
}
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
color: #014c8c;
text-decoration: underline; }
a:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px; }
pre {
margin-top: 0;
margin-bottom: 1rem;
}
margin-bottom: 1rem; }
figure {
margin: 0 0 1rem;
}
margin: 0 0 1rem; }
img {
vertical-align: middle;
}
vertical-align: middle; }
[role="button"] {
cursor: pointer;
}
cursor: pointer; }
table {
background-color: transparent;
}
background-color: transparent; }
caption {
padding-top: .75rem;
padding-bottom: .75rem;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
color: #818a91;
text-align: left;
caption-side: bottom;
}
caption-side: bottom; }
th {
text-align: left;
}
text-align: left; }
label {
display: inline-block;
margin-bottom: .5rem;
}
margin-bottom: .5rem; }
input,
button,
select,
textarea {
margin: 0;
line-height: inherit;
}
line-height: inherit; }
textarea {
resize: vertical;
}
resize: vertical; }
fieldset {
min-width: 0;
padding: 0;
margin: 0;
border: 0;
}
border: 0; }
legend {
display: block;
@ -396,14 +315,12 @@ legend {
padding: 0;
margin-bottom: .5rem;
font-size: 1.5rem;
line-height: inherit;
}
line-height: inherit; }
input[type="search"] {
-webkit-appearance: none;
}
-webkit-appearance: none; }
output {
display: inline-block;
}
/*# sourceMappingURL=bootstrap-reboot.css.map */
display: inline-block; }
/*# sourceMappingURL=bootstrap-reboot.css.map */

File diff suppressed because one or more lines are too long

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long

View file

@ -1,18 +1,11 @@
<header class="navbar navbar-static-top bd-sidebar" id="top" role="banner">
<a href="{{ site.baseurl }}/" class="navbar-brand">
Bootstrap 4 Alpha
</a>
<button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#docsNavbarContent">
&#9776;
</button>
<div class="bd-sidebar">
<form class="bd-search hidden-sm-down">
<input type="text" class="form-control" id="search-input" placeholder="Search...">
<ul class="dropdown-menu bd-search-results" id="search-results"></ul>
</form>
<nav class="bd-links collapse navbar-toggleable-xs" id="docsNavbarContent">
<nav class="bd-links" id="docsNavbarContent">
{% for group in site.data.nav %}
{% assign link = group.pages | first %}
{% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
@ -64,4 +57,4 @@
</div>
{% endfor %}
</nav>
</header>
</div>

View file

@ -2,10 +2,15 @@
layout: default
---
{% include nav-docs.html %}
<div class="bd-container bd-content">
{% include ads.html %}
<h1 class="bd-title">{{ page.title }}</h1>
{{ content }}
<div class="container">
<div class="row">
<div class="col-sm-3 col-sm-push-9 bd-sidebar">
{% include nav-docs.html %}
</div>
<div class="col-sm-9 col-sm-pull-3 bd-content">
{% include ads.html %}
<h1 class="bd-title">{{ page.title }}</h1>
{{ content }}
</div>
</div>
</div>

View file

@ -5,7 +5,7 @@
* details, see http://creativecommons.org/licenses/by/3.0/.
*/
.bd-docs {
padding-top: 3.7rem; }
padding-top: 5rem; }
.bd-container {
position: relative;
@ -61,50 +61,6 @@
#markdown-toc > li:first-child {
display: none; }
.bd-sidebar {
padding: 0;
margin-bottom: 0;
background-color: #fafafa; }
.bd-sidebar .navbar-toggler {
position: absolute;
top: 1rem;
right: 0;
z-index: 5; }
.bd-sidebar .navbar-header {
float: none;
margin-right: -15px; }
.bd-sidebar .navbar-collapse {
padding: 0;
border: 0; }
@media (min-width: 992px) {
.bd-docs {
margin-left: 240px; }
.bd-sidebar {
position: fixed;
top: 3.7rem;
bottom: 0;
left: 0;
width: 240px;
overflow-y: auto;
border-right: 1px solid #eee;
-webkit-transform: translated3d(0, 0, 0); } }
.bd-sidebar .navbar-brand {
display: block;
float: none;
height: auto;
padding: 1.55rem 1.25rem;
font-size: 20px;
font-weight: 500;
line-height: 1; }
.bd-sidebar-brand:hover,
.bd-sidebar-brand:focus {
text-decoration: none; }
.bd-search {
position: relative;
margin-right: 1.25rem;

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,6 @@
.bd-docs {
padding-top: 3.7rem;
padding-top: 5rem;
}
// Custom container

View file

@ -3,59 +3,59 @@
//
.bd-sidebar {
padding: 0;
margin-bottom: 0;
background-color: #fafafa;
// padding: 0;
// margin-bottom: 0;
// background-color: #fafafa;
.navbar-toggler {
position: absolute;
top: 1rem;
right: 0;
z-index: 5;
}
// .navbar-toggler {
// position: absolute;
// top: 1rem;
// right: 0;
// z-index: 5;
// }
}
.bd-sidebar .navbar-header {
float: none;
margin-right: -15px;
}
// .bd-sidebar .navbar-header {
// float: none;
// margin-right: -15px;
// }
//
// .bd-sidebar .navbar-collapse {
// padding: 0;
// border: 0;
// }
.bd-sidebar .navbar-collapse {
padding: 0;
border: 0;
}
@media (min-width: 992px) {
.bd-docs {
margin-left: 240px;
}
.bd-sidebar {
position: fixed;
top: 3.7rem;
bottom: 0;
left: 0;
width: 240px;
overflow-y: auto;
border-right: 1px solid #eee;
-webkit-transform: translated3d(0,0,0); // Ensure proper scrolling of sidebar
}
}
.bd-sidebar .navbar-brand {
display: block;
float: none;
height: auto;
padding: 1.55rem 1.25rem;
font-size: 20px;
font-weight: 500;
line-height: 1;
// color: #fff;
}
.bd-sidebar-brand:hover,
.bd-sidebar-brand:focus {
// color: #fff;
text-decoration: none;
}
// @media (min-width: 992px) {
// .bd-docs {
// margin-left: 240px;
// }
// .bd-sidebar {
// position: fixed;
// top: 3.7rem;
// bottom: 0;
// left: 0;
// width: 240px;
// overflow-y: auto;
// border-right: 1px solid #eee;
// -webkit-transform: translated3d(0,0,0); // Ensure proper scrolling of sidebar
// }
// }
//
// .bd-sidebar .navbar-brand {
// display: block;
// float: none;
// height: auto;
// padding: 1.55rem 1.25rem;
// font-size: 20px;
// font-weight: 500;
// line-height: 1;
// // color: #fff;
// }
// .bd-sidebar-brand:hover,
// .bd-sidebar-brand:focus {
// // color: #fff;
// text-decoration: none;
// }
.bd-search {
position: relative;

View file

@ -53,8 +53,6 @@ $spacer: 1rem !default;
$spacer-x: $spacer !default;
$spacer-y: $spacer !default;
$border-width: (1 / $font-size-root)rem !default;
// Typography
//
@ -87,6 +85,8 @@ $headings-font-weight: 500 !default;
$headings-line-height: 1.1 !default;
$headings-color: inherit !default;
$border-width: .0625rem !default;
// Components
//