fix: display checkbox boolean (#269)

InseeFr · Nov 12, 2024 · 553e5d5 · 553e5d5
1 parent 683c32d
commit 553e5d5
Showing 1 changed file with 26 additions and 9 deletions.
diff --git a/drama-queen/src/ui/components/orchestrator/lunaticStyle.tsx b/drama-queen/src/ui/components/orchestrator/lunaticStyle.tsx
@@ -80,15 +80,6 @@ export const useLunaticStyles = tss.create(({ theme }) => ({
 
     // to replace checkbox by svg
     '& .list-icon': { position: 'absolute', marginTop: '-0.2rem' },
-    '& .checkbox-boolean-lunatic': {
-      position: 'absolute',
-      opacity: 0,
-      marginBottom: 0,
-      marginTop: '0.15rem',
-      marginLeft: '0.2rem',
-      height: '18px',
-      width: '18px',
-    },
 
     // datepicker
     '.lunaticDatepickerFields': {
@@ -257,6 +248,32 @@ export const useLunaticStyles = tss.create(({ theme }) => ({
       },
     },
 
+    // checkbox boolean
+    '& .lunatic-checkbox-boolean': {
+      '& .lunatic-input-checkbox__icon': {
+        display: 'grid',
+        placeItems: 'center',
+        width: '18px',
+        height: '18px',
+        padding: '0.1em',
+        flex: 'none',
+        borderRadius: '5px',
+        color: '#FFF',
+        backgroundColor: `${modalityCodeBackgroundColor}`,
+        border: `2px solid ${borderColorCheckbox}`,
+
+        '& svg': {
+          transform: 'scale(0.7)',
+        },
+      },
+
+      "& .lunatic-input-checkbox[aria-checked='true'] .lunatic-input-checkbox__icon":
+        {
+          backgroundColor: theme.palette.background.button.main,
+          borderColor: `${modalityLabelColorChecked}`,
+        },
+    },
+
     // .lunatic-component lunatic label
     '& .lunatic-input , .lunatic-textarea, .lunatic-input-number, .lunatic-dropdown, .lunatic-combo-box-container, .field-container > .field .lunatic-input':
       {