chore: Add global style for radio buttons

This commit is contained in:
marination 2021-05-10 17:07:48 +05:30
parent 1c0233ccd8
commit 5a490f7325

View file

@ -18,6 +18,44 @@
$check-icon: url("data:image/svg+xml, <svg viewBox='0 0 8 7' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 4.00001L2.66667 5.80001L7 1.20001' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>");
input[type="radio"] {
position: relative;
width: var(--checkbox-size) !important;
height: var(--checkbox-size);
margin-right: 8px !important;
font-size: calc(var(--checkbox-size) - 1px);
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
// Reset browser behavior
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-print-color-adjust: exact;
color-adjust: exact;
&:focus {
outline: none;
}
&:before {
width: var(--checkbox-size);
height: var(--checkbox-size);
position: absolute;
content: ' ';
border: 1px solid var(--gray-400);
border-radius: 16px;
}
&:checked::before {
background-color: #2490EF;
border-radius: 16px;
box-shadow: inset 0 0 0 2px white;
}
}
input[type="checkbox"] {
position: relative;
width: var(--checkbox-size) !important;