@rolster/styles-foundations 2.7.3 → 3.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (192) hide show
  1. package/LICENSE +21 -21
  2. package/dist/design-system-bordered.css +4868 -0
  3. package/dist/design-system-bordered.css.map +1 -0
  4. package/dist/design-system-bordered.min.css +143 -0
  5. package/dist/design-system-filled.css +4783 -0
  6. package/dist/design-system-filled.css.map +1 -0
  7. package/dist/design-system-filled.min.css +141 -0
  8. package/dist/styles.css +363 -1242
  9. package/dist/styles.css.map +1 -1
  10. package/dist/styles.min.css +1 -53
  11. package/dist/styles.rtl.css +363 -1242
  12. package/dist/styles.rtl.min.css +1 -53
  13. package/package.json +41 -39
  14. package/scss/design-system-bordered/_index.scss +96 -0
  15. package/scss/{components → design-system-bordered}/app.scss +228 -145
  16. package/scss/design-system-bordered/atoms/amount.scss +58 -0
  17. package/scss/design-system-bordered/atoms/area-text.scss +100 -0
  18. package/scss/design-system-bordered/atoms/avatar.scss +50 -0
  19. package/scss/design-system-bordered/atoms/badge.scss +51 -0
  20. package/scss/design-system-bordered/atoms/breadcrumb.scss +87 -0
  21. package/scss/design-system-bordered/atoms/button-action.scss +124 -0
  22. package/scss/design-system-bordered/atoms/button-option.scss +49 -0
  23. package/scss/design-system-bordered/atoms/button.scss +249 -0
  24. package/scss/design-system-bordered/atoms/check-box.scss +49 -0
  25. package/scss/design-system-bordered/atoms/icon.scss +39 -0
  26. package/scss/design-system-bordered/atoms/image.scss +37 -0
  27. package/scss/design-system-bordered/atoms/input-decimal.scss +15 -0
  28. package/scss/design-system-bordered/atoms/input-money.scss +15 -0
  29. package/scss/design-system-bordered/atoms/input-number.scss +12 -0
  30. package/scss/design-system-bordered/atoms/input-password.scss +48 -0
  31. package/scss/design-system-bordered/atoms/input-percentage.scss +12 -0
  32. package/scss/design-system-bordered/atoms/input-search.scss +28 -0
  33. package/scss/design-system-bordered/atoms/input-text.scss +12 -0
  34. package/scss/design-system-bordered/atoms/input.scss +97 -0
  35. package/scss/design-system-bordered/atoms/label.scss +20 -0
  36. package/scss/design-system-bordered/atoms/message-icon.scss +21 -0
  37. package/scss/design-system-bordered/atoms/poster.scss +42 -0
  38. package/scss/design-system-bordered/atoms/progress-bar.scss +83 -0
  39. package/scss/design-system-bordered/atoms/progress-circular.scss +59 -0
  40. package/scss/design-system-bordered/atoms/radio-button.scss +55 -0
  41. package/scss/design-system-bordered/atoms/skeleton-text.scss +39 -0
  42. package/scss/design-system-bordered/atoms/skeleton.scss +46 -0
  43. package/scss/design-system-bordered/atoms/spinner.scss +102 -0
  44. package/scss/design-system-bordered/atoms/switch.scss +71 -0
  45. package/scss/design-system-bordered/atoms/tabular-text.scss +38 -0
  46. package/scss/design-system-bordered/molecules/accordion.scss +146 -0
  47. package/scss/design-system-bordered/molecules/alert.scss +52 -0
  48. package/scss/design-system-bordered/molecules/ballot.scss +110 -0
  49. package/scss/design-system-bordered/molecules/button-progress.scss +15 -0
  50. package/scss/design-system-bordered/molecules/button-toggle.scss +100 -0
  51. package/scss/design-system-bordered/molecules/field-area.scss +14 -0
  52. package/scss/{components → design-system-bordered/molecules}/field-box.scss +33 -2
  53. package/scss/design-system-bordered/molecules/field-decimal.scss +14 -0
  54. package/scss/design-system-bordered/molecules/field-file.scss +41 -0
  55. package/scss/design-system-bordered/molecules/field-list-suggestions.scss +65 -0
  56. package/scss/{components → design-system-bordered/molecules}/field-list.scss +52 -36
  57. package/scss/design-system-bordered/molecules/field-money.scss +14 -0
  58. package/scss/design-system-bordered/molecules/field-number.scss +14 -0
  59. package/scss/design-system-bordered/molecules/field-password.scss +23 -0
  60. package/scss/design-system-bordered/molecules/field-percentage.scss +14 -0
  61. package/scss/design-system-bordered/molecules/field-readonly.scss +24 -0
  62. package/scss/design-system-bordered/molecules/field-text.scss +14 -0
  63. package/scss/design-system-bordered/molecules/label-check-box.scss +72 -0
  64. package/scss/design-system-bordered/molecules/label-radio-button.scss +79 -0
  65. package/scss/design-system-bordered/molecules/label-switch.scss +71 -0
  66. package/scss/design-system-bordered/molecules/message-empty.scss +80 -0
  67. package/scss/design-system-bordered/molecules/pagination.scss +114 -0
  68. package/scss/design-system-bordered/molecules/picker-day-range.scss +109 -0
  69. package/scss/design-system-bordered/molecules/picker-day.scss +117 -0
  70. package/scss/design-system-bordered/molecules/picker-month.scss +67 -0
  71. package/scss/design-system-bordered/molecules/picker-selector-title.scss +54 -0
  72. package/scss/design-system-bordered/molecules/picker-year.scss +113 -0
  73. package/scss/design-system-bordered/molecules/slider.scss +74 -0
  74. package/scss/design-system-bordered/molecules/tabs.scss +51 -0
  75. package/scss/design-system-bordered/molecules/toolbar.scss +53 -0
  76. package/scss/design-system-bordered/organisms/bottom-sheet.scss +108 -0
  77. package/scss/design-system-bordered/organisms/card.scss +36 -0
  78. package/scss/design-system-bordered/organisms/confirmation.scss +186 -0
  79. package/scss/{components → design-system-bordered/organisms}/data-table.scss +8 -14
  80. package/scss/design-system-bordered/organisms/dropdown.scss +45 -0
  81. package/scss/design-system-bordered/organisms/field-autocomplete.scss +79 -0
  82. package/scss/design-system-bordered/organisms/field-clock.scss +62 -0
  83. package/scss/design-system-bordered/organisms/field-date-range.scss +60 -0
  84. package/scss/design-system-bordered/organisms/field-date.scss +61 -0
  85. package/scss/design-system-bordered/organisms/field-select.scss +18 -0
  86. package/scss/design-system-bordered/organisms/form-navigation.scss +46 -0
  87. package/scss/design-system-bordered/organisms/image-chooser.scss +50 -0
  88. package/scss/design-system-bordered/organisms/image-editor-modal.scss +23 -0
  89. package/scss/design-system-bordered/organisms/image-editor.scss +118 -0
  90. package/scss/design-system-bordered/organisms/modal-sheet.scss +138 -0
  91. package/scss/design-system-bordered/organisms/modal.scss +75 -0
  92. package/scss/design-system-bordered/organisms/picker-clock.scss +144 -0
  93. package/scss/design-system-bordered/organisms/picker-date-range.scss +84 -0
  94. package/scss/design-system-bordered/organisms/picker-date.scss +86 -0
  95. package/scss/design-system-bordered/organisms/snackbar.scss +93 -0
  96. package/scss/design-system-filled/_index.scss +96 -0
  97. package/scss/design-system-filled/app.scss +233 -0
  98. package/scss/design-system-filled/atoms/amount.scss +58 -0
  99. package/scss/design-system-filled/atoms/area-text.scss +100 -0
  100. package/scss/design-system-filled/atoms/avatar.scss +45 -0
  101. package/scss/design-system-filled/atoms/badge.scss +51 -0
  102. package/scss/design-system-filled/atoms/breadcrumb.scss +87 -0
  103. package/scss/design-system-filled/atoms/button-action.scss +124 -0
  104. package/scss/design-system-filled/atoms/button-option.scss +49 -0
  105. package/scss/design-system-filled/atoms/button.scss +222 -0
  106. package/scss/design-system-filled/atoms/check-box.scss +46 -0
  107. package/scss/design-system-filled/atoms/icon.scss +39 -0
  108. package/scss/design-system-filled/atoms/image.scss +37 -0
  109. package/scss/design-system-filled/atoms/input-decimal.scss +15 -0
  110. package/scss/design-system-filled/atoms/input-money.scss +15 -0
  111. package/scss/design-system-filled/atoms/input-number.scss +12 -0
  112. package/scss/design-system-filled/atoms/input-password.scss +48 -0
  113. package/scss/design-system-filled/atoms/input-percentage.scss +12 -0
  114. package/scss/design-system-filled/atoms/input-search.scss +26 -0
  115. package/scss/design-system-filled/atoms/input-text.scss +12 -0
  116. package/scss/design-system-filled/atoms/input.scss +97 -0
  117. package/scss/design-system-filled/atoms/label.scss +20 -0
  118. package/scss/design-system-filled/atoms/message-icon.scss +21 -0
  119. package/scss/design-system-filled/atoms/poster.scss +32 -0
  120. package/scss/design-system-filled/atoms/progress-bar.scss +83 -0
  121. package/scss/design-system-filled/atoms/progress-circular.scss +59 -0
  122. package/scss/design-system-filled/atoms/radio-button.scss +53 -0
  123. package/scss/design-system-filled/atoms/skeleton-text.scss +39 -0
  124. package/scss/design-system-filled/atoms/skeleton.scss +46 -0
  125. package/scss/design-system-filled/atoms/spinner.scss +102 -0
  126. package/scss/design-system-filled/atoms/switch.scss +71 -0
  127. package/scss/design-system-filled/atoms/tabular-text.scss +38 -0
  128. package/scss/design-system-filled/molecules/accordion.scss +138 -0
  129. package/scss/design-system-filled/molecules/alert.scss +52 -0
  130. package/scss/design-system-filled/molecules/ballot.scss +110 -0
  131. package/scss/design-system-filled/molecules/button-progress.scss +15 -0
  132. package/scss/design-system-filled/molecules/button-toggle.scss +100 -0
  133. package/scss/design-system-filled/molecules/field-area.scss +14 -0
  134. package/scss/design-system-filled/molecules/field-box.scss +170 -0
  135. package/scss/design-system-filled/molecules/field-decimal.scss +14 -0
  136. package/scss/design-system-filled/molecules/field-file.scss +41 -0
  137. package/scss/design-system-filled/molecules/field-list-suggestions.scss +65 -0
  138. package/scss/design-system-filled/molecules/field-list.scss +341 -0
  139. package/scss/design-system-filled/molecules/field-money.scss +14 -0
  140. package/scss/design-system-filled/molecules/field-number.scss +14 -0
  141. package/scss/design-system-filled/molecules/field-password.scss +23 -0
  142. package/scss/design-system-filled/molecules/field-percentage.scss +14 -0
  143. package/scss/design-system-filled/molecules/field-readonly.scss +24 -0
  144. package/scss/design-system-filled/molecules/field-text.scss +14 -0
  145. package/scss/design-system-filled/molecules/label-check-box.scss +72 -0
  146. package/scss/design-system-filled/molecules/label-radio-button.scss +79 -0
  147. package/scss/design-system-filled/molecules/label-switch.scss +71 -0
  148. package/scss/design-system-filled/molecules/message-empty.scss +80 -0
  149. package/scss/design-system-filled/molecules/pagination.scss +114 -0
  150. package/scss/design-system-filled/molecules/picker-day-range.scss +109 -0
  151. package/scss/design-system-filled/molecules/picker-day.scss +110 -0
  152. package/scss/design-system-filled/molecules/picker-month.scss +67 -0
  153. package/scss/design-system-filled/molecules/picker-selector-title.scss +55 -0
  154. package/scss/design-system-filled/molecules/picker-year.scss +113 -0
  155. package/scss/design-system-filled/molecules/slider.scss +74 -0
  156. package/scss/design-system-filled/molecules/tabs.scss +48 -0
  157. package/scss/design-system-filled/molecules/toolbar.scss +53 -0
  158. package/scss/design-system-filled/organisms/bottom-sheet.scss +108 -0
  159. package/scss/design-system-filled/organisms/card.scss +27 -0
  160. package/scss/design-system-filled/organisms/confirmation.scss +186 -0
  161. package/scss/design-system-filled/organisms/data-table.scss +427 -0
  162. package/scss/design-system-filled/organisms/dropdown.scss +44 -0
  163. package/scss/design-system-filled/organisms/field-autocomplete.scss +79 -0
  164. package/scss/design-system-filled/organisms/field-clock.scss +62 -0
  165. package/scss/design-system-filled/organisms/field-date-range.scss +60 -0
  166. package/scss/design-system-filled/organisms/field-date.scss +61 -0
  167. package/scss/design-system-filled/organisms/field-select.scss +18 -0
  168. package/scss/design-system-filled/organisms/form-navigation.scss +46 -0
  169. package/scss/design-system-filled/organisms/form.scss +27 -0
  170. package/scss/design-system-filled/organisms/image-chooser.scss +50 -0
  171. package/scss/design-system-filled/organisms/image-editor-modal.scss +23 -0
  172. package/scss/design-system-filled/organisms/image-editor.scss +118 -0
  173. package/scss/design-system-filled/organisms/modal-sheet.scss +138 -0
  174. package/scss/design-system-filled/organisms/modal.scss +75 -0
  175. package/scss/design-system-filled/organisms/picker-clock.scss +144 -0
  176. package/scss/design-system-filled/organisms/picker-date-range.scss +88 -0
  177. package/scss/design-system-filled/organisms/picker-date.scss +90 -0
  178. package/scss/design-system-filled/organisms/snackbar.scss +93 -0
  179. package/scss/foundations/borders.scss +14 -14
  180. package/scss/foundations/colors.scss +30 -30
  181. package/scss/foundations/elevations.scss +130 -128
  182. package/scss/foundations/flex-boxs.scss +96 -96
  183. package/scss/foundations/helpers.scss +123 -123
  184. package/scss/foundations/sizings.scss +6 -0
  185. package/scss/foundations/themes.scss +230 -230
  186. package/scss/styles.scss +0 -1
  187. package/scss/utilities/helpers.scss +124 -124
  188. package/scss/utilities/layout.scss +83 -83
  189. package/scss/utilities/texts.scss +5 -2
  190. package/scss/utilities/typographics.scss +208 -186
  191. package/scss/components.scss +0 -31
  192. /package/scss/{components → design-system-bordered/organisms}/form.scss +0 -0
