From 25077c6f3cd39dcec4627f84b11f4ecad0c24c8b Mon Sep 17 00:00:00 2001
From: simurai <simulus@gmail.com>
Date: Thu, 14 Mar 2019 15:15:20 +0900
Subject: [PATCH] Change source order of border colors

This allows changing colors on directional borders. E.g. `border-bottom border-green`
---
 pages/css/utilities/borders.md | 20 +++++------
 src/utilities/borders.scss     | 66 +++++++++++++++++-----------------
 2 files changed, 43 insertions(+), 43 deletions(-)

diff --git a/pages/css/utilities/borders.md b/pages/css/utilities/borders.md
index 079a49af..ff1f795c 100644
--- a/pages/css/utilities/borders.md
+++ b/pages/css/utilities/borders.md
@@ -115,36 +115,36 @@ Use `.border-white-fade-xx` to add a white border with various levels of alpha t
 
 ```html
 <div class="bg-gray-dark text-white p-3 mb-3">
-  <div class="border border-white-fade-15 p-2 mb-2">
+  <div class="border-bottom border-white-fade-15 p-2 mb-2">
     .border-white-fade-15
   </div>
-  <div class="border border-white-fade-30 p-2 mb-2">
+  <div class="border-bottom border-white-fade-30 p-2 mb-2">
     .border-white-fade-30
   </div>
-  <div class="border border-white-fade-50 p-2 mb-2">
+  <div class="border-bottom border-white-fade-50 p-2 mb-2">
     .border-white-fade-50
   </div>
-  <div class="border border-white-fade-70 p-2 mb-2">
+  <div class="border-bottom border-white-fade-70 p-2 mb-2">
     .border-white-fade-70
   </div>
-  <div class="border border-white-fade-85 p-2 mb-2">
+  <div class="border-bottom border-white-fade-85 p-2 mb-2">
     .border-white-fade-85
   </div>
 </div>
 <div class="bg-blue text-white p-3">
-  <div class="border border-white-fade-15 p-2 mb-2">
+  <div class="border-bottom border-white-fade-15 p-2 mb-2">
     .border-white-fade-15
   </div>
-  <div class="border border-white-fade-30 p-2 mb-2">
+  <div class="border-bottom border-white-fade-30 p-2 mb-2">
     .border-white-fade-30
   </div>
-  <div class="border border-white-fade-50 p-2 mb-2">
+  <div class="border-bottom border-white-fade-50 p-2 mb-2">
     .border-white-fade-50
   </div>
-  <div class="border border-white-fade-70 p-2 mb-2">
+  <div class="border-bottom border-white-fade-70 p-2 mb-2">
     .border-white-fade-70
   </div>
-  <div class="border border-white-fade-85 p-2 mb-2">
+  <div class="border-bottom border-white-fade-85 p-2 mb-2">
     .border-white-fade-85
   </div>
 </div>
diff --git a/src/utilities/borders.scss b/src/utilities/borders.scss
index bd281518..5ae47f1f 100644
--- a/src/utilities/borders.scss
+++ b/src/utilities/borders.scss
@@ -16,39 +16,6 @@
 
 .border-dashed { border-style: dashed !important; }
 
-/* Use with .border to turn the border blue */
-.border-blue        { border-color: $border-blue !important; }
-/* Use with .border to turn the border blue-light */
-.border-blue-light  { border-color: $border-blue-light !important; }
-/* Use with .border to turn the border green */
-.border-green       { border-color: $border-green !important; }
-/* Use with .border to turn the border green light */
-.border-green-light { border-color: $border-green-light !important; }
-/* Use with .border to turn the border red */
-.border-red         { border-color: $border-red !important; }
-/* Use with .border to turn the border red-light */
-.border-red-light   { border-color: $border-red-light !important; }
-/* Use with .border to turn the border purple */
-.border-purple      { border-color: $border-purple !important; }
-/* Use with .border to turn the border yellow */
-.border-yellow      { border-color: $border-yellow !important; }
-/* Use with .border to turn the border gray-light */
-.border-gray-light  { border-color: $border-gray-light !important; }
-/* Use with .border to turn the border gray-dark */
-.border-gray-dark   { border-color: $border-gray-dark !important; }
-
-/* Use with .border to turn the border rgba black 0.15 */
-.border-black-fade  { border-color: $border-black-fade !important; }
-/* Use with .border to turn the border rgba white 0.15 */
-.border-white-fade  { border-color: $border-white-fade !important; }
-
-/* Use with .border to turn the border white w/varying transparency */
-.border-white-fade-15 { border-color: $white-fade-15 !important; }
-.border-white-fade-30 { border-color: $white-fade-30 !important; }
-.border-white-fade-50 { border-color: $white-fade-50 !important; }
-.border-white-fade-70 { border-color: $white-fade-70 !important; }
-.border-white-fade-85 { border-color: $white-fade-85 !important; }
-
 $edges: (
   top: (top-left, top-right),
   right: (top-right, bottom-right),
@@ -109,3 +76,36 @@ $edges: (
 
 /* Add a 50% border-radius to make something into a circle */
 .circle { border-radius: 50% !important; }
+
+/* Use with .border to turn the border blue */
+.border-blue        { border-color: $border-blue !important; }
+/* Use with .border to turn the border blue-light */
+.border-blue-light  { border-color: $border-blue-light !important; }
+/* Use with .border to turn the border green */
+.border-green       { border-color: $border-green !important; }
+/* Use with .border to turn the border green light */
+.border-green-light { border-color: $border-green-light !important; }
+/* Use with .border to turn the border red */
+.border-red         { border-color: $border-red !important; }
+/* Use with .border to turn the border red-light */
+.border-red-light   { border-color: $border-red-light !important; }
+/* Use with .border to turn the border purple */
+.border-purple      { border-color: $border-purple !important; }
+/* Use with .border to turn the border yellow */
+.border-yellow      { border-color: $border-yellow !important; }
+/* Use with .border to turn the border gray-light */
+.border-gray-light  { border-color: $border-gray-light !important; }
+/* Use with .border to turn the border gray-dark */
+.border-gray-dark   { border-color: $border-gray-dark !important; }
+
+/* Use with .border to turn the border rgba black 0.15 */
+.border-black-fade  { border-color: $border-black-fade !important; }
+/* Use with .border to turn the border rgba white 0.15 */
+.border-white-fade  { border-color: $border-white-fade !important; }
+
+/* Use with .border to turn the border white w/varying transparency */
+.border-white-fade-15 { border-color: $white-fade-15 !important; }
+.border-white-fade-30 { border-color: $white-fade-30 !important; }
+.border-white-fade-50 { border-color: $white-fade-50 !important; }
+.border-white-fade-70 { border-color: $white-fade-70 !important; }
+.border-white-fade-85 { border-color: $white-fade-85 !important; }