From 17cb37d5cf3411cce822248d51a3a2a3e3915c52 Mon Sep 17 00:00:00 2001 From: Herwin Bozet Date: Sun, 24 Aug 2025 23:55:56 +0200 Subject: [PATCH] Improved radio inputs with more styles and examples, Added disabled checkboxes and radios Update index.php, inputs.php, and 3 more files... --- htdocs/index.php | 3 +- htdocs/parts/core/inputs.php | 8 +++--- htdocs/parts/examples/inputs.php | 48 ++++++++++++++++++++++---------- scss/site/input.scss | 40 ++++++++++++++++++++++++-- scss/variables.scss | 13 +++++---- 5 files changed, 85 insertions(+), 27 deletions(-) diff --git a/htdocs/index.php b/htdocs/index.php index 3f62cf9..ca416bc 100644 --- a/htdocs/index.php +++ b/htdocs/index.php @@ -9,7 +9,8 @@ - + +
- +

- + (input[type=radio][name=myRadioInput]+label+br)*3 @@ -55,11 +55,11 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {
- +

- + (input[type=checkbox]+label+br)*3 diff --git a/htdocs/parts/examples/inputs.php b/htdocs/parts/examples/inputs.php index 028dd2c..dd97345 100644 --- a/htdocs/parts/examples/inputs.php +++ b/htdocs/parts/examples/inputs.php @@ -37,15 +37,15 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Checkboxes

- +

- + - (input[type=checkbox].cb-pretty.r-m.border+label+br)*3 + (input[type=checkbox].cb-pretty.r-m.border+label+br)*3
@@ -53,26 +53,44 @@ if (basename(__FILE__) == basename($_SERVER["SCRIPT_FILENAME"])) {

Radio inputs

- -
+ + +
-
- - + +
+ + .radio-unchecked-subtle +
+ + .radio-unchecked-dashed +
+ + + - (input[type=radio][name=myRadioInput].radio-solid.border+label+br)*3 + (input[type=radio][name=myRadioInput].radio-solid.border+label+br)*3
- -
+ + +
-
- - + +
+ + .radio-unchecked-subtle +
+ + .radio-unchecked-dashed +
+ + + - (input[type=radio][name=myRadioInput].radio-3d.border+label+br)*3 + (input[type=radio][name=myRadioInput].radio-3d.border+label+br)*3
diff --git a/scss/site/input.scss b/scss/site/input.scss index 0cf84e6..947a0f5 100644 --- a/scss/site/input.scss +++ b/scss/site/input.scss @@ -22,6 +22,7 @@ button, input, textarea, select { &:disabled { cursor: not-allowed; + background-color: #{$color-background-code} !important; } } @@ -37,20 +38,31 @@ input[type=checkbox], input[type=radio] { 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 { 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 */ @@ -76,6 +88,13 @@ input[type=checkbox] { 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; @@ -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 */ diff --git a/scss/variables.scss b/scss/variables.scss index 2d0c49b..86dfc49 100644 --- a/scss/variables.scss +++ b/scss/variables.scss @@ -220,11 +220,6 @@ $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-radio-checked: $color-apollo-08; -$color-background-radio-unchecked: $color-apollo-27; $color-background-button: map-get(( teal: $color-apollo-40, @@ -240,6 +235,14 @@ $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%);