@rolster/styles-foundations 3.0.3 → 3.0.5

package/scss/utilities/helpers.scss

@@ -1,124 +1,124 @@
-// Rolster Technology Helpers Utilities
-// v2.0.0
-// @license MIT
-// Author: Rolster Developers
-// Created: 23/Sep/2023
-// Updated: 26/May/2024
-
-@mixin padding($size) {
-  .rls-pdg-top-#{$size} {
-    padding-top: var(--rls-sizing-#{$size});
-  }
-
-  .rls-pdg-rgt-#{$size} {
-    padding-right: var(--rls-sizing-#{$size});
-  }
-
-  .rls-pdg-bot-#{$size} {
-    padding-bottom: var(--rls-sizing-#{$size});
-  }
-
-  .rls-pdg-lft-#{$size} {
-    padding-left: var(--rls-sizing-#{$size});
-  }
-
-  .rls-pdg-hrz-#{$size} {
-    padding: 0rem var(--rls-sizing-#{$size});
-  }
-
-  .rls-pdg-vrt-#{$size} {
-    padding: var(--rls-sizing-#{$size}) 0rem;
-  }
-
-  .rls-pdg-#{$size} {
-    padding: var(--rls-sizing-#{$size});
-  }
-}
-
-@mixin padding-box-sizing($size) {
-  .rls-pdx-top-#{$size} {
-    padding-top: var(--rls-sizing-#{$size});
-    box-sizing: border-box;
-  }
-
-  .rls-pdx-rgt-#{$size} {
-    padding-right: var(--rls-sizing-#{$size});
-    box-sizing: border-box;
-  }
-
-  .rls-pdx-bot-#{$size} {
-    padding-bottom: var(--rls-sizing-#{$size});
-    box-sizing: border-box;
-  }
-
-  .rls-pdx-lft-#{$size} {
-    padding-left: var(--rls-sizing-#{$size});
-    box-sizing: border-box;
-  }
-
-  .rls-pdx-hrz-#{$size} {
-    padding: 0rem var(--rls-sizing-#{$size});
-    box-sizing: border-box;
-  }
-
-  .rls-pdx-vrt-#{$size} {
-    padding: var(--rls-sizing-#{$size}) 0rem;
-    box-sizing: border-box;
-  }
-
-  .rls-pdx-#{$size} {
-    padding: var(--rls-sizing-#{$size});
-    box-sizing: border-box;
-  }
-}
-
-@mixin margin($size) {
-  .rls-mrg-top-#{$size} {
-    margin-top: var(--rls-sizing-#{$size});
-  }
-
-  .rls-mrg-rgt-#{$size} {
-    margin-right: var(--rls-sizing-#{$size});
-  }
-
-  .rls-mrg-bot-#{$size} {
-    margin-bottom: var(--rls-sizing-#{$size});
-  }
-
-  .rls-mrg-lft-#{$size} {
-    margin-left: var(--rls-sizing-#{$size});
-  }
-
-  .rls-mrg-hrz-#{$size} {
-    margin: 0rem var(--rls-sizing-#{$size});
-  }
-
-  .rls-mrg-vrt-#{$size} {
-    margin: var(--rls-sizing-#{$size}) 0rem;
-  }
-
-  .rls-mrg-#{$size} {
-    margin: var(--rls-sizing-#{$size});
-  }
-}
-
-@include padding('x4');
-@include padding('x8');
-@include padding('x12');
-@include padding('x16');
-@include padding('x24');
-@include padding('x36');
-
-@include padding-box-sizing('x4');
-@include padding-box-sizing('x8');
-@include padding-box-sizing('x12');
-@include padding-box-sizing('x16');
-@include padding-box-sizing('x24');
-@include padding-box-sizing('x36');
-
-@include margin('x4');
-@include margin('x8');
-@include margin('x12');
-@include margin('x16');
-@include margin('x24');
-@include margin('x36');
+// Rolster Technology Helpers Utilities
+// v2.0.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 23/Sep/2023
+// Updated: 26/May/2024
+
+@mixin padding($size) {
+  .rls-pdg-top-#{$size} {
+    padding-top: var(--rls-sizing-#{$size});
+  }
+
+  .rls-pdg-rgt-#{$size} {
+    padding-right: var(--rls-sizing-#{$size});
+  }
+
+  .rls-pdg-bot-#{$size} {
+    padding-bottom: var(--rls-sizing-#{$size});
+  }
+
+  .rls-pdg-lft-#{$size} {
+    padding-left: var(--rls-sizing-#{$size});
+  }
+
+  .rls-pdg-hrz-#{$size} {
+    padding: 0rem var(--rls-sizing-#{$size});
+  }
+
+  .rls-pdg-vrt-#{$size} {
+    padding: var(--rls-sizing-#{$size}) 0rem;
+  }
+
+  .rls-pdg-#{$size} {
+    padding: var(--rls-sizing-#{$size});
+  }
+}
+
+@mixin padding-box-sizing($size) {
+  .rls-pdx-top-#{$size} {
+    padding-top: var(--rls-sizing-#{$size});
+    box-sizing: border-box;
+  }
+
+  .rls-pdx-rgt-#{$size} {
+    padding-right: var(--rls-sizing-#{$size});
+    box-sizing: border-box;
+  }
+
+  .rls-pdx-bot-#{$size} {
+    padding-bottom: var(--rls-sizing-#{$size});
+    box-sizing: border-box;
+  }
+
+  .rls-pdx-lft-#{$size} {
+    padding-left: var(--rls-sizing-#{$size});
+    box-sizing: border-box;
+  }
+
+  .rls-pdx-hrz-#{$size} {
+    padding: 0rem var(--rls-sizing-#{$size});
+    box-sizing: border-box;
+  }
+
+  .rls-pdx-vrt-#{$size} {
+    padding: var(--rls-sizing-#{$size}) 0rem;
+    box-sizing: border-box;
+  }
+
+  .rls-pdx-#{$size} {
+    padding: var(--rls-sizing-#{$size});
+    box-sizing: border-box;
+  }
+}
+
+@mixin margin($size) {
+  .rls-mrg-top-#{$size} {
+    margin-top: var(--rls-sizing-#{$size});
+  }
+
+  .rls-mrg-rgt-#{$size} {
+    margin-right: var(--rls-sizing-#{$size});
+  }
+
+  .rls-mrg-bot-#{$size} {
+    margin-bottom: var(--rls-sizing-#{$size});
+  }
+
+  .rls-mrg-lft-#{$size} {
+    margin-left: var(--rls-sizing-#{$size});
+  }
+
+  .rls-mrg-hrz-#{$size} {
+    margin: 0rem var(--rls-sizing-#{$size});
+  }
+
+  .rls-mrg-vrt-#{$size} {
+    margin: var(--rls-sizing-#{$size}) 0rem;
+  }
+
+  .rls-mrg-#{$size} {
+    margin: var(--rls-sizing-#{$size});
+  }
+}
+
+@include padding('x4');
+@include padding('x8');
+@include padding('x12');
+@include padding('x16');
+@include padding('x24');
+@include padding('x36');
+
+@include padding-box-sizing('x4');
+@include padding-box-sizing('x8');
+@include padding-box-sizing('x12');
+@include padding-box-sizing('x16');
+@include padding-box-sizing('x24');
+@include padding-box-sizing('x36');
+
+@include margin('x4');
+@include margin('x8');
+@include margin('x12');
+@include margin('x16');
+@include margin('x24');
+@include margin('x36');

