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">
{% include icons/bootstrap.svg width="36" height="36" class="d-block" %}
</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 {
height: 3rem;
margin-bottom: .5rem;
background-color: lighten($brand-primary, 50%);
background-color: lighten($blue, 50%);
border-radius: .25rem;
}
@ -94,7 +94,7 @@
float: right;
width: 4rem;
height: 8rem;
background-color: lighten($brand-warning, 25%);
background-color: lighten($blue, 25%);
border-radius: .25rem;
}
@ -375,28 +375,11 @@
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 {
[class^="border-"] {
[class^="border"] {
display: inline-block;
width: 6rem;
height: 6rem;
width: 5rem;
height: 5rem;
margin: .25rem;
background-color: #f5f5f5;
border: 1px solid;
@ -428,5 +411,5 @@
}
.highlight pre code {
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;
}
.bd-featurette-img:hover {
color: $brand-primary;
color: $blue;
text-decoration: none;
}
.bd-featurette-img img {

2
assets/scss/_footer.scss
View File

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

2
assets/scss/_nav.scss
View File

@ -66,7 +66,7 @@
.dropdown-item.active {
font-weight: 500;
color: $gray-dark;
color: $gray-900;
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-repeat: no-repeat;

4
assets/scss/_sidebar.scss
View File

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

3
assets/scss/docs.scss
View File

@ -10,7 +10,7 @@
//
// 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.
// For example, consistent media queries through those mixins.
//
@ -48,6 +48,7 @@
@import "team";
@import "browser-bugs";
@import "brand";
@import "colors";
@import "clipboard-js";
// 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).
{% example html %}
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read this important alert message.
</div>
<div class="alert alert-info" role="alert">
<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>
{% for color in site.data.theme-colors %}
<div class="alert alert-{{ color.name }}" role="alert">
This is a {{ color.name }} alert—check it out!
</div>{% endfor %}
{% endexample %}
{% 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.
{% example html %}
<div class="alert alert-success" role="alert">
<strong>Well done!</strong> You successfully read <a href="#" class="alert-link">this important alert message</a>.
</div>
<div class="alert alert-info" role="alert">
<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>
{% for color in site.data.theme-colors %}
<div class="alert alert-{{ color.name }}" role="alert">
This is a {{ color.name }} alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>{% endfor %}
{% endexample %}
### 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.
<div class="bd-example">
<div class="h1">Example heading <span class="badge badge-default">New</span></div>
<div class="h2">Example heading <span class="badge badge-default">New</span></div>
<div class="h3">Example heading <span class="badge badge-default">New</span></div>
<div class="h4">Example heading <span class="badge badge-default">New</span></div>
<div class="h5">Example heading <span class="badge badge-default">New</span></div>
<div class="h6">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-secondary">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-secondary">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-secondary">New</span></div>
</div>
{% highlight html %}
<h1>Example heading <span class="badge badge-default">New</span></h1>
<h2>Example heading <span class="badge badge-default">New</span></h2>
<h3>Example heading <span class="badge badge-default">New</span></h3>
<h4>Example heading <span class="badge badge-default">New</span></h4>
<h5>Example heading <span class="badge badge-default">New</span></h5>
<h6>Example heading <span class="badge badge-default">New</span></h6>
<h1>Example heading <span class="badge badge-secondary">New</span></h1>
<h2>Example heading <span class="badge badge-secondary">New</span></h2>
<h3>Example heading <span class="badge badge-secondary">New</span></h3>
<h4>Example heading <span class="badge badge-secondary">New</span></h4>
<h5>Example heading <span class="badge badge-secondary">New</span></h5>
<h6>Example heading <span class="badge badge-secondary">New</span></h6>
{% endhighlight %}
## 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.
{% example html %}
<span class="badge badge-default">Default</span>
<span class="badge badge-primary">Primary</span>
<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>
{% for color in site.data.theme-colors %}
<span class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
{% endexample %}
{% 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.
{% example html %}
<span class="badge badge-pill badge-default">Default</span>
<span class="badge badge-pill badge-primary">Primary</span>
<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>
{% for color in site.data.theme-colors %}
<span class="badge badge-pill badge-{{ color.name }}">{{ color.name | capitalize }}</span>{% endfor %}
{% endexample %}
## 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.
{% example html %}
<a href="#" class="badge badge-default">Default</a>
<a href="#" class="badge badge-primary">Primary</a>
<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>
{% for color in site.data.theme-colors %}
<a href="#" class="badge badge-{{ color.name }}">{{ color.name | capitalize }}</a>{% endfor %}
{% endexample %}

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

@ -9,28 +9,12 @@ toc: true
## 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 %}
<!-- Provides extra visual weight and identifies the primary action in a set of buttons -->
<button type="button" class="btn btn-primary">Primary</button>
{% for color in site.data.theme-colors %}
<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>
{% 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.
{% example html %}
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<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>
{% for color in site.data.theme-colors %}
<button type="button" class="btn btn-outline-{{ color.name }}">{{ color.name | capitalize }}</button>{% endfor %}
{% endexample %}
## 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.
{% example html %}
<div class="card">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">Card title</h4>
<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.
{% 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">
<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>
@ -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.
{% example html %}
<div class="card">
<div class="card" style="width: 20rem;">
<ul class="list-group list-group-flush">
<li class="list-group-item">Cras justo odio</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 %}
<div class="card">
<h3 class="card-header">Featured</h3>
<h4 class="card-header">Featured</h4>
<div class="card-body">
<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>
@ -186,7 +186,7 @@ Using the grid, wrap cards in columns and rows as needed.
<div class="col-sm-6">
<div class="card">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
@ -195,7 +195,7 @@ Using the grid, wrap cards in columns and rows as needed.
<div class="col-sm-6">
<div class="card">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
@ -211,7 +211,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
{% example html %}
<div class="card w-75">
<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>
<a href="#" class="btn btn-primary">Button</a>
</div>
@ -219,7 +219,7 @@ Use our handful of [available sizing utilities]({{ site.baseurl }}/docs/{{ site.
<div class="card w-50">
<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>
<a href="#" class="btn btn-primary">Button</a>
</div>
@ -233,7 +233,7 @@ Use custom CSS in your stylesheets or as inline styles to set a width.
{% example html %}
<div class="card" style="width: 20rem;">
<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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
@ -349,10 +349,10 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
### 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 %}
<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">
<div class="card-img-overlay">
<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.
### 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 %}
<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-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>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
@ -386,10 +386,10 @@ You can also use `.card-inverse` with the [contextual backgrounds variants](#bac
### 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 %}
<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">
<blockquote class="card-blockquote">
<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>
</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">
<blockquote class="card-blockquote">
<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>
</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">
<blockquote class="card-blockquote">
<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>
</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">
<blockquote class="card-blockquote">
<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>
</div>
</div>
<div class="card card-inverse card-danger text-center">
<div class="card card-dark card-danger text-center">
<div class="card-body">
<blockquote class="card-blockquote">
<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>
</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">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.</p>
<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 %}
<ul class="list-group">
<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>
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li>
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
{% for color in site.data.theme-colors %}
<li class="list-group-item list-group-item-{{ color.name }}">This is a {{ color.name }} list group item</li>{% endfor %}
</ul>
{% endexample %}
@ -99,10 +98,9 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
{% example html %}
<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 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>
<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-danger">Vestibulum at eros</a>
{% for color in site.data.theme-colors %}
<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 %}
</div>
{% 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.
{% 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>
<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>
@ -64,12 +64,12 @@ The `.navbar-brand` can be applied to most elements, but an anchor works best as
{% example html %}
<!-- As a link -->
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
</nav>
<!-- 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>
</nav>
{% endexample %}
@ -78,7 +78,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
{% example html %}
<!-- Just an image -->
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">
<img src="{{ site.baseurl }}/assets/brand/bootstrap-solid.svg" width="30" height="30" alt="">
</a>
@ -87,7 +87,7 @@ Adding images to the `.navbar-brand` will likely always require custom styles or
{% example html %}
<!-- Image and text -->
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<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="">
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.
{% 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>
<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>
@ -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.
{% 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>
<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>
@ -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.
{% 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>
<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>
@ -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`.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<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>
@ -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.
{% 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>
<form class="form-inline">
<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:
{% example html %}
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<div class="input-group">
<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.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<form class="form-inline">
<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>
@ -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.
{% example html %}
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<span class="navbar-text">
Navbar text with an inline element
</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.
{% 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>
<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>
@ -269,10 +269,10 @@ Mix and match with other components and utilities as needed.
## 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">
<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>
<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>
@ -300,7 +300,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</div>
</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>
<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>
@ -358,11 +358,11 @@ Theming the navbar has never been easier thanks to the combination of theming cl
</div>
{% highlight html %}
<nav class="navbar navbar-inverse bg-inverse">
<nav class="navbar navbar-dark bg-dark">
<!-- Navbar content -->
</nav>
<nav class="navbar navbar-inverse bg-primary">
<nav class="navbar navbar-dark bg-primary">
<!-- Navbar content -->
</nav>
@ -377,7 +377,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it
{% example html %}
<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>
</nav>
</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.
{% 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">
<a class="navbar-brand" href="#">Navbar</a>
</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).**
{% example html %}
<nav class="navbar navbar-light bg-faded">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Full width</a>
</nav>
{% endexample %}
{% 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>
</nav>
{% endexample %}
{% 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>
</nav>
{% endexample %}
{% 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>
</nav>
{% 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:
{% 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">
<span class="navbar-toggler-icon"></span>
</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:
{% 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>
<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>
@ -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:
{% 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>
<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>
@ -524,12 +524,12 @@ Sometimes you want to use the collapse plugin to trigger hidden content elsewher
{% example html %}
<div class="pos-f-t">
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-inverse p-4">
<div class="bg-dark p-4">
<h4 class="text-white">Collapsed content</h4>
<span class="text-muted">Toggleable via the navbar brand.</span>
</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">
<span class="navbar-toggler-icon"></span>
</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.
<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>
<ul class="nav nav-pills">
<li class="nav-item">
@ -59,7 +59,7 @@ Scroll the area below the navbar and watch the active class change. The dropdown
</div>
{% 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>
<ul class="nav nav-pills">
<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="row">
<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>
<nav class="nav nav-pills flex-column">
<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>
{% 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>
<nav class="nav nav-pills flex-column">
<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.
| 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">
<table class="table">
<thead>
<tr>
<th>#</th>
<th>Type</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>
<tbody>
<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>
</tr>
<tr>
<th scope="row">2</th>
<th scope="row">Default</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</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>
</tr>
<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>
</tr>{% endfor %}
</tbody>
</table>
</div>
@ -518,18 +476,14 @@ Use contextual classes to color table rows or individual cells.
{% highlight html %}
<!-- On rows -->
<tr class="table-active">...</tr>
<tr class="table-success">...</tr>
<tr class="table-info">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-danger">...</tr>
{% for color in site.data.theme-colors %}
<tr class="table-{{ color.name }}">...</tr>{% endfor %}
<!-- On cells (`td` or `th`) -->
<tr>
<td class="table-active">...</td>
<td class="table-success">...</td>
<td class="table-info">...</td>
<td class="table-warning">...</td>
<td class="table-danger">...</td>
{% for color in site.data.theme-colors %}
<td class="table-{{ color.name }}">...</td>{% endfor %}
</tr>
{% endhighlight %}

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

@ -18,7 +18,7 @@
<body>
<div class="collapse bg-inverse" id="navbarHeader">
<div class="collapse bg-dark" id="navbarHeader">
<div class="container">
<div class="row">
<div class="col-sm-8 py-4">
@ -36,7 +36,7 @@
</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">
<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">

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

@ -17,7 +17,7 @@
</head>
<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>
<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>

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

@ -17,7 +17,7 @@
</head>
<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>
<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>
@ -47,7 +47,7 @@
<div class="container-fluid">
<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">
<li class="nav-item">
<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>
<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>
<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>

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

@ -23,7 +23,7 @@
<div class="masthead">
<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">
<span class="navbar-toggler-icon"></span>
</button>

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

@ -18,7 +18,7 @@
<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>
<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>

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

@ -18,7 +18,7 @@
<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>
<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>

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

@ -18,7 +18,7 @@
<body>
<nav class="navbar navbar-inverse bg-inverse">
<nav class="navbar navbar-dark bg-dark">
<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">
<span class="navbar-toggler-icon"></span>
@ -50,7 +50,7 @@
</div>
</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>
<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>
@ -82,7 +82,7 @@
</div>
</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>
<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>
@ -114,7 +114,7 @@
</div>
</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>
<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>
@ -146,7 +146,7 @@
</div>
</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>
<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>
@ -178,7 +178,7 @@
</div>
</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>
<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>
@ -210,7 +210,7 @@
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-inverse bg-inverse">
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<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">
@ -244,7 +244,7 @@
</div>
</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">
<span class="navbar-toggler-icon"></span>
</button>
@ -273,7 +273,7 @@
</nav>
<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>
<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>
@ -305,7 +305,7 @@
</div>
</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">
<span class="navbar-toggler-icon"></span>
</button>

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

@ -18,7 +18,7 @@
<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>
<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>

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

@ -18,7 +18,7 @@
<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>
<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>

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

@ -19,7 +19,7 @@
<body>
<!-- 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>
<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>

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:
{% highlight scss %}
$body-bg: $gray-dark;
$body-color: $gray-light;
$body-bg: $gray-900;
$body-color: $gray-600;
{% endhighlight %}
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-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. |
## 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.
- 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).
- 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).
@ -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-body` to `.card-body`
- `.panel-footer` to `.card-footer`
- `.panel-primary` to `.card-primary` and `.card-inverse` (or use `.bg-primary` on `.card-header`)
- `.panel-success` to `.card-success` and `.card-inverse` (or use `.bg-success` on `.card-header`)
- `.panel-info` to `.card-info` and `.card-inverse` (or use `.bg-info` on `.card-header`)
- `.panel-warning` to `.card-warning` and `.card-inverse` (or use `.bg-warning` on `.card-header`)
- `.panel-danger` to `.card-danger` and `.card-inverse` (or use `.bg-danger` 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-dark` (or use `.bg-success` 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-dark` (or use `.bg-warning` on `.card-header`)
- `.panel-danger` to `.card-danger` and `.card-dark` (or use `.bg-danger` on `.card-header`)
### 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">
{% example html %}
<span class="border"></span>
<span class="border-0"></span>
<span class="border-top-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 %}
</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
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 %}
<p class="text-muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<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>
{% for color in site.data.theme-colors %}
<p class="text-{{ color.name }}">.text-{{ color.name }}</p>{% endfor %}
{% 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.**
{% example html %}
<a href="#" class="text-muted">Muted link</a>
<a href="#" class="text-primary">Primary link</a>
<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>
{% for color in site.data.theme-colors %}
<p><a href="#" class="text-{{ color.name }}{% if color.name == "light" %} bg-gray{% endif %}">{{ color.name | capitalize }} link</a></p>{% endfor %}
{% 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.
{% example html %}
<div class="bg-primary text-white">Nullam id dolor id nibh ultricies vehicula ut id elit.</div>
<div class="bg-success text-white">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</div>
<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>
{% for color in site.data.theme-colors %}
<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 %}
{% endexample %}
{% callout info %}

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

@ -10,7 +10,7 @@
<div class="container">
<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>
<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>

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

@ -13,7 +13,7 @@
</style>
</head>
<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>
<div class="collapse navbar-expand-md" id="navbarResponsive">
<a class="navbar-brand" href="#">This shouldn't jump!</a>
@ -164,7 +164,7 @@
<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.
</div>
</div>

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

@ -10,7 +10,7 @@
</style>
</head>
<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>
<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>

15
scss/_alert.scss
View File

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

36
scss/_badge.scss
View File

@ -27,16 +27,6 @@
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
//
// 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).
.badge-default {
@include badge-variant($badge-default-bg);
}
.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);
@each $color, $value in $theme-colors {
.badge-#{$color} {
@include badge-variant($value);
}
}

43
scss/_buttons.scss
View File

@ -50,43 +50,16 @@ fieldset[disabled] a.btn {
// Alternate buttons
//
.btn-primary {
@include button-variant($btn-primary-color, $btn-primary-bg, $btn-primary-border-color);
}
.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);
@each $color, $value in $theme-colors {
.btn-#{$color} {
@include button-variant($value, $value);
}
}
// Remove all backgrounds
.btn-outline-primary {
@include button-outline-variant($btn-primary-bg, $btn-primary-color);
}
.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);
@each $color, $value in $theme-colors {
.btn-outline-#{$color} {
@include button-outline-variant($value, #fff);
}
}

45
scss/_card.scss
View File

@ -105,48 +105,25 @@
// Background variations
//
.card-primary {
@include card-variant($brand-primary, $brand-primary);
}
.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);
@each $color, $value in $theme-colors {
.card-#{$color} {
@include card-variant($value, $value);
}
}
// Remove all backgrounds
.card-outline-primary {
@include card-outline-variant($btn-primary-bg);
}
.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);
@each $color, $value in $theme-colors {
.card-outline-#{$color} {
@include card-variant($value, $value);
}
}
//
// Inverse text within a card for use with dark backgrounds
//
.card-inverse {
@include card-inverse;
.card-dark {
@include card-dark;
}
//

41
scss/_functions.scss
View File

@ -47,3 +47,44 @@
@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.
// Organizationally, this must come after the `:hover` states.
@include list-group-item-variant(success, $state-success-bg, $state-success-text);
@include list-group-item-variant(info, $state-info-bg, $state-info-text);
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text);
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
@each $color, $value in $theme-colors {
@include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
}

22
scss/_navbar.scss
View File

@ -242,25 +242,25 @@
}
// White links against a dark background
.navbar-inverse {
.navbar-dark {
.navbar-brand {
color: $navbar-inverse-active-color;
color: $navbar-dark-active-color;
@include hover-focus {
color: $navbar-inverse-active-color;
color: $navbar-dark-active-color;
}
}
.navbar-nav {
.nav-link {
color: $navbar-inverse-color;
color: $navbar-dark-color;
@include hover-focus {
color: $navbar-inverse-hover-color;
color: $navbar-dark-hover-color;
}
&.disabled {
color: $navbar-inverse-disabled-color;
color: $navbar-dark-disabled-color;
}
}
@ -268,20 +268,20 @@
.active > .nav-link,
.nav-link.show,
.nav-link.active {
color: $navbar-inverse-active-color;
color: $navbar-dark-active-color;
}
}
.navbar-toggler {
color: $navbar-inverse-color;
border-color: $navbar-inverse-toggler-border-color;
color: $navbar-dark-color;
border-color: $navbar-dark-toggler-border-color;
}
.navbar-toggler-icon {
background-image: $navbar-inverse-toggler-icon-bg;
background-image: $navbar-dark-toggler-icon-bg;
}
.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
// inheritance to nested tables.
// Generate the contextual variants
@include table-row-variant(active, $table-active-bg);
@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);
@each $color, $value in $theme-colors {
@include table-row-variant($color, theme-color-level($color, -9));
}
// Inverse styles

288
scss/_variables.scss
View File

@ -8,7 +8,7 @@
// Table of Contents
//
// Colors
// Color system
// Options
// Spacing
// Body
@ -44,36 +44,74 @@
// Code
// Colors
//
// Grayscale and brand colors for use across Bootstrap.
// Color system
//
// Start with assigning color names to specific hex values.
$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;
$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
$gray-dark: #292b2c !default;
$gray: #464a4c !default;
$gray-light: #636c72 !default;
$gray-lighter: #eceeef !default;
$gray-lightest: #f7f7f9 !default;
$grays: (
100: $gray-100,
200: $gray-200,
300: $gray-300,
400: $gray-400,
500: $gray-500,
600: $gray-600,
700: $gray-700,
800: $gray-800,
900: $gray-900
) !default;
// Reassign color vars to semantic color scheme
$brand-primary: $blue !default;
$brand-success: $green !default;
$brand-info: $teal !default;
$brand-warning: $orange !default;
$brand-danger: $red !default;
$brand-inverse: $gray-dark !default;
$blue: #007bff !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #dc3545 !default;
$orange: #fd7e14 !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
@ -118,13 +156,13 @@ $sizes: (
// Settings for the `<body>` element.
$body-bg: $white !default;
$body-color: $gray-dark !default;
$body-color: $gray-900 !default;
// Links
//
// Style anchor elements.
$link-color: $brand-primary !default;
$link-color: theme-color("primary") !default;
$link-decoration: none !default;
$link-hover-color: darken($link-color, 15%) !default;
$link-hover-decoration: underline !default;
@ -188,7 +226,7 @@ $border-radius-lg: .3rem !default;
$border-radius-sm: .2rem !default;
$component-active-color: $white !default;
$component-active-bg: $brand-primary !default;
$component-active-bg: theme-color("primary") !default;
$caret-width: .3em !default;
@ -245,11 +283,11 @@ $lead-font-weight: 300 !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-border-color: $gray-lighter !default;
$blockquote-border-color: $gray-200 !default;
$blockquote-border-width: .25rem !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;
$mark-bg: #fcf8e3 !default;
// Tables
//
@ -278,15 +318,15 @@ $table-hover-bg: rgba($black,.075) !default;
$table-active-bg: $table-hover-bg !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-color: $gray !default;
$table-head-bg: $gray-200 !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-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;
@ -308,34 +348,34 @@ $input-btn-line-height-lg: 1.5 !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-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-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-secondary-color: $gray-dark !default;
$btn-secondary-color: $gray-900 !default;
$btn-secondary-bg: $white !default;
$btn-secondary-border-color: #ccc !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-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-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-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-link-disabled-color: $gray-light !default;
$btn-link-disabled-color: $gray-600 !default;
$btn-block-spacing-y: .5rem !default;
@ -350,9 +390,9 @@ $btn-transition: all .2s ease-in-out !default;
// Forms
$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-btn-border-width: $border-width !default; // For form controls and buttons
$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-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-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;
@ -393,7 +433,7 @@ $form-check-inline-margin-x: .75rem !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;
$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-box-shadow: inset 0 .25rem .25rem rgba($black,.1) !default;
$custom-control-indicator-disabled-bg: $gray-lighter !default;
$custom-control-description-disabled-color: $gray-light !default;
$custom-control-indicator-disabled-bg: $gray-200 !default;
$custom-control-description-disabled-color: $gray-600 !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-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-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-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-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-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;
@ -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-line-height: $input-btn-line-height !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-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-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;
@ -445,7 +485,7 @@ $custom-select-border-width: $input-btn-border-width !default;
$custom-select-border-color: $input-border-color !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-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-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-x: .5rem !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-border-width: $border-width !default;
$custom-file-border-color: $input-border-color !default;
$custom-file-border-radius: $border-radius !default;
$custom-file-box-shadow: inset 0 .2rem .4rem rgba($black,.05) !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: (
placeholder: (
en: "Choose file..."
@ -477,8 +517,8 @@ $custom-file-text: (
// Form validation
$form-feedback-valid-color: $brand-success !default;
$form-feedback-invalid-color: $brand-danger !default;
$form-feedback-valid-color: theme-color("success") !default;
$form-feedback-invalid-color: theme-color("danger") !default;
// Dropdowns
@ -491,22 +531,22 @@ $dropdown-margin-top: .125rem !default;
$dropdown-bg: $white !default;
$dropdown-border-color: rgba($black,.15) !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-link-color: $gray-dark !default;
$dropdown-link-hover-color: darken($gray-dark, 5%) !default;
$dropdown-link-hover-bg: $gray-lightest !default;
$dropdown-link-color: $gray-900 !default;
$dropdown-link-hover-color: darken($gray-900, 5%) !default;
$dropdown-link-hover-bg: $gray-100 !default;
$dropdown-link-active-color: $component-active-color !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-x: 1.5rem !default;
$dropdown-header-color: $gray-light !default;
$dropdown-header-color: $gray-600 !default;
// Z-index master list
@ -526,13 +566,13 @@ $zindex-tooltip: 1070 !default;
$nav-link-padding-y: .5rem !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-width: $border-width !default;
$nav-tabs-border-radius: $border-radius !default;
$nav-tabs-link-hover-border-color: $gray-lighter !default;
$nav-tabs-link-active-color: $gray !default;
$nav-tabs-link-hover-border-color: $gray-200 !default;
$nav-tabs-link-active-color: $gray-700 !default;
$nav-tabs-link-active-bg: $body-bg !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-border-radius: $btn-border-radius !default;
$navbar-inverse-color: rgba($white,.5) !default;
$navbar-inverse-hover-color: rgba($white,.75) !default;
$navbar-inverse-active-color: rgba($white,1) !default;
$navbar-inverse-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-inverse-toggler-border-color: rgba($white,.1) !default;
$navbar-dark-color: rgba($white,.5) !default;
$navbar-dark-hover-color: rgba($white,.75) !default;
$navbar-dark-active-color: rgba($white,1) !default;
$navbar-dark-disabled-color: rgba($white,.25) !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-dark-toggler-border-color: rgba($white,.1) !default;
$navbar-light-color: rgba($black,.5) !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-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-active-color: $white !default;
$pagination-active-bg: $brand-primary !default;
$pagination-active-border-color: $brand-primary !default;
$pagination-active-bg: theme-color("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-border-color: #ddd !default;
@ -601,29 +641,7 @@ $pagination-disabled-border-color: #ddd !default;
// Jumbotron
$jumbotron-padding: 2rem !default;
$jumbotron-bg: $gray-lighter !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;
$jumbotron-bg: $gray-200 !default;
// Cards
@ -634,10 +652,10 @@ $card-border-width: 1px !default;
$card-border-radius: $border-radius !default;
$card-border-color: rgba($black,.125) !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-inverse-link-hover-color: $white !default;
$card-dark-link-hover-color: $white !default;
$card-img-overlay-padding: 1.25rem !default;
@ -692,12 +710,12 @@ $popover-arrow-outer-color: fade-in($popover-border-color, .05) !defau
// Badges
$badge-default-bg: $gray-light !default;
$badge-primary-bg: $brand-primary !default;
$badge-success-bg: $brand-success !default;
$badge-info-bg: $brand-info !default;
$badge-warning-bg: $brand-warning !default;
$badge-danger-bg: $brand-danger !default;
$badge-default-bg: $gray-600 !default;
$badge-primary-bg: theme-color("primary") !default;
$badge-success-bg: theme-color("success") !default;
$badge-info-bg: theme-color("info") !default;
$badge-warning-bg: theme-color("warning") !default;
$badge-danger-bg: theme-color("danger") !default;
$badge-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-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-header-border-width: $modal-content-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-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-height: 1rem !default;
$progress-font-size: .75rem !default;
$progress-bg: $gray-lighter !default;
$progress-bg: $gray-200 !default;
$progress-border-radius: $border-radius !default;
$progress-box-shadow: inset 0 .1rem .1rem rgba($black,.1) !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-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-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-bg: $component-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-action-color: $gray !default;
$list-group-action-color: $gray-700 !default;
$list-group-action-hover-color: $list-group-action-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
@ -823,7 +825,7 @@ $thumbnail-transition: all .2s ease-in-out !default;
// Figures
$figure-caption-font-size: 90% !default;
$figure-caption-color: $gray-light !default;
$figure-caption-color: $gray-600 !default;
// Breadcrumbs
@ -832,9 +834,9 @@ $breadcrumb-padding-y: .75rem !default;
$breadcrumb-padding-x: 1rem !default;
$breadcrumb-item-padding: .5rem !default;
$breadcrumb-bg: $gray-lighter !default;
$breadcrumb-divider-color: $gray-light !default;
$breadcrumb-active-color: $gray-light !default;
$breadcrumb-bg: $gray-200 !default;
$breadcrumb-divider-color: $gray-600 !default;
$breadcrumb-active-color: $gray-600 !default;
$breadcrumb-divider: "/" !default;
@ -873,10 +875,10 @@ $code-font-size: 90% !default;
$code-padding-y: .2rem !default;
$code-padding-x: .4rem !default;
$code-color: #bd4147 !default;
$code-bg: $gray-lightest !default;
$code-bg: $gray-100 !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;

9
scss/mixins/_alert.scss
View File

@ -1,14 +1,13 @@
// Alerts
@mixin alert-variant($background, $border, $body-color) {
color: $body-color;
@mixin alert-variant($background, $border, $color) {
color: $color;
background-color: $background;
border-color: $border;
hr {
border-top-color: darken($border, 5%);
}
.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($color) {
background-color: $color;
@mixin badge-variant($bg) {
@include color-yiq($bg);
background-color: $bg;
&[href] {
@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,
// and disabled options for all buttons
@mixin button-variant($color, $background, $border) {
$active-background: darken($background, 10%);
$active-border: darken($border, 12%);
@mixin button-variant($background, $border) {
$active-background: darken($background, 7.5%);
$active-border: darken($border, 10%);
color: $color;
@include color-yiq($background);
background-color: $background;
border-color: $border;
@include box-shadow($btn-box-shadow);
// Hover and focus styles are shared
@include hover {
color: $color;
&:hover {
@include color-yiq($background);
background-color: $active-background;
border-color: $active-border;
}
&:focus,
&.focus {
// Avoid using mixin so we can pass custom focus shadow properly
@ -38,7 +39,6 @@
&:active,
&.active,
.show > &.dropdown-toggle {
color: $color;
background-color: $active-background;
background-image: none; // Remove the gradient for the pressed/active state
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
//
@mixin card-inverse {
@mixin card-dark {
color: rgba(255,255,255,.65);
.card-header,
@ -47,7 +47,7 @@
}
.card-link {
@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 @@
//
// Contextual backgrounds
//
.bg-faded {
background-color: darken($body-bg, 3%);
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}
@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: 1px solid $gray-200 !important; }
.border-0 { border: 0 !important; }
.border-top-0 { border-top: 0 !important; }
.border-right-0 { border-right: 0 !important; }
.border-bottom-0 { border-bottom: 0 !important; }
.border-left-0 { border-left: 0 !important; }
@each $color, $value in $theme-colors {
.border-#{$color} {
border-color: $value !important;
}
}
//
// Border-radius
//

18
scss/utilities/_text.scss
View File

@ -38,21 +38,9 @@
color: #fff !important;
}
@include text-emphasis-variant('.text-muted', $text-muted);
@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);
@each $color, $value in $theme-colors {
@include text-emphasis-variant('.text-#{$color}', $value);
}
// Misc