Added checkmark vector styling for checkbox.

uab-cgds-worthey · Jan 13, 2025 · 3c714a8 · 3c714a8
1 parent 6c2db94
commit 3c714a8
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 22 deletions.
diff --git a/docker-compose.yml b/docker-compose.yml
@@ -1,6 +1,6 @@
 services:
   reverse-proxy:
-    image: traefik
+    image: traefik:3.2.3
     command:
       - "--log.level=DEBUG"
       - "--api.insecure=true"

diff --git a/frontend/src/components/Dialogs/InputDialogExistingAttachments.vue b/frontend/src/components/Dialogs/InputDialogExistingAttachments.vue
@@ -1,24 +1,26 @@
 <template>
   <div class="existing-attachments-list">
-    <div 
+    <div
       class="existing-attachments-list-row"
-      v-for="existingAttachment in existingAttachments" 
+      v-for="existingAttachment in existingAttachments"
       v-bind:key="existingAttachment.attachment_id"
       data-test="existing-attachments-list"
     >
       <span class="existing-attachment-logo">
         <font-awesome-icon :icon="['far', 'file']" size="lg" v-if="existingAttachment.type==='file'"/>
         <font-awesome-icon icon="link" size="lg" v-else-if="existingAttachment.type==='link'"/>
       </span>
-      <label for="existing-attachment-row" class="existing-attachment-name">{{ existingAttachment.name }}</label>
-      <input type="checkbox" class="existing-attachment-checkbox" name="existing-attachment-row"/>
+      <label for="existing-attachment-row" class="existing-attachment-name">
+        {{ existingAttachment.name }}
+        <input type="checkbox" class="existing-attachment-checkbox" name="existing-attachment-row"/>
+      </label>
     </div>
   </div>
 </template>
 
 <script setup>
 console.log('SETUPPING THE THING');
-import {computed, onMounted, reactive} from 'vue';
+import {onMounted} from 'vue';
 
 const emit = defineEmits(['update:userInput']);
 
@@ -77,14 +79,6 @@ onMounted(async () => {
   vertical-align: middle;
 }
 
-/* .existing-attachment-checkbox input {
-  position: absolute;
-  opacity: 0;
-  cursor: pointer;
-  height: 0;
-  width: 0;
-} */
-
 .existing-attachment-checkbox {
   float: right;
 }

diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
@@ -107,6 +107,7 @@ textarea {
   border: 2px solid var(--rosalution-grey-100);
   background-color: var(--secondary-background-color);
   outline: none;
+  appearance: none;
 }
 
 input:placeholder,
@@ -123,28 +124,39 @@ textarea:focus {
 }
 
 input[type=checkbox]{
-  /* opacity: 0; */
-  cursor: pointer;
-  /* height: 0.625rem;
-  width: 0.625rem; */
-  background-color: var(--rosalution-grey-200);
+  background-color: var(--rosalution-grey-100);
+  border-radius: var(--checkbox-border-radius);
+  border-color: var(--rosalution-purple-300);
+  transform: translateY(-0.075em);
 }
 
 input[type=checkbox]:hover {
   background-color: var(--rosalution-purple-100);
 }
 
+input[type=checkbox]:checked {
+  background-color: var(--rosalution-purple-200);
+}
+
+input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+
 input[type=checkbox]:checked {
   background-color: var(--rosalution-purple-300);
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
 }
 
-input[type=checkbox]:checked::after {
-  content: "";
-  display: block;
+
+input[type="checkbox"]:focus:hover {
+  outline: max(2px, 0.15em) solid var(--rosalution-purple-300);
+  outline-offset: max(2px, 0.15em);
 }
 
 
 
+
+
 /** || Primary Grid Site Layout **/
 
 #app {