@mediusinc/mng-commons-layout 6.0.0-rc.5 → 6.0.0-rc.7

package/scss/layout/_sidebar_reveal.scss

@@ -1,3 +1,5 @@
+@use './_sass_variables' as *;
+
 @media screen and (min-width: $breakpoint) {
     .layout-container {
         &.layout-reveal {
@@ -27,7 +29,8 @@
                         .app-logo-small {
                             display: inline;
                             order: 1;
-                            margin-right: 0.5rem;
+                            margin-right: .5rem;
+
                         }
 
                         .app-logo-normal {
@@ -42,23 +45,23 @@
                         border-radius: 50%;
                         border: 2px solid var(--primary-color);
                         background-color: transparent;
-                        transition:
-                            background-color var(--transition-duration),
-                            transform 0.3s;
+                        transition: background-color var(--layout-section-transition-duration),
+                        transform 0.3s;
                     }
                 }
                 .layout-menu-container {
                     overflow: hidden;
                 }
 
+
                 .layout-menu {
                     .layout-root-menuitem {
-                        > .layout-menuitem-root-text {
-                            > span {
+                        >.layout-menuitem-root-text {
+                            >span {
                                 margin-right: auto;
                             }
 
-                            > .layout-menuitem-root-icon {
+                            >.layout-menuitem-root-icon {
                                 display: block;
                                 margin-right: 0.125rem;
                             }
@@ -103,7 +106,7 @@
 
             &.layout-sidebar-active {
                 .layout-sidebar {
-                    padding-bottom: 0;
+                    padding-bottom: 0rem;
                     transform: translateX(0);
                     .layout-menu-container {
                         overflow: auto;
@@ -124,13 +127,16 @@
                         .layout-sidebar-anchor {
                             display: block;
                             animation: px-fadein 0.15s linear;
+                            flex-shrink: 0;
                         }
                     }
 
+
+
                     .layout-menu {
                         .layout-root-menuitem {
-                            > .layout-menuitem-root-text {
-                                > .layout-menuitem-root-icon {
+                            >.layout-menuitem-root-text {
+                                >.layout-menuitem-root-icon {
                                     display: none;
                                 }
                             }

package/scss/layout/_sidebar_slim.scss

@@ -1,3 +1,5 @@
+@use './_sass_variables' as *;
+
 @media screen and (min-width: $breakpoint) {
     .layout-container {
         &.layout-slim {
@@ -8,7 +10,7 @@
             }
 
             .sidebar-header {
-                padding: 1.7rem 0;
+                padding:  1.7rem 0;
                 .app-logo {
                     display: flex;
                     align-items: center;
@@ -62,8 +64,7 @@
                         border: none;
                         cursor: pointer;
                         outline: none;
-                        transition: background-color var(--transition-duration);
-                        margin: 0;
+                        transition: background-color var(--layout-section-transition-duration);
                         padding: 8px;
                         width: 40px;
                         height: 40px;
@@ -75,6 +76,7 @@
 
                         .layout-menuitem-icon {
                             font-size: 1.5rem;
+
                         }
 
                         .layout-menuitem-text {

package/scss/layout/_sidebar_slim_plus.scss

@@ -1,3 +1,5 @@
+@use './_sass_variables' as *;
+
 @media screen and (min-width: $breakpoint) {
     .layout-container {
         &.layout-slim-plus {
@@ -9,7 +11,7 @@
 
             .sidebar-header {
                 justify-content: center;
-                padding: 1.7rem 0;
+                padding:  1.7rem 0;
                 .app-logo {
                     display: flex;
                     justify-content: center;
@@ -69,7 +71,7 @@
                         cursor: pointer;
                         border: none;
                         outline: none;
-                        transition: background-color var(--transition-duration);
+                        transition: background-color var(--layout-section-transition-duration);
                         width: auto;
                         height: auto;
                         margin: 0 auto 1rem auto;
@@ -91,6 +93,7 @@
                             color: var(--text-color);
                         }
 
+
                         &:hover {
                             background-color: var(--root-menu-item-hover-bg);
                         }

package/scss/layout/_sidebar_vertical.scss

@@ -1,3 +1,5 @@
+@use './_sass_variables' as *;
+
 .layout-sidebar {
     position: fixed;
     height: 100%;
@@ -6,7 +8,7 @@
     width: 21rem;
     display: flex;
     flex-direction: column;
-    border-radius: 0 40px 40px 0;
+    border-radius: 0px 40px 40px 0px;
 
     .sidebar-header {
         padding: 1.7rem 1.57rem 0.5rem 2.42rem;
@@ -16,6 +18,7 @@
 
         .app-logo {
             width: 100%;
+
             .app-logo-normal {
                 display: inline;
                 img {
@@ -23,16 +26,21 @@
                     border: 0 none;
                 }
             }
+
             .app-logo-small {
+                display: none;
+
                 img {
                     height: 2.5rem;
                     border: 0 none;
                 }
-                display: none;
             }
         }
-    }
 
+        .layout-sidebar-anchor {
+            display: none;
+        }
+    }
     .layout-menu-container {
         overflow: auto;
         flex: 1;
@@ -109,9 +117,7 @@
                 cursor: pointer;
                 padding: 0.5rem 1rem;
                 border-radius: 8px;
-                transition:
-                    background-color var(--transition-duration),
-                    box-shadow var(--transition-duration);
+                transition: background-color var(--layout-section-transition-duration), box-shadow var(--layout-section-transition-duration);
 
                 .layout-menuitem-icon {
                     margin-right: 0.5rem;
@@ -120,7 +126,7 @@
                 .layout-submenu-toggler {
                     font-size: 75%;
                     margin-left: auto;
-                    transition: transform var(--transition-duration);
+                    transition: transform var(--layout-section-transition-duration);
                 }
 
                 &.active-route {

package/scss/layout/_topbar.scss

@@ -1,14 +1,16 @@
 .layout-rightmenu-button {
-    background: linear-gradient(271.89deg, rgba(70, 82, 104, 1), rgba(115, 130, 161, 1));
-    border-radius: 6px 0 0 6px;
-    border-color: transparent;
-    border-left: 0 none;
-    box-shadow: 0 0 10px rgb(15 139 253 / 25%);
+    background: linear-gradient(271.89deg, rgba(70, 82, 104, 1), rgba(115, 130, 161, 1)) !important;
+    border-radius: 6px 0px 0px 6px !important;
+    border-color: transparent !important;
+    border-left: 0 none !important;
+    box-shadow: 0px 0px 10px rgb(15 139 253 / 25%) !important;
     right: 0;
-    color: #fff;
+    color: #fff !important;
+
     span {
         font-weight: 400 !important;
     }
+
     &:enabled:hover {
         background: linear-gradient(271.89deg, rgba(70, 82, 104, 0.5), rgba(115, 130, 161, 0.5));
         border-color: transparent;
@@ -25,29 +27,14 @@
         align-items: center;
         position: relative;
         z-index: 999;
+
         .topbar-menubutton {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            margin-right: 2rem;
-            border-radius: var(--border-radius);
+            margin-right: 1.5rem;
             width: 2.5rem;
             height: 2.5rem;
-            flex-shrink: 0;
-            transition: background-color var(--transition-duration);
 
             i {
                 font-size: 1.25rem;
-                color: var(--text-color);
-                transition: color var(--transition-duration);
-            }
-
-            &:hover {
-                background-color: var(--primary-color);
-
-                i {
-                    color: var(--primary-color-text);
-                }
             }
         }
     }
@@ -61,14 +48,15 @@
         padding-right: 0;
         list-style: none;
         flex-grow: 1;
-        color: var(--topbar-item-text-color);
         margin-right: -2rem;
 
         li {
             margin-left: 1.5rem;
+
             &.topbar-item {
                 margin-left: 1.5rem;
                 display: inline-flex;
+                flex-shrink: 0;
                 align-items: center;
                 justify-content: center;
                 position: relative;
@@ -82,22 +70,21 @@
                     border-radius: 50%;
                     width: 2rem;
                     height: 2rem;
-                    transition: box-shadow var(--transition-duration);
+                    transition: box-shadow var(--layout-section-transition-duration);
 
                     &:focus {
-                        box-shadow: var(--focus-ring);
+                        box-shadow: var(--focus-ring-shadow);
                     }
                 }
 
                 ul {
                     position: absolute;
-                    bottom: -9rem;
+                    bottom: -9.4rem;
                     right: 0;
-                    margin-right: 0;
                     display: none;
                     color: var(--text-color);
                     background: var(--surface-ground);
-                    box-shadow: var(--box-shadow);
+
                     &.active-topbar-menu {
                         display: block;
                     }
@@ -107,10 +94,12 @@
                     }
                 }
             }
+
             .topbar-search {
                 display: flex;
                 align-items: center;
                 flex-shrink: 0;
+
                 .topbar-searchbutton {
                     display: flex;
                 }
@@ -122,20 +111,16 @@
                     visibility: hidden;
                     transition: 400ms cubic-bezier(0.86, 0, 0.07, 1);
 
-                    span {
+                    .p-inputtext {
                         width: 100%;
+                        position: relative;
+                        border-radius: 40px;
+                        padding: 9px;
+                    }
 
-                        .p-inputtext {
-                            width: 100%;
-                            position: relative;
-                            border-radius: 40px;
-                            padding: 9px;
-                        }
-
-                        i {
-                            font-size: 18px;
-                            margin-top: -9px;
-                        }
+                    span {
+                        font-size: 18px;
+                        margin-top: -9px;
                     }
                 }
 
@@ -154,6 +139,7 @@
                         opacity: 1;
                         visibility: visible;
                         border-radius: var(--border-radius);
+
                         i {
                             display: block;
                         }
@@ -163,12 +149,56 @@
                     }
                 }
             }
+        }
 
-            button {
-                span {
-                    color: var(--item-text-color);
-                }
+        .config-button {
+            position: relative;
+
+            &::before,
+            &::after {
+                content: '';
+                position: absolute;
+                inset: 0;
+                border: 1px solid var(--primary-color);
+                transition: all 0.5s;
+                animation: clippath 10s infinite linear;
+                border-radius: 50%;
+                opacity: 1;
+            }
+
+            &::after {
+                animation: clippath 10s infinite -5s linear;
             }
         }
     }
 }
+
+@keyframes clippath {
+    0% {
+        clip-path: inset(0 0 98% 0);
+    }
+    12.5% {
+        clip-path: inset(0 0 60% 0);
+    }
+    25% {
+        clip-path: inset(0 98% 0 0);
+    }
+    37.5% {
+        clip-path: inset(0 60% 0 0);
+    }
+    50% {
+        clip-path: inset(98% 0 0 0);
+    }
+    62.5% {
+        clip-path: inset(60% 0 0 0);
+    }
+    75% {
+        clip-path: inset(0 0 0 98%);
+    }
+    87.5% {
+        clip-path: inset(0 0 0 60%);
+    }
+    100% {
+        clip-path: inset(0 0 98% 0);
+    }
+}

package/scss/layout/_utils.scss

@@ -24,10 +24,6 @@
     &.p-toast-top-right,
     &.p-toast-top-left,
     &.p-toast-top-center {
-        top: 70px;
+        top: 70px !important;
     }
 }
-
-.ng-hidden {
-    display: none !important;
-}

package/scss/layout/layout.scss

@@ -1,24 +1,31 @@
-$breakpoint: 992px !default;
-$scale: 14px !default;
+@use './_sass_variables';
+@use './mng/variables/mng-variables-common';
+@use './variables/_common';
+@use './variables/_light';
+@use './variables/_dark';
+@use './_main';
+@use './_sidebar_slim';
+@use './_sidebar_slim_plus';
+@use './_sidebar_vertical';
+@use './_sidebar_horizontal';
+@use './_sidebar_reveal';
+@use './_sidebar_drawer';
+@use './_responsive';
+@use './_topbar';
+@use './_breadcrumb';
+@use './_profile';
+@use './_content';
+@use './_config';
+@use './_utils';
 
-//@import './_fonts';
-@import './_animation';
-@import './_layout_light';
-@import './_layout_dark';
-@import './_main';
-@import './_sidebar_vertical';
-@import './_sidebar_slim';
-@import './_sidebar_slim_plus';
-//@import './_sidebar_horizontal';
-@import './_sidebar_reveal';
-@import './_sidebar_drawer';
-@import './_responsive';
-@import './_topbar';
-@import './_breadcrumb';
-@import './_profile';
-@import './_config';
-@import './_content';
-@import './_typography';
-@import './_utils';
+// mng layout
+@use './mng/layout/mng_layout_footer';
+@use './mng/layout/mng_layout_menu';
+@use './mng/layout/mng_layout_topbar';
+@use './mng/layout/mng_sidebar_vertical';
 
-@import 'mng/mng_layout_styles';
+// mng theme (primeNG directly)
+@use './mng/theme/mng_theme_button';
+@use './mng/theme/mng_theme_dialog';
+@use './mng/theme/mng_theme_toast';
+@use './mng/theme/mng_theme_toggleswitch';

package/scss/layout/mng/{_mng_layout_menu.scss → layout/_mng_layout_menu.scss}

@@ -4,7 +4,3 @@
         font-size: 0.875rem;
     }
 }
-
-.p-menu {
-    width: auto !important;
-}

package/scss/layout/mng/{_mng_layout_topbar.scss → layout/_mng_layout_topbar.scss}

@@ -5,8 +5,8 @@
 
 .layout-topbar .topbar-menu li.topbar-item ul {
     padding: 8px 0 8px 0;
-    background: $inputOverlayBg;
-    box-shadow: $inputOverlayShadow;
+    background: var(--surface-card);
+    box-shadow: var(--p-overlay-navigation-shadow);
 
     & li {
         margin-left: 0;

package/scss/layout/mng/theme/_mng_theme_button.scss

@@ -0,0 +1,63 @@
+.p-button {
+    &.mng-button-xs {
+        font-size: var(--mng-button-xs-font-size);
+        padding-block: var(--mng-button-xs-padding-y);
+        padding-inline: var(--mng-button-xs-padding-x);
+    }
+
+    // double that, just in case
+    &.mng-button-sm {
+        font-size: var(--p-button-sm-font-size);
+        padding-block: var(--p-button-sm-padding-y);
+        padding-inline: var(--p-button-sm-padding-x);
+    }
+
+    // double that, just in case
+    &.mng-button-lg {
+        font-size: var(--p-button-lg-font-size);
+        padding-block: var(--p-button-lg-padding-y);
+        padding-inline: var(--p-button-lg-padding-x);
+    }
+
+    &.mng-button-xl {
+        font-size: var(--mng-button-xl-font-size);
+        padding-block: var(--mng-button-xl-padding-y);
+        padding-inline: var(--mng-button-xl-padding-x);
+    }
+
+    &.p-button-icon-only {
+        &.mng-button-xs {
+            width: var(--mng-button-icon-only-xs-width);
+
+            &.p-button-rounded {
+                height: var(--mng-button-icon-only-xs-width);
+            }
+        }
+
+        &.mng-button-sm,
+        &.p-button-sm {
+            width: var(--mng-button-icon-only-sm-width);
+
+            &.p-button-rounded {
+                height: var(--mng-button-icon-only-sm-width);
+            }
+        }
+
+        &.mng-button-lg,
+        &.p-button-lg {
+            width: var(--mng-button-icon-only-lg-width);
+
+            &.p-button-rounded {
+                height: var(--mng-button-icon-only-lg-width);
+            }
+        }
+
+        &.mng-button-xl {
+            width: var(--mng-button-icon-only-xl-width);
+
+            &.p-button-rounded {
+                height: var(--mng-button-icon-only-xl-width);
+            }
+        }
+    }
+}