@visns-studio/visns-components 5.4.18 → 5.4.20

package/src/components/crm/styles/Field.module.scss

@@ -105,8 +105,8 @@
     .fi__optionscontainer {
         display: flex;
         flex-wrap: wrap; // Allows options to wrap if they exceed the container's width
-        gap: 10px; // Adds space between checkboxes
-        margin-top: 8px; // Adjust as needed to create space between the label and checkboxes
+        gap: 6px; // Further reduced gap for more compact layout
+        margin-top: 4px; // Further reduced margin for more compact layout
     }
 
     .fi__checkboxcontainer {
@@ -116,14 +116,13 @@
     }
 
     .fi__customcheckbox {
-        margin-right: 5px; // Space between checkbox and its label
+        margin-right: 4px; // Reduced space between checkbox and its label
         -webkit-appearance: none; // Reset default appearance for Safari
         -moz-appearance: none;
         appearance: none;
-        width: 18px;
-        height: 18px;
+        width: 14px;
+        height: 14px;
         border: 1px solid rgba(var(--paragraph-color-rgb), 0.5);
-        border-radius: 50% !important; // Make it round for radio buttons
         outline: none;
         position: relative;
         cursor: pointer;
@@ -131,6 +130,16 @@
         background-color: white;
         display: inline-block;
         transition: border-color 0.2s ease-in-out;
+        transform: scale(1) !important; /* Override any transform scale */
+    }
+
+    /* Apply border-radius based on input type */
+    input[type='radio'].fi__customcheckbox {
+        border-radius: 50% !important; // Make it round for radio buttons
+    }
+
+    input[type='checkbox'].fi__customcheckbox {
+        border-radius: 3px !important; // Make it square for checkboxes
     }
 
     /* Hover state */
@@ -144,25 +153,43 @@
         background-color: white;
     }
 
-    /* Create the inner circle for checked state */
+    /* Create the inner circle/square for checked state */
     .fi__customcheckbox:checked::after {
         content: '';
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 10px;
-        height: 10px;
-        border-radius: 50% !important;
+        width: 7px;
+        height: 7px;
         background-color: var(--primary-color);
         display: block;
         box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
     }
 
+    /* Apply border-radius to the checked state based on input type */
+    input[type='radio'].fi__customcheckbox:checked::after {
+        border-radius: 50% !important; // Make it round for radio buttons
+    }
+
+    input[type='checkbox'].fi__customcheckbox:checked::after {
+        content: '✓' !important;
+        border-radius: 0 !important;
+        width: auto !important;
+        height: auto !important;
+        background-color: transparent !important;
+        font-size: 10px !important;
+        line-height: 1 !important;
+        color: var(--primary-color) !important;
+        box-shadow: none !important;
+        font-weight: bold !important;
+    }
+
     .fi__checkboxlabel {
         user-select: none; // Improves UX by preventing text selection
-        margin-left: 5px;
+        margin-left: 4px;
         vertical-align: middle;
+        font-size: 0.9em; // Slightly smaller font for more compact appearance
     }
 }
 
@@ -254,7 +281,7 @@ select:not(:placeholder-shown) + .fi__span {
 .formItem
     input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         [type='checkbox']
-    ):not(.inovua-react-toolkit-combo-box__input):not(
+    ):not([type='radio']):not(.inovua-react-toolkit-combo-box__input):not(
         .inovua-react-toolkit-date-input__input
     ):not(.inovua-react-toolkit-text-input__input):not(
         .inovua-react-toolkit-numeric-input__input
@@ -275,7 +302,7 @@ select:not(:placeholder-shown) + .fi__span {
 .formItem
     input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         [type='checkbox']
-    ):not(.inovua-react-toolkit-combo-box__input):not(
+    ):not([type='radio']):not(.inovua-react-toolkit-combo-box__input):not(
         .inovua-react-toolkit-date-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):hover {
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);
@@ -287,7 +314,7 @@ select:not(:placeholder-shown) + .fi__span {
 .formItem
     input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         [type='checkbox']
-    ):not(.inovua-react-toolkit-combo-box__input):not(
+    ):not([type='radio']):not(.inovua-react-toolkit-combo-box__input):not(
         .inovua-react-toolkit-date-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):focus {
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.85);

package/src/components/styles/global.css

@@ -43,8 +43,8 @@ input[type='radio'],
     -webkit-appearance: none !important;
     -moz-appearance: none !important;
     appearance: none !important;
-    width: 18px !important;
-    height: 18px !important;
+    width: 14px !important;
+    height: 14px !important;
     border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
     border-radius: 50% !important;
     outline: none !important;
@@ -57,8 +57,29 @@ input[type='radio'],
     transition: border-color 0.2s ease-in-out !important;
 }
 
+/* Global checkbox styling */
+input[type='checkbox'] {
+    -webkit-appearance: none !important;
+    -moz-appearance: none !important;
+    appearance: none !important;
+    width: 14px !important;
+    height: 14px !important;
+    border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
+    border-radius: 3px !important;
+    outline: none !important;
+    position: relative !important;
+    cursor: pointer !important;
+    vertical-align: middle !important;
+    background-color: white !important;
+    display: inline-block !important;
+    box-sizing: border-box !important;
+    transition: border-color 0.2s ease-in-out !important;
+    transform: scale(1) !important; /* Override any transform scale */
+}
+
 input[type='radio']:hover,
