Skip to content
GitLab
Commit 3e0375e0 authored by Mark Otto's avatar Mark Otto
Browse files

move list group variants to be generated from sass map

parent 91b587ad
7 merge requests!28721Hot test,!27561Adds font-weight-medium to font weight classes,!25326Adjust examples,!23995Add back cursor: pointer for .btn-link,!23178Spinner,!22836v4: Colors redux,!17021v4
Hide whitespace changes
Inline Side-by-side
Showing
with 9 additions and 12 deletions
+9 -12
docs/4.0/components/list-group.md
+ 6
- 8
View file @ 3e0375e0
...@@ -87,10 +87,9 @@ Use contextual classes to style list items with a stateful background and color. ...@@ -87,10 +87,9 @@ Use contextual classes to style list items with a stateful background and color.
{% example html %} {% example html %}
<ul class="list-group"> <ul class="list-group">
<li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-success">Dapibus ac facilisis in</li>
<li class="list-group-item list-group-item-info">Cras sit amet nibh libero</li> {% for color in site.data.theme-colors %}
<li class="list-group-item list-group-item-warning">Porta ac consectetur ac</li> <li class="list-group-item list-group-item-{{ color.name }}">This is a {{ color.name }} list group item</li>{% endfor %}
<li class="list-group-item list-group-item-danger">Vestibulum at eros</li>
</ul> </ul>
{% endexample %} {% endexample %}
...@@ -99,10 +98,9 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o ...@@ -99,10 +98,9 @@ Contextual classes also work with `.list-group-item-action`. Note the addition o
{% example html %} {% example html %}
<div class="list-group"> <div class="list-group">
<a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a> <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-success">Dapibus ac facilisis in</a>
<a href="#" class="list-group-item list-group-item-action list-group-item-info">Cras sit amet nibh libero</a> {% for color in site.data.theme-colors %}
<a href="#" class="list-group-item list-group-item-action list-group-item-warning">Porta ac consectetur ac</a> <a href="#" class="list-group-item list-group-item-action list-group-item-{{ color.name }}">This is a {{ color.name }} list group item</a>{% endfor %}
<a href="#" class="list-group-item list-group-item-action list-group-item-danger">Vestibulum at eros</a>
</div> </div>
{% endexample %} {% endexample %}
......
scss/_list-group.scss
+ 3
- 4
View file @ 3e0375e0
...@@ -109,7 +109,6 @@ ...@@ -109,7 +109,6 @@
// Add modifier classes to change text and background color on individual items. // Add modifier classes to change text and background color on individual items.
// Organizationally, this must come after the `:hover` states. // Organizationally, this must come after the `:hover` states.
@include list-group-item-variant(success, $state-success-bg, $state-success-text); @each $color, $value in $theme-colors {
@include list-group-item-variant(info, $state-info-bg, $state-info-text); @include list-group-item-variant($color, theme-color-level($color, -9), theme-color-level($color, 6));
@include list-group-item-variant(warning, $state-warning-bg, $state-warning-text); }
@include list-group-item-variant(danger, $state-danger-bg, $state-danger-text);
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment