jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Properly center the checkbox checkmark 

Using a flexbox we can easily center the checkmark without using hard
coded positions.
This commit is contained in:
Samuel Mannehed 2023-01-10 16:17:08 +01:00
parent 6751cc1236
commit 4558104196
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/styles/input.css
View File

@ -86,6 +86,9 @@ option {
* Checkboxes * Checkboxes
*/ */
input[type=checkbox] { input[type=checkbox] {
display: inline-flex;
justify-content: center;
align-items: center;
background-color: white; background-color: white;
background-image: unset; background-image: unset;
border: 1px solid dimgrey; border: 1px solid dimgrey;
@ -104,14 +107,11 @@ input[type=checkbox]:checked {
input[type=checkbox]:checked::after { input[type=checkbox]:checked::after {
content: ""; content: "";
display: block; /* width & height doesn't work on inline elements */ display: block; /* width & height doesn't work on inline elements */
position: relative;
top: 0;
left: 3px;
width: 3px; width: 3px;
height: 7px; height: 7px;
border: 1px solid white; border: 1px solid white;
border-width: 0 2px 2px 0; border-width: 0 2px 2px 0;
transform: rotate(40deg); transform: rotate(40deg) translateY(-1px);
} }
/* /*