adminator-admin-dashboard 2.7.0

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

@@ -0,0 +1,266 @@
+@use '../mixins/generateResponsive' as *;
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Margin (0 > 4 Step 1)
+// + @Margin (5 > 35 Step 5)
+// + @Margin (40 > 160 Step 10)
+// + @Margin Auto
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Padding (0 > 4 Step 1)
+// ---------------------------------------------------------
+
+@for $i from 0 through 4 {
+  .m-#{$i}  { margin: #{$i}px !important; }
+  .mT-#{$i} { margin-top: #{$i}px !important; }
+  .mR-#{$i} { margin-right: #{$i}px !important; }
+  .mB-#{$i} { margin-bottom: #{$i}px !important; }
+  .mL-#{$i} { margin-left: #{$i}px !important; }
+
+  .mY-#{$i} {
+    margin-top: #{$i}px !important;
+    margin-bottom: #{$i}px !important;
+  }
+
+  .mX-#{$i} {
+    margin-left: #{$i}px !important;
+    margin-right: #{$i}px !important;
+  }
+
+  .m-nv-#{$i}  { margin: -#{$i}px !important; }
+  .mT-nv-#{$i} { margin-top: -#{$i}px !important; }
+  .mR-nv-#{$i} { margin-right: -#{$i}px !important; }
+  .mB-nv-#{$i} { margin-bottom:- #{$i}px !important; }
+  .mL-nv-#{$i} { margin-left: -#{$i}px !important; }
+
+  .mY-nv-#{$i} {
+    margin-top: -#{$i}px !important;
+    margin-bottom: -#{$i}px !important;
+  }
+
+  .mX-nv-#{$i} {
+    margin-left: -#{$i}px !important;
+    margin-right: -#{$i}px !important;
+  }
+
+  @if ($responsive == true) {
+    @include generateResponsive() {
+      .m-#{$i}\@#{$breakpointAlias}  { margin: #{$i}px !important; }
+      .mT-#{$i}\@#{$breakpointAlias} { margin-top: #{$i}px !important; }
+      .mR-#{$i}\@#{$breakpointAlias} { margin-right: #{$i}px !important; }
+      .mB-#{$i}\@#{$breakpointAlias} { margin-bottom: #{$i}px !important; }
+      .mL-#{$i}\@#{$breakpointAlias} { margin-left: #{$i}px !important; }
+
+      .mY-#{$i}\@#{$breakpointAlias} {
+        margin-top: #{$i}px !important;
+        margin-bottom: #{$i}px !important;
+      }
+
+      .mX-#{$i}\@#{$breakpointAlias} {
+        margin-left: #{$i}px !important;
+        margin-right: #{$i}px !important;
+      }
+
+      .m-nv-#{$i}\@#{$breakpointAlias}  { margin: -#{$i}px !important; }
+      .mT-nv-#{$i}\@#{$breakpointAlias} { margin-top: -#{$i}px !important; }
+      .mR-nv-#{$i}\@#{$breakpointAlias} { margin-right: -#{$i}px !important; }
+      .mB-nv-#{$i}\@#{$breakpointAlias} { margin-bottom: -#{$i}px !important; }
+      .mL-nv-#{$i}\@#{$breakpointAlias} { margin-left: -#{$i}px !important; }
+
+      .mY-nv-#{$i}\@#{$breakpointAlias} {
+        margin-top: -#{$i}px !important;
+        margin-bottom: -#{$i}px !important;
+      }
+
+      .mX-nv-#{$i}\@#{$breakpointAlias} {
+        margin-left: -#{$i}px !important;
+        margin-right: -#{$i}px !important;
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Padding (5 > 35 Step 5)
+// ---------------------------------------------------------
+
+@for $i from 5 through 35 {
+  @if $i % 5 == 0 {
+    .m-#{$i}  { margin: #{$i}px !important; }
+    .mT-#{$i} { margin-top: #{$i}px !important; }
+    .mR-#{$i} { margin-right: #{$i}px !important; }
+    .mB-#{$i} { margin-bottom: #{$i}px !important; }
+    .mL-#{$i} { margin-left: #{$i}px !important; }
+
+    .mY-#{$i} {
+      margin-top: #{$i}px !important;
+      margin-bottom: #{$i}px !important;
+    }
+
+    .mX-#{$i} {
+      margin-left: #{$i}px !important;
+      margin-right: #{$i}px !important;
+    }
+
+    .m-nv-#{$i}  { margin: -#{$i}px !important; }
+    .mT-nv-#{$i} { margin-top: -#{$i}px !important; }
+    .mR-nv-#{$i} { margin-right: -#{$i}px !important; }
+    .mB-nv-#{$i} { margin-bottom: -#{$i}px !important; }
+    .mL-nv-#{$i} { margin-left: -#{$i}px !important; }
+
+    .mY-nv-#{$i} {
+      margin-top: -#{$i}px !important;
+      margin-bottom: -#{$i}px !important;
+    }
+
+    .mX-nv-#{$i} {
+      margin-left: -#{$i}px !important;
+      margin-right: -#{$i}px !important;
+    }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .m-#{$i}\@#{$breakpointAlias}  { margin: #{$i}px !important; }
+        .mT-#{$i}\@#{$breakpointAlias} { margin-top: #{$i}px !important; }
+        .mR-#{$i}\@#{$breakpointAlias} { margin-right: #{$i}px !important; }
+        .mB-#{$i}\@#{$breakpointAlias} { margin-bottom: #{$i}px !important; }
+        .mL-#{$i}\@#{$breakpointAlias} { margin-left: #{$i}px !important; }
+
+        .mY-#{$i}\@#{$breakpointAlias} {
+          margin-top: #{$i}px !important;
+          margin-bottom: #{$i}px !important;
+        }
+
+        .mX-#{$i}\@#{$breakpointAlias} {
+          margin-left: #{$i}px !important;
+          margin-right: #{$i}px !important;
+        }
+
+        .m-nv-#{$i}\@#{$breakpointAlias}  { margin: -#{$i}px !important; }
+        .mT-nv-#{$i}\@#{$breakpointAlias} { margin-top: -#{$i}px !important; }
+        .mR-nv-#{$i}\@#{$breakpointAlias} { margin-right: -#{$i}px !important; }
+        .mB-nv-#{$i}\@#{$breakpointAlias} { margin-bottom: -#{$i}px !important; }
+        .mL-nv-#{$i}\@#{$breakpointAlias} { margin-left: -#{$i}px !important; }
+
+        .mY-nv-#{$i}\@#{$breakpointAlias} {
+          margin-top: -#{$i}px !important;
+          margin-bottom: -#{$i}px !important;
+        }
+
+        .mX-nv-#{$i}\@#{$breakpointAlias} {
+          margin-left: -#{$i}px !important;
+          margin-right: -#{$i}px !important;
+        }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Padding (40 > 160 Step 10)
+// ---------------------------------------------------------
+
+@for $i from 40 through 160 {
+  @if $i % 10 == 0 {
+
+    .m-#{$i}  { margin: #{$i}px !important; }
+    .mT-#{$i} { margin-top: #{$i}px !important; }
+    .mR-#{$i} { margin-right: #{$i}px !important; }
+    .mB-#{$i} { margin-bottom: #{$i}px !important; }
+    .mL-#{$i} { margin-left: #{$i}px !important; }
+
+    .mY-#{$i} {
+      margin-top: #{$i}px !important;
+      margin-bottom: #{$i}px !important;
+    }
+
+    .mX-#{$i} {
+      margin-left: #{$i}px !important;
+      margin-right: #{$i}px !important;
+    }
+
+    .m-nv-#{$i}  { margin: -#{$i}px !important; }
+    .mT-nv-#{$i} { margin-top: -#{$i}px !important; }
+    .mR-nv-#{$i} { margin-right: -#{$i}px !important; }
+    .mB-nv-#{$i} { margin-bottom: -#{$i}px !important; }
+    .mL-nv-#{$i} { margin-left: -#{$i}px !important; }
+
+    .mY-nv-#{$i} {
+      margin-top: -#{$i}px !important;
+      margin-bottom: -#{$i}px !important;
+    }
+
+    .mX-nv-#{$i} {
+      margin-left: -#{$i}px !important;
+      margin-right: -#{$i}px !important;
+    }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .m-#{$i}\@#{$breakpointAlias}  { margin: #{$i}px !important; }
+        .mT-#{$i}\@#{$breakpointAlias} { margin-top: #{$i}px !important; }
+        .mR-#{$i}\@#{$breakpointAlias} { margin-right: #{$i}px !important; }
+        .mB-#{$i}\@#{$breakpointAlias} { margin-bottom: #{$i}px !important; }
+        .mL-#{$i}\@#{$breakpointAlias} { margin-left: #{$i}px !important; }
+
+        .mY-#{$i}\@#{$breakpointAlias} {
+          margin-top: #{$i}px !important;
+          margin-bottom: #{$i}px !important;
+        }
+
+        .mX-#{$i}\@#{$breakpointAlias} {
+          margin-left: #{$i}px !important;
+          margin-right: #{$i}px !important;
+        }
+
+        .m-nv-#{$i}\@#{$breakpointAlias}  { margin: -#{$i}px !important; }
+        .mT-nv-#{$i}\@#{$breakpointAlias} { margin-top: -#{$i}px !important; }
+        .mR-nv-#{$i}\@#{$breakpointAlias} { margin-right: -#{$i}px !important; }
+        .mB-nv-#{$i}\@#{$breakpointAlias} { margin-bottom: -#{$i}px !important; }
+        .mL-nv-#{$i}\@#{$breakpointAlias} { margin-left: -#{$i}px !important; }
+
+        .mY-nv-#{$i}\@#{$breakpointAlias} {
+          margin-top: -#{$i}px !important;
+          margin-bottom: -#{$i}px !important;
+        }
+
+        .mX-nv-#{$i}\@#{$breakpointAlias} {
+          margin-left: -#{$i}px !important;
+          margin-right: -#{$i}px !important;
+        }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Padding Auto
+// ---------------------------------------------------------
+
+.m-a  { margin: auto !important; }
+.mX-a { margin-left: auto !important; margin-right: auto !important; }
+.mT-a { margin-top: auto !important; }
+.mR-a { margin-right: auto !important; }
+.mB-a { margin-bottom: auto !important; }
+.mL-a { margin-left: auto !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .m-a\@#{$breakpointAlias}  { margin: auto !important; }
+    .mX-a\@#{$breakpointAlias} { margin-left: auto !important; margin-right: auto !important; }
+    .mT-a\@#{$breakpointAlias} { margin-top: auto !important; }
+    .mR-a\@#{$breakpointAlias} { margin-right: auto !important; }
+    .mB-a\@#{$breakpointAlias} { margin-bottom: auto !important; }
+    .mL-a\@#{$breakpointAlias} { margin-left: auto !important; }
+  }
+}

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

