@cadriciel/layout-cerema 0.0.4

package/src/lib/styles/_responsive.scss

@@ -0,0 +1,181 @@
+@media screen and (min-width: 992px) {
+    .layout-container {
+        &.layout-static {
+            .layout-sidebar {
+                transition: transform var(--layout-section-transition-duration);
+            }
+
+            .layout-content-wrapper {
+                margin-left: 14rem;
+            }
+        }
+
+        &.layout-static-inactive {
+            .layout-sidebar {
+                transform: translateX(-100%);
+            }
+
+            .layout-content-wrapper {
+                margin-left: 0;
+            }
+        }
+
+        &.layout-overlay {
+            .layout-content-wrapper {
+                margin-left: 0;
+            }
+
+            .layout-sidebar {
+                z-index: 999;
+                transform: translateX(-100%);
+                transition: transform var(--layout-section-transition-duration);
+                box-shadow: 3px 0 4px #0000001a;
+            }
+
+            &.layout-overlay-active {
+                .layout-sidebar {
+                    transform: translateX(0);
+                }
+            }
+        }
+    }
+}
+
+@media screen and (max-width: (991px)) {
+    .blocked-scroll {
+        overflow: hidden;
+    }
+
+    .layout-topbar {
+        height: 9rem;
+        flex-wrap: wrap;
+        padding: 1rem 1rem 0 1rem;
+
+        .app-logo {
+            span {
+                display: none;
+            }
+        }
+
+        .topbar-menubutton {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: fixed;
+            bottom: 0;
+            right: 0;
+            width: 4.5rem;
+            height: 4.5rem;
+            margin: 0;
+            border-top-right-radius: 0;
+            border-bottom-left-radius: 0;
+            border-top-left-radius: 30px;
+            background: var(--primary-color);
+            transition: background-color var(--layout-section-transition-duration);
+
+            &:hover {
+                background-color: var(--p-primary-400);
+            }
+
+            span {
+                top: 30px;
+                left: 20px;
+                background: var(--primary-color-text);
+
+                &:before,
+                &:after {
+                    background: var(--primary-color-text);
+                }
+            }
+        }
+
+        .topbar-menu {
+            order: 1;
+            width: 100%;
+            margin: 0;
+        }
+
+        .topbar-search {
+            &.topbar-search-active {
+                .search-input-wrapper {
+                    width: 120px;
+                }
+            }
+        }
+
+        .topbar-profile {
+            .topbar-profile-button {
+                .profile-details,
+                .profile-name,
+                i {
+                    display: none;
+                }
+            }
+        }
+    }
+
+    .layout-content-wrapper {
+        margin-left: 0;
+        padding-top: 9rem;
+        height: calc(100% - 9rem);
+
+        .layout-content {
+            border-top-right-radius: 30px;
+            height: calc(100vh - 9rem);
+        }
+    }
+
+    .layout-sidebar {
+        box-shadow: 0 0 1rem rgba(0, 0, 0, 0.15);
+        transform: translateY(100%);
+        width: 100%;
+        top: 9rem;
+        height: calc(100% - 9rem);
+        mix-blend-mode: normal;
+        backdrop-filter: blur(200px);
+        border-radius: 30px 30px 0px 0px;
+        transition: transform var(--layout-section-transition-duration);
+    }
+
+    .layout-container {
+        &.layout-mobile-active {
+            .layout-topbar {
+                .topbar-menubutton {
+                    span {
+                        width: 0;
+
+                        &:before {
+                            width: 2rem;
+                            left: 0;
+                            transform: translateY(9px) rotate(45deg);
+                        }
+
+                        &:after {
+                            width: 2rem;
+                            transform: translateY(-9px) rotate(-45deg);
+                        }
+                    }
+                }
+            }
+
+            .layout-sidebar {
+                transform: translateY(0);
+            }
+        }
+
+        .layout-search {
+            .search-container {
+                width: 75vw;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 1960px) {
+    .landing-wrapper,
+    .layout-content-inner {
+        width: 1504px;
+        margin-left: auto !important;
+        margin-right: auto !important;
+    }
+}

package/src/lib/styles/_sass_variables.scss

@@ -0,0 +1 @@
+$breakpoint: 992px !default;

package/src/lib/styles/_sidebar.scss

@@ -0,0 +1,3 @@
+@use './sidebar/_sidebar_vertical';
+@use './sidebar/_sidebar_slim';
+@use './sidebar/_sidebar_slim_plus';

package/src/lib/styles/_topbar.scss

@@ -0,0 +1,230 @@
+.layout-topbar {
+    height: 5rem;
+    padding: 0 2rem 0 1rem;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    background-color: var(--v-body-bg);
+
+    .app-logo {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+
+        img {
+            width: 3rem;
+        }
+
+        span {
+            font-size: 2rem;
+            font-weight: 700;
+            margin-left: 0.5rem;
+            color: var(--v-menuitem-text-color);
+        }
+    }
+
+    .topbar-menubutton {
+        position: relative;
+        width: 3rem;
+        height: 3rem;
+        margin-left: 3rem;
+        border-radius: var(--border-radius);
+        flex-shrink: 0;
+
+        span {
+            width: 2rem;
+            height: 4px;
+            display: block;
+            position: absolute;
+            top: 18px;
+            left: 7px;
+            border-radius: 7px;
+            -webkit-transition-duration: 0.5s;
+            transition-duration: 0.5s;
+            transition-timing-function: swing;
+            background-color: var(--v-menuitem-text-color-secondary);
+
+            &:before {
+                width: 1rem;
+                height: 4px;
+                content: '';
+                position: absolute;
+                right: 0;
+                top: -9px;
+                border-radius: 7px;
+                -webkit-transition-duration: 0.5s;
+                transition-duration: 0.5s;
+                transition-timing-function: swing;
+                background-color: var(--v-menuitem-text-color-secondary);
+            }
+
+            &:after {
+                width: 1rem;
+                height: 4px;
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 9px;
+                border-radius: 7px;
+                -webkit-transition-duration: 0.5s;
+                transition-duration: 0.5s;
+                transition-timing-function: swing;
+                background-color: var(--v-menuitem-text-color-secondary);
+            }
+        }
+
+        &:hover {
+            background-color: var(--v-menuitem-hover-bg);
+        }
+    }
+
+    .topbar-menu {
+        list-style-type: none;
+        padding: 0;
+        margin: 0 3rem;
+        display: flex;
+        gap: 0.5rem;
+        flex: 1 1 auto;
+        overflow: auto;
+
+        > li {
+            display: flex;
+            align-items: center;
+            transition: background-color var(--transition-duration);
+            border-radius: var(--border-radius);
+            padding: 0.5rem;
+            cursor: pointer;
+
+            a {
+                font-size: 1.25rem;
+                font-weight: 400;
+                white-space: nowrap;
+                padding-right: 1.375rem;
+                color: var(--v-menuitem-text-color-secondary);
+                opacity: 0.7;
+                &.active-route {
+                    opacity: 1;
+                    color: var(--v-menuitem-text-color);
+                }
+            }
+
+            i {
+                color: var(--v-menuitem-text-color-secondary);
+                font-size: 0.875rem;
+                margin-left: 0.5rem;
+                display: none;
+            }
+
+            &:hover {
+                background-color: var(--v-menuitem-hover-bg);
+
+                a {
+                    padding-right: 0;
+                }
+
+                i {
+                    display: block;
+                }
+            }
+
+            &.topbar-menu-empty {
+                color: var(--v-menuitem-text-color);
+                cursor: auto;
+
+                &:hover {
+                    background-color: transparent;
+                }
+            }
+        }
+    }
+
+    .topbar-actions {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        gap: 1rem;
+        margin-left: auto;
+    }
+
+    .topbar-search {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+
+        .search-input-wrapper {
+            position: relative;
+            width: 0;
+            opacity: 0;
+            visibility: hidden;
+            transition: 400ms cubic-bezier(0.86, 0, 0.07, 1);
+
+            .p-inputtext {
+                width: 100%;
+                position: relative;
+                border-radius: 40px;
+                padding: 9px;
+            }
+
+            span {
+                font-size: 18px;
+                margin-top: -9px;
+            }
+        }
+
+        &.topbar-search-active {
+            .search-input-wrapper {
+                margin-left: 1rem;
+                width: 190px;
+                opacity: 1;
+                visibility: visible;
+
+                i {
+                    display: block;
+                }
+            }
+        }
+    }
+
+    .topbar-profile {
+        border-radius: var(--border-radius);
+        position: relative;
+        flex-shrink: 0;
+
+        .topbar-profile-button {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+
+            > img {
+                width: 36px;
+                margin-right: 0.75rem;
+            }
+
+            .profile-details {
+                display: flex;
+                flex-direction: column;
+                align-items: start;
+            }
+
+            .profile-name {
+                color: var(--v-menuitem-text-color);
+                font-weight: 700;
+            }
+
+            .profile-job {
+                line-height: 1;
+                color: var(--v-menuitem-text-color-secondary);
+            }
+
+            i {
+                margin-left: 0.75rem;
+                color: var(--v-menuitem-text-color-secondary);
+                transition: transform var(--layout-section-transition-duration);
+            }
+        }
+    }
+}

package/src/lib/styles/_utils.scss

@@ -0,0 +1,19 @@
+.card {
+    background: var(--surface-card);
+    padding: 1.5rem;
+    margin-bottom: 1rem;
+    box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.1), 0px 24px 36px rgba(0, 0, 0, 0.04);
+    border-radius: 14px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.p-toast {
+    &.p-toast-top-right,
+    &.p-toast-top-left,
+    &.p-toast-top-center {
+        top: 7rem;
+    }
+}

package/src/lib/styles/layout.scss

@@ -0,0 +1,15 @@
+@use './_sass_variables';
+@use './variables/_common';
+@use './variables/_light';
+@use './variables/_dark';
+@use './_fonts';
+@use './theme/_themes';
+@use './_main';
+@use './_sidebar';
+@use './_topbar';
+@use './_breadcrumb';
+@use './_footer';
+@use './_content';
+@use './_responsive';
+@use './_utils';
+@use './_config';

package/src/lib/styles/sidebar/_sidebar_slim.scss

@@ -0,0 +1,146 @@
+@media screen and (min-width: 992px) {
+    .layout-container {
+        &.layout-slim {
+            .layout-topbar {
+                .app-logo {
+                    span {
+                        display: none;
+                    }
+                }
+            }
+
+            .topbar-menubutton {
+                display: none;
+            }
+
+            .layout-sidebar {
+                width: 5rem;
+                overflow: visible;
+
+                .layout-menu-container {
+                    overflow: auto;
+                    display: flex;
+                    justify-content: center;
+                    padding: 0;
+
+                    &::-webkit-scrollbar {
+                        display: none;
+                    }
+                }
+            }
+
+            .layout-content-wrapper {
+                margin-left: 5rem;
+            }
+
+            .layout-menu {
+                ul {
+                    display: none;
+                }
+
+                li.active-menuitem {
+                    > ul {
+                        display: block;
+                    }
+                }
+
+                .layout-root-menuitem {
+                    > .layout-menuitem-root-text {
+                        display: none;
+                    }
+
+                    > a {
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                        border-radius: 50%;
+                        cursor: pointer;
+                        outline: none;
+                        transition: background-color var(--layout-section-transition-duration);
+                        width: 3.5rem;
+                        height: 3.5rem;
+                        margin: 0 auto 1rem auto;
+                        color: var(--v-menuitem-text-color);
+
+                        &:hover {
+                            background: var(--v-menuitem-hover-bg);
+                        }
+
+                        .layout-submenu-toggler {
+                            display: none;
+                        }
+
+                        .layout-menuitem-icon {
+                            font-size: 1.75rem;
+                        }
+
+                        .layout-menuitem-text {
+                            display: none;
+                        }
+                    }
+
+                    > ul {
+                        position: absolute;
+                        left: 5rem;
+                        top: 0;
+                        min-width: 15rem;
+                        background-color: var(--surface-overlay);
+                        border-radius: var(--border-radius);
+                        box-shadow:
+                            0px 4px 10px rgb(0 0 0 / 3%),
+                            0px 0px 2px rgb(0 0 0 / 6%),
+                            0px 2px 6px rgb(0 0 0 / 12%);
+                        padding: 1rem;
+                        max-height: 20rem;
+                        overflow: auto;
+                        z-index: 999;
+
+                        a {
+                            color: var(--v-overlay-menuitem-text-color);
+
+                            &:hover {
+                                background: var(--v-overlay-menuitem-hover-bg);
+                            }
+                        }
+
+                        li {
+                            a {
+                                padding-left: 0.5rem;
+                            }
+
+                            li {
+                                a {
+                                    padding-left: 1.5rem;
+                                }
+
+                                li {
+                                    a {
+                                        padding-left: 2.5rem;
+                                    }
+
+                                    li {
+                                        a {
+                                            padding-left: 3.5rem;
+                                        }
+
+                                        li {
+                                            a {
+                                                padding-left: 4.5rem;
+                                            }
+
+                                            li {
+                                                a {
+                                                    padding-left: 5.5rem;
+                                                }
+                                            }
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}