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

More reboot work, commenting out things that have been moved over

Browse Source
This commit is contained in:
Mark Otto 2015-04-17 00:22:35 -07:00
parent af9ab7b1a7
commit 7049a07444
11 changed files with 170 additions and 332 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

79
dist/css/bootstrap.css
View File

@ -405,12 +405,11 @@ legend {
} }
input[type="search"] { input[type="search"] {
-webkit-box-sizing: border-box; -webkit-appearance: none;
box-sizing: border-box;
} }
output { output {
display: block; display: inline-block;
} }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
@ -440,17 +439,17 @@ h4 small, h4 .small, .h4 small, .h4 .small, h5 small, h5 .small, .h5 small, .h5
} }
h1, .h1 { h1, .h1 {
font-size: 3rem;
}
h2, .h2 {
font-size: 2.5rem; font-size: 2.5rem;
} }
h3, .h3 { h2, .h2 {
font-size: 2rem; font-size: 2rem;
} }
h3, .h3 {
font-size: 1.75rem;
}
h4, .h4 { h4, .h4 {
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -515,39 +514,6 @@ mark, .mark {
text-transform: uppercase; text-transform: uppercase;
} }
blockquote {
padding: .5rem 1rem;
margin-bottom: 1rem;
font-size: 1.25rem;
border-left: .25rem solid #eceeef;
}
blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child {
margin-bottom: 0;
}
blockquote footer {
display: block;
font-size: 80%;
line-height: 1.5;
color: #818a91;
}
blockquote footer:before {
content: "\2014 \00A0";
}
.blockquote-reverse {
padding-right: 1rem;
padding-left: 0;
text-align: right;
border-right: .25rem solid #eceeef;
border-left: 0;
}
.blockquote-reverse footer:before {
content: "";
}
.blockquote-reverse footer:after {
content: "\00A0 \2014";
}
.img-responsive, .carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img { .img-responsive, .carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img {
display: block; display: block;
max-width: 100%; max-width: 100%;
@ -1688,25 +1654,6 @@ label {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
input[type="radio"], input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal;
}
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
output {
padding-top: 1.5rem;
font-size: 1rem;
line-height: 1.5;
color: #55595c;
}
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
@ -1761,18 +1708,6 @@ input[type="search"] {
-webkit-appearance: none; -webkit-appearance: none;
} }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
line-height: 2.65rem;
}
input[type="date"].input-sm, .input-group-sm > input[type="date"].form-control, .input-group-sm > input[type="date"].input-group-addon, .input-group-sm > .input-group-btn > input[type="date"].btn, .input-group-sm input[type="date"], input[type="time"].input-sm, .input-group-sm > input[type="time"].form-control, .input-group-sm > input[type="time"].input-group-addon, .input-group-sm > .input-group-btn > input[type="time"].btn, .input-group-sm input[type="time"], input[type="datetime-local"].input-sm, .input-group-sm > input[type="datetime-local"].form-control, .input-group-sm > input[type="datetime-local"].input-group-addon, .input-group-sm > .input-group-btn > input[type="datetime-local"].btn, .input-group-sm input[type="datetime-local"], input[type="month"].input-sm, .input-group-sm > input[type="month"].form-control, .input-group-sm > input[type="month"].input-group-addon, .input-group-sm > .input-group-btn > input[type="month"].btn, .input-group-sm input[type="month"] {
line-height: 2.025rem;
}
input[type="date"].input-lg, .input-group-lg > input[type="date"].form-control, .input-group-lg > input[type="date"].input-group-addon, .input-group-lg > .input-group-btn > input[type="date"].btn, .input-group-lg input[type="date"], input[type="time"].input-lg, .input-group-lg > input[type="time"].form-control, .input-group-lg > input[type="time"].input-group-addon, .input-group-lg > .input-group-btn > input[type="time"].btn, .input-group-lg input[type="time"], input[type="datetime-local"].input-lg, .input-group-lg > input[type="datetime-local"].form-control, .input-group-lg > input[type="datetime-local"].input-group-addon, .input-group-lg > .input-group-btn > input[type="datetime-local"].btn, .input-group-lg input[type="datetime-local"], input[type="month"].input-lg, .input-group-lg > input[type="month"].form-control, .input-group-lg > input[type="month"].input-group-addon, .input-group-lg > .input-group-btn > input[type="month"].btn, .input-group-lg input[type="month"] {
line-height: 3.316667rem;
}
}
.form-group { .form-group {
margin-bottom: 15px; margin-bottom: 15px;
} }

2
dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

4
docs/_data/nav.yml
View File

@ -77,8 +77,10 @@
- title: Page defaults - title: Page defaults
- title: Headings and paragraphs - title: Headings and paragraphs
- title: Lists - title: Lists
- title: Preformatted text
- title: Tables - title: Tables
- title: Code blocks - title: Forms
- title: Misc elements
- title: Jumbotron - title: Jumbotron
- title: Page header - title: Page header
- title: Custom forms - title: Custom forms

179
docs/components/reboot.md
View File

@ -97,6 +97,20 @@ For simpler styling, clear hierarchy, and better spacing, description lists have
{% endmarkdown %} {% endmarkdown %}
</div> </div>
## Preformatted text
The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
<div class="bd-example">
{% markdown %}
<pre>
.element {
margin-bottom: 1rem;
}
</pre>
{% endmarkdown %}
</div>
## Tables ## Tables
Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout. Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout.
@ -137,99 +151,19 @@ Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-a
</table> </table>
</div> </div>
## Code blocks ## Forms
The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`. Various form elements have been rebooted for simpler base styles. Here are some of the most notable changes:
<div class="bd-example"> - `<fieldset>`s have no borders, padding, or margin so they can be easily used as wrappers for individual inputs or groups of inputs.
{% markdown %} = `<legend>`s, like fieldsets, have also been restyled to be displayed as a heading of sorts.
<pre> - `<label>`s are set to `display: inline-block` to allow `margin` to be applied.
.element { - `<input>`s, `<selects>`s, `<textareas>`s, and `<buttons>`s are mostly addressed by Normalize, but Reboot removes their `margin` and sets `line-height: inherit`, too.
margin-bottom: 1rem; - `<textarea>`s are modified to only be resizeble vertically as horizontal resizing often "breaks" page layout.
}
</pre>
{% endmarkdown %}
</div>
These changes, and more, are demonstrated below.
## Inline elements <form class="bd-example">
<div class="bd-example">
{% markdown %}
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. For example, `<section>` should be wrapped as inline. Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus.
{% endmarkdown %}
</div>
<h1>Address</h1>
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
<hr>
<h1>Blockquote</h1>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
<hr>
<h1>Tables</h1>
<table>
<caption>
This is an example table, and this is it's caption to describe the contents.
</caption>
<thead>
<tr>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
<th>Table heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
<tr>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
<td>Table cell</td>
</tr>
</tbody>
</table>
<hr>
<h1>Forms</h1>
<form>
<fieldset> <fieldset>
<legend>Example legend</legend> <legend>Example legend</legend>
@ -255,14 +189,14 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. For example,
</select> </select>
</p> </p>
<formgroup> <p>
<label> <label>
<input type="checkbox" value=""> <input type="checkbox" value="">
Check this checkbox Check this checkbox
</label> </label>
</formgroup> </p>
<formgroup> <p>
<label> <label>
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked> <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Option one is this and that Option one is this and that
@ -275,33 +209,23 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. For example,
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled> <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
Option three is disabled Option three is disabled
</label> </label>
</formgroup> </p>
<p> <p>
<label for="textarea">Example textarea</label> <label for="textarea">Example textarea</label>
<textarea id="example" rows="3"></textarea> <textarea id="example" rows="3"></textarea>
</p> </p>
<p>
<label for="file">Example file</label>
<input type="file">
</p>
<p>
<label for="progress">Example progress bar</label>
<progress value="25" min="0" max="100"></progress>
</p>
<p>
<label for="range">Example range</label>
<input type="range">
</p>
<p> <p>
<label for="time">Example temporal</label> <label for="time">Example temporal</label>
<input type="date"> <input type="date">
</p> </p>
<p>
<label for="time">Example output</label>
<output name="result">100</output>
</p>
<p> <p>
<button type="submit">Button submit</button> <button type="submit">Button submit</button>
<input type="submit" value="Input submit button"> <input type="submit" value="Input submit button">
@ -315,3 +239,42 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et. For example,
</p> </p>
</fieldset> </fieldset>
</form> </form>
## Misc elements
### Address
The `<address>` element is updated to reset the browser default `font-style` from `italic` to `normal`. `line-height` is also now inherited, and `margin-bottom: 1rem` has been added.
<div class="bd-example">
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">first.last@example.com</a>
</address>
</div>
### Blockquote
The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem` for something more consistent with other elements.
<div class="bd-example">
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>
</div>
### Inline elements
The `<abbr>` element receives basic styling to make it stand the amongst paragraph text.
<div class="bd-example">
Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
</div>

79
docs/dist/css/bootstrap.css
View File

