aziascreations/CSS-NibblePoker
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

Improved backgrounds, builds, readability, roundings and Added lists properly

Browse Source 
Update .gitignore, compile.cmd, and 20 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2024-11-20 22:53:18 +01:00
parent d7d4dfba15
commit cdd0aba327
22 changed files with 404 additions and 289 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
htdocs/parts/rounding.php
View File

@@ -11,23 +11,67 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<i class="fa-solid fa-bezier-curve f-right"></i></h2>
</div>
<section class="p-s">
<p>Rounding can be done on a corner/side/global basis using the standard size suffixes and some special ones.</p>
<p>These examples will have ???.</p>
<p>
Rounding can be applied on a global/sided/corner basis using the standard size suffixes and some
special ones shown below.
</p>
<p class="t-bold">Sizes:</p>
<h3 class="t-w-500 t-size-12 my-s">Regular sizes</h3>
<div class="grid col-4 col-medium-3 col-mobile-2 gap-xs t-center">
<div class="r-0 p-xs b bkgd-blank-dark debug"><span class="code">r-0</span></div>
<div class="r-xs p-xs b bkgd-blank-dark debug"><span class="code">r-xs</span></div>
<div class="r-s p-xs b bkgd-blank-dark debug"><span class="code">r-s</span></div>
<div class="r-m p-xs b bkgd-blank-dark debug"><span class="code">r-m</span></div>
<div class="r-l p-xs b bkgd-blank-dark debug"><span class="code">r-l</span></div>
<div class="r-xl p-xs b bkgd-blank-dark debug"><span class="code">r-xl</span></div>
<div class="r-0 p-xs b bkgd-blank-dark debug"><span class="code">.r-0</span></div>
<div class="r-xs p-xs b bkgd-blank-dark debug"><span class="code">.r-xs</span></div>
<div class="r-s p-xs b bkgd-blank-dark debug"><span class="code">.r-s</span></div>
<div class="r-m p-xs b bkgd-blank-dark debug"><span class="code">.r-m</span></div>
<div class="r-l p-xs b bkgd-blank-dark debug"><span class="code">.r-l</span></div>
<div class="r-xl p-xs b bkgd-blank-dark debug"><span class="code">.r-xl</span></div>
</div>
<p class="t-bold">Special classes:</p>
<h3 class="t-w-500 t-size-12 my-s mt-l">Special size</h3>
<div class="grid col-4 col-medium-3 col-mobile-2 gap-xs t-center">
<div class="r-r p-xs b bkgd-blank-dark debug"><span class="code">r-r</span></div>
<div class="r-r p-xs b bkgd-blank-dark debug"><span class="code">.r-r</span></div>
</div>
<b>TODO: All a detail of all classes</b>
<details class="border bkgd-dark r-m mt-l">
<summary class="p-xs">Click to show/hide all classes</summary>
<div class="p-xs bt bkgd-grey">
<?php
$roundingSizes = ["0", "xs", "s", "m", "l", "xl", "r"];
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">r-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">General rounding</span></p>');
echo('<hr class="subtle my-s">');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rt-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Top rounding</span></p>');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rb-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Bottom rounding</span></p>');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rl-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Left rounding</span></p>');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rr-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Right rounding</span></p>');
echo('<hr class="subtle my-s">');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rtl-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Top left rounding</span></p>');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rtr-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Top right rounding</span></p>');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rbl-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Bottom left rounding</span></p>');
echo('<p>');
foreach($roundingSizes as &$spacingSize){echo('<span class="code mr-xs">rbr-'.$spacingSize.'</span>');}
echo('<span class="t-super-muted">Bottom right rounding</span></p>');
?>
</div>
</details>
</section>