mirror_css/pixel-borders
1
0
Fork 0
mirror of https://github.com/NigelOToole/pixel-borders.git synced 2025-09-02 02:12:45 +02:00
Code Issues Releases Wiki Activity

Documentation fix

Browse Source
This commit is contained in:
Nigel O'Toole
2019-04-12 14:48:40 +01:00
parent 27595738b1
commit 66af0d0c5a
2 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -60,10 +60,10 @@ After adding the repo as a dependency you can import it into your SASS files. Al
### pixel-box ### pixel-box
Options as above unless otherwise specified.
| Property | Default | Type | Description | | Property | Default | Type | Description |
| ------------------------ | ----------------------------- | ------------------------ | ------------------------------------------------------------------------ | | ------------------------ | ----------------------------- | ------------------------ | ------------------------------------------------------------------------ |
| `$corner-size` | | Number | Number of pixels taken out of the corner. |
| `$border-size` | | Number(px) | Border size. |
| `$background-color` | | Hexadecimal color | Background colour for the box, this is used as a base for colour theme. | | `$background-color` | | Hexadecimal color | Background colour for the box, this is used as a base for colour theme. |
| `$border-color` | Darkened `$background-color` | False/Hexadecimal colour | Border colour. | | `$border-color` | Darkened `$background-color` | False/Hexadecimal colour | Border colour. |
| `$border-inset` | true | Boolean | Add a inset border. | | `$border-inset` | true | Boolean | Add a inset border. |

37
src/index.html
View File

@@ -95,24 +95,24 @@
// Available options // Available options
@include pixel-borders( @include pixel-borders(
$corner-size: 1, $corner-size: 1,
$border-size: 4px, $border-size: 4px,
$border-color: #000, $border-color: #000,
$border-inset-color: false $border-inset-color: false
); );
// Helper method to create custom styles e.g. colour themes, inset border, highlight // Helper method to create custom styles e.g. colour themes, inset border, highlight
@include pixel-box( @include pixel-box(
$corner-size, $corner-size,
$border-size, $border-size,
$background-color, $background-color,
$border-color: false, $border-color: false,
$border-inset: true, $border-inset: true,
$border-inset-size: false, $border-inset-size: false,
$border-inset-color: false, $border-inset-color: false,
$border-inset-sides: false, // Sides to apply inset border: 'all', 'top-left' or 'bottom-right' $border-inset-sides: false,
$border-inset-color-br: false, // Bottom right inset border colour $border-inset-color-br: false,
$border-inset-color-tl: false // Top left inset border colour $border-inset-color-tl: false
); );
</code></pre> </code></pre>
@@ -152,7 +152,6 @@
</table> </table>
<h3>pixel-box</h3> <h3>pixel-box</h3>
<p>Options as above unless otherwise specified.</p>
<table class="table"> <table class="table">
<tr> <tr>
@@ -161,6 +160,18 @@
<th>Type</th> <th>Type</th>
<th>Description</th> <th>Description</th>
</tr> </tr>
<tr>
<td><code>$corner-size</code></td>
<td></td>
<td>Number</td>
<td>Number of pixels taken out of the corner.</td>
</tr>
<tr>
<td><code>$border-size</code></td>
<td></td>
<td>Number(px)</td>
<td>Border size.</td>
</tr>
<tr> <tr>
<td><code>$background-color</code></td> <td><code>$background-color</code></td>
<td></td> <td></td>