@acorex/styles 7.1.1 → 7.1.3

package/src/shared/_table.scss

@@ -1,111 +1,111 @@
-@layer components {
-  .ax-table {
-    width: 100%;
-    border-radius: var(--ax-rounded-border-default);
-    border-spacing: 0px;
-    border-collapse: separate;
-    border: 1px solid;
-    border-color: rgba(var(--ax-color-border-default));
-    overflow: hidden;
-    font-size: 0.875rem;
-    td {
-      border-bottom: 1px solid;
-      border-color: rgba(var(--ax-color-border-default));
-      padding: 0.875rem 1rem;
-    }
-    thead {
-      background-color: rgba(var(--ax-color-on-surface));
-      border-bottom: 1px solid;
-      border-color: rgba(var(--ax-color-border-default));
-      th {
-        text-transform: uppercase;
-        font-weight: 500;
-        text-align: start;
-        padding: 0.875rem 1rem;
-      }
-    }
-    &.ax-table-alternate {
-      tbody {
-        tr {
-          &:nth-child(even) {
-            background-color: rgba(var(--ax-color-on-surface));
-          }
-        }
-      }
-    }
-    &.ax-table-bordered {
-      thead {
-        th {
-          border-top: 0 !important;
-        }
-      }
-      tbody {
-        tr {
-          &:last-child {
-            td {
-              border-bottom: 0 !important;
-            }
-          }
-          td {
-            &:last-child {
-              border-bottom: 0 !important;
-            }
-          }
-        }
-      }
-
-      td,
-      th {
-        border: 1px solid;
-        border-color: rgba(var(--ax-color-border-default));
-        &:first-child {
-          border-inline-start-width: 0px;
-        }
-        &:last-child {
-          border-inline-end-width: 0px;
-        }
-      }
-    }
-    @media screen and (max-width: 601px) {
-      &.ax-table-responsive {
-        overflow-wrap: break-word;
-        display: block;
-        border: 0px;
-        thead {
-          position: absolute;
-          inset-inline-start: -100%;
-          top: -100%;
-        }
-
-        td {
-          display: block;
-          float: inline-start;
-          width: 100%;
-          clear: both;
-          background: rgba(var(--ax-color-surface));
-          padding: 0.375rem 0.625rem;
-          box-sizing: border-box;
-          &:last-child {
-            border: 0;
-          }
-          &:before {
-            content: attr(data-label);
-            display: block;
-            font-weight: bold;
-          }
-        }
-        tr {
-          border: 1px solid;
-          border-color: rgba(var(--ax-color-border-default));
-        }
-        tr,
-        tbody {
-          display: block;
-          width: 100%;
-          float: inline-start;
-          margin-bottom: 0.625rem;
-        }
-      }
-    }
-  }
-}
+@layer components {
+  .ax-table {
+    width: 100%;
+    border-radius: var(--ax-rounded-border-default);
+    border-spacing: 0px;
+    border-collapse: separate;
+    border: 1px solid;
+    border-color: rgba(var(--ax-color-border-default));
+    overflow: hidden;
+    font-size: 0.875rem;
+    td {
+      border-bottom: 1px solid;
+      border-color: rgba(var(--ax-color-border-default));
+      padding: 0.875rem 1rem;
+    }
+    thead {
+      background-color: rgba(var(--ax-color-on-surface));
+      border-bottom: 1px solid;
+      border-color: rgba(var(--ax-color-border-default));
+      th {
+        text-transform: uppercase;
+        font-weight: 500;
+        text-align: start;
+        padding: 0.875rem 1rem;
+      }
+    }
+    &.ax-table-alternate {
+      tbody {
+        tr {
+          &:nth-child(even) {
+            background-color: rgba(var(--ax-color-on-surface));
+          }
+        }
+      }
+    }
+    &.ax-table-bordered {
+      thead {
+        th {
+          border-top: 0 !important;
+        }
+      }
+      tbody {
+        tr {
+          &:last-child {
+            td {
+              border-bottom: 0 !important;
+            }
+          }
+          td {
+            &:last-child {
+              border-bottom: 0 !important;
+            }
+          }
+        }
+      }
+
+      td,
+      th {
+        border: 1px solid;
+        border-color: rgba(var(--ax-color-border-default));
+        &:first-child {
+          border-inline-start-width: 0px;
+        }
+        &:last-child {
+          border-inline-end-width: 0px;
+        }
+      }
+    }
+    @media screen and (max-width: 601px) {
+      &.ax-table-responsive {
+        overflow-wrap: break-word;
+        display: block;
+        border: 0px;
+        thead {
+          position: absolute;
+          inset-inline-start: -100%;
+          top: -100%;
+        }
+
+        td {
+          display: block;
+          float: inline-start;
+          width: 100%;
+          clear: both;
+          background: rgba(var(--ax-color-surface));
+          padding: 0.375rem 0.625rem;
+          box-sizing: border-box;
+          &:last-child {
+            border: 0;
+          }
+          &:before {
+            content: attr(data-label);
+            display: block;
+            font-weight: bold;
+          }
+        }
+        tr {
+          border: 1px solid;
+          border-color: rgba(var(--ax-color-border-default));
+        }
+        tr,
+        tbody {
+          display: block;
+          width: 100%;
+          float: inline-start;
+          margin-bottom: 0.625rem;
+        }
+      }
+    }
+  }
+}