@@ -0,0 +1,91 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Background Size
+// + @Background Position
+// + @Background Repeat
+// + @Object Fit
+// + @Resize
+// + @Opacity
+// + @Cursor
+// + @Visibility
+
+// ---------------------------------------------------------
+// @Background Size
+// ---------------------------------------------------------
+
+.bgsz-cv   { background-size: cover; }
+.bgsz-ct   { background-size: contain; }
+.bgsz-full { background-size: 100% 100%; }
+
+// ---------------------------------------------------------
+// @Background Position
+// ---------------------------------------------------------
+
+.bgpX-c    { background-position-x: center; }
+.bgpX-t    { background-position-x: top; }
+.bgpX-r    { background-position-x: right; }
+.bgpX-l    { background-position-x: left; }
+.bgpX-b    { background-position-x: bottom; }
+.bgpY-c    { background-position-y: center; }
+.bgpY-t    { background-position-y: top; }
+.bgpY-r    { background-position-y: right; }
+.bgpY-l    { background-position-y: left; }
+.bgpY-b    { background-position-y: bottom; }
+
+// ---------------------------------------------------------
+// @Background Repeat
+// ---------------------------------------------------------
+
+.bgr-n     { background-repeat: no-repeat; }
+.bgr-y     { background-repeat: repeat-y; }
+.bgr-x     { background-repeat: repeat-x; }
+
+// ---------------------------------------------------------
+// @Object Fit
+// ---------------------------------------------------------
+
+.of-ct     { object-fit: contain; }
+.of-cv     { object-fit: cover; }
+.of-f      { object-fit: fill; }
+.of-n      { object-fit: none; }
+.of-sd     { object-fit: scale-down; }
+
+// ---------------------------------------------------------
+// @Resize
+// ---------------------------------------------------------
+
+.rsz-v     { resize: vertical; }
+.rsz-h     { resize: horizontal; }
+
+// ---------------------------------------------------------
+// @Opacity
+// ---------------------------------------------------------
+
+.op-0      { opacity: 0; }
+.op-10p    { opacity: 0.1; }
+.op-20p    { opacity: 0.2; }
+.op-30p    { opacity: 0.3; }
+.op-40p    { opacity: 0.4; }
+.op-50p    { opacity: 0.5; }
+.op-60p    { opacity: 0.6; }
+.op-70p    { opacity: 0.7; }
+.op-80p    { opacity: 0.8; }
+.op-90p    { opacity: 0.9; }
+.op-100p   { opacity: 1; }
+
+// ---------------------------------------------------------
+// @Cursor
+// ---------------------------------------------------------
+
+.cur-na    { cursor: not-allowed; }
+.cur-p     { cursor: pointer; }
+.cur-a     { cursor: auto; }
+
+// ---------------------------------------------------------
+// @Visibility
+// ---------------------------------------------------------
+
+.vis-v     { visibility: visible; }
+.vis-h     { visibility: hidden; }

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