@ -405,12 +405,11 @@ legend {
} }
input[type="search"] { input[type="search"] {
-webkit-box-sizing: border-box; -webkit-appearance: none;
box-sizing: border-box;
} }
output { output {
display: block; display: inline-block;
} }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
@ -440,17 +439,17 @@ h4 small, h4 .small, .h4 small, .h4 .small, h5 small, h5 .small, .h5 small, .h5
} }
h1, .h1 { h1, .h1 {
font-size: 3rem;
}
h2, .h2 {
font-size: 2.5rem; font-size: 2.5rem;
} }
h3, .h3 { h2, .h2 {
font-size: 2rem; font-size: 2rem;
} }
h3, .h3 {
font-size: 1.75rem;
}
h4, .h4 { h4, .h4 {
font-size: 1.5rem; font-size: 1.5rem;
} }
@ -515,39 +514,6 @@ mark, .mark {
text-transform: uppercase; text-transform: uppercase;
} }
blockquote {
padding: .5rem 1rem;
margin-bottom: 1rem;
font-size: 1.25rem;
border-left: .25rem solid #eceeef;
}
blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child {
margin-bottom: 0;
}
blockquote footer {
display: block;
font-size: 80%;
line-height: 1.5;
color: #818a91;
}
blockquote footer:before {
content: "\2014 \00A0";
}
.blockquote-reverse {
padding-right: 1rem;
padding-left: 0;
text-align: right;
border-right: .25rem solid #eceeef;
border-left: 0;
}
.blockquote-reverse footer:before {
content: "";
}
.blockquote-reverse footer:after {
content: "\00A0 \2014";
}
.img-responsive, .carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img { .img-responsive, .carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img {
display: block; display: block;
max-width: 100%; max-width: 100%;
@ -1688,25 +1654,6 @@ label {
margin-bottom: .5rem; margin-bottom: .5rem;
} }
input[type="radio"], input[type="checkbox"] {
margin: 4px 0 0;
margin-top: 1px \9;
line-height: normal;
}
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
}
output {
padding-top: 1.5rem;
font-size: 1rem;
line-height: 1.5;
color: #55595c;
}
.form-control { .form-control {
display: block; display: block;
width: 100%; width: 100%;
@ -1761,18 +1708,6 @@ input[type="search"] {
-webkit-appearance: none; -webkit-appearance: none;
} }
@media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"] {
line-height: 2.65rem;
}
input[type="date"].input-sm, .input-group-sm > input[type="date"].form-control, .input-group-sm > input[type="date"].input-group-addon, .input-group-sm > .input-group-btn > input[type="date"].btn, .input-group-sm input[type="date"], input[type="time"].input-sm, .input-group-sm > input[type="time"].form-control, .input-group-sm > input[type="time"].input-group-addon, .input-group-sm > .input-group-btn > input[type="time"].btn, .input-group-sm input[type="time"], input[type="datetime-local"].input-sm, .input-group-sm > input[type="datetime-local"].form-control, .input-group-sm > input[type="datetime-local"].input-group-addon, .input-group-sm > .input-group-btn > input[type="datetime-local"].btn, .input-group-sm input[type="datetime-local"], input[type="month"].input-sm, .input-group-sm > input[type="month"].form-control, .input-group-sm > input[type="month"].input-group-addon, .input-group-sm > .input-group-btn > input[type="month"].btn, .input-group-sm input[type="month"] {
line-height: 2.025rem;
}
input[type="date"].input-lg, .input-group-lg > input[type="date"].form-control, .input-group-lg > input[type="date"].input-group-addon, .input-group-lg > .input-group-btn > input[type="date"].btn, .input-group-lg input[type="date"], input[type="time"].input-lg, .input-group-lg > input[type="time"].form-control, .input-group-lg > input[type="time"].input-group-addon, .input-group-lg > .input-group-btn > input[type="time"].btn, .input-group-lg input[type="time"], input[type="datetime-local"].input-lg, .input-group-lg > input[type="datetime-local"].form-control, .input-group-lg > input[type="datetime-local"].input-group-addon, .input-group-lg > .input-group-btn > input[type="datetime-local"].btn, .input-group-lg input[type="datetime-local"], input[type="month"].input-lg, .input-group-lg > input[type="month"].form-control, .input-group-lg > input[type="month"].input-group-addon, .input-group-lg > .input-group-btn > input[type="month"].btn, .input-group-lg input[type="month"] {
line-height: 3.316667rem;
}
}
.form-group { .form-group {
margin-bottom: 15px; margin-bottom: 15px;
} }

2
docs/dist/css/bootstrap.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
docs/dist/css/bootstrap.min.css vendored
View File

File diff suppressed because one or more lines are too long

68
scss/_forms.scss
View File

