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

Added radio input styles, improved SASS for checkboxes and radios

Browse Source 
Update inputs.php, inputs.php, and 2 more files...
This commit is contained in:
Herwin Bozet (NibblePoker)
2025-08-24 18:15:22 +02:00
parent 38b3f988b7
commit 0739af9259
4 changed files with 123 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -43,14 +43,14 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
<div class="px-s mb-m">
<input type="radio" id="demo-core-radio-1">
<input type="radio" id="demo-core-radio-1" name="demo-core-radio">
<label for="demo-core-radio-1">Radio 1</label><br>
<input type="radio" id="demo-core-radio-2">
<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">
<input type="radio" id="demo-core-radio-3" name="demo-core-radio">
<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]+label+br)*3
(input[type=radio][name=myRadioInput]+label+br)*3
</code>
</div>

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

@@ -14,7 +14,7 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
<section class="p-s">
<h3 class="t-w-500 t-size-12 my-xs mt-xxs">Basic inputs</h3>
<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>
@@ -33,5 +33,47 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
</div>
<p class="mt-m t-bold">TODO: Add other types</p>
<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">
<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">
<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
</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">
<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>
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
(input[type=radio][name=myRadioInput].radio-solid.border+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-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>
<code class="d-block p-xxs border r-s mt-xs bkgd-gray">
(input[type=radio][name=myRadioInput].radio-3d.border+label+br)*3
</code>
</div>
</section>

75
scss/site/input.scss
View File

@@ -30,9 +30,9 @@ label {
user-select: none;
}
/* Site > Elements > Inputs > Checkbox */
/* Site > Elements > Inputs > Checkbox & Radio */
input[type=checkbox] {
input[type=checkbox], input[type=radio] {
width: 1.65em;
height: 1.65em;
background-color: #{$color-background-checkbox-unchecked};
@@ -46,12 +46,81 @@ input[type=checkbox] {
position: relative;
vertical-align: middle;
}
input[type="checkbox"] + label {
input[type="checkbox"] + label, input[type="radio"] + label {
position: relative;
display: inline-block;
vertical-align: middle;
}
/* 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%;
&.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;
}
}
}
}
/* Site > Elements > Inputs > Buttons */
button {

3
scss/variables.scss
View File

@@ -223,6 +223,9 @@ $color-background-inputs: map-get((
$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((
teal: $color-apollo-40,
winui: $color-unset,