@sd-angular/core 19.0.12 → 19.0.14

package/assets/scss/core/utilities/_border.scss

@@ -1,22 +1,22 @@
-// --------------------------------------------------------------------------
-// Border-radius  (px-based, 0–200)
-//   rounded-0 … rounded-200 | rounded-full
-// --------------------------------------------------------------------------
-@for $i from 0 through 200 {
-  .rounded-#{$i} { border-radius: #{$i}px !important; }
-}
-
-.rounded-full { border-radius: 9999px !important; }
-
-// --------------------------------------------------------------------------
-// Border utilities
-//   border | border-0 | border-top | border-bottom | border-left | border-right
-// --------------------------------------------------------------------------
-$_border-color: var(--sd-black200);
-
-.border        { border: 1px solid $_border-color !important; }
-.border-0      { border: 0 !important; }
-.border-top    { border-top: 1px solid $_border-color !important; }
-.border-bottom { border-bottom: 1px solid $_border-color !important; }
-.border-left   { border-left: 1px solid $_border-color !important; }
-.border-right  { border-right: 1px solid $_border-color !important; }
+// --------------------------------------------------------------------------
+// Border-radius  (px-based, 0–200)
+//   rounded-0 … rounded-200 | rounded-full
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .rounded-#{$i} { border-radius: #{$i}px !important; }
+}
+
+.rounded-full { border-radius: 9999px !important; }
+
+// --------------------------------------------------------------------------
+// Border utilities
+//   border | border-0 | border-top | border-bottom | border-left | border-right
+// --------------------------------------------------------------------------
+$_border-color: var(--sd-black200);
+
+.border        { border: 1px solid $_border-color !important; }
+.border-0      { border: 0 !important; }
+.border-top    { border-top: 1px solid $_border-color !important; }
+.border-bottom { border-bottom: 1px solid $_border-color !important; }
+.border-left   { border-left: 1px solid $_border-color !important; }
+.border-right  { border-right: 1px solid $_border-color !important; }

package/assets/scss/core/utilities/_display.scss

@@ -1,10 +1,10 @@
-// --------------------------------------------------------------------------
-// Display
-// --------------------------------------------------------------------------
-.d-none         { display: none !important; }
-.d-block        { display: block !important; }
-.d-inline       { display: inline !important; }
-.d-inline-block { display: inline-block !important; }
-.d-flex         { display: flex !important; }
-.d-inline-flex  { display: inline-flex !important; }
-.d-grid         { display: grid !important; }
+// --------------------------------------------------------------------------
+// Display
+// --------------------------------------------------------------------------
+.d-none         { display: none !important; }
+.d-block        { display: block !important; }
+.d-inline       { display: inline !important; }
+.d-inline-block { display: inline-block !important; }
+.d-flex         { display: flex !important; }
+.d-inline-flex  { display: inline-flex !important; }
+.d-grid         { display: grid !important; }

package/assets/scss/core/utilities/_elevation.scss

