adminator-admin-dashboard 2.7.0

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

@@ -0,0 +1,455 @@
+@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

@@ -0,0 +1,102 @@
+@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

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

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

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

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

@@ -0,0 +1,147 @@
+@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);
+      }
+    }
+  }
+}