cats-data-grid 2.0.4 → 2.0.6

package/styles/component/_index.scss

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

package/styles/sass-utils/_function.scss

@@ -1,14 +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));
-}
+@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

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

package/styles/sass-utils/_mixin.scss

@@ -1,87 +1,87 @@
-@use "variable" as *;
-@use "function" as *;
-
-$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;
-}
-
-// -------------  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;
-    }
-  }
-}
+@use "variable" as *;
+@use "function" as *;
+
+$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;
+}
+
+// -------------  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;
+    }
+  }
+}

package/styles/sass-utils/_variable.scss

@@ -1,77 +1,77 @@
-:root {
-  --white: #ffffff;
-
-  // --default: #000000;
-  // --black: #1f1f1f;
-  // --black-dust: #1a1a1a;
-  // --black-900: #202224;
-
-  --pagination-text: var(--neutral-500);
-
-  // NEUTRAL-COLOR
-  // --neutral-cross: #d9d9d9;
-  // --neutral-40: #d5d7da;
-  --neutral-50: #f0f0f0;
-  --neutral-100: #e6e7e8;
-  --neutral-200: #dadbdc;
-  --neutral-300: #c0c2c5;
-  --neutral-400: #81858a;
-  --neutral-500: #434a51;
-  --neutral-600: #040d17;
-  // --neutral-900: #010306;
-
-  // BLUE COLOR
-  --blue-50: #f7fafe;
-  --blue-100: #eaf3fd;
-  // --blue-200: #dfecfc;
-  --blue-300: #c8dff9;
-  // --blue-400: #92bff4;
-  --blue-600: #2680ea;
-  --blue-700: #1c60af;
-  // --blue-800: #1849d6;
-
-  // GREY COLOR
-  --grey-50: #e9eaeb;
-  // --grey-100: #e2e8f0;
-  // --grey-150: #d6d6d6;
-  // --grey-200: #64748b;
-  // --grey-300: #414651;
-  // --grey-400: #8080808c;
-  // --grey-600: #535862;
-  // --light-grey: #81858a;
-  // --dark-grey: #4a4a4a;
-
-  // --green-50: #f7fbf7;
-  --green-100: #ecf4ec;
-  --green-200: #e1eee2;
-  // --green-400: #9bc69d;
-  --green-600: #388e3c;
-  --green-700: #2a6a2d;
-
-  --red: #ff0000;
-  // --red-50: #fdf7f7;
-  --red-100: #faeaea;
-  // --red-200: #f7dfdf;
-  --red-300: #f0c9c9;
-  --red-700: #941e1e;
-
-  // --yellow-50: #fffdf5;
-  --yellow-100: #fff9e7;
-  // --yellow-200: #fff6da;
-  --yellow-300: #ffefc1;
-  // --yellow-400: #fff9e7;
-  // --yellow-500: #bf7200;
-  // --yellow-600: #ffc107;
-  --yellow-700: #bf9105;
-  // --yellow-800: #806003;
-  // --yellow-900: #bf9105;
-
-  // Orange
-  // --orange-50: rgba(255, 251, 245, 1);
-  // --orange-100: #fff5e6;
-  // --orange-200: #fff0d9;
-  --orange-600: #ff9800;
-  // --orange-700: rgba(191, 114, 0, 1);
-
-  --box-shadow: #0a0d1214;
-}
+:root {
+  --white: #ffffff;
+
+  // --default: #000000;
+  // --black: #1f1f1f;
+  // --black-dust: #1a1a1a;
+  // --black-900: #202224;
+
+  --pagination-text: var(--neutral-500);
+
+  // NEUTRAL-COLOR
+  // --neutral-cross: #d9d9d9;
+  // --neutral-40: #d5d7da;
+  --neutral-50: #f0f0f0;
+  --neutral-100: #e6e7e8;
+  --neutral-200: #dadbdc;
+  --neutral-300: #c0c2c5;
+  --neutral-400: #81858a;
+  --neutral-500: #434a51;
+  --neutral-600: #040d17;
+  // --neutral-900: #010306;
+
+  // BLUE COLOR
+  --blue-50: #f7fafe;
+  --blue-100: #eaf3fd;
+  // --blue-200: #dfecfc;
+  --blue-300: #c8dff9;
+  // --blue-400: #92bff4;
+  --blue-600: #2680ea;
+  --blue-700: #1c60af;
+  // --blue-800: #1849d6;
+
+  // GREY COLOR
+  --grey-50: #e9eaeb;
+  // --grey-100: #e2e8f0;
+  // --grey-150: #d6d6d6;
+  // --grey-200: #64748b;
+  // --grey-300: #414651;
+  // --grey-400: #8080808c;
+  // --grey-600: #535862;
+  // --light-grey: #81858a;
+  // --dark-grey: #4a4a4a;
+
+  // --green-50: #f7fbf7;
+  --green-100: #ecf4ec;
+  --green-200: #e1eee2;
+  // --green-400: #9bc69d;
+  --green-600: #388e3c;
+  --green-700: #2a6a2d;
+
+  --red: #ff0000;
+  // --red-50: #fdf7f7;
+  --red-100: #faeaea;
+  // --red-200: #f7dfdf;
+  --red-300: #f0c9c9;
+  --red-700: #941e1e;
+
+  // --yellow-50: #fffdf5;
+  --yellow-100: #fff9e7;
+  // --yellow-200: #fff6da;
+  --yellow-300: #ffefc1;
+  // --yellow-400: #fff9e7;
+  // --yellow-500: #bf7200;
+  // --yellow-600: #ffc107;
+  --yellow-700: #bf9105;
+  // --yellow-800: #806003;
+  // --yellow-900: #bf9105;
+
+  // Orange
+  // --orange-50: rgba(255, 251, 245, 1);
+  // --orange-100: #fff5e6;
+  // --orange-200: #fff0d9;
+  --orange-600: #ff9800;
+  // --orange-700: rgba(191, 114, 0, 1);
+
+  --box-shadow: #0a0d1214;
+}