Cleaned up the main page to show the various controls and their states. Refactored the CSS a bit.
This commit is contained in:
@@ -29,6 +29,7 @@ textarea, input {
|
||||
font-size: var(--default-font-size);
|
||||
font: inherit;
|
||||
color: currentColor;
|
||||
border-radius: 0.20em; /* Slightly round the edges */
|
||||
}
|
||||
|
||||
.flex {
|
||||
@@ -63,6 +64,17 @@ footer {
|
||||
border: var(--default-border-style);
|
||||
}
|
||||
|
||||
*:disabled, input:disabled {
|
||||
/*
|
||||
Note: The pointerenter and pointerleave events are fired when a pointing device is moved into an element or
|
||||
one of its descendants. So, even if pointer-events: none is set on the parent and not set on children,
|
||||
the events are triggered on the parent after the pointer is moved in or out of a descendant.
|
||||
|
||||
Source: https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
|
||||
*/
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Override default OS provided checkboxes and radio buttons */
|
||||
|
||||
/* === CHECKBOX === */
|
||||
@@ -74,9 +86,6 @@ input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
input[type="checkbox"]:disabled, input[type="radio"]:disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
/* TODO: These controls should probably have their sizes relative to their parent, so "em" instead of "rem" */
|
||||
/* Set the size and properties of the box that represents the checkbox */
|
||||
input[type=checkbox] {
|
||||
@@ -85,7 +94,6 @@ input[type=checkbox] {
|
||||
width: 1.15rem;
|
||||
height: 1.15rem;
|
||||
border: var(--default-border-style);
|
||||
border-radius: 0.15em; /* Slightly round the edges */
|
||||
/* Set the control to grid so the :before element is centered in the box, assuming the button is checked */
|
||||
display: grid;
|
||||
place-content: center;
|
||||
@@ -116,7 +124,7 @@ input[type=checkbox]::before {
|
||||
/* === BEGIN RADIO BUTTON === */
|
||||
/* Set the size and properties of the circle that represents the radio button */
|
||||
input[type=radio] {
|
||||
appearance: none; /* Hide the defualt OS provided control */
|
||||
appearance: none; /* Hide the default OS provided control */
|
||||
margin: 0; /* Not removed by appearance */
|
||||
width: 1.65rem;
|
||||
height: 1.65rem;
|
||||
|
||||
Reference in New Issue
Block a user