Make more components mixin-friendly

docs/assets/css/bootstrap.css

@@ -2326,6 +2326,11 @@ input[type="button"].btn-block {
   border-bottom-left-radius: 4px;
 }
 
+.list-group-item > .badge {
+  float: right;
+  margin-right: -15px;
+}
+
 .list-group-item-heading {
   margin-top: 0;
   margin-bottom: 5px;
@@ -2365,16 +2370,6 @@ a.list-group-item.active .list-group-item-text {
   color: #e1edf7;
 }
 
-.list-group-item > .badge,
-.list-group-item > .glyphicon-chevron-right {
-  float: right;
-  margin-right: -15px;
-}
-
-.list-group-item > .glyphicon + .badge {
-  margin-right: 5px;
-}
-
 .panel {
   padding: 15px;
   margin-bottom: 20px;
@@ -4279,9 +4274,6 @@ a.list-group-item.active > .badge,
 .accordion-heading .accordion-toggle {
   display: block;
   padding: 8px 15px;
-}
-
-.accordion-toggle {
   cursor: pointer;
 }
 

less/accordion.less

@@ -16,15 +16,12 @@
 }
 .accordion-heading {
   border-bottom: 0;
-}
-.accordion-heading .accordion-toggle {
-  display: block;
-  padding: 8px 15px;
-}
 
-// General toggle styles
+  .accordion-toggle {
-.accordion-toggle {
+    display: block;
-  cursor: pointer;
+    padding: 8px 15px;
+    cursor: pointer;
+  }
 }
 
 // Inner needs the styles because you can't animate properly with any styles on the element

less/alerts.less

@@ -82,11 +82,12 @@
 .alert-block {
   padding-top: 15px;
   padding-bottom: 15px;
-}
+
-.alert-block > p,
+  > p,
-.alert-block > ul {
+  > ul {
-  margin-bottom: 0;
+    margin-bottom: 0;
-}
+  }
-.alert-block p + p {
+  p + p {
-  margin-top: 5px;
+    margin-top: 5px;
+  }
 }

less/carousel.less

@@ -8,15 +8,10 @@
   position: relative;
 }
 
-// Wrap all slides, but only show the active one
 .carousel-inner {
   position: relative;
   overflow: hidden;
   width: 100%;
-}
-
-// Immediate parent of all slides
-.carousel-inner {
 
   > .item {
     display: none;
@@ -80,13 +75,8 @@
   color: #fff;
   text-align: center;
   text-shadow: 0 1px 2px rgba(0,0,0,.6);
-
+  // We can't have this transition here because webkit cancels the carousel
-  // we can't have this transition here
+  // animation if you trip this while in the middle of another animation.
-  // because webkit cancels the carousel
-  // animation if you trip this while
-  // in the middle of another animation
-  // ;_;
-  // .transition(opacity .2s linear);
 
   // Set gradients for backgrounds
   &.left {

less/close.less

@@ -19,15 +19,15 @@
     cursor: pointer;
     .opacity(.5);
   }
-}
 
-// Additional properties for button version
+  // Additional properties for button version
-// iOS requires the button element instead of an anchor tag.
+  // iOS requires the button element instead of an anchor tag.
-// If you want the anchor version, it requires `href="#"`.
+  // If you want the anchor version, it requires `href="#"`.
-button.close {
+  button& {
-  padding: 0;
+    padding: 0;
-  cursor: pointer;
+    cursor: pointer;
-  background: transparent;
+    background: transparent;
-  border: 0;
+    border: 0;
-  -webkit-appearance: none;
+    -webkit-appearance: none;
+  }
 }

less/list-group.less

@@ -22,16 +22,22 @@
   // Place the border on the list items and negative margin up for better styling
   margin-bottom: -1px;
   border: 1px solid @list-group-border;
-}
-// Round the first and last items
-.list-group-item:first-child {
-  .border-top-radius(@border-radius-base);
-}
-.list-group-item:last-child {
-  margin-bottom: 0;
-  .border-bottom-radius(@border-radius-base);
-}
 
+  // Round the first and last items
+  &:first-child {
+    .border-top-radius(@border-radius-base);
+  }
+  &:last-child {
+    margin-bottom: 0;
+    .border-bottom-radius(@border-radius-base);
+  }
+
+  // Align badges within list items
+  > .badge {
+    float: right;
+    margin-right: -15px;
+  }
+}
 
 // Custom content options
 // -------------------------
@@ -50,45 +56,34 @@
 
 // Custom content within linked items
 a.list-group-item {
+  // Colorize content accordingly
   .list-group-item-heading {
     color: #333;
   }
   .list-group-item-text {
     color: #555;
   }
-}
 
-// Hover state
+  // Hover state
-a.list-group-item:hover,
+  &:hover,
-a.list-group-item:focus {
+  &:focus {
-  text-decoration: none;
+    text-decoration: none;
-  background-color: @list-group-hover-bg;
+    background-color: @list-group-hover-bg;
-}
-
-// Active class on item itself, not parent
-a.list-group-item.active {
-  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 {
-    color: inherit;
   }
-  .list-group-item-text {
+
-    color: lighten(@list-group-active-bg, 40%);
+  // Active class on item itself, not parent
+  &.active {
+    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 {
+      color: inherit;
+    }
+    .list-group-item-text {
+      color: lighten(@list-group-active-bg, 40%);
+    }
   }
 }
-
-// Chevrons and badges within list items
-// -------------------------
-
-.list-group-item > .badge,
-.list-group-item > .glyphicon-chevron-right {
-  float: right;
-  margin-right: -15px;
-}
-.list-group-item > .glyphicon + .badge {
-  margin-right: 5px;
-}