adminator-admin-dashboard 2.7.0

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

@@ -0,0 +1,78 @@
+@use '../../../settings/baseColors' as colors;
+@use '../../../settings/borders' as borders;
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Quick Border Helpers
+// + @Border Width
+// + @Border Radius
+// + @Border Style
+
+// ---------------------------------------------------------
+// @Quick Border Helpers
+// ---------------------------------------------------------
+
+.bd  { border: #{borders.$border-width} solid #{colors.$border-color} !important; }
+.bdT { border-top: #{borders.$border-width} solid #{colors.$border-color} !important; }
+.bdR { border-right: #{borders.$border-width} solid #{colors.$border-color} !important; }
+.bdB { border-bottom: #{borders.$border-width} solid #{colors.$border-color} !important; }
+.bdL { border-left: #{borders.$border-width} solid #{colors.$border-color} !important; }
+
+// ---------------------------------------------------------
+// @Border Width
+// ---------------------------------------------------------
+
+@for $i from 0 through 5 {
+  .bdw-#{$i}  { border-width: #{$i}px !important; }
+  .bdwT-#{$i} { border-top-width: #{$i}px !important; }
+  .bdwR-#{$i} { border-right-width: #{$i}px !important; }
+  .bdwB-#{$i} { border-bottom-width: #{$i}px !important; }
+  .bdwL-#{$i} { border-left-width: #{$i}px !important; }
+}
+
+// ---------------------------------------------------------
+// @Border Radius
+// ---------------------------------------------------------
+
+@for $i from 0 to 5 {
+  .bdrs-#{$i} { border-radius: #{$i}px !important; }
+
+  .bdrsT-#{$i} {
+    border-top-left-radius: #{$i}px !important;
+    border-top-right-radius: #{$i}px !important;
+  }
+
+  .bdrsR-#{$i} {
+    border-top-right-radius: #{$i}px !important;
+    border-bottom-right-radius: #{$i}px !important;
+  }
+
+  .bdrsB-#{$i} {
+    border-bottom-left-radius: #{$i}px !important;
+    border-bottom-right-radius: #{$i}px !important;
+  }
+
+  .bdrsL-#{$i} {
+    border-top-left-radius: #{$i}px !important;
+    border-bottom-left-radius: #{$i}px !important;
+  }
+}
+
+.bdrs-50p  { border-radius: 50% !important; }
+.bdrs-10em { border-radius: 10em !important; }
+
+// ---------------------------------------------------------
+// @Border Style
+// ---------------------------------------------------------
+
+.bds-n  { border-style: none !important; }
+.bds-s  { border-style: solid !important; }
+.bds-dt { border-style: dotted !important; }
+.bds-ds { border-style: dashed !important; }
+.bds-db { border-style: double !important; }
+.bds-g  { border-style: groove !important; }
+.bds-r  { border-style: ridge !important; }
+.bds-i  { border-style: inset !important; }
+.bds-o  { border-style: outset !important; }

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

@@ -0,0 +1,220 @@
+@use '../mixins/generateResponsive' as *;
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Flex Wrap
+// + @Flex Direction
+// + @Flex
+// + @Flex Basis
+// + @Flex Grow
+// + @Flex Shrink
+// + @Flex Order
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Display
+// ---------------------------------------------------------
+
+.d-f     { display: flex; }
+.d-if    { display: inline-flex; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .d-f\@#{$breakpointAlias}     { display: flex; }
+    .d-if\@#{$breakpointAlias}    { display: inline-flex; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex Wrap
+// ---------------------------------------------------------
+
+.fxw-w   { flex-wrap: wrap; }
+.fxw-wr  { flex-wrap: wrap-reverse; }
+.fxw-nw  { flex-wrap: nowrap; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fxw-w\@#{$breakpointAlias}   { flex-wrap: wrap; }
+    .fxw-wr\@#{$breakpointAlias}  { flex-wrap: wrap-reverse; }
+    .fxw-nw\@#{$breakpointAlias}  { flex-wrap: nowrap; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex Direction
+// ---------------------------------------------------------
+
+.fxd-c   { flex-direction: column; }
+.fxd-cr  { flex-direction: column-reverse; }
+.fxd-r   { flex-direction: row; }
+.fxd-rr  { flex-direction: row-reverse; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fxd-c\@#{$breakpointAlias}   { flex-direction: column; }
+    .fxd-cr\@#{$breakpointAlias}  { flex-direction: column-reverse; }
+    .fxd-r\@#{$breakpointAlias}   { flex-direction: row; }
+    .fxd-rr\@#{$breakpointAlias}  { flex-direction: row-reverse; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Align Items
+// ---------------------------------------------------------
+
+.ai-fs   { align-items: flex-start; }
+.ai-fe   { align-items: flex-end; }
+.ai-c    { align-items: center; }
+.ai-b    { align-items: baseline; }
+.ai-s    { align-items: stretch; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .ai-fs\@#{$breakpointAlias}   { align-items: flex-start; }
+    .ai-fe\@#{$breakpointAlias}   { align-items: flex-end; }
+    .ai-c\@#{$breakpointAlias}    { align-items: center; }
+    .ai-b\@#{$breakpointAlias}    { align-items: baseline; }
+    .ai-s\@#{$breakpointAlias}    { align-items: stretch; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Align Self
+// ---------------------------------------------------------
+
+.as-fs   { align-self: flex-start; }
+.as-fe   { align-self: flex-end; }
+.as-c    { align-self: center; }
+.as-b    { align-self: baseline; }
+.as-s    { align-self: stretch; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .as-fs\@#{$breakpointAlias}   { align-self: flex-start; }
+    .as-fe\@#{$breakpointAlias}   { align-self: flex-end; }
+    .as-c\@#{$breakpointAlias}    { align-self: center; }
+    .as-b\@#{$breakpointAlias}    { align-self: baseline; }
+    .as-s\@#{$breakpointAlias}    { align-self: stretch; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Align Content
+// ---------------------------------------------------------
+
+.ac-fs   { align-content: flex-start; }
+.ac-fe   { align-content: flex-end; }
+.ac-c    { align-content: center; }
+.ac-s    { align-content: stretch; }
+.ac-sb   { align-content: space-between; }
+.ac-sa   { align-content: space-around; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .ac-fs\@#{$breakpointAlias}   { align-content: flex-start; }
+    .ac-fe\@#{$breakpointAlias}   { align-content: flex-end; }
+    .ac-c\@#{$breakpointAlias}    { align-content: center; }
+    .ac-s\@#{$breakpointAlias}    { align-content: stretch; }
+    .ac-sb\@#{$breakpointAlias}   { align-content: space-between; }
+    .ac-sa\@#{$breakpointAlias}   { align-content: space-around; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Justify Content
+// ---------------------------------------------------------
+
+.jc-fs   { justify-content: flex-start; }
+.jc-fe   { justify-content: flex-end; }
+.jc-c    { justify-content: center; }
+.jc-sb   { justify-content: space-between; }
+.jc-sa   { justify-content: space-around; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .jc-fs\@#{$breakpointAlias}   { justify-content: flex-start; }
+    .jc-fe\@#{$breakpointAlias}   { justify-content: flex-end; }
+    .jc-c\@#{$breakpointAlias}    { justify-content: center; }
+    .jc-sb\@#{$breakpointAlias}   { justify-content: space-between; }
+    .jc-sa\@#{$breakpointAlias}   { justify-content: space-around; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex
+// ---------------------------------------------------------
+
+.fx-n    { flex: none; }
+.fx-1    { flex: 1; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fx-n\@#{$breakpointAlias}    { flex: none; }
+    .fx-1\@#{$breakpointAlias}    { flex: 1; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex Basis
+// ---------------------------------------------------------
+
+.fxb-a   { flex-basis: auto; }
+.fxb-0   { flex-basis: 0; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fxb-a\@#{$breakpointAlias}   { flex-basis: auto; }
+    .fxb-0\@#{$breakpointAlias}   { flex-basis: 0; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex Grow
+// ---------------------------------------------------------
+
+.fxg-1   { flex-grow: 1; }
+.fxg-0   { flex-grow: 0; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fxg-1\@#{$breakpointAlias}   { flex-grow: 1; }
+    .fxg-0\@#{$breakpointAlias}   { flex-grow: 0; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex Shrink
+// ---------------------------------------------------------
+
+.fxs-1   { flex-shrink: 1; }
+.fxs-0   { flex-shrink: 0; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fxs-1\@#{$breakpointAlias}   { flex-shrink: 1; }
+    .fxs-0\@#{$breakpointAlias}   { flex-shrink: 0; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Flex Order
+// ---------------------------------------------------------
+
+@for $i from 0 through 12 {
+  .ord-#{$i} { order: $i; }
+
+  @if ($responsive == true) {
+    @include generateResponsive() {
+      .ord-#{$i}\@#{$breakpointAlias} { order: $i; }
+    }
+  }
+}

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

@@ -0,0 +1,11 @@
+@use 'flex' as *;
+@use 'layout' as *;
+@use 'lists' as *;
+@use 'margin' as *;
+@use 'objects' as *;
+@use 'padding' as *;
+@use 'positions' as *;
+@use 'sizes' as *;
+@use 'typography' as *;
+@use 'border' as *;
+@use 'pseudo' as *;

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

@@ -0,0 +1,137 @@
+@use '../mixins/generateResponsive' as *;
+
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @Variables
+// + @Display
+// + @Overflow
+// + @Float
+// + @Vertical Align
+// + @Position
+// + @Z-Index
+
+// ---------------------------------------------------------
+// @Variables
+// ---------------------------------------------------------
+
+$responsive: true;
+
+// ---------------------------------------------------------
+// @Display
+// ---------------------------------------------------------
+
+.d-b          { display: block !important; }
+.d-ib         { display: inline-block !important; }
+.d-i          { display: inline !important; }
+.d-tb         { display: table !important; }
+.d-tbc        { display: table-cell !important; }
+.d-n          { display: none !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .d-b\@#{$breakpointAlias}      { display: block !important; }
+    .d-ib\@#{$breakpointAlias}     { display: inline-block !important; }
+    .d-i\@#{$breakpointAlias}      { display: inline !important; }
+    .d-tb\@#{$breakpointAlias}     { display: table !important; }
+    .d-tbc\@#{$breakpointAlias}    { display: table-cell !important; }
+    .d-n\@#{$breakpointAlias}      { display: none !important; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Overflow
+// ---------------------------------------------------------
+
+.ov-h         { overflow: hidden !important; }
+.ov-a         { overflow: auto !important; }
+.ov-s         { overflow: scroll !important; }
+
+.ovY-h        { overflow-y: hidden !important; }
+.ovX-h        { overflow-x: hidden !important; }
+.ovY-a        { overflow-y: auto !important; }
+.ovX-a        { overflow-x: auto !important; }
+.ovY-s        { overflow-y: scroll !important; }
+.ovX-s        { overflow-x: scroll !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .ov-h\@#{$breakpointAlias}     { overflow: hidden !important; }
+    .ov-a\@#{$breakpointAlias}     { overflow: auto !important; }
+    .ov-s\@#{$breakpointAlias}     { overflow: scroll !important; }
+
+    .ovY-h\@#{$breakpointAlias}    { overflow-y: hidden !important; }
+    .ovX-h\@#{$breakpointAlias}    { overflow-x: hidden !important; }
+    .ovY-a\@#{$breakpointAlias}    { overflow-y: auto !important; }
+    .ovX-a\@#{$breakpointAlias}    { overflow-x: auto !important; }
+    .ovY-s\@#{$breakpointAlias}    { overflow-y: scroll !important; }
+    .ovX-s\@#{$breakpointAlias}    { overflow-x: scroll !important; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Float
+// ---------------------------------------------------------
+
+.fl-l         { float: left !important; }
+.fl-r         { float: right !important; }
+.fl-n         { float: none !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .fl-l\@#{$breakpointAlias}     { float: left !important; }
+    .fl-r\@#{$breakpointAlias}     { float: right !important; }
+    .fl-n\@#{$breakpointAlias}     { float: none !important; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Vertical Align
+// ---------------------------------------------------------
+
+.va-t         { vertical-align: top !important; }
+.va-m         { vertical-align: middle !important; }
+.va-b         { vertical-align: bottom !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .va-t\@#{$breakpointAlias}     { vertical-align: top !important; }
+    .va-m\@#{$breakpointAlias}     { vertical-align: middle !important; }
+    .va-b\@#{$breakpointAlias}     { vertical-align: bottom !important; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Position
+// ---------------------------------------------------------
+
+.pos-s        { position: static !important; }
+.pos-st       { position: sticky !important; }
+.pos-r        { position: relative !important; }
+.pos-a        { position: absolute !important; }
+.pos-f        { position: fixed !important; }
+
+@if ($responsive == true) {
+  @include generateResponsive() {
+    .pos-s\@#{$breakpointAlias}    { position: static !important; }
+    .pos-st\@#{$breakpointAlias}   { position: sticky !important; }
+    .pos-r\@#{$breakpointAlias}    { position: relative !important; }
+    .pos-a\@#{$breakpointAlias}    { position: absolute !important; }
+    .pos-f\@#{$breakpointAlias}    { position: fixed !important; }
+  }
+}
+
+// ---------------------------------------------------------
+// @Z-Index
+// ---------------------------------------------------------
+
+@for $i from 0 through 9 {
+  .z-#{$i} { z-index: ($i * 1000) !important; }
+
+  @if ($responsive == true) {
+    @include generateResponsive() {
+      .z-#{$i}\@#{$breakpointAlias} { z-index: ($i * 1000) !important; }
+    }
+  }
+}

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

@@ -0,0 +1,23 @@
+// ---------------------------------------------------------
+// @TOC
+// ---------------------------------------------------------
+
+// + @List Style Position
+// + @List Style Type
+
+// ---------------------------------------------------------
+// @List Style Position
+// ---------------------------------------------------------
+
+.lisp-i { list-style-position: inside; }
+.lisp-o { list-style-position: outside; }
+
+// ---------------------------------------------------------
+// @List Style Type
+// ---------------------------------------------------------
+
+.lis-n  { list-style: none; }
+.list-c { list-style-type: circle; }
+.list-s { list-style-type: square; }
+.list-u { list-style-type: upper-roman; }
+.list-l { list-style-type: lower-alpha; }