@@ -1,80 +1,80 @@
-// --------------------------------------------------------------------------
-// Elevation — CSS tĩnh cho Angular Material shadow levels (Light Mode)
-//   Thay thế Angular Material mixin `mat.elevation()` bằng CSS cứng để
-//   tránh phụ thuộc vào Material theme SCSS khi cần dùng elevation riêng lẻ.
-//
-//   Tương đương: mat-elevation-z{0..8}
-//   Nguồn shadow: Material Design spec (3 lớp: ambient + penumbra + umbra)
-// --------------------------------------------------------------------------
-
-// z0 — không có shadow (dùng để reset)
-.mat-elevation-z0 {
-  box-shadow:
-    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
-    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
-    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
-}
-
-// z1 — surface nhẹ (card, chip)
-.mat-elevation-z1 {
-  box-shadow:
-    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
-    0px 1px 1px  0px rgba(0, 0, 0, 0.14),
-    0px 1px 3px  0px rgba(0, 0, 0, 0.12);
-}
-
-// z2 — button raised
-.mat-elevation-z2 {
-  box-shadow:
-    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
-    0px 2px 2px  0px rgba(0, 0, 0, 0.14),
-    0px 1px 5px  0px rgba(0, 0, 0, 0.12);
-}
-
-// z3 — card hover
-.mat-elevation-z3 {
-  box-shadow:
-    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
-    0px 3px 4px  0px rgba(0, 0, 0, 0.14),
-    0px 1px 8px  0px rgba(0, 0, 0, 0.12);
-}
-
-// z4 — app bar
-.mat-elevation-z4 {
-  box-shadow:
-    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
-    0px 4px 5px  0px rgba(0, 0, 0, 0.14),
-    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
-}
-
-// z5
-.mat-elevation-z5 {
-  box-shadow:
-    0px 3px 5px  -1px rgba(0, 0, 0, 0.2),
-    0px 5px 8px   0px rgba(0, 0, 0, 0.14),
-    0px 1px 14px  0px rgba(0, 0, 0, 0.12);
-}
-
-// z6 — floating action button
-.mat-elevation-z6 {
-  box-shadow:
-    0px 3px 5px  -1px rgba(0, 0, 0, 0.2),
-    0px 6px 10px  0px rgba(0, 0, 0, 0.14),
-    0px 1px 18px  0px rgba(0, 0, 0, 0.12);
-}
-
-// z7
-.mat-elevation-z7 {
-  box-shadow:
-    0px 4px 5px  -2px rgba(0, 0, 0, 0.2),
-    0px 7px 10px  1px rgba(0, 0, 0, 0.14),
-    0px 2px 16px  1px rgba(0, 0, 0, 0.12);
-}
-
-// z8 — dialog, drawer
-.mat-elevation-z8 {
-  box-shadow:
-    0px 5px 5px  -3px rgba(0, 0, 0, 0.2),
-    0px 8px 10px  1px rgba(0, 0, 0, 0.14),
-    0px 3px 14px  2px rgba(0, 0, 0, 0.12);
-}
+// --------------------------------------------------------------------------
+// Elevation — CSS tĩnh cho Angular Material shadow levels (Light Mode)
+//   Thay thế Angular Material mixin `mat.elevation()` bằng CSS cứng để
+//   tránh phụ thuộc vào Material theme SCSS khi cần dùng elevation riêng lẻ.
+//
+//   Tương đương: mat-elevation-z{0..8}
+//   Nguồn shadow: Material Design spec (3 lớp: ambient + penumbra + umbra)
+// --------------------------------------------------------------------------
+
+// z0 — không có shadow (dùng để reset)
+.mat-elevation-z0 {
+  box-shadow:
+    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
+    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
+    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
+}
+
+// z1 — surface nhẹ (card, chip)
+.mat-elevation-z1 {
+  box-shadow:
+    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
+    0px 1px 1px  0px rgba(0, 0, 0, 0.14),
+    0px 1px 3px  0px rgba(0, 0, 0, 0.12);
+}
+
+// z2 — button raised
+.mat-elevation-z2 {
+  box-shadow:
+    0px 3px 1px -2px rgba(0, 0, 0, 0.2),
+    0px 2px 2px  0px rgba(0, 0, 0, 0.14),
+    0px 1px 5px  0px rgba(0, 0, 0, 0.12);
+}
+
+// z3 — card hover
+.mat-elevation-z3 {
+  box-shadow:
+    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
+    0px 3px 4px  0px rgba(0, 0, 0, 0.14),
+    0px 1px 8px  0px rgba(0, 0, 0, 0.12);
+}
+
+// z4 — app bar
+.mat-elevation-z4 {
+  box-shadow:
+    0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+    0px 4px 5px  0px rgba(0, 0, 0, 0.14),
+    0px 1px 10px 0px rgba(0, 0, 0, 0.12);
+}
+
+// z5
+.mat-elevation-z5 {
+  box-shadow:
+    0px 3px 5px  -1px rgba(0, 0, 0, 0.2),
+    0px 5px 8px   0px rgba(0, 0, 0, 0.14),
+    0px 1px 14px  0px rgba(0, 0, 0, 0.12);
+}
+
+// z6 — floating action button
+.mat-elevation-z6 {
+  box-shadow:
+    0px 3px 5px  -1px rgba(0, 0, 0, 0.2),
+    0px 6px 10px  0px rgba(0, 0, 0, 0.14),
+    0px 1px 18px  0px rgba(0, 0, 0, 0.12);
+}
+
+// z7
+.mat-elevation-z7 {
+  box-shadow:
+    0px 4px 5px  -2px rgba(0, 0, 0, 0.2),
+    0px 7px 10px  1px rgba(0, 0, 0, 0.14),
+    0px 2px 16px  1px rgba(0, 0, 0, 0.12);
+}
+
+// z8 — dialog, drawer
+.mat-elevation-z8 {
+  box-shadow:
+    0px 5px 5px  -3px rgba(0, 0, 0, 0.2),
+    0px 8px 10px  1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px  2px rgba(0, 0, 0, 0.12);
+}

package/assets/scss/core/utilities/_flexbox.scss

@@ -1,54 +1,54 @@
-// --------------------------------------------------------------------------
-// Flexbox
-// --------------------------------------------------------------------------
-
-// Flex shorthand
-.flex-1    { flex: 1 !important; }
-.flex-none { flex: none !important; }
-.flex-auto { flex: auto !important; }
-
-// Direction
-.flex-row            { flex-direction: row !important; }
-.flex-column         { flex-direction: column !important; }
-.flex-row-reverse    { flex-direction: row-reverse !important; }
-.flex-column-reverse { flex-direction: column-reverse !important; }
-
-// Wrap
-.flex-wrap   { flex-wrap: wrap !important; }
-.flex-nowrap { flex-wrap: nowrap !important; }
-
-// Grow & shrink
-.flex-grow-0   { flex-grow: 0 !important; }
-.flex-grow-1   { flex-grow: 1 !important; }
-.flex-shrink-0 { flex-shrink: 0 !important; }
-.flex-shrink-1 { flex-shrink: 1 !important; }
-
-// align-items
-.align-items-start    { align-items: flex-start !important; }
-.align-items-end      { align-items: flex-end !important; }
-.align-items-center   { align-items: center !important; }
-.align-items-baseline { align-items: baseline !important; }
-.align-items-stretch  { align-items: stretch !important; }
-
-// align-self
-.align-self-start   { align-self: flex-start !important; }
-.align-self-end     { align-self: flex-end !important; }
-.align-self-center  { align-self: center !important; }
-.align-self-stretch { align-self: stretch !important; }
-.align-self-auto    { align-self: auto !important; }
-
-// align-content
-.align-content-start   { align-content: flex-start !important; }
-.align-content-end     { align-content: flex-end !important; }
-.align-content-center  { align-content: center !important; }
-.align-content-between { align-content: space-between !important; }
-.align-content-around  { align-content: space-around !important; }
-.align-content-stretch { align-content: stretch !important; }
-
-// justify-content
-.justify-content-start   { justify-content: flex-start !important; }
-.justify-content-end     { justify-content: flex-end !important; }
-.justify-content-center  { justify-content: center !important; }
-.justify-content-between { justify-content: space-between !important; }
-.justify-content-around  { justify-content: space-around !important; }
-.justify-content-evenly  { justify-content: space-evenly !important; }
+// --------------------------------------------------------------------------
+// Flexbox
+// --------------------------------------------------------------------------
+
+// Flex shorthand
+.flex-1    { flex: 1 !important; }
+.flex-none { flex: none !important; }
+.flex-auto { flex: auto !important; }
+
+// Direction
+.flex-row            { flex-direction: row !important; }
+.flex-column         { flex-direction: column !important; }
+.flex-row-reverse    { flex-direction: row-reverse !important; }
+.flex-column-reverse { flex-direction: column-reverse !important; }
+
+// Wrap
+.flex-wrap   { flex-wrap: wrap !important; }
+.flex-nowrap { flex-wrap: nowrap !important; }
+
+// Grow & shrink
+.flex-grow-0   { flex-grow: 0 !important; }
+.flex-grow-1   { flex-grow: 1 !important; }
+.flex-shrink-0 { flex-shrink: 0 !important; }
+.flex-shrink-1 { flex-shrink: 1 !important; }
+
+// align-items
+.align-items-start    { align-items: flex-start !important; }
+.align-items-end      { align-items: flex-end !important; }
+.align-items-center   { align-items: center !important; }
+.align-items-baseline { align-items: baseline !important; }
+.align-items-stretch  { align-items: stretch !important; }
+
+// align-self
+.align-self-start   { align-self: flex-start !important; }
+.align-self-end     { align-self: flex-end !important; }
+.align-self-center  { align-self: center !important; }
+.align-self-stretch { align-self: stretch !important; }
+.align-self-auto    { align-self: auto !important; }
+
+// align-content
+.align-content-start   { align-content: flex-start !important; }
+.align-content-end     { align-content: flex-end !important; }
+.align-content-center  { align-content: center !important; }
+.align-content-between { align-content: space-between !important; }
+.align-content-around  { align-content: space-around !important; }
+.align-content-stretch { align-content: stretch !important; }
+
+// justify-content
+.justify-content-start   { justify-content: flex-start !important; }
+.justify-content-end     { justify-content: flex-end !important; }
+.justify-content-center  { justify-content: center !important; }
+.justify-content-between { justify-content: space-between !important; }
+.justify-content-around  { justify-content: space-around !important; }
+.justify-content-evenly  { justify-content: space-evenly !important; }

