@jk-core/components 0.1.0 → 0.1.2

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.
Files changed (14) hide show
  1. package/dist/Calendar/components/DayTile/index.d.ts +3 -1
  2. package/dist/Calendar/index.d.ts +2 -1
  3. package/dist/index.js +641 -557
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.umd.cjs +11 -19
  6. package/dist/index.umd.cjs.map +1 -1
  7. package/package.json +5 -6
  8. package/dist/main.d.ts +0 -1
  9. package/dist/style.css +0 -401
  10. package/dist/style.css.map +0 -1
  11. package/src/Calendar/scss/_calendar.scss +0 -137
  12. package/src/Calendar/scss/_tile.scss +0 -214
  13. package/src/Calendar/scss/_variables.scss +0 -91
  14. package/src/Calendar/scss/main.scss +0 -3
package/dist/style.css DELETED
@@ -1,401 +0,0 @@
1
- :root {
2
- --white: #ffffff;
3
- --black: #000000;
4
- --P-5: #eff5ff;
5
- --P-10: #d3e1fb;
6
- --P-20: #a7c4f7;
7
- --P-30: #7ca6f3;
8
- --P-40: #5089ef;
9
- --P-50: #246beb;
10
- --P-60: #1d56bc;
11
- --P-70: #16408d;
12
- --P-90: #07152f;
13
- --P-100: #000000;
14
- --S-5: #edf1f5;
15
- --S-10: #cdd7e4;
16
- --S-20: #b4c4d6;
17
- --S-30: #99b0cb;
18
- --S-40: #2a5c96;
19
- --S-50: #003675;
20
- --S-60: #002b5e;
21
- --S-70: #002036;
22
- --S-80: #00162f;
23
- --S-90: #000b17;
24
- --G-5: #f8f8f8;
25
- --G-10: #f0f0f0;
26
- --G-20: #e4e4e4;
27
- --G-30: #d8d8d8;
28
- --G-40: #c6c6c6;
29
- --G-50: #8e8e8e;
30
- --G-60: #717171;
31
- --G-70: #555555;
32
- --G-80: #2d2d2d;
33
- --G-90: #1d1d1d;
34
- --Point-5: #fdf2f3;
35
- --Point-10: #f8d6d8;
36
- --Point-20: #f5a3a8;
37
- --Point-30: #f1747c;
38
- --Point-40: #ec4651;
39
- --Point-50: #e71825;
40
- --Point-60: #b9131e;
41
- --Point-70: #8b0e16;
42
- --Point-80: #5c0a0f;
43
- --Point-90: #2e0507;
44
- --Warning-5: #fff8e9;
45
- --Warning-10: #ffeac1;
46
- --Warning-20: #ffe2a7;
47
- --Warning-30: #ffd47c;
48
- --Warning-40: #ffc550;
49
- --Warning-50: #ffb724;
50
- --Warning-60: #98690a;
51
- --Warning-70: #66490e;
52
- --Warning-80: #4d370b;
53
- --Warning-90: #332507;
54
- --Success-5: #eef7f0;
55
- --Success-10: #cee9d4;
56
- --Success-20: #b2dcbb;
57
- --Success-30: #8cca99;
58
- --Success-40: #33a14b;
59
- --Success-50: #008a1e;
60
- --Success-60: #006e18;
61
- --Success-70: #005312;
62
- --Success-80: #00370c;
63
- --Success-90: #002207;
64
- --Info-5: #e9f0ff;
65
- --Info-10: #d4e1ff;
66
- --Info-20: #a9c3ff;
67
- --Info-30: #7da4ff;
68
- --Info-40: #5286ff;
69
- --Info-50: #2768ff;
70
- --Info-60: #1f53cc;
71
- --Info-70: #173e99;
72
- --Info-80: #0c1f4d;
73
- --Info-90: #040a1a;
74
- --Red: #e40000;
75
- --Red2: #ffe4e4;
76
- --Green: #2fb400;
77
- --Green-2: #d7ffe0;
78
- --Orange: #ff8800;
79
- --Orange-5: #ffead1;
80
- --Orange-10: #ffdacc;
81
- --Orange-30: #ff8f66;
82
- --Orange-40: #ff6a33;
83
- --Orange-50: #ff4500;
84
- --Orange-60: #d53209;
85
- --Orange-70: #992900;
86
- --Orange-80: #661c00;
87
- --Orange-90: #330e00;
88
- --Modal-Shadow: #0000005a;
89
- --Modal-Background: #6666663a;
90
- --Calendar-Background: #ffffff;
91
- }
92
-
93
- button {
94
- border: none;
95
- background-color: transparent;
96
- user-select: none;
97
- -webkit-user-select: none;
98
- -moz-user-select: none;
99
- cursor: pointer;
100
- }
101
-
102
- .calendar {
103
- width: 100%;
104
- min-width: 300px;
105
- border: 1px solid var(--G-30);
106
- border-radius: 10px;
107
- overflow: hidden;
108
- color: var(--G-80);
109
- background-color: var(--white);
110
- }
111
- .calendar__close {
112
- display: flex;
113
- justify-content: flex-end;
114
- align-items: center;
115
- padding: 7px 10px 7px 0;
116
- }
117
- .calendar__close svg {
118
- width: 18px;
119
- height: 18px;
120
- cursor: pointer;
121
- }
122
-
123
- .view {
124
- position: relative;
125
- margin: 0 auto;
126
- width: 90%;
127
- display: flex;
128
- justify-content: space-between;
129
- align-items: center;
130
- background-color: #f3f4f8;
131
- border-radius: 10px;
132
- }
133
- .view__block {
134
- position: absolute;
135
- background-color: #fff;
136
- left: 0;
137
- height: 100%;
138
- border: 2px solid var(--G-30);
139
- width: 33.3%;
140
- border-radius: 10px;
141
- transition: 0.3s;
142
- }
143
- .view__block--second {
144
- left: 33%;
145
- }
146
- .view__block--last {
147
- left: 66.6%;
148
- }
149
- .view__selector {
150
- position: relative;
151
- height: 40px;
152
- flex: 1 0;
153
- display: flex;
154
- align-items: center;
155
- justify-content: center;
156
- color: var(--G-60);
157
- font-size: 1em;
158
- font-weight: 400;
159
- }
160
- .view__selector--selected {
161
- color: var(--G-80);
162
- font-size: 1em;
163
- font-weight: 600;
164
- }
165
-
166
- .nav {
167
- height: 60px;
168
- display: flex;
169
- justify-content: space-between;
170
- align-items: center;
171
- padding: 0 5px;
172
- border-bottom: 1px solid var(--G-30);
173
- font-size: 1.3em;
174
- font-weight: 400;
175
- }
176
- .nav__button {
177
- display: flex;
178
- align-items: center;
179
- justify-content: center;
180
- width: 40px;
181
- height: 40px;
182
- padding: 10px;
183
- border-radius: 100%;
184
- }
185
- .nav__button:active {
186
- background-color: var(--G-30);
187
- }
188
- .nav__button:disabled {
189
- cursor: not-allowed;
190
- fill: var(--G-40);
191
- background-color: transparent;
192
- }
193
- .nav__label {
194
- flex: 1 0;
195
- display: flex;
196
- align-items: center;
197
- justify-content: space-around;
198
- font-size: 1.1em;
199
- font-weight: 400;
200
- }
201
- .nav__label--date {
202
- display: flex;
203
- align-items: center;
204
- justify-content: center;
205
- border-radius: 5px;
206
- padding: 5px 10px;
207
- font-weight: 400;
208
- }
209
- .nav__label--date svg {
210
- width: 15px;
211
- height: 15px;
212
- }
213
- .nav__label--date-selected {
214
- background-color: var(--S-10);
215
- }
216
-
217
- .day-tile {
218
- min-height: 310px;
219
- padding: 5px;
220
- background-color: var(--white);
221
- }
222
- .day-tile__tile {
223
- display: flex;
224
- flex-direction: column;
225
- justify-content: space-between;
226
- gap: 5px;
227
- }
228
- .day-tile__weeks {
229
- display: flex;
230
- justify-content: space-between;
231
- font-weight: 400;
232
- font-size: 1em;
233
- }
234
- .day-tile__weeks--date {
235
- flex: 1 0;
236
- display: flex;
237
- justify-content: center;
238
- align-items: center;
239
- min-width: 40px;
240
- padding: 5px 0;
241
- }
242
- .day-tile__week {
243
- display: flex;
244
- justify-content: space-between;
245
- }
246
- .day-tile__day {
247
- display: flex;
248
- justify-content: center;
249
- align-items: center;
250
- flex-direction: column;
251
- width: 100%;
252
- min-width: 40px;
253
- min-height: 40px;
254
- border-radius: 40px;
255
- padding: 5px;
256
- border: none;
257
- font-weight: 400;
258
- font-size: 1em;
259
- }
260
- @media (min-width: 1396px) {
261
- .day-tile__day:hover {
262
- background-color: var(--G-5);
263
- }
264
- }
265
- .day-tile__day:active {
266
- background-color: var(--G-10);
267
- }
268
- .day-tile__day--today {
269
- color: var(--P-50);
270
- font-weight: 600;
271
- }
272
- .day-tile__day--selected {
273
- background-color: var(--P-50) !important;
274
- color: var(--white) !important;
275
- font-weight: 600;
276
- }
277
- .day-tile__day--before {
278
- color: var(--G-40);
279
- }
280
- .day-tile__day--tile {
281
- border-radius: 10px;
282
- gap: 5px;
283
- }
284
-
285
- .month-tile {
286
- min-height: 310px;
287
- padding: 5px;
288
- background-color: var(--white);
289
- display: grid;
290
- grid-template-columns: repeat(3, 1fr);
291
- grid-template-rows: repeat(4, 1fr);
292
- gap: 5px;
293
- }
294
- .month-tile__month {
295
- display: flex;
296
- flex-direction: column;
297
- justify-content: center;
298
- align-items: center;
299
- padding: 5px;
300
- border-radius: 10px;
301
- }
302
- .month-tile__month svg {
303
- width: 15px;
304
- height: 15px;
305
- cursor: pointer;
306
- }
307
- @media (min-width: 1396px) {
308
- .month-tile__month:hover {
309
- background-color: var(--G-5);
310
- }
311
- }
312
- .month-tile__month:active {
313
- background-color: var(--G-10);
314
- }
315
- .month-tile__month--selected {
316
- background-color: var(--P-50) !important;
317
- color: var(--white) !important;
318
- }
319
- .month-tile__month--today {
320
- color: var(--P-50);
321
- font-weight: 600;
322
- }
323
- .month-tile__month--tile {
324
- justify-content: flex-start;
325
- gap: 5px;
326
- }
327
-
328
- .year-tile {
329
- min-height: 310px;
330
- padding: 5px;
331
- background-color: var(--white);
332
- position: relative;
333
- height: 310px;
334
- display: flex;
335
- flex-direction: column;
336
- align-items: center;
337
- overflow: auto;
338
- gap: 10px;
339
- }
340
- .year-tile::-webkit-scrollbar {
341
- display: none;
342
- }
343
- .year-tile__blank {
344
- height: calc(50% - 40px);
345
- flex-shrink: 0;
346
- }
347
- .year-tile__blank:last-child {
348
- height: 50%;
349
- }
350
- .year-tile__year {
351
- min-width: 50%;
352
- display: flex;
353
- flex-direction: column;
354
- align-items: center;
355
- justify-content: center;
356
- min-height: 40px;
357
- border-radius: 6px;
358
- flex-shrink: 0;
359
- overflow: hidden;
360
- font-weight: 400;
361
- font-size: 1.2em;
362
- }
363
- @media (min-width: 1396px) {
364
- .year-tile__year:hover {
365
- background-color: var(--P-5);
366
- }
367
- }
368
- .year-tile__year:active {
369
- background-color: var(--P-10);
370
- }
371
- .year-tile__year--border {
372
- border: 1px solid var(--G-30);
373
- background-color: var(--P-5);
374
- }
375
- @media (min-width: 1396px) {
376
- .year-tile__year--border:hover {
377
- background-color: var(--P-10);
378
- }
379
- }
380
- .year-tile__year--year {
381
- height: 40px;
382
- display: flex;
383
- align-items: center;
384
- justify-content: center;
385
- }
386
- .year-tile__year--selected {
387
- color: var(--white);
388
- background-color: var(--P-50) !important;
389
- }
390
- .year-tile__year--tile {
391
- display: flex;
392
- align-items: center;
393
- justify-content: center;
394
- min-height: 40px;
395
- color: var(--G-80);
396
- width: 100%;
397
- background-color: var(--white);
398
- border-top: var(--P-50);
399
- }
400
-
401
- /*# sourceMappingURL=style.css.map */
package/dist/style.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sourceRoot":"","sources":["../src/Calendar/scss/_variables.scss","../src/Calendar/scss/_calendar.scss","../src/Calendar/scss/_tile.scss","../src/styles/mediaQuery.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;ACzFF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;EACA;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;;;ACnIN;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAIJ;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACzCF;ED2CE;IAEI;;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;AC/FJ;EDkGE;IAEI;;;AAIJ;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;;;AAKN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ACjKF;EDmKE;IAEI;;;AAIJ;EACE;;AAGF;EACE;EACA;;AC/KJ;EDiLI;IAEI;;;AAKN;EACE;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA","file":"style.css"}
package/src/Calendar/scss/_calendar.scss DELETED
@@ -1,137 +0,0 @@
1
- button {
2
- border: none;
3
- background-color: transparent;
4
- user-select: none;
5
- -webkit-user-select: none;
6
- -moz-user-select: none;
7
- cursor: pointer;
8
- }
9
-
10
- .calendar {
11
- width: 100%;
12
- min-width: 300px;
13
- border: 1px solid var(--G-30);
14
- border-radius: 10px;
15
- overflow: hidden;
16
- color: var(--G-80);
17
- background-color: var(--white);
18
-
19
- &__close {
20
- display: flex;
21
- justify-content: flex-end;
22
- align-items: center;
23
- padding: 7px 10px 7px 0;
24
-
25
- svg {
26
- width: 18px;
27
- height: 18px;
28
- cursor: pointer;
29
- }
30
- }
31
- }
32
-
33
- .view {
34
- position: relative;
35
- margin: 0 auto;
36
- width: 90%;
37
- display: flex;
38
- justify-content: space-between;
39
- align-items: center;
40
- background-color: #f3f4f8;
41
- border-radius: 10px;
42
-
43
- &__block {
44
- position: absolute;
45
- background-color: #fff;
46
- left: 0;
47
- height: 100%;
48
- border: 2px solid var(--G-30);
49
- width: 33.3%;
50
- border-radius: 10px;
51
- transition: 0.3s;
52
-
53
- &--second {
54
- left: 33%;
55
- }
56
-
57
- &--last {
58
- left: 66.6%;
59
- }
60
- }
61
-
62
- &__selector {
63
- position: relative;
64
- height: 40px;
65
- flex: 1 0;
66
- display: flex;
67
- align-items: center;
68
- justify-content: center;
69
- color: var(--G-60);
70
- font-size: 1em;
71
- font-weight: 400;
72
-
73
- &--selected {
74
- color: var(--G-80);
75
- font-size: 1em;
76
- font-weight: 600;
77
- }
78
- }
79
- }
80
-
81
- .nav {
82
- height: 60px;
83
- display: flex;
84
- justify-content: space-between;
85
- align-items: center;
86
- padding: 0 5px;
87
- border-bottom: 1px solid var(--G-30);
88
- font-size: 1.3em;
89
- font-weight: 400;
90
-
91
- &__button {
92
- display: flex;
93
- align-items: center;
94
- justify-content: center;
95
- width: 40px;
96
- height: 40px;
97
- padding: 10px;
98
- border-radius: 100%;
99
-
100
- &:active {
101
- background-color: var(--G-30);
102
- }
103
-
104
- &:disabled {
105
- cursor: not-allowed;
106
- fill: var(--G-40);
107
- background-color: transparent;
108
- }
109
- }
110
-
111
- &__label {
112
- flex: 1 0;
113
- display: flex;
114
- align-items: center;
115
- justify-content: space-around;
116
- font-size: 1.1em;
117
- font-weight: 400;
118
-
119
- &--date {
120
- display: flex;
121
- align-items: center;
122
- justify-content: center;
123
- border-radius: 5px;
124
- padding: 5px 10px;
125
- font-weight: 400;
126
-
127
- svg {
128
- width: 15px;
129
- height: 15px;
130
- }
131
- }
132
-
133
- &--date-selected {
134
- background-color: var(--S-10);
135
- }
136
- }
137
- }