cats-data-grid 2.0.53 → 2.0.55

package/styles/component/_form.scss

@@ -1,371 +1,371 @@
-@use "../sass-utils" as *;
-
-//========== CUSTOM SCROLL BAR ======================
-#table_scroll::-webkit-scrollbar {
-  @include box(rem(14px), rem(14px));
-}
-#table_scroll::-webkit-scrollbar-track {
-  background-color: var(--neutral-200);
-  @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
-  background-clip: padding-box;
-}
-#table_scroll::-webkit-scrollbar-thumb {
-  background-color: var(--neutral-500);
-  @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
-  background-clip: padding-box;
-}
-#table_scroll::-webkit-scrollbar-corner {
-  background: transparent;
-}
-#table_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);
-}
-#table_scroll::-webkit-scrollbar-button:hover {
-  background-color: var(--neutral-300);
-}
-#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
-  background-image: url("/images/chevron-up.svg");
-  display: block;
-  // border-top-right-radius: 8px;
-}
-#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment {
-  background-image: url("/images/chevron-down.svg");
-  display: block;
-}
-#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement {
-  background-image: url("/images/chevron-left.svg");
-  display: block;
-  // border-bottom-left-radius: 8px;
-}
-#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment {
-  background-image: url("/images/chevron-right.svg");
-  display: block;
-}
-#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement {
-  display: block;
-  height: rem(55px);
-  background:
-    url("/images/chevron-up.svg") bottom / rem(15px) no-repeat,
-    linear-gradient(
-      to bottom,
-      rgb(240, 240, 240) 0%,
-      rgb(240, 240, 240) 70.5%,
-      var(--neutral-200) 70.5%,
-      var(--neutral-200) 72.5%,
-      var(--neutral-100) 72.5%,
-      var(--neutral-100) 100%
-    );
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  &:hover {
-    background:
-      url("/images/chevron-up.svg") bottom / rem(15px) no-repeat,
-      linear-gradient(
-        to bottom,
-        rgb(240, 240, 240) 0%,
-        rgb(240, 240, 240) 70.5%,
-        var(--neutral-200) 70.5%,
-        var(--neutral-200) 72.5%,
-        var(--neutral-300) 72.5%,
-        var(--neutral-300) 100%
-      );
-  }
-}
-
-// ----------------  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);
-    }
-  }
-  [type="radio"]:is(:checked)[disabled] + label {
-    color: var(--neutral-300);
-    cursor: default;
-    &::before {
-      border-color: var(--neutral-100);
-    }
-    &::after {
-      background-color: var(--neutral-100);
-    }
-  }
-  %check-style {
-    content: "";
-    position: absolute;
-    @include positioning(0, 0);
-    @include box(rem(16px), rem(16px));
-    background: var(--white);
-  }
-  [type="radio"]:checked,
-  [type="radio"]:not(:checked) {
-    position: absolute;
-    left: -9999px;
-  }
-  [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);
-  }
-}
-
-// ----------------  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-300);
-      border-color: var(--neutral-300);
-      & + span {
-        color: var(--neutral-300);
-      }
-    }
-  }
-  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");
-        background-size: rem(8px) rem(6px);
-      }
-    }
-    // --- 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");
-        background-size: rem(7px) rem(1px);
-      }
-    }
-  }
-}
-
-// ----------------  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);
-    cursor: pointer;
-
-    .left_details {
-      @include flex("", center);
-      @include box(calc(100% - rem(20px)), "");
-    }
-    .arrow_icon {
-      img {
-        max-width: rem(20px);
-      }
-    }
-  }
-
-  .dropdown_list {
-    @include border();
-    width: 100%;
-    max-height: rem(172px);
-    overflow: auto;
-    position: absolute;
-    z-index: 2;
-    background: var(--white);
-    box-shadow: rem(0px) rem(12px) rem(16px) rem(-4px) var(--box-shadow);
-    top: rem(40px);
-
-    ul {
-      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;
-        }
-      }
-    }
-  }
-}
-
-// --------------Searchbox with icon-------------
-.search_input {
-  position: relative;
-  @include box(100%, rem(40px));
-  @include border();
-  padding: rem(10px) rem(12px);
-  background-color: var(--white);
-  @include flex(flex-start, center, rem(4px));
-
-  img {
-    @include box(rem(20px), rem(20px));
-    opacity: 0.5;
-  }
-  input {
-    @include box(100%, 100%);
-    border: 0;
-    @include fontStyle(var(--fs-14), rem(20px), 400);
-    color: var(--neutral-600);
-    &::placeholder {
-      color: var(--neutral-500);
-    }
-  }
-}
-
-// --------------Toggle Switch css-------------
-.table_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);
-      }
-    }
-
-    input:checked + .slider {
-      background-color: var(--blue-600);
-      &:before {
-        transform: translateX(rem(12px));
-      }
-    }
-  }
-}
-.tableArea.big {
-  .table_wrapper {
-    table {
-      tbody {
-        tr {
-          :host .table_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));
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.text-primary {
-  color: var(--blue-600);
-}
-.text-danger {
-  color: var(--red) !important;
-}
+@use "../sass-utils" as *;
+
+//========== CUSTOM SCROLL BAR ======================
+#table_scroll::-webkit-scrollbar {
+  @include box(rem(14px), rem(14px));
+}
+#table_scroll::-webkit-scrollbar-track {
+  background-color: var(--neutral-200);
+  @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
+  background-clip: padding-box;
+}
+#table_scroll::-webkit-scrollbar-thumb {
+  background-color: var(--neutral-500);
+  @include border($width: rem(3px), $radius: rem(100px), $color: transparent);
+  background-clip: padding-box;
+}
+#table_scroll::-webkit-scrollbar-corner {
+  background: transparent;
+}
+#table_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);
+}
+#table_scroll::-webkit-scrollbar-button:hover {
+  background-color: var(--neutral-300);
+}
+#table_scroll::-webkit-scrollbar-button:single-button:vertical:decrement {
+  background-image: url("/images/chevron-up.svg");
+  display: block;
+  // border-top-right-radius: 8px;
+}
+#table_scroll::-webkit-scrollbar-button:single-button:vertical:increment {
+  background-image: url("/images/chevron-down.svg");
+  display: block;
+}
+#table_scroll::-webkit-scrollbar-button:single-button:horizontal:decrement {
+  background-image: url("/images/chevron-left.svg");
+  display: block;
+  // border-bottom-left-radius: 8px;
+}
+#table_scroll::-webkit-scrollbar-button:single-button:horizontal:increment {
+  background-image: url("/images/chevron-right.svg");
+  display: block;
+}
+#table_scroll.global::-webkit-scrollbar-button:single-button:vertical:decrement {
+  display: block;
+  height: rem(55px);
+  background:
+    url("/images/chevron-up.svg") bottom / rem(15px) no-repeat,
+    linear-gradient(
+      to bottom,
+      rgb(240, 240, 240) 0%,
+      rgb(240, 240, 240) 70.5%,
+      var(--neutral-200) 70.5%,
+      var(--neutral-200) 72.5%,
+      var(--neutral-100) 72.5%,
+      var(--neutral-100) 100%
+    );
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+  &:hover {
+    background:
+      url("/images/chevron-up.svg") bottom / rem(15px) no-repeat,
+      linear-gradient(
+        to bottom,
+        rgb(240, 240, 240) 0%,
+        rgb(240, 240, 240) 70.5%,
+        var(--neutral-200) 70.5%,
+        var(--neutral-200) 72.5%,
+        var(--neutral-300) 72.5%,
+        var(--neutral-300) 100%
+      );
+  }
+}
+
+// ----------------  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);
+    }
+  }
+  [type="radio"]:is(:checked)[disabled] + label {
+    color: var(--neutral-300);
+    cursor: default;
+    &::before {
+      border-color: var(--neutral-100);
+    }
+    &::after {
+      background-color: var(--neutral-100);
+    }
+  }
+  %check-style {
+    content: "";
+    position: absolute;
+    @include positioning(0, 0);
+    @include box(rem(16px), rem(16px));
+    background: var(--white);
+  }
+  [type="radio"]:checked,
+  [type="radio"]:not(:checked) {
+    position: absolute;
+    left: -9999px;
+  }
+  [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);
+  }
+}
+
+// ----------------  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"].custom_check_box,
+  input[type="checkbox"].custom_check_box:checked {
+    &[disabled] {
+      cursor: default;
+      background-color: var(--neutral-300);
+      border-color: var(--neutral-300);
+      & + span {
+        color: var(--neutral-300);
+      }
+    }
+  }
+  input[type="checkbox"].custom_check_box {
+    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");
+        background-size: rem(8px) rem(6px);
+      }
+    }
+    // --- 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");
+        background-size: rem(7px) rem(1px);
+      }
+    }
+  }
+}
+
+// ----------------  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);
+    cursor: pointer;
+
+    .left_details {
+      @include flex("", center);
+      @include box(calc(100% - rem(20px)), "");
+    }
+    .arrow_icon {
+      img {
+        max-width: rem(20px);
+      }
+    }
+  }
+
+  .dropdown_list {
+    @include border();
+    width: 100%;
+    max-height: rem(172px);
+    overflow: auto;
+    position: absolute;
+    z-index: 2;
+    background: var(--white);
+    box-shadow: rem(0px) rem(12px) rem(16px) rem(-4px) var(--box-shadow);
+    top: rem(40px);
+
+    ul {
+      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;
+        }
+      }
+    }
+  }
+}
+
+// --------------Searchbox with icon-------------
+.search_input {
+  position: relative;
+  @include box(100%, rem(40px));
+  @include border();
+  padding: rem(10px) rem(12px);
+  background-color: var(--white);
+  @include flex(flex-start, center, rem(4px));
+
+  img {
+    @include box(rem(20px), rem(20px));
+    opacity: 0.5;
+  }
+  input {
+    @include box(100%, 100%);
+    border: 0;
+    @include fontStyle(var(--fs-14), rem(20px), 400);
+    color: var(--neutral-600);
+    &::placeholder {
+      color: var(--neutral-500);
+    }
+  }
+}
+
+// --------------Toggle Switch css-------------
+.table_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);
+      }
+    }
+
+    input:checked + .slider {
+      background-color: var(--blue-600);
+      &:before {
+        transform: translateX(rem(12px));
+      }
+    }
+  }
+}
+.tableArea.big {
+  .table_wrapper {
+    table {
+      tbody {
+        tr {
+          :host .table_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));
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+.text-primary {
+  color: var(--blue-600);
+}
+.text-danger {
+  color: var(--red) !important;
+}