package/assets/scss/core/utilities/_gap.scss

@@ -1,9 +1,9 @@
-// --------------------------------------------------------------------------
-// Gap  (px-based, 0–200)
-//   gap-0 … gap-200 | gap-x-* | gap-y-*
-// --------------------------------------------------------------------------
-@for $i from 0 through 200 {
-  .gap-#{$i}   { gap: #{$i}px !important; }
-  .gap-x-#{$i} { column-gap: #{$i}px !important; }
-  .gap-y-#{$i} { row-gap: #{$i}px !important; }
-}
+// --------------------------------------------------------------------------
+// Gap  (px-based, 0–200)
+//   gap-0 … gap-200 | gap-x-* | gap-y-*
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .gap-#{$i}   { gap: #{$i}px !important; }
+  .gap-x-#{$i} { column-gap: #{$i}px !important; }
+  .gap-y-#{$i} { row-gap: #{$i}px !important; }
+}

package/assets/scss/core/utilities/_index.scss

@@ -1,17 +1,17 @@
-/* ==========================================================================
-   SD-ANGULAR UTILITY CLASSES — thuần SCSS, không phụ thuộc 3rd-party.
-   Mỗi partial độc lập, có thể import riêng lẻ nếu cần.
-   ========================================================================== */
-
-@use 'spacing';
-@use 'sizing';
-@use 'border';
-@use 'typography';
-@use 'gap';
-@use 'display';
-@use 'flexbox';
-@use 'overflow';
-@use 'position';
-@use 'misc';
-@use 'grid';
-@use 'elevation';
+/* ==========================================================================
+   SD-ANGULAR UTILITY CLASSES — thuần SCSS, không phụ thuộc 3rd-party.
+   Mỗi partial độc lập, có thể import riêng lẻ nếu cần.
+   ========================================================================== */
+
+@use 'spacing';
+@use 'sizing';
+@use 'border';
+@use 'typography';
+@use 'gap';
+@use 'display';
+@use 'flexbox';
+@use 'overflow';
+@use 'position';
+@use 'misc';
+@use 'grid';
+@use 'elevation';

package/assets/scss/core/utilities/_misc.scss

