Upgrade to bootstrap 4.5

[roojs1] / scss / bootstrap / _list-group.scss

diff --git a/scss/bootstrap/_list-group.scss b/scss/bootstrap/_list-group.scss
index 796cc46..ec25ba8 100644 (file)
--- a/scss/bootstrap/_list-group.scss
+++ b/scss/bootstrap/_list-group.scss
@@ -9,6 +9,7 @@
   // 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;
+  @include border-radius($list-group-border-radius);
 }
 
 
@@ -23,7 +24,8 @@
   text-align: inherit; // For `<button>`s (anchors inherit)
 
   // Hover state
-  @include hover-focus {
+  @include hover-focus() {
+    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;
@@ -44,23 +46,17 @@
   position: relative;
   display: block;
   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;
+  color: $list-group-color;
+  text-decoration: if($link-decoration == none, null, none);
   background-color: $list-group-bg;
   border: $list-group-border-width solid $list-group-border-color;
 
   &:first-child {
-    @include border-top-radius($list-group-border-radius);
+    @include border-top-radius(inherit);
   }
 
   &:last-child {
-    margin-bottom: 0;
-    @include border-bottom-radius($list-group-border-radius);
-  }
-
-  @include hover-focus {
-    z-index: 1; // Place hover/active items above their siblings for proper border styling
-    text-decoration: none;
+    @include border-bottom-radius(inherit);
   }
 
   &.disabled,
@@ -77,6 +73,56 @@
     background-color: $list-group-active-bg;
     border-color: $list-group-active-border-color;
   }
+
+  & + & {
+    border-top-width: 0;
+
+    &.active {
+      margin-top: -$list-group-border-width;
+      border-top-width: $list-group-border-width;
+    }
+  }
+}
+
+
+// Horizontal
+//
+// Change the layout of list group items from vertical (default) to horizontal.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .list-group-horizontal#{$infix} {
+      flex-direction: row;
+
+      > .list-group-item {
+        &:first-child {
+          @include border-bottom-left-radius($list-group-border-radius);
+          @include border-top-right-radius(0);
+        }
+
+        &:last-child {
+          @include border-top-right-radius($list-group-border-radius);
+          @include border-bottom-left-radius(0);
+        }
+
+        &.active {
+          margin-top: 0;
+        }
+
+        + .list-group-item {
+          border-top-width: $list-group-border-width;
+          border-left-width: 0;
+
+          &.active {
+            margin-left: -$list-group-border-width;
+            border-left-width: $list-group-border-width;
+          }
+        }
+      }
+    }
+  }
 }
 
 
@@ -86,26 +132,13 @@
 // useful within other components (e.g., cards).
 
 .list-group-flush {
-  .list-group-item {
-    border-right: 0;
-    border-left: 0;
-    @include border-radius(0);
+  @include border-radius(0);
 
-    &:last-child {
-      margin-bottom: -$list-group-border-width;
-    }
-  }
+  > .list-group-item {
+    border-width: 0 0 $list-group-border-width;
 
-  &:first-child {
-    .list-group-item:first-child {
-      border-top: 0;
-    }
-  }
-
-  &:last-child {
-    .list-group-item:last-child {
-      margin-bottom: 0;
-      border-bottom: 0;
+    &:last-child {
+      border-bottom-width: 0;
     }
   }
 }