@acorex/styles 6.1.12 → 7.0.1

package/src/icons/variables.scss

@@ -1,54 +1,65 @@
-$icomoon-font-family: "acorex-icon" !default;
-$icomoon-font-path: "fonts" !default;
-
-$ax-ic-skip-previous: "\e92a";
-$ax-ic-arrow-left: "\e92b";
-$ax-ic-skip-next: "\e92c";
-$ax-ic-arrow-right: "\e92d";
-$ax-ic-first-page: "\e92e";
-$ax-ic-last-page: "\e92f";
-$ax-ic-chevron-left: "\e930";
-$ax-ic-chevron-right: "\e931";
-$ax-ic-inbox: "\e925";
-$ax-ic-cloud-download: "\e926";
-$ax-ic-download: "\e927";
-$ax-ic-upload: "\e928";
-$ax-ic-cloud-upload: "\e929";
-$ax-ic-empty-box: "\e924";
-$ax-ic-colorize: "\e921";
-$ax-ic-pase: "\e922";
-$ax-ic-copy: "\e923";
-$ax-ic-star-filled: "\e91e";
-$ax-ic-star-half-filled: "\e91f";
-$ax-ic-star-outline: "\e920";
-$ax-ic-remove: "\e91b";
-$ax-ic-plus: "\e91c";
-$ax-ic-magnify: "\e91d";
-$ax-ic-arrow-circle: "\e911";
-$ax-ic-arrow-circle-fill: "\e912";
-$ax-ic-arrow-half: "\e913";
-$ax-ic-arrow-fill: "\e914";
-$ax-ic-arrow: "\e915";
-$ax-ic-unfold: "\e916";
-$ax-ic-half-arrow: "\e917";
-$ax-ic-fullscreen: "\e918";
-$ax-ic-close-fullscreen: "\e919";
-$ax-ic-fold: "\e91a";
-$ax-ic-eye: "\e901";
-$ax-ic-eye-off: "\e902";
-$ax-ic-calendar: "\e903";
-$ax-ic-time: "\e900";
-$ax-ic-check: "\e904";
-$ax-ic-check-filled: "\e905";
-$ax-ic-chevron: "\e906";
-$ax-ic-close: "\e907";
-$ax-ic-error-filled: "\e908";
-$ax-ic-chevron-page: "\e909";
-$ax-ic-info-filled: "\e90a";
-$ax-ic-chevron-double: "\e90b";
-$ax-ic-menu: "\e90c";
-$ax-ic-more: "\e90d";
-$ax-ic-warning-filled: "\e90e";
-$ax-ic-chevron-page-filled: "\e90f";
-$ax-ic-calendar-today: "\e910";
-
+$icomoon-font-family: "acorex-icons" !default;
+$icomoon-font-path: "fonts" !default;
+
+$ax-icon-star-fill: "\e900";
+$ax-icon-star: "\e901";
+$ax-icon-light-mode: "\e902";
+$ax-icon-dark-mode: "\e903";
+$ax-icon-color-picker: "\e904";
+$ax-icon-color-palette: "\e905";
+$ax-icon-arrow-left: "\e906";
+$ax-icon-arrow-down: "\e907";
+$ax-icon-arrow-up: "\e908";
+$ax-icon-arrow-right: "\e909";
+$ax-icon-chevron-left: "\e90a";
+$ax-icon-chevron-down: "\e90b";
+$ax-icon-chevron-up: "\e90c";
+$ax-icon-chevron-right: "\e90d";
+$ax-icon-first-page: "\e90e";
+$ax-icon-last-page: "\e90f";
+$ax-icon-full-screen: "\e910";
+$ax-icon-full-screen-close: "\e911";
+$ax-icon-done: "\e912";
+$ax-icon-calendar: "\e913";
+$ax-icon-more: "\e914";
+$ax-icon-menu: "\e915";
+$ax-icon-report: "\e916";
+$ax-icon-report-fill: "\e917";
+$ax-icon-error: "\e918";
+$ax-icon-error-fill: "\e919";
+$ax-icon-warning: "\e91a";
+$ax-icon-warning-fill: "\e91b";
+$ax-icon-check-circle: "\e91c";
+$ax-icon-check-circle-fill: "\e91d";
+$ax-icon-close: "\e91e";
+$ax-icon-time: "\e91f";
+$ax-icon-visibility-off: "\e920";
+$ax-icon-visibility: "\e921";
+$ax-icon-unfold-more: "\e922";
+$ax-icon-unfold-less: "\e923";
+$ax-icon-arrow-long: "\e924";
+$ax-icon-arrow-short: "\e925";
+$ax-icon-download: "\e926";
+$ax-icon-upload: "\e927";
+$ax-icon-publish: "\e928";
+$ax-icon-cloud-download: "\e929";
+$ax-icon-cloud-upload: "\e92a";
+$ax-icon-undo: "\e92b";
+$ax-icon-redo: "\e92c";
+$ax-icon-search: "\e92d";
+$ax-icon-add: "\e92e";
+$ax-icon-remove: "\e92f";
+$ax-icon-paste: "\e930";
+$ax-icon-cut: "\e931";
+$ax-icon-copy: "\e932";
+$ax-icon-refresh: "\e933";
+$ax-icon-inbox: "\e934";
+$ax-icon-skip-previous: "\e935";
+$ax-icon-skip-next: "\e936";
+$ax-icon-delete: "\e937";
+$ax-icon-happy: "\e938";
+$ax-icon-normal: "\e939";
+$ax-icon-sad: "\e93a";
+$ax-icon-person: "\e93b";
+$ax-icon-dashboard: "\e93c";
+

package/src/mixins/_media.scss

@@ -0,0 +1,27 @@
+@mixin media($media) {
+    @if $media == "phone" {
+        @media (max-width: 599px) {
+            @content;
+        }
+    }
+    @if $media == "tablet" {
+        @media (min-width: 600px) {
+            @content;
+        }
+    }
+    @if $media == "tablet-landscape" {
+        @media (min-width: 900px) {
+            @content;
+        }
+    }
+    @if $media == "desktop" {
+        @media (min-width: 1200px) {
+            @content;
+        }
+    }
+    @if $media == "desktop-large" {
+        @media (min-width: 1800px) {
+            @content;
+        }
+    }
+}

package/src/mixins/index.scss

@@ -0,0 +1 @@
+@import "./media";

package/src/shared/_check-box.scss

@@ -0,0 +1,45 @@
+.ax-dark {
+    .ax-checkbox {
+        background-color: rgba(var(--ax-color-ghost), 0.05);
+    }
+}
+.ax-checkbox {
+    width: 1rem;
+    height: 1rem;
+    border: 1px solid;
+    border-color: rgba(var(--ax-color-border-default));
+    background-color: rgb(var(--ax-color-surface));
+    border-radius: 0.2rem;
+    margin: 0;
+    outline: none;
+    vertical-align: middle;
+    appearance: none;
+
+    &:checked,
+    &:indeterminate {
+        border-color: rgba(var(--ax-color-primary)) !important;
+        background-color: rgba(var(--ax-color-primary));
+        background-repeat: no-repeat;
+        background-size: contain;
+    }
+
+    &:checked {
+        background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
+    }
+
+    &:indeterminate {
+        background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
+    }
+
+    &:focus {
+        outline-offset: 2px;
+        outline-width: 2px;
+        outline-style: solid;
+        outline-color: rgba(var(--ax-color-primary));
+    }
+
+    &:disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+}

package/src/shared/_decoration.scss

@@ -0,0 +1,56 @@
+.ax-decoration-container,
+ax-header,
+ax-footer {
+    display: flex;
+    justify-content: space-between;
+    gap: 0.5rem;
+    background-color: rgb(var(--ax-color-surface));
+    border-color: rgb(var(--ax-color-border-default));
+    & > ax-prefix,
+    & > ax-suffix {
+        display: flex;
+        flex: 1 1 auto;
+        flex-direction: row;
+        gap: 0.5rem;
+        align-items: center;
+    }
+    & > ax-prefix {
+        order: -9999;
+        justify-content: flex-start;
+        align-items: center;
+    }
+    & > ax-suffix {
+        order: 9999;
+        justify-content: flex-end;
+        align-items: center;
+    }
+}
+
+ax-title,
+ax-icon {
+    font-weight: 500;
+}
+
+ax-title {
+    font-size: 1rem;
+}
+ax-sub-title {
+    font-size: 0.875rem;
+    color: rgba(var(--ax-color-ghost), 0.6);
+}
+ax-close-button {
+    width: 1.5rem;
+    height: 1.5rem;
+    display: grid;
+    place-items: center;
+    cursor: pointer;
+
+    ax-icon {
+        color: rgba(var(--ax-color-ghost), 0.5);
+        font-size: 1.25rem;
+
+        &:hover {
+            color: rgba(var(--ax-color-ghost), 0.75);
+        }
+    }
+}

package/src/shared/_drop-down.scss