@ -31,13 +31,13 @@ label {
// box-sizing: border-box; // box-sizing: border-box;
// } // }
// Position radios and checkboxes better // // Position radios and checkboxes better
input[type="radio"], // input[type="radio"],
input[type="checkbox"] { // input[type="checkbox"] {
margin: 4px 0 0; // margin: 4px 0 0;
margin-top: 1px \9; // IE9 // margin-top: 1px \9; // IE9
line-height: normal; // line-height: normal;
} // }
// // Set the height of file controls to match text inputs // // Set the height of file controls to match text inputs
// input[type="file"] { // input[type="file"] {
@ -57,20 +57,20 @@ input[type="checkbox"] {
// } // }
// Focus for file, radio, and checkbox // Focus for file, radio, and checkbox
input[type="file"]:focus, // input[type="file"]:focus,
input[type="radio"]:focus, // input[type="radio"]:focus,
input[type="checkbox"]:focus { // input[type="checkbox"]:focus {
@include tab-focus(); // @include tab-focus();
} // }
// Adjust output element // Adjust output element
output { // output {
// display: block; // display: block;
padding-top: ($padding-base-vertical + 1); // padding-top: ($padding-base-vertical + 1);
font-size: $font-size-base; // font-size: $font-size-base;
line-height: $line-height-base; // line-height: $line-height-base;
color: $input-color; // color: $input-color;
} // }
// //
@ -166,24 +166,24 @@ input[type="search"] {
// set a pixel line-height that matches the given height of the input, but only // set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848 // for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
@media screen and (-webkit-min-device-pixel-ratio: 0) { // @media screen and (-webkit-min-device-pixel-ratio: 0) {
input[type="date"], // input[type="date"],
input[type="time"], // input[type="time"],
input[type="datetime-local"], // input[type="datetime-local"],
input[type="month"] { // input[type="month"] {
line-height: $input-height-base; // line-height: $input-height-base;
&.input-sm, // &.input-sm,
.input-group-sm & { // .input-group-sm & {
line-height: $input-height-sm; // line-height: $input-height-sm;
} // }
&.input-lg, // &.input-lg,
.input-group-lg & { // .input-group-lg & {
line-height: $input-height-lg; // line-height: $input-height-lg;
} // }
} // }
} // }
// Form groups // Form groups

9
scss/_reboot.scss
View File

@ -271,13 +271,16 @@ legend {
} }
input[type="search"] { input[type="search"] {
// Under the `content-box` in Normalize as `*` isn't specific enough. // This overrides the extra rounded corners on search inputs in iOS so that our
box-sizing: border-box; // `.form-control` class can properly style them. Note that this cannot simply
// be added to `.form-control` as it's not specific enough. For details, see
// https://github.com/twbs/bootstrap/issues/11586.
-webkit-appearance: none;
} }
// todo: needed? // todo: needed?
output { output {
display: block; display: inline-block;
// font-size: $font-size-base; // font-size: $font-size-base;
// line-height: $line-height-base; // line-height: $line-height-base;
// color: $input-color; // color: $input-color;

76
scss/_type.scss
View File

@ -176,49 +176,49 @@ mark,
text-transform: uppercase; text-transform: uppercase;
} }
// Blockquotes // // Blockquotes
blockquote { // blockquote {
padding: ($spacer / 2) $spacer; // padding: ($spacer / 2) $spacer;
margin-bottom: $spacer; // margin-bottom: $spacer;
font-size: $blockquote-font-size; // font-size: $blockquote-font-size;
border-left: .25rem solid $blockquote-border-color; // border-left: .25rem solid $blockquote-border-color;
p, // p,
ul, // ul,
ol { // ol {
&:last-child { // &:last-child {
margin-bottom: 0; // margin-bottom: 0;
} // }
} // }
footer { // footer {
display: block; // display: block;
font-size: 80%; // back to default font-size // font-size: 80%; // back to default font-size
line-height: $line-height-base; // line-height: $line-height-base;
color: $blockquote-small-color; // color: $blockquote-small-color;
&:before { // &:before {
content: "\2014 \00A0"; // em dash, nbsp // content: "\2014 \00A0"; // em dash, nbsp
} // }
} // }
} // }
// Opposite alignment of blockquote // // Opposite alignment of blockquote
.blockquote-reverse { // .blockquote-reverse {
padding-right: $spacer; // padding-right: $spacer;
padding-left: 0; // padding-left: 0;
text-align: right; // text-align: right;
border-right: .25rem solid $blockquote-border-color; // border-right: .25rem solid $blockquote-border-color;
border-left: 0; // border-left: 0;
// Account for citation // // Account for citation
footer { // footer {
&:before { content: ""; } // &:before { content: ""; }
&:after { // &:after {
content: "\00A0 \2014"; // nbsp, em dash // content: "\00A0 \2014"; // nbsp, em dash
} // }
} // }
} // }
// // Addresses // // Addresses
// address { // address {