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"> <meta name="robots" content="index, follow">
<link rel="icon" type="image/svg+xml" href="./favicon.svg"> <link rel="icon" type="image/svg+xml" href="./favicon.svg">
<link rel="alternate icon" href="./favicon.ico"> <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="./css/debugger.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/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" crossorigin="anonymous"

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

@@ -43,11 +43,11 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div> </div>
<div class="px-s mb-m"> <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> <label for="demo-core-radio-1">Radio 1</label><br>
<input type="radio" id="demo-core-radio-2" name="demo-core-radio"> <input type="radio" id="demo-core-radio-2" name="demo-core-radio">
<label for="demo-core-radio-2">Radio 2</label><br> <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> <label for="demo-core-radio-3">Radio 3</label>
<code class="d-block p-xxs border r-s mt-xs bkgd-gray"> <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
(input[type=radio][name=myRadioInput]+label+br)*3 (input[type=radio][name=myRadioInput]+label+br)*3
@@ -55,11 +55,11 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div> </div>
<div class="px-s mb-m"> <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> <label for="demo-core-combo-1">Checkbox 1</label><br>
<input type="checkbox" id="demo-core-combo-2"> <input type="checkbox" id="demo-core-combo-2">
<label for="demo-core-combo-2">Checkbox 2</label><br> <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> <label for="demo-core-combo-3">Checkbox 3</label>
<code class="d-block p-xxs border r-s mt-xs bkgd-gray"> <code class="d-block p-xxs border r-s mt-xs bkgd-gray">
(input[type=checkbox]+label+br)*3 (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> <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Checkboxes</h3>
<div class="px-s mb-m"> <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> <label for="demo-site-combo-1">Checkbox 1</label><br>
<input type="checkbox" id="demo-site-combo-2" class="cb-pretty r-m border"> <input type="checkbox" id="demo-site-combo-2" class="cb-pretty r-m border">
<label for="demo-site-combo-2">Checkbox 2</label><br> <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> <label for="demo-site-combo-3">Checkbox 3</label>
<code class="d-block p-xxs border r-s mt-xs bkgd-gray"> <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> </code>
</div> </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> <h3 class="t-w-500 t-size-12 my-xs mt-xxs">Radio inputs</h3>
<div class="px-s mb-m"> <div class="px-s mb-m">
<input type="radio" id="demo-site-radio-1-solid" name="demo-site-radio-solid" class="radio-solid border"> <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> <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"> <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> <label for="demo-site-radio-2-solid">Radio 2</label>
<input type="radio" id="demo-site-radio-3-solid" name="demo-site-radio-solid" class="radio-solid border"> <br>
<label for="demo-site-radio-3-solid">Radio 3</label> <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"> <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> </code>
</div> </div>
<div class="px-s mb-m"> <div class="px-s mb-m">
<input type="radio" id="demo-site-radio-1-3d" name="demo-site-radio-3d" class="radio-3d border"> <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> <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"> <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> <label for="demo-site-radio-2-3d">Radio 2</label>
<input type="radio" id="demo-site-radio-3-3d" name="demo-site-radio-3d" class="radio-3d border"> <br>
<label for="demo-site-radio-3-3d">Radio 3</label> <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"> <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> </code>
</div> </div>

40
scss/site/input.scss
View File

@@ -22,6 +22,7 @@ button, input, textarea, select {
&:disabled { &:disabled {
cursor: not-allowed; cursor: not-allowed;
background-color: #{$color-background-code} !important;
} }
} }
@@ -37,20 +38,31 @@ input[type=checkbox], input[type=radio] {
height: 1.65em; height: 1.65em;
background-color: #{$color-background-checkbox-unchecked}; background-color: #{$color-background-checkbox-unchecked};
cursor: pointer;
&:checked { &:checked {
background-color: #{$color-background-checkbox-checked}; background-color: #{$color-background-checkbox-checked};
} }
position: relative; position: relative;
vertical-align: middle; vertical-align: middle;
&:not(:disabled) {
cursor: pointer;
}
&:disabled {
&:before {
opacity: 60%;
}
}
} }
input[type="checkbox"] + label, input[type="radio"] + label { input[type="checkbox"] + label, input[type="radio"] + label {
position: relative; position: relative;
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
input[type="checkbox"]:disabled + label, input[type="radio"]:disabled + label {
cursor: not-allowed;
opacity: 60%;
}
/* Site > Elements > Inputs > Checkbox */ /* Site > Elements > Inputs > Checkbox */
@@ -76,6 +88,13 @@ input[type=checkbox] {
input[type=radio] { input[type=radio] {
border-radius: 50%; 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 { &.radio-solid, &.radio-3d {
text-align: center; text-align: center;
padding: 0; padding: 0;
@@ -119,6 +138,23 @@ input[type=radio] {
} }
} }
} }
&.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 */ /* Site > Elements > Inputs > Buttons */

13
scss/variables.scss
View File

@@ -220,11 +220,6 @@ $color-background-inputs: map-get((
), $theme); ), $theme);
// TODO: Implement better ones ! // TODO: Implement better ones !
$color-background-checkbox-checked: $color-apollo-08;
$color-background-checkbox-unchecked: $color-apollo-27;
$color-background-radio-checked: $color-apollo-08;
$color-background-radio-unchecked: $color-apollo-27;
$color-background-button: map-get(( $color-background-button: map-get((
teal: $color-apollo-40, teal: $color-apollo-40,
@@ -240,6 +235,14 @@ $color-background-button-hover: map-get((
nibblepoker: #373841, nibblepoker: #373841,
), $theme); ), $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: #{$color-apollo-custom-30};
$color-background-button-primary-hover: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%); $color-background-button-primary-hover: mix($color-apollo-custom-30, $color-apollo-custom-31, 37.5%);