cats-data-grid 0.0.1

package/styles/component/_form.scss

@@ -0,0 +1,246 @@
+@use "../sass-utils" as *;
+
+.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(--textSecondary70);
+    @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(--textPrimary);
+    @include fontStyle(var(--fs-16), 140%);
+
+    li {
+      list-style: disc;
+      line-height: rem(32px);
+      margin-left: rem(18px);
+    }
+  }
+}
+
+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));
+    }
+  }
+
+  textarea,
+  input,
+  .ordered_textarea {
+    color: var(--textPrimary);
+    border: rem(1px) solid var(--error-red);
+  }
+  .error {
+    padding-top: rem(8px);
+    color: var(--error-red);
+    @include fontStyle(var(--fs-12), 140%, 400);
+  }
+}
+
+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;
+  }
+}
+
+.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;
+    }
+
+    li {
+      margin-left: rem(21px);
+      list-style: disc;
+      color: var(--textPrimary);
+      @include fontStyle(var(--fs-16), rem(28px));
+    }
+  }
+}
+
+// ----------------  CUSTOM RADIO INPUT START HERE
+.custom_radio {
+  display: inline-flex;
+  align-items: center;
+  min-width: rem(223px);
+
+  .name {
+    color: var(--neutral-600);
+    @include fontStyle(var(--fs-16), 140%, 400);
+  }
+
+  &.disabled {
+    pointer-events: none;
+
+    .radio_mark {
+      background-color: var(--neutral-100);
+      border: rem(1px) solid var(--neutral-200);
+    }
+
+    .name {
+      color: var(--textPrimary);
+      @include fontStyle(var(--fs-16), 140%);
+    }
+  }
+
+  .name {
+    padding-right: rem(23px);
+  }
+}
+
+.custom_radio input[type="radio"] {
+  display: none;
+}
+
+.radio_mark {
+  @include box(rem(20px), rem(20px));
+  border: rem(1.5px) solid var(--border);
+  border-radius: 50%;
+  margin-right: rem(8px);
+  position: relative;
+  background-color: var(--white);
+}
+
+.custom_radio input[type="radio"]:checked + .radio_mark {
+  background-color: var(--white);
+}
+
+.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);
+  }
+  .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));
+    }
+  }
+}
+
+.date {
+  position: relative;
+  width: 100%;
+
+  img {
+    position: absolute;
+    right: rem(16px);
+    top: rem(15px);
+  }
+}
+
+input[type="checkbox"] {
+  margin-right: rem(8px);
+  @include box(rem(16px), rem(16px));
+  border-radius: rem(4px);
+}
+
+ol {
+  li {
+    list-style: auto !important;
+  }
+}

package/styles/component/_index.scss

@@ -0,0 +1 @@
+@forward "./form";

package/styles/sass-utils/_function.scss

@@ -0,0 +1,14 @@
+@use "sass:math";
+@use "sass:list";
+
+$font-size: 12px;
+html {
+  font-size: $font-size;
+}
+@function rem($pxValue) {
+  // @return math.div($pxValue, $font-size) * 1rem;
+  // @return calc(math.div($pxValue, $font-size) * 1rem / var(--scale));
+  $val: calc($pxValue/$font-size);
+  @return calc($val * 1rem / var(--scale));
+  // @return list.slash(calc(math.div($pxValue, $font-size) * 1rem), var(--scale));
+}

package/styles/sass-utils/_index.scss

@@ -0,0 +1,3 @@
+@forward "./variable";
+@forward "./function";
+@forward "./mixin";

package/styles/sass-utils/_mixin.scss

@@ -0,0 +1,56 @@
+$tablet: 1024px;
+$mediumDesktop: 1280px;
+$largeDesktop: 1360px;
+$extraLargeDesktop: 1440px;
+$xxlargeDesktop: 1536px;
+$ultraWideDesktop: 1919px;
+
+// --------------- MEDIA QUERY ------------------------
+@mixin width-range($min, $max) {
+  @media only screen and (min-width: $min) and (max-width: $max) {
+    @content;
+  }
+}
+// Example: how to use this mixin
+// You can use any range
+// @include width-range($mobile, $tablet - 1px) {
+//   // Styles for screens between mobile and tablet width
+// }
+
+// -------------- BOX HEIGHT AND WIDTH -------
+@mixin box($width, $height: 100%) {
+  width: $width;
+  height: $height;
+}
+
+// ------------- FONT STYLE
+@mixin fontStyle($fontSize, $lineHeight, $fontWeight: 400) {
+  font-size: $fontSize;
+  line-height: $lineHeight;
+  font-weight: $fontWeight;
+}
+
+// -------------  FLEX PROPERTY ------------------------
+@mixin flex(
+  $justify: flex-start,
+  $align: stretch,
+  $gap: 0,
+  $direction: row,
+  $wrap: nowrap
+) {
+  display: flex;
+  flex-direction: $direction;
+  justify-content: $justify;
+  align-items: $align;
+  flex-wrap: $wrap;
+  gap: $gap;
+}
+
+// USE CASE: IF YOU WANT ONLY 2 PROP. THEN OTHER PROP WILL APPLY AS DEFAULT PROP.
+// @include flex(center, stretch,row, wrap, 10px);
+
+// Positioning element
+@mixin positioning($top, $left) {
+  top: $top;
+  left: $left;
+}

package/styles/sass-utils/_variable.scss

@@ -0,0 +1,66 @@
+:root {
+  --white: #fff;
+  --white-creame: #ebf3ff;
+  --border: #dae3f8;
+  --scrollbar: var(--border);
+  --textPrimary: #0b1c33;
+  --textPrimary70: #0b1c33b3;
+  --textSecondary: #556171;
+  --textSecondary50: #55617180;
+  --textSecondary70: #556171b3;
+
+  --pink-10: #f9fbfe;
+
+  --ice-blue: #67adcf;
+  --primaryBlue: #017db9;
+  --primaryBlue70: #017db9be;
+  --blue-10: #edf4fe;
+  --blue-40: #e3f3fc;
+  --blue-50: #f2f5fa;
+  --blue-5050: #f2f5fa80;
+  --blue-100: #c8e2ff;
+  --blue-200: #a4cfff;
+  --blue-300: #2680ea;
+  --blue-500: #3788e5;
+  --blue-700: #007aff;
+  // --blue-70090: #007AFFE6;
+
+  --yellow-50: #ffeedf;
+  --yellow-100: #fed18f;
+  --yellow-200: #ffbca6;
+  --yellow-300: #f08a2b26;
+  --yellow-400: #e58900;
+
+  --primaryOrange: #f05a2b;
+  --primaryOrange50: #f05a2b80;
+  --primaryOrange70: #f05a2bb3;
+  --orange-10: #fcf5eb;
+  --orange-200: #f7ac94;
+  --orange-300: #fb9676;
+  --theadBg: var(--blue-50);
+
+  --pagination-bg: #f7fafe;
+  --blue-200: var(--border);
+  --neutral-200: #dadbdc;
+  --neutral-600: #040d17;
+  --toastShadow: #0000001f;
+  --dropdown-shadow: #00000014;
+
+  --green-50: #eaf8f1;
+  --green-100: #bde8d3;
+  --green-600: #27a468;
+
+  --red-10: #fcebef;
+  --red-20: #ca0000;
+  --red-30: #F7C1CE;
+  --error-red: #d03258;
+  --tableBorder: var(--border);
+
+  --grey-50: #a5b0bf;
+  --grey-100: #333333;
+  --grey-200: #222A3D;
+
+  --capture-border: #9badca;
+  --captcha-bg: #f3f3f3;
+  --neutral-400: #81858a;
+}