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

Improved radio inputs with more styles and examples, Added disabled checkboxes and radios

Browse Source 
Update index.php, inputs.php, and 3 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2025-08-24 23:55:56 +02:00
parent 0739af9259
commit 17cb37d5cf
5 changed files with 85 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
htdocs/index.php vendored
View File

@@ -9,7 +9,8 @@
<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.min.css">
<link rel="stylesheet" href="./css/nibblepoker.css">
<!--<link rel="stylesheet" href="./css/nibblepoker.min.css">-->
<link rel="stylesheet" href="./css/debugger.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
crossorigin="anonymous"

8
htdocs/parts/core/inputs.php vendored
View File

@@ -43,11 +43,11 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
<div class="px-s mb-m">
<input type="radio" id="demo-core-radio-1" name="demo-core-radio">
<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">
<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
@@ -55,11 +55,11 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
<div class="px-s mb-m">
<input type="checkbox" id="demo-core-combo-1">
<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">
<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

48
htdocs/parts/examples/inputs.php vendored
View File

@@ -37,15 +37,15 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<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">
<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">
<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].cb-pretty.r-m.border+label+br)*3
(input[type=checkbox]<b>.cb-pretty.r-m.border</b>+label+br)*3
</code>
</div>
@@ -53,26 +53,44 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
<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">
<label for="demo-site-radio-1-solid"">Radio 1</label><br>
<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">
<label for="demo-site-radio-3-solid">Radio 3</label>
<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].radio-solid.border+label+br)*3
(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">
<label for="demo-site-radio-1-3d">Radio 1</label><br>
<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">
<label for="demo-site-radio-3-3d">Radio 3</label>
<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].radio-3d.border+label+br)*3
(input[type=radio][name=myRadioInput]<b>.radio-3d.border</b>+label+br)*3
</code>
</div>