@solidxai/core-ui 0.1.1 → 0.1.3

package/src/resources/stylesheets/_config.scss

@@ -1,54 +0,0 @@
-.layout-config-button {
-    display: block;
-    position: fixed;
-    width: 3rem;
-    height: 3rem;
-    line-height: 3rem;
-    background: var(--primary-color);
-    color: var(--primary-color-text);
-    text-align: center;
-    top: 50%;
-    right: 0;
-    margin-top: -1.5rem;
-    border-top-left-radius: var(--border-radius);
-    border-bottom-left-radius: var(--border-radius);
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-    transition: background-color var(--transition-duration);
-    overflow: hidden;
-    cursor: pointer;
-    z-index: 999;
-    box-shadow: -.25rem 0 1rem rgba(0,0,0,.15);
-
-
-    &.config-link {
-        font-size: 1rem;
-        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-        border: none;
-      }
-      .config-link:focus {
-        outline: 0 none;
-        outline-offset: 0;
-        box-shadow: 0 0 0 1px var(--focus-ring);
-      }
-
-    i {
-        font-size: 2rem;
-        line-height: inherit;
-        transform: rotate(0deg);
-        transition: transform 1s;
-    }
-
-    &:hover {
-        background: var(--primary-400);
-    }
-}
-
-.layout-config-sidebar {
-    &.p-sidebar {
-        .p-sidebar-content {
-            padding-left: 2rem;
-            padding-right: 2rem;
-        }
-    }
-} 

package/src/resources/stylesheets/_content.scss

@@ -1,95 +0,0 @@
-// .layout-main-container {
-//     display: flex;
-//     flex-direction: column;
-//     min-height: 100vh;
-//     width: 100%;
-//     justify-content: space-between;
-//     padding: 7rem 2rem 2rem 4rem;
-//     transition: margin-left $transitionDuration;
-// }
-
-// .layout-main {
-//     flex: 1 1 auto;
-// }
-
-/* Parent layout styles */
-.layout-wrapper {
-    display: flex;
-    /* Enables side-by-side layout */
-    height: 100vh;
-    width: 100vw;
-    /* Ensures layout takes full height */
-    overflow-y: hidden;
-}
-
-.sidebar-left {
-    width: 70px;
-    background-color: var(--surface-a);
-    color: white;
-    position: fixed;
-    height: 100vh;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: space-between;
-    border-right: 1px solid var(--primary-light-color);
-}
-
-.sidebar-right {
-    width: 0;
-    transition: width 0.3s ease;
-    overflow-x: hidden;
-    position: fixed;
-    left: 70px;
-    height: 100%;
-    // background-color: #fff;
-    background-color: var(--surface-a);
-    overflow-y: hidden;
-}
-
-.sidebar-right.open {
-    width: 250px;
-    border-right: 1px solid var(--primary-light-color)
-}
-
-.sidebar-backdrop {
-    display: none; /* Hidden by default */
-}
-
-.sidebar-toggle-button {
-    position: absolute;
-    z-index: 999;
-    left: 306px;
-    top: 18px;
-    padding: 0;
-    border: 0;
-}
-
-.sidebar-toggle-button svg{
-    fill: var(--surface-a);
-}
-
-.sidebar-toggle-button.s-collapsed {
-    position: absolute;
-    left: 58px;
-    top: 18px;
-    z-index: 999;
-}
-
-.sidebar-toggle-button.s-collapsed svg{
-    transform: rotate(180deg);
-}
-
-.main-content {
-    margin-left: 70px;
-    // transition: margin-left 0.3s ease;
-    width: calc(100vw - 70px); /* Restrict width to prevent overflow */
-    transition: margin-left 0.3s ease-in-out; 
-    overflow: hidden;
-}
-
-.main-content.shifted {
-    margin-left: 320px; /* 70px + 250px */
-    // width: calc(100vw - 320px);
-}

package/src/resources/stylesheets/_footer.scss

@@ -1,10 +0,0 @@
-@use "./variables" as *;
-
-.layout-footer {
-    transition: margin-left $transitionDuration;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding-top: 1rem;
-    border-top: 1px solid var(--surface-border);
-}

package/src/resources/stylesheets/_main.scss

@@ -1,49 +0,0 @@
-* {
-    box-sizing: border-box;
-}
-
-html {
-    height: 100%;
-    font-size: 100%;
-}
-
-body {
-    font-family: var(--font-family);
-    color: var(--text-color);
-    background-color: var(--surface-ground);
-    margin: 0;
-    padding: 0;
-    min-height: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    overflow: hidden;
-}
-
-/* width */
-::-webkit-scrollbar {
-    width: 4px;
-    height: 4px;
-    /* For horizontal scrollbar */
-}
-
-/* Track */
-::-webkit-scrollbar-track {
-    box-shadow: inset 0 0 5px #EFEFEF;
-    border-radius: 10px;
-}
-
-/* Handle */
-::-webkit-scrollbar-thumb {
-    background: #ADADAD;
-    border-radius: 10px;
-}
-
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-    background: #c7c6c6;
-}
-
-// .layout-wrapper {
-//     min-height: 100vh;
-//     display: flex;
-// }

