Update to new structure

src/assets/demo/styles/badges.css

@@ -0,0 +1,92 @@
+.product-badge {
+  border-radius: var(--border-radius);
+  padding: .25em .5rem;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: .3px;
+}
+
+.product-badge.status-instock {
+  background: #C8E6C9;
+  color: #256029;
+}
+
+.product-badge.status-outofstock {
+  background: #FFCDD2;
+  color: #C63737;
+}
+
+.product-badge.status-lowstock {
+  background: #FEEDAF;
+  color: #8A5340;
+}
+
+.customer-badge {
+  border-radius: var(--border-radius);
+  padding: .25em .5rem;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: .3px;
+}
+
+.customer-badge.status-qualified {
+  background: #C8E6C9;
+  color: #256029;
+}
+
+.customer-badge.status-unqualified {
+  background: #FFCDD2;
+  color: #C63737;
+}
+
+.customer-badge.status-negotiation {
+  background: #FEEDAF;
+  color: #8A5340;
+}
+
+.customer-badge.status-new {
+  background: #B3E5FC;
+  color: #23547B;
+}
+
+.customer-badge.status-renewal {
+  background: #ECCFFF;
+  color: #694382;
+}
+
+.customer-badge.status-proposal {
+  background: #FFD8B2;
+  color: #805B36;
+}
+
+.order-badge {
+  border-radius: var(--border-radius);
+  padding: .25em .5rem;
+  text-transform: uppercase;
+  font-weight: 700;
+  font-size: 12px;
+  letter-spacing: .3px;
+}
+
+.order-badge.order-delivered {
+  background: #C8E6C9;
+  color: #256029;
+}
+
+.order-badge.order-cancelled {
+  background: #FFCDD2;
+  color: #C63737;
+}
+
+.order-badge.order-pending {
+  background: #FEEDAF;
+  color: #8A5340;
+}
+
+.order-badge.order-returned {
+  background: #ECCFFF;
+  color: #694382;
+}
+/*# sourceMappingURL=badges.css.map */

src/assets/demo/styles/badges.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "AAAA,AAAA,cAAc,CAAC;EACX,aAAa,EAAE,oBAAoB;EACnC,OAAO,EAAE,WAAW;EACpB,cAAc,EAAE,SAAS;EACzB,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,IAAI;CAgBvB;;AAtBD,AAQI,cARU,AAQT,eAAe,CAAC;EACb,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB;;AAXL,AAaI,cAbU,AAaT,kBAAkB,CAAC;EAChB,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB;;AAhBL,AAkBI,cAlBU,AAkBT,gBAAgB,CAAC;EACd,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB;;AAGL,AAAA,eAAe,CAAC;EACZ,aAAa,EAAE,oBAAoB;EACnC,OAAO,EAAE,WAAW;EACpB,cAAc,EAAE,SAAS;EACzB,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,IAAI;CA+BvB;;AArCD,AAQI,eARW,AAQV,iBAAiB,CAAC;EACf,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB;;AAXL,AAaI,eAbW,AAaV,mBAAmB,CAAC;EACjB,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB;;AAhBL,AAkBI,eAlBW,AAkBV,mBAAmB,CAAC;EACjB,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB;;AArBL,AAuBI,eAvBW,AAuBV,WAAW,CAAC;EACT,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB;;AA1BL,AA4BI,eA5BW,AA4BV,eAAe,CAAC;EACb,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB;;AA/BL,AAiCI,eAjCW,AAiCV,gBAAgB,CAAC;EACd,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB;;AAGL,AAAA,YAAY,CAAC;EACT,aAAa,EAAE,oBAAoB;EACnC,OAAO,EAAE,WAAW;EACpB,cAAc,EAAE,SAAS;EACzB,WAAW,EAAE,GAAG;EAChB,SAAS,EAAE,IAAI;EACf,cAAc,EAAE,IAAI;CAqBvB;;AA3BD,AAQI,YARQ,AAQP,gBAAgB,CAAC;EACd,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB;;AAXL,AAaI,YAbQ,AAaP,gBAAgB,CAAC;EACd,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB;;AAhBL,AAkBI,YAlBQ,AAkBP,cAAc,CAAC;EACZ,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB;;AArBL,AAuBI,YAvBQ,AAuBP,eAAe,CAAC;EACb,UAAU,EAAE,OAAO;EACnB,KAAK,EAAE,OAAO;CACjB",
+    "sources": [
+        "badges.scss"
+    ],
+    "names": [],
+    "file": "badges.css"
+}

