diff --git a/base.css b/base.css
index 972647f..747b4df 100644
--- a/base.css
+++ b/base.css
@@ -1,6 +1,14 @@
+/*
+ Source: https://www.freecodecamp.org/news/css-units-when-to-use-each-one/
+
+ rem - standards for "root em" and is equal to the font size of the root element (16px in many browsers).
+ em - "is relative to the font size of the parent element or the font-size of the nearest parent with a defined font size."
+*/
:root {
--default-font-size: 16px;
--default-spacing: 10px;
+ --default-border-thickness: 0.15rem;
+ --default-border-style: solid var(--default-border-thickness) black;
}
body {
line-height: 1.5;
@@ -19,35 +27,124 @@ legend {
textarea, input {
padding: var(--default-spacing);
font-size: var(--default-font-size);
+ font: inherit;
+ color: currentColor;
}
.flex {
display: flex;
flex-wrap: wrap;
align-items: center;
+ gap: 1em;
}
header {
grid-area: header;
- border: solid 1px black;
+ border: var(--default-border-style);
}
article {
grid-area: content;
- border: solid 1px black;
+ border: var(--default-border-style);
}
aside {
grid-area: sidebar;
- border: solid 1px black;
+ border: var(--default-border-style);
}
.details {
grid-area: details;
- border: solid 1px black;
+ border: var(--default-border-style);
}
footer {
grid-area: footer;
- border: solid 1px black;
-}
\ No newline at end of file
+ border: var(--default-border-style);
+}
+
+/* Override default OS provided checkboxes and radio buttons */
+
+/* === CHECKBOX === */
+/* Source: Checkbox - https://moderncss.dev/pure-css-custom-checkbox-style */
+/* Source: Radio Button - https://moderncss.dev/pure-css-custom-styled-radio-buttons/ */
+
+input[type="checkbox"]:checked::before, input[type="radio"]:checked::before {
+ /* Make this :before element visible when it is checked */
+ transform: scale(1);
+}
+
+input[type="checkbox"]:disabled, input[type="radio"]:disabled {
+ cursor: not-allowed;
+}
+
+/* Set the size and properties of the box that represents the checkbox */
+input[type=checkbox] {
+ appearance: none; /*Hide the defualt OS provided control*/
+ margin: 0; /* Not removed by appearance */
+ 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;
+}
+
+/* Sets the size and animation of the check mark */
+input[type=checkbox]::before {
+ content: "";
+ width: 0.80rem;
+ height: 0.80rem;
+ transform: scale(0); /* Hide this :before element until it is checked */
+ transition: 120ms transform ease-in-out;
+
+ transform-origin: bottom left;
+ /* A site to draw shapes or grab common ones: https://bennettfeely.com/clippy */
+ clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+ /* CSS support for "forced colors", which may be refered to as Windows High Contrast Mode (WHCM) */
+ /*
+ When the OS is in high contrast the box-shadow is completely removed preventing the user from seeing that the
+ control is checked.
+ */
+ /* More details at: https://moderncss.dev/pure-css-custom-checkbox-style/#step-4-the-focus-state titled "High Contrast Themes and Forced Colors" */
+ background-color: CanvasText;
+ /* shadow-box is setup by the theme CSS pages */
+}
+/* === END CHECKBOX === */
+
+/* === 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 */
+ margin: 0; /* Not removed by appearance */
+ width: 1.75rem;
+ height: 1.75rem;
+ border-radius: 50%; /* Round the edges of the box so they appear as a circle */
+ border: var(--default-border-style);
+ transition: 0.2s all linear;
+ /* Set the control to grid so the :before element is centered in the circle, assuming the button is checked */
+ display: grid;
+ place-content: center;
+ /* Override the default paddingto prevent too thick of a border around the inner circle in the radio button */
+ padding: 5px;
+}
+
+/* Inner circle to indicate a checked radio button */
+input[type="radio"]::before {
+ content: "";
+ width: 0.65rem;
+ height: 0.65rem;
+ border-radius: 50%;
+ transform: scale(0); /* Hide this :before element until it is checked */
+ transition: 120ms transform ease-in-out;
+ /* CSS support for "forced colors", which may be refered to as Windows High Contrast Mode (WHCM) */
+ /*
+ When the OS is in high contrast the box-shadow is completely removed preventing the user from seeing that the
+ control is checked.
+ */
+ /* More details at: https://moderncss.dev/pure-css-custom-styled-radio-buttons/#step-4-the-checked-state titled "High Contrast Themes and Forced Colors" */
+ background-color: CanvasText;
+ /* shadow-box is setup by the theme CSS pages */
+}
+/* === END RADIO BUTTON === */
\ No newline at end of file
diff --git a/low-contrast.css b/low-contrast.css
index baeb5fc..32fb6e1 100644
--- a/low-contrast.css
+++ b/low-contrast.css
@@ -6,7 +6,9 @@
--alt-bg-color: #e6e6e6;
--main-font-color: #134e13;
--disabled-bg-color: #666666;
- --border-style: 0.25rem outset pink;
+ --border-style: var(--default-border-thickness) outset pink;
+ --border-focus-style: var(--default-border-thickness) solid var(--main-font-color);
+ --control-disabled: #000000;
}
body {
background-color: var(--main-bg-color);
@@ -19,29 +21,38 @@ textarea, input {
}
input[type=checkbox] {
- appearance: none;
-
- border: 2px solid black;
+ border: var(--border-style);
}
-input[type=checkbox]:checked {
- content: 'X';
+/* Color the check mark in the checkbox */
+input[type=checkbox]::before {
+ /* Using shadow-box instead of background-color will enable the state of the radio button to be visible when printed. */
+ /* Source: https://moderncss.dev/pure-css-custom-styled-radio-buttons/#step-4-the-checked-state */
+ /* Which references this link: https://dev.to/alvaromontoro/comment/1214h */
+ box-shadow: inset 1em 1em var(--main-font-color);
+}
+
+input[type="checkbox"]:focus {
+ border: var(--border-focus-style);
+}
+
+input[type="checkbox"]:disabled {
+ color: var(--control-disabled);
}
-/*Override the default radio button*/
input[type=radio] {
- appearance: none;
+ border: var(--border-style);
+}
- border-radius: 50%;
- border: 2px solid var(--main-bg-color);
- transition: 0.2s all linear;
+/* Inner circle to indicate a checked radio button */
+input[type="radio"]::before {
+ box-shadow: inset 1rem 1rem var(--main-font-color);
}
input[type=radio]:checked {
- background-color: black;
- border: 2px solid var(--main-bg-color);
+ background-color: var(--main-bg-color);
+ border: var(--border-focus-style);
}
-/*End Override the default radio button*/
input[type=button] {
border: var(--border-style);
diff --git a/test.html b/test.html
index edc7876..377f118 100644
--- a/test.html
+++ b/test.html
@@ -71,8 +71,8 @@
-
-
+
+
+