(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%);