chore: Add global style for radio buttons
This commit is contained in:
parent
1c0233ccd8
commit
5a490f7325
1 changed files with 38 additions and 0 deletions
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue