@jk-core/components 0.1.11 → 0.1.12

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.
@@ -1,220 +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
- &:disabled {
57
- color: var(--G-40) !important;
58
- background-color: transparent !important;
59
- cursor: default;
60
- }
61
-
62
- &:active {
63
- background-color: var(--G-10);
64
- }
65
-
66
- &--today {
67
- color: var(--P-50);
68
- font-weight: 600;
69
- }
70
-
71
- &--selected {
72
- background-color: var(--P-50) !important;
73
- color: var(--white) !important;
74
- font-weight: 600;
75
- }
76
-
77
- &--before {
78
- color: var(--G-40);
79
- }
80
-
81
- &--tile {
82
- border-radius: 10px;
83
- gap: 5px;
84
- }
85
- }
86
- }
87
-
88
- .month-tile {
89
- min-height: 310px;
90
- padding: 5px;
91
- background-color: var(--white);
92
- display: grid;
93
- grid-template-columns: repeat(3, 1fr);
94
- grid-template-rows: repeat(4, 1fr);
95
- gap: 5px;
96
-
97
- &__month {
98
- display: flex;
99
- flex-direction: column;
100
- justify-content: center;
101
- align-items: center;
102
- padding: 5px;
103
- border-radius: 10px;
104
-
105
- svg {
106
- width: 15px;
107
- height: 15px;
108
- cursor: pointer;
109
- }
110
-
111
- &:hover {
112
- @include media.pc {
113
- background-color: var(--G-5);
114
- }
115
- }
116
-
117
- &:active {
118
- background-color: var(--G-10);
119
- }
120
-
121
- &--selected {
122
- background-color: var(--P-50) !important;
123
- color: var(--white) !important;
124
- }
125
-
126
- &--today {
127
- color: var(--P-50);
128
- font-weight: 600;
129
- }
130
-
131
- &--tile {
132
- justify-content: flex-start;
133
- gap: 5px;
134
- }
135
- }
136
- }
137
-
138
- .year-tile {
139
- min-height: 310px;
140
- padding: 5px;
141
- background-color: var(--white);
142
- position: relative;
143
- height: 310px;
144
- display: flex;
145
- flex-direction: column;
146
- align-items: center;
147
- overflow: auto;
148
- gap: 10px;
149
-
150
- &::-webkit-scrollbar {
151
- display: none;
152
- }
153
-
154
- &__blank {
155
- height: calc(50% - 40px);
156
- flex-shrink: 0;
157
-
158
- &:last-child {
159
- height: 50%;
160
- }
161
- }
162
-
163
- &__year {
164
- min-width: 50%;
165
- display: flex;
166
- flex-direction: column;
167
- align-items: center;
168
- justify-content: center;
169
- min-height: 40px;
170
- border-radius: 6px;
171
- flex-shrink: 0;
172
- overflow: hidden;
173
- font-weight: 400;
174
- font-size: 1.2em;
175
-
176
- &:hover {
177
- @include media.pc {
178
- background-color: var(--P-5);
179
- }
180
- }
181
-
182
- &:active {
183
- background-color: var(--P-10);
184
- }
185
-
186
- &--border {
187
- border: 1px solid var(--G-30);
188
- background-color: var(--P-5);
189
-
190
- &:hover {
191
- @include media.pc {
192
- background-color: var(--P-10);
193
- }
194
- }
195
- }
196
-
197
- &--year {
198
- height: 40px;
199
- display: flex;
200
- align-items: center;
201
- justify-content: center;
202
- }
203
-
204
- &--selected {
205
- color: var(--white);
206
- background-color: var(--P-50) !important;
207
- }
208
-
209
- &--tile {
210
- display: flex;
211
- align-items: center;
212
- justify-content: center;
213
- min-height: 40px;
214
- color: var(--G-80);
215
- width: 100%;
216
- background-color: var(--white);
217
- border-top: var(--P-50);
218
- }
219
- }
220
- }
@@ -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
- }
@@ -1,3 +0,0 @@
1
- @import "variables";
2
- @import "calendar";
3
- @import "tile";