src/assets/demo/styles/documentation.css

@@ -0,0 +1,30 @@
+pre[class*="language-"]:before, pre[class*="language-"]:after {
+  display: none !important;
+}
+
+pre[class*="language-"] code {
+  border-left: 6px solid var(--surface-border) !important;
+  -webkit-box-shadow: none !important;
+          box-shadow: none !important;
+  background: var(--surface-ground) !important;
+  margin: 1em 0;
+  color: var(--text-color);
+  font-size: 14px;
+}
+
+i:not([class~="pi"]) {
+  background-color: transparent;
+  color: #2196f3;
+  font-family: Monaco, courier, monospace;
+  font-style: normal;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 0 4px;
+  letter-spacing: .5px;
+  font-weight: 600;
+  margin: 0 2px;
+  display: -webkit-inline-box;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+}
+/*# sourceMappingURL=documentation.css.map */

src/assets/demo/styles/documentation.css.map

@@ -0,0 +1,9 @@
+{
+    "version": 3,
+    "mappings": "AAAA,AACI,GADD,CAAA,AAAA,KAAC,EAAO,WAAW,AAAlB,CACC,OAAO,EADZ,GAAG,CAAA,AAAA,KAAC,EAAO,WAAW,AAAlB,CACW,MAAM,CAAC;EACd,OAAO,EAAE,eAAe;CAC3B;;AAHL,AAKI,GALD,CAAA,AAAA,KAAC,EAAO,WAAW,AAAlB,EAKA,IAAI,CAAC;EACD,WAAW,EAAE,GAAG,CAAC,KAAK,CAAC,qBAAqB,CAAC,UAAU;EACvD,UAAU,EAAE,eAAe;EAC3B,UAAU,EAAE,qBAAqB,CAAC,UAAU;EAC5C,MAAM,EAAE,KAAK;EACb,KAAK,EAAE,iBAAiB;EACxB,SAAS,EAAE,IAAI;CAClB;;AAGL,AAAA,CAAC,AAAA,IAAK,EAAA,AAAA,KAAC,EAAO,IAAI,AAAX,GAAc;EACjB,gBAAgB,EAAE,WAAW;EAC7B,KAAK,EAAE,OAAO;EACd,WAAW,EAAE,0BAA0B;EACvC,UAAU,EAAE,MAAM;EAClB,SAAS,EAAE,IAAI;EACf,WAAW,EAAE,GAAG;EAChB,OAAO,EAAE,KAAK;EACd,cAAc,EAAE,IAAI;EACpB,WAAW,EAAE,GAAG;EAChB,MAAM,EAAE,KAAK;EACb,OAAO,EAAE,WAAW;CACvB",
+    "sources": [
+        "documentation.scss"
+    ],
+    "names": [],
+    "file": "documentation.css"
+}

src/assets/layout/images/icon.svg

