wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

Merge pull request #48 from adamwathan/border-width-scale

Browse source 
Switch to proportional border width scale
This commit is contained in:
Adam Wathan 2017-08-03 22:42:18 -04:00 • committed by GitHub
commit 44a0b9648b
2 changed files with 18 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

8
docs/source/borders.md
View file

@ -15,7 +15,9 @@ title: "Borders"
<h2 id="sizes">Sizes</h2>
Construct border size utilities using the <code class="inline">.border-side-width</code> syntax. For example, <code class="inline">.border</code> would add a <code class="inline">1px</code> border to the element, where <code class="inline">.border-b-3</code> would add a <code class="inline">4px</code> bottom border to the element. Note that that the default border style is <code class="inline">solid</code>, and will get the <code class="inline">@border-default-color</code> applied.
Construct border size utilities using the <code class="inline">.border{-side?}{-width?}</code> syntax. For example, <code class="inline">.border</code> would add a <code class="inline">1px</code> border to all sides of the element, where <code class="inline">.border-b-4</code> would add a <code class="inline">4px</code> border to the bottom of the element.
By default, borders are <code class="inline">solid</code>, and use the <code class="inline">@border-default-color</code>.
<div class="flex flex-top mt-8 text-sm">
<div class="pr-12">
@ -34,8 +36,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; }