UNPKG

@hperchec/scorpion-ui-template-default

Version:

Scorpion UI - Default template

gitlab.com/hperchec/boilerplates/scorpion/lib/scorpion-ui-template-default

175 lines (173 loc) • 4.77 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
// Vue-tailwind component import { TDropdown } from 'vue-tailwind/dist/components' export default { component: TDropdown, props: { fixedClasses: { // button: 'flex items-center text-gray-200 block px-4 py-2 transition duration-100 ease-in-out border border-transparent shadow-sm focus:border-blue-500 focus:ring-2 focus:ring-blue-500 focus:outline-none focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-not-allowed', button: ` focus:border-none focus:ring-none focus:outline-none disabled:opacity-50 disabled:cursor-not-allowed `, wrapper: ` relative inline-flex flex-col `, dropdownWrapper: 'relative -top-1', dropdown: 'origin-top-left absolute top-0 w-auto mt-1 z-10', enterClass: 'opacity-0 scale-95', enterActiveClass: 'transition transform ease-in-out duration-100', enterToClass: 'opacity-100 scale-100', leaveClass: 'opacity-100 scale-100', leaveActiveClass: 'transition transform ease-in-out duration-100', leaveToClass: 'opacity-0 scale-95' }, classes: { button: 'hover:bg-@light-tertiary', dropdown: 'bg-transparent shadow-none' }, variants: { /** * Common variants */ primary: { button: ` w-full block px-4 py-1 rounded transition duration-200 ease-in-out hover:shadow focus:shadow @light:text-white @light:bg-@light-primary @light:hover:bg-@light-primary-400 @light:hover:text-white @light:focus:bg-@light-primary-400 @light:focus:text-white @dark:text-@dark-text-primary @dark:bg-@dark-primary @dark:hover:bg-@dark-primary-400 @dark:hover:text-@dark-text-primary @dark:focus:bg-@dark-primary-400 @dark:focus:text-@dark-text-primary `, dropdown: ` w-full flex flex-col rounded shadow overflow-hidden @dark:bg-@dark-primary @light:bg-@light-primary ` }, /** * 'light' theme variants */ alabaster: { button: ` w-full block px-4 py-1 rounded bg-@light-alabaster text-gray-500 transition duration-200 ease-in-out hover:bg-@light-primary hover:text-@light-text-primary hover:shadow focus:bg-@light-primary focus:text-@light-text-primary focus:shadow `, dropdown: ` w-full flex flex-col rounded bg-@light-alabaster shadow overflow-hidden ` }, 'white-smoke': { button: ` w-full block px-4 py-1 rounded bg-@light-white-smoke text-gray-500 transition duration-200 ease-in-out hover:bg-@light-primary hover:text-@light-text-primary hover:shadow focus:bg-@light-primary focus:text-@light-text-primary focus:shadow `, dropdown: ` w-full flex flex-col rounded bg-@light-white-smoke shadow overflow-hidden ` }, /** * 'dark' theme variants */ tuna: { button: ` w-full block px-4 py-1 rounded bg-@dark-tuna text-gray-500 transition duration-200 ease-in-out hover:bg-@dark-primary hover:text-@dark-text-primary hover:shadow focus:bg-@dark-primary focus:text-@dark-text-primary focus:shadow `, dropdown: ` w-full flex flex-col rounded bg-@dark-tuna shadow overflow-hidden ` }, 'dark-jungle': { button: ` w-full block px-4 py-1 rounded bg-@dark-dark-jungle text-gray-500 transition duration-200 ease-in-out hover:bg-@dark-primary hover:text-@dark-text-primary hover:shadow focus:bg-@dark-primary focus:text-@dark-text-primary focus:shadow `, dropdown: ` w-full flex flex-col rounded bg-@dark-dark-jungle shadow overflow-hidden ` } } } }