@@ -1,3 +0,0 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M26.6296 2.54563C26.1341 2.29006 25.5718 2.15557 24.9996 2.15571C24.4273 2.15559 23.8651 2.29008 23.3694 2.54563L4.0434 12.512C3.54782 12.7676 3.13631 13.1351 2.85018 13.5778C2.56407 14.0205 2.41345 14.5226 2.41346 15.0338V34.9664C2.41345 35.4775 2.56407 35.9796 2.85018 36.4223C3.13629 36.8648 3.54782 37.2325 4.0434 37.488L23.3694 47.4544C23.865 47.7099 24.4272 47.8445 24.9995 47.8445C25.5718 47.8445 26.1339 47.7099 26.6296 47.4544L45.9556 37.488C46.4513 37.2325 46.8627 36.8648 47.1487 36.4223C47.4348 35.9796 47.5855 35.4775 47.5855 34.9664V15.0338C47.5855 14.5226 47.4348 14.0205 47.1487 13.5778C46.8627 13.1351 46.4513 12.7676 45.9556 12.512L26.6296 2.54563ZM22.163 0.67894C23.0256 0.234483 24.0038 0.00034737 24.9996 0H25.0006C25.9965 0.000378982 26.9748 0.234512 27.8373 0.67894L47.1633 10.6453C48.0246 11.0911 48.7399 11.7311 49.2379 12.5012C49.7356 13.2713 49.9985 14.1445 50 15.0338V34.9664C49.9982 35.8557 49.7353 36.7291 49.2374 37.4993C48.7394 38.2692 48.0238 38.9093 47.1623 39.3549L27.8363 49.3213C26.9738 49.766 25.9955 50 24.9996 50C24.0038 50 23.0255 49.766 22.163 49.3213L2.83692 39.3549C1.97551 38.9091 1.26015 38.2692 0.76232 37.499C0.264497 36.7291 0.00163253 35.8557 0 34.9664V15.0338C0.00158164 14.1445 0.264393 13.2713 0.762174 12.5011C1.25996 11.731 1.97528 11.0911 2.83667 10.6453L22.163 0.67894ZM11.8723 23.4917C12.1662 23.491 12.4574 23.5422 12.7289 23.6429C13.0004 23.7434 13.2469 23.891 13.4541 24.0771L16.4483 26.7515L22.5959 21.2604C23.2336 20.6918 24.0978 20.3725 24.9989 20.3725C25.8999 20.3725 26.7641 20.6918 27.4017 21.2604L35.9497 28.8955L38.5916 26.5358C39.0116 26.1616 39.5802 25.9514 40.1735 25.9514C40.7666 25.9514 41.3355 26.1616 41.7552 26.5358L45.2158 29.6293V16.0793C45.2158 15.6217 45.081 15.1723 44.8246 14.776C44.5684 14.3798 44.2001 14.0508 43.7565 13.822L26.4579 4.90115C26.0143 4.67234 25.5109 4.55188 24.9986 4.55188C24.4863 4.55188 23.983 4.67234 23.5392 4.90115L6.24044 13.822C5.79682 14.0508 5.42841 14.3798 5.17224 14.776C4.91608 15.1723 4.78119 15.6217 4.78109 16.0793V28.9969L10.2894 24.0769C10.4967 23.8906 10.7435 23.7429 11.0151 23.6427C11.2869 23.5422 11.5782 23.4908 11.8723 23.4917ZM4.78109 31.946V33.9219C4.78126 34.3415 4.89492 34.7548 5.11238 35.1267C5.32985 35.4989 5.64467 35.8182 6.03006 36.0583L14.798 28.2265L12.3672 26.0553C12.3021 25.9973 12.2249 25.9512 12.14 25.9198C12.055 25.8883 11.9639 25.8721 11.872 25.8721C11.78 25.8721 11.689 25.8883 11.604 25.9198C11.519 25.9512 11.4418 25.9973 11.3768 26.0553L4.78109 31.946ZM43.9675 36.058L37.6017 30.371L39.6778 28.5155C39.8091 28.3982 39.9873 28.3323 40.1732 28.3323C40.3589 28.3323 40.537 28.3982 40.6684 28.5155L45.2162 32.5777V33.9216C45.216 34.3412 45.1025 34.7545 44.8851 35.1265C44.6677 35.4984 44.353 35.818 43.9675 36.058ZM35.9517 31.8448L34.3014 30.371L25.7534 22.7361C25.5539 22.5581 25.2836 22.4583 25.0017 22.4583C24.7198 22.4583 24.4495 22.5581 24.25 22.7361L18.1024 28.2272L16.4518 29.7015L8.11768 37.1446L23.5415 45.0991C23.9852 45.3279 24.4885 45.4483 25.0008 45.4483C25.5131 45.4483 26.0166 45.3279 26.4602 45.0991L41.8839 37.1446L35.9517 31.8448Z" fill="#212121"/>
-</svg>

