adminator-admin-dashboard 2.7.0

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

@@ -0,0 +1,108 @@
+@use '../settings/baseColors' as *;
+@use '../settings/breakpoints' as *;
+@use '../tools/mixins/mediaQueriesRanges' as *;
+
+.email-app {
+  .email-side-nav {
+    background: var(--c-bkg-card);
+    position: fixed;
+    border-right: 1px solid var(--c-border);
+    float: left;
+    width: 250px;
+    transition: all 0.3s ease-in-out;
+
+    @include to($breakpoint-md) {
+      z-index: 1;
+      left: -250px;
+    }
+  }
+
+  .email-wrapper {
+    margin: 0;
+    padding: 0;
+    overflow: auto;
+    min-height: 100%;
+    transition: all 0.3s ease-in-out;
+
+    @include to($breakpoint-md) {
+      position: absolute;
+      left: 0;
+      width: 100%;
+      overflow-x: hidden;
+    }
+
+    @include from($breakpoint-md) {
+      margin-left: 250px;
+    }
+
+    .email-list {
+      position: relative;
+      padding: 0;
+      width: 100%;
+      overflow-y: hidden;
+      background-color: var(--c-bkg-card);
+      height: calc(100vh - #{$header-height});
+
+      @include to($breakpoint-md) {
+        max-height: calc(100vh - 65px);
+      }
+
+      @include from($breakpoint-md) {
+        width: 40%;
+        border-right: 1px solid var(--c-border);
+        float: left;
+      }
+    }
+
+    .email-content {
+      float: left;
+      width: 60%;
+      position: relative;
+      padding: 0;
+      background-color: var(--c-bkg-card);
+      // min-height: calc(100vh - #{$header-height});
+
+      &.no-inbox-view {
+        width: 100%;
+      }
+
+      @include to($breakpoint-md) {
+        position: absolute;
+        top: 0;
+        left: 100%;
+        width: 100%;
+        height: 100%;
+        transition: all 0.3s ease-in-out;
+        max-height: calc(100vh - #{$header-height});
+        overflow-y: scroll;
+
+        &.open {
+          left: 0;
+        }
+      }
+    }
+
+      .email-compose {
+        position: relative;
+      .email-compose-body {
+        padding: 30px 20px;
+
+      }
+      }
+    }
+
+
+    &.side-active {
+      .email-side-nav {
+        @include to($breakpoint-md) {
+          left: 0;
+        }
+      }
+
+      .email-wrapper {
+        @include to($breakpoint-md) {
+          left: 250px;
+        }
+      }
+    }
+}

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

@@ -0,0 +1,2 @@
+@use 'chat' as *;
+@use 'email' as *;

package/src/assets/styles/spec/settings/baseColors.scss

@@ -0,0 +1,103 @@
+@use 'sass:color';
+@use 'materialColors' as *;
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Greyscale Colors
+// + @Bootstrap Color System
+// + @Default Colors
+// + @Inverted Colors
+// + @Others
+// + @Header Themes
+// + @Social Networks Colors
+
+// ---------------------------------------------------------
+// @Greyscale Colors
+// ---------------------------------------------------------
+
+// Colors below are ordered from lightest to darkest
+
+$grey-100             : #f9fafb;
+$grey-200             : #f2f3f5;
+$grey-300             : #e6eaf0;
+$grey-400             : #d3d9e3;
+$grey-500             : #b9c2d0;
+$grey-600             : #7c8695;
+$grey-700             : #72777a;
+$grey-800             : #565a5c;
+$grey-900             : #313435;
+
+$grey-colors-alt: (
+  grey-100 : #f9fafb,
+  grey-200 : #f2f3f5,
+  grey-300 : #e6eaf0,
+  grey-400 : #d3d9e3,
+  grey-500 : #b9c2d0,
+  grey-600 : #7c8695,
+  grey-700 : #72777a,
+  grey-800 : #565a5c,
+  grey-900 : #313435,
+);
+
+// ---------------------------------------------------------
+// @Bootstrap Color System
+// ---------------------------------------------------------
+
+$blue   : $md-blue-500;
+$indigo : $md-indigo-500;
+$purple : $md-purple-500;
+$pink   : $md-pink-500;
+$red    : $md-red-500;
+$orange : $md-orange-500;
+$yellow : $md-yellow-500;
+$green  : $md-green-500;
+$teal   : $md-teal-500;
+$cyan   : $md-cyan-500;
+
+// ---------------------------------------------------------
+// @Default Colors
+// ---------------------------------------------------------
+
+$default-danger       : #ff3c7e;
+$default-dark         : #313435;
+$default-grey         : #565a5c;
+$default-info         : #0f9aee;
+$default-primary      : #7774e7;
+$default-success      : #37c936;
+$default-text-color   : #72777a;
+$default-warning      : #fc0;
+$default-white        : #fff;
+
+// ---------------------------------------------------------
+// @Inverted Colors
+// ---------------------------------------------------------
+
+$inverse-danger       : color.adjust($default-danger, $lightness: 35%);
+$inverse-info         : color.adjust($default-info, $lightness: 45%);
+$inverse-primary      : color.adjust($default-primary, $lightness: 30%);
+$inverse-success      : color.adjust($default-success, $lightness: 45%);
+$inverse-warning      : color.adjust($default-warning, $lightness: 45%);
+
+// ---------------------------------------------------------
+// @Others
+// ---------------------------------------------------------
+
+$border-color         : #e6ecf5;
+$collapsed-size       : 70px;
+$header-height        : 65px;
+$offscreen-size       : 280px;
+$side-nav-dark        : #313644;
+$side-nav-dark-border : rgba(120, 130, 140, 0.3);
+$side-nav-dark-font   : #99abb4;
+
+// ---------------------------------------------------------
+// @Header Themes
+// ---------------------------------------------------------
+
+$theme-danger         : #f53f61;
+$theme-dark           : color.adjust($side-nav-dark, $lightness: 10%);
+$theme-info           : $default-info;
+$theme-primary        : $default-primary;
+$theme-success        : color.adjust($default-success, $saturation: -5%);

package/src/assets/styles/spec/settings/borders.scss

@@ -0,0 +1,6 @@
+// ---------------------------------------------------------
+// @Borders
+// ---------------------------------------------------------
+
+$border-width: 1px;
+$border-color: rgba(0, 0, 0, 0.0625);

package/src/assets/styles/spec/settings/breakpoints.scss

@@ -0,0 +1,26 @@
+// ---------------------------------------------------------
+// @Breakpoints
+// ---------------------------------------------------------
+
+$breakpoint-xl : 1440px;
+$breakpoint-lg : 1200px;
+$breakpoint-md : 992px;
+$breakpoint-sm : 768px;
+$breakpoint-xs : 0;
+
+$breakpoints: (
+  "xl\\+" "screen and (min-width: #{$breakpoint-xl})",
+  "lg\\+" "screen and (min-width: #{$breakpoint-lg})",
+  "md\\+" "screen and (min-width: #{$breakpoint-md})",
+  "sm\\+" "screen and (min-width: #{$breakpoint-sm})",
+  "xs\\+" "screen and (min-width: #{$breakpoint-xs})",
+
+  "xl-" "screen and (max-width: #{$breakpoint-xl - 1px})",
+  "lg-" "screen and (max-width: #{$breakpoint-lg - 1px})",
+  "md-" "screen and (max-width: #{$breakpoint-md - 1px})",
+  "sm-" "screen and (max-width: #{$breakpoint-sm - 1px})",
+
+  "lg" "screen and (min-width: #{$breakpoint-lg - 1px}) and (max-width: #{$breakpoint-xl - 1px})",
+  "md" "screen and (min-width: #{$breakpoint-md - 1px}) and (max-width: #{$breakpoint-lg - 1px})",
+  "sm" "screen and (min-width: #{$breakpoint-sm - 1px}) and (max-width: #{$breakpoint-md - 1px})",
+);

package/src/assets/styles/spec/settings/fonts.scss

@@ -0,0 +1,4 @@
+$font-primary:
+  Roboto, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
+$font-secondary: $font-primary;
+$font-size-base:              0.875rem;

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

@@ -0,0 +1,4 @@
+@use 'breakpoints' as *;
+@use 'brand-colors/dist/latest/scss/brand-colors.latest.scss' as *;
+@use 'baseColors' as *;
+@use 'borders' as *;