@dashadmin/dash-styles 1.3.17 → 1.3.19

package/dist/styles/sidebar.less

@@ -0,0 +1,705 @@
+.expanded.small, .collapsed.large, .collapsed.small {
+  .sidebar-drawer .MuiDrawer-paper {
+     width: var(--sidebar-small-width);
+     transition: width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
+     overflow-x: hidden;
+  }
+}
+
+.expanded.large {
+  .sidebar-drawer .MuiDrawer-paper {
+     width: var(--sidebar-large-width);
+     transition: width 195ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+     overflow-x: hidden;
+  }
+}
+
+// Alternative approach - add transitions to all drawer papers
+.sidebar-drawer .MuiDrawer-paper {
+    transition: width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
+    overflow-x: hidden;
+}
+
+// Specific timing for expanding (faster)
+.expanded.large .sidebar-drawer .MuiDrawer-paper {
+    transition: width 195ms cubic-bezier(0.0, 0, 0.2, 1) 0ms;
+}
+
+// Specific timing for collapsing (slower)
+.collapsed .sidebar-drawer .MuiDrawer-paper,
+.expanded.small .sidebar-drawer .MuiDrawer-paper {
+    transition: width 225ms cubic-bezier(0.4, 0, 0.6, 1) 0ms;
+}
+
+ .dash-menu-actions {
+        display: flex;
+        align-self: anchor-center;
+        flex-direction: row;
+ }
+
+.expanded.large .dash-menu-user {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    margin-top: -30px;
+
+  .dash-menu-actions {
+        display: flex;
+        align-self: anchor-center;
+        flex-direction: row;
+        justify-content: flex-end;
+        width: 200px;
+        position:absolute;
+        bottom:0px;
+        gap:5px;
+  }
+  .dash-user-avatar {
+      .MuiAvatar-root{
+          width: 200px;
+          height: 200px;
+          background-color: var(--primary-color);
+      }
+  }
+}
+
+.collapsed .dash-menu-user, .small .dash-menu-user {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    gap:8px;
+
+  .dash-menu-actions {
+    align-self: anchor-center;
+
+        display: flex;
+        flex-direction: column;
+         justify-content: center;
+        gap:8px;
+       align-items: center;
+  }
+  .dash-user-avatar {
+
+      .MuiAvatar-root{
+          width: 50px;
+          height: 50px;
+        background-color: var(--primary-color);
+      }
+  }
+}
+
+
+.dash-icon-button {
+    &-color {
+            color:  var(--highlight-color);
+            svg {
+                fill: var(--highlight-color);
+            }
+            &:hover {       
+                svg {
+                fill: var(--highlight-color-contrast);
+                }
+                color: var(--highlight-color-contrast);
+            }
+    }
+    &-bg {
+            color:  var(--text-color);
+            background-color: var(--secondary-color);
+            svg {
+                fill: var(--text-color);
+            }
+            &:hover {
+                color:  var(--text-color);
+                background-color: var(--highlight-color);
+                svg {
+                fill: var(--text-color);
+                }
+            }
+    }
+}
+
+
+
+.dash-language-menu-portal {
+    background: var(--module-bg);
+
+    z-index: 9999;
+    pointer-events: none;
+
+    .dash-language-menu {
+        background: var(--module-bg);
+        color: var(--text-light);
+        box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
+        border-radius: 4px;
+        pointer-events: auto;
+        display: none;
+
+         &.show {
+            display: block;
+            animation: popIn 0.2s ease-out forwards;
+        }
+
+        &.hide {
+            animation: popOut 0.2s ease-out forwards;
+        }
+
+        .dash-language-menu-item {
+            &:hover {
+                background-color: var(--component-hover-bg) !important;
+            }
+
+            &.selected {
+                font-weight: 500;
+            }
+        }
+    }
+}
+
+// This is the popover of the Avatar
+.dash-user-menu-portal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    pointer-events: none;
+
+    .dash-user-menu {
+        pointer-events: auto;
+        display: none;
+
+        &.show {
+            display: block;
+            animation: popIn 0.2s ease-out forwards;
+        }
+
+        &.hide {
+            animation: popOut 0.2s ease-out forwards;
+        }
+    }
+}
+.dash-user-menu {
+    background-color: var(--module-bg);
+    color: var(--text-light);
+    box-shadow: 0px 5px 5px -3px rgba(0,0,0,0.2), 0px 8px 10px 1px rgba(0,0,0,0.14), 0px 3px 14px 2px rgba(0,0,0,0.12);
+    border-radius: 4px;
+    min-width: 200px;
+    padding: 8px 0;
+
+    span,p {
+          color: var(--text-light) !important;
+    }
+    svg {
+        fill: var(--text-light) !important;
+    }
+
+    /*.dash-user-item {
+        &:hover {
+            background-color: var(--component-hover-bg) !important;
+
+            .dash-user-icon {
+                color: var(--highlight-color);
+                svg {
+                    color: var(--highlight-color) !important;
+                    fill: var(--highlight-color) !important;
+                }
+            }
+        }
+
+        .dash-user-icon {
+            display: flex;
+            align-items: center;
+            margin-right: 8px;
+            color: var(--secondary-color);
+            svg {
+                color: var(--secondary-color) !important;
+                fill: var(--secondary-color) !important;
+            }
+        }
+    }*/
+
+    .dash-user-name {
+        font-weight: 500;
+        border-bottom: 1px solid var(--border-color);
+        margin-bottom: 8px;
+    }
+}
+
+  .sidebar-drawer {
+      z-index: 2000;
+
+      > .MuiPaper-root.MuiDrawer-paper{
+          //background: linear-gradient(140deg, var(--primary-color) 60%, var(--primary-contrast) 100%);
+          background: linear-gradient(140deg, var(--primary-color) 60%, var(--primary-contrast) 100%);
+         
+          flex-shrink: 0;
+          white-space: nowrap;
+          box-sizing: border-box;
+          border-radius: 0px 20px 20px 0px;
+          box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
+      }
+      /*.sidebar-header{
+          width: 100%;
+          padding: 10px;
+      }*/
+      .sidebar-logo{
+          display: block;
+          height: 50px;
+          margin: 10px auto;
+          > img{
+              width: 100%;
+              height: 100%;
+              object-fit: contain;
+          }
+      }
+      /*dark & .sidebar-logo{
+          > img{
+              filter: brightness(0) invert(1);
+          }
+      }*/
+
+      .sidebar-list {
+          display: flex;
+          flex-direction: column;
+          overflow-y: auto;
+          &::-webkit-scrollbar {
+              width: 5px;
+          }
+          &::-webkit-scrollbar-track {
+              background: transparent;
+          }
+          &::-webkit-scrollbar-thumb {
+              background: var(--sidebar-handle-primary);
+              border-radius: 5px;
+          }
+          &::-webkit-scrollbar-thumb:hover {
+              background: var(--sidebar-handle-contrast);
+          }
+
+          .MuiButtonBase-root.MuiListItemButton-root{
+              //color: var(--sidebar-primary);
+              background-color: var(--sidebar-bg-primary);
+              display: flex;
+              align-items: center;
+              min-height: auto;
+              padding: 9px 17px 9px 8px;
+
+              &:hover{
+                  background-color: var(--sidebar-bg-hover);
+                  color: var(--sidebar-contrast);
+              }
+
+              .MuiListItemIcon-root{
+                  width: 18px;
+                  height: 18px;
+                  margin: 0 10px 0 12px;
+                  min-width: auto;
+
+                  svg{
+                      width: 100%;
+                      height: 100%;
+                      object-fit: contain;
+                      /*color: currentColor;
+                      path{
+                          fill: currentColor;
+                      }*/
+                  }
+              }
+
+              &.Mui-selected .MuiListItemIcon-root {
+                  color: var(--highlight-color);
+              }
+
+              .MuiListItemText-root{
+                  margin: 0;
+                  .MuiTypography-root{
+                      font-family: 'Montserrat';
+                      font-style: normal;
+                      font-weight: 500;
+                      font-size: 14px;
+                      line-height: 22px;
+                  }
+              }
+          }
+
+          .MuiCollapse-wrapper{
+              background-color: var(--sidebar_submenu-bg-primary);
+
+              .MuiButtonBase-root.MuiListItemButton-root{
+                  span.RaMenuItemLink-icon {
+                      border-radius: 5px;
+                      padding: 3px;
+                      background-color: var(--sidebar-bg-primary);
+                      width: 18px;
+                      height: 18px;
+                      display: inline-grid;
+                      margin-right: 3px;
+                  }
+                  span.RaMenuItemLink-icon .MuiSvgIcon-root {
+                      width: 12px;
+                      height: 12px;
+                  }
+                  a.RaMenuItemLink-active{
+                      background-color: var(--sidebar_submenu-bg-contrast);
+                  }
+              }
+          }
+      }
+
+      &.large.expanded {
+          .sidebar-logo{
+              width: 100%;
+          }
+          .sidebar-list{
+              .MuiButtonBase-root.MuiListItemButton-root{
+                  a{
+                      display: block;
+                      width: 100%;
+                      padding: 9px 17.55px 9px 15.15px;
+                  }
+              }
+          }
+      }
+
+      &.small.collapsed, &.large.collapsed {
+          .sidebar-logo{
+              display: block;
+              height: 60px;
+              margin: 0 auto 8px;
+              > img{
+                  width: 100%;
+                  height: 100%;
+                  object-fit: contain;
+              }
+          }
+
+          .sidebar-list{
+              .MuiButtonBase-root.MuiListItemButton-root{
+                  padding: 9px 13px 9px 15px;
+                  position: relative;
+                  &::before{
+                      content: "";
+                      display: block;
+                      position: absolute;
+                      width: 32px;
+                      height: 0px;
+                      bottom: 0;
+                      left: 15px;
+                      border-bottom: 0.5px solid rgba(255, 255, 255, 0.2);
+                      pointer-events: none;
+                  }
+              }
+              .MuiListItemIcon-root{
+                  margin-right: auto;
+              }
+
+              .Mui-selected {
+                  background: var(--highlight-color);
+                  color: var(--primary-color);
+              }
+          }
+      }
+  }
+
+  .sidebar-drawer .sidebar-list-sub .MuiListItemButton-root {
+      .MuiListItemIcon-root{
+          margin-left: 25px !important;
+      }
+  }
+
+  .sidebar-collapsed-menu {
+      .menu-items {
+          position: relative;
+          font-size: 14px;
+      }
+
+      .menu-items a {
+          display: block;
+          font-size: inherit;
+          color: inherit;
+          text-decoration: none;
+      }
+
+      .menu-items button {
+          display: flex;
+          align-items: center;
+          color: inherit;
+          font-size: inherit;
+          border: none;
+          background-color: transparent;
+          cursor: pointer;
+          width: 100%;
+      }
+
+      button span {
+          margin-left: 3px;
+      }
+
+      .menu-items > a, .menu-items button {
+          text-align: left;
+          padding: 0.7rem 1rem;
+      }
+
+      .arrow::after {
+          content: "";
+          display: inline-block;
+          margin-left: 0.28em;
+          vertical-align: 0.09em;
+          border-top: 0.42em solid;
+          border-right: 0.32em solid transparent;
+          border-left: 0.32em solid transparent;
+      }
+
+      .dropdown {
+          position: fixed;
+          //left: 50px;
+          box-shadow: 0 10px 15px -3px rgba(46, 41, 51, 0.08),
+              0 4px 6px -2px rgba(71, 63, 79, 0.16);
+          font-size: 0.875rem;
+          z-index: 9999;
+          min-width: 10rem;
+          padding: 0.5rem 0;
+          list-style: none;
+          background-color: var(--sidebar_submenu-bg-primary);
+          border-radius: 0.5rem;
+          display: none;
+      }
+
+      .dropdown.show {
+          display: block;
+      }
+
+      .dropdown .dropdown-submenu {
+          position: absolute;
+          left: 100%;
+          top: -7px;
+      }
+  }
+
+  .sidebar-list, .dropdown {
+      > .MuiButtonBase-root {
+          > .MuiListItemIcon-root,
+          > .MuiListItemText-root .MuiTypography-root {
+              color: var(--sidebar-primary);
+          }
+          > &:hover {
+              color: var(--secondary-color);
+              .MuiListItemIcon-root,
+              .MuiListItemText-root .MuiTypography-root {
+                  color: var(--secondary-color);
+              }
+          }
+      }
+      &-sub {
+          .MuiButtonBase-root {
+              .MuiListItemIcon-root {
+                  color: var(--sidebar_submenu-color-primary);
+              }
+              .MuiListItemText-root .MuiTypography-root {
+                  color: var(--sidebar_submenu-color-primary);
+              }
+              &:hover {
+                  .MuiListItemText-root .MuiTypography-root,
+                  .MuiListItemIcon-root {
+                      color: var(--sidebar_submenu-color-contrast);
+                  }
+              }
+          }
+      }
+  }
+
+// ============================================================================
+// SIDEBAR POSITION VARIANTS
+// ============================================================================
+
+.dash-app-layout {
+    // Default left position (inherits existing styles)
+    &.sidebar-position-left {
+        flex-direction: row;
+        
+        .sidebar-drawer .MuiDrawer-paper {
+            border-radius: 0px 20px 20px 0px;
+        }
+    }
+    
+    // Right position
+    &.sidebar-position-right {
+        flex-direction: row-reverse;
+        
+        .sidebar-drawer .MuiDrawer-paper {
+            border-radius: 20px 0px 0px 20px;
+        }
+    }
+    
+    // Top position - horizontal nav bar
+    &.sidebar-position-top {
+        flex-direction: column;
+
+       
+        
+        .sidebar-drawer {
+            width: 100% !important;
+            
+            .MuiDrawer-paper {
+                width: 100% !important;
+                height: var(--sidebar-horizontal-height, 64px);
+                max-height: 120px;
+                border-radius: 0px 0px 20px 20px;
+                display: flex !important;
+                flex-direction: row !important;
+                align-items: center !important;
+                overflow-x: auto;
+                overflow-y: hidden;
+            }
+            
+            .sidebar-header {
+                display: flex !important;
+                flex-direction: row !important;
+                align-items: center !important;
+                width: auto;
+                min-width: auto;
+                padding: 0px;
+                flex-shrink: 0;
+            }
+            
+            .dash-layout-sider-scrollbar {
+                display: flex !important;
+                flex-direction: row !important;
+                overflow-x: auto !important;
+                overflow-y: hidden !important;
+                flex: 1;
+
+                /* Move scrollbar to top by rotating the container */
+                transform: rotateX(180deg);
+                
+                > div, > * {
+                    display: flex !important;
+                    flex-direction: row !important;
+                    /* Rotate content back to appear normal */
+                    transform: rotateX(180deg);
+                }
+            }
+            
+            .sidebar-list,
+            .sidebar-list.sidebar-collapsed-menu {
+                display: flex !important;
+                flex-direction: row !important;
+                flex-wrap: nowrap !important;
+                align-items: center;
+                padding: 0;
+                margin: 0;
+                
+                > .MuiButtonBase-root,
+                > .MuiListItemButton-root,
+                > .menu-items,
+                > li {
+                    flex-shrink: 0;
+                    white-space: nowrap;
+                }
+            }
+        }
+        
+        .dash-app-layout-content {
+            flex: 1;
+            height: auto;
+            overflow: auto;
+        }
+    }
+    
+    // Bottom position
+    &.sidebar-position-bottom {
+        flex-direction: column-reverse;
+        
+        .sidebar-drawer {
+            width: 100% !important;
+            
+            .MuiDrawer-paper {
+                width: 100% !important;
+                height: auto !important;
+                max-height: 120px;
+                border-radius: 20px 20px 0px 0px;
+                display: flex !important;
+                flex-direction: row !important;
+                align-items: center !important;
+                overflow-x: auto;
+                overflow-y: hidden;
+            }
+            
+            .sidebar-header {
+                display: flex !important;
+                flex-direction: row !important;
+                align-items: center !important;
+                width: auto;
+                min-width: auto;
+                //padding: 10px;
+                flex-shrink: 0;
+            }
+            
+            .dash-layout-sider-scrollbar {
+                display: flex !important;
+                flex-direction: row !important;
+                overflow-x: auto !important;
+                overflow-y: hidden !important;
+                flex: 1;
+                
+                > div {
+                    display: flex !important;
+                    flex-direction: row !important;
+                }
+            }
+            
+            .sidebar-list,
+            .sidebar-list.sidebar-collapsed-menu {
+                display: flex !important;
+                flex-direction: row !important;
+                flex-wrap: nowrap !important;
+                align-items: center;
+                padding: 0;
+                margin: 0;
+                
+                > .MuiButtonBase-root,
+                > .MuiListItemButton-root,
+                > .menu-items,
+                > li {
+                    flex-shrink: 0;
+                    white-space: nowrap;
+                }
+            }
+        }
+        
+        .dash-app-layout-content {
+            flex: 1;
+            height: auto;
+            overflow: auto;
+        }
+    }
+}
+
+// Horizontal mode styles for scrollbar and menu
+.horizontal-mode {
+    display: flex !important;
+    flex-direction: row !important;
+    overflow-x: auto !important;
+    overflow-y: hidden !important;
+    flex: 1;
+    height: 100%;
+    
+    > div,
+    > nav,
+    > ul,
+    .sidebar-list,
+    .sidebar-collapsed-menu {
+        display: flex !important;
+        flex-direction: row !important;
+        flex-wrap: nowrap !important;
+        align-items: center !important;
+    }
+    
+    .MuiList-root,
+    .MuiButtonBase-root {
+        flex-shrink: 0 !important;
+        white-space: nowrap !important;
+    }
+}