src/assets/layout/styles/layout/_config.scss

@@ -0,0 +1,42 @@
+.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);
+
+    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;
+        }
+    }
+}

src/assets/layout/styles/layout/_main.scss

@@ -23,6 +23,7 @@ a {
     color: var(--primary-color);
 }
 
-.layout-theme-light {
-    background-color: #edf1f5;
-}
+.layout-wrapper {
+    min-height: 100vh;
+    overflow-x: hidden;
+}

src/assets/layout/styles/layout/_menu.scss

@@ -0,0 +1,141 @@
+.layout-sidebar {
+    position: fixed;
+    width: 300px;
+    height: calc(100vh - 9rem);
+    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;
+
+    .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;
+        }
+    }
+
+    a {
+        user-select: none;
+
+        &.active-menuitem {
+            >.layout-submenu-toggler {
+                transform: rotate(-180deg);
+            }
+        }
+    }
+
+    li.active-menuitem {
+        >a {
+            .layout-submenu-toggler {
+                transform: rotate(-180deg);
+            }
+        }
+    }
+
+    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;
+            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;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/assets/layout/styles/layout/_responsive.scss

@@ -1,8 +1,10 @@
 @media screen and (min-width: 1729px) {
-    .layout-main {
-        width: 1478px;
-        margin: 0 auto;
+    .layout-main, .landing-wrapper {
+        width: 1504px;
+        margin-left: auto !important;
+        margin-right: auto !important;
     }
+
 }
 
 @media (min-width: 992px) {
@@ -22,7 +24,7 @@
                 border-bottom-left-radius: 0;
             }
 
-            &.layout-overlay-sidebar-active {
+            &.layout-overlay-active {
                 .layout-sidebar {
                     transform: translateX(0);
                 }
@@ -34,7 +36,7 @@
                 margin-left: 300px;
             }
 
-            &.layout-static-sidebar-inactive {
+            &.layout-static-inactive {
                 .layout-sidebar {
                     transform: translateX(-100%);
                     left: 0;
@@ -54,6 +56,10 @@
 }
 
 @media (max-width: 991px) {
+    .blocked-scroll {
+        overflow: hidden;
+    }
+
     .layout-wrapper {
         .layout-main-container {
             margin-left: 0;
@@ -73,13 +79,20 @@
             z-index: 998;
             background-color: var(--mask-bg);
 
-            &.layout-mask-enter-from,
-            &.layout-mask-leave-to {
-                background-color: transparent;
-            }
         }
 
-        &.layout-mobile-sidebar-active {
+        .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);
             }
@@ -89,8 +102,4 @@
             }
         }
     }
-
-    .body-overflow-hidden {
-        overflow: hidden;
-    }
 }

src/assets/layout/styles/layout/_utils.scss

@@ -0,0 +1,27 @@
+/* Utils */
+.clearfix:after {
+    content: " ";
+    display: block;
+    clear: both;
+}
+
+.card {
+    background: var(--surface-card);
+    border: 1px solid var(--surface-border);
+    padding: 2rem;
+    margin-bottom: 2rem;
+    box-shadow: var(--card-shadow);
+    border-radius: $borderRadius;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.p-toast {
+    &.p-toast-top-right,
+    &.p-toast-top-left,
+    &.p-toast-top-center {
+        top: 70px;
+    }
+}

src/assets/layout/styles/layout/layout.scss

@@ -1,5 +1,6 @@
+@import './_variables';
 @import "./_mixins";
-@import "./_splash";
+@import "./_preloading";
 @import "./_main";
 @import "./_topbar";
 @import "./_menu";
@@ -8,4 +9,4 @@
 @import "./_footer";
 @import "./_responsive";
 @import "./_utils";
-@import "./_typography";
+@import "./_typography";