mirror of https://github.com/twbs/bootstrap.git
start stubbing out a new reboot section and file
This commit is contained in:
Mark Otto
parent
7001dece8a
commit
06c2862d25
|
|
@ -285,12 +285,49 @@ body {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, button, select, textarea {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: inherit;
|
margin-top: 0;
|
||||||
font-size: inherit;
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
cursor: help;
|
||||||
|
border-bottom-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-style: normal;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ol, ul, dl {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol ol, ul ul, ol ul, ul ol {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #0275d8;
|
color: #0275d8;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -305,44 +342,73 @@ a:focus {
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-rounded {
|
|
||||||
border-radius: .3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-thumbnail {
|
|
||||||
padding: .25rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: .25rem;
|
|
||||||
-webkit-transition: all .2s ease-in-out;
|
|
||||||
-o-transition: all .2s ease-in-out;
|
|
||||||
transition: all .2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-circle {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
border: 0;
|
|
||||||
border-top: .0625rem solid #eceeef;
|
|
||||||
}
|
|
||||||
|
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
padding-top: .75rem;
|
||||||
|
padding-bottom: .75rem;
|
||||||
|
color: #818a91;
|
||||||
|
text-align: left;
|
||||||
|
caption-side: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button, select, textarea {
|
||||||
|
margin: 0;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
output {
|
||||||
|
display: 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 {
|
||||||
margin-top: 0;
|
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
|
|
@ -392,16 +458,18 @@ h6, .h6 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border: 0;
|
||||||
|
border-top: .0625rem solid #eceeef;
|
||||||
|
}
|
||||||
|
|
||||||
small, .small {
|
small, .small {
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
}
|
}
|
||||||
|
|
@ -411,14 +479,6 @@ mark, .mark {
|
||||||
background-color: #fcf8e3;
|
background-color: #fcf8e3;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul, ol {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: .5;
|
|
||||||
}
|
|
||||||
ul ul, ul ol, ol ul, ol ol {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-unstyled, .list-inline, .nav {
|
.list-unstyled, .list-inline, .nav {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
@ -433,23 +493,6 @@ ul ul, ul ol, ol ul, ol ol {
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
dl {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt, dd {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl-horizontal {
|
.dl-horizontal {
|
||||||
margin-right: -1.5rem;
|
margin-right: -1.5rem;
|
||||||
margin-left: -1.5rem;
|
margin-left: -1.5rem;
|
||||||
|
|
@ -462,11 +505,6 @@ dd {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
abbr[title], abbr[data-original-title] {
|
|
||||||
cursor: help;
|
|
||||||
border-bottom: 1px dotted #818a91;
|
|
||||||
}
|
|
||||||
|
|
||||||
.initialism {
|
.initialism {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
@ -474,7 +512,7 @@ abbr[title], abbr[data-original-title] {
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
padding: .5rem 1rem;
|
padding: .5rem 1rem;
|
||||||
margin: 0 0 1rem;
|
margin-bottom: 1rem;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
border-left: .25rem solid #eceeef;
|
border-left: .25rem solid #eceeef;
|
||||||
}
|
}
|
||||||
|
|
@ -505,10 +543,32 @@ blockquote footer:before {
|
||||||
content: "\00A0 \2014";
|
content: "\00A0 \2014";
|
||||||
}
|
}
|
||||||
|
|
||||||
address {
|
.img-responsive, .carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img {
|
||||||
margin-bottom: 1;
|
display: block;
|
||||||
font-style: normal;
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-rounded {
|
||||||
|
border-radius: .3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-thumbnail {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
padding: .25rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: .25rem;
|
||||||
|
-webkit-transition: all .2s ease-in-out;
|
||||||
|
-o-transition: all .2s ease-in-out;
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-circle {
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
code, kbd, pre, samp {
|
code, kbd, pre, samp {
|
||||||
|
|
@ -1468,21 +1528,6 @@ pre code {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
caption {
|
|
||||||
padding-top: .75rem;
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
color: #818a91;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
@ -1634,33 +1679,8 @@ th {
|
||||||
border: 1px solid #eceeef;
|
border: 1px solid #eceeef;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 1;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: inherit;
|
|
||||||
color: #373a3c;
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: inline-block;
|
margin-bottom: .5rem;
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="search"] {
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"], input[type="checkbox"] {
|
input[type="radio"], input[type="checkbox"] {
|
||||||
|
|
@ -1669,19 +1689,6 @@ input[type="radio"], input[type="checkbox"] {
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="file"] {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
select[multiple], select[size] {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
|
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
|
||||||
outline: thin dotted;
|
outline: thin dotted;
|
||||||
outline: 5px auto -webkit-focus-ring-color;
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
|
|
@ -1689,7 +1696,6 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focu
|
||||||
}
|
}
|
||||||
|
|
||||||
output {
|
output {
|
||||||
display: block;
|
|
||||||
padding-top: 1.5rem;
|
padding-top: 1.5rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
@ -2095,7 +2101,6 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: .5rem .75rem;
|
padding: .5rem .75rem;
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,305 @@
|
||||||
|
---
|
||||||
|
layout: page
|
||||||
|
title: Reboot
|
||||||
|
---
|
||||||
|
|
||||||
|
Several HTML elements are "rebooted" by Bootstrap for a more logical starting point and easier customization. This reboot builds upon Normalize, and as such, only uses element selectors to add our own opinionated resets.
|
||||||
|
|
||||||
|
## Approach
|
||||||
|
|
||||||
|
Here are our guidelines for choosing what to override in our reboot:
|
||||||
|
|
||||||
|
- Only use `rem`s and `em`s as the global units whenever possible.
|
||||||
|
- Avoid `margin-top` whenever possible. Vertical margins often collapse, sometimes yielding unexpected results. Moreover, a single direction of `margin` is an easier and quicker mental model to adopt.
|
||||||
|
|
||||||
|
|
||||||
|
## Headings and paragaphs
|
||||||
|
|
||||||
|
All heading elements—e.g., `<h1>`—and `<p>` are reset to have their `margin-top` removed. Headings have `margin-bottom: .5rem` added and paragraphs `margin-bottom: 1rem` for easy spacing.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
{% markdown %}
|
||||||
|
# h1 heading
|
||||||
|
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
||||||
|
|
||||||
|
## h2 heading
|
||||||
|
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
||||||
|
|
||||||
|
### h3 heading
|
||||||
|
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
||||||
|
|
||||||
|
#### h4 heading
|
||||||
|
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
||||||
|
|
||||||
|
##### h5 heading
|
||||||
|
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
||||||
|
|
||||||
|
###### h6 heading
|
||||||
|
Curabitur blandit tempus porttitor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
|
||||||
|
{% endmarkdown %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Lists
|
||||||
|
|
||||||
|
All lists—`<ul>`, `<ol>`, and `<dl>`—have their `margin-top` removed and a `margin-bottom: 1rem`. Nested lists have no `margin-bottom`.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
{% markdown %}
|
||||||
|
* Lorem ipsum dolor sit amet
|
||||||
|
* Consectetur adipiscing elit
|
||||||
|
* Integer molestie lorem at massa
|
||||||
|
* Facilisis in pretium nisl aliquet
|
||||||
|
* Nulla volutpat aliquam velit
|
||||||
|
* Phasellus iaculis neque
|
||||||
|
* Purus sodales ultricies
|
||||||
|
* Vestibulum laoreet porttitor sem
|
||||||
|
* Ac tristique libero volutpat at
|
||||||
|
* Faucibus porta lacus fringilla vel
|
||||||
|
* Aenean sit amet erat nunc
|
||||||
|
* Eget porttitor lorem
|
||||||
|
|
||||||
|
1. Lorem ipsum dolor sit amet
|
||||||
|
2. Consectetur adipiscing elit
|
||||||
|
3. Integer molestie lorem at massa
|
||||||
|
4. Facilisis in pretium nisl aliquet
|
||||||
|
5. Nulla volutpat aliquam velit
|
||||||
|
6. Faucibus porta lacus fringilla vel
|
||||||
|
7. Aenean sit amet erat nunc
|
||||||
|
8. Eget porttitor lorem
|
||||||
|
{% endmarkdown %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
For simpler styling, clear hierarchy, and better spacing, description lists have updated `margin`s. `<dd>`s reset `margin-left` to `0` and add `margin-bottom: .5rem`. `<dt>`s are **bolded**.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
{% markdown %}
|
||||||
|
<dl>
|
||||||
|
<dt>Description lists</dt>
|
||||||
|
<dd>A description list is perfect for defining terms.</dd>
|
||||||
|
<dt>Euismod</dt>
|
||||||
|
<dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
|
||||||
|
<dd>Donec id elit non mi porta gravida at eget metus.</dd>
|
||||||
|
<dt>Malesuada porta</dt>
|
||||||
|
<dd>Etiam porta sem malesuada magna mollis euismod.</dd>
|
||||||
|
</dl>
|
||||||
|
{% endmarkdown %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Tables
|
||||||
|
|
||||||
|
Tables are slightly adjusted to style `<caption>`s and ensure consistent `text-align` throughout.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
<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>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
## Code blocks
|
||||||
|
|
||||||
|
The `<pre>` element is reset to remove its `margin-top` and use `rem` units for its `margin-bottom`.
|
||||||
|
|
||||||
|
<div class="bd-example">
|
||||||
|
{% markdown %}
|
||||||
|
```
|
||||||
|
pre {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
{% endmarkdown %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
## Inline elements
|
||||||
|
|
||||||
|
<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>
|
||||||
|
<legend>Example legend</legend>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="input">Example input</label>
|
||||||
|
<input type="text" id="input" placeholder="Example input">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="select">Example select</label>
|
||||||
|
<select id="select">
|
||||||
|
<option value="">Choose...</option>
|
||||||
|
<optgroup label="Option group 1">
|
||||||
|
<option value="">Option 1</option>
|
||||||
|
<option value="">Option 2</option>
|
||||||
|
<option value="">Option 3</option>
|
||||||
|
</optgroup>
|
||||||
|
<optgroup label="Option group 2">
|
||||||
|
<option value="">Option 4</option>
|
||||||
|
<option value="">Option 5</option>
|
||||||
|
<option value="">Option 6</option>
|
||||||
|
</optgroup>
|
||||||
|
</select>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<formgroup>
|
||||||
|
<label>
|
||||||
|
<input type="checkbox" value="">
|
||||||
|
Check this checkbox
|
||||||
|
</label>
|
||||||
|
</formgroup>
|
||||||
|
|
||||||
|
<formgroup>
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
|
||||||
|
Option one is this and that
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
|
||||||
|
Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
|
||||||
|
Option three is disabled
|
||||||
|
</label>
|
||||||
|
</formgroup>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label for="textarea">Example textarea</label>
|
||||||
|
<textarea id="example" rows="3"></textarea>
|
||||||
|
</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>
|
||||||
|
<label for="time">Example temporal</label>
|
||||||
|
<input type="date">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button type="submit">Button submit</button>
|
||||||
|
<input type="submit" value="Input submit button">
|
||||||
|
<input type="button" value="Input button">
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<button type="submit" disabled>Button submit</button>
|
||||||
|
<input type="submit" value="Input submit button" disabled>
|
||||||
|
<input type="button" value="Input button" disabled>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
</form>
|
||||||
|
|
@ -285,12 +285,49 @@ body {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
input, button, select, textarea {
|
h1, h2, h3, h4, h5, h6 {
|
||||||
font-family: inherit;
|
margin-top: 0;
|
||||||
font-size: inherit;
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
cursor: help;
|
||||||
|
border-bottom-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-style: normal;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ol, ul, dl {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol ol, ul ul, ol ul, ul ol {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: #0275d8;
|
color: #0275d8;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
|
@ -305,44 +342,73 @@ a:focus {
|
||||||
outline-offset: -2px;
|
outline-offset: -2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
figure {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
img {
|
img {
|
||||||
max-width: 100%;
|
|
||||||
height: auto;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.img-rounded {
|
|
||||||
border-radius: .3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-thumbnail {
|
|
||||||
padding: .25rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: .25rem;
|
|
||||||
-webkit-transition: all .2s ease-in-out;
|
|
||||||
-o-transition: all .2s ease-in-out;
|
|
||||||
transition: all .2s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img-circle {
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
margin-top: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
border: 0;
|
|
||||||
border-top: .0625rem solid #eceeef;
|
|
||||||
}
|
|
||||||
|
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
table {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
padding-top: .75rem;
|
||||||
|
padding-bottom: .75rem;
|
||||||
|
color: #818a91;
|
||||||
|
text-align: left;
|
||||||
|
caption-side: bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, button, select, textarea {
|
||||||
|
margin: 0;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
min-width: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
output {
|
||||||
|
display: 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 {
|
||||||
margin-top: 0;
|
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
line-height: 1.1;
|
line-height: 1.1;
|
||||||
|
|
@ -392,16 +458,18 @@ h6, .h6 {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
p {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
hr {
|
||||||
|
margin-top: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
border: 0;
|
||||||
|
border-top: .0625rem solid #eceeef;
|
||||||
|
}
|
||||||
|
|
||||||
small, .small {
|
small, .small {
|
||||||
font-size: 85%;
|
font-size: 85%;
|
||||||
}
|
}
|
||||||
|
|
@ -411,14 +479,6 @@ mark, .mark {
|
||||||
background-color: #fcf8e3;
|
background-color: #fcf8e3;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul, ol {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: .5;
|
|
||||||
}
|
|
||||||
ul ul, ul ol, ol ul, ol ol {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-unstyled, .list-inline, .nav {
|
.list-unstyled, .list-inline, .nav {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
|
@ -433,23 +493,6 @@ ul ul, ul ol, ol ul, ol ol {
|
||||||
padding-left: 5px;
|
padding-left: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
dl {
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt, dd {
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd {
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dl-horizontal {
|
.dl-horizontal {
|
||||||
margin-right: -1.5rem;
|
margin-right: -1.5rem;
|
||||||
margin-left: -1.5rem;
|
margin-left: -1.5rem;
|
||||||
|
|
@ -462,11 +505,6 @@ dd {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
||||||
abbr[title], abbr[data-original-title] {
|
|
||||||
cursor: help;
|
|
||||||
border-bottom: 1px dotted #818a91;
|
|
||||||
}
|
|
||||||
|
|
||||||
.initialism {
|
.initialism {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
@ -474,7 +512,7 @@ abbr[title], abbr[data-original-title] {
|
||||||
|
|
||||||
blockquote {
|
blockquote {
|
||||||
padding: .5rem 1rem;
|
padding: .5rem 1rem;
|
||||||
margin: 0 0 1rem;
|
margin-bottom: 1rem;
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
border-left: .25rem solid #eceeef;
|
border-left: .25rem solid #eceeef;
|
||||||
}
|
}
|
||||||
|
|
@ -505,10 +543,32 @@ blockquote footer:before {
|
||||||
content: "\00A0 \2014";
|
content: "\00A0 \2014";
|
||||||
}
|
}
|
||||||
|
|
||||||
address {
|
.img-responsive, .carousel-inner > .carousel-item > img, .carousel-inner > .carousel-item > a > img {
|
||||||
margin-bottom: 1;
|
display: block;
|
||||||
font-style: normal;
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-rounded {
|
||||||
|
border-radius: .3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-thumbnail {
|
||||||
|
display: inline-block;
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
padding: .25rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #ddd;
|
||||||
|
border-radius: .25rem;
|
||||||
|
-webkit-transition: all .2s ease-in-out;
|
||||||
|
-o-transition: all .2s ease-in-out;
|
||||||
|
transition: all .2s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.img-circle {
|
||||||
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
code, kbd, pre, samp {
|
code, kbd, pre, samp {
|
||||||
|
|
@ -1468,21 +1528,6 @@ pre code {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
table {
|
|
||||||
background-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
caption {
|
|
||||||
padding-top: .75rem;
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
color: #818a91;
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.table {
|
.table {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
|
|
@ -1634,33 +1679,8 @@ th {
|
||||||
border: 1px solid #eceeef;
|
border: 1px solid #eceeef;
|
||||||
}
|
}
|
||||||
|
|
||||||
fieldset {
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: 1;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: inherit;
|
|
||||||
color: #373a3c;
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid #e5e5e5;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: inline-block;
|
margin-bottom: .5rem;
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="search"] {
|
|
||||||
-webkit-box-sizing: border-box;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="radio"], input[type="checkbox"] {
|
input[type="radio"], input[type="checkbox"] {
|
||||||
|
|
@ -1669,19 +1689,6 @@ input[type="radio"], input[type="checkbox"] {
|
||||||
line-height: normal;
|
line-height: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
input[type="file"] {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="range"] {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
select[multiple], select[size] {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
|
input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focus {
|
||||||
outline: thin dotted;
|
outline: thin dotted;
|
||||||
outline: 5px auto -webkit-focus-ring-color;
|
outline: 5px auto -webkit-focus-ring-color;
|
||||||
|
|
@ -1689,7 +1696,6 @@ input[type="file"]:focus, input[type="radio"]:focus, input[type="checkbox"]:focu
|
||||||
}
|
}
|
||||||
|
|
||||||
output {
|
output {
|
||||||
display: block;
|
|
||||||
padding-top: 1.5rem;
|
padding-top: 1.5rem;
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
@ -2095,7 +2101,6 @@ textarea.input-lg, .input-group-lg > textarea.form-control, .input-group-lg > te
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
padding: .5rem .75rem;
|
padding: .5rem .75rem;
|
||||||
margin-bottom: 0;
|
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -8,7 +8,6 @@
|
||||||
|
|
||||||
.btn {
|
.btn {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
margin-bottom: 0; // For input.btn
|
|
||||||
font-weight: $btn-font-weight;
|
font-weight: $btn-font-weight;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|
|
||||||
|
|
@ -2,36 +2,21 @@
|
||||||
// Forms
|
// Forms
|
||||||
// --------------------------------------------------
|
// --------------------------------------------------
|
||||||
|
|
||||||
|
// legend {
|
||||||
|
// display: block;
|
||||||
|
// width: 100%;
|
||||||
|
// padding: 0;
|
||||||
|
// margin-bottom: $line-height-computed;
|
||||||
|
// font-size: ($font-size-base * 1.5);
|
||||||
|
// line-height: inherit;
|
||||||
|
// color: $legend-color;
|
||||||
|
// border: 0;
|
||||||
|
// border-bottom: 1px solid $legend-border-color;
|
||||||
|
// }
|
||||||
|
|
||||||
// Normalize non-controls
|
// todo: turn this into a class
|
||||||
//
|
|
||||||
// Restyle and baseline non-control form elements.
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
|
|
||||||
// so we reset that to ensure it behaves more like a standard block element.
|
|
||||||
// See https://github.com/twbs/bootstrap/issues/12359.
|
|
||||||
min-width: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
border: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
margin-bottom: $line-height-computed;
|
|
||||||
font-size: ($font-size-base * 1.5);
|
|
||||||
line-height: inherit;
|
|
||||||
color: $legend-color;
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid $legend-border-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
label {
|
label {
|
||||||
display: inline-block;
|
margin-bottom: .5rem;
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -41,10 +26,10 @@ label {
|
||||||
// is required to ensure optimum display with or without those classes to better
|
// is required to ensure optimum display with or without those classes to better
|
||||||
// address browser inconsistencies.
|
// address browser inconsistencies.
|
||||||
|
|
||||||
// Override content-box in Normalize (* isn't specific enough)
|
// // Override content-box in Normalize (* isn't specific enough)
|
||||||
input[type="search"] {
|
// input[type="search"] {
|
||||||
box-sizing: border-box;
|
// box-sizing: border-box;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Position radios and checkboxes better
|
// Position radios and checkboxes better
|
||||||
input[type="radio"],
|
input[type="radio"],
|
||||||
|
|
@ -54,22 +39,22 @@ input[type="checkbox"] {
|
||||||
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"] {
|
||||||
display: block;
|
// display: block;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Make range inputs behave like textual form controls
|
// // Make range inputs behave like textual form controls
|
||||||
input[type="range"] {
|
// input[type="range"] {
|
||||||
display: block;
|
// display: block;
|
||||||
width: 100%;
|
// width: 100%;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Make multiple select elements height not fixed
|
// // Make multiple select elements height not fixed
|
||||||
select[multiple],
|
// select[multiple],
|
||||||
select[size] {
|
// select[size] {
|
||||||
height: auto;
|
// height: auto;
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Focus for file, radio, and checkbox
|
// Focus for file, radio, and checkbox
|
||||||
input[type="file"]:focus,
|
input[type="file"]:focus,
|
||||||
|
|
@ -80,7 +65,7 @@ input[type="checkbox"]: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;
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,16 @@
|
||||||
|
|
||||||
// Reset the box-sizing
|
// Reset the box-sizing
|
||||||
//
|
//
|
||||||
|
// Change from `box-sizing: content-box` to `border-box` so that when you add
|
||||||
|
// `padding` or `border`s to an element, the overall declared `width` does not
|
||||||
|
// change. For example, `width: 100px;` will always be `100px` despite the
|
||||||
|
// `border: 10px solid red;` and `padding: 20px;`.
|
||||||
|
//
|
||||||
// Heads up! This reset may cause conflicts with some third-party widgets. For
|
// Heads up! This reset may cause conflicts with some third-party widgets. For
|
||||||
// recommendations on resolving such conflicts, see
|
// recommendations on resolving such conflicts, see
|
||||||
// http://getbootstrap.com/getting-started/#third-box-sizing.
|
// http://getbootstrap.com/getting-started/#third-box-sizing.
|
||||||
//
|
//
|
||||||
// Credit: Jon Neal & CSS-Tricks
|
// Credit: shttp://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
||||||
// http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
|
|
||||||
|
|
||||||
html {
|
html {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
|
@ -45,32 +49,93 @@ html {
|
||||||
@viewport { width: device-width; }
|
@viewport { width: device-width; }
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
// Reset HTML, body, and more
|
// Reset HTML, body, and more
|
||||||
|
//
|
||||||
|
|
||||||
html {
|
html {
|
||||||
|
// Sets a specific default `font-size` for user with `rem` type scales.
|
||||||
font-size: $font-size-root;
|
font-size: $font-size-root;
|
||||||
|
// Changes the default tap highlight to be completely transparent in iOS.
|
||||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body {
|
||||||
|
// Make the `body` use the `font-size-root`
|
||||||
font-family: $font-family-base;
|
font-family: $font-family-base;
|
||||||
font-size: $font-size-base;
|
font-size: $font-size-base;
|
||||||
line-height: $line-height-base;
|
line-height: $line-height-base;
|
||||||
|
// Go easy on the eyes and use something other than `#000` for text
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
|
// By default, `<body>` has no `background-color` so we set one as a best practice.
|
||||||
background-color: $body-bg;
|
background-color: $body-bg;
|
||||||
}
|
}
|
||||||
|
|
||||||
input,
|
|
||||||
button,
|
//
|
||||||
select,
|
// Typography
|
||||||
textarea {
|
//
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
// Remove top margins from headings
|
||||||
|
//
|
||||||
|
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
|
||||||
|
// margin for easier control within type scales as it avoids margin collapsing.
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reset margins on paragraphs
|
||||||
|
//
|
||||||
|
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
|
||||||
|
// bottom margin to use `rem` units instead of `em`.
|
||||||
|
p {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
cursor: help;
|
||||||
|
border-bottom-color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
address {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
font-style: normal;
|
||||||
line-height: inherit;
|
line-height: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul,
|
||||||
|
dl {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol ol,
|
||||||
|
ul ul,
|
||||||
|
ol ul,
|
||||||
|
ul ol {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
margin-left: 0; // Undo browser default
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
blockquote {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
// Links
|
// Links
|
||||||
|
//
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $link-color;
|
color: $link-color;
|
||||||
|
|
@ -87,9 +152,37 @@ a {
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Code
|
||||||
|
//
|
||||||
|
|
||||||
|
pre {
|
||||||
|
// Remove browser default top margin
|
||||||
|
margin-top: 0;
|
||||||
|
// Reset browser default of `1em` to use `rem`s
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Figures
|
||||||
|
//
|
||||||
|
|
||||||
|
figure {
|
||||||
|
// Normalize adds `margin` to `figure`s as browsers apply it inconsistently.
|
||||||
|
// We reset that to create a better flow in-page.
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
// Images
|
// Images
|
||||||
|
//
|
||||||
|
|
||||||
img {
|
img {
|
||||||
|
// By default, `<img>`s are `inline-block`. This assumes that, and vertically
|
||||||
|
// centers them. This won't apply should you reset them to `block` level.
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -104,3 +197,88 @@ img {
|
||||||
[role="button"] {
|
[role="button"] {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Tables
|
||||||
|
//
|
||||||
|
|
||||||
|
table {
|
||||||
|
// Reset for nesting within parents with `background-color`.
|
||||||
|
background-color: $table-bg;
|
||||||
|
}
|
||||||
|
|
||||||
|
caption {
|
||||||
|
caption-side: bottom;
|
||||||
|
padding-top: $table-cell-padding;
|
||||||
|
padding-bottom: $table-cell-padding;
|
||||||
|
color: $text-muted;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
th {
|
||||||
|
// Centered by default, but left-align-ed to match the `td`s below.
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//
|
||||||
|
// Forms
|
||||||
|
//
|
||||||
|
|
||||||
|
label {
|
||||||
|
// Allow labels can use `margin` for spacing.
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
input,
|
||||||
|
button,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
// Remove all `margin`s so our classes don't have to do it themselves.
|
||||||
|
margin: 0;
|
||||||
|
// Normalize includes `font: inherit;`, so `font-family`. `font-size`, etc are
|
||||||
|
// properly inherited. However, `line-height` isn't addressed there. Using this
|
||||||
|
// ensures we don't need to unnessarily redeclare the global font stack.
|
||||||
|
line-height: inherit;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
// Textareas should really only resize vertically so they don't break their (horizontal) containers.
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
// Reset the default outline behavior of fieldsets so they don't affect page layout.
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
border: 0;
|
||||||
|
// Chrome and Firefox set a `min-width: min-content;` on fieldsets,
|
||||||
|
// so we reset that to ensure it behaves more like a standard block element.
|
||||||
|
// See https://github.com/twbs/bootstrap/issues/12359.
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
legend {
|
||||||
|
// Reset the entire legend element to match the `fieldset`
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: .5rem;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: inherit;
|
||||||
|
// border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="search"] {
|
||||||
|
// Under the `content-box` in Normalize as `*` isn't specific enough.
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
// todo: needed?
|
||||||
|
output {
|
||||||
|
display: block;
|
||||||
|
// font-size: $font-size-base;
|
||||||
|
// line-height: $line-height-base;
|
||||||
|
// color: $input-color;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,20 +2,20 @@
|
||||||
// Reset tabular elements
|
// Reset tabular elements
|
||||||
//
|
//
|
||||||
|
|
||||||
table {
|
// table {
|
||||||
background-color: $table-bg;
|
// background-color: $table-bg;
|
||||||
}
|
// }
|
||||||
|
|
||||||
caption {
|
// caption {
|
||||||
padding-top: $table-cell-padding;
|
// padding-top: $table-cell-padding;
|
||||||
padding-bottom: $table-cell-padding;
|
// padding-bottom: $table-cell-padding;
|
||||||
color: $text-muted;
|
// color: $text-muted;
|
||||||
text-align: left;
|
// text-align: left;
|
||||||
}
|
// }
|
||||||
|
|
||||||
th {
|
// th {
|
||||||
text-align: left;
|
// text-align: left;
|
||||||
}
|
// }
|
||||||
|
|
||||||
|
|
||||||
//
|
//
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,6 @@
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6,
|
h1, h2, h3, h4, h5, h6,
|
||||||
.h1, .h2, .h3, .h4, .h5, .h6 {
|
.h1, .h2, .h3, .h4, .h5, .h6 {
|
||||||
margin-top: 0;
|
|
||||||
font-family: $headings-font-family;
|
font-family: $headings-font-family;
|
||||||
font-weight: $headings-font-weight;
|
font-weight: $headings-font-weight;
|
||||||
line-height: $headings-line-height;
|
line-height: $headings-line-height;
|
||||||
|
|
@ -54,10 +53,10 @@ h6, .h6 { font-size: $font-size-h6; }
|
||||||
// Body text
|
// Body text
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
p {
|
// p {
|
||||||
margin-top: 0;
|
// margin-top: 0;
|
||||||
margin-bottom: 1rem;
|
// margin-bottom: 1rem;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.lead {
|
.lead {
|
||||||
font-size: 1.25rem;
|
font-size: 1.25rem;
|
||||||
|
|
@ -106,16 +105,16 @@ mark,
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
// Unordered and Ordered lists
|
// Unordered and Ordered lists
|
||||||
ul,
|
// ul,
|
||||||
ol {
|
// ol {
|
||||||
margin-top: 0;
|
// margin-top: 0;
|
||||||
margin-bottom: ($line-height-computed / 2);
|
// margin-bottom: ($line-height-computed / 2);
|
||||||
|
|
||||||
ul,
|
// ul,
|
||||||
ol {
|
// ol {
|
||||||
margin-bottom: 0;
|
// margin-bottom: 0;
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// List options
|
// List options
|
||||||
|
|
||||||
|
|
@ -138,20 +137,20 @@ ol {
|
||||||
}
|
}
|
||||||
|
|
||||||
// Description Lists
|
// Description Lists
|
||||||
dl {
|
// dl {
|
||||||
margin-top: 0; // Remove browser default
|
// margin-top: 0; // Remove browser default
|
||||||
margin-bottom: $line-height-computed;
|
// margin-bottom: $line-height-computed;
|
||||||
}
|
// }
|
||||||
dt,
|
// dt,
|
||||||
dd {
|
// dd {
|
||||||
line-height: $line-height-base;
|
// line-height: $line-height-base;
|
||||||
}
|
// }
|
||||||
dt {
|
// dt {
|
||||||
font-weight: bold;
|
// font-weight: bold;
|
||||||
}
|
// }
|
||||||
dd {
|
// dd {
|
||||||
margin-left: 0; // Undo browser default
|
// margin-left: 0; // Undo browser default
|
||||||
}
|
// }
|
||||||
|
|
||||||
// Horizontal description lists w/ grid classes
|
// Horizontal description lists w/ grid classes
|
||||||
.dl-horizontal {
|
.dl-horizontal {
|
||||||
|
|
@ -164,13 +163,14 @@ dd {
|
||||||
// Misc
|
// Misc
|
||||||
// -------------------------
|
// -------------------------
|
||||||
|
|
||||||
// Abbreviations and acronyms
|
// // Abbreviations and acronyms
|
||||||
abbr[title],
|
// abbr[title],
|
||||||
// Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
// // Add data-* attribute to help out our tooltip plugin, per https://github.com/twbs/bootstrap/issues/5257
|
||||||
abbr[data-original-title] {
|
// abbr[data-original-title] {
|
||||||
cursor: help;
|
// cursor: help;
|
||||||
border-bottom: 1px dotted $abbr-border-color;
|
// border-bottom: 1px dotted $abbr-border-color;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.initialism {
|
.initialism {
|
||||||
font-size: 90%;
|
font-size: 90%;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
|
|
@ -179,7 +179,7 @@ abbr[data-original-title] {
|
||||||
// Blockquotes
|
// Blockquotes
|
||||||
blockquote {
|
blockquote {
|
||||||
padding: ($spacer / 2) $spacer;
|
padding: ($spacer / 2) $spacer;
|
||||||
margin: 0 0 $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;
|
||||||
|
|
||||||
|
|
@ -220,9 +220,9 @@ blockquote {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Addresses
|
// // Addresses
|
||||||
address {
|
// address {
|
||||||
margin-bottom: $line-height-computed;
|
// margin-bottom: $line-height-computed;
|
||||||
font-style: normal;
|
// font-style: normal;
|
||||||
line-height: $line-height-base;
|
// line-height: $line-height-base;
|
||||||
}
|
// }
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue