hak8or/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make input styles more DRY and fix the opacity transition for radios

Browse Source
This commit is contained in:
David Lapshin
2024-05-26 21:46:43 +03:00
parent 96031d9cdb
commit 70332e6fda
1 changed files with 3 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
sass/_input.scss
View File

@ -14,6 +14,7 @@ input[type="checkbox"] {
display: block;
position: absolute;
transform: scale(0);
opacity: 0;
transition-duration: var(--transition);
transition-property: transform, opacity;
background-color: white;
@ -56,11 +57,11 @@ input[type="radio"] {
border-radius: 50%;
&::before {
top: 0.125rem;
left: 0.125rem;
border-radius: 50%;
width: 0.5rem;
height: 0.5rem;
top: 0.125rem;
left: 0.125rem;
}
}
@ -74,42 +75,10 @@ input[type="checkbox"] {
top: -0.125rem;
left: -0.125rem;
transform-origin: bottom left;
opacity: 0;
mask-image: $checkmark-icon;
mask-size: cover;
width: 1rem;
height: 1rem;
content: "";
}
&:hover {
background-color: var(--fg-muted-2);
}
&:checked {
border: 0.15rem solid transparent;
background-color: var(--primary-color);
&:disabled {
cursor: not-allowed;
border: 0.15rem solid transparent;
background-color: var(--primary-color-alpha);
&::before {
opacity: 0.8;
background-color: var(--fg-color);
}
}
&::before {
transform: scale(1);
opacity: 1;
}
}
&:disabled {
cursor: not-allowed;
border: 0.15rem solid var(--fg-muted-1);
background-color: var(--fg-muted-1);
}
}