@wishket/design-system 1.0.1 → 1.0.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.
|
@@ -18,47 +18,6 @@ export const customizedPlugin = plugin(function ({ addUtilities, addBase }) {
|
|
|
18
18
|
},
|
|
19
19
|
});
|
|
20
20
|
addBase({
|
|
21
|
-
'@keyframes ripple': {
|
|
22
|
-
'0%': {
|
|
23
|
-
height: '30%',
|
|
24
|
-
width: '30%',
|
|
25
|
-
borderRadius: 9999,
|
|
26
|
-
opacity: 100
|
|
27
|
-
},
|
|
28
|
-
'100%': {
|
|
29
|
-
height: '100%',
|
|
30
|
-
width: '100%',
|
|
31
|
-
opacity: 0
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
'@keyframes rippleOutline': {
|
|
35
|
-
'0%': {
|
|
36
|
-
height: '30%',
|
|
37
|
-
width: '30%',
|
|
38
|
-
borderRadius: 11,
|
|
39
|
-
opacity: 100
|
|
40
|
-
},
|
|
41
|
-
'100%': {
|
|
42
|
-
height: '100%',
|
|
43
|
-
width: '100%',
|
|
44
|
-
borderRadius: 11,
|
|
45
|
-
opacity: 0
|
|
46
|
-
}
|
|
47
|
-
},
|
|
48
|
-
'@keyframes rippleOutlineSmall': {
|
|
49
|
-
'0%': {
|
|
50
|
-
height: '30%',
|
|
51
|
-
width: '30%',
|
|
52
|
-
borderRadius: 7,
|
|
53
|
-
opacity: 100
|
|
54
|
-
},
|
|
55
|
-
'100%': {
|
|
56
|
-
height: '100%',
|
|
57
|
-
width: '100%',
|
|
58
|
-
borderRadius: 7,
|
|
59
|
-
opacity: 0
|
|
60
|
-
}
|
|
61
|
-
},
|
|
62
21
|
'::-webkit-resizer': {
|
|
63
22
|
display: 'none',
|
|
64
23
|
},
|
|
@@ -16,45 +16,45 @@ module.exports = {
|
|
|
16
16
|
tablet: '720px',
|
|
17
17
|
desktop: '960px',
|
|
18
18
|
},
|
|
19
|
-
fontSize: {
|
|
20
|
-
title1: ['48px', {
|
|
21
|
-
lineHeight: '64px',
|
|
22
|
-
}],
|
|
23
|
-
title2: ['32px', {
|
|
24
|
-
lineHeight: '48px',
|
|
25
|
-
}],
|
|
26
|
-
title3: ['24px', {
|
|
27
|
-
lineHeight: '36px',
|
|
28
|
-
}],
|
|
29
|
-
subTitle1: ['20px', {
|
|
30
|
-
lineHeight: '30px',
|
|
31
|
-
}],
|
|
32
|
-
subTitle2: ['18px', {
|
|
33
|
-
lineHeight: '28px',
|
|
34
|
-
}],
|
|
35
|
-
contents1: ['18px', {
|
|
36
|
-
lineHeight: '32px',
|
|
37
|
-
}],
|
|
38
|
-
contents2: ['16px', {
|
|
39
|
-
lineHeight: '30px',
|
|
40
|
-
}],
|
|
41
|
-
body1: ['16px', {
|
|
42
|
-
lineHeight: '26px',
|
|
43
|
-
}],
|
|
44
|
-
body2: ['14px', {
|
|
45
|
-
lineHeight: '24px',
|
|
46
|
-
}],
|
|
47
|
-
body3: ['13px', {
|
|
48
|
-
lineHeight: '20px',
|
|
49
|
-
}],
|
|
50
|
-
caption1: ['12px', {
|
|
51
|
-
lineHeight: '18px',
|
|
52
|
-
}],
|
|
53
|
-
caption2: ['11px', {
|
|
54
|
-
lineHeight: '14px',
|
|
55
|
-
}],
|
|
56
|
-
},
|
|
57
19
|
extend: {
|
|
20
|
+
fontSize: {
|
|
21
|
+
title1: ['48px', {
|
|
22
|
+
lineHeight: '64px',
|
|
23
|
+
}],
|
|
24
|
+
title2: ['32px', {
|
|
25
|
+
lineHeight: '48px',
|
|
26
|
+
}],
|
|
27
|
+
title3: ['24px', {
|
|
28
|
+
lineHeight: '36px',
|
|
29
|
+
}],
|
|
30
|
+
subTitle1: ['20px', {
|
|
31
|
+
lineHeight: '30px',
|
|
32
|
+
}],
|
|
33
|
+
subTitle2: ['18px', {
|
|
34
|
+
lineHeight: '28px',
|
|
35
|
+
}],
|
|
36
|
+
contents1: ['18px', {
|
|
37
|
+
lineHeight: '32px',
|
|
38
|
+
}],
|
|
39
|
+
contents2: ['16px', {
|
|
40
|
+
lineHeight: '30px',
|
|
41
|
+
}],
|
|
42
|
+
body1: ['16px', {
|
|
43
|
+
lineHeight: '26px',
|
|
44
|
+
}],
|
|
45
|
+
body2: ['14px', {
|
|
46
|
+
lineHeight: '24px',
|
|
47
|
+
}],
|
|
48
|
+
body3: ['13px', {
|
|
49
|
+
lineHeight: '20px',
|
|
50
|
+
}],
|
|
51
|
+
caption1: ['12px', {
|
|
52
|
+
lineHeight: '18px',
|
|
53
|
+
}],
|
|
54
|
+
caption2: ['11px', {
|
|
55
|
+
lineHeight: '14px',
|
|
56
|
+
}],
|
|
57
|
+
},
|
|
58
58
|
gridAutoColumns: {
|
|
59
59
|
'1fr': '1fr',
|
|
60
60
|
},
|
|
@@ -238,6 +238,49 @@ module.exports = {
|
|
|
238
238
|
'checkbox-list-item-container': '18px max-content',
|
|
239
239
|
'radio-list-item-container': '18px max-content',
|
|
240
240
|
},
|
|
241
|
+
keyframes: {
|
|
242
|
+
rippleOutlineSmall: {
|
|
243
|
+
'0%': {
|
|
244
|
+
height: '30%',
|
|
245
|
+
width: '30%',
|
|
246
|
+
borderRadius: 7,
|
|
247
|
+
opacity: 100
|
|
248
|
+
},
|
|
249
|
+
'100%': {
|
|
250
|
+
height: '100%',
|
|
251
|
+
width: '100%',
|
|
252
|
+
borderRadius: 7,
|
|
253
|
+
opacity: 0
|
|
254
|
+
}
|
|
255
|
+
},
|
|
256
|
+
rippleOutline: {
|
|
257
|
+
'0%': {
|
|
258
|
+
height: '30%',
|
|
259
|
+
width: '30%',
|
|
260
|
+
borderRadius: 11,
|
|
261
|
+
opacity: 100
|
|
262
|
+
},
|
|
263
|
+
'100%': {
|
|
264
|
+
height: '100%',
|
|
265
|
+
width: '100%',
|
|
266
|
+
borderRadius: 11,
|
|
267
|
+
opacity: 0
|
|
268
|
+
}
|
|
269
|
+
},
|
|
270
|
+
ripple: {
|
|
271
|
+
'0%': {
|
|
272
|
+
height: '30%',
|
|
273
|
+
width: '30%',
|
|
274
|
+
borderRadius: 9999,
|
|
275
|
+
opacity: 100
|
|
276
|
+
},
|
|
277
|
+
'100%': {
|
|
278
|
+
height: '100%',
|
|
279
|
+
width: '100%',
|
|
280
|
+
opacity: 0
|
|
281
|
+
}
|
|
282
|
+
}
|
|
283
|
+
}
|
|
241
284
|
},
|
|
242
285
|
},
|
|
243
286
|
plugins: [
|