cats-data-grid 1.0.0 → 2.0.0

package/styles/component/_form.scss

@@ -1,246 +1,373 @@
 @use "../sass-utils" as *;
 
-.row_div {
-  min-height: rem(54px);
-  @include flex(flex-start, center);
-
-  .col_div {
-    width: 50%;
-    @include flex(flex-start, center);
-  }
+//========== CUSTOM SCROLL BAR ======================
+#container_scroll::-webkit-scrollbar {
+  @include box(rem(14px), rem(14px));
+}
+#container_scroll::-webkit-scrollbar-track {
+  background-color: var(--neutral-200);
+  @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
+  background-clip: padding-box;
+}
+#container_scroll::-webkit-scrollbar-thumb {
+  background-color: var(--neutral-500);
+  @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
+  background-clip: padding-box;
+}
+#container_scroll::-webkit-scrollbar-corner {
+  background: transparent;
+}
+#container_scroll::-webkit-scrollbar-button {
+  @include box(rem(14px), rem(14px));
+  background-color: var(--neutral-100);
+  border-radius: rem(2px);
+  cursor: pointer;
+  display: none;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: rem(10px);
+}
+#container_scroll::-webkit-scrollbar-button:hover {
+  background-color: var(--neutral-300);
+}
+#container_scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
+  background-image: url("/images/chevron-up.svg");
+  display: block;
+  // border-top-right-radius: 8px;
+}
+#container_scroll::-webkit-scrollbar-button:single-button:vertical:increment {
+  background-image: url("/images/chevron-down.svg");
+  display: block;
+}
+#container_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement {
+  background-image: url("/images/chevron-left.svg");
+  display: block;
+  // border-bottom-left-radius: 8px;
+}
+#container_scroll::-webkit-scrollbar-button:single-button:horizontal:increment {
+  background-image: url("/images/chevron-right.svg");
+  display: block;
+}
 
