@acorex/styles 16.0.2 → 17.0.1

package/scss/buttons.scss

@@ -1,69 +0,0 @@
-@import "./variables.scss";
-@import "./mixin.scss";
-
-.ax {
-  &.buttons {
-    display: inline-flex;
-    flex-direction: row;
-    font-family: inherit;
-    font-size: 0.875rem;
-    vertical-align: baseline;
-    height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-
-    .button {
-      margin: 0 !important;
-      border-radius: 0 !important;
-      font-size: inherit !important;
-      margin-inline-start: 0.25em;
-    }
-  }
-
-  &.button {
-    position: relative;
-    cursor: pointer;
-    display: inline-block;
-    border: none;
-    vertical-align: baseline;
-    text-transform: none;
-    text-shadow: none;
-    font-family: inherit;
-    font-size: inherit;
-    text-align: center;
-    text-decoration: none;
-    overflow: hidden;
-    padding: 0 1rem;
-    height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-    &.ax-button-icon {
-      width: calc(var(--ax-base-size) * var(--ax-base-ratio));
-      height: calc(var(--ax-base-size) * var(--ax-base-ratio));
-      padding: 0;
-    }
-    .button-inner-content {
-      display: flex;
-      flex-direction: row;
-      justify-content: center;
-      align-items: center;
-      white-space: nowrap;
-
-      .icon {
-        margin-inline-end: 0.5rem;
-        margin-inline-start: 0.5rem;
-      }
-    }
-
-    * {
-      pointer-events: none;
-    }
-
-    @include ax-border-radius(var(--ax-size-border-radius));
-    -webkit-tap-highlight-color: transparent;
-
-    &:hover {
-      @include ax-transition-all();
-    }
-
-    &:focus {
-      @include ax-transition-all();
-    }
-  }
-}

package/scss/calendar.scss

@@ -1,144 +0,0 @@
-.ax-calendar-container {
-    border: 1px solid var(--ax-border-color);
-    border-radius: var(--ax-size-border-radius);
-
-    .ax-calendar-header {
-        direction: ltr;
-        display: flex;
-        justify-content: space-between;
-        padding-top: 0.5rem;
-        padding-bottom: 0.5rem;
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
-        border-bottom: 1px solid var(--ax-border-color);
-
-        .ax-nav-button,
-        .ax-controll-button {
-            padding: 0 0.5rem;
-        }
-    }
-
-    .ax-calendar-body {
-        padding: 0.5rem;
-
-        .ax-month-items,
-        .ax-day-items {
-            display: grid;
-            grid-template-columns: repeat(7, minmax(0, 1fr));
-        }
-
-        .ax-month-container,
-        .ax-year-container {
-            display: grid;
-            grid-template-columns: repeat(3, minmax(0, 1fr));
-
-            >div {
-                font-size: 0.875rem;
-                line-height: 1.25rem;
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-                margin: 0.125rem;
-                border-radius: 0.25rem;
-                background-color: var(--ax-light-light-color);
-
-                &::before {
-                    content: "";
-                    padding-top: 50%;
-                    float: left;
-                }
-
-                &::after {
-                    content: "";
-                    display: block;
-                    clear: both;
-                }
-            }
-        }
-
-        .ax-month-items {
-            margin: 0.5rem 0;
-
-            .ax-month-item {
-                font-size: 1rem;
-                line-height: 1.25rem;
-                text-align: center;
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: text;
-                margin: 0.125rem;
-            }
-        }
-
-        .ax-day-items {
-            .ax-day-item {
-                font-size: 0.875rem;
-                line-height: 1.25rem;
-                position: relative;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-                cursor: pointer;
-                margin: 0.125rem;
-                border-radius: 0.25rem;
-
-                &::before {
-                    content: "";
-                    padding-top: 100%;
-                    float: left;
-                }
-
-                &::after {
-                    content: "";
-                    display: block;
-                    clear: both;
-                }
-
-                &:hover {
-                    background-color: var(--ax-light-light-color);
-                }
-
-                &.holiday {
-                    color: var(--ax-danger-color);
-
-                    &:hover {
-                        color: #000;
-                    }
-                }
-
-                &.today {
-                    background-color: var(--ax-primary-trans-dark-color) !important;
-                    color: var(--ax-primary-color) !important;
-                }
-
-                &.selected {
-                    background-color: var(--ax-success-color);
-                    color: var(--ax-success-fore-color);
-
-                    &:hover {
-                        color: var(--ax-success-fore-color);
-                    }
-                }
-
-                &.next-month {
-                    opacity: 0.5;
-                }
-
-                &.unselect {
-                    cursor: not-allowed;
-                    position: relative;
-                    background-color: rgb(245, 138, 138, 30%);
-                    color: var(--ax-danger-color);
-                }
-            }
-        }
-    }
-
-    .ax-calendar-footer {
-        padding: 0.5rem;
-    }
-}

package/scss/checkbox.scss

@@ -1,46 +0,0 @@
-.ax-checkbox-container {
-    display: flex;
-    align-items: center;
-    font-size: 0.875rem;
-    span {
-        margin-inline-start: 0.5rem;
-    }
-    &.readonly,
-    &.disabled {
-        opacity: 0.7;
-    }
-    &.disabled {
-        cursor: not-allowed;
-    }
-    .ax-checkbox {
-        width: 16px;
-        height: 16px;
-        border: 1px solid var(--ax-border-color);
-        border-radius: 4px;
-        background-color: var(--ax-white-color);
-        margin: 0;
-        appearance: none;
-        vertical-align: middle;
-        outline: 2px solid transparent;
-        outline-offset: 2px;
-        color: var(--ax-primary-color);
-        &.checked {
-            border-color: var(--ax-primary-color);
-            background-repeat: no-repeat;
-            background-color: currentColor;
-            background-size: contain;
-            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 {
-            border-color: var(--ax-primary-color);
-            background-repeat: no-repeat;
-            background-color: currentColor;
-            background-size: contain;
-            background-image: url("data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHJlY3QgY2xhc3M9ImNscy0xIiB4PSIzIiB5PSI3IiB3aWR0aD0iMTAiIGhlaWdodD0iMiIvPjwvc3ZnPg==");
-        }
-        &:focus {
-            border-color: var(--ax-primary-color);
-        }
-    }
-}

package/scss/context-menu.scss

@@ -1,75 +0,0 @@
-.ax {
-    &.context-menu-container {
-        position: fixed;
-
-        .context-menu {
-            background-color: var(--ax-white-color);
-            width: fit-content;
-            max-width: 300px;
-            -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
-            transition: all 0.3s;
-            padding: 0;
-            margin: 0;
-            
-            .context-menu-item {
-                display: flex;
-                padding: 1rem;
-                justify-content: space-between;
-                cursor: pointer;
-                user-select: none;
-                color: var(--ax-gray-dark-color);
-                position: relative;
-                min-width: fit-content;
-                &:hover {
-                    background-color: var(--ax-light-light-color);
-                    & > .child {
-                        inset-inline-start: 100%;
-                        visibility: visible;
-                        opacity: 1;
-                        transform: translateX(0px);
-                    }
-                }
-                &.disabled {
-                    color: var(--ax-gray-light-color) !important;
-                    // opacity: 0.6;
-                    cursor: not-allowed;
-                }
-                &.divider {
-                    border-bottom: 1px solid var(--ax-border-color);
-                }
-                .startIcon {
-                    padding-inline-end: 0.5em;
-                }
-                span {
-                    white-space: nowrap;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    flex: 1;
-                }
-                .endIcon {
-                    padding-inline-start: 0.5em;
-                    > i {
-                        padding-inline-start: 0.5em;
-                    }
-                }
-
-                .child {
-                    position: absolute;
-                    inset-inline-start: 0%;
-                    top: 0;
-                    visibility: hidden;
-                    opacity: 0;
-                    transition: transform 0.2s;
-                    transform: translateX(50px);
-                   
-                }
-            }
-        }
-    }
-}
-
-@keyframes show {
-    from {display: none;}
-    to {display: block;opacity: 1;}
-  }

package/scss/data-grid.scss

@@ -1,117 +0,0 @@
-// filter
-.ag-menu {
-    border-color: var(--border-color);
-    resize: none;
-}
-
-// ax-data-grid .ax-toolbar {
-//     background: transparent !important;
-//     box-shadow: none !important;
-//     border: 0 !important;
-//     padding: 0rem !important;
-// }
-
-.ax-grid-filter-container {
-    min-width: 140px;
-    margin: var(--sp-sm-size);
-    min-height: 100px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    legend {
-        font-size: inherit !important;
-    }
-    .btn-group {
-        width: 100%;
-        margin: var(--sp-md-size) 0 0 0;
-    }
-    .ax-field-set {
-        min-width: 200px !important;
-    }
-}
-
-// grid
-ag-grid-angular {
-    width: 100%;
-}
-
-.ag-theme-balham {
-    .ax-field-set-button {
-        margin: 4px 2px !important;
-    }
-    .ag-header {
-        background-color: var(--ax-primary-trans-light-color) !important;
-        border-color: var(--ax-border-color);
-    }
-    .ag-root {
-        border-color: var(--ax-border-color) !important;
-    }
-    .ag-cell {
-        ax-check-box {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            .checkmark {
-                height: 16px;
-                width: 16px;
-            }
-        }
-        ax-button {
-            .ax-button {
-                display: inline-flex;
-                margin: 4px 0px 0 5px;
-            }
-            .btn {
-                padding: 0 0.75rem;
-                font-size: 0.875rem;
-                line-height: 1.2;
-            }
-        }
-    }
-}
-
-.ag-theme-balham .ag-filter input[type="text"],
-.ag-theme-balham .ag-filter input[type="date"] {
-    padding-left: 0.5em !important;
-}
-
-.ax-grid-command-button {
-    border: none;
-    width: var(--el-md-size);
-    height: var(--el-md-size);
-    text-align: center;
-    display: inline-flex;
-    justify-content: center;
-    font-size: 0.875rem;
-    align-items: center;
-}
-
-ax-command-cell {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    height: 100%;
-}
-
-:host {
-    ax-toolbar {
-        width: 100%;
-        .ax-toolbar {
-            background: var(--ax-white-color);
-            padding: 0.5rem;
-            z-index: 2;
-            width: 100%;
-            border: 1px solid var(--ax-border-color);
-            border-bottom: 0;
-            button {
-                i {
-                    vertical-align: middle;
-                }
-            }
-        }
-    }
-}
-.ag-theme-alpine div.ag-row {
-    font-size: 0.875rem !important;
-}

package/scss/drawer.scss

@@ -1,138 +0,0 @@
-ax-drawer-container {
-    display: flex;
-    position: relative;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-
-    &.ax-fixed {
-        display: none;
-        top: 0;
-        right: 0;
-        left: 0;
-        bottom: 0;
-        z-index: 1000;
-        &.ax-visible {
-            display: flex;
-        }
-    }
-
-    .ax-backdrop {
-        background-color: rgb(0, 0, 0, 0.3);
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        z-index: 1;
-        top: 0;
-        bottom: 0;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-    }
-
-    ax-drawer {
-        display: flex !important;
-        flex-direction: column;
-        max-width: 95%;
-        height: 100%;
-        animation-duration: 300ms;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        .ax-header,
-        .ax-footer {
-            padding: 0.75rem;
-            border-color: var(--ax-gray-light-color);
-        }
-        .ax-footer {
-            border-top: 1px solid;
-            border-color: var(--ax-gray-light-color);
-        }
-        .ax-header {
-            border-bottom: 1px solid;
-            border-color: var(--ax-gray-light-color);
-        }
-        &.ax-preload {
-            animation-duration: 30ms;
-            transition-property: all;
-            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-            transition-duration: 150ms;
-        }
-        .ax-visible {
-            visibility: visible;
-        }
-        & > .ax-content {
-            overflow: auto;
-            background: var(--ax-white-color);
-            flex: 1;
-            height: 100%;
-            text: var(--ax-gray-color);
-        }
-
-        &.ax-drawer-overlay {
-            position: absolute;
-
-            &.ax-expanded {
-                z-index: 2;
-            }
-
-            &.ax-collapsed {
-                z-index: 0;
-            }
-
-            &.ax-drawer-start {
-                &.ax-expanded {
-                    inset-inline-start: 0px;
-                }
-
-                &.ax-collapsed {
-                    inset-inline-start: calc(-1 * var(--ax-el-width));
-                }
-            }
-
-            &.ax-drawer-end {
-                &.ax-expanded {
-                    inset-inline-end: 0px;
-                }
-
-                &.ax-collapsed {
-                    inset-inline-end: calc(-1 * var(--ax-el-width));
-                }
-            }
-        }
-
-        &.ax-drawer-push {
-            flex: 0 1 auto;
-
-            &.ax-drawer-start {
-                order: -9999;
-
-                &.ax-expanded {
-                    margin-inline-start: 0%;
-                }
-
-                &.ax-collapsed {
-                    margin-inline-start: calc(-1 * var(--ax-el-width));
-                }
-            }
-
-            &.ax-drawer-end {
-                order: 9999;
-
-                &.ax-expanded {
-                    margin-inline-end: 0%;
-                }
-
-                &.ax-collapsed {
-                    margin-inline-end: calc(-1 * var(--ax-el-width));
-                }
-            }
-        }
-    }
-
-    & > .ax-content {
-        flex: 1;
-        height: 100%;
-        overflow: auto;
-    }
-}

package/scss/fieldset.scss

@@ -1,23 +0,0 @@
-@import "./mixin.scss";
-
-.ax {
-  &.fieldset {
-    border: 1px solid;
-    border-color: var(--ax-border-color);
-    padding: 0.5em;
-    @include ax-border-radius(var(--ax-size-border-radius));
-
-    legend {
-      padding: 0 0.5em;
-      cursor: pointer;
-      user-select: none;
-    }
-
-    >.fieldset-content {
-      width: 100%;
-      height: 100%;
-      display: block;
-      margin-block-end: 0.5em;
-    }
-  }
-}