package/src/resources/stylesheets/_menu.scss

@@ -1,183 +0,0 @@
-@use "./variables" as *;
-@use "./mixins" as *;
-
-.layout-sidebar {
-    position: fixed;
-    // width: 70px;
-    height: 100vh;
-    z-index: 999;
-    // overflow-y: auto;
-    user-select: none;
-    // top: 7rem;
-    // left: 2rem;
-    transition: transform $transitionDuration, left $transitionDuration;
-    background-color: var(--surface-overlay);
-    // border-radius: $borderRadius;
-    padding: 0.5rem 1.5rem;
-    box-shadow: 0px 3px 5px rgba(0, 0, 0, .02), 0px 0px 2px rgba(0, 0, 0, .05), 0px 1px 4px rgba(0, 0, 0, .08);
-}
-
-.layout-menu {
-    margin: 0;
-    padding: 0;
-    list-style-type: none;
-    user-select: none;
-
-    .layout-root-menuitem {
-        >.layout-menuitem-root-text {
-            font-size: .857rem;
-            text-transform: uppercase;
-            font-weight: 700;
-            color: var(--surface-900);
-            margin: .75rem 0;
-        }
-
-        >a {
-            display: none;
-        }
-    }
-
-    li.active-menuitem {
-        >a {
-            .layout-submenu-toggler {
-                transform: rotate(-180deg);
-            }
-        }
-
-        >ul {
-            max-height: auto;
-        }
-    }
-
-    ul {
-        margin: 0;
-        padding: 0;
-        list-style-type: none;
-
-        a {
-            display: flex;
-            align-items: center;
-            position: relative;
-            outline: 0 none;
-            color: var(--text-color);
-            cursor: pointer;
-            padding: .75rem 1rem;
-            border-radius: $borderRadius;
-            transition: background-color $transitionDuration, box-shadow $transitionDuration;
-
-            .layout-menuitem-icon {
-                margin-right: .5rem;
-            }
-
-            .layout-submenu-toggler {
-                font-size: 75%;
-                margin-left: auto;
-                transition: transform $transitionDuration;
-            }
-
-            &.rotated-icon {
-                .layout-menuitem-icon {
-                    transform: rotate(90deg);
-                }
-            }
-
-            &.active-route {
-                font-weight: 700;
-                color: var(--primary-color);
-            }
-
-            &:hover {
-                background-color: var(--surface-hover);
-            }
-
-            &:focus {
-                @include focused-inset();
-            }
-        }
-
-        ul {
-            overflow: hidden;
-            max-height: 0;
-            border-radius: $borderRadius;
-
-            li {
-                a {
-                    margin-left: 1rem;
-                }
-
-                li {
-                    a {
-                        margin-left: 2rem;
-                    }
-
-                    li {
-                        a {
-                            margin-left: 2.5rem;
-                        }
-
-                        li {
-                            a {
-                                margin-left: 3rem;
-                            }
-
-                            li {
-                                a {
-                                    margin-left: 3.5rem;
-                                }
-
-                                li {
-                                    a {
-                                        margin-left: 4rem;
-                                    }
-                                }
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
-
-.layout-submenu-enter-active {
-    max-height: 1000px !important;
-    transition: max-height 1s ease-in-out;
-}
-
-.layout-submenu-enter-done {
-    max-height: 1000px !important;
-}
-
-.layout-submenu-exit {
-    max-height: 1000px !important;
-}
-
-.layout-submenu-exit-active {
-    overflow: hidden;
-    max-height: 0 !important;
-    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
-}
-
-
-// Solid Menu
-.navbar-menu{
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
-    margin-top: 16px;
-}
-
-.menu-item {
-    height: 40px;
-    width: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px;
-}
-
-.menu-item a img{
-    object-fit: contain;
-    height: 30px;
-    width: 30px;
-}

package/src/resources/stylesheets/_mixins.scss

@@ -1,13 +0,0 @@
-@mixin focused() {
-    outline: 0 none;
-    outline-offset: 0;
-    transition: box-shadow .2s;
-    box-shadow: var(--focus-ring);
-}
-
-@mixin focused-inset() {
-    outline: 0 none;
-    outline-offset: 0;
-    transition: box-shadow .2s;
-    box-shadow: inset var(--focus-ring);
-}

package/src/resources/stylesheets/_responsive.scss

@@ -1,101 +0,0 @@
-@use "./variables" as *;
-
-@media screen and (min-width: 1960px) {
-    .layout-main, .landing-wrapper {
-        width: 1504px;
-        margin-left: auto !important;
-        margin-right: auto !important;
-    }
-}
-
-@media (min-width: 992px) {
-    .layout-wrapper {
-        &.layout-overlay {
-            .layout-main-container {
-                margin-left: 0;
-                padding-left: 2rem;
-            }
-
-            .layout-sidebar {
-                transform: translateX(-100%);
-                left: 0;
-                top: 0;
-                height: 100vh;
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
-            }
-
-            &.layout-overlay-active {
-                .layout-sidebar {
-                    transform: translateX(0);
-                }
-            }
-        }
-
-        &.layout-static {
-            .layout-main-container {
-                margin-left: 300px;
-            }
-
-            &.layout-static-inactive {
-                .layout-sidebar {
-                    transform: translateX(-100%);
-                    left: 0;
-                }
-
-                .layout-main-container {
-                    margin-left: 0;
-                    padding-left: 2rem;
-                }
-            }
-        }
-
-        .layout-mask {
-            display: none;
-        }
-    }
-}
-
-@media (max-width: 991px) {
-    .blocked-scroll {
-        overflow: hidden;
-    }
-
-    .layout-wrapper {
-        .layout-main-container {
-            margin-left: 0;
-            padding-left: 2rem;
-        }
-
-        .layout-sidebar {
-            transform: translateX(-100%);
-            left: 0;
-            top: 0;
-            height: 100vh;
-            border-top-left-radius: 0;
-            border-bottom-left-radius: 0;
-        }
-
-        .layout-mask {
-            display: none;
-            position: fixed;
-            top: 0;
-            left: 0;
-            z-index: 998;
-            width: 100%;
-            height: 100%;
-            background-color: var(--maskbg);
-        }
-
-        &.layout-mobile-active {
-            .layout-sidebar {
-                transform: translateX(0);
-            }
-
-            .layout-mask {
-                display: block;
-                animation: fadein $transitionDuration;
-            }
-        }
-    }
-}

package/src/resources/stylesheets/_topbar.scss

@@ -1,152 +0,0 @@
-@use "./variables" as *;
-@use "./mixins" as *;
-
-.layout-topbar {
-    position: fixed;
-    height: 5rem;
-    z-index: 997;
-    left: 0;
-    top: 0;
-    width: 100%;
-    padding: 0 2rem;
-    background-color: var(--surface-card);
-    transition: left $transitionDuration;
-    display: flex;
-    align-items: center;
-    box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08);
-
-    .layout-topbar-logo {
-        display: flex;
-        align-items: center;
-        color: var(--surface-900);
-        font-size: 1.5rem;
-        font-weight: 500;
-        width: 300px;
-        border-radius: 12px;
-
-        img {
-            height: 2.5rem;
-            margin-right: .5rem;
-        }
-
-        &:focus {
-            @include focused();
-        }
-    }
-
-    .layout-topbar-button {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        position: relative;
-        color: var(--text-color-secondary);
-        border-radius: 50%;
-        width: 3rem;
-        height: 3rem;
-        cursor: pointer;
-        transition: background-color $transitionDuration;
-
-        &:hover {
-            color: var(--text-color);
-            background-color: var(--surface-hover);
-        }
-
-        &:focus {
-            @include focused();
-        }
-
-        i {
-            font-size: 1.5rem;
-        }
-
-        span {
-            font-size: 1rem;
-            display: none;
-        }
-    }
-
-    .layout-menu-button {
-        margin-left: 2rem;
-    }
-
-    .layout-topbar-menu-button {
-        display: none;
-
-        i {
-            font-size: 1.25rem;
-        }
-    }
-
-    .layout-topbar-menu {
-        margin: 0 0 0 auto;
-        padding: 0;
-        list-style: none;
-        display: flex;
-
-        .layout-topbar-button {
-            margin-left: 1rem;
-        }
-    }
-}
-
-@media (max-width: 991px) {
-    .layout-topbar {
-        justify-content: space-between;
-
-        .layout-topbar-logo {
-            width: auto;
-            order: 2;
-        }
-
-        .layout-menu-button {
-            margin-left: 0;
-            order: 1;
-        }
-
-        .layout-topbar-menu-button {
-            display: inline-flex;
-            margin-left: 0;
-            order: 3;
-        }
-
-        .layout-topbar-menu {
-            margin-left: 0;
-            position: absolute;
-            flex-direction: column;
-            background-color: var(--surface-overlay);
-            box-shadow: 0px 3px 5px rgba(0,0,0,.02), 0px 0px 2px rgba(0,0,0,.05), 0px 1px 4px rgba(0,0,0,.08);
-            border-radius: 12px;
-            padding: 1rem;
-            right: 2rem;
-            top: 5rem;
-            min-width: 15rem;
-            display: none;
-            -webkit-animation: scalein 0.15s linear;
-            animation: scalein 0.15s linear;
-
-            &.layout-topbar-menu-mobile-active {
-                display: block
-            }
-
-            .layout-topbar-button {
-                margin-left: 0;
-                display: flex;
-                width: 100%;
-                height: auto;
-                justify-content: flex-start;
-                border-radius: 12px;
-                padding: 1rem;
-
-                i {
-                    font-size: 1rem;
-                    margin-right: .5rem;
-                }
-
-                span {
-                    font-weight: medium;
-                    display: block;
-                }
-            }
-        }
-    }
-}