rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-01-18 10:52:19 +01:00
Code Issues Actions Packages Releases Activity

Merge pull request #22836 from twbs/colors-redux

Browse Source 
v4: Colors redux
This commit is contained in:
Mark Otto 2017-06-30 08:58:35 -07:00 committed by GitHub
commit e51749e4a7
53 changed files with 595 additions and 616 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
_data/colors.yml Normal file
View File

@ -0,0 +1,26 @@
- name: blue
hex: "#007aff"
- name: indigo
hex: "#2b29bb"
- name: purple
hex: "#882ae0"
- name: pink
hex: "#f14095"
- name: red
hex: "#ea0242"
- name: orange
hex: "#ff8d00"
- name: yellow
hex: "#ffec00"
- name: green
hex: "#34da36"
- name: teal
hex: "#1dde8e"
- name: cyan
hex: "#08eff3"
- name: white
hex: "#fff"
- name: gray
hex: "#464a4c"
- name: gray-dark
hex: "#292b2c"

18
_data/grays.yml Normal file
View File

@ -0,0 +1,18 @@
- name: 100
hex: "#f8f9fa"
- name: 200
hex: "#ebedef"
- name: 300
hex: "#ced3d8"
- name: 400
hex: "#abb3bd"
- name: 500
hex: "#7c8a99"
- name: 600
hex: "#55626f"
- name: 700
hex: "#4a5560"
- name: 800
hex: "#384048"
- name: 900
hex: "#131619"

16
_data/theme-colors.yml Normal file
View File

@ -0,0 +1,16 @@
- name: primary
hex: "#007aff"
- name: secondary
hex: "#868e96"
- name: success
hex: "#28a745"
- name: danger
hex: "#dc3545"
- name: warning
hex: "#ffc107"
- name: info
hex: "#17a2b8"
- name: light
hex: "#f8f9fa"
- name: dark
hex: "#343a40"

2
_includes/docs-navbar.html
View File

@ -1,4 +1,4 @@
<header class="navbar navbar-inverse flex-column flex-md-row bd-navbar"> <header class="navbar navbar-dark flex-column flex-md-row bd-navbar">
<a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/" aria-label="Bootstrap"> <a class="navbar-brand mr-0 mr-md-2" href="{{ site.baseurl }}/" aria-label="Bootstrap">
{% include icons/bootstrap.svg width="36" height="36" class="d-block" %} {% include icons/bootstrap.svg width="36" height="36" class="d-block" %}
</a> </a>

24
assets/scss/_colors.scss Normal file
View File

@ -0,0 +1,24 @@
//
// Docs color palette classes
//
@each $color, $value in $colors {
.swatch-#{$color} {
background-color: #{$value};
@include color-yiq($value);
}
}
@each $color, $value in $theme-colors {
.swatch-#{$color} {
background-color: #{$value};
@include color-yiq($value);
}
}
@each $color, $value in $grays {
.swatch-#{$color} {
background-color: #{$value};
@include color-yiq($value);
}
}

29
assets/scss/_component-examples.scss
View File

