From 3b2bc292d80708332f32c903af9a01104ff8a34e Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+nikonratm@users.noreply.github.com>
Date: Mon, 14 Dec 2020 23:14:04 -0800
Subject: [PATCH] Tweak checkbox

---
 .../document-card-small.component.html           |  2 +-
 .../document-card-small.component.scss           | 16 ++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 4ced42bdd..378047602 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -3,7 +3,7 @@
     <div class="border-bottom" [class.doc-img-background-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">
           <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>
diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
index 36db2203c..a4af1bb11 100644
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
@@ -8,7 +8,15 @@
 }
 
 .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 {
@@ -17,8 +25,12 @@
 
 .card-selected {
   border-color: $primary;
+
+  .document-card-check {
+    display: block;
+  }
 }
 
 .doc-img-background-selected {
   background-color: $primaryFaded;
-}
\ No newline at end of file
+}