@@ -1,124 +1,124 @@
1
- // Rolster Technology Helpers Utilities
2
- // v2.0.0
3
- // @license MIT
4
- // Author: Rolster Developers
5
- // Created: 23/Sep/2023
6
- // Updated: 26/May/2024
7
-
8
- @mixin padding($size) {
9
- .rls-pdg-top-#{$size} {
10
- padding-top: var(--rls-sizing-#{$size});
11
- }
12
-
13
- .rls-pdg-rgt-#{$size} {
14
- padding-right: var(--rls-sizing-#{$size});
15
- }
16
-
17
- .rls-pdg-bot-#{$size} {
18
- padding-bottom: var(--rls-sizing-#{$size});
19
- }
20
-
21
- .rls-pdg-lft-#{$size} {
22
- padding-left: var(--rls-sizing-#{$size});
23
- }
24
-
25
- .rls-pdg-hrz-#{$size} {
26
- padding: 0rem var(--rls-sizing-#{$size});
27
- }
28
-
29
- .rls-pdg-vrt-#{$size} {
30
- padding: var(--rls-sizing-#{$size}) 0rem;
31
- }
32
-
33
- .rls-pdg-#{$size} {
34
- padding: var(--rls-sizing-#{$size});
35
- }
36
- }
37
-
38
- @mixin padding-box-sizing($size) {
39
- .rls-pdx-top-#{$size} {
40
- padding-top: var(--rls-sizing-#{$size});
41
- box-sizing: border-box;
42
- }
43
-
44
- .rls-pdx-rgt-#{$size} {
45
- padding-right: var(--rls-sizing-#{$size});
46
- box-sizing: border-box;
47
- }
48
-
49
- .rls-pdx-bot-#{$size} {
50
- padding-bottom: var(--rls-sizing-#{$size});
51
- box-sizing: border-box;
52
- }
53
-
54
- .rls-pdx-lft-#{$size} {
55
- padding-left: var(--rls-sizing-#{$size});
56
- box-sizing: border-box;
57
- }
58
-
59
- .rls-pdx-hrz-#{$size} {
60
- padding: 0rem var(--rls-sizing-#{$size});
61
- box-sizing: border-box;
62
- }
63
-
64
- .rls-pdx-vrt-#{$size} {
65
- padding: var(--rls-sizing-#{$size}) 0rem;
66
- box-sizing: border-box;
67
- }
68
-
69
- .rls-pdx-#{$size} {
70
- padding: var(--rls-sizing-#{$size});
71
- box-sizing: border-box;
72
- }
73
- }
74
-
75
- @mixin margin($size) {
76
- .rls-mrg-top-#{$size} {
77
- margin-top: var(--rls-sizing-#{$size});
78
- }
79
-
80
- .rls-mrg-rgt-#{$size} {
81
- margin-right: var(--rls-sizing-#{$size});
82
- }
83
-
84
- .rls-mrg-bot-#{$size} {
85
- margin-bottom: var(--rls-sizing-#{$size});
86
- }
87
-
88
- .rls-mrg-lft-#{$size} {
89
- margin-left: var(--rls-sizing-#{$size});
90
- }
91
-
92
- .rls-mrg-hrz-#{$size} {
93
- margin: 0rem var(--rls-sizing-#{$size});
94
- }
95
-
96
- .rls-mrg-vrt-#{$size} {
97
- margin: var(--rls-sizing-#{$size}) 0rem;
98
- }
99
-
100
- .rls-mrg-#{$size} {
101
- margin: var(--rls-sizing-#{$size});
102
- }
103
- }
104
-
105
- @include padding('x4');
106
- @include padding('x8');
107
- @include padding('x12');
108
- @include padding('x16');
109
- @include padding('x24');
110
- @include padding('x36');
111
-
112
- @include padding-box-sizing('x4');
113
- @include padding-box-sizing('x8');
114
- @include padding-box-sizing('x12');
115
- @include padding-box-sizing('x16');
116
- @include padding-box-sizing('x24');
117
- @include padding-box-sizing('x36');
118
-
119
- @include margin('x4');
120
- @include margin('x8');
121
- @include margin('x12');
122
- @include margin('x16');
123
- @include margin('x24');
124
- @include margin('x36');
1
+ // Rolster Technology Helpers Utilities
2
+ // v2.0.0
3
+ // @license MIT
4
+ // Author: Rolster Developers
5
+ // Created: 23/Sep/2023
6
+ // Updated: 26/May/2024
7
+
8
+ @mixin padding($size) {
9
+ .rls-pdg-top-#{$size} {
10
+ padding-top: var(--rls-sizing-#{$size});
11
+ }
12
+
13
+ .rls-pdg-rgt-#{$size} {
14
+ padding-right: var(--rls-sizing-#{$size});
15
+ }
16
+
17
+ .rls-pdg-bot-#{$size} {
18
+ padding-bottom: var(--rls-sizing-#{$size});
19
+ }
20
+
21
+ .rls-pdg-lft-#{$size} {
22
+ padding-left: var(--rls-sizing-#{$size});
23
+ }
24
+
25
+ .rls-pdg-hrz-#{$size} {
26
+ padding: 0rem var(--rls-sizing-#{$size});
27
+ }
28
+
29
+ .rls-pdg-vrt-#{$size} {
30
+ padding: var(--rls-sizing-#{$size}) 0rem;
31
+ }
32
+
33
+ .rls-pdg-#{$size} {
34
+ padding: var(--rls-sizing-#{$size});
35
+ }
36
+ }
37
+
38
+ @mixin padding-box-sizing($size) {
39
+ .rls-pdx-top-#{$size} {
40
+ padding-top: var(--rls-sizing-#{$size});
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ .rls-pdx-rgt-#{$size} {
45
+ padding-right: var(--rls-sizing-#{$size});
46
+ box-sizing: border-box;
47
+ }
48
+
49
+ .rls-pdx-bot-#{$size} {
50
+ padding-bottom: var(--rls-sizing-#{$size});
51
+ box-sizing: border-box;
52
+ }
53
+
54
+ .rls-pdx-lft-#{$size} {
55
+ padding-left: var(--rls-sizing-#{$size});
56
+ box-sizing: border-box;
57
+ }
58
+
59
+ .rls-pdx-hrz-#{$size} {
60
+ padding: 0rem var(--rls-sizing-#{$size});
61
+ box-sizing: border-box;
62
+ }
63
+
64
+ .rls-pdx-vrt-#{$size} {
65
+ padding: var(--rls-sizing-#{$size}) 0rem;
66
+ box-sizing: border-box;
67
+ }
68
+
69
+ .rls-pdx-#{$size} {
70
+ padding: var(--rls-sizing-#{$size});
71
+ box-sizing: border-box;
72
+ }
73
+ }
74
+
75
+ @mixin margin($size) {
76
+ .rls-mrg-top-#{$size} {
77
+ margin-top: var(--rls-sizing-#{$size});
78
+ }
79
+
80
+ .rls-mrg-rgt-#{$size} {
81
+ margin-right: var(--rls-sizing-#{$size});
82
+ }
83
+
84
+ .rls-mrg-bot-#{$size} {
85
+ margin-bottom: var(--rls-sizing-#{$size});
86
+ }
87
+
88
+ .rls-mrg-lft-#{$size} {
89
+ margin-left: var(--rls-sizing-#{$size});
90
+ }
91
+
92
+ .rls-mrg-hrz-#{$size} {
93
+ margin: 0rem var(--rls-sizing-#{$size});
94
+ }
95
+
96
+ .rls-mrg-vrt-#{$size} {
97
+ margin: var(--rls-sizing-#{$size}) 0rem;
98
+ }
99
+
100
+ .rls-mrg-#{$size} {
101
+ margin: var(--rls-sizing-#{$size});
102
+ }
103
+ }
104
+
105
+ @include padding('x4');
106
+ @include padding('x8');
107
+ @include padding('x12');
108
+ @include padding('x16');
109
+ @include padding('x24');
110
+ @include padding('x36');
111
+
112
+ @include padding-box-sizing('x4');
113
+ @include padding-box-sizing('x8');
114
+ @include padding-box-sizing('x12');
115
+ @include padding-box-sizing('x16');
116
+ @include padding-box-sizing('x24');
117
+ @include padding-box-sizing('x36');
118
+
119
+ @include margin('x4');
120
+ @include margin('x8');
121
+ @include margin('x12');
122
+ @include margin('x16');
123
+ @include margin('x24');
124
+ @include margin('x36');
@@ -1,83 +1,83 @@
1
- // Rolster Technology Layout Utilities
2
- // v3.1.0
3
- // @license MIT
4
- // Author: Rolster Developers
5
- // Created: 11/Abr/2023
6
- // Updated: 06/Abr/2026
7
-
8
- $rls-grid-col-sizes: 12, 8, 6, 4, 2, 1;
9
-
10
- @mixin grid-base() {
11
- display: grid;
12
- grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
13
- width: 100%;
14
- box-sizing: border-box;
15
-
16
- & > * {
17
- min-width: 0;
18
- max-width: 100%;
19
- box-sizing: border-box;
20
- }
21
- }
22
-
23
- @mixin grid-responsive($size) {
24
- @each $cols in $rls-grid-col-sizes {
25
- .rls-flex-#{$size}-grid-col-#{$cols} {
26
- --rls-grid-columns: #{$cols};
27
- }
28
- }
29
-
30
- .rls-flex-#{$size}-grid-8,
31
- .rls-flex-#{$size}-grid-12,
32
- .rls-flex-#{$size}-grid-16 {
33
- @include grid-base();
34
- }
35
-
36
- .rls-flex-#{$size}-grid-8 {
37
- gap: var(--rls-sizing-x4);
38
- }
39
-
40
- .rls-flex-#{$size}-grid-12 {
41
- gap: var(--rls-sizing-x6);
42
- }
43
-
44
- .rls-flex-#{$size}-grid-16 {
45
- gap: var(--rls-sizing-x8);
46
- }
47
-
48
- // Flex Grid — span classes
49
- @for $i from 1 through 12 {
50
- .rls-flex-#{$size}-col-#{$i} {
51
- grid-column: span #{$i} / span #{$i};
52
- }
53
- }
54
-
55
- // Flex Grid — clamp spans exceeding column count
56
- @each $max in $rls-grid-col-sizes {
57
- @if $max < 12 {
58
- @for $col from ($max + 1) through 12 {
59
- .rls-flex-#{$size}-grid-col-#{$max} > .rls-flex-#{$size}-col-#{$col} {
60
- grid-column: span #{$max} / span #{$max};
61
- }
62
- }
63
- }
64
- }
65
- }
66
-
67
- @include grid-responsive('xs');
68
-
69
- @media screen and (min-width: 420px) {
70
- @include grid-responsive('sm');
71
- }
72
-
73
- @media screen and (min-width: 720px) {
74
- @include grid-responsive('md');
75
- }
76
-
77
- @media screen and (min-width: 1024px) {
78
- @include grid-responsive('lg');
79
- }
80
-
81
- @media screen and (min-width: 1440px) {
82
- @include grid-responsive('xl');
83
- }
1
+ // Rolster Technology Layout Utilities
2
+ // v3.1.0
3
+ // @license MIT
4
+ // Author: Rolster Developers
5
+ // Created: 11/Abr/2023
6
+ // Updated: 06/Abr/2026
7
+
8
+ $rls-grid-col-sizes: 12, 8, 6, 4, 2, 1;
9
+
10
+ @mixin grid-base() {
11
+ display: grid;
12
+ grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
13
+ width: 100%;
14
+ box-sizing: border-box;
15
+
16
+ & > * {
17
+ min-width: 0;
18
+ max-width: 100%;
19
+ box-sizing: border-box;
20
+ }
21
+ }
22
+
23
+ @mixin grid-responsive($size) {
24
+ @each $cols in $rls-grid-col-sizes {
25
+ .rls-flex-#{$size}-grid-col-#{$cols} {
26
+ --rls-grid-columns: #{$cols};
27
+ }
28
+ }
29
+
30
+ .rls-flex-#{$size}-grid-8,
31
+ .rls-flex-#{$size}-grid-12,
32
+ .rls-flex-#{$size}-grid-16 {
33
+ @include grid-base();
34
+ }
35
+
36
+ .rls-flex-#{$size}-grid-8 {
37
+ gap: var(--rls-sizing-x4);
38
+ }
39
+
40
+ .rls-flex-#{$size}-grid-12 {
41
+ gap: var(--rls-sizing-x6);
42
+ }
43
+
44
+ .rls-flex-#{$size}-grid-16 {
45
+ gap: var(--rls-sizing-x8);
46
+ }
47
+
48
+ // Flex Grid — span classes
49
+ @for $i from 1 through 12 {
50
+ .rls-flex-#{$size}-col-#{$i} {
51
+ grid-column: span #{$i} / span #{$i};
52
+ }
53
+ }
54
+
55
+ // Flex Grid — clamp spans exceeding column count
56
+ @each $max in $rls-grid-col-sizes {
57
+ @if $max < 12 {
58
+ @for $col from ($max + 1) through 12 {
59
+ .rls-flex-#{$size}-grid-col-#{$max} > .rls-flex-#{$size}-col-#{$col} {
60
+ grid-column: span #{$max} / span #{$max};
61
+ }
62
+ }
63
+ }
64
+ }
65
+ }
66
+
67
+ @include grid-responsive('xs');
68
+
69
+ @media screen and (min-width: 420px) {
70
+ @include grid-responsive('sm');
71
+ }
72
+
73
+ @media screen and (min-width: 720px) {
74
+ @include grid-responsive('md');
75
+ }
76
+
77
+ @media screen and (min-width: 1024px) {
78
+ @include grid-responsive('lg');
79
+ }
80
+
81
+ @media screen and (min-width: 1440px) {
82
+ @include grid-responsive('xl');
83
+ }
@@ -1,14 +1,15 @@
1
1
  // Rolster Technology Text Utilities
2
- // v2.1.3
2
+ // v2.1.4
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 08/Sep/2022
6
- // Updated: 17/Dic/2025
6
+ // Updated: 27/Abr/2026
7
7
 
8
8
  .rls-align-center {
9
9
  --rlc-amount-text-align: center;
10
10
  --rlc-input-text-align: center;
11
11
  --rlc-poster-text-align: center;
12
+ --rlc-datatable-justify-content: center;
12
13
 
13
14
  text-align: center !important;
14
15
  }
@@ -25,6 +26,7 @@
25
26
  --rlc-amount-text-align: flex-start;
26
27
  --rlc-input-text-align: left;
27
28
  --rlc-poster-text-align: flex-start;
29
+ --rlc-datatable-justify-content: flex-start;
28
30
 
29
31
  text-align: left !important;
30
32
  }
@@ -33,6 +35,7 @@
33
35
  --rlc-amount-text-align: flex-end;
34
36
  --rlc-input-text-align: right;
35
37
  --rlc-poster-text-align: flex-end;
38
+ --rlc-datatable-justify-content: flex-end;
36
39
 
37
40
  text-align: right !important;
38
41
  }