@dashadmin/dash-styles 0.0.0 → 1.3.16

package/src/styles/sidebar.less

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