@ -86,7 +86,7 @@
.bd-example-container-header { .bd-example-container-header {
height: 3rem; height: 3rem;
margin-bottom: .5rem; margin-bottom: .5rem;
background-color: lighten($brand-primary, 50%); background-color: lighten($blue, 50%);
border-radius: .25rem; border-radius: .25rem;
} }
@ -94,7 +94,7 @@
float: right; float: right;
width: 4rem; width: 4rem;
height: 8rem; height: 8rem;
background-color: lighten($brand-warning, 25%); background-color: lighten($blue, 25%);
border-radius: .25rem; border-radius: .25rem;
} }
@ -375,28 +375,11 @@
overflow: auto; overflow: auto;
} }
// Helpers
.bd-example > {
.bg-primary,
.bg-success,
.bg-info,
.bg-warning,
.bg-danger,
.bg-inverse,
.bg-faded {
&:not(.navbar) {
padding: .5rem;
margin-top: .5rem;
margin-bottom: .5rem;
}
}
}
.bd-example-border-utils { .bd-example-border-utils {
[class^="border-"] { [class^="border"] {
display: inline-block; display: inline-block;
width: 6rem; width: 5rem;
height: 6rem; height: 5rem;
margin: .25rem; margin: .25rem;
background-color: #f5f5f5; background-color: #f5f5f5;
border: 1px solid; border: 1px solid;
@ -428,5 +411,5 @@
} }
.highlight pre code { .highlight pre code {
font-size: inherit; font-size: inherit;
color: $gray-dark; // Effectively the base text color color: $gray-900; // Effectively the base text color
} }

2
assets/scss/_featurettes.scss
View File

@ -50,7 +50,7 @@
color: #333; color: #333;
} }
.bd-featurette-img:hover { .bd-featurette-img:hover {
color: $brand-primary; color: $blue;
text-decoration: none; text-decoration: none;
} }
.bd-featurette-img img { .bd-featurette-img img {

2
assets/scss/_footer.scss
View File

@ -11,7 +11,7 @@
a { a {
font-weight: 500; font-weight: 500;
color: $gray; color: $gray-700;
&:hover, &:hover,
&:focus { &:focus {

2
assets/scss/_nav.scss
View File

@ -66,7 +66,7 @@
.dropdown-item.active { .dropdown-item.active {
font-weight: 500; font-weight: 500;
color: $gray-dark; color: $gray-900;
background-color: transparent; background-color: transparent;
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E"); background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-repeat: no-repeat;

4
assets/scss/_sidebar.scss
View File

@ -39,7 +39,7 @@
color: #99979c; color: #99979c;
&:hover { &:hover {
color: $brand-primary; color: $blue;
text-decoration: none; text-decoration: none;
} }
} }
@ -103,7 +103,7 @@
.bd-search-docs-toggle { .bd-search-docs-toggle {
line-height: 1; line-height: 1;
color: $gray-dark; color: $gray-900;
} }
.bd-sidenav { .bd-sidenav {

3
assets/scss/docs.scss
View File

@ -10,7 +10,7 @@
// //
// Background information on nomenclature and architecture decisions here. // Background information on nomenclature and architecture decisions here.
// //
// - Bootstrap variables and mixins are included for easy reuse. // - Bootstrap functions, variables, and mixins are included for easy reuse.
// Doing so gives us access to the same core utilities provided by Bootstrap. // Doing so gives us access to the same core utilities provided by Bootstrap.
// For example, consistent media queries through those mixins. // For example, consistent media queries through those mixins.
// //
@ -48,6 +48,7 @@
@import "team"; @import "team";
@import "browser-bugs"; @import "browser-bugs";
@import "brand"; @import "brand";
@import "colors";
@import "clipboard-js"; @import "clipboard-js";
// Load docs dependencies // Load docs dependencies

32
docs/4.0/components/alerts.md
View File

@ -11,18 +11,10 @@ toc: true
Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing). Alerts are available for any length of text, as well as an optional dismiss button. For proper styling, use one of the four **required** contextual classes (e.g., `.alert-success`). For inline dismissal, use the [alerts jQuery plugin](#dismissing).
{% example html %} {% example html %}
<div class="alert alert-success" role="alert"> {% for color in site.data.theme-colors %}
<strong>Well done!</strong> You successfully read this important alert message. <div class="alert alert-{{ color.name }}" role="alert">
</div> This is a {{ color.name }} alert—check it out!
<div class="alert alert-info" role="alert"> </div>{% endfor %}
<strong>Heads up!</strong> This alert needs your attention, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> Change a few things up and try submitting again.
</div>
{% endexample %} {% endexample %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@ -33,18 +25,10 @@ Alerts are available for any length of text, as well as an optional dismiss butt
Use the `.alert-link` utility class to quickly provide matching colored links within any alert. Use the `.alert-link` utility class to quickly provide matching colored links within any alert.
{% example html %} {% example html %}
<div class="alert alert-success" role="alert"> {% for color in site.data.theme-colors %}
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>. <div class="alert alert-{{ color.name }}" role="alert">
</div> This is a {{ color.name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
<div class="alert alert-info" role="alert"> </div>{% endfor %}
<strong>Heads up!</strong> This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.
</div>
<div class="alert alert-warning" role="alert">
<strong>Warning!</strong> Better check yourself, you're <a href="#" class="alert-link">not looking too good</a>.
</div>
<div class="alert alert-danger" role="alert">
<strong>Oh snap!</strong> <a href="#" class="alert-link">Change a few things up</a> and try submitting again.
</div>
{% endexample %} {% endexample %}
### Additional content ### Additional content

48
docs/4.0/components/badge.md
View File

@ -11,21 +11,21 @@ toc: true
Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units. Badges scale to match the size of the immediate parent element by using relative font sizing and `em` units.
<div class="bd-example"> <div class="bd-example">
<div class="h1">Example heading <span class="badge badge-default">New</span></div> <div class="h1">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h2">Example heading <span class="badge badge-default">New</span></div> <div class="h2">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h3">Example heading <span class="badge badge-default">New</span></div> <div class="h3">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h4">Example heading <span class="badge badge-default">New</span></div> <div class="h4">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h5">Example heading <span class="badge badge-default">New</span></div> <div class="h5">Example heading <span class="badge badge-secondary">New</span></div>
<div class="h6">Example heading <span class="badge badge-default">New</span></div> <div class="h6">Example heading <span class="badge badge-secondary">New</span></div>
</div> </div>
{% highlight html %} {% highlight html %}
<h1>Example heading <span class="badge badge-default">New</span></h1> <h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-default">New</span></h2> <h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-default">New</span></h3> <h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-default">New</span></h4> <h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-default">New</span></h5> <h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-default">New</span></h6> <h6>Example heading <span class="badge badge-secondary">New</span></h6>
{% endhighlight %} {% endhighlight %}
## Contextual variations ## Contextual variations
@ -33,12 +33,8 @@ Badges scale to match the size of the immediate parent element by using relative
Add any of the below mentioned modifier classes to change the appearance of a badge. Add any of the below mentioned modifier classes to change the appearance of a badge.
{% example html %} {% example html %}
<span class="badge badge-default">Default</span> {% for color in site.data.theme-colors %}
<span class="badge badge-primary">Primary</span> <span class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
<span class="badge badge-success">Success</span>
<span class="badge badge-info">Info</span>
<span class="badge badge-warning">Warning</span>
<span class="badge badge-danger">Danger</span>
{% endexample %} {% endexample %}
{% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %} {% capture callout-include %}{% include callout-warning-color-assistive-technologies.md %}{% endcapture %}
@ -49,12 +45,8 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3. Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
{% example html %} {% example html %}
<span class="badge badge-pill badge-default">Default</span> {% for color in site.data.theme-colors %}
<span class="badge badge-pill badge-primary">Primary</span> <span class="badge badge-pill badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
<span class="badge badge-pill badge-success">Success</span>
<span class="badge badge-pill badge-info">Info</span>
<span class="badge badge-pill badge-warning">Warning</span>
<span class="badge badge-pill badge-danger">Danger</span>
{% endexample %} {% endexample %}
## Links ## Links
@ -62,10 +54,6 @@ Use the `.badge-pill` modifier class to make badges more rounded (with a larger
Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus states. Using the `.badge` classes with the `<a>` element quickly provide _actionable_ badges with hover and focus states.
{% example html %} {% example html %}
<a href="#" class="badge badge-default">Default</a> {% for color in site.data.theme-colors %}
<a href="#" class="badge badge-primary">Primary</a> <a href="#" class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</a>{% endfor %}
<a href="#" class="badge badge-success">Success</a>
<a href="#" class="badge badge-info">Info</a>
<a href="#" class="badge badge-warning">Warning</a>
<a href="#" class="badge badge-danger">Danger</a>
{% endexample %} {% endexample %}

31
docs/4.0/components/buttons.md
View File

@ -9,28 +9,12 @@ toc: true
## Examples ## Examples
Bootstrap includes six predefined button styles, each serving its own semantic purpose. Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
{% example html %} {% example html %}
<!-- Provides extra visual weight and identifies the primary action in a set of buttons --> {% for color in site.data.theme-colors %}
<button type="button" class="btn btn-primary">Primary</button> <button type="button" class="btn btn-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
<!-- Secondary, outline button -->
<button type="button" class="btn btn-secondary">Secondary</button>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success">Success</button>
<!-- Contextual button for informational alert messages -->
<button type="button" class="btn btn-info">Info</button>
<!-- Indicates caution should be taken with this action -->
<button type="button" class="btn btn-warning">Warning</button>
<!-- Indicates a dangerous or potentially negative action -->
<button type="button" class="btn btn-danger">Danger</button>
<!-- Deemphasize a button by making it look like a link while maintaining button behavior -->
<button type="button" class="btn btn-link">Link</button> <button type="button" class="btn btn-link">Link</button>
{% endexample %} {% endexample %}
@ -56,15 +40,10 @@ When using button classes on `<a>` elements that are used to trigger in-page fun
In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button. In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button.
{% example html %} {% example html %}
<button type="button" class="btn btn-outline-primary">Primary</button> {% for color in site.data.theme-colors %}
<button type="button" class="btn btn-outline-secondary">Secondary</button> <button type="button" class="btn btn-outline-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
{% endexample %} {% endexample %}
## Sizes ## Sizes
Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes. Fancy larger or smaller buttons? Add `.btn-lg` or `.btn-sm` for additional sizes.

46
docs/4.0/components/card.md
View File

@ -52,7 +52,7 @@ Card titles are used by adding `.card-title` to a `<h*>` tag. In the same way, l
Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely. Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-title` and the `.card-subtitle` items are placed in a `.card-body` item, the card title and subtitle are aligned nicely.
{% example html %} {% example html %}
<div class="card"> <div class="card" style="width: 20rem;">
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Card title</h4> <h4 class="card-title">Card title</h4>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
@ -68,7 +68,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
`.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags. `.card-img-top` places an image to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can also be styled with the standard HTML tags.
{% example html %} {% example html %}
<div class="card"> <div class="card" style="width: 20rem;">
<img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap"> <img class="card-img-top" data-src="holder.js/100px180/?text=Image cap" alt="Card image cap">
<div class="card-body"> <div class="card-body">
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
@ -81,7 +81,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
Create lists of content in a card with a flush list group. Create lists of content in a card with a flush list group.
{% example html %} {% example html %}
<div class="card"> <div class="card" style="width: 20rem;">
<ul class="list-group list-group-flush"> <ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Dapibus ac facilisis in</li>
@ -134,7 +134,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
{% example html %} {% example html %}
<div class="card"> <div class="card">
<h3 class="card-header">Featured</h3> <h4 class="card-header">Featured</h4>
<div class="card-body"> <div class="card-body">
<h4 class="card-title">Special title treatment</h4> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
@ -186,7 +186,7 @@ Using the grid, wrap cards in columns and rows as needed.
<div class="col-sm-6"> <div class="col-sm-6">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Special title treatment</h3> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -195,7 +195,7 @@ Using the grid, wrap cards in columns and rows as needed.
<div class="col-sm-6"> <div class="col-sm-6">
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Special title treatment</h3> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -211,7 +211,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
{% example html %} {% example html %}
<div class="card w-75"> <div class="card w-75">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Card title</h3> <h4 class="card-title">Card title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-primary">Button</a>
</div> </div>
@ -219,7 +219,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
<div class="card w-50"> <div class="card w-50">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Card title</h3> <h4 class="card-title">Card title</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Button</a> <a href="#" class="btn btn-primary">Button</a>
</div> </div>
@ -233,7 +233,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
{% example html %} {% example html %}
<div class="card" style="width: 20rem;"> <div class="card" style="width: 20rem;">
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Special title treatment</h3> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -349,10 +349,10 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
### Image overlays ### Image overlays
Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-inverse` (see below). Turn an image into a card background and overlay your card's text. Depending on the image, you may or may not need `.card-dark` (see below).
{% example html %} {% example html %}
<div class="card card-inverse"> <div class="card card-dark">
<img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image"> <img class="card-img" data-src="holder.js/100px270/#55595c:#373a3c/text:Card image" alt="Card image">
<div class="card-img-overlay"> <div class="card-img-overlay">
<h4 class="card-title">Card title</h4> <h4 class="card-title">Card title</h4>
@ -366,17 +366,17 @@ Turn an image into a card background and overlay your card's text. Depending on
Cards include various options for customizing their backgrounds, borders, and color. Cards include various options for customizing their backgrounds, borders, and color.
### Inverted text ### Dark cards
By default, cards use dark text and assume a light background. You can reverse that by toggling the `color` of text within, as well as that of the card's subcomponents, with `.card-inverse`. Then, specify a dark `background-color` and `border-color` to go with it. By default, cards use dark text and assume a light background. You can reverse that by toggling the `color` of text within, as well as that of the card's subcomponents, with `.card-dark`. Then, specify a dark `background-color` and `border-color` to go with it.
You can also use `.card-inverse` with the [contextual backgrounds variants](#background-variants). You can also use `.card-dark` with the [contextual backgrounds variants](#background-variants).
{% example html %} {% example html %}
<div class="card card-inverse" style="background-color: #333; border-color: #333;"> <div class="card card-dark" style="background-color: #333; border-color: #333;">
<div class="card-header">Header</div> <div class="card-header">Header</div>
<div class="card-body"> <div class="card-body">
<h3 class="card-title">Special title treatment</h3> <h4 class="card-title">Special title treatment</h4>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
@ -386,10 +386,10 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
### Background variants ### Background variants
Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-inverse`.** Cards include their own variant classes for quickly changing the `background-color` and `border-color` of a card. **Darker colors require the use of `.card-dark`.**
{% example html %} {% example html %}
<div class="card card-inverse card-primary mb-3 text-center"> <div class="card card-dark card-primary mb-3 text-center">
<div class="card-body"> <div class="card-body">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -397,7 +397,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-inverse card-success mb-3 text-center"> <div class="card card-dark card-success mb-3 text-center">
<div class="card-body"> <div class="card-body">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -405,7 +405,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-inverse card-info mb-3 text-center"> <div class="card card-dark card-info mb-3 text-center">
<div class="card-body"> <div class="card-body">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -413,7 +413,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-inverse card-warning mb-3 text-center"> <div class="card card-dark card-warning mb-3 text-center">
<div class="card-body"> <div class="card-body">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -421,7 +421,7 @@ Cards include their own variant classes for quickly changing the `background-col
</blockquote> </blockquote>
</div> </div>
</div> </div>
<div class="card card-inverse card-danger text-center"> <div class="card card-dark card-danger text-center">
<div class="card-body"> <div class="card-body">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
@ -666,7 +666,7 @@ Cards can be organized into [Masonry](http://masonry.desandro.com)-like columns
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
<div class="card card-inverse card-primary p-3 text-center"> <div class="card card-dark card-primary p-3 text-center">
<blockquote class="card-blockquote"> <blockquote class="card-blockquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<footer> <footer>

14
docs/4.0/components/list-group.md
View File

@ -87,10 +87,9 @@ Use contextual classes to style list items with a stateful background and color.
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li> {% for color in site.data.theme-colors %}
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li> <li class="list-group-item list-group-item-{{ color.name }}">This is a {{ color.name }} list group item</li>{% endfor %}
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul> </ul>
{% endexample %} {% endexample %}
@ -99,10 +98,9 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
{% example html %} {% example html %}
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a> {% for color in site.data.theme-colors %}
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a> <a href="#" class="list-group-item list-group-item-action list-group-item-{{ color.name }}">This is a {{ color.name }} list group item</a>{% endfor %}
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
</div> </div>
{% endexample %} {% endexample %}

60
docs/4.0/components/navbar.md
View File

@ -32,7 +32,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from
Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint. Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint.
{% example html %} {% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -64,12 +64,12 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
{% example html %} {% example html %}
<!-- As a link --> <!-- As a link -->
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
</nav> </nav>
<!-- As a heading --> <!-- As a heading -->
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<span class="h1" class="navbar-brand mb-0">Navbar</span> <span class="h1" class="navbar-brand mb-0">Navbar</span>
</nav> </nav>
{% endexample %} {% endexample %}
@ -78,7 +78,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
{% example html %} {% example html %}
<!-- Just an image --> <!-- Just an image -->
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt=""> <img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a> </a>
@ -87,7 +87,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
{% example html %} {% example html %}
<!-- Image and text --> <!-- Image and text -->
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#"> <a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt=""> <img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
Bootstrap Bootstrap
@ -102,7 +102,7 @@ Navbar navigation links build on our `.nav` options with their own modifier clas
Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s. Active states—with `.active`—to indicate the current page can be applied directly to `.nav-link`s or their immediate parent `.nav-item`s.
{% example html %} {% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -129,7 +129,7 @@ Active states—with `.active`—to indicate the current page can be applied dir
And because we use classes for our navs, you can avoid the list-based approach entirely if you like. And because we use classes for our navs, you can avoid the list-based approach entirely if you like.
{% example html %} {% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -148,7 +148,7 @@ And because we use classes for our navs, you can avoid the list-based approach e
You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below. You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrapping element for positioning, so be sure to use separate and nested elements for `.nav-item` and `.nav-link` as shown below.
{% example html %} {% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -184,7 +184,7 @@ You may also utilize dropdowns in your navbar nav. Dropdown menus require a wrap
Place various form controls and components within a navbar with `.form-inline`. Place various form controls and components within a navbar with `.form-inline`.
{% example html %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<form class="form-inline"> <form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
@ -195,7 +195,7 @@ Place various form controls and components within a navbar with `.form-inline`.
Align the contents of your inline forms with utilities as needed. Align the contents of your inline forms with utilities as needed.
{% example html %} {% example html %}
<nav class="navbar navbar-light bg-faded justify-content-between"> <nav class="navbar navbar-light bg-light justify-content-between">
<a class="navbar-brand">Navbar</a> <a class="navbar-brand">Navbar</a>
<form class="form-inline"> <form class="form-inline">
<input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search"> <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
@ -207,7 +207,7 @@ Align the contents of your inline forms with utilities as needed.
Input groups work, too: Input groups work, too:
{% example html %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<form class="form-inline"> <form class="form-inline">
<div class="input-group"> <div class="input-group">
<span class="input-group-addon" id="basic-addon1">@</span> <span class="input-group-addon" id="basic-addon1">@</span>
@ -220,7 +220,7 @@ Input groups work, too:
Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements. Various buttons are supported as part of these navbar forms, too. This is also a great reminder that vertical alignment utilities can be used to align different sized elements.
{% example html %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<form class="form-inline"> <form class="form-inline">
<button class="btn btn-outline-success" type="button">Main button</button> <button class="btn btn-outline-success" type="button">Main button</button>
<button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button> <button class="btn btn-sm align-middle btn-outline-secondary" type="button">Smaller button</button>
@ -233,7 +233,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a
Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text. Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text.
{% example html %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<span class="navbar-text"> <span class="navbar-text">
Navbar text with an inline element Navbar text with an inline element
</span> </span>
@ -243,7 +243,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj
Mix and match with other components and utilities as needed. Mix and match with other components and utilities as needed.
{% example html %} {% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar w/ text</a> <a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -269,10 +269,10 @@ Mix and match with other components and utilities as needed.
## Color schemes ## Color schemes
Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Choose from `.navbar-light` for use with light background colors, or `.navbar-inverse` for dark background colors. Then, customize with `.bg-*` utilities. Theming the navbar has never been easier thanks to the combination of theming classes and `background-color` utilities. Choose from `.navbar-light` for use with light background colors, or `.navbar-dark` for dark background colors. Then, customize with `.bg-*` utilities.
<div class="bd-example"> <div class="bd-example">
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -300,7 +300,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-lg navbar-inverse bg-primary"> <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor02" aria-controls="navbarColor02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -358,11 +358,11 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</div> </div>
{% highlight html %} {% highlight html %}
<nav class="navbar navbar-inverse bg-inverse"> <nav class="navbar navbar-dark bg-dark">
<!-- Navbar content --> <!-- Navbar content -->
</nav> </nav>
<nav class="navbar navbar-inverse bg-primary"> <nav class="navbar navbar-dark bg-primary">
<!-- Navbar content --> <!-- Navbar content -->
</nav> </nav>
@ -377,7 +377,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
{% example html %} {% example html %}
<div class="container"> <div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-faded"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
</nav> </nav>
</div> </div>
@ -386,7 +386,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-expand{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed. When the container is within your navbar, its horizontal padding is removed at breakpoints lower than your specified `.navbar-expand{-sm|-md|-lg|-xl}` class. This ensures we're not doubling up on padding unnecessarily on lower viewports when your navbar is collapsed.
{% example html %} {% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container"> <div class="container">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
</div> </div>
@ -398,25 +398,25 @@ When the container is within your navbar, its horizontal padding is removed at b
Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](http://caniuse.com/#feat=css-sticky).** Use our position utilities to place navbars in non-static positions. Choose from fixed to the top, fixed to the bottom, or stickied to the top. **Note that `position: sticky`, used for `.sticky-top`, [isn't fully supported in every browser](http://caniuse.com/#feat=css-sticky).**
{% example html %} {% example html %}
<nav class="navbar navbar-light bg-faded"> <nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Full width</a> <a class="navbar-brand" href="#">Full width</a>
</nav> </nav>
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<nav class="navbar fixed-top navbar-light bg-faded"> <nav class="navbar fixed-top navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed top</a> <a class="navbar-brand" href="#">Fixed top</a>
</nav> </nav>
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<nav class="navbar fixed-bottom navbar-light bg-faded"> <nav class="navbar fixed-bottom navbar-light bg-light">
<a class="navbar-brand" href="#">Fixed bottom</a> <a class="navbar-brand" href="#">Fixed bottom</a>
</nav> </nav>
{% endexample %} {% endexample %}
{% example html %} {% example html %}
<nav class="navbar sticky-top navbar-light bg-faded"> <nav class="navbar sticky-top navbar-light bg-light">
<a class="navbar-brand" href="#">Sticky top</a> <a class="navbar-brand" href="#">Sticky top</a>
</nav> </nav>
{% endexample %} {% endexample %}
@ -434,7 +434,7 @@ Navbar togglers are left-aligned by default, but should they follow a sibling el
With no `.navbar-brand` shown in lowest breakpoint: With no `.navbar-brand` shown in lowest breakpoint:
{% example html %} {% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo01" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
@ -462,7 +462,7 @@ With no `.navbar-brand` shown in lowest breakpoint:
With a brand name shown on the left and toggler on the right: With a brand name shown on the left and toggler on the right:
{% example html %} {% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -491,7 +491,7 @@ With a brand name shown on the left and toggler on the right:
With a toggler on the left and brand name on the right: With a toggler on the left and brand name on the right:
{% example html %} {% example html %}
<nav class="navbar navbar-expand-lg navbar-light bg-faded"> <nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -524,12 +524,12 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
{% example html %} {% example html %}
<div class="pos-f-t"> <div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent"> <div class="collapse" id="navbarToggleExternalContent">
<div class="bg-inverse p-4"> <div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4> <h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span> <span class="text-muted">Toggleable via the navbar brand.</span>
</div> </div>
</div> </div>
<nav class="navbar navbar-inverse bg-inverse"> <nav class="navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>

8
docs/4.0/components/scrollspy.md
View File

@ -22,7 +22,7 @@ When successfully implemented, your nav or list group will update accordingly, m
Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well. Scroll the area below the navbar and watch the active class change. The dropdown items will be highlighted as well.
<div class="bd-example"> <div class="bd-example">
<nav id="navbar-example2" class="navbar navbar-light bg-faded"> <nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"> <li class="nav-item">
@ -59,7 +59,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
</div> </div>
{% highlight html %} {% highlight html %}
<nav id="navbar-example2" class="navbar navbar-light bg-faded"> <nav id="navbar-example2" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<ul class="nav nav-pills"> <ul class="nav nav-pills">
<li class="nav-item"> <li class="nav-item">
@ -100,7 +100,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
<div class="bd-example"> <div class="bd-example">
<div class="row"> <div class="row">
<div class="col-4"> <div class="col-4">
<nav id="navbar-example3" class="navbar navbar-light bg-faded flex-column"> <nav id="navbar-example3" class="navbar navbar-light bg-light flex-column">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column"> <nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a> <a class="nav-link" href="#item-1">Item 1</a>
@ -139,7 +139,7 @@ Scrollspy also works with nested `.nav`s. If a nested `.nav` is `.active`, its p
</div> </div>
{% highlight html %} {% highlight html %}
<nav id="navbar-example3" class="navbar navbar-light bg-faded"> <nav id="navbar-example3" class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<nav class="nav nav-pills flex-column"> <nav class="nav nav-pills flex-column">
<a class="nav-link" href="#item-1">Item 1</a> <a class="nav-link" href="#item-1">Item 1</a>

70
docs/4.0/content/tables.md
View File

@ -438,19 +438,11 @@ Add `.table-sm` to make tables more compact by cutting cell padding in half.
Use contextual classes to color table rows or individual cells. Use contextual classes to color table rows or individual cells.
| Class | Description |
| --- | --- |
| `.table-active` | Applies the hover color to a particular row or cell |
| `.table-success` | Indicates a successful or positive action |
| `.table-info` | Indicates a neutral informative change or action |
| `.table-warning` | Indicates a warning that might need attention |
| `.table-danger` | Indicates a dangerous or potentially negative action |
<div class="bd-example"> <div class="bd-example">
<table class="table"> <table class="table">
<thead> <thead>
<tr> <tr>
<th>#</th> <th>Type</th>
<th>Column heading</th> <th>Column heading</th>
<th>Column heading</th> <th>Column heading</th>
<th>Column heading</th> <th>Column heading</th>
@ -458,59 +450,25 @@ Use contextual classes to color table rows or individual cells.
</thead> </thead>
<tbody> <tbody>
<tr class="table-active"> <tr class="table-active">
<th scope="row">1</th> <th scope="row">Active</th>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr> <tr>
<th scope="row">2</th> <th scope="row">Default</th>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>
<tr class="table-success">
<th scope="row">3</th> {% for color in site.data.theme-colors %}
<tr class="table-{{ color.name }}">
<th scope="row">{{ color.name | capitalize }}</th>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
<td>Column content</td> <td>Column content</td>
</tr> </tr>{% endfor %}
<tr>
<th scope="row">4</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-info">
<th scope="row">5</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-warning">
<th scope="row">7</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="table-danger">
<th scope="row">9</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -518,18 +476,14 @@ Use contextual classes to color table rows or individual cells.
{% highlight html %} {% highlight html %}
<!-- On rows --> <!-- On rows -->
<tr class="table-active">...</tr> <tr class="table-active">...</tr>
<tr class="table-success">...</tr> {% for color in site.data.theme-colors %}
<tr class="table-info">...</tr> <tr class="table-{{ color.name }}">...</tr>{% endfor %}
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
<!-- On cells (`td` or `th`) --> <!-- On cells (`td` or `th`) -->
<tr> <tr>
<td class="table-active">...</td> <td class="table-active">...</td>
<td class="table-success">...</td> {% for color in site.data.theme-colors %}
<td class="table-info">...</td> <td class="table-{{ color.name }}">...</td>{% endfor %}
<td class="table-warning">...</td>
<td class="table-danger">...</td>
</tr> </tr>
{% endhighlight %} {% endhighlight %}

4
docs/4.0/examples/album/index.html
View File

@ -18,7 +18,7 @@
<body> <body>
<div class="collapse bg-inverse" id="navbarHeader"> <div class="collapse bg-dark" id="navbarHeader">
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col-sm-8 py-4"> <div class="col-sm-8 py-4">
@ -36,7 +36,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="navbar navbar-inverse bg-inverse"> <div class="navbar navbar-dark bg-dark">
<div class="container d-flex justify-content-between"> <div class="container d-flex justify-content-between">
<a href="#" class="navbar-brand">Album</a> <a href="#" class="navbar-brand">Album</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarHeader" aria-controls="navbarHeader" aria-expanded="false" aria-label="Toggle navigation">

2
docs/4.0/examples/carousel/index.html
View File

@ -17,7 +17,7 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Carousel</a> <a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

4
docs/4.0/examples/dashboard/index.html
View File

@ -17,7 +17,7 @@
</head> </head>
<body> <body>
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Dashboard</a> <a class="navbar-brand" href="#">Dashboard</a>
<button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler d-lg-none" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -47,7 +47,7 @@
<div class="container-fluid"> <div class="container-fluid">
<div class="row"> <div class="row">
<nav class="col-sm-3 col-md-2 d-none d-sm-block bg-faded sidebar"> <nav class="col-sm-3 col-md-2 d-none d-sm-block bg-light sidebar">
<ul class="nav nav-pills flex-column"> <ul class="nav nav-pills flex-column">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a> <a class="nav-link active" href="#">Overview <span class="sr-only">(current)</span></a>

2
docs/4.0/examples/jumbotron/index.html
View File

@ -18,7 +18,7 @@
<body> <body>
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

2
docs/4.0/examples/justified-nav/index.html
View File

@ -23,7 +23,7 @@
<div class="masthead"> <div class="masthead">
<h3 class="text-muted">Project name</h3> <h3 class="text-muted">Project name</h3>
<nav class="navbar navbar-expand-md navbar-light bg-faded rounded mb-3"> <nav class="navbar navbar-expand-md navbar-light bg-light rounded mb-3">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>

2
docs/4.0/examples/navbar-top-fixed/index.html
View File

@ -18,7 +18,7 @@
<body> <body>
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a> <a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

2
docs/4.0/examples/navbar-top/index.html
View File

@ -18,7 +18,7 @@
<body> <body>
<nav class="navbar navbar-expand-md navbar-inverse bg-inverse mb-4"> <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<a class="navbar-brand" href="#">Top navbar</a> <a class="navbar-brand" href="#">Top navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

20
docs/4.0/examples/navbars/index.html
View File

@ -18,7 +18,7 @@
<body> <body>
<nav class="navbar navbar-inverse bg-inverse"> <nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Never expand</a> <a class="navbar-brand" href="#">Never expand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -50,7 +50,7 @@
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand navbar-inverse bg-inverse"> <nav class="navbar navbar-expand navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand</a> <a class="navbar-brand" href="#">Expand</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -82,7 +82,7 @@
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-sm navbar-inverse bg-inverse"> <nav class="navbar navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at sm</a> <a class="navbar-brand" href="#">Expand at sm</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -114,7 +114,7 @@
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-md navbar-inverse bg-inverse"> <nav class="navbar navbar-expand-md navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at md</a> <a class="navbar-brand" href="#">Expand at md</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -146,7 +146,7 @@
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at lg</a> <a class="navbar-brand" href="#">Expand at lg</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -178,7 +178,7 @@
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-xl navbar-inverse bg-inverse"> <nav class="navbar navbar-expand-xl navbar-dark bg-dark">
<a class="navbar-brand" href="#">Expand at xl</a> <a class="navbar-brand" href="#">Expand at xl</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -210,7 +210,7 @@
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container"> <div class="container">
<a class="navbar-brand" href="#">Container</a> <a class="navbar-brand" href="#">Container</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
@ -244,7 +244,7 @@
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse"> <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
@ -273,7 +273,7 @@
</nav> </nav>
<div class="container"> <div class="container">
<nav class="navbar navbar-expand-lg navbar-light bg-faded rounded"> <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
@ -305,7 +305,7 @@
</div> </div>
</nav> </nav>
<nav class="navbar navbar-expand-lg navbar-light bg-faded rounded"> <nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>

2
docs/4.0/examples/offcanvas/index.html
View File

@ -18,7 +18,7 @@
<body> <body>
<nav class="navbar navbar-expand-md fixed-top navbar-inverse bg-inverse"> <nav class="navbar navbar-expand-md fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

2
docs/4.0/examples/starter-template/index.html
View File

@ -18,7 +18,7 @@
<body> <body>
<nav class="navbar navbar-expand-md navbar-inverse bg-inverse fixed-top"> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

2
docs/4.0/examples/sticky-footer-navbar/index.html
View File

@ -19,7 +19,7 @@
<body> <body>
<!-- Fixed navbar --> <!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-inverse fixed-top bg-inverse"> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#">Fixed navbar</a> <a class="navbar-brand" href="#">Fixed navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

82
docs/4.0/getting-started/options.md
View File

@ -13,8 +13,8 @@ Every Sass variable in Bootstrap 4 includes the `!default` flag, meaning you can
For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following: For example, to change out the `background-color` and `color` for the `<body>`, you'd do the following:
{% highlight scss %} {% highlight scss %}
$body-bg: $gray-dark; $body-bg: $gray-900;
$body-color: $gray-light; $body-color: $gray-600;
{% endhighlight %} {% endhighlight %}
Do the same for any variable you need to override, including the global options listed below. Do the same for any variable you need to override, including the global options listed below.
@ -35,3 +35,81 @@ You can find and customize these variables for key global options in our `_varia
| `$enable-hover-media-query` | `true` or `false` (default) | ... | | `$enable-hover-media-query` | `true` or `false` (default) | ... |
| `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). | | `$enable-grid-classes` | `true` (default) or `false` | Enables the generation of CSS classes for the grid system (e.g., `.container`, `.row`, `.col-md-1`, etc.). |
| `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. | | `$enable-print-styles` | `true` (default) or `false` | Enables styles for optimizing printing. |
## Color
Many of Bootstrap's various components and utilities are built through a series of colors defined in a Sass map. This map can be looped over in Sass to quickly generate a series of rulesets.
### All colors
All colors available in Bootstrap 4, available as Sass variables and a Sass map in our `scss/_variables.scss` file. This will be expanded upon in subsequent minor releases to add additional shades, much like the [grayscale palette](#grays) we already include.
<div class="row">
{% for color in site.data.colors %}
<div class="col-md-4">
{% unless color.name == "white" or color.name == "gray" or color.name == "gray-dark" %}
<div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
{% endunless %}
</div>
{% endfor %}
</div>
Here's how you can use these in your Sass:
{% highlight scss %}
// With variable
.alpha { color: $purple; }
// From the Sass map with our `color()` function
.beta { color: color("purple"); }
{% endhighlight %}
[Color utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/colors/) are also available for setting `color` and `background-color`.
{% callout info %}
In the future, we'll aim to provide Sass maps and variables for shades of each color as we've done with the grayscale colors below.
{% endcallout %}
### Theme colors
We use a subset of all colors to create a smaller color palette for generating color schemes, also available as Sass variables and a Sass map in our `scss/_variables.scss` file.
<div class="row">
{% for color in site.data.theme-colors %}
<div class="col-md-4">
<div class="p-3 mb-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
</div>
{% endfor %}
</div>
### Grays
An expansive set of gray variables and a Sass map in `scss/_variables.scss` for consistent shades of gray across your project.
<div class="row mb-3">
<div class="col-md-4">
{% for color in site.data.grays %}
<div class="p-3 swatch-{{ color.name }}">{{ color.name | capitalize }}</div>
{% endfor %}
</div>
</div>
Within `_variables.scss`, you'll find our color variables and Sass map. Here's an example of the `$colors` Sass map:
{% highlight scss %}
$colors: (
red: $red,
orange: $orange,
yellow: $yellow,
green: $green,
teal: $teal,
blue: $blue,
pink: $pink,
purple: $purple,
white: $white,
gray: $gray-600,
gray-dark: $gray-900
) !default;
{% endhighlight %}
Add, remove, or modify values within the map to update how they're used in many other components. Unfortunately at this time, not _every_ component utilizes this Sass map. Future updates will strive to improve upon this. Until then, plan on making use of the `${color}` variables and this Sass map.

12
docs/4.0/migration.md
View File

@ -164,7 +164,7 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version
The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization. The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.
- Responsive navbar behaviors are now applied to the `.navbar` class via the **required** `.navbar-expand-{breakpoint}` where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling. - Responsive navbar behaviors are now applied to the `.navbar` class via the **required** `.navbar-expand-{breakpoint}` where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.
- `.navbar-default` is now `.navbar-light`, though `.navbar-inverse` remains the same. **One of these is required on each navbar.** However, these classes no longer set `background-color`s; instead they essentially only affect `color`. - `.navbar-default` is now `.navbar-light`, though `.navbar-dark` remains the same. **One of these is required on each navbar.** However, these classes no longer set `background-color`s; instead they essentially only affect `color`.
- Navbars now require a background declaration of some kind. Choose from our background utilities (`.bg-*`) or set your own with the light/inverse classes above [for mad customization]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navbar/#color-schemes). - Navbars now require a background declaration of some kind. Choose from our background utilities (`.bg-*`) or set your own with the light/inverse classes above [for mad customization]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/navbar/#color-schemes).
- Given flexbox styles, navbars can now use flexbox utilities for easy alignment options. - Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.
- `.navbar-toggle` is now `.navbar-toggler` and has different styles and inner markup (no more three `<span>`s). - `.navbar-toggle` is now `.navbar-toggler` and has different styles and inner markup (no more three `<span>`s).
@ -201,11 +201,11 @@ Dropped entirely for the new card component.
- `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`. - `.panel-title` to `.card-title`. Depending on the desired look, you may also want to use [heading elements or classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/typography/#headings) (e.g. `<h3>`, `.h3`) or bold elements or classes (e.g. `<strong>`, `<b>`, [`.font-weight-bold`]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/typography/#font-weight-and-italics)). Note that `.card-title`, while similarly named, produces a different look than `.panel-title`.
- `.panel-body` to `.card-body` - `.panel-body` to `.card-body`
- `.panel-footer` to `.card-footer` - `.panel-footer` to `.card-footer`
- `.panel-primary` to `.card-primary` and `.card-inverse` (or use `.bg-primary` on `.card-header`) - `.panel-primary` to `.card-primary` and `.card-dark` (or use `.bg-primary` on `.card-header`)
- `.panel-success` to `.card-success` and `.card-inverse` (or use `.bg-success` on `.card-header`) - `.panel-success` to `.card-success` and `.card-dark` (or use `.bg-success` on `.card-header`)
- `.panel-info` to `.card-info` and `.card-inverse` (or use `.bg-info` on `.card-header`) - `.panel-info` to `.card-info` and `.card-dark` (or use `.bg-info` on `.card-header`)
- `.panel-warning` to `.card-warning` and `.card-inverse` (or use `.bg-warning` on `.card-header`) - `.panel-warning` to `.card-warning` and `.card-dark` (or use `.bg-warning` on `.card-header`)
- `.panel-danger` to `.card-danger` and `.card-inverse` (or use `.bg-danger` on `.card-header`) - `.panel-danger` to `.card-danger` and `.card-dark` (or use `.bg-danger` on `.card-header`)
### Carousel ### Carousel

12
docs/4.0/utilities/borders.md
View File

@ -13,6 +13,7 @@ Add classes to an element to remove all borders or some borders.
<div class="bd-example-border-utils"> <div class="bd-example-border-utils">
{% example html %} {% example html %}
<span class="border"></span>
<span class="border-0"></span> <span class="border-0"></span>
<span class="border-top-0"></span> <span class="border-top-0"></span>
<span class="border-right-0"></span> <span class="border-right-0"></span>
@ -21,6 +22,17 @@ Add classes to an element to remove all borders or some borders.
{% endexample %} {% endexample %}
</div> </div>
## Border color
Change the border color using utilities built on our theme colors.
<div class="bd-example-border-utils">
{% example html %}
{% for color in site.data.theme-colors %}
<span class="border border-{{ color.name }}"></span>{% endfor %}
{% endexample %}
</div>
## Border-radius ## Border-radius
Add classes to an element to easily round its corners. Add classes to an element to easily round its corners.

27
docs/4.0/utilities/colors.md
View File

@ -7,37 +7,22 @@ toc: true
--- ---
{% example html %} {% example html %}
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p> {% for color in site.data.theme-colors %}
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p> <p class="text-{{ color.name }}">.text-{{ color.name }}</p>{% endfor %}
<p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Donec ullamcorper nulla non metus auctor fringilla.</p>
<p class="text-gray-dark">Eget risus varius blandit sit ultricies vehicula amet non magna.</p>
<p class="text-white">Etiam porta sem malesuada ultricies vehicula.</p>
{% endexample %} {% endexample %}
Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` class has no link styling.** Contextual text classes also work well on anchors with the provided hover and focus states. **Note that the `.text-white` class has no link styling.**
{% example html %} {% example html %}
<a href="#" class="text-muted">Muted link</a> {% for color in site.data.theme-colors %}
<a href="#" class="text-primary">Primary link</a> <p><a href="#" class="text-{{ color.name }}{% if color.name == "light" %} bg-gray{% endif %}">{{ color.name | capitalize }} link</a></p>{% endfor %}
<a href="#" class="text-success">Success link</a>
<a href="#" class="text-info">Info link</a>
<a href="#" class="text-warning">Warning link</a>
<a href="#" class="text-danger">Danger link</a>
{% endexample %} {% endexample %}
Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities. Similar to the contextual text color classes, easily set the background of an element to any contextual class. Anchor components will darken on hover, just like the text classes. Background utilities **do not set `color`**, so in some cases you'll want to use `.text-*` utilities.
{% example html %} {% example html %}
<div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div> {% for color in site.data.theme-colors %}
<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div> <div class="p-3 mb-2 bg-{{ color.name }} {% if color.name == "light" %}text-gray-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
<div class="bg-info text-white">Maecenas sed diam eget risus varius blandit sit amet non magna.</div>
<div class="bg-warning text-white">Etiam porta sem malesuada magna mollis euismod.</div>
<div class="bg-danger text-white">Donec ullamcorper nulla non metus auctor fringilla.</div>
<div class="bg-inverse text-white">Cras mattis consectetur purus sit amet fermentum.</div>
<div class="bg-faded">Cras mattis consectetur purus sit amet fermentum.</div>
{% endexample %} {% endexample %}
{% callout info %} {% callout info %}

2
js/tests/visual/dropdown.html
View File

@ -10,7 +10,7 @@
<div class="container"> <div class="container">
<h1>Dropdown <small>Bootstrap Visual Test</small></h1> <h1>Dropdown <small>Bootstrap Visual Test</small></h1>
<nav class="navbar navbar-expand-md navbar-light bg-faded"> <nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a> <a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

4
js/tests/visual/modal.html
View File

@ -13,7 +13,7 @@
</style> </style>
</head> </head>
<body> <body>
<nav class="navbar navbar-full navbar-dark bg-inverse"> <nav class="navbar navbar-full navbar-dark bg-dark">
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button> <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"></button>
<div class="collapse navbar-expand-md" id="navbarResponsive"> <div class="collapse navbar-expand-md" id="navbarResponsive">
<a class="navbar-brand" href="#">This shouldn't jump!</a> <a class="navbar-brand" href="#">This shouldn't jump!</a>
@ -164,7 +164,7 @@
<br><br> <br><br>
<div class="bg-inverse text-white p-2" id="tall" style="display: none;"> <div class="bg-dark text-white p-2" id="tall" style="display: none;">
Tall body content to force the page to have a scrollbar. Tall body content to force the page to have a scrollbar.
</div> </div>
</div> </div>

2
js/tests/visual/scrollspy.html
View File

@ -10,7 +10,7 @@
</style> </style>
</head> </head>
<body data-spy="scroll" data-target=".navbar" data-offset="70"> <body data-spy="scroll" data-target=".navbar" data-offset="70">
<nav class="navbar navbar-expand-md navbar-inverse bg-inverse fixed-top"> <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<a class="navbar-brand" href="#">Scrollspy test</a> <a class="navbar-brand" href="#">Scrollspy test</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>

15
scss/_alert.scss
View File

@ -41,15 +41,8 @@
// //
// Generate contextual modifier classes for colorizing the alert. // Generate contextual modifier classes for colorizing the alert.
.alert-success { @each $color, $value in $theme-colors {
@include alert-variant($alert-success-bg, $alert-success-border-color, $alert-success-text); .alert-#{$color} {
} @include alert-variant(theme-color-level($color, -10), theme-color-level($color, -9), theme-color-level($color, 6));
.alert-info { }
@include alert-variant($alert-info-bg, $alert-info-border-color, $alert-info-text);
}
.alert-warning {
@include alert-variant($alert-warning-bg, $alert-warning-border-color, $alert-warning-text);
}
.alert-danger {
@include alert-variant($alert-danger-bg, $alert-danger-border-color, $alert-danger-text);
} }

36
scss/_badge.scss
View File

@ -27,16 +27,6 @@
top: -1px; top: -1px;
} }
// scss-lint:disable QualifyingElement
// Add hover effects, but only for links
a.badge {
@include hover-focus {
color: $badge-link-hover-color;
text-decoration: none;
}
}
// scss-lint:enable QualifyingElement
// Pill badges // Pill badges
// //
// Make them extra rounded with a modifier to replace v3's badges. // Make them extra rounded with a modifier to replace v3's badges.
@ -51,26 +41,8 @@ a.badge {
// //
// Contextual variations (linked badges get darker on :hover). // Contextual variations (linked badges get darker on :hover).
.badge-default { @each $color, $value in $theme-colors {
@include badge-variant($badge-default-bg); .badge-#{$color} {
} @include badge-variant($value);
}
.badge-primary {
@include badge-variant($badge-primary-bg);
}
.badge-success {
@include badge-variant($badge-success-bg);
}
.badge-info {
@include badge-variant($badge-info-bg);
}
.badge-warning {
@include badge-variant($badge-warning-bg);
}
.badge-danger {
@include badge-variant($badge-danger-bg);
} }

43
scss/_buttons.scss
View File

@ -50,43 +50,16 @@ fieldset[disabled] a.btn {
// Alternate buttons // Alternate buttons
// //
.btn-primary { @each $color, $value in $theme-colors {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color); .btn-#{$color} {
} @include button-variant($value, $value);
.btn-secondary { }
@include button-variant($btn-secondary-color, $btn-secondary-bg, $btn-secondary-border-color);
}
.btn-info {
@include button-variant($btn-info-color, $btn-info-bg, $btn-info-border-color);
}
.btn-success {
@include button-variant($btn-success-color, $btn-success-bg, $btn-success-border-color);
}
.btn-warning {
@include button-variant($btn-warning-color, $btn-warning-bg, $btn-warning-border-color);
}
.btn-danger {
@include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border-color);
} }
// Remove all backgrounds @each $color, $value in $theme-colors {
.btn-outline-primary { .btn-outline-#{$color} {
@include button-outline-variant($btn-primary-bg, $btn-primary-color); @include button-outline-variant($value, #fff);
} }
.btn-outline-secondary {
@include button-outline-variant($btn-secondary-border-color, $btn-secondary-color);
}
.btn-outline-info {
@include button-outline-variant($btn-info-bg, $btn-info-color);
}
.btn-outline-success {
@include button-outline-variant($btn-success-bg, $btn-success-color);
}
.btn-outline-warning {
@include button-outline-variant($btn-warning-bg, $btn-warning-color);
}
.btn-outline-danger {
@include button-outline-variant($btn-danger-bg, $btn-danger-color);
} }

45
scss/_card.scss
View File

@ -105,48 +105,25 @@
// Background variations // Background variations
// //
.card-primary { @each $color, $value in $theme-colors {
@include card-variant($brand-primary, $brand-primary); .card-#{$color} {
} @include card-variant($value, $value);
.card-success { }
@include card-variant($brand-success, $brand-success);
}
.card-info {
@include card-variant($brand-info, $brand-info);
}
.card-warning {
@include card-variant($brand-warning, $brand-warning);
}
.card-danger {
@include card-variant($brand-danger, $brand-danger);
} }
// Remove all backgrounds @each $color, $value in $theme-colors {
.card-outline-primary { .card-outline-#{$color} {
@include card-outline-variant($btn-primary-bg); @include card-variant($value, $value);
} }
.card-outline-secondary {
@include card-outline-variant($btn-secondary-border-color);
}
.card-outline-info {
@include card-outline-variant($btn-info-bg);
}
.card-outline-success {
@include card-outline-variant($btn-success-bg);
}
.card-outline-warning {
@include card-outline-variant($btn-warning-bg);
}
.card-outline-danger {
@include card-outline-variant($btn-danger-bg);
} }
// //
// Inverse text within a card for use with dark backgrounds // Inverse text within a card for use with dark backgrounds
// //
.card-inverse { .card-dark {
@include card-inverse; @include card-dark;
} }
// //

41
scss/_functions.scss
View File

@ -47,3 +47,44 @@
@return $string; @return $string;
} }
// Color contrast
@mixin color-yiq($color) {
$r: red($color);
$g: green($color);
$b: blue($color);
$yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
@if ($yiq >= 150) {
color: #111;
} @else {
color: #fff;
}
}
// Retreive color Sass maps
@function color($key: "blue") {
@return map-get($colors, $key);
}
@function theme-color($key: "primary") {
@return map-get($theme-colors, $key);
}
@function grayscale($key: "100") {
@return map-get($grays, $key);
}
// Request a theme color level
@function theme-color-level($color-name: "primary", $level: 0) {
$color: theme-color($color-name);
$color-base: if($level > 0, #000, #fff);
@if $level < 0 {
// Lighter values need a quick double negative for the Sass math to work
@return mix($color-base, $color, $level * -1 * $theme-color-interval);
} @else {
@return mix($color-base, $color, $level * $theme-color-interval);
}
}

7
scss/_list-group.scss
View File

@ -109,7 +109,6 @@
// Add modifier classes to change text and background color on individual items. // Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states. // Organizationally, this must come after the `:hover` states.
@include list-group-item-variant(success, $state-success-bg, $state-success-text); @each $color, $value in $theme-colors {
@include list-group-item-variant(info, $state-info-bg, $state-info-text); @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); }
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);

22
scss/_navbar.scss
View File

@ -242,25 +242,25 @@
} }
// White links against a dark background // White links against a dark background
.navbar-inverse { .navbar-dark {
.navbar-brand { .navbar-brand {
color: $navbar-inverse-active-color; color: $navbar-dark-active-color;
@include hover-focus { @include hover-focus {
color: $navbar-inverse-active-color; color: $navbar-dark-active-color;
} }
} }
.navbar-nav { .navbar-nav {
.nav-link { .nav-link {
color: $navbar-inverse-color; color: $navbar-dark-color;
@include hover-focus { @include hover-focus {
color: $navbar-inverse-hover-color; color: $navbar-dark-hover-color;
} }
&.disabled { &.disabled {
color: $navbar-inverse-disabled-color; color: $navbar-dark-disabled-color;
} }
} }
@ -268,20 +268,20 @@
.active > .nav-link, .active > .nav-link,
.nav-link.show, .nav-link.show,
.nav-link.active { .nav-link.active {
color: $navbar-inverse-active-color; color: $navbar-dark-active-color;
} }
} }
.navbar-toggler { .navbar-toggler {
color: $navbar-inverse-color; color: $navbar-dark-color;
border-color: $navbar-inverse-toggler-border-color; border-color: $navbar-dark-toggler-border-color;
} }
.navbar-toggler-icon { .navbar-toggler-icon {
background-image: $navbar-inverse-toggler-icon-bg; background-image: $navbar-dark-toggler-icon-bg;
} }
.navbar-text { .navbar-text {
color: $navbar-inverse-color; color: $navbar-dark-color;
} }
} }

9
scss/_tables.scss
View File

@ -92,12 +92,9 @@
// Exact selectors below required to override `.table-striped` and prevent // Exact selectors below required to override `.table-striped` and prevent
// inheritance to nested tables. // inheritance to nested tables.
// Generate the contextual variants @each $color, $value in $theme-colors {
@include table-row-variant(active, $table-active-bg); @include table-row-variant($color, theme-color-level($color, -9));
@include table-row-variant(success, $state-success-bg); }
@include table-row-variant(info, $state-info-bg);
@include table-row-variant(warning, $state-warning-bg);
@include table-row-variant(danger, $state-danger-bg);
// Inverse styles // Inverse styles

288
scss/_variables.scss
View File

@ -8,7 +8,7 @@
// Table of Contents // Table of Contents
// //
// Colors // Color system
// Options // Options
// Spacing // Spacing
// Body // Body
@ -44,36 +44,74 @@
// Code // Code
// Colors
// //
// Grayscale and brand colors for use across Bootstrap. // Color system
//
// Start with assigning color names to specific hex values.
$white: #fff !default; $white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #868e96 !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default; $black: #000 !default;
$red: #d9534f !default;
$orange: #f0ad4e !default;
$yellow: #ffd500 !default;
$green: #5cb85c !default;
$blue: #0275d8 !default;
$teal: #5bc0de !default;
$pink: #ff5b77 !default;
$purple: #613d7c !default;
// Create grayscale $grays: (
$gray-dark: #292b2c !default; 100: $gray-100,
$gray: #464a4c !default; 200: $gray-200,
$gray-light: #636c72 !default; 300: $gray-300,
$gray-lighter: #eceeef !default; 400: $gray-400,
$gray-lightest: #f7f7f9 !default; 500: $gray-500,
600: $gray-600,
700: $gray-700,
800: $gray-800,
900: $gray-900
) !default;
// Reassign color vars to semantic color scheme $blue: #007bff !default;
$brand-primary: $blue !default; $indigo: #6610f2 !default;
$brand-success: $green !default; $purple: #6f42c1 !default;
$brand-info: $teal !default; $pink: #e83e8c !default;
$brand-warning: $orange !default; $red: #dc3545 !default;
$brand-danger: $red !default; $orange: #fd7e14 !default;
$brand-inverse: $gray-dark !default; $yellow: #ffc107 !default;
$green: #28a745 !default;
$teal: #20c997 !default;
$cyan: #17a2b8 !default;
$colors: (
blue: $blue,
indigo: $indigo,
purple: $purple,
pink: $pink,
red: $red,
orange: $orange,
yellow: $yellow,
green: $green,
teal: $teal,
cyan: $cyan,
white: $white,
gray: $gray-600,
gray-dark: $gray-800
) !default;
$theme-colors: (
primary: $blue,
secondary: $gray-600,
success: $green,
info: $cyan,
warning: $yellow,
danger: $red,
light: $gray-100,
dark: $gray-800
) !default;
// Set a specific jump point for requesting color jumps
$theme-color-interval: 8% !default;
// Options // Options
@ -118,13 +156,13 @@ $sizes: (
// Settings for the `<body>` element. // Settings for the `<body>` element.
$body-bg: $white !default; $body-bg: $white !default;
$body-color: $gray-dark !default; $body-color: $gray-900 !default;
// Links // Links
// //
// Style anchor elements. // Style anchor elements.
$link-color: $brand-primary !default; $link-color: theme-color("primary") !default;
$link-decoration: none !default; $link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default; $link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default; $link-hover-decoration: underline !default;
@ -188,7 +226,7 @@ $border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default; $border-radius-sm: .2rem !default;
$component-active-color: $white !default; $component-active-color: $white !default;
$component-active-bg: $brand-primary !default; $component-active-bg: theme-color("primary") !default;
$caret-width: .3em !default; $caret-width: .3em !default;
@ -245,11 +283,11 @@ $lead-font-weight: 300 !default;
$small-font-size: 80% !default; $small-font-size: 80% !default;
$text-muted: $gray-light !default; $text-muted: $gray-600 !default;
$blockquote-small-color: $gray-light !default; $blockquote-small-color: $gray-600 !default;
$blockquote-font-size: ($font-size-base * 1.25) !default; $blockquote-font-size: ($font-size-base * 1.25) !default;
$blockquote-border-color: $gray-lighter !default; $blockquote-border-color: $gray-200 !default;
$blockquote-border-width: .25rem !default; $blockquote-border-width: .25rem !default;
$hr-border-color: rgba($black,.1) !default; $hr-border-color: rgba($black,.1) !default;
@ -264,6 +302,8 @@ $nested-kbd-font-weight: $font-weight-bold !default;
$list-inline-padding: 5px !default; $list-inline-padding: 5px !default;
$mark-bg: #fcf8e3 !default;
// Tables // Tables
// //
@ -278,15 +318,15 @@ $table-hover-bg: rgba($black,.075) !default;
$table-active-bg: $table-hover-bg !default; $table-active-bg: $table-hover-bg !default;
$table-border-width: $border-width !default; $table-border-width: $border-width !default;
$table-border-color: $gray-lighter !default; $table-border-color: $gray-200 !default;
$table-head-bg: $gray-lighter !default; $table-head-bg: $gray-200 !default;
$table-head-color: $gray !default; $table-head-color: $gray-700 !default;
$table-inverse-bg: $gray-dark !default; $table-inverse-bg: $gray-900 !default;
$table-inverse-accent-bg: rgba($white, .05) !default; $table-inverse-accent-bg: rgba($white, .05) !default;
$table-inverse-hover-bg: rgba($white, .075) !default; $table-inverse-hover-bg: rgba($white, .075) !default;
$table-inverse-border-color: lighten($gray-dark, 7.5%) !default; $table-inverse-border-color: lighten($gray-900, 7.5%) !default;
$table-inverse-color: $body-bg !default; $table-inverse-color: $body-bg !default;
@ -308,34 +348,34 @@ $input-btn-line-height-lg: 1.5 !default;
$btn-font-weight: $font-weight-normal !default; $btn-font-weight: $font-weight-normal !default;
$btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default; $btn-box-shadow: inset 0 1px 0 rgba($white,.15), 0 1px 1px rgba($black,.075) !default;
$btn-focus-box-shadow: 0 0 0 3px rgba($brand-primary, .25) !default; $btn-focus-box-shadow: 0 0 0 3px rgba(theme-color("primary"), .25) !default;
$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default; $btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;
$btn-primary-color: $white !default; $btn-primary-color: $white !default;
$btn-primary-bg: $brand-primary !default; $btn-primary-bg: theme-color("primary") !default;
$btn-primary-border-color: $btn-primary-bg !default; $btn-primary-border-color: $btn-primary-bg !default;
$btn-secondary-color: $gray-dark !default; $btn-secondary-color: $gray-900 !default;
$btn-secondary-bg: $white !default; $btn-secondary-bg: $white !default;
$btn-secondary-border-color: #ccc !default; $btn-secondary-border-color: #ccc !default;
$btn-info-color: $white !default; $btn-info-color: $white !default;
$btn-info-bg: $brand-info !default; $btn-info-bg: theme-color("info") !default;
$btn-info-border-color: $btn-info-bg !default; $btn-info-border-color: $btn-info-bg !default;
$btn-success-color: $white !default; $btn-success-color: $white !default;
$btn-success-bg: $brand-success !default; $btn-success-bg: theme-color("success") !default;
$btn-success-border-color: $btn-success-bg !default; $btn-success-border-color: $btn-success-bg !default;
$btn-warning-color: $white !default; $btn-warning-color: $white !default;
$btn-warning-bg: $brand-warning !default; $btn-warning-bg: theme-color("warning") !default;
$btn-warning-border-color: $btn-warning-bg !default; $btn-warning-border-color: $btn-warning-bg !default;
$btn-danger-color: $white !default; $btn-danger-color: $white !default;
$btn-danger-bg: $brand-danger !default; $btn-danger-bg: theme-color("danger") !default;
$btn-danger-border-color: $btn-danger-bg !default; $btn-danger-border-color: $btn-danger-bg !default;
$btn-link-disabled-color: $gray-light !default; $btn-link-disabled-color: $gray-600 !default;
$btn-block-spacing-y: .5rem !default; $btn-block-spacing-y: .5rem !default;
@ -350,9 +390,9 @@ $btn-transition: all .2s ease-in-out !default;
// Forms // Forms
$input-bg: $white !default; $input-bg: $white !default;
$input-disabled-bg: $gray-lighter !default; $input-disabled-bg: $gray-200 !default;
$input-color: $gray !default; $input-color: $gray-700 !default;
$input-border-color: rgba($black,.15) !default; $input-border-color: rgba($black,.15) !default;
$input-btn-border-width: $border-width !default; // For form controls and buttons $input-btn-border-width: $border-width !default; // For form controls and buttons
$input-box-shadow: inset 0 1px 1px rgba($black,.075) !default; $input-box-shadow: inset 0 1px 1px rgba($black,.075) !default;
@ -362,11 +402,11 @@ $input-border-radius-lg: $border-radius-lg !default;
$input-border-radius-sm: $border-radius-sm !default; $input-border-radius-sm: $border-radius-sm !default;
$input-focus-bg: $input-bg !default; $input-focus-bg: $input-bg !default;
$input-focus-border-color: lighten($brand-primary, 25%) !default; $input-focus-border-color: lighten(theme-color("primary"), 25%) !default;
$input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default; $input-focus-box-shadow: $input-box-shadow, $btn-focus-box-shadow !default;
$input-focus-color: $input-color !default; $input-focus-color: $input-color !default;
$input-placeholder-color: $gray-light !default; $input-placeholder-color: $gray-600 !default;
$input-height-border: $input-btn-border-width * 2 !default; $input-height-border: $input-btn-border-width * 2 !default;
@ -393,7 +433,7 @@ $form-check-inline-margin-x: .75rem !default;
$form-group-margin-bottom: 1rem !default; $form-group-margin-bottom: 1rem !default;
$input-group-addon-bg: $gray-lighter !default; $input-group-addon-bg: $gray-200 !default;
$input-group-addon-border-color: $input-border-color !default; $input-group-addon-border-color: $input-border-color !default;
$custom-control-gutter: 1.5rem !default; $custom-control-gutter: 1.5rem !default;
@ -405,23 +445,23 @@ $custom-control-indicator-bg: #ddd !default;
$custom-control-indicator-bg-size: 50% 50% !default; $custom-control-indicator-bg-size: 50% 50% !default;
$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default; $custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
$custom-control-indicator-disabled-bg: $gray-lighter !default; $custom-control-indicator-disabled-bg: $gray-200 !default;
$custom-control-description-disabled-color: $gray-light !default; $custom-control-description-disabled-color: $gray-600 !default;
$custom-control-indicator-checked-color: $white !default; $custom-control-indicator-checked-color: $white !default;
$custom-control-indicator-checked-bg: $brand-primary !default; $custom-control-indicator-checked-bg: theme-color("primary") !default;
$custom-control-indicator-checked-box-shadow: none !default; $custom-control-indicator-checked-box-shadow: none !default;
$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px $brand-primary !default; $custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, 0 0 0 3px theme-color("primary") !default;
$custom-control-indicator-active-color: $white !default; $custom-control-indicator-active-color: $white !default;
$custom-control-indicator-active-bg: lighten($brand-primary, 35%) !default; $custom-control-indicator-active-bg: lighten(theme-color("primary"), 35%) !default;
$custom-control-indicator-active-box-shadow: none !default; $custom-control-indicator-active-box-shadow: none !default;
$custom-checkbox-border-radius: $border-radius !default; $custom-checkbox-border-radius: $border-radius !default;
$custom-checkbox-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-checkbox-icon-checked: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-checkbox-indeterminate-bg: $brand-primary !default; $custom-checkbox-indeterminate-bg: theme-color("primary") !default;
$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default; $custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
$custom-checkbox-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-checkbox-icon-indeterminate: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
$custom-checkbox-indeterminate-box-shadow: none !default; $custom-checkbox-indeterminate-box-shadow: none !default;
@ -435,9 +475,9 @@ $custom-select-height: $input-height !default;
$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
$custom-select-line-height: $input-btn-line-height !default; $custom-select-line-height: $input-btn-line-height !default;
$custom-select-color: $input-color !default; $custom-select-color: $input-color !default;
$custom-select-disabled-color: $gray-light !default; $custom-select-disabled-color: $gray-600 !default;
$custom-select-bg: $white !default; $custom-select-bg: $white !default;
$custom-select-disabled-bg: $gray-lighter !default; $custom-select-disabled-bg: $gray-200 !default;
$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions $custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
$custom-select-indicator-color: #333 !default; $custom-select-indicator-color: #333 !default;
$custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"), "#", "%23") !default;
@ -445,7 +485,7 @@ $custom-select-border-width: $input-btn-border-width !default;
$custom-select-border-color: $input-border-color !default; $custom-select-border-color: $input-border-color !default;
$custom-select-border-radius: $border-radius !default; $custom-select-border-radius: $border-radius !default;
$custom-select-focus-border-color: lighten($brand-primary, 25%) !default; $custom-select-focus-border-color: lighten(theme-color("primary"), 25%) !default;
$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default; $custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
$custom-select-font-size-sm: 75% !default; $custom-select-font-size-sm: 75% !default;
@ -453,19 +493,19 @@ $custom-select-height-sm: $input-height-sm !default;
$custom-file-height: 2.5rem !default; $custom-file-height: 2.5rem !default;
$custom-file-width: 14rem !default; $custom-file-width: 14rem !default;
$custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem $brand-primary !default; $custom-file-focus-box-shadow: 0 0 0 .075rem $white, 0 0 0 .2rem theme-color("primary") !default;
$custom-file-padding-y: 1rem !default; $custom-file-padding-y: 1rem !default;
$custom-file-padding-x: .5rem !default; $custom-file-padding-x: .5rem !default;
$custom-file-line-height: 1.5 !default; $custom-file-line-height: 1.5 !default;
$custom-file-color: $gray !default; $custom-file-color: $gray-700 !default;
$custom-file-bg: $white !default; $custom-file-bg: $white !default;
$custom-file-border-width: $border-width !default; $custom-file-border-width: $border-width !default;
$custom-file-border-color: $input-border-color !default; $custom-file-border-color: $input-border-color !default;
$custom-file-border-radius: $border-radius !default; $custom-file-border-radius: $border-radius !default;
$custom-file-box-shadow: inset 0 .2rem .4rem rgba($black,.05) !default; $custom-file-box-shadow: inset 0 .2rem .4rem rgba($black,.05) !default;
$custom-file-button-color: $custom-file-color !default; $custom-file-button-color: $custom-file-color !default;
$custom-file-button-bg: $gray-lighter !default; $custom-file-button-bg: $gray-200 !default;
$custom-file-text: ( $custom-file-text: (
placeholder: ( placeholder: (
en: "Choose file..." en: "Choose file..."
@ -477,8 +517,8 @@ $custom-file-text: (
// Form validation // Form validation
$form-feedback-valid-color: $brand-success !default; $form-feedback-valid-color: theme-color("success") !default;
$form-feedback-invalid-color: $brand-danger !default; $form-feedback-invalid-color: theme-color("danger") !default;
// Dropdowns // Dropdowns
@ -491,22 +531,22 @@ $dropdown-margin-top: .125rem !default;
$dropdown-bg: $white !default; $dropdown-bg: $white !default;
$dropdown-border-color: rgba($black,.15) !default; $dropdown-border-color: rgba($black,.15) !default;
$dropdown-border-width: $border-width !default; $dropdown-border-width: $border-width !default;
$dropdown-divider-bg: $gray-lighter !default; $dropdown-divider-bg: $gray-200 !default;
$dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default; $dropdown-box-shadow: 0 .5rem 1rem rgba($black,.175) !default;
$dropdown-link-color: $gray-dark !default; $dropdown-link-color: $gray-900 !default;
$dropdown-link-hover-color: darken($gray-dark, 5%) !default; $dropdown-link-hover-color: darken($gray-900, 5%) !default;
$dropdown-link-hover-bg: $gray-lightest !default; $dropdown-link-hover-bg: $gray-100 !default;
$dropdown-link-active-color: $component-active-color !default; $dropdown-link-active-color: $component-active-color !default;
$dropdown-link-active-bg: $component-active-bg !default; $dropdown-link-active-bg: $component-active-bg !default;
$dropdown-link-disabled-color: $gray-light !default; $dropdown-link-disabled-color: $gray-600 !default;
$dropdown-item-padding-y: .25rem !default; $dropdown-item-padding-y: .25rem !default;
$dropdown-item-padding-x: 1.5rem !default; $dropdown-item-padding-x: 1.5rem !default;
$dropdown-header-color: $gray-light !default; $dropdown-header-color: $gray-600 !default;
// Z-index master list // Z-index master list
@ -526,13 +566,13 @@ $zindex-tooltip: 1070 !default;
$nav-link-padding-y: .5rem !default; $nav-link-padding-y: .5rem !default;
$nav-link-padding-x: 1rem !default; $nav-link-padding-x: 1rem !default;
$nav-link-disabled-color: $gray-light !default; $nav-link-disabled-color: $gray-600 !default;
$nav-tabs-border-color: #ddd !default; $nav-tabs-border-color: #ddd !default;
$nav-tabs-border-width: $border-width !default; $nav-tabs-border-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default; $nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default; $nav-tabs-link-hover-border-color: $gray-200 !default;
$nav-tabs-link-active-color: $gray !default; $nav-tabs-link-active-color: $gray-700 !default;
$nav-tabs-link-active-bg: $body-bg !default; $nav-tabs-link-active-bg: $body-bg !default;
$nav-tabs-link-active-border-color: #ddd !default; $nav-tabs-link-active-border-color: #ddd !default;
@ -556,12 +596,12 @@ $navbar-toggler-padding-x: .75rem !default;
$navbar-toggler-font-size: $font-size-lg !default; $navbar-toggler-font-size: $font-size-lg !default;
$navbar-toggler-border-radius: $btn-border-radius !default; $navbar-toggler-border-radius: $btn-border-radius !default;
$navbar-inverse-color: rgba($white,.5) !default; $navbar-dark-color: rgba($white,.5) !default;
$navbar-inverse-hover-color: rgba($white,.75) !default; $navbar-dark-hover-color: rgba($white,.75) !default;
$navbar-inverse-active-color: rgba($white,1) !default; $navbar-dark-active-color: rgba($white,1) !default;
$navbar-inverse-disabled-color: rgba($white,.25) !default; $navbar-dark-disabled-color: rgba($white,.25) !default;
$navbar-inverse-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-inverse-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default; $navbar-dark-toggler-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
$navbar-inverse-toggler-border-color: rgba($white,.1) !default; $navbar-dark-toggler-border-color: rgba($white,.1) !default;
$navbar-light-color: rgba($black,.5) !default; $navbar-light-color: rgba($black,.5) !default;
$navbar-light-hover-color: rgba($black,.7) !default; $navbar-light-hover-color: rgba($black,.7) !default;
@ -586,14 +626,14 @@ $pagination-border-width: $border-width !default;
$pagination-border-color: #ddd !default; $pagination-border-color: #ddd !default;
$pagination-hover-color: $link-hover-color !default; $pagination-hover-color: $link-hover-color !default;
$pagination-hover-bg: $gray-lighter !default; $pagination-hover-bg: $gray-200 !default;
$pagination-hover-border-color: #ddd !default; $pagination-hover-border-color: #ddd !default;
$pagination-active-color: $white !default; $pagination-active-color: $white !default;
$pagination-active-bg: $brand-primary !default; $pagination-active-bg: theme-color("primary") !default;
$pagination-active-border-color: $brand-primary !default; $pagination-active-border-color: theme-color("primary") !default;
$pagination-disabled-color: $gray-light !default; $pagination-disabled-color: $gray-600 !default;
$pagination-disabled-bg: $white !default; $pagination-disabled-bg: $white !default;
$pagination-disabled-border-color: #ddd !default; $pagination-disabled-border-color: #ddd !default;
@ -601,29 +641,7 @@ $pagination-disabled-border-color: #ddd !default;
// Jumbotron // Jumbotron
$jumbotron-padding: 2rem !default; $jumbotron-padding: 2rem !default;
$jumbotron-bg: $gray-lighter !default; $jumbotron-bg: $gray-200 !default;
// Form states and alerts
//
// Define colors for form feedback states and, by default, alerts.
$state-success-text: #3c763d !default;
$state-success-bg: #dff0d8 !default;
$state-success-border-color: darken($state-success-bg, 5%) !default;
$state-info-text: #31708f !default;
$state-info-bg: #d9edf7 !default;
$state-info-border-color: darken($state-info-bg, 7%) !default;
$state-warning-text: #8a6d3b !default;
$state-warning-bg: #fcf8e3 !default;
$mark-bg: $state-warning-bg !default;
$state-warning-border-color: darken($state-warning-bg, 5%) !default;
$state-danger-text: #a94442 !default;
$state-danger-bg: #f2dede !default;
$state-danger-border-color: darken($state-danger-bg, 5%) !default;
// Cards // Cards
@ -634,10 +652,10 @@ $card-border-width: 1px !default;
$card-border-radius: $border-radius !default; $card-border-radius: $border-radius !default;
$card-border-color: rgba($black,.125) !default; $card-border-color: rgba($black,.125) !default;
$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default; $card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
$card-cap-bg: $gray-lightest !default; $card-cap-bg: $gray-100 !default;
$card-bg: $white !default; $card-bg: $white !default;
$card-inverse-link-hover-color: $white !default; $card-dark-link-hover-color: $white !default;
$card-img-overlay-padding: 1.25rem !default; $card-img-overlay-padding: 1.25rem !default;
@ -692,12 +710,12 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !defau
// Badges // Badges
$badge-default-bg: $gray-light !default; $badge-default-bg: $gray-600 !default;
$badge-primary-bg: $brand-primary !default; $badge-primary-bg: theme-color("primary") !default;
$badge-success-bg: $brand-success !default; $badge-success-bg: theme-color("success") !default;
$badge-info-bg: $brand-info !default; $badge-info-bg: theme-color("info") !default;
$badge-warning-bg: $brand-warning !default; $badge-warning-bg: theme-color("warning") !default;
$badge-danger-bg: $brand-danger !default; $badge-danger-bg: theme-color("danger") !default;
$badge-color: $white !default; $badge-color: $white !default;
$badge-link-hover-color: $white !default; $badge-link-hover-color: $white !default;
@ -730,7 +748,7 @@ $modal-content-box-shadow-sm-up: 0 5px 15px rgba($black,.5) !default;
$modal-backdrop-bg: $black !default; $modal-backdrop-bg: $black !default;
$modal-backdrop-opacity: .5 !default; $modal-backdrop-opacity: .5 !default;
$modal-header-border-color: $gray-lighter !default; $modal-header-border-color: $gray-200 !default;
$modal-footer-border-color: $modal-header-border-color !default; $modal-footer-border-color: $modal-header-border-color !default;
$modal-header-border-width: $modal-content-border-width !default; $modal-header-border-width: $modal-content-border-width !default;
$modal-footer-border-width: $modal-header-border-width !default; $modal-footer-border-width: $modal-header-border-width !default;
@ -754,32 +772,16 @@ $alert-border-radius: $border-radius !default;
$alert-link-font-weight: $font-weight-bold !default; $alert-link-font-weight: $font-weight-bold !default;
$alert-border-width: $border-width !default; $alert-border-width: $border-width !default;
$alert-success-bg: $state-success-bg !default;
$alert-success-text: $state-success-text !default;
$alert-success-border-color: $state-success-border-color !default;
$alert-info-bg: $state-info-bg !default;
$alert-info-text: $state-info-text !default;
$alert-info-border-color: $state-info-border-color !default;
$alert-warning-bg: $state-warning-bg !default;
$alert-warning-text: $state-warning-text !default;
$alert-warning-border-color: $state-warning-border-color !default;
$alert-danger-bg: $state-danger-bg !default;
$alert-danger-text: $state-danger-text !default;
$alert-danger-border-color: $state-danger-border-color !default;
// Progress bars // Progress bars
$progress-height: 1rem !default; $progress-height: 1rem !default;
$progress-font-size: .75rem !default; $progress-font-size: .75rem !default;
$progress-bg: $gray-lighter !default; $progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default; $progress-border-radius: $border-radius !default;
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default; $progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !default;
$progress-bar-color: $white !default; $progress-bar-color: $white !default;
$progress-bar-bg: $brand-primary !default; $progress-bar-bg: theme-color("primary") !default;
$progress-bar-animation-timing: 1s linear infinite !default; $progress-bar-animation-timing: 1s linear infinite !default;
$progress-bar-transition: width .6s ease !default; $progress-bar-transition: width .6s ease !default;
@ -794,19 +796,19 @@ $list-group-border-radius: $border-radius !default;
$list-group-item-padding-y: .75rem !default; $list-group-item-padding-y: .75rem !default;
$list-group-item-padding-x: 1.25rem !default; $list-group-item-padding-x: 1.25rem !default;
$list-group-hover-bg: $gray-lightest !default; $list-group-hover-bg: $gray-100 !default;
$list-group-active-color: $component-active-color !default; $list-group-active-color: $component-active-color !default;
$list-group-active-bg: $component-active-bg !default; $list-group-active-bg: $component-active-bg !default;
$list-group-active-border-color: $list-group-active-bg !default; $list-group-active-border-color: $list-group-active-bg !default;
$list-group-disabled-color: $gray-light !default; $list-group-disabled-color: $gray-600 !default;
$list-group-disabled-bg: $list-group-bg !default; $list-group-disabled-bg: $list-group-bg !default;
$list-group-action-color: $gray !default; $list-group-action-color: $gray-700 !default;
$list-group-action-hover-color: $list-group-action-color !default; $list-group-action-hover-color: $list-group-action-color !default;
$list-group-action-active-color: $list-group-color !default; $list-group-action-active-color: $list-group-color !default;
$list-group-action-active-bg: $gray-lighter !default; $list-group-action-active-bg: $gray-200 !default;
// Image thumbnails // Image thumbnails
@ -823,7 +825,7 @@ $thumbnail-transition: all .2s ease-in-out !default;
// Figures // Figures
$figure-caption-font-size: 90% !default; $figure-caption-font-size: 90% !default;
$figure-caption-color: $gray-light !default; $figure-caption-color: $gray-600 !default;
// Breadcrumbs // Breadcrumbs
@ -832,9 +834,9 @@ $breadcrumb-padding-y: .75rem !default;
$breadcrumb-padding-x: 1rem !default; $breadcrumb-padding-x: 1rem !default;
$breadcrumb-item-padding: .5rem !default; $breadcrumb-item-padding: .5rem !default;
$breadcrumb-bg: $gray-lighter !default; $breadcrumb-bg: $gray-200 !default;
$breadcrumb-divider-color: $gray-light !default; $breadcrumb-divider-color: $gray-600 !default;
$breadcrumb-active-color: $gray-light !default; $breadcrumb-active-color: $gray-600 !default;
$breadcrumb-divider: "/" !default; $breadcrumb-divider: "/" !default;
@ -873,10 +875,10 @@ $code-font-size: 90% !default;
$code-padding-y: .2rem !default; $code-padding-y: .2rem !default;
$code-padding-x: .4rem !default; $code-padding-x: .4rem !default;
$code-color: #bd4147 !default; $code-color: #bd4147 !default;
$code-bg: $gray-lightest !default; $code-bg: $gray-100 !default;
$kbd-color: $white !default; $kbd-color: $white !default;
$kbd-bg: $gray-dark !default; $kbd-bg: $gray-900 !default;
$pre-color: $gray-dark !default; $pre-color: $gray-900 !default;
$pre-scrollable-max-height: 340px !default; $pre-scrollable-max-height: 340px !default;

9
scss/mixins/_alert.scss
View File

@ -1,14 +1,13 @@
// Alerts @mixin alert-variant($background, $border, $color) {
color: $color;
@mixin alert-variant($background, $border, $body-color) {
color: $body-color;
background-color: $background; background-color: $background;
border-color: $border; border-color: $border;
hr { hr {
border-top-color: darken($border, 5%); border-top-color: darken($border, 5%);
} }
.alert-link { .alert-link {
color: darken($body-color, 10%); color: darken($color, 10%);
} }
} }

11
scss/mixins/_badge.scss
View File

@ -1,11 +1,12 @@
// Badges @mixin badge-variant($bg) {
@include color-yiq($bg);
@mixin badge-variant($color) { background-color: $bg;
background-color: $color;
&[href] { &[href] {
@include hover-focus { @include hover-focus {
background-color: darken($color, 10%); @include color-yiq($bg);
text-decoration: none;
background-color: darken($bg, 10%);
} }
} }
} }

14
scss/mixins/_buttons.scss
View File

@ -3,21 +3,22 @@
// Easily pump out default styles, as well as :hover, :focus, :active, // Easily pump out default styles, as well as :hover, :focus, :active,
// and disabled options for all buttons // and disabled options for all buttons
@mixin button-variant($color, $background, $border) { @mixin button-variant($background, $border) {
$active-background: darken($background, 10%); $active-background: darken($background, 7.5%);
$active-border: darken($border, 12%); $active-border: darken($border, 10%);
color: $color; @include color-yiq($background);
background-color: $background; background-color: $background;
border-color: $border; border-color: $border;
@include box-shadow($btn-box-shadow); @include box-shadow($btn-box-shadow);
// Hover and focus styles are shared // Hover and focus styles are shared
@include hover { &:hover {
color: $color; @include color-yiq($background);
background-color: $active-background; background-color: $active-background;
border-color: $active-border; border-color: $active-border;
} }
&:focus, &:focus,
&.focus { &.focus {
// Avoid using mixin so we can pass custom focus shadow properly // Avoid using mixin so we can pass custom focus shadow properly
@ -38,7 +39,6 @@
&:active, &:active,
&.active, &.active,
.show > &.dropdown-toggle { .show > &.dropdown-toggle {
color: $color;
background-color: $active-background; background-color: $active-background;
background-image: none; // Remove the gradient for the pressed/active state background-image: none; // Remove the gradient for the pressed/active state
border-color: $active-border; border-color: $active-border;

4
scss/mixins/_cards.scss
View File

@ -25,7 +25,7 @@
// Inverse text within a card for use with dark backgrounds // Inverse text within a card for use with dark backgrounds
// //
@mixin card-inverse { @mixin card-dark {
color: rgba(255,255,255,.65); color: rgba(255,255,255,.65);
.card-header, .card-header,
@ -47,7 +47,7 @@
} }
.card-link { .card-link {
@include hover-focus { @include hover-focus {
color: $card-inverse-link-hover-color; color: $card-dark-link-hover-color;
} }
} }
} }

20
scss/utilities/_background.scss
View File

@ -1,19 +1,3 @@
// @each $color, $value in $theme-colors {
// Contextual backgrounds @include bg-variant('.bg-#{$color}', $value);
//
.bg-faded {
background-color: darken($body-bg, 3%);
} }
@include bg-variant('.bg-primary', $brand-primary);
@include bg-variant('.bg-success', $brand-success);
@include bg-variant('.bg-info', $brand-info);
@include bg-variant('.bg-warning', $brand-warning);
@include bg-variant('.bg-danger', $brand-danger);
@include bg-variant('.bg-inverse', $brand-inverse);

7
scss/utilities/_borders.scss
View File

@ -2,12 +2,19 @@
// Border // Border
// //
.border { border: 1px solid $gray-200 !important; }
.border-0 { border: 0 !important; } .border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; } .border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; } .border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; } .border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; } .border-left-0 { border-left: 0 !important; }
@each $color, $value in $theme-colors {
.border-#{$color} {
border-color: $value !important;
}
}
// //
// Border-radius // Border-radius
// //

18
scss/utilities/_text.scss
View File

@ -38,21 +38,9 @@
color: #fff !important; color: #fff !important;
} }
@include text-emphasis-variant('.text-muted', $text-muted); @each $color, $value in $theme-colors {
@include text-emphasis-variant('.text-#{$color}', $value);
@include text-emphasis-variant('.text-primary', $brand-primary); }
@include text-emphasis-variant('.text-success', $brand-success);
@include text-emphasis-variant('.text-info', $brand-info);
@include text-emphasis-variant('.text-warning', $brand-warning);
@include text-emphasis-variant('.text-danger', $brand-danger);
// Font color
@include text-emphasis-variant('.text-gray-dark', $gray-dark);
// Misc // Misc