@acorex/styles 5.9.0 → 6.0.2

package/src/components/_picker.scss

@@ -1,179 +0,0 @@
-// @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/_side-menu.scss

@@ -1,42 +0,0 @@
-@layer components {
-    .ax-side-menu {
-        @apply ax-list-none ax-p-0 ax-m-0;
-        .ax-side-menu-item {
-            @apply ax-flex ax-items-center ax-p-2 ax-cursor-pointer;
-            &:hover {
-                @apply ax-bg-light-100;
-            }
-            &:focus {
-                @apply ax-outline-none ax-ring-2 ax-ring-primary-500 ax-ring-opacity-100 ax-border-transparent;
-            }
-            .ax-side-menu-icon {
-                @apply ax-pr-2 ax-h-full ax-flex ax-items-center;
-            }
-            .ax-side-menu-text {
-                @apply ax-flex-1;
-            }
-            .ax-side-menu-badge {
-            }
-        }
-        &.ax-alternate {
-            .ax-side-menu-item {
-                &:nth-child(odd) {
-                    @apply ax-bg-light-100;
-                }
-                &:hover {
-                    @apply ax-bg-light-300;
-                }
-            }
-        }
-        &.ax-divided {
-            .ax-side-menu-item {
-                &:not(:last-child) {
-                    @apply ax-border-b ax-border ax-border-solid;
-                }
-                &:hover {
-                    @apply ax-bg-light-100;
-                }
-            }
-        }
-    }
-}

package/src/components/_switch copy.scss

@@ -1,185 +0,0 @@
-@layer components {
-    .ax-switch {
-        label {
-            width: calc((var(--ax-base-size) * var(--ax-base-ratio) - 5px));
-            height: calc(var(--ax-base-size) * var(--ax-base-ratio) / 2);
-            @apply ax-relative ax-inline-block;
-            input {
-                @apply ax-w-0 ax-h-0 ax-opacity-0;
-            }
-
-            .ax-switch-slider {
-                @apply ax-absolute ax-cursor-pointer ax-left-0 ax-right-0 ax-bottom-0 ax-top-0 ax-bg-light-300 ax-rounded-full;
-                @include control-states("editor");
-                -webkit-transition: 0.4s;
-                transition: 0.4s;
-                &::before {
-                    @apply ax-absolute ax-bg-white ax-rounded-full;
-                    content: "";
-                    width: 35%;
-                    padding-bottom: 35%;
-                    left: 7%;
-                    top: 50%;
-                    transform: translate(0, -50%);
-                    -webkit-transition: 0.4s;
-                    transition: 0.4s;
-                }
-            }
-
-            input:checked + .ax-switch-slider {
-                @apply ax-bg-primary-500;
-            }
-
-            input:focus + .ax-switch-slider {
-                @apply ax-ring-2 ax-ring-primary-500 ax-ring-offset-2;
-            }
-
-            input:checked + .ax-switch-slider:before {
-                -webkit-transform: translate(140%, -50%);
-                -ms-transform: translate(140%, -50%);
-                transform: translate(140%, -50%);
-            }
-            
-        }
-        &.ax-success {
-            ax-loading {
-                @apply ax-stroke-success-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-success));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-success-500;
-            }
-        }
-        &.ax-secondary {
-            ax-loading {
-                @apply ax-stroke-secondary-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-secondary));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-secondary-500;
-            }
-        }
-        &.ax-danger {
-            ax-loading {
-                @apply ax-stroke-danger-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-danger));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-danger-500;
-            }
-        }
-        &.ax-warning {
-            ax-loading {
-                @apply ax-stroke-warning-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-warning));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-warning-500;
-            }
-        }
-        &.ax-info {
-            ax-loading {
-                @apply ax-stroke-info-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-info));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-info-500;
-            }
-        }
-        &.ax-light {
-            ax-loading {
-                @apply ax-stroke-light-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-light));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-light-500;
-            }
-        }
-        &.ax-dark {
-            ax-loading {
-                @apply ax-stroke-dark-500;
-            }
-            > input {
-                &:checked {
-                    & + .ax-switch-slider {
-                        background-color: rgb(var(--ax-color-dark));
-                    }
-                }
-            }
-            input:focus ~ .ax-switch-slider {
-                @apply ax-ring-dark-500;
-            }
-        }
-        &.ax-state-loading {
-            label {
-                .ax-switch-slider {
-                    &::before {
-                        background-image: url("../images/fill-loading.svg");
-                        background-color: transparent;
-                        background-size: cover;
-                        @apply ax-absolute;
-                        content: "";
-                        width: 35%;
-                        padding-bottom: 35%;
-                    transform: translate(0, -50%);
-
-                        left: 7%;
-                        top: 18%;
-                        animation: rotation 0.6s infinite linear;
-
-                    }
-                    @keyframes rotation {
-                        from {
-                          transform: rotate(0deg);
-                        }
-                        to {
-                          transform: rotate(359deg);
-                        }
-                      }
-                }
-            }
-        }
-        &.ax-state-disabled {
-            @apply ax-opacity-60;
-        }
-        &.ax-state-readonly {
-            @apply ax-opacity-60;
-        }
-    }
-}