From 890c6041f3bf70b76244611916bc1286a8150bd5 Mon Sep 17 00:00:00 2001
From: naicko <nico.vandenwinckel@retailsonar.com>
Date: Sat, 18 Mar 2017 21:06:05 +0100
Subject: [PATCH 1/3] Update scss mixins to comply with scss-linting rules
 (#22151)

* Fixed some linting issues

* Run npm tasks after scss cleanup

* Revert "Run npm tasks after scss cleanup"

This reverts commit 1103a0da68d1846ad592eb4a105046a939557830.

* Property sort order for grid

* Let's respest the property order in the mixins

* Respect property sort order in reboot file

* ::-ms-expand is a vendor-prefix, add it to the scss-lint disable

* Revert hover mixin comment

* Fixed missing mixin hover-focus
---
 scss/_custom-forms.scss         |  2 +-
 scss/_forms.scss                |  2 +-
 scss/_reboot.scss               |  2 +-
 scss/mixins/_alert.scss         |  2 +-
 scss/mixins/_border-radius.scss |  6 +++---
 scss/mixins/_buttons.scss       |  2 +-
 scss/mixins/_clearfix.scss      |  2 +-
 scss/mixins/_forms.scss         |  2 +-
 scss/mixins/_gradients.scss     |  2 +-
 scss/mixins/_grid.scss          |  2 +-
 scss/mixins/_hover.scss         | 12 ++++++------
 scss/mixins/_list-group.scss    |  2 ++
 scss/mixins/_reset-text.scss    |  7 ++++---
 scss/mixins/_resize.scss        |  2 +-
 scss/mixins/_text-truncate.scss |  2 +-
 15 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index 39f164822..da40d7c50 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable PropertyCount
+// scss-lint:disable PropertyCount, VendorPrefix
 
 // Embedded icons from Open Iconic.
 // Released under MIT and copyright 2014 Waybury.
diff --git a/scss/_forms.scss b/scss/_forms.scss
index 85180aa7f..4ec9f6e32 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -1,4 +1,4 @@
-// scss-lint:disable QualifyingElement
+// scss-lint:disable QualifyingElement, VendorPrefix
 
 //
 // Textual form controls
diff --git a/scss/_reboot.scss b/scss/_reboot.scss
index 78753af00..c52e6f887 100644
--- a/scss/_reboot.scss
+++ b/scss/_reboot.scss
@@ -22,8 +22,8 @@ html {
   box-sizing: border-box; // 1
   font-family: sans-serif; // 2
   line-height: 1.15; // 3
-  -ms-text-size-adjust: 100%; // 4
   -webkit-text-size-adjust: 100%; // 4
+  -ms-text-size-adjust: 100%; // 4
   -ms-overflow-style: scrollbar; // 5
   -webkit-tap-highlight-color: rgba(0,0,0,0); // 6
 }
diff --git a/scss/mixins/_alert.scss b/scss/mixins/_alert.scss
index 6ed3a81ab..1e9307ebb 100644
--- a/scss/mixins/_alert.scss
+++ b/scss/mixins/_alert.scss
@@ -1,9 +1,9 @@
 // Alerts
 
 @mixin alert-variant($background, $border, $body-color) {
+  color: $body-color;
   background-color: $background;
   border-color: $border;
-  color: $body-color;
 
   hr {
     border-top-color: darken($border, 5%);
diff --git a/scss/mixins/_border-radius.scss b/scss/mixins/_border-radius.scss
index 54f29f41d..2024febcf 100644
--- a/scss/mixins/_border-radius.scss
+++ b/scss/mixins/_border-radius.scss
@@ -8,15 +8,15 @@
 
 @mixin border-top-radius($radius) {
   @if $enable-rounded {
-    border-top-right-radius: $radius;
     border-top-left-radius: $radius;
+    border-top-right-radius: $radius;
   }
 }
 
 @mixin border-right-radius($radius) {
   @if $enable-rounded {
-    border-bottom-right-radius: $radius;
     border-top-right-radius: $radius;
+    border-bottom-right-radius: $radius;
   }
 }
 
@@ -29,7 +29,7 @@
 
 @mixin border-left-radius($radius) {
   @if $enable-rounded {
-    border-bottom-left-radius: $radius;
     border-top-left-radius: $radius;
+    border-bottom-left-radius: $radius;
   }
 }
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index f9981e326..91eb44409 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -48,8 +48,8 @@
 
 @mixin button-outline-variant($color, $color-hover: #fff) {
   color: $color;
-  background-image: none;
   background-color: transparent;
+  background-image: none;
   border-color: $color;
 
   @include hover {
diff --git a/scss/mixins/_clearfix.scss b/scss/mixins/_clearfix.scss
index b72cf2712..11a977b73 100644
--- a/scss/mixins/_clearfix.scss
+++ b/scss/mixins/_clearfix.scss
@@ -1,7 +1,7 @@
 @mixin clearfix() {
   &::after {
     display: block;
-    content: "";
     clear: both;
+    content: "";
   }
 }
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 9fde3a8a6..33b186a8d 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -27,8 +27,8 @@
   // Set validation states also for addons
   .input-group-addon {
     color: $color;
-    border-color: $color;
     background-color: lighten($color, 40%);
+    border-color: $color;
   }
 }
 
diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss
index 8bfd97c4d..bad79f961 100644
--- a/scss/mixins/_gradients.scss
+++ b/scss/mixins/_gradients.scss
@@ -17,8 +17,8 @@
 }
 
 @mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
-  background-repeat: repeat-x;
   background-image: linear-gradient($deg, $start-color, $end-color);
+  background-repeat: repeat-x;
 }
 @mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
   background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
diff --git a/scss/mixins/_grid.scss b/scss/mixins/_grid.scss
index 9cd8c7bbb..eb6c012f3 100644
--- a/scss/mixins/_grid.scss
+++ b/scss/mixins/_grid.scss
@@ -4,8 +4,8 @@
 
 @mixin make-container($gutters: $grid-gutter-widths) {
   position: relative;
-  margin-left: auto;
   margin-right: auto;
+  margin-left: auto;
 
   @each $breakpoint in map-keys($gutters) {
     @include media-breakpoint-up($breakpoint) {
diff --git a/scss/mixins/_hover.scss b/scss/mixins/_hover.scss
index 6dd55e705..4aa4b1d5d 100644
--- a/scss/mixins/_hover.scss
+++ b/scss/mixins/_hover.scss
@@ -8,16 +8,18 @@
 //    }
 //  }
 //  @else {
+// scss-lint:disable Indentation
     &:hover { @content }
+// scss-lint:enable Indentation
 //  }
 }
 
+
 @mixin hover-focus {
   @if $enable-hover-media-query {
     &:focus { @content }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &:focus,
     &:hover {
       @content
@@ -32,8 +34,7 @@
       @content
     }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &,
     &:focus,
     &:hover {
@@ -49,8 +50,7 @@
       @content
     }
     @include hover { @content }
-  }
-  @else {
+  } @else {
     &:focus,
     &:active,
     &:hover {
diff --git a/scss/mixins/_list-group.scss b/scss/mixins/_list-group.scss
index 278787bbe..ba27b5041 100644
--- a/scss/mixins/_list-group.scss
+++ b/scss/mixins/_list-group.scss
@@ -6,6 +6,7 @@
     background-color: $background;
   }
 
+  //scss-lint:disable QualifyingElement
   a.list-group-item-#{$state},
   button.list-group-item-#{$state} {
     color: $color;
@@ -21,4 +22,5 @@
       border-color: $color;
     }
   }
+  // scss-lint:enable QualifyingElement
 }
diff --git a/scss/mixins/_reset-text.scss b/scss/mixins/_reset-text.scss
index b95273097..4cf9e79c7 100644
--- a/scss/mixins/_reset-text.scss
+++ b/scss/mixins/_reset-text.scss
@@ -1,17 +1,18 @@
+// scss-lint:disable DuplicateProperty
 @mixin reset-text {
   font-family: $font-family-base;
   // We deliberately do NOT reset font-size or word-wrap.
   font-style: normal;
   font-weight: $font-weight-normal;
-  letter-spacing: normal;
-  line-break: auto;
   line-height: $line-height-base;
   text-align: left; // Fallback for where `start` is not supported
   text-align: start;
   text-decoration: none;
   text-shadow: none;
   text-transform: none;
-  white-space: normal;
+  letter-spacing: normal;
   word-break: normal;
   word-spacing: normal;
+  white-space: normal;
+  line-break: auto;
 }
diff --git a/scss/mixins/_resize.scss b/scss/mixins/_resize.scss
index 83fa63791..66f233a63 100644
--- a/scss/mixins/_resize.scss
+++ b/scss/mixins/_resize.scss
@@ -1,6 +1,6 @@
 // Resize anything
 
 @mixin resizable($direction) {
-  resize: $direction; // Options: horizontal, vertical, both
   overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+  resize: $direction; // Options: horizontal, vertical, both
 }
diff --git a/scss/mixins/_text-truncate.scss b/scss/mixins/_text-truncate.scss
index 5a40bf533..3504bb1aa 100644
--- a/scss/mixins/_text-truncate.scss
+++ b/scss/mixins/_text-truncate.scss
@@ -5,4 +5,4 @@
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
\ No newline at end of file
+}

From 860181212dd5111a90cfba75033e2f4b373c8d63 Mon Sep 17 00:00:00 2001
From: jak <github@jak.io>
Date: Thu, 9 Mar 2017 19:36:32 +0000
Subject: [PATCH 2/3] docs: add text-truncate and extend on text-nowrap

---
 docs/utilities/typography.md | 33 +++++++++++++++++++++++++--------
 1 file changed, 25 insertions(+), 8 deletions(-)

diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md
index 42b61131e..5e29fd88c 100644
--- a/docs/utilities/typography.md
+++ b/docs/utilities/typography.md
@@ -19,14 +19,6 @@ Easily realign text to components with text alignment classes.
 <p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
 {% endexample %}
 
-{% example html %}
-<div class="card">
-  <div class="card-block text-nowrap">
-    Curabitur blandit tempus ardua ridiculus sed magna.
-  </div>
-</div>
-{% endexample %}
-
 For left, right, and center alignment, responsive classes are available that use the same viewport width breakpoints as the grid system.
 
 {% example html %}
@@ -40,6 +32,31 @@ For left, right, and center alignment, responsive classes are available that use
 <p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>
 {% endexample %}
 
+## Text wrapping and overflow
+
+Prevent text from wrapping with a `.text-nowrap` class.
+
+{% example html %}
+<div class="row">
+  <div class="col-1 text-nowrap">
+    Curabitur blandit tempus ardua ridiculus sed magna.
+  </div>
+  <div class="col-11">
+    <img data-src="holder.js/50x50" alt="An image to show the text doesn't wrap">
+  </div>
+</div>
+{% endexample %}
+
+For longer content, you can add a `.text-truncate` class to truncate the text with an ellipsis.
+
+{% example html %}
+<div class="row">
+  <div class="col-2 text-truncate">
+    Praeterea iter est quasdam res quas ex communi.
+  </div>
+</div>
+{% endexample %}
+
 ## Text transform
 
 Transform text in components with text capitalization classes.

From 6f42daf747f094188478bc76b83ce998c2a87e19 Mon Sep 17 00:00:00 2001
From: Theriault <dustintheriault@gmail.com>
Date: Sat, 18 Mar 2017 14:23:10 -0600
Subject: [PATCH 3/3] Add :empty to .custom-file-control selector (#22176)

<label class="custom-file"><input type="file" class="custom-file-input" /><span class="custom-file-control"></span></label>
VS
<label class="custom-file"><input type="file" class="custom-file-input" /><span class="custom-file-control">test.txt</span></label>
---
 scss/_custom-forms.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scss/_custom-forms.scss b/scss/_custom-forms.scss
index da40d7c50..d303c48d0 100644
--- a/scss/_custom-forms.scss
+++ b/scss/_custom-forms.scss
@@ -229,7 +229,7 @@
   @include box-shadow($custom-file-box-shadow);
 
   @each $lang, $text in map-get($custom-file-text, placeholder) {
-    &:lang(#{$lang})::after {
+    &:lang(#{$lang}):empty::after {
       content: $text;
     }
   }