Compare commits
8 Commits
master
...
9c1837564a
| Author | SHA1 | Date | |
|---|---|---|---|
| 9c1837564a | |||
| 028394ee85 | |||
| 0673916f5e | |||
| bed09c3b2a | |||
| 4e55a42e54 | |||
| 20beca9025 | |||
| bcc7cf6c98 | |||
| f04a33378c |
2
.gitattributes
vendored
2
.gitattributes
vendored
@@ -1,2 +1,2 @@
|
||||
# Preventing this repo from turning into a PHP repository
|
||||
*.php linguist-vendored
|
||||
*.php -linguist-vendored
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
<component name="ProjectRunConfigurationManager">
|
||||
<configuration default="false" name="Docker - Local demo" type="docker-deploy" factoryName="docker-compose.yml" server-name="Docker">
|
||||
<deployment type="docker-compose.yml">
|
||||
<settings>
|
||||
<option name="envFilePath" value="" />
|
||||
<option name="services">
|
||||
<list>
|
||||
<option value="nibblepoker_css" />
|
||||
</list>
|
||||
</option>
|
||||
<option name="sourceFilePath" value="docker-compose.yml" />
|
||||
</settings>
|
||||
</deployment>
|
||||
<method v="2" />
|
||||
</configuration>
|
||||
</component>
|
||||
@@ -9,20 +9,19 @@
|
||||
<meta name="robots" content="index, follow">
|
||||
<link rel="icon" type="image/svg+xml" href="./favicon.svg">
|
||||
<link rel="alternate icon" href="./favicon.ico">
|
||||
<link rel="stylesheet" href="./css/nibblepoker.css">
|
||||
<!--<link rel="stylesheet" href="./css/nibblepoker.min.css">-->
|
||||
<link rel="stylesheet" href="./css/nibblepoker.min.css">
|
||||
<link rel="stylesheet" href="./css/debugger.min.css">
|
||||
<link rel="stylesheet" href="https://cdn.nibblepoker.lu/FontAwesomePro/6.7.2/css/all.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" />
|
||||
<title>NibblePoker's CSS Theme</title>
|
||||
<meta name="description"
|
||||
content="Documentation for the standardized CSS theme used across ´NibblePoker.lu´ websites."/>
|
||||
<meta name="description" content="...">
|
||||
<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="Documentation for the standardized CSS theme used across ´NibblePoker.lu´ websites."/>
|
||||
<meta property="og:description" content="..."/>
|
||||
</head>
|
||||
|
||||
<body class="layout-generic">
|
||||
@@ -59,67 +58,55 @@
|
||||
<!-- Introduction -->
|
||||
<?php include("./parts/intro.php"); ?>
|
||||
|
||||
|
||||
<!-- Core > Text > Weights -->
|
||||
<!-- Text > Weights -->
|
||||
<?php include("./parts/text_weights.php"); ?>
|
||||
|
||||
<!-- Core > Text > Styles -->
|
||||
<!-- Text > Styles -->
|
||||
<?php include("./parts/text_styles.php"); ?>
|
||||
|
||||
<!-- Core > Text > Alignment -->
|
||||
<!-- Text > Alignment -->
|
||||
<?php include("./parts/text_alignment.php"); ?>
|
||||
|
||||
<!-- Core > Text > Modifiers -->
|
||||
<!-- Text > Modifiers -->
|
||||
<?php include("./parts/text_modifiers.php"); ?>
|
||||
|
||||
<!-- Core > Text > Links -->
|
||||
<!-- Text > Links -->
|
||||
<?php include("./parts/text_links.php"); ?>
|
||||
|
||||
<!-- Core > Text > Misc -->
|
||||
<!-- Text > Misc -->
|
||||
<?php include("./parts/text_misc.php"); ?>
|
||||
|
||||
<!-- Core > Spacing -->
|
||||
<!-- Spacing -->
|
||||
<?php include("./parts/spacing.php"); ?>
|
||||
|
||||
<!-- Core > Rounding -->
|
||||
<!-- Rounding -->
|
||||
<?php include("./parts/rounding.php"); ?>
|
||||
|
||||
<!-- Core > Borders -->
|
||||
<?php include("./parts/core/borders.php"); ?>
|
||||
|
||||
<!-- Core > Lists > Base -->
|
||||
<!-- Lists > Base -->
|
||||
<?php include("./parts/lists_base.php"); ?>
|
||||
|
||||
<!-- Core > Lists > Composed
|
||||
<!-- Lists > Composed
|
||||
<?php include("./parts/lists_composed.php"); ?>-->
|
||||
|
||||
<!-- Core > Grids -->
|
||||
<!-- Grids -->
|
||||
<?php include("./parts/grids.php"); ?>
|
||||
|
||||
<!-- Core > Tables -->
|
||||
<?php include("./parts/core/tables.php"); ?>
|
||||
<!-- Tables -->
|
||||
<?php include("./parts/tables_core.php"); ?>
|
||||
|
||||
<!-- Core > Inputs -->
|
||||
<?php include("./parts/core/inputs.php"); ?>
|
||||
|
||||
|
||||
<!-- Site > Horizontal Rulers -->
|
||||
<!-- Horizontal Rulers -->
|
||||
<?php include("./parts/horizontal_rulers.php"); ?>
|
||||
|
||||
<!-- Site > Backgrounds -->
|
||||
<!-- Backgrounds -->
|
||||
<?php include("./parts/backgrounds.php"); ?>
|
||||
|
||||
<!-- Site > Buttons -->
|
||||
<!-- Buttons -->
|
||||
<?php include("./parts/buttons.php"); ?>
|
||||
|
||||
<!-- Site > Tables -->
|
||||
<?php include("./parts/examples/tables.php"); ?>
|
||||
<!-- Tables -->
|
||||
<?php include("./parts/tables_site.php"); ?>
|
||||
|
||||
|
||||
<!-- Examples > Inputs -->
|
||||
<?php include("./parts/examples/inputs.php"); ?>
|
||||
|
||||
<!-- Examples > Tables -->
|
||||
<!-- Tables -->
|
||||
<?php include("./parts/examples/cards.php"); ?>
|
||||
</main>
|
||||
|
||||
|
||||
@@ -1,97 +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="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>
|
||||
@@ -1,77 +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="core-inputs"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Inputs
|
||||
<i class="fa-solid fa-pen-to-square f-right"></i>
|
||||
</h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
|
||||
<div class="bkgd-blue t-w-400 t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
ℹ️ Check the <a href="#examples-inputs">Examples > Inputs</a> section for styled examples.
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<label for="demo-core-text">Text Input: </label>
|
||||
<input id="demo-core-text" type="text" value="Lorem ipsum">
|
||||
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
|
||||
label+input[type=text]
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<label for="demo-core-password">Password Input: </label>
|
||||
<input id="demo-core-password" type="password" value="12345678">
|
||||
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
|
||||
label+input[type=password]
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<label for="demo-core-number">Number Input: </label>
|
||||
<input id="demo-core-number" type="number" value="42">
|
||||
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
|
||||
label+input[type=number]
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<input type="radio" id="demo-core-radio-1" name="demo-core-radio" checked>
|
||||
<label for="demo-core-radio-1">Radio 1</label><br>
|
||||
<input type="radio" id="demo-core-radio-2" name="demo-core-radio">
|
||||
<label for="demo-core-radio-2">Radio 2</label><br>
|
||||
<input type="radio" id="demo-core-radio-3" name="demo-core-radio" disabled>
|
||||
<label for="demo-core-radio-3">Radio 3</label>
|
||||
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
|
||||
(input[type=radio][name=myRadioInput]+label+br)*3
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<input type="checkbox" id="demo-core-combo-1" checked>
|
||||
<label for="demo-core-combo-1">Checkbox 1</label><br>
|
||||
<input type="checkbox" id="demo-core-combo-2">
|
||||
<label for="demo-core-combo-2">Checkbox 2</label><br>
|
||||
<input type="checkbox" id="demo-core-combo-3" disabled>
|
||||
<label for="demo-core-combo-3">Checkbox 3</label>
|
||||
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
|
||||
(input[type=checkbox]+label+br)*3
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<label for="demo-core-textarea"></label>
|
||||
<textarea id="demo-core-textarea" rows="8">Lorem Ipsum</textarea>
|
||||
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
|
||||
label+textarea
|
||||
</code>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -1,97 +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="examples-inputs"></a>
|
||||
<div class="p-xs b r-s bkgd-grid mt-m">
|
||||
<h2 class="t-w-500 t-size-14">Inputs
|
||||
<i class="fa-solid fa-pen-to-square f-right"></i>
|
||||
</h2>
|
||||
</div>
|
||||
<section class="p-s">
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Text inputs</h3>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<label for="demo-core-text">Text Input: </label>
|
||||
<input id="demo-core-text" type="text" value="Lorem ipsum" class="p-xxs border r-m">
|
||||
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
|
||||
label+input[type=text]<b>.p-xxs.border.r-m</b>
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<label for="demo-core-textarea"></label>
|
||||
<textarea id="demo-core-textarea" rows="8" class="p-xxs border r-m w-full ta-resize-v">Lorem Ipsum</textarea>
|
||||
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
|
||||
label+textarea<b>.p-xxs.border.r-m.w-full.ta-resize-v</b>
|
||||
</code>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Checkboxes</h3>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<input type="checkbox" id="demo-site-combo-1" class="cb-pretty r-m border" checked>
|
||||
<label for="demo-site-combo-1">Checkbox 1</label><br>
|
||||
<input type="checkbox" id="demo-site-combo-2" class="cb-pretty r-m border">
|
||||
<label for="demo-site-combo-2">Checkbox 2</label><br>
|
||||
<input type="checkbox" id="demo-site-combo-3" class="cb-pretty r-m border" disabled>
|
||||
<label for="demo-site-combo-3">Checkbox 3</label>
|
||||
|
||||
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
|
||||
(input[type=checkbox]<b>.cb-pretty.r-m.border</b>+label+br)*3
|
||||
</code>
|
||||
</div>
|
||||
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Radio inputs</h3>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<input type="radio" id="demo-site-radio-1-solid" name="demo-site-radio-solid" class="radio-solid border" checked>
|
||||
<label for="demo-site-radio-1-solid">Radio 1</label>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-2-solid" name="demo-site-radio-solid" class="radio-solid border">
|
||||
<label for="demo-site-radio-2-solid">Radio 2</label>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-3-solid" name="demo-site-radio-solid" class="radio-solid border radio-unchecked-subtle">
|
||||
<label for="demo-site-radio-3-solid">Radio 3</label><kbd class="ml-s">.radio-unchecked-subtle</kbd>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-4-solid" name="demo-site-radio-solid" class="radio-solid border radio-unchecked-dashed">
|
||||
<label for="demo-site-radio-4-solid">Radio 4</label><kbd class="ml-s">.radio-unchecked-dashed</kbd>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-5-solid" name="demo-site-radio-solid" class="radio-solid border" disabled>
|
||||
<label for="demo-site-radio-5-solid">Radio 5</label>
|
||||
|
||||
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
|
||||
(input[type=radio][name=myRadioInput]<b>.radio-solid.border</b>+label+br)*3
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<div class="px-s mb-m">
|
||||
<input type="radio" id="demo-site-radio-1-3d" name="demo-site-radio-3d" class="radio-3d border" checked>
|
||||
<label for="demo-site-radio-1-3d">Radio 1</label>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-2-3d" name="demo-site-radio-3d" class="radio-3d border">
|
||||
<label for="demo-site-radio-2-3d">Radio 2</label>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-3-3d" name="demo-site-radio-3d" class="radio-3d border radio-unchecked-subtle">
|
||||
<label for="demo-site-radio-3-3d">Radio 3</label><kbd class="ml-s">.radio-unchecked-subtle</kbd>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-4-3d" name="demo-site-radio-3d" class="radio-3d border radio-unchecked-dashed">
|
||||
<label for="demo-site-radio-4-3d">Radio 4</label><kbd class="ml-s">.radio-unchecked-dashed</kbd>
|
||||
<br>
|
||||
<input type="radio" id="demo-site-radio-5-3d" name="demo-site-radio-3d" class="radio-3d border" disabled>
|
||||
<label for="demo-site-radio-5-3d">Radio 5</label>
|
||||
|
||||
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
|
||||
(input[type=radio][name=myRadioInput]<b>.radio-3d.border</b>+label+br)*3
|
||||
</code>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -1,126 +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-site"></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">
|
||||
|
||||
<div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
⚠️ These styles have specific limitations you should be aware of ⚠️
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
|
||||
<div class="px-s mb-m">
|
||||
<p class="mb-xxs">
|
||||
Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
|
||||
</p>
|
||||
<p class="mb-xs">
|
||||
However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.<br>
|
||||
Therefore, the <span class="code">.o-hidden</span> is automatically applied to the table itself.<br>
|
||||
A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
|
||||
</p>
|
||||
<table class="table-stylish table-p-s border r-l">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Head 1</th>
|
||||
<th>Head 2</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cell 1.1</td>
|
||||
<td>Cell 1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 2.1</td>
|
||||
<td>Cell 2.2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<code class="d-block p-xxs border r-s mt-s">
|
||||
table<b>.table-stylish.table-p-s.border.r-l</b><br>
|
||||
thead>tr>th*2<br>
|
||||
tbody>tr*2>td*2
|
||||
</code>
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-xxs">Scrollable table</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-xxs mb-m">
|
||||
Scrollable tables can be obtained by combining the overflow utility classes and the
|
||||
<span class="code">.table-no-wrap</span> class to prevent cell from collapsing before scrolling.
|
||||
</p>
|
||||
<p class="mb-xxs mb-m">
|
||||
This special class can be applied to the following elements: <br>
|
||||
<span class="ml-s">
|
||||
<span class="code">table</span>,
|
||||
<span class="code">thead</span>,
|
||||
<span class="code">tbody</span>,
|
||||
<span class="code">tr</span>,
|
||||
<span class="code">th</span>,
|
||||
<span class="code">td</span>
|
||||
</span>
|
||||
</p>
|
||||
<p class="mb-xxs mb-m">
|
||||
In turn, every <span class="code">td</span> element under one of these elements will no longer wrap text.
|
||||
</p>
|
||||
|
||||
<div class="w-full ox-scroll">
|
||||
<table class="table-stylish table-p-s border r-l">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table without the <span class="code">.table-no-wrap</span> class</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque.
|
||||
In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula.
|
||||
Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl.
|
||||
In hac habitasse platea dictumst.
|
||||
Integer non libero tempor, sollicitudin lorem vitae, auctor arcu.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="w-full ox-scroll">
|
||||
<table class="table-stylish table-p-s border r-l table-no-wrap">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Table with the <span class="code">.table-no-wrap</span> class</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec placerat neque.
|
||||
In ornare hendrerit vestibulum. Nullam quis nisi sed est elementum pharetra non in ligula.
|
||||
Curabitur malesuada varius congue. Donec ut facilisis nulla. Mauris vel turpis nisl.
|
||||
In hac habitasse platea dictumst.
|
||||
Integer non libero tempor, sollicitudin lorem vitae, auctor arcu.
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<code class="d-block p-xxs border r-s mt-s">
|
||||
<b>div.w-full.ox-scroll</b><br>
|
||||
table.table-stylish.table-p-s.border.r-l<b>.table-no-wrap</b><br>
|
||||
thead>tr>th*2<br>
|
||||
tbody>tr*2>td*2
|
||||
</code>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -67,7 +67,7 @@ global $root_path;
|
||||
<tr>
|
||||
<td>NibbleCSS</td>
|
||||
<td>
|
||||
<a href="./css/nibblepoker.min.css"
|
||||
<a href="/css/nibblepoker.min.css"
|
||||
title="Download the minified full stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
@@ -79,7 +79,7 @@ global $root_path;
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="./css/nibblepoker.css"
|
||||
<a href="/css/nibblepoker.css"
|
||||
title="Download the full stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
@@ -94,7 +94,7 @@ global $root_path;
|
||||
<tr>
|
||||
<td>Debugger</td>
|
||||
<td>
|
||||
<a href="./css/debugger.min.css"
|
||||
<a href="/css/debugger.min.css"
|
||||
title="Download the minified debugging stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
@@ -106,7 +106,7 @@ global $root_path;
|
||||
</a>
|
||||
</td>
|
||||
<td>
|
||||
<a href="./css/debugger.css"
|
||||
<a href="/css/debugger.css"
|
||||
title="Download the debugging stylesheet"
|
||||
class="a-hidden"
|
||||
download>
|
||||
|
||||
@@ -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="fad fa-text-height pr-xs t-half-muted"></i>Weights
|
||||
<i class="fa-solid 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="fad fa-italic pr-xs t-half-muted"></i>Styles
|
||||
<i class="fa-solid 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="fad fa-text-width pr-xs t-half-muted"></i>Alignment
|
||||
<i class="fa-solid 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="fad fa-subscript pr-xs t-half-muted"></i>Modifiers
|
||||
<i class="fa-solid 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="fad fa-link pr-xs t-half-muted"></i>Links
|
||||
<i class="fa-solid 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="fad fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous
|
||||
<i class="fa-solid fa-ellipsis pr-xs t-half-muted"></i>Miscellaneous
|
||||
</p>
|
||||
</a>
|
||||
|
||||
@@ -54,17 +54,12 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
|
||||
<a class="a-hidden" href="#spacing">
|
||||
<p class="t-w-500 py-xs sidebar-entry">
|
||||
<i class="fad fa-ellipsis pr-xs t-half-muted"></i>Spacing
|
||||
<i class="fa-solid 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="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
|
||||
<i class="fa-solid fa-bezier-curve pr-xs t-half-muted"></i>Rounding
|
||||
</p>
|
||||
</a>
|
||||
|
||||
@@ -72,22 +67,17 @@ 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="fad fa-list pr-xs t-half-muted"></i>Lists
|
||||
<i class="fa-solid 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="fad fa-table-cells-large pr-xs t-half-muted"></i>Grids
|
||||
<i class="fa-solid 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="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="fad fa-pen-to-square pr-xs t-half-muted"></i>Inputs
|
||||
<i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -98,22 +88,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="fad fa-ruler pr-xs t-half-muted"></i>Horizontal Rulers
|
||||
<i class="fa-solid 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="fad fa-paint-roller pr-xs t-half-muted"></i>Backgrounds
|
||||
<i class="fa-solid 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="fad fa-stop pr-xs t-half-muted"></i>Buttons
|
||||
<i class="fa-solid 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="fad fa-table pr-xs t-half-muted"></i>Tables
|
||||
<i class="fa-solid fa-table pr-xs t-half-muted"></i>Tables
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
@@ -122,14 +112,9 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<details class="by t-noselect" open>
|
||||
<summary class="p-xs bkgd-grid20 t-w-bold t-size-13">Examples</summary>
|
||||
<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="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="fad fa-address-card pr-xs t-half-muted"></i>Cards
|
||||
<i class="fa-solid fa-address-card pr-xs t-half-muted"></i>Cards
|
||||
</p>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -13,8 +13,8 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
</div>
|
||||
<section class="p-s">
|
||||
|
||||
<div class="bkgd-blue t-w-400 t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
ℹ️ Check the <a href="#tables-site">Examples > Tables</a> section for styled examples.
|
||||
<div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
⚠️ These styles may slightly change again before the 1.0.0 release ⚠️
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Default table</h3>
|
||||
53
htdocs/parts/tables_site.php
Normal file
53
htdocs/parts/tables_site.php
Normal file
@@ -0,0 +1,53 @@
|
||||
<?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-site"></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">
|
||||
|
||||
<div class="bkgd-orange t-bold t-center w-full r-l border p-xs mt-xxs mb-m">
|
||||
⚠️ These styles require a special workaround to work properly ⚠️
|
||||
</div>
|
||||
|
||||
<h3 class="t-w-500 t-size-12 my-s mt-xxs">Stylish table</h3>
|
||||
<div class="px-s">
|
||||
<p class="mb-xxs">
|
||||
Tables can quickly be styled by simply using the <span class="code">.table-stylish</span> class.
|
||||
</p>
|
||||
<p class="mb-xs">
|
||||
However, due to browsers inability to stay consistent, they cannot be rounded as easily as other elements.<br>
|
||||
Therefore, the <span class="code">.o-hidden</span> is automatically applied to the table itself.<br>
|
||||
A cleaner fix could have been implemented, but it would have decently inflated the stylesheet's size.
|
||||
</p>
|
||||
<table class="table-stylish table-p-s border r-l">
|
||||
<thead>
|
||||
<th>Head 1</th>
|
||||
<th>Head 2</th>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Cell 1.1</td>
|
||||
<td>Cell 1.2</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Cell 2.1</td>
|
||||
<td>Cell 2.2</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<code class="d-block p-xxs border r-s mt-s">
|
||||
table<b>.table-stylish.table-p-s.border.r-l</b><br>
|
||||
thead>th>td*2<br>
|
||||
tbody>tr*2>td*2
|
||||
</code>
|
||||
</div>
|
||||
|
||||
</section>
|
||||
@@ -49,12 +49,6 @@ if(basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
|
||||
<td><span class="code">.t-overline</span></td>
|
||||
<td><span class="t-muted">N/A</span></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><p class="t-bold">Monospace</p></td>
|
||||
<td><p class="t-monospace">monospace text</p></td>
|
||||
<td><span class="code">.t-monospace</span></td>
|
||||
<td><span class="t-muted">N/A</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
@@ -2,79 +2,63 @@
|
||||
|
||||
/* Core > Borders */
|
||||
|
||||
/* Core > Borders > Enabling */
|
||||
|
||||
.b, .border {
|
||||
border: 1px solid #{$color-border-all};
|
||||
}
|
||||
|
||||
.b-0 {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@mixin border-maker($side-key, $side-css-key) {
|
||||
.b#{$side-key} {
|
||||
border-#{$side-css-key}: 1px solid #{$color-border-all};
|
||||
}
|
||||
.b#{$side-key}-0 {
|
||||
border-#{$side-css-key}: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include border-maker("t", "top");
|
||||
@include border-maker("b", "bottom");
|
||||
@include border-maker("l", "left");
|
||||
@include border-maker("r", "right");
|
||||
|
||||
.bx {
|
||||
border-left: 1px solid #{$color-border-all};
|
||||
border-right: 1px solid #{$color-border-all};
|
||||
}
|
||||
.bx-0 {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.by {
|
||||
border-top: 1px solid #{$color-border-all};
|
||||
border-bottom: 1px solid #{$color-border-all};
|
||||
}
|
||||
|
||||
@mixin border-maker-enable($side-key, $side-css-key) {
|
||||
.b#{$side-key} {
|
||||
border-#{$side-css-key}: 1px solid #{$color-border-all};
|
||||
}
|
||||
}
|
||||
|
||||
@include border-maker-enable("t", "top");
|
||||
@include border-maker-enable("b", "bottom");
|
||||
@include border-maker-enable("l", "left");
|
||||
@include border-maker-enable("r", "right");
|
||||
|
||||
|
||||
/* Core > Borders > Disabling */
|
||||
|
||||
.b-0 {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.bx-0 {
|
||||
border-left: 0;
|
||||
border-right: 0;
|
||||
}
|
||||
|
||||
.by-0 {
|
||||
border-top: 0;
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
@mixin border-maker-disable($side-key, $side-css-key) {
|
||||
.b#{$side-key}-0 {
|
||||
border-#{$side-css-key}: 0;
|
||||
}
|
||||
}
|
||||
//.border {
|
||||
// border: 1px solid;
|
||||
//
|
||||
// //&.b-light {
|
||||
// // border: 1px solid #{$color-border-light};
|
||||
// //}
|
||||
//}
|
||||
|
||||
@include border-maker-disable("t", "top");
|
||||
@include border-maker-disable("b", "bottom");
|
||||
@include border-maker-disable("l", "left");
|
||||
@include border-maker-disable("r", "right");
|
||||
//main {
|
||||
// .border {
|
||||
// border: 1px solid #{$color-border-main};
|
||||
// }
|
||||
//}
|
||||
|
||||
//* {
|
||||
// .dark-mode & {
|
||||
// border-color: #{$color-border-all};
|
||||
// }
|
||||
//}
|
||||
|
||||
/* Core > Borders > Styles */
|
||||
|
||||
// TODO: Improve if per-side border styles are required.
|
||||
|
||||
@mixin border-style-maker($style-key, $style-css-value) {
|
||||
.border-#{$style-key}, .b-#{$style-key} {
|
||||
border-style: #{$style-css-value};
|
||||
}
|
||||
}
|
||||
|
||||
@include border-style-maker("none", "none");
|
||||
@include border-style-maker("hidden", "hidden");
|
||||
@include border-style-maker("dotted", "dotted");
|
||||
@include border-style-maker("dashed", "dashed");
|
||||
@include border-style-maker("solid", "solid");
|
||||
@include border-style-maker("double", "double");
|
||||
@include border-style-maker("groove", "groove");
|
||||
@include border-style-maker("ridge", "ridge");
|
||||
@include border-style-maker("inset", "inset");
|
||||
@include border-style-maker("outset", "outset");
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Core > Containers */
|
||||
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
/* Core > Cursors */
|
||||
|
||||
@mixin cursor-maker($cursor-type) {
|
||||
.c-#{$cursor-type}, .cursor-#{$cursor-type} {
|
||||
cursor: #{$cursor-type} !important;
|
||||
}
|
||||
}
|
||||
|
||||
@include cursor-maker("auto");
|
||||
@include cursor-maker("default");
|
||||
@include cursor-maker("pointer");
|
||||
@include cursor-maker("context-menu");
|
||||
@include cursor-maker("help");
|
||||
@include cursor-maker("progress");
|
||||
@include cursor-maker("wait");
|
||||
@include cursor-maker("crosshair");
|
||||
@include cursor-maker("not-allowed");
|
||||
@include cursor-maker("zoom-in");
|
||||
@include cursor-maker("zoom-out");
|
||||
@include cursor-maker("grab");
|
||||
@include cursor-maker("cell");
|
||||
@include cursor-maker("text");
|
||||
@include cursor-maker("vertical-text");
|
||||
@include cursor-maker("alias");
|
||||
@include cursor-maker("copy");
|
||||
@include cursor-maker("move");
|
||||
@include cursor-maker("no-drop");
|
||||
@include cursor-maker("all-scroll");
|
||||
@include cursor-maker("col-resize");
|
||||
@include cursor-maker("row-resize");
|
||||
@include cursor-maker("n-resize");
|
||||
@include cursor-maker("e-resize");
|
||||
@include cursor-maker("s-resize");
|
||||
@include cursor-maker("w-resize");
|
||||
@include cursor-maker("ne-resize");
|
||||
@include cursor-maker("nw-resize");
|
||||
@include cursor-maker("se-resize");
|
||||
@include cursor-maker("sw-resize");
|
||||
@include cursor-maker("ew-resize");
|
||||
@include cursor-maker("ns-resize");
|
||||
@include cursor-maker("nesw-resize");
|
||||
@include cursor-maker("nwse-resize");
|
||||
@@ -18,15 +18,6 @@ tr, td {
|
||||
}
|
||||
}
|
||||
|
||||
.table-no-wrap,
|
||||
.table-no-wrap > td, .table-no-wrap > th,
|
||||
.table-no-wrap > tr > td, .table-no-wrap > tr > th,
|
||||
.table-no-wrap > thead > tr > td, .table-no-wrap > thead > tr > th,
|
||||
.table-no-wrap > tbody > tr > td, .table-no-wrap > tbody > tr > th {
|
||||
white-space: nowrap;
|
||||
text-wrap: nowrap;
|
||||
}
|
||||
|
||||
|
||||
/* Core > Tables > Cell Padding */
|
||||
|
||||
|
||||
@@ -95,11 +95,6 @@ s, .t-strikethrough {
|
||||
text-decoration: overline;
|
||||
}
|
||||
|
||||
// Defined in core/code.scss !
|
||||
//.t-monospace {
|
||||
// font-family: monospace, monospace;
|
||||
//}
|
||||
|
||||
|
||||
/* Core > Text > Alignment */
|
||||
|
||||
|
||||
@@ -63,7 +63,6 @@
|
||||
@import 'core/overflow'; // Defines generic overflow rules (.o-hidden, .ox-scroll, ...)
|
||||
@import 'core/lists';
|
||||
@import 'core/table';
|
||||
@import 'core/cursor';
|
||||
|
||||
/* Core > Rounding */
|
||||
@import 'core/rounding/global';
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Site > Misc > Backgrounds */
|
||||
|
||||
@@ -17,35 +17,30 @@
|
||||
@if($include-grid-backgrounds) {
|
||||
// The element rules override rules in `base.scss ~94`
|
||||
.bkgd-grid10, .bkgd-surround, header, nav, footer {
|
||||
@if($use-b64-backgrounds) {
|
||||
background: #{$color-background-surround} url("data:image/png;base64,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") repeat scroll center center;
|
||||
} @else {
|
||||
//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 {
|
||||
@if($use-b64-backgrounds) {
|
||||
background: #{$color-background-main-headings} url("data:image/png;base64,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") repeat scroll center center;
|
||||
} @else {
|
||||
//background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/old-mathematics-v2-0.25.png") repeat scroll center center;
|
||||
// FIXME: Fix the code using this class !!!
|
||||
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.2.png") repeat scroll center center;
|
||||
}
|
||||
}
|
||||
|
||||
.bkgd-grid30 {
|
||||
@if($use-b64-backgrounds) {
|
||||
background: #{$color-background-main-headings} url("data:image/png;base64,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") repeat scroll center center;
|
||||
} @else {
|
||||
background: #{$color-background-main-headings} url("#{$nibblepoker-background-root}/3px-tile-0.3.png") repeat scroll center center;
|
||||
}
|
||||
}
|
||||
|
||||
.bkgd-grid40, .bkgd-grid {
|
||||
@if($use-b64-backgrounds) {
|
||||
background: #{$color-background-surround} url("data:image/png;base64,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") repeat scroll center center;
|
||||
} @else {
|
||||
background: #{$color-background-surround} 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
|
||||
.border, code, .code, kbd {
|
||||
border-color: #{$color-border-surround};
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Core > Code */
|
||||
|
||||
code, .code, kbd, .t-monospace {
|
||||
code, .code, kbd {
|
||||
font-family: Consolas, "Courier New", monospace;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
.content-search-entry {
|
||||
min-height: #{$content-search-image-size};
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
.img-text {
|
||||
height: 1em;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Site > Elements > Inputs */
|
||||
|
||||
@@ -22,7 +22,6 @@ button, input, textarea, select {
|
||||
|
||||
&:disabled {
|
||||
cursor: not-allowed;
|
||||
background-color: #{$color-background-code} !important;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,131 +30,27 @@ label {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* Site > Elements > Inputs > Checkbox & Radio */
|
||||
/* Site > Elements > Inputs > Checkbox */
|
||||
|
||||
input[type=checkbox], input[type=radio] {
|
||||
input[type=checkbox] {
|
||||
width: 1.65em;
|
||||
height: 1.65em;
|
||||
background-color: #{$color-background-checkbox-unchecked};
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:checked {
|
||||
background-color: #{$color-background-checkbox-checked};
|
||||
}
|
||||
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
|
||||
&:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
&:disabled {
|
||||
&:before {
|
||||
opacity: 60%;
|
||||
}
|
||||
}
|
||||
}
|
||||
input[type="checkbox"] + label, input[type="radio"] + label {
|
||||
input[type="checkbox"] + label {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label {
|
||||
cursor: not-allowed;
|
||||
opacity: 60%;
|
||||
}
|
||||
|
||||
/* Site > Elements > Inputs > Checkbox */
|
||||
|
||||
input[type=checkbox] {
|
||||
&.cb-pretty, &.checkbox-pretty {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
content: "✘";
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
content: "✔";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Site > Elements > Inputs > Radio */
|
||||
|
||||
input[type=radio] {
|
||||
border-radius: 50%;
|
||||
|
||||
// Special fix required for standalone pages.
|
||||
// This rule somehow gets ignored if the stylesheet is placed in the DOM.
|
||||
// Even tho it is present in reset.css and if it get marked as important...
|
||||
&:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
&.radio-solid, &.radio-3d {
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 60%;
|
||||
height: 60%;
|
||||
border-radius: 50%;
|
||||
background-color: transparent;
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-solid {
|
||||
&:before {
|
||||
border-style: double;
|
||||
border-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-3d {
|
||||
&:before {
|
||||
border-style: inset;
|
||||
border-width: 2px;
|
||||
}
|
||||
|
||||
&:checked {
|
||||
&:before {
|
||||
border-style: outset;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-unchecked-subtle {
|
||||
&:not(:checked) {
|
||||
&:before {
|
||||
opacity: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.radio-unchecked-dashed {
|
||||
&:not(:checked) {
|
||||
&:before {
|
||||
opacity: 75%;
|
||||
clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Site > Elements > Inputs > Buttons */
|
||||
|
||||
@@ -237,20 +132,9 @@ button + button, .button-link + .button-link > button {
|
||||
//}
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
||||
// TODO: Move to core !
|
||||
.ta-resize {
|
||||
resize: both;
|
||||
}
|
||||
|
||||
.ta-resize-h {
|
||||
resize: horizontal;
|
||||
}
|
||||
|
||||
.ta-resize-v {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.ta-resize-none {
|
||||
&.no-resize {
|
||||
resize: none;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Site > Fixes > Mobile */
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
.modal {
|
||||
position: absolute;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Site > Elements > Scrollbars */
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - MIT (C) 2023-2024 Bozet Herwin
|
||||
|
||||
/* Site > Text */
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
// NibblePoker CSS Theme - CC0 1.0 (Public Domain)
|
||||
// NibblePoker.lu CSS - (C) 2023 Bozet Herwin
|
||||
|
||||
/* Custom Elements > Wedge */
|
||||
|
||||
|
||||
@@ -220,6 +220,8 @@ $color-background-inputs: map-get((
|
||||
), $theme);
|
||||
|
||||
// TODO: Implement better ones !
|
||||
$color-background-checkbox-checked: $color-apollo-08;
|
||||
$color-background-checkbox-unchecked: $color-apollo-27;
|
||||
|
||||
$color-background-button: map-get((
|
||||
teal: $color-apollo-40,
|
||||
@@ -235,14 +237,6 @@ $color-background-button-hover: map-get((
|
||||
nibblepoker: #373841,
|
||||
), $theme);
|
||||
|
||||
$color-background-checkbox-checked: $color-apollo-08;
|
||||
$color-background-checkbox-unchecked: $color-apollo-27;
|
||||
//$color-background-checkbox-disabled: $color-background-button;
|
||||
|
||||
$color-background-radio-checked: $color-apollo-08;
|
||||
$color-background-radio-unchecked: $color-apollo-27;
|
||||
//$color-background-radio-disabled: $color-background-button-hover;
|
||||
|
||||
$color-background-button-primary: #{$color-apollo-custom-30};
|
||||
$color-background-button-primary-hover: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user