@acorex/styles 21.0.2-next.29 → 21.0.2-next.30

package/components/{_table.scss → _table.css}

@@ -1,11 +1,11 @@
-@use '../mixins/index.scss' as mixins;
-@include mixins.darkMode() {
+.dark {
   .ax-table {
     thead {
       background-color: rgba(var(--ax-sys-color-surface));
     }
   }
 }
+
 .ax-table {
   width: 100%;
   border-collapse: collapse;
@@ -14,26 +14,25 @@
   border-radius: var(--ax-sys-border-radius);
   border-width: 1px;
   border-color: rgba(var(--ax-sys-color-border-lightest-surface));
-  font-size: 0.875rem /* 14px */;
-  line-height: 1.25rem /* 20px */;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   td {
     border-bottom-width: 1px;
     border-color: rgba(var(--ax-sys-color-border-lightest-surface));
-    padding-left: 1rem /* 16px */;
-    padding-right: 1rem /* 16px */;
-    padding-top: 0.75rem /* 12px */;
-    padding-bottom: 0.75rem /* 12px */;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    padding-top: 0.75rem;
+    padding-bottom: 0.75rem;
   }
   thead {
     border-bottom-width: 1px;
     border-color: rgba(var(--ax-sys-color-border-lightest-surface));
     background-color: rgba(var(--ax-sys-color-surface));
-
     th {
-      padding-left: 1rem /* 16px */;
-      padding-right: 1rem /* 16px */;
-      padding-top: 0.875rem /* 14px */;
-      padding-bottom: 0.875rem /* 14px */;
+      padding-left: 1rem;
+      padding-right: 1rem;
+      padding-top: 0.875rem;
+      padding-bottom: 0.875rem;
       text-align: start;
       font-weight: 500;
       text-transform: uppercase;
@@ -68,12 +67,10 @@
         }
       }
     }
-
     td,
     th {
       border-width: 1px;
       border-color: rgba(var(--ax-sys-color-border-lightest-surface));
-
       &:first-child {
         border-inline-start-width: 0px;
       }
@@ -82,28 +79,28 @@
       }
     }
   }
