add hover + checked state to environment cards (#614)

DISIC · Jan 24, 2024 · 5554213 · 5554213
1 parent 3846ac1
commit 5554213
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/confiture-web-app/src/components/audit/AuditEnvironmentCheckbox.vue b/confiture-web-app/src/components/audit/AuditEnvironmentCheckbox.vue
@@ -28,7 +28,10 @@ function onInput() {
 </script>
 
 <template>
-  <div class="fr-p-3w container">
+  <div
+    class="fr-p-3w container"
+    :class="{ 'container-checked': modelValue.includes(value) }"
+  >
     <!-- Allow click on the whole radio square -->
     <div class="container-layer" @click="onInput" />
     <p
@@ -89,6 +92,14 @@ function onInput() {
   position: relative;
 }
 
+.container:hover {
+  background-color: var(--background-default-grey-hover);
+}
+
+.container-checked {
+  border-color: var(--border-plain-blue-france);
+}
+
 .container-layer {
   position: absolute;
   inset: 0;