@acorex/styles 4.0.24 → 4.1.1

package/scss/bases/filter.scss

@@ -1,184 +0,0 @@
-@import "../../variables/bases/filter";
-
-// filter
-.ax-filter {
-    filter: var(--ax-blur) var(--ax-brightness) var(--ax-contrast) var(--ax-grayscale) var(--ax-hue-rotate)
-        var(--ax-invert) var(--ax-saturate) var(--ax-sepia) var(--ax-drop-shadow);
-}
-.ax-filter-none {
-    filter: none;
-}
-
-// blur
-@each $key, $value in $blur {
-    @if ($key == "blur") {
-        .ax-blur {
-            --ax-blur: blur(#{$value});
-        }
-    } @else {
-        .ax-blur-#{$key} {
-            --ax-blur: blur(#{$value});
-        }
-    }
-}
-
-// brightness
-@each $key, $value in $brightness {
-    .ax-brightness-#{$key} {
-        --ax-brightness: brightness(#{$value});
-    }
-}
-// contrast
-@each $key, $value in $contrast {
-    .ax-contrast-#{$key} {
-        --ax-contrast: contrast(#{$value});
-    }
-}
-
-// drop shadow
-.ax-drop-shadow-sm {
-    --ax-drop-shadow: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
-}
-.ax-drop-shadow {
-    --ax-drop-shadow: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
-}
-.ax-drop-shadow-md {
-    --ax-drop-shadow: drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
-}
-.ax-drop-shadow-lg {
-    --ax-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
-}
-.ax-drop-shadow-xl {
-    --ax-drop-shadow: drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
-}
-.ax-drop-shadow-2xl {
-    --ax-drop-shadow: drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
-}
-.ax-drop-shadow-none {
-    --ax-drop-shadow: drop-shadow(0 0 #0000);
-}
-
-// grayscale
-.grayscale-0 {
-    --ax-grayscale: grayscale(0);
-}
-.grayscale-1 {
-    --ax-grayscale: grayscale(1);
-}
-
-// hue-rotate
-@each $key, $value in $hue-rotate {
-    .ax-hue-rotate-#{$key} {
-        --ax-hue-rotate: hue-rotate(#{$key});
-    }
-    .ax--hue-rotate-#{$key} {
-        --ax-hue-rotate: hue-rotate(-#{$key});
-    }
-}
-
-// invert
-.ax-invert-0 {
-    --ax-invert: invert(0);
-}
-.ax-invert {
-    --ax-invert: invert(1);
-}
-
-// saturate
-@each $key, $value in $saturate {
-    .ax-saturate-#{$key} {
-        --ax-saturate: saturate(#{$value});
-    }
-}
-
-// sepia
-.ax-sepia-0 {
-    --ax-sepia: sepia(0);
-}
-.ax-sepia {
-    --ax-sepia: sepia(1);
-}
-
-// backdrop-filter
-.ax-backdrop-filter {
-    backdrop-filter: var(--ax-backdrop-blur) var(--ax-backdrop-brightness) var(--ax-backdrop-contrast)
-        var(--ax-backdrop-grayscale) var(--ax-backdrop-hue-rotate) var(--ax-backdrop-invert) var(--ax-backdrop-opacity)
-        var(--ax-backdrop-saturate) var(--ax-backdrop-sepia);
-}
-.ax-backdrop-none {
-    backdrop-filter: none;
-}
-
-// backdrop-blur
-@each $key, $value in $blur {
-    @if ($key == "blur") {
-        .ax-backdrop-blur {
-            --ax-backdrop-blur: blur(#{$value});
-        }
-    } @else {
-        .ax-backdrop-blur-#{$key} {
-            --ax-backdrop-blur: blur(#{$value});
-        }
-    }
-}
-
-// backdrop-brightness
-@each $key, $value in $brightness {
-    .ax-backdrop-brightness-#{$key} {
-        --ax-backdrop-brightness: brightness(#{$value});
-    }
-}
-
-@each $key, $value in $contrast {
-    .ax-backdrop-contrast-#{$key} {
-        --ax-backdrop-contrast: contrast(#{$value});
-    }
-}
-
-//backdrop-grayscale
-.ax-backdrop-grayscale-0 {
-    --ax-backdrop-grayscale: grayscale(0);
-}
-.ax-backdrop-grayscale {
-    --ax-backdrop-grayscale: grayscale(1);
-}
-
-// backdrop-hue-rotate
-@each $key, $value in $hue-rotate {
-    .ax-backdrop-hue-rotate-#{$key} {
-        --ax-backdrop-hue-rotate: hue-rotate(#{$key});
-    }
-    .ax--backdrop-hue-rotate-#{$key} {
-        --ax-backdrop-hue-rotate: hue-rotate(-#{$key});
-    }
-}
-
-// backdrop-invert
-.backdrop-invert-0 {
-    --ax-backdrop-invert: invert(0);
-}
-.backdrop-invert {
-    --ax-backdrop-invert: invert(1);
-}
-
-// backdrop-opacity
-@each $key, $value in $opcities {
-    .ax-backdrop-opacity-#{$key} {
-        --ax-backdrop-opacity: opacity(#{$key});
-    }
-}
-
-// saturate
-@each $key, $value in $saturate {
-    .ax-backdrop-saturate-#{$key} {
-        --ax-backdrop-saturate: saturate(#{$value});
-    }
-}
-
-// backdrop-sepia
-.ax-backdrop-sepia-0 {
-    --ax-backdrop-sepia: sepia(0);
-}
-.ax-backdrop-sepia {
-    --ax-backdrop-sepia: sepia(1);
-}

package/scss/bases/flexbox-and-grid.scss

@@ -1,254 +0,0 @@
-@import "../../variables/bases/flexbox-and-grid";
-// Flex Direction
-@each $key, $value in $flex-directions {
-    .ax-flex-#{$key} {
-        flex-direction: $value;
-    }
-}
-
-// Flex Wrap
-@each $value in $flex-wraps {
-    .ax-flex-#{$value} {
-        flex-wrap: $value;
-    }
-}
-// Flex
-@each $key, $value in $flexs {
-    .ax-flex-#{$key} {
-        flex: $value;
-    }
-}
-// Flex Grow
-@each $key, $value in $flex-grows {
-    .ax-flex-#{$key} {
-        flex-grow: $value;
-    }
-}
-// Flex Shrink
-@each $key, $value in $flex-shrinks {
-    .ax-flex-#{$key} {
-        flex-shrink: $value;
-    }
-}
-// Order
-@each $key, $value in $orders {
-    .ax-order-#{$key} {
-        order: $value;
-    }
-}
-
-// Grid Template Columns
-@each $value in $cols {
-    @if ($value != none) {
-        .ax-grid-cols-#{$value} {
-            grid-template-columns: repeat($value, minmax(0, 1fr));
-        }
-    } @else {
-        .ax-grid-cols-#{$value} {
-            grid-template-columns: $value;
-        }
-    }
-}
-// Grid Column Start / End
-@each $value in $cols-start-end {
-    @if ($value == auto) {
-        .ax-col-#{$value} {
-            grid-column: $value;
-        }
-    }
-    @if ($value == full) {
-        .ax-col-span-#{$value} {
-            grid-column: 1 / -1;
-        }
-    }
-    @if ($value != auto and $value != full) {
-        .ax-col-span-#{$value} {
-            grid-column: span $value / span $value;
-        }
-    }
-}
-// Column Start
-@each $value in $cols-start-end {
-    @if ($value == auto) {
-        .ax-col-start-#{$value} {
-            grid-column-start: $value;
-        }
-    }
-    @if ($value != auto and $value != full) {
-        .ax-col-start-#{$value} {
-            grid-column-start: $value;
-        }
-    }
-}
-// Column End
-@each $value in $cols-start-end {
-    @if ($value == auto) {
-        .ax-col-start-#{$value} {
-            grid-column-end: $value;
-        }
-    }
-    @if ($value != auto and $value != full) {
-        .ax-col-start-#{$value} {
-            grid-column-end: $value;
-        }
-    }
-}
-
-// Grid Template Rows
-@each $value in $rows {
-    @if ($value != none) {
-        .ax-grid-rows-#{$value} {
-            grid-template-rows: repeat($value, minmax(0, 1fr));
-        }
-    } @else {
-        .ax-grid-rows-#{$value} {
-            grid-template-rows: $value;
-        }
-    }
-}
-
-// Grid Row Start / End
-@each $value in $rows-start-end {
-    @if ($value == auto) {
-        .ax-row-#{$value} {
-            grid-row: $value;
-        }
-    }
-    @if ($value == full) {
-        .ax-row-span-#{$value} {
-            grid-row: 1 / -1;
-        }
-    }
-    @if ($value != auto and $value != full and $value != 7) {
-        .ax-row-span-#{$value} {
-            grid-row: span $value / span $value;
-        }
-    }
-}
-// Row Start
-@each $value in $rows-start-end {
-    @if ($value == auto) {
-        .ax-row-start-#{$value} {
-            grid-row-start: $value;
-        }
-    }
-    @if ($value != auto and $value != full) {
-        .ax-row-start-#{$value} {
-            grid-row-start: $value;
-        }
-    }
-}
-// Row End
-@each $value in $rows-start-end {
-    @if ($value == auto) {
-        .ax-row-start-#{$value} {
-            grid-row-end: $value;
-        }
-    }
-    @if ($value != auto and $value != full) {
-        .ax-row-start-#{$value} {
-            grid-row-end: $value;
-        }
-    }
-}
-
-// Grid Auto Flow
-@each $key, $value in $flow {
-    .ax-grid-flow-#{$key} {
-        grid-auto-flow: $value;
-    }
-}
-
-// Grid Auto Columns
-@each $key, $value in $auto-columns-rows {
-    .ax-auto-cols-#{$key} {
-        grid-auto-columns: $value;
-    }
-}
-
-// Grid Auto Rows
-@each $key, $value in $auto-columns-rows {
-    .ax-auto-rows-#{$key} {
-        grid-auto-rows: $value;
-    }
-}
-
-// Gap
-@each $key, $value in $gap {
-    .ax-gap-#{$key} {
-        gap: $value;
-    }
-}
-@each $key, $value in $gap {
-    .ax-gap-x-#{$key} {
-        column-gap: $value;
-    }
-}
-@each $key, $value in $gap {
-    .ax-gap-y-#{$key} {
-        row-gap: $value;
-    }
-}
-
-// Justify Content
-@each $key, $value in $justify-contents {
-    .ax-justify-#{$key} {
-        justify-content: $value;
-    }
-}
-
-// Justify Items
-@each $value in $justify-items {
-    .ax-justify-items-#{$value} {
-        justify-items: $value;
-    }
-}
-
-// Justify Self
-@each $value in $justify-selfs {
-    .ax-justify-self-#{$value} {
-        justify-self: $value;
-    }
-}
-
-// Align Content
-@each $key, $value in $align-contents {
-    .ax-content-#{$key} {
-        align-content: $value;
-    }
-}
-
-// Align Items
-@each $key, $value in $align-items {
-    .ax-items-#{$key} {
-        align-items: $value;
-    }
-}
-
-// Align Self
-@each $value in $align-selfs {
-    .ax-self-#{$value} {
-        align-self: $value;
-    }
-}
-
-// Place Content
-@each $key, $value in $place-contents {
-    .ax-place-content-#{$value} {
-        place-content: $value;
-    }
-}
-
-// Place Items
-@each $value in $place-items {
-    .ax-place-item-#{$value} {
-        place-items: $value;
-    }
-}
-
-// Place Self
-@each $value in $place-selfs {
-    .ax-place-self-#{$value} {
-        place-self: $value;
-    }
-}

