adminator-admin-dashboard 2.9.0 → 4.1.5

package/src/assets/styles/spec/components/sidebar.scss

@@ -1,642 +0,0 @@
-@use '../settings/baseColors' as *;
-@use '../tools/mixins/mediaQueriesRanges' as *;
-@use '../settings/breakpoints' as *;
-@use '../tools/mixins/clearfix' as *;
-@use '../settings/materialColors' as *;
-
-// ---------------------------------------------------------
-// @TOC
-// ---------------------------------------------------------
-
-// + @Sidebar
-// + @Sidebar Inner
-// + @Sidebar Header
-// + @Sidebar Menu
-// + @Sidebar Collapsed
-
-// ---------------------------------------------------------
-// @Sidebar
-// ---------------------------------------------------------
-
-.sidebar {
-  background-color: $default-white;
-  bottom: 0;
-  overflow: hidden;
-  position: fixed;
-  top: 0;
-  transition: all 0.2s ease;
-  width: $offscreen-size;
-  z-index: 1000;
-
-  ul {
-    list-style-type: none;
-  }
-
-  @include between($breakpoint-md, $breakpoint-xl) {
-    width: $collapsed-size;
-
-    .sidebar-inner {
-      .sidebar-logo {
-        border-bottom: 1px solid transparent;
-        padding: 0;
-
-        a {
-          .logo {
-            background-position: center center;
-            width: $collapsed-size;
-          }
-        }
-      }
-
-      .sidebar-menu {
-        overflow-x: hidden;
-
-        > li {
-          > a {
-            .title {
-              display: none;
-            }
-          }
-        }
-
-        li {
-          &.dropdown {
-            .arrow {
-              opacity: 0;
-            }
-
-            &.open {
-              ul.dropdown-menu {
-                display: none !important;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    &:hover {
-      width: $offscreen-size;
-
-      .sidebar-inner {
-        .sidebar-logo {
-          border-bottom: 1px solid $border-color;
-          padding: 0 20px;
-        }
-
-        .sidebar-menu {
-          > li {
-            > a {
-              .title {
-                display: inline-block;
-              }
-            }
-          }
-
-          li {
-            &.dropdown {
-              .arrow {
-                opacity: 1;
-              }
-            }
-
-            &.open {
-              > ul.dropdown-menu {
-                display: block !important;
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  @include to($breakpoint-md) {
-    left: -$offscreen-size;
-    width: calc(#{$offscreen-size} - 30px);
-  }
-}
-
-// ---------------------------------------------------------
-// @Sidebar Inner
-// ---------------------------------------------------------
-
-.sidebar-inner {
-  position: relative;
-  height: 100%;
-}
-
-// ---------------------------------------------------------
-// @Sidebar Header
-// ---------------------------------------------------------
-
-.sidebar-logo {
-  border-bottom: 1px solid $border-color;
-  border-right: 1px solid $border-color;
-  line-height: 0;
-  padding: 0 20px;
-  transition: all 0.2s ease;
-
-  a {
-    display: inline-block;
-    width: 100%;
-
-    .logo {
-      background-position: center left;
-      background-repeat: no-repeat;
-      display: inline-block;
-      min-height: calc(#{$header-height} - 1px);
-      width: 100%;
-      width: 70px;
-      img {
-        height: 42px;
-        width: auto;
-        display: block;
-        margin: 11px auto;
-      }
-    }
-
-    .logo-text {
-      color: $grey-900;
-    }
-  }
-
-  .mobile-toggle {
-    display: none;
-    float: right;
-    font-size: 18px;
-    line-height: calc(#{$header-height} - 1px);
-
-    a {
-      color: $default-text-color;
-    }
-
-    @include to($breakpoint-md) {
-      display: inline-block;
-    }
-
-    @include between($breakpoint-md, $breakpoint-xl) {
-      display: none;
-    }
-  }
-}
-
-// ---------------------------------------------------------
-// @Sidebar Menu
-// ---------------------------------------------------------
-
-.sidebar-menu {
-  @include clearfix;
-  border-right: 1px solid $border-color;
-  height: calc(100vh - #{$header-height});
-  list-style: none;
-  margin: 0;
-  overflow: auto;
-  padding: 0;
-  position: relative;
-
-  .dropdown-toggle::after {
-    display: none;
-  }
-
-  .sidebar-link {
-    &.actived::before {
-      background: $md-blue-500;
-      border-radius: 50%;
-      content: '';
-      display: block;
-      height: 8px;
-      left: -4px;
-      position: absolute;
-      top: calc(50% - 4px);
-      width: 8px;
-    }
-  }
-
-  li {
-    position: relative;
-
-    &.dropdown {
-      .arrow {
-        font-size: 10px;
-        line-height: 40px;
-        position: absolute;
-        right: 30px;
-        transition: all 0.05s ease-in;
-
-        @include to($breakpoint-md) {
-          right: 25px;
-        }
-      }
-
-      &.open {
-        > a {
-          color: $default-dark;
-
-          .icon-holder {
-            color: $default-info;
-          }
-
-          > .arrow {
-            transform: rotate(90deg);
-          }
-        }
-
-        > .dropdown-menu {
-          display: block;
-
-          .dropdown-menu {
-            padding-left: 20px;
-          }
-
-          .arrow {
-            line-height: 25px;
-          }
-        }
-      }
-    }
-
-    a {
-      color: $default-text-color;
-      transition: all 0.3s ease;
-
-      &:hover,
-      &:focus {
-        color: $default-dark;
-        text-decoration: none;
-
-        .icon-holder {
-          color: $default-info;
-        }
-      }
-    }
-  }
-
-  > li {
-    &.dropdown {
-      ul {
-        &.dropdown-menu {
-          background-color: transparent;
-          border-radius: 0;
-          border: 0;
-          box-shadow: none;
-          float: none;
-          padding-left: 50px;
-          padding-top: 0;
-          position: relative;
-          width: 100%;
-
-          > li {
-            > a {
-              display: block;
-              padding: 10px 15px;
-
-              &:hover,
-              &:focus {
-                background-color: transparent;
-                color: $default-dark;
-              }
-            }
-
-            &.actived {
-              a {
-                color: $default-dark;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    > a {
-      display: block;
-      font-size: 15px;
-      font-weight: 500;
-      padding: 5px 15px;
-      position: relative;
-      white-space: nowrap;
-
-      .icon-holder {
-        border-radius: 6px;
-        display: inline-block;
-        font-size: 17px;
-        height: 35px;
-        left: 0;
-        line-height: 35px;
-        margin-right: 14px;
-        position: relative;
-        text-align: center;
-        transition: all 0.3s ease;
-        width: 35px;
-      }
-    }
-  }
-}
-
-// ---------------------------------------------------------
-// @Sidebar Collapsed
-// ---------------------------------------------------------
-
-.is-collapsed {
-  .sidebar {
-    @include from($breakpoint-xl) {
-      width: $collapsed-size;
-
-      .sidebar-inner {
-        .sidebar-logo {
-          border-bottom: 1px solid transparent;
-          padding: 0;
-        }
-
-        .sidebar-menu {
-          overflow-x: hidden;
-
-          > li {
-            > a {
-              .title {
-                display: none;
-              }
-            }
-          }
-
-          li {
-            &.dropdown {
-              .arrow {
-                opacity: 0;
-              }
-
-              &.open {
-                ul.dropdown-menu {
-                  display: none !important;
-                }
-              }
-            }
-          }
-        }
-      }
-
-      &:hover {
-        width: $offscreen-size;
-
-        .sidebar-inner {
-          .sidebar-logo {
-            border-bottom: 1px solid $border-color;
-            padding: 0 20px;
-          }
-
-          .sidebar-menu {
-            > li {
-              > a {
-                .title {
-                  display: inline-block;
-                }
-              }
-            }
-
-            li {
-              &.dropdown {
-                .arrow {
-                  opacity: 1;
-                }
-              }
-
-              &.open {
-                > ul.dropdown-menu {
-                  display: block !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-
-    @include between($breakpoint-md, $breakpoint-xl) {
-      width: $offscreen-size;
-
-      .sidebar-inner {
-        .sidebar-logo {
-          border-bottom: 1px solid $border-color;
-          padding: 0 20px;
-
-          > a {
-            .logo {
-              background-position: center left;
-              width: 150px;
-            }
-          }
-        }
-
-        .sidebar-menu {
-          > li {
-            > a {
-              .title {
-                display: inline-block;
-              }
-            }
-          }
-
-          li {
-            &.dropdown {
-              .arrow {
-                opacity: 1;
-              }
-            }
-
-            &.open {
-              > ul.dropdown-menu {
-                display: block !important;
-              }
-            }
-          }
-        }
-      }
-    }
-
-    @include to($breakpoint-md) {
-      left: 0;
-    }
-  }
-}
-
-// Dark mode sidebar improvements - proper active states for both themes
-[data-theme="dark"] {
-  .sidebar {
-    background-color: var(--c-bkg-card);
-
-    .sidebar-menu {
-      border-right-color: var(--c-border);
-
-      li {
-        a {
-          color: var(--c-text-base);
-
-          &:hover,
-          &:focus {
-            color: var(--c-text-base);
-            background-color: color-mix(in srgb, var(--c-bkg-card) 90%, var(--c-primary));
-
-            .icon-holder {
-              color: var(--c-primary);
-              background-color: color-mix(in srgb, var(--c-primary) 10%, transparent);
-            }
-          }
-        }
-
-        &.dropdown {
-          &.open {
-            > a {
-              color: var(--c-text-base);
-              background-color: color-mix(in srgb, var(--c-bkg-card) 90%, var(--c-primary));
-
-              .icon-holder {
-                color: var(--c-primary);
-                background-color: color-mix(in srgb, var(--c-primary) 10%, transparent);
-              }
-            }
-          }
-        }
-
-        // Active menu item styling for dark mode - lighter shade approach
-        &.actived {
-          > a {
-            color: var(--c-text-base) !important;
-            background-color: color-mix(in srgb, var(--c-bkg-card) 92%, #ffffff) !important;
-
-            .icon-holder {
-              color: var(--c-text-base) !important;
-              background-color: color-mix(in srgb, var(--c-bkg-card) 85%, #ffffff) !important;
-            }
-          }
-        }
-
-        // Styling for dropdown parent when it has an active child - lighter shade approach
-        &.dropdown.has-active-child {
-          > a {
-            color: var(--c-text-base) !important;
-            background-color: color-mix(in srgb, var(--c-bkg-card) 95%, #ffffff) !important;
-
-            .icon-holder {
-              color: var(--c-text-base) !important;
-              background-color: color-mix(in srgb, var(--c-bkg-card) 90%, #ffffff) !important;
-            }
-          }
-        }
-      }
-
-      // Dropdown menu items
-      > li {
-        &.dropdown {
-          ul.dropdown-menu {
-            > li {
-              > a {
-                color: var(--c-text-muted);
-
-                &:hover,
-                &:focus {
-                  color: var(--c-text-base);
-                  background-color: color-mix(in srgb, var(--c-bkg-card) 90%, var(--c-primary));
-                }
-              }
-
-              &.actived {
-                a {
-                  color: var(--c-text-base) !important;
-                  background-color: color-mix(in srgb, var(--c-bkg-card) 92%, #ffffff) !important;
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .sidebar-logo {
-    border-bottom-color: var(--c-border);
-    border-right-color: var(--c-border);
-
-    a {
-      .logo-text {
-        color: var(--c-text-base);
-      }
-    }
-
-    .mobile-toggle {
-      a {
-        color: var(--c-text-base);
-      }
-    }
-  }
-}
-
-// Light mode active states (ensure proper visibility)
-[data-theme="light"], :root {
-  .sidebar {
-    .sidebar-menu {
-      li {
-        &.actived {
-          > a {
-            background-color: color-mix(in srgb, #ffffff 85%, var(--c-primary)) !important;
-            color: var(--c-primary) !important;
-
-            .icon-holder {
-              color: var(--c-primary) !important;
-              background-color: color-mix(in srgb, var(--c-primary) 10%, transparent) !important;
-            }
-          }
-        }
-
-        // Styling for dropdown parent when it has an active child (light mode)
-        &.dropdown.has-active-child {
-          > a {
-            background-color: color-mix(in srgb, #ffffff 90%, var(--c-primary)) !important;
-            color: var(--c-primary) !important;
-
-            .icon-holder {
-              color: var(--c-primary) !important;
-              background-color: color-mix(in srgb, var(--c-primary) 8%, transparent) !important;
-            }
-          }
-        }
-
-        a {
-          &:hover,
-          &:focus {
-            background-color: color-mix(in srgb, #ffffff 90%, var(--c-primary));
-            color: var(--c-primary);
-
-            .icon-holder {
-              color: var(--c-primary);
-              background-color: color-mix(in srgb, var(--c-primary) 8%, transparent);
-            }
-          }
-        }
-      }
-
-      // Dropdown items for light mode
-      > li {
-        &.dropdown {
-          ul.dropdown-menu {
-            > li {
-              &.actived {
-                a {
-                  color: var(--c-primary) !important;
-                  background-color: color-mix(in srgb, #ffffff 85%, var(--c-primary)) !important;
-                }
-              }
-
-              > a {
-                &:hover,
-                &:focus {
-                  background-color: color-mix(in srgb, #ffffff 90%, var(--c-primary));
-                  color: var(--c-primary);
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-}