adminator-admin-dashboard 2.8.1 → 4.1.5

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

@@ -1,455 +0,0 @@
-@use 'sass:color';
-@use '../settings/baseColors' as *;
-@use '../settings/breakpoints' as *;
-@use '../tools/mixins/mediaQueriesRanges' as *;
-@use '../tools/mixins/clearfix' as *;
-@use '../tools/mixins/placeholder' as *;
-
-// ---------------------------------------------------------
-// @TOC
-
-// + @Topbar
-// + @Collapsed State
-// + @Mobile Responsive Fixes
-
-// ---------------------------------------------------------
-// @Topbar
-// ---------------------------------------------------------
-
-.header {
-  background-color: $default-white;
-  border-bottom: 1px solid $border-color;
-  display: block;
-  margin-bottom: 0;
-  padding: 0;
-  position: fixed;
-  transition: all 0.2s ease;
-  width: calc(100% - #{$offscreen-size});
-  z-index: 800;
-
-  @include to($breakpoint-md) {
-    width: 100%;
-  }
-
-  @include between($breakpoint-md, $breakpoint-xl) {
-    width: calc(100% - #{$collapsed-size});
-  }
-
-  .header-container {
-    @include clearfix;
-
-    height: $header-height;
-
-    .nav-left,
-    .nav-right {
-      list-style: none;
-      margin-bottom: 0;
-      padding-left: 0;
-      position: relative;
-
-      > li {
-        float: left;
-
-        > a {
-          color: $default-text-color;
-          display: block;
-          line-height: $header-height;
-          min-height: $header-height;
-          padding: 0 15px;
-          transition: all 0.2s ease-in-out;
-
-          i {
-            font-size: 17px;
-          }
-
-          &:hover,
-          &:focus {
-            color: $default-dark;
-            text-decoration: none;
-          }
-
-          @include to($breakpoint-md) {
-            padding: 0 15px;
-          }
-        }
-      }
-
-      .notifications {
-        position: relative;
-
-        .counter {
-          background-color: $default-danger;
-          border-radius: 50px;
-          color: $default-white;
-          font-size: 10px;
-          line-height: 1;
-          padding: 3px 5.5px;
-          position: absolute;
-          right: 6px;
-          top: 12px;
-        }
-
-        .dropdown-menu {
-          min-width: 350px;
-          padding: 0;
-
-          @include to($breakpoint-sm) {
-            max-width: 300px;
-          }
-        }
-      }
-    }
-
-    .dropdown-menu {
-      // display: block;
-      margin: 0;
-      transform-origin: top right;
-      // transform: scale(0, 0);
-      transition: transform 0.15s ease-out;
-
-      .divider {
-        border-bottom: 1px solid $border-color;
-        height: 1px;
-        overflow: hidden;
-      }
-
-      > li {
-        > a {
-          transition: all 0.2s ease-out;
-        }
-      }
-    }
-
-    .show {
-      .dropdown-menu {
-        transform: scale(1, 1);
-      }
-    }
-
-    .nav-left {
-      float: left;
-      margin-left: 15px;
-    }
-
-    .nav-right {
-      float: right;
-
-      .dropdown-menu {
-        left: auto;
-        right: 0;
-
-        > li {
-          width: 100%;
-
-          > a {
-            line-height: 1.5;
-            min-height: auto;
-            padding: 10px 15px;
-          }
-        }
-      }
-    }
-  }
-
-  .search-box {
-    .search-icon-close {
-      display: none;
-    }
-
-    &.active {
-      .search-icon {
-        display: none;
-      }
-
-      .search-icon-close {
-        display: inline-block;
-      }
-    }
-  }
-
-  .search-input {
-    display: none;
-
-    &.active {
-      display: inline-block;
-    }
-
-    input {
-      background-color: transparent;
-      border: 0;
-      box-shadow: none;
-      font-size: 18px;
-      height: 40px;
-      margin-top: 12px;
-      outline: none;
-      padding: 5px;
-
-      @include to($breakpoint-sm) {
-        width: 85px;
-      }
-
-      @include placeholder {
-        color: color.adjust($default-text-color, $lightness: 20%);
-        font-style: italic;
-      }
-    }
-  }
-}
-
-// ---------------------------------------------------------
-// @Mobile Responsive Fixes - AGGRESSIVE APPROACH
-// ---------------------------------------------------------
-
-// Tablet mobile fixes (768px to 991px)
-@include to($breakpoint-md) {
-  .header {
-    .header-container {
-      padding: 0 10px;
-      
-      .nav-left {
-        margin-left: 5px;
-
-        > li > a {
-          padding: 0 8px !important;
-        }
-      }
-
-      .nav-right {
-        margin-right: 5px;
-
-        > li {
-          > a {
-            padding: 0 8px !important;
-            
-            // Hide text in user dropdown on tablet
-            .peer:last-child {
-              display: none;
-            }
-          }
-        }
-
-        // Make theme toggle more compact
-        .theme-toggle {
-          padding: 0 5px !important;
-          
-          .form-check-label {
-            font-size: 9px !important;
-            margin: 0 3px !important;
-          }
-          
-          .form-check-input {
-            width: 1.8rem !important;
-            height: 1rem !important;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Small mobile phones (576px to 767px)
-@include to($breakpoint-sm) {
-  .header {
-    .header-container {
-      height: auto;
-      min-height: $header-height;
-      padding: 0 5px;
-
-      .nav-left {
-        margin-left: 2px;
-
-        > li > a {
-          padding: 0 5px !important;
-        }
-
-        // Hide search toggle on small mobile - make it icon only when active
-        .search-box:not(.active) {
-          display: none;
-        }
-      }
-
-      .nav-right {
-        margin-right: 2px;
-
-        > li {
-          > a {
-            padding: 0 4px !important;
-            
-            // Hide all text content, keep only icons
-            span {
-              display: none;
-            }
-            
-            .peer:last-child {
-              display: none;
-            }
-          }
-        }
-
-        // Ultra-compact theme toggle
-        .theme-toggle {
-          padding: 0 3px !important;
-          
-          .form-check {
-            flex-direction: column;
-            align-items: center;
-            
-            .form-check-label {
-              font-size: 7px !important;
-              margin: 0 !important;
-              line-height: 1 !important;
-              
-              span {
-                display: none !important;
-              }
-            }
-            
-            .form-check-input {
-              width: 1.5rem !important;
-              height: 0.8rem !important;
-              margin: 1px 0 !important;
-            }
-          }
-        }
-      }
-
-      // Full-screen mobile dropdowns
-      .nav-right .dropdown-menu {
-        position: fixed !important;
-        top: $header-height !important;
-        left: 0 !important;
-        right: 0 !important;
-        bottom: 0 !important;
-        width: 100vw !important;
-        height: calc(100vh - #{$header-height}) !important;
-        max-width: none !important;
-        min-width: auto !important;
-        transform: none !important;
-        border-radius: 0 !important;
-        z-index: 9999;
-        overflow-y: auto;
-        
-        // Close button for mobile dropdowns
-        &::before {
-          content: "✕ Close";
-          position: sticky;
-          top: 0;
-          display: block;
-          background: var(--c-primary);
-          color: white;
-          text-align: center;
-          padding: 10px;
-          cursor: pointer;
-          font-weight: bold;
-          z-index: 10000;
-        }
-      }
-    }
-  }
-}
-
-// Extra small mobile phones (less than 576px)
-@include to(480px) {
-  .header {
-    .header-container {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-wrap: nowrap;
-      padding: 0 2px;
-
-      .nav-left {
-        flex: 0 0 auto;
-        margin: 0;
-        
-        > li {
-          float: none;
-          display: inline-block;
-          
-          > a {
-            padding: 0 3px !important;
-            font-size: 14px !important;
-          }
-        }
-
-        // Search overlay for tiny screens
-        .search-input.active {
-          position: fixed;
-          top: $header-height;
-          left: 0;
-          right: 0;
-          background: var(--c-bkg-card);
-          border-top: 1px solid var(--c-border);
-          padding: 15px;
-          z-index: 9998;
-          
-          input {
-            width: 100%;
-            padding: 12px;
-            font-size: 16px;
-            border: 1px solid var(--c-border);
-            border-radius: 6px;
-            background: var(--c-bkg-card);
-            color: var(--c-text-base);
-            margin-top: 0;
-            
-            &::placeholder {
-              color: var(--c-text-muted);
-            }
-          }
-        }
-      }
-
-      .nav-right {
-        flex: 0 0 auto;
-        margin: 0;
-        
-        > li {
-          float: none;
-          display: inline-block;
-          
-          > a {
-            padding: 0 2px !important;
-            font-size: 12px !important;
-          }
-        }
-
-        // Minimal theme toggle
-        .theme-toggle {
-          padding: 0 1px !important;
-          
-          .form-check {
-            .form-check-label {
-              display: none !important;
-            }
-            
-            .form-check-input {
-              width: 1.2rem !important;
-              height: 0.7rem !important;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-// ---------------------------------------------------------
-// @Collapsed State
-// ---------------------------------------------------------
-
-.is-collapsed {
-  .header {
-    width: calc(100% - #{$collapsed-size});
-
-    @include to($breakpoint-md) {
-      width: 100%;
-    }
-
-    @include between($breakpoint-md, $breakpoint-xl) {
-      width: calc(100% - #{$offscreen-size});
-    }
-  }
-}
-
-

package/src/assets/styles/spec/generic/base.scss

@@ -1,102 +0,0 @@
-@use '../settings/fonts' as *;
-@use '../settings/baseColors' as *;
-@use 'sass:color';
-
-html, html a, body {
-  -webkit-font-smoothing: antialiased;
-}
-
-a {
-  transition: all 0.3s ease-in-out;
-  text-decoration: none;
-}
-
-body {
-  font-family: $font-primary;
-  font-size: 14px;
-  color: $default-text-color;
-  line-height: 1.5;
-  letter-spacing: 0.2px;
-  overflow-x: hidden;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: $font-secondary;
-  letter-spacing: 0.5px;
-  line-height: 1.5;
-  font-weight: 400;
-
-  a {
-    font-family: $font-secondary;
-  }
-
-  small {
-    font-weight: 300;
-    color: color.adjust($default-dark, $lightness: 5%);
-  }
-}
-
-p {
-  font-family: $font-primary;
-  line-height: 1.9;
-}
-
-.lead {
-  font-size: 18px;
-}
-
-ul {
-  margin-bottom: 0;
-}
-
-a {
-  color: $default-info;
-
-  &:hover,
-  &:focus {
-    text-decoration: none;
-    color: darken($default-info, 10%);
-  }
-
-  &:focus {
-    outline: none;
-  }
-
-  &.text-gray {
-    &:hover,
-    &:focus,
-    &.active {
-      color: $default-dark !important;
-    }
-  }
-}
-
-:focus {
-  outline: none;
-}
-
-hr {
-  border-top: 1px solid $border-color;
-}
-
-
-a.btn {
-    color:#fff;
-  }
-
-a.btn:hover {
-  color:#fff;
-}
-
-.btn-color {
-  color:#fff;
-}
-
-.btn-color:hover {
-  color:#fff;
-}

package/src/assets/styles/spec/generic/index.scss

@@ -1 +0,0 @@
-@use 'base' as *;

package/src/assets/styles/spec/index.scss

@@ -1,4 +0,0 @@
-@use 'generic/index' as *;
-@use 'components/index' as *;
-@use 'screens/index' as *;
-@use 'utils/index' as *;

package/src/assets/styles/spec/screens/chat.scss

@@ -1,147 +0,0 @@
-@use '../settings/baseColors' as *;
-@use '../settings/breakpoints' as *;
-@use '../tools/mixins/mediaQueriesRanges' as *;
-
-#chat-sidebar {
-  width: 250px;
-  height: calc(100vh - #{$header-height} - 60px);
-  overflow: auto;
-
-  @include to($breakpoint-md) {
-    transition: all 0.3s ease-in-out;
-    margin-left: -250px;
-
-    &.open {
-      margin-left: 0;
-    }
-  }
-}
-
-#chat-box {
-  height: calc(100vh - #{$header-height} - 60px);
-  overflow: auto;
-}
-
-// Dark mode chat styles
-[data-theme="dark"] {
-  // Chat sidebar search input
-  input[name="chatSearch"] {
-    background: var(--c-bkg-card);
-    color: var(--c-text-base);
-    border-color: var(--c-border);
-
-    &::placeholder {
-      color: var(--c-text-muted);
-    }
-
-    &:focus {
-      background: var(--c-bkg-card);
-      border-color: var(--c-primary);
-      box-shadow: 0 0 0 0.2rem rgba(var(--c-primary-rgb), 0.25);
-    }
-  }
-
-  // Contact list items
-  .peers.bgc-white {
-    background: var(--c-bkg-card) !important;
-    border-color: var(--c-border) !important;
-
-    &:hover,
-    &.bgcH-grey-50:hover {
-      background: var(--c-bkg-hover) !important;
-    }
-
-    h6 {
-      color: var(--c-text-base);
-    }
-
-    small {
-      // Status colors remain as they are for visual indication
-      &.c-grey-500 {
-        color: var(--c-text-muted) !important;
-      }
-    }
-  }
-
-  // Chat header
-  .peers.bgc-white {
-    background: var(--c-bkg-card) !important;
-
-    h6 {
-      color: var(--c-text-base);
-    }
-
-    i {
-      color: var(--c-text-muted);
-    }
-
-    .c-grey-900 {
-      color: var(--c-text-base) !important;
-
-      &.cH-blue-500:hover {
-        color: var(--c-primary) !important;
-      }
-    }
-  }
-
-  // Chat background area
-  .bgc-grey-200 {
-    background: var(--c-bkg-body) !important;
-  }
-
-  .bgc-grey-100 {
-    background: var(--c-bkg-body) !important;
-  }
-
-  // Chat messages
-  .pY-3.pX-10.bgc-white {
-    background: var(--c-bkg-card) !important;
-    color: var(--c-text-base);
-    border: 1px solid var(--c-border);
-
-    small {
-      color: var(--c-text-muted);
-    }
-
-    span {
-      color: var(--c-text-base);
-    }
-  }
-
-  // Chat input area
-  .bdT.bgc-white {
-    background: var(--c-bkg-card) !important;
-    border-color: var(--c-border) !important;
-
-    .form-control {
-      background: var(--c-bkg-body);
-      border-color: var(--c-border);
-      color: var(--c-text-base);
-
-      &::placeholder {
-        color: var(--c-text-muted);
-      }
-
-      &:focus {
-        background: var(--c-bkg-body);
-        border-color: var(--c-primary);
-        color: var(--c-text-base);
-        box-shadow: 0 0 0 0.2rem rgba(var(--c-primary-rgb), 0.25);
-      }
-    }
-
-    .btn-primary {
-      background: var(--c-primary);
-      border-color: var(--c-primary);
-
-      &:hover {
-        background: var(--c-primary-hover);
-        border-color: var(--c-primary-hover);
-      }
-
-      &:focus {
-        box-shadow: 0 0 0 0.2rem rgba(var(--c-primary-rgb), 0.25);
-      }
-    }
-  }
-}