[CSS] Fixing checkboxes from displaying background cropped

This commit is contained in:
Eliseu Amaro 2022-01-02 19:45:40 +00:00 committed by Diogo Peralta Cordeiro
parent 17b46b9aeb
commit c7ea56d571
Signed by: diogo
GPG Key ID: 18D2D35001FBFAB0

View File

@ -3,11 +3,12 @@ input {
} }
input[type=checkbox] { input[type=checkbox] {
all: unset; all: unset;
display: inline-block; display: inline-block !important;
cursor: pointer !important; cursor: pointer !important;
width: 0.8rem !important; width: 1em !important;
height: 0.8rem !important; height: 1em !important;
background: var(--accent) !important; background: var(--accent) !important;
background-repeat: no-repeat !important;
} }
input[type=checkbox]:not(:hover, :focus) { input[type=checkbox]:not(:hover, :focus) {
background: var(--foreground) !important; background: var(--foreground) !important;
@ -37,8 +38,8 @@ input[type=file] {
background: var(--gradient) !important; background: var(--gradient) !important;
} }
input[type=checkbox] { input[type=checkbox] {
background-size: 100%; background-size: contain !important;
margin-right: 2px; margin-right: 4px !important;
-webkit-mask-image: url("../../icons/check-off.svg") !important; -webkit-mask-image: url("../../icons/check-off.svg") !important;
-o-mask-image: url("../../icons/check-off.svg") !important; -o-mask-image: url("../../icons/check-off.svg") !important;
-moz-mask-image: url("../../icons/check-off.svg") !important; -moz-mask-image: url("../../icons/check-off.svg") !important;