@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/src/Calendar/scss/_tile.scss DELETED
@@ -1,214 +0,0 @@
1
- @use "../../styles/mediaQuery.scss" as media;
2
-
3
- .day-tile {
4
- min-height: 310px;
5
- padding: 5px;
6
- background-color: var(--white);
7
-
8
- &__tile {
9
- display: flex;
10
- flex-direction: column;
11
- justify-content: space-between;
12
- gap: 5px;
13
- }
14
-
15
- &__weeks {
16
- display: flex;
17
- justify-content: space-between;
18
- font-weight: 400;
19
- font-size: 1em;
20
-
21
- &--date {
22
- flex: 1 0;
23
- display: flex;
24
- justify-content: center;
25
- align-items: center;
26
- min-width: 40px;
27
- padding: 5px 0;
28
- }
29
- }
30
-
31
- &__week {
32
- display: flex;
33
- justify-content: space-between;
34
- }
35
-
36
- &__day {
37
- display: flex;
38
- justify-content: center;
39
- align-items: center;
40
- flex-direction: column;
41
- width: 100%;
42
- min-width: 40px;
43
- min-height: 40px;
44
- border-radius: 40px;
45
- padding: 5px;
46
- border: none;
47
- font-weight: 400;
48
- font-size: 1em;
49
-
50
- &:hover {
51
- @include media.pc {
52
- background-color: var(--G-5);
53
- }
54
- }
55
-
56
- &:active {
57
- background-color: var(--G-10);
58
- }
59
-
60
- &--today {
61
- color: var(--P-50);
62
- font-weight: 600;
63
- }
64
-
65
- &--selected {
66
- background-color: var(--P-50) !important;
67
- color: var(--white) !important;
68
- font-weight: 600;
69
- }
70
-
71
- &--before {
72
- color: var(--G-40);
73
- }
74
-
75
- &--tile {
76
- border-radius: 10px;
77
- gap: 5px;
78
- }
79
- }
80
- }
81
-
82
- .month-tile {
83
- min-height: 310px;
84
- padding: 5px;
85
- background-color: var(--white);
86
- display: grid;
87
- grid-template-columns: repeat(3, 1fr);
88
- grid-template-rows: repeat(4, 1fr);
89
- gap: 5px;
90
-
91
- &__month {
92
- display: flex;
93
- flex-direction: column;
94
- justify-content: center;
95
- align-items: center;
96
- padding: 5px;
97
- border-radius: 10px;
98
-
99
- svg {
100
- width: 15px;
101
- height: 15px;
102
- cursor: pointer;
103
- }
104
-
105
- &:hover {
106
- @include media.pc {
107
- background-color: var(--G-5);
108
- }
109
- }
110
-
111
- &:active {
112
- background-color: var(--G-10);
113
- }
114
-
115
- &--selected {
116
- background-color: var(--P-50) !important;
117
- color: var(--white) !important;
118
- }
119
-
120
- &--today {
121
- color: var(--P-50);
122
- font-weight: 600;
123
- }
124
-
125
- &--tile {
126
- justify-content: flex-start;
127
- gap: 5px;
128
- }
129
- }
130
- }
131
-
132
- .year-tile {
133
- min-height: 310px;
134
- padding: 5px;
135
- background-color: var(--white);
136
- position: relative;
137
- height: 310px;
138
- display: flex;
139
- flex-direction: column;
140
- align-items: center;
141
- overflow: auto;
142
- gap: 10px;
143
-
144
- &::-webkit-scrollbar {
145
- display: none;
146
- }
147
-
148
- &__blank {
149
- height: calc(50% - 40px);
150
- flex-shrink: 0;
151
-
152
- &:last-child {
153
- height: 50%;
154
- }
155
- }
156
-
157
- &__year {
158
- min-width: 50%;
159
- display: flex;
160
- flex-direction: column;
161
- align-items: center;
162
- justify-content: center;
163
- min-height: 40px;
164
- border-radius: 6px;
165
- flex-shrink: 0;
166
- overflow: hidden;
167
- font-weight: 400;
168
- font-size: 1.2em;
169
-
170
- &:hover {
171
- @include media.pc {
172
- background-color: var(--P-5);
173
- }
174
- }
175
-
176
- &:active {
177
- background-color: var(--P-10);
178
- }
179
-
180
- &--border {
181
- border: 1px solid var(--G-30);
182
- background-color: var(--P-5);
183
-
184
- &:hover {
185
- @include media.pc {
186
- background-color: var(--P-10);
187
- }
188
- }
189
- }
190
-
191
- &--year {
192
- height: 40px;
193
- display: flex;
194
- align-items: center;
195
- justify-content: center;
196
- }
197
-
198
- &--selected {
199
- color: var(--white);
200
- background-color: var(--P-50) !important;
201
- }
202
-
203
- &--tile {
204
- display: flex;
205
- align-items: center;
206
- justify-content: center;
207
- min-height: 40px;
208
- color: var(--G-80);
209
- width: 100%;
210
- background-color: var(--white);
211
- border-top: var(--P-50);
212
- }
213
- }
214
- }
package/src/Calendar/scss/_variables.scss DELETED
@@ -1,91 +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
- }
package/src/Calendar/scss/main.scss DELETED
@@ -1,3 +0,0 @@
1
- @import "variables";
2
- @import "calendar";
3
- @import "tile";