-  @include mixins.mediaLessThan('xs') {
+}
+@media screen and (max-width: 640px) {
+  .ax-table {
     &.ax-table-responsive {
       display: block;
       overflow-wrap: break-word;
       border-width: 0px;
-
       thead {
         position: absolute;
         inset-inline-start: -100%;
         top: -100%;
       }
-
       td {
         float: inline-start;
         clear: both;
         box-sizing: border-box;
         display: block;
         width: 100%;
-        padding-left: 0.625rem /* 10px */;
-        padding-right: 0.625rem /* 10px */;
-        padding-top: 0.375rem /* 6px */;
-        padding-bottom: 0.375rem /* 6px */;
+        padding-left: 0.625rem;
+        padding-right: 0.625rem;
+        padding-top: 0.375rem;
+        padding-bottom: 0.375rem;
         &:last-child {
           border-width: 0px;
         }
@@ -120,7 +117,7 @@
       tr,
       tbody {
         float: inline-start;
-        margin-bottom: 0.625rem /* 10px */;
+        margin-bottom: 0.625rem;
         width: 100%;
       }
     }

package/components/{_uploader.scss → _uploader.css}

@@ -1,5 +1,3 @@
-@use '../mixins/index.scss' as mixin;
-
 .ax-uploader-overlay-state {
   border-radius: inherit;
   pointer-events: none;
@@ -16,7 +14,6 @@
   justify-content: space-evenly;
   gap: 1rem /* 16px */;
 
-  // Enhanced backdrop with blur and gradient
   background: linear-gradient(
     135deg,
     rgba(var(--ax-sys-color-primary-500), 0.15) 0%,
@@ -25,25 +22,21 @@
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
 
-  // Modern border design
   border: 2px dashed rgba(var(--ax-sys-color-primary-500), 0.6);
   box-shadow:
     0 4px 16px rgba(var(--ax-sys-color-primary-500), 0.15),
     inset 0 1px 0 rgba(255, 255, 255, 0.1);
 
-  // Typography
   font-size: 0.9375rem /* 15px */;
   line-height: 1.5rem /* 24px */;
   font-weight: 500;
   color: rgba(var(--ax-sys-color-primary-700));
   text-align: center;
 
-  // Smooth transitions
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 200ms;
 
-  // Icon styling
   .ax-icon {
     height: 3rem;
     font-size: 2.5rem /* 40px */;
@@ -53,23 +46,19 @@
     animation: pulse 2s ease-in-out infinite;
   }
 
-  // Text styling
   > span:not(.ax-icon) {
     max-width: 80%;
     padding: 0 1rem;
     text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
   }
 
-  // Subtle animation on mount
   animation: fadeInScale 200ms cubic-bezier(0.4, 0, 0.2, 1);
 
-  // Exit animation class
   &.ax-uploader-overlay-exiting {
     animation: fadeOutScale 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
   }
 }
 
-// Pulse animation for icon
 @keyframes pulse {
   0%,
   100% {
@@ -82,7 +71,6 @@
   }
 }
 
-// Fade in and scale animation
 @keyframes fadeInScale {
   from {
     opacity: 0;
@@ -94,7 +82,6 @@
   }
 }
 
-// Fade out and scale animation
 @keyframes fadeOutScale {
   from {
     opacity: 1;
@@ -116,33 +103,27 @@
   }
 }
 
-@include mixin.darkMode() {
+.dark {
   .ax-uploader-overlay-state {
-    // Dark mode gradient
     background: linear-gradient(
       135deg,
       rgba(var(--ax-sys-color-primary-600), 0.2) 0%,
       rgba(var(--ax-sys-color-primary-500), 0.25) 100%
     );
 
-    // Dark mode border
     border-color: rgba(var(--ax-sys-color-primary-400), 0.5);
 
-    // Dark mode shadow
     box-shadow:
       0 4px 16px rgba(var(--ax-sys-color-primary-900), 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.05);
 
-    // Dark mode text
     color: rgba(var(--ax-sys-color-primary-300));
 
-    // Dark mode icon
     .ax-icon {
       color: rgba(var(--ax-sys-color-primary-400));
       filter: drop-shadow(0 2px 4px rgba(var(--ax-sys-color-primary-900), 0.4));
     }
 
-    // Dark mode text shadow
     > span:not(.ax-icon) {
       text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
     }

package/components/index.css

@@ -0,0 +1,11 @@
+@import './_action-item.css';
+@import './_actionsheet.css';
+@import './_check-box.css';
+@import './_drop-down.css';
+@import './_editor-container.css';
+@import './_general-button.css';
+@import './_list.css';
+@import './_radio.css';
+@import './_ripple.css';
+@import './_table.css';
+@import './_uploader.css';

package/icons/fontawesome/_variables.css

@@ -0,0 +1,229 @@
+:root {
+  --ax-icon-more-horizontal: '\f141';
+  --ax-icon-more-horizontal-after: '';
+
+  --ax-icon-more-vertical: '\f142';
+  --ax-icon-more-vertical-after: '';
+
+  --ax-icon-arrow-long-up: '\f176';
+  --ax-icon-arrow-long-up-after: '';
+
+  --ax-icon-arrow-long-down: '\f175';
+  --ax-icon-arrow-long-down-after: '';
+
+  --ax-icon-color-palette: '\f53f';
+  --ax-icon-color-palette-after: '';
+
+  --ax-icon-arrow-left: '\f0d9';
+  --ax-icon-arrow-left-after: '';
+
+  --ax-icon-arrow-down: '\f0d7';
+  --ax-icon-arrow-down-after: '';
+
+  --ax-icon-arrow-up: '\f0d8';
+  --ax-icon-arrow-up-after: '';
+
+  --ax-icon-arrow-right: '\f0da';
+  --ax-icon-arrow-right-after: '';
+
+  --ax-icon-chevron-left: '\f053';
+  --ax-icon-chevron-left-after: '';
+
+  --ax-icon-chevron-down: '\f078';
+  --ax-icon-chevron-down-after: '';
+
+  --ax-icon-chevron-up: '\f077';
+  --ax-icon-chevron-up-after: '';
+
+  --ax-icon-chevron-right: '\f054';
+  --ax-icon-chevron-right-after: '';
+
+  --ax-icon-chevron-double-right: '\f324';
+  --ax-icon-chevron-double-right-after: '';
+
+  --ax-icon-chevron-double-left: '\f323';
+  --ax-icon-chevron-double-left-after: '';
+
+  --ax-icon-first-page: '\f33e';
+  --ax-icon-first-page-after: '';
+
+  --ax-icon-last-page: '\f340';
+  --ax-icon-last-page-after: '';
+
+  --ax-icon-calendar: '\f133';
+  --ax-icon-calendar-after: '';
+
+  --ax-icon-info: '\f05a';
+  --ax-icon-info-after: '';
+
+  --ax-icon-error: '\f06a';
+  --ax-icon-error-after: '';
+
+  --ax-icon-warning: '\f071';
+  --ax-icon-warning-after: '';
+
+  --ax-icon-check: '\f00c';
+  --ax-icon-check-after: '';
+
+  --ax-icon-check-circle: '\f058';
+  --ax-icon-check-circle-after: '';
+
+  --ax-icon-dobble-check: '\f560';
+  --ax-icon-dobble-check-after: '';
+
+  --ax-icon-close: '\f00d';
+  --ax-icon-close-after: '';
+
+  --ax-icon-clear: '\f057';
+  --ax-icon-clear-after: '';
+
+  --ax-icon-visibility-off: '\f070';
+  --ax-icon-visibility-off-after: '';
+
+  --ax-icon-visibility: '\f06e';
+  --ax-icon-visibility-after: '';
+
+  --ax-icon-unfold-more: '\f0dc';
+  --ax-icon-unfold-more-after: '';
+
+  --ax-icon-download: '\f019';
+  --ax-icon-download-after: '';
+
+  --ax-icon-upload: '\e09a';
+  --ax-icon-upload-after: '';
+
+  --ax-icon-search: '\f002';
+  --ax-icon-search-after: '';
+
+  --ax-icon-copy: '\f0c5';
+  --ax-icon-copy-after: '';
+
+  --ax-icon-refresh: '\f021';
+  --ax-icon-refresh-after: '';
+
+  --ax-icon-inbox: '\f01c';
+  --ax-icon-inbox-after: '';
+
+  --ax-icon-emoji: '\f118';
+  --ax-icon-emoji-after: '';
+
+  --ax-icon-attach: '\f0c6';
+  --ax-icon-attach-after: '';
+
+  --ax-icon-mic: '\f130';
+  --ax-icon-mic-after: '';
+
+  --ax-icon-send: '\f1d8';
+  --ax-icon-send-after: '';
+
+  --ax-icon-play: '\f04b';
+  --ax-icon-play-after: '';
+
+  --ax-icon-pause: '\f04c';
+  --ax-icon-pause-after: '';
+
+  --ax-icon-reload: '\f2f9';
+  --ax-icon-reload-after: '';
+
+  --ax-icon-heart: '\f004';
+  --ax-icon-heart-after: '';
+
+  --ax-icon-comment: '\f075';
+  --ax-icon-comment-after: '';
+
+  --ax-icon-bold: '\f032';
+  --ax-icon-bold-after: '';
+
+  --ax-icon-italic: '\f033';
+  --ax-icon-italic-after: '';
+
+  --ax-icon-strike: '\f0cc';
+  --ax-icon-strike-after: '';
+
+  --ax-icon-under-line: '\f0cd';
+  --ax-icon-under-line-after: '';
+
+  --ax-icon-order-list: '\f0cb';
+  --ax-icon-order-list-after: '';
+
+  --ax-icon-un-order-list: '\f0ca';
+  --ax-icon-un-order-list-after: '';
+
+  --ax-icon-align-left: '\f036';
+  --ax-icon-align-left-after: '';
+
+  --ax-icon-align-right: '\f038';
+  --ax-icon-align-right-after: '';
+
+  --ax-icon-align-center: '\f037';
+  --ax-icon-align-center-after: '';
+
+  --ax-icon-align-justify: '\f039';
+  --ax-icon-align-justify-after: '';
+
+  --ax-icon-undo: '\f0e2';
+  --ax-icon-undo-after: '';
+
+  --ax-icon-redo: '\f01e';
+  --ax-icon-redo-after: '';
+
+  --ax-icon-highlight: '\f591';
+  --ax-icon-highlight-after: '';
+
+  --ax-icon-link: '\f0c1';
+  --ax-icon-link-after: '';
+
+  --ax-icon-image: '\f03e';
+  --ax-icon-image-after: '';
+
+  --ax-icon-pen: '\f304';
+  --ax-icon-pen-after: '';
+
+  --ax-icon-eraser: '\f12d';
+  --ax-icon-eraser-after: '';
+
+  --ax-icon-pen-ruler: '\f5ae';
+  --ax-icon-pen-ruler-after: '';
+
+  --ax-icon-crop: '\f125';
+  --ax-icon-crop-after: '';
+
+  --ax-icon-full-screen: '\f065';
+  --ax-icon-full-screen-after: '';
+
+  --ax-icon-up-folder: '\e632';
+  --ax-icon-up-folder-after: '';
+
+  --ax-icon-sort: '\e0ae';
+  --ax-icon-sort-after: '';
+
+  --ax-icon-menu: '\f0c9';
+  --ax-icon-menu-after: '';
+
+  --ax-icon-plus: '\2b';
+  --ax-icon-plus-after: '';
+
+  --ax-icon-trash: '\f1f8';
+  --ax-icon-trash-after: '';
+
+  --ax-icon-arrow-turn-right: '\e635';
+  --ax-icon-arrow-turn-right-after: '';
+
+  --ax-icon-arrow-turn-left: '\e632';
+  --ax-icon-arrow-turn-left-after: '';
+
+  --ax-icon-save: '\f0c7';
+  --ax-icon-save-after: '';
+
+  --ax-icon-minimize: '\f068';
+  --ax-icon-minimize-after: '';
+
+  --ax-icon-maximize: '\f31d';
+  --ax-icon-maximize-after: '';
+
+  --ax-icon-code: '\f121';
+  --ax-icon-code-after: '';
+
+  --ax-icon-paragraph: '\f1dd';
+  --ax-icon-paragraph-after: '';
+}