adminator-admin-dashboard 2.7.0

package/src/assets/styles/spec/utils/layout/helpers/sizes.scss

@@ -0,0 +1,157 @@
+@use '../mixins/generateResponsive' as *;
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Fixed Width
+// + @Relative Width
+// + @Fixed Height
+// + @Max Size
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Fixed Width
+// ---------------------------------------------------------
+
+.w-1\/4r, .sz-1\/4r    { width: 0.25rem; }
+.w-1\/2r, .sz-1\/2r    { width: 0.5rem; }
+.w-3\/4r, .sz-3\/4r    { width: 0.75rem; }
+.w-1r, .sz-1r          { width: 1rem; }
+.w-3\/2r, .sz-3\/2r    { width: 1.5rem; }
+.w-2r, .sz-2r          { width: 2rem; }
+.w-5\/2r, .sz-5\/2r    { width: 2.5rem; }
+.w-3r, .sz-3r          { width: 3rem; }
+.w-7\/2r, .sz-7\/2r    { width: 3.5rem; }
+.w-4r, .sz-4r          { width: 4rem; }
+.w-9\/2r, .sz-9\/2r    { width: 4.5rem; }
+.w-5r, .sz-5r          { width: 5rem; }
+.w-11\/2r, .sz-11\/2r  { width: 5.5rem; }
+.w-6r, .sz-6r          { width: 6rem; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .w-1\/4r\@#{$breakpointAlias}, .sz-1\/4r\@#{$breakpointAlias}    { width: 0.25rem; }
+    .w-1\/2r\@#{$breakpointAlias}, .sz-1\/2r\@#{$breakpointAlias}    { width: 0.5rem; }
+    .w-3\/4r\@#{$breakpointAlias}, .sz-3\/4r\@#{$breakpointAlias}    { width: 0.75rem; }
+    .w-1r\@#{$breakpointAlias}, .sz-1r\@#{$breakpointAlias}          { width: 1rem; }
+    .w-3\/2r\@#{$breakpointAlias}, .sz-3\/2r\@#{$breakpointAlias}    { width: 1.5rem; }
+    .w-2r\@#{$breakpointAlias}, .sz-2r\@#{$breakpointAlias}          { width: 2rem; }
+    .w-5\/2r\@#{$breakpointAlias}, .sz-5\/2r\@#{$breakpointAlias}    { width: 2.5rem; }
+    .w-3r\@#{$breakpointAlias}, .sz-3r\@#{$breakpointAlias}          { width: 3rem; }
+    .w-7\/2r\@#{$breakpointAlias}, .sz-7\/2r\@#{$breakpointAlias}    { width: 3.5rem; }
+    .w-4r\@#{$breakpointAlias}, .sz-4r\@#{$breakpointAlias}          { width: 4rem; }
+    .w-9\/2r\@#{$breakpointAlias}, .sz-9\/2r\@#{$breakpointAlias}    { width: 4.5rem; }
+    .w-5r\@#{$breakpointAlias}, .sz-5r\@#{$breakpointAlias}          { width: 5rem; }
+    .w-11\/2r\@#{$breakpointAlias}, .sz-11\/2r\@#{$breakpointAlias}  { width: 5.5rem; }
+    .w-6r\@#{$breakpointAlias}, .sz-6r\@#{$breakpointAlias}          { width: 6rem; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Relative Width
+// ---------------------------------------------------------
+
+.w-0     { width: 0px; }
+.w-10p   { width: 10%; }
+.w-20p   { width: 20%; }
+.w-30p   { width: 30%; }
+.w-40p   { width: 40%; }
+.w-50p   { width: 50%; }
+.w-60p   { width: 60%; }
+.w-70p   { width: 70%; }
+.w-80p   { width: 80%; }
+.w-90p   { width: 90%; }
+.w-100p  { width: 100%; }
+.w-1px   { width: 1px; }
+.w-a     { width: auto; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .w-0\@#{$breakpointAlias}     { width: 0px; }
+    .w-10p\@#{$breakpointAlias}   { width: 10%; }
+    .w-20p\@#{$breakpointAlias}   { width: 20%; }
+    .w-30p\@#{$breakpointAlias}   { width: 30%; }
+    .w-40p\@#{$breakpointAlias}   { width: 40%; }
+    .w-50p\@#{$breakpointAlias}   { width: 50%; }
+    .w-60p\@#{$breakpointAlias}   { width: 60%; }
+    .w-70p\@#{$breakpointAlias}   { width: 70%; }
+    .w-80p\@#{$breakpointAlias}   { width: 80%; }
+    .w-90p\@#{$breakpointAlias}   { width: 90%; }
+    .w-100p\@#{$breakpointAlias}  { width: 100%; }
+    .w-1px\@#{$breakpointAlias}   { width: 1px; }
+    .w-a\@#{$breakpointAlias}     { width: auto; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Fixed Height
+// ---------------------------------------------------------
+
+.h-1\/4r, .sz-1\/4r    { height: 0.25rem; }
+.h-1\/2r, .sz-1\/2r    { height: 0.5rem; }
+.h-3\/4r, .sz-3\/4r    { height: 0.75rem; }
+.h-1r, .sz-1r          { height: 1rem; }
+.h-3\/2r, .sz-3\/2r    { height: 1.5rem; }
+.h-2r, .sz-2r          { height: 2rem; }
+.h-5\/2r, .sz-5\/2r    { height: 2.5rem; }
+.h-3r, .sz-3r          { height: 3rem; }
+.h-7\/2r, .sz-7\/2r    { height: 3.5rem; }
+.h-4r, .sz-4r          { height: 4rem; }
+.h-9\/2r, .sz-9\/2r    { height: 4.5rem; }
+.h-5r, .sz-5r          { height: 5rem; }
+.h-11\/2r, .sz-11\/2r  { height: 5.5rem; }
+.h-6r, .sz-6r          { height: 6rem; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .h-1\/4r\@#{$breakpointAlias}, .sz-1\/4r\@#{$breakpointAlias}    { height: 0.25rem; }
+    .h-1\/2r\@#{$breakpointAlias}, .sz-1\/2r\@#{$breakpointAlias}    { height: 0.5rem; }
+    .h-3\/4r\@#{$breakpointAlias}, .sz-3\/4r\@#{$breakpointAlias}    { height: 0.75rem; }
+    .h-1r\@#{$breakpointAlias}, .sz-1r\@#{$breakpointAlias}          { height: 1rem; }
+    .h-3\/2r\@#{$breakpointAlias}, .sz-3\/2r\@#{$breakpointAlias}    { height: 1.5rem; }
+    .h-2r\@#{$breakpointAlias}, .sz-2r\@#{$breakpointAlias}          { height: 2rem; }
+    .h-5\/2r\@#{$breakpointAlias}, .sz-5\/2r\@#{$breakpointAlias}    { height: 2.5rem; }
+    .h-3r\@#{$breakpointAlias}, .sz-3r\@#{$breakpointAlias}          { height: 3rem; }
+    .h-7\/2r\@#{$breakpointAlias}, .sz-7\/2r\@#{$breakpointAlias}    { height: 3.5rem; }
+    .h-4r\@#{$breakpointAlias}, .sz-4r\@#{$breakpointAlias}          { height: 4rem; }
+    .h-9\/2r\@#{$breakpointAlias}, .sz-9\/2r\@#{$breakpointAlias}    { height: 4.5rem; }
+    .h-5r\@#{$breakpointAlias}, .sz-5r\@#{$breakpointAlias}          { height: 5rem; }
+    .h-11\/2r\@#{$breakpointAlias}, .sz-11\/2r\@#{$breakpointAlias}  { height: 5.5rem; }
+    .h-6r\@#{$breakpointAlias}, .sz-6r\@#{$breakpointAlias}          { height: 6rem; }
+  }
+}
+
+.h-0     { height: 0; }
+.h-auto  { height: auto; }
+.h-100p  { height: 100%; }
+.h-100vh { height: 100vh; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .h-0\@#{$breakpointAlias}     { height: 0; }
+    .h-auto\@#{$breakpointAlias}  { height: auto; }
+    .h-100p\@#{$breakpointAlias}  { height: 100%; }
+    .h-100vh\@#{$breakpointAlias} { height: 100vh; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Max Size
+// ---------------------------------------------------------
+
+.mw-100p { max-width: 100%; }
+.mh-100p { max-height: 100%; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .mw-100p\@#{$breakpointAlias} { max-width: 100%; }
+    .mh-100p\@#{$breakpointAlias} { max-height: 100%; }
+  }
+}

package/src/assets/styles/spec/utils/layout/helpers/typography.scss

@@ -0,0 +1,127 @@
+@use '../mixins/generateResponsive' as *;
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Text Align
+// + @Text Transform
+// + @Font Style
+// + @Text Decoration
+// + @White Space
+// + @Word Break
+// + @Word Wrap
+// + @Text Overflow
+// + @Font Size
+// + @Font Weight
+// + @Line Height
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Text Align
+// ---------------------------------------------------------
+
+.ta-c { text-align: center !important; }
+.ta-l { text-align: left !important; }
+.ta-r { text-align: right !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .ta-c\@#{$breakpointAlias} { text-align: center !important; }
+    .ta-l\@#{$breakpointAlias} { text-align: left !important; }
+    .ta-r\@#{$breakpointAlias} { text-align: right !important; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Text Transform
+// ---------------------------------------------------------
+
+.tt-n { text-transform: none !important; }
+.tt-u { text-transform: uppercase !important; }
+.tt-l { text-transform: lowercase !important; }
+.tt-c { text-transform: capitalize !important; }
+
+// ---------------------------------------------------------
+// @Font Style
+// ---------------------------------------------------------
+
+.fs-i { font-style: italic !important; }
+.fs-o { font-style: oblique !important; }
+
+// ---------------------------------------------------------
+// @Text Decoration
+// ---------------------------------------------------------
+
+.td-n { text-decoration: none !important; }
+.td-o { text-decoration: overline !important; }
+.td-lt { text-decoration: line-through !important; }
+.td-u { text-decoration: underline !important; }
+
+// ---------------------------------------------------------
+// @White Space
+// ---------------------------------------------------------
+
+.whs-nw { white-space: nowrap !important; }
+.whs-p { white-space: pre !important; }
+.whs-n { white-space: normal !important; }
+
+// ---------------------------------------------------------
+// @Word Break
+// ---------------------------------------------------------
+
+.wob-n { word-break: normal !important; }
+.wob-ba { word-break: break-all !important; }
+.wob-k { word-break: keep-all !important; }
+
+// ---------------------------------------------------------
+// @Word Wrap
+// ---------------------------------------------------------
+
+.wow-bw { word-wrap: break-word !important; }
+.wow-n { word-wrap: normal !important; }
+
+// ---------------------------------------------------------
+// @Text Overflow
+// ---------------------------------------------------------
+
+.tov-e { text-overflow: ellipsis !important; }
+
+// ---------------------------------------------------------
+// @Font Size
+// ---------------------------------------------------------
+
+.fsz-xs   { font-size: 0.75rem !important; }
+.fsz-sm   { font-size: 0.87rem !important; }
+.fsz-def  { font-size: 1rem !important; }
+.fsz-md   { font-size: 1.15rem !important; }
+.fsz-lg   { font-size: 1.4rem !important; }
+.fsz-xl   { font-size: 1.7rem !important; }
+
+// ---------------------------------------------------------
+// @Font Weight
+// ---------------------------------------------------------
+
+.fw-100 { font-weight: 100 !important; }
+.fw-200 { font-weight: 200 !important; }
+.fw-300 { font-weight: 300 !important; }
+.fw-400 { font-weight: 400 !important; }
+.fw-500 { font-weight: 500 !important; }
+.fw-600 { font-weight: 600 !important; }
+.fw-700 { font-weight: 700 !important; }
+.fw-800 { font-weight: 800 !important; }
+.fw-900 { font-weight: 900 !important; }
+
+// ---------------------------------------------------------
+// @Line Height
+// ---------------------------------------------------------
+
+.lh-0    { line-height: 0 !important; }
+.lh-1    { line-height: 1 !important; }
+.lh-3\/2 { line-height: 1.5 !important; }

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

@@ -0,0 +1,3 @@
+@use 'mixins/index' as *;
+@use 'utils/index' as *;
+@use 'helpers/index' as *;

package/src/assets/styles/spec/utils/layout/mixins/generateResponsive.scss

@@ -0,0 +1,25 @@
+@use '../../../settings/breakpoints' as *;
+@use 'mediaQueryCondition' as *;
+
+// Initialize global variable to avoid deprecation warning
+$breakpointAlias: null;
+
+// ---------------------------------------------------------
+// @Responsive Suffix Generator
+// ---------------------------------------------------------
+
+// Mixin used to generate responsive suffixes for classes (i.e. m-10@sm+).
+
+
+@mixin generateResponsive() {
+  @each $breakpoint in $breakpoints {
+    $breakpointAlias     : nth($breakpoint, 1) !global;
+    $breakpointCondition : nth($breakpoint, 2);
+
+    @include mediaQueryCondition($breakpointAlias) {
+      @content;
+    }
+
+    $breakpointAlias: null !global;
+  }
+}

package/src/assets/styles/spec/utils/layout/mixins/index.scss

@@ -0,0 +1,2 @@
+@use 'mediaQueryCondition' as *;
+@use 'generateResponsive' as *;

package/src/assets/styles/spec/utils/layout/mixins/mediaQueryCondition.scss

@@ -0,0 +1,28 @@
+@use '../../../settings/breakpoints' as *;
+
+// ---------------------------------------------------------
+// @Media Queries Generator
+// ---------------------------------------------------------
+
+// Mixin used to generate responsive versions of css rules.
+
+@mixin mediaQueryCondition($mq) {
+  $breakpointFound: false;
+
+  @each $breakpoint in $breakpoints {
+    $alias: nth($breakpoint, 1);
+    $condition: nth($breakpoint, 2);
+
+    @if $mq == $alias and $condition {
+      $breakpointFound: true;
+
+      @media #{$condition} {
+        @content;
+      }
+    }
+  }
+
+  @if $breakpointFound == false {
+    @warn "Oops! Breakpoint ‘#{$mq}’ does not exist \:";
+  }
+}

package/src/assets/styles/spec/utils/layout/utils/center.scss

@@ -0,0 +1,54 @@
+@use '../mixins/generateResponsive' as *;
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Centering
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Centering
+// ---------------------------------------------------------
+
+.centerY {
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+.centerX {
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.centerXY {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .centerY\@#{$breakpointAlias} {
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .centerX\@#{$breakpointAlias} {
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    .centerXY\@#{$breakpointAlias} {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}

package/src/assets/styles/spec/utils/layout/utils/gap.scss

@@ -0,0 +1,229 @@
+@use "sass:math";
+@use '../mixins/generateResponsive' as *;
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Base
+// + @Gap (0 > 4 Step 1)
+// + @Gap (5 > 35 Step 5)
+// + @Gap (40 > 160 Step 10)
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Base
+// ---------------------------------------------------------
+
+[class*='gap'] {
+  width: auto !important;
+  overflow: hidden !important;
+}
+
+// ---------------------------------------------------------
+// @Gap (0 > 4 Step 1)
+// ---------------------------------------------------------
+
+@for $i from 0 through 4 {
+  .gapX-#{$i} {
+    margin-left: #{math.div($i, -2)}px !important;
+    margin-right: #{math.div($i, -2)}px !important;
+
+    & > * {
+      padding-left: #{math.div($i, 2)}px !important;
+      padding-right: #{math.div($i, 2)}px !important;
+    }
+  }
+
+  .gapY-#{$i} {
+    margin-top: #{math.div($i, -2)}px !important;
+    margin-bottom: #{math.div($i, -2)}px !important;
+
+    & > * {
+      padding-top: #{math.div($i, 2)}px !important;
+      padding-bottom: #{math.div($i, 2)}px !important;
+    }
+  }
+
+  .gap-#{$i} {
+    margin: #{math.div($i, -2)}px !important;
+
+    & > * {
+      padding: #{math.div($i, 2)}px !important;
+    }
+  }
+
+  @if ($responsive == true) {
+    @include generateResponsive() {
+      .gapX-#{$i}\@#{$breakpointAlias} {
+        margin-left: #{math.div($i, -2)}px !important;
+        margin-right: #{math.div($i, -2)}px !important;
+
+        & > * {
+          padding-left: #{math.div($i, 2)}px !important;
+          padding-right: #{math.div($i, 2)}px !important;
+        }
+      }
+
+      .gapY-#{$i}\@#{$breakpointAlias} {
+        margin-top: #{math.div($i, -2)}px !important;
+        margin-bottom: #{math.div($i, -2)}px !important;
+
+        & > * {
+          padding-top: #{math.div($i, 2)}px !important;
+          padding-bottom: #{math.div($i, 2)}px !important;
+        }
+      }
+
+      .gap-#{$i}\@#{$breakpointAlias} {
+        margin: #{math.div($i, -2)}px !important;
+
+        & > * {
+          padding: #{math.div($i, 2)}px !important;
+        }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Gap (5 > 35 Step 5)
+// ---------------------------------------------------------
+
+@for $i from 5 through 35 {
+  @if $i % 5 == 0 {
+    .gapX-#{$i} {
+      margin-left: #{math.div($i, -2)}px !important;
+      margin-right: #{math.div($i, -2)}px !important;
+
+      & > * {
+        padding-left: #{math.div($i, 2)}px !important;
+        padding-right: #{math.div($i, 2)}px !important;
+      }
+    }
+
+    .gapY-#{$i} {
+      margin-top: #{math.div($i, -2)}px !important;
+      margin-bottom: #{math.div($i, -2)}px !important;
+
+      & > * {
+        padding-top: #{math.div($i, 2)}px !important;
+        padding-bottom: #{math.div($i, 2)}px !important;
+      }
+    }
+
+    .gap-#{$i} {
+      margin: #{math.div($i, -2)}px !important;
+
+      & > * {
+        padding: #{math.div($i, 2)}px !important;
+      }
+    }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .gapX-#{$i}\@#{$breakpointAlias} {
+          margin-left: #{math.div($i, -2)}px !important;
+          margin-right: #{math.div($i, -2)}px !important;
+
+          & > * {
+            padding-left: #{math.div($i, 2)}px !important;
+            padding-right: #{math.div($i, 2)}px !important;
+          }
+        }
+
+        .gapY-#{$i}\@#{$breakpointAlias} {
+          margin-top: #{math.div($i, -2)}px !important;
+          margin-bottom: #{math.div($i, -2)}px !important;
+
+          & > * {
+            padding-top: #{math.div($i, 2)}px !important;
+            padding-bottom: #{math.div($i, 2)}px !important;
+          }
+        }
+
+        .gap-#{$i}\@#{$breakpointAlias} {
+          margin: #{math.div($i, -2)}px !important;
+
+          & > * {
+            padding: #{math.div($i, 2)}px !important;
+          }
+        }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Gap (40 > 160 Step 10)
+// ---------------------------------------------------------
+
+@for $i from 40 through 160 {
+  @if $i % 10 == 0 {
+    .gapX-#{$i} {
+      margin-left: #{math.div($i, -2)}px !important;
+      margin-right: #{math.div($i, -2)}px !important;
+
+      & > * {
+        padding-left: #{math.div($i, 2)}px !important;
+        padding-right: #{math.div($i, 2)}px !important;
+      }
+    }
+
+    .gapY-#{$i} {
+      margin-top: #{math.div($i, -2)}px !important;
+      margin-bottom: #{math.div($i, -2)}px !important;
+
+      & > * {
+        padding-top: #{math.div($i, 2)}px !important;
+        padding-bottom: #{math.div($i, 2)}px !important;
+      }
+    }
+
+    .gap-#{$i} {
+      margin: #{math.div($i, -2)}px !important;
+
+      & > * {
+        padding: #{math.div($i, 2)}px !important;
+      }
+    }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .gapX-#{$i}\@#{$breakpointAlias} {
+          margin-left: #{math.div($i, -2)}px !important;
+          margin-right: #{math.div($i, -2)}px !important;
+
+          & > * {
+            padding-left: #{math.div($i, 2)}px !important;
+            padding-right: #{math.div($i, 2)}px !important;
+          }
+        }
+
+        .gapY-#{$i}\@#{$breakpointAlias} {
+          margin-top: #{math.div($i, -2)}px !important;
+          margin-bottom: #{math.div($i, -2)}px !important;
+
+          & > * {
+            padding-top: #{math.div($i, 2)}px !important;
+            padding-bottom: #{math.div($i, 2)}px !important;
+          }
+        }
+
+        .gap-#{$i}\@#{$breakpointAlias} {
+          margin: #{math.div($i, -2)}px !important;
+
+          & > * {
+            padding: #{math.div($i, 2)}px !important;
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,5 @@
+@use 'center' as *;
+@use 'gap' as *;
+@use 'peers' as *;
+@use 'layers' as *;
+

package/src/assets/styles/spec/utils/layout/utils/layers.scss

@@ -0,0 +1,5 @@
+.layers {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+}

package/src/assets/styles/spec/utils/layout/utils/peers.scss

@@ -0,0 +1,35 @@
+.peers {
+  box-sizing: border-box;
+  display: flex !important;
+  align-items: flex-start;
+  justify-content: flex-start;
+  flex-flow: row wrap;
+  height: auto;
+  max-width: 100%;
+  margin: 0;
+  padding: 0;
+}
+
+.peer {
+  display: block;
+  height: auto;
+  flex: 0 0 auto;
+}
+
+.peer-greed {
+  flex: 1 1 auto;
+  // overflow: hidden;
+}
+
+.peers-greed > .peer,
+.peers-greed > .peers {
+  flex: 1 1 auto;
+}
+
+.peer > img {
+  max-width: none;
+}
+
+.peer-greed > img {
+  max-width: 100%;
+}