@acorex/styles 5.2.1 → 5.3.2

package/src/components/_picker.scss

@@ -1,59 +1,179 @@
-@layer components {
-    ax-picker,
-    .ax-picker {
-        @apply ax-relative;
-        ax-carousel {
-            &::before {
-                @apply ax-top-0;
-                /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.08+0,0+100;Neutral+Density */
-                background: -moz-linear-gradient(
-                    top,
-                    rgba(226, 232, 240, 0.08) 0%,
-                    rgba(226, 232, 240, 0) 100%
-                ); /* FF3.6-15 */
-                background: -webkit-linear-gradient(
-                    top,
-                    rgba(226, 232, 240, 0.70) 0%,
-                    rgba(226, 232, 240, 0) 100%
-                ); /* Chrome10-25,Safari5.1-6 */
-                background: linear-gradient(
-                    to bottom,
-                    rgba(226, 232, 240, 0.70) 0%,
-                    rgba(226, 232, 240, 0) 100%
-                ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
-            }
-            &::after {
-                @apply ax-bottom-0;
-                /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.70+0,0+100;Neutral+Density */
-                background: -moz-linear-gradient(
-                    bottom,
-                    rgba(226, 232, 240, 0.70) 0%,
-                    rgba(226, 232, 240, 0) 100%
-                ); /* FF3.6-15 */
-                background: -webkit-linear-gradient(
-                    bottom,
-                    rgba(226, 232, 240, 0.70) 0%,
-                    rgba(226, 232, 240, 0) 100%
-                ); /* Chrome10-25,Safari5.1-6 */
-                background: linear-gradient(
-                    to top,
-                    rgba(226, 232, 240, 0.70) 0%,
-                    rgba(226, 232, 240, 0) 100%
-                ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
-            }
-            &::before,
-            &::after {
-                @apply ax-absolute ax-h-1/2 ax-w-full ax-start-0 ax-pointer-events-none;
-                content: "";
-            }
-        }
-        .ax-picker-item {
-            @apply ax-block ax-p-4 ax-text-sm;
-            &.is-active {
-                @apply ax-text-base ax-text-primary-500 ax-transition-all;
-            }
-        }
-    }
+// @layer components {
+//     ax-picker,
+//     .ax-picker {
+//         @apply ax-relative;
+//         ax-carousel {
+//             &::before {
+//                 @apply ax-top-0;
+//                 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.08+0,0+100;Neutral+Density */
+//                 background: -moz-linear-gradient(
+//                     top,
+//                     rgba(226, 232, 240, 0.08) 0%,
+//                     rgba(226, 232, 240, 0) 100%
+//                 ); /* FF3.6-15 */
+//                 background: -webkit-linear-gradient(
+//                     top,
+//                     rgba(226, 232, 240, 0.70) 0%,
+//                     rgba(226, 232, 240, 0) 100%
+//                 ); /* Chrome10-25,Safari5.1-6 */
+//                 background: linear-gradient(
+//                     to bottom,
+//                     rgba(226, 232, 240, 0.70) 0%,
+//                     rgba(226, 232, 240, 0) 100%
+//                 ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+//                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
+//             }
+//             &::after {
+//                 @apply ax-bottom-0;
+//                 /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0.70+0,0+100;Neutral+Density */
+//                 background: -moz-linear-gradient(
+//                     bottom,
+//                     rgba(226, 232, 240, 0.70) 0%,
+//                     rgba(226, 232, 240, 0) 100%
+//                 ); /* FF3.6-15 */
+//                 background: -webkit-linear-gradient(
+//                     bottom,
+//                     rgba(226, 232, 240, 0.70) 0%,
+//                     rgba(226, 232, 240, 0) 100%
+//                 ); /* Chrome10-25,Safari5.1-6 */
+//                 background: linear-gradient(
+//                     to top,
+//                     rgba(226, 232, 240, 0.70) 0%,
+//                     rgba(226, 232, 240, 0) 100%
+//                 ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+//                 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#14000000', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
+//             }
+//             &::before,
+//             &::after {
+//                 @apply ax-absolute ax-h-1/2 ax-w-full ax-start-0 ax-pointer-events-none;
+//                 content: "";
+//             }
+//         }
+//         .ax-picker-item {
+//             @apply ax-block ax-p-4 ax-text-sm;
+//             &.is-active {
+//                 @apply ax-text-base ax-text-primary-500 ax-transition-all;
+//             }
+//         }
+//     }
+// }
+
+// @layer components {
+//     ax-picker {
+//         @apply ax-max-h-full ax-overflow-y-scroll;
+//         scroll-snap-type: mandatory;
+//         scroll-snap-points-y: repeat(1rem);
+//         scroll-snap-type: y mandatory;
+//         li {
+//             @apply ax-py-4 ax-flex ax-flex-col ax-items-center ax-justify-center ax-snap-start ax-text-sm;
+//         }
+//     }
+// }
+.ng-data-picker {
+    font-size: 1rem;
+    height: 10em;
+    position: relative;
+    background-color: white;
+    overflow: hidden;
+}
+.ng-data-picker.black {
+    color: white;
+}
+.ng-data-picker .picker-group {
+}
+.ng-data-picker .picker-list {
+    height: 6.25em;
+    position: relative;
+    top: 4em; // half of picker height - half of item height
+}
+.ng-data-picker .picker-item {
+    position: absolute;
+    top: 0;
+    left: 0;
+    overflow: hidden;
+    width: 100%;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: block;
+    text-align: center;
+    will-change: transform;
+    contain: strict;
+    height: 2em;
+    line-height: 2;
+    font-size: 1em;
+}
+.ng-data-picker .selected-item {
+}
+
+/* picker handle layer */
+.ng-data-picker .picker-handle-layer {
+    position: absolute;
+    width: 100%;
+    height: calc(100% + 2px);
+    left: 0;
+    right: 0;
+    top: -1px;
+    bottom: -1px;
+}
+.ng-data-picker .picker-handle-layer .picker-top {
+    border-bottom: 0.55px solid rgba(74, 73, 89, 0.5);
+    background: linear-gradient(to bottom, white 2%, rgba(255, 255, 255, 0.1) 100%);
+    transform: translate3d(0, 0, 5.625em);
+}
+.ng-data-picker .picker-handle-layer .picker-middle {
+    height: 2em;
+}
+.ng-data-picker .picker-handle-layer .picker-bottom {
+    border-top: 0.55px solid rgba(74, 73, 89, 0.5);
+    background: linear-gradient(to top, white 2%, rgba(255, 255, 255, 0.1) 100%);
+    transform: translate3d(0, 0, 5.625em);
+}
+
+/* flex system */
+.flex-box {
+    display: flex;
+}
+.flex-box.dir-column {
+    flex-direction: column;
+}
+.flex-box.dir-row {
+    flex-direction: row;
+}
+
+/* flex system - for items */
+.flex-box .weight-1 {
+    flex: 1;
+}
+.flex-box .weight-2 {
+    flex: 2;
+}
+.flex-box .weight-3 {
+    flex: 3;
+}
+.flex-box .weight-4 {
+    flex: 4;
+}
+.flex-box .weight-5 {
+    flex: 5;
+}
+.flex-box .weight-6 {
+    flex: 6;
+}
+.flex-box .weight-7 {
+    flex: 7;
+}
+.flex-box .weight-8 {
+    flex: 8;
+}
+.flex-box .weight-9 {
+    flex: 9;
+}
+.flex-box .weight-10 {
+    flex: 10;
+}
+.flex-box .weight-11 {
+    flex: 11;
+}
+.flex-box .weight-12 {
+    flex: 12;
 }

package/src/components/_popup.scss

@@ -1,44 +1,9 @@
 @layer components {
-    ax-page-footer,
-    ax-page-header {
-        @apply ax-flex ax-items-center ax-justify-between ax-px-3 ax-py-2 ax-border-solid ax-border-light-300 dark:ax-border-light-700;
-
-        ax-prefix {
-            @apply ax-flex ax-col-span-6 ax-col-start-1 ax-col-end-7 ax-justify-start;
-        }
-
-        ax-suffix {
-            @apply ax-flex ax-col-span-6 ax-col-start-7 ax-col-end-13 ax-justify-end;
-        }
-    }
-
-    ax-page-footer {
-        @apply ax-border-t;
-    }
-
-    ax-page-header {
-        @apply ax-border-b;
-    }
 
     .ax-popup {
         @apply ax-flex ax-flex-col ax-bg-white ax-w-6/12 ax-shadow-lg ax-border ax-border-solid ax-border-light-300 ax-rounded ax-outline-none ax-p-0 ax-max-h-[98vh] ax-min-h-fit ax-mx-auto;
         @include control-states("surface");
 
-        .ax-popup-header {
-            @apply ax-p-4 ax-border-b ax-border-light-300 dark:ax-border-light-700 ax-flex ax-justify-between ax-items-center ax-cursor-move;
-
-            span {
-                @apply ax-font-medium;
-            }
-
-            i {
-                @apply ax-text-light-300 dark:ax-text-light-200 ax-cursor-pointer ax-text-xl;
-                &:hover {
-                    @apply ax-text-light-500 dark:ax-text-light-100;
-                }
-            }
-        }
-
         .ax-popup-main-container {
             @apply ax-overflow-auto ax-flex-1;
         }

package/src/components/_progress.scss

@@ -2,7 +2,6 @@
     ax-progress-bar,
     .ax-progress-bar {
         @apply ax-flex ax-justify-between ax-items-center ax-text-sm;
-        @include control-states("editor");
         ax-prefix{
             @apply ax-pe-2;
         }
@@ -11,6 +10,7 @@
         }
         .ax-progress-bar-container {
             @apply ax-w-full ax-h-2 ax-relative ax-bg-light-200 ax-flex ax-rounded-full;
+            @include control-states("editor");
             .ax-progress-bar-rise {
                 max-width: 100%;
                 transition: width 1s;

package/src/components/_selection-list.scss

@@ -34,7 +34,7 @@
     .ax-selection-list {
       &.ax-vertical {
         & > div {
-          @apply ax-pb-3.5 ax-border-b ax-border-light-300 last:ax-border-0;
+          @apply ax-pb-3.5 ax-border-b ax-border-light-300 dark:ax-border-white/[0.09] last:ax-border-0;
         }
       }
     }
@@ -43,7 +43,7 @@
     .ax-selection-list {
       &.ax-vertical,&.ax-horizontal {
         & > div {
-          @apply ax-p-4 ax-border ax-border-light-300 ax-rounded-md ax-shadow-sm;
+          @apply ax-p-4 ax-border ax-border-light-300 dark:ax-border-white/[0.09] ax-rounded-md ax-shadow-sm;
           &.ax-state-selected {
             @apply ax-border-primary-500 ax-ring-1 ax-ring-primary-500 ax-shadow-primary-500; 
           }

package/src/components/_tabs.scss

@@ -141,7 +141,7 @@
 
         &.ax-vertical {
             .ax-items-wrapper {
-                @apply ax-flex-col;
+                @apply ax-flex-col ax-h-full;
 
                 ax-tab-item {
                     @apply ax-text-center ax-justify-start ax-py-2;

package/src/components/_textarea.scss

@@ -3,6 +3,8 @@
     .ax-textarea {
         min-height: calc(var(--ax-base-size) * var(--ax-base-ratio));
         @apply ax-relative ax-flex ax-flex-col ax-rounded ax-bg-white ax-shadow-sm ax-border ax-border-solid ax-border-light-300 ax-overflow-hidden ax-w-full;
+        @include control-states("editor");
+
         &:focus-within {
             @apply ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
         }

package/src/components/_toast.scss

@@ -1,82 +1,8 @@
 @layer components {
-    .ax-toast {
-        @apply ax-grid ax-grid-cols-12 ax-gap-4 ax-relative ax-bg-white ax-shadow-md ax-border-light-200 ax-border ax-border-solid ax-rounded-md ax-px-4 ax-py-2 ax-overflow-hidden ax-items-center;
-        @include control-states('surface');
-        @screen sm {
+    ax-toast {
+        width: max(20vw, 350px);
+        @include screen("mobile") {
             width: 98vw;
         }
-        @screen md {
-            width: max(20vw, 350px);
-        }
-        .ax-toast-icon-side {
-            @apply ax-col-span-1 ax-h-full;
-        }
-        .ax-toast-content-side {
-            @apply ax-col-span-10;
-            .ax-toast-title {
-                @apply ax-text-sm ax-font-semibold ax-text-light-700 dark:ax-text-light-100;
-            }
-            .ax-toast-content {
-                @apply ax-py-2 ax-text-sm ax-text-light-400 dark:ax-text-light-200;
-            }
-        }
-        .ax-toast-dismiss-icon {
-            @apply ax-col-span-1 ax-cursor-pointer ax-h-full;
-            .ax-ic {
-                @apply ax-text-base;
-            }
-        }
-        .ax-toast-dismiss-icon {
-            @apply ax-text-light-400;
-        }
-        .ax-toast-buttons {
-            @apply ax-col-span-12;
-        }
-        .ax-toast-progress {
-            @apply ax-absolute ax-bottom-0 ax-h-1 ax-w-0;
-            animation-duration: 4s;
-            animation-timing-function: linear;
-            animation-name: progressBar;
-        }
-        @keyframes progressBar {
-            0% {
-                width: 100%;
-            }
-            100% {
-                width: 0%;
-            }
-        }
-        &.ax-success {
-            .ax-toast-icon {
-                @apply ax-text-success-500;
-            }
-            .ax-toast-progress {
-                @apply ax-bg-success-400;
-            }
-        }
-        &.ax-danger {
-            .ax-toast-icon {
-                @apply ax-text-danger-500;
-            }
-            .ax-toast-progress {
-                @apply ax-bg-danger-400;
-            }
-        }
-        &.ax-warning {
-            .ax-toast-icon {
-                @apply ax-text-warning-500;
-            }
-            .ax-toast-progress {
-                @apply ax-bg-warning-400;
-            }
-        }
-        &.ax-info {
-            .ax-toast-icon {
-                @apply ax-text-info-500;
-            }
-            .ax-toast-progress {
-                @apply ax-bg-info-400;
-            }
-        }
     }
-}
+}

package/src/components/_treeview.scss

@@ -23,7 +23,7 @@
                         &::before {
                             content: "";
                             width: 1px;
-                            @apply ax-absolute ax-bottom-0 ax-bg-light-200 ax-h-full ax-start-2;
+                            @apply ax-absolute ax-bottom-0 ax-bg-light-200 ax-h-full ax-start-2 dark:ax-bg-white/30;
                         }
                         li {
                             &::before {

package/src/components/index.scss

@@ -39,4 +39,5 @@
 @import "./textarea";
 @import "./toast";
 @import "./tooltip";
-@import "./treeview";
+@import "./treeview";
+@import "./decoration";