@@ -1,20 +1,20 @@
-// --------------------------------------------------------------------------
-// Vertical-align
-// --------------------------------------------------------------------------
-.align-middle   { vertical-align: middle !important; }
-.align-top      { vertical-align: top !important; }
-.align-bottom   { vertical-align: bottom !important; }
-.align-baseline { vertical-align: baseline !important; }
-
-// --------------------------------------------------------------------------
-// Cursor
-// --------------------------------------------------------------------------
-.cursor-pointer     { cursor: pointer !important; }
-.cursor-default     { cursor: default !important; }
-.cursor-not-allowed { cursor: not-allowed !important; }
-
-// --------------------------------------------------------------------------
-// Visibility
-// --------------------------------------------------------------------------
-.visible   { visibility: visible !important; }
-.invisible { visibility: hidden !important; }
+// --------------------------------------------------------------------------
+// Vertical-align
+// --------------------------------------------------------------------------
+.align-middle   { vertical-align: middle !important; }
+.align-top      { vertical-align: top !important; }
+.align-bottom   { vertical-align: bottom !important; }
+.align-baseline { vertical-align: baseline !important; }
+
+// --------------------------------------------------------------------------
+// Cursor
+// --------------------------------------------------------------------------
+.cursor-pointer     { cursor: pointer !important; }
+.cursor-default     { cursor: default !important; }
+.cursor-not-allowed { cursor: not-allowed !important; }
+
+// --------------------------------------------------------------------------
+// Visibility
+// --------------------------------------------------------------------------
+.visible   { visibility: visible !important; }
+.invisible { visibility: hidden !important; }

package/assets/scss/core/utilities/_overflow.scss

@@ -1,9 +1,9 @@
-// --------------------------------------------------------------------------
-// Overflow
-// --------------------------------------------------------------------------
-.overflow-auto    { overflow: auto !important; }
-.overflow-hidden  { overflow: hidden !important; }
-.overflow-visible { overflow: visible !important; }
-.overflow-scroll  { overflow: scroll !important; }
-.overflow-x-auto  { overflow-x: auto !important; }
-.overflow-y-auto  { overflow-y: auto !important; }
+// --------------------------------------------------------------------------
+// Overflow
+// --------------------------------------------------------------------------
+.overflow-auto    { overflow: auto !important; }
+.overflow-hidden  { overflow: hidden !important; }
+.overflow-visible { overflow: visible !important; }
+.overflow-scroll  { overflow: scroll !important; }
+.overflow-x-auto  { overflow-x: auto !important; }
+.overflow-y-auto  { overflow-y: auto !important; }

package/assets/scss/core/utilities/_position.scss

@@ -1,8 +1,8 @@
-// --------------------------------------------------------------------------
-// Position
-// --------------------------------------------------------------------------
-.position-relative { position: relative !important; }
-.position-absolute { position: absolute !important; }
-.position-fixed    { position: fixed !important; }
-.position-sticky   { position: sticky !important; }
-.position-static   { position: static !important; }
+// --------------------------------------------------------------------------
+// Position
+// --------------------------------------------------------------------------
+.position-relative { position: relative !important; }
+.position-absolute { position: absolute !important; }
+.position-fixed    { position: fixed !important; }
+.position-sticky   { position: sticky !important; }
+.position-static   { position: static !important; }

package/assets/scss/core/utilities/_sizing.scss

