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

40
scss/site/input.scss
View File

@@ -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 */

13
scss/variables.scss
View File

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