package/scss/bases/interactivity.scss

@@ -1,42 +0,0 @@
-@import "../../variables/bases/interactivity";
-
-// Appearance
-.ax-appearance-none {
-    appearance: none;
-}
-
-// Cursor
-@each $key, $value in $cursors {
-    .ax-cursor-#{$key} {
-        cursor: $value;
-    }
-}
-
-// Outline
-@each $key, $value in $outlines {
-    .ax-outline-#{$key} {
-        outline: 2px solid $value;
-        outline-offset: 2px;
-    }
-}
-
-// Pointer Events
-@each $value in $pointer-events {
-    .ax-pointer-events-#{$value} {
-        pointer-events: $value;
-    }
-}
-
-// Resize
-@each $key, $value in $resizes {
-    .ax-#{$key} {
-        resize: $value;
-    }
-}
-
-// User Select
-@each $key, $value in $selects {
-    .ax-select-#{$key} {
-        user-select: $value;
-    }
-}

package/scss/bases/layout.scss

@@ -1,207 +0,0 @@
-@import "../../variables/bases/layout";
-
-// container
-.ax-container {
-    width: 100%;
-    @each $value in $container-media-queries {
-        @media only screen and (max-width: $value) {
-            max-width: $value;
-        }
-    }
-}
-
-// box decoration break
-.ax-decoration-slice {
-    box-decoration-break: slice;
-}
-.ax-decoration-clone {
-    box-decoration-break: clone;
-}
-
-// box sizing
-@each $key, $value in $box-sizings {
-    .ax-box-#{$key} {
-        box-sizing: $value;
-    }
-}
-// display
-@each $value in $displays {
-    .ax-#{$value} {
-        display: $value;
-    }
-}
-
-// float
-@each $value in $floats {
-    .ax-float-#{$value} {
-        float: $value;
-    }
-}
-
-// clear
-@each $value in $clears {
-    .ax-clear-#{$value} {
-        clear: $value;
-    }
-}
-
-// isolation
-.ax-isolate {
-    isolation: isolate;
-}
-.ax-isolate-auto {
-    isolation: auto;
-}
-
-// object fit
-@each $value in $object-fits {
-    .ax-object-#{$value} {
-        object-fit: $value;
-    }
-}
-// object positon
-@each $key, $value in $object-positions {
-    .ax-object-#{$key} {
-        object-position: $value;
-    }
-}
-// overflow
-@each $key, $value in $overflows {
-    .ax-overflow-#{$key} {
-        overflow: $value;
-    }
-}
-@each $key, $value in $overflows {
-    .ax-overflow-x-#{$key} {
-        overflow: $value;
-    }
-}
-@each $key, $value in $overflows {
-    .ax-overflow-y-#{$key} {
-        overflow: $value;
-    }
-}
-// overscroll behavior
-@each $key, $value in $overscroll-behaviors {
-    .ax-overscroll-#{$key} {
-        overscroll-behavior: $value;
-    }
-}
-@each $key, $value in $overscroll-behaviors {
-    .ax-overscroll-x-#{$key} {
-        overscroll-behavior: $value;
-    }
-}
-@each $key, $value in $overscroll-behaviors {
-    .ax-overscroll-y-#{$key} {
-        overscroll-behavior: $value;
-    }
-}
-// position
-@each $value in $positions {
-    .ax-#{$value} {
-        position: $value;
-    }
-}
-
-// top / right / bottom / left
-
-@each $key, $value in $position-sizes {
-    //instet
-    .ax-inset-#{$key} {
-        top: #{$value};
-        right: #{$value};
-        bottom: #{$value};
-        left: #{$value};
-    }
-    .ax--inset-#{$key} {
-        top: -#{$value};
-        right: -#{$value};
-        bottom: -#{$value};
-        left: -#{$value};
-    }
-
-    //x
-    .ax-x-#{$key} {
-        left: #{$value};
-        right: #{$value};
-    }
-    .ax--x-#{$key} {
-        left: -#{$value};
-        right: -#{$value};
-    }
-
-    //y
-    .ax-y-#{$key} {
-        top: #{$value};
-        bottom: #{$value};
-    }
-    .ax--y-#{$key} {
-        top: -#{$value};
-        bottom: -#{$value};
-    }
-
-    //inset x
-    .ax-inset-x-#{$key} {
-        left: #{$value};
-        right: #{$value};
-    }
-    .ax--inset-x-#{$key} {
-        left: -#{$value};
-        right: -#{$value};
-    }
-
-    //inset y
-    .ax-inset-y-#{$key} {
-        top: #{$value};
-        bottom: #{$value};
-    }
-    .ax--inset-y-#{$key} {
-        top: -#{$value};
-        bottom: -#{$value};
-    }
-
-    //top
-    .ax-top-#{$key} {
-        top: #{$value};
-    }
-    .ax--top-#{$key} {
-        top: -#{$value};
-    }
-
-    //right
-    .ax-right-#{$key} {
-        right: #{$value};
-    }
-    .ax--right-#{$key} {
-        right: -#{$value};
-    }
-
-    //bottom
-    .ax-bottom-#{$key} {
-        bottom: #{$value};
-    }
-    .ax--bottom-#{$key} {
-        bottom: -#{$value};
-    }
-
-    //left
-    .ax-left-#{$key} {
-        left: #{$value};
-    }
-    .ax--left-#{$key} {
-        left: -#{$value};
-    }
-}
-// visibility
-@each $key, $value in $visibilities {
-    .ax-#{$key} {
-        visibility: $value;
-    }
-}
-// z-index
-@each $value in $z-indexs {
-    .ax-z-#{$value} {
-        z-index: $value;
-    }
-}