@@ -1,28 +1,28 @@
-// --------------------------------------------------------------------------
-// Sizing – Width & Height  (px-based, 0–200)
-//   w-0 … w-200 | h-0 … h-200
-// --------------------------------------------------------------------------
-@for $i from 0 through 200 {
-  .w-#{$i} { width: #{$i}px !important; }
-  .h-#{$i} { height: #{$i}px !important; }
-}
-
-// Percentage / keyword shorthands
-.w-full   { width: 100% !important; }
-.w-100    { width: 100% !important; } // alias of w-full
-.w-auto   { width: auto !important; }
-.w-screen { width: 100vw !important; }
-.w-fit    { width: fit-content !important; }
-
-.h-full   { height: 100% !important; }
-.h-100    { height: 100% !important; } // alias of h-full
-.h-auto   { height: auto !important; }
-.h-screen { height: 100vh !important; }
-.h-fit    { height: fit-content !important; }
-
-.min-h-full   { min-height: 100% !important; }
-.min-h-screen { min-height: 100vh !important; }
-.min-w-full   { min-width: 100% !important; }
-
-.max-h-full   { max-height: 100% !important; }
-.max-w-full   { max-width: 100% !important; }
+// --------------------------------------------------------------------------
+// Sizing – Width & Height  (px-based, 0–200)
+//   w-0 … w-200 | h-0 … h-200
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .w-#{$i} { width: #{$i}px !important; }
+  .h-#{$i} { height: #{$i}px !important; }
+}
+
+// Percentage / keyword shorthands
+.w-full   { width: 100% !important; }
+.w-100    { width: 100% !important; } // alias of w-full
+.w-auto   { width: auto !important; }
+.w-screen { width: 100vw !important; }
+.w-fit    { width: fit-content !important; }
+
+.h-full   { height: 100% !important; }
+.h-100    { height: 100% !important; } // alias of h-full
+.h-auto   { height: auto !important; }
+.h-screen { height: 100vh !important; }
+.h-fit    { height: fit-content !important; }
+
+.min-h-full   { min-height: 100% !important; }
+.min-h-screen { min-height: 100vh !important; }
+.min-w-full   { min-width: 100% !important; }
+
+.max-h-full   { max-height: 100% !important; }
+.max-w-full   { max-width: 100% !important; }

package/assets/scss/core/utilities/_spacing.scss

@@ -1,31 +1,31 @@
-// --------------------------------------------------------------------------
-// Spacing – Margin & Padding  (px-based, 0–200)
-//   m-0 … m-200 | mt-* | mr-* | mb-* | ml-* | mx-* | my-*
-//   p-0 … p-200 | pt-* | pr-* | pb-* | pl-* | px-* | py-*
-// --------------------------------------------------------------------------
-@for $i from 0 through 200 {
-  .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; }
-  .mx-#{$i} { margin-left: #{$i}px !important; margin-right: #{$i}px !important; }
-  .my-#{$i} { margin-top: #{$i}px !important; margin-bottom: #{$i}px !important; }
-
-  .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; }
-  .px-#{$i} { padding-left: #{$i}px !important; padding-right: #{$i}px !important; }
-  .py-#{$i} { padding-top: #{$i}px !important; padding-bottom: #{$i}px !important; }
-}
-
-// Auto margin helpers
-.m-auto  { margin: auto !important; }
-.mt-auto { margin-top: auto !important; }
-.mr-auto { margin-right: auto !important; }
-.mb-auto { margin-bottom: auto !important; }
-.ml-auto { margin-left: auto !important; }
-.mx-auto { margin-left: auto !important; margin-right: auto !important; }
-.my-auto { margin-top: auto !important; margin-bottom: auto !important; }
+// --------------------------------------------------------------------------
+// Spacing – Margin & Padding  (px-based, 0–200)
+//   m-0 … m-200 | mt-* | mr-* | mb-* | ml-* | mx-* | my-*
+//   p-0 … p-200 | pt-* | pr-* | pb-* | pl-* | px-* | py-*
+// --------------------------------------------------------------------------
+@for $i from 0 through 200 {
+  .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; }
+  .mx-#{$i} { margin-left: #{$i}px !important; margin-right: #{$i}px !important; }
+  .my-#{$i} { margin-top: #{$i}px !important; margin-bottom: #{$i}px !important; }
+
+  .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; }
+  .px-#{$i} { padding-left: #{$i}px !important; padding-right: #{$i}px !important; }
+  .py-#{$i} { padding-top: #{$i}px !important; padding-bottom: #{$i}px !important; }
+}
+
+// Auto margin helpers
+.m-auto  { margin: auto !important; }
+.mt-auto { margin-top: auto !important; }
+.mr-auto { margin-right: auto !important; }
+.mb-auto { margin-bottom: auto !important; }
+.ml-auto { margin-left: auto !important; }
+.mx-auto { margin-left: auto !important; margin-right: auto !important; }
+.my-auto { margin-top: auto !important; margin-bottom: auto !important; }