package/src/shared/_utils.scss

@@ -1,52 +1,52 @@
-@import '../variables/index.scss';
-
-[class*=' ax-icon-'],
-[class^='ax-icon-'] {
-  vertical-align: middle;
-}
-
-.ax-rotaion-0 {
-  transform: rotate(0);
-}
-
-@each $deg in $degrees {
-  .ax-rotation-#{$deg} {
-    transform: rotate(#{$deg}deg);
-  }
-
-  .-ax-rotation-#{$deg} {
-    transform: rotate(-#{$deg}deg);
-  }
-}
-
-.ax-transition-all {
-  transition-property: all;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
-.ax-w-full {
-  width: 100%;
-}
-
-.ax-h-full {
-  height: 100%;
-}
-
-.ax-fieldset {
-  border: 1px solid;
-  border-color: rgba(var(--ax-color-border-default));
-  padding: 0.75rem;
-  border-radius: var(--ax-rounded-border-default);
-  legend {
-    font-size: 0.875rem;
-    padding: 0 0.25rem;
-  }
-}
-
-.ax-card {
-  background-color: rgba(var(--ax-color-surface));
-  border: 1px solid;
-  border-color: rgba(var(--ax-color-border-default));
-  border-radius: var(--ax-rounded-border-default);
-}
+@import '../variables/index.scss';
+
+[class*=' ax-icon-'],
+[class^='ax-icon-'] {
+  vertical-align: middle;
+}
+
+.ax-rotaion-0 {
+  transform: rotate(0);
+}
+
+@each $deg in $degrees {
+  .ax-rotation-#{$deg} {
+    transform: rotate(#{$deg}deg);
+  }
+
+  .-ax-rotation-#{$deg} {
+    transform: rotate(-#{$deg}deg);
+  }
+}
+
+.ax-transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.ax-w-full {
+  width: 100%;
+}
+
+.ax-h-full {
+  height: 100%;
+}
+
+.ax-fieldset {
+  border: 1px solid;
+  border-color: rgba(var(--ax-color-border-default));
+  padding: 0.75rem;
+  border-radius: var(--ax-rounded-border-default);
+  legend {
+    font-size: 0.875rem;
+    padding: 0 0.25rem;
+  }
+}
+
+.ax-card {
+  background-color: rgba(var(--ax-color-surface));
+  border: 1px solid;
+  border-color: rgba(var(--ax-color-border-default));
+  border-radius: var(--ax-rounded-border-default);
+}

package/src/shared/index.scss

@@ -1,13 +1,13 @@
-@import "./actionsheet";
-@import "./check-box";
-@import "./decoration";
-@import "./drop-down";
-@import "./editor-container";
-@import "./general-button";
-@import "./icon-control";
-@import "./inputs";
-@import "./list";
-@import "./radio";
-@import "./skeleton";
-@import "./table";
+@import "./actionsheet";
+@import "./check-box";
+@import "./decoration";
+@import "./drop-down";
+@import "./editor-container";
+@import "./general-button";
+@import "./icon-control";
+@import "./inputs";
+@import "./list";
+@import "./radio";
+@import "./skeleton";
+@import "./table";
 @import "./utils";

package/src/themes/default copy.scss

@@ -1,129 +1,129 @@
-:root {
-  --ax-size-base: 2.5rem;
-  --ax-size-default: var(--ax-size-base);
-
-  --ax-rounded-border-default: 0.375rem;
-  --ax-color-border-default: 224, 224, 224;
-
-  --ax-color-background-default: 250, 250, 250;
-  --ax-color-text-default: 18, 18, 18;
-
-  --ax-color-surface: 255, 255, 255;
-  --ax-color-surface-fore: 18, 18, 18;
-
-  --ax-color-on-surface: 244, 244, 244;
-  --ax-color-on-surface-fore: 20, 20, 20;
-
-  --ax-color-input-surface: 255, 255, 255;
-
-  --ax-color-ghost-fore: 30, 41, 59;
-  --ax-color-ghost-50: 247, 248, 250;
-  --ax-color-ghost-100: 235, 238, 242;
-  --ax-color-ghost-200: 221, 226, 233;
-  --ax-color-ghost-300: 207, 214, 224;
-  --ax-color-ghost-400: 197, 206, 217;
-  --ax-color-ghost-500: 187, 197, 210;
-  --ax-color-ghost-600: 181, 191, 205;
-  --ax-color-ghost-700: 172, 184, 199;
-  --ax-color-ghost-800: 164, 176, 193;
-  --ax-color-ghost-900: 150, 163, 182;
-
-  --ax-color-primary-fore: 255, 255, 255;
-  --ax-color-primary-50: 239, 246, 255;
-  --ax-color-primary-100: 219, 234, 254;
-  --ax-color-primary-200: 191, 219, 254;
-  --ax-color-primary-300: 147, 197, 253;
-  --ax-color-primary-400: 96, 165, 250;
-  --ax-color-primary-500: 59, 130, 246;
-  --ax-color-primary-600: 37, 99, 235;
-  --ax-color-primary-700: 29, 78, 216;
-  --ax-color-primary-800: 30, 64, 175;
-  --ax-color-primary-900: 30, 58, 138;
-
-  --ax-color-secondary-fore: 255, 255, 255;
-  --ax-color-secondary-50: 233, 234, 236;
-  --ax-color-secondary-100: 200, 203, 208;
-  --ax-color-secondary-200: 164, 169, 176;
-  --ax-color-secondary-300: 128, 134, 144;
-  --ax-color-secondary-400: 100, 108, 121;
-  --ax-color-secondary-500: 73, 82, 97;
-  --ax-color-secondary-600: 66, 75, 89;
-  --ax-color-secondary-700: 57, 65, 79;
-  --ax-color-secondary-800: 49, 56, 69;
-  --ax-color-secondary-900: 33, 40, 51;
-
-  --ax-color-success-fore: 255, 255, 255;
-  --ax-color-success-50: 236, 253, 245;
-  --ax-color-success-100: 209, 250, 229;
-  --ax-color-success-200: 167, 243, 208;
-  --ax-color-success-300: 110, 231, 183;
-  --ax-color-success-400: 52, 211, 153;
-  --ax-color-success-500: 16, 185, 129;
-  --ax-color-success-600: 5, 150, 105;
-  --ax-color-success-700: 4, 120, 87;
-  --ax-color-success-800: 6, 95, 70;
-  --ax-color-success-900: 6, 78, 59;
-
-  --ax-color-danger-fore: 255, 255, 255;
-  --ax-color-danger-50: 254, 242, 242;
-  --ax-color-danger-100: 254, 226, 226;
-  --ax-color-danger-200: 254, 202, 202;
-  --ax-color-danger-300: 252, 165, 165;
-  --ax-color-danger-400: 248, 113, 113;
-  --ax-color-danger-500: 239, 68, 68;
-  --ax-color-danger-600: 220, 38, 38;
-  --ax-color-danger-700: 185, 28, 28;
-  --ax-color-danger-800: 153, 27, 27;
-  --ax-color-danger-900: 127, 29, 29;
-
-  --ax-color-warning-fore: 120, 53, 15;
-  --ax-color-warning-50: 255, 248, 225;
-  --ax-color-warning-100: 255, 236, 179;
-  --ax-color-warning-200: 255, 224, 130;
-  --ax-color-warning-300: 255, 213, 79;
-  --ax-color-warning-400: 255, 202, 40;
-  --ax-color-warning-500: 255, 193, 7;
-  --ax-color-warning-600: 255, 179, 0;
-  --ax-color-warning-700: 255, 160, 0;
-  --ax-color-warning-800: 255, 143, 0;
-  --ax-color-warning-900: 255, 111, 0;
-}
-
-.ax-dark {
-  --ax-color-background-default: 47, 48, 55;
-
-  --ax-color-text-default: 224, 224, 224;
-  --ax-color-border-default: 72, 72, 72;
-
-  --ax-color-surface: 60, 60, 67;
-  --ax-color-surface-fore: 224, 224, 224;
-
-  --ax-color-on-surface: 71, 71, 78;
-  --ax-color-on-surface-fore: 224, 224, 224;
-
-  --ax-color-input-surface: 80, 81, 87;
-
-  --ax-color-ghost-fore: 255, 255, 255;
-  --ax-color-ghost-50: 232, 233, 234;
-  --ax-color-ghost-100: 199, 200, 203;
-  --ax-color-ghost-200: 161, 163, 169;
-  --ax-color-ghost-300: 123, 126, 134;
-  --ax-color-ghost-400: 95, 99, 108;
-  --ax-color-ghost-500: 67, 71, 82;
-  --ax-color-ghost-600: 61, 64, 75;
-  --ax-color-ghost-700: 52, 55, 65;
-  --ax-color-ghost-800: 44, 47, 56;
-  --ax-color-ghost-900: 30, 32, 40;
-
-  //   --ax-color-primary-fore : 25, 41, 63;
-  //   --ax-color-primary-50 : 243, 248, 255;
-  // --ax-color-primary-100 : 226, 236, 254;
-  // --ax-color-primary-200 : 206, 224, 253;
-  // --ax-color-primary-300 : 186, 212, 252;
-  // --ax-color-primary-400 : 172, 202, 252;
-  // --ax-color-primary-500 : 157, 193, 251;
-  // --ax-color-primary-600 : 149, 187, 250;
-  // --ax-color-primary-700 : 139, 179, 250;
-  // --ax-color-primary-800 : 129, 171, 249;
-  // --ax-color-primary-900 : 111, 158, 248
-}
+:root {
+  --ax-size-base: 2.5rem;
+  --ax-size-default: var(--ax-size-base);
+
+  --ax-rounded-border-default: 0.375rem;
+  --ax-color-border-default: 224, 224, 224;
+
+  --ax-color-background-default: 250, 250, 250;
+  --ax-color-text-default: 18, 18, 18;
+
+  --ax-color-surface: 255, 255, 255;
+  --ax-color-surface-fore: 18, 18, 18;
+
+  --ax-color-on-surface: 244, 244, 244;
+  --ax-color-on-surface-fore: 20, 20, 20;
+
+  --ax-color-input-surface: 255, 255, 255;
+
+  --ax-color-ghost-fore: 30, 41, 59;
+  --ax-color-ghost-50: 247, 248, 250;
+  --ax-color-ghost-100: 235, 238, 242;
+  --ax-color-ghost-200: 221, 226, 233;
+  --ax-color-ghost-300: 207, 214, 224;
+  --ax-color-ghost-400: 197, 206, 217;
+  --ax-color-ghost-500: 187, 197, 210;
+  --ax-color-ghost-600: 181, 191, 205;
+  --ax-color-ghost-700: 172, 184, 199;
+  --ax-color-ghost-800: 164, 176, 193;
+  --ax-color-ghost-900: 150, 163, 182;
+
+  --ax-color-primary-fore: 255, 255, 255;
+  --ax-color-primary-50: 239, 246, 255;
+  --ax-color-primary-100: 219, 234, 254;
+  --ax-color-primary-200: 191, 219, 254;
+  --ax-color-primary-300: 147, 197, 253;
+  --ax-color-primary-400: 96, 165, 250;
+  --ax-color-primary-500: 59, 130, 246;
+  --ax-color-primary-600: 37, 99, 235;
+  --ax-color-primary-700: 29, 78, 216;
+  --ax-color-primary-800: 30, 64, 175;
+  --ax-color-primary-900: 30, 58, 138;
+
+  --ax-color-secondary-fore: 255, 255, 255;
+  --ax-color-secondary-50: 233, 234, 236;
+  --ax-color-secondary-100: 200, 203, 208;
+  --ax-color-secondary-200: 164, 169, 176;
+  --ax-color-secondary-300: 128, 134, 144;
+  --ax-color-secondary-400: 100, 108, 121;
+  --ax-color-secondary-500: 73, 82, 97;
+  --ax-color-secondary-600: 66, 75, 89;
+  --ax-color-secondary-700: 57, 65, 79;
+  --ax-color-secondary-800: 49, 56, 69;
+  --ax-color-secondary-900: 33, 40, 51;
+
+  --ax-color-success-fore: 255, 255, 255;
+  --ax-color-success-50: 236, 253, 245;
+  --ax-color-success-100: 209, 250, 229;
+  --ax-color-success-200: 167, 243, 208;
+  --ax-color-success-300: 110, 231, 183;
+  --ax-color-success-400: 52, 211, 153;
+  --ax-color-success-500: 16, 185, 129;
+  --ax-color-success-600: 5, 150, 105;
+  --ax-color-success-700: 4, 120, 87;
+  --ax-color-success-800: 6, 95, 70;
+  --ax-color-success-900: 6, 78, 59;
+
+  --ax-color-danger-fore: 255, 255, 255;
+  --ax-color-danger-50: 254, 242, 242;
+  --ax-color-danger-100: 254, 226, 226;
+  --ax-color-danger-200: 254, 202, 202;
+  --ax-color-danger-300: 252, 165, 165;
+  --ax-color-danger-400: 248, 113, 113;
+  --ax-color-danger-500: 239, 68, 68;
+  --ax-color-danger-600: 220, 38, 38;
+  --ax-color-danger-700: 185, 28, 28;
+  --ax-color-danger-800: 153, 27, 27;
+  --ax-color-danger-900: 127, 29, 29;
+
+  --ax-color-warning-fore: 120, 53, 15;
+  --ax-color-warning-50: 255, 248, 225;
+  --ax-color-warning-100: 255, 236, 179;
+  --ax-color-warning-200: 255, 224, 130;
+  --ax-color-warning-300: 255, 213, 79;
+  --ax-color-warning-400: 255, 202, 40;
+  --ax-color-warning-500: 255, 193, 7;
+  --ax-color-warning-600: 255, 179, 0;
+  --ax-color-warning-700: 255, 160, 0;
+  --ax-color-warning-800: 255, 143, 0;
+  --ax-color-warning-900: 255, 111, 0;
+}
+
+.ax-dark {
+  --ax-color-background-default: 47, 48, 55;
+
+  --ax-color-text-default: 224, 224, 224;
+  --ax-color-border-default: 72, 72, 72;
+
+  --ax-color-surface: 60, 60, 67;
+  --ax-color-surface-fore: 224, 224, 224;
+
+  --ax-color-on-surface: 71, 71, 78;
+  --ax-color-on-surface-fore: 224, 224, 224;
+
+  --ax-color-input-surface: 80, 81, 87;
+
+  --ax-color-ghost-fore: 255, 255, 255;
+  --ax-color-ghost-50: 232, 233, 234;
+  --ax-color-ghost-100: 199, 200, 203;
+  --ax-color-ghost-200: 161, 163, 169;
+  --ax-color-ghost-300: 123, 126, 134;
+  --ax-color-ghost-400: 95, 99, 108;
+  --ax-color-ghost-500: 67, 71, 82;
+  --ax-color-ghost-600: 61, 64, 75;
+  --ax-color-ghost-700: 52, 55, 65;
+  --ax-color-ghost-800: 44, 47, 56;
+  --ax-color-ghost-900: 30, 32, 40;
+
+  //   --ax-color-primary-fore : 25, 41, 63;
+  //   --ax-color-primary-50 : 243, 248, 255;
+  // --ax-color-primary-100 : 226, 236, 254;
+  // --ax-color-primary-200 : 206, 224, 253;
+  // --ax-color-primary-300 : 186, 212, 252;
+  // --ax-color-primary-400 : 172, 202, 252;
+  // --ax-color-primary-500 : 157, 193, 251;
+  // --ax-color-primary-600 : 149, 187, 250;
+  // --ax-color-primary-700 : 139, 179, 250;
+  // --ax-color-primary-800 : 129, 171, 249;
+  // --ax-color-primary-900 : 111, 158, 248
+}