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

update background utils

Browse Source
This commit is contained in:
Mark Otto 2017-06-25 18:16:37 -07:00
parent aa83c4f417
commit fc053ed096
2 changed files with 2 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -15,14 +15,14 @@ Contextual text classes also work well on anchors with the provided hover and fo
{% example html %}
{% for color in site.data.theme-colors %}
<p><a href="#" class="text-{{ color.name }}{% if color.name == "white" %} bg-gray{% endif %}">{{ color.name | capitalize }} link</a></p>{% endfor %}
<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 %}
{% for color in site.data.theme-colors %}
<div class="p-3 bg-{{ color.name }} {% if color.name == "white" %}text-gray-dark{% else %}text-white{% endif %}">.bg-{{ color.name }}</div>{% endfor %}
<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 %}

8
scss/utilities/_background.scss
View File

@ -1,11 +1,3 @@
//
// Contextual backgrounds
//
.bg-faded {
background-color: darken($body-bg, 3%);
}
@each $color, $value in $theme-colors {
@include bg-variant('.bg-#{$color}', $value);
}