rake update[v4.0.0-alpha.6]

1 files changed, 79 insertions, 63 deletions

diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss
index 1e0d112..ec813c8 100644
--- a/assets/stylesheets/bootstrap/_list-group.scss
+++ b/assets/stylesheets/bootstrap/_list-group.scss
@@ -3,19 +3,52 @@
 // Easily usable on <ul>, <ol>, or <div>.
 
 .list-group {
+  display: flex;
+  flex-direction: column;
+
   // No need to set list-style: none; since .list-group-item is block level
   padding-left: 0; // reset padding because ul and ol
   margin-bottom: 0;
 }
 
 
+// Interactive list items
+//
+// Use anchor or button elements instead of `li`s or `div`s to create interactive
+// list items. Includes an extra `.active` modifier class for selected items.
+
+.list-group-item-action {
+  width: 100%; // For `<button>`s (anchors become 100% by default though)
+  color: $list-group-link-color;
+  text-align: inherit; // For `<button>`s (anchors inherit)
+
+  .list-group-item-heading {
+    color: $list-group-link-heading-color;
+  }
+
+  // Hover state
+  @include hover-focus {
+    color: $list-group-link-hover-color;
+    text-decoration: none;
+    background-color: $list-group-hover-bg;
+  }
+
+  &:active {
+    color: $list-group-link-active-color;
+    background-color: $list-group-link-active-bg;
+  }
+}
+
+
 // Individual list items
 //
 // Use on `li`s or `div`s within the `.list-group` parent.
 
 .list-group-item {
   position: relative;
-  display: block;
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
   padding: $list-group-item-padding-y $list-group-item-padding-x;
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -$list-group-border-width;
@@ -31,71 +64,68 @@
     @include border-bottom-radius($list-group-border-radius);
   }
 
-  &.disabled {
-    @include plain-hover-focus {
-      color: $list-group-disabled-color;
-      cursor: $cursor-disabled;
-      background-color: $list-group-disabled-bg;
-
-      // Force color to inherit for custom content
-      .list-group-item-heading {
-        color: inherit;
-      }
-      .list-group-item-text {
-        color: $list-group-disabled-text-color;
-      }
+  @include hover-focus {
+    text-decoration: none;
+  }
+
+  &.disabled,
+  &:disabled {
+    color: $list-group-disabled-color;
+    cursor: $cursor-disabled;
+    background-color: $list-group-disabled-bg;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading {
+      color: inherit;
+    }
+    .list-group-item-text {
+      color: $list-group-disabled-text-color;
     }
   }
 
+  // Include both here for `<a>`s and `<button>`s
   &.active {
-    @include plain-hover-focus {
-      z-index: 2; // Place active items above their siblings for proper border styling
-      color: $list-group-active-color;
-      text-decoration: none; // Repeat here because it inherits global a:hover otherwise
-      background-color: $list-group-active-bg;
-      border-color: $list-group-active-border;
-
-      // Force color to inherit for custom content
-      .list-group-item-heading,
-      .list-group-item-heading > small,
-      .list-group-item-heading > .small {
-        color: inherit;
-      }
-      .list-group-item-text {
-        color: $list-group-active-text-color;
-      }
+    z-index: 2; // Place active items above their siblings for proper border styling
+    color: $list-group-active-color;
+    background-color: $list-group-active-bg;
+    border-color: $list-group-active-border;
+
+    // Force color to inherit for custom content
+    .list-group-item-heading,
+    .list-group-item-heading > small,
+    .list-group-item-heading > .small {
+      color: inherit;
+    }
+
+    .list-group-item-text {
+      color: $list-group-active-text-color;
     }
   }
 }
 
+
+// Flush list items
+//
+// Remove borders and border-radius to keep list group items edge-to-edge. Most
+// useful within other components (e.g., cards).
+
 .list-group-flush {
   .list-group-item {
     border-right: 0;
     border-left: 0;
     border-radius: 0;
   }
-}
-
 
-// Interactive list items
-//
-// Use anchor or button elements instead of `li`s or `div`s to create interactive
-// list items. Includes an extra `.active` modifier class for selected items.
-
-.list-group-item-action {
-  width: 100%; // For `<button>`s (anchors become 100% by default though)
-  color: $list-group-link-color;
-  text-align: inherit; // For `<button>`s (anchors inherit)
-
-  .list-group-item-heading {
-    color: $list-group-link-heading-color;
+  &:first-child {
+    .list-group-item:first-child {
+      border-top: 0;
+    }
   }
 
-  // Hover state
-  @include hover-focus {
-    color: $list-group-link-hover-color;
-    text-decoration: none;
-    background-color: $list-group-hover-bg;
+  &:last-child {
+    .list-group-item:last-child {
+      border-bottom: 0;
+    }
   }
 }
 
@@ -109,17 +139,3 @@
 @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);
-
-
-// Custom content options
-//
-// Extra classes for creating well-formatted content within `.list-group-item`s.
-
-.list-group-item-heading {
-  margin-top: 0;
-  margin-bottom: $list-group-item-heading-margin-bottom;
-}
-.list-group-item-text {
-  margin-bottom: 0;
-  line-height: 1.3;
-}