@threekit-tools/treble 0.0.21 → 0.0.22
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/package.json +1 -1
- package/tailwind-presets.js +57 -2
package/package.json
CHANGED
package/tailwind-presets.js
CHANGED
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
// eslint-disable-next-line
|
|
2
|
+
const plugin = require('tailwindcss/plugin');
|
|
3
|
+
|
|
1
4
|
// eslint-disable-next-line
|
|
2
5
|
module.exports = {
|
|
3
6
|
purge: ['./public/index.html', './src/**/*.{js,jsx,ts,tsx}'],
|
|
@@ -15,13 +18,65 @@ module.exports = {
|
|
|
15
18
|
},
|
|
16
19
|
boxShadow: {
|
|
17
20
|
trbl: '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
|
|
18
|
-
widget: '0px 0px 4px rgb(0 0 0 / 25%)',
|
|
19
21
|
wishlist: '0px 4px 16px rgba(0, 0, 0, 0.16)',
|
|
20
22
|
},
|
|
21
23
|
},
|
|
22
24
|
},
|
|
23
|
-
plugins: [],
|
|
24
25
|
corePlugins: {
|
|
25
26
|
// preflight: false,
|
|
26
27
|
},
|
|
28
|
+
plugins: [
|
|
29
|
+
plugin(function ({ addComponents, theme }) {
|
|
30
|
+
const tooltip = {
|
|
31
|
+
'.trbl-tooltip': {
|
|
32
|
+
paddingBottom: `${theme('spacing.2')}`,
|
|
33
|
+
width: 'max-content',
|
|
34
|
+
borderRadius: theme('borderRadius.sm'),
|
|
35
|
+
position: 'relative',
|
|
36
|
+
top: '-100%',
|
|
37
|
+
left: '50%',
|
|
38
|
+
transform: 'translate(-50%, -100%)',
|
|
39
|
+
color: 'white',
|
|
40
|
+
},
|
|
41
|
+
'.trbl-tooltip-triangle': {
|
|
42
|
+
display: 'flex',
|
|
43
|
+
flexDirection: 'row',
|
|
44
|
+
justifyContent: 'space-around',
|
|
45
|
+
|
|
46
|
+
'& > div': {
|
|
47
|
+
width: `${theme('spacing.0')}`,
|
|
48
|
+
height: `${theme('spacing.0')}`,
|
|
49
|
+
borderLeft: '8px solid transparent',
|
|
50
|
+
borderRight: '8px solid transparent',
|
|
51
|
+
borderTop: '8px solid rgba(0, 0, 0, 0.6)',
|
|
52
|
+
overflow: 'hidden',
|
|
53
|
+
pointerEvents: 'none',
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
};
|
|
57
|
+
|
|
58
|
+
addComponents(tooltip);
|
|
59
|
+
}),
|
|
60
|
+
plugin(function ({ addComponents, theme }) {
|
|
61
|
+
const widgetBtn = {
|
|
62
|
+
'.trbl-wgt-btn': {
|
|
63
|
+
borderRadius: `${theme('borderRadius.full')}`,
|
|
64
|
+
height: '40px',
|
|
65
|
+
width: '40px',
|
|
66
|
+
border: 'none',
|
|
67
|
+
color: '#000',
|
|
68
|
+
background: 'rgba(251,251,251,0.5)',
|
|
69
|
+
overflow: 'hidden',
|
|
70
|
+
cursor: 'pointer',
|
|
71
|
+
transition: 'all 0.16s ease-in-out',
|
|
72
|
+
'&:hover': {
|
|
73
|
+
background: 'rgba(240,240,240,0.75)',
|
|
74
|
+
boxShadow: '0px 0px 4px rgb(0 0 0 / 25%)',
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
};
|
|
78
|
+
|
|
79
|
+
addComponents(widgetBtn);
|
|
80
|
+
}),
|
|
81
|
+
],
|
|
27
82
|
};
|