package/scss/utilities/layout.scss

@@ -1,83 +1,83 @@
-// Rolster Technology Layout Utilities
-// v3.1.0
-// @license MIT
-// Author: Rolster Developers
-// Created: 11/Abr/2023
-// Updated: 06/Abr/2026
-
-$rls-grid-col-sizes: 12, 8, 6, 4, 2, 1;
-
-@mixin grid-base() {
-  display: grid;
-  grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
-  width: 100%;
-  box-sizing: border-box;
-
-  & > * {
-    min-width: 0;
-    max-width: 100%;
-    box-sizing: border-box;
-  }
-}
-
-@mixin grid-responsive($size) {
-  @each $cols in $rls-grid-col-sizes {
-    .rls-flex-#{$size}-grid-col-#{$cols} {
-      --rls-grid-columns: #{$cols};
-    }
-  }
-
-  .rls-flex-#{$size}-grid-8,
-  .rls-flex-#{$size}-grid-12,
-  .rls-flex-#{$size}-grid-16 {
-    @include grid-base();
-  }
-
-  .rls-flex-#{$size}-grid-8 {
-    gap: var(--rls-sizing-x4);
-  }
-
-  .rls-flex-#{$size}-grid-12 {
-    gap: var(--rls-sizing-x6);
-  }
-
-  .rls-flex-#{$size}-grid-16 {
-    gap: var(--rls-sizing-x8);
-  }
-
-  // Flex Grid — span classes
-  @for $i from 1 through 12 {
-    .rls-flex-#{$size}-col-#{$i} {
-      grid-column: span #{$i} / span #{$i};
-    }
-  }
-
-  // Flex Grid — clamp spans exceeding column count
-  @each $max in $rls-grid-col-sizes {
-    @if $max < 12 {
-      @for $col from ($max + 1) through 12 {
-        .rls-flex-#{$size}-grid-col-#{$max} > .rls-flex-#{$size}-col-#{$col} {
-          grid-column: span #{$max} / span #{$max};
-        }
-      }
-    }
-  }
-}
-
-@include grid-responsive('xs');
-
-@media screen and (min-width: 420px) {
-  @include grid-responsive('sm');
-}
-
-@media screen and (min-width: 720px) {
-  @include grid-responsive('md');
-}
-
-@media screen and (min-width: 1024px) {
-  @include grid-responsive('lg');
-}
-
-@media screen and (min-width: 1440px) {
-  @include grid-responsive('xl');
-}
+// Rolster Technology Layout Utilities
+// v3.1.0
+// @license MIT
+// Author: Rolster Developers
+// Created: 11/Abr/2023
+// Updated: 06/Abr/2026
+
+$rls-grid-col-sizes: 12, 8, 6, 4, 2, 1;
+
+@mixin grid-base() {
+  display: grid;
+  grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
+  width: 100%;
+  box-sizing: border-box;
+
+  & > * {
+    min-width: 0;
+    max-width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+@mixin grid-responsive($size) {
+  @each $cols in $rls-grid-col-sizes {
+    .rls-flex-#{$size}-grid-col-#{$cols} {
+      --rls-grid-columns: #{$cols};
+    }
+  }
+
+  .rls-flex-#{$size}-grid-8,
+  .rls-flex-#{$size}-grid-12,
+  .rls-flex-#{$size}-grid-16 {
+    @include grid-base();
+  }
+
+  .rls-flex-#{$size}-grid-8 {
+    gap: var(--rls-sizing-x4);
+  }
+
+  .rls-flex-#{$size}-grid-12 {
+    gap: var(--rls-sizing-x6);
+  }
+
+  .rls-flex-#{$size}-grid-16 {
+    gap: var(--rls-sizing-x8);
+  }
+
+  // Flex Grid — span classes
+  @for $i from 1 through 12 {
+    .rls-flex-#{$size}-col-#{$i} {
+      grid-column: span #{$i} / span #{$i};
+    }
+  }
+
+  // Flex Grid — clamp spans exceeding column count
+  @each $max in $rls-grid-col-sizes {
+    @if $max < 12 {
+      @for $col from ($max + 1) through 12 {
+        .rls-flex-#{$size}-grid-col-#{$max} > .rls-flex-#{$size}-col-#{$col} {
+          grid-column: span #{$max} / span #{$max};
+        }
+      }
+    }
+  }
+}
+
+@include grid-responsive('xs');
+
+@media screen and (min-width: 420px) {
+  @include grid-responsive('sm');
+}
+
+@media screen and (min-width: 720px) {
+  @include grid-responsive('md');
+}
+
+@media screen and (min-width: 1024px) {
+  @include grid-responsive('lg');
+}
+
+@media screen and (min-width: 1440px) {
+  @include grid-responsive('xl');
+}