qugalet/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

vertical centering the checkbox

Browse source
This commit is contained in:
Xnuk Shuman 2022-12-20 02:34:11 +09:00
parent 1bf256b34b
commit f8a0cd2dd3
No known key found for this signature in database
GPG key ID: B810FA3E0390F1F2
1 changed files with 8 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
src/components/checkbox/checkbox.vue
View file

@ -39,20 +39,23 @@ export default {
display: inline-block; display: inline-block;
min-height: 1.2em; min-height: 1.2em;
& > * {
vertical-align: middle;
}
&-indicator { &-indicator {
display: inline-block;
position: relative; position: relative;
padding-left: 1.2em; width: 1.2em;
height: 1.2em;
} }
&-indicator::before { &-indicator::before {
position: absolute; position: absolute;
right: 0; inset: 0;
top: 0;
display: block; display: block;
content: '✓'; content: '✓';
transition: color 200ms; transition: color 200ms;
width: 1.1em;
height: 1.1em;
border-radius: $fallback--checkboxRadius; border-radius: $fallback--checkboxRadius;
border-radius: var(--checkboxRadius, $fallback--checkboxRadius); border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
box-shadow: 0px 0px 2px black inset; box-shadow: 0px 0px 2px black inset;