New assets update for bootstrap 4

1 files changed, 46 insertions, 48 deletions

diff --git a/assets/stylesheets/bootstrap/_list-group.scss b/assets/stylesheets/bootstrap/_list-group.scss
index 7cb83aa..d909022 100644
--- a/assets/stylesheets/bootstrap/_list-group.scss
+++ b/assets/stylesheets/bootstrap/_list-group.scss
@@ -1,16 +1,11 @@
-//
-// List groups
-// --------------------------------------------------
-
-
 // Base class
 //
 // Easily usable on <ul>, <ol>, or <div>.
 
 .list-group {
   // No need to set list-style: none; since .list-group-item is block level
-  margin-bottom: 20px;
   padding-left: 0; // reset padding because ul and ol
+  margin-bottom: 0;
 }
 
 
@@ -21,11 +16,11 @@
 .list-group-item {
   position: relative;
   display: block;
-  padding: 10px 15px;
+  padding: .75rem 1.25rem;
   // Place the border on the list items and negative margin up for better styling
-  margin-bottom: -1px;
+  margin-bottom: -.0625rem;
   background-color: $list-group-bg;
-  border: 1px solid $list-group-border;
+  border: .0625rem solid $list-group-border;
 
   // Round the first and last items
   &:first-child {
@@ -37,14 +32,23 @@
   }
 }
 
+.list-group-flush {
+  .list-group-item {
+    border-width: .0625rem 0;
+    border-radius: 0;
+  }
+}
+
 
 // Interactive list items
 //
-// Use anchor or button elements instead of `li`s or `div`s to create interactive items.
-// Includes an extra `.active` modifier class for showing selected 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.
 
 a.list-group-item,
 button.list-group-item {
+  width: 100%;
+  text-align: inherit;
   color: $list-group-link-color;
 
   .list-group-item-heading {
@@ -52,54 +56,48 @@ button.list-group-item {
   }
 
   // Hover state
-  &:hover,
-  &:focus {
-    text-decoration: none;
+  @include hover-focus {
     color: $list-group-link-hover-color;
+    text-decoration: none;
     background-color: $list-group-hover-bg;
   }
 }
 
-button.list-group-item {
-  width: 100%;
-  text-align: left;
-}
-
 .list-group-item {
   // Disabled state
-  &.disabled,
-  &.disabled:hover,
-  &.disabled:focus {
-    background-color: $list-group-disabled-bg;
-    color: $list-group-disabled-color;
-    cursor: $cursor-disabled;
-
-    // Force color to inherit for custom content
-    .list-group-item-heading {
-      color: inherit;
-    }
-    .list-group-item-text {
-      color: $list-group-disabled-text-color;
+  &.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;
+      }
     }
   }
 
   // Active class on item itself, not parent
-  &.active,
-  &.active:hover,
-  &.active:focus {
-    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;
+  &.active {
+    @include plain-hover-focus {
+      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;
+      }
     }
   }
 }