cats-data-grid 2.0.82 → 2.0.83

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,100 +1,100 @@
-@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(--border-core-default),
-  $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;
-    }
-  }
-}
-$base-color: #f4f4f4;
-$shine-color: rgba(229, 229, 229, 0.8);
-$animation-duration: 2s;
-$avatar-offset: 52 + 16;
-@mixin background-gradient {
-  background-image: linear-gradient(
-    90deg,
-    $base-color 0px,
-    $shine-color 40px,
-    $base-color 80px
-  );
-  background-size: 600px;
-}
+@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(--border-core-default),
+  $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;
+    }
+  }
+}
+$base-color: #f4f4f4;
+$shine-color: rgba(229, 229, 229, 0.8);
+$animation-duration: 2s;
+$avatar-offset: 52 + 16;
+@mixin background-gradient {
+  background-image: linear-gradient(
+    90deg,
+    $base-color 0px,
+    $shine-color 40px,
+    $base-color 80px
+  );
+  background-size: 600px;
+}

package/styles/sass-utils/_variable.scss

@@ -1,128 +1,128 @@
-:root {
-  --green-100: #ecf4ec;
-  --green-200: #e1eee2;
-  --red-100: #faeaea;
-  --red-300: #f0c9c9;
-  --yellow-100: #fff9e7;
-  --box-shadow: #0a0d1214;
-
-  //New Variables
-  /* TEXT TOKENS */
-  --text-heading-primary: #040d17;
-  --text-heading-secondary: #434a51;
-  --text-heading-inverse: #ffffff;
-
-  --text-body-primary: #434a51;
-  --text-body-secondary: #81858a;
-  --text-body-muted: #c0c2c5;
-  --text-body-inversed: #ffffff;
-
-  --text-link-default: #2680ea;
-  --text-link-hover: #1c60af;
-  --text-link-muted: #c8dff9;
-  --text-link-inverse: #5ca0ef;
-
-  /* SURFACE TOKENS */
-  /* Background */
-  --surface-background-canvas: #ffffff;
-  --surface-background-default: #f0f0f0;
-  --surface-background-subtle: #e6e7e8;
-  --surface-background-blue: #f7fafe;
-
-  /* Contextual */
-  --surface-contextual-green: #f7fbf7;
-  --surface-contextual-red: #fdf7f7;
-  --surface-contextual-yellow: #fffdf5;
-
-  /* Decorative */
-  --surface-decorative-sage-green: #f3fcf9;
-  --surface-decorative-amber-brown: #f9f1f1;
-  --surface-decorative-teal: #eafafb;
-  --surface-decorative-pink: #f9ebf5;
-  --surface-decorative-orange: #fffbf5;
-  --surface-decorative-purple: #f4f0fa;
-  --surface-decorative-blue: #f7fafe;
-
-  /* Action */
-  --surface-action-default: #2680ea;
-  --surface-action-hover: #1c60af;
-  --surface-action-muted: #e6e7e8;
-
-  /* BORDER TOKENS */
-  /* Core */
-  --border-core-default: #dadbdc;
-  --border-core-muted: #e6e7e8;
-  --border-core-strong: #c0c2c5;
-  --border-core-inverted: #81858a;
-
-  /* Interaction */
-  --border-interaction-default: #dfecfc;
-  --border-interaction-focus: #2680ea;
-
-  /* Semantics */
-  --border-semantics-red: #f7dfdf;
-  --border-semantics-green: #cde2ce;
-  --border-semantics-yellow: #ffefc1;
-
-  /* Decorative */
-  --border-decorative-purple: #d9c9ed;
-  --border-decorative-orange: #ffe5bf;
-  --border-decorative-pink: #eec2e0;
-  --border-decorative-teal: #b0edee;
-  --border-decorative-amber-brown: #e5c1c5;
-  --border-decorative-sage-green: #a8e9d2;
-
-  /* ICON TOKENS */
-  --icons-main-primary: #040d17;
-  --icons-main-secondary: #434a51;
-  --icons-main-hover: #2680ea;
-  --icons-main-muted: #c0c2c5;
-  --icons-main-inverse: #ffffff;
-
-  /* SEMANTICS TOKENS */
-  /* Success */
-  --semantics-success-subtle: #6aaa6d;
-  --semantics-success-default: #388e3c;
-  --semantics-success-strong: #2a6a2d;
-
-  /* Error */
-  --semantics-error-subtle: #d45e5e;
-  --semantics-error-default: #ff0000;
-  --semantics-error-strong: #941e1e;
-
-  /* Warning */
-  --semantics-warning-subtle: #ffd145;
-  --semantics-warning-default: #ffc107;
-  --semantics-warning-strong: #bf9105;
-
-  /* ACCENT TOKENS */
-  /* Orange */
-  --accent-orange-subtle: #ffb240;
-  --accent-orange-default: #ff9800;
-  --accent-orange-strong: #bf7200;
-
-  /* Teal */
-  --accent-teal-subtle: #6adedf;
-  --accent-teal-default: #2ac7c9;
-  --accent-teal-strong: #23a4a6;
-
-  /* Purple */
-  --accent-purple-subtle: #976dcd;
-  --accent-purple-default: #8656c5;
-  --accent-purple-strong: #733fb7;
-
-  /* Amber Brown */
-  --accent-amber-brown-subtle: #deafb4;
-  --accent-amber-brown-default: #cf8a91;
-  --accent-amber-brown-strong: #c77880;
-
-  /* Sage Green */
-  --accent-sage-green-subtle: #33c994;
-  --accent-sage-green-default: #29a277;
-  --accent-sage-green-dark: #1f7a5a;
-
-  /* Pink */
-  --accent-pink-subtle: #d772b9;
-  --accent-pink-default: #d058ab;
-  --accent-pink-dark: #c83d9e;
-}
+:root {
+  --green-100: #ecf4ec;
+  --green-200: #e1eee2;
+  --red-100: #faeaea;
+  --red-300: #f0c9c9;
+  --yellow-100: #fff9e7;
+  --box-shadow: #0a0d1214;
+
+  //New Variables
+  /* TEXT TOKENS */
+  --text-heading-primary: #040d17;
+  --text-heading-secondary: #434a51;
+  --text-heading-inverse: #ffffff;
+
+  --text-body-primary: #434a51;
+  --text-body-secondary: #81858a;
+  --text-body-muted: #c0c2c5;
+  --text-body-inversed: #ffffff;
+
+  --text-link-default: #2680ea;
+  --text-link-hover: #1c60af;
+  --text-link-muted: #c8dff9;
+  --text-link-inverse: #5ca0ef;
+
+  /* SURFACE TOKENS */
+  /* Background */
+  --surface-background-canvas: #ffffff;
+  --surface-background-default: #f0f0f0;
+  --surface-background-subtle: #e6e7e8;
+  --surface-background-blue: #f7fafe;
+
+  /* Contextual */
+  --surface-contextual-green: #f7fbf7;
+  --surface-contextual-red: #fdf7f7;
+  --surface-contextual-yellow: #fffdf5;
+
+  /* Decorative */
+  --surface-decorative-sage-green: #f3fcf9;
+  --surface-decorative-amber-brown: #f9f1f1;
+  --surface-decorative-teal: #eafafb;
+  --surface-decorative-pink: #f9ebf5;
+  --surface-decorative-orange: #fffbf5;
+  --surface-decorative-purple: #f4f0fa;
+  --surface-decorative-blue: #f7fafe;
+
+  /* Action */
+  --surface-action-default: #2680ea;
+  --surface-action-hover: #1c60af;
+  --surface-action-muted: #e6e7e8;
+
+  /* BORDER TOKENS */
+  /* Core */
+  --border-core-default: #dadbdc;
+  --border-core-muted: #e6e7e8;
+  --border-core-strong: #c0c2c5;
+  --border-core-inverted: #81858a;
+
+  /* Interaction */
+  --border-interaction-default: #dfecfc;
+  --border-interaction-focus: #2680ea;
+
+  /* Semantics */
+  --border-semantics-red: #f7dfdf;
+  --border-semantics-green: #cde2ce;
+  --border-semantics-yellow: #ffefc1;
+
+  /* Decorative */
+  --border-decorative-purple: #d9c9ed;
+  --border-decorative-orange: #ffe5bf;
+  --border-decorative-pink: #eec2e0;
+  --border-decorative-teal: #b0edee;
+  --border-decorative-amber-brown: #e5c1c5;
+  --border-decorative-sage-green: #a8e9d2;
+
+  /* ICON TOKENS */
+  --icons-main-primary: #040d17;
+  --icons-main-secondary: #434a51;
+  --icons-main-hover: #2680ea;
+  --icons-main-muted: #c0c2c5;
+  --icons-main-inverse: #ffffff;
+
+  /* SEMANTICS TOKENS */
+  /* Success */
+  --semantics-success-subtle: #6aaa6d;
+  --semantics-success-default: #388e3c;
+  --semantics-success-strong: #2a6a2d;
+
+  /* Error */
+  --semantics-error-subtle: #d45e5e;
+  --semantics-error-default: #ff0000;
+  --semantics-error-strong: #941e1e;
+
+  /* Warning */
+  --semantics-warning-subtle: #ffd145;
+  --semantics-warning-default: #ffc107;
+  --semantics-warning-strong: #bf9105;
+
+  /* ACCENT TOKENS */
+  /* Orange */
+  --accent-orange-subtle: #ffb240;
+  --accent-orange-default: #ff9800;
+  --accent-orange-strong: #bf7200;
+
+  /* Teal */
+  --accent-teal-subtle: #6adedf;
+  --accent-teal-default: #2ac7c9;
+  --accent-teal-strong: #23a4a6;
+
+  /* Purple */
+  --accent-purple-subtle: #976dcd;
+  --accent-purple-default: #8656c5;
+  --accent-purple-strong: #733fb7;
+
+  /* Amber Brown */
+  --accent-amber-brown-subtle: #deafb4;
+  --accent-amber-brown-default: #cf8a91;
+  --accent-amber-brown-strong: #c77880;
+
+  /* Sage Green */
+  --accent-sage-green-subtle: #33c994;
+  --accent-sage-green-default: #29a277;
+  --accent-sage-green-dark: #1f7a5a;
+
+  /* Pink */
+  --accent-pink-subtle: #d772b9;
+  --accent-pink-default: #d058ab;
+  --accent-pink-dark: #c83d9e;
+}