@mineui/utils 0.0.2 → 0.0.4
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.
- package/README.md +547 -29
- package/dist/scss/index.scss +14 -0
- package/dist/scss/p1.scss +302 -0
- package/dist/scss/p2.scss +363 -0
- package/dist/scss/p3.scss +367 -0
- package/dist/scss/p4.scss +428 -0
- package/dist/scss/responsive.scss +383 -0
- package/package.json +9 -4
- package/dist/index.css +0 -1
- package/dist/index.css.map +0 -1
|
@@ -0,0 +1,302 @@
|
|
|
1
|
+
// @mineui/p1 (LAYOUT & SPACING)
|
|
2
|
+
//
|
|
3
|
+
// Made with ❤️ by Maysara.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
// ----------------------------------------------------------------------------
|
|
8
|
+
// PACK
|
|
9
|
+
// ----------------------------------------------------------------------------
|
|
10
|
+
@use '../../../node_modules/@mineui/tokens' as *;
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
// ----------------------------------------------------------------------------
|
|
14
|
+
// 1. DISPLAY
|
|
15
|
+
// ----------------------------------------------------------------------------
|
|
16
|
+
.block { display: block !important; }
|
|
17
|
+
.inline-block { display: inline-block !important; }
|
|
18
|
+
.inline { display: inline !important; }
|
|
19
|
+
.flex { display: flex !important; }
|
|
20
|
+
.inline-flex { display: inline-flex !important; }
|
|
21
|
+
.grid { display: grid !important; }
|
|
22
|
+
.inline-grid { display: inline-grid !important; }
|
|
23
|
+
.table { display: table !important; }
|
|
24
|
+
.table-row { display: table-row !important; }
|
|
25
|
+
.table-cell { display: table-cell !important; }
|
|
26
|
+
.flow-root { display: flow-root !important; }
|
|
27
|
+
.contents { display: contents !important; }
|
|
28
|
+
.hidden { display: none !important; }
|
|
29
|
+
|
|
30
|
+
// ----------------------------------------------------------------------------
|
|
31
|
+
// 2. POSITION
|
|
32
|
+
// ----------------------------------------------------------------------------
|
|
33
|
+
.static { position: static !important; }
|
|
34
|
+
.fixed { position: fixed !important; }
|
|
35
|
+
.absolute { position: absolute !important; }
|
|
36
|
+
.relative { position: relative !important; }
|
|
37
|
+
.sticky { position: sticky !important; }
|
|
38
|
+
|
|
39
|
+
// ----------------------------------------------------------------------------
|
|
40
|
+
// 3. INSET (RTL-Aware with Logical Properties)
|
|
41
|
+
// ----------------------------------------------------------------------------
|
|
42
|
+
// All sides
|
|
43
|
+
.inset-0 { inset: 0 !important; }
|
|
44
|
+
.inset-auto { inset: auto !important; }
|
|
45
|
+
|
|
46
|
+
// Inline (horizontal in LTR, RTL-aware)
|
|
47
|
+
.inset-x-0 { inset-inline: 0 !important; }
|
|
48
|
+
.inset-x-auto { inset-inline: auto !important; }
|
|
49
|
+
|
|
50
|
+
// Block (vertical)
|
|
51
|
+
.inset-y-0 { inset-block: 0 !important; }
|
|
52
|
+
.inset-y-auto { inset-block: auto !important; }
|
|
53
|
+
|
|
54
|
+
// Individual sides (RTL-Aware)
|
|
55
|
+
.start-0 { inset-inline-start: 0 !important; }
|
|
56
|
+
.start-auto { inset-inline-start: auto !important; }
|
|
57
|
+
.end-0 { inset-inline-end: 0 !important; }
|
|
58
|
+
.end-auto { inset-inline-end: auto !important; }
|
|
59
|
+
.top-0 { inset-block-start: 0 !important; }
|
|
60
|
+
.top-auto { inset-block-start: auto !important; }
|
|
61
|
+
.bottom-0 { inset-block-end: 0 !important; }
|
|
62
|
+
.bottom-auto { inset-block-end: auto !important; }
|
|
63
|
+
|
|
64
|
+
// Common values
|
|
65
|
+
@each $key, $value in (1: $sp-1, 2: $sp-2, 3: $sp-3, 4: $sp-4, 6: $sp-6, 8: $sp-8, 12: $sp-12, 16: $sp-16) {
|
|
66
|
+
.inset-#{$key} { inset: $value !important; }
|
|
67
|
+
.start-#{$key} { inset-inline-start: $value !important; }
|
|
68
|
+
.end-#{$key} { inset-inline-end: $value !important; }
|
|
69
|
+
.top-#{$key} { inset-block-start: $value !important; }
|
|
70
|
+
.bottom-#{$key} { inset-block-end: $value !important; }
|
|
71
|
+
|
|
72
|
+
// Negative values
|
|
73
|
+
.-start-#{$key} { inset-inline-start: calc($value * -1) !important; }
|
|
74
|
+
.-end-#{$key} { inset-inline-end: calc($value * -1) !important; }
|
|
75
|
+
.-top-#{$key} { inset-block-start: calc($value * -1) !important; }
|
|
76
|
+
.-bottom-#{$key} { inset-block-end: calc($value * -1) !important; }
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Percentage values
|
|
80
|
+
.inset-full { inset: 100% !important; }
|
|
81
|
+
.start-full { inset-inline-start: 100% !important; }
|
|
82
|
+
.end-full { inset-inline-end: 100% !important; }
|
|
83
|
+
.top-full { inset-block-start: 100% !important; }
|
|
84
|
+
.bottom-full { inset-block-end: 100% !important; }
|
|
85
|
+
|
|
86
|
+
// ----------------------------------------------------------------------------
|
|
87
|
+
// 4. SPACING - MARGIN (RTL-Aware Logical Properties)
|
|
88
|
+
// ----------------------------------------------------------------------------
|
|
89
|
+
@each $key, $value in (
|
|
90
|
+
0: $sp-0, 1: $sp-1, 2: $sp-2, 3: $sp-3, 4: $sp-4, 5: $sp-5,
|
|
91
|
+
6: $sp-6, 7: $sp-7, 8: $sp-8, 9: $sp-9, 10: $sp-10, 12: $sp-12,
|
|
92
|
+
14: $sp-14, 16: $sp-16, 20: $sp-20, 24: $sp-24, 28: $sp-28,
|
|
93
|
+
32: $sp-32, 36: $sp-36, 40: $sp-40, 48: $sp-48, 56: $sp-56, 64: $sp-64
|
|
94
|
+
) {
|
|
95
|
+
// All sides
|
|
96
|
+
.m-#{$key} { margin: $value !important; }
|
|
97
|
+
|
|
98
|
+
// Inline (horizontal - RTL aware)
|
|
99
|
+
.mx-#{$key} { margin-inline: $value !important; }
|
|
100
|
+
|
|
101
|
+
// Block (vertical)
|
|
102
|
+
.my-#{$key} { margin-block: $value !important; }
|
|
103
|
+
|
|
104
|
+
// Individual sides (RTL-Aware)
|
|
105
|
+
.ms-#{$key} { margin-inline-start: $value !important; }
|
|
106
|
+
.me-#{$key} { margin-inline-end: $value !important; }
|
|
107
|
+
.mt-#{$key} { margin-block-start: $value !important; }
|
|
108
|
+
.mb-#{$key} { margin-block-end: $value !important; }
|
|
109
|
+
|
|
110
|
+
// Negative values
|
|
111
|
+
.-m-#{$key} { margin: calc($value * -1) !important; }
|
|
112
|
+
.-mx-#{$key} { margin-inline: calc($value * -1) !important; }
|
|
113
|
+
.-my-#{$key} { margin-block: calc($value * -1) !important; }
|
|
114
|
+
.-ms-#{$key} { margin-inline-start: calc($value * -1) !important; }
|
|
115
|
+
.-me-#{$key} { margin-inline-end: calc($value * -1) !important; }
|
|
116
|
+
.-mt-#{$key} { margin-block-start: calc($value * -1) !important; }
|
|
117
|
+
.-mb-#{$key} { margin-block-end: calc($value * -1) !important; }
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// Auto margins
|
|
121
|
+
.m-auto { margin: auto !important; }
|
|
122
|
+
.mx-auto { margin-inline: auto !important; }
|
|
123
|
+
.my-auto { margin-block: auto !important; }
|
|
124
|
+
.ms-auto { margin-inline-start: auto !important; }
|
|
125
|
+
.me-auto { margin-inline-end: auto !important; }
|
|
126
|
+
.mt-auto { margin-block-start: auto !important; }
|
|
127
|
+
.mb-auto { margin-block-end: auto !important; }
|
|
128
|
+
|
|
129
|
+
// ----------------------------------------------------------------------------
|
|
130
|
+
// 5. SPACING - PADDING (RTL-Aware Logical Properties)
|
|
131
|
+
// ----------------------------------------------------------------------------
|
|
132
|
+
@each $key, $value in (
|
|
133
|
+
0: $sp-0, 1: $sp-1, 2: $sp-2, 3: $sp-3, 4: $sp-4, 5: $sp-5,
|
|
134
|
+
6: $sp-6, 7: $sp-7, 8: $sp-8, 9: $sp-9, 10: $sp-10, 12: $sp-12,
|
|
135
|
+
14: $sp-14, 16: $sp-16, 20: $sp-20, 24: $sp-24, 28: $sp-28,
|
|
136
|
+
32: $sp-32, 36: $sp-36, 40: $sp-40, 48: $sp-48, 56: $sp-56, 64: $sp-64
|
|
137
|
+
) {
|
|
138
|
+
// All sides
|
|
139
|
+
.p-#{$key} { padding: $value !important; }
|
|
140
|
+
|
|
141
|
+
// Inline (horizontal - RTL aware)
|
|
142
|
+
.px-#{$key} { padding-inline: $value !important; }
|
|
143
|
+
|
|
144
|
+
// Block (vertical)
|
|
145
|
+
.py-#{$key} { padding-block: $value !important; }
|
|
146
|
+
|
|
147
|
+
// Individual sides (RTL-Aware)
|
|
148
|
+
.ps-#{$key} { padding-inline-start: $value !important; }
|
|
149
|
+
.pe-#{$key} { padding-inline-end: $value !important; }
|
|
150
|
+
.pt-#{$key} { padding-block-start: $value !important; }
|
|
151
|
+
.pb-#{$key} { padding-block-end: $value !important; }
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// ----------------------------------------------------------------------------
|
|
155
|
+
// 6. SPACE BETWEEN (Gap for Flex/Grid children)
|
|
156
|
+
// ----------------------------------------------------------------------------
|
|
157
|
+
@each $key, $value in (
|
|
158
|
+
0: $sp-0, 1: $sp-1, 2: $sp-2, 3: $sp-3, 4: $sp-4, 6: $sp-6,
|
|
159
|
+
8: $sp-8, 10: $sp-10, 12: $sp-12, 16: $sp-16, 20: $sp-20, 24: $sp-24
|
|
160
|
+
) {
|
|
161
|
+
.space-x-#{$key} > * + * { margin-inline-start: $value !important; }
|
|
162
|
+
.space-y-#{$key} > * + * { margin-block-start: $value !important; }
|
|
163
|
+
|
|
164
|
+
// Reverse (for flex-reverse)
|
|
165
|
+
.space-x-reverse > * + * { margin-inline-start: 0 !important; margin-inline-end: $value !important; }
|
|
166
|
+
.space-y-reverse > * + * { margin-block-start: 0 !important; margin-block-end: $value !important; }
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
// ----------------------------------------------------------------------------
|
|
170
|
+
// 7. WIDTH
|
|
171
|
+
// ----------------------------------------------------------------------------
|
|
172
|
+
.w-auto { width: auto !important; }
|
|
173
|
+
.w-full { width: 100% !important; }
|
|
174
|
+
.w-screen { width: 100vw !important; }
|
|
175
|
+
.w-min { width: min-content !important; }
|
|
176
|
+
.w-max { width: max-content !important; }
|
|
177
|
+
.w-fit { width: fit-content !important; }
|
|
178
|
+
|
|
179
|
+
// Fraction widths
|
|
180
|
+
.w-1\/2 { width: 50% !important; }
|
|
181
|
+
.w-1\/3 { width: 33.333333% !important; }
|
|
182
|
+
.w-2\/3 { width: 66.666667% !important; }
|
|
183
|
+
.w-1\/4 { width: 25% !important; }
|
|
184
|
+
.w-2\/4 { width: 50% !important; }
|
|
185
|
+
.w-3\/4 { width: 75% !important; }
|
|
186
|
+
.w-1\/5 { width: 20% !important; }
|
|
187
|
+
.w-2\/5 { width: 40% !important; }
|
|
188
|
+
.w-3\/5 { width: 60% !important; }
|
|
189
|
+
.w-4\/5 { width: 80% !important; }
|
|
190
|
+
.w-1\/6 { width: 16.666667% !important; }
|
|
191
|
+
.w-5\/6 { width: 83.333333% !important; }
|
|
192
|
+
.w-1\/12 { width: 8.333333% !important; }
|
|
193
|
+
|
|
194
|
+
// Fixed widths
|
|
195
|
+
@each $key, $value in (
|
|
196
|
+
0: $sp-0, 1: $sp-1, 2: $sp-2, 3: $sp-3, 4: $sp-4, 6: $sp-6, 8: $sp-8,
|
|
197
|
+
10: $sp-10, 12: $sp-12, 16: $sp-16, 20: $sp-20, 24: $sp-24, 32: $sp-32,
|
|
198
|
+
40: $sp-40, 48: $sp-48, 56: $sp-56, 64: $sp-64
|
|
199
|
+
) {
|
|
200
|
+
.w-#{$key} { width: $value !important; }
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
// ----------------------------------------------------------------------------
|
|
204
|
+
// 8. MIN/MAX WIDTH
|
|
205
|
+
// ----------------------------------------------------------------------------
|
|
206
|
+
.min-w-0 { min-width: 0 !important; }
|
|
207
|
+
.min-w-full { min-width: 100% !important; }
|
|
208
|
+
.min-w-min { min-width: min-content !important; }
|
|
209
|
+
.min-w-max { min-width: max-content !important; }
|
|
210
|
+
.min-w-fit { min-width: fit-content !important; }
|
|
211
|
+
|
|
212
|
+
.max-w-none { max-width: none !important; }
|
|
213
|
+
.max-w-full { max-width: 100% !important; }
|
|
214
|
+
.max-w-min { max-width: min-content !important; }
|
|
215
|
+
.max-w-max { max-width: max-content !important; }
|
|
216
|
+
.max-w-fit { max-width: fit-content !important; }
|
|
217
|
+
|
|
218
|
+
// Common max-widths
|
|
219
|
+
.max-w-xs { max-width: 20rem !important; }
|
|
220
|
+
.max-w-sm { max-width: 24rem !important; }
|
|
221
|
+
.max-w-md { max-width: 28rem !important; }
|
|
222
|
+
.max-w-lg { max-width: 32rem !important; }
|
|
223
|
+
.max-w-xl { max-width: 36rem !important; }
|
|
224
|
+
.max-w-2xl { max-width: 42rem !important; }
|
|
225
|
+
.max-w-3xl { max-width: 48rem !important; }
|
|
226
|
+
.max-w-4xl { max-width: 56rem !important; }
|
|
227
|
+
.max-w-5xl { max-width: 64rem !important; }
|
|
228
|
+
.max-w-6xl { max-width: 72rem !important; }
|
|
229
|
+
.max-w-7xl { max-width: 80rem !important; }
|
|
230
|
+
|
|
231
|
+
// Prose widths
|
|
232
|
+
.max-w-prose { max-width: 65ch !important; }
|
|
233
|
+
|
|
234
|
+
// ----------------------------------------------------------------------------
|
|
235
|
+
// 9. HEIGHT
|
|
236
|
+
// ----------------------------------------------------------------------------
|
|
237
|
+
.h-auto { height: auto !important; }
|
|
238
|
+
.h-full { height: 100% !important; }
|
|
239
|
+
.h-screen { height: 100vh !important; }
|
|
240
|
+
.h-min { height: min-content !important; }
|
|
241
|
+
.h-max { height: max-content !important; }
|
|
242
|
+
.h-fit { height: fit-content !important; }
|
|
243
|
+
|
|
244
|
+
// Fraction heights
|
|
245
|
+
.h-1\/2 { height: 50% !important; }
|
|
246
|
+
.h-1\/3 { height: 33.333333% !important; }
|
|
247
|
+
.h-2\/3 { height: 66.666667% !important; }
|
|
248
|
+
.h-1\/4 { height: 25% !important; }
|
|
249
|
+
.h-3\/4 { height: 75% !important; }
|
|
250
|
+
.h-1\/5 { height: 20% !important; }
|
|
251
|
+
.h-2\/5 { height: 40% !important; }
|
|
252
|
+
.h-3\/5 { height: 60% !important; }
|
|
253
|
+
.h-4\/5 { height: 80% !important; }
|
|
254
|
+
|
|
255
|
+
// Fixed heights
|
|
256
|
+
@each $key, $value in (
|
|
257
|
+
0: $sp-0, 1: $sp-1, 2: $sp-2, 3: $sp-3, 4: $sp-4, 6: $sp-6, 8: $sp-8,
|
|
258
|
+
10: $sp-10, 12: $sp-12, 16: $sp-16, 20: $sp-20, 24: $sp-24, 32: $sp-32,
|
|
259
|
+
40: $sp-40, 48: $sp-48, 56: $sp-56, 64: $sp-64
|
|
260
|
+
) {
|
|
261
|
+
.h-#{$key} { height: $value !important; }
|
|
262
|
+
}
|
|
263
|
+
|
|
264
|
+
// ----------------------------------------------------------------------------
|
|
265
|
+
// 10. MIN/MAX HEIGHT
|
|
266
|
+
// ----------------------------------------------------------------------------
|
|
267
|
+
.min-h-0 { min-height: 0 !important; }
|
|
268
|
+
.min-h-full { min-height: 100% !important; }
|
|
269
|
+
.min-h-screen { min-height: 100vh !important; }
|
|
270
|
+
.min-h-min { min-height: min-content !important; }
|
|
271
|
+
.min-h-max { min-height: max-content !important; }
|
|
272
|
+
.min-h-fit { min-height: fit-content !important; }
|
|
273
|
+
|
|
274
|
+
.max-h-none { max-height: none !important; }
|
|
275
|
+
.max-h-full { max-height: 100% !important; }
|
|
276
|
+
.max-h-screen { max-height: 100vh !important; }
|
|
277
|
+
.max-h-min { max-height: min-content !important; }
|
|
278
|
+
.max-h-max { max-height: max-content !important; }
|
|
279
|
+
.max-h-fit { max-height: fit-content !important; }
|
|
280
|
+
|
|
281
|
+
// Fixed max heights
|
|
282
|
+
@each $key, $value in (
|
|
283
|
+
0: $sp-0, 1: $sp-1, 2: $sp-2, 3: $sp-3, 4: $sp-4, 6: $sp-6, 8: $sp-8,
|
|
284
|
+
10: $sp-10, 12: $sp-12, 16: $sp-16, 20: $sp-20, 24: $sp-24, 32: $sp-32,
|
|
285
|
+
40: $sp-40, 48: $sp-48, 56: $sp-56, 64: $sp-64
|
|
286
|
+
) {
|
|
287
|
+
.max-h-#{$key} { max-height: $value !important; }
|
|
288
|
+
}
|
|
289
|
+
|
|
290
|
+
// ----------------------------------------------------------------------------
|
|
291
|
+
// 11. SIZE (Width + Height together)
|
|
292
|
+
// ----------------------------------------------------------------------------
|
|
293
|
+
@each $key, $value in (
|
|
294
|
+
0: $sp-0, 1: $sp-1, 2: $sp-2, 3: $sp-3, 4: $sp-4, 6: $sp-6, 8: $sp-8,
|
|
295
|
+
10: $sp-10, 12: $sp-12, 16: $sp-16, 20: $sp-20, 24: $sp-24, 32: $sp-32,
|
|
296
|
+
40: $sp-40, 48: $sp-48, 56: $sp-56, 64: $sp-64
|
|
297
|
+
) {
|
|
298
|
+
.size-#{$key} { width: $value !important; height: $value !important; }
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.size-auto { width: auto !important; height: auto !important; }
|
|
302
|
+
.size-full { width: 100% !important; height: 100% !important; }
|
|
@@ -0,0 +1,363 @@
|
|
|
1
|
+
// @mineui/p2 (FLEXBOX & GRID)
|
|
2
|
+
//
|
|
3
|
+
// Made with ❤️ by Maysara.
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
// ----------------------------------------------------------------------------
|
|
8
|
+
// PACK
|
|
9
|
+
// ----------------------------------------------------------------------------
|
|
10
|
+
@use '../../../node_modules/@mineui/tokens' as *;
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
// ----------------------------------------------------------------------------
|
|
14
|
+
// 12. FLEXBOX
|
|
15
|
+
// ----------------------------------------------------------------------------
|
|
16
|
+
|
|
17
|
+
// Flex Direction
|
|
18
|
+
.flex-row { flex-direction: row !important; }
|
|
19
|
+
.flex-row-reverse { flex-direction: row-reverse !important; }
|
|
20
|
+
.flex-col { flex-direction: column !important; }
|
|
21
|
+
.flex-col-reverse { flex-direction: column-reverse !important; }
|
|
22
|
+
|
|
23
|
+
// Flex Wrap
|
|
24
|
+
.flex-wrap { flex-wrap: wrap !important; }
|
|
25
|
+
.flex-wrap-reverse { flex-wrap: wrap-reverse !important; }
|
|
26
|
+
.flex-nowrap { flex-wrap: nowrap !important; }
|
|
27
|
+
|
|
28
|
+
// Flex Basis
|
|
29
|
+
.basis-0 { flex-basis: 0 !important; }
|
|
30
|
+
.basis-auto { flex-basis: auto !important; }
|
|
31
|
+
.basis-full { flex-basis: 100% !important; }
|
|
32
|
+
|
|
33
|
+
@each $key, $value in (
|
|
34
|
+
1: $sp-1, 2: $sp-2, 3: $sp-3, 4: $sp-4, 6: $sp-6, 8: $sp-8,
|
|
35
|
+
10: $sp-10, 12: $sp-12, 16: $sp-16, 24: $sp-24, 32: $sp-32
|
|
36
|
+
) {
|
|
37
|
+
.basis-#{$key} { flex-basis: $value !important; }
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
// Fractions
|
|
41
|
+
.basis-1\/2 { flex-basis: 50% !important; }
|
|
42
|
+
.basis-1\/3 { flex-basis: 33.333333% !important; }
|
|
43
|
+
.basis-2\/3 { flex-basis: 66.666667% !important; }
|
|
44
|
+
.basis-1\/4 { flex-basis: 25% !important; }
|
|
45
|
+
.basis-3\/4 { flex-basis: 75% !important; }
|
|
46
|
+
|
|
47
|
+
// Flex Grow
|
|
48
|
+
.grow { flex-grow: 1 !important; }
|
|
49
|
+
.grow-0 { flex-grow: 0 !important; }
|
|
50
|
+
|
|
51
|
+
// Flex Shrink
|
|
52
|
+
.shrink { flex-shrink: 1 !important; }
|
|
53
|
+
.shrink-0 { flex-shrink: 0 !important; }
|
|
54
|
+
|
|
55
|
+
// Flex Shorthand
|
|
56
|
+
.flex-1 { flex: 1 1 0% !important; }
|
|
57
|
+
.flex-auto { flex: 1 1 auto !important; }
|
|
58
|
+
.flex-initial { flex: 0 1 auto !important; }
|
|
59
|
+
.flex-none { flex: none !important; }
|
|
60
|
+
|
|
61
|
+
// Justify Content
|
|
62
|
+
.justify-start { justify-content: flex-start !important; }
|
|
63
|
+
.justify-end { justify-content: flex-end !important; }
|
|
64
|
+
.justify-center { justify-content: center !important; }
|
|
65
|
+
.justify-between { justify-content: space-between !important; }
|
|
66
|
+
.justify-around { justify-content: space-around !important; }
|
|
67
|
+
.justify-evenly { justify-content: space-evenly !important; }
|
|
68
|
+
.justify-stretch { justify-content: stretch !important; }
|
|
69
|
+
|
|
70
|
+
// Justify Items (Grid)
|
|
71
|
+
.justify-items-start { justify-items: start !important; }
|
|
72
|
+
.justify-items-end { justify-items: end !important; }
|
|
73
|
+
.justify-items-center { justify-items: center !important; }
|
|
74
|
+
.justify-items-stretch { justify-items: stretch !important; }
|
|
75
|
+
|
|
76
|
+
// Justify Self (Grid)
|
|
77
|
+
.justify-self-auto { justify-self: auto !important; }
|
|
78
|
+
.justify-self-start { justify-self: start !important; }
|
|
79
|
+
.justify-self-end { justify-self: end !important; }
|
|
80
|
+
.justify-self-center { justify-self: center !important; }
|
|
81
|
+
.justify-self-stretch { justify-self: stretch !important; }
|
|
82
|
+
|
|
83
|
+
// Align Content
|
|
84
|
+
.content-start { align-content: flex-start !important; }
|
|
85
|
+
.content-end { align-content: flex-end !important; }
|
|
86
|
+
.content-center { align-content: center !important; }
|
|
87
|
+
.content-between { align-content: space-between !important; }
|
|
88
|
+
.content-around { align-content: space-around !important; }
|
|
89
|
+
.content-evenly { align-content: space-evenly !important; }
|
|
90
|
+
.content-stretch { align-content: stretch !important; }
|
|
91
|
+
.content-baseline { align-content: baseline !important; }
|
|
92
|
+
|
|
93
|
+
// Align Items
|
|
94
|
+
.items-start { align-items: flex-start !important; }
|
|
95
|
+
.items-end { align-items: flex-end !important; }
|
|
96
|
+
.items-center { align-items: center !important; }
|
|
97
|
+
.items-baseline { align-items: baseline !important; }
|
|
98
|
+
.items-stretch { align-items: stretch !important; }
|
|
99
|
+
|
|
100
|
+
// Align Self
|
|
101
|
+
.self-auto { align-self: auto !important; }
|
|
102
|
+
.self-start { align-self: flex-start !important; }
|
|
103
|
+
.self-end { align-self: flex-end !important; }
|
|
104
|
+
.self-center { align-self: center !important; }
|
|
105
|
+
.self-stretch { align-self: stretch !important; }
|
|
106
|
+
.self-baseline { align-self: baseline !important; }
|
|
107
|
+
|
|
108
|
+
// Place Content
|
|
109
|
+
.place-content-start { place-content: start !important; }
|
|
110
|
+
.place-content-end { place-content: end !important; }
|
|
111
|
+
.place-content-center { place-content: center !important; }
|
|
112
|
+
.place-content-between { place-content: space-between !important; }
|
|
113
|
+
.place-content-around { place-content: space-around !important; }
|
|
114
|
+
.place-content-evenly { place-content: space-evenly !important; }
|
|
115
|
+
.place-content-stretch { place-content: stretch !important; }
|
|
116
|
+
|
|
117
|
+
// Place Items
|
|
118
|
+
.place-items-start { place-items: start !important; }
|
|
119
|
+
.place-items-end { place-items: end !important; }
|
|
120
|
+
.place-items-center { place-items: center !important; }
|
|
121
|
+
.place-items-stretch { place-items: stretch !important; }
|
|
122
|
+
|
|
123
|
+
// Place Self
|
|
124
|
+
.place-self-auto { place-self: auto !important; }
|
|
125
|
+
.place-self-start { place-self: start !important; }
|
|
126
|
+
.place-self-end { place-self: end !important; }
|
|
127
|
+
.place-self-center { place-self: center !important; }
|
|
128
|
+
.place-self-stretch { place-self: stretch !important; }
|
|
129
|
+
|
|
130
|
+
// ----------------------------------------------------------------------------
|
|
131
|
+
// 13. GAP
|
|
132
|
+
// ----------------------------------------------------------------------------
|
|
133
|
+
@each $key, $value in (
|
|
134
|
+
0: $sp-0, 1: $sp-1, 2: $sp-2, 3: $sp-3, 4: $sp-4, 5: $sp-5,
|
|
135
|
+
6: $sp-6, 8: $sp-8, 10: $sp-10, 12: $sp-12, 16: $sp-16, 20: $sp-20, 24: $sp-24
|
|
136
|
+
) {
|
|
137
|
+
.gap-#{$key} { gap: $value !important; }
|
|
138
|
+
.gap-x-#{$key} { column-gap: $value !important; }
|
|
139
|
+
.gap-y-#{$key} { row-gap: $value !important; }
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
// ----------------------------------------------------------------------------
|
|
143
|
+
// 14. GRID
|
|
144
|
+
// ----------------------------------------------------------------------------
|
|
145
|
+
|
|
146
|
+
// Grid Template Columns
|
|
147
|
+
.grid-cols-none { grid-template-columns: none !important; }
|
|
148
|
+
@for $i from 1 through 12 {
|
|
149
|
+
.grid-cols-#{$i} {
|
|
150
|
+
grid-template-columns: repeat($i, minmax(0, 1fr)) !important;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
// Grid Column Span
|
|
155
|
+
.col-auto { grid-column: auto !important; }
|
|
156
|
+
.col-span-full { grid-column: 1 / -1 !important; }
|
|
157
|
+
@for $i from 1 through 12 {
|
|
158
|
+
.col-span-#{$i} {
|
|
159
|
+
grid-column: span $i / span $i !important;
|
|
160
|
+
}
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
// Grid Column Start/End
|
|
164
|
+
.col-start-auto { grid-column-start: auto !important; }
|
|
165
|
+
.col-end-auto { grid-column-end: auto !important; }
|
|
166
|
+
@for $i from 1 through 13 {
|
|
167
|
+
.col-start-#{$i} { grid-column-start: $i !important; }
|
|
168
|
+
.col-end-#{$i} { grid-column-end: $i !important; }
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
// Grid Template Rows
|
|
172
|
+
.grid-rows-none { grid-template-rows: none !important; }
|
|
173
|
+
@for $i from 1 through 6 {
|
|
174
|
+
.grid-rows-#{$i} {
|
|
175
|
+
grid-template-rows: repeat($i, minmax(0, 1fr)) !important;
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
// Grid Row Span
|
|
180
|
+
.row-auto { grid-row: auto !important; }
|
|
181
|
+
.row-span-full { grid-row: 1 / -1 !important; }
|
|
182
|
+
@for $i from 1 through 6 {
|
|
183
|
+
.row-span-#{$i} {
|
|
184
|
+
grid-row: span $i / span $i !important;
|
|
185
|
+
}
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
// Grid Row Start/End
|
|
189
|
+
.row-start-auto { grid-row-start: auto !important; }
|
|
190
|
+
.row-end-auto { grid-row-end: auto !important; }
|
|
191
|
+
@for $i from 1 through 7 {
|
|
192
|
+
.row-start-#{$i} { grid-row-start: $i !important; }
|
|
193
|
+
.row-end-#{$i} { grid-row-end: $i !important; }
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
// Grid Auto Flow
|
|
197
|
+
.grid-flow-row { grid-auto-flow: row !important; }
|
|
198
|
+
.grid-flow-col { grid-auto-flow: column !important; }
|
|
199
|
+
.grid-flow-dense { grid-auto-flow: dense !important; }
|
|
200
|
+
.grid-flow-row-dense { grid-auto-flow: row dense !important; }
|
|
201
|
+
.grid-flow-col-dense { grid-auto-flow: column dense !important; }
|
|
202
|
+
|
|
203
|
+
// Grid Auto Columns
|
|
204
|
+
.auto-cols-auto { grid-auto-columns: auto !important; }
|
|
205
|
+
.auto-cols-min { grid-auto-columns: min-content !important; }
|
|
206
|
+
.auto-cols-max { grid-auto-columns: max-content !important; }
|
|
207
|
+
.auto-cols-fr { grid-auto-columns: minmax(0, 1fr) !important; }
|
|
208
|
+
|
|
209
|
+
// Grid Auto Rows
|
|
210
|
+
.auto-rows-auto { grid-auto-rows: auto !important; }
|
|
211
|
+
.auto-rows-min { grid-auto-rows: min-content !important; }
|
|
212
|
+
.auto-rows-max { grid-auto-rows: max-content !important; }
|
|
213
|
+
.auto-rows-fr { grid-auto-rows: minmax(0, 1fr) !important; }
|
|
214
|
+
|
|
215
|
+
// ----------------------------------------------------------------------------
|
|
216
|
+
// 15. ORDER
|
|
217
|
+
// ----------------------------------------------------------------------------
|
|
218
|
+
.order-first { order: -9999 !important; }
|
|
219
|
+
.order-last { order: 9999 !important; }
|
|
220
|
+
.order-none { order: 0 !important; }
|
|
221
|
+
@for $i from 1 through 12 {
|
|
222
|
+
.order-#{$i} { order: $i !important; }
|
|
223
|
+
}
|
|
224
|
+
|
|
225
|
+
// ----------------------------------------------------------------------------
|
|
226
|
+
// 16. FLOAT
|
|
227
|
+
// ----------------------------------------------------------------------------
|
|
228
|
+
.float-start { float: inline-start !important; }
|
|
229
|
+
.float-end { float: inline-end !important; }
|
|
230
|
+
.float-left { float: left !important; }
|
|
231
|
+
.float-right { float: right !important; }
|
|
232
|
+
.float-none { float: none !important; }
|
|
233
|
+
|
|
234
|
+
// ----------------------------------------------------------------------------
|
|
235
|
+
// 17. CLEAR
|
|
236
|
+
// ----------------------------------------------------------------------------
|
|
237
|
+
.clear-start { clear: inline-start !important; }
|
|
238
|
+
.clear-end { clear: inline-end !important; }
|
|
239
|
+
.clear-left { clear: left !important; }
|
|
240
|
+
.clear-right { clear: right !important; }
|
|
241
|
+
.clear-both { clear: both !important; }
|
|
242
|
+
.clear-none { clear: none !important; }
|
|
243
|
+
|
|
244
|
+
// ----------------------------------------------------------------------------
|
|
245
|
+
// 18. OVERFLOW
|
|
246
|
+
// ----------------------------------------------------------------------------
|
|
247
|
+
.overflow-auto { overflow: auto !important; }
|
|
248
|
+
.overflow-hidden { overflow: hidden !important; }
|
|
249
|
+
.overflow-clip { overflow: clip !important; }
|
|
250
|
+
.overflow-visible { overflow: visible !important; }
|
|
251
|
+
.overflow-scroll { overflow: scroll !important; }
|
|
252
|
+
|
|
253
|
+
.overflow-x-auto { overflow-x: auto !important; }
|
|
254
|
+
.overflow-y-auto { overflow-y: auto !important; }
|
|
255
|
+
.overflow-x-hidden { overflow-x: hidden !important; }
|
|
256
|
+
.overflow-y-hidden { overflow-y: hidden !important; }
|
|
257
|
+
.overflow-x-clip { overflow-x: clip !important; }
|
|
258
|
+
.overflow-y-clip { overflow-y: clip !important; }
|
|
259
|
+
.overflow-x-visible { overflow-x: visible !important; }
|
|
260
|
+
.overflow-y-visible { overflow-y: visible !important; }
|
|
261
|
+
.overflow-x-scroll { overflow-x: scroll !important; }
|
|
262
|
+
.overflow-y-scroll { overflow-y: scroll !important; }
|
|
263
|
+
|
|
264
|
+
// Overscroll Behavior
|
|
265
|
+
.overscroll-auto { overscroll-behavior: auto !important; }
|
|
266
|
+
.overscroll-contain { overscroll-behavior: contain !important; }
|
|
267
|
+
.overscroll-none { overscroll-behavior: none !important; }
|
|
268
|
+
|
|
269
|
+
.overscroll-x-auto { overscroll-behavior-x: auto !important; }
|
|
270
|
+
.overscroll-y-auto { overscroll-behavior-y: auto !important; }
|
|
271
|
+
.overscroll-x-contain { overscroll-behavior-x: contain !important; }
|
|
272
|
+
.overscroll-y-contain { overscroll-behavior-y: contain !important; }
|
|
273
|
+
.overscroll-x-none { overscroll-behavior-x: none !important; }
|
|
274
|
+
.overscroll-y-none { overscroll-behavior-y: none !important; }
|
|
275
|
+
|
|
276
|
+
// Scroll Behavior
|
|
277
|
+
.scroll-auto { scroll-behavior: auto !important; }
|
|
278
|
+
.scroll-smooth { scroll-behavior: smooth !important; }
|
|
279
|
+
|
|
280
|
+
// ----------------------------------------------------------------------------
|
|
281
|
+
// 19. Z-INDEX
|
|
282
|
+
// ----------------------------------------------------------------------------
|
|
283
|
+
.z-0 { z-index: 0 !important; }
|
|
284
|
+
.z-10 { z-index: 10 !important; }
|
|
285
|
+
.z-20 { z-index: 20 !important; }
|
|
286
|
+
.z-30 { z-index: 30 !important; }
|
|
287
|
+
.z-40 { z-index: 40 !important; }
|
|
288
|
+
.z-50 { z-index: 50 !important; }
|
|
289
|
+
.z-auto { z-index: auto !important; }
|
|
290
|
+
|
|
291
|
+
// Semantic z-index
|
|
292
|
+
.z-dropdown { z-index: $z-dropdown !important; }
|
|
293
|
+
.z-sticky { z-index: $z-sticky !important; }
|
|
294
|
+
.z-fixed { z-index: $z-fixed !important; }
|
|
295
|
+
.z-modal { z-index: $z-modal !important; }
|
|
296
|
+
.z-popover { z-index: $z-popover !important; }
|
|
297
|
+
.z-tooltip { z-index: $z-tooltip !important; }
|
|
298
|
+
|
|
299
|
+
// ----------------------------------------------------------------------------
|
|
300
|
+
// 20. VISIBILITY
|
|
301
|
+
// ----------------------------------------------------------------------------
|
|
302
|
+
.visible { visibility: visible !important; }
|
|
303
|
+
.invisible { visibility: hidden !important; }
|
|
304
|
+
.collapse { visibility: collapse !important; }
|
|
305
|
+
|
|
306
|
+
// ----------------------------------------------------------------------------
|
|
307
|
+
// 21. ISOLATION
|
|
308
|
+
// ----------------------------------------------------------------------------
|
|
309
|
+
.isolate { isolation: isolate !important; }
|
|
310
|
+
.isolation-auto { isolation: auto !important; }
|
|
311
|
+
|
|
312
|
+
// ----------------------------------------------------------------------------
|
|
313
|
+
// 22. OBJECT FIT & POSITION
|
|
314
|
+
// ----------------------------------------------------------------------------
|
|
315
|
+
.object-contain { object-fit: contain !important; }
|
|
316
|
+
.object-cover { object-fit: cover !important; }
|
|
317
|
+
.object-fill { object-fit: fill !important; }
|
|
318
|
+
.object-none { object-fit: none !important; }
|
|
319
|
+
.object-scale-down { object-fit: scale-down !important; }
|
|
320
|
+
|
|
321
|
+
.object-bottom { object-position: bottom !important; }
|
|
322
|
+
.object-center { object-position: center !important; }
|
|
323
|
+
.object-left { object-position: left !important; }
|
|
324
|
+
.object-left-bottom { object-position: left bottom !important; }
|
|
325
|
+
.object-left-top { object-position: left top !important; }
|
|
326
|
+
.object-right { object-position: right !important; }
|
|
327
|
+
.object-right-bottom { object-position: right bottom !important; }
|
|
328
|
+
.object-right-top { object-position: right top !important; }
|
|
329
|
+
.object-top { object-position: top !important; }
|
|
330
|
+
|
|
331
|
+
// ----------------------------------------------------------------------------
|
|
332
|
+
// 23. ASPECT RATIO
|
|
333
|
+
// ----------------------------------------------------------------------------
|
|
334
|
+
.aspect-auto { aspect-ratio: auto !important; }
|
|
335
|
+
.aspect-square { aspect-ratio: 1 / 1 !important; }
|
|
336
|
+
.aspect-video { aspect-ratio: 16 / 9 !important; }
|
|
337
|
+
.aspect-4-3 { aspect-ratio: 4 / 3 !important; }
|
|
338
|
+
.aspect-21-9 { aspect-ratio: 21 / 9 !important; }
|
|
339
|
+
.aspect-portrait { aspect-ratio: 3 / 4 !important; }
|
|
340
|
+
|
|
341
|
+
// ----------------------------------------------------------------------------
|
|
342
|
+
// 24. COLUMNS (Multi-column Layout)
|
|
343
|
+
// ----------------------------------------------------------------------------
|
|
344
|
+
.columns-auto { columns: auto !important; }
|
|
345
|
+
.columns-1 { columns: 1 !important; }
|
|
346
|
+
.columns-2 { columns: 2 !important; }
|
|
347
|
+
.columns-3 { columns: 3 !important; }
|
|
348
|
+
.columns-4 { columns: 4 !important; }
|
|
349
|
+
|
|
350
|
+
.break-before-auto { break-before: auto !important; }
|
|
351
|
+
.break-before-avoid { break-before: avoid !important; }
|
|
352
|
+
.break-before-page { break-before: page !important; }
|
|
353
|
+
.break-before-column { break-before: column !important; }
|
|
354
|
+
|
|
355
|
+
.break-after-auto { break-after: auto !important; }
|
|
356
|
+
.break-after-avoid { break-after: avoid !important; }
|
|
357
|
+
.break-after-page { break-after: page !important; }
|
|
358
|
+
.break-after-column { break-after: column !important; }
|
|
359
|
+
|
|
360
|
+
.break-inside-auto { break-inside: auto !important; }
|
|
361
|
+
.break-inside-avoid { break-inside: avoid !important; }
|
|
362
|
+
.break-inside-avoid-page { break-inside: avoid-page !important; }
|
|
363
|
+
.break-inside-avoid-column { break-inside: avoid-column !important; }
|