feat(list group): Orange branded 🎉

Orange-OpenSource · May 14, 2020 · 0d90508 · 0d90508
1 parent 8c18f2b
commit 0d90508
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 22 deletions.
diff --git a/scss/_list-group.scss b/scss/_list-group.scss
@@ -28,12 +28,13 @@
     z-index: 1; // Place hover/focus items above their siblings for proper border styling
     color: $list-group-action-hover-color;
     text-decoration: none;
-    background-color: $list-group-hover-bg;
+    // Boosted mod: no background change
   }
 
   &:active {
-    color: $list-group-action-active-color;
-    background-color: $list-group-action-active-bg;
+    color: $list-group-active-color; // Boosted mod
+    background-color: $list-group-active-bg; // Boosted mod
+    border-color: $list-group-active-border-color; // Boosted mod
   }
 }
 
@@ -155,6 +156,8 @@
 // Add modifier classes to change text and background color on individual items.
 // Organizationally, this must come after the `:hover` states.
 
-@each $color, $value in $theme-colors {
-  @include list-group-item-variant($color, color-level($value, $list-group-item-bg-level), color-level($value, $list-group-item-color-level));
+// Boosted mod: supporting colours only + ensure contrasts
+@each $color, $value in $background-colors {
+  @include list-group-item-variant($color, $value, color-contrast($value));
 }
+// End mod
diff --git a/scss/_variables.scss b/scss/_variables.scss
@@ -1198,12 +1198,9 @@ $list-group-border-radius:          $border-radius !default;
 
 $list-group-item-padding-y:         map-get($spacers, 2) !default;
 $list-group-item-padding-x:         map-get($spacers, 2) !default;
-$list-group-item-bg-level:          -9 !default;
-$list-group-item-color-level:       6 !default;
 
-$list-group-hover-bg:               $gray-200 !default;
-$list-group-active-color:           $component-active-color !default;
-$list-group-active-bg:              $component-active-bg !default;
+$list-group-active-color:           $white !default;
+$list-group-active-bg:              $black !default;
 $list-group-active-border-color:    $list-group-active-bg !default;
 
 $list-group-disabled-color:         $gray-500 !default;
@@ -1212,10 +1209,6 @@ $list-group-disabled-bg:            $list-group-bg !default;
 $list-group-action-color:           $black !default;
 $list-group-action-hover-color:     $primary !default;
 
-$list-group-action-active-color:    $body-color !default;
-$list-group-action-active-bg:       $gray-300 !default;
-
-
 // Image thumbnails
 
 $thumbnail-padding:                 map-get($spacers, 2) !default;

diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
@@ -9,14 +9,10 @@
       &:hover,
       &:focus {
         color: $color;
-        background-color: darken($background, 5%);
+        background-color: if($color == $white, darken($background, 10%), lighten($background, 10%)); // Boosted mod
       }
 
-      &.active {
-        color: $white;
-        background-color: $color;
-        border-color: $color;
-      }
+      // Boosted mod: no variant for active state
     }
   }
 }
diff --git a/site/content/docs/4.3/components/list-group.md b/site/content/docs/4.3/components/list-group.md
@@ -174,10 +174,10 @@ Add nearly any HTML within, even for linked list groups like the one below, with
   <a href="#" class="list-group-item list-group-item-action active" aria-current="true">
     <div class="d-flex w-100 justify-content-between">
       <h5 class="mb-1">List group item heading</h5>
-      <small>3 days ago</small>
+      <small class="text-muted">3 days ago</small>
     </div>
     <p class="mb-1">Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.</p>
-    <small>Donec id elit non mi porta.</small>
+    <small class="text-muted">Donec id elit non mi porta.</small>
   </a>
   <a href="#" class="list-group-item list-group-item-action">
     <div class="d-flex w-100 justify-content-between">