feat: radio buttons styling

This commit is contained in:
Guz
2024-11-29 20:30:57 -03:00
parent 6491d535b7
commit 6462fc6fd4

View File

@@ -219,6 +219,8 @@
:root {
--icon-check-square-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M12 22c-4.714 0-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12s0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22m4.03-13.03a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 0 1-1.06 0l-2-2a.75.75 0 1 1 1.06-1.06l1.47 1.47l4.47-4.47a.75.75 0 0 1 1.06 0' clip-rule='evenodd'/%3E%3C/svg%3E");
--icon-minus-quare-line-duotone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Cpath d='M2 12c0-4.714 0-7.071 1.464-8.536C4.93 2 7.286 2 12 2s7.071 0 8.535 1.464C22 4.93 22 7.286 22 12s0 7.071-1.465 8.535C19.072 22 16.714 22 12 22s-7.071 0-8.536-1.465C2 19.072 2 16.714 2 12Z' opacity='.5'/%3E%3Cpath stroke-linecap='round' d='M15 12H9'/%3E%3C/g%3E%3C/svg%3E");
--icon-stop-circle-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10M8.586 8.586C8 9.172 8 10.114 8 12s0 2.828.586 3.414S10.114 16 12 16s2.828 0 3.414-.586S16 13.886 16 12s0-2.828-.586-3.414S13.886 8 12 8s-2.828 0-3.414.586' clip-rule='evenodd'/%3E%3C/svg%3E");
--icon-stop-circle-line-duotone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='10' opacity='.5'/%3E%3Cpath d='M8 12c0-1.886 0-2.828.586-3.414S10.114 8 12 8s2.828 0 3.414.586S16 10.114 16 12s0 2.828-.586 3.414S13.886 16 12 16s-2.828 0-3.414-.586S8 13.886 8 12Z'/%3E%3C/g%3E%3C/svg%3E");
}
/* Custom styling of individual elements.
@@ -282,6 +284,41 @@ a.ui.primary.label:hover,
position: absolute;
}
.ui.radio input[type="radio"] {
display: none
}
.ui.radio input[type="radio"] + label::before {
content: "";
width: 1.4rem;
height: 1.4rem;
top: -0.1rem;
left: -2.1rem;
-webkit-mask: var(--icon-stop-circle-line-duotone) no-repeat;
mask: var(--icon-stop-circle-line-duotone) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
background-color: currentColor;
color: var(--color-primary-text);
position: absolute;
}
.ui.radio input[type="radio"]:checked {
display: none
}
.ui.radio input[type="radio"]:checked + label::before {
content: "";
width: 1.4rem;
height: 1.4rem;
top: -0.1rem;
left: -2.1rem;
-webkit-mask: var(--icon-stop-circle-bold) no-repeat;
mask: var(--icon-stop-circle-bold) no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
background-color: currentColor;
color: var(--color-primary-text);
position: absolute;
}
.markup input[type="checkbox"] {