archive-gh-me/tailwindcss
1
0
Fork 0
mirror of https://github.com/tailwindlabs/tailwindcss.git synced 2025-12-08 21:36:08 +00:00
Code Issues Projects Releases Wiki Activity

Switch to proportional border width scale

Browse Source
This commit is contained in:
Adam Wathan 2017-08-03 22:11:58 -04:00
parent e74d29f34e
commit 87f78bc0c5
2 changed files with 15 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/source/borders.md
View File

@ -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>

26
src/utilities/borders.less
View File

@ -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; }