ui-soxo-bootstrap-core 2.4.25-dev.41 → 2.4.25-dev.44

package/core/lib/components/sidemenu/sidemenu.scss

@@ -1,277 +1,277 @@
-.sidemenu {
-  .intro {
-    .logo-wrapper {
-      border-bottom: none;
-    }
-
-    // border-bottom: 1px solid #eaeaea;
-  }
-
-  .sidebar-footer {
-    img.footer-logo {
-      width: 175px;
-    }
-  }
-}
-
-.sidemenu {
-  .intro {
-    padding: 10px;
-    height: 57px;
-
-    // border-bottom: 1px solid #eaeaea;
-
-    .logo-wrapper {
-      border-bottom: none;
-    }
-
-    h3 {
-      margin-left: 10px;
-    }
-  }
-}
-
-.sidemenu {
-  .side-loader {
-    margin: 20px 20px;
-  }
-
-  .intro {
-    padding: 5px 16px;
-    position: fixed;
-    z-index: 1000;
-    width: 17%;
-    background: #fff;
-    // border-bottom: 1.5px solid #24aeb8;
-    &.close {
-      width: 6% !important;
-    }
-
-    .logo-wrapper {
-      // height: 15px;
-      // border-bottom: 1px solid #eaeaea;
-
-      .sidemenu-brand-logo {
-        // width: 50%;
-        // margin: 10px;
-        // width: 200px;
-
-        &.open {
-          // height: 15px;
-          // height: 10px;
-          width: 100px !important;
-        }
-
-        &.close {
-          height: 17px;
-
-          width: 59px !important;
-        }
-
-        @media only screen and (max-width: 500px) {
-          margin-right: 0px;
-          // margin: 10px;
-          width: 150px;
-        }
-
-        cursor: pointer;
-      }
-    }
-
-    small {
-      margin: 0px 10px;
-    }
-
-    .locations {
-      margin: 10px 0px;
-
-      .ant-tag {
-        margin-right: 4px;
-
-        margin-bottom: 4px;
-      }
-    }
-  }
-
-  .menu-item {
-    padding-top: 10px;
-    // height: calc(100vh - 48px); /* Adjust height */
-    height: 100vh;
-    margin-top: 0px;
-    width: 256px;
-    top: 48px;
-    border-bottom: 1px solid #f0f0f0;
-    position: fixed;
-    height: 100vh;
-    margin-top: 0;
-    overflow-y: scroll;
-    overflow-x: hidden;
-    width: 211px;
-    padding-bottom: 50px;
-
-    /* Custom Scrollbar like macOS */
-    scrollbar-width: thin; /* For Firefox */
-    scrollbar-color: #c0c0c0 transparent; /* Track color */
-
-    /* WebKit Scrollbar (Chrome, Edge, Safari) */
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.3);
-      border-radius: 10px;
-    }
-
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-
-    &::-webkit-scrollbar-thumb:hover {
-      background: rgba(0, 0, 0, 0.5);
-    }
-    // when toggle open and close
-    &.open {
-      width: 211px !important;
-    }
-
-    &.close {
-      width: 81px !important;
-    }
-    .ant-skeleton {
-      margin: 80px;
-    }
-
-    .ant-menu-inline {
-      border: none !important;
-    }
-
-    .menu-collapsed {
-      width: 81px;
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      cursor: pointer;
-    }
-
-    .menu-collapsed .anticon {
-      margin-right: 8px;
-    }
-
-    /* Pseudo-element  (as before) */
-    .menu-collapsed::after {
-      content: '';
-      position: absolute;
-      top: -100%;
-      left: 0;
-      // width: 100%;
-      height: 100%;
-
-      transition: top 0.5s ease-in-out;
-    }
-
-    /* On hover, change background color  */
-    .menu-collapsed:hover {
-      // background-color: #E0EBFF;
-      // transform: scale(0.95); /* Apply scale effect on hover */
-    }
-    /* Style selected item */
-    .ant-menu {
-      background-color: transparent !important;
-    }
-    // .ant-menu-inline .ant-menu-item::after{
-    //   border-right: none;
-    // }
-    // .ant-menu-item-selected {
-    //   background-color: var(--selected-bg-color) !important;
-    //   color: var(--selected-text-color) !important;
-    //    border-radius: 12px;
-    //   // font-weight: 600;
-    //   // margin: 4px 8px;
-    // }
-
-    // /* Optional: remove hover effects */
-    // .ant-menu-item:hover {
-    //   background-color: transparent !important;
-    //   color: transparent !important;
-    // }
-
-    /* River flow effect */
-    .menu-collapsed:hover::after {
-      top: 0%;
-    }
-  }
-
-  .sidebar-footer {
-    position: fixed;
-
-    bottom: 0px;
-
-    width: 250px;
-
-    background-color: white;
-
-    border-top: 1px solid #e3e3e3;
-
-    &.open {
-      width: 256 !important;
-    }
-
-    &.close {
-      width: 80px !important;
-
-      img.footer-logo {
-        display: none;
-      }
-    }
-
-    img.footer-logo {
-      width: 120px;
-
-      padding: 10px;
-    }
-  }
-}
-@media only screen and (max-width: 768px) {
-  .sidemenu {
-    // width: 100% !important;
-    // z-index: 1200;
-    // position: fixed;
-    // left: 0;
-    // top: 0;
-    // height: 100vh;
-    // background: white;
-
-    .intro {
-      width: 210px;
-      height: 60px;
-      padding: 0px;
-      // width: 100% !important;
-      // padding: 10px 16px;
-    }
-
-    .menu-item {
-      width: 100% !important;
-      top: 62px;
-    }
-
-    .sidebar-footer {
-      width: 100% !important;
-    }
-  }
-}
-
-.ant-menu-item:hover {
-  background-color: #e6f7ff !important;
-  color: #1677ff !important;
-}
-
-/* Tooltip styling if needed */
-.ant-tooltip-inner {
-  max-width: 200px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  background-color: #ffffff !important;
-  color: #000000 !important;
-}
+.sidemenu {
+  .intro {
+    .logo-wrapper {
+      border-bottom: none;
+    }
+
+    // border-bottom: 1px solid #eaeaea;
+  }
+
+  .sidebar-footer {
+    img.footer-logo {
+      width: 175px;
+    }
+  }
+}
+
+.sidemenu {
+  .intro {
+    padding: 10px;
+    height: 57px;
+
+    // border-bottom: 1px solid #eaeaea;
+
+    .logo-wrapper {
+      border-bottom: none;
+    }
+
+    h3 {
+      margin-left: 10px;
+    }
+  }
+}
+
+.sidemenu {
+  .side-loader {
+    margin: 20px 20px;
+  }
+
+  .intro {
+    padding: 5px 16px;
+    position: fixed;
+    z-index: 1000;
+    width: 17%;
+    background: #fff;
+    // border-bottom: 1.5px solid #24aeb8;
+    &.close {
+      width: 6% !important;
+    }
+
+    .logo-wrapper {
+      // height: 15px;
+      // border-bottom: 1px solid #eaeaea;
+
+      .sidemenu-brand-logo {
+        // width: 50%;
+        // margin: 10px;
+        // width: 200px;
+
+        &.open {
+          // height: 15px;
+          // height: 10px;
+          width: 100px !important;
+        }
+
+        &.close {
+          height: 17px;
+
+          width: 59px !important;
+        }
+
+        @media only screen and (max-width: 500px) {
+          margin-right: 0px;
+          // margin: 10px;
+          width: 150px;
+        }
+
+        cursor: pointer;
+      }
+    }
+
+    small {
+      margin: 0px 10px;
+    }
+
+    .locations {
+      margin: 10px 0px;
+
+      .ant-tag {
+        margin-right: 4px;
+
+        margin-bottom: 4px;
+      }
+    }
+  }
+
+  .menu-item {
+    padding-top: 10px;
+    // height: calc(100vh - 48px); /* Adjust height */
+    height: 100vh;
+    margin-top: 0px;
+    width: 256px;
+    top: 48px;
+    border-bottom: 1px solid #f0f0f0;
+    position: fixed;
+    height: 100vh;
+    margin-top: 0;
+    overflow-y: scroll;
+    overflow-x: hidden;
+    width: 211px;
+    padding-bottom: 50px;
+
+    /* Custom Scrollbar like macOS */
+    scrollbar-width: thin; /* For Firefox */
+    scrollbar-color: #c0c0c0 transparent; /* Track color */
+
+    /* WebKit Scrollbar (Chrome, Edge, Safari) */
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.3);
+      border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background: rgba(0, 0, 0, 0.5);
+    }
+    // when toggle open and close
+    &.open {
+      width: 211px !important;
+    }
+
+    &.close {
+      width: 81px !important;
+    }
+    .ant-skeleton {
+      margin: 80px;
+    }
+
+    .ant-menu-inline {
+      border: none !important;
+    }
+
+    .menu-collapsed {
+      width: 81px;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    .menu-collapsed .anticon {
+      margin-right: 8px;
+    }
+
+    /* Pseudo-element  (as before) */
+    .menu-collapsed::after {
+      content: '';
+      position: absolute;
+      top: -100%;
+      left: 0;
+      // width: 100%;
+      height: 100%;
+
+      transition: top 0.5s ease-in-out;
+    }
+
+    /* On hover, change background color  */
+    .menu-collapsed:hover {
+      // background-color: #E0EBFF;
+      // transform: scale(0.95); /* Apply scale effect on hover */
+    }
+    /* Style selected item */
+    .ant-menu {
+      background-color: transparent !important;
+    }
+    // .ant-menu-inline .ant-menu-item::after{
+    //   border-right: none;
+    // }
+    // .ant-menu-item-selected {
+    //   background-color: var(--selected-bg-color) !important;
+    //   color: var(--selected-text-color) !important;
+    //    border-radius: 12px;
+    //   // font-weight: 600;
+    //   // margin: 4px 8px;
+    // }
+
+    // /* Optional: remove hover effects */
+    // .ant-menu-item:hover {
+    //   background-color: transparent !important;
+    //   color: transparent !important;
+    // }
+
+    /* River flow effect */
+    .menu-collapsed:hover::after {
+      top: 0%;
+    }
+  }
+
+  .sidebar-footer {
+    position: fixed;
+
+    bottom: 0px;
+
+    width: 250px;
+
+    background-color: white;
+
+    border-top: 1px solid #e3e3e3;
+
+    &.open {
+      width: 256 !important;
+    }
+
+    &.close {
+      width: 80px !important;
+
+      img.footer-logo {
+        display: none;
+      }
+    }
+
+    img.footer-logo {
+      width: 120px;
+
+      padding: 10px;
+    }
+  }
+}
+@media only screen and (max-width: 768px) {
+  .sidemenu {
+    // width: 100% !important;
+    // z-index: 1200;
+    // position: fixed;
+    // left: 0;
+    // top: 0;
+    // height: 100vh;
+    // background: white;
+
+    .intro {
+      width: 210px;
+      height: 60px;
+      padding: 0px;
+      // width: 100% !important;
+      // padding: 10px 16px;
+    }
+
+    .menu-item {
+      width: 100% !important;
+      top: 62px;
+    }
+
+    .sidebar-footer {
+      width: 100% !important;
+    }
+  }
+}
+
+.ant-menu-item:hover {
+  background-color: #e6f7ff !important;
+  color: #1677ff !important;
+}
+
+/* Tooltip styling if needed */
+.ant-tooltip-inner {
+  max-width: 200px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  background-color: #ffffff !important;
+  color: #000000 !important;
+}