Improved backgrounds, builds, readability, roundings and Added lists properly
Update .gitignore, compile.cmd, and 20 more files...
This commit is contained in:
parent
d7d4dfba15
commit
cdd0aba327
5
.gitignore
vendored
5
.gitignore
vendored
@ -7,3 +7,8 @@ node_modules/
|
||||
# Build Artifacts
|
||||
*.css
|
||||
*.min.html
|
||||
*.7z
|
||||
*.zip
|
||||
*.tar
|
||||
*.gz
|
||||
*.rar
|
||||
|
||||
15
compile.cmd
15
compile.cmd
@ -35,6 +35,21 @@ cd /d %~dp0
|
||||
copy ".\bkgds\*.png" ".\htdocs\css\"
|
||||
popd
|
||||
|
||||
:sass-assets
|
||||
echo Copying assets...
|
||||
pushd %CD%
|
||||
cd /d %~dp0
|
||||
copy ".\bkgds\*.png" ".\htdocs\css\"
|
||||
popd
|
||||
|
||||
:sass-compress
|
||||
echo Compressing assets...
|
||||
pushd %CD%
|
||||
cd /d %~dp0\htdocs\css
|
||||
7z a -t7z -mx=9 nibblepoker.css.7z nibblepoker.min.css *.png
|
||||
7z a -tzip -mx=9 nibblepoker.css.zip nibblepoker.min.css *.png
|
||||
popd
|
||||
|
||||
:sass-end
|
||||
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
@ -82,8 +82,11 @@
|
||||
<!-- Rounding -->
|
||||
<?php include("./parts/rounding.php"); ?>
|
||||
|
||||
<!-- Lists -->
|
||||
<?php include("./parts/lists.php"); ?>
|
||||
<!-- Lists > Base -->
|
||||
<?php include("./parts/lists_base.php"); ?>
|
||||
|
||||
<!-- Lists > Composed -->
|
||||
<?php include("./parts/lists_composed.php"); ?>
|
||||
|
||||
<!-- Grids -->
|
||||
<?php include("./parts/grids.php"); ?>
|
||||
@ -117,5 +120,6 @@
|
||||
|
||||
<script src="/js/sidebar.js"></script>
|
||||
<script src="/js/text-direction-switch.js"></script>
|
||||
<script src="/js/anchor-fix.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
10
htdocs/js/anchor-fix.js
Normal file
10
htdocs/js/anchor-fix.js
Normal file
@ -0,0 +1,10 @@
|
||||
// This script is required due to Chromium's dogshit and random ability to jump to anchors when reloading pages.
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
if (window.location.hash) {
|
||||
const eAnchor = document.querySelector(window.location.hash);
|
||||
if (eAnchor) {
|
||||
eAnchor.scrollIntoView();
|
||||
}
|
||||
}
|
||||
});
|
||||
@ -16,16 +16,16 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<h3 class="t-w-500 t-size-12 mb-xs mt-xxs">Simple colors</h3>
|
||||
<div class="grid col-3 grid-gap-l px-s">
|
||||
<div>
|
||||
<div class="p-l border rb-s bkgd-dark my-xs"></div>
|
||||
<div class="p-l border r-xl bkgd-dark my-xs"></div>
|
||||
<span class="code mb-s">.bkgd-dark</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="p-l border r-s bkgd-grey my-xs"></div>
|
||||
<div class="p-l border r-xl bkgd-grey my-xs"></div>
|
||||
<span class="code mb-s">.bkgd-grey</span>
|
||||
<span class="code mb-s">.bkgd-gray</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="p-l border r-s bkgd-light my-xs"></div>
|
||||
<div class="p-l border r-xl bkgd-light my-xs"></div>
|
||||
<span class="code mb-s">.bkgd-light</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -33,24 +33,24 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Grid backgrounds</h3>
|
||||
<div class="grid col-2 grid-gap-l px-s">
|
||||
<div>
|
||||
<p class="t-w-500">Grid (40% opacity)</p>
|
||||
<div class="p-l border r-s bkgd-grid40 my-xs"></div>
|
||||
<p class="t-w-500">40% opacity (Title bars)</p>
|
||||
<div class="p-l border r-xl bkgd-grid40 my-xs"></div>
|
||||
<span class="code">.bkgd-grid40</span>
|
||||
<span class="code">.bkgd-grid</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="t-w-500">Math (30% opacity)</p>
|
||||
<div class="p-l border r-s bkgd-grid30 my-xs"></div>
|
||||
<p class="t-w-500">30% opacity (Unused)</p>
|
||||
<div class="p-l border r-xl bkgd-grid30 my-xs"></div>
|
||||
<span class="code">.bkgd-grid30</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="t-w-500">Math (20% opacity)</p>
|
||||
<div class="p-l border r-s bkgd-grid20 my-xs"></div>
|
||||
<p class="t-w-500">20% opacity (Unused)</p>
|
||||
<div class="p-l border r-xl bkgd-grid20 my-xs"></div>
|
||||
<span class="code">.bkgd-grid20</span>
|
||||
</div>
|
||||
<div>
|
||||
<p class="t-w-500">Surround (10% opacity)</p>
|
||||
<div class="p-l border r-s bkgd-grid10 my-xs"></div>
|
||||
<p class="t-w-500">10% opacity (Surroundings)</p>
|
||||
<div class="p-l border r-xl bkgd-grid10 my-xs"></div>
|
||||
<span class="code">.bkgd-grid10</span>
|
||||
<span class="code">.bkgd-surround</span>
|
||||
</div>
|
||||
@ -60,7 +60,7 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<div class="grid col-3 grid-gap-l px-s">
|
||||
<div>
|
||||
<p class="t-w-500">Transparent</p>
|
||||
<div class="p-l border r-s bkgd-transparent my-xs"></div>
|
||||
<div class="p-l border r-xl bkgd-transparent my-xs"></div>
|
||||
<span class="code">.bkgd-transparent</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -11,32 +11,26 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<i class="fa-solid fa-table-cells-large f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<p>
|
||||
Grids are defined by using the <span class="code">grid</span> and <span class="code">col-X</span> class where
|
||||
<span class="code">X</span> represents the number of columns and can be
|
||||
<span class="code">1</span>, <span class="code">2</span>,
|
||||
<span class="code">3</span>, <span class="code">4</span>,
|
||||
<span class="code">6</span> or <span class="code">8</span>.
|
||||
</p>
|
||||
|
||||
<!--<p>You should preferably use <span class="code"><div></span> elements for the grid container and each cell.</p>-->
|
||||
<!--<p>[Equal width for cells, maybe]</p>-->
|
||||
|
||||
<p class="t-bold">Examples without inter-cell gaps:</p>
|
||||
<div class="gap-xs">
|
||||
<p><span class="code">div.grid.col-1>div</span></p>
|
||||
<div class="grid col-1 debug p-xxs">
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Basic grids</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-m">
|
||||
Grids are defined by combining the <span class="code">.grid</span> and <span class="code">.col-X</span>
|
||||
classes where <span class="code">X</span> represents the number of columns and can be
|
||||
<span class="code">1</span>, <span class="code">2</span>,
|
||||
<span class="code">3</span>, <span class="code">4</span>,
|
||||
<span class="code">6</span> or <span class="code">8</span>.
|
||||
</p>
|
||||
<div class="grid col-1 debug p-xxs mb-xs">
|
||||
<div class="bkgd-blank-dark debug">Cell #1</div>
|
||||
</div>
|
||||
|
||||
<p><span class="code">div.grid.col-2>div*2</span></p>
|
||||
<div class="grid col-2 debug p-xxs">
|
||||
<p><span class="code">div.grid.col-1>div</span></p>
|
||||
<div class="grid col-2 debug p-xxs mb-xs mt-m">
|
||||
<div class="bkgd-blank-dark debug">Cell #1</div>
|
||||
<div class="bkgd-blank-dark debug">Cell #2</div>
|
||||
</div>
|
||||
|
||||
<p><span class="code">div.grid.col-6>div*6</span></p>
|
||||
<div class="grid col-6 debug p-xxs">
|
||||
<p><span class="code">div.grid.col-2>div*2</span></p>
|
||||
<div class="grid col-6 debug p-xxs mb-xs mt-m">
|
||||
<div class="bkgd-blank-dark debug">Cell #1</div>
|
||||
<div class="bkgd-blank-dark debug">Cell #2</div>
|
||||
<div class="bkgd-blank-dark debug">Cell #3</div>
|
||||
@ -44,40 +38,39 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<div class="bkgd-blank-dark debug">Cell #5</div>
|
||||
<div class="bkgd-blank-dark debug">Cell #6</div>
|
||||
</div>
|
||||
<p><span class="code">div.grid.col-6>div*6</span></p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Inter-cell gaps can also be setup by using the <span class="code">grid-gap-X</span> or
|
||||
<span class="code">col-gap-X</span> classes and replacing the <span class="code">X</span>
|
||||
with the standard size suffixes.
|
||||
</p>
|
||||
|
||||
<p class="t-bold">Examples with inter-cell gaps:</p>
|
||||
<div class="gap-xs">
|
||||
<?php
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-l">Grid gaps</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-m">
|
||||
Inter-cell gaps can also be setup by using the <span class="code">grid-gap-X</span> or
|
||||
<span class="code">col-gap-X</span> classes and replacing the <span class="code">X</span>
|
||||
with the standard size suffixes.
|
||||
</p>
|
||||
<div class="gap-xs">
|
||||
<?php
|
||||
foreach(["xs", "m", "l"] as &$gapSize) {
|
||||
echo('<p><span class="code">div.grid.col-3.grid-gap-' . $gapSize . '>div*6</span></p>');
|
||||
echo('<div class="grid col-3 grid-gap-' . $gapSize . ' debug p-xxs">');
|
||||
echo('<div class="grid col-3 grid-gap-' . $gapSize . ' debug p-xxs mt-m">');
|
||||
for($iGap = 1; $iGap <= 6; $iGap++) {
|
||||
echo('<div class="bkgd-blank-dark debug">Cell #' . $iGap . '</div>');
|
||||
}
|
||||
echo('</div>');
|
||||
echo('<p class="mt-xs"><span class="code">div.grid.col-3.grid-gap-' . $gapSize . '>div*6</span></p>');
|
||||
}
|
||||
?>
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b>TODO: All mobile rules, Add non-identical sizing</b>
|
||||
|
||||
|
||||
<details class="border bkgd-blank r-m mt-s">
|
||||
<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-blank-dark">
|
||||
<div class="p-xs bt bkgd-grey">
|
||||
<p>
|
||||
<span class="code mr-xs">grid</span>
|
||||
<span class="t-super-muted">Defined a grid container</span>
|
||||
</p>
|
||||
|
||||
|
||||
<hr class="subtle my-s">
|
||||
|
||||
<table>
|
||||
@ -134,4 +127,5 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<p class="mt-m t-bold">TODO: All mobile rules, Add non-identical sizing</p>
|
||||
</section>
|
||||
|
||||
@ -1,142 +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="lists"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Lists
|
||||
<i class="fa-solid fa-list f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<h3 class="t-w-500 t-size-12 my-s">Blank lists</h3>
|
||||
<p class="mb-s">
|
||||
By default, ordered and unordered lists have no bullet.<br>
|
||||
This behavior can be used to create custom styled lists that still remain helpful for SEO and accessibility.
|
||||
</p>
|
||||
<ul class="debug">
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li class="l-bullet-disc">
|
||||
Item 3 with explicit disc bullet (See below)
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Normal lists</h3>
|
||||
<p class="mb-s">
|
||||
Regular-looking lists can be created by simply adding the <span class="code">.l-bullets</span>
|
||||
or <span class="code">.list-bullets</span> class to list's root element.<br>
|
||||
These classes must also be used for any nested children lists !
|
||||
</p>
|
||||
<div class="debug mb-s">
|
||||
<ul class="l-bullets debug l-bullet-manual">
|
||||
<li>Line 1</li>
|
||||
<li>Line 2<br>Line 2 continued after a <i>br</i></li>
|
||||
<li>Line 3</li>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>Line 3.1</li>
|
||||
<li>Line 3.2</li>
|
||||
</ul>
|
||||
<li>Line 4</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="debug">
|
||||
<ol class="l-bullets l-bullet-manual">
|
||||
<li>Salt</li>
|
||||
<li>Packs of crisps</li>
|
||||
<ol class="l-bullets l-bullet-manual">
|
||||
<li>Salt and pepper</li>
|
||||
<li>Paprika</li>
|
||||
</ol>
|
||||
<li>Olive oil</li>
|
||||
</ol>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Bullet position</h3>
|
||||
<p class="mb-s">
|
||||
By default, the lists do not include their bullet in the parent element.<br>
|
||||
This is due to the fact that the imposed spacings when using
|
||||
<span class="code">list-style-position: inside;</span> looks like absolute trash.
|
||||
</p>
|
||||
<p class="mb-s">
|
||||
This behavior can be changed by using the <span class="code">.l-bullet-inside</span>
|
||||
or <span class="code">list-bullet-inside</span> classes.<br>
|
||||
Alternatively, a nicer manual spacing can be applied by using the <span class="code">.l-bullet-manual</span>
|
||||
or <span class="code">list-bullet-manual</span> classes.
|
||||
</p>
|
||||
<p class="mb-s">
|
||||
Please note that the following classes must be applied to the root element and any nested
|
||||
list's root element too.
|
||||
</p>
|
||||
<div class="grid col-3">
|
||||
<div>
|
||||
<p><b>Outside (Default)</b></p>
|
||||
<ul class="debug l-bullets l-bullet-outside my-xs">
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ul>
|
||||
<span class="code">ul.l-bullets<b>.l-bullet-outside</b>>li*3</span>
|
||||
</div>
|
||||
<div>
|
||||
<p><b>Inside</b></p>
|
||||
<ul class="debug l-bullets l-bullet-inside my-xs">
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ul>
|
||||
<span class="code">ul.l-bullets<b>.l-bullet-inside</b>>li*3</span>
|
||||
</div>
|
||||
<div>
|
||||
<p><b>Manual (Recommended)</b></p>
|
||||
<ul class="debug l-bullets l-bullet-manual my-xs">
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ul>
|
||||
<span class="code">ul.l-bullets<b>.l-bullet-manual</b>>li*3</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Bullet styles</h3>
|
||||
<p class="mb-s">
|
||||
Each list and its entry can have its bullets' style changed by using the following classes in the
|
||||
<span class="code">ul</span>, <span class="code">ol</span> or <span class="code">li</span> elements.<br>
|
||||
<s>The <span class="code">type</span> property also works as expected in these cases.</s>
|
||||
</p>
|
||||
<p class="mb-s">
|
||||
Please note that some of the more exotic bullet styles may not fit properly when using
|
||||
the manual position as shown below.<br>
|
||||
This is a known issue and won't be fixed as it is an edge-case.
|
||||
</p>
|
||||
<ul class="debug l-bullet-manual">
|
||||
<li class="l-bullet-disc">
|
||||
Disc: <span class="code">.l-bullet-disc</span>, <span class="code">.list-bullet-disc</span>
|
||||
</li>
|
||||
<li class="l-bullet-square">
|
||||
Square: <span class="code">.l-bullet-square</span>, <span class="code">.list-bullet-square</span>
|
||||
</li>
|
||||
<li class="l-bullet-decimal">
|
||||
Decimal: <span class="code">.l-bullet-decimal</span>, <span class="code">.list-bullet-decimal</span>
|
||||
</li>
|
||||
<li class="l-bullet-decimal-leading">
|
||||
Decimal: <span class="code">.l-bullet-decimal-leading</span>, <span class="code">.list-bullet-decimal-leading</span>
|
||||
</li>
|
||||
<li class="l-bullet-georgian">
|
||||
Gregorian: <span class="code">.l-bullet-georgian</span>, <span class="code">.list-bullet-georgian</span>
|
||||
</li>
|
||||
<li class="l-bullet-chinese">
|
||||
Chinese: <span class="code">.l-bullet-chinese</span>, <span class="code">.list-bullet-chinese</span>
|
||||
</li>
|
||||
<li class="l-bullet-kannada">
|
||||
Kannada: <span class="code">.l-bullet-kannada</span>, <span class="code">.list-bullet-kannada</span>
|
||||
</li>
|
||||
<li class="l-bullet-none">
|
||||
None: <span class="code">.l-bullet-none</span>, <span class="code">.list-bullet-none</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</section>
|
||||
149
htdocs/parts/lists_base.php
Normal file
149
htdocs/parts/lists_base.php
Normal file
@ -0,0 +1,149 @@
|
||||
<?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="lists-basic"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Basic Lists
|
||||
<i class="fa-solid fa-list f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<h3 class="t-w-500 t-size-12 my-s">Blank lists</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-s">
|
||||
By default, ordered and unordered lists have no bullet.<br>
|
||||
This behavior can be used to create custom styled lists that still remain helpful for SEO and accessibility.
|
||||
</p>
|
||||
<ul class="debug">
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li class="l-bullet-disc">
|
||||
Item 3 with explicit disc bullet (See below)
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Normal lists</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-s">
|
||||
Regular-looking lists can be created by simply adding the <span class="code">.l-bullets</span>
|
||||
or <span class="code">.list-bullets</span> class to list's root element.<br>
|
||||
These classes must also be used for any nested children lists !
|
||||
</p>
|
||||
<div class="debug mb-s">
|
||||
<ul class="l-bullets debug l-bullet-manual">
|
||||
<li>Line 1</li>
|
||||
<li>Line 2<br>Line 2 continued after a <i>br</i></li>
|
||||
<li>Line 3</li>
|
||||
<ul class="l-bullets l-bullet-manual">
|
||||
<li>Line 3.1</li>
|
||||
<li>Line 3.2</li>
|
||||
</ul>
|
||||
<li>Line 4</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="debug">
|
||||
<ol class="l-bullets l-bullet-manual">
|
||||
<li>Salt</li>
|
||||
<li>Packs of crisps</li>
|
||||
<ol class="l-bullets l-bullet-manual">
|
||||
<li>Salt and pepper</li>
|
||||
<li>Paprika</li>
|
||||
</ol>
|
||||
<li>Olive oil</li>
|
||||
</ol>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Bullet position</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-s">
|
||||
By default, the lists do not include their bullet in the parent element.<br>
|
||||
This is due to the fact that the imposed spacings when using
|
||||
<span class="code">list-style-position: inside;</span> looks like absolute trash.
|
||||
</p>
|
||||
<p class="mb-s">
|
||||
This behavior can be changed by using the <span class="code">.l-bullet-inside</span>
|
||||
or <span class="code">list-bullet-inside</span> classes.<br>
|
||||
Alternatively, a nicer manual spacing can be applied by using the <span class="code">.l-bullet-manual</span>
|
||||
or <span class="code">list-bullet-manual</span> classes.
|
||||
</p>
|
||||
<p class="mb-s">
|
||||
Please note that the following classes must be applied to the root element and any nested
|
||||
list's root element too.
|
||||
</p>
|
||||
<div class="grid col-3">
|
||||
<div>
|
||||
<p><b>Outside (Default)</b></p>
|
||||
<ul class="debug l-bullets l-bullet-outside my-xs">
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ul>
|
||||
<span class="code">ul.l-bullets<b>.l-bullet-outside</b>>li*3</span>
|
||||
</div>
|
||||
<div>
|
||||
<p><b>Inside</b></p>
|
||||
<ul class="debug l-bullets l-bullet-inside my-xs">
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ul>
|
||||
<span class="code">ul.l-bullets<b>.l-bullet-inside</b>>li*3</span>
|
||||
</div>
|
||||
<div>
|
||||
<p><b>Manual (Recommended)</b></p>
|
||||
<ul class="debug l-bullets l-bullet-manual my-xs">
|
||||
<li>Item 1</li>
|
||||
<li>Item 2</li>
|
||||
<li>Item 3</li>
|
||||
</ul>
|
||||
<span class="code">ul.l-bullets<b>.l-bullet-manual</b>>li*3</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Bullet styles</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-s">
|
||||
Each list and its entry can have its bullets' style changed by using the following classes in the
|
||||
<span class="code">ul</span>, <span class="code">ol</span> or <span class="code">li</span> elements.<br>
|
||||
<s>The <span class="code">type</span> property also works as expected in these cases.</s>
|
||||
</p>
|
||||
<p class="mb-s">
|
||||
Please note that some of the more exotic bullet styles may not fit properly when using
|
||||
the manual position as shown below.<br>
|
||||
This is a known issue and won't be fixed as it is an edge-case.
|
||||
</p>
|
||||
<ul class="debug l-bullet-manual">
|
||||
<li class="l-bullet-disc">
|
||||
Disc: <span class="code">.l-bullet-disc</span>, <span class="code">.list-bullet-disc</span>
|
||||
</li>
|
||||
<li class="l-bullet-square">
|
||||
Square: <span class="code">.l-bullet-square</span>, <span class="code">.list-bullet-square</span>
|
||||
</li>
|
||||
<li class="l-bullet-decimal">
|
||||
Decimal: <span class="code">.l-bullet-decimal</span>, <span class="code">.list-bullet-decimal</span>
|
||||
</li>
|
||||
<li class="l-bullet-decimal-leading">
|
||||
Decimal: <span class="code">.l-bullet-decimal-leading</span>, <span class="code">.list-bullet-decimal-leading</span>
|
||||
</li>
|
||||
<li class="l-bullet-georgian">
|
||||
Gregorian: <span class="code">.l-bullet-georgian</span>, <span class="code">.list-bullet-georgian</span>
|
||||
</li>
|
||||
<li class="l-bullet-chinese">
|
||||
Chinese: <span class="code">.l-bullet-chinese</span>, <span class="code">.list-bullet-chinese</span>
|
||||
</li>
|
||||
<li class="l-bullet-kannada">
|
||||
Kannada: <span class="code">.l-bullet-kannada</span>, <span class="code">.list-bullet-kannada</span>
|
||||
</li>
|
||||
<li class="l-bullet-none">
|
||||
None: <span class="code">.l-bullet-none</span>, <span class="code">.list-bullet-none</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
16
htdocs/parts/lists_composed.php
Normal file
16
htdocs/parts/lists_composed.php
Normal file
@ -0,0 +1,16 @@
|
||||
<?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="lists-composed"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Composed Lists
|
||||
<i class="fa-solid fa-ellipsis f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<h3 class="t-w-500 t-size-12 my-s">Blank lists</h3>
|
||||
|
||||
</section>
|
||||
@ -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>
|
||||
|
||||
@ -69,10 +69,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
|
||||
<hr class="subtle">
|
||||
|
||||
<a class="a-hidden" href="#lists">
|
||||
<a class="a-hidden" href="#lists-basic">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-list pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Lists</span>
|
||||
<span class="t-size-12">Basic</span>
|
||||
</p>
|
||||
</a>
|
||||
|
||||
<a class="a-hidden" href="#lists-composed">
|
||||
<p class="t-size-18 t-w-500 py-xs sidebar-entry">
|
||||
<i class="fa-solid fa-ellipsis pr-xs t-size-12 t-half-muted"></i>
|
||||
<span class="t-size-12">Composed</span>
|
||||
</p>
|
||||
</a>
|
||||
|
||||
|
||||
@ -22,17 +22,17 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
</p>
|
||||
|
||||
<div class="grid col-3 col-medium-2 col-mobile-1 gap-xs mt-s t-center">
|
||||
<div><div class="debug p-xxs"><div class="debug"><p><span class="code">p-xxs</span></p></div></div></div>
|
||||
<div><div class="debug p-xs"><div class="debug"><p><span class="code">p-xs</span></p></div></div></div>
|
||||
<div><div class="debug p-s"><div class="debug"><p><span class="code">p-s</span></p></div></div></div>
|
||||
<div><div class="debug p-m"><div class="debug"><p><span class="code">p-m</span></p></div></div></div>
|
||||
<div><div class="debug p-l"><div class="debug"><p><span class="code">p-l</span> </p></div></div></div>
|
||||
<div><div class="debug p-xl"><div class="debug"><p><span class="code">p-xl</span></p></div></div></div>
|
||||
<div><div class="debug p-xxs"><div class="debug"><p><span class="code">.p-xxs</span></p></div></div></div>
|
||||
<div><div class="debug p-xs"><div class="debug"><p><span class="code">.p-xs</span></p></div></div></div>
|
||||
<div><div class="debug p-s"><div class="debug"><p><span class="code">.p-s</span></p></div></div></div>
|
||||
<div><div class="debug p-m"><div class="debug"><p><span class="code">.p-m</span></p></div></div></div>
|
||||
<div><div class="debug p-l"><div class="debug"><p><span class="code">.p-l</span> </p></div></div></div>
|
||||
<div><div class="debug p-xl"><div class="debug"><p><span class="code">.p-xl</span></p></div></div></div>
|
||||
</div>
|
||||
|
||||
<details class="border bkgd-blank r-m mt-s">
|
||||
<details class="border bkgd-dark r-m mt-s">
|
||||
<summary class="p-xs">Click to show/hide all classes</summary>
|
||||
<div class="p-xs bt bkgd-blank-dark">
|
||||
<div class="p-xs bt bkgd-grey">
|
||||
<?php
|
||||
$spacingSizes = ["0", "xxs", "xs", "s", "m", "l", "xl"];
|
||||
|
||||
|
||||
@ -12,54 +12,57 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
</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-xs mt-xxs">Unstyled table</h3>
|
||||
<div class="px-s">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-l">Stylish table</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-xxs">
|
||||
Tables can quickly be styled by simply using the following classes:
|
||||
</p>
|
||||
<ul class="mb-s list-bullets list-bullet-manual ml-xs">
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
@ -21,32 +21,32 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<tr>
|
||||
<td><p class="t-bold">Left</p></td>
|
||||
<td><p class="t-left text-direction-target">Left</p></td>
|
||||
<td><span class="code">t-left</span></td>
|
||||
<td><span class="code">.t-left</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Center</p></td>
|
||||
<td><p class="t-center text-direction-target">Centered</p></td>
|
||||
<td><span class="code">t-center</span></td>
|
||||
<td><span class="code">.t-center</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Right</p></td>
|
||||
<td><p class="t-right text-direction-target">Right</p></td>
|
||||
<td><span class="code">t-right</span></td>
|
||||
<td><span class="code">.t-right</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Start</p></td>
|
||||
<td><p class="t-start text-direction-target">Start</p></td>
|
||||
<td><span class="code">t-start</span></td>
|
||||
<td><span class="code">.t-start</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">End</p></td>
|
||||
<td><p class="t-end text-direction-target">End</p></td>
|
||||
<td><span class="code">t-end</span></td>
|
||||
<td><span class="code">.t-end</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Justify</p></td>
|
||||
<td><p class="t-justify">Lorem ipsum.<br>Donor si amet elit.</p></td>
|
||||
<td><span class="code">t-justify</span></td>
|
||||
<td><span class="code">.t-justify</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -21,22 +21,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<tr>
|
||||
<td><p class="t-bold">No wrap</p></td>
|
||||
<td><p class="t-nowrap">Cannot really be shown</p></td>
|
||||
<td><span class="code">t-nowrap</span></td>
|
||||
<td><span class="code">.t-nowrap</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Half muted</p></td>
|
||||
<td><p class="t-half-muted">Half muted</p></td>
|
||||
<td><span class="code">t-half-muted</span></td>
|
||||
<td><span class="code">.t-half-muted</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Muted</p></td>
|
||||
<td><p class="t-muted">Muted text</p></td>
|
||||
<td><span class="code">t-muted</span></td>
|
||||
<td><span class="code">.t-muted</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Super muted</p></td>
|
||||
<td><p class="t-super-muted">Super Muted</p></td>
|
||||
<td><span class="code">t-super-muted</span></td>
|
||||
<td><span class="code">.t-super-muted</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -23,19 +23,19 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<td><p class="t-bold">Uppercase</p></td>
|
||||
<td><p>Regular Case</p></td>
|
||||
<td><p class="t-ucase">Regular Case</p></td>
|
||||
<td><span class="code">t-ucase</span></td>
|
||||
<td><span class="code">.t-ucase</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Lowercase</p></td>
|
||||
<td><p>Regular Case</p></td>
|
||||
<td><p class="t-lcase">Regular Case</p></td>
|
||||
<td><span class="code">t-lcase</span></td>
|
||||
<td><span class="code">.t-lcase</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Capitalize</p></td>
|
||||
<td><p>no case</p></td>
|
||||
<td><span class="t-capitalize">no case</span></td>
|
||||
<td><span class="code">t-capitalize</span></td>
|
||||
<td><span class="code">.t-capitalize</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -22,31 +22,31 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<tr>
|
||||
<td><p class="t-bold">Italic</p></td>
|
||||
<td><p class="t-italic">Italic text</p></td>
|
||||
<td><span class="code">t-italic</span></td>
|
||||
<td><span class="code">.t-italic</span></td>
|
||||
<td><span class="code">i</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Oblique</p></td>
|
||||
<td><p class="t-oblique">Oblique text</p></td>
|
||||
<td><span class="code">t-oblique</span></td>
|
||||
<td><span class="code">.t-oblique</span></td>
|
||||
<td><span class="t-muted">N/A</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Underline</p></td>
|
||||
<td><p class="t-underline">Underlined text</p></td>
|
||||
<td><span class="code">t-underline</span></td>
|
||||
<td><span class="code">.t-underline</span></td>
|
||||
<td><span class="code">u</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Strikethrough</p></td>
|
||||
<td><p class="t-strikethrough">Struck text</p></td>
|
||||
<td><span class="code">t-strikethrough</span></td>
|
||||
<td><span class="code">.t-strikethrough</span></td>
|
||||
<td><span class="code">s</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Overline</p></td>
|
||||
<td><p class="t-overline">Overline text</p></td>
|
||||
<td><span class="code">t-overline</span></td>
|
||||
<td><span class="code">.t-overline</span></td>
|
||||
<td><span class="t-muted">N/A</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
|
||||
@ -11,7 +11,6 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<i class="fa-solid fa-text-height f-right"></i></h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
<h3 class="t-size-12 mb-xs">Numeric Weights</h3>
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
@ -24,15 +23,14 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
echo('<tr>');
|
||||
echo('<td class="t-bold">' . ($i * 100) . '</td>');
|
||||
echo('<td class="t-w-' . ($i * 100) . '">Lorem Ipsum donor.</td>');
|
||||
echo('<td><span class="code">t-w-' . ($i * 100) . '</span></td>');
|
||||
echo('<td><span class="code">.t-w-' . ($i * 100) . '</span></td>');
|
||||
echo('</tr>');
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<h3 class="t-size-12 mb-xs mt-m">Aliased Weights</h3>
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center">
|
||||
<table class="stylish r-s border o-hidden table-p-xs table-h-p-s table-v-center mt-l">
|
||||
<thead>
|
||||
<th>Style</th>
|
||||
<th>Example</th>
|
||||
@ -42,22 +40,22 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<tr>
|
||||
<td><p class="t-bold">Lighter</p></td>
|
||||
<td><p class="t-lighter">Lorem Ipsum 123 !</p></td>
|
||||
<td><span class="code mr-xs">t-lighter</span><span class="code">t-w-lighter</span></td>
|
||||
<td><span class="code mr-xs">.t-lighter</span><span class="code">.t-w-lighter</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Normal</p></td>
|
||||
<td><p class="t-normal">Lorem Ipsum 123 !</p></td>
|
||||
<td><span class="code mr-xs">t-normal</span><span class="code">t-w-normal</span></td>
|
||||
<td><span class="code mr-xs">.t-normal</span><span class="code">.t-w-normal</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Bold</p></td>
|
||||
<td><p class="t-bold">Lorem Ipsum 123 !</p></td>
|
||||
<td><span class="code mr-xs">t-bold</span><span class="code">t-w-bold</span></td>
|
||||
<td><span class="code mr-xs">.t-bold</span><span class="code">.t-w-bold</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Bolder</p></td>
|
||||
<td><p class="t-bolder">Lorem Ipsum 123 !</p></td>
|
||||
<td><span class="code mr-xs">t-bolder</span><span class="code">t-w-bolder</span></td>
|
||||
<td><span class="code mr-xs">.t-bolder</span><span class="code">.t-w-bolder</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
@ -22,6 +22,7 @@
|
||||
@include corner-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
|
||||
@include corner-rounding-maker("m", #{$border-base-radius});
|
||||
@include corner-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
|
||||
@include corner-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
|
||||
|
||||
|
||||
/* Utilities > Rounding > Corner > Fixed Sizes */
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
@include sided-rounding-maker("s", calc(#{$border-base-radius} * 0.75));
|
||||
@include sided-rounding-maker("m", #{$border-base-radius});
|
||||
@include sided-rounding-maker("l", calc(#{$border-base-radius} * 1.5));
|
||||
@include sided-rounding-maker("xl", calc(#{$border-base-radius} * 2.0));
|
||||
|
||||
|
||||
/* Utilities > Rounding > Sided > Fixed Sizes */
|
||||
|
||||
@ -18,6 +18,11 @@
|
||||
.bkgd-grid10, .bkgd-surround, header, nav, footer {
|
||||
//background: #{$color-background-surround};
|
||||
background: #{$color-background-surround} url("#{$nibblepoker-background-root}/3px-tile-0.1.png") repeat scroll center center;
|
||||
|
||||
//background:
|
||||
// #{$color-background-surround}
|
||||
// url("data:image/png;base64,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")
|
||||
// repeat scroll center center;
|
||||
}
|
||||
|
||||
.bkgd-grid20 {
|
||||
@ -31,7 +36,12 @@
|
||||
}
|
||||
|
||||
.bkgd-grid40, .bkgd-grid {
|
||||
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
|
||||
background:
|
||||
#{$color-background-surround}
|
||||
url("data:image/png;base64,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")
|
||||
repeat scroll center center;
|
||||
|
||||
//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.4.png") repeat scroll center center;
|
||||
}
|
||||
|
||||
.bkgd-transparent {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user