Compare commits
No commits in common. "a2a229c720efe1febcf518e410f4a38016ccc2d7" and "4097bcca67a86a9c75eb045246d309910453359f" have entirely different histories.
a2a229c720
...
4097bcca67
@ -9,7 +9,7 @@ services:
|
|||||||
- TZ=Europe/Brussels
|
- TZ=Europe/Brussels
|
||||||
volumes:
|
volumes:
|
||||||
- ./htdocs:/var/www/html:ro
|
- ./htdocs:/var/www/html:ro
|
||||||
#- ./apache2.conf:/etc/apache2/apache2.conf:ro
|
- ./apache2.conf:/etc/apache2/apache2.conf:ro
|
||||||
restart: unless-stopped
|
restart: unless-stopped
|
||||||
stop_grace_period: 5s
|
stop_grace_period: 5s
|
||||||
labels:
|
labels:
|
||||||
|
|||||||
@ -106,14 +106,8 @@
|
|||||||
<!-- Grids -->
|
<!-- Grids -->
|
||||||
<?php include("./parts/grids.php"); ?>
|
<?php include("./parts/grids.php"); ?>
|
||||||
|
|
||||||
<!-- Tables -->
|
|
||||||
<?php include("./parts/tables.php"); ?>
|
|
||||||
|
|
||||||
<!-- Horizontal Rulers -->
|
<!-- Horizontal Rulers -->
|
||||||
<?php include("./parts/horizontal_rulers.php"); ?>
|
<?php include("./parts/horizontal_rulers.php"); ?>
|
||||||
|
|
||||||
<!-- Buttons -->
|
|
||||||
<?php include("./parts/buttons.php"); ?>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="d-flex flex-align-center w-full p-s py-xs">
|
<footer class="d-flex flex-align-center w-full p-s py-xs">
|
||||||
|
|||||||
@ -1,74 +0,0 @@
|
|||||||
<?php
|
|
||||||
// Making sure the file is included and not accessed directly.
|
|
||||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
|
||||||
header('HTTP/1.1 403 Forbidden'); die();
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
|
|
||||||
<a id="buttons"></a>
|
|
||||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
|
||||||
<h2 class="t-w-500 t-size-14">Buttons
|
|
||||||
<i class="fa-solid fa-stop f-right"></i>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<section class="p-s">
|
|
||||||
<p class="mb-s">
|
|
||||||
Buttons are components that can be formed using existing core classes and a couple of specific classes
|
|
||||||
for colors only.
|
|
||||||
</p>
|
|
||||||
|
|
||||||
<div class="grid col-2 grid-gap-xs">
|
|
||||||
<div>
|
|
||||||
<h3 class="t-w-500 t-size-12 mt-s">Unstyled button</h3>
|
|
||||||
<div class="m-s">
|
|
||||||
<button class="m-xs">My button</button>
|
|
||||||
<code class="d-block p-xxs border r-s mt-s">
|
|
||||||
<b>button</b>
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 class="t-w-500 t-size-12 mt-s">Default styled button</h3>
|
|
||||||
<div class="m-s">
|
|
||||||
<button class="p-xs r-s border">Default button</button>
|
|
||||||
<code class="d-block p-xxs border r-s mt-s">
|
|
||||||
button<b>.p-xs.r-s.border</b>
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<h3 class="t-w-500 t-size-12 mt-s">Colored buttons</h3>
|
|
||||||
<div class="m-s">
|
|
||||||
<p class="mb-s">
|
|
||||||
Buttons can also be colored in order to give direct visual feedback
|
|
||||||
on their intended action by simply giving them another class.
|
|
||||||
</p>
|
|
||||||
<div class="grid col-2 grid-gap-xs">
|
|
||||||
<div>
|
|
||||||
<button class="p-xs r-s border primary">Primary button</button>
|
|
||||||
<code class="d-block p-xxs border r-s mt-s">
|
|
||||||
button.p-xs.r-s.border<b>.primary</b>
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="p-xs r-s border success">Success button</button>
|
|
||||||
<code class="d-block p-xxs border r-s mt-s">
|
|
||||||
button.p-xs.r-s.border<b>.success</b>
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="p-xs r-s border warning">Warning button</button>
|
|
||||||
<code class="d-block p-xxs border r-s mt-s">
|
|
||||||
button.p-xs.r-s.border<b>.warning</b>
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<button class="p-xs r-s border error">Danger/Error button</button>
|
|
||||||
<code class="d-block p-xxs border r-s mt-s">
|
|
||||||
button.p-xs.r-s.border<b>.error</b>
|
|
||||||
</code>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
@ -88,13 +88,6 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
|||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<a class="a-hidden" href="#tables">
|
|
||||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
|
||||||
<i class="fa-solid fa-table pr-xs t-size-12 t-half-muted"></i>
|
|
||||||
<span class="t-size-12">Tables</span>
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<hr class="subtle">
|
<hr class="subtle">
|
||||||
|
|
||||||
<a class="a-hidden" href="#horizontal-rulers">
|
<a class="a-hidden" href="#horizontal-rulers">
|
||||||
@ -103,13 +96,4 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
|||||||
<span class="t-size-12">Horizontal Rulers</span>
|
<span class="t-size-12">Horizontal Rulers</span>
|
||||||
</p>
|
</p>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<hr class="subtle">
|
|
||||||
|
|
||||||
<a class="a-hidden" href="#buttons">
|
|
||||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
|
||||||
<i class="fa-solid fa-stop pr-xs t-size-12 t-half-muted"></i>
|
|
||||||
<span class="t-size-12">Buttons</span>
|
|
||||||
</p>
|
|
||||||
</a>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|||||||
@ -1,66 +0,0 @@
|
|||||||
<?php
|
|
||||||
// Making sure the file is included and not accessed directly.
|
|
||||||
if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
|
||||||
header('HTTP/1.1 403 Forbidden'); die();
|
|
||||||
}
|
|
||||||
?>
|
|
||||||
|
|
||||||
<a id="tables"></a>
|
|
||||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
|
||||||
<h2 class="t-w-500 t-size-14">Tables
|
|
||||||
<i class="fa-solid fa-table f-right"></i>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<section class="p-s">
|
|
||||||
<h3 class="t-w-500 t-size-12 my-s">Unstyled table</h3>
|
|
||||||
<p class="mb-s">
|
|
||||||
Unstyled tables have no cell gap, no border and no other form of styling.
|
|
||||||
</p>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>Cell 1.1</td>
|
|
||||||
<td>Cell 1.2</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Cell 2.1</td>
|
|
||||||
<td>Cell 2.2</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
<code class="d-block p-xxs border r-s mt-s">
|
|
||||||
<b>table>tr*2>td*2</b>
|
|
||||||
</code>
|
|
||||||
|
|
||||||
<h3 class="t-w-500 t-size-12 my-s">Stylish table</h3>
|
|
||||||
<p class="mb-xxs">
|
|
||||||
Tables can quickly be styled by simply using the following classes:
|
|
||||||
</p>
|
|
||||||
<ul class="mb-s">
|
|
||||||
<li><span class="code">stylish</span> - Adds colors to cells and makes headers bold</li>
|
|
||||||
<li><span class="code">table-p-xs</span> - Adds a <i>xs</i> padding to all cells</li>
|
|
||||||
<li><span class="code">table-p-s</span> - Adds an <i>s</i> padding to all cells</li>
|
|
||||||
<li><span class="code">table-h-p-s</span> - Adds an <i>s</i> padding to the header cells</li>
|
|
||||||
</ul>
|
|
||||||
<table class="stylish table-p-s border">
|
|
||||||
<tr>
|
|
||||||
<th>Head 1</th>
|
|
||||||
<th>Head 2</th>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Cell 1.1</td>
|
|
||||||
<td>Cell 1.2</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Cell 2.1</td>
|
|
||||||
<td>Cell 2.2</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<code class="d-block p-xxs border r-s mt-s">
|
|
||||||
table<b>.stylish.table-p-s.border</b><br>
|
|
||||||
th>td*2<br>
|
|
||||||
tr*2>td*2
|
|
||||||
</code>
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</section>
|
|
||||||
@ -6,10 +6,6 @@
|
|||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.d-block {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.d-inline-block {
|
.d-inline-block {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -48,7 +48,6 @@ table.stylish {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// FIXME: Move this out in its own alignment section...
|
|
||||||
// Centers the cells' content vertically
|
// Centers the cells' content vertically
|
||||||
.table-v-center {
|
.table-v-center {
|
||||||
tr, td {
|
tr, td {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user