@acorex/styles 4.0.24 → 5.0.4

package/scss/bases/accessiblity.scss

@@ -1,38 +0,0 @@
-@import "../../variables/bases/accessiblity";
-
-.ax-sr-only {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border-width: 0;
-}
-
-.ax-not-sr-only {
-    position: static;
-    width: auto;
-    height: auto;
-    padding: 0;
-    margin: 0;
-    overflow: visible;
-    clip: auto;
-    white-space: normal;
-}
-
-.ax-overlay-pane {
-    @extend .ax-border,
-        .ax-border-color,
-        .ax-border-solid,
-        .ax-border-opacity-50,
-        .ax-bg-white,
-        .ax-rounded,
-        .ax-shadow-lg;
-}
-
-.ax-error-msg {
-    color: rgb(var(--ax-color-danger));
-}

package/scss/bases/background.scss

@@ -1,76 +0,0 @@
-@import "../../variables/bases/background";
-@import "../../variables/bases/color";
-
-// Background Attachment
-@each $key, $value in $background-attachments {
-    .ax-bg-#{$key} {
-        background-attachment: $value;
-    }
-}
-
-// Background Clip
-@each $key, $value in $background-clips {
-    .ax-bg-clip-#{$key} {
-        background-clip: $value;
-    }
-}
-// Background Color
-.ax-bg-transparent {
-    background-color: transparent;
-}
-.ax-bg-current {
-    background-color: currentColor;
-}
-
-@each $name, $color in $theme-colors {
-    @if (type-of($color) == "map") {
-        @each $subname, $variant in $color {
-            @if ($subname == "") {
-                .ax-bg-#{$name} {
-                    --ax-bg-opacity: 1;
-                    background-color: rgba(var(--ax-color-#{$name}), var(--ax-bg-opacity));
-                }
-            } @else {
-                @if ($subname != "fore") {
-                    .ax-bg-#{$name}-#{$subname} {
-                        --ax-bg-opacity: 1;
-                        background-color: rgba(var(--ax-color-#{$name}-#{$subname}), var(--ax-bg-opacity));
-                    }
-                }
-            }
-        }
-    } @else {
-        @if ($name != "border" and $name != "placeholder" and $name != "disabled-border") {
-            .ax-bg-#{$name} {
-                --ax-bg-opacity: 1;
-                background-color: rgba(var(--ax-color-#{$name}), var(--ax-bg-opacity));
-            }
-        }
-    }
-}
-// Background Opacity
-@each $key, $value in $background-opacities {
-    .ax-bg-opacity-#{$key} {
-        --ax-bg-opacity: #{$value};
-    }
-}
-
-// Background Position
-@each $key, $value in $background-positions {
-    .ax-bg-#{$key} {
-        background-position: $value;
-    }
-}
-// Background Repeat
-@each $key, $value in $background-repeats {
-    .ax-bg-#{$key} {
-        background-repeat: $value;
-    }
-}
-
-// Background Size
-@each $key, $value in $background-sizes {
-    .ax-bg-#{$key} {
-        background-size: $value;
-    }
-}

package/scss/bases/border.scss

