ui-soxo-bootstrap-core 2.6.1-dev.17 → 2.6.1-dev.18

package/core/lib/components/global-header/global-header.scss

@@ -123,7 +123,7 @@
   .right-section {
     margin-top: 0px;
     width: 100%;
-    overflow-x: scroll;
+    overflow-x: auto;
     position: relative;
     padding: 15px;
     margin-left: 212px;
@@ -155,12 +155,10 @@
       }
     }
 
-   @media only screen and (max-width: 768px) {
+    @media only screen and (max-width: 768px) {
       margin-left: 0 !important; // remove left margin on mobile
       padding: 10px !important;
     }
-
-
   }
 
   .profile-avatar {
@@ -203,16 +201,19 @@
     display: flex;
     justify-content: space-between;
     // padding: 3px 8px;
-    border-bottom: 1px solid #d7d7d787;
+    border: 1px solid rgba(224, 229, 238, 0.9);
     position: fixed;
-    height: 56px;
+    height: 58px;
     top: 0;
-    background: white;
+    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(249, 250, 252, 0.98) 100%);
+    backdrop-filter: blur(12px);
     z-index: 1000;
     width: 92%;
     overflow-x: hidden;
     overflow-y: hidden;
-    padding: 15px;
+    padding: 8px 12px;
+    border-radius: 0 0 14px 14px;
+    box-shadow: 0 10px 26px rgba(16, 24, 40, 0.06);
 
     &.open {
       width: calc(100% - 212px);
@@ -220,20 +221,27 @@
       left: 212px;
     }
 
-  @media only screen and (max-width: 768px) {
-    padding: 8px 10px 8px 14px !important;
-    left: 0 !important;
-    width: 100% !important;
+    &.close {
+      width: calc(100% - 96px);
+      left: 88px;
+    }
 
-    &.open {
-      width: 100% !important;
+    @media only screen and (max-width: 768px) {
+      padding: 8px 10px 8px 14px !important;
       left: 0 !important;
-    }
-  }
+      width: 100% !important;
 
+      &.open {
+        width: 100% !important;
+        left: 0 !important;
+      }
+    }
 
     .page-header-name {
       display: flex;
+      align-items: center;
+      gap: 8px;
+      min-width: 0;
     }
 
     &.hidden {
@@ -243,23 +251,41 @@
     .toggle-box {
       display: flex;
       align-items: center;
+      justify-content: center;
       cursor: pointer;
+      min-width: 34px;
+      height: 34px;
+      border-radius: 10px;
+      background: rgba(255, 255, 255, 0.8);
+      transition:
+        background-color 180ms ease,
+        border-color 180ms ease,
+        box-shadow 180ms ease,
+        transform 180ms ease;
 
       h4 {
         margin-bottom: 0px;
       }
+
+      &:hover {
+        background: rgba(247, 248, 251, 0.98);
+        border-color: rgba(219, 225, 235, 0.95);
+        box-shadow: 0 2px 8px rgba(71, 85, 105, 0.08);
+        transform: translateY(-1px);
+      }
     }
 
     .toggle-menu {
-      margin-right: 10px;
+      margin-right: 2px;
       cursor: pointer;
       // padding: 10px;
       // border-radius: 4px;
       // border: 1px solid #dcdcdc;
-      margin-right: 10px;
+      margin-right: 6px;
+      border: 1px solid rgba(225, 231, 240, 0.95);
 
       span {
-        margin-right: 10px;
+        margin-right: 0;
       }
 
       &:hover {
@@ -280,22 +306,97 @@
     .page-menu {
       display: flex;
       align-items: center;
-      gap: 15px;
+      gap: 8px;
+      min-width: 0;
+      padding: 4px 6px;
+      border-radius: 12px;
+      border: 1px solid rgba(228, 233, 242, 0.9);
+      background: rgba(255, 255, 255, 0.72);
+      backdrop-filter: blur(8px);
 
       a {
-        margin: 0px 5px;
+        margin: 0;
+      }
+
+      .header-action {
+        display: inline-flex;
+        align-items: center;
+        min-height: 34px;
+      }
+
+      .header-action .ant-btn {
+        border-radius: 10px;
+        border-color: rgba(223, 229, 238, 0.95);
+        background: rgba(255, 255, 255, 0.9);
+        box-shadow: none;
+        transition:
+          border-color 180ms ease,
+          box-shadow 180ms ease,
+          transform 180ms ease,
+          background-color 180ms ease;
+      }
+
+      .header-action .ant-btn:hover {
+        background: rgba(247, 248, 251, 0.98);
+        border-color: rgba(219, 225, 235, 0.95);
+        box-shadow: 0 2px 8px rgba(71, 85, 105, 0.08);
+        transform: translateY(-1px);
+      }
+
+      .header-action-search {
+        position: relative;
+      }
+
+      .header-action-search .ant-input-affix-wrapper {
+        height: 34px;
+        border-radius: 10px;
+        border-color: rgba(223, 229, 238, 0.95);
+        background: rgba(255, 255, 255, 0.9);
+        box-shadow: none;
+        transition:
+          border-color 180ms ease,
+          box-shadow 180ms ease,
+          background-color 180ms ease;
+      }
+
+      .header-action-search .ant-input-affix-wrapper:hover {
+        border-color: rgba(214, 221, 232, 0.95);
+        background: rgba(249, 250, 252, 0.98);
+      }
+
+      .header-action-search .ant-input-affix-wrapper:focus-within {
+        border-color: rgba(148, 163, 184, 0.95);
+        box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.14);
       }
 
       .branch-selection {
         margin: 0px 10px;
       }
-       .branch-switcher {
+      .branch-switcher {
         .branches {
           .ant-select {
             min-width: 150px;
           }
         }
       }
+
+      .header-profile-wrap {
+        padding: 0 6px 0 2px;
+        border-radius: 10px;
+        border: 1px solid rgba(228, 233, 242, 0.75);
+        background: rgba(255, 255, 255, 0.82);
+        gap: 4px;
+      }
+
+      .header-profile-name {
+        display: inline-block;
+        max-width: 132px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        font-size: 12px;
+        font-weight: 600;
+      }
     }
 
     .header-blk {
@@ -315,6 +416,10 @@
       margin-bottom: 10px;
     }
   }
+
+  .page-content-stage {
+    will-change: transform, opacity;
+  }
 }
 
 .side-drawer-content-wrapper {
@@ -323,7 +428,40 @@
       padding: 0px;
     }
   }
