Added border styles, Updated FontAwesome to Pro, Added head description
Update Docker - Local demo.run.xml, index.php, and 3 more files...
This commit is contained in:
13
htdocs/index.php
vendored
13
htdocs/index.php
vendored
@@ -12,17 +12,17 @@
|
||||
<link rel="stylesheet" href="./css/nibblepoker.css">
|
||||
<!--<link rel="stylesheet" href="./css/nibblepoker.min.css">-->
|
||||
<link rel="stylesheet" href="./css/debugger.min.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
|
||||
crossorigin="anonymous"
|
||||
referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="https://cdn.nibblepoker.lu/FontAwesomePro/6.7.2/css/all.min.css">
|
||||
<title>NibblePoker's CSS Theme</title>
|
||||
<meta name="description" content="...">
|
||||
<meta name="description"
|
||||
content="Documentation for the standardized CSS theme used across ´NibblePoker.lu´ websites."/>
|
||||
<meta property="og:title" content="NibblePoker"/>
|
||||
<meta property="og:type" content="website"/>
|
||||
<meta property="og:url" content="https://css.nibblepoker.com/"/>
|
||||
<meta property="og:image" content="???"/>
|
||||
<meta property="og:image:type" content="image/png"/>
|
||||
<meta property="og:description" content="..."/>
|
||||
<meta property="og:description"
|
||||
content="Documentation for the standardized CSS theme used across ´NibblePoker.lu´ websites."/>
|
||||
</head>
|
||||
|
||||
<body class="layout-generic">
|
||||
@@ -84,6 +84,9 @@
|
||||
<!-- Core > Rounding -->
|
||||
<?php include("./parts/rounding.php"); ?>
|
||||
|
||||
<!-- Core > Borders -->
|
||||
<?php include("./parts/core/borders.php"); ?>
|
||||
|
||||
<!-- Core > Lists > Base -->
|
||||
<?php include("./parts/lists_base.php"); ?>
|
||||
|
||||
|
||||
97
htdocs/parts/core/borders.php
vendored
Normal file
97
htdocs/parts/core/borders.php
vendored
Normal file
@@ -0,0 +1,97 @@
|
||||
<?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="core-borders"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Borders
|
||||
<i class="fa-solid fa-border-inner f-right"></i>
|
||||
</h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s">Border selection</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-s">
|
||||
Borders can be applied on a global/axis/sided basis using the standard size suffixes.<br>
|
||||
The table below details them in order of application and definition at the CSS-level.
|
||||
</p>
|
||||
|
||||
<table class="table-stylish table-p-xs border r-l table-v-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Border Style</th>
|
||||
<th>Enabling class</th>
|
||||
<th>Disabling class</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><b>Global</b></td>
|
||||
<td><span class="code">.b</span>, <span class="code">.border</span></td>
|
||||
<td><span class="code">.b-0</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Horizontal</b></td>
|
||||
<td><span class="code">.bx</span></td>
|
||||
<td><span class="code">.bx-0</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Vertical</b></td>
|
||||
<td><span class="code">.by</span></td>
|
||||
<td><span class="code">.by-0</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Top</b></td>
|
||||
<td><span class="code">.bt</span></td>
|
||||
<td><span class="code">.bt-0</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Down</b></td>
|
||||
<td><span class="code">.bb</span></td>
|
||||
<td><span class="code">.bb-0</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Left</b></td>
|
||||
<td><span class="code">.bl</span></td>
|
||||
<td><span class="code">.bl-0</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><b>Right</b></td>
|
||||
<td><span class="code">.br</span></td>
|
||||
<td><span class="code">.br-0</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Border styles</h3>
|
||||
<div class="px-s">
|
||||
<table class="table-stylish table-p-xs border r-l table-v-center">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Border style</th>
|
||||
<th>Class</th>
|
||||
<th>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr><td><b>None</b></td><td><span class="code">.b-none</span></td><td><div class="bkgd-light b b-none p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Hidden</b></td><td><span class="code">.b-hidden</span></td><td><div class="bkgd-light b b-hidden p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Dotted</b></td><td><span class="code">.b-dotted</span></td><td><div class="bkgd-light b b-dotted p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Dashed</b></td><td><span class="code">.b-dashed</span></td><td><div class="bkgd-light b b-dashed p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Solid</b></td><td><span class="code">.b-solid</span></td><td><div class="bkgd-light b b-solid p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Double</b></td><td><span class="code">.b-double</span></td><td><div class="bkgd-light b b-double p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Groove</b></td><td><span class="code">.b-groove</span></td><td><div class="bkgd-light b b-groove p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Ridge</b></td><td><span class="code">.b-ridge</span></td><td><div class="bkgd-light b b-ridge p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Inset</b></td><td><span class="code">.b-inset</span></td><td><div class="bkgd-light b b-inset p-xxs"> </div></td></tr>
|
||||
<tr><td><b>Outset</b></td><td><span class="code">.b-outset</span></td><td><div class="bkgd-light b b-outset p-xxs"> </div></td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
41
htdocs/parts/sidebar.php
vendored
41
htdocs/parts/sidebar.php
vendored
@@ -21,32 +21,32 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<div class="p-xs px-m bt bkgd-grey t-size-11">
|
||||
<a class="a-hidden" href="#text-weights">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-text-height pr-xs t-half-muted"></i>Weights
|
||||
<i class="fad fa-text-height pr-xs t-half-muted"></i>Weights
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-styles">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-italic pr-xs t-half-muted"></i>Styles
|
||||
<i class="fad fa-italic pr-xs t-half-muted"></i>Styles
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-alignment">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-text-width pr-xs t-half-muted"></i>Alignment
|
||||
<i class="fad fa-text-width pr-xs t-half-muted"></i>Alignment
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-modifiers">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-subscript pr-xs t-half-muted"></i>Modifiers
|
||||
<i class="fad fa-subscript pr-xs t-half-muted"></i>Modifiers
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-links">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-link pr-xs t-half-muted"></i>Links
|
||||
<i class="fad fa-link pr-xs t-half-muted"></i>Links
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#text-misc">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous
|
||||
<i class="fad fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous
|
||||
</p>
|
||||
</a>
|
||||
|
||||
@@ -54,12 +54,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
|
||||
<a class="a-hidden" href="#spacing">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Spacing
|
||||
<i class="fad fa-ellipsis pr-xs t-half-muted"></i>Spacing
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#rounding">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-bezier-curve pr-xs t-half-muted"></i>Rounding
|
||||
<i class="fad fa-bezier-curve pr-xs t-half-muted"></i>Rounding
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#core-borders">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-border-inner pr-xs t-half-muted"></i>Borders
|
||||
</p>
|
||||
</a>
|
||||
|
||||
@@ -67,22 +72,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
|
||||
<a class="a-hidden" href="#lists-basic">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-list pr-xs t-half-muted"></i>Lists
|
||||
<i class="fad fa-list pr-xs t-half-muted"></i>Lists
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#grids">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-table-cells-large pr-xs t-half-muted"></i>Grids
|
||||
<i class="fad fa-table-cells-large pr-xs t-half-muted"></i>Grids
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#tables-core">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
|
||||
<i class="fad fa-table pr-xs t-half-muted"></i>Tables
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#core-inputs">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-pen-to-square pr-xs t-half-muted"></i>Inputs
|
||||
<i class="fad fa-pen-to-square pr-xs t-half-muted"></i>Inputs
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -93,22 +98,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<div class="p-xs px-m bt bkgd-grey t-size-11">
|
||||
<a class="a-hidden" href="#horizontal-rulers">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-ruler pr-xs t-half-muted"></i>Horizontal Rulers
|
||||
<i class="fad fa-ruler pr-xs t-half-muted"></i>Horizontal Rulers
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#backgrounds">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-paint-roller pr-xs t-half-muted"></i>Backgrounds
|
||||
<i class="fad fa-paint-roller pr-xs t-half-muted"></i>Backgrounds
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#buttons">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-stop pr-xs t-half-muted"></i>Buttons
|
||||
<i class="fad fa-stop pr-xs t-half-muted"></i>Buttons
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#tables-site">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
|
||||
<i class="fad fa-table pr-xs t-half-muted"></i>Tables
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -119,12 +124,12 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<div class="p-xs px-m bt bkgd-grey t-size-11">
|
||||
<a class="a-hidden" href="#examples-inputs">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-pen-to-square pr-xs t-half-muted"></i>Inputs
|
||||
<i class="fad fa-pen-to-square pr-xs t-half-muted"></i>Inputs
|
||||
</p>
|
||||
</a>
|
||||
<a class="a-hidden" href="#examples-cards">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-address-card pr-xs t-half-muted"></i>Cards
|
||||
<i class="fad fa-address-card pr-xs t-half-muted"></i>Cards
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user