Add focus effects to inputs

Provides better keyboard accessibility for:
* Checkboxes
* Range Inputs
* Copy-over Buttons
* Option-reveal Elements
Along with some minor design improvements
This commit is contained in:
robo-mop
2023-03-22 06:35:12 +05:30
committed by Aryan Pingle
parent cee51bf355
commit 7dbe0a7714
4 changed files with 43 additions and 0 deletions

View File

@@ -2,6 +2,26 @@
display: inline-block;
position: relative;
--size: 17px;
&::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 200%;
height: 200%;
background-color: var(--main-theme-color);
border-radius: 999px;
opacity: 0.25;
transform: translate(-50%, -50%) scale(0);
transition-property: transform;
transition-duration: 250ms;
}
&:focus-within::before {
transform: translate(-50%, -50%) scale(1);
}
}
.real-checkbox {