- 
+}
+
+@media only screen and (max-width: 1100px) {
+  .global-header {
+    .page-wrapper {
+      .page-menu {
+        gap: 6px;
+      }
+
+      .page-menu .header-profile-name {
+        max-width: 88px;
+      }
+
+      .page-menu .header-action-search .ant-input-affix-wrapper {
+        width: 210px !important;
+      }
+    }
+  }
+}
+
+@media only screen and (max-width: 900px) {
+  .global-header {
+    .page-wrapper {
+      padding: 7px 10px;
+
+      .page-menu {
+        padding: 4px;
+      }
+
+      .page-menu .header-profile-name {
+        display: none;
+      }
+    }
+  }
 }
 
 .sidebar-container {
@@ -361,7 +499,7 @@
       .ant-drawer-body {
         padding: 0px;
       }
-      .ant-drawer-header{
+      .ant-drawer-header {
         padding: 2px 20px;
       }
     }

package/core/lib/components/sidemenu/animations.js

@@ -22,7 +22,89 @@ export const boxVariants = {
     },
     right: { x: [null, 150, 0] },
     zoom: { scale: [null, 2, 1], rotate: [0, 90, 0] }
-  }
+  };
+
+export const sidebarIntroVariants = {
+  hidden: {
+    opacity: 0,
+    y: -10,
+    filter: 'blur(6px)',
+  },
+  visible: {
+    opacity: 1,
+    y: 0,
+    filter: 'blur(0px)',
+    transition: {
+      duration: 0.35,
+      ease: [.22,1,.36,1],
+    },
+  },
+};
+
+export const sidebarMenuSurfaceVariants = {
+  hidden: {
+    opacity: 0,
+    x: -10,
+    filter: 'blur(4px)',
+  },
+  visible: {
+    opacity: 1,
+    x: 0,
+    filter: 'blur(0px)',
+    transition: {
+      duration: 0.4,
+      ease: [.22,1,.36,1],
+      when: 'beforeChildren',
+      staggerChildren: 0.035,
+      delayChildren: 0.05,
+    },
+  },
+};
+
+export const sidebarGroupVariants = {
+  hidden: {},
+  visible: {
+    transition: {
+      staggerChildren: 0.03,
+    },
+  },
+};
+
+export const sidebarItemRevealVariants = {
+  hidden: { opacity: 0, x: -8, y: 2 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    y: 0,
+    transition: {
+      duration: 0.26,
+      ease: [.22,1,.36,1],
+    },
+  },
+};
+
+export const sidebarLoaderContainerVariants = {
+  hidden: { opacity: 0 },
+  visible: {
+    opacity: 1,
+    transition: {
+      staggerChildren: 0.06,
+      delayChildren: 0.04,
+    },
+  },
+};
+
+export const sidebarLoaderRowVariants = {
+  hidden: { opacity: 0, x: -8 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      duration: 0.25,
+      ease: [.22,1,.36,1],
+    },
+  },
+};
   
   export const barsVariant = {
     animate: { transition: { staggerChildren: 0.095 } }
@@ -49,4 +131,4 @@ export const boxVariants = {
       scale: [1, 0, 1],
       rotate: [0, 360, 0]
     }
-  }
+  }