@@ -1,453 +0,0 @@
-@import "../../variables/bases/border";
-@import "../../variables/bases/color";
-
-// Border Radius
-@each $key, $value in $border-rounded {
-    @if ($key == "rounded") {
-        .ax-rounded {
-            border-radius: var(--ax-border-rounded);
-        }
-    } @else {
-        .ax-rounded-#{$key} {
-            border-radius: var(--ax-border-rounded-#{$key});
-        }
-    }
-}
-@each $key, $value in $border-rounded {
-    @if ($key == "rounded") {
-        .ax-rounded-t {
-            border-start-start-radius: var(--ax-border-rounded);
-            border-start-end-radius: var(--ax-border-rounded);
-        }
-    } @else {
-        .ax-rounded-t-#{$key} {
-            border-start-start-radius: var(--ax-border-rounded-#{$key});
-            border-start-end-radius: var(--ax-border-rounded-#{$key});
-        }
-    }
-}
-@each $key, $value in $border-rounded {
-    @if ($key != "rounded") {
-        .ax-rounded-r {
-            border-start-end-radius: var(--ax-border-rounded);
-            border-end-end-radius: var(--ax-border-rounded);
-        }
-    } @else {
-        .ax-rounded-r-#{$key} {
-            border-start-end-radius: var(--ax-border-rounded-#{$key});
-            border-end-end-radius: var(--ax-border-rounded-#{$key});
-        }
-    }
-}
-
-@each $key, $value in $border-rounded {
-    @if ($key != "rounded") {
-        .ax-rounded-b {
-            border-end-start-radius: var(--ax-border-rounded);
-            border-end-end-radius: var(--ax-border-rounded);
-        }
-    } @else {
-        .ax-rounded-b-#{$key} {
-            border-end-start-radius: var(--ax-border-rounded-#{$key});
-            border-end-end-radius: var(--ax-border-rounded-#{$key});
-        }
-    }
-}
-
-@each $key, $value in $border-rounded {
-    @if ($key == "rounded") {
-        .ax-rounded-l {
-            border-start-start-radius: var(--ax-border-rounded);
-            border-end-start-radius: var(--ax-border-rounded);
-        }
-    } @else {
-        .ax-rounded-l-#{$key} {
-            border-start-start-radius: var(--ax-border-rounded-#{$key});
-            border-end-start-radius: var(--ax-border-rounded-#{$key});
-        }
-    }
-}
-@each $key, $value in $border-rounded {
-    @if ($key == "rounded") {
-        .ax-rounded-tl {
-            border-start-start-radius: var(--ax-border-rounded);
-        }
-    } @else {
-        .ax-rounded-tl-#{$key} {
-            border-start-start-radius: var(--ax-border-rounded-#{$key});
-        }
-    }
-    @if ($key == "rounded") {
-        .ax-rounded-tr {
-            border-start-end-radius: var(--ax-border-rounded);
-        }
-    } @else {
-        .ax-rounded-tr-#{$key} {
-            border-start-end-radius: var(--ax-border-rounded-#{$key});
-        }
-    }
-    @if ($key == "rounded") {
-        .ax-rounded-bl {
-            border-end-start-radius: var(--ax-border-rounded);
-        }
-    } @else {
-        .ax-rounded-bl-#{$key} {
-            border-end-start-radius: var(--ax-border-rounded-#{$key});
-        }
-    }
-    @if ($key == "rounded") {
-        .ax-rounded-br {
-            border-end-end-radius: var(--ax-border-rounded);
-        }
-    } @else {
-        .ax-rounded-br-#{$key} {
-            border-end-end-radius: var(--ax-border-rounded-#{$key});
-        }
-    }
-}
-
-// Border Width
-@each $key, $value in $border-widths {
-    @if ($key != "border") {
-        .ax-border-#{$key} {
-            border-width: #{$value} !important;
-        }
-    } @else {
-        .ax-#{$key} {
-            border-width: #{$value} !important;
-        }
-    }
-}
-@each $key, $value in $border-widths {
-    @if ($key != "border") {
-        .ax-border-t-#{$key} {
-            border-block-start-width: #{$value} !important;
-            border-inline-end-width: 0px;
-            border-block-end-width: 0px;
-            border-inline-start-width: 0px;
-        }
-    } @else {
-        .ax-#{$key}-t {
-            border-block-start-width: #{$value} !important;
-
-            border-inline-end-width: 0px;
-            border-block-end-width: 0px;
-            border-inline-start-width: 0px;
-        }
-    }
-}
-@each $key, $value in $border-widths {
-    @if ($key != "border") {
-        .ax-border-r-#{$key} {
-            border-inline-end-width: #{$value} !important;
-            border-block-start-width: 0px;
-
-            border-block-end-width: 0px;
-            border-inline-start-width: 0px;
-        }
-    } @else {
-        .ax-#{$key}-r {
-            border-inline-end-width: #{$value} !important;
-            border-block-start-width: 0px;
-
-            border-block-end-width: 0px;
-            border-inline-start-width: 0px;
-        }
-    }
-}
-@each $key, $value in $border-widths {
-    @if ($key != "border") {
-        .ax-border-b-#{$key} {
-            border-block-end-width: #{$value} !important;
-            border-block-start-width: 0px;
-            border-inline-end-width: 0px;
-            border-inline-start-width: 0px;
-        }
-    } @else {
-        .ax-#{$key}-b {
-            border-block-end-width: #{$value} !important;
-            border-block-start-width: 0px;
-            border-inline-end-width: 0px;
-            border-inline-start-width: 0px;
-        }
-    }
-}
-@each $key, $value in $border-widths {
-    @if ($key != "border") {
-        .ax-border-l-#{$key} {
-            border-inline-start-width: #{$value} !important;
-            border-block-start-width: 0px;
-            border-inline-end-width: 0px;
-            border-block-end-width: 0px;
-        }
-    } @else {
-        .ax-#{$key}-l {
-            border-inline-start-width: #{$value} !important;
-            border-block-start-width: 0px;
-            border-inline-end-width: 0px;
-            border-block-end-width: 0px;
-        }
-    }
-}
-// Border Color
-.ax-border-color-transparent {
-    border-color: transparent !important;
-}
-.ax-border-current {
-    border-color: currentColor !important;
-}
-@each $name, $color in $theme-colors {
-    @if (type-of($color) == "map") {
-        @each $subname, $variant in $color {
-            @if ($name == "") {
-                .ax-border-color {
-                    --ax-border-opacity: 1;
-                    border-color: rgba(var(--ax-color-#{$name}), var(--ax-border-opacity)) !important;
-                }
-            } @else if ($subname == "") {
-                .ax-border-color-#{$name} {
-                    --ax-border-opacity: 1;
-                    border-color: rgba(var(--ax-color-#{$name}), var(--ax-border-opacity)) !important;
-                }
-            } @else {
-                @if ($subname != "fore") {
-                    .ax-border-color-#{$name}-#{$subname} {
-                        --ax-border-opacity: 1;
-                        border-color: rgba(var(--ax-color-#{$name}-#{$subname}), var(--ax-border-opacity)) !important;
-                    }
-                }
-            }
-        }
-    } @else {
-        @if ($name == "border") {
-            .ax-border-color {
-                --ax-border-opacity: 1;
-                border-color: rgba(#{$color}, var(--ax-border-opacity)) !important;
-            }
-        } @else {
-            .ax-border-color-#{$name} {
-                --ax-border-opacity: 1;
-                border-color: rgba(#{$color}, var(--ax-border-opacity)) !important;
-            }
-        }
-    }
-}
-// Border Opacity
-@each $key, $value in $border-opcities {
-    .ax-border-opacity-#{$key} {
-        --ax-border-opacity: #{$value};
-    }
-}
-// Border Style
-@each $key, $value in $border-styles {
-    .ax-border-#{$key} {
-        border-style: #{$value} !important;
-    }
-}
-
-// Divide Width
-.ax-divide-y {
-    & > *:not([hidden]) ~ *:not([hidden]) {
-        --ax-divide-y-reverse: 0;
-        border-block-start-width: calc(1px * calc(1 - var(--ax-divide-y-reverse)));
-        border-block-end-width: calc(1px * var(--ax-divide-y-reverse));
-    }
-}
-.ax-divide-x {
-    & > *:not([hidden]) ~ *:not([hidden]) {
-        --ax-divide-x-reverse: 0;
-        border-inline-end-width: calc(1px * var(--ax-divide-x-reverse));
-        border-inline-start-width: calc(1px * calc(1 - var(--ax-divide-x-reverse)));
-    }
-}
-.ax-divide-y-reverse {
-    & > *:not([hidden]) ~ *:not([hidden]) {
-        --ax-divide-y-reverse: 1;
-    }
-}
-.ax-divide-x-reverse {
-    & > *:not([hidden]) ~ *:not([hidden]) {
-        --ax-divide-x-reverse: 1;
-    }
-}
-@each $key, $value in $divide-width {
-    .ax-divide-y-#{$key} {
-        & > *:not([hidden]) ~ *:not([hidden]) {
-            --ax-divide-y-reverse: 0;
-            border-block-start-width: calc(#{$value} * calc(1 - var(--ax-divide-y-reverse))) !important;
-            border-block-end-width: calc(#{$value} * var(--ax-divide-y-reverse)) !important;
-        }
-    }
-}
-@each $key, $value in $divide-width {
-    .ax-divide-x-#{$key} {
-        & > *:not([hidden]) ~ *:not([hidden]) {
-            --ax-divide-x-reverse: 0;
-            border-inline-end-width: calc(#{$value} * var(--ax-divide-x-reverse)) !important;
-            border-inline-start-width: calc(#{$value} * calc(1 - var(--ax-divide-x-reverse))) !important;
-        }
-    }
-}
-
-// Divide Color
-.ax-divide-color-transparent {
-    & > *:not([hidden]) ~ *:not([hidden]) {
-        border-color: transparent;
-    }
-}
-.ax-divide-current {
-    & > *:not([hidden]) ~ *:not([hidden]) {
-        border-color: currentColor;
-    }
-}
-@each $name, $color in $theme-colors {
-    @if (type-of($color) == "map") {
-        @each $subname, $variant in $color {
-            @if ($name == "") {
-                .ax-divide-color {
-                    & > *:not([hidden]) ~ *:not([hidden]) {
-                        --ax-divide-opacity: 1;
-                        border-color: rgba(var(--ax-color-#{$name}), var(--ax-divide-opacity)) !important;
-                    }
-                }
-            } @else if ($subname == "") {
-                .ax-divide-color-#{$name} {
-                    & > *:not([hidden]) ~ *:not([hidden]) {
-                        --ax-divide-opacity: 1;
-                        border-color: rgba(var(--ax-color-#{$name}), var(--ax-divide-opacity)) !important;
-                    }
-                }
-            } @else {
-                @if ($subname != "fore") {
-                    .ax-divide-color-#{$name}-#{$subname} {
-                        & > *:not([hidden]) ~ *:not([hidden]) {
-                            --ax-divide-opacity: 1;
-                            border-color: rgba(
-                                var(--ax-color-#{$name}-#{$subname}),
-                                var(--ax-divide-opacity)
-                            ) !important;
-                        }
-                    }
-                }
-            }
-        }
-    } @else {
-        @if ($name == "border") {
-            .ax-divide-color {
-                & > *:not([hidden]) ~ *:not([hidden]) {
-                    --ax-divide-opacity: 1;
-                    border-color: rgba(var(--ax-color-#{$name}), var(--ax-divide-opacity)) !important;
-                }
-            }
-        } @else {
-            .ax-divide-color-#{$name} {
-                & > *:not([hidden]) ~ *:not([hidden]) {
-                    --ax-divide-opacity: 1;
-                    border-color: rgba(var(--ax-color-#{$name}), var(--ax-divide-opacity)) !important;
-                }
-            }
-        }
-    }
-}
-
-// Divide Opacity
-@each $key, $value in $divide-opcities {
-    .ax-divide-opacity-#{$key} {
-        & > *:not([hidden]) ~ *:not([hidden]) {
-            --ax-divide-opacity: #{$value};
-        }
-    }
-}
-
-// Divide Style
-@each $key, $value in $divide-styles {
-    .ax-divide-#{$key} {
-        & > *:not([hidden]) ~ *:not([hidden]) {
-            border-style: #{$value} !important;
-        }
-    }
-}
-
-// Ring Width
-.ax-ring-inset {
-    --ax-ring-inset: inset;
-}
-@each $key, $value in $ring-width {
-    .ax-#{$key} {
-        --ax-ring-offset-shadow: var(--ax-ring-inset) 0 0 0 var(--ax-ring-offset-width) var(--ax-ring-offset-color);
-        --ax-ring-shadow: var(--ax-ring-inset) 0 0 0 calc(2px + var(--ax-ring-offset-width)) var(--ax-ring-color);
-        box-shadow: var(--ax-ring-offset-shadow), var(--ax-ring-shadow), var(--ax-shadow, 0 0 transparent);
-        // box-shadow: var(--ax-ring-inset) 0 0 0 calc(1px + var(--ax-ring-offset-width)) var(--ax-ring-color);
-    }
-}
-// Ring Offset Width
-@each $key, $value in $ring-offsets {
-    .ax-ring-offset-#{$key} {
-        --ax-ring-offset-width: #{$value};
-        box-shadow: var(--ax-ring-offset-shadow), var(--ax-ring-shadow), var(--ax-shadow, 0 0 transparent);
-    }
-}
-// Ring Color
-.ax-ring-transparent {
-    color: transparent;
-}
-.ax-ring-current {
-    color: currentColor;
-}
-@each $name, $color in $theme-colors {
-    @if (type-of($color) == "map") {
-        @each $subname, $variant in $color {
-            @if ($subname != "") {
-                .ax-ring-color-#{$name}-#{$subname} {
-                    --ax-ring-opacity: 1;
-                    --ax-ring-color: rgba(var(--ax-color-#{$name}-#{$subname}), var(--ax-ring-opacity));
-                }
-            } @else {
-                .ax-ring-color-#{$name} {
-                    --ax-ring-opacity: 1;
-                    --ax-ring-color: rgba(var(--ax-color-#{$name}), var(--ax-ring-opacity));
-                }
-            }
-        }
-    } @else {
-        .ax-ring-color-#{$name} {
-            --ax-ring-opacity: 1;
-            --ax-ring-color: rgba(var(--ax-color-#{$name}), var(--ax-ring-opacity));
-        }
-    }
-}
-@each $key, $value in $ring-opcities {
-    .ax-ring-opacity-#{$key} {
-        --ax-ring-opacity: #{$value};
-    }
-}
-
-// Ring Offset Color
-.ax-ring-offset-transparent {
-    color: transparent;
-}
-.ax-ring-offset-current {
-    color: currentColor;
-}
-@each $name, $color in $theme-colors {
-    @if (type-of($color) == "map") {
-        @each $subname, $variant in $color {
-            @if ($subname != "") {
-                .ax-ring-offset-color-#{$name}-#{$subname} {
-                    --ax-ring-offset-color: rgba(var(--ax-color-#{$name}));
-                    box-shadow: 0 0 0 var(--ax-ring-offset-width) var(--ax-ring-offset-color), var(--ax-ring-shadow) !important;
-                }
-            } @else {
-                .ax-ring-offset-color-#{$name} {
-                    --ax-ring-offset-color: rgba(var(--ax-color-#{$name}));
-                    box-shadow: 0 0 0 var(--ax-ring-offset-width) var(--ax-ring-offset-color), var(--ax-ring-shadow) !important;
-                }
-            }
-        }
-    } @else {
-        .ax-ring-offset-color-#{$name} {
-            --ax-ring-offset-color: rgba(var(--ax-color-#{$name}));
-            box-shadow: 0 0 0 var(--ax-ring-offset-width) var(--ax-ring-offset-color), var(--ax-ring-shadow) !important;
-        }
-    }
-}

package/scss/bases/effects.scss

@@ -1,56 +0,0 @@
-@import "../../variables/bases/effects";
-
-// box shadow
-.ax-shadow-sm {
-    --ax-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
-}
-.ax-shadow {
-    --ax-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
-}
-.ax-shadow-md {
-    --ax-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-    box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
-}
-.ax-shadow-lg {
-    --ax-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-    box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
-}
-.ax-shadow-xl {
-    --ax-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-    box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
-}
-.ax-shadow-2xl {
-    --ax-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
-    box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
-}
-.ax-shadow-inner {
-    --ax-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-    box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
-}
-.ax-shadow-none {
-    --ax-shadow: 0 0 #0000;
-    box-shadow: var(--ax-ring-offset-shadow, 0 0 #0000), var(--ax-ring-shadow, 0 0 #0000), var(--ax-shadow);
-}
-
-// opacity
-@each $key, $value in $opcities {
-    .ax-opacity-#{$key} {
-        opacity: #{$value};
-    }
-}
-
-// mix blend mode
-@each $key in $mix-blend {
-    .ax-mix-blend-#{$key} {
-        mix-blend-mode: #{$key};
-    }
-}
-
-// background blend mode
-@each $key in $mix-blend {
-    .ax-bg-blend-#{$key} {
-        mix-blend-mode: #{$key};
-    }
-}