Additional form CSS tweaks for disabled and unchecked

Signed-off-by: snipe <snipe@snipe.net>
This commit is contained in:
snipe 2023-04-03 17:08:47 -07:00
parent 9146850ffe
commit c5d74ac27f

View file

@ -690,7 +690,7 @@ th.css-accessory > .th-inner::before
} }
/** form-stuff overrides for checkboxes and stuff **/ /** Form-stuff overrides for checkboxes and stuff **/
.form-control--disabled { .form-control--disabled {
color: #959495; color: #959495;
@ -708,7 +708,9 @@ label.form-control {
padding-left: 0px; padding-left: 0px;
} }
/** Checkbox style to replace iCheck **/ /** --------------------------------------- **/
/** Start checkbox styles to replace iCheck **/
/** --------------------------------------- **/
input[type="checkbox"] { input[type="checkbox"] {
/* Add if not using autoprefixer */ /* Add if not using autoprefixer */
-webkit-appearance: none; -webkit-appearance: none;
@ -729,6 +731,7 @@ input[type="checkbox"] {
/*Windows High Contrast Mode*/ /*Windows High Contrast Mode*/
} }
/** This sets the display of a checkbox, and what the "fill" checkmark should look like */
input[type="checkbox"]::before { input[type="checkbox"]::before {
@ -752,10 +755,12 @@ input[type="checkbox"]::before {
background-color: CanvasText; background-color: CanvasText;
} }
/** This sets the size of the scale up for the shape we defined above **/
input[type="checkbox"]:checked::before { input[type="checkbox"]:checked::before {
transform: scale(1); transform: scale(1);
} }
/** This sets the scale of the DISABLED but CHECKED checkbox */
input[type=checkbox]:disabled::before, input[type=radio]:disabled::before { input[type=checkbox]:disabled::before, input[type=radio]:disabled::before {
content: ""; content: "";
width: 1em; width: 1em;
@ -764,6 +769,13 @@ input[type=checkbox]:disabled::before, input[type=radio]:disabled::before {
box-shadow: inset 1em 1em #959495; box-shadow: inset 1em 1em #959495;
} }
/* This sets the scale and style of a DISABLED checkbox that is NOT checked */
input[type=checkbox]:disabled:not(:checked)::before, input[type=radio]:disabled:not(:checked)::before {
content: "";
transform: scale(0);
cursor: not-allowed;
pointer-events:none;
}
input[type=checkbox]:disabled, input[type=radio]:disabled { input[type=checkbox]:disabled, input[type=radio]:disabled {
--form-control-color: #959495; --form-control-color: #959495;
@ -773,7 +785,7 @@ input[type=checkbox]:disabled, input[type=radio]:disabled {
} }
/** Radio style to replace iCheck **/ /** Radio styles to replace iCheck **/
input[type="radio"] { input[type="radio"] {
appearance: none; appearance: none;
@ -820,3 +832,7 @@ input[type="radio"]:checked::before {
grid-template-columns: .1em auto; grid-template-columns: .1em auto;
gap: 1.5em; gap: 1.5em;
} }
/** --------------------------------------- **/
/** End checkbox styles to replace iCheck **/
/** --------------------------------------- **/