@mineui/utils 0.0.5 → 0.0.6
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 +1 -1
- package/dist/scss/{p1.scss → _p1.scss} +24 -24
- package/dist/scss/{p2.scss → _p2.scss} +11 -11
- package/dist/scss/{p3.scss → _p3.scss} +67 -67
- package/dist/scss/{p4.scss → _p4.scss} +43 -43
- package/dist/scss/{responsive.scss → _responsive.scss} +34 -34
- package/dist/scss/index.scss +5 -5
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
</div>
|
|
9
9
|
|
|
10
10
|
<div align="center">
|
|
11
|
-
<img src="https://img.shields.io/badge/v-0.0.
|
|
11
|
+
<img src="https://img.shields.io/badge/v-0.0.6-black"/>
|
|
12
12
|
<a href="https://github.com/mineui-org"><img src="https://img.shields.io/badge/🔥-@mineui-black"/></a>
|
|
13
13
|
<br>
|
|
14
14
|
<img src="https://img.shields.io/badge/classes-7000+-blue" alt="Total Classes" />
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
// ----------------------------------------------------------------------------
|
|
8
8
|
// PACK
|
|
9
9
|
// ----------------------------------------------------------------------------
|
|
10
|
-
@use '
|
|
10
|
+
@use '../../node_modules/@mineui/tokens/dist/scss/' as tokens;
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
// ----------------------------------------------------------------------------
|
|
@@ -62,7 +62,7 @@
|
|
|
62
62
|
.bottom-auto { inset-block-end: auto !important; }
|
|
63
63
|
|
|
64
64
|
// Common values
|
|
65
|
-
@each $key, $value in (1:
|
|
65
|
+
@each $key, $value in (1: tokens.$sp-1, 2: tokens.$sp-2, 3: tokens.$sp-3, 4: tokens.$sp-4, 6: tokens.$sp-6, 8: tokens.$sp-8, 12: tokens.$sp-12, 16: tokens.$sp-16) {
|
|
66
66
|
.inset-#{$key} { inset: $value !important; }
|
|
67
67
|
.start-#{$key} { inset-inline-start: $value !important; }
|
|
68
68
|
.end-#{$key} { inset-inline-end: $value !important; }
|
|
@@ -87,10 +87,10 @@
|
|
|
87
87
|
// 4. SPACING - MARGIN (RTL-Aware Logical Properties)
|
|
88
88
|
// ----------------------------------------------------------------------------
|
|
89
89
|
@each $key, $value in (
|
|
90
|
-
0:
|
|
91
|
-
6:
|
|
92
|
-
14:
|
|
93
|
-
32:
|
|
90
|
+
0: tokens.$sp-0, 1: tokens.$sp-1, 2: tokens.$sp-2, 3: tokens.$sp-3, 4: tokens.$sp-4, 5: tokens.$sp-5,
|
|
91
|
+
6: tokens.$sp-6, 7: tokens.$sp-7, 8: tokens.$sp-8, 9: tokens.$sp-9, 10: tokens.$sp-10, 12: tokens.$sp-12,
|
|
92
|
+
14: tokens.$sp-14, 16: tokens.$sp-16, 20: tokens.$sp-20, 24: tokens.$sp-24, 28: tokens.$sp-28,
|
|
93
|
+
32: tokens.$sp-32, 36: tokens.$sp-36, 40: tokens.$sp-40, 48: tokens.$sp-48, 56: tokens.$sp-56, 64: tokens.$sp-64
|
|
94
94
|
) {
|
|
95
95
|
// All sides
|
|
96
96
|
.m-#{$key} { margin: $value !important; }
|
|
@@ -130,10 +130,10 @@
|
|
|
130
130
|
// 5. SPACING - PADDING (RTL-Aware Logical Properties)
|
|
131
131
|
// ----------------------------------------------------------------------------
|
|
132
132
|
@each $key, $value in (
|
|
133
|
-
0:
|
|
134
|
-
6:
|
|
135
|
-
14:
|
|
136
|
-
32:
|
|
133
|
+
0: tokens.$sp-0, 1: tokens.$sp-1, 2: tokens.$sp-2, 3: tokens.$sp-3, 4: tokens.$sp-4, 5: tokens.$sp-5,
|
|
134
|
+
6: tokens.$sp-6, 7: tokens.$sp-7, 8: tokens.$sp-8, 9: tokens.$sp-9, 10: tokens.$sp-10, 12: tokens.$sp-12,
|
|
135
|
+
14: tokens.$sp-14, 16: tokens.$sp-16, 20: tokens.$sp-20, 24: tokens.$sp-24, 28: tokens.$sp-28,
|
|
136
|
+
32: tokens.$sp-32, 36: tokens.$sp-36, 40: tokens.$sp-40, 48: tokens.$sp-48, 56: tokens.$sp-56, 64: tokens.$sp-64
|
|
137
137
|
) {
|
|
138
138
|
// All sides
|
|
139
139
|
.p-#{$key} { padding: $value !important; }
|
|
@@ -155,8 +155,8 @@
|
|
|
155
155
|
// 6. SPACE BETWEEN (Gap for Flex/Grid children)
|
|
156
156
|
// ----------------------------------------------------------------------------
|
|
157
157
|
@each $key, $value in (
|
|
158
|
-
0:
|
|
159
|
-
8:
|
|
158
|
+
0: tokens.$sp-0, 1: tokens.$sp-1, 2: tokens.$sp-2, 3: tokens.$sp-3, 4: tokens.$sp-4, 6: tokens.$sp-6,
|
|
159
|
+
8: tokens.$sp-8, 10: tokens.$sp-10, 12: tokens.$sp-12, 16: tokens.$sp-16, 20: tokens.$sp-20, 24: tokens.$sp-24
|
|
160
160
|
) {
|
|
161
161
|
.space-x-#{$key} > * + * { margin-inline-start: $value !important; }
|
|
162
162
|
.space-y-#{$key} > * + * { margin-block-start: $value !important; }
|
|
@@ -193,9 +193,9 @@
|
|
|
193
193
|
|
|
194
194
|
// Fixed widths
|
|
195
195
|
@each $key, $value in (
|
|
196
|
-
0:
|
|
197
|
-
10:
|
|
198
|
-
40:
|
|
196
|
+
0: tokens.$sp-0, 1: tokens.$sp-1, 2: tokens.$sp-2, 3: tokens.$sp-3, 4: tokens.$sp-4, 6: tokens.$sp-6, 8: tokens.$sp-8,
|
|
197
|
+
10: tokens.$sp-10, 12: tokens.$sp-12, 16: tokens.$sp-16, 20: tokens.$sp-20, 24: tokens.$sp-24, 32: tokens.$sp-32,
|
|
198
|
+
40: tokens.$sp-40, 48: tokens.$sp-48, 56: tokens.$sp-56, 64: tokens.$sp-64
|
|
199
199
|
) {
|
|
200
200
|
.w-#{$key} { width: $value !important; }
|
|
201
201
|
}
|
|
@@ -254,9 +254,9 @@
|
|
|
254
254
|
|
|
255
255
|
// Fixed heights
|
|
256
256
|
@each $key, $value in (
|
|
257
|
-
0:
|
|
258
|
-
10:
|
|
259
|
-
40:
|
|
257
|
+
0: tokens.$sp-0, 1: tokens.$sp-1, 2: tokens.$sp-2, 3: tokens.$sp-3, 4: tokens.$sp-4, 6: tokens.$sp-6, 8: tokens.$sp-8,
|
|
258
|
+
10: tokens.$sp-10, 12: tokens.$sp-12, 16: tokens.$sp-16, 20: tokens.$sp-20, 24: tokens.$sp-24, 32: tokens.$sp-32,
|
|
259
|
+
40: tokens.$sp-40, 48: tokens.$sp-48, 56: tokens.$sp-56, 64: tokens.$sp-64
|
|
260
260
|
) {
|
|
261
261
|
.h-#{$key} { height: $value !important; }
|
|
262
262
|
}
|
|
@@ -280,9 +280,9 @@
|
|
|
280
280
|
|
|
281
281
|
// Fixed max heights
|
|
282
282
|
@each $key, $value in (
|
|
283
|
-
0:
|
|
284
|
-
10:
|
|
285
|
-
40:
|
|
283
|
+
0: tokens.$sp-0, 1: tokens.$sp-1, 2: tokens.$sp-2, 3: tokens.$sp-3, 4: tokens.$sp-4, 6: tokens.$sp-6, 8: tokens.$sp-8,
|
|
284
|
+
10: tokens.$sp-10, 12: tokens.$sp-12, 16: tokens.$sp-16, 20: tokens.$sp-20, 24: tokens.$sp-24, 32: tokens.$sp-32,
|
|
285
|
+
40: tokens.$sp-40, 48: tokens.$sp-48, 56: tokens.$sp-56, 64: tokens.$sp-64
|
|
286
286
|
) {
|
|
287
287
|
.max-h-#{$key} { max-height: $value !important; }
|
|
288
288
|
}
|
|
@@ -291,9 +291,9 @@
|
|
|
291
291
|
// 11. SIZE (Width + Height together)
|
|
292
292
|
// ----------------------------------------------------------------------------
|
|
293
293
|
@each $key, $value in (
|
|
294
|
-
0:
|
|
295
|
-
10:
|
|
296
|
-
40:
|
|
294
|
+
0: tokens.$sp-0, 1: tokens.$sp-1, 2: tokens.$sp-2, 3: tokens.$sp-3, 4: tokens.$sp-4, 6: tokens.$sp-6, 8: tokens.$sp-8,
|
|
295
|
+
10: tokens.$sp-10, 12: tokens.$sp-12, 16: tokens.$sp-16, 20: tokens.$sp-20, 24: tokens.$sp-24, 32: tokens.$sp-32,
|
|
296
|
+
40: tokens.$sp-40, 48: tokens.$sp-48, 56: tokens.$sp-56, 64: tokens.$sp-64
|
|
297
297
|
) {
|
|
298
298
|
.size-#{$key} { width: $value !important; height: $value !important; }
|
|
299
299
|
}
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
// ----------------------------------------------------------------------------
|
|
8
8
|
// PACK
|
|
9
9
|
// ----------------------------------------------------------------------------
|
|
10
|
-
@use '
|
|
10
|
+
@use '../../node_modules/@mineui/tokens/dist/scss/' as tokens;
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
// ----------------------------------------------------------------------------
|
|
@@ -31,8 +31,8 @@
|
|
|
31
31
|
.basis-full { flex-basis: 100% !important; }
|
|
32
32
|
|
|
33
33
|
@each $key, $value in (
|
|
34
|
-
1:
|
|
35
|
-
10:
|
|
34
|
+
1: tokens.$sp-1, 2: tokens.$sp-2, 3: tokens.$sp-3, 4: tokens.$sp-4, 6: tokens.$sp-6, 8: tokens.$sp-8,
|
|
35
|
+
10: tokens.$sp-10, 12: tokens.$sp-12, 16: tokens.$sp-16, 24: tokens.$sp-24, 32: tokens.$sp-32
|
|
36
36
|
) {
|
|
37
37
|
.basis-#{$key} { flex-basis: $value !important; }
|
|
38
38
|
}
|
|
@@ -131,8 +131,8 @@
|
|
|
131
131
|
// 13. GAP
|
|
132
132
|
// ----------------------------------------------------------------------------
|
|
133
133
|
@each $key, $value in (
|
|
134
|
-
0:
|
|
135
|
-
6:
|
|
134
|
+
0: tokens.$sp-0, 1: tokens.$sp-1, 2: tokens.$sp-2, 3: tokens.$sp-3, 4: tokens.$sp-4, 5: tokens.$sp-5,
|
|
135
|
+
6: tokens.$sp-6, 8: tokens.$sp-8, 10: tokens.$sp-10, 12: tokens.$sp-12, 16: tokens.$sp-16, 20: tokens.$sp-20, 24: tokens.$sp-24
|
|
136
136
|
) {
|
|
137
137
|
.gap-#{$key} { gap: $value !important; }
|
|
138
138
|
.gap-x-#{$key} { column-gap: $value !important; }
|
|
@@ -289,12 +289,12 @@
|
|
|
289
289
|
.z-auto { z-index: auto !important; }
|
|
290
290
|
|
|
291
291
|
// Semantic z-index
|
|
292
|
-
.z-dropdown { z-index:
|
|
293
|
-
.z-sticky { z-index:
|
|
294
|
-
.z-fixed { z-index:
|
|
295
|
-
.z-modal { z-index:
|
|
296
|
-
.z-popover { z-index:
|
|
297
|
-
.z-tooltip { z-index:
|
|
292
|
+
.z-dropdown { z-index: tokens.$z-dropdown !important; }
|
|
293
|
+
.z-sticky { z-index: tokens.$z-sticky !important; }
|
|
294
|
+
.z-fixed { z-index: tokens.$z-fixed !important; }
|
|
295
|
+
.z-modal { z-index: tokens.$z-modal !important; }
|
|
296
|
+
.z-popover { z-index: tokens.$z-popover !important; }
|
|
297
|
+
.z-tooltip { z-index: tokens.$z-tooltip !important; }
|
|
298
298
|
|
|
299
299
|
// ----------------------------------------------------------------------------
|
|
300
300
|
// 20. VISIBILITY
|
|
@@ -7,46 +7,46 @@
|
|
|
7
7
|
// ----------------------------------------------------------------------------
|
|
8
8
|
// PACK
|
|
9
9
|
// ----------------------------------------------------------------------------
|
|
10
|
-
@use '
|
|
10
|
+
@use '../../node_modules/@mineui/tokens/dist/scss/' as tokens;
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
// ----------------------------------------------------------------------------
|
|
14
14
|
// 25. TYPOGRAPHY - FONT FAMILY
|
|
15
15
|
// ----------------------------------------------------------------------------
|
|
16
|
-
.font-sans { font-family:
|
|
17
|
-
.font-serif { font-family:
|
|
18
|
-
.font-mono { font-family:
|
|
16
|
+
.font-sans { font-family: tokens.$font-sans !important; }
|
|
17
|
+
.font-serif { font-family: tokens.$font-serif !important; }
|
|
18
|
+
.font-mono { font-family: tokens.$font-mono !important; }
|
|
19
19
|
|
|
20
20
|
// ----------------------------------------------------------------------------
|
|
21
21
|
// 26. FONT SIZE
|
|
22
22
|
// ----------------------------------------------------------------------------
|
|
23
|
-
.text-xs { font-size:
|
|
24
|
-
.text-sm { font-size:
|
|
25
|
-
.text-base { font-size:
|
|
26
|
-
.text-md { font-size:
|
|
27
|
-
.text-lg { font-size:
|
|
28
|
-
.text-xl { font-size:
|
|
29
|
-
.text-2xl { font-size:
|
|
30
|
-
.text-3xl { font-size:
|
|
31
|
-
.text-4xl { font-size:
|
|
32
|
-
.text-5xl { font-size:
|
|
33
|
-
.text-6xl { font-size:
|
|
34
|
-
.text-7xl { font-size:
|
|
35
|
-
.text-8xl { font-size:
|
|
36
|
-
.text-9xl { font-size:
|
|
23
|
+
.text-xs { font-size: tokens.$fs-xs !important; }
|
|
24
|
+
.text-sm { font-size: tokens.$fs-sm !important; }
|
|
25
|
+
.text-base { font-size: tokens.$fs-base !important; }
|
|
26
|
+
.text-md { font-size: tokens.$fs-md !important; }
|
|
27
|
+
.text-lg { font-size: tokens.$fs-lg !important; }
|
|
28
|
+
.text-xl { font-size: tokens.$fs-xl !important; }
|
|
29
|
+
.text-2xl { font-size: tokens.$fs-2xl !important; }
|
|
30
|
+
.text-3xl { font-size: tokens.$fs-3xl !important; }
|
|
31
|
+
.text-4xl { font-size: tokens.$fs-4xl !important; }
|
|
32
|
+
.text-5xl { font-size: tokens.$fs-5xl !important; }
|
|
33
|
+
.text-6xl { font-size: tokens.$fs-6xl !important; }
|
|
34
|
+
.text-7xl { font-size: tokens.$fs-7xl !important; }
|
|
35
|
+
.text-8xl { font-size: tokens.$fs-8xl !important; }
|
|
36
|
+
.text-9xl { font-size: tokens.$fs-9xl !important; }
|
|
37
37
|
|
|
38
38
|
// ----------------------------------------------------------------------------
|
|
39
39
|
// 27. FONT WEIGHT
|
|
40
40
|
// ----------------------------------------------------------------------------
|
|
41
|
-
.font-thin { font-weight:
|
|
42
|
-
.font-extralight { font-weight:
|
|
43
|
-
.font-light { font-weight:
|
|
44
|
-
.font-normal { font-weight:
|
|
45
|
-
.font-medium { font-weight:
|
|
46
|
-
.font-semibold { font-weight:
|
|
47
|
-
.font-bold { font-weight:
|
|
48
|
-
.font-extrabold { font-weight:
|
|
49
|
-
.font-black { font-weight:
|
|
41
|
+
.font-thin { font-weight: tokens.$fw-thin !important; }
|
|
42
|
+
.font-extralight { font-weight: tokens.$fw-extralight !important; }
|
|
43
|
+
.font-light { font-weight: tokens.$fw-light !important; }
|
|
44
|
+
.font-normal { font-weight: tokens.$fw-normal !important; }
|
|
45
|
+
.font-medium { font-weight: tokens.$fw-medium !important; }
|
|
46
|
+
.font-semibold { font-weight: tokens.$fw-semibold !important; }
|
|
47
|
+
.font-bold { font-weight: tokens.$fw-bold !important; }
|
|
48
|
+
.font-extrabold { font-weight: tokens.$fw-extrabold !important; }
|
|
49
|
+
.font-black { font-weight: tokens.$fw-black !important; }
|
|
50
50
|
|
|
51
51
|
// ----------------------------------------------------------------------------
|
|
52
52
|
// 28. FONT STYLE
|
|
@@ -57,12 +57,12 @@
|
|
|
57
57
|
// ----------------------------------------------------------------------------
|
|
58
58
|
// 29. LINE HEIGHT
|
|
59
59
|
// ----------------------------------------------------------------------------
|
|
60
|
-
.leading-none { line-height:
|
|
61
|
-
.leading-tight { line-height:
|
|
62
|
-
.leading-snug { line-height:
|
|
63
|
-
.leading-normal { line-height:
|
|
64
|
-
.leading-relaxed { line-height:
|
|
65
|
-
.leading-loose { line-height:
|
|
60
|
+
.leading-none { line-height: tokens.$lh-none !important; }
|
|
61
|
+
.leading-tight { line-height: tokens.$lh-tight !important; }
|
|
62
|
+
.leading-snug { line-height: tokens.$lh-snug !important; }
|
|
63
|
+
.leading-normal { line-height: tokens.$lh-normal !important; }
|
|
64
|
+
.leading-relaxed { line-height: tokens.$lh-relaxed !important; }
|
|
65
|
+
.leading-loose { line-height: tokens.$lh-loose !important; }
|
|
66
66
|
|
|
67
67
|
// Numeric
|
|
68
68
|
.leading-3 { line-height: 0.75rem !important; }
|
|
@@ -77,12 +77,12 @@
|
|
|
77
77
|
// ----------------------------------------------------------------------------
|
|
78
78
|
// 30. LETTER SPACING
|
|
79
79
|
// ----------------------------------------------------------------------------
|
|
80
|
-
.tracking-tighter { letter-spacing:
|
|
81
|
-
.tracking-tight { letter-spacing:
|
|
82
|
-
.tracking-normal { letter-spacing:
|
|
83
|
-
.tracking-wide { letter-spacing:
|
|
84
|
-
.tracking-wider { letter-spacing:
|
|
85
|
-
.tracking-widest { letter-spacing:
|
|
80
|
+
.tracking-tighter { letter-spacing: tokens.$ls-tighter !important; }
|
|
81
|
+
.tracking-tight { letter-spacing: tokens.$ls-tight !important; }
|
|
82
|
+
.tracking-normal { letter-spacing: tokens.$ls-normal !important; }
|
|
83
|
+
.tracking-wide { letter-spacing: tokens.$ls-wide !important; }
|
|
84
|
+
.tracking-wider { letter-spacing: tokens.$ls-wider !important; }
|
|
85
|
+
.tracking-widest { letter-spacing: tokens.$ls-widest !important; }
|
|
86
86
|
|
|
87
87
|
// ----------------------------------------------------------------------------
|
|
88
88
|
// 31. TEXT ALIGNMENT (RTL-Aware)
|
|
@@ -282,19 +282,19 @@
|
|
|
282
282
|
// ----------------------------------------------------------------------------
|
|
283
283
|
// 48. BORDERS
|
|
284
284
|
// ----------------------------------------------------------------------------
|
|
285
|
-
.border { border-width:
|
|
285
|
+
.border { border-width: tokens.$bw-1 !important; border-style: solid !important; border-color: var(--border-1) !important; }
|
|
286
286
|
.border-0 { border-width: 0 !important; }
|
|
287
|
-
.border-2 { border-width:
|
|
288
|
-
.border-4 { border-width:
|
|
289
|
-
.border-8 { border-width:
|
|
287
|
+
.border-2 { border-width: tokens.$bw-2 !important; }
|
|
288
|
+
.border-4 { border-width: tokens.$bw-4 !important; }
|
|
289
|
+
.border-8 { border-width: tokens.$bw-8 !important; }
|
|
290
290
|
|
|
291
291
|
// Individual sides (RTL-aware)
|
|
292
|
-
.border-x { border-inline-width:
|
|
293
|
-
.border-y { border-block-width:
|
|
294
|
-
.border-s { border-inline-start-width:
|
|
295
|
-
.border-e { border-inline-end-width:
|
|
296
|
-
.border-t { border-block-start-width:
|
|
297
|
-
.border-b { border-block-end-width:
|
|
292
|
+
.border-x { border-inline-width: tokens.$bw-1 !important; border-inline-style: solid !important; }
|
|
293
|
+
.border-y { border-block-width: tokens.$bw-1 !important; border-block-style: solid !important; }
|
|
294
|
+
.border-s { border-inline-start-width: tokens.$bw-1 !important; border-inline-start-style: solid !important; }
|
|
295
|
+
.border-e { border-inline-end-width: tokens.$bw-1 !important; border-inline-end-style: solid !important; }
|
|
296
|
+
.border-t { border-block-start-width: tokens.$bw-1 !important; border-block-start-style: solid !important; }
|
|
297
|
+
.border-b { border-block-end-width: tokens.$bw-1 !important; border-block-end-style: solid !important; }
|
|
298
298
|
|
|
299
299
|
// Border Color (Semantic)
|
|
300
300
|
.border-1 { border-color: var(--border-1) !important; }
|
|
@@ -318,26 +318,26 @@
|
|
|
318
318
|
// ----------------------------------------------------------------------------
|
|
319
319
|
// 49. BORDER RADIUS
|
|
320
320
|
// ----------------------------------------------------------------------------
|
|
321
|
-
.rounded-none { border-radius:
|
|
322
|
-
.rounded-sm { border-radius:
|
|
323
|
-
.rounded { border-radius:
|
|
324
|
-
.rounded-md { border-radius:
|
|
325
|
-
.rounded-lg { border-radius:
|
|
326
|
-
.rounded-xl { border-radius:
|
|
327
|
-
.rounded-2xl { border-radius:
|
|
328
|
-
.rounded-3xl { border-radius:
|
|
329
|
-
.rounded-full { border-radius:
|
|
321
|
+
.rounded-none { border-radius: tokens.$br-none !important; }
|
|
322
|
+
.rounded-sm { border-radius: tokens.$br-sm !important; }
|
|
323
|
+
.rounded { border-radius: tokens.$br-base !important; }
|
|
324
|
+
.rounded-md { border-radius: tokens.$br-md !important; }
|
|
325
|
+
.rounded-lg { border-radius: tokens.$br-lg !important; }
|
|
326
|
+
.rounded-xl { border-radius: tokens.$br-xl !important; }
|
|
327
|
+
.rounded-2xl { border-radius: tokens.$br-2xl !important; }
|
|
328
|
+
.rounded-3xl { border-radius: tokens.$br-3xl !important; }
|
|
329
|
+
.rounded-full { border-radius: tokens.$br-full !important; }
|
|
330
330
|
|
|
331
331
|
// Individual corners (Logical)
|
|
332
|
-
.rounded-s { border-start-start-radius:
|
|
333
|
-
.rounded-e { border-start-end-radius:
|
|
334
|
-
.rounded-t { border-start-start-radius:
|
|
335
|
-
.rounded-b { border-end-start-radius:
|
|
336
|
-
|
|
337
|
-
.rounded-ss { border-start-start-radius:
|
|
338
|
-
.rounded-se { border-start-end-radius:
|
|
339
|
-
.rounded-ee { border-end-end-radius:
|
|
340
|
-
.rounded-es { border-end-start-radius:
|
|
332
|
+
.rounded-s { border-start-start-radius: tokens.$br-base !important; border-end-start-radius: tokens.$br-base !important; }
|
|
333
|
+
.rounded-e { border-start-end-radius: tokens.$br-base !important; border-end-end-radius: tokens.$br-base !important; }
|
|
334
|
+
.rounded-t { border-start-start-radius: tokens.$br-base !important; border-start-end-radius: tokens.$br-base !important; }
|
|
335
|
+
.rounded-b { border-end-start-radius: tokens.$br-base !important; border-end-end-radius: tokens.$br-base !important; }
|
|
336
|
+
|
|
337
|
+
.rounded-ss { border-start-start-radius: tokens.$br-base !important; }
|
|
338
|
+
.rounded-se { border-start-end-radius: tokens.$br-base !important; }
|
|
339
|
+
.rounded-ee { border-end-end-radius: tokens.$br-base !important; }
|
|
340
|
+
.rounded-es { border-end-start-radius: tokens.$br-base !important; }
|
|
341
341
|
|
|
342
342
|
// ----------------------------------------------------------------------------
|
|
343
343
|
// 50. OUTLINE
|
|
@@ -7,29 +7,29 @@
|
|
|
7
7
|
// ----------------------------------------------------------------------------
|
|
8
8
|
// PACK
|
|
9
9
|
// ----------------------------------------------------------------------------
|
|
10
|
-
@use '
|
|
10
|
+
@use '../../node_modules/@mineui/tokens/dist/scss/' as tokens;
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
// ----------------------------------------------------------------------------
|
|
14
14
|
// 51. BOX SHADOW
|
|
15
15
|
// ----------------------------------------------------------------------------
|
|
16
|
-
.shadow-none { box-shadow:
|
|
16
|
+
.shadow-none { box-shadow: tokens.$shadow-none !important; }
|
|
17
17
|
.shadow-xs { box-shadow: var(--shadow-xs) !important; }
|
|
18
18
|
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
|
|
19
19
|
.shadow { box-shadow: var(--shadow-md) !important; }
|
|
20
20
|
.shadow-md { box-shadow: var(--shadow-md) !important; }
|
|
21
21
|
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
|
|
22
22
|
.shadow-xl { box-shadow: var(--shadow-xl) !important; }
|
|
23
|
-
.shadow-inner { box-shadow:
|
|
23
|
+
.shadow-inner { box-shadow: tokens.$shadow-inner !important; }
|
|
24
24
|
|
|
25
25
|
// ----------------------------------------------------------------------------
|
|
26
26
|
// 52. OPACITY
|
|
27
27
|
// ----------------------------------------------------------------------------
|
|
28
28
|
@each $key, $value in (
|
|
29
|
-
0:
|
|
30
|
-
25:
|
|
31
|
-
60:
|
|
32
|
-
90:
|
|
29
|
+
0: tokens.$opacity-0, 5: tokens.$opacity-5, 10: tokens.$opacity-10, 20: tokens.$opacity-20,
|
|
30
|
+
25: tokens.$opacity-25, 30: tokens.$opacity-30, 40: tokens.$opacity-40, 50: tokens.$opacity-50,
|
|
31
|
+
60: tokens.$opacity-60, 70: tokens.$opacity-70, 75: tokens.$opacity-75, 80: tokens.$opacity-80,
|
|
32
|
+
90: tokens.$opacity-90, 95: tokens.$opacity-95, 100: tokens.$opacity-100
|
|
33
33
|
) {
|
|
34
34
|
.opacity-#{$key} { opacity: $value !important; }
|
|
35
35
|
}
|
|
@@ -80,13 +80,13 @@
|
|
|
80
80
|
|
|
81
81
|
// Blur
|
|
82
82
|
.blur-none { filter: blur(0) !important; }
|
|
83
|
-
.blur-sm { filter: blur(
|
|
84
|
-
.blur { filter: blur(
|
|
85
|
-
.blur-md { filter: blur(
|
|
86
|
-
.blur-lg { filter: blur(
|
|
87
|
-
.blur-xl { filter: blur(
|
|
88
|
-
.blur-2xl { filter: blur(
|
|
89
|
-
.blur-3xl { filter: blur(
|
|
83
|
+
.blur-sm { filter: blur(tokens.$blur-sm) !important; }
|
|
84
|
+
.blur { filter: blur(tokens.$blur-base) !important; }
|
|
85
|
+
.blur-md { filter: blur(tokens.$blur-md) !important; }
|
|
86
|
+
.blur-lg { filter: blur(tokens.$blur-lg) !important; }
|
|
87
|
+
.blur-xl { filter: blur(tokens.$blur-xl) !important; }
|
|
88
|
+
.blur-2xl { filter: blur(tokens.$blur-2xl) !important; }
|
|
89
|
+
.blur-3xl { filter: blur(tokens.$blur-3xl) !important; }
|
|
90
90
|
|
|
91
91
|
// Brightness
|
|
92
92
|
.brightness-0 { filter: brightness(0) !important; }
|
|
@@ -141,11 +141,11 @@
|
|
|
141
141
|
// 56. BACKDROP FILTER
|
|
142
142
|
// ----------------------------------------------------------------------------
|
|
143
143
|
.backdrop-blur-none { backdrop-filter: blur(0) !important; }
|
|
144
|
-
.backdrop-blur-sm { backdrop-filter: blur(
|
|
145
|
-
.backdrop-blur { backdrop-filter: blur(
|
|
146
|
-
.backdrop-blur-md { backdrop-filter: blur(
|
|
147
|
-
.backdrop-blur-lg { backdrop-filter: blur(
|
|
148
|
-
.backdrop-blur-xl { backdrop-filter: blur(
|
|
144
|
+
.backdrop-blur-sm { backdrop-filter: blur(tokens.$blur-sm) !important; }
|
|
145
|
+
.backdrop-blur { backdrop-filter: blur(tokens.$blur-base) !important; }
|
|
146
|
+
.backdrop-blur-md { backdrop-filter: blur(tokens.$blur-md) !important; }
|
|
147
|
+
.backdrop-blur-lg { backdrop-filter: blur(tokens.$blur-lg) !important; }
|
|
148
|
+
.backdrop-blur-xl { backdrop-filter: blur(tokens.$blur-xl) !important; }
|
|
149
149
|
|
|
150
150
|
.backdrop-brightness-50 { backdrop-filter: brightness(0.5) !important; }
|
|
151
151
|
.backdrop-brightness-75 { backdrop-filter: brightness(0.75) !important; }
|
|
@@ -180,49 +180,49 @@
|
|
|
180
180
|
.transition-none { transition-property: none !important; }
|
|
181
181
|
.transition-all {
|
|
182
182
|
transition-property: all !important;
|
|
183
|
-
transition-timing-function:
|
|
184
|
-
transition-duration:
|
|
183
|
+
transition-timing-function: tokens.$ease-in-out !important;
|
|
184
|
+
transition-duration: tokens.$dur-normal !important;
|
|
185
185
|
}
|
|
186
186
|
.transition {
|
|
187
187
|
transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter !important;
|
|
188
|
-
transition-timing-function:
|
|
189
|
-
transition-duration:
|
|
188
|
+
transition-timing-function: tokens.$ease-in-out !important;
|
|
189
|
+
transition-duration: tokens.$dur-normal !important;
|
|
190
190
|
}
|
|
191
191
|
.transition-colors {
|
|
192
192
|
transition-property: background-color, border-color, color, fill, stroke !important;
|
|
193
|
-
transition-timing-function:
|
|
194
|
-
transition-duration:
|
|
193
|
+
transition-timing-function: tokens.$ease-in-out !important;
|
|
194
|
+
transition-duration: tokens.$dur-normal !important;
|
|
195
195
|
}
|
|
196
196
|
.transition-opacity {
|
|
197
197
|
transition-property: opacity !important;
|
|
198
|
-
transition-timing-function:
|
|
199
|
-
transition-duration:
|
|
198
|
+
transition-timing-function: tokens.$ease-in-out !important;
|
|
199
|
+
transition-duration: tokens.$dur-normal !important;
|
|
200
200
|
}
|
|
201
201
|
.transition-shadow {
|
|
202
202
|
transition-property: box-shadow !important;
|
|
203
|
-
transition-timing-function:
|
|
204
|
-
transition-duration:
|
|
203
|
+
transition-timing-function: tokens.$ease-in-out !important;
|
|
204
|
+
transition-duration: tokens.$dur-normal !important;
|
|
205
205
|
}
|
|
206
206
|
.transition-transform {
|
|
207
207
|
transition-property: transform !important;
|
|
208
|
-
transition-timing-function:
|
|
209
|
-
transition-duration:
|
|
208
|
+
transition-timing-function: tokens.$ease-in-out !important;
|
|
209
|
+
transition-duration: tokens.$dur-normal !important;
|
|
210
210
|
}
|
|
211
211
|
|
|
212
212
|
// Duration
|
|
213
|
-
.duration-75 { transition-duration:
|
|
214
|
-
.duration-100 { transition-duration:
|
|
215
|
-
.duration-150 { transition-duration:
|
|
216
|
-
.duration-200 { transition-duration:
|
|
217
|
-
.duration-300 { transition-duration:
|
|
218
|
-
.duration-500 { transition-duration:
|
|
219
|
-
.duration-700 { transition-duration:
|
|
213
|
+
.duration-75 { transition-duration: tokens.$dur-fast !important; }
|
|
214
|
+
.duration-100 { transition-duration: tokens.$dur-fast !important; }
|
|
215
|
+
.duration-150 { transition-duration: tokens.$dur-normal !important; }
|
|
216
|
+
.duration-200 { transition-duration: tokens.$dur-moderate !important; }
|
|
217
|
+
.duration-300 { transition-duration: tokens.$dur-slow !important; }
|
|
218
|
+
.duration-500 { transition-duration: tokens.$dur-slower !important; }
|
|
219
|
+
.duration-700 { transition-duration: tokens.$dur-slowest !important; }
|
|
220
220
|
|
|
221
221
|
// Timing Function
|
|
222
|
-
.ease-linear { transition-timing-function:
|
|
223
|
-
.ease-in { transition-timing-function:
|
|
224
|
-
.ease-out { transition-timing-function:
|
|
225
|
-
.ease-in-out { transition-timing-function:
|
|
222
|
+
.ease-linear { transition-timing-function: tokens.$ease-linear !important; }
|
|
223
|
+
.ease-in { transition-timing-function: tokens.$ease-in !important; }
|
|
224
|
+
.ease-out { transition-timing-function: tokens.$ease-out !important; }
|
|
225
|
+
.ease-in-out { transition-timing-function: tokens.$ease-in-out !important; }
|
|
226
226
|
|
|
227
227
|
// Delay
|
|
228
228
|
.delay-75 { transition-delay: 75ms !important; }
|
|
@@ -298,7 +298,7 @@
|
|
|
298
298
|
.translate-x-0 { transform: translateX(0) !important; }
|
|
299
299
|
.translate-y-0 { transform: translateY(0) !important; }
|
|
300
300
|
|
|
301
|
-
@each $key, $value in (1:
|
|
301
|
+
@each $key, $value in (1: tokens.$sp-1, 2: tokens.$sp-2, 3: tokens.$sp-3, 4: tokens.$sp-4, 6: tokens.$sp-6, 8: tokens.$sp-8, 12: tokens.$sp-12, 16: tokens.$sp-16) {
|
|
302
302
|
.translate-x-#{$key} { transform: translateX($value) !important; }
|
|
303
303
|
.translate-y-#{$key} { transform: translateY($value) !important; }
|
|
304
304
|
.-translate-x-#{$key} { transform: translateX(calc($value * -1)) !important; }
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
// ----------------------------------------------------------------------------
|
|
8
8
|
// PACK
|
|
9
9
|
// ----------------------------------------------------------------------------
|
|
10
|
-
@use '
|
|
10
|
+
@use '../../node_modules/@mineui/tokens/dist/scss/' as tokens;
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
// ----------------------------------------------------------------------------
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
}
|
|
29
29
|
|
|
30
30
|
// Generate responsive classes for most common utilities
|
|
31
|
-
@each $breakpoint-name, $breakpoint-value in
|
|
31
|
+
@each $breakpoint-name, $breakpoint-value in tokens.$breakpoints {
|
|
32
32
|
@if $breakpoint-value != 0 {
|
|
33
33
|
@media (min-width: $breakpoint-value) {
|
|
34
34
|
|
|
@@ -80,23 +80,23 @@
|
|
|
80
80
|
.#{$breakpoint-name}\:text-end { text-align: end !important; }
|
|
81
81
|
|
|
82
82
|
// Text Size
|
|
83
|
-
.#{$breakpoint-name}\:text-xs { font-size:
|
|
84
|
-
.#{$breakpoint-name}\:text-sm { font-size:
|
|
85
|
-
.#{$breakpoint-name}\:text-base { font-size:
|
|
86
|
-
.#{$breakpoint-name}\:text-lg { font-size:
|
|
87
|
-
.#{$breakpoint-name}\:text-xl { font-size:
|
|
88
|
-
.#{$breakpoint-name}\:text-2xl { font-size:
|
|
89
|
-
.#{$breakpoint-name}\:text-3xl { font-size:
|
|
83
|
+
.#{$breakpoint-name}\:text-xs { font-size: tokens.$fs-xs !important; }
|
|
84
|
+
.#{$breakpoint-name}\:text-sm { font-size: tokens.$fs-sm !important; }
|
|
85
|
+
.#{$breakpoint-name}\:text-base { font-size: tokens.$fs-base !important; }
|
|
86
|
+
.#{$breakpoint-name}\:text-lg { font-size: tokens.$fs-lg !important; }
|
|
87
|
+
.#{$breakpoint-name}\:text-xl { font-size: tokens.$fs-xl !important; }
|
|
88
|
+
.#{$breakpoint-name}\:text-2xl { font-size: tokens.$fs-2xl !important; }
|
|
89
|
+
.#{$breakpoint-name}\:text-3xl { font-size: tokens.$fs-3xl !important; }
|
|
90
90
|
|
|
91
91
|
// Common Spacing
|
|
92
|
-
@each $
|
|
93
|
-
.#{$breakpoint-name}\:p-#{$
|
|
94
|
-
.#{$breakpoint-name}\:px-#{$
|
|
95
|
-
.#{$breakpoint-name}\:py-#{$
|
|
96
|
-
.#{$breakpoint-name}\:m-#{$
|
|
97
|
-
.#{$breakpoint-name}\:mx-#{$
|
|
98
|
-
.#{$breakpoint-name}\:my-#{$
|
|
99
|
-
.#{$breakpoint-name}\:gap-#{$
|
|
92
|
+
@each $key, $value in (0: tokens.$sp-0, 1: tokens.$sp-1, 2: tokens.$sp-2, 3: tokens.$sp-3, 4: tokens.$sp-4, 6: tokens.$sp-6, 8: tokens.$sp-8, 12: tokens.$sp-12) {
|
|
93
|
+
.#{$breakpoint-name}\:p-#{$key} { padding: $value !important; }
|
|
94
|
+
.#{$breakpoint-name}\:px-#{$key} { padding-inline: $value !important; }
|
|
95
|
+
.#{$breakpoint-name}\:py-#{$key} { padding-block: $value !important; }
|
|
96
|
+
.#{$breakpoint-name}\:m-#{$key} { margin: $value !important; }
|
|
97
|
+
.#{$breakpoint-name}\:mx-#{$key} { margin-inline: $value !important; }
|
|
98
|
+
.#{$breakpoint-name}\:my-#{$key} { margin-block: $value !important; }
|
|
99
|
+
.#{$breakpoint-name}\:gap-#{$key} { gap: $value !important; }
|
|
100
100
|
}
|
|
101
101
|
|
|
102
102
|
.#{$breakpoint-name}\:mx-auto { margin-inline: auto !important; }
|
|
@@ -115,7 +115,7 @@
|
|
|
115
115
|
.hover\:bg-error:hover { background-color: var(--error-hover) !important; }
|
|
116
116
|
|
|
117
117
|
// Opacity
|
|
118
|
-
@each $key, $value in (0:
|
|
118
|
+
@each $key, $value in (0: tokens.$opacity-0, 50: tokens.$opacity-50, 75: tokens.$opacity-75, 100: 1) {
|
|
119
119
|
.hover\:opacity-#{$key}:hover { opacity: $value !important; }
|
|
120
120
|
}
|
|
121
121
|
|
|
@@ -130,8 +130,8 @@
|
|
|
130
130
|
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg) !important; }
|
|
131
131
|
|
|
132
132
|
// Translate
|
|
133
|
-
.hover\:-translate-y-1:hover { transform: translateY(-#{
|
|
134
|
-
.hover\:-translate-y-2:hover { transform: translateY(-#{
|
|
133
|
+
.hover\:-translate-y-1:hover { transform: translateY(-#{tokens.$sp-1}) !important; }
|
|
134
|
+
.hover\:-translate-y-2:hover { transform: translateY(-#{tokens.$sp-2}) !important; }
|
|
135
135
|
|
|
136
136
|
// Brightness
|
|
137
137
|
.hover\:brightness-110:hover { filter: brightness(1.1) !important; }
|
|
@@ -168,7 +168,7 @@
|
|
|
168
168
|
.active\:scale-90:active { transform: scale(0.9) !important; }
|
|
169
169
|
|
|
170
170
|
// Opacity
|
|
171
|
-
.active\:opacity-80:active { opacity:
|
|
171
|
+
.active\:opacity-80:active { opacity: tokens.$opacity-80 !important; }
|
|
172
172
|
|
|
173
173
|
// Background
|
|
174
174
|
.active\:bg-brand:active { background-color: var(--brand-active) !important; }
|
|
@@ -193,9 +193,9 @@
|
|
|
193
193
|
// GROUP HOVER VARIANTS
|
|
194
194
|
// ----------------------------------------------------------------------------
|
|
195
195
|
|
|
196
|
-
.group:hover .group-hover\:opacity-100 { opacity:
|
|
196
|
+
.group:hover .group-hover\:opacity-100 { opacity: tokens.$opacity-100 !important; }
|
|
197
197
|
.group:hover .group-hover\:scale-105 { transform: scale(1.05) !important; }
|
|
198
|
-
.group:hover .group-hover\:translate-x-1 { transform: translateX(
|
|
198
|
+
.group:hover .group-hover\:translate-x-1 { transform: translateX(tokens.$sp-1) !important; }
|
|
199
199
|
.group:hover .group-hover\:block { display: block !important; }
|
|
200
200
|
|
|
201
201
|
// ----------------------------------------------------------------------------
|
|
@@ -281,13 +281,13 @@
|
|
|
281
281
|
.last\:mb-0:last-child { margin-block-end: 0 !important; }
|
|
282
282
|
|
|
283
283
|
.first\:rounded-t:first-child {
|
|
284
|
-
border-start-start-radius:
|
|
285
|
-
border-start-end-radius:
|
|
284
|
+
border-start-start-radius: tokens.$br-base !important;
|
|
285
|
+
border-start-end-radius: tokens.$br-base !important;
|
|
286
286
|
}
|
|
287
287
|
|
|
288
288
|
.last\:rounded-b:last-child {
|
|
289
|
-
border-end-start-radius:
|
|
290
|
-
border-end-end-radius:
|
|
289
|
+
border-end-start-radius: tokens.$br-base !important;
|
|
290
|
+
border-end-end-radius: tokens.$br-base !important;
|
|
291
291
|
}
|
|
292
292
|
|
|
293
293
|
// ----------------------------------------------------------------------------
|
|
@@ -302,7 +302,7 @@
|
|
|
302
302
|
// ----------------------------------------------------------------------------
|
|
303
303
|
|
|
304
304
|
.placeholder\:text-3::placeholder { color: var(--text-3) !important; }
|
|
305
|
-
.placeholder\:opacity-50::placeholder { opacity:
|
|
305
|
+
.placeholder\:opacity-50::placeholder { opacity: tokens.$opacity-50 !important; }
|
|
306
306
|
|
|
307
307
|
// ----------------------------------------------------------------------------
|
|
308
308
|
// FILE INPUT VARIANT
|
|
@@ -346,13 +346,13 @@
|
|
|
346
346
|
.container {
|
|
347
347
|
width: 100%;
|
|
348
348
|
margin-inline: auto;
|
|
349
|
-
padding-inline:
|
|
349
|
+
padding-inline: tokens.$sp-4;
|
|
350
350
|
|
|
351
|
-
@media (min-width:
|
|
352
|
-
@media (min-width:
|
|
353
|
-
@media (min-width:
|
|
354
|
-
@media (min-width:
|
|
355
|
-
@media (min-width:
|
|
351
|
+
@media (min-width: tokens.$bp-sm) { max-width: tokens.$bp-sm; }
|
|
352
|
+
@media (min-width: tokens.$bp-md) { max-width: tokens.$bp-md; }
|
|
353
|
+
@media (min-width: tokens.$bp-lg) { max-width: tokens.$bp-lg; }
|
|
354
|
+
@media (min-width: tokens.$bp-xl) { max-width: tokens.$bp-xl; }
|
|
355
|
+
@media (min-width: tokens.$bp-xxl) { max-width: tokens.$bp-xxl; }
|
|
356
356
|
}
|
|
357
357
|
|
|
358
358
|
// ----------------------------------------------------------------------------
|
package/dist/scss/index.scss
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
// ----------------------------------------------------------------------------
|
|
8
8
|
// PACK
|
|
9
9
|
// ----------------------------------------------------------------------------
|
|
10
|
-
@
|
|
11
|
-
@
|
|
12
|
-
@
|
|
13
|
-
@
|
|
14
|
-
@
|
|
10
|
+
@forward './p1.scss';
|
|
11
|
+
@forward './p2.scss';
|
|
12
|
+
@forward './p3.scss';
|
|
13
|
+
@forward './p4.scss';
|
|
14
|
+
@forward './responsive.scss';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mineui/utils",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "utils",
|
|
5
5
|
"keywords": ["mine", "ui", "utils"],
|
|
6
6
|
"license": "MIT",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"bun": "^1.3.3"
|
|
42
42
|
},
|
|
43
43
|
"dependencies": {
|
|
44
|
-
"@mineui/tokens": "^0.0
|
|
44
|
+
"@mineui/tokens": "^0.1.0"
|
|
45
45
|
},
|
|
46
46
|
"devDependencies": {
|
|
47
47
|
"@eslint/js": "^9.39.2",
|