@acorex/styles 4.0.24 → 5.0.4

package/scss/bases/root.scss

@@ -1,53 +0,0 @@
-@import "../../variables/bases/root";
-
-* {
-    --ax-ring-inset: var(--ax-empty, /*!*/ /*!*/);
-    --ax-ring-offset-width: 0px;
-    --ax-shadow: 0 0 transparent;
-    --ax-ring-offset-color: #fff;
-    --ax-ring-color: rgba(var(--ax-color-primary));
-    --ax-ring-offset-shadow: 0 0 transparent;
-    --ax-ring-shadow: 0 0 transparent;
-    --ax-shadow: 0 0 #0000;
-    box-sizing: border-box;
-    &::before,
-    ::after {
-        box-sizing: border-box;
-        border: 0 solid #cfd5e0;
-    }
-}
-
-:root {
-    --ax-base-size: 7px;
-    --ax-base-ratio: 5;
-    @include colors;
-    @include border-rounded;
-    // @include sizes;
-    // @include spacing;
-    // @include font-size-line-height;
-}
-html,
-body {
-    font-size: calc(var(--ax-base-size) * 2);
-    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans,
-        Helvetica Neue, Icons16, sans-serif;
-}
-::-webkit-scrollbar {
-    width: calc(var(--ax-base-size));
-    max-height: calc(var(--ax-base-size));
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-    background: rgb(var(--ax-color-gray-200));
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-    background: rgb(var(--ax-color-gray-400));
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-    background: rgb(var(--ax-color-gray-500));
-}

package/scss/bases/sizing.scss

@@ -1,43 +0,0 @@
-@import "../../variables/bases/sizing";
-
-// witdh
-@each $key, $value in $w-sizes {
-    .ax-w-#{$key} {
-        width: #{$value};
-    }
-}
-
-// min width
-@each $key, $value in $min-w-sizes {
-    .ax-min-w-#{$key} {
-        min-width: #{$value};
-    }
-}
-
-// max width
-@each $key, $value in $max-w-sizes {
-    .ax-max-w-#{$key} {
-        max-width: #{$value};
-    }
-}
-
-// height
-@each $key, $value in $h-sizes {
-    .ax-h-#{$key} {
-        height: #{$value};
-    }
-}
-
-// min height
-@each $key, $value in $min-h-sizes {
-    .ax-min-h-#{$key} {
-        min-height: #{$value};
-    }
-}
-
-// max height
-@each $key, $value in $max-h-sizes {
-    .ax-max-h-#{$key} {
-        max-height: #{$value};
-    }
-}

package/scss/bases/skeleton.scss

@@ -1,30 +0,0 @@
-$base-color: #ddd;
-$shine-color: #eeeeee;
-.ax-skeleton {
-    position: relative;
-    overflow: hidden;
-    background-color: $base-color;
-    &.ax-skeleton-animate {
-        &::before {
-            content: "";
-            display: block;
-            position: absolute;
-            left: -200px;
-            top: 0;
-            height: 100%;
-            width: 200px;
-            background: linear-gradient(to right, transparent 0%, $shine-color 50%, transparent 100%);
-            animation: load 1s cubic-bezier(0.4, 0, 0.2, 1) infinite;
-        }
-    }
-}
-
-@keyframes load {
-    from {
-        left: -200px;
-    }
-
-    to {
-        left: 100%;
-    }
-}

package/scss/bases/spacing.scss