@@ -0,0 +1,147 @@
+@use '../mixins/generateResponsive' as *;
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Padding (0 > 4 Step 1)
+// + @Padding (5 > 35 Step 5)
+// + @Padding (40 > 160 Step 10)
+// + @Padding Auto
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Padding (0 > 4 Step 1)
+// ---------------------------------------------------------
+
+@for $i from 0 through 4 {
+  .p-#{$i}  { padding: #{$i}px !important; }
+  .pT-#{$i} { padding-top: #{$i}px !important; }
+  .pR-#{$i} { padding-right: #{$i}px !important; }
+  .pB-#{$i} { padding-bottom: #{$i}px !important; }
+  .pL-#{$i} { padding-left: #{$i}px !important; }
+
+  .pY-#{$i} {
+    padding-top: #{$i}px !important;
+    padding-bottom: #{$i}px !important;
+  }
+
+  .pX-#{$i} {
+    padding-left: #{$i}px !important;
+    padding-right: #{$i}px !important;
+  }
+
+  @if ($responsive == true) {
+    @include generateResponsive() {
+      .p-#{$i}\@#{$breakpointAlias}  { padding: #{$i}px !important; }
+      .pT-#{$i}\@#{$breakpointAlias} { padding-top: #{$i}px !important; }
+      .pR-#{$i}\@#{$breakpointAlias} { padding-right: #{$i}px !important; }
+      .pB-#{$i}\@#{$breakpointAlias} { padding-bottom: #{$i}px !important; }
+      .pL-#{$i}\@#{$breakpointAlias} { padding-left: #{$i}px !important; }
+
+      .pY-#{$i}\@#{$breakpointAlias} {
+        padding-top: #{$i}px !important;
+        padding-bottom: #{$i}px !important;
+      }
+
+      .pX-#{$i}\@#{$breakpointAlias} {
+        padding-left: #{$i}px !important;
+        padding-right: #{$i}px !important;
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Padding (5 > 35 Step 5)
+// ---------------------------------------------------------
+
+@for $i from 5 through 35 {
+  @if $i % 5 == 0 {
+    .p-#{$i}  { padding: #{$i}px !important; }
+    .pT-#{$i} { padding-top: #{$i}px !important; }
+    .pR-#{$i} { padding-right: #{$i}px !important; }
+    .pB-#{$i} { padding-bottom: #{$i}px !important; }
+    .pL-#{$i} { padding-left: #{$i}px !important; }
+
+    .pY-#{$i} {
+      padding-top: #{$i}px !important;
+      padding-bottom: #{$i}px !important;
+    }
+
+    .pX-#{$i} {
+      padding-left: #{$i}px !important;
+      padding-right: #{$i}px !important;
+    }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .p-#{$i}\@#{$breakpointAlias}  { padding: #{$i}px !important; }
+        .pT-#{$i}\@#{$breakpointAlias} { padding-top: #{$i}px !important; }
+        .pR-#{$i}\@#{$breakpointAlias} { padding-right: #{$i}px !important; }
+        .pB-#{$i}\@#{$breakpointAlias} { padding-bottom: #{$i}px !important; }
+        .pL-#{$i}\@#{$breakpointAlias} { padding-left: #{$i}px !important; }
+
+        .pY-#{$i}\@#{$breakpointAlias} {
+          padding-top: #{$i}px !important;
+          padding-bottom: #{$i}px !important;
+        }
+
+        .pX-#{$i}\@#{$breakpointAlias} {
+          padding-left: #{$i}px !important;
+          padding-right: #{$i}px !important;
+        }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Padding (40 > 160 Step 10)
+// ---------------------------------------------------------
+
+@for $i from 40 through 160 {
+  @if $i % 10 == 0 {
+    .p-#{$i}  { padding: #{$i}px !important; }
+    .pT-#{$i} { padding-top: #{$i}px !important; }
+    .pR-#{$i} { padding-right: #{$i}px !important; }
+    .pB-#{$i} { padding-bottom: #{$i}px !important; }
+    .pL-#{$i} { padding-left: #{$i}px !important; }
+
+    .pY-#{$i} {
+      padding-top: #{$i}px !important;
+      padding-bottom: #{$i}px !important;
+    }
+
+    .pX-#{$i} {
+      padding-left: #{$i}px !important;
+      padding-right: #{$i}px !important;
+    }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .p-#{$i}\@#{$breakpointAlias}  { padding: #{$i}px !important; }
+        .pT-#{$i}\@#{$breakpointAlias} { padding-top: #{$i}px !important; }
+        .pR-#{$i}\@#{$breakpointAlias} { padding-right: #{$i}px !important; }
+        .pB-#{$i}\@#{$breakpointAlias} { padding-bottom: #{$i}px !important; }
+        .pL-#{$i}\@#{$breakpointAlias} { padding-left: #{$i}px !important; }
+
+        .pY-#{$i}\@#{$breakpointAlias} {
+          padding-top: #{$i}px !important;
+          padding-bottom: #{$i}px !important;
+        }
+
+        .pX-#{$i}\@#{$breakpointAlias} {
+          padding-left: #{$i}px !important;
+          padding-right: #{$i}px !important;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,118 @@
+@use '../mixins/generateResponsive' as *;
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Position (0 > 4 Step 1)
+// + @Position (5 > 35 Step 5)
+// + @Position (40 > 160 Step 10)
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Position (0 > 4 Step 1)
+// ---------------------------------------------------------
+
+@for $i from 0 through 4 {
+  .t-#{$i} { top: #{$i}px; }
+  .r-#{$i} { right: #{$i}px; }
+  .b-#{$i} { bottom: #{$i}px; }
+  .l-#{$i} { left: #{$i}px; }
+
+  @if ($responsive == true) {
+    @include generateResponsive() {
+      .t-#{$i}\@#{$breakpointAlias} { top: #{$i}px; }
+      .r-#{$i}\@#{$breakpointAlias} { right: #{$i}px; }
+      .b-#{$i}\@#{$breakpointAlias} { bottom: #{$i}px; }
+      .l-#{$i}\@#{$breakpointAlias} { left: #{$i}px; }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Position (5 > 35 Step 5)
+// ---------------------------------------------------------
+
+@for $i from 5 through 35 {
+  @if $i % 5 == 0 {
+    .t-#{$i} { top: #{$i}px; }
+    .r-#{$i} { right: #{$i}px; }
+    .b-#{$i} { bottom: #{$i}px; }
+    .l-#{$i} { left: #{$i}px; }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .t-#{$i}\@#{$breakpointAlias} { top: #{$i}px; }
+        .r-#{$i}\@#{$breakpointAlias} { right: #{$i}px; }
+        .b-#{$i}\@#{$breakpointAlias} { bottom: #{$i}px; }
+        .l-#{$i}\@#{$breakpointAlias} { left: #{$i}px; }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Position (40 > 160 Step 10)
+// ---------------------------------------------------------
+
+@for $i from 40 through 160 {
+  @if $i % 10 == 0 {
+    .t-#{$i} { top: #{$i}px; }
+    .r-#{$i} { right: #{$i}px; }
+    .b-#{$i} { bottom: #{$i}px; }
+    .l-#{$i} { left: #{$i}px; }
+
+    @if ($responsive == true) {
+      @include generateResponsive() {
+        .t-#{$i}\@#{$breakpointAlias} { top: #{$i}px; }
+        .r-#{$i}\@#{$breakpointAlias} { right: #{$i}px; }
+        .b-#{$i}\@#{$breakpointAlias} { bottom: #{$i}px; }
+        .l-#{$i}\@#{$breakpointAlias} { left: #{$i}px; }
+      }
+    }
+  }
+}
+
+// ---------------------------------------------------------
+// @Position (50%)
+// ---------------------------------------------------------
+
+.tl-50p {
+  top: 50%;
+  left: 50%;
+}
+
+.tr-50p {
+  top: 50%;
+  right: 50%;
+}
+
+.t-50p { top: 50%; }
+.r-50p { right: 50%; }
+.b-50p { bottom: 50%; }
+.l-50p { left: 50%; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .tl-50p\@#{$breakpointAlias} {
+      top: 50%;
+      left: 50%;
+    }
+
+    .tr-50p\@#{$breakpointAlias} {
+      top: 50%;
+      right: 50%;
+    }
+
+    .t-50p\@#{$breakpointAlias} { top: 50%; }
+    .r-50p\@#{$breakpointAlias} { right: 50%; }
+    .b-50p\@#{$breakpointAlias} { bottom: 50%; }
+    .l-50p\@#{$breakpointAlias} { left: 50%; }
+  }
+}

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

@@ -0,0 +1,6 @@
+// ---------------------------------------------------------
+// @Pseudo Elements
+// ---------------------------------------------------------
+
+.no-after::after   { display: none !important; }
+.no-before::before { display: none !important; }