-.radio-input:hover {
+.radio-input:hover,
+input[type='checkbox']:hover {
     border-color: var(--primary-color, #0066cc) !important;
 }
 
@@ -68,6 +89,11 @@ input[type='radio']:checked,
     background-color: white !important;
 }
 
+input[type='checkbox']:checked {
+    border-color: var(--primary-color, #0066cc) !important;
+    background-color: white !important;
+}
+
 input[type='radio']:checked::after,
 .radio-input:checked::after {
     content: '' !important;
@@ -75,14 +101,27 @@ input[type='radio']:checked::after,
     top: 50% !important;
     left: 50% !important;
     transform: translate(-50%, -50%) !important;
-    width: 10px !important;
-    height: 10px !important;
+    width: 7px !important;
+    height: 7px !important;
     border-radius: 50% !important;
     background-color: var(--primary-color, #0066cc) !important;
     display: block !important;
     box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
 }
 
+input[type='checkbox']:checked::after {
+    content: '✓' !important;
+    position: absolute !important;
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
+    font-size: 10px !important;
+    line-height: 1 !important;
+    color: var(--primary-color, #0066cc) !important;
+    display: block !important;
+    font-weight: bold !important;
+}
+
 select {
     background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+)
         no-repeat 100% 50% #fff;
@@ -150,12 +189,12 @@ a {
 textarea,
 select,
 input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
-        .inovua-react-toolkit-numeric-input__input
-    ):not(.inovua-react-toolkit-combo-box__input):not(
-        .inovua-react-toolkit-date-input__input
-    ):not(.inovua-react-toolkit-text-input__input):not(
-        .inovua-react-toolkit-numeric-input__input
-    ) {
+        [type='checkbox']
+    ):not([type='radio']):not(.inovua-react-toolkit-numeric-input__input):not(
+        .inovua-react-toolkit-combo-box__input
+    ):not(.inovua-react-toolkit-date-input__input):not(
+        .inovua-react-toolkit-text-input__input
+    ):not(.inovua-react-toolkit-numeric-input__input) {
     background: white;
     border-radius: var(--br);
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
@@ -346,8 +385,8 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     .radio-input {
         -webkit-appearance: none !important;
         appearance: none !important;
-        width: 18px !important;
-        height: 18px !important;
+        width: 14px !important;
+        height: 14px !important;
         border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
         border-radius: 50% !important;
         outline: none !important;
@@ -360,8 +399,27 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         transition: border-color 0.2s ease-in-out !important;
     }
 
+    input[type='checkbox'] {
+        -webkit-appearance: none !important;
+        appearance: none !important;
+        width: 14px !important;
+        height: 14px !important;
+        border: 1px solid rgba(var(--paragraph-color-rgb, 0, 0, 0), 0.5) !important;
+        border-radius: 3px !important;
+        outline: none !important;
+        position: relative !important;
+        cursor: pointer !important;
+        vertical-align: middle !important;
+        background-color: white !important;
+        display: inline-block !important;
+        box-sizing: border-box !important;
+        transition: border-color 0.2s ease-in-out !important;
+        transform: scale(1) !important; /* Override any transform scale */
+    }
+
     input[type='radio']:hover,
-    .radio-input:hover {
+    .radio-input:hover,
+    input[type='checkbox']:hover {
         border-color: var(--primary-color, #0066cc) !important;
     }
 
@@ -371,6 +429,11 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         background-color: white !important;
     }
 
+    input[type='checkbox']:checked {
+        border-color: var(--primary-color, #0066cc) !important;
+        background-color: white !important;
+    }
+
     input[type='radio']:checked::after,
     .radio-input:checked::after {
         content: '' !important;
@@ -378,11 +441,24 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         top: 50% !important;
         left: 50% !important;
         transform: translate(-50%, -50%) !important;
-        width: 10px !important;
-        height: 10px !important;
+        width: 7px !important;
+        height: 7px !important;
         border-radius: 50% !important;
         background-color: var(--primary-color, #0066cc) !important;
         display: block !important;
         box-shadow: 0 0 2px rgba(0, 0, 0, 0.2) !important;
     }
+
+    input[type='checkbox']:checked::after {
+        content: '✓' !important;
+        position: absolute !important;
+        top: 50% !important;
+        left: 50% !important;
+        transform: translate(-50%, -50%) !important;
+        font-size: 10px !important;
+        line-height: 1 !important;
+        color: var(--primary-color, #0066cc) !important;
+        display: block !important;
+        font-weight: bold !important;
+    }
 }

package/src/index.js

@@ -44,6 +44,7 @@ import GenericFormBuilder from './components/crm/generic/GenericFormBuilder';
 import GenericIndex from './components/crm/generic/GenericIndex';
 import GenericMain from './components/crm/generic/GenericMain';
 import GenericQuote from './components/crm/generic/GenericQuote';
+import GenericReport from './components/crm/generic/GenericReport';
 import GenericSort from './components/crm/generic/GenericSort';
 import NotificationList from './components/crm/generic/NotificationList';
 
@@ -72,6 +73,7 @@ export {
     GenericIndex,
     GenericMain,
     GenericQuote,
+    GenericReport,
     GenericSort,
     Loader,
     Login,