Use grid classes or mixins on .dl-horizontal, update docs to include it, removes auto truncate and makes .text-overflow mixin into a .text-truncate class and mixin combo for better granularity

4 files changed, 8 insertions, 24 deletions

diff --git a/scss/_mixins.scss b/scss/_mixins.scss
index 9d3d289c4..d9f0e7a4b 100644
--- a/scss/_mixins.scss
+++ b/scss/_mixins.scss
@@ -34,7 +34,7 @@
 @import "mixins/size";
 @import "mixins/tab-focus";
 @import "mixins/text-emphasis";
-@import "mixins/text-overflow";
+@import "mixins/text-truncate";
 
 // // Components
 @import "mixins/alert";
diff --git a/scss/_type.scss b/scss/_type.scss
index f1f512fae..c01095356 100644
--- a/scss/_type.scss
+++ b/scss/_type.scss
@@ -142,28 +142,11 @@ dd {
   margin-left: 0; // Undo browser default
 }
 
-// Horizontal description lists
-//
-// Defaults to being stacked without any of the below styles applied, until the
-// grid breakpoint is reached (default of ~768px).
-
+// Horizontal description lists w/ grid classes
 .dl-horizontal {
-  dd {
-    @include clearfix(); // Clear the floated `dt` if an empty `dd` is present
-  }
-
-  @media (min-width: $grid-float-breakpoint) {
-    dt {
-      float: left;
-      width: ($dl-horizontal-offset - 20);
-      clear: left;
-      text-align: right;
-      @include text-overflow();
-    }
-    dd {
-      margin-left: $dl-horizontal-offset;
-    }
-  }
+  margin-right: -$grid-gutter-width;
+  margin-left: -$grid-gutter-width;
+  @include clearfix;
 }
 
 
diff --git a/scss/_utilities.scss b/scss/_utilities.scss
index 34bc6cfdf..6b82d2fc3 100644
--- a/scss/_utilities.scss
+++ b/scss/_utilities.scss
@@ -79,6 +79,7 @@
 .text-center         { text-align: center; }
 .text-justify        { text-align: justify; }
 .text-nowrap         { white-space: nowrap; }
+.text-truncate       { @include text-truncate; }
 
 // Transformation
 .text-lowercase      { text-transform: lowercase; }
diff --git a/scss/mixins/_text-overflow.scss b/scss/mixins/_text-truncate.scss
index 3be7baa8b..5a40bf533 100644
--- a/scss/mixins/_text-overflow.scss
+++ b/scss/mixins/_text-truncate.scss
@@ -1,7 +1,7 @@
-// Text overflow
+// Text truncate
 // Requires inline-block or block for proper styling
 
-@mixin text-overflow() {
+@mixin text-truncate() {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;