@acorex/styles 21.0.0-next.14 → 21.0.0-next.16

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

@@ -1,27 +1,22 @@
-@use '../mixins/index.scss' as mixins;
-@include mixins.darkMode() {
+.dark {
   .ax-list-item {
     &.ax-state-selected {
       background-color: rgba(var(--ax-sys-color-primary-800)) !important;
       color: rgba(var(--ax-sys-color-on-primary)) !important;
-
-      // .ax-selected-icon {
-      //
-      //   color: rgba(var(--ax-sys-color-on-primary));
-      // }
     }
   }
 }
+
 .ax-list {
   display: flex;
   height: 100%;
   flex-direction: column;
   overflow: hidden;
   background-color: rgba(var(--ax-sys-color-surface));
-  font-size: 0.875rem /* 14px */;
-  line-height: 1.25rem /* 20px */;
-  @include mixins.media('md') {
-    max-height: 20rem /* 320px */;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  .ax-md {
+    max-height: 20rem;
   }
   ax-header,
   ax-footer {
@@ -34,13 +29,13 @@
   ax-header {
     border-bottom-width: 1px;
     border-color: rgba(var(--ax-sys-color-border-lightest-surface), var(--tw-border-opacity));
-    padding: 1rem /* 16px */;
-    font-size: 1rem /* 16px */;
-    line-height: 1.5rem /* 24px */;
+    padding: 1rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
     font-weight: 500;
-    @include mixins.media('md') {
-      font-size: 1.125rem /* 18px */;
-      line-height: 1.75rem /* 28px */;
+    .ax-md {
+      font-size: 1.125rem;
+      line-height: 1.75rem;
     }
     ax-prefix,
     ax-suffix {
@@ -55,53 +50,44 @@
       align-items: flex-end;
     }
   }
-
   ax-footer {
     border-top-width: 1px;
   }
-
   .ax-content {
     flex: 1 1 0%;
     overflow-y: auto;
     overflow-x: hidden;
-
     &.ax-list-items-container {
       height: 100%;
       overflow-y: auto;
-      padding-top: 0.5rem /* 8px */;
-      padding-bottom: 0.5rem /* 8px */;
-
+      padding-top: 0.5rem;
+      padding-bottom: 0.5rem;
       &.ax-vertical {
         display: grid;
         grid-template-columns: repeat(1, minmax(0, 1fr));
-
         &.ax-divide {
           border-top-width: 1px;
           border-bottom-width: 1px;
         }
       }
-
       &.ax-default {
         cursor: pointer;
-
         .ax-list-item-group {
           & > span {
             display: flex;
             align-items: center;
-            padding: 0.75rem /* 12px */;
+            padding: 0.75rem;
             font-weight: 500;
           }
-
           & > ul {
-            padding-left: 0.75rem /* 12px */;
-            padding-right: 0.75rem /* 12px */;
+            padding-left: 0.75rem;
+            padding-right: 0.75rem;
           }
           .ax-list-item {
-            margin-bottom: 0.25rem /* 4px */;
+            margin-bottom: 0.25rem;
             border-radius: var(--ax-sys-border-radius);
           }
         }
-
         .ax-list-item {
           position: relative;
           display: flex;
@@ -109,10 +95,10 @@
           user-select: none;
           align-items: center;
           justify-content: space-between;
-          padding-inline-end: 1rem /* 16px */;
-          padding-inline-start: 0.75rem /* 12px */;
-          font-size: 1rem /* 16px */;
-          line-height: 1.5rem /* 24px */;
+          padding-inline-end: 1rem;
+          padding-inline-start: 0.75rem;
+          font-size: 1rem;
+          line-height: 1.5rem;
           &:focus,
           &:focus-visible {
             outline-width: 2px;
@@ -120,31 +106,17 @@
           }
           &.ax-state-checkbox {
             .ax-checkbox-label {
-              margin-inline-start: 0.5rem /* 8px */;
+              margin-inline-start: 0.5rem;
             }
           }
           &.ax-state-selected {
             background-color: rgba(var(--ax-sys-color-primary-500), var(--tw-bg-opacity)) !important;
             color: rgba(var(--ax-sys-color-on-primary), var(--tw-text-opacity)) !important;
-
-            // .ax-selected-icon {
-            //
-            //   font-size: 1.5rem /* 24px */;
-            //   line-height: 2rem /* 32px */;
-            //   color: rgba(var(--ax-sys-color-primary-500));
-            // }
           }
-
-          // &:not(.ax-check-box) {
-          //     &.ax-state-selected {
-          //     }
-          // }
-
           &.ax-state-disabled {
             cursor: not-allowed;
             opacity: 0.5;
           }
-
           &:focus-visible,
           &:hover {
             background-color: rgba(var(--ax-sys-color-surface));
@@ -154,18 +126,15 @@
           }
         }
       }
-
       .ax-list-loading-container {
         display: flex;
         justify-content: center;
-        padding: 0.5rem /* 8px */;
+        padding: 0.5rem;
       }
     }
   }
-
   .ax-search-box-container {
-    padding: 0.5rem /* 8px */;
-
+    padding: 0.5rem;
     &.ax-state-hidden {
       display: none;
     }

package/components/_radio.css

@@ -0,0 +1,33 @@
+.ax-radio {
+  margin: 0px;
+  height: 1rem;
+  min-height: 1rem;
+  min-width: 1rem;
+  width: 1rem;
+  cursor: pointer;
+  appearance: none;
+  border-radius: 9999px;
+  border-width: 1px;
+  border-color: rgba(var(--ax-sys-color-border-surface));
+  background-color: rgba(var(--ax-sys-color-input-surface));
+  vertical-align: middle;
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+  &:checked {
+    border-color: rgba(var(--ax-sys-color-primary-500)) !important;
+    background-color: rgba(var(--ax-sys-color-primary-500)) !important;
+    background-size: contain;
+    background-repeat: no-repeat;
+  }
+  &:checked {
+    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
+  }
+  &:focus-visible,
+  &:focus {
+    box-shadow: 0px 0px 0px 2px rgba(var(--ax-sys-color-surface)), 0px 0px 0px 4px rgba(var(--ax-sys-color-primary-500));
+  }
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+}

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

@@ -1,13 +1,13 @@
+@keyframes ripple {
+  to {
+    transform: scale(4);
+    opacity: 0;
+  }
+}
+
 .ax-ripple {
+  position: absolute;
   transform: scale(0);
   animation: ripple 500ms linear;
-  position: absolute;
   border-radius: 9999rem !important;
-
-  @keyframes ripple {
-    to {
-      transform: scale(4);
-      opacity: 0;
-    }
-  }
 }

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,4 +1,4 @@
-@use '../mixins/index.scss' as mixin;
+@use "../mixins/index.scss" as mixin;
 .ax-uploader-overlay-state {
   border-radius: inherit;
   pointer-events: none;
@@ -13,10 +13,10 @@
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  gap: 0.5rem /* 8px */;
+  gap: 0.5rem;
   background-color: rgba(var(--ax-sys-color-primary-200), 0.75);
-  font-size: 0.875rem /* 14px */;
-  line-height: 1.25rem /* 20px */;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
   color: rgba(var(--ax-sys-color-on-primary-tint));
   outline-style: dashed;
   outline-offset: -4px;
@@ -35,7 +35,7 @@
   }
 }
 
-@include mixin.darkMode() {
+.dark {
   .ax-uploader-overlay-state {
     background-color: rgba(var(--ax-sys-color-primary-800), 0.75);
     color: rgba(var(--ax-sys-color-on-primary));

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: '';
+}