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; display: block;
position: absolute; position: absolute;
transform: scale(0); transform: scale(0);
opacity: 0;
transition-duration: var(--transition); transition-duration: var(--transition);
transition-property: transform, opacity; transition-property: transform, opacity;
background-color: white; background-color: white;
@ -56,11 +57,11 @@ input[type="radio"] {
border-radius: 50%; border-radius: 50%;
&::before { &::before {
top: 0.125rem;
left: 0.125rem;
border-radius: 50%; border-radius: 50%;
width: 0.5rem; width: 0.5rem;
height: 0.5rem; height: 0.5rem;
top: 0.125rem;
left: 0.125rem;
} }
} }
@ -74,42 +75,10 @@ input[type="checkbox"] {
top: -0.125rem; top: -0.125rem;
left: -0.125rem; left: -0.125rem;
transform-origin: bottom left; transform-origin: bottom left;
opacity: 0;
mask-image: $checkmark-icon; mask-image: $checkmark-icon;
mask-size: cover; mask-size: cover;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
content: ""; 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);
}
} }