From 87f78bc0c5a5869f733e941e6b94e2bbd7a71481 Mon Sep 17 00:00:00 2001
From: Adam Wathan <adam.wathan@gmail.com>
Date: Thu, 3 Aug 2017 22:11:58 -0400
Subject: [PATCH] Switch to proportional border width scale

---
 docs/source/borders.md     |  4 ++--
 src/utilities/borders.less | 26 +++++++++++++-------------
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/docs/source/borders.md b/docs/source/borders.md
index 57dee136f..97666105e 100644
--- a/docs/source/borders.md
+++ b/docs/source/borders.md
@@ -34,8 +34,8 @@ Construct border size utilities using the <code class="inline">.border-side-widt
         <div class="mb-3 text-dark-soft"><span class="text-uppercase">Width</span> <span class="text-dark-softer text-xs">(optional)</span></div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded bg-light-softer">&nbsp;</code> 1px</div>
         <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">2</code> 2px</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">3</code> 4px</div>
-        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">4</code> 8px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">4</code> 4px</div>
+        <div><code class="inline-block my-1 mr-1 px-2 py-1 text-mono border rounded">8</code> 8px</div>
     </div>
 </div>
 
diff --git a/src/utilities/borders.less b/src/utilities/borders.less
index 9f98544f6..fcf26a49c 100644
--- a/src/utilities/borders.less
+++ b/src/utilities/borders.less
@@ -14,8 +14,8 @@
 
 @border-width-1: 1px;
 @border-width-2: 2px;
-@border-width-3: 4px;
-@border-width-4: 8px;
+@border-width-4: 4px;
+@border-width-8: 8px;
 
 // Base
 .border { border: @border-width-1 solid @border-default-color; }
@@ -30,18 +30,18 @@
 .border-l-2 { border-left: @border-width-2 solid @border-default-color; }
 .border-r-2 { border-right: @border-width-2 solid @border-default-color; }
 
-.border-3 { border: @border-width-3 solid @border-default-color; }
-.border-t-3 { border-top: @border-width-3 solid @border-default-color; }
-.border-b-3 { border-bottom: @border-width-3 solid @border-default-color; }
-.border-l-3 { border-left: @border-width-3 solid @border-default-color; }
-.border-r-3 { border-right: @border-width-3 solid @border-default-color; }
-
 .border-4 { border: @border-width-4 solid @border-default-color; }
 .border-t-4 { border-top: @border-width-4 solid @border-default-color; }
 .border-b-4 { border-bottom: @border-width-4 solid @border-default-color; }
 .border-l-4 { border-left: @border-width-4 solid @border-default-color; }
 .border-r-4 { border-right: @border-width-4 solid @border-default-color; }
 
+.border-8 { border: @border-width-8 solid @border-default-color; }
+.border-t-8 { border-top: @border-width-8 solid @border-default-color; }
+.border-b-8 { border-bottom: @border-width-8 solid @border-default-color; }
+.border-l-8 { border-left: @border-width-8 solid @border-default-color; }
+.border-r-8 { border-right: @border-width-8 solid @border-default-color; }
+
 // Styles
 .border-dashed { border-style: dashed; }
 .border-dotted { border-style: dotted; }
@@ -98,16 +98,16 @@
   &border-b-2 { .border-b-2; }
   &border-l-2 { .border-l-2; }
   &border-r-2 { .border-r-2; }
-  &border-3 { .border-3; }
-  &border-t-3 { .border-t-3; }
-  &border-b-3 { .border-b-3; }
-  &border-l-3 { .border-l-3; }
-  &border-r-3 { .border-r-3; }
   &border-4 { .border-4; }
   &border-t-4 { .border-t-4; }
   &border-b-4 { .border-b-4; }
   &border-l-4 { .border-l-4; }
   &border-r-4 { .border-r-4; }
+  &border-8 { .border-8; }
+  &border-t-8 { .border-t-8; }
+  &border-b-8 { .border-b-8; }
+  &border-l-8 { .border-l-8; }
+  &border-r-8 { .border-r-8; }
   &border-dashed { .border-dashed; }
   &border-dotted { .border-dotted; }
   &border-0 { .border-0; }