Skip to content
Snippets Groups Projects
Commit 1d5601f4 authored by Alf Eaton's avatar Alf Eaton
Browse files

Improve styling of radio pseudo input

parent 9144b46b
No related branches found
No related tags found
No related merge requests found
:root {
--color-activation: black;
--font-style: italic;
--letter-spacing: 1px;
}
.root { .root {
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -28,13 +22,12 @@ ...@@ -28,13 +22,12 @@
.label { .label {
font-size: 1em; font-size: 1em;
font-family: inherit; font-family: inherit;
font-style: var(--font-style); font-style: italic;
display: inline-block; display: inline-block;
letter-spacing: var(--letter-spacing); letter-spacing: 1px;
} }
//.checked .label { .checked .label {
input:checked + .label {
font-weight: 500; font-weight: 500;
} }
...@@ -46,7 +39,7 @@ input:checked + .label { ...@@ -46,7 +39,7 @@ input:checked + .label {
/* pseudo-input */ /* pseudo-input */
.label::before { .pseudoInput {
transition: border 0.5s ease, background-size 0.3s ease; transition: border 0.5s ease, background-size 0.3s ease;
content: " "; content: " ";
display: inline-block; display: inline-block;
...@@ -54,39 +47,13 @@ input:checked + .label { ...@@ -54,39 +47,13 @@ input:checked + .label {
width: 10px; width: 10px;
height: 10px; height: 10px;
border-color: transparent; border-color: transparent;
box-shadow: 0 0 0 1px black; box-shadow: 0 0 0 1px;
border-radius: 10px; border-radius: 10px;
background-size: 0; background-size: 0;
margin-right: 0.3em; margin-right: 0.3em;
} }
// TODO: don't apply this when checked .root:not(.checked):hover .pseudoInput {
.root:hover .label::before {
//background-size: 100%;
background: radial-gradient(closest-corner at center, var(--color-primary) 0%, var(--color-primary) 30%, white 30%, white 100%); background: radial-gradient(closest-corner at center, var(--color-primary) 0%, var(--color-primary) 30%, white 30%, white 100%);
/* less blurry circle: 2 lines below
------------------------------------------------- */
border-color: transparent;
box-shadow: 0 0 0 1px var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary);
} }
//.checked .label::before {
input:checked + .label::before {
transition: border 0.5s ease, background-size 0.3s ease;
border-color: transparent;
box-shadow: 0 0 0 1px var(--color-activation);
background: radial-gradient(closest-corner at center, var(--color-activation) 0%, var(--color-activation) 45%, white 45%, white 100%);
}
input[value="accept"]:checked + .label::before {
--color-activation: var(--color-valid);
}
input[value="reject"]:checked + .label::before {
--color-activation: var(--color-danger);
}
input[value="revise"]:checked + .label::before {
--color-activation: var(--color-warning);
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment