@@ -7,106 +7,106 @@ export const multiStep = {
7
7
group/wrapper
8
8
9
9
${ "" /** tab-style tabs */ }
10
- data-[tab-style=" tab" ]:$inputShadow
11
- data-[tab-style=" tab" ]:$radius(0,rounded-none,rounded-2xl)
10
+ data-[tab-style=tab]:$inputShadow
11
+ data-[tab-style=tab]:$radius(0,rounded-none,rounded-2xl)
12
12
` ,
13
13
tabs : `
14
14
flex
15
15
items-center
16
16
17
17
${ "" /** tab-style tabs */ }
18
- group-data-[tab-style=" tab" ]/wrapper:overflow-auto
19
- group-data-[tab-style=" tab" ]/wrapper:border
20
- group-data-[tab-style=" tab" ]/wrapper:border-b-0
21
- group-data-[tab-style=" tab" ]/wrapper:border-$colorTemperature-$borderShadeLightMode(-1,*)
22
- group-data-[tab-style=" tab" ]/wrapper:$radius(0,rounded-none,rounded-2xl)
23
- group-data-[tab-style=" tab" ]/wrapper:rounded-bl-none
24
- group-data-[tab-style=" tab" ]/wrapper:rounded-br-none
18
+ group-data-[tab-style=tab]/wrapper:overflow-auto
19
+ group-data-[tab-style=tab]/wrapper:border
20
+ group-data-[tab-style=tab]/wrapper:border-b-0
21
+ group-data-[tab-style=tab]/wrapper:border-$colorTemperature-$borderShadeLightMode(-1,*)
22
+ group-data-[tab-style=tab]/wrapper:$radius(0,rounded-none,rounded-2xl)
23
+ group-data-[tab-style=tab]/wrapper:rounded-bl-none
24
+ group-data-[tab-style=tab]/wrapper:rounded-br-none
25
25
26
- dark:group-data-[tab-style=" tab" ]/wrapper:border-$colorTemperature-$borderShadeDarkMode(1,200,800)
26
+ dark:group-data-[tab-style=tab]/wrapper:border-$colorTemperature-$borderShadeDarkMode(1,200,800)
27
27
28
28
${ "" /** progress-style tabs */ }
29
- group-data-[tab-style=" progress" ]/wrapper:my-$spacing(6,*)
30
- group-data-[tab-style=" progress" ]/wrapper:justify-around
31
- group-data-[tab-style=" progress" ]/wrapper:overflow-visible
32
- group-data-[tab-style=" progress" ]/wrapper:group-data-[hide-labels=" true" ]/wrapper:mb-$spacing(3,*)
29
+ group-data-[tab-style=progress]/wrapper:my-$spacing(6,*)
30
+ group-data-[tab-style=progress]/wrapper:justify-around
31
+ group-data-[tab-style=progress]/wrapper:overflow-visible
32
+ group-data-[tab-style=progress]/wrapper:group-data-[hide-labels=true]/wrapper:mb-$spacing(3,*)
33
33
` ,
34
34
tab : `
35
35
group/tab
36
36
37
37
${ "" /** tab-style tabs */ }
38
- group-data-[tab-style=" tab" ]/wrapper:relative
39
- group-data-[tab-style=" tab" ]/wrapper:flex
40
- group-data-[tab-style=" tab" ]/wrapper:grow
41
- group-data-[tab-style=" tab" ]/wrapper:text-$scale(-1,*)
42
- group-data-[tab-style=" tab" ]/wrapper:items-center
43
- group-data-[tab-style=" tab" ]/wrapper:justify-center
44
- group-data-[tab-style=" tab" ]/wrapper:cursor-pointer
45
- group-data-[tab-style=" tab" ]/wrapper:text-$colorTemperature-700
46
- group-data-[tab-style=" tab" ]/wrapper:bg-$colorTemperature-100
47
- group-data-[tab-style=" tab" ]/wrapper:py-$spacing(3,*)
48
- group-data-[tab-style=" tab" ]/wrapper:px-$spacing(4,*)
49
- group-data-[tab-style=" tab" ]/wrapper:border-r
50
- group-data-[tab-style=" tab" ]/wrapper:border-b
51
- group-data-[tab-style=" tab" ]/wrapper:border-$colorTemperature-$borderShadeLightMode(-1,*)
52
- group-data-[tab-style=" tab" ]/wrapper:last:border-r-0
53
- group-data-[tab-style=" tab" ]/wrapper:shadow-[inset_0_-0.5em_0.5em_-0.5em_rgba(0,0,0,0.1)]
54
- group-data-[tab-style=" tab" ]/wrapper:data-[active=" true" ]:bg-white
55
- group-data-[tab-style=" tab" ]/wrapper:data-[active=" true" ]:font-bold
56
- group-data-[tab-style=" tab" ]/wrapper:data-[active=" true" ]:border-b-white
57
- group-data-[tab-style=" tab" ]/wrapper:data-[active=" true" ]:z-10
58
- group-data-[tab-style=" tab" ]/wrapper:data-[active=" true" ]:shadow-[0_0_0.5em_0_rgba(0,0,0,0.1)]
59
-
60
- dark:group-data-[tab-style=" tab" ]/wrapper:text-$colorTemperature-300
61
- dark:group-data-[tab-style=" tab" ]/wrapper:bg-$colorTemperature-950/20
62
- dark:group-data-[tab-style=" tab" ]/wrapper:data-[active=" true" ]:bg-transparent
63
- dark:group-data-[tab-style=" tab" ]/wrapper:data-[active=" true" ]:border-b-transparent
64
- dark:group-data-[tab-style=" tab" ]/wrapper:border-$colorTemperature-$borderShadeDarkMode(1,200,800)
38
+ group-data-[tab-style=tab]/wrapper:relative
39
+ group-data-[tab-style=tab]/wrapper:flex
40
+ group-data-[tab-style=tab]/wrapper:grow
41
+ group-data-[tab-style=tab]/wrapper:text-$scale(-1,*)
42
+ group-data-[tab-style=tab]/wrapper:items-center
43
+ group-data-[tab-style=tab]/wrapper:justify-center
44
+ group-data-[tab-style=tab]/wrapper:cursor-pointer
45
+ group-data-[tab-style=tab]/wrapper:text-$colorTemperature-700
46
+ group-data-[tab-style=tab]/wrapper:bg-$colorTemperature-100
47
+ group-data-[tab-style=tab]/wrapper:py-$spacing(3,*)
48
+ group-data-[tab-style=tab]/wrapper:px-$spacing(4,*)
49
+ group-data-[tab-style=tab]/wrapper:border-r
50
+ group-data-[tab-style=tab]/wrapper:border-b
51
+ group-data-[tab-style=tab]/wrapper:border-$colorTemperature-$borderShadeLightMode(-1,*)
52
+ group-data-[tab-style=tab]/wrapper:last:border-r-0
53
+ group-data-[tab-style=tab]/wrapper:shadow-[inset_0_-0.5em_0.5em_-0.5em_rgba(0,0,0,0.1)]
54
+ group-data-[tab-style=tab]/wrapper:data-[active=true]:bg-white
55
+ group-data-[tab-style=tab]/wrapper:data-[active=true]:font-bold
56
+ group-data-[tab-style=tab]/wrapper:data-[active=true]:border-b-white
57
+ group-data-[tab-style=tab]/wrapper:data-[active=true]:z-10
58
+ group-data-[tab-style=tab]/wrapper:data-[active=true]:shadow-[0_0_0.5em_0_rgba(0,0,0,0.1)]
59
+
60
+ dark:group-data-[tab-style=tab]/wrapper:text-$colorTemperature-300
61
+ dark:group-data-[tab-style=tab]/wrapper:bg-$colorTemperature-950/20
62
+ dark:group-data-[tab-style=tab]/wrapper:data-[active=true]:bg-transparent
63
+ dark:group-data-[tab-style=tab]/wrapper:data-[active=true]:border-b-transparent
64
+ dark:group-data-[tab-style=tab]/wrapper:border-$colorTemperature-$borderShadeDarkMode(1,200,800)
65
65
66
66
${ "" /** progress-style tabs */ }
67
- group-data-[tab-style=" progress" ]/wrapper:flex
68
- group-data-[tab-style=" progress" ]/wrapper:flex-col
69
- group-data-[tab-style=" progress" ]/wrapper:items-center
70
- group-data-[tab-style=" progress" ]/wrapper:grow
71
- group-data-[tab-style=" progress" ]/wrapper:shrink-0
72
- group-data-[tab-style=" progress" ]/wrapper:relative
73
-
74
- group-data-[tab-style=" progress" ]/wrapper:before:block
75
- group-data-[tab-style=" progress" ]/wrapper:before:text-$scale(-1,*)
76
- group-data-[tab-style=" progress" ]/wrapper:before:w-[1.25rem]
77
- group-data-[tab-style=" progress" ]/wrapper:before:h-[1.25rem]
78
- group-data-[tab-style=" progress" ]/wrapper:before:border-4
79
- group-data-[tab-style=" progress" ]/wrapper:before:border-$colorTemperature-$borderShadeLightMode(-1,300,500)
80
- group-data-[tab-style=" progress" ]/wrapper:before:rounded-full
81
- group-data-[tab-style=" progress" ]/wrapper:before:bg-white
82
- group-data-[tab-style=" progress" ]/wrapper:before:z-10
83
-
84
- dark:group-data-[tab-style=" progress" ]/wrapper:before:border-$colorTemperature-$borderShadeDarkMode(1,400,800)
85
- dark:group-data-[tab-style=" progress" ]/wrapper:before:bg-$colorTemperature-950
86
-
87
- group-data-[tab-style=" progress" ]/wrapper:after:block
88
- group-data-[tab-style=" progress" ]/wrapper:after:h-1
89
- group-data-[tab-style=" progress" ]/wrapper:after:w-full
90
- group-data-[tab-style=" progress" ]/wrapper:after:absolute
91
- group-data-[tab-style=" progress" ]/wrapper:after:top-[0.5em]
92
- group-data-[tab-style=" progress" ]/wrapper:after:left-[calc(50%+0.5em)]
93
- group-data-[tab-style=" progress" ]/wrapper:after:bg-$colorTemperature-$borderShadeLightMode(-1,300,500)
94
- group-data-[tab-style=" progress" ]/wrapper:data-[valid=" true" ]:data-[visited=" true" ]:after:bg-$accentColor-$baseColorShade
95
- group-data-[tab-style=" progress" ]/wrapper:last:after:hidden
96
-
97
- dark:group-data-[tab-style=" progress" ]/wrapper:after:bg-$colorTemperature-$borderShadeDarkMode(1,400,800)
98
- dark:group-data-[tab-style=" progress" ]/wrapper:data-[valid=" true" ]:data-[visited=" true" ]:after:bg-$accentColor-$baseColorShade
67
+ group-data-[tab-style=progress]/wrapper:flex
68
+ group-data-[tab-style=progress]/wrapper:flex-col
69
+ group-data-[tab-style=progress]/wrapper:items-center
70
+ group-data-[tab-style=progress]/wrapper:grow
71
+ group-data-[tab-style=progress]/wrapper:shrink-0
72
+ group-data-[tab-style=progress]/wrapper:relative
73
+
74
+ group-data-[tab-style=progress]/wrapper:before:block
75
+ group-data-[tab-style=progress]/wrapper:before:text-$scale(-1,*)
76
+ group-data-[tab-style=progress]/wrapper:before:w-[1.25rem]
77
+ group-data-[tab-style=progress]/wrapper:before:h-[1.25rem]
78
+ group-data-[tab-style=progress]/wrapper:before:border-4
79
+ group-data-[tab-style=progress]/wrapper:before:border-$colorTemperature-$borderShadeLightMode(-1,300,500)
80
+ group-data-[tab-style=progress]/wrapper:before:rounded-full
81
+ group-data-[tab-style=progress]/wrapper:before:bg-white
82
+ group-data-[tab-style=progress]/wrapper:before:z-10
83
+
84
+ dark:group-data-[tab-style=progress]/wrapper:before:border-$colorTemperature-$borderShadeDarkMode(1,400,800)
85
+ dark:group-data-[tab-style=progress]/wrapper:before:bg-$colorTemperature-950
86
+
87
+ group-data-[tab-style=progress]/wrapper:after:block
88
+ group-data-[tab-style=progress]/wrapper:after:h-1
89
+ group-data-[tab-style=progress]/wrapper:after:w-full
90
+ group-data-[tab-style=progress]/wrapper:after:absolute
91
+ group-data-[tab-style=progress]/wrapper:after:top-[0.5em]
92
+ group-data-[tab-style=progress]/wrapper:after:left-[calc(50%+0.5em)]
93
+ group-data-[tab-style=progress]/wrapper:after:bg-$colorTemperature-$borderShadeLightMode(-1,300,500)
94
+ group-data-[tab-style=progress]/wrapper:data-[valid=true]:data-[visited=true]:after:bg-$accentColor-$baseColorShade
95
+ group-data-[tab-style=progress]/wrapper:last:after:hidden
96
+
97
+ dark:group-data-[tab-style=progress]/wrapper:after:bg-$colorTemperature-$borderShadeDarkMode(1,400,800)
98
+ dark:group-data-[tab-style=progress]/wrapper:data-[valid=true]:data-[visited=true]:after:bg-$accentColor-$baseColorShade
99
99
` ,
100
100
tabLabel : `
101
101
${ "" /** progress-style tabs */ }
102
- group-data-[tab-style=" progress" ]/wrapper:absolute
103
- group-data-[tab-style=" progress" ]/wrapper:text-$colorTemperature-800
104
- group-data-[tab-style=" progress" ]/wrapper:top-full
105
- group-data-[tab-style=" progress" ]/wrapper:w-full
106
- group-data-[tab-style=" progress" ]/wrapper:whitespace-nowrap
107
- group-data-[tab-style=" progress" ]/wrapper:text-$scale(-2,*)
108
-
109
- dark:group-data-[tab-style=" progress" ]/wrapper:text-$colorTemperature-300
102
+ group-data-[tab-style=progress]/wrapper:absolute
103
+ group-data-[tab-style=progress]/wrapper:text-$colorTemperature-800
104
+ group-data-[tab-style=progress]/wrapper:top-full
105
+ group-data-[tab-style=progress]/wrapper:w-full
106
+ group-data-[tab-style=progress]/wrapper:whitespace-nowrap
107
+ group-data-[tab-style=progress]/wrapper:text-$scale(-2,*)
108
+
109
+ dark:group-data-[tab-style=progress]/wrapper:text-$colorTemperature-300
110
110
` ,
111
111
badge : `
112
112
bg-red-$baseColorShade
@@ -120,21 +120,21 @@ export const multiStep = {
120
120
[line-height:1.25rem]
121
121
text-white
122
122
rounded-full
123
- group-data-[valid=" true" ]/tab:bg-$accentColor-$baseColorShade
123
+ group-data-[valid=true]/tab:bg-$accentColor-$baseColorShade
124
124
125
- group-data-[tab-style=" tab" ]/wrapper:text-[0.66rem]
126
- group-data-[tab-style=" tab" ]/wrapper:p-1.5
127
- group-data-[tab-style=" tab" ]/wrapper:w-5
128
- group-data-[tab-style=" tab" ]/wrapper:h-5
129
- group-data-[tab-style=" tab" ]/wrapper:top-$spacing(-1,*)
130
- group-data-[tab-style=" tab" ]/wrapper:right-$spacing(-1,*)
131
-
132
- group-data-[tab-style=" progress" ]/wrapper:w-[1.25rem]
133
- group-data-[tab-style=" progress" ]/wrapper:h-[1.25rem]
134
- group-data-[tab-style=" progress" ]/wrapper:p-1
135
- group-data-[tab-style=" progress" ]/wrapper:text-[10px]
136
- group-data-[tab-style=" progress" ]/wrapper:[line-height:0]
137
- group-data-[tab-style=" progress" ]/wrapper:z-10
125
+ group-data-[tab-style=tab]/wrapper:text-[0.66rem]
126
+ group-data-[tab-style=tab]/wrapper:p-1.5
127
+ group-data-[tab-style=tab]/wrapper:w-5
128
+ group-data-[tab-style=tab]/wrapper:h-5
129
+ group-data-[tab-style=tab]/wrapper:top-$spacing(-1,*)
130
+ group-data-[tab-style=tab]/wrapper:right-$spacing(-1,*)
131
+
132
+ group-data-[tab-style=progress]/wrapper:w-[1.25rem]
133
+ group-data-[tab-style=progress]/wrapper:h-[1.25rem]
134
+ group-data-[tab-style=progress]/wrapper:p-1
135
+ group-data-[tab-style=progress]/wrapper:text-[10px]
136
+ group-data-[tab-style=progress]/wrapper:[line-height:0]
137
+ group-data-[tab-style=progress]/wrapper:z-10
138
138
` ,
139
139
validStepIcon : `
140
140
w-full
@@ -153,11 +153,11 @@ export const multiStep = {
153
153
dark:bg-transparent
154
154
dark:border-$colorTemperature-$borderShadeDarkMode(1,200,800)
155
155
156
- group-data-[tab-style=" tab" ]/wrapper:border-t-0
157
- group-data-[tab-style=" tab" ]/wrapper:rounded-tl-none
158
- group-data-[tab-style=" tab" ]/wrapper:rounded-tr-none
156
+ group-data-[tab-style=tab]/wrapper:border-t-0
157
+ group-data-[tab-style=tab]/wrapper:rounded-tl-none
158
+ group-data-[tab-style=tab]/wrapper:rounded-tr-none
159
159
160
- group-data-[tab-style=" progress" ]/wrapper:$inputShadow
160
+ group-data-[tab-style=progress]/wrapper:$inputShadow
161
161
162
162
${ "" /** Allow child inputs to be full width */ }
163
163
[&_[data-type]]:max-w-none
0 commit comments