@chemllei0304/prisma 0.0.0-stage → 1.0.0

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 CHANGED
@@ -1,3 +0,0 @@
1
- # Temporary Holding Version
2
-
3
- This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
@@ -0,0 +1,23 @@
1
+ .border {
2
+ border: 0.5px solid;
3
+ }
4
+
5
+ .border-top {
6
+ border-top: 0.5px solid;
7
+ }
8
+
9
+ .border-bottom {
10
+ border-bottom: 0.5px solid;
11
+ }
12
+
13
+ .border-left {
14
+ border-left: 0.5px solid;
15
+ }
16
+
17
+ .border-right {
18
+ border-right: 0.5px solid;
19
+ }
20
+
21
+ .rounded {
22
+ border-radius: 5px;
23
+ }
@@ -0,0 +1,154 @@
1
+ .btn {
2
+ background-color: transparent;
3
+ color: var(--btn-color);
4
+ border: 0.5px solid var(--btn-color);
5
+ border-radius: 5px;
6
+ padding: 4px 20px;
7
+ letter-spacing: 2px;
8
+ transition: background-color 0.25s;
9
+ cursor: pointer;
10
+ }
11
+
12
+ .btn:hover,
13
+ .btn.active {
14
+ background-color: var(--btn-color);
15
+ color: var(--btn-hover-txt);
16
+ }
17
+
18
+ /* red */
19
+
20
+ .btn.red {
21
+ border-color: var(--red);
22
+ color: var(--red);
23
+ }
24
+
25
+ .btn.red:hover,
26
+ .btn.red.active {
27
+ background-color: var(--red);
28
+ color: var(--black);
29
+ }
30
+
31
+ /* orange */
32
+
33
+ .btn.orange {
34
+ border-color: var(--orange);
35
+ color: var(--orange);
36
+ }
37
+
38
+ .btn.orange:hover,
39
+ .btn.orange.active {
40
+ background-color: var(--orange);
41
+ color: var(--black);
42
+ }
43
+
44
+ /* yellow */
45
+
46
+ .btn.yellow {
47
+ border-color: var(--yellow);
48
+ color: var(--yellow);
49
+ }
50
+
51
+ .btn.yellow:hover,
52
+ .btn.yellow.active {
53
+ background-color: var(--yellow);
54
+ color: var(--black);
55
+ }
56
+
57
+ /* green */
58
+
59
+ .btn.green {
60
+ border-color: var(--green);
61
+ color: var(--green);
62
+ }
63
+
64
+ .btn.green:hover,
65
+ .btn.green.active {
66
+ background-color: var(--green);
67
+ color: var(--white);
68
+ }
69
+
70
+ /* blue */
71
+
72
+ .btn.blue {
73
+ border-color: var(--blue);
74
+ color: var(--blue);
75
+ }
76
+
77
+ .btn.blue:hover,
78
+ .btn.blue.active {
79
+ background-color: var(--blue);
80
+ color: var(--white);
81
+ }
82
+
83
+ /* purple */
84
+
85
+ .btn.purple {
86
+ border-color: var(--purple);
87
+ color: var(--purple);
88
+ }
89
+
90
+ .btn.purple:hover,
91
+ .btn.purple.active {
92
+ background-color: var(--purple);
93
+ color: var(--white);
94
+ }
95
+
96
+ /* pink */
97
+
98
+ .btn.pink {
99
+ border-color: var(--pink);
100
+ color: var(--pink);
101
+ }
102
+
103
+ .btn.pink:hover,
104
+ .btn.pink.active {
105
+ background-color: var(--pink);
106
+ color: var(--black);
107
+ }
108
+
109
+ .dropdown {
110
+ position: relative;
111
+ }
112
+
113
+ .dropdown-item {
114
+ cursor: pointer;
115
+ padding: 5px 15px;
116
+ letter-spacing: 1.5px;
117
+ }
118
+
119
+ .dropdown-item.active,
120
+ .dropdown-item:hover {
121
+ background-color: var(--btn-color);
122
+ color: var(--btn-hover-txt);
123
+ border-radius: 3px;
124
+ }
125
+
126
+ .dropdown-menu {
127
+ position: absolute;
128
+ display: none;
129
+ width: 200px;
130
+ border: 0.5px solid var(--primary-txt);
131
+ max-height: 100px;
132
+ overflow-y: auto;
133
+ border-radius: 5px;
134
+ padding: 4px;
135
+ margin: 1px;
136
+ z-index: 99;
137
+ background-color: var(--primary-bg);
138
+ }
139
+
140
+ .dropdown:hover .dropdown-menu {
141
+ display: block;
142
+ }
143
+
144
+ /* .dropdown :not(.dropdown) */
145
+
146
+ ::-webkit-scrollbar {
147
+ background-color: transparent;
148
+ width: 2px;
149
+ height: 2px;
150
+ }
151
+ ::-webkit-scrollbar-thumb {
152
+ background-color: var(--btn-color);
153
+ cursor: pointer;
154
+ }
package/css/card.css ADDED
@@ -0,0 +1,13 @@
1
+ .card {
2
+ padding: 5px 30px;
3
+ /* margin-bottom: 2px; */
4
+ }
5
+
6
+ .card:hover,
7
+ .card.active {
8
+ background-color: var(--btn-color);
9
+ color: var(--btn-hover-txt);
10
+ cursor: pointer;
11
+ border-radius: 5px;
12
+ font-weight: bold;
13
+ }
package/css/colors.css ADDED
@@ -0,0 +1,68 @@
1
+ :root,
2
+ html[data-theme="light"] {
3
+ --black: #252525;
4
+ --white: #cfc9c9;
5
+ --red: #fd4747;
6
+ --orange: #e08422;
7
+ --yellow: #fad816;
8
+ --green: #3c823c;
9
+ --blue: #3f3fd7;
10
+ --purple: #452060;
11
+ --pink: #b168b1;
12
+
13
+ --primary-bg: var(--white);
14
+ --primary-txt: var(--black);
15
+
16
+ --btn-color: var(--black);
17
+ --btn-hover-txt: var(--white);
18
+ }
19
+
20
+ html[data-theme="dark"] {
21
+ --primary-bg: var(--black);
22
+ --primary-txt: var(--white);
23
+
24
+ --btn-color: var(--white);
25
+ --btn-hover-txt: var(--black);
26
+ }
27
+
28
+ .bg-black {
29
+ background-color: var(--black);
30
+ }
31
+
32
+ .bg-white {
33
+ background-color: var(--white);
34
+ }
35
+
36
+ .bg-red {
37
+ background-color: var(--red);
38
+ color: var(--black);
39
+ }
40
+
41
+ .bg-orange {
42
+ background-color: var(--orange);
43
+ color: var(--black);
44
+ }
45
+
46
+ .bg-yellow {
47
+ background-color: var(--yellow);
48
+ color: var(--black);
49
+ }
50
+
51
+ .bg-green {
52
+ background-color: var(--green);
53
+ color: var(--white);
54
+ }
55
+
56
+ .bg-blue {
57
+ background-color: var(--blue);
58
+ color: var(--white);
59
+ }
60
+
61
+ .bg-purple {
62
+ background-color: var(--purple);
63
+ }
64
+
65
+ .bg-pink {
66
+ background-color: var(--pink);
67
+ color: var(--black);
68
+ }
package/css/font.css ADDED
@@ -0,0 +1,68 @@
1
+ .font-sm,
2
+ .font-sm * {
3
+ font-size: 0.75rem;
4
+ }
5
+
6
+ .font-lg,
7
+ .font-lg * {
8
+ font-size: 1.25rem;
9
+ }
10
+
11
+ .font-xl,
12
+ .font-xl * {
13
+ font-size: 1.75rem;
14
+ }
15
+
16
+ .font-black {
17
+ color: var(--black);
18
+ }
19
+
20
+ .font-white {
21
+ color: var(--white);
22
+ }
23
+
24
+ .font-red {
25
+ color: var(--red);
26
+ }
27
+
28
+ .font-orange {
29
+ color: var(--orange);
30
+ }
31
+
32
+ .font-yellow {
33
+ color: var(--yellow);
34
+ }
35
+
36
+ .font-green {
37
+ color: var(--green);
38
+ }
39
+
40
+ .font-blue {
41
+ color: var(--blue);
42
+ }
43
+
44
+ .font-purple {
45
+ color: var(--purple);
46
+ }
47
+
48
+ .font-pink {
49
+ color: var(--pink);
50
+ }
51
+
52
+ .italic {
53
+ font-style: italic;
54
+ }
55
+
56
+ .bold {
57
+ font-weight: bold;
58
+ }
59
+
60
+ .capitalize,
61
+ .capitalize * {
62
+ text-transform: capitalize;
63
+ }
64
+
65
+ .special,
66
+ .special * {
67
+ letter-spacing: 2px;
68
+ }
package/css/input.css ADDED
@@ -0,0 +1,15 @@
1
+ .input {
2
+ background-color: transparent;
3
+ color: var(--primary-txt);
4
+ border: 0.5px solid var(--primary-txt);
5
+ padding: 4px 10px;
6
+ border-radius: 5px;
7
+ outline: none;
8
+ }
9
+
10
+ ::placeholder {
11
+ letter-spacing: 2px;
12
+ opacity: 50%;
13
+ color: var(--primary-txt);
14
+ /* font-size: 0.9rem; */
15
+ }
package/css/layout.css ADDED
@@ -0,0 +1,74 @@
1
+ .flex {
2
+ display: flex;
3
+ }
4
+
5
+ .flex-col {
6
+ display: flex;
7
+ flex-direction: column;
8
+ }
9
+
10
+ .between {
11
+ justify-content: space-between;
12
+ }
13
+
14
+ .flex.center-y > * {
15
+ margin-block: auto;
16
+ }
17
+
18
+ .flex.center-x > * {
19
+ margin-inline: auto;
20
+ }
21
+
22
+ .w-25 {
23
+ width: 25%;
24
+ }
25
+
26
+ .w-33 {
27
+ width: 33.3%;
28
+ }
29
+
30
+ .w-50 {
31
+ width: 50%;
32
+ }
33
+
34
+ .w-67 {
35
+ width: 66.6%;
36
+ }
37
+
38
+ .w-75 {
39
+ width: 75%;
40
+ }
41
+
42
+ .w-100 {
43
+ width: 100%;
44
+ }
45
+
46
+ .h-25 {
47
+ height: 25vh;
48
+ overflow-y: auto;
49
+ }
50
+
51
+ .h-33 {
52
+ height: 33.3vh;
53
+ overflow-y: auto;
54
+ }
55
+
56
+ .h-50 {
57
+ height: 50vh;
58
+ overflow-y: auto;
59
+ }
60
+
61
+ .h-67 {
62
+ height: 66.6vh;
63
+ overflow-y: auto;
64
+ }
65
+
66
+ .h-75 {
67
+ height: 75vh;
68
+ overflow-y: auto;
69
+ }
70
+
71
+ .h-100 {
72
+ height: 100vh;
73
+ overflow-y: auto;
74
+ }
@@ -0,0 +1,313 @@
1
+ :root {
2
+ --space-1: 0.25rem;
3
+ --space-2: 0.5rem;
4
+ --space-3: 1rem;
5
+ --space-4: 1.5rem;
6
+ --space-5: 3rem;
7
+ }
8
+
9
+ /* gaps */
10
+
11
+ .gap-1 > * {
12
+ margin: var(--space-1);
13
+ }
14
+
15
+ .gap-2 > * {
16
+ margin: var(--space-2);
17
+ }
18
+
19
+ .gap-3 > * {
20
+ margin: var(--space-3);
21
+ }
22
+
23
+ .gap-4 > * {
24
+ margin: var(--space-4);
25
+ }
26
+
27
+ .gap-5 > * {
28
+ margin: var(--space-5);
29
+ }
30
+
31
+ /* margins */
32
+
33
+ .m-1 {
34
+ margin: var(--space-1);
35
+ }
36
+
37
+ .m-2 {
38
+ margin: var(--space-2);
39
+ }
40
+
41
+ .m-3 {
42
+ margin: var(--space-3);
43
+ }
44
+
45
+ .m-4 {
46
+ margin: var(--space-4);
47
+ }
48
+
49
+ .m-5 {
50
+ margin: var(--space-5);
51
+ }
52
+
53
+ .mx-1 {
54
+ margin-inline: var(--space-1);
55
+ }
56
+
57
+ .mx-2 {
58
+ margin-inline: var(--space-2);
59
+ }
60
+
61
+ .mx-3 {
62
+ margin-inline: var(--space-3);
63
+ }
64
+
65
+ .mx-4 {
66
+ margin-inline: var(--space-4);
67
+ }
68
+
69
+ .mx-5 {
70
+ margin-inline: var(--space-5);
71
+ }
72
+
73
+ .my-1 {
74
+ margin-block: var(--space-1);
75
+ }
76
+
77
+ .my-2 {
78
+ margin-block: var(--space-2);
79
+ }
80
+
81
+ .my-3 {
82
+ margin-block: var(--space-3);
83
+ }
84
+
85
+ .my-4 {
86
+ margin-block: var(--space-4);
87
+ }
88
+
89
+ .my-5 {
90
+ margin-block: var(--space-5);
91
+ }
92
+
93
+ .ms-1 {
94
+ margin-left: var(--space-1);
95
+ }
96
+
97
+ .ms-2 {
98
+ margin-left: var(--space-2);
99
+ }
100
+
101
+ .ms-3 {
102
+ margin-left: var(--space-3);
103
+ }
104
+
105
+ .ms-4 {
106
+ margin-left: var(--space-4);
107
+ }
108
+
109
+ .ms-5 {
110
+ margin-left: var(--space-5);
111
+ }
112
+
113
+ .me-1 {
114
+ margin-right: var(--space-1);
115
+ }
116
+
117
+ .me-2 {
118
+ margin-right: var(--space-2);
119
+ }
120
+
121
+ .me-3 {
122
+ margin-right: var(--space-3);
123
+ }
124
+
125
+ .me-4 {
126
+ margin-right: var(--space-4);
127
+ }
128
+
129
+ .me-5 {
130
+ margin-right: var(--space-5);
131
+ }
132
+
133
+ .mt-1 {
134
+ margin-top: var(--space-1);
135
+ }
136
+
137
+ .mt-2 {
138
+ margin-top: var(--space-2);
139
+ }
140
+
141
+ .mt-3 {
142
+ margin-top: var(--space-3);
143
+ }
144
+
145
+ .mt-4 {
146
+ margin-top: var(--space-4);
147
+ }
148
+
149
+ .mt-5 {
150
+ margin-top: var(--space-5);
151
+ }
152
+
153
+ .mb-1 {
154
+ margin-bottom: var(--space-1);
155
+ }
156
+
157
+ .mb-2 {
158
+ margin-bottom: var(--space-2);
159
+ }
160
+
161
+ .mb-3 {
162
+ margin-bottom: var(--space-3);
163
+ }
164
+
165
+ .mb-4 {
166
+ margin-bottom: var(--space-4);
167
+ }
168
+
169
+ .mb-5 {
170
+ margin-bottom: var(--space-5);
171
+ }
172
+
173
+ /* padding */
174
+
175
+ .p-1 {
176
+ padding: var(--space-1);
177
+ }
178
+
179
+ .p-2 {
180
+ padding: var(--space-2);
181
+ }
182
+
183
+ .p-3 {
184
+ padding: var(--space-3);
185
+ }
186
+
187
+ .p-4 {
188
+ padding: var(--space-4);
189
+ }
190
+
191
+ .p-5 {
192
+ padding: var(--space-5);
193
+ }
194
+
195
+ .px-1 {
196
+ padding-inline: var(--space-1);
197
+ }
198
+
199
+ .px-2 {
200
+ padding-inline: var(--space-2);
201
+ }
202
+
203
+ .px-3 {
204
+ padding-inline: var(--space-3);
205
+ }
206
+
207
+ .px-4 {
208
+ padding-inline: var(--space-4);
209
+ }
210
+
211
+ .px-5 {
212
+ padding-inline: var(--space-5);
213
+ }
214
+
215
+ .py-1 {
216
+ padding-block: var(--space-1);
217
+ }
218
+
219
+ .py-2 {
220
+ padding-block: var(--space-2);
221
+ }
222
+
223
+ .py-3 {
224
+ padding-block: var(--space-3);
225
+ }
226
+
227
+ .py-4 {
228
+ padding-block: var(--space-4);
229
+ }
230
+
231
+ .py-5 {
232
+ padding-block: var(--space-5);
233
+ }
234
+
235
+ .ps-1 {
236
+ padding-left: var(--space-1);
237
+ }
238
+
239
+ .ps-2 {
240
+ padding-left: var(--space-2);
241
+ }
242
+
243
+ .ps-3 {
244
+ padding-left: var(--space-3);
245
+ }
246
+
247
+ .ps-4 {
248
+ padding-left: var(--space-4);
249
+ }
250
+
251
+ .ps-5 {
252
+ padding-left: var(--space-5);
253
+ }
254
+
255
+ .pe-1 {
256
+ padding-right: var(--space-1);
257
+ }
258
+
259
+ .pe-2 {
260
+ padding-right: var(--space-2);
261
+ }
262
+
263
+ .pe-3 {
264
+ padding-right: var(--space-3);
265
+ }
266
+
267
+ .pe-4 {
268
+ padding-right: var(--space-4);
269
+ }
270
+
271
+ .pe-5 {
272
+ padding-right: var(--space-5);
273
+ }
274
+
275
+ .pt-1 {
276
+ padding-top: var(--space-1);
277
+ }
278
+
279
+ .pt-2 {
280
+ padding-top: var(--space-2);
281
+ }
282
+
283
+ .pt-3 {
284
+ padding-top: var(--space-3);
285
+ }
286
+
287
+ .pt-4 {
288
+ padding-top: var(--space-4);
289
+ }
290
+
291
+ .pt-5 {
292
+ padding-top: var(--space-5);
293
+ }
294
+
295
+ .pb-1 {
296
+ padding-bottom: var(--space-1);
297
+ }
298
+
299
+ .pb-2 {
300
+ padding-bottom: var(--space-2);
301
+ }
302
+
303
+ .pb-3 {
304
+ padding-bottom: var(--space-3);
305
+ }
306
+
307
+ .pb-4 {
308
+ padding-bottom: var(--space-4);
309
+ }
310
+
311
+ .pb-5 {
312
+ padding-bottom: var(--space-5);
313
+ }
package/index.css ADDED
@@ -0,0 +1,18 @@
1
+ @import "./css/colors.css";
2
+ @import "./css/borders.css";
3
+ @import "./css/buttons.css";
4
+ @import "./css/font.css";
5
+ @import "./css/layout.css";
6
+ @import "./css/spacing.css";
7
+ @import "./css/card.css";
8
+ @import "./css/input.css";
9
+
10
+ * {
11
+ font-family: "Arial";
12
+ font-size: 1rem;
13
+ }
14
+
15
+ body {
16
+ background-color: var(--primary-bg);
17
+ color: var(--primary-txt);
18
+ }
package/package.json CHANGED
@@ -1,6 +1,15 @@
1
1
  {
2
2
  "name": "@chemllei0304/prisma",
3
- "version": "0.0.0-stage",
4
- "stub": true,
5
- "description": "Temporary package placeholder for staged publishing"
6
- }
3
+ "version": "1.0.0",
4
+ "scripts": {
5
+ "test": "echo \"Error: no test specified\" && exit 1"
6
+ },
7
+ "files": [
8
+ "index.css",
9
+ "css/"
10
+ ],
11
+ "author": "",
12
+ "style": "./index.css",
13
+ "license": "ISC",
14
+ "description": ""
15
+ }