paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-04-09 09:58:20 -05:00
Code Issues Packages Projects Releases Wiki Activity

Tweak checkbox

Browse Source
This commit is contained in:
Michael Shamoon 2020-12-14 23:14:04 -08:00
parent 8b57967836
commit 3b2bc292d8
2 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
View File

@ -3,7 +3,7 @@
<div class="border-bottom" [class.doc-img-background-selected]="selected"> <div class="border-bottom" [class.doc-img-background-selected]="selected">
<img class="card-img doc-img" [src]="getThumbUrl()" (click)="selected = !selected"> <img class="card-img doc-img" [src]="getThumbUrl()" (click)="selected = !selected">
<div style="top: 0; left: 0" class="position-absolute border-right border-bottom bg-light p-1" [class.document-card-check]="!selected"> <div class="border-right border-bottom bg-light p-1 rounded document-card-check">
<div class="custom-control custom-checkbox"> <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="selected = $event.target.checked"> <input type="checkbox" class="custom-control-input" id="smallCardCheck{{document.id}}" [checked]="selected" (change)="selected = $event.target.checked">
<label class="custom-control-label" for="smallCardCheck{{document.id}}"></label> <label class="custom-control-label" for="smallCardCheck{{document.id}}"></label>

16
src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
View File

@ -8,7 +8,15 @@
} }
.document-card-check { .document-card-check {
display: none display: none;
position: absolute;
top: 0;
left: 0;
.custom-control {
margin-left: 4px;
margin-right: -3px;
}
} }
.document-card:hover .document-card-check { .document-card:hover .document-card-check {
@ -17,8 +25,12 @@
.card-selected { .card-selected {
border-color: $primary; border-color: $primary;
.document-card-check {
display: block;
}
} }
.doc-img-background-selected { .doc-img-background-selected {
background-color: $primaryFaded; background-color: $primaryFaded;
} }