mirror_css/98.css
1
0
Fork 0
mirror of https://github.com/jdan/98.css.git synced 2025-08-20 04:32:11 +02:00
Code Issues Releases Wiki Activity

fix focused radio outline

Browse Source
This commit is contained in:
Jordan Scales
2020-04-17 15:16:51 -04:00
parent 38e958620b
commit b5a69ecef6
1 changed files with 40 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
style.css
View File

@@ -10,9 +10,15 @@
/* Spacing */ /* Spacing */
--element-spacing: 8px; --element-spacing: 8px;
--grouped-element-spacing: 4px; --grouped-button-spacing: 4px;
--grouped-element-spacing: 6px;
--radio-width: 12px;
--radio-label-spacing: 6px; --radio-label-spacing: 6px;
--radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);
--radio-total-width: calc(var(--radio-total-width-precalc));
--radio-left: calc(-1 * var(--radio-total-width-precalc));
/* Borders */ /* Borders */
--border-width: 1px; --border-width: 1px;
--border-raised-outer: inset -1px -1px var(--window-frame), --border-raised-outer: inset -1px -1px var(--window-frame),
@@ -142,7 +148,7 @@ fieldset {
border: none; border: none;
box-shadow: var(--border-sunken-outer), var(--border-raised-inner); box-shadow: var(--border-sunken-outer), var(--border-raised-inner);
padding: calc(2 * var(--border-width) + var(--element-spacing)); padding: calc(2 * var(--border-width) + var(--element-spacing));
padding-block-start: var(--grouped-element-spacing); padding-block-start: var(--element-spacing);
} }
legend { legend {
@@ -175,36 +181,58 @@ label {
display: flex; display: flex;
align-items: center; align-items: center;
} }
input[type="radio"]:focus + label {
outline: 1px dotted #000000;
}
input[type="radio"] { input[type="radio"] {
display: none; appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
margin: 0;
} }
input[type="radio"] + label { input[type="radio"] + label {
position: relative; position: relative;
margin-left: var(--radio-total-width);
} }
input[type="radio"] + label::before { input[type="radio"] + label::before {
content: ""; content: "";
position: absolute;
left: calc(-1 * var(--radio-total-width));
display: inline-block; display: inline-block;
width: 12px; width: var(--radio-width);
height: 12px; height: var(--radio-width);
margin-right: var(--radio-label-spacing); margin-right: var(--radio-label-spacing);
background: url("./radio-border.svg"); background: url("./radio-border.svg");
} }
input[type="radio"]:checked + label::after { input[type="radio"]:checked + label::after {
--radio-dot-width: 4px;
--radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);
--radio-dot-left: calc(
-1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(
--radio-dot-width
) / 2
);
content: ""; content: "";
display: block; display: block;
width: 4px; width: var(--radio-dot-width);
height: 4px; height: var(--radio-dot-width);
top: 4px; top: var(--radio-dot-top);
left: 4px; left: var(--radio-dot-left);
position: absolute; position: absolute;
background: url("./radio-dot.svg"); background: url("./radio-dot.svg");
} }
input[type="radio"]:focus + label {
outline: 1px dotted #000000;
outline-offset: ;
}
input[type="radio"][disabled] + label::before { input[type="radio"][disabled] + label::before {
background: url("./radio-border-disabled.svg"); background: url("./radio-border-disabled.svg");
} }
input[type="radio"][disabled]:checked + label::after { input[type="radio"][disabled]:checked + label::after {
background: url("./radio-dot-disabled.svg"); background: url("./radio-dot-disabled.svg");
} }