-  .label {
-    width: rem(200px);
-    min-width: rem(200px);
-    padding: 0 rem(24px);
-    color: var(--textSecondary70);
-    @include fontStyle(var(--fs-16), 140%, 500);
+// .row_div {
+//   min-height: rem(54px);
+//   @include flex(flex-start, center);
+
+//   .col_div {
+//     width: 50%;
+//     @include flex(flex-start, center);
+//   }
+
+//   .label {
+//     width: rem(200px);
+//     min-width: rem(200px);
+//     padding: 0 rem(24px);
+//     color: var(--neutral-500);
+//     @include fontStyle(var(--fs-16), 140%, 500);
+
+//     @include flex("", center, rem(3px));
+
+//     sup {
+//       top: rem(-2px);
+//     }
+//   }
+//   .field {
+//     padding: rem(8px) rem(24px);
+//     flex-grow: 1;
+//     @include flex(flex-start, start, "", column);
+//     color: var(--neutral-600);
+//     @include fontStyle(var(--fs-16), 140%);
+
+//     li {
+//       list-style: disc;
+//       line-height: rem(32px);
+//       margin-left: rem(18px);
+//     }
+//   }
+// }
 
-    @include flex("", center, rem(3px));
+sup {
+  color: var(--error-red);
+}
 
-    sup {
-      top: rem(-2px);
+// ----------------  CUSTOM RADIO INPUT START HERE--------
+.radio_option {
+  display: flex;
+  @include box(rem(16px), rem(16px));
+  [type="radio"]:not(:checked)[disabled] + label {
+    color: var(--neutral-300);
+    cursor: default;
+    &::before {
+      background-color: var(--neutral-100);
     }
   }
-  .field {
-    padding: rem(8px) rem(24px);
-    flex-grow: 1;
-    @include flex(flex-start, start, "", column);
-    color: var(--textPrimary);
-    @include fontStyle(var(--fs-16), 140%);
-
-    li {
-      list-style: disc;
-      line-height: rem(32px);
-      margin-left: rem(18px);
+  [type="radio"]:is(:checked)[disabled] + label {
+    color: var(--neutral-300);
+    cursor: default;
+    &::before {
+      border-color: var(--neutral-100);
     }
-  }
-}
-
-textarea,
-input,
-.ordered_textarea {
-  color: var(--textPrimary);
-}
-
-.errorField {
-  flex-direction: column;
-  align-items: start;
-
-  .error {
-    max-width: rem(448px);
-    @include flex(flex-start, start);
-    i-feather[name="info"] {
-      padding-right: rem(4px);
-      display: flex;
-      stroke: var(--error-red);
-      @include box(rem(14px), rem(14px));
+    &::after {
+      background-color: var(--neutral-100);
     }
   }
-
-  textarea,
-  input,
-  .ordered_textarea {
-    color: var(--textPrimary);
-    border: rem(1px) solid var(--error-red);
+  %check-style {
+    content: "";
+    position: absolute;
+    @include positioning(0, 0);
+    @include box(rem(16px), rem(16px));
+    background: var(--white);
   }
-  .error {
-    padding-top: rem(8px);
-    color: var(--error-red);
-    @include fontStyle(var(--fs-12), 140%, 400);
+  [type="radio"]:checked,
+  [type="radio"]:not(:checked) {
+    position: absolute;
+    left: -9999px;
   }
-}
-
-sup {
-  color: var(--error-red);
-}
-
-input::placeholder,
-textarea::placeholder {
-  color: var(--textSecondary70);
-  @include fontStyle(var(--fs-16), 140%);
-}
-
-textarea {
-  border: rem(1px) solid var(--border);
-  border-radius: rem(16px);
-  padding: rem(16px);
-  width: 100%;
-  min-height: rem(108px);
-  resize: none;
-}
-input {
-  border: rem(1px) solid var(--border);
-  border-radius: rem(16px);
-  padding: rem(16px);
-  width: 100%;
-  height: rem(54px);
-
-  &.disable {
-    background-color: var(--blue-50);
-    pointer-events: none;
+  [type="radio"]:checked + label,
+  [type="radio"]:not(:checked) + label {
+    position: relative;
+    padding-left: rem(24px);
+    cursor: pointer;
+    display: inline-block;
+    color: var(--neutral-600);
+    line-height: rem(16px);
+  }
+  [type="radio"]:checked + label:before {
+    @extend %check-style;
+    @include border($width: rem(1.5px), $color: var(--blue-600), $radius: 100%);
+  }
+  [type="radio"]:not(:checked) + label:before {
+    @extend %check-style;
+    @include border($width: rem(1.5px), $radius: 100%);
+  }
+  [type="radio"]:checked + label:after,
+  [type="radio"]:not(:checked) + label:after {
+    content: "";
+    @include box(rem(6px), rem(6px));
+    background: var(--blue-600);
+    position: absolute;
+    @include positioning(rem(5px), rem(5px));
+    border-radius: 100%;
+    transition: all 0.2s ease;
+  }
+  [type="radio"]:not(:checked) + label:after {
+    opacity: 0;
+    transform: scale(0);
+  }
+  [type="radio"]:checked + label:after {
+    opacity: 1;
+    transform: scale(1);
   }
 }
 
-.ordered_textarea {
-  // max-width: rem(448px);
-  border: rem(1px) solid var(--border);
-  border-radius: rem(16px);
-  padding: rem(16px);
-  width: 100%;
-  list-style: disc;
-  min-height: rem(108px);
-
-  ul {
-    padding-left: rem(32px);
-    outline: none;
-    &.editable-div {
-      min-height: rem(72px);
-      max-height: rem(112px);
-      overflow: auto;
+// ----------------  CUSTOM CHECKBOX INPUT START HERE--------
+.checkbox_container {
+  @include flex(flex-start, center, rem(8px));
+  @include fontStyle(var(--fs-14), rem(20px), 400);
+  color: var(--neutral-600);
+  // --- Disabled (check & uncheck) ---
+  input[type="checkbox"],
+  input[type="checkbox"]:checked {
+    &[disabled] {
+      cursor: default;
+      background-color: var(--neutral-100);
+      border-color: var(--neutral-100);
+      & + span {
+        color: var(--neutral-300);
+      }
     }
-
-    li {
-      margin-left: rem(21px);
-      list-style: disc;
-      color: var(--textPrimary);
-      @include fontStyle(var(--fs-16), rem(28px));
+  }
+  input[type="checkbox"] {
+    appearance: none;
+    -webkit-appearance: none;
+    @include box(rem(16px), rem(16px));
+    min-width: rem(16px);
+    @include border();
+    cursor: pointer;
+    background-color: var(--white);
+    position: relative;
+    transition: all 0.2s ease;
+
+    // --- Default (unchecked) ---
+    &::after {
+      content: "";
+      display: none;
+      position: absolute;
+      @include positioning(rem(-1px), rem(-1px));
+      @include box(rem(16px), rem(16px));
+      background-size: auto;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+    // --- Checked State ---
+    &:checked {
+      border-color: var(--blue-600);
+      background-color: var(--blue-600);
+      &::after {
+        display: block;
+        background-image: url("/images/check-white.svg");
+      }
+    }
+    // --- Indeterminate (minus) state ---
+    &:indeterminate {
+      border-color: var(--blue-600);
+      background-color: var(--white);
+      &::after {
+        display: block;
+        top: 0;
+        background-image: url("/images/minus-blue.svg");
+      }
     }
   }
 }
 
-// ----------------  CUSTOM RADIO INPUT START HERE
-.custom_radio {
-  display: inline-flex;
-  align-items: center;
-  min-width: rem(223px);
-
-  .name {
+// ----------------  CUSTOM SINGLE SELECT DROPDOWN START HERE--------
+.text_filter_section {
+  position: relative;
+  width: 100%;
+  .single_select_dropdown {
+    @include flex(space-between, center);
+    @include box(100%, rem(40px));
+    @include border();
+    padding: rem(10px) rem(12px);
+    @include fontStyle(var(--fs-14), rem(20px));
+    background-color: var(--white);
     color: var(--neutral-600);
-    @include fontStyle(var(--fs-16), 140%, 400);
-  }
-
-  &.disabled {
-    pointer-events: none;
+    cursor: pointer;
 
-    .radio_mark {
-      background-color: var(--neutral-100);
-      border: rem(1px) solid var(--neutral-200);
+    .left_details {
+      @include flex("", center);
+      @include box(calc(100% - rem(20px)), "");
     }
-
-    .name {
-      color: var(--textPrimary);
-      @include fontStyle(var(--fs-16), 140%);
+    .arrow_icon {
+      img {
+        max-width: rem(20px);
+      }
     }
   }
 
-  .name {
-    padding-right: rem(23px);
-  }
-}
+  .dropdown_list {
+    @include border();
+    width: 100%;
+    position: absolute;
+    z-index: 2;
+    background: var(--white);
+    box-shadow: rem(0px) rem(12px) rem(16px) rem(-4px) var(--box-shadow);
+    top: rem(40px);
 
-.custom_radio input[type="radio"] {
-  display: none;
+    ul {
+      max-height: rem(284px);
+      overflow: auto;
+      list-style-type: none;
+      padding: rem(4px) 0;
+
+      &:has(.no_data) li:hover {
+        background-color: unset;
+        cursor: default;
+      }
+      li {
+        height: rem(40px);
+        @include flex(space-between, center);
+        @include fontStyle(var(--fs-14), rem(20px));
+        padding: rem(10px) rem(12px);
+        cursor: pointer;
+        color: var(--neutral-600);
+        &:hover {
+          background-color: var(--neutral-50);
+        }
+        &.disabled_option {
+          opacity: 0.3;
+          pointer-events: none;
+        }
+      }
+    }
+  }
 }
 
-.radio_mark {
-  @include box(rem(20px), rem(20px));
-  border: rem(1.5px) solid var(--border);
-  border-radius: 50%;
-  margin-right: rem(8px);
+// --------------Searchbox with icon-------------
+.search_input {
   position: relative;
+  @include box(100%, rem(40px));
+  @include border();
+  padding: rem(10px) rem(12px);
   background-color: var(--white);
-}
-
-.custom_radio input[type="radio"]:checked + .radio_mark {
-  background-color: var(--white);
-}
+  @include flex(flex-start, center, rem(4px));
 
-.radio_mark::after {
-  content: "";
-  @include box(rem(12px), rem(12px));
-  background: var(--blue-700);
-  border-radius: 50%;
-  position: absolute;
-  @include positioning(50%, 50%);
-  transform: translate(-50%, -50%);
-  opacity: 0;
-  transition: opacity 0.2s;
-}
-
-.custom_radio input[type="radio"]:checked + .radio_mark::after {
-  opacity: 1;
-}
-
-.dob_age_field {
-  border: rem(1px) solid var(--border);
-  border-radius: rem(16px);
-  padding: 0 rem(16px);
-  width: 100%;
-  height: rem(54px);
-  background-color: var(--blue-50);
-  @include flex(flex-start, center);
-
-  .dob,
-  .age {
-    @include fontStyle(var(--fs-16), 140%);
-    color: var(--textSecondary);
-  }
-  .age {
-    padding-left: rem(10px);
+  img {
+    @include box(rem(20px), rem(20px));
+    opacity: 0.5;
   }
-  .dob {
-    @include flex(space-between, center);
-    width: 50%;
-    height: 100%;
-    padding-right: rem(10px);
-    border-right: rem(1px) solid var(--border);
-
-    img {
-      @include box(rem(20px), rem(20px));
+  input {
+    @include box(100%, 100%);
+    border: 0;
+    @include fontStyle(var(--fs-14), rem(20px), 400);
+    color: var(--neutral-600);
+    &::placeholder {
+      color: var(--neutral-500);
     }
   }
 }
 
-.date {
-  position: relative;
-  width: 100%;
+// --------------Toggle Switch css-------------
+.switch_wrapper {
+  display: flex;
+  .switch {
+    position: relative;
+    display: inline-block;
+    @include box(rem(28px), rem(16px)); /* default size */
+    input {
+      display: none;
+    }
+    .slider {
+      position: absolute;
+      cursor: pointer;
+      background-color: var(--neutral-100);
+      border-radius: rem(16px);
+      inset: 0;
+      transition: 0.3s;
+      &:before {
+        content: "";
+        position: absolute;
+        @include box(rem(12px), rem(12px));
+        left: rem(2px);
+        bottom: rem(2px);
+        background-color: var(--white);
+        border-radius: 50%;
+        transition: 0.3s;
+        box-shadow: 0 rem(0.8px) rem(2.4px) 0 var(--box-shadow);
+      }
+    }
 
-  img {
-    position: absolute;
-    right: rem(16px);
-    top: rem(15px);
+    input:checked + .slider {
+      background-color: var(--blue-600);
+      &:before {
+        transform: translateX(rem(12px));
+      }
+    }
   }
 }
-
-input[type="checkbox"] {
-  margin-right: rem(8px);
-  @include box(rem(16px), rem(16px));
-  border-radius: rem(4px);
-}
-
-ol {
-  li {
-    list-style: auto !important;
+.tableArea.big {
+  .table_wrapper {
+    table {
+      tbody {
+        tr {
+          :host .switch_wrapper {
+            .switch {
+              @include box(rem(38px), rem(20px)); /* big size */
+              .slider {
+                &:before {
+                  @include box(rem(16px), rem(16px));
+                }
+              }
+              input:checked + .slider {
+                &:before {
+                  transform: translateX(rem(18px));
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
 }

package/styles/sass-utils/_mixin.scss

@@ -1,3 +1,6 @@
+@use "variable" as *;
+@use "function" as *;
+
 $tablet: 1024px;
 $mediumDesktop: 1280px;
 $largeDesktop: 1360px;
@@ -54,3 +57,31 @@ $ultraWideDesktop: 1919px;
   top: $top;
   left: $left;
 }
+
+// -------------  Border PROPERTY with width,color and radius ---------------------
+@mixin border(
+  $width: rem(1px),
+  $style: solid,
+  $color: var(--neutral-200),
+  $radius: rem(4px)
+) {
+  border: $width $style $color;
+  border-radius: $radius;
+}
+
+// ------------- On table top header Swap image on hover  ---------------------
+@mixin hoverSwap($base, $hover) {
+  #{$hover} {
+    display: none;
+  }
+
+  &:hover {
+    #{$base} {
+      display: none;
+    }
+
+    #{$hover} {
+      display: flex;
+    }
+  }
+}