UNPKG

@hperchec/scorpion-ui-template-default

Version:

Scorpion UI - Default template

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

150 lines (148 loc) • 3.79 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
// Vue-tailwind component import { TButton } from 'vue-tailwind/dist/components' export default { component: TButton, props: { // Fixed fixedClasses: ` transition duration-200 ease-in-out focus:outline-none disabled:pointer-events-none `, // Default classes: ` text-white bg-@light-tertiary border border-transparent rounded-full px-4 md:px-8 py-2 hover:bg-@light-tertiary-400 hover:shadow focus:shadow disabled:text-gray-200 disabled:bg-@light-tertiary-@light `, // Variants variants: { /** * Common variants */ // 'tertiary' variant tertiary: ` border border-transparent px-8 py-2 rounded-full hover:shadow focus:shadow disabled:text-gray-200 @light:bg-@light-action @light:text-@light-text-primary @light:hover:bg-@light-action-400 @dark:bg-@dark-tertiary @dark:text-@dark-text-primary @dark:hover:bg-@dark-tertiary-400 `, // 'action' variant action: ` border border-transparent px-8 py-2 rounded-full hover:shadow focus:shadow disabled:text-gray-400 @light:bg-@light-action @light:text-white @light:hover:bg-@light-action-400 @dark:bg-@dark-action @dark:text-white @dark:hover:bg-@dark-action-400 `, // 'action-litle' variant 'action-litle': ` text-sm text-white bg-@light-action border border-transparent rounded-full px-4 py-1 hover:bg-@light-action-400 hover:shadow focus:shadow disabled:text-gray-200 disabled:bg-@light-tertiary-@light `, // 'error' variant error: ` text-white @light:bg-@light-error @dark:bg-@dark-error border border-transparent rounded-full px-4 md:px-8 py-2 hover:bg-@light-error-400 hover:shadow focus:shadow disabled:text-gray-200 disabled:bg-@light-tertiary-@light `, /** * 'light' theme variants */ // 'alabaster' variant alabaster: ` border border-transparent px-8 py-2 rounded-full bg-@light-alabaster text-@light-text-primary disabled:text-gray-200 hover:shadow hover:bg-@light-alabaster-400 focus:shadow focus:bg-@light-alabaster-400 `, // 'white-smoke' variant 'white-smoke': ` border border-transparent px-8 py-2 rounded-full bg-@light-white-smoke text-@light-text-primary disabled:text-gray-200 hover:shadow hover:bg-@light-white-smoke-400 focus:shadow focus:bg-@light-white-smoke-400 `, /** * 'dark' theme variants */ // 'tuna' variant tuna: ` border border-transparent px-8 py-2 rounded-full bg-@dark-tuna text-@dark-text-primary disabled:text-gray-200 hover:shadow hover:bg-@dark-tuna-400 focus:shadow focus:bg-@dark-tuna-400 `, // 'dark-jungle' variant 'dark-jungle': ` border border-transparent px-8 py-2 rounded-full bg-@dark-dark-jungle text-@dark-text-primary disabled:text-gray-200 hover:shadow hover:bg-@dark-dark-jungle-400 focus:shadow focus:bg-@dark-dark-jungle-400 ` } } }