mirror_css/pixel-borders
1
0
Fork 0
mirror of https://github.com/NigelOToole/pixel-borders.git synced 2025-08-16 10:54:14 +02:00
Code Issues Releases Wiki Activity

Demo site fix

Browse Source
This commit is contained in:
Nigel O'Toole
2019-04-12 14:52:28 +01:00
parent 66af0d0c5a
commit 80909c2fd3
2 changed files with 28 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
docs/index.html
View File

@@ -8,8 +8,8 @@
<link rel="stylesheet" href="styles/site.css"> <link rel="stylesheet" href="styles/site.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono|Lato:300,400"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono|Lato:300,400">
<!-- <link rel="stylesheet" href="styles/pixel-borders.css"> <link rel="stylesheet" href="styles/pixel-borders.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P"> --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
</head> </head>
<body> <body>
@@ -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>

4
src/index.html
View File

@@ -8,8 +8,8 @@
<link rel="stylesheet" href="styles/site.css"> <link rel="stylesheet" href="styles/site.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono|Lato:300,400"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Cutive+Mono|Lato:300,400">
<!-- <link rel="stylesheet" href="styles/pixel-borders.css"> <link rel="stylesheet" href="styles/pixel-borders.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P"> --> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Press+Start+2P">
</head> </head>
<body> <body>