@@ -0,0 +1,163 @@
+@import "../variables/index.scss";
+
+@mixin drop-down-item-apperance() {
+    @each $color in $color_names {
+        &.ax-#{$color}-default {
+            background-color: transparent;
+            color: rgb(var(--ax-color-#{$color}-500));
+            border: transparent;
+
+            &:hover,
+            &:focus {
+
+                background-color: rgba(var(--ax-color-ghost), 0.05);
+                color: rgb(var(--ax-color-#{$color}-600));
+            }
+
+            &:active {
+                color: rgb(var(--ax-color-#{$color}-400));
+            }
+
+            &.ax-state-selected {
+                background-color: rgb(var(--ax-color-#{$color}-500));
+                color: rgb(var(--ax-color-#{$color}-fore));
+            }
+        }
+    }
+
+    &.ax-ghost-default {
+        background-color: transparent;
+        color: rgb(var(--ax-color-ghost));
+        border: transparent;
+
+        &:hover,
+        &:focus,
+        &:active {
+            background-color: rgba(var(--ax-color-ghost), 0.05);
+            color: rgb(var(--ax-color-ghost), 0.87);
+        }
+
+        &.ax-state-selected {
+            background-color: rgb(var(--ax-color-primary-500));
+            color: rgb(var(--ax-color-primary-fore));
+        }
+    }
+
+}
+
+
+.ax-drop-down {
+    display: contents;
+
+    .ax-dropdown-content {
+        display: flex;
+        align-items: center;
+        flex: 1 1 auto;
+        font-size: 0.875rem;
+        overflow-y: hidden;
+        overflow-x: auto;
+
+        &.ax-state-disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+    }
+}
+
+.ax-overlay-pane {
+    background-color: rgba(var(--ax-color-surface));
+    border: 1px solid;
+    border-color: rgba(var(--ax-color-border-default));
+    border-radius: var(--ax-rounded-border-default);
+    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+    overflow: hidden;
+
+    ax-header,
+    ax-footer {
+        background-color: rgba(var(--ax-color-surface));
+        padding: 0.75rem;
+        border-color: rgba(var(--ax-color-border-default));
+        border-top: 1px solid;
+
+    }
+
+    @include media("phone") {
+        border-bottom-right-radius: 0px;
+        border-bottom-left-radius: 0px;
+    }
+
+    &.ax-overlay-center {
+        height: fit-content;
+        max-height: 90vh;
+        width: 80vw;
+    }
+
+    &.ax-overlay-actionsheet {
+        background-color: rgba(var(--ax-color-surface));
+        width: 100%;
+        height: auto;
+        max-height: 85vh;
+
+        &.ax-full {
+            max-height: 95vh;
+            height: 95vh;
+        }
+    }
+
+    &.ax-overlay-full {
+        width: 100vw;
+        height: 100vh;
+    }
+
+    &.ax-dropdown-list {
+        display: flex;
+        flex-direction: column;
+        border: 1px solid;
+        border-color: rgba(var(--ax-color-border-default));
+        border-radius: var(--ax-rounded-border-default);
+        box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), 0px 4px 6px -2px rgba(0, 0, 0, 0.05);
+        padding: 0.5rem 0;
+
+        .ax-button-item {
+            position: relative;
+            display: inline-flex;
+            align-items: center;
+            justify-content: flex-start;
+            padding: 0.5rem;
+            padding-inline-start: 0.5rem;
+            padding-inline-end: 1rem;
+            font-size: 0.875rem;
+            color: rgba(var(--ax-color-text-default));
+            user-select: none;
+            cursor: pointer;
+
+            &.ax-divide {
+                border: 1px solid;
+                border-color: rgba(var(--ax-color-border-default));
+
+            }
+
+            &.ax-state-disabled {
+                opacity: 0.5;
+                cursor: not-allowed;
+            }
+
+            ax-prefix,
+            ax-suffix {
+                display: flex;
+                flex-direction: row;
+            }
+
+            ax-prefix {
+                padding-inline-end: 0.5rem;
+            }
+
+            ax-suffix {
+                padding-inline-start: 0.5rem
+            }
+
+            @include drop-down-item-apperance();
+
+        }
+    }
+}

package/src/shared/_editor-container.scss

@@ -0,0 +1,130 @@
+.ax-dark {
+    .ax-editor-container {
+        background-color: rgba(var(--ax-color-ghost), 0.05);
+    }
+}
+.ax-editor-container {
+    width: 100%;
+    height: var(--ax-size-default);
+    display: flex;
+    background-color: rgb(var(--ax-color-surface));
+    color: rgb(var(--ax-color-text-default));
+    border: 1px solid;
+    border-color: rgb(var(--ax-color-border-default));
+    border-radius: var(--ax-rounded-border-default);
+    font-size: 0.875rem;
+    overflow: hidden;
+    .ax-editor-control {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: var(--ax-size-default);
+        height: var(--ax-size-default);
+        font-size: 1.5rem;
+        line-height: 1.5rem;
+        color: rgba(var(--ax-color-ghost), 0.63);
+    }
+    &:focus-within {
+        outline-offset: 0px;
+        outline-width: 1px;
+        outline-style: solid;
+        outline-color: rgb(var(--ax-color-primary));
+        border-color: rgb(var(--ax-color-primary));
+    }
+
+    &.ax-button-icon {
+        padding-left: 0.5rem;
+        padding-right: 0.5rem;
+    }
+    .ax-input,
+    .ax-textarea {
+        background-color: transparent;
+        flex: 1 1 0%;
+        border: none;
+        text-align: inherit;
+        font: inherit;
+        width: 1%;
+        &:focus {
+            box-shadow: none;
+        }
+    }
+    .ax-input {
+        padding-inline-start: 1rem /* 16px */;
+        padding-inline-end: 0.75rem /* 12px */;
+    }
+    .ax-textarea {
+        padding: 0.625rem /* 10px */;
+    }
+    & > .ax-prefix {
+        *,
+        .ax-button,
+        .ax-title {
+            border-start-start-radius: 0.25rem /* 4px */;
+            border-end-start-radius: 0.25rem;
+        }
+    }
+
+    & > .ax-suffix {
+        *,
+        .ax-button,
+        .ax-title {
+            border-start-end-radius: 0.25rem /* 4px */;
+            border-end-end-radius: 0.25rem;
+        }
+    }
+
+    & > .ax-prefix,
+    & > .ax-suffix {
+        * {
+            height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            border-radius: 0px;
+        }
+
+        .ax-icon {
+            padding-left: 0.5rem /* 8px */;
+            padding-right: 0.5rem;
+        }
+
+        .ax-title {
+            padding-left: 1rem /* 16px */;
+            padding-right: 1rem /* 16px */;
+        }
+    }
+
+    .ax-button {
+        height: 100% !important;
+        border-radius: 0px;
+
+        &.ax-button-icon {
+            width: var(--ax-size-default);
+            height: var(--ax-size-default);
+        }
+    }
+
+    &.ax-state-disabled {
+        opacity: 0.5;
+    }
+
+    &.ax-state-error {
+        outline-color: rgb(var(--ax-color-danger-500));
+        border-color: rgb(var(--ax-color-danger-500));
+        .ax-input {
+            &::placeholder {
+                color: rgb(var(--ax-color-danger));
+            }
+        }
+    }
+
+    &.ax-state-success {
+        outline-color: rgb(var(--ax-color-success-500));
+        border-color: rgb(var(--ax-color-success-500));
+        .ax-input {
+            &::placeholder {
+                color: rgb(var(--ax-color-success));
+            }
+        }
+    }
+}

package/src/shared/_general-button.scss

@@ -0,0 +1,42 @@
+.ax-general-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: var(--ax-rounded-border-default);
+    padding: 0 1rem;
+    height: var(--ax-size-default);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    color: rgba(var(--ax-color-ghost), 0.6);
+
+    &:is(&:hover):not(&:disabled, .ax-state-disabled) {
+        background: rgba(var(--ax-color-ghost), 0.08);
+        color: rgba(var(--ax-color-ghost), 0.87);
+    }
+
+    &:is(&:focus, &:focus-within):not(&:disabled, .ax-state-disabled) {
+        background-color: rgba(var(--ax-color-ghost), 0.12);
+        outline-color: transparent;
+    }
+
+    &:is(&:active):not(&:disabled, .ax-state-disabled) {
+        background-color: transparent;
+    }
+
+    &.ax-button-icon {
+        padding: 0 0.5rem;
+        font-size: 1.5rem;
+        width: var(--ax-size-default);
+        height: var(--ax-size-default);
+        .ax-icon {
+            font-size: 1.5rem;
+        }
+    }
+
+    &:disabled,
+    &.ax-state-disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+}

package/src/shared/_inputs.scss

@@ -0,0 +1,12 @@
+.ax-input {
+    outline: none;
+    padding: 0;
+    font-size: inherit;
+    &:focus {
+        outline-color: transparent;
+    }
+    &.ax-state-disabled {
+        cursor: not-allowed;
+        opacity: 0.5;
+    }
+}