@@ -1,245 +0,0 @@
-@import "../../variables/bases/spacing";
-
-// Padding
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax-p-#{$key} {
-            padding: #{$value};
-        }
-    }
-}
-
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax-py-#{$key} {
-            padding-top: #{$value};
-            padding-bottom: #{$value};
-        }
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax-px-#{$key} {
-            padding-inline-start: #{$value};
-            padding-inline-end: #{$value};
-        }
-    }
-}
-
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax-pt-#{$key} {
-            padding-top: #{$value};
-        }
-
-        // .ax-pt-sm-#{$key} {
-        //     @include media-sm {
-        //         padding-top:  #{$value};
-        //     }
-        // }
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax-pr-#{$key} {
-            padding-right: #{$value};
-        }
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax-pb-#{$key} {
-            padding-bottom: #{$value};
-        }
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax-pl-#{$key} {
-            padding-left: #{$value};
-        }
-    }
-}
-
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax-ps-#{$key} {
-            padding-inline-start: #{$value};
-        }
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax-pe-#{$key} {
-            padding-inline-end: #{$value};
-        }
-    }
-}
-// Margin
-
-@each $key, $value in $spacing-sizes {
-    .ax-m-#{$key} {
-        margin: #{$value};
-    }
-}
-
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax--m-#{$key} {
-            margin: var(--ax--space-#{$key});
-        }
-    }
-}
-@each $key, $value in $spacing-sizes {
-    .ax-my-#{$key} {
-        margin-top: #{$value};
-        margin-bottom: #{$value};
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax--my-#{$key} {
-            margin-top: -#{$value};
-            margin-bottom: -#{$value};
-        }
-    }
-}
-@each $key, $value in $spacing-sizes {
-    .ax-mx-#{$key} {
-        margin-inline-start: #{$value};
-        margin-inline-end: #{$value};
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax--mx-#{$key} {
-            margin-inline-start: -#{$value};
-            margin-inline-end: -#{$value};
-        }
-    }
-}
-@each $key, $value in $spacing-sizes {
-    .ax-mt-#{$key} {
-        margin-top: #{$value};
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax--mt-#{$key} {
-            margin-top: -#{$value};
-        }
-    }
-}
-
-@each $key, $value in $spacing-sizes {
-    .ax-me-#{$key} {
-        margin-inline-end: $value;
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax--me-#{$key} {
-            margin-inline-end: -$value;
-        }
-    }
-}
-
-@each $key, $value in $spacing-sizes {
-    .ax-mr-#{$key} {
-        margin-right: $value;
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax--mr-#{$key} {
-            margin-right: -$value;
-        }
-    }
-}
-
-@each $key, $value in $spacing-sizes {
-    .ax-mb-#{$key} {
-        margin-bottom: $value;
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax--mb-#{$key} {
-            margin-bottom: -$value;
-        }
-    }
-}
-@each $key, $value in $spacing-sizes {
-    .ax-ms-#{$key} {
-        margin-inline-start: $value;
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax--ms-#{$key} {
-            margin-inline-start: -$value;
-        }
-    }
-}
-
-@each $key, $value in $spacing-sizes {
-    .ax-ml-#{$key} {
-        margin-left: $value;
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax--ml-#{$key} {
-            margin-left: -$value;
-        }
-    }
-}
-
-// Space Between
-
-// Space Y
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax-space-y-#{$key} {
-            --ax-space-y-reverse: 0;
-            margin-top: calc(#{$value} * calc(1 - var(--ax-space-y-reverse)));
-            margin-bottom: calc(#{$value} * var(--ax-space-y-reverse));
-        }
-    }
-}
-.ax-space-y-reverse {
-    --ax-space-y-reverse: 1;
-}
-
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax--space-y-#{$key} {
-            --ax-space-y-reverse: 0;
-            margin-top: calc(-#{$value} * calc(1 - var(--ax-space-y-reverse)));
-            margin-bottom: calc(-#{$value} * var(--ax-space-y-reverse));
-        }
-    }
-}
-
-// Space X
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax-space-x-#{$key} {
-            --ax-space-x-reverse: 0;
-            margin-inline-end: calc(#{$value} * calc(1 - var(--ax-space-x-reverse)));
-            margin-inline-start: calc(#{$value} * var(--ax-space-x-reverse));
-        }
-    }
-}
-@each $key, $value in $spacing-sizes {
-    @if ($key != auto) {
-        .ax--space-x-#{$key} {
-            --ax-space-x-reverse: 0;
-            margin-inline-end: calc(-#{$value} * calc(1 - var(--ax-space-x-reverse)));
-            margin-inline-start: calc(-#{$value} * var(--ax-space-x-reverse));
-        }
-    }
-}
-.ax-space-x-reverse {
-    --ax-space-x-reverse: 1;
-}

package/scss/bases/svg.scss

@@ -1,18 +0,0 @@
-@import "../../variables/bases/svg";
-
-// Fill
-.ax-fill-current {
-    fill: currentColor;
-}
-
-// Stroke
-.ax-stroke-current {
-    stroke: currentColor;
-}
-
-// Stroke Width
-@each $value in $stroke-widths {
-    .ax-stroke-#{$value} {
-        stroke-width: $value;
-    }
-}

package/scss/bases/table.scss

@@ -1,15 +0,0 @@
-@import "../../variables/bases/table";
-
-// Border Collapse
-@each $value in $border-collapse {
-    .ax-border-#{$value} {
-        border-collapse: $value;
-    }
-}
-
-// Table Layout
-@each $value in $table-layout {
-    .ax-table-#{$value} {
-        table-layout: $value;
-    }
-}

package/scss/bases/transform.scss

@@ -1,114 +0,0 @@
-@import "../../variables/bases/transform";
-
-// Transform
-.ax-transform {
-    --ax-translate-x: 0;
-    --ax-translate-y: 0;
-    --ax-rotate: 0;
-    --ax-skew-x: 0;
-    --ax-skew-y: 0;
-    --ax-scale-x: 1;
-    --ax-scale-y: 1;
-    transform: translateX(var(--ax-translate-x)) translateY(var(--ax-translate-y)) rotate(var(--ax-rotate))
-        skewX(var(--ax-skew-x)) skewY(var(--ax-skew-y)) scaleX(var(--ax-scale-x)) scaleY(var(--ax-scale-y));
-}
-.ax-transform-gpu {
-    --ax-translate-x: 0;
-    --ax-translate-y: 0;
-    --ax-rotate: 0;
-    --ax-skew-x: 0;
-    --ax-skew-y: 0;
-    --ax-scale-x: 1;
-    --ax-scale-y: 1;
-    transform: translate3d(var(--ax-translate-x), var(--ax-translate-y), 0) rotate(var(--ax-rotate))
-        skewX(var(--ax-skew-x)) skewY(var(--ax-skew-y)) scaleX(var(--ax-scale-x)) scaleY(var(--ax-scale-y));
-}
-.ax-transform-none {
-    transform: none;
-}
-
-// Transform Origin
-@each $key, $value in $orgins {
-    .ax-origin-#{$key} {
-        transform-origin: $value;
-    }
-}
-
-// Scale
-@each $key, $value in $scales {
-    .ax-scale-#{$key} {
-        --ax-scale-x: #{$value};
-        --ax-scale-y: #{$value};
-    }
-}
-@each $key, $value in $scales {
-    .ax-scale-x-#{$key} {
-        --ax-scale-x: #{$value};
-    }
-}
-@each $key, $value in $scales {
-    .ax-scale-u-#{$key} {
-        --ax-scale-u: #{$value};
-    }
-}
-
-// Rotate
-@each $key, $value in $rotates {
-    .ax-rotate-#{$key} {
-        --ax-rotate: #{$value};
-    }
-}
-@each $key, $value in $rotates {
-    .ax--rotate-#{$key} {
-        --ax-rotate: -#{$value};
-    }
-}
-
-// Translate
-@each $key, $value in $translates {
-    .ax-translate-x-#{$key} {
-        --ax-translate-x: #{$value};
-    }
-}
-@each $key, $value in $translates {
-    .ax--translate-x-#{$key} {
-        --ax-translate-x: -#{$value};
-    }
-}
-@each $key, $value in $translates {
-    .ax-translate-y-#{$key} {
-        --ax-translate-y: #{$value};
-    }
-}
-@each $key, $value in $translates {
-    .ax--translate-y-#{$key} {
-        --ax-translate-y: -#{$value};
-    }
-}
-
-// Skew
-@each $key, $value in $skews {
-    .ax-skew-x-#{$key} {
-        --ax-skew-x: #{$value};
-    }
-}
-@each $key, $value in $skews {
-    @if ($key != 0) {
-        .ax--skew-x-#{$key} {
-            --ax-skew-x: -#{$value};
-        }
-    }
-}
-
-@each $key, $value in $skews {
-    .ax-skew-y-#{$key} {
-        --ax-skew-y: #{$value};
-    }
-}
-@each $key, $value in $skews {
-    @if ($key != 0) {
-        .ax--skew-y-#{$key} {
-            --ax-skew-y: -#{$value};
-        }
-    }
-}

package/scss/bases/transition-and-animation.scss

@@ -1,116 +0,0 @@
-@import "../../variables/bases/transition-and-animation.scss";
-
-.ax-transition-none {
-    transition-property: none;
-}
-.ax-transition-all {
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-}
-.ax-transition {
-    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-}
-.ax-transition-colors {
-    transition-property: background-color, border-color, color, fill, stroke;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-}
-.ax-transition-opacity {
-    transition-property: opacity;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-}
-.ax-transition-shadow {
-    transition-property: box-shadow;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-}
-.ax-transition-transform {
-    transition-property: transform;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-}
-
-// Transition Duration
-@each $key, $value in $durations {
-    .ax-duration-#{$key} {
-        transition-duration: $value;
-    }
-}
-// Transition Timing Function
-@each $key, $value in $timing-function {
-    .ax-#{$key} {
-        transition-timing-function: $value;
-    }
-}
-
-// Transition Delay
-@each $key, $value in $delay {
-    .ax-delay-#{$key} {
-        transition-delay: $value;
-    }
-}
-
-// Animation
-.ax-animate-none {
-    animation: none;
-}
-
-.ax-animate-spin {
-    animation: spin 1s linear infinite;
-
-    @keyframes spin {
-        from {
-            transform: rotate(0deg);
-        }
-        to {
-            transform: rotate(360deg);
-        }
-    }
-}
-.ax-animate-ping {
-    animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-
-    @keyframes ping {
-        0% {
-            transform: scale(1);
-            opacity: 1;
-        }
-        75%,
-        100% {
-            transform: scale(2);
-            opacity: 0;
-        }
-    }
-}
-.ax-animate-pulse {
-    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
-
-    @keyframes pulse {
-        0%,
-        100% {
-            opacity: 1;
-        }
-        50% {
-            opacity: 0.5;
-        }
-    }
-}
-.ax-animate-bounce {
-    animation: bounce 1s infinite;
-
-    @keyframes bounce {
-        0%,
-        100% {
-            transform: translateY(-25%);
-            animationtimingfunction: cubic-bezier(0.8, 0, 1, 1);
-        }
-        50% {
-            transform: translateY(0);
-            animationtimingfunction: cubic-bezier(0, 0, 0.2, 1);
-        }
-    }
-}