diff options
| author | Mark Otto <[email protected]> | 2017-06-28 09:29:59 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-06-28 09:29:59 -0700 |
| commit | 3e0375e03bd1bf75075ef3d7fc7ff867493adca5 (patch) | |
| tree | 0d0b8d44747dd0d6660101f199adefde76f15f5e | |
| parent | 91b587ad6a2507461a0bcca5fbc2fc770c3bf1eb (diff) | |
| download | bootstrap-3e0375e03bd1bf75075ef3d7fc7ff867493adca5.tar.xz bootstrap-3e0375e03bd1bf75075ef3d7fc7ff867493adca5.zip | |
move list group variants to be generated from sass map
| -rw-r--r-- | docs/4.0/components/list-group.md | 14 | ||||
| -rw-r--r-- | scss/_list-group.scss | 7 |
2 files changed, 9 insertions, 12 deletions
diff --git a/docs/4.0/components/list-group.md b/docs/4.0/components/list-group.md index 4e544ce18..66d76a77d 100644 --- a/docs/4.0/components/list-group.md +++ b/docs/4.0/components/list-group.md @@ -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 %} diff --git a/scss/_list-group.scss b/scss/_list-group.scss index 96fd6f019..7e0b19e01 100644 --- a/scss/_list-group.scss +++ b/